@nextclaw/ui 0.14.1 → 0.14.3

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

@@ -1,5 +1,5 @@
 import { createChatComposerTextNode, createChatComposerTokenNode } from '@nextclaw/agent-chat-ui';
-import { deriveNcpMessagePartsFromComposer } from '../chat-composer-state.utils';
+import { deriveNcpMessagePartsFromComposer } from '@/features/chat/features/input/utils/chat-composer-state.utils';
 
 describe('deriveNcpMessagePartsFromComposer', () => {
   it('preserves interleaved text and image token order while serializing skill tokens inline', () => {
@@ -68,6 +68,27 @@ describe('deriveNcpMessagePartsFromComposer', () => {
     ]);
   });
 
+  it('serializes panel app tokens as inline panel app references', () => {
+    expect(
+      deriveNcpMessagePartsFromComposer(
+        [
+          createChatComposerTextNode('review '),
+          createChatComposerTokenNode({
+            tokenKind: 'panel_app',
+            tokenKey: 'task-board',
+            label: 'Task Board'
+          })
+        ],
+        []
+      )
+    ).toEqual([
+      {
+        type: 'text',
+        text: 'review @panel-app:task-board'
+      }
+    ]);
+  });
+
   it('preserves uploaded attachment references when the attachment has a server uri', () => {
     const parts = deriveNcpMessagePartsFromComposer(
       [

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

@@ -1,10 +1,11 @@
 import { createChatComposerTextNode, createChatComposerTokenNode } from '@nextclaw/agent-chat-ui';
 import {
+  buildInlineTokensFromTextProtocol,
   buildInlineSkillTokensFromComposer,
   CHAT_UI_INLINE_TOKENS_METADATA_KEY,
   readInlineTokensFromMetadata,
-  splitTextByInlineTokens
-} from '../chat-inline-token.utils';
+  resolveInlineTokensForText
+} from '@/features/chat/features/input/utils/chat-inline-token.utils';
 
 describe('chat-inline-token utils', () => {
   it('builds ordered inline skill tokens from composer nodes', () => {
@@ -60,9 +61,9 @@ describe('chat-inline-token utils', () => {
     ]);
   });
 
-  it('splits text into inline text and token fragments', () => {
+  it('merges metadata tokens with pure text protocol tokens', () => {
     expect(
-      splitTextByInlineTokens('please use $weather now', [
+      resolveInlineTokensForText('please use $weather and @panel-app:task-board', [
         {
           kind: 'skill',
           key: 'weather',
@@ -71,17 +72,29 @@ describe('chat-inline-token utils', () => {
         }
       ])
     ).toEqual([
-      { type: 'text', text: 'please use ' },
       {
-        type: 'token',
-        token: {
-          kind: 'skill',
-          key: 'weather',
-          label: 'Weather',
-          rawText: '$weather'
-        }
+        kind: 'skill',
+        key: 'weather',
+        label: 'Weather',
+        rawText: '$weather'
       },
-      { type: 'text', text: ' now' }
+      {
+        kind: 'panel_app',
+        key: 'task-board',
+        label: 'task-board',
+        rawText: '@panel-app:task-board'
+      }
+    ]);
+  });
+
+  it('builds inline panel app tokens from pure text protocol', () => {
+    expect(buildInlineTokensFromTextProtocol('review @panel-app:task-board now')).toEqual([
+      {
+        kind: 'panel_app',
+        key: 'task-board',
+        label: 'task-board',
+        rawText: '@panel-app:task-board'
+      }
     ]);
   });
 });

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-inline-panel-app-card.tsx

@@ -77,28 +77,28 @@ export function ChatInlinePanelAppCard({
   if (!url) {
     return (
       <div
-        className="h-[320px] min-h-[220px] w-full animate-pulse rounded-lg border border-[#eee3d1] bg-gradient-to-b from-white to-amber-50/60"
+        className="h-[320px] min-h-[220px] w-full animate-pulse rounded-lg border border-border bg-muted/45"
         style={{ maxHeight: PANEL_APP_INLINE_CARD_MAX_HEIGHT_PX }}
       />
     );
   }
 
   return (
-    <div className="w-full max-w-[42rem] overflow-hidden rounded-lg border border-[#eee3d1] bg-white shadow-[0_1px_2px_rgba(30,20,10,0.04)]">
-      <div className="flex h-9 items-center justify-between gap-2 border-b border-[#f1e7d4] bg-[#fffaf2] px-2.5">
-        <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-[#5c4933]">
+    <div className="w-full max-w-[42rem] overflow-hidden rounded-lg border border-border bg-card shadow-sm">
+      <div className="flex h-9 items-center justify-between gap-2 border-b border-border bg-muted/45 px-2.5">
+        <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-foreground">
           <AppWindow className="h-3.5 w-3.5 shrink-0 text-primary" />
           <span className="truncate">{title}</span>
         </div>
         <IconActionButton
-          className="h-7 w-7 rounded-md text-[#7a6145] hover:bg-white hover:text-[#2f2212]"
+          className="h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
           icon={<Maximize2 className="h-3.5 w-3.5" />}
           label={t('chatPanelCardExpand')}
           onClick={openExpanded}
         />
       </div>
       <div
-        className="relative h-[420px] min-h-[220px] max-h-[min(60vh,420px)] overflow-hidden bg-white"
+        className="relative h-[420px] min-h-[220px] max-h-[min(60vh,420px)] overflow-hidden bg-card"
       >
         <iframe
           ref={iframeRef}
@@ -107,7 +107,7 @@ export function ChatInlinePanelAppCard({
           title={title}
           sandbox={PANEL_APP_INLINE_IFRAME_SANDBOX}
           scrolling="auto"
-          className="h-full w-full border-0 bg-white"
+          className="h-full w-full border-0 bg-card"
         />
       </div>
     </div>

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(
@@ -110,13 +126,13 @@ function ChatContextCompactionDivider({
     `${t("chatContextCompactionProjectedTokens")}: ${checkpoint.projectedEstimatedTokens}`,
   ].join("\n");
   return (
-    <div className="my-4 flex items-center gap-3 text-[11px] text-gray-500" title={title}>
-      <div className="h-px flex-1 bg-gray-200" />
-      <div className="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-gray-50 px-3 py-1">
+    <div className="my-4 flex items-center gap-3 text-[11px] text-muted-foreground" title={title}>
+      <div className="h-px flex-1 bg-border" />
+      <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1">
         {checkpoint.status === "compressing" ? (
-          <span className="h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse" />
+          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground" />
         ) : (
-          <span className="h-1.5 w-1.5 rounded-full bg-gray-300" />
+          <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/45" />
         )}
         <span>
           {checkpoint.status === "compressing"
@@ -124,40 +140,86 @@ function ChatContextCompactionDivider({
             : t("chatContextCompactionCompressed")}
         </span>
       </div>
-      <div className="h-px flex-1 bg-gray-200" />
+      <div className="h-px flex-1 bg-border" />
+    </div>
+  );
+}
+
+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}