@nextclaw/ui 0.15.3 → 0.15.5

package/src/shared/components/common/brand-header.tsx

@@ -1,8 +1,9 @@
 import type { UpdateSnapshot } from '@nextclaw/shared';
 import { runtimeUpdateManager, useRuntimeUpdateStore } from '@/features/system-status';
 import { useAppMeta } from '@/shared/hooks/use-app-meta';
-import { type ReactNode, useState } from 'react';
+import type { ReactNode } from 'react';
 import { RuntimeStatusEntry } from '@/app/components/layout/runtime-status-entry';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shared/components/ui/tooltip';
 import { t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
 
@@ -57,33 +58,26 @@ function BrandVersionLabel({
   versionLabel: string;
   density: BrandHeaderProps['density'];
 }) {
-  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
   const isChromeDensity = density === 'chrome';
 
   return (
-    <span
-      className="relative min-w-0 flex-1"
-      onMouseEnter={() => setIsTooltipOpen(true)}
-      onMouseLeave={() => setIsTooltipOpen(false)}
-      onFocus={() => setIsTooltipOpen(true)}
-      onBlur={() => setIsTooltipOpen(false)}
-    >
-      <span
-        tabIndex={0}
-        aria-label={versionLabel}
-        className={cn(
-          'block min-w-0 truncate font-medium text-gray-500 outline-none',
-          isChromeDensity ? 'text-[12px]' : 'text-[12px]',
-        )}
-      >
-        {versionLabel}
-      </span>
-      {isTooltipOpen ? (
-        <span className="pointer-events-none absolute left-0 top-full z-[var(--z-tooltip)] mt-1 w-max max-w-none whitespace-nowrap rounded-md border bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground shadow-md">
-          {versionLabel}
-        </span>
-      ) : null}
-    </span>
+    <TooltipProvider delayDuration={250}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            tabIndex={0}
+            aria-label={versionLabel}
+            className={cn(
+              'block min-w-0 flex-1 truncate font-medium text-gray-500 outline-none',
+              isChromeDensity ? 'text-[12px]' : 'text-[12px]',
+            )}
+          >
+            {versionLabel}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" className="text-xs">{versionLabel}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }
 
@@ -149,15 +143,21 @@ function RuntimeUpdateIssueIcon({ snapshot }: { snapshot: UpdateSnapshot }) {
     : null;
   const tooltip = [title, rootCause, diagnostic, recoveryCommand].filter(Boolean).join('\n');
   return (
-    <span
-      role="img"
-      aria-label={title}
-      title={tooltip}
-      tabIndex={0}
-      className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-amber-50 text-[13px] font-bold leading-none text-amber-700 ring-1 ring-amber-100"
-    >
-      !
-    </span>
+    <TooltipProvider delayDuration={250}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            role="img"
+            aria-label={title}
+            tabIndex={0}
+            className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-amber-50 text-[13px] font-bold leading-none text-amber-700 ring-1 ring-amber-100 outline-none focus-visible:ring-2 focus-visible:ring-amber-300"
+          >
+            !
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" className="max-w-80 whitespace-pre-line break-words text-xs leading-relaxed">{tooltip}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }
 

package/src/shared/components/doc-browser/__tests__/doc-browser-context.test.tsx

@@ -80,6 +80,25 @@ describe('DocBrowserManager layout notifications', () => {
 
     expect(onRightPanelOpened).toHaveBeenCalledTimes(1);
   });
+
+  it('persists the docked global right panel width across rehydration', async () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.setDockedWidth(610);
+    });
+
+    await waitFor(() => {
+      expect(readPersistedDocBrowserSnapshot()).toMatchObject({
+        state: { snapshot: { dockedWidth: 610 } },
+      });
+    });
+
+    const savedState = window.localStorage.getItem(docBrowserStorageKey);
+    await resetMemoryThenRehydrate(savedState);
+
+    expect(useDocBrowserStore.getState().snapshot.dockedWidth).toBe(610);
+  });
 });
 
 describe('DocBrowserProvider dedupe keys', () => {

package/src/shared/components/doc-browser/__tests__/doc-browser.test.tsx

@@ -24,6 +24,7 @@ const { docBrowserState } = vi.hoisted<{
   docBrowserState: {
     isOpen: true,
     mode: "docked" as "docked" | "floating",
+    dockedWidth: 420,
     tabs: [
       {
         id: "docs",
@@ -58,6 +59,7 @@ const { docBrowserState } = vi.hoisted<{
     openNewTab: vi.fn(),
     close: vi.fn(),
     toggleMode: vi.fn(),
+    setDockedWidth: vi.fn(),
     goBack: vi.fn(),
     goForward: vi.fn(),
     navigate: vi.fn(),
@@ -156,6 +158,20 @@ describe("DocBrowser", () => {
     expect(screen.getByTestId("resizable-right-panel-handle")).toBeTruthy();
   });
 
+  it("commits the resized docked width to the global browser state owner", () => {
+    render(<DocBrowser />);
+
+    firePointerEvent(
+      screen.getByTestId("resizable-right-panel-handle"),
+      "pointerdown",
+      { clientX: 800, pointerId: 1 },
+    );
+    firePointerEvent(window, "pointermove", { clientX: 620, pointerId: 1 });
+    firePointerEvent(window, "pointerup", { clientX: 620, pointerId: 1 });
+
+    expect(docBrowserState.setDockedWidth).toHaveBeenCalledWith(600);
+  });
+
   it("uses a full viewport panel without desktop resize controls in fullscreen mode", () => {
     render(<DocBrowser displayMode="fullscreen" />);
 

package/src/shared/components/doc-browser/doc-browser-context.tsx

@@ -57,6 +57,7 @@ export function DocBrowserProvider({
     openNewTab: manager.openNewTab,
     close: manager.close,
     toggleMode: manager.toggleMode,
+    setDockedWidth: manager.setDockedWidth,
     navigate: manager.navigate,
     syncUrl: manager.syncUrl,
     goBack: manager.goBack,

package/src/shared/components/doc-browser/doc-browser.tsx

@@ -28,6 +28,10 @@ import { ResizableRightPanel } from '@/shared/components/resizable-right-panel/r
 import { cn } from '@/shared/lib/utils';
 import { t } from '@/shared/lib/i18n';
 import { GripVertical } from 'lucide-react';
+import {
+  DOC_BROWSER_DOCKED_MAX_WIDTH,
+  DOC_BROWSER_DOCKED_MIN_WIDTH,
+} from '@/shared/components/doc-browser/utils/doc-browser-state.utils';
 
 type DocBrowserProps = {
   customTabRenderers?: DocBrowserCustomTabRenderers;
@@ -159,6 +163,7 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
   const {
     isOpen,
     mode,
+    dockedWidth,
     tabs,
     activeTabId,
     activeHistory,
@@ -169,6 +174,7 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
     openNewTab,
     close,
     toggleMode,
+    setDockedWidth,
     goBack,
     goForward,
     navigate,
@@ -386,9 +392,11 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
     return (
       <ResizableRightPanel
         data-testid="doc-browser-panel"
-        defaultWidth={420}
-        minWidth={320}
-        maxWidth={860}
+        defaultWidth={dockedWidth}
+        width={dockedWidth}
+        minWidth={DOC_BROWSER_DOCKED_MIN_WIDTH}
+        maxWidth={DOC_BROWSER_DOCKED_MAX_WIDTH}
+        onWidthCommit={setDockedWidth}
       >
         {panelContent}
       </ResizableRightPanel>

package/src/shared/components/doc-browser/managers/doc-browser.manager.ts

@@ -11,6 +11,7 @@ import {
   createDocBrowserActiveHistoryEntry,
   createDefaultDocBrowserState,
   createDocBrowserTab,
+  normalizeDocBrowserDockedWidth,
 } from '@/shared/components/doc-browser/utils/doc-browser-state.utils';
 import {
   DOC_BROWSER_HOME_TAB_KIND,
@@ -297,6 +298,10 @@ export class DocBrowserManager {
     this.onRightPanelOpened?.();
   };
 
+  readonly setDockedWidth = (width: number): void => {
+    this.setSnapshot((prev) => ({ ...prev, dockedWidth: normalizeDocBrowserDockedWidth(width) }));
+  };
+
   readonly navigate = (url: string): void => {
     this.setSnapshot((prev) => {
       if (!prev.tabs.length) {

package/src/shared/components/doc-browser/stores/doc-browser.store.ts

@@ -8,7 +8,10 @@ import type {
   DocBrowserStateUpdate,
   DocBrowserTab,
 } from '@/shared/components/doc-browser/types/doc-browser.types';
-import { createDefaultDocBrowserState } from '@/shared/components/doc-browser/utils/doc-browser-state.utils';
+import {
+  createDefaultDocBrowserState,
+  normalizeDocBrowserDockedWidth,
+} from '@/shared/components/doc-browser/utils/doc-browser-state.utils';
 
 const DOC_BROWSER_STORAGE_KEY = 'nextclaw.doc-browser.state';
 const DOC_BROWSER_STORAGE_VERSION = 1;
@@ -168,6 +171,7 @@ function normalizePersistedDocBrowserState(value: unknown): DocBrowserState | nu
   return {
     isOpen: value.isOpen === true,
     mode: isDocBrowserMode(value.mode) ? value.mode : 'docked',
+    dockedWidth: normalizeDocBrowserDockedWidth(value.dockedWidth),
     tabs,
     activeTabId: resolvedActiveTabId,
     activeHistory: resolvedActiveHistory,
@@ -198,6 +202,7 @@ export const useDocBrowserStore = create<DocBrowserStore>()(
         snapshot: {
           isOpen: state.snapshot.isOpen,
           mode: state.snapshot.mode,
+          dockedWidth: state.snapshot.dockedWidth,
           tabs: state.snapshot.tabs.slice(-DOC_BROWSER_MAX_PERSISTED_TABS),
           activeTabId: state.snapshot.activeTabId,
           activeHistory: state.snapshot.activeHistory,

package/src/shared/components/doc-browser/types/doc-browser.types.ts

@@ -76,6 +76,7 @@ export type DocBrowserOpenOptions = {
 export type DocBrowserState = {
   isOpen: boolean;
   mode: DocBrowserMode;
+  dockedWidth: number;
   tabs: DocBrowserTab[];
   activeTabId: string;
   activeHistory: DocBrowserActiveHistoryEntry[];
@@ -90,6 +91,7 @@ export type DocBrowserActions = {
   openNewTab: () => void;
   close: () => void;
   toggleMode: () => void;
+  setDockedWidth: (width: number) => void;
   navigate: (url: string) => void;
   syncUrl: (url: string) => void;
   goBack: () => void;

package/src/shared/components/doc-browser/utils/doc-browser-state.utils.ts

@@ -12,8 +12,18 @@ import {
 } from './doc-browser-url.utils';
 import { t } from '@/shared/lib/i18n';
 
+export const DOC_BROWSER_DOCKED_DEFAULT_WIDTH = 420;
+export const DOC_BROWSER_DOCKED_MIN_WIDTH = 320;
+export const DOC_BROWSER_DOCKED_MAX_WIDTH = 860;
+
 let tabCounter = 0;
 
+export function normalizeDocBrowserDockedWidth(value: unknown): number {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? Math.min(DOC_BROWSER_DOCKED_MAX_WIDTH, Math.max(DOC_BROWSER_DOCKED_MIN_WIDTH, value))
+    : DOC_BROWSER_DOCKED_DEFAULT_WIDTH;
+}
+
 function nextTabId(): string {
   tabCounter += 1;
   return `doc-tab-${Date.now()}-${tabCounter}`;
@@ -58,6 +68,7 @@ export function createDefaultDocBrowserState(): DocBrowserState {
   return {
     isOpen: false,
     mode: 'docked',
+    dockedWidth: DOC_BROWSER_DOCKED_DEFAULT_WIDTH,
     tabs: [initialTab],
     activeTabId: initialTab.id,
     activeHistory: [createDocBrowserActiveHistoryEntry(initialTab)],

package/src/shared/components/file-type-icon.tsx

@@ -0,0 +1,272 @@
+import { Icon, type IconifyIcon } from "@iconify/react";
+import defaultFileIcon from "@iconify/icons-vscode-icons/default-file";
+import audioIcon from "@iconify/icons-vscode-icons/file-type-audio";
+import bunIcon from "@iconify/icons-vscode-icons/file-type-bun";
+import configIcon from "@iconify/icons-vscode-icons/file-type-config";
+import cppIcon from "@iconify/icons-vscode-icons/file-type-cpp";
+import csharpIcon from "@iconify/icons-vscode-icons/file-type-csharp";
+import cssIcon from "@iconify/icons-vscode-icons/file-type-css";
+import dockerIcon from "@iconify/icons-vscode-icons/file-type-docker";
+import dotenvIcon from "@iconify/icons-vscode-icons/file-type-dotenv";
+import eslintIcon from "@iconify/icons-vscode-icons/file-type-eslint";
+import excelIcon from "@iconify/icons-vscode-icons/file-type-excel";
+import fontIcon from "@iconify/icons-vscode-icons/file-type-font";
+import gitIcon from "@iconify/icons-vscode-icons/file-type-git";
+import goIcon from "@iconify/icons-vscode-icons/file-type-go";
+import graphqlIcon from "@iconify/icons-vscode-icons/file-type-graphql";
+import htmlIcon from "@iconify/icons-vscode-icons/file-type-html";
+import imageIcon from "@iconify/icons-vscode-icons/file-type-image";
+import javaIcon from "@iconify/icons-vscode-icons/file-type-java";
+import javascriptIcon from "@iconify/icons-vscode-icons/file-type-js";
+import jsonIcon from "@iconify/icons-vscode-icons/file-type-json";
+import kotlinIcon from "@iconify/icons-vscode-icons/file-type-kotlin";
+import licenseIcon from "@iconify/icons-vscode-icons/file-type-license";
+import luaIcon from "@iconify/icons-vscode-icons/file-type-lua";
+import makefileIcon from "@iconify/icons-vscode-icons/file-type-makefile";
+import markdownIcon from "@iconify/icons-vscode-icons/file-type-markdown";
+import npmIcon from "@iconify/icons-vscode-icons/file-type-npm";
+import pdfIcon from "@iconify/icons-vscode-icons/file-type-pdf2";
+import phpIcon from "@iconify/icons-vscode-icons/file-type-php";
+import pnpmIcon from "@iconify/icons-vscode-icons/file-type-pnpm";
+import powerpointIcon from "@iconify/icons-vscode-icons/file-type-powerpoint";
+import prettierIcon from "@iconify/icons-vscode-icons/file-type-prettier";
+import pythonIcon from "@iconify/icons-vscode-icons/file-type-python";
+import reactJavascriptIcon from "@iconify/icons-vscode-icons/file-type-reactjs";
+import reactTypescriptIcon from "@iconify/icons-vscode-icons/file-type-reactts";
+import rubyIcon from "@iconify/icons-vscode-icons/file-type-ruby";
+import rustIcon from "@iconify/icons-vscode-icons/file-type-rust";
+import sassIcon from "@iconify/icons-vscode-icons/file-type-sass";
+import shellIcon from "@iconify/icons-vscode-icons/file-type-shell";
+import sqlIcon from "@iconify/icons-vscode-icons/file-type-sql";
+import svelteIcon from "@iconify/icons-vscode-icons/file-type-svelte";
+import svgIcon from "@iconify/icons-vscode-icons/file-type-svg";
+import swiftIcon from "@iconify/icons-vscode-icons/file-type-swift";
+import tailwindIcon from "@iconify/icons-vscode-icons/file-type-tailwind";
+import textIcon from "@iconify/icons-vscode-icons/file-type-text";
+import tomlIcon from "@iconify/icons-vscode-icons/file-type-toml";
+import tsconfigIcon from "@iconify/icons-vscode-icons/file-type-tsconfig";
+import typescriptIcon from "@iconify/icons-vscode-icons/file-type-typescript";
+import videoIcon from "@iconify/icons-vscode-icons/file-type-video";
+import viteIcon from "@iconify/icons-vscode-icons/file-type-vite";
+import vitestIcon from "@iconify/icons-vscode-icons/file-type-vitest";
+import vueIcon from "@iconify/icons-vscode-icons/file-type-vue";
+import wordIcon from "@iconify/icons-vscode-icons/file-type-word";
+import xmlIcon from "@iconify/icons-vscode-icons/file-type-xml";
+import yamlIcon from "@iconify/icons-vscode-icons/file-type-yaml";
+import yarnIcon from "@iconify/icons-vscode-icons/file-type-yarn";
+import zipIcon from "@iconify/icons-vscode-icons/file-type-zip";
+import { cn } from "@/shared/lib/utils";
+
+type FileTypeIconProps = {
+  className?: string;
+  fileName: string;
+  size?: "compact" | "default";
+};
+
+type FileIconVisual = {
+  icon: IconifyIcon;
+  name: string;
+};
+
+type BundledIcon = IconifyIcon | { default: IconifyIcon };
+
+type FileIconRule = FileIconVisual & {
+  extensions: readonly string[];
+};
+
+const SPECIAL_FILE_RULES: Array<FileIconVisual & { pattern: RegExp }> = [
+  {
+    icon: dockerIcon,
+    name: "docker",
+    pattern: /^(dockerfile|\.dockerignore)$/,
+  },
+  { icon: dotenvIcon, name: "dotenv", pattern: /^\.env(?:\.|$)/ },
+  {
+    icon: gitIcon,
+    name: "git",
+    pattern: /^\.git(?:attributes|ignore|modules)$/,
+  },
+  { icon: makefileIcon, name: "makefile", pattern: /^makefile$/ },
+  { icon: licenseIcon, name: "license", pattern: /^licen[cs]e(?:\.|$)/ },
+  { icon: markdownIcon, name: "markdown", pattern: /^readme(?:\.|$)/ },
+  { icon: npmIcon, name: "npm", pattern: /^package(?:-lock)?\.json$/ },
+  {
+    icon: pnpmIcon,
+    name: "pnpm",
+    pattern: /^(pnpm-lock\.yaml|pnpm-workspace\.yaml)$/,
+  },
+  { icon: yarnIcon, name: "yarn", pattern: /^yarn\.lock$/ },
+  { icon: bunIcon, name: "bun", pattern: /^bun\.lockb?$/ },
+  {
+    icon: tsconfigIcon,
+    name: "tsconfig",
+    pattern: /^tsconfig(?:\..+)?\.json$/,
+  },
+  { icon: viteIcon, name: "vite", pattern: /^vite\.config\./ },
+  { icon: vitestIcon, name: "vitest", pattern: /^vitest(?:\..+)?\.config\./ },
+  { icon: tailwindIcon, name: "tailwind", pattern: /^tailwind\.config\./ },
+  {
+    icon: eslintIcon,
+    name: "eslint",
+    pattern: /^(eslint\.config\.|\.eslintrc)/,
+  },
+  {
+    icon: prettierIcon,
+    name: "prettier",
+    pattern: /^(prettier\.config\.|\.prettierrc)/,
+  },
+];
+
+const FILE_ICON_RULES: FileIconRule[] = [
+  { icon: reactTypescriptIcon, name: "react-typescript", extensions: ["tsx"] },
+  { icon: reactJavascriptIcon, name: "react-javascript", extensions: ["jsx"] },
+  {
+    icon: typescriptIcon,
+    name: "typescript",
+    extensions: ["ts", "mts", "cts"],
+  },
+  {
+    icon: javascriptIcon,
+    name: "javascript",
+    extensions: ["js", "mjs", "cjs"],
+  },
+  { icon: jsonIcon, name: "json", extensions: ["json", "json5", "jsonc"] },
+  { icon: markdownIcon, name: "markdown", extensions: ["md", "mdx"] },
+  { icon: htmlIcon, name: "html", extensions: ["html", "htm"] },
+  { icon: cssIcon, name: "css", extensions: ["css", "pcss", "less"] },
+  { icon: sassIcon, name: "sass", extensions: ["sass", "scss"] },
+  { icon: vueIcon, name: "vue", extensions: ["vue"] },
+  { icon: svelteIcon, name: "svelte", extensions: ["svelte"] },
+  { icon: pythonIcon, name: "python", extensions: ["py", "pyw"] },
+  { icon: goIcon, name: "go", extensions: ["go"] },
+  { icon: rustIcon, name: "rust", extensions: ["rs"] },
+  { icon: javaIcon, name: "java", extensions: ["java"] },
+  { icon: kotlinIcon, name: "kotlin", extensions: ["kt", "kts"] },
+  { icon: swiftIcon, name: "swift", extensions: ["swift"] },
+  { icon: cppIcon, name: "cpp", extensions: ["c", "cc", "cpp", "h", "hpp"] },
+  { icon: csharpIcon, name: "csharp", extensions: ["cs"] },
+  { icon: phpIcon, name: "php", extensions: ["php"] },
+  { icon: rubyIcon, name: "ruby", extensions: ["rb"] },
+  { icon: luaIcon, name: "lua", extensions: ["lua"] },
+  {
+    icon: shellIcon,
+    name: "shell",
+    extensions: ["sh", "bash", "zsh", "fish", "ps1"],
+  },
+  { icon: graphqlIcon, name: "graphql", extensions: ["graphql", "gql"] },
+  { icon: yamlIcon, name: "yaml", extensions: ["yaml", "yml"] },
+  { icon: tomlIcon, name: "toml", extensions: ["toml"] },
+  { icon: xmlIcon, name: "xml", extensions: ["xml"] },
+  { icon: sqlIcon, name: "sql", extensions: ["sql", "sqlite", "db"] },
+  { icon: svgIcon, name: "svg", extensions: ["svg"] },
+  {
+    icon: imageIcon,
+    name: "image",
+    extensions: [
+      "avif",
+      "bmp",
+      "gif",
+      "heic",
+      "ico",
+      "jpeg",
+      "jpg",
+      "png",
+      "tif",
+      "tiff",
+      "webp",
+    ],
+  },
+  {
+    icon: audioIcon,
+    name: "audio",
+    extensions: ["aac", "flac", "m4a", "mp3", "ogg", "opus", "wav", "weba"],
+  },
+  {
+    icon: videoIcon,
+    name: "video",
+    extensions: ["avi", "m4v", "mkv", "mov", "mp4", "webm", "wmv"],
+  },
+  { icon: pdfIcon, name: "pdf", extensions: ["pdf"] },
+  { icon: wordIcon, name: "word", extensions: ["doc", "docx", "odt", "rtf"] },
+  {
+    icon: excelIcon,
+    name: "excel",
+    extensions: ["csv", "numbers", "ods", "tsv", "xls", "xlsx"],
+  },
+  {
+    icon: powerpointIcon,
+    name: "powerpoint",
+    extensions: ["odp", "ppt", "pptx"],
+  },
+  {
+    icon: zipIcon,
+    name: "archive",
+    extensions: ["7z", "bz2", "gz", "rar", "tar", "tgz", "zip"],
+  },
+  {
+    icon: fontIcon,
+    name: "font",
+    extensions: ["eot", "otf", "ttf", "woff", "woff2"],
+  },
+  {
+    icon: configIcon,
+    name: "config",
+    extensions: ["cfg", "conf", "ini", "properties"],
+  },
+  { icon: textIcon, name: "text", extensions: ["log", "txt"] },
+];
+
+const DEFAULT_FILE_VISUAL: FileIconVisual = {
+  icon: defaultFileIcon,
+  name: "default",
+};
+
+function readFileName(value: string): string {
+  return value.trim().split(/[\\/]/).filter(Boolean).pop() ?? value.trim();
+}
+
+function readFileExtension(fileName: string): string {
+  return /\.([a-z0-9]{1,16})$/i.exec(fileName)?.[1]?.toLowerCase() ?? "";
+}
+
+function resolveFileIconVisual(value: string): FileIconVisual {
+  const fileName = readFileName(value).toLowerCase();
+  const specialVisual = SPECIAL_FILE_RULES.find(({ pattern }) =>
+    pattern.test(fileName),
+  );
+  if (specialVisual) {
+    return specialVisual;
+  }
+
+  const extension = readFileExtension(fileName);
+  return (
+    FILE_ICON_RULES.find(({ extensions }) => extensions.includes(extension)) ??
+    DEFAULT_FILE_VISUAL
+  );
+}
+
+function resolveBundledIcon(icon: IconifyIcon): IconifyIcon {
+  const bundledIcon = icon as unknown as BundledIcon;
+  return "body" in bundledIcon ? bundledIcon : bundledIcon.default;
+}
+
+export function FileTypeIcon({
+  className,
+  fileName,
+  size = "default",
+}: FileTypeIconProps) {
+  const visual = resolveFileIconVisual(fileName);
+
+  return (
+    <Icon
+      aria-hidden="true"
+      data-file-type-icon={visual.name}
+      icon={resolveBundledIcon(visual.icon)}
+      className={cn(
+        "shrink-0",
+        size === "compact" ? "h-3.5 w-3.5" : "h-4 w-4",
+        className,
+      )}
+    />
+  );
+}

package/src/shared/components/resizable-right-panel/__tests__/resizable-right-panel.test.tsx

@@ -21,12 +21,14 @@ describe("ResizableRightPanel", () => {
   });
 
   it("resizes horizontally from the left handle and clamps to max width", () => {
+    const onWidthCommit = vi.fn();
     render(
       <ResizableRightPanel
         data-testid="right-panel"
         defaultWidth={420}
         minWidth={320}
         maxWidth={500}
+        onWidthCommit={onWidthCommit}
       >
         Content
       </ResizableRightPanel>,
@@ -46,6 +48,8 @@ describe("ResizableRightPanel", () => {
 
     firePointerEvent(window, "pointerup", { clientX: 600, pointerId: 1 });
 
+    expect(onWidthCommit).toHaveBeenCalledWith(500);
+
     expect(
       screen.queryByTestId("resizable-right-panel-resize-shield"),
     ).toBeNull();
@@ -64,6 +68,24 @@ describe("ResizableRightPanel", () => {
     expect(screen.getByTestId("right-panel").className).toContain("fixed");
   });
 
+  it("applies a persisted controlled width after store rehydration", () => {
+    const view = render(
+      <ResizableRightPanel data-testid="right-panel" width={480}>
+        Content
+      </ResizableRightPanel>,
+    );
+
+    expect(screen.getByTestId("right-panel").style.width).toBe("480px");
+
+    view.rerender(
+      <ResizableRightPanel data-testid="right-panel" width={620}>
+        Content
+      </ResizableRightPanel>,
+    );
+
+    expect(screen.getByTestId("right-panel").style.width).toBe("620px");
+  });
+
   it("can scope overlay positioning to its container", () => {
     render(
       <ResizableRightPanel

package/src/shared/components/resizable-right-panel/resizable-right-panel.tsx

@@ -5,8 +5,10 @@ type ResizableRightPanelProps = ComponentPropsWithoutRef<"aside"> & {
   defaultWidth?: number;
   minWidth?: number;
   maxWidth?: number;
+  onWidthCommit?: (width: number) => void;
   overlay?: boolean;
   overlayScope?: "viewport" | "container";
+  width?: number;
 };
 
 export function ResizableRightPanel({
@@ -16,13 +18,18 @@ export function ResizableRightPanel({
   defaultWidth = 420,
   minWidth = 320,
   maxWidth = 860,
+  onWidthCommit,
   overlay = false,
   overlayScope = "viewport",
+  width: controlledWidth,
   ...props
 }: ResizableRightPanelProps) {
   const resizeRef = useRef<{ startX: number; startWidth: number } | null>(null);
+  const widthRef = useRef(controlledWidth ?? defaultWidth);
   const [isResizing, setIsResizing] = useState(false);
-  const [width, setWidth] = useState(defaultWidth);
+  const [dragWidth, setDragWidth] = useState<number | null>(null);
+  const [uncontrolledWidth, setUncontrolledWidth] = useState(defaultWidth);
+  const width = dragWidth ?? controlledWidth ?? uncontrolledWidth;
   const overlayClassName = overlay
     ? overlayScope === "container"
       ? "absolute inset-0 z-30"
@@ -35,14 +42,22 @@ export function ResizableRightPanel({
     event.stopPropagation();
     event.currentTarget.setPointerCapture?.(event.pointerId);
     setIsResizing(true);
+    widthRef.current = width;
     resizeRef.current = { startX: event.clientX, startWidth: width };
     const onMove = (moveEvent: PointerEvent) => {
       const resizing = resizeRef.current;
       if (!resizing) return;
       const nextWidth = resizing.startWidth + resizing.startX - moveEvent.clientX;
-      setWidth(Math.max(minWidth, Math.min(maxWidth, nextWidth)));
+      const clampedWidth = Math.max(minWidth, Math.min(maxWidth, nextWidth));
+      widthRef.current = clampedWidth;
+      setDragWidth(clampedWidth);
     };
     const onUp = () => {
+      if (controlledWidth === undefined) {
+        setUncontrolledWidth(widthRef.current);
+      }
+      onWidthCommit?.(widthRef.current);
+      setDragWidth(null);
       setIsResizing(false);
       resizeRef.current = null;
       window.removeEventListener("pointermove", onMove);