Differentiate unavailable tools by reason (#4916)

## Summary
- track endpoint disable reasons server-side and expose them through a
new `/api/v1/config/endpoints-availability` API that the frontend can
consume
- refresh the web UI tool management logic to cache endpoint details,
compute per-tool availability metadata, and show reason-specific
messaging (admin disabled vs missing dependency) when a tool cannot be
launched
- add the missing en-GB translations for the new unavailability labels
so the UI copy reflects the new distinction
<img width="1156" height="152" alt="image"
src="https://github.com/user-attachments/assets/b54eda37-fe5c-42f9-bd5f-9ee00398d1ae"
/>


<img width="930" height="168" alt="image"
src="https://github.com/user-attachments/assets/47c07ffa-adb7-4ce3-910c-b6ff73f6f993"
/>


## Testing
- `npm run typecheck:core` *(fails:
frontend/src/core/components/shared/LocalIcon.tsx expects
../../../assets/material-symbols-icons.json, which is not present in
this environment)*

------
[Codex
Task](https://chatgpt.com/codex/tasks/task_b_6919af7a493c8328bb5ac3d07e65452b)

frontend/src/core/components/tools/convert/ConvertSettings.tsx

@@ -8,6 +8,7 @@ import { getConversionEndpoints } from "@app/data/toolsTaxonomy";
 import { useFileSelection } from "@app/contexts/FileContext";
 import { useFileState } from "@app/contexts/FileContext";
 import { detectFileExtension } from "@app/utils/fileUtils";
+import { usePreferences } from "@app/contexts/PreferencesContext";
 import GroupedFormatDropdown from "@app/components/tools/convert/GroupedFormatDropdown";
 import ConvertToImageSettings from "@app/components/tools/convert/ConvertToImageSettings";
 import ConvertFromImageSettings from "@app/components/tools/convert/ConvertFromImageSettings";
@@ -47,8 +48,12 @@ const ConvertSettings = ({
   const { setSelectedFiles } = useFileSelection();
   const { state, selectors } = useFileState();
   const activeFiles = state.files.ids;
+  const { preferences } = usePreferences();
 
-  const allEndpoints = useMemo(() => getConversionEndpoints(EXTENSION_TO_ENDPOINT), []);
+  const allEndpoints = useMemo(() => {
+    const endpoints = getConversionEndpoints(EXTENSION_TO_ENDPOINT);
+    return endpoints;
+  }, []);
 
   const { endpointStatus } = useMultipleEndpointsEnabled(allEndpoints);
 
@@ -56,7 +61,8 @@ const ConvertSettings = ({
     const endpointKey = EXTENSION_TO_ENDPOINT[fromExt]?.[toExt];
     if (!endpointKey) return false;
 
-    return endpointStatus[endpointKey] === true;
+    const isAvailable = endpointStatus[endpointKey] === true;
+    return isAvailable;
   };
 
   // Enhanced FROM options with endpoint availability
@@ -74,6 +80,12 @@ const ConvertSettings = ({
       };
     });
 
+    // Filter out unavailable source formats if preference is enabled
+    let filteredOptions = baseOptions;
+    if (preferences.hideUnavailableConversions) {
+      filteredOptions = baseOptions.filter(opt => opt.enabled !== false);
+    }
+
     // Add dynamic format option if current selection is a file-<extension> format
     if (parameters.fromExtension && parameters.fromExtension.startsWith('file-')) {
       const extension = parameters.fromExtension.replace('file-', '');
@@ -85,22 +97,32 @@ const ConvertSettings = ({
       };
 
       // Add the dynamic option at the beginning
-      return [dynamicOption, ...baseOptions];
+      return [dynamicOption, ...filteredOptions];
     }
 
-    return baseOptions;
-  }, [parameters.fromExtension, endpointStatus]);
+    return filteredOptions;
+  }, [parameters.fromExtension, endpointStatus, preferences.hideUnavailableConversions]);
 
   // Enhanced TO options with endpoint availability
   const enhancedToOptions = useMemo(() => {
     if (!parameters.fromExtension) return [];
 
     const availableOptions = getAvailableToExtensions(parameters.fromExtension) || [];
-    return availableOptions.map(option => ({
-      ...option,
-      enabled: isConversionAvailable(parameters.fromExtension, option.value)
-    }));
-  }, [parameters.fromExtension, endpointStatus]);
+    const enhanced = availableOptions.map(option => {
+      const enabled = isConversionAvailable(parameters.fromExtension, option.value);
+      return {
+        ...option,
+        enabled
+      };
+    });
+
+    // Filter out unavailable conversions if preference is enabled
+    if (preferences.hideUnavailableConversions) {
+      return enhanced.filter(opt => opt.enabled !== false);
+    }
+
+    return enhanced;
+  }, [parameters.fromExtension, endpointStatus, preferences.hideUnavailableConversions]);
 
   const resetParametersToDefaults = () => {
     onParameterChange('imageOptions', {

frontend/src/core/components/tools/fullscreen/CompactToolItem.tsx

@@ -5,7 +5,7 @@ import { Tooltip } from '@app/components/shared/Tooltip';
 import HotkeyDisplay from '@app/components/hotkeys/HotkeyDisplay';
 import FavoriteStar from '@app/components/tools/toolPicker/FavoriteStar';
 import { ToolRegistryEntry, getSubcategoryColor } from '@app/data/toolsTaxonomy';
-import { getIconBackground, getIconStyle, getItemClasses, useToolMeta } from '@app/components/tools/fullscreen/shared';
+import { getIconBackground, getIconStyle, getItemClasses, useToolMeta, getDisabledLabel } from '@app/components/tools/fullscreen/shared';
 
 interface CompactToolItemProps {
   id: string;
@@ -17,7 +17,7 @@ interface CompactToolItemProps {
 
 const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected, onClick, tooltipPortalTarget }) => {
   const { t } = useTranslation();
-  const { binding, isFav, toggleFavorite, disabled } = useToolMeta(id, tool);
+  const { binding, isFav, toggleFavorite, disabled, disabledReason } = useToolMeta(id, tool);
   const categoryColor = getSubcategoryColor(tool.subcategoryId);
   const iconBg = getIconBackground(categoryColor, false);
   const iconClasses = 'tool-panel__fullscreen-list-icon';
@@ -73,9 +73,12 @@ const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected,
     </button>
   );
 
+  const { key: disabledKey, fallback: disabledFallback } = getDisabledLabel(disabledReason);
+  const disabledMessage = t(disabledKey, disabledFallback);
+
   const tooltipContent = disabled
     ? (
-      <span><strong>{t('toolPanel.fullscreen.comingSoon', 'Coming soon:')}</strong> {tool.description}</span>
+      <span><strong>{disabledMessage}</strong> {tool.description}</span>
     )
     : (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>

frontend/src/core/components/tools/fullscreen/DetailedToolItem.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import HotkeyDisplay from '@app/components/hotkeys/HotkeyDisplay';
 import FavoriteStar from '@app/components/tools/toolPicker/FavoriteStar';
 import { ToolRegistryEntry, getSubcategoryColor } from '@app/data/toolsTaxonomy';
-import { getIconBackground, getIconStyle, getItemClasses, useToolMeta } from '@app/components/tools/fullscreen/shared';
+import { getIconBackground, getIconStyle, getItemClasses, useToolMeta, getDisabledLabel } from '@app/components/tools/fullscreen/shared';
 
 interface DetailedToolItemProps {
   id: string;
@@ -15,7 +15,7 @@ interface DetailedToolItemProps {
 
 const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelected, onClick }) => {
   const { t } = useTranslation();
-  const { binding, isFav, toggleFavorite, disabled } = useToolMeta(id, tool);
+  const { binding, isFav, toggleFavorite, disabled, disabledReason } = useToolMeta(id, tool);
 
   const categoryColor = getSubcategoryColor(tool.subcategoryId);
   const iconBg = getIconBackground(categoryColor, true);
@@ -34,6 +34,9 @@ const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelecte
     iconNode = tool.icon;
   }
 
+  const { key: disabledKey, fallback: disabledFallback } = getDisabledLabel(disabledReason);
+  const disabledMessage = t(disabledKey, disabledFallback);
+
   return (
     <button
       type="button"
@@ -60,7 +63,12 @@ const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelecte
           {tool.name}
         </Text>
         <Text size="sm" c="dimmed" className="tool-panel__fullscreen-description">
-          {tool.description}
+          {disabled ? (
+            <>
+              <strong>{disabledMessage} </strong>
+              {tool.description}
+            </>
+          ) : tool.description}
         </Text>
         {binding && (
           <div className="tool-panel__fullscreen-shortcut">

frontend/src/core/components/tools/fullscreen/shared.ts

@@ -2,6 +2,7 @@ import { useHotkeys } from '@app/contexts/HotkeyContext';
 import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
 import { ToolRegistryEntry } from '@app/data/toolsTaxonomy';
 import { ToolId } from '@app/types/toolId';
+import type { ToolAvailabilityMap } from '@app/hooks/useToolManagement';
 
 export const getItemClasses = (isDetailed: boolean): string => {
   return isDetailed ? 'tool-panel__fullscreen-item--detailed' : '';
@@ -22,23 +23,67 @@ export const getIconStyle = (): Record<string, string> => {
   return {};
 };
 
-export const isToolDisabled = (id: string, tool: ToolRegistryEntry): boolean => {
-  return !tool.component && !tool.link && id !== 'read' && id !== 'multiTool';
+export type ToolDisabledReason = 'comingSoon' | 'disabledByAdmin' | 'missingDependency' | 'unknownUnavailable' | null;
+
+export const getToolDisabledReason = (
+  id: string,
+  tool: ToolRegistryEntry,
+  toolAvailability?: ToolAvailabilityMap
+): ToolDisabledReason => {
+  if (!tool.component && !tool.link && id !== 'read' && id !== 'multiTool') {
+    return 'comingSoon';
+  }
+
+  const availabilityInfo = toolAvailability?.[id as ToolId];
+  if (availabilityInfo && availabilityInfo.available === false) {
+    if (availabilityInfo.reason === 'missingDependency') {
+      return 'missingDependency';
+    }
+    if (availabilityInfo.reason === 'disabledByAdmin') {
+      return 'disabledByAdmin';
+    }
+    return 'unknownUnavailable';
+  }
+
+  return null;
+};
+
+export const getDisabledLabel = (
+  disabledReason: ToolDisabledReason
+): { key: string; fallback: string } => {
+  if (disabledReason === 'missingDependency') {
+    return {
+      key: 'toolPanel.fullscreen.unavailableDependency',
+      fallback: 'Unavailable - required tool missing on server:'
+    };
+  }
+  if (disabledReason === 'disabledByAdmin' || disabledReason === 'unknownUnavailable') {
+    return {
+      key: 'toolPanel.fullscreen.unavailable',
+      fallback: 'Disabled by server administrator:'
+    };
+  }
+  return {
+    key: 'toolPanel.fullscreen.comingSoon',
+    fallback: 'Coming soon:'
+  };
 };
 
 export function useToolMeta(id: string, tool: ToolRegistryEntry) {
   const { hotkeys } = useHotkeys();
-  const { isFavorite, toggleFavorite } = useToolWorkflow();
+  const { isFavorite, toggleFavorite, toolAvailability } = useToolWorkflow();
 
   const isFav = isFavorite(id as ToolId);
   const binding = hotkeys[id as ToolId];
-  const disabled = isToolDisabled(id, tool);
+  const disabledReason = getToolDisabledReason(id, tool, toolAvailability);
+  const disabled = disabledReason !== null;
 
   return {
     binding,
     isFav,
     toggleFavorite: () => toggleFavorite(id as ToolId),
     disabled,
+    disabledReason,
   };
 }
 

frontend/src/core/components/tools/toolPicker/ToolButton.tsx

@@ -12,6 +12,7 @@ import HotkeyDisplay from "@app/components/hotkeys/HotkeyDisplay";
 import FavoriteStar from "@app/components/tools/toolPicker/FavoriteStar";
 import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
 import { ToolId } from "@app/types/toolId";
+import { getToolDisabledReason, getDisabledLabel } from "@app/components/tools/fullscreen/shared";
 
 interface ToolButtonProps {
   id: ToolId;
@@ -26,12 +27,12 @@ interface ToolButtonProps {
 
 const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, disableNavigation = false, matchedSynonym, hasStars = false }) => {
   const { t } = useTranslation();
-  // Special case: read and multiTool are navigational tools that are always available
-  const isUnavailable = !tool.component && !tool.link && id !== 'read' && id !== 'multiTool';
+  const { isFavorite, toggleFavorite, toolAvailability } = useToolWorkflow();
+  const disabledReason = getToolDisabledReason(id, tool, toolAvailability);
+  const isUnavailable = disabledReason !== null;
   const { hotkeys } = useHotkeys();
   const binding = hotkeys[id];
   const { getToolNavigation } = useToolNavigation();
-  const { isFavorite, toggleFavorite } = useToolWorkflow();
   const fav = isFavorite(id as ToolId);
 
   const handleClick = (id: ToolId) => {
@@ -48,8 +49,11 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
   // Get navigation props for URL support (only if navigation is not disabled)
   const navProps = !isUnavailable && !tool.link && !disableNavigation ? getToolNavigation(id, tool) : null;
 
+  const { key: disabledKey, fallback: disabledFallback } = getDisabledLabel(disabledReason);
+  const disabledMessage = t(disabledKey, disabledFallback);
+
   const tooltipContent = isUnavailable
-    ? (<span><strong>Coming soon:</strong> {tool.description}</span>)
+    ? (<span><strong>{disabledMessage}</strong> {tool.description}</span>)
     : (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
         <span>{tool.description}</span>