@nextclaw/ui 0.13.10-beta.1 → 0.13.11

package/src/features/chat/components/chat-session-workspace-panel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from "react";
-import { ArrowLeft, FolderGit2, Loader2, X } from "lucide-react";
+import { FolderGit2, Loader2 } from "lucide-react";
 import type {
   ChatFileOpenActionViewModel,
   ChatToolActionViewModel,
@@ -269,7 +269,10 @@ export function ChatSessionWorkspacePanel({
   );
 
   useEffect(() => {
-    if (activeSelection?.kind !== "child-session" || activeSelection.tab.runStatus === "running") {
+    if (
+      activeSelection?.kind !== "child-session" ||
+      activeSelection.tab.runStatus === "running"
+    ) {
       return;
     }
     const activeTabReadAt = activeSelection.tab.lastMessageAt?.trim() ?? null;
@@ -326,29 +329,15 @@ export function ChatSessionWorkspacePanel({
       maxWidth={860}
       overlay={displayMode === "overlay"}
     >
-      <div className="flex items-center justify-between gap-3 border-b border-gray-200/70 px-4 py-2.5">
-        <button
-          type="button"
-          onClick={presenter.chatThreadManager.goToParentSession}
-          className={cn(
-            "inline-flex items-center gap-1 text-xs font-medium text-gray-600 transition-colors hover:text-gray-900",
-            !hasParentSession && "pointer-events-none opacity-0",
-          )}
-        >
-          <ArrowLeft className="h-3.5 w-3.5" />
-          <span>{t("chatBackToParent")}</span>
-        </button>
-        <button
-          type="button"
-          onClick={presenter.chatThreadManager.closeWorkspacePanel}
-          className="rounded-full border border-gray-200/80 p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900"
-          aria-label={t("chatWorkspaceClosePanel")}
-        >
-          <X className="h-4 w-4" />
-        </button>
-      </div>
-
-      <WorkspaceTabsBar tabs={workspaceTabs} />
+      <WorkspaceTabsBar
+        tabs={workspaceTabs}
+        onBack={
+          hasParentSession
+            ? presenter.chatThreadManager.goToParentSession
+            : undefined
+        }
+        onClose={presenter.chatThreadManager.closeWorkspacePanel}
+      />
 
       <div className="flex min-h-0 flex-1 flex-col bg-white">
         {activeSelection.kind === "child-session" ? (

package/src/features/chat/components/conversation/chat-conversation-panel.test.tsx

@@ -653,9 +653,9 @@ describe("ChatSessionWorkspacePanel", () => {
     expect(screen.getByTestId("workspace-file-preview").textContent).toBe(
       "README.md",
     );
-    expect(screen.getByTestId("workspace-tabs-bar").className).toContain(
-      "workspace-horizontal-scrollbar",
-    );
+    expect(
+      screen.getByTestId("workspace-tabs-scroll").parentElement?.className,
+    ).toContain("workspace-horizontal-scrollbar");
   });
 
   it("renders session cron jobs in the workspace sidebar and deletes with a neutral confirmation", async () => {

package/src/features/panel-apps/components/panel-app-toolbar.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { PanelAppToolbar } from './panel-app-toolbar';
+
+describe('PanelAppToolbar', () => {
+  it('shows the current panel app title in the detail header', async () => {
+    const user = userEvent.setup();
+    const onOpenApps = vi.fn();
+    render(
+      <PanelAppToolbar
+        appTitle="墨爪助手"
+        onOpenApps={onOpenApps}
+        onRefresh={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText('墨爪助手')).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: 'Apps' }));
+
+    expect(onOpenApps).toHaveBeenCalledTimes(1);
+  });
+});

package/src/features/panel-apps/components/panel-app-toolbar.tsx

@@ -2,11 +2,13 @@ import { ArrowLeft, RefreshCw } from 'lucide-react';
 import { t } from '@/shared/lib/i18n';
 
 type PanelAppToolbarProps = {
+  appTitle: string;
   onOpenApps: () => void;
   onRefresh: () => void;
 };
 
 export function PanelAppToolbar({
+  appTitle,
   onOpenApps,
   onRefresh,
 }: PanelAppToolbarProps) {
@@ -15,11 +17,18 @@ export function PanelAppToolbar({
       <button
         type="button"
         onClick={onOpenApps}
-        className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+        className="inline-flex shrink-0 items-center rounded-md p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+        title={t('appsTitle')}
+        aria-label={t('appsTitle')}
       >
         <ArrowLeft className="h-3.5 w-3.5" />
-        {t('appsTitle')}
       </button>
+      <span
+        className="min-w-0 flex-1 truncate text-xs font-medium text-gray-600"
+        title={appTitle}
+      >
+        {appTitle}
+      </span>
       <button
         type="button"
         onClick={onRefresh}

package/src/features/panel-apps/utils/panel-app-doc-browser.utils.tsx

@@ -80,8 +80,9 @@ export const PANEL_APPS_DOC_BROWSER_RENDERERS: DocBrowserCustomTabRenderers = {
     getTitle: (tab) => tab.title || t('panelAppsTitle'),
     onIframeMessage: (params) => getPresenter().panelAppBridgeManager.handleIframeMessage(params),
     renderIcon: () => <AppWindow className="w-4 h-4 text-primary shrink-0" />,
-    renderToolbar: ({ open, refreshIframe }) => (
+    renderToolbar: ({ open, refreshIframe, tab }) => (
       <PanelAppToolbar
+        appTitle={tab.title || t('panelAppsTitle')}
         onOpenApps={() => openApps({ open })}
         onRefresh={refreshIframe}
       />