@nextclaw/ui 0.12.9 → 0.12.11

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

@@ -269,6 +269,23 @@ describe("ChatConversationPanel", () => {
     expect(screen.queryByText("Engineer")).toBeNull();
   });
 
+  it("renders a fuller loading skeleton before provider state settles", () => {
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        isProviderStateResolved: false,
+      },
+    });
+
+    render(<ChatConversationPanel />);
+
+    expect(screen.getByTestId("chat-conversation-skeleton")).toBeTruthy();
+    expect(
+      screen.getAllByTestId("chat-conversation-skeleton-bubble"),
+    ).toHaveLength(4);
+    expect(screen.queryByTestId("chat-input-bar")).toBeNull();
+  });
+
   it("keeps the message area clean while a session history is hydrating", () => {
     useChatThreadStore.setState({
       snapshot: {
@@ -288,6 +305,16 @@ describe("ChatConversationPanel", () => {
     expect(screen.queryByText("No messages yet. Send one to start.")).toBeNull();
   });
 
+  it("does not render runtime lifecycle copy in the conversation alert strip", () => {
+    render(<ChatConversationPanel />);
+
+    expect(
+      screen.queryByText(
+        "聊天能力正在初始化。你可以先输入内容，完成后即可发送。",
+      ),
+    ).toBeNull();
+  });
+
   it("does not auto-open the child-session panel until the panel is explicitly opened", () => {
     useChatThreadStore.setState({
       snapshot: {
@@ -495,5 +522,8 @@ describe("ChatSessionWorkspacePanel", () => {
     expect(screen.getByTestId("workspace-file-preview").textContent).toBe(
       "README.md",
     );
+    expect(screen.getByTestId("workspace-tabs-bar").className).toContain(
+      "workspace-horizontal-scrollbar",
+    );
   });
 });

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

@@ -9,35 +9,93 @@ import {
 import { ChatWelcome } from "@/components/chat/ChatWelcome";
 import { ChatSessionWorkspacePanel } from "@/components/chat/chat-session-workspace-panel";
 import { AgentAvatar } from "@/components/common/AgentAvatar";
+import { SessionContextIconNode } from "@/components/common/session-context-icon";
 import { usePresenter } from "@/components/chat/presenter/chat-presenter-context";
 import { ChatSessionHeaderActions } from "@/components/chat/session-header/chat-session-header-actions";
 import { ChatSessionProjectBadge } from "@/components/chat/session-header/chat-session-project-badge";
 import { useChatInputStore } from "@/components/chat/stores/chat-input.store";
 import { useChatThreadStore } from "@/components/chat/stores/chat-thread.store";
+import { Skeleton } from "@/components/ui/skeleton";
 import { resolveAgentRuntimeSessionType } from "@/components/chat/useChatSessionTypeState";
 import { t } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 
+const CHAT_CONVERSATION_SKELETON_BUBBLES = [
+  {
+    key: "hero",
+    alignmentClassName: "justify-start",
+    bubbleClassName: "max-w-[78%] h-32 rounded-[30px]",
+  },
+  {
+    key: "follow-up",
+    alignmentClassName: "justify-start",
+    bubbleClassName: "max-w-[62%] h-24 rounded-[28px]",
+  },
+  {
+    key: "reply",
+    alignmentClassName: "justify-end",
+    bubbleClassName: "max-w-[70%] h-24 rounded-[28px]",
+  },
+  {
+    key: "detail",
+    alignmentClassName: "justify-start",
+    bubbleClassName: "max-w-[88%] h-36 rounded-[30px]",
+  },
+] as const;
+
 function ChatConversationSkeleton() {
   return (
-    <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+    <section
+      data-testid="chat-conversation-skeleton"
+      className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white"
+    >
       <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
-        <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
-          <div className="space-y-4">
-            <div className="h-6 w-48 animate-pulse rounded bg-gray-200" />
-            <div className="h-24 w-[78%] animate-pulse rounded-2xl bg-gray-200/80" />
-            <div className="h-20 w-[62%] animate-pulse rounded-2xl bg-gray-200/80" />
-            <div className="h-28 w-[84%] animate-pulse rounded-2xl bg-gray-200/80" />
+        <div className="mx-auto flex min-h-full w-full max-w-[min(1120px,100%)] flex-col px-6 py-5">
+          <div className="flex flex-1 flex-col gap-8">
+            <div className="space-y-6">
+              <Skeleton className="h-6 w-52 rounded-lg bg-gray-200/90" />
+              <div className="space-y-5">
+                {CHAT_CONVERSATION_SKELETON_BUBBLES.map((bubble) => (
+                  <div
+                    key={bubble.key}
+                    className={cn("flex w-full", bubble.alignmentClassName)}
+                  >
+                    <Skeleton
+                      data-testid="chat-conversation-skeleton-bubble"
+                      className={cn(
+                        "w-full bg-gray-200/80",
+                        bubble.bubbleClassName,
+                      )}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="mt-auto grid gap-4 pb-2 sm:grid-cols-[minmax(0,1fr)_minmax(180px,240px)] sm:items-end">
+              <div className="space-y-3">
+                <Skeleton className="h-4 w-40 rounded-full bg-gray-200/70" />
+                <Skeleton className="h-[112px] w-full rounded-[30px] bg-gray-200/70" />
+              </div>
+              <div className="hidden justify-end sm:flex">
+                <Skeleton className="h-10 w-36 rounded-full bg-gray-200/75" />
+              </div>
+            </div>
           </div>
         </div>
       </div>
       <div className="border-t border-gray-200/80 bg-white p-4">
         <div className="mx-auto w-full max-w-[min(1120px,100%)]">
-          <div className="rounded-2xl border border-gray-200 bg-white shadow-card p-4">
-            <div className="h-16 w-full animate-pulse rounded-xl bg-gray-200/80" />
-            <div className="mt-3 flex items-center justify-between">
-              <div className="h-8 w-36 animate-pulse rounded-lg bg-gray-200/80" />
-              <div className="h-8 w-20 animate-pulse rounded-lg bg-gray-200/80" />
+          <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card">
+            <div className="px-4 py-2.5">
+              <Skeleton className="h-[84px] w-full rounded-[28px] bg-gray-200/80" />
+            </div>
+            <div className="flex items-center justify-between gap-3 px-3 pb-3">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-8 w-20 rounded-full bg-gray-200/75" />
+                <Skeleton className="h-8 w-28 rounded-full bg-gray-200/75" />
+                <Skeleton className="hidden h-8 w-24 rounded-full bg-gray-200/70 sm:block" />
+              </div>
+              <Skeleton className="h-8 w-8 rounded-full bg-gray-200/85" />
             </div>
           </div>
         </div>
@@ -130,7 +188,19 @@ function ChatConversationHeader({
           {sessionHeaderTitle}
         </span>
         {snapshot.sessionTypeLabel ? (
-          <span className="shrink-0 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
+          <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
+            {snapshot.sessionTypeIcon?.src ? (
+              <span className="inline-flex h-[1.125rem] w-[1.125rem] items-center justify-center">
+                <SessionContextIconNode
+                  icon={{
+                    kind: "runtime-image",
+                    src: snapshot.sessionTypeIcon.src,
+                    alt: snapshot.sessionTypeIcon.alt ?? null,
+                    name: snapshot.sessionTypeLabel
+                  }}
+                />
+              </span>
+            ) : null}
             {snapshot.sessionTypeLabel}
           </span>
         ) : null}

package/src/components/chat/chat-input/ncp-chat-input-availability.utils.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest';
+import {
+  hasNcpChatModelOptions,
+  isNcpChatComposerDisabled,
+  isNcpChatModelOptionsEmpty,
+  isNcpChatModelOptionsLoading,
+  isNcpChatSendDisabled,
+} from '@/components/chat/chat-input/ncp-chat-input-availability.utils';
+import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
+
+function createSnapshot(
+  overrides: Partial<ChatInputSnapshot> = {}
+): ChatInputSnapshot {
+  return {
+    isProviderStateResolved: false,
+    composerNodes: [],
+    attachments: [],
+    draft: '',
+    pendingSessionType: 'native',
+    pendingProjectRoot: null,
+    pendingProjectRootSessionKey: null,
+    defaultSessionType: 'native',
+    canStopGeneration: false,
+    stopDisabledReason: null,
+    sendError: null,
+    isSending: false,
+    modelOptions: [],
+    selectedModel: '',
+    selectedThinkingLevel: null,
+    sessionTypeOptions: [],
+    selectedSessionType: 'native',
+    stopSupported: false,
+    stopReason: undefined,
+    canEditSessionType: true,
+    sessionTypeUnavailable: false,
+    skillRecords: [],
+    isSkillsLoading: false,
+    selectedSkills: [],
+    ...overrides,
+  };
+}
+
+describe('ncp-chat-input-availability.utils', () => {
+  it('keeps the composer editable during cold start while send remains blocked', () => {
+    const snapshot = createSnapshot({
+      isProviderStateResolved: false,
+      modelOptions: [],
+      sessionTypeUnavailable: false,
+    });
+
+    expect(hasNcpChatModelOptions(snapshot)).toBe(false);
+    expect(isNcpChatModelOptionsLoading(snapshot)).toBe(true);
+    expect(isNcpChatComposerDisabled(snapshot)).toBe(false);
+    expect(
+      isNcpChatSendDisabled({
+        snapshot,
+        hasSendableDraft: true,
+        isRuntimeBlocked: true,
+      })
+    ).toBe(true);
+  });
+
+  it('marks model options as empty only after provider state resolves', () => {
+    const loadingSnapshot = createSnapshot({
+      isProviderStateResolved: false,
+      modelOptions: [],
+    });
+    const emptySnapshot = createSnapshot({
+      isProviderStateResolved: true,
+      modelOptions: [],
+    });
+
+    expect(isNcpChatModelOptionsEmpty(loadingSnapshot)).toBe(false);
+    expect(isNcpChatModelOptionsEmpty(emptySnapshot)).toBe(true);
+  });
+
+  it('disables both editing and sending when the session type is unavailable', () => {
+    const snapshot = createSnapshot({
+      isProviderStateResolved: true,
+      sessionTypeUnavailable: true,
+    });
+
+    expect(isNcpChatComposerDisabled(snapshot)).toBe(true);
+    expect(
+      isNcpChatSendDisabled({
+        snapshot,
+        hasSendableDraft: true,
+        isRuntimeBlocked: false,
+      })
+    ).toBe(true);
+  });
+});

package/src/components/chat/chat-input/ncp-chat-input-availability.utils.ts

@@ -0,0 +1,45 @@
+import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
+
+type NcpChatInputAvailabilitySnapshot = Pick<
+  ChatInputSnapshot,
+  'isProviderStateResolved' | 'modelOptions' | 'sessionTypeUnavailable'
+>;
+
+export function hasNcpChatModelOptions(
+  snapshot: NcpChatInputAvailabilitySnapshot
+): boolean {
+  return snapshot.modelOptions.length > 0;
+}
+
+export function isNcpChatModelOptionsLoading(
+  snapshot: NcpChatInputAvailabilitySnapshot
+): boolean {
+  return !snapshot.isProviderStateResolved && !hasNcpChatModelOptions(snapshot);
+}
+
+export function isNcpChatModelOptionsEmpty(
+  snapshot: NcpChatInputAvailabilitySnapshot
+): boolean {
+  return snapshot.isProviderStateResolved && !hasNcpChatModelOptions(snapshot);
+}
+
+export function isNcpChatComposerDisabled(
+  snapshot: NcpChatInputAvailabilitySnapshot
+): boolean {
+  return snapshot.sessionTypeUnavailable;
+}
+
+export function isNcpChatSendDisabled(params: {
+  hasSendableDraft: boolean;
+  snapshot: NcpChatInputAvailabilitySnapshot;
+  isRuntimeBlocked: boolean;
+}): boolean {
+  const { hasSendableDraft, isRuntimeBlocked, snapshot } = params;
+
+  return (
+    isRuntimeBlocked ||
+    !hasSendableDraft ||
+    !hasNcpChatModelOptions(snapshot) ||
+    snapshot.sessionTypeUnavailable
+  );
+}

package/src/components/chat/chat-page-shell.tsx

@@ -1,12 +1,12 @@
-import { useEffect } from 'react';
-import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
-import { ChatSidebar } from '@/components/chat/ChatSidebar';
-import { ChatConversationPanel } from '@/components/chat/chat-conversation-panel';
-import { AgentsPage } from '@/components/agents/AgentsPage';
-import { CronConfig } from '@/components/config/CronConfig';
-import { MarketplacePage } from '@/components/marketplace/MarketplacePage';
+import { useEffect } from "react";
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { ChatSidebar } from "@/components/chat/containers/chat-sidebar";
+import { ChatConversationPanel } from "@/components/chat/chat-conversation-panel";
+import { AgentsPage } from "@/components/agents/agents-page";
+import { CronConfig } from "@/components/config/CronConfig";
+import { MarketplacePage } from "@/components/marketplace/marketplace-page";
 
-export type MainPanelView = 'chat' | 'cron' | 'skills' | 'agents';
+export type MainPanelView = "chat" | "cron" | "skills" | "agents";
 
 export type ChatPageProps = {
   view: MainPanelView;
@@ -32,7 +32,7 @@ export function useChatSessionSync(params: UseChatSessionSyncParams): void {
   } = params;
 
   useEffect(() => {
-    if (view !== 'chat') {
+    if (view !== "chat") {
       return;
     }
     if (routeSessionKey) {
@@ -45,7 +45,13 @@ export function useChatSessionSync(params: UseChatSessionSyncParams): void {
       setSelectedSessionKey(null);
       resetStreamState();
     }
-  }, [resetStreamState, routeSessionKey, selectedSessionKey, setSelectedSessionKey, view]);
+  }, [
+    resetStreamState,
+    routeSessionKey,
+    selectedSessionKey,
+    setSelectedSessionKey,
+    view,
+  ]);
 
   useEffect(() => {
     selectedSessionKeyRef.current = selectedSessionKey;
@@ -62,17 +68,17 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
     <div className="h-full flex">
       <ChatSidebar />
 
-      {view === 'chat' ? (
+      {view === "chat" ? (
         <ChatConversationPanel />
       ) : (
         <section className="flex-1 min-h-0 overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
-          {view === 'cron' ? (
+          {view === "cron" ? (
             <div className="h-full overflow-auto custom-scrollbar">
               <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
                 <CronConfig />
               </div>
             </div>
-          ) : view === 'agents' ? (
+          ) : view === "agents" ? (
             <div className="h-full overflow-auto custom-scrollbar">
               <div className="mx-auto w-full max-w-[min(1180px,100%)] px-6 py-5">
                 <AgentsPage />

package/src/components/chat/chat-session-type-option-item.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ChatSessionTypeOptionItem } from "@/components/chat/chat-session-type-option-item";
+
+describe("ChatSessionTypeOptionItem", () => {
+  it("renders a runtime icon image when the session type option provides an app resource URI", () => {
+    render(
+      <ChatSessionTypeOptionItem
+        option={{
+          value: "codex",
+          label: "Codex",
+          icon: {
+            kind: "image",
+            src: "app://runtime-icons/codex-openai.svg",
+            alt: "Codex",
+          },
+          ready: true,
+        }}
+        onSelect={vi.fn()}
+      />,
+    );
+
+    const runtimeIcon = screen.getByRole("img", { name: "Codex logo" });
+    expect(runtimeIcon.getAttribute("src")).toBe("/runtime-icons/codex-openai.svg");
+  });
+
+  it("keeps ready options visually compact without repeating helper copy", () => {
+    render(
+      <ChatSessionTypeOptionItem
+        option={{
+          value: "claude",
+          label: "Claude",
+          icon: {
+            kind: "image",
+            src: "app://runtime-icons/claude.ico",
+            alt: "Claude",
+          },
+          ready: true,
+        }}
+        onSelect={vi.fn()}
+      />,
+    );
+
+    expect(screen.getAllByText("Ready")).toHaveLength(1);
+  });
+});

package/src/components/chat/chat-session-type-option-item.tsx

@@ -0,0 +1,68 @@
+import type { ChatInputSnapshot } from "@/components/chat/stores/chat-input.store";
+import { SessionContextIconNode } from "@/components/common/session-context-icon";
+import { t } from "@/lib/i18n";
+import { cn } from "@/lib/utils";
+
+type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+
+export function ChatSessionTypeOptionItem(props: {
+  option: SessionTypeOption;
+  onSelect: () => void;
+}) {
+  const { option, onSelect } = props;
+  const helperText =
+    option.ready === false
+      ? option.reasonMessage?.trim() || t("statusSetup")
+      : null;
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className="w-full rounded-2xl px-3 py-2.5 text-left transition-colors hover:bg-gray-50"
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex min-w-0 flex-1 items-start gap-2.5">
+          {option.icon?.src ? (
+            <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center pt-0.5">
+              <SessionContextIconNode
+                icon={{
+                  kind: "runtime-image",
+                  src: option.icon.src,
+                  alt: option.icon.alt ?? null,
+                  name: option.label,
+                }}
+              />
+            </span>
+          ) : null}
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center justify-between gap-3">
+              <div className="truncate text-[13px] font-semibold text-gray-900">
+                {option.label}
+              </div>
+              <span
+                className={cn(
+                  "inline-flex shrink-0 items-center gap-1.5 text-[11px] font-medium",
+                  option.ready === false ? "text-amber-700" : "text-emerald-600",
+                )}
+              >
+                <span
+                  className={cn(
+                    "h-1.5 w-1.5 rounded-full",
+                    option.ready === false ? "bg-amber-500" : "bg-emerald-500",
+                  )}
+                />
+                {option.ready === false ? t("statusSetup") : t("statusReady")}
+              </span>
+            </div>
+            {helperText ? (
+              <div className="mt-1 pr-4 text-[11px] leading-4 text-gray-500">
+                {helperText}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+}

package/src/components/chat/chat-session-workspace-file-preview.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ChatSessionWorkspaceFilePreview } from "@/components/chat/chat-session-workspace-file-preview";
 import type { ChatWorkspaceFileTab } from "@/components/chat/stores/chat-thread.store";
+import { t } from "@/lib/i18n";
 
 const serverPathReadMock = vi.fn();
 
@@ -88,4 +89,90 @@ describe("ChatSessionWorkspaceFilePreview", () => {
       "workspace",
     );
   });
+
+  it("does not repeat the preview badge inside the workspace header", () => {
+    serverPathReadMock.mockReturnValue({
+      isLoading: false,
+      error: null,
+      data: {
+        kind: "text",
+        resolvedPath: "/tmp/example.ts",
+        text: "const answer = 42;\n",
+        truncated: false,
+      },
+    });
+
+    render(
+      <ChatSessionWorkspaceFilePreview
+        file={buildWorkspaceFile({ viewMode: "preview" })}
+        sessionProjectRoot="/tmp"
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect(screen.queryByText(t("chatWorkspacePreview"))).toBeNull();
+    expect(screen.getByTitle("/tmp/example.ts")).toBeTruthy();
+    expect(screen.getByText("tmp")).toBeTruthy();
+    expect(screen.getByText("example.ts")).toBeTruthy();
+  });
+
+  it("renders project-relative breadcrumbs when the file is inside the workspace", () => {
+    serverPathReadMock.mockReturnValue({
+      isLoading: false,
+      error: null,
+      data: {
+        kind: "text",
+        resolvedPath: "/tmp/workspace/src/example.ts",
+        text: "const answer = 42;\n",
+        truncated: false,
+      },
+    });
+
+    render(
+      <ChatSessionWorkspaceFilePreview
+        file={buildWorkspaceFile({ viewMode: "preview" })}
+        sessionProjectRoot="/tmp/workspace"
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("workspace")).toBeTruthy();
+    expect(screen.getByText("src")).toBeTruthy();
+    expect(screen.getByText("example.ts")).toBeTruthy();
+    expect(
+      screen.getByTestId("workspace-file-breadcrumb-scroll").className,
+    ).toContain("py-1.5");
+    expect(screen.getByTestId("workspace-file-breadcrumbs").className).toContain(
+      "workspace-horizontal-scrollbar",
+    );
+  });
+
+  it("keeps line and truncation metadata without the duplicated type badge", () => {
+    serverPathReadMock.mockReturnValue({
+      isLoading: false,
+      error: null,
+      data: {
+        kind: "text",
+        resolvedPath: "/tmp/example.ts",
+        text: "const answer = 42;\n",
+        truncated: true,
+      },
+    });
+
+    render(
+      <ChatSessionWorkspaceFilePreview
+        file={buildWorkspaceFile({
+          viewMode: "preview",
+          line: 12,
+          column: 4,
+        })}
+        sessionProjectRoot="/tmp"
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("L12:4")).toBeTruthy();
+    expect(screen.getByText(t("chatWorkspacePreviewTruncated"))).toBeTruthy();
+    expect(screen.queryByText(t("chatWorkspacePreview"))).toBeNull();
+  });
 });