@nextclaw/ui 0.15.3 → 0.15.4

package/src/features/chat/stores/chat-thread.store.ts

@@ -8,8 +8,13 @@ import type {
 } from '@/shared/lib/api';
 import {
   normalizePersistedWorkspaceFileTab,
+  retainWorkspaceFileTabs,
   toPersistedWorkspaceFileTab,
 } from '@/features/chat/features/workspace/utils/chat-workspace-file-tab-persistence.utils';
+import {
+  CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
+  normalizeChatWorkspacePanelWidth,
+} from '@/features/chat/features/workspace/utils/chat-workspace-panel-layout.utils';
 
 export type ChatChildSessionTab = {
   sessionKey: string;
@@ -44,9 +49,21 @@ export type ChatWorkspaceFileTab = {
   fullLines?: ChatFileOperationLineViewModel[];
 };
 
+export type ChatWorkspacePanelKind =
+  | 'overview'
+  | 'child-sessions'
+  | 'child-session'
+  | 'side-chat-draft'
+  | 'project-files'
+  | 'file'
+  | 'cron';
+
 export type ChatWorkspaceNavigationEntry =
+  | { kind: 'overview' }
+  | { kind: 'child-sessions' }
   | { kind: 'child-session'; key: string }
   | { kind: 'side-chat-draft'; key: string }
+  | { kind: 'project-files' }
   | { kind: 'file'; key: string }
   | { kind: 'cron' };
 
@@ -69,7 +86,7 @@ export type ChatThreadSnapshot = {
   parentSessionKey?: string | null;
   parentSessionLabel?: string | null;
   workspacePanelParentKey?: string | null;
-  activeWorkspacePanelKind?: "child-session" | "side-chat-draft" | "file" | "cron" | null;
+  activeWorkspacePanelKind?: ChatWorkspacePanelKind | null;
   childSessionTabs: ChatChildSessionTab[];
   activeChildSessionKey?: string | null;
   activeSideChatDraft?: ChatWorkspaceSideChatDraft | null;
@@ -77,6 +94,7 @@ export type ChatThreadSnapshot = {
   activeWorkspaceFileKey?: string | null;
   workspaceNavigationHistory: ChatWorkspaceNavigationEntry[];
   workspaceNavigationHistoryIndex: number;
+  workspacePanelWidth: number;
   contextWindow?: SessionContextWindowView | null;
 };
 
@@ -98,6 +116,7 @@ type PersistedChatThreadStore = {
     activeWorkspaceFileKey?: unknown;
     workspaceNavigationHistory?: unknown;
     workspaceNavigationHistoryIndex?: unknown;
+    workspacePanelWidth?: unknown;
   };
 };
 
@@ -110,9 +129,10 @@ type PersistedChatWorkspaceSnapshot = Pick<
   | 'activeWorkspaceFileKey'
   | 'workspaceNavigationHistory'
   | 'workspaceNavigationHistoryIndex'
+  | 'workspacePanelWidth'
 >;
 
-type PersistedWorkspacePanelKind = 'child-session' | 'file' | 'cron';
+type PersistedWorkspacePanelKind = Exclude<ChatWorkspacePanelKind, 'side-chat-draft'>;
 
 const initialSnapshot: ChatThreadSnapshot = {
   sessionTypeLabel: null,
@@ -141,6 +161,7 @@ const initialSnapshot: ChatThreadSnapshot = {
   activeWorkspaceFileKey: null,
   workspaceNavigationHistory: [],
   workspaceNavigationHistoryIndex: 0,
+  workspacePanelWidth: CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
   contextWindow: null
 };
 
@@ -163,7 +184,14 @@ function normalizeHistoryIndex(value: unknown, maxIndex: number): number {
 function isWorkspacePanelKind(
   value: unknown,
 ): value is PersistedWorkspacePanelKind {
-  return value === 'child-session' || value === 'file' || value === 'cron';
+  return (
+    value === 'overview' ||
+    value === 'child-sessions' ||
+    value === 'child-session' ||
+    value === 'project-files' ||
+    value === 'file' ||
+    value === 'cron'
+  );
 }
 
 function normalizePersistedWorkspaceNavigationEntry(
@@ -172,8 +200,13 @@ function normalizePersistedWorkspaceNavigationEntry(
   if (!isRecord(value)) {
     return null;
   }
-  if (value.kind === 'cron') {
-    return { kind: 'cron' };
+  if (
+    value.kind === 'overview' ||
+    value.kind === 'child-sessions' ||
+    value.kind === 'project-files' ||
+    value.kind === 'cron'
+  ) {
+    return { kind: value.kind };
   }
   const key = normalizeOptionalString(value.key);
   if (!key || (value.kind !== 'child-session' && value.kind !== 'file')) {
@@ -194,6 +227,15 @@ function createWorkspaceNavigationEntryFromSnapshot({
   activeChildSessionKey: string | null;
   activeWorkspaceFileKey: string | null;
 }): ChatWorkspaceNavigationEntry | null {
+  if (activeWorkspacePanelKind === 'overview') {
+    return { kind: 'overview' };
+  }
+  if (activeWorkspacePanelKind === 'child-sessions') {
+    return { kind: 'child-sessions' };
+  }
+  if (activeWorkspacePanelKind === 'project-files') {
+    return { kind: 'project-files' };
+  }
   if (activeWorkspacePanelKind === 'cron') {
     return { kind: 'cron' };
   }
@@ -218,17 +260,25 @@ function normalizePersistedWorkspaceSnapshot(
   if (!isRecord(value)) {
     return null;
   }
-  const workspaceFileTabs = Array.isArray(value.workspaceFileTabs)
+  const workspacePanelParentKey = normalizeOptionalString(value.workspacePanelParentKey);
+  const activeWorkspaceFileKey = normalizeOptionalString(value.activeWorkspaceFileKey);
+  const normalizedWorkspaceFileTabs = Array.isArray(value.workspaceFileTabs)
     ? value.workspaceFileTabs
       .map(normalizePersistedWorkspaceFileTab)
       .filter((tab): tab is ChatWorkspaceFileTab => tab !== null)
-      .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
     : [];
-  const activeWorkspaceFileKey = normalizeOptionalString(value.activeWorkspaceFileKey);
+  const workspaceFileTabs = retainWorkspaceFileTabs(
+    normalizedWorkspaceFileTabs,
+    activeWorkspaceFileKey,
+    CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS,
+  );
+  const sessionWorkspaceFileTabs = workspaceFileTabs.filter(
+    (tab) => tab.parentSessionKey === workspacePanelParentKey,
+  );
   const resolvedActiveWorkspaceFileKey =
-    activeWorkspaceFileKey && workspaceFileTabs.some((tab) => tab.key === activeWorkspaceFileKey)
+    activeWorkspaceFileKey && sessionWorkspaceFileTabs.some((tab) => tab.key === activeWorkspaceFileKey)
       ? activeWorkspaceFileKey
-      : workspaceFileTabs[0]?.key ?? null;
+      : sessionWorkspaceFileTabs[0]?.key ?? null;
   const activeWorkspacePanelKind = isWorkspacePanelKind(value.activeWorkspacePanelKind)
     ? value.activeWorkspacePanelKind
     : null;
@@ -265,13 +315,16 @@ function normalizePersistedWorkspaceSnapshot(
       : 0;
 
   return {
-    workspacePanelParentKey: normalizeOptionalString(value.workspacePanelParentKey),
+    workspacePanelParentKey,
     activeWorkspacePanelKind: resolvedActiveWorkspacePanelKind,
     activeChildSessionKey,
     workspaceFileTabs,
     activeWorkspaceFileKey: resolvedActiveWorkspaceFileKey,
     workspaceNavigationHistory,
     workspaceNavigationHistoryIndex,
+    workspacePanelWidth: normalizeChatWorkspacePanelWidth(
+      value.workspacePanelWidth,
+    ),
   };
 }
 
@@ -309,12 +362,16 @@ export const useChatThreadStore = create<ChatThreadStore>()(
                 ? null
                 : state.snapshot.activeWorkspacePanelKind,
             activeChildSessionKey: state.snapshot.activeChildSessionKey,
-            workspaceFileTabs: state.snapshot.workspaceFileTabs
-              .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
+            workspaceFileTabs: retainWorkspaceFileTabs(
+              state.snapshot.workspaceFileTabs,
+              state.snapshot.activeWorkspaceFileKey,
+              CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS,
+            )
               .map(toPersistedWorkspaceFileTab),
             activeWorkspaceFileKey: state.snapshot.activeWorkspaceFileKey,
             workspaceNavigationHistory,
             workspaceNavigationHistoryIndex,
+            workspacePanelWidth: state.snapshot.workspacePanelWidth,
           }
         };
       },

package/src/features/settings/pages/__tests__/appearance-settings-page.test.tsx

@@ -1,25 +1,42 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { beforeEach, describe, expect, it } from 'vitest';
-import { AppearanceSettingsPage } from '@/features/settings/pages/appearance-settings-page';
-import { useSideDockStore } from '@/features/side-dock';
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it } from "vitest";
+import { AppearanceSettingsPage } from "@/features/settings/pages/appearance-settings-page";
+import { useChatMessageLayoutStore } from "@/features/chat";
+import { useSideDockStore } from "@/features/side-dock";
 
-describe('AppearanceSettingsPage', () => {
+describe("AppearanceSettingsPage", () => {
   beforeEach(() => {
     window.localStorage.clear();
+    useChatMessageLayoutStore.getState().setLayout("card");
     useSideDockStore.getState().setVisible(true);
     useSideDockStore.getState().setPinnedItems([]);
   });
 
-  it('reopens the SideDock from the appearance settings switch', () => {
+  it("reopens the SideDock from the appearance settings switch", () => {
     useSideDockStore.getState().setVisible(false);
 
     render(<AppearanceSettingsPage />);
 
-    const visibilitySwitch = screen.getByRole('switch', { name: 'Show SideDock' });
-    expect(visibilitySwitch.getAttribute('aria-checked')).toBe('false');
+    const visibilitySwitch = screen.getByRole("switch", {
+      name: "Show SideDock",
+    });
+    expect(visibilitySwitch.getAttribute("aria-checked")).toBe("false");
 
     fireEvent.click(visibilitySwitch);
 
     expect(useSideDockStore.getState().isVisible).toBe(true);
   });
+
+  it("switches the chat message layout from appearance settings", () => {
+    render(<AppearanceSettingsPage />);
+
+    const cardOption = screen.getByRole("radio", { name: /^Cards/ });
+    const flatOption = screen.getByRole("radio", { name: /^Flat/ });
+    expect(cardOption.getAttribute("aria-checked")).toBe("true");
+
+    fireEvent.click(flatOption);
+
+    expect(flatOption.getAttribute("aria-checked")).toBe("true");
+    expect(useChatMessageLayoutStore.getState().layout).toBe("flat");
+  });
 });

package/src/features/settings/pages/appearance-settings-page.tsx

@@ -1,33 +1,112 @@
-import { Palette } from 'lucide-react';
-import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
-import { SettingRow } from '@/shared/components/settings/setting-row';
-import { Card, CardContent, CardHeader, CardTitle } from '@/shared/components/ui/card';
-import { Switch } from '@/shared/components/ui/switch';
-import { useSideDockStore } from '@/features/side-dock';
-import { t } from '@/shared/lib/i18n';
+import type { ChatMessageLayout } from "@nextclaw/agent-chat-ui";
+import { Check, Palette } from "lucide-react";
+import { PageHeader, PageLayout } from "@/app/components/layout/page-layout";
+import { useChatMessageLayoutStore } from "@/features/chat";
+import { SettingRow } from "@/shared/components/settings/setting-row";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/components/ui/card";
+import { Switch } from "@/shared/components/ui/switch";
+import { useSideDockStore } from "@/features/side-dock";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+const CHAT_MESSAGE_LAYOUT_OPTIONS: Array<{
+  value: ChatMessageLayout;
+  labelKey: string;
+  descriptionKey: string;
+}> = [
+  {
+    value: "card",
+    labelKey: "chatMessageLayoutCard",
+    descriptionKey: "chatMessageLayoutCardDescription",
+  },
+  {
+    value: "flat",
+    labelKey: "chatMessageLayoutFlat",
+    descriptionKey: "chatMessageLayoutFlatDescription",
+  },
+];
 
 export function AppearanceSettingsPage() {
+  const messageLayout = useChatMessageLayoutStore((state) => state.layout);
+  const setMessageLayout = useChatMessageLayoutStore(
+    (state) => state.setLayout,
+  );
   const isSideDockVisible = useSideDockStore((state) => state.isVisible);
   const setSideDockVisible = useSideDockStore((state) => state.setVisible);
 
   return (
     <PageLayout>
-      <PageHeader title={t('appearance')} />
+      <PageHeader title={t("appearance")} />
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Palette className="h-4 w-4" />
-            {t('appearance')}
+            {t("appearance")}
           </CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="space-y-4">
+          <SettingRow
+            title={t("chatMessageLayoutTitle")}
+            description={t("chatMessageLayoutDescription")}
+          >
+            <div
+              role="radiogroup"
+              aria-label={t("chatMessageLayoutTitle")}
+              className="grid gap-2 sm:grid-cols-2"
+            >
+              {CHAT_MESSAGE_LAYOUT_OPTIONS.map((option) => {
+                const selected = option.value === messageLayout;
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    role="radio"
+                    aria-checked={selected}
+                    onClick={() => setMessageLayout(option.value)}
+                    className={cn(
+                      "flex min-w-0 items-start gap-3 rounded-xl border px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+                      selected
+                        ? "border-primary/35 bg-primary/5 text-foreground"
+                        : "border-border bg-card text-muted-foreground hover:border-border/80 hover:bg-muted/45 hover:text-foreground",
+                    )}
+                  >
+                    <span
+                      className={cn(
+                        "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border",
+                        selected
+                          ? "border-primary bg-primary text-primary-foreground"
+                          : "border-border bg-background",
+                      )}
+                    >
+                      {selected ? (
+                        <Check className="h-2.5 w-2.5" strokeWidth={3} />
+                      ) : null}
+                    </span>
+                    <span className="min-w-0">
+                      <span className="block text-sm font-medium">
+                        {t(option.labelKey)}
+                      </span>
+                      <span className="mt-1 block text-xs leading-5 text-muted-foreground">
+                        {t(option.descriptionKey)}
+                      </span>
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </SettingRow>
           <SettingRow
-            title={t('sideDockVisibilityTitle')}
-            description={t('sideDockVisibilityDescription')}
+            title={t("sideDockVisibilityTitle")}
+            description={t("sideDockVisibilityDescription")}
             control={
               <Switch
                 id="appearance-side-dock-visible"
-                aria-label={t('sideDockVisibilityTitle')}
+                aria-label={t("sideDockVisibilityTitle")}
                 checked={isSideDockVisible}
                 onCheckedChange={setSideDockVisible}
               />

package/src/index.css

@@ -736,11 +736,16 @@
 .chat-markdown h5,
 .chat-markdown h6 {
   margin: 0.2rem 0 0;
+  padding-bottom: 0.5em;
   font-weight: 700;
   line-height: 1.35;
   letter-spacing: -0.01em;
 }
 
+.chat-markdown :is(h1, h2, h3, h4, h5, h6) + * {
+  margin-top: 0;
+}
+
 .chat-markdown h1 {
   font-size: 1.22rem;
 }
@@ -1338,9 +1343,38 @@
 }
 
 .chat-markdown img {
+  display: block;
+  width: auto;
+  max-width: min(100%, 32rem);
+  height: auto;
+}
+
+.chat-markdown [data-chat-message-image-preview] {
+  margin-block: 0.72rem;
+}
+
+.chat-markdown [data-chat-message-image-preview]:first-child,
+.chat-markdown [data-chat-message-image-preview]
+  + [data-chat-message-image-preview] {
+  margin-top: 0;
+}
+
+.chat-markdown [data-chat-message-image-preview]:last-child {
+  margin-bottom: 0;
+}
+
+.chat-markdown [data-chat-image-row="three-column"] {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: start;
+  gap: 0.72rem;
+}
+
+.chat-markdown
+  [data-chat-image-row="three-column"]
+  > [data-chat-message-image-preview] {
   max-width: 100%;
-  border-radius: 0.75rem;
-  border: 1px solid var(--md-border);
+  margin: 0;
 }
 
 .chat-markdown blockquote {

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

@@ -0,0 +1,61 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { FileTypeIcon } from "@/shared/components/file-type-icon";
+
+function readIcon(container: HTMLElement, name: string): SVGElement {
+  const icon = container.querySelector<SVGElement>(
+    `[data-file-type-icon="${name}"]`,
+  );
+  expect(icon).not.toBeNull();
+  expect(icon?.innerHTML).not.toContain("undefined");
+  expect(icon?.childElementCount).toBeGreaterThan(0);
+  return icon!;
+}
+
+describe("FileTypeIcon", () => {
+  it("renders recognizable SVG icons for common file types", () => {
+    const { container } = render(
+      <>
+        <FileTypeIcon fileName="src/app.tsx" />
+        <FileTypeIcon fileName="scripts/setup.js" />
+        <FileTypeIcon fileName="docs/guide.md" />
+        <FileTypeIcon fileName="assets/hero.png" />
+        <FileTypeIcon fileName="reports/data.xlsx" />
+      </>,
+    );
+
+    expect(readIcon(container, "react-typescript").tagName).toBe("svg");
+    expect(readIcon(container, "javascript").tagName).toBe("svg");
+    expect(readIcon(container, "markdown").tagName).toBe("svg");
+    expect(readIcon(container, "image").tagName).toBe("svg");
+    expect(readIcon(container, "excel").tagName).toBe("svg");
+  });
+
+  it("recognizes editor-style special file names", () => {
+    const { container } = render(
+      <>
+        <FileTypeIcon fileName="package.json" />
+        <FileTypeIcon fileName="Dockerfile" />
+        <FileTypeIcon fileName=".env.local" />
+        <FileTypeIcon fileName="vitest.unit.config.ts" />
+        <FileTypeIcon fileName="PHOTO.JPEG" />
+      </>,
+    );
+
+    expect(readIcon(container, "npm")).toBeTruthy();
+    expect(readIcon(container, "docker")).toBeTruthy();
+    expect(readIcon(container, "dotenv")).toBeTruthy();
+    expect(readIcon(container, "vitest")).toBeTruthy();
+    expect(readIcon(container, "image")).toBeTruthy();
+  });
+
+  it("uses the neutral SVG fallback and compact size predictably", () => {
+    const { container } = render(
+      <FileTypeIcon fileName="artifact.customtype" size="compact" />,
+    );
+
+    const fallback = readIcon(container, "default");
+    expect(fallback.classList.contains("h-3.5")).toBe(true);
+    expect(fallback.getAttribute("aria-hidden")).toBe("true");
+  });
+});

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;