Restructure frontend code to allow for extensions (#4721)

# Description of Changes
Move frontend code into `core` folder and add infrastructure for
`proprietary` folder to include premium, non-OSS features

frontend/src/core/components/shared/ToolChain.tsx

@@ -0,0 +1,161 @@
+/**
+ * Reusable ToolChain component with smart truncation and tooltip expansion
+ * Used across FileListItem, FileDetails, and FileThumbnail for consistent display
+ */
+
+import React from 'react';
+import { Text, Tooltip, Badge, Group } from '@mantine/core';
+import { ToolOperation } from '@app/types/file';
+import { useTranslation } from 'react-i18next';
+import { ToolId } from '@app/types/toolId';
+
+interface ToolChainProps {
+  toolChain: ToolOperation[];
+  maxWidth?: string;
+  displayStyle?: 'text' | 'badges' | 'compact';
+  size?: 'xs' | 'sm' | 'md';
+  color?: string;
+}
+
+const ToolChain: React.FC<ToolChainProps> = ({
+  toolChain,
+  maxWidth = '100%',
+  displayStyle = 'text',
+  size = 'xs',
+  color = 'var(--mantine-color-blue-7)'
+}) => {
+  if (!toolChain || toolChain.length === 0) return null;
+
+  const { t } = useTranslation();
+
+  const toolIds = toolChain.map(tool => tool.toolId);
+
+  const getToolName = (toolId: ToolId) => {
+    return t(`home.${toolId}.title`, toolId);
+  };
+
+  // Create full tool chain for tooltip
+  const fullChainDisplay = displayStyle === 'badges' ? (
+    <Group gap="xs" wrap="wrap">
+      {toolChain.map((tool, index) => (
+        <React.Fragment key={`${tool.toolId}-${index}`}>
+          <Badge size="sm" variant="light" color="blue">
+            {getToolName(tool.toolId)}
+          </Badge>
+          {index < toolChain.length - 1 && (
+            <Text size="sm" c="dimmed">→</Text>
+          )}
+        </React.Fragment>
+      ))}
+    </Group>
+  ) : (
+    <Text size="sm">{toolIds.map(getToolName).join(' → ')}</Text>
+  );
+
+  // Create truncated display based on available space
+  const getTruncatedDisplay = () => {
+    if (toolIds.length <= 2) {
+      // Show all tools if 2 or fewer
+      return { text: toolIds.map(getToolName).join(' → '), isTruncated: false };
+    } else {
+      // Show first tool ... last tool for longer chains
+      return {
+        text: `${getToolName(toolIds[0])} → +${toolIds.length-2} → ${getToolName(toolIds[toolIds.length - 1])}`,
+        isTruncated: true,
+      };
+    }
+  };
+
+  const { text: truncatedText, isTruncated } = getTruncatedDisplay();
+
+  // Compact style for very small spaces
+  if (displayStyle === 'compact') {
+    const compactText = toolIds.length === 1 ? getToolName(toolIds[0]) : `${toolIds.length} tools`;
+    const isCompactTruncated = toolIds.length > 1;
+
+    const compactElement = (
+      <Text
+        size={size}
+        style={{
+          color,
+          fontWeight: 500,
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          maxWidth: `${maxWidth}`,
+          cursor: isCompactTruncated ? 'help' : 'default'
+        }}
+      >
+        {compactText}
+      </Text>
+    );
+
+    return isCompactTruncated ? (
+      <Tooltip label={fullChainDisplay} multiline withinPortal>
+        {compactElement}
+      </Tooltip>
+    ) : compactElement;
+  }
+
+  // Badge style for file details
+  if (displayStyle === 'badges') {
+    const isBadgesTruncated = toolChain.length > 3;
+
+    const badgesElement = (
+      <div style={{ maxWidth: `${maxWidth}`, overflow: 'hidden' }}>
+        <Group gap="2px" wrap="nowrap">
+          {toolChain.slice(0, 3).map((tool, index) => (
+            <React.Fragment key={`${tool.toolId}-${index}`}>
+              <Badge size={size} variant="light" color="blue">
+                {getToolName(tool.toolId)}
+              </Badge>
+              {index < Math.min(toolChain.length - 1, 2) && (
+                <Text size="xs" c="dimmed">→</Text>
+              )}
+            </React.Fragment>
+          ))}
+          {toolChain.length > 3 && (
+            <>
+              <Text size="xs" c="dimmed">...</Text>
+              <Badge size={size} variant="light" color="blue">
+                {getToolName(toolChain[toolChain.length - 1].toolId)}
+              </Badge>
+            </>
+          )}
+        </Group>
+      </div>
+    );
+
+    return isBadgesTruncated ? (
+      <Tooltip label={`${toolIds.map(getToolName).join(' → ')}`} withinPortal>
+        {badgesElement}
+      </Tooltip>
+    ) : badgesElement;
+  }
+
+  // Text style (default) for file list items
+  const textElement = (
+    <Text
+      size={size}
+      style={{
+        color,
+        fontWeight: 500,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        maxWidth: `${maxWidth}`,
+        cursor: isTruncated ? 'help' : 'default'
+      }}
+    >
+      {truncatedText}
+    </Text>
+  );
+
+  return isTruncated ? (
+    <Tooltip label={fullChainDisplay} withinPortal>
+      {textElement}
+    </Tooltip>
+  ) : textElement;
+};
+
+export default ToolChain;