@nextclaw/ui 0.14.1 → 0.14.3

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[];
@@ -49,12 +49,12 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
             <div className="flex items-center justify-between gap-2 px-2 py-0.5">
               <div className="flex min-w-0 items-center gap-1.5">
                 <div
-                  className="truncate text-[11px] font-medium uppercase tracking-wider text-gray-500"
+                  className="truncate text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
                   title={group.projectRoot}
                 >
                   {group.projectName}
                 </div>
-                <span className="shrink-0 text-[10px] text-gray-400">
+                <span className="shrink-0 text-[10px] text-muted-foreground/70">
                   {group.items.length}
                 </span>
               </div>
@@ -70,12 +70,12 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                       icon={<Plus className="h-3.5 w-3.5" />}
                       label={actionLabel}
                       tooltip={false}
-                      className="h-7 w-7 shrink-0 rounded-lg text-gray-400 hover:bg-white hover:text-gray-900"
+                      className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                     />
                   </PopoverTrigger>
                   <PopoverContent
                     align="end"
-                    className="w-56 rounded-2xl border border-gray-200/80 bg-white p-1.5 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+                    className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
                   >
                     <ChatSessionTypeMenu
                       options={sessionTypeOptions}
@@ -91,7 +91,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                 <IconActionButton
                   icon={<Plus className="h-3.5 w-3.5" />}
                   label={actionLabel}
-                  className="h-7 w-7 shrink-0 rounded-lg text-gray-400 hover:bg-white hover:text-gray-900"
+                  className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   onClick={() => onCreateSession(preferredSessionType, group.projectRoot)}
                 />
               )}

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;
@@ -25,8 +25,8 @@ type ChatSidebarSessionListProps = {
 function ChatSidebarEmptyState({ label }: { label: string }) {
   return (
     <div className="p-4 text-center">
-      <MessageSquareText className="mx-auto mb-2 h-6 w-6 text-gray-300" />
-      <div className="text-xs text-gray-500">{label}</div>
+      <MessageSquareText className="mx-auto mb-2 h-6 w-6 text-muted-foreground/45" />
+      <div className="text-xs text-muted-foreground">{label}</div>
     </div>
   );
 }
@@ -42,7 +42,7 @@ export function ChatSidebarSessionList({
   sessionTypeOptions,
 }: ChatSidebarSessionListProps) {
   if (isLoading) {
-    return <div className="p-3 text-xs text-gray-500">{t("sessionsLoading")}</div>;
+    return <div className="p-3 text-xs text-muted-foreground">{t("sessionsLoading")}</div>;
   }
 
   if (isProjectFirstView) {
@@ -67,7 +67,7 @@ export function ChatSidebarSessionList({
     <div className="space-y-3">
       {groups.map((group) => (
         <div key={group.label}>
-          <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-gray-400">
+          <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
             {group.label}
           </div>
           <div className="space-y-0.5">{group.items.map(renderSessionItem)}</div>

package/src/features/chat/features/session/components/session-context-icon.tsx

@@ -17,7 +17,7 @@ export function SessionContextIconNode({ icon, className }: { icon: SessionConte
         src={runtimeIconSrc ?? undefined}
         className={cn('h-[1.125rem] w-[1.125rem]', className)}
         imgClassName="h-full w-full object-contain"
-        fallback={<Bot className={cn('h-3 w-3 text-gray-500', className)} />}
+        fallback={<Bot className={cn('h-3 w-3 text-muted-foreground', className)} />}
       />
     );
   }
@@ -34,7 +34,7 @@ function ChannelLogoIcon(
       src={logoSrc}
       className={cn('h-[1.125rem] w-[1.125rem]', className)}
       imgClassName="h-full w-full object-contain"
-      fallback={<Bot className="h-3 w-3 text-gray-500" />}
+      fallback={<Bot className="h-3 w-3 text-muted-foreground" />}
     />
   );
 }

package/src/features/chat/features/session/components/session-header/__tests__/chat-session-project-badge.test.tsx

@@ -58,8 +58,8 @@ describe('ChatSessionProjectBadge', () => {
     renderProjectBadge();
 
     const trigger = screen.getByRole('button', { name: 'Set Project Directory' });
-    expect(trigger.className).toContain('border-gray-200');
-    expect(trigger.className).toContain('text-gray-600');
+    expect(trigger.className).toContain('border-border');
+    expect(trigger.className).toContain('text-muted-foreground');
     expect(trigger.className).not.toContain('emerald');
   });
 

package/src/features/chat/features/session/components/session-header/chat-session-header-actions.tsx

@@ -9,7 +9,7 @@ import { ChatSessionProjectDialog } from './chat-session-project-dialog';
 import { t } from '@/shared/lib/i18n';
 
 const SESSION_HEADER_ACTION_GROUP_CLASS = 'flex shrink-0 items-center gap-1.5';
-const SESSION_HEADER_ACTION_BUTTON_CLASS = 'h-7 w-7 rounded-lg shrink-0 text-gray-400 hover:text-gray-700';
+const SESSION_HEADER_ACTION_BUTTON_CLASS = 'h-7 w-7 shrink-0 rounded-lg text-muted-foreground/70 hover:bg-accent hover:text-accent-foreground';
 
 type ChatSessionHeaderActionsProps = {
   sessionKey: string;

package/src/features/chat/features/session/components/session-header/chat-session-header-menu-item.tsx

@@ -23,7 +23,7 @@ export function ChatSessionHeaderMenuItem({
         'flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
         destructive
           ? 'text-destructive hover:bg-destructive/10'
-          : 'text-gray-700 hover:bg-gray-100'
+          : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
       )}
       onClick={onClick}
       disabled={disabled}

package/src/features/chat/features/session/components/session-header/chat-session-metadata-dialog.tsx

@@ -29,7 +29,7 @@ export function ChatSessionMetadataDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl gap-0 overflow-hidden p-0">
-        <DialogHeader className="border-b border-gray-200 px-5 py-4 pr-12">
+        <DialogHeader className="border-b border-border px-5 py-4 pr-12">
           <DialogTitle className="text-base">{t('chatSessionMetadataDialogTitle')}</DialogTitle>
           <DialogDescription className="sr-only">
             {t('chatSessionMetadataDialogDescription')}

package/src/features/chat/features/session/components/session-header/chat-session-project-badge.tsx

@@ -55,7 +55,7 @@ export function ChatSessionProjectBadge({
           <button
             type="button"
             title={projectRoot ?? undefined}
-            className="min-w-0 max-w-[320px] shrink rounded-full border border-gray-200 bg-gray-100/90 px-2 py-0.5 text-[11px] font-medium text-gray-600 transition-colors hover:border-gray-300 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60"
+            className="min-w-0 max-w-[320px] shrink rounded-full border border-border bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground transition-colors hover:border-primary/35 hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-60"
             aria-label={t('chatSessionSetProject')}
             disabled={isProjectPending}
           >
@@ -72,11 +72,11 @@ export function ChatSessionProjectBadge({
           style={SESSION_PROJECT_MENU_STYLE}
         >
           <div className="px-3 pb-2 pt-1">
-            <div className="text-[11px] font-medium uppercase tracking-wider text-gray-500">
+            <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
               {projectName}
             </div>
             {projectRoot ? (
-              <div className="mt-1 break-all text-xs text-gray-500">
+              <div className="mt-1 break-all text-xs text-muted-foreground">
                 {projectRoot}
               </div>
             ) : null}

package/src/features/chat/features/session/components/session-run-badge.tsx

@@ -12,7 +12,7 @@ export function SessionRunBadge({ status, className }: SessionRunBadgeProps) {
   const label = status === 'running' ? t('sessionsRunStatusRunning') : t('sessionsRunStatusQueued');
   return (
     <span
-      className={cn('inline-flex h-3.5 w-3.5 items-center justify-center text-gray-400', className)}
+      className={cn('inline-flex h-3.5 w-3.5 items-center justify-center text-muted-foreground/70', className)}
       title={label}
       aria-label={label}
     >

package/src/features/chat/features/session/hooks/__tests__/use-chat-session-project.test.tsx

@@ -1,7 +1,6 @@
 import { act, renderHook } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { toast } from 'sonner';
-import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
 import { useChatSessionProject } from '@/features/chat/features/session/hooks/use-chat-session-project';
 
 const mocks = vi.hoisted(() => ({
@@ -19,21 +18,11 @@ vi.mock('@/features/chat/features/session/hooks/use-chat-session-update', () =>
 }));
 
 describe('useChatSessionProject', () => {
-  beforeEach(() => {
-    useChatInputStore.setState((state) => ({
-      snapshot: {
-        ...state.snapshot,
-        pendingProjectRoot: null,
-        pendingProjectRootSessionKey: null
-      }
-    }));
-  });
-
   afterEach(() => {
     vi.clearAllMocks();
   });
 
-  it('stores the draft project root locally when the session does not exist yet', async () => {
+  it('does not persist draft project root through the session update hook', async () => {
     const { result } = renderHook(() => useChatSessionProject());
 
     await act(async () => {
@@ -45,14 +34,10 @@ describe('useChatSessionProject', () => {
     });
 
     expect(mocks.updateSession).not.toHaveBeenCalled();
-    expect(useChatInputStore.getState().snapshot).toMatchObject({
-      pendingProjectRoot: '/tmp/project-alpha',
-      pendingProjectRootSessionKey: 'draft-session-1'
-    });
     expect(toast.success).toHaveBeenCalledTimes(1);
   });
 
-  it('keeps an explicit draft override when clearing the project root locally', async () => {
+  it('does not persist draft project clearing through the session update hook', async () => {
     const { result } = renderHook(() => useChatSessionProject());
 
     await act(async () => {
@@ -64,10 +49,6 @@ describe('useChatSessionProject', () => {
     });
 
     expect(mocks.updateSession).not.toHaveBeenCalled();
-    expect(useChatInputStore.getState().snapshot).toMatchObject({
-      pendingProjectRoot: null,
-      pendingProjectRootSessionKey: 'draft-session-1'
-    });
     expect(toast.success).toHaveBeenCalledTimes(1);
   });
 
@@ -87,10 +68,6 @@ describe('useChatSessionProject', () => {
       patch: { projectRoot: '/tmp/project-beta' },
       successMessage: 'Project directory updated'
     });
-    expect(useChatInputStore.getState().snapshot).toMatchObject({
-      pendingProjectRoot: null,
-      pendingProjectRootSessionKey: null
-    });
   });
 
   it('persists clearing to the server without keeping a session-scoped local override', async () => {
@@ -109,9 +86,5 @@ describe('useChatSessionProject', () => {
       patch: { projectRoot: null },
       successMessage: 'Project directory cleared'
     });
-    expect(useChatInputStore.getState().snapshot).toMatchObject({
-      pendingProjectRoot: null,
-      pendingProjectRootSessionKey: null
-    });
   });
 });

package/src/features/chat/features/session/hooks/use-chat-session-project.ts

@@ -1,6 +1,5 @@
 import { toast } from 'sonner';
 import { t } from '@/shared/lib/i18n';
-import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
 import { useChatSessionUpdate } from '@/features/chat/features/session/hooks/use-chat-session-update';
 
 type UpdateChatSessionProjectParams = {
@@ -17,10 +16,6 @@ export function useChatSessionProject() {
     const successMessage = projectRoot ? t('chatSessionProjectUpdated') : t('chatSessionProjectCleared');
 
     if (!persistToServer) {
-      useChatInputStore.getState().setSnapshot({
-        pendingProjectRoot: projectRoot,
-        pendingProjectRootSessionKey: sessionKey
-      });
       toast.success(successMessage);
       return;
     }

package/src/features/chat/features/session/utils/chat-run-metadata.utils.ts

@@ -1,3 +1,7 @@
+import {
+  CHAT_SESSION_MATERIALIZATION_METADATA_KEY,
+  type AgentRunSessionMaterializationMetadata,
+} from "@nextclaw/shared";
 import { buildInlineSkillTokensFromComposer, CHAT_UI_INLINE_TOKENS_METADATA_KEY } from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import { normalizeRequestedSkills } from "@/features/chat/features/runtime/utils/chat-runtime.utils";
 import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
@@ -17,6 +21,7 @@ export function buildChatRunMetadata(payload: {
   projectRoot?: string | null;
   requestedSkills?: string[];
   composerNodes?: Parameters<typeof buildInlineSkillTokensFromComposer>[0];
+  sessionMaterialization?: AgentRunSessionMaterializationMetadata | null;
 }): Record<string, unknown> {
   const projectRoot = normalizeSessionProjectRootValue(payload.projectRoot);
   const metadata: Record<string, unknown> = {
@@ -36,6 +41,9 @@ export function buildChatRunMetadata(payload: {
   if (inlineSkillTokens.length > 0) {
     metadata[CHAT_UI_INLINE_TOKENS_METADATA_KEY] = inlineSkillTokens;
   }
+  if (payload.sessionMaterialization) {
+    metadata[CHAT_SESSION_MATERIALIZATION_METADATA_KEY] = payload.sessionMaterialization;
+  }
   return metadata;
 }
 

package/src/features/chat/features/session-type/components/__tests__/chat-session-type-menu.test.tsx

@@ -4,8 +4,8 @@ import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/compo
 import { createPopoverAvailableHeightLimit } from "@/shared/components/ui/popover";
 
 const options = [
-  { value: "native", label: "Native", ready: true },
-  { value: "codex", label: "Codex", ready: true },
+  { value: "native", label: "Native", icon: null, ready: true },
+  { value: "codex", label: "Codex", icon: null, ready: true },
 ];
 
 describe("ChatSessionTypeMenu", () => {

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

@@ -50,6 +50,7 @@ describe("ChatSessionTypeOptionItem", () => {
         option={{
           value: "native",
           label: "Native",
+          icon: null,
           ready: true,
         }}
         onSelect={vi.fn()}
@@ -70,6 +71,7 @@ describe("ChatSessionTypeOptionItem", () => {
         option={{
           value: "claude",
           label: "Claude",
+          icon: null,
           ready: false,
           reasonMessage: "Configure a provider API key first.",
         }}

package/src/features/chat/features/session-type/components/chat-session-type-menu.tsx

@@ -1,10 +1,10 @@
 import { ChatSessionTypeOptionItem } from "@/features/chat/features/session-type/components/chat-session-type-option-item";
-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 { createPopoverAvailableHeightLimit } from "@/shared/components/ui/popover";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
-type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+type SessionTypeOption = ChatSessionTypeOption;
 const CHAT_SESSION_TYPE_MENU_MAX_HEIGHT =
   createPopoverAvailableHeightLimit("18rem");
 const CHAT_SESSION_TYPE_MENU_STYLE = {

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

@@ -1,11 +1,11 @@
-import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
 import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
+import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import { StatusDot } from "@/shared/components/status/status-dot";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 import { Bot, Check } from "lucide-react";
 
-type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+type SessionTypeOption = ChatSessionTypeOption;
 
 export function ChatSessionTypeOptionItem(props: {
   option: SessionTypeOption;

package/src/features/chat/features/session-type/hooks/use-chat-session-type-state.ts

@@ -128,7 +128,7 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
     return null;
   }, [availableSessionTypeSet, selectedSession, selectedSessionType, selectedSessionTypeOption]);
 
-  return {
+  return useMemo(() => ({
     sessionTypeOptions,
     selectedSessionTypeOption,
     defaultSessionType,
@@ -136,5 +136,13 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
     canEditSessionType,
     sessionTypeUnavailable,
     sessionTypeUnavailableMessage
-  };
+  }), [
+    canEditSessionType,
+    defaultSessionType,
+    selectedSessionType,
+    selectedSessionTypeOption,
+    sessionTypeOptions,
+    sessionTypeUnavailable,
+    sessionTypeUnavailableMessage
+  ]);
 }