@nextclaw/ui 0.15.21 → 0.15.23

package/src/features/chat/features/input/utils/chat-inline-token.utils.ts

@@ -4,6 +4,7 @@ import {
   CHAT_INLINE_TOKENS_SCHEMA_VERSION,
   CHAT_PROJECT_TOKEN_KIND,
   CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
+  CHAT_WORKSPACE_EXCERPT_TOKEN_KIND,
   CHAT_WORKSPACE_FILE_TOKEN_KIND,
   type ChatInlineTokenMetadata,
   type ChatInlineTokensMetadata,
@@ -35,6 +36,16 @@ export type ChatInlineTokenSource =
       label: string;
       rawText: string;
     }
+  | {
+      kind: typeof CHAT_WORKSPACE_EXCERPT_TOKEN_KIND;
+      key: string;
+      path: string;
+      label: string;
+      excerpt: string;
+      startLine: number | null;
+      endLine: number | null;
+      rawText: string;
+    }
   | {
       kind: string;
       key: string;
@@ -71,6 +82,12 @@ function readOptionalString(value: unknown): string | null {
   return trimmed.length > 0 ? trimmed : null;
 }
 
+function readOptionalLine(value: unknown): number | null {
+  return typeof value === 'number' && Number.isInteger(value) && value > 0
+    ? value
+    : null;
+}
+
 function dedupeInlineTokens<T extends ChatInlineTokenSource>(tokens: readonly T[]): T[] {
   const seen = new Set<string>();
   const output: T[] = [];
@@ -100,7 +117,8 @@ export function buildInlineTokensFromComposer(
       node.tokenKind !== 'skill' &&
       node.tokenKind !== CHAT_PROJECT_TOKEN_KIND &&
       node.tokenKind !== CHAT_WORKSPACE_FILE_TOKEN_KIND &&
-      node.tokenKind !== CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND
+      node.tokenKind !== CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND &&
+      node.tokenKind !== CHAT_WORKSPACE_EXCERPT_TOKEN_KIND
     ) {
       continue;
     }
@@ -133,6 +151,24 @@ export function buildInlineTokensFromComposer(
       });
       continue;
     }
+    if (node.tokenKind === CHAT_WORKSPACE_EXCERPT_TOKEN_KIND) {
+      const path = readOptionalString(node.data?.path);
+      const excerpt = readOptionalString(node.data?.excerpt);
+      if (!path || !excerpt) {
+        continue;
+      }
+      tokens.push({
+        kind: CHAT_WORKSPACE_EXCERPT_TOKEN_KIND,
+        key: node.tokenKey,
+        path,
+        label: node.label,
+        excerpt,
+        startLine: readOptionalLine(node.data?.startLine),
+        endLine: readOptionalLine(node.data?.endLine),
+        rawText,
+      });
+      continue;
+    }
     const workspaceKind = node.tokenKind === CHAT_WORKSPACE_FILE_TOKEN_KIND
       ? CHAT_WORKSPACE_FILE_TOKEN_KIND
       : CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND;
@@ -215,7 +251,15 @@ export function resolveInlineTokensForText(
   text: string,
   tokens: readonly ChatInlineTokenSource[]
 ): ChatInlineTokenSource[] {
-  return dedupeInlineTokens([...tokens, ...buildInlineTokensFromTextProtocol(text)]);
+  const inferredTokens = buildInlineTokensFromTextProtocol(text).filter((inferredToken) => {
+    const inferredIndex = text.indexOf(inferredToken.rawText);
+    return !tokens.some((explicitToken) => (
+      explicitToken.kind === inferredToken.kind &&
+      inferredToken.rawText.startsWith(explicitToken.rawText) &&
+      text.indexOf(explicitToken.rawText) === inferredIndex
+    ));
+  });
+  return dedupeInlineTokens([...tokens, ...inferredTokens]);
 }
 
 export function readInlineTokensFromMetadata(
@@ -235,36 +279,8 @@ export function readInlineTokensFromMetadata(
 
   const tokens: ChatInlineTokenSource[] = [];
   for (const entry of raw.items) {
-    if (!isRecord(entry)) {
-      continue;
-    }
-    const kind = readOptionalString(entry.kind);
-    const rawText = readOptionalString(entry.rawText);
-    const label = readOptionalString(entry.label);
-    if (!kind || !label || !rawText) {
-      continue;
-    }
-    if (kind === 'skill') {
-      const ref = readOptionalString(entry.ref);
-      const name = readOptionalString(entry.name);
-      const path = readOptionalString(entry.path);
-      const source = readSkillSource(entry.source);
-      if (!ref || !name || !path || !source) {
-        continue;
-      }
-      tokens.push({ kind, ref, name, source, path, label, rawText });
-      continue;
-    }
-    const key = readOptionalString(entry.key);
-    if (!key) {
-      continue;
-    }
-    tokens.push({
-      kind,
-      key,
-      rawText,
-      label,
-    });
+    const token = readInlineTokenEntry(entry);
+    if (token) tokens.push(token);
   }
 
   return dedupeInlineTokens(tokens);
@@ -276,6 +292,55 @@ function readSkillSource(value: unknown): ChatSkillSource | null {
     : null;
 }
 
+function readInlineTokenEntry(entry: unknown): ChatInlineTokenSource | null {
+  if (!isRecord(entry)) {
+    return null;
+  }
+  const kind = readOptionalString(entry.kind);
+  const rawText = readOptionalString(entry.rawText);
+  const label = readOptionalString(entry.label);
+  if (!kind || !label || !rawText) {
+    return null;
+  }
+  if (kind === 'skill') {
+    const ref = readOptionalString(entry.ref);
+    const name = readOptionalString(entry.name);
+    const path = readOptionalString(entry.path);
+    const source = readSkillSource(entry.source);
+    return ref && name && path && source
+      ? { kind, ref, name, source, path, label, rawText }
+      : null;
+  }
+  if (kind === CHAT_WORKSPACE_EXCERPT_TOKEN_KIND) {
+    return readWorkspaceExcerptInlineToken({ entry, label, rawText });
+  }
+  const key = readOptionalString(entry.key);
+  return key ? { kind, key, rawText, label } : null;
+}
+
+function readWorkspaceExcerptInlineToken(params: {
+  entry: Record<string, unknown>;
+  label: string;
+  rawText: string;
+}): ChatInlineTokenSource | null {
+  const { entry, label, rawText } = params;
+  const key = readOptionalString(entry.key);
+  const path = readOptionalString(entry.path);
+  const excerpt = readOptionalString(entry.excerpt);
+  return key && path && excerpt
+    ? {
+        kind: CHAT_WORKSPACE_EXCERPT_TOKEN_KIND,
+        key,
+        path,
+        label,
+        excerpt,
+        startLine: readOptionalLine(entry.startLine),
+        endLine: readOptionalLine(entry.endLine),
+        rawText,
+      }
+    : null;
+}
+
 function readLegacyInlineTokens(entries: readonly unknown[]): ChatInlineTokenSource[] {
   const tokens: ChatInlineTokenSource[] = [];
   for (const entry of entries) {

package/src/features/chat/features/input/utils/chat-input-bar.utils.ts

@@ -8,6 +8,7 @@ export {
   buildModelStateHint,
   buildModelToolbarSelect,
   buildThinkingToolbarSelect,
+  toChatModelRecords,
 } from "./chat-input-toolbar.utils";
 import type {
   ChatInputBarAdapterTexts,
@@ -278,7 +279,6 @@ export function buildSkillPickerModel(params: {
   const recentKeySet = new Set(groupedRecentSkillValues ?? []);
   return {
     title: texts.title,
-    allGroupsLabel: texts.allSkillsLabel,
     searchPlaceholder: texts.searchPlaceholder,
     emptyLabel: texts.emptyLabel,
     loadingLabel: texts.loadingLabel,

package/src/features/chat/features/input/utils/chat-input-toolbar.utils.ts

@@ -7,6 +7,7 @@ import type {
   ChatModelRecord,
   ChatThinkingLevel,
 } from "@/features/chat/types/chat-input-bar.types";
+import type { ChatModelOption } from "@/features/chat/types/chat-input.types";
 
 function formatModelOptionLabel(option: ChatModelRecord): string {
   const modelLabel = option.modelLabel.trim();
@@ -14,6 +15,36 @@ function formatModelOptionLabel(option: ChatModelRecord): string {
   return providerLabel ? `${providerLabel}/${modelLabel}` : modelLabel;
 }
 
+function buildDiscoveredModelGroups(options: ChatModelRecord[]) {
+  const groups = new Map<string, { key: string; label: string; options: Array<{ value: string; label: string }> }>();
+  for (const option of options) {
+    const separatorIndex = option.value.indexOf('/');
+    const providerKey = separatorIndex > 0 ? option.value.slice(0, separatorIndex) : option.providerLabel;
+    const group = groups.get(providerKey) ?? {
+      key: providerKey,
+      label: option.providerLabel,
+      options: [],
+    };
+    group.options.push({ value: option.value, label: option.modelLabel });
+    groups.set(providerKey, group);
+  }
+  return [...groups.values()];
+}
+
+export function toChatModelRecords(snapshotModels: ChatModelOption[]): ChatModelRecord[] {
+  return snapshotModels.map((model) => ({
+    value: model.value,
+    modelLabel: model.modelLabel,
+    providerLabel: model.providerLabel,
+    thinkingCapability: model.thinkingCapability
+      ? {
+          supported: model.thinkingCapability.supported as ChatThinkingLevel[],
+          default: (model.thinkingCapability.default as ChatThinkingLevel | null | undefined) ?? null,
+        }
+      : null,
+  }));
+}
+
 function normalizeThinkingLevels(
   levels: ChatThinkingLevel[],
 ): ChatThinkingLevel[] {
@@ -27,7 +58,6 @@ function normalizeThinkingLevels(
 }
 
 export function buildModelStateHint(params: {
-  isModelOptionsLoading: boolean;
   isModelOptionsEmpty: boolean;
   onGoToProviders: () => void;
   texts: Pick<
@@ -37,19 +67,12 @@ export function buildModelStateHint(params: {
 }): ChatInlineHint | null {
   const {
     isModelOptionsEmpty,
-    isModelOptionsLoading,
     onGoToProviders,
     texts,
   } = params;
-  if (!isModelOptionsLoading && !isModelOptionsEmpty) {
+  if (!isModelOptionsEmpty) {
     return null;
   }
-  if (isModelOptionsLoading) {
-    return {
-      tone: "neutral",
-      loading: true,
-    };
-  }
   return {
     tone: "warning",
     text: texts.noModelOptionsLabel,
@@ -60,22 +83,30 @@ export function buildModelStateHint(params: {
 
 export function buildModelToolbarSelect({
   modelOptions,
+  discoveredModelOptions,
   favoriteModelValues,
   recentModelValues,
   selectedModel,
   isModelOptionsLoading,
   hasModelOptions,
   onFavoriteToggle,
+  onDiscoveredModelSelect,
+  onDiscoveredModelsDismiss,
+  onOpen,
   onValueChange,
   texts,
 }: {
   modelOptions: ChatModelRecord[];
+  discoveredModelOptions?: ChatModelRecord[];
   favoriteModelValues?: string[];
   recentModelValues?: string[];
   selectedModel: string;
   isModelOptionsLoading: boolean;
   hasModelOptions: boolean;
   onFavoriteToggle?: (value: string, favorite: boolean) => void;
+  onDiscoveredModelSelect?: (value: string) => Promise<void> | void;
+  onDiscoveredModelsDismiss?: () => void;
+  onOpen?: () => void;
   onValueChange: (value: string) => void;
   texts: Pick<
     ChatInputBarAdapterTexts,
@@ -86,6 +117,12 @@ export function buildModelToolbarSelect({
     | "favoriteModelsLabel"
     | "favoriteModelLabel"
     | "unfavoriteModelLabel"
+    | "manageModelsLabel"
+    | "discoveredModelsSummaryLabel"
+    | "discoveredModelsViewLabel"
+    | "discoveredModelsGroupLabel"
+    | "discoveredModelAddLabel"
+    | "discoveredModelsDismissLabel"
     | "recentModelsLabel"
     | "allModelsLabel"
   >;
@@ -142,6 +179,7 @@ export function buildModelToolbarSelect({
           },
         ].filter((group) => group.options.length > 0)
     : undefined;
+  const discoveryOptions = discoveredModelOptions ?? [];
 
   return {
     key: "model",
@@ -156,7 +194,7 @@ export function buildModelToolbarSelect({
       label: formatModelOptionLabel(option),
     })),
     groups: optionGroups,
-    disabled: !hasModelOptions,
+    disabled: !hasModelOptions && discoveryOptions.length === 0,
     loading: isModelOptionsLoading,
     emptyLabel: texts.modelNoOptionsLabel,
     search: {
@@ -172,6 +210,22 @@ export function buildModelToolbarSelect({
           onToggle: onFavoriteToggle,
         }
       : undefined,
+    discovery: onDiscoveredModelSelect && onDiscoveredModelsDismiss && discoveryOptions.length > 0
+      ? {
+          summaryLabel: texts.discoveredModelsSummaryLabel.replace('{count}', String(discoveryOptions.length)),
+          viewLabel: texts.discoveredModelsViewLabel,
+          groupLabel: texts.discoveredModelsGroupLabel,
+          allGroupLabel: texts.allModelsLabel,
+          actionLabel: texts.discoveredModelAddLabel,
+          dismissLabel: texts.discoveredModelsDismissLabel,
+          groups: buildDiscoveredModelGroups(discoveryOptions),
+          onDismiss: onDiscoveredModelsDismiss,
+          onSelect: onDiscoveredModelSelect,
+        }
+      : undefined,
+    manageLabel: texts.manageModelsLabel,
+    manageHref: "/providers",
+    onOpen,
     onValueChange,
   };
 }

package/src/features/chat/features/message/components/__tests__/chat-message-assistant-header.container.test.tsx

@@ -0,0 +1,149 @@
+import { render } from "@testing-library/react";
+import {
+  type ComponentProps,
+  type ComponentType,
+  useRef,
+} from "react";
+import type { ChatMessageListProps } from "@nextclaw/agent-chat-ui";
+import type { NcpMessage } from "@nextclaw/ncp";
+import { beforeEach, expect, it, vi } from "vitest";
+import { ChatMessageListContainer as RuntimeChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
+import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+
+type AgentChatUiModule = {
+  ChatMessageList: ComponentType<ChatMessageListProps>;
+};
+
+function ChatMessageListContainer(
+  props: Omit<
+    ComponentProps<typeof RuntimeChatMessageListContainer>,
+    "sessionKey" | "scrollRef"
+  >,
+) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  return (
+    <RuntimeChatMessageListContainer
+      {...props}
+      scrollRef={scrollRef}
+      sessionKey="session-1"
+    />
+  );
+}
+
+const captures = vi.hoisted(() => ({
+  renders: [] as ChatMessageListProps[],
+  selectedSession: null as null | {
+    agentId: string;
+    projectRoot: null;
+    sessionType: string;
+  },
+}));
+
+vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => ({
+  ...((await importOriginal()) as AgentChatUiModule),
+  ChatMessageList: (props: ChatMessageListProps) => {
+    captures.renders.push(props);
+    return <div data-testid="chat-message-list" />;
+  },
+}));
+
+vi.mock(
+  "@/features/chat/features/message/hooks/use-chat-message-virtualizer",
+  () => ({
+    useChatMessageVirtualizer: ({ rows }: { rows: Array<{ key: string }> }) => ({
+      containerRef: vi.fn(),
+      virtualizer: {
+        getVirtualItems: () => rows.map((_, index) => ({ index, start: 0 })),
+        measureElement: vi.fn(),
+      },
+    }),
+  }),
+);
+
+vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
+  usePresenter: () => ({
+    chatThreadManager: {
+      openFilePreview: vi.fn(),
+      handleToolAction: vi.fn(),
+    },
+    chatUiManager: { showContent: vi.fn() },
+  }),
+}));
+
+vi.mock(
+  "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state",
+  () => ({
+    useNcpChatSelectedSession: () => captures.selectedSession,
+  }),
+);
+
+vi.mock("@/app/components/i18n-provider", () => ({
+  useI18n: () => ({ language: "en" }),
+}));
+
+vi.mock("@/shared/lib/i18n", () => ({
+  formatDateTime: (value: string) => value,
+  t: (key: string) => key,
+}));
+
+beforeEach(() => {
+  captures.renders = [];
+  captures.selectedSession = null;
+  useChatQueryStore.setState({ snapshot: {} });
+  useChatSessionListStore.getState().setSnapshot({ selectedAgentId: "main" });
+});
+
+it.each([
+  { agentId: "main", sessionType: "native", expected: false },
+  { agentId: "engineer", sessionType: "native", expected: true },
+  { agentId: "main", sessionType: "codex", expected: true },
+])(
+  "sets assistant header visibility for $agentId with $sessionType runtime",
+  ({ agentId, expected, sessionType }) => {
+    captures.selectedSession = { agentId, projectRoot: null, sessionType };
+
+    render(<ChatMessageListContainer messages={[]} isSending />);
+
+    expect(captures.renders.at(-1)?.showAssistantHeader).toBe(expected);
+  },
+);
+
+it("uses the selected draft agent before the first session materializes", () => {
+  render(<ChatMessageListContainer messages={[]} isSending />);
+
+  expect(captures.renders.at(-1)?.showAssistantHeader).toBe(false);
+});
+
+it("keeps a new session's empty first assistant draft in the awaiting state", () => {
+  captures.selectedSession = {
+    agentId: "main",
+    projectRoot: null,
+    sessionType: "native",
+  };
+  const messages = [
+    {
+      id: "user-first",
+      sessionId: "session-1",
+      role: "user",
+      status: "final",
+      timestamp: "2026-08-08T10:00:00.000Z",
+      parts: [{ type: "text", text: "First message" }],
+    },
+    {
+      id: "assistant-first",
+      sessionId: "session-1",
+      role: "assistant",
+      status: "streaming",
+      timestamp: "2026-08-08T10:00:01.000Z",
+      parts: [{ type: "text", text: "" }],
+    },
+  ] satisfies NcpMessage[];
+
+  render(<ChatMessageListContainer messages={messages} isSending />);
+
+  const assistantDraftRender = captures.renders.find(
+    (props) => props.messages[0]?.id === "assistant-first",
+  );
+  expect(assistantDraftRender?.isSending).toBe(true);
+});

package/src/features/chat/features/message/components/__tests__/chat-message-inline-editor.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createChatComposerTextNode } from '@nextclaw/agent-chat-ui';
+import { useState } from 'react';
+import { expect, it, vi } from 'vitest';
+
+import { ChatMessageInlineEditor } from '@/features/chat/features/message/components/chat-message-inline-editor';
+import type { SessionMessageComposerSnapshot } from '@/features/chat/features/conversation/utils/session-message-composer.utils';
+
+Object.defineProperty(Range.prototype, 'getBoundingClientRect', {
+  value: vi.fn(() => ({
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  })),
+  writable: true,
+});
+
+function EditorHarness({ text }: { text: string }) {
+  const [snapshot, setSnapshot] = useState<SessionMessageComposerSnapshot>({
+    attachments: [],
+    nodes: [createChatComposerTextNode(text)],
+    selectedSkills: [],
+    skillRecords: [],
+    text,
+  });
+  return (
+    <ChatMessageInlineEditor
+      disabled={false}
+      messageId="user-message-1"
+      onCancel={vi.fn()}
+      onChange={setSnapshot}
+      onSave={vi.fn()}
+      snapshot={snapshot}
+    />
+  );
+}
+
+it('focuses the editor with the caret at the end when editing starts', async () => {
+  const text = 'Edit this message';
+  render(<EditorHarness text={text} />);
+
+  const editor = screen.getByRole('textbox');
+  await waitFor(() => expect(document.activeElement).toBe(editor));
+  expect(window.getSelection()?.anchorOffset).toBe(text.length);
+  expect(window.getSelection()?.focusOffset).toBe(text.length);
+
+  await userEvent.setup().type(editor, ',');
+
+  await waitFor(() => expect(editor.textContent).toBe(`${text},`));
+  expect(window.getSelection()?.anchorOffset).toBe(text.length + 1);
+  expect(window.getSelection()?.focusOffset).toBe(text.length + 1);
+});