@nextclaw/ui 0.14.1 → 0.14.2

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

@@ -6,39 +6,18 @@ import {
   isNcpChatModelOptionsLoading,
   isNcpChatSendDisabled,
 } from '@/features/chat/features/input/utils/ncp-chat-input-availability.utils';
-import type { ChatInputSnapshot } from '@/features/chat/stores/chat-input.store';
 
-function createSnapshot(
-  overrides: Partial<ChatInputSnapshot> = {}
-): ChatInputSnapshot {
+type AvailabilitySnapshot = {
+  readonly isProviderStateResolved: boolean;
+  readonly modelOptions: readonly unknown[];
+  readonly sessionTypeUnavailable: boolean;
+};
+
+function createSnapshot(overrides: Partial<AvailabilitySnapshot> = {}): AvailabilitySnapshot {
   return {
     isProviderStateResolved: false,
-    composerNodes: [],
-    attachments: [],
-    draft: '',
-    pendingSessionType: 'native',
-    pendingProjectRoot: null,
-    pendingProjectRootSessionKey: null,
-    defaultProjectRoot: 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,
-    sessionTypeUnavailableMessage: null,
-    skillRecords: [],
-    isSkillsLoading: false,
-    selectedSkills: [],
-    composerFocusRequest: null,
     ...overrides,
   };
 }

package/src/features/chat/features/input/utils/chat-composer-state.utils.ts

@@ -12,6 +12,7 @@ import type { NcpMessagePart } from '@nextclaw/ncp';
 import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 
 const CHAT_SKILL_TOKEN_PREFIX = '$';
+const CHAT_PANEL_APP_TOKEN_PREFIX = '@panel-app:';
 
 function appendTextPart(parts: NcpMessagePart[], text: string): NcpMessagePart[] {
   if (text.length === 0) {
@@ -114,6 +115,11 @@ export function deriveNcpMessagePartsFromComposer(
       continue;
     }
 
+    if (node.tokenKind === 'panel_app') {
+      parts = appendTextPart(parts, `${CHAT_PANEL_APP_TOKEN_PREFIX}${node.tokenKey}`);
+      continue;
+    }
+
     if (node.tokenKind !== 'file') {
       continue;
     }

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

@@ -2,13 +2,11 @@ import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 
 export const CHAT_UI_INLINE_TOKENS_METADATA_KEY = 'ui_inline_tokens';
 const CHAT_SKILL_TOKEN_PREFIX = '$';
+const CHAT_PANEL_APP_TOKEN_PREFIX = '@panel-app:';
+const CHAT_PANEL_APP_TOKEN_PATTERN = /@panel-app:([A-Za-z0-9_-]+)/g;
 
 export type ChatInlineTokenSource = { kind: string; key: string; label: string; rawText: string };
 
-export type ChatInlineTextFragment =
-  | { type: 'text'; text: string }
-  | { type: 'token'; token: ChatInlineTokenSource };
-
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -51,6 +49,30 @@ export function buildInlineSkillTokensFromComposer(nodes: readonly ChatComposerN
   return dedupeInlineTokens(tokens);
 }
 
+export function buildInlineTokensFromTextProtocol(text: string): ChatInlineTokenSource[] {
+  const tokens: ChatInlineTokenSource[] = [];
+  for (const match of text.matchAll(CHAT_PANEL_APP_TOKEN_PATTERN)) {
+    const key = match[1];
+    if (!key) {
+      continue;
+    }
+    tokens.push({
+      kind: 'panel_app',
+      key,
+      label: key,
+      rawText: `${CHAT_PANEL_APP_TOKEN_PREFIX}${key}`
+    });
+  }
+  return dedupeInlineTokens(tokens);
+}
+
+export function resolveInlineTokensForText(
+  text: string,
+  tokens: readonly ChatInlineTokenSource[]
+): ChatInlineTokenSource[] {
+  return dedupeInlineTokens([...tokens, ...buildInlineTokensFromTextProtocol(text)]);
+}
+
 export function readInlineTokensFromMetadata(
   metadata: Record<string, unknown> | undefined
 ): ChatInlineTokenSource[] {
@@ -80,50 +102,3 @@ export function readInlineTokensFromMetadata(
 
   return dedupeInlineTokens(tokens);
 }
-
-export function splitTextByInlineTokens(
-  text: string,
-  tokens: readonly ChatInlineTokenSource[]
-): ChatInlineTextFragment[] {
-  if (text.length === 0 || tokens.length === 0) {
-    return text.length === 0 ? [] : [{ type: 'text', text }];
-  }
-
-  const orderedTokens = [...tokens].sort((left, right) => right.rawText.length - left.rawText.length);
-  const fragments: ChatInlineTextFragment[] = [];
-  let cursor = 0;
-
-  while (cursor < text.length) {
-    let matchedToken: ChatInlineTokenSource | null = null;
-    for (const token of orderedTokens) {
-      if (text.startsWith(token.rawText, cursor)) {
-        matchedToken = token;
-        break;
-      }
-    }
-
-    if (!matchedToken) {
-      let nextCursor = cursor + 1;
-      while (nextCursor < text.length) {
-        if (orderedTokens.some((token) => text.startsWith(token.rawText, nextCursor))) {
-          break;
-        }
-        nextCursor += 1;
-      }
-      fragments.push({
-        type: 'text',
-        text: text.slice(cursor, nextCursor)
-      });
-      cursor = nextCursor;
-      continue;
-    }
-
-    fragments.push({
-      type: 'token',
-      token: matchedToken
-    });
-    cursor += matchedToken.rawText.length;
-  }
-
-  return fragments;
-}

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

@@ -178,6 +178,8 @@ export function buildChatSlashItems(
         `${texts.slashSkillSpecLabel}: ${record.key}`,
         ...(record.scopeLabel ? [`${texts.slashSkillScopeLabel}: ${record.scopeLabel}`] : [])
       ],
+      tokenKind: 'skill',
+      tokenKey: record.key,
       value: record.key
     }));
 }

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

@@ -1,9 +1,8 @@
-import type { ChatInputSnapshot } from '@/features/chat/stores/chat-input.store';
-
-type ChatInputAvailabilitySnapshot = Pick<
-  ChatInputSnapshot,
-  'isProviderStateResolved' | 'modelOptions' | 'sessionTypeUnavailable'
->;
+type ChatInputAvailabilitySnapshot = {
+  readonly isProviderStateResolved: boolean;
+  readonly modelOptions: readonly unknown[];
+  readonly sessionTypeUnavailable?: boolean;
+};
 
 export function hasNcpChatModelOptions(
   snapshot: ChatInputAvailabilitySnapshot

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

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { beforeEach, expect, it, vi } from "vitest";
 import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
@@ -129,7 +129,7 @@ it("keeps historical adapted message references stable when only the streaming m
   expect(secondMessages[1]).not.toBe(firstMessages[1]);
 });
 
-it("adapts persisted inline token metadata into rich message parts", () => {
+it("adapts persisted inline token metadata into markdown token data", () => {
   const message = {
     id: "user-inline-token",
     sessionId: "session-1",
@@ -156,24 +156,59 @@ it("adapts persisted inline token metadata into rich message parts", () => {
   expect(renderedMessages[0]).toMatchObject({
     parts: [
       {
-        type: "inline-content",
-        segments: [
-          { type: "markdown", text: "please use " },
+        type: "markdown",
+        text: "please use $weather now",
+        inlineTokens: [
           {
-            type: "token",
-            token: {
-              kind: "skill",
-              key: "weather",
-              label: "Weather",
-            },
+            kind: "skill",
+            key: "weather",
+            label: "Weather",
+            rawText: "$weather",
           },
-          { type: "markdown", text: " now" },
         ],
       },
     ],
   });
 });
 
+it("renders context inheritance as a divider without repeating inherited messages", () => {
+  const inheritedMessage = {
+    id: "child-session:inherited:1",
+    sessionId: "child-session",
+    role: "user",
+    status: "final",
+    timestamp: "2026-03-31T10:00:00.000Z",
+    metadata: {
+      inherited_from_session_id: "parent-session",
+      inherited_from_message_id: "parent-message-1",
+    },
+    parts: [{ type: "text", text: "parent context" }],
+  } satisfies NcpMessage;
+  const childMessage = {
+    id: "child-message-1",
+    sessionId: "child-session",
+    role: "user",
+    status: "final",
+    timestamp: "2026-03-31T10:00:01.000Z",
+    parts: [{ type: "text", text: "child visible request" }],
+  } satisfies NcpMessage;
+
+  const { container } = render(
+    <ChatMessageListContainer
+      messages={[inheritedMessage, childMessage]}
+      isSending={false}
+    />,
+  );
+  const renderedMessages = captures.renders.flatMap((rendered) => rendered.messages);
+  const renderedPayload = JSON.stringify(renderedMessages);
+
+  expect(screen.getByText("chatContextInheritanceInherited")).toBeTruthy();
+  expect(container.querySelector('[title*="parent-session"]')).toBeTruthy();
+  expect(container.querySelector('[title*="chatContextInheritanceMessages: 1"]')).toBeTruthy();
+  expect(renderedPayload).toContain("child visible request");
+  expect(renderedPayload).not.toContain("parent context");
+});
+
 it("keeps Hermes tool invocation parts as tool cards instead of flattening them into plain text", () => {
   const message = {
     id: "assistant-hermes-tool-1",

package/src/features/chat/features/message/components/chat-message-list.container.tsx

@@ -27,11 +27,22 @@ type ChatMessageListContainerProps = {
   className?: string;
 };
 
+const INHERITED_FROM_SESSION_METADATA_KEY = "inherited_from_session_id";
+
 const messageViewModelCache = new WeakMap<
   NcpMessage,
   { language: string; viewModel: ChatMessageViewModel }
 >();
 
+type ContextInheritanceTimelineView = {
+  sourceSessionId: string;
+  inheritedMessageCount: number;
+};
+
+type ContextInheritanceTimelineBoundary = ContextInheritanceTimelineView & {
+  boundaryIndex: number;
+};
+
 type ChatTimelineItem =
   | {
       kind: "messages";
@@ -42,6 +53,11 @@ type ChatTimelineItem =
       kind: "compaction";
       key: string;
       checkpoint: ContextCompactionTimelineView;
+    }
+  | {
+      kind: "context-inheritance";
+      key: string;
+      inheritance: ContextInheritanceTimelineView;
     };
 
 function buildChatMessageAdapterTexts(
@@ -129,35 +145,81 @@ function ChatContextCompactionDivider({
   );
 }
 
+function ChatContextInheritanceDivider({
+  inheritance,
+}: {
+  inheritance: ContextInheritanceTimelineView;
+}) {
+  const title = [
+    `${t("chatContextInheritanceSourceSession")}: ${inheritance.sourceSessionId}`,
+    `${t("chatContextInheritanceMessages")}: ${inheritance.inheritedMessageCount}`,
+  ].join("\n");
+  return (
+    <div className="my-4 flex items-center gap-3 text-[11px] text-emerald-700" title={title}>
+      <div className="h-px flex-1 bg-emerald-100" />
+      <div className="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1">
+        <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
+        <span>{t("chatContextInheritanceInherited")}</span>
+      </div>
+      <div className="h-px flex-1 bg-emerald-100" />
+    </div>
+  );
+}
+
 function resolveCompactionBoundaryIndex(params: {
   rawMessages: readonly NcpMessage[];
-  normalRawMessages: readonly NcpMessage[];
+  visibleRawMessages: readonly NcpMessage[];
   rawMessageId: string;
 }): number {
   const {
-    normalRawMessages,
     rawMessageId,
     rawMessages,
+    visibleRawMessages,
   } = params;
   const physicalIndex = rawMessages.findIndex(
     (message) => message.id === rawMessageId,
   );
   if (physicalIndex < 0) {
-    return normalRawMessages.length - 1;
+    return visibleRawMessages.length - 1;
   }
-  const previousNormalCount = rawMessages
+  const previousVisibleCount = rawMessages
     .slice(0, physicalIndex)
-    .filter((message) => !readContextCompactionTimeline(message)).length;
-  return previousNormalCount - 1;
+    .filter(isVisibleChatMessage).length;
+  return previousVisibleCount - 1;
+}
+
+function readInheritedSourceSessionId(message: NcpMessage): string | null {
+  const value = message.metadata?.[INHERITED_FROM_SESSION_METADATA_KEY];
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+
+function isVisibleChatMessage(message: NcpMessage): boolean {
+  return !readContextCompactionTimeline(message) && !readInheritedSourceSessionId(message);
+}
+
+function resolveContextInheritanceBoundary(
+  messages: readonly NcpMessage[],
+): ContextInheritanceTimelineBoundary | null {
+  const boundaryIndex = messages.findIndex((message) => readInheritedSourceSessionId(message));
+  if (boundaryIndex < 0) {
+    return null;
+  }
+  const sourceSessionId = readInheritedSourceSessionId(messages[boundaryIndex]);
+  if (!sourceSessionId) {
+    return null;
+  }
+  return {
+    boundaryIndex: messages.slice(0, boundaryIndex).filter(isVisibleChatMessage).length,
+    sourceSessionId,
+    inheritedMessageCount: messages.filter((message) => readInheritedSourceSessionId(message) === sourceSessionId).length,
+  };
 }
 
 function buildTimelineItems(params: {
   rawMessages: readonly NcpMessage[];
   messages: ChatMessageViewModel[];
 }): ChatTimelineItem[] {
-  const normalRawMessages = params.rawMessages.filter(
-    (message) => !readContextCompactionTimeline(message),
-  );
+  const visibleRawMessages = params.rawMessages.filter(isVisibleChatMessage);
   const checkpoints = params.rawMessages
     .map((message) => ({
       rawMessageId: message.id,
@@ -172,11 +234,12 @@ function buildTimelineItems(params: {
       checkpoint: entry.checkpoint,
       boundaryIndex: resolveCompactionBoundaryIndex({
         rawMessages: params.rawMessages,
-        normalRawMessages,
+        visibleRawMessages,
         rawMessageId: entry.rawMessageId,
       }),
     }))
     .sort((left, right) => left.boundaryIndex - right.boundaryIndex);
+  const contextInheritance = resolveContextInheritanceBoundary(params.rawMessages);
 
   const items: ChatTimelineItem[] = [];
   let pendingMessages: ChatMessageViewModel[] = [];
@@ -193,7 +256,15 @@ function buildTimelineItems(params: {
     pendingMessages = [];
   };
 
-  normalRawMessages.forEach((rawMessage, index) => {
+  visibleRawMessages.forEach((rawMessage, index) => {
+    if (contextInheritance?.boundaryIndex === index) {
+      flushPendingMessages("messages-before-context-inheritance");
+      items.push({
+        kind: "context-inheritance",
+        key: "context-inheritance",
+        inheritance: contextInheritance,
+      });
+    }
     const message = params.messages[index];
     if (message) {
       pendingMessages.push(message);
@@ -209,6 +280,14 @@ function buildTimelineItems(params: {
       checkpointCursor += 1;
     }
   });
+  if (contextInheritance?.boundaryIndex === visibleRawMessages.length) {
+    flushPendingMessages("messages-before-context-inheritance");
+    items.push({
+      kind: "context-inheritance",
+      key: "context-inheritance",
+      inheritance: contextInheritance,
+    });
+  }
   while (checkpointCursor < checkpoints.length) {
     const currentCheckpoint = checkpoints[checkpointCursor];
     flushPendingMessages(`messages-before-${currentCheckpoint.key}`);
@@ -244,7 +323,7 @@ export function ChatMessageListContainer({
 
   const messages = useMemo(() => {
     return rawMessages.flatMap((message) => {
-      if (readContextCompactionTimeline(message)) {
+      if (!isVisibleChatMessage(message)) {
         return [];
       }
       const cached = messageViewModelCache.get(message);
@@ -295,6 +374,8 @@ export function ChatMessageListContainer({
       {timelineItems.map((item, index) =>
         item.kind === "compaction" ? (
           <ChatContextCompactionDivider key={item.key} checkpoint={item.checkpoint} />
+        ) : item.kind === "context-inheritance" ? (
+          <ChatContextInheritanceDivider key={item.key} inheritance={item.inheritance} />
         ) : (
           <ChatMessageList
             key={item.key}

package/src/features/chat/features/message/utils/__tests__/chat-message.utils.test.ts

@@ -432,7 +432,7 @@ it("maps file parts into previewable attachment view models", () => {
   });
 });
 
-it("renders inline skill tokens as structured inline content parts", () => {
+it("attaches inline skill tokens to markdown parts", () => {
   const adapted = adapt([
     {
       id: "user-inline-skill",
@@ -452,19 +452,38 @@ it("renders inline skill tokens as structured inline content parts", () => {
   ] as unknown as ChatMessageSource[]);
 
   expect(adapted[0]?.parts[0]).toEqual({
-    type: "inline-content",
-    segments: [
-      { type: "markdown", text: "please use " },
+    type: "markdown",
+    text: "please use $weather now",
+    inlineTokens: [
       {
-        type: "token",
-        token: {
-          kind: "skill",
-          key: "weather",
-          label: "Weather",
-          rawText: "$weather",
-        },
+        kind: "skill",
+        key: "weather",
+        label: "Weather",
+        rawText: "$weather",
+      },
+    ],
+  });
+});
+
+it("attaches inline panel app text protocol tokens without metadata", () => {
+  const adapted = adapt([
+    {
+      id: "user-inline-panel-app",
+      role: "user",
+      parts: [{ type: "text", text: "review @panel-app:task-board now" }],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toEqual({
+    type: "markdown",
+    text: "review @panel-app:task-board now",
+    inlineTokens: [
+      {
+        kind: "panel_app",
+        key: "task-board",
+        label: "task-board",
+        rawText: "@panel-app:task-board",
       },
-      { type: "markdown", text: " now" },
     ],
   });
 });

package/src/features/chat/features/message/utils/chat-message-markdown-part.utils.ts

@@ -0,0 +1,38 @@
+import {
+  resolveInlineTokensForText,
+  type ChatInlineTokenSource,
+} from "@/features/chat/features/input/utils/chat-inline-token.utils";
+import type { ChatMessagePartViewModel } from "@nextclaw/agent-chat-ui";
+import type { ChatMessagePartSource } from "./chat-message-part.utils";
+
+const INVISIBLE_ONLY_TEXT_PATTERN = /\u200B|\u200C|\u200D|\u2060|\uFEFF/g;
+
+function toRenderableText(value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const visible = trimmed.replace(INVISIBLE_ONLY_TEXT_PATTERN, "").trim();
+  return visible ? trimmed : null;
+}
+
+export function buildTextPart(
+  part: Extract<ChatMessagePartSource, { type: "text" }>,
+  inlineTokens: readonly ChatInlineTokenSource[],
+): Extract<ChatMessagePartViewModel, { type: "markdown" }> | null {
+  const text = toRenderableText(part.text);
+  if (!text) {
+    return null;
+  }
+  const resolvedInlineTokens = resolveInlineTokensForText(part.text, inlineTokens);
+  return {
+    type: "markdown",
+    text,
+    inlineTokens:
+      resolvedInlineTokens.length > 0 ? resolvedInlineTokens : undefined,
+  };
+}
+
+export function buildRenderableText(value: string): string | null {
+  return toRenderableText(value);
+}

package/src/features/chat/features/message/utils/chat-message-part.utils.ts

@@ -6,7 +6,7 @@ import { type ChatInlineTokenSource } from "@/features/chat/features/input/utils
 import {
   buildRenderableText,
   buildTextPart,
-} from "./chat-message-inline-content.utils";
+} from "./chat-message-markdown-part.utils";
 import {
   buildToolCard,
   buildToolInvocationInput,

package/src/features/chat/features/session/components/chat-sidebar-project-groups.tsx

@@ -3,14 +3,14 @@ import { Plus } from 'lucide-react';
 import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/components/chat-session-type-menu";
 import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
-import type { ChatInputSnapshot } from '@/features/chat/stores/chat-input.store';
+import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import type { NcpSessionListItemView } from '@/features/chat/features/ncp/hooks/use-ncp-session-list-view';
 import type { ChatSidebarProjectGroup } from '@/features/chat/features/session/utils/chat-sidebar-session-groups.utils';
 import { t } from '@/shared/lib/i18n';
 
 export type { ChatSidebarProjectGroup };
 
-type SessionTypeOption = ChatInputSnapshot['sessionTypeOptions'][number];
+type SessionTypeOption = ChatSessionTypeOption;
 
 type ChatSidebarProjectGroupsProps = {
   groups: ChatSidebarProjectGroup[];

package/src/features/chat/features/session/components/chat-sidebar-session-list.tsx

@@ -6,10 +6,10 @@ import type {
   ChatSidebarProjectGroup,
 } from "@/features/chat/features/session/utils/chat-sidebar-session-groups.utils";
 import { ChatSidebarProjectGroups } from "@/features/chat/features/session/components/chat-sidebar-project-groups";
-import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
+import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import { t } from "@/shared/lib/i18n";
 
-type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+type SessionTypeOption = ChatSessionTypeOption;
 
 type ChatSidebarSessionListProps = {
   isLoading: boolean;