@nextclaw/ui 0.11.23 → 0.12.1

package/src/components/chat/ncp/session-conversation/use-ncp-session-conversation.test.tsx

@@ -0,0 +1,101 @@
+import { renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fetchNcpSessionConversationSeed, useNcpSessionConversation } from "./use-ncp-session-conversation";
+
+const mocks = vi.hoisted(() => ({
+  fetchNcpSessionMessages: vi.fn(),
+  hydratedCalls: [] as Array<{ client: unknown }>,
+  useHydratedNcpAgent: vi.fn(() => ({
+    snapshot: {
+      messages: [],
+      streamingMessage: null,
+      activeRun: null,
+      error: null,
+    },
+    visibleMessages: [],
+    activeRunId: null,
+    isRunning: false,
+    isSending: false,
+    send: vi.fn(),
+    abort: vi.fn(),
+    streamRun: vi.fn(),
+    isHydrating: false,
+    hydrateError: null,
+  })),
+  clientInstances: [] as unknown[],
+}));
+
+vi.mock("@/api/ncp-session", () => ({
+  fetchNcpSessionMessages: mocks.fetchNcpSessionMessages,
+}));
+
+vi.mock("@nextclaw/ncp-react", () => ({
+  useHydratedNcpAgent: vi.fn((params: { client: unknown }) => {
+    mocks.hydratedCalls.push(params);
+    return mocks.useHydratedNcpAgent();
+  }),
+}));
+
+vi.mock("@nextclaw/ncp-http-agent-client", () => ({
+  NcpHttpAgentClientEndpoint: vi.fn().mockImplementation(function MockClient(this: object) {
+    mocks.clientInstances.push(this);
+  }),
+}));
+
+describe("useNcpSessionConversation", () => {
+  beforeEach(() => {
+    mocks.fetchNcpSessionMessages.mockReset();
+    mocks.useHydratedNcpAgent.mockClear();
+    mocks.hydratedCalls.length = 0;
+    mocks.clientInstances.length = 0;
+  });
+
+  it("hydrates seed from the shared session messages endpoint payload", async () => {
+    mocks.fetchNcpSessionMessages.mockResolvedValue({
+      sessionId: "session-1",
+      status: "running",
+      total: 1,
+      messages: [{ id: "msg-1" }],
+    });
+
+    const result = await fetchNcpSessionConversationSeed(
+      "session-1",
+      new AbortController().signal,
+      300,
+    );
+
+    expect(mocks.fetchNcpSessionMessages).toHaveBeenCalledWith("session-1", 300);
+    expect(result).toEqual({
+      messages: [{ id: "msg-1" }],
+      status: "running",
+    });
+  });
+
+  it("treats a missing session as an empty idle draft seed", async () => {
+    mocks.fetchNcpSessionMessages.mockRejectedValue(
+      new Error("ncp session not found: draft-session"),
+    );
+
+    const result = await fetchNcpSessionConversationSeed(
+      "draft-session",
+      new AbortController().signal,
+    );
+
+    expect(result).toEqual({
+      messages: [],
+      status: "idle",
+    });
+  });
+
+  it("creates an isolated endpoint instance per viewer", () => {
+    renderHook(() => useNcpSessionConversation("session-a"));
+    renderHook(() => useNcpSessionConversation("session-b"));
+
+    expect(mocks.useHydratedNcpAgent).toHaveBeenCalledTimes(2);
+    expect(mocks.clientInstances).toHaveLength(2);
+    expect(mocks.hydratedCalls).toHaveLength(2);
+    expect(mocks.clientInstances[0]).not.toBe(mocks.clientInstances[1]);
+    expect(mocks.hydratedCalls[0]?.client).toBe(mocks.clientInstances[0]);
+    expect(mocks.hydratedCalls[1]?.client).toBe(mocks.clientInstances[1]);
+  });
+});

package/src/components/chat/ncp/session-conversation/use-ncp-session-conversation.ts

@@ -0,0 +1,72 @@
+import { useCallback, useState } from "react";
+import { NcpHttpAgentClientEndpoint } from "@nextclaw/ncp-http-agent-client";
+import { useHydratedNcpAgent, type NcpConversationSeed } from "@nextclaw/ncp-react";
+import { API_BASE } from "@/api/api-base";
+import { fetchNcpSessionMessages } from "@/api/ncp-session";
+import { createNcpAppClientFetch } from "@/components/chat/ncp/ncp-app-client-fetch";
+
+const DEFAULT_MESSAGE_LIMIT = 300;
+
+type UseNcpSessionConversationOptions = {
+  messageLimit?: number;
+};
+
+function isMissingNcpSessionError(error: unknown): boolean {
+  if (!(error instanceof Error)) {
+    return false;
+  }
+  return error.message.includes("ncp session not found:");
+}
+
+export function createNcpSessionConversationClient(): NcpHttpAgentClientEndpoint {
+  return new NcpHttpAgentClientEndpoint({
+    baseUrl: API_BASE,
+    basePath: "/api/ncp/agent",
+    fetchImpl: createNcpAppClientFetch(),
+  });
+}
+
+export async function fetchNcpSessionConversationSeed(
+  sessionId: string,
+  signal: AbortSignal,
+  messageLimit = DEFAULT_MESSAGE_LIMIT,
+): Promise<NcpConversationSeed> {
+  signal.throwIfAborted();
+
+  try {
+    const response = await fetchNcpSessionMessages(sessionId, messageLimit);
+    signal.throwIfAborted();
+    return {
+      messages: response.messages,
+      status: response.status ?? "idle",
+    };
+  } catch (error) {
+    signal.throwIfAborted();
+    if (!isMissingNcpSessionError(error)) {
+      throw error;
+    }
+    return {
+      messages: [],
+      status: "idle",
+    };
+  }
+}
+
+export function useNcpSessionConversation(
+  sessionId: string,
+  options: UseNcpSessionConversationOptions = {},
+) {
+  const [client] = useState(() => createNcpSessionConversationClient());
+  const messageLimit = options.messageLimit ?? DEFAULT_MESSAGE_LIMIT;
+  const loadSeed = useCallback(
+    (targetSessionId: string, signal: AbortSignal) =>
+      fetchNcpSessionConversationSeed(targetSessionId, signal, messageLimit),
+    [messageLimit],
+  );
+
+  return useHydratedNcpAgent({
+    sessionId,
+    client,
+    loadSeed,
+  });
+}

package/src/components/chat/presenter/chat-presenter-context.tsx

@@ -38,6 +38,7 @@ export type ChatThreadManagerLike = {
   createSession: () => void;
   goToProviders: () => void;
   openSessionFromToolAction: (action: ChatToolActionViewModel) => void;
+  selectChildSessionDetail: (sessionKey: string) => void;
   closeChildSessionDetail: () => void;
   goToParentSession: () => void;
 };

package/src/components/chat/stores/chat-thread.store.ts

@@ -2,6 +2,14 @@ import { create } from 'zustand';
 import type { MutableRefObject } from 'react';
 import type { NcpMessage } from '@nextclaw/ncp';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
+import type { AgentProfileView } from '@/api/types';
+
+export type ChatChildSessionTab = {
+  sessionKey: string;
+  parentSessionKey: string | null;
+  label?: string | null;
+  agentId?: string | null;
+};
 
 export type ChatThreadSnapshot = {
   isProviderStateResolved: boolean;
@@ -10,6 +18,10 @@ export type ChatThreadSnapshot = {
   sessionTypeUnavailableMessage?: string | null;
   sessionTypeLabel?: string | null;
   sessionKey: string | null;
+  agentId?: string | null;
+  agentDisplayName?: string | null;
+  agentAvatarUrl?: string | null;
+  availableAgents?: AgentProfileView[];
   sessionDisplayName?: string;
   sessionProjectRoot?: string | null;
   sessionProjectName?: string | null;
@@ -22,9 +34,8 @@ export type ChatThreadSnapshot = {
   isAwaitingAssistantOutput: boolean;
   parentSessionKey?: string | null;
   parentSessionLabel?: string | null;
-  childSessionDetailSessionKey?: string | null;
-  childSessionDetailParentSessionKey?: string | null;
-  childSessionDetailLabel?: string | null;
+  childSessionTabs: ChatChildSessionTab[];
+  activeChildSessionKey?: string | null;
 };
 
 type ChatThreadStore = {
@@ -39,6 +50,10 @@ const initialSnapshot: ChatThreadSnapshot = {
   sessionTypeUnavailableMessage: null,
   sessionTypeLabel: null,
   sessionKey: null,
+  agentId: null,
+  agentDisplayName: null,
+  agentAvatarUrl: null,
+  availableAgents: [],
   sessionDisplayName: undefined,
   sessionProjectRoot: null,
   sessionProjectName: null,
@@ -51,9 +66,8 @@ const initialSnapshot: ChatThreadSnapshot = {
   isAwaitingAssistantOutput: false,
   parentSessionKey: null,
   parentSessionLabel: null,
-  childSessionDetailSessionKey: null,
-  childSessionDetailParentSessionKey: null,
-  childSessionDetailLabel: null,
+  childSessionTabs: [],
+  activeChildSessionKey: null,
 };
 
 export const useChatThreadStore = create<ChatThreadStore>((set) => ({

package/src/components/common/AgentAvatar.tsx

@@ -0,0 +1,63 @@
+import { cn } from '@/lib/utils';
+
+type AgentAvatarProps = {
+  agentId: string;
+  displayName?: string | null;
+  avatarUrl?: string | null;
+  className?: string;
+};
+
+const PALETTE = [
+  ['bg-amber-100', 'text-amber-700'],
+  ['bg-emerald-100', 'text-emerald-700'],
+  ['bg-blue-100', 'text-blue-700'],
+  ['bg-rose-100', 'text-rose-700'],
+  ['bg-cyan-100', 'text-cyan-700'],
+  ['bg-violet-100', 'text-violet-700']
+] as const;
+
+function hashText(value: string): number {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash << 5) - hash + value.charCodeAt(index);
+    hash |= 0;
+  }
+  return Math.abs(hash);
+}
+
+function resolveLetter(value: string): string {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return 'A';
+  }
+  return trimmed.slice(0, 1).toUpperCase();
+}
+
+export function AgentAvatar({ agentId, displayName, avatarUrl, className }: AgentAvatarProps) {
+  const seed = displayName?.trim() || agentId;
+  const [bgClass, textClass] = PALETTE[hashText(agentId) % PALETTE.length] ?? PALETTE[0];
+
+  if (avatarUrl?.trim()) {
+    return (
+      <img
+        src={avatarUrl}
+        alt={displayName?.trim() || agentId}
+        className={cn('rounded-full object-cover', className)}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'rounded-full flex items-center justify-center font-semibold',
+        bgClass,
+        textClass,
+        className
+      )}
+      aria-label={displayName?.trim() || agentId}
+    >
+      {resolveLetter(seed)}
+    </div>
+  );
+}

package/src/components/common/agent-identity/agent-identity-avatar.tsx

@@ -0,0 +1,27 @@
+import { AgentAvatar } from '@/components/common/AgentAvatar';
+import { useAgentIdentity } from '@/components/common/agent-identity/use-agent-identity';
+
+type AgentIdentityAvatarProps = {
+  agentId?: string | null;
+  className?: string;
+};
+
+export function AgentIdentityAvatar({
+  agentId,
+  className,
+}: AgentIdentityAvatarProps) {
+  const identity = useAgentIdentity(agentId);
+
+  if (!identity) {
+    return null;
+  }
+
+  return (
+    <AgentAvatar
+      agentId={identity.agentId}
+      displayName={identity.displayName}
+      avatarUrl={identity.avatarUrl}
+      className={className}
+    />
+  );
+}

package/src/components/common/agent-identity/index.ts

@@ -0,0 +1,3 @@
+export { AgentIdentityAvatar } from '@/components/common/agent-identity/agent-identity-avatar';
+export { useAgentIdentity } from '@/components/common/agent-identity/use-agent-identity';
+export type { ResolvedAgentIdentity } from '@/components/common/agent-identity/use-agent-identity';

package/src/components/common/agent-identity/use-agent-identity.ts

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+import type { AgentProfileView } from '@/api/types';
+import { useChatThreadStore } from '@/components/chat/stores/chat-thread.store';
+import { useAgents } from '@/hooks/agents/useAgents';
+
+export type ResolvedAgentIdentity = {
+  agentId: string;
+  profile: AgentProfileView | null;
+  displayName: string;
+  avatarUrl: string | null;
+};
+
+function buildAgentProfileMap(
+  scopedAgents: readonly AgentProfileView[],
+  queryAgents: readonly AgentProfileView[],
+): Map<string, AgentProfileView> {
+  return new Map(
+    [...queryAgents, ...scopedAgents]
+      .filter((agent) => typeof agent.id === 'string' && agent.id.trim().length > 0)
+      .map((agent) => [agent.id, agent]),
+  );
+}
+
+export function useAgentIdentity(
+  agentId?: string | null,
+): ResolvedAgentIdentity | null {
+  const normalizedAgentId = agentId?.trim() ?? '';
+  const scopedAgents = useChatThreadStore(
+    (state) => state.snapshot.availableAgents ?? [],
+  );
+  const agentsQuery = useAgents();
+
+  const agentById = useMemo(
+    () => buildAgentProfileMap(scopedAgents, agentsQuery.data?.agents ?? []),
+    [agentsQuery.data?.agents, scopedAgents],
+  );
+
+  return useMemo(() => {
+    if (!normalizedAgentId) {
+      return null;
+    }
+    const profile = agentById.get(normalizedAgentId) ?? null;
+    return {
+      agentId: normalizedAgentId,
+      profile,
+      displayName: profile?.displayName?.trim() || normalizedAgentId,
+      avatarUrl: profile?.avatarUrl?.trim() || null,
+    };
+  }, [agentById, normalizedAgentId]);
+}

package/src/components/config/RuntimeConfig.tsx

@@ -6,6 +6,14 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Switch } from '@/components/ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import {
+  createEmptyRuntimeAgent,
+  createEmptyRuntimeBinding,
+  hydrateRuntimeAgent,
+  hydrateRuntimeBinding,
+  parseOptionalInt,
+  toPersistedRuntimeAgent
+} from '@/components/config/runtime-config-agent.utils';
 import { hintForPath } from '@/lib/config-hints';
 import { t } from '@/lib/i18n';
 import { PageLayout, PageHeader } from '@/components/layout/page-layout';
@@ -22,37 +30,6 @@ const DM_SCOPE_OPTIONS: Array<{ value: DmScope; label: string }> = [
   { value: 'per-account-channel-peer', label: 'per-account-channel-peer' }
 ];
 
-function createEmptyAgent(): AgentProfileView {
-  return {
-    id: '',
-    default: false,
-    workspace: '',
-    model: '',
-    engine: '',
-    contextTokens: undefined,
-    maxToolIterations: undefined
-  };
-}
-
-function createEmptyBinding(): AgentBindingView {
-  return {
-    agentId: '',
-    match: {
-      channel: '',
-      accountId: ''
-    }
-  };
-}
-
-function parseOptionalInt(value: string): number | undefined {
-  const trimmed = value.trim();
-  if (!trimmed) {
-    return undefined;
-  }
-  const parsed = Number.parseInt(trimmed, 10);
-  return Number.isFinite(parsed) ? parsed : undefined;
-}
-
 export function RuntimeConfig() {
   const { data: config, isLoading } = useConfig();
   const { data: schema } = useConfigSchema();
@@ -61,7 +38,6 @@ export function RuntimeConfig() {
   const [agents, setAgents] = useState<AgentProfileView[]>([]);
   const [bindings, setBindings] = useState<AgentBindingView[]>([]);
   const [dmScope, setDmScope] = useState<DmScope>('per-channel-peer');
-  const [maxPingPongTurns, setMaxPingPongTurns] = useState(0);
   const [defaultContextTokens, setDefaultContextTokens] = useState(200000);
   const [defaultEngine, setDefaultEngine] = useState('native');
 
@@ -69,41 +45,15 @@ export function RuntimeConfig() {
     if (!config) {
       return;
     }
-    setAgents(
-      (config.agents.list ?? []).map((agent) => ({
-        id: agent.id ?? '',
-        default: Boolean(agent.default),
-        workspace: agent.workspace ?? '',
-        model: agent.model ?? '',
-        engine: agent.engine ?? '',
-        contextTokens: agent.contextTokens,
-        maxToolIterations: agent.maxToolIterations
-      }))
-    );
-    setBindings(
-      (config.bindings ?? []).map((binding) => ({
-        agentId: binding.agentId ?? '',
-        match: {
-          channel: binding.match?.channel ?? '',
-          accountId: binding.match?.accountId ?? '',
-          peer: binding.match?.peer
-            ? {
-              kind: binding.match.peer.kind,
-              id: binding.match.peer.id
-            }
-            : undefined
-        }
-      }))
-    );
+    setAgents((config.agents.list ?? []).map(hydrateRuntimeAgent));
+    setBindings((config.bindings ?? []).map(hydrateRuntimeBinding));
     setDmScope((config.session?.dmScope as DmScope) ?? 'per-channel-peer');
-    setMaxPingPongTurns(config.session?.agentToAgent?.maxPingPongTurns ?? 0);
     setDefaultContextTokens(config.agents.defaults.contextTokens ?? 200000);
     setDefaultEngine(config.agents.defaults.engine ?? 'native');
   }, [config]);
 
   const uiHints = schema?.uiHints;
   const dmScopeHint = hintForPath('session.dmScope', uiHints);
-  const maxPingHint = hintForPath('session.agentToAgent.maxPingPongTurns', uiHints);
   const defaultContextTokensHint = hintForPath('agents.defaults.contextTokens', uiHints);
   const defaultEngineHint = hintForPath('agents.defaults.engine', uiHints);
   const agentContextTokensHint = hintForPath('agents.list.*.contextTokens', uiHints);
@@ -137,26 +87,7 @@ export function RuntimeConfig() {
         if (!id) {
           throw new Error(t('agentIdRequiredError').replace('{index}', String(index)));
         }
-        const normalized: AgentProfileView = { id };
-        if (agent.default) {
-          normalized.default = true;
-        }
-        if (agent.workspace?.trim()) {
-          normalized.workspace = agent.workspace.trim();
-        }
-        if (agent.model?.trim()) {
-          normalized.model = agent.model.trim();
-        }
-        if (agent.engine?.trim()) {
-          normalized.engine = agent.engine.trim();
-        }
-        if (typeof agent.contextTokens === 'number') {
-          normalized.contextTokens = Math.max(1000, agent.contextTokens);
-        }
-        if (typeof agent.maxToolIterations === 'number') {
-          normalized.maxToolIterations = agent.maxToolIterations;
-        }
-        return normalized;
+        return toPersistedRuntimeAgent(agent);
       });
 
       const duplicates = normalizedAgents
@@ -219,10 +150,7 @@ export function RuntimeConfig() {
           },
           bindings: normalizedBindings,
           session: {
-            dmScope,
-            agentToAgent: {
-              maxPingPongTurns: Math.min(5, Math.max(0, maxPingPongTurns))
-            }
+            dmScope
           }
         }
       });
@@ -289,21 +217,6 @@ export function RuntimeConfig() {
               </SelectContent>
             </Select>
           </div>
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-gray-800">
-              {maxPingHint?.label ?? t('maxPingPongTurns')}
-            </label>
-            <Input
-              type="number"
-              min={0}
-              max={5}
-              value={maxPingPongTurns}
-              onChange={(event) => setMaxPingPongTurns(Math.max(0, Number.parseInt(event.target.value, 10) || 0))}
-            />
-            <p className="text-xs text-gray-500">
-              {maxPingHint?.help ?? t('maxPingPongTurnsHelp')}
-            </p>
-          </div>
         </CardContent>
       </Card>
 
@@ -389,7 +302,7 @@ export function RuntimeConfig() {
             </div>
           ))}
 
-          <Button type="button" variant="outline" onClick={() => setAgents((prev) => [...prev, createEmptyAgent()])}>
+          <Button type="button" variant="outline" onClick={() => setAgents((prev) => [...prev, createEmptyRuntimeAgent()])}>
             <Plus className="h-4 w-4 mr-2" />
             {t('addAgent')}
           </Button>
@@ -510,7 +423,7 @@ export function RuntimeConfig() {
             );
           })}
 
-          <Button type="button" variant="outline" onClick={() => setBindings((prev) => [...prev, createEmptyBinding()])}>
+          <Button type="button" variant="outline" onClick={() => setBindings((prev) => [...prev, createEmptyRuntimeBinding()])}>
             <Plus className="h-4 w-4 mr-2" />
             {t('addBinding')}
           </Button>

package/src/components/config/runtime-config-agent.utils.ts

@@ -0,0 +1,95 @@
+import type { AgentBindingView, AgentProfileView } from '@/api/types';
+
+export function createEmptyRuntimeAgent(): AgentProfileView {
+  return {
+    id: '',
+    default: false,
+    workspace: '',
+    model: '',
+    engine: '',
+    contextTokens: undefined,
+    maxToolIterations: undefined
+  };
+}
+
+export function createEmptyRuntimeBinding(): AgentBindingView {
+  return {
+    agentId: '',
+    match: {
+      channel: '',
+      accountId: ''
+    }
+  };
+}
+
+export function hydrateRuntimeAgent(agent: AgentProfileView): AgentProfileView {
+  return {
+    id: agent.id ?? '',
+    default: Boolean(agent.default),
+    displayName: agent.displayName ?? '',
+    description: agent.description ?? '',
+    avatar: agent.avatar ?? '',
+    workspace: agent.workspace ?? '',
+    model: agent.model ?? '',
+    engine: agent.engine ?? '',
+    contextTokens: agent.contextTokens,
+    maxToolIterations: agent.maxToolIterations
+  };
+}
+
+export function hydrateRuntimeBinding(binding: AgentBindingView): AgentBindingView {
+  return {
+    agentId: binding.agentId ?? '',
+    match: {
+      channel: binding.match?.channel ?? '',
+      accountId: binding.match?.accountId ?? '',
+      peer: binding.match?.peer
+        ? {
+            kind: binding.match.peer.kind,
+            id: binding.match.peer.id
+          }
+        : undefined
+    }
+  };
+}
+
+export function parseOptionalInt(value: string): number | undefined {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+  const parsed = Number.parseInt(trimmed, 10);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+export function toPersistedRuntimeAgent(agent: AgentProfileView): AgentProfileView {
+  const normalized: AgentProfileView = { id: agent.id.trim() };
+  if (agent.default) {
+    normalized.default = true;
+  }
+  if (agent.displayName?.trim()) {
+    normalized.displayName = agent.displayName.trim();
+  }
+  if (agent.description?.trim()) {
+    normalized.description = agent.description.trim();
+  }
+  if (agent.avatar?.trim()) {
+    normalized.avatar = agent.avatar.trim();
+  }
+  if (agent.workspace?.trim()) {
+    normalized.workspace = agent.workspace.trim();
+  }
+  if (agent.model?.trim()) {
+    normalized.model = agent.model.trim();
+  }
+  if (agent.engine?.trim()) {
+    normalized.engine = agent.engine.trim();
+  }
+  if (typeof agent.contextTokens === 'number') {
+    normalized.contextTokens = Math.max(1000, agent.contextTokens);
+  }
+  if (typeof agent.maxToolIterations === 'number') {
+    normalized.maxToolIterations = agent.maxToolIterations;
+  }
+  return normalized;
+}

package/src/components/layout/AppLayout.tsx

@@ -21,7 +21,9 @@ function isMainWorkspaceRoute(pathname: string): boolean {
     normalized === '/skills' ||
     normalized.startsWith('/skills/') ||
     normalized === '/cron' ||
-    normalized.startsWith('/cron/')
+    normalized.startsWith('/cron/') ||
+    normalized === '/agents' ||
+    normalized.startsWith('/agents/')
   );
 }