@nextclaw/ui 0.15.2 → 0.15.4

package/src/index.css

@@ -546,9 +546,9 @@
      FOCUS STATES
      ======================================== */
   .focus-ring {
-    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
-    --tw-ring-color: hsl(var(--ring));
-    --tw-ring-offset-color: hsl(var(--ring-offset));
+    @apply focus:outline-none focus-visible:ring-1 focus-visible:ring-offset-0;
+    --tw-ring-color: hsl(var(--border));
+    --tw-ring-offset-color: transparent;
   }
 }
 
@@ -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;
 }
@@ -972,101 +977,327 @@
 
 .chat-codeblock .hljs-keyword,
 .chat-file-code-syntax .hljs-keyword,
+.chat-terminal-pane .hljs-keyword,
 .chat-codeblock .hljs-built_in,
 .chat-file-code-syntax .hljs-built_in,
+.chat-terminal-pane .hljs-built_in,
 .chat-codeblock .hljs-type,
 .chat-file-code-syntax .hljs-type,
+.chat-terminal-pane .hljs-type,
 .chat-codeblock .hljs-literal,
 .chat-file-code-syntax .hljs-literal,
+.chat-terminal-pane .hljs-literal,
 .chat-codeblock .hljs-selector-tag,
-.chat-file-code-syntax .hljs-selector-tag {
+.chat-file-code-syntax .hljs-selector-tag,
+.chat-terminal-pane .hljs-selector-tag {
   color: var(--md-code-keyword);
 }
 
 .chat-codeblock .hljs-title,
 .chat-file-code-syntax .hljs-title,
+.chat-terminal-pane .hljs-title,
 .chat-codeblock .hljs-title.function_,
 .chat-file-code-syntax .hljs-title.function_,
+.chat-terminal-pane .hljs-title.function_,
 .chat-codeblock .hljs-title.class_,
 .chat-file-code-syntax .hljs-title.class_,
+.chat-terminal-pane .hljs-title.class_,
 .chat-codeblock .hljs-section,
 .chat-file-code-syntax .hljs-section,
+.chat-terminal-pane .hljs-section,
 .chat-codeblock .hljs-selector-id,
-.chat-file-code-syntax .hljs-selector-id {
+.chat-file-code-syntax .hljs-selector-id,
+.chat-terminal-pane .hljs-selector-id {
   color: var(--md-code-title);
 }
 
 .chat-codeblock .hljs-string,
 .chat-file-code-syntax .hljs-string,
+.chat-terminal-pane .hljs-string,
 .chat-codeblock .hljs-regexp,
 .chat-file-code-syntax .hljs-regexp,
+.chat-terminal-pane .hljs-regexp,
 .chat-codeblock .hljs-symbol,
 .chat-file-code-syntax .hljs-symbol,
+.chat-terminal-pane .hljs-symbol,
 .chat-codeblock .hljs-bullet,
-.chat-file-code-syntax .hljs-bullet {
+.chat-file-code-syntax .hljs-bullet,
+.chat-terminal-pane .hljs-bullet {
   color: var(--md-code-string);
 }
 
 .chat-codeblock .hljs-number,
 .chat-file-code-syntax .hljs-number,
+.chat-terminal-pane .hljs-number,
 .chat-codeblock .hljs-variable,
 .chat-file-code-syntax .hljs-variable,
+.chat-terminal-pane .hljs-variable,
 .chat-codeblock .hljs-template-variable,
 .chat-file-code-syntax .hljs-template-variable,
+.chat-terminal-pane .hljs-template-variable,
 .chat-codeblock .hljs-params,
-.chat-file-code-syntax .hljs-params {
+.chat-file-code-syntax .hljs-params,
+.chat-terminal-pane .hljs-params {
   color: var(--md-code-number);
 }
 
 .chat-codeblock .hljs-comment,
 .chat-file-code-syntax .hljs-comment,
+.chat-terminal-pane .hljs-comment,
 .chat-codeblock .hljs-quote,
-.chat-file-code-syntax .hljs-quote {
+.chat-file-code-syntax .hljs-quote,
+.chat-terminal-pane .hljs-quote {
   color: var(--md-code-comment);
   font-style: italic;
 }
 
 .chat-codeblock .hljs-attr,
 .chat-file-code-syntax .hljs-attr,
+.chat-terminal-pane .hljs-attr,
 .chat-codeblock .hljs-attribute,
 .chat-file-code-syntax .hljs-attribute,
+.chat-terminal-pane .hljs-attribute,
 .chat-codeblock .hljs-property,
 .chat-file-code-syntax .hljs-property,
+.chat-terminal-pane .hljs-property,
 .chat-codeblock .hljs-name,
 .chat-file-code-syntax .hljs-name,
+.chat-terminal-pane .hljs-name,
 .chat-codeblock .hljs-selector-class,
-.chat-file-code-syntax .hljs-selector-class {
+.chat-file-code-syntax .hljs-selector-class,
+.chat-terminal-pane .hljs-selector-class {
   color: var(--md-code-attr);
 }
 
 .chat-codeblock .hljs-meta,
 .chat-file-code-syntax .hljs-meta,
+.chat-terminal-pane .hljs-meta,
 .chat-codeblock .hljs-doctag,
 .chat-file-code-syntax .hljs-doctag,
+.chat-terminal-pane .hljs-doctag,
 .chat-codeblock .hljs-tag,
-.chat-file-code-syntax .hljs-tag {
+.chat-file-code-syntax .hljs-tag,
+.chat-terminal-pane .hljs-tag {
   color: var(--md-code-meta);
 }
 
 .chat-codeblock .hljs-subst,
 .chat-file-code-syntax .hljs-subst,
+.chat-terminal-pane .hljs-subst,
 .chat-codeblock .hljs-punctuation,
 .chat-file-code-syntax .hljs-punctuation,
+.chat-terminal-pane .hljs-punctuation,
 .chat-codeblock .hljs-operator,
-.chat-file-code-syntax .hljs-operator {
+.chat-file-code-syntax .hljs-operator,
+.chat-terminal-pane .hljs-operator {
   color: var(--md-code-muted);
 }
 
 .chat-codeblock .hljs-deletion,
-.chat-file-code-syntax .hljs-deletion {
+.chat-file-code-syntax .hljs-deletion,
+.chat-terminal-pane .hljs-deletion {
   color: var(--md-code-deletion);
 }
 
 .chat-codeblock .hljs-addition,
-.chat-file-code-syntax .hljs-addition {
+.chat-file-code-syntax .hljs-addition,
+.chat-terminal-pane .hljs-addition {
   color: var(--md-code-addition);
 }
 
+/* Terminal tool surface: terminal style without decorative chrome */
+.chat-terminal-surface {
+  --terminal-surface: #0b1220;
+  --terminal-border: rgba(148, 163, 184, 0.28);
+  --terminal-text: #e5e7eb;
+  --terminal-muted: #94a3b8;
+  --terminal-prompt: #34d399;
+  --terminal-caret: rgba(52, 211, 153, 0.92);
+  --terminal-error-border: rgba(251, 113, 133, 0.42);
+  --terminal-error-bg: rgba(127, 29, 29, 0.16);
+  --terminal-error-text: #fecdd3;
+  --md-code-text: #e5e7eb;
+  --md-code-muted: #94a3b8;
+  --md-code-keyword: #c084fc;
+  --md-code-title: #93c5fd;
+  --md-code-string: #86efac;
+  --md-code-number: #fbbf24;
+  --md-code-comment: #94a3b8;
+  --md-code-attr: #67e8f9;
+  --md-code-meta: #f0abfc;
+  --md-code-deletion: #fca5a5;
+  --md-code-addition: #86efac;
+
+  overflow: hidden;
+  border: 1px solid var(--terminal-border);
+  border-radius: 0.55rem;
+  background: var(--terminal-surface);
+}
+
+.chat-terminal-surface-error {
+  border-color: var(--terminal-error-border);
+  background:
+    linear-gradient(180deg, var(--terminal-error-bg), transparent 48%),
+    var(--terminal-surface);
+}
+
+.chat-terminal-body {
+  max-height: 22rem;
+  overflow: auto;
+  padding: 0.7rem 0.75rem 0.78rem;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
+}
+
+.chat-terminal-line {
+  display: grid;
+  grid-template-columns: 1rem minmax(0, 1fr);
+  column-gap: 0.55rem;
+  align-items: start;
+}
+
+.chat-terminal-gutter {
+  width: 1rem;
+  color: var(--terminal-prompt);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.8rem;
+  font-weight: 700;
+  line-height: 1.58;
+  text-align: right;
+  user-select: none;
+}
+
+.chat-terminal-line-content {
+  min-width: 0;
+}
+
+.chat-terminal-output-block {
+  margin-top: 0.55rem;
+}
+
+.chat-terminal-pre {
+  margin: 0;
+  background: transparent;
+}
+
+.chat-terminal-pre code,
+.chat-terminal-code {
+  display: block;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.8rem;
+  line-height: 1.58;
+  color: var(--terminal-text);
+  font-variant-ligatures: none;
+  tab-size: 2;
+}
+
+.chat-terminal-pre-error,
+.chat-terminal-code-error {
+  color: var(--terminal-error-text);
+}
+
+.chat-terminal-empty {
+  color: var(--terminal-muted);
+  font-size: 0.78rem;
+  font-style: italic;
+}
+
+.chat-terminal-caret {
+  display: inline-block;
+  width: 0.42rem;
+  height: 0.95em;
+  margin-left: 0.12rem;
+  vertical-align: text-bottom;
+  background: var(--terminal-caret);
+  animation: chat-terminal-caret-blink 1s steps(1, end) infinite;
+}
+
+.chat-terminal-skeleton {
+  height: 0.78rem;
+  width: 9rem;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.28);
+  animation: chat-terminal-skeleton-pulse 1.2s ease-in-out infinite;
+}
+
+.chat-terminal-surface .ansi-bold { font-weight: 700; }
+.chat-terminal-surface .ansi-dim { opacity: 0.72; }
+.chat-terminal-surface .ansi-italic { font-style: italic; }
+.chat-terminal-surface .ansi-underline { text-decoration: underline; }
+.chat-terminal-surface .ansi-inverse {
+  color: var(--terminal-surface);
+  background: var(--terminal-text);
+}
+
+.chat-terminal-surface .ansi-fg-black { color: #0f172a; }
+.chat-terminal-surface .ansi-fg-red { color: #f87171; }
+.chat-terminal-surface .ansi-fg-green { color: #4ade80; }
+.chat-terminal-surface .ansi-fg-yellow { color: #fbbf24; }
+.chat-terminal-surface .ansi-fg-blue { color: #60a5fa; }
+.chat-terminal-surface .ansi-fg-magenta { color: #e879f9; }
+.chat-terminal-surface .ansi-fg-cyan { color: #22d3ee; }
+.chat-terminal-surface .ansi-fg-white { color: #e5e7eb; }
+.chat-terminal-surface .ansi-fg-bright-black { color: #94a3b8; }
+.chat-terminal-surface .ansi-fg-bright-red { color: #fca5a5; }
+.chat-terminal-surface .ansi-fg-bright-green { color: #86efac; }
+.chat-terminal-surface .ansi-fg-bright-yellow { color: #fde68a; }
+.chat-terminal-surface .ansi-fg-bright-blue { color: #93c5fd; }
+.chat-terminal-surface .ansi-fg-bright-magenta { color: #f0abfc; }
+.chat-terminal-surface .ansi-fg-bright-cyan { color: #67e8f9; }
+.chat-terminal-surface .ansi-fg-bright-white { color: #f8fafc; }
+
+.chat-terminal-surface .ansi-bg-black { background: #0f172a; }
+.chat-terminal-surface .ansi-bg-red { background: rgba(248, 113, 113, 0.28); }
+.chat-terminal-surface .ansi-bg-green { background: rgba(74, 222, 128, 0.22); }
+.chat-terminal-surface .ansi-bg-yellow { background: rgba(251, 191, 36, 0.22); }
+.chat-terminal-surface .ansi-bg-blue { background: rgba(96, 165, 250, 0.22); }
+.chat-terminal-surface .ansi-bg-magenta { background: rgba(232, 121, 249, 0.22); }
+.chat-terminal-surface .ansi-bg-cyan { background: rgba(34, 211, 238, 0.2); }
+.chat-terminal-surface .ansi-bg-white { background: rgba(229, 231, 235, 0.18); }
+
+@keyframes chat-terminal-caret-blink {
+  0%, 49% { opacity: 1; }
+  50%, 100% { opacity: 0; }
+}
+
+@keyframes chat-terminal-skeleton-pulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-terminal-caret,
+  .chat-terminal-skeleton {
+    animation: none;
+  }
+}
+
+:root[data-theme="work"] .chat-terminal-surface {
+  --terminal-surface: #111827;
+  --terminal-border: rgba(148, 163, 184, 0.24);
+}
+
+:root[data-theme-appearance="dark"] .chat-terminal-surface {
+  --terminal-surface: #070b14;
+  --terminal-border: rgba(148, 163, 184, 0.22);
+}
+
+/* Prevent browser default "详情/Details" fallback on chat process summaries. */
+.nextclaw-chat-message-user details > summary,
+.border-border.bg-card details > summary,
+.chat-markdown details > summary {
+  list-style: none;
+}
+
+.nextclaw-chat-message-user details > summary::-webkit-details-marker,
+.border-border.bg-card details > summary::-webkit-details-marker,
+.chat-markdown details > summary::-webkit-details-marker {
+  display: none;
+}
+
 .chat-table-wrap {
   margin: 0.15rem 0;
   border: 1px solid var(--md-border);
@@ -1112,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/actions/action-link.tsx

@@ -37,7 +37,7 @@ export function ExternalActionLink({ label, className, onClick }: ExternalAction
         <button
             type="button"
             className={cn(
-                'inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md px-1.5 text-[13px] font-medium text-primary transition-colors hover:text-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                'inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md px-1.5 text-[13px] font-medium text-primary transition-colors hover:text-primary-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
                 className
             )}
             onClick={onClick}

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-panel-parts.tsx

@@ -54,7 +54,7 @@ export function DocBrowserAddressToolbar({
           onChange={(e) => onUrlInputChange(e.target.value)}
           aria-label={t('docBrowserAddressLabel')}
           placeholder={placeholder}
-          className="h-8 w-full rounded-lg border border-border bg-background pl-8 pr-3 text-xs text-foreground transition-colors placeholder:text-muted-foreground/55 focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/30"
+          className="h-8 w-full rounded-lg border border-border/75 bg-background pl-8 pr-3 text-xs text-foreground transition-colors placeholder:text-muted-foreground/55 focus:border-border focus:outline-none focus:ring-0"
         />
       </form>
       <IconActionButton

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;