@nextclaw/ui 0.12.11 → 0.12.13

package/src/features/chat/pages/sessions-config-page.tsx

@@ -0,0 +1,192 @@
+import { useMemo, useState } from 'react';
+import type { NcpSessionSummaryView, SessionEntryView } from '@/shared/lib/api';
+import { useNcpSessions } from '@/shared/hooks/use-config';
+import { Button } from '@/shared/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
+import { SessionRunBadge } from '@/features/chat/components/session/session-run-badge';
+import { adaptNcpSessionSummaries, sessionDisplayName, sessionMatchesQuery } from '@/features/chat';
+import { cn } from '@/shared/lib/utils';
+import { formatDateShort, t } from '@/shared/lib/i18n';
+import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { Clock, Inbox, MessageCircle, RefreshCw, Search } from 'lucide-react';
+import { SessionsConfigDetailPane } from '@/features/chat/components/config/sessions-config-detail-pane';
+import { ConfigSplitPage, ConfigSplitSidebar, ConfigSplitPaneBody, ConfigSplitPaneHeader } from '@/shared/components/config-split-page';
+import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
+const UNKNOWN_CHANNEL_KEY = '__unknown_channel__';
+function resolveChannelFromSessionKey(key: string): string {
+  const separator = key.indexOf(':');
+  if (separator <= 0) {
+    return UNKNOWN_CHANNEL_KEY;
+  }
+  return key.slice(0, separator).trim() || UNKNOWN_CHANNEL_KEY;
+}
+function displayChannelName(channel: string): string {
+  return channel === UNKNOWN_CHANNEL_KEY ? t('sessionsUnknownChannel') : channel;
+}
+function SessionListItem(props: {
+  session: SessionEntryView;
+  summary: NcpSessionSummaryView;
+  channelLabel: string;
+  isSelected: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <button
+      onClick={props.onSelect}
+      className={cn(
+        'w-full text-left p-3.5 rounded-xl transition-all duration-200 outline-none focus:outline-none focus:ring-0 group',
+        props.isSelected ? 'bg-brand-50 border border-brand-100/50' : 'bg-transparent border border-transparent hover:bg-gray-50/80'
+      )}
+    >
+      <div className="flex items-start justify-between mb-1.5">
+        <div
+          className={cn('font-semibold truncate pr-2 flex-1 text-sm', props.isSelected ? 'text-brand-800' : 'text-gray-900')}
+        >
+          {sessionDisplayName(props.session)}
+        </div>
+        <div
+          className={cn(
+            'text-[10px] font-bold px-2 py-0.5 rounded-full shrink-0 capitalize',
+            props.isSelected ? 'bg-white text-brand-600 shadow-[0_1px_2px_rgba(0,0,0,0.02)]' : 'bg-gray-100 text-gray-500'
+          )}
+        >
+          {props.channelLabel}
+        </div>
+      </div>
+      <div
+        className={cn('flex items-center text-xs justify-between mt-2 font-medium', props.isSelected ? 'text-brand-600/80' : 'text-gray-400')}
+      >
+        <div className="flex items-center gap-1.5">
+          <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+            {props.summary.status === 'running' ? <SessionRunBadge status="running" /> : null}
+          </span>
+          <Clock className="w-3.5 h-3.5 opacity-70" />
+          <span className="truncate max-w-[100px]">{formatDateShort(props.summary.updatedAt)}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <MessageCircle className="w-3.5 h-3.5 opacity-70" />
+          <span>{props.summary.messageCount}</span>
+        </div>
+      </div>
+    </button>
+  );
+}
+export function SessionsConfig() {
+  const { isMobile } = useViewportLayout();
+  const [query, setQuery] = useState('');
+  const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
+  const [selectedChannel, setSelectedChannel] = useState('all');
+  const sessionsQuery = useNcpSessions({ limit: 100 });
+  const sessionSummaries = useMemo(() => sessionsQuery.data?.sessions ?? [], [sessionsQuery.data?.sessions]);
+  const sessionEntries = useMemo(() => adaptNcpSessionSummaries(sessionSummaries), [sessionSummaries]);
+  const sessionSummaryById = useMemo(() => new Map(sessionSummaries.map((session) => [session.sessionId, session])), [
+    sessionSummaries
+  ]);
+  const filteredSessions = useMemo(
+    () =>
+      sessionEntries.filter((session) => {
+        if (selectedChannel !== 'all' && resolveChannelFromSessionKey(session.key) !== selectedChannel) {
+          return false;
+        }
+        return sessionMatchesQuery(session, query);
+      }),
+    [query, selectedChannel, sessionEntries]
+  );
+  const channels = useMemo(() => {
+    const set = new Set<string>();
+    for (const session of sessionEntries) {
+      set.add(resolveChannelFromSessionKey(session.key));
+    }
+    return Array.from(set).sort((a, b) => {
+      if (a === UNKNOWN_CHANNEL_KEY) {
+        return 1;
+      }
+      if (b === UNKNOWN_CHANNEL_KEY) {
+        return -1;
+      }
+      return a.localeCompare(b);
+    });
+  }, [sessionEntries]);
+  const selectedSessionKey = selectedSessionId && sessionSummaryById.has(selectedSessionId) ? selectedSessionId : null;
+  const selectedSession = useMemo(() => sessionEntries.find((session) => session.key === selectedSessionKey) ?? null, [
+    selectedSessionKey,
+    sessionEntries
+  ]);
+  const selectedSummary = selectedSessionKey ? sessionSummaryById.get(selectedSessionKey) ?? null : null;
+  const selectedChannelLabel = selectedSession ? displayChannelName(resolveChannelFromSessionKey(selectedSession.key)) : null;
+  return (
+    <PageLayout className="pb-0 xl:flex xl:h-full xl:min-h-0 xl:flex-col">
+      <PageHeader title={t('sessionsPageTitle')} description={t('sessionsPageDescription')} />
+      <ConfigSplitPage
+        className="xl:min-h-0"
+        mobileView={isMobile ? (selectedSessionKey ? 'detail' : 'list') : undefined}
+        onMobileBack={() => setSelectedSessionId(null)}
+        mobileListLabel={t('sessionsPageTitle')}
+      >
+        <ConfigSplitSidebar className="xl:w-[320px] xl:flex-none">
+          <ConfigSplitPaneHeader className="space-y-3 px-4 py-4">
+            <div className="flex items-center justify-between">
+              <span className="text-[11px] font-semibold text-gray-400 uppercase tracking-wider">{sessionEntries.length} {t('sessionsListTitle')}</span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100"
+                onClick={() => sessionsQuery.refetch()}
+              >
+                <RefreshCw className={cn('h-3.5 w-3.5', sessionsQuery.isFetching && 'animate-spin')} />
+              </Button>
+            </div>
+            <Select value={selectedChannel} onValueChange={setSelectedChannel}>
+              <SelectTrigger className="w-full h-8.5 rounded-lg bg-gray-50/50 hover:bg-gray-100 border-gray-200 focus:ring-0 shadow-none text-xs font-medium text-gray-700">
+                <SelectValue placeholder={t('sessionsAllChannels')} />
+              </SelectTrigger>
+              <SelectContent className="rounded-xl shadow-lg border-gray-100 max-w-[280px]">
+                <SelectItem value="all" className="rounded-lg text-xs">{t('sessionsAllChannels')}</SelectItem>
+                {channels.map((channel) => (
+                  <SelectItem key={channel} value={channel} className="rounded-lg text-xs truncate pr-6">
+                    {displayChannelName(channel)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <div className="relative w-full">
+              <Search className="h-3.5 w-3.5 absolute left-3 top-2.5 text-gray-400" />
+              <Input
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder={t('sessionsSearchPlaceholder')}
+                className="pl-8 h-8.5 rounded-lg bg-gray-50/50 border-gray-200 focus-visible:bg-white text-xs"
+              />
+            </div>
+          </ConfigSplitPaneHeader>
+          <ConfigSplitPaneBody className="space-y-1 p-3 pb-10">
+            {sessionsQuery.isLoading ? (
+              <div className="text-sm text-gray-400 p-4 text-center">{t('sessionsLoading')}</div>
+            ) : filteredSessions.length === 0 ? (
+              <div className="text-sm text-gray-400 p-4 text-center border-2 border-dashed border-gray-100 rounded-xl mt-4">
+                <Inbox className="w-8 h-8 mx-auto mb-2 text-gray-300" />
+                {t('sessionsEmpty')}
+              </div>
+            ) : (
+              filteredSessions.map((session) => {
+                const summary = sessionSummaryById.get(session.key);
+                if (!summary) {
+                  return null;
+                }
+                return <SessionListItem key={session.key} session={session} summary={summary} channelLabel={displayChannelName(resolveChannelFromSessionKey(session.key))} isSelected={selectedSessionKey === session.key} onSelect={() => setSelectedSessionId(session.key)} />;
+              })
+            )}
+          </ConfigSplitPaneBody>
+        </ConfigSplitSidebar>
+        <SessionsConfigDetailPane
+          sessionKey={selectedSessionKey}
+          session={selectedSession}
+          summary={selectedSummary}
+          channelLabel={selectedChannelLabel}
+          onClearSelection={() => setSelectedSessionId(null)}
+        />
+      </ConfigSplitPage>
+    </PageLayout>
+  );
+}

package/src/{components → features}/chat/stores/chat-input.store.ts

@@ -1,9 +1,9 @@
 import { create } from 'zustand';
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
-import type { SessionSkillEntryView, SessionTypeIconView, ThinkingLevel } from '@/api/types';
-import type { ChatModelOption } from '@/components/chat/chat-input.types';
-import { createInitialChatComposerNodes } from '@/components/chat/chat-composer-state';
+import type { SessionSkillEntryView, SessionTypeIconView, ThinkingLevel } from '@/shared/lib/api';
+import type { ChatModelOption } from '@/features/chat/types/chat-input.types';
+import { createInitialChatComposerNodes } from '@/features/chat/utils/chat-composer-state.utils';
 
 export type ChatInputSnapshot = {
   isProviderStateResolved: boolean;

package/src/{components → features}/chat/stores/chat-session-list.store.ts

@@ -1,9 +1,7 @@
 import { create, type StateCreator } from 'zustand';
-import { createNcpSessionId } from '@/components/chat/ncp/ncp-session-adapter';
-import type { SessionRunStatus } from '@/lib/session-run-status';
-
+import { createNcpSessionId } from '@/features/chat/utils/ncp-session-adapter.utils';
+import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
 export type ChatSessionListMode = 'time-first' | 'project-first';
-
 export type ChatSessionListSnapshot = {
   selectedSessionKey: string | null;
   draftSessionKey: string;

package/src/{components → features}/chat/stores/chat-thread.store.ts

@@ -2,8 +2,8 @@ import { create } from 'zustand';
 import type { MutableRefObject } from 'react';
 import type { NcpMessage } from '@nextclaw/ncp';
 import type { ChatFileOperationLineViewModel } from '@nextclaw/agent-chat-ui';
-import type { ChatModelOption } from '@/components/chat/chat-input.types';
-import type { AgentProfileView, SessionTypeIconView } from '@/api/types';
+import type { AgentProfileView, SessionTypeIconView } from '@/shared/lib/api';
+import type { ChatModelOption } from '@/features/chat/types/chat-input.types';
 
 export type ChatChildSessionTab = {
   sessionKey: string;
@@ -93,7 +93,7 @@ const initialSnapshot: ChatThreadSnapshot = {
   childSessionTabs: [],
   activeChildSessionKey: null,
   workspaceFileTabs: [],
-  activeWorkspaceFileKey: null,
+  activeWorkspaceFileKey: null
 };
 
 export const useChatThreadStore = create<ChatThreadStore>((set) => ({

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

@@ -0,0 +1,44 @@
+export type ChatThinkingLevel =
+  | "off"
+  | "minimal"
+  | "low"
+  | "medium"
+  | "high"
+  | "adaptive"
+  | "xhigh";
+
+export type ChatSkillRecord = {
+  key: string;
+  label: string;
+  scopeLabel?: string;
+  description?: string;
+  descriptionZh?: string;
+  badgeLabel?: string;
+};
+
+export type ChatModelRecord = {
+  value: string;
+  modelLabel: string;
+  providerLabel: string;
+  thinkingCapability?: {
+    supported: ChatThinkingLevel[];
+    default?: ChatThinkingLevel | null;
+  } | null;
+};
+
+export type ChatInputBarAdapterTexts = {
+  slashSkillSubtitle: string;
+  slashSkillSpecLabel: string;
+  slashSkillScopeLabel: string;
+  noSkillDescription: string;
+  recentSkillsLabel: string;
+  allSkillsLabel: string;
+  modelSelectPlaceholder: string;
+  modelNoOptionsLabel: string;
+  recentModelsLabel: string;
+  allModelsLabel: string;
+  sessionTypePlaceholder: string;
+  thinkingLabels: Record<ChatThinkingLevel, string>;
+  noModelOptionsLabel: string;
+  configureProviderLabel: string;
+};

package/src/{components/chat → features/chat/types}/chat-input.types.ts

@@ -1,4 +1,4 @@
-import type { ThinkingLevel } from '@/api/types';
+import type { ThinkingLevel } from '@/shared/lib/api';
 
 export type ChatModelThinkingCapability = {
   supported: ThinkingLevel[];

package/src/features/chat/types/chat-message.types.ts

@@ -0,0 +1,58 @@
+export type ChatMessageAdapterTexts = {
+  roleLabels: {
+    user: string;
+    assistant: string;
+    tool: string;
+    system: string;
+    fallback: string;
+  };
+  reasoningLabel: string;
+  toolCallLabel: string;
+  toolResultLabel: string;
+  toolInputLabel: string;
+  toolNoOutputLabel: string;
+  toolOutputLabel: string;
+  toolStatusPreparingLabel: string;
+  toolStatusRunningLabel: string;
+  toolStatusCompletedLabel: string;
+  toolStatusFailedLabel: string;
+  toolStatusCancelledLabel: string;
+  imageAttachmentLabel: string;
+  fileAttachmentLabel: string;
+  unknownPartLabel: string;
+};
+
+export type ChatMessagePartSource =
+  | {
+      type: "text";
+      text: string;
+    }
+  | {
+      type: "file";
+      mimeType: string;
+      data: string;
+      url?: string;
+      name?: string;
+      sizeBytes?: number;
+    }
+  | {
+      type: "reasoning";
+      reasoning: string;
+    }
+  | {
+      type: "tool-invocation";
+      toolInvocation: {
+        status?: string;
+        toolName: string;
+        args?: unknown;
+        parsedArgs?: unknown;
+        result?: unknown;
+        error?: string;
+        cancelled?: boolean;
+        toolCallId?: string;
+      };
+    }
+  | {
+      type: string;
+      [key: string]: unknown;
+    };

package/src/{components/chat/chat-stream/types.ts → features/chat/types/chat-stream.types.ts}

@@ -1,7 +1,7 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { NcpMessagePart } from '@nextclaw/ncp';
 import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
-import type { ThinkingLevel } from '@/api/types';
+import type { ThinkingLevel } from '@/shared/lib/api';
 
 export type SendMessageParams = {
   message: string;

package/src/{components/chat/chat-composer-state.test.ts → features/chat/utils/chat-composer-state.utils.test.ts}

@@ -1,5 +1,5 @@
 import { createChatComposerTextNode, createChatComposerTokenNode } from '@nextclaw/agent-chat-ui';
-import { deriveNcpMessagePartsFromComposer } from '@/components/chat/chat-composer-state';
+import { deriveNcpMessagePartsFromComposer } from './chat-composer-state.utils';
 
 describe('deriveNcpMessagePartsFromComposer', () => {
   it('preserves interleaved text and image token order while serializing skill tokens inline', () => {

package/src/{components/chat/chat-composer-state.ts → features/chat/utils/chat-composer-state.utils.ts}

@@ -1,35 +1,33 @@
-import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
-import type { NcpMessagePart } from '@nextclaw/ncp';
-import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import {
-  createChatComposerTokenNode,
   createChatComposerNodesFromText,
+  createChatComposerTokenNode,
   createEmptyChatComposerNodes,
   extractChatComposerTokenKeys,
   normalizeChatComposerNodes,
   removeChatComposerTokenNodes,
   serializeChatComposerPlainText
 } from '@nextclaw/agent-chat-ui';
+import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type { NcpMessagePart } from '@nextclaw/ncp';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 
 const CHAT_SKILL_TOKEN_PREFIX = '$';
 
-function serializeSkillTokenText(skillSpec: string): string {
-  return `${CHAT_SKILL_TOKEN_PREFIX}${skillSpec}`;
-}
-
-function appendTextPart(parts: NcpMessagePart[], text: string): void {
+function appendTextPart(parts: NcpMessagePart[], text: string): NcpMessagePart[] {
   if (text.length === 0) {
-    return;
+    return parts;
   }
   const previous = parts[parts.length - 1];
   if (previous?.type === 'text') {
-    previous.text += text;
-    return;
+    return [...parts.slice(0, -1), { ...previous, text: previous.text + text }];
   }
-  parts.push({
-    type: 'text',
-    text
-  });
+  return [
+    ...parts,
+    {
+      type: 'text',
+      text
+    }
+  ];
 }
 
 export function createInitialChatComposerNodes(): ChatComposerNode[] {
@@ -103,16 +101,16 @@ export function deriveNcpMessagePartsFromComposer(
   attachments: readonly NcpDraftAttachment[]
 ): NcpMessagePart[] {
   const attachmentById = new Map(attachments.map((attachment) => [attachment.id, attachment]));
-  const parts: NcpMessagePart[] = [];
+  let parts: NcpMessagePart[] = [];
 
   for (const node of nodes) {
     if (node.type === 'text') {
-      appendTextPart(parts, node.text);
+      parts = appendTextPart(parts, node.text);
       continue;
     }
 
     if (node.tokenKind === 'skill') {
-      appendTextPart(parts, serializeSkillTokenText(node.tokenKey));
+      parts = appendTextPart(parts, `${CHAT_SKILL_TOKEN_PREFIX}${node.tokenKey}`);
       continue;
     }
 

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

@@ -0,0 +1,87 @@
+import { createChatComposerTextNode, createChatComposerTokenNode } from '@nextclaw/agent-chat-ui';
+import {
+  buildInlineSkillTokensFromComposer,
+  CHAT_UI_INLINE_TOKENS_METADATA_KEY,
+  readInlineTokensFromMetadata,
+  splitTextByInlineTokens
+} from './chat-inline-token.utils';
+
+describe('chat-inline-token utils', () => {
+  it('builds ordered inline skill tokens from composer nodes', () => {
+    expect(
+      buildInlineSkillTokensFromComposer([
+        createChatComposerTextNode('before '),
+        createChatComposerTokenNode({
+          tokenKind: 'skill',
+          tokenKey: 'weather',
+          label: 'Weather'
+        }),
+        createChatComposerTokenNode({
+          tokenKind: 'skill',
+          tokenKey: 'docs',
+          label: 'Docs'
+        })
+      ])
+    ).toEqual([
+      {
+        kind: 'skill',
+        key: 'weather',
+        label: 'Weather',
+        rawText: '$weather'
+      },
+      {
+        kind: 'skill',
+        key: 'docs',
+        label: 'Docs',
+        rawText: '$docs'
+      }
+    ]);
+  });
+
+  it('reads generic inline token metadata safely', () => {
+    expect(
+      readInlineTokensFromMetadata({
+        [CHAT_UI_INLINE_TOKENS_METADATA_KEY]: [
+          {
+            kind: 'skill',
+            key: 'weather',
+            label: 'Weather',
+            rawText: '$weather'
+          }
+        ]
+      })
+    ).toEqual([
+      {
+        kind: 'skill',
+        key: 'weather',
+        label: 'Weather',
+        rawText: '$weather'
+      }
+    ]);
+  });
+
+  it('splits text into inline text and token fragments', () => {
+    expect(
+      splitTextByInlineTokens('please use $weather now', [
+        {
+          kind: 'skill',
+          key: 'weather',
+          label: 'Weather',
+          rawText: '$weather'
+        }
+      ])
+    ).toEqual([
+      { type: 'text', text: 'please use ' },
+      {
+        type: 'token',
+        token: {
+          kind: 'skill',
+          key: 'weather',
+          label: 'Weather',
+          rawText: '$weather'
+        }
+      },
+      { type: 'text', text: ' now' }
+    ]);
+  });
+});

package/src/{components/chat → features/chat/utils}/chat-inline-token.utils.ts

@@ -1,40 +1,27 @@
-import type { ChatComposerNode } from "@nextclaw/agent-chat-ui";
+import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 
-export const CHAT_UI_INLINE_TOKENS_METADATA_KEY = "ui_inline_tokens";
-const CHAT_SKILL_TOKEN_PREFIX = "$";
+export const CHAT_UI_INLINE_TOKENS_METADATA_KEY = 'ui_inline_tokens';
+const CHAT_SKILL_TOKEN_PREFIX = '$';
 
-export type ChatInlineTokenSource = {
-  kind: string;
-  key: string;
-  label: string;
-  rawText: string;
-};
+export type ChatInlineTokenSource = { kind: string; key: string; label: string; rawText: string };
 
 export type ChatInlineTextFragment =
-  | {
-      type: "text";
-      text: string;
-    }
-  | {
-      type: "token";
-      token: ChatInlineTokenSource;
-    };
+  | { 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);
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
 function readOptionalString(value: unknown): string | null {
-  if (typeof value !== "string") {
+  if (typeof value !== 'string') {
     return null;
   }
   const trimmed = value.trim();
   return trimmed.length > 0 ? trimmed : null;
 }
 
-function dedupeInlineTokens(
-  tokens: readonly ChatInlineTokenSource[],
-): ChatInlineTokenSource[] {
+function dedupeInlineTokens(tokens: readonly ChatInlineTokenSource[]): ChatInlineTokenSource[] {
   const seen = new Set<string>();
   const output: ChatInlineTokenSource[] = [];
   for (const token of tokens) {
@@ -48,26 +35,24 @@ function dedupeInlineTokens(
   return output;
 }
 
-export function buildInlineSkillTokensFromComposer(
-  nodes: readonly ChatComposerNode[],
-): ChatInlineTokenSource[] {
+export function buildInlineSkillTokensFromComposer(nodes: readonly ChatComposerNode[]): ChatInlineTokenSource[] {
   const tokens: ChatInlineTokenSource[] = [];
   for (const node of nodes) {
-    if (node.type !== "token" || node.tokenKind !== "skill") {
+    if (node.type !== 'token' || node.tokenKind !== 'skill') {
       continue;
     }
     tokens.push({
-      kind: "skill",
+      kind: 'skill',
       key: node.tokenKey,
       label: node.label,
-      rawText: `${CHAT_SKILL_TOKEN_PREFIX}${node.tokenKey}`,
+      rawText: `${CHAT_SKILL_TOKEN_PREFIX}${node.tokenKey}`
     });
   }
   return dedupeInlineTokens(tokens);
 }
 
 export function readInlineTokensFromMetadata(
-  metadata: Record<string, unknown> | undefined,
+  metadata: Record<string, unknown> | undefined
 ): ChatInlineTokenSource[] {
   const raw = metadata?.[CHAT_UI_INLINE_TOKENS_METADATA_KEY];
   if (!Array.isArray(raw)) {
@@ -89,7 +74,7 @@ export function readInlineTokensFromMetadata(
       kind,
       key,
       rawText,
-      label: readOptionalString(entry.label) ?? key,
+      label: readOptionalString(entry.label) ?? key
     });
   }
 
@@ -98,15 +83,13 @@ export function readInlineTokensFromMetadata(
 
 export function splitTextByInlineTokens(
   text: string,
-  tokens: readonly ChatInlineTokenSource[],
+  tokens: readonly ChatInlineTokenSource[]
 ): ChatInlineTextFragment[] {
   if (text.length === 0 || tokens.length === 0) {
-    return text.length === 0 ? [] : [{ type: "text", text }];
+    return text.length === 0 ? [] : [{ type: 'text', text }];
   }
 
-  const orderedTokens = [...tokens].sort(
-    (left, right) => right.rawText.length - left.rawText.length,
-  );
+  const orderedTokens = [...tokens].sort((left, right) => right.rawText.length - left.rawText.length);
   const fragments: ChatInlineTextFragment[] = [];
   let cursor = 0;
 
@@ -128,16 +111,16 @@ export function splitTextByInlineTokens(
         nextCursor += 1;
       }
       fragments.push({
-        type: "text",
-        text: text.slice(cursor, nextCursor),
+        type: 'text',
+        text: text.slice(cursor, nextCursor)
       });
       cursor = nextCursor;
       continue;
     }
 
     fragments.push({
-      type: "token",
-      token: matchedToken,
+      type: 'token',
+      token: matchedToken
     });
     cursor += matchedToken.rawText.length;
   }

package/src/{components/chat/adapters/chat-input-bar.adapter.test.ts → features/chat/utils/chat-input-bar.utils.test.ts}

@@ -3,8 +3,8 @@ import {
   buildModelToolbarSelect,
   buildSelectedSkillItems,
   buildSkillPickerModel
-} from '@/components/chat/adapters/chat-input-bar.adapter';
-import type { ChatSkillRecord } from '@/components/chat/adapters/chat-input-bar.adapter';
+} from './chat-input-bar.utils';
+import type { ChatSkillRecord } from './chat-input-bar.utils';
 
 function createSkillRecord(partial: Partial<ChatSkillRecord>): ChatSkillRecord {
   return {