@nextclaw/ui 0.15.1 → 0.15.3

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;
   }
 }
 
@@ -675,6 +675,24 @@
   --md-table-head-bg: rgba(191, 219, 254, 0.16);
 }
 
+:root[data-theme="work"] .chat-markdown-assistant {
+  --md-link: #1f73c9;
+  --md-border: rgba(0, 0, 0, 0.11);
+  --md-table-head-bg: rgba(0, 0, 0, 0.045);
+}
+
+:root[data-theme="work"] .chat-markdown-user {
+  --md-text: #212121;
+  --md-muted: #737373;
+  --md-border: rgba(0, 0, 0, 0.12);
+  --md-link: #1f73c9;
+  --md-inline-code-bg: rgba(0, 0, 0, 0.06);
+  --md-inline-code-color: #212121;
+  --md-blockquote-border: rgba(0, 0, 0, 0.2);
+  --md-blockquote-bg: rgba(0, 0, 0, 0.04);
+  --md-table-head-bg: rgba(0, 0, 0, 0.045);
+}
+
 :root[data-theme-appearance="dark"] .chat-markdown-assistant {
   --md-text: hsl(var(--foreground));
   --md-muted: hsl(var(--foreground-tertiary));
@@ -954,101 +972,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);

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/config-split-page.tsx

@@ -3,7 +3,7 @@ import { ArrowLeft, type LucideIcon } from "lucide-react";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
-const CARD_CLASS = "min-w-0 overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-card xl:h-[calc(100vh-180px)] xl:max-h-[860px]";
+const CARD_CLASS = "min-w-0 overflow-hidden rounded-2xl border border-border/75 bg-card text-card-foreground xl:h-[calc(100vh-180px)] xl:max-h-[860px]";
 type DivProps = HTMLAttributes<HTMLDivElement>; type SectionProps = HTMLAttributes<HTMLElement>;
 
 function ConfigSplitPane({ className, ...props }: SectionProps) {
@@ -102,7 +102,7 @@ export function ConfigSplitPaneBody({
 }
 
 export function ConfigSplitPaneFooter({ className, ...props }: DivProps) {
-  return <div className={cn("shrink-0 border-t border-border/70", className)} {...props} />;
+  return <div className={cn("shrink-0 border-t border-border/70 px-4 py-2.5", className)} {...props} />;
 }
 
 export function ConfigSelectionCard({
@@ -115,10 +115,10 @@ export function ConfigSelectionCard({
     <button
       type={type}
       className={cn(
-        "w-full rounded-xl border p-2.5 text-left transition-all",
+        "w-full rounded-xl border p-2.5 text-left transition-colors",
         active
-          ? "border-primary/35 bg-primary-50/45 text-foreground shadow-sm"
-          : "border-border bg-card text-muted-foreground hover:border-primary/35 hover:bg-accent/70 hover:text-accent-foreground",
+          ? "border-border/70 bg-muted/65 text-foreground"
+          : "border-transparent bg-transparent text-muted-foreground hover:border-border/50 hover:bg-muted/40 hover:text-foreground",
         className,
       )}
       {...props}
@@ -140,7 +140,7 @@ export function ConfigSplitEmptyState({
   return (
     <div
       className={cn(
-        "flex min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-border bg-muted/60 px-4 py-10 text-center",
+        "flex min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-border/70 bg-muted/35 px-4 py-10 text-center",
         className,
       )}
       {...props}

package/src/shared/components/doc-browser/__tests__/doc-browser-url.utils.test.ts

@@ -0,0 +1,73 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+async function importDocsUrlUtils(language: 'en' | 'zh' = 'en') {
+  const i18n = await import('@/shared/lib/i18n');
+  i18n.setLanguage(language);
+  return await import('@/shared/components/doc-browser/utils/doc-browser-url.utils');
+}
+
+function stubTimeZone(timeZone: string) {
+  vi.spyOn(Intl, 'DateTimeFormat').mockReturnValue({
+    resolvedOptions: () => ({ timeZone }),
+  } as Intl.DateTimeFormat);
+}
+
+describe('doc browser docs URL utilities', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    stubTimeZone('America/Los_Angeles');
+  });
+
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.unstubAllGlobals();
+  });
+
+  it('uses the official docs origin for English users outside mainland by default', async () => {
+    const { getDefaultDocsUrl } = await importDocsUrlUtils('en');
+
+    expect(getDefaultDocsUrl()).toBe('https://docs.nextclaw.io/en/guide/getting-started');
+  });
+
+  it('uses the mainland mirror for users in the mainland timezone', async () => {
+    stubTimeZone('Asia/Shanghai');
+
+    const { getDefaultDocsUrl } = await importDocsUrlUtils('en');
+
+    expect(getDefaultDocsUrl()).toBe('https://docs.nextclaw.net/en/guide/getting-started');
+  });
+
+  it('uses the mainland mirror for Chinese users by default', async () => {
+    const { getDefaultDocsUrl } = await importDocsUrlUtils('zh');
+
+    expect(getDefaultDocsUrl()).toBe('https://docs.nextclaw.net/zh/guide/getting-started');
+  });
+
+  it('lets an explicit docs base override the automatic origin', async () => {
+    vi.stubEnv('VITE_NEXTCLAW_DOCS_BASE_URL', 'https://docs.example.com/');
+
+    const { getDocsUrl } = await importDocsUrlUtils('zh');
+
+    expect(getDocsUrl('/guide/model-selection')).toBe('https://docs.example.com/zh/guide/model-selection');
+  });
+
+  it('does not rewrite non-docs absolute URLs', async () => {
+    const { getDocsUrl } = await importDocsUrlUtils('zh');
+
+    expect(getDocsUrl('https://example.com/help')).toBe('https://example.com/help');
+  });
+
+  it('rewrites official docs URLs to the selected docs origin', async () => {
+    const { getDocsUrl } = await importDocsUrlUtils('zh');
+
+    expect(getDocsUrl('https://docs.nextclaw.io/en/guide/commands?tab=cli#start')).toBe(
+      'https://docs.nextclaw.net/en/guide/commands?tab=cli#start',
+    );
+  });
+
+  it('recognizes the mainland mirror as a docs URL', async () => {
+    const { isDocsUrl } = await importDocsUrlUtils('en');
+
+    expect(isDocsUrl('https://docs.nextclaw.net/zh/guide/getting-started')).toBe(true);
+  });
+});

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

@@ -397,6 +397,54 @@ describe("DocBrowser", () => {
     expect(screen.getByText("Help Docs")).toBeTruthy();
   });
 
+  it("focuses panel app iframes on pointer entry without applying the behavior to generic content iframes", () => {
+    const panelAppTab: DocBrowserTab = {
+      id: "piano",
+      kind: "panel-app" as const,
+      title: "Piano",
+      currentUrl: "/api/panel-apps/piano/content",
+      history: ["/api/panel-apps/piano/content"],
+      historyIndex: 0,
+      navVersion: 0,
+    };
+    docBrowserState.tabs = [panelAppTab];
+    docBrowserState.activeTabId = panelAppTab.id;
+    docBrowserState.currentTab = panelAppTab;
+
+    const { container, unmount } = render(
+      <DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />,
+    );
+
+    const panelAppIframe = container.querySelector('iframe[title="Piano"]') as HTMLIFrameElement;
+    const panelAppIframeFocus = vi.spyOn(panelAppIframe, "focus");
+    const panelAppContentFocus = vi.spyOn(panelAppIframe.contentWindow!, "focus").mockImplementation(() => undefined);
+
+    fireEvent.pointerOver(panelAppIframe);
+
+    expect(panelAppIframe.getAttribute("tabindex")).toBe("0");
+    expect(panelAppIframeFocus).toHaveBeenCalledWith({ preventScroll: true });
+    expect(panelAppContentFocus).toHaveBeenCalled();
+
+    unmount();
+    resetDocBrowserTestState();
+    const contentTab: DocBrowserTab = {
+      id: "local-app",
+      kind: "content",
+      title: "Local App",
+      currentUrl: "http://127.0.0.1:5173/dashboard",
+      history: ["http://127.0.0.1:5173/dashboard"],
+      historyIndex: 0,
+      navVersion: 0,
+    };
+    docBrowserState.tabs = [contentTab];
+    docBrowserState.activeTabId = contentTab.id;
+    docBrowserState.currentTab = contentTab;
+
+    render(<DocBrowser />);
+
+    expect(screen.getByTitle("Local App").getAttribute("tabindex")).toBeNull();
+  });
+
 });
 
 describe("DocBrowser floating interactions", () => {

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

@@ -22,6 +22,10 @@ export {
   DOC_BROWSER_HOME_TAB_KIND,
   DOC_BROWSER_HOME_URL,
   DOCS_DEFAULT_BASE_URL,
+  DOCS_MAINLAND_BASE_URL,
+  getDocsBaseUrl,
+  getDocsUrl,
+  getDefaultDocsUrl,
   isDocsUrl,
 } from '@/shared/components/doc-browser/utils/doc-browser-url.utils';
 

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

@@ -1,4 +1,4 @@
-import type { ReactNode, Ref } from 'react';
+import type { PointerEventHandler, ReactNode, Ref } from 'react';
 import {
   ExternalLink,
   RefreshCw,
@@ -29,6 +29,7 @@ type DocBrowserFrameContentProps = {
   iframeSandbox?: string;
   isDragging: boolean;
   isResizing: boolean;
+  onIframePointerOver?: PointerEventHandler<HTMLIFrameElement>;
 };
 
 export function DocBrowserAddressToolbar({
@@ -53,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
@@ -74,6 +75,7 @@ export function DocBrowserFrameContent({
   iframeSandbox,
   isDragging,
   isResizing,
+  onIframePointerOver,
 }: DocBrowserFrameContentProps) {
   return (
     <div className="flex-1 relative overflow-hidden">
@@ -87,6 +89,8 @@ export function DocBrowserFrameContent({
           className="absolute inset-0 w-full h-full border-0"
           title={currentTab?.title || 'NextClaw Docs'}
           sandbox={iframeSandbox}
+          tabIndex={onIframePointerOver ? 0 : undefined}
+          onPointerOver={onIframePointerOver}
           allow="clipboard-read; clipboard-write"
           allowFullScreen
         />

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { PointerEvent, ReactNode } from 'react';
 import type { DocBrowserContextValue, DocBrowserTab } from './doc-browser-context';
 
 export type DocBrowserCustomTabRenderParams = {
@@ -20,6 +20,7 @@ export type DocBrowserCustomTabRenderer = {
   getIframeSandbox?: (tab: DocBrowserTab) => string | undefined;
   getTitle?: (tab: DocBrowserTab) => string;
   onIframeMessage?: (params: DocBrowserIframeMessageParams) => void;
+  onIframePointerOver?: (event: PointerEvent<HTMLIFrameElement>) => void;
   renderContent?: (params: DocBrowserCustomTabRenderParams) => ReactNode;
   renderIcon?: (tab: DocBrowserTab) => ReactNode;
   renderToolbar?: (params: DocBrowserCustomTabRenderParams) => ReactNode;

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

@@ -117,20 +117,20 @@ export function DocBrowserTabStrip({
       tabs={compactTabs}
       actions={actions}
       className={cn(
-        "h-11 gap-2 border-border/70 bg-card px-2.5 shrink-0 select-none",
-        isFullscreen && "h-[calc(env(safe-area-inset-top,0px)+2.75rem)] pt-[env(safe-area-inset-top,0px)]",
+        "h-10 gap-1.5 border-border/50 bg-card/80 px-2 shrink-0 select-none",
+        isFullscreen && "h-[calc(env(safe-area-inset-top,0px)+2.5rem)] pt-[env(safe-area-inset-top,0px)]",
       )}
       scrollClassName={cn(
-        "doc-browser-tab-scrollbar flex h-full items-center gap-1.5",
+        "doc-browser-tab-scrollbar flex h-full items-center gap-0.5",
         !isDocked && !isFullscreen && "cursor-grab active:cursor-grabbing",
       )}
-      tabsClassName="items-center gap-1.5"
-      actionsClassName="h-full items-center gap-1"
-      actionButtonClassName="rounded-md p-1.5 hover:text-foreground disabled:opacity-60"
-      tabBaseClassName="group inline-flex min-w-0 cursor-pointer items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors"
-      activeTabClassName="border-primary/30 bg-primary-50/70 text-foreground shadow-[0_1px_2px_rgba(30,20,10,0.04)]"
-      inactiveTabClassName="border-border bg-muted/60 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-      labelClassName="px-1 text-xs font-normal"
+      tabsClassName="items-center gap-0.5"
+      actionsClassName="h-full items-center gap-0.5"
+      actionButtonClassName="rounded-md p-1.5 text-muted-foreground hover:bg-muted/60 hover:text-foreground disabled:opacity-50"
+      tabBaseClassName="group inline-flex min-w-0 cursor-pointer items-center gap-0.5 h-7 px-2 rounded-md text-xs max-w-[220px] shrink-0 transition-colors"
+      activeTabClassName="bg-muted/80 text-foreground"
+      inactiveTabClassName="text-muted-foreground hover:bg-muted/45 hover:text-foreground"
+      labelClassName="px-0.5 text-xs font-normal"
       onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
       onScrollPointerDown={(event) => {
         if (shouldBlockHeaderDrag(event.target)) {