@nextclaw/ui 0.17.0 → 0.17.2

package/src/features/chat/features/session/utils/ncp-session-adapter.utils.ts

@@ -284,7 +284,8 @@ function toUiParts(parts: NcpMessagePart[]): UIMessage['parts'] {
           toolCallId: part.toolCallId ?? `${part.toolName}-${Math.random().toString(36).slice(2, 8)}`,
           toolName: part.toolName,
           args: stringifyUnknown(part.args),
-          result: part.result
+          result: part.result,
+          ...(part.execution ? { execution: { ...part.execution } } : {})
         }
       });
     }

package/src/features/chat/features/workspace/components/__tests__/chat-session-child-sessions.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, expect, it, vi } from 'vitest';
+import { ChatSessionChildSessions } from '@/features/chat/features/workspace/components/child-sessions/chat-session-child-sessions';
+import type { ResolvedChildSessionTab } from '@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view';
+
+const mocks = vi.hoisted(() => ({
+  openSideChatDraft: vi.fn(),
+  selectChildSessionDetail: vi.fn(),
+}));
+
+vi.mock('@/features/chat/components/providers/chat-presenter.provider', () => ({
+  usePresenter: () => ({ chatThreadManager: mocks }),
+}));
+
+beforeEach(() => vi.clearAllMocks());
+
+function createChildSession(): ResolvedChildSessionTab {
+  return {
+    sessionKey: 'child-1',
+    parentSessionKey: 'parent-1',
+    title: 'Research branch',
+    agentId: 'main',
+    updatedAt: null,
+    lastMessageAt: null,
+    readAt: null,
+    runStatus: undefined,
+    sessionTypeLabel: 'Native',
+    preferredModel: 'openai/gpt-5',
+    projectName: 'nextbot',
+    projectRoot: '/tmp/nextbot',
+  };
+}
+
+it('opens a new child-session draft from the management page', async () => {
+  const user = userEvent.setup();
+  render(<ChatSessionChildSessions childSessionTabs={[]} sessionKey="parent-1" />);
+
+  expect(screen.getByText('No child sessions yet.')).toBeTruthy();
+  await user.click(screen.getByRole('button', { name: 'New child session' }));
+  expect(mocks.openSideChatDraft).toHaveBeenCalledWith('parent-1');
+});
+
+it('keeps existing child sessions selectable beside the create action', async () => {
+  const user = userEvent.setup();
+  render(<ChatSessionChildSessions childSessionTabs={[createChildSession()]} sessionKey="parent-1" />);
+
+  expect(screen.getByRole('button', { name: 'New child session' })).toBeTruthy();
+  await user.click(screen.getByRole('button', { name: /Research branch/ }));
+  expect(mocks.selectChildSessionDetail).toHaveBeenCalledWith('child-1');
+});

package/src/features/chat/features/workspace/components/__tests__/chat-session-token-usage.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, expect, it, vi } from 'vitest';
+import { ChatSessionTokenUsage } from '@/features/chat/features/workspace/components/overview/chat-session-token-usage';
+
+const mocks = vi.hoisted(() => ({
+  refetch: vi.fn(),
+  query: {
+    data: undefined as unknown,
+    isLoading: false,
+    isError: false,
+  },
+}));
+
+vi.mock('@/features/chat/features/ncp/hooks/use-ncp-session-queries', () => ({
+  useNcpSessionTokenUsage: () => ({
+    ...mocks.query,
+    refetch: mocks.refetch,
+  }),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.refetch.mockResolvedValue(undefined);
+  mocks.query.data = {
+    sessionId: 'parent-1',
+    totals: {
+      inputTokens: 1_250,
+      outputTokens: 240,
+      cachedInputTokens: 500,
+      totalTokens: 1_490,
+      cacheHitRate: 0.4,
+    },
+    models: [
+      {
+        model: 'openai/gpt-5',
+        inputTokens: 1_000,
+        outputTokens: 200,
+        cachedInputTokens: 400,
+        totalTokens: 1_200,
+        cacheHitRate: 0.4,
+        runCount: 2,
+        modelCallCount: 3,
+        reportedModelCallCount: 3,
+        status: 'reported',
+      },
+      {
+        model: 'anthropic/claude-sonnet-4',
+        inputTokens: 250,
+        outputTokens: 40,
+        cachedInputTokens: 100,
+        totalTokens: 290,
+        cacheHitRate: 0.4,
+        runCount: 1,
+        modelCallCount: 2,
+        reportedModelCallCount: 1,
+        status: 'partial',
+      },
+    ],
+    runCount: 3,
+    modelCallCount: 5,
+    reportedModelCallCount: 4,
+    status: 'partial',
+  };
+  mocks.query.isLoading = false;
+  mocks.query.isError = false;
+});
+
+it('shows totals, cache hit rate, and usage grouped by model', () => {
+  render(<ChatSessionTokenUsage sessionKey="parent-1" />);
+
+  expect(screen.getByText('Token usage')).toBeTruthy();
+  expect(screen.getByText('1,490')).toBeTruthy();
+  expect(screen.getAllByText('40%').length).toBeGreaterThan(0);
+  expect(screen.getByText('openai/gpt-5')).toBeTruthy();
+  expect(screen.getByText('anthropic/claude-sonnet-4')).toBeTruthy();
+  expect(screen.getAllByText('Partial usage')).toHaveLength(2);
+});
+
+it('lets users retry after token usage fails to load', async () => {
+  const user = userEvent.setup();
+  mocks.query.data = undefined;
+  mocks.query.isError = true;
+
+  render(<ChatSessionTokenUsage sessionKey="parent-1" />);
+
+  expect(screen.getByRole('alert').textContent).toContain('Couldn’t load token usage.');
+  await user.click(screen.getByRole('button', { name: 'Retry' }));
+  expect(mocks.refetch).toHaveBeenCalledTimes(1);
+});

package/src/features/chat/features/workspace/components/__tests__/chat-session-workspace-panel-content.test.tsx

@@ -78,6 +78,10 @@ vi.mock('@/features/chat/components/providers/chat-presenter.provider', () => ({
   }),
 }));
 
+vi.mock('@/features/chat/features/workspace/components/overview/chat-session-token-usage', () => ({
+  ChatSessionTokenUsage: () => <section><h3>Token usage</h3></section>,
+}));
+
 vi.mock('@/shared/lib/api', async (importOriginal) => ({
   ...(await importOriginal()),
   createServerPathDirectory: mocks.createServerPathDirectory,
@@ -250,41 +254,29 @@ it('shows all session workspace entries in the overview', async () => {
   );
 
   expect(screen.getByText('Overview')).toBeTruthy();
+  expect(screen.getByText('Token usage')).toBeTruthy();
   const childSessionsButton = screen.getByRole('button', {
     name: /Child sessions/,
   });
   const cronJobsButton = screen.getByRole('button', {
     name: /Scheduled tasks/,
   });
+  const projectFilesButton = screen.getByRole('button', { name: /Project files/ });
 
   expect((childSessionsButton as HTMLButtonElement).disabled).toBe(false);
   expect((cronJobsButton as HTMLButtonElement).disabled).toBe(false);
+  expect(projectFilesButton.compareDocumentPosition(screen.getByText('Token usage')) & Node.DOCUMENT_POSITION_FOLLOWING)
+    .toBeTruthy();
 
   await user.click(childSessionsButton);
   await user.click(cronJobsButton);
-  await user.click(screen.getByRole('button', { name: /Project files/ }));
+  await user.click(projectFilesButton);
 
   expect(mocks.openChildSessions).toHaveBeenCalledWith('parent-1');
   expect(mocks.openSessionCronPanel).toHaveBeenCalledWith('parent-1');
   expect(mocks.openProjectFiles).toHaveBeenCalledWith('parent-1');
 });
 
-it('shows an empty child sessions page instead of disabling the entry', () => {
-  render(
-    <ChatSessionWorkspacePanelContent
-      activeSelection={{ kind: 'child-sessions' }}
-      childSessionTabs={[]}
-      filePreviewRefreshVersion={0}
-      sessionKey="parent-1"
-      sessionCronJobs={[]}
-      sessionProjectRoot={null}
-      sessionWorkingDir={null}
-    />,
-  );
-
-  expect(screen.getByText('No child sessions yet.')).toBeTruthy();
-});
-
 it('shows the selected session project as a hierarchical file tree', () => {
   render(
     <ChatSessionWorkspacePanelContent

package/src/features/chat/features/workspace/components/chat-session-workspace-panel-content.tsx

@@ -15,6 +15,8 @@ import { SessionConversationArea } from '@/features/chat/features/conversation/c
 import { ChatSessionWorkspaceFilePreview } from '@/features/chat/features/workspace/components/chat-session-workspace-file-preview';
 import { ChatSessionWorkspaceDirectoryBrowser } from '@/features/chat/features/workspace/components/chat-session-workspace-directory-browser';
 import { SessionCronJobContent } from '@/features/chat/features/workspace/components/session-cron-job-content';
+import { ChatSessionChildSessions } from '@/features/chat/features/workspace/components/child-sessions/chat-session-child-sessions';
+import { ChatSessionTokenUsage } from '@/features/chat/features/workspace/components/overview/chat-session-token-usage';
 import type { ResolvedChildSessionTab } from '@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view';
 import type { WorkspaceSelection } from '@/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils';
 import { useServerPathBrowse } from '@/shared/hooks/use-server-path-browse';
@@ -126,50 +128,7 @@ function WorkspaceOverview({
             }}
           />
         </div>
-      </div>
-    </div>
-  );
-}
-
-function WorkspaceChildSessions({ childSessionTabs }: { childSessionTabs: readonly ResolvedChildSessionTab[] }) {
-  const presenter = usePresenter();
-
-  return (
-    <div className="h-full overflow-auto bg-gray-50/45 px-4 py-5 custom-scrollbar">
-      <div className="mx-auto max-w-xl">
-        <div className="flex items-center gap-2">
-          <h2 className="text-base font-semibold text-gray-900">{t('chatWorkspaceChildSessions')}</h2>
-          <span className="rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-gray-500">
-            {childSessionTabs.length}
-          </span>
-        </div>
-        {childSessionTabs.length === 0 ? (
-          <div className="py-10 text-center text-sm text-gray-500">{t('chatWorkspaceChildSessionsEmpty')}</div>
-        ) : (
-          <div className="mt-4 space-y-2">
-            {childSessionTabs.map((tab) => (
-              <button
-                key={tab.sessionKey}
-                type="button"
-                className="group flex w-full items-center gap-3 rounded-lg border border-gray-200/80 bg-white px-3 py-3 text-left transition-colors hover:border-gray-300 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
-                onClick={() => presenter.chatThreadManager.selectChildSessionDetail(tab.sessionKey)}
-              >
-                <span className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">
-                  <GitBranch className="h-4 w-4" />
-                </span>
-                <span className="min-w-0 flex-1">
-                  <span className="block truncate text-sm font-medium text-gray-900">{tab.title}</span>
-                  {tab.projectName || tab.sessionTypeLabel ? (
-                    <span className="mt-0.5 block truncate text-xs text-gray-500">
-                      {[tab.sessionTypeLabel, tab.projectName].filter(Boolean).join(' · ')}
-                    </span>
-                  ) : null}
-                </span>
-                <ChevronRight className="h-4 w-4 shrink-0 text-gray-300 transition-transform group-hover:translate-x-0.5 group-hover:text-gray-500" />
-              </button>
-            ))}
-          </div>
-        )}
+        <ChatSessionTokenUsage sessionKey={sessionKey} />
       </div>
     </div>
   );
@@ -299,7 +258,7 @@ function WorkspaceSelectedContent({
   }
 
   if (activeSelection.kind === 'child-sessions') {
-    return <WorkspaceChildSessions childSessionTabs={childSessionTabs} />;
+    return <ChatSessionChildSessions childSessionTabs={childSessionTabs} sessionKey={sessionKey} />;
   }
 
   if (activeSelection.kind === 'side-chat-draft') {

package/src/features/chat/features/workspace/components/child-sessions/chat-session-child-sessions.tsx

@@ -0,0 +1,66 @@
+import { ChevronRight, GitBranch, MessageSquarePlus } from 'lucide-react';
+
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import type { ResolvedChildSessionTab } from '@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view';
+import { t } from '@/shared/lib/i18n';
+
+export function ChatSessionChildSessions({
+  childSessionTabs,
+  sessionKey,
+}: {
+  childSessionTabs: readonly ResolvedChildSessionTab[];
+  sessionKey: string | null;
+}) {
+  const presenter = usePresenter();
+
+  return (
+    <div className="h-full overflow-auto bg-gray-50/45 px-4 py-5 custom-scrollbar">
+      <div className="mx-auto max-w-xl">
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2">
+            <h2 className="truncate text-base font-semibold text-gray-900">{t('chatWorkspaceChildSessions')}</h2>
+            <span className="rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-gray-500">
+              {childSessionTabs.length}
+            </span>
+          </div>
+          <button
+            type="button"
+            className="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50"
+            disabled={!sessionKey}
+            onClick={() => presenter.chatThreadManager.openSideChatDraft(sessionKey)}
+          >
+            <MessageSquarePlus className="h-3.5 w-3.5" />
+            <span>{t('chatWorkspaceCreateChildSession')}</span>
+          </button>
+        </div>
+        {childSessionTabs.length === 0 ? (
+          <div className="py-10 text-center text-sm text-gray-500">{t('chatWorkspaceChildSessionsEmpty')}</div>
+        ) : (
+          <div className="mt-4 space-y-2">
+            {childSessionTabs.map((tab) => (
+              <button
+                key={tab.sessionKey}
+                type="button"
+                className="group flex w-full items-center gap-3 rounded-lg border border-gray-200/80 bg-white px-3 py-3 text-left transition-colors hover:border-gray-300 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+                onClick={() => presenter.chatThreadManager.selectChildSessionDetail(tab.sessionKey)}
+              >
+                <span className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">
+                  <GitBranch className="h-4 w-4" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-medium text-gray-900">{tab.title}</span>
+                  {tab.projectName || tab.sessionTypeLabel ? (
+                    <span className="mt-0.5 block truncate text-xs text-gray-500">
+                      {[tab.sessionTypeLabel, tab.projectName].filter(Boolean).join(' · ')}
+                    </span>
+                  ) : null}
+                </span>
+                <ChevronRight className="h-4 w-4 shrink-0 text-gray-300 transition-transform group-hover:translate-x-0.5 group-hover:text-gray-500" />
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/features/chat/features/workspace/components/overview/chat-session-token-usage.tsx

@@ -0,0 +1,171 @@
+import { ChartNoAxesColumn } from 'lucide-react';
+
+import { useNcpSessionTokenUsage } from '@/features/chat/features/ncp/hooks/use-ncp-session-queries';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+
+function formatTokenCount(value: number | null): string {
+  return value === null ? '—' : new Intl.NumberFormat().format(value);
+}
+
+function formatCacheHitRate(value: number | null): string {
+  return value === null
+    ? '—'
+    : new Intl.NumberFormat(undefined, {
+        style: 'percent',
+        maximumFractionDigits: 1,
+      }).format(value);
+}
+
+function TokenUsageStatusBadge({ status }: { status: 'reported' | 'partial' | 'unavailable' }) {
+  return (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-[10px] font-semibold',
+        status === 'reported'
+          ? 'bg-emerald-50 text-emerald-700'
+          : status === 'partial'
+            ? 'bg-amber-50 text-amber-700'
+            : 'bg-gray-100 text-gray-500',
+      )}
+    >
+      {t(
+        status === 'reported'
+          ? 'chatWorkspaceTokenUsageReported'
+          : status === 'partial'
+            ? 'chatWorkspaceTokenUsagePartial'
+            : 'chatWorkspaceTokenUsageUnavailable',
+      )}
+    </span>
+  );
+}
+
+function TokenUsageMetric({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="min-w-0 rounded-md bg-gray-50 px-2.5 py-2">
+      <div className="truncate text-[10px] font-medium text-gray-500">{label}</div>
+      <div className="mt-0.5 truncate text-sm font-semibold tabular-nums text-gray-900">
+        {value}
+      </div>
+    </div>
+  );
+}
+
+export function ChatSessionTokenUsage({ sessionKey }: { sessionKey: string | null }) {
+  const usageQuery = useNcpSessionTokenUsage(sessionKey);
+  const usage = usageQuery.data;
+
+  return (
+    <section
+      aria-labelledby="chat-workspace-token-usage-title"
+      className="mt-4 rounded-lg border border-gray-200/80 bg-white p-3"
+    >
+      <div className="flex items-start gap-3">
+        <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">
+          <ChartNoAxesColumn className="h-4 w-4" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center justify-between gap-2">
+            <h3 id="chat-workspace-token-usage-title" className="text-sm font-semibold text-gray-900">
+              {t('chatWorkspaceTokenUsage')}
+            </h3>
+            {usage ? <TokenUsageStatusBadge status={usage.status} /> : null}
+          </div>
+          <p className="mt-0.5 text-xs leading-5 text-gray-500">
+            {t('chatWorkspaceTokenUsageDescription')}
+          </p>
+        </div>
+      </div>
+
+      {usageQuery.isLoading ? (
+        <p className="py-5 text-center text-xs text-gray-500" aria-live="polite">
+          {t('chatWorkspaceTokenUsageLoading')}
+        </p>
+      ) : usageQuery.isError ? (
+        <div className="flex items-center justify-between gap-3 py-4 text-xs text-rose-600" role="alert">
+          <span>{t('chatWorkspaceTokenUsageLoadFailed')}</span>
+          <button
+            type="button"
+            className="shrink-0 rounded px-1.5 py-1 font-semibold text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+            onClick={() => void usageQuery.refetch()}
+          >
+            {t('chatWorkspaceTokenUsageRetry')}
+          </button>
+        </div>
+      ) : usage && usage.runCount > 0 ? (
+        <div className="mt-3 space-y-3">
+          <div className="grid grid-cols-2 gap-1.5">
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageTotal')}
+              value={formatTokenCount(usage.totals.totalTokens)}
+            />
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageInput')}
+              value={formatTokenCount(usage.totals.inputTokens)}
+            />
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageOutput')}
+              value={formatTokenCount(usage.totals.outputTokens)}
+            />
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageCachedInput')}
+              value={formatTokenCount(usage.totals.cachedInputTokens)}
+            />
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageCacheHitRate')}
+              value={formatCacheHitRate(usage.totals.cacheHitRate)}
+            />
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageRuns')}
+              value={String(usage.runCount)}
+            />
+          </div>
+          <div>
+            <div className="mb-1.5 text-[11px] font-medium text-gray-700">
+              {t('chatWorkspaceTokenUsageByModel')}
+            </div>
+            <div className="space-y-1.5">
+              {usage.models.map((modelUsage) => (
+                <div key={modelUsage.model} className="rounded-md border border-gray-200/70 px-2.5 py-2">
+                  <div className="flex min-w-0 items-center justify-between gap-2">
+                    <span className="min-w-0 truncate text-xs font-semibold text-gray-900" title={modelUsage.model}>
+                      {modelUsage.model}
+                    </span>
+                    <TokenUsageStatusBadge status={modelUsage.status} />
+                  </div>
+                  <div className="mt-1 text-[10px] text-gray-500">
+                    {t('chatWorkspaceTokenUsageModelRunCount').replace('{count}', String(modelUsage.runCount))}
+                    {' · '}
+                    {t('chatWorkspaceTokenUsageModelCacheHitRate').replace(
+                      '{rate}',
+                      formatCacheHitRate(modelUsage.cacheHitRate),
+                    )}
+                  </div>
+                  <dl className="mt-2 grid grid-cols-2 gap-x-3 gap-y-1 text-[10px] sm:grid-cols-4">
+                    {[
+                      [t('chatWorkspaceTokenUsageInput'), modelUsage.inputTokens],
+                      [t('chatWorkspaceTokenUsageOutput'), modelUsage.outputTokens],
+                      [t('chatWorkspaceTokenUsageCachedInput'), modelUsage.cachedInputTokens],
+                      [t('chatWorkspaceTokenUsageTotal'), modelUsage.totalTokens],
+                    ].map(([label, value]) => (
+                      <div key={String(label)} className="flex min-w-0 items-center justify-between gap-1 sm:block">
+                        <dt className="truncate text-gray-500">{label}</dt>
+                        <dd className="shrink-0 font-semibold tabular-nums text-gray-800 sm:mt-0.5">
+                          {formatTokenCount(value as number | null)}
+                        </dd>
+                      </div>
+                    ))}
+                  </dl>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <p className="py-5 text-center text-xs leading-5 text-gray-500">
+          {t('chatWorkspaceTokenUsageEmpty')}
+        </p>
+      )}
+    </section>
+  );
+}

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

@@ -55,6 +55,11 @@ export type ChatMessagePartSource =
         error?: string;
         cancelled?: boolean;
         toolCallId?: string;
+        execution?: {
+          startedAt?: string;
+          endedAt?: string;
+          durationMs?: number;
+        };
       };
     }
   | {

package/src/features/service-apps/components/__tests__/service-apps-panel.test.tsx

@@ -95,9 +95,24 @@ vi.mock('@/features/service-apps/hooks/use-service-apps', () => ({
         id: 'notes',
         manifestPath: '/workspace/service-apps/notes/service-app.json',
         protocol: 'mcp',
+        sourceKind: 'workspace',
         status: 'idle',
         title: 'Notes',
+      }, {
+        args: ['server.mjs'],
+        command: 'node',
+        cwd: '/apps/personal-organizer/service',
+        dirPath: '/apps/personal-organizer/service',
+        enabled: true,
+        id: 'organizer-service',
+        manifestPath: '/apps/personal-organizer/service/service-app.json',
+        packageId: 'nextclaw.personal-organizer',
+        protocol: 'mcp',
+        sourceKind: 'package',
+        status: 'idle',
+        title: 'Organizer Service',
       }],
+      diagnostics: [],
       serviceAppsPath: '/workspace/service-apps',
       workspacePath: '/workspace',
     },
@@ -111,11 +126,13 @@ describe('ServiceAppsPanel', () => {
   it('keeps service actions progressive and deletes through a confirm dialog', async () => {
     const user = userEvent.setup();
 
-    render(<ServiceAppsPanel />);
+    render(<ServiceAppsPanel onManagePackage={vi.fn()} />);
 
-    expect(screen.getByText('Not connected')).toBeTruthy();
+    expect(screen.getAllByText('Not connected')).toHaveLength(2);
     expect(screen.queryByText('idle')).toBeNull();
-    const discoverButton = screen.getByRole('button', { name: 'Connect and discover actions' });
+    const discoverButton = screen.getAllByRole('button', {
+      name: 'Connect and discover actions',
+    })[0]!;
     expect(discoverButton).toBeTruthy();
     await user.hover(discoverButton);
     await waitFor(() => {
@@ -125,7 +142,7 @@ describe('ServiceAppsPanel', () => {
     await user.click(discoverButton);
     expect(discoverServiceAppActionsMutateAsync).toHaveBeenCalledWith('notes');
 
-    fireEvent.click(screen.getByRole('button', { name: 'More actions' }));
+    fireEvent.click(screen.getAllByRole('button', { name: 'More actions' })[0]!);
     expect((screen.getByRole('button', { name: 'Disconnect runtime' }) as HTMLButtonElement).disabled).toBe(true);
     fireEvent.click(screen.getByRole('button', { name: 'Delete service app' }));
     await waitFor(() => {
@@ -143,4 +160,15 @@ describe('ServiceAppsPanel', () => {
       { onSuccess: expect.any(Function) },
     );
   });
+
+  it('routes package-managed services back to Apps without offering standalone deletion', () => {
+    const onManagePackage = vi.fn();
+    render(<ServiceAppsPanel onManagePackage={onManagePackage} />);
+
+    fireEvent.click(screen.getAllByRole('button', { name: 'More actions' })[1]!);
+    expect(screen.queryByRole('button', { name: 'Delete service app' })).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'Manage in Apps' }));
+
+    expect(onManagePackage).toHaveBeenCalledWith('nextclaw.personal-organizer');
+  });
 });