@nextclaw/ui 0.19.5 → 0.20.0-beta.0

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

@@ -2,6 +2,7 @@ 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 { ChatSessionMoreActionsMenu } from '@/features/chat/features/session/components/session-header/chat-session-more-actions-menu';
 import { t } from '@/shared/lib/i18n';
 
 export function ChatSessionChildSessions({
@@ -38,25 +39,35 @@ export function ChatSessionChildSessions({
         ) : (
           <div className="mt-4 space-y-2">
             {childSessionTabs.map((tab) => (
-              <button
+              <div
                 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)}
+                className="group relative flex w-full items-center rounded-lg border border-gray-200/80 bg-white transition-colors hover:border-gray-300 hover:bg-gray-50"
               >
-                <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>
+                <button
+                  type="button"
+                  className="flex min-w-0 flex-1 items-center gap-3 px-3 py-3 pr-12 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset 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>
+                <ChatSessionMoreActionsMenu
+                  sessionKey={tab.sessionKey}
+                  triggerSize="sm"
+                  triggerTone="strong"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 bg-white opacity-100 md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                />
+              </div>
             ))}
           </div>
         )}

package/src/features/chat/features/workspace/components/overview/__tests__/chat-session-continuous-attention.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, expect, it, vi } from 'vitest';
+import { ChatSessionContinuousAttention } from '@/features/chat/features/workspace/components/overview/chat-session-continuous-attention';
+
+const mocks = vi.hoisted(() => ({
+  mutateAsync: vi.fn(),
+}));
+
+vi.mock('@/features/chat/features/ncp/hooks/use-ncp-session-queries', () => ({
+  useNcpSessionObservations: () => ({
+    data: {
+      sessionId: 'session-1',
+      bindings: [{
+        id: 'binding-1',
+        kind: 'context',
+        extensionId: 'world-extension',
+        title: 'World',
+        description: 'Latest state',
+        status: 'active',
+        createdAt: '2026-08-23T08:00:00.000Z',
+        lastReadAt: '2026-08-23T08:05:00.000Z',
+        safeConfigPreview: 'project: nextclaw',
+      }],
+      subscriptions: [{
+        id: 'subscription-1',
+        kind: 'events',
+        extensionId: 'world-extension',
+        title: 'World events',
+        status: 'paused',
+        createdAt: '2026-08-23T08:01:00.000Z',
+        pendingCount: 2,
+      }],
+      counts: { total: 2, context: 1, events: 1, needsAttention: 1 },
+    },
+    isPending: false,
+    isError: false,
+    refetch: vi.fn(),
+  }),
+  useNcpObservationAction: () => ({
+    isPending: false,
+    variables: undefined,
+    mutateAsync: mocks.mutateAsync,
+  }),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.mutateAsync.mockResolvedValue(undefined);
+});
+
+it('separates state and event relationships and manages the active relationship', async () => {
+  const user = userEvent.setup();
+  render(<ChatSessionContinuousAttention sessionKey="session-1" />);
+
+  expect(screen.getByText('World')).toBeTruthy();
+  expect(screen.getByText('Needs attention')).toBeTruthy();
+  await user.click(screen.getByRole('tab', { name: /Events/ }));
+  expect(screen.getByText('World events')).toBeTruthy();
+  await user.click(screen.getByRole('button', { name: 'Resume' }));
+
+  expect(mocks.mutateAsync).toHaveBeenCalledWith({
+    kind: 'events',
+    id: 'subscription-1',
+    action: 'resume',
+  });
+});

package/src/features/chat/features/workspace/components/overview/chat-session-continuous-attention.tsx

@@ -0,0 +1,234 @@
+import { AlertTriangle, Clock3, Eye, Inbox, Pause, Play, RefreshCw, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { formatDateTime, t } from '@/shared/lib/i18n';
+import { useConfirmDialog } from '@/shared/hooks/use-confirm-dialog';
+import {
+  useNcpObservationAction,
+  useNcpSessionObservations,
+} from '@/features/chat/features/ncp/hooks/use-ncp-session-queries';
+import type {
+  NcpSessionObservationAction,
+  NcpSessionObservationKind,
+  NcpSessionObservationView,
+} from '@/shared/lib/api';
+import { cn } from '@/shared/lib/utils';
+
+type AttentionGroup = NcpSessionObservationKind;
+
+const statusTone: Record<NcpSessionObservationView['status'], string> = {
+  active: 'border-emerald-200 bg-emerald-50 text-emerald-700',
+  paused: 'border-amber-200 bg-amber-50 text-amber-700',
+  degraded: 'border-orange-200 bg-orange-50 text-orange-700',
+  expired: 'border-gray-200 bg-gray-100 text-gray-600',
+  broken: 'border-rose-200 bg-rose-50 text-rose-700',
+};
+
+function replaceCount(template: string, count: number): string {
+  return template.replace('{count}', String(count));
+}
+
+function getStatusLabel(status: NcpSessionObservationView['status']): string {
+  return t(`chatWorkspaceContinuousAttentionStatus${status[0].toUpperCase()}${status.slice(1)}`);
+}
+
+function getGroupLabel(kind: AttentionGroup): string {
+  return t(kind === 'context' ? 'chatWorkspaceContinuousAttentionState' : 'chatWorkspaceContinuousAttentionEvents');
+}
+
+function ObservationRow({
+  item,
+  isPending,
+  onAction,
+}: {
+  item: NcpSessionObservationView;
+  isPending: boolean;
+  onAction: (action: NcpSessionObservationAction) => void;
+}) {
+  const canToggle = item.status === 'active' || item.status === 'paused';
+  const toggleAction = item.status === 'active' ? 'pause' : 'resume';
+  const toggleLabel = toggleAction === 'pause'
+    ? t('chatWorkspaceContinuousAttentionPause')
+    : t('chatWorkspaceContinuousAttentionResume');
+
+  return (
+    <article className="rounded-xl border border-gray-200/80 bg-white p-3 shadow-sm">
+      <div className="flex min-w-0 items-start gap-3">
+        <span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500">
+          {item.kind === 'context' ? <Eye className="h-4 w-4" /> : <Inbox className="h-4 w-4" />}
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <h3 className="truncate text-sm font-semibold text-gray-900">{item.title}</h3>
+            <span className={cn('rounded-full border px-1.5 py-0.5 text-[10px] font-medium', statusTone[item.status])}>
+              {getStatusLabel(item.status)}
+            </span>
+          </div>
+          <p className="mt-0.5 truncate text-[11px] text-gray-400">{item.extensionId} · {getGroupLabel(item.kind)}</p>
+          {item.description ? <p className="mt-2 text-xs leading-5 text-gray-600">{item.description}</p> : null}
+          {item.statusReason ? (
+            <p className="mt-2 flex gap-1.5 text-xs leading-5 text-orange-700">
+              <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+              <span>{item.statusReason}</span>
+            </p>
+          ) : null}
+          {item.safeConfigPreview ? (
+            <p className="mt-2 rounded-md bg-gray-50 px-2 py-1.5 text-[11px] leading-5 text-gray-500">
+              {item.safeConfigPreview}
+            </p>
+          ) : null}
+          <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-gray-400">
+            <span>{t('chatWorkspaceContinuousAttentionCreated')}: {formatDateTime(item.createdAt)}</span>
+            {item.expiresAt ? <span>{t('chatWorkspaceContinuousAttentionExpires')}: {formatDateTime(item.expiresAt)}</span> : null}
+            {item.lastReadAt ? <span>{t('chatWorkspaceContinuousAttentionLastRead')}: {formatDateTime(item.lastReadAt)}</span> : null}
+            {item.kind === 'events' ? (
+              <>
+                <span>{replaceCount(t('chatWorkspaceContinuousAttentionPending'), item.pendingCount ?? 0)}</span>
+                {item.suppressedCount ? <span>{replaceCount(t('chatWorkspaceContinuousAttentionSuppressed'), item.suppressedCount)}</span> : null}
+                {item.deliveryFailureCount ? <span className="text-rose-600">{replaceCount(t('chatWorkspaceContinuousAttentionFailures'), item.deliveryFailureCount)}</span> : null}
+              </>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      <div className="mt-3 flex items-center justify-end gap-2 border-t border-gray-100 pt-2">
+        {canToggle ? (
+          <button
+            type="button"
+            data-testid={`observation-${item.id}-${toggleAction}`}
+            disabled={isPending}
+            className="inline-flex items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+            onClick={() => onAction(toggleAction)}
+          >
+            {toggleAction === 'pause' ? <Pause className="h-3.5 w-3.5" /> : <Play className="h-3.5 w-3.5" />}
+            {isPending ? t('chatWorkspaceContinuousAttentionUpdating') : toggleLabel}
+          </button>
+        ) : null}
+        <button
+          type="button"
+          data-testid={`observation-${item.id}-remove`}
+          disabled={isPending}
+          className="inline-flex items-center gap-1.5 rounded-md border border-rose-200 px-2.5 py-1.5 text-xs font-medium text-rose-700 transition-colors hover:bg-rose-50 disabled:cursor-not-allowed disabled:opacity-50"
+          onClick={() => onAction('remove')}
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+          {t('chatWorkspaceContinuousAttentionRemove')}
+        </button>
+      </div>
+    </article>
+  );
+}
+
+export function ChatSessionContinuousAttention({ sessionKey }: { sessionKey: string | null }) {
+  const [activeGroup, setActiveGroup] = useState<AttentionGroup>('context');
+  const [actionError, setActionError] = useState(false);
+  const query = useNcpSessionObservations(sessionKey);
+  const action = useNcpObservationAction(sessionKey);
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+
+  if (!sessionKey) return null;
+
+  const view = query.data;
+  const items = activeGroup === 'context' ? (view?.bindings ?? []) : (view?.subscriptions ?? []);
+  const runAction = async (item: NcpSessionObservationView, nextAction: NcpSessionObservationAction) => {
+    if (nextAction === 'remove') {
+      const confirmed = await confirm({
+        title: t('chatWorkspaceContinuousAttentionRemoveTitle'),
+        description: t('chatWorkspaceContinuousAttentionRemoveDescription'),
+        confirmLabel: t('chatWorkspaceContinuousAttentionRemove'),
+        variant: 'destructive',
+      });
+      if (!confirmed) return;
+    }
+    setActionError(false);
+    try {
+      await action.mutateAsync({ kind: item.kind, id: item.id, action: nextAction });
+    } catch {
+      setActionError(true);
+    }
+  };
+
+  return (
+    <div className="h-full overflow-auto bg-gray-50/45 px-4 py-5 custom-scrollbar">
+      <div className="mx-auto max-w-xl">
+        <ConfirmDialog />
+        <div className="flex items-start gap-3">
+          <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <Eye className="h-4 w-4" />
+          </span>
+          <div className="min-w-0">
+            <h2 className="text-base font-semibold text-gray-900">{t('chatWorkspaceContinuousAttention')}</h2>
+            <p className="mt-1 break-all text-xs leading-5 text-gray-500">{t('chatWorkspaceContinuousAttentionDescription')} · {sessionKey}</p>
+          </div>
+        </div>
+
+        {view ? (
+          <div className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-4">
+            <SummaryCard label={t('chatWorkspaceContinuousAttentionTotal')} value={view.counts.total} />
+            <SummaryCard label={t('chatWorkspaceContinuousAttentionState')} value={view.counts.context} />
+            <SummaryCard label={t('chatWorkspaceContinuousAttentionEvents')} value={view.counts.events} />
+            <SummaryCard label={t('chatWorkspaceContinuousAttentionNeedsAttention')} value={view.counts.needsAttention} />
+          </div>
+        ) : null}
+
+        <div className="mt-4 flex rounded-lg border border-gray-200 bg-white p-1" role="tablist">
+          {(['context', 'events'] as const).map((group) => {
+            const count = group === 'context' ? (view?.counts.context ?? 0) : (view?.counts.events ?? 0);
+            return (
+              <button
+                key={group}
+                type="button"
+                role="tab"
+                aria-selected={activeGroup === group}
+                className={cn('flex-1 rounded-md px-3 py-2 text-xs font-medium transition-colors', activeGroup === group ? 'bg-gray-100 text-gray-900' : 'text-gray-500 hover:text-gray-700')}
+                onClick={() => setActiveGroup(group)}
+              >
+                {getGroupLabel(group)} <span className="ml-1 tabular-nums text-gray-400">{count}</span>
+              </button>
+            );
+          })}
+        </div>
+        {actionError ? <p className="mt-2 text-xs text-rose-600">{t('chatWorkspaceContinuousAttentionActionFailed')}</p> : null}
+
+        {query.isPending ? (
+          <div className="mt-3 space-y-2" aria-label={t('chatWorkspaceContinuousAttentionLoading')}>
+            {[0, 1].map((item) => <div key={item} className="h-28 animate-pulse rounded-xl border border-gray-200 bg-white" />)}
+          </div>
+        ) : query.isError ? (
+          <div className="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-5 text-center">
+            <p className="text-sm font-medium text-rose-800">{t('chatWorkspaceContinuousAttentionLoadFailed')}</p>
+            <button type="button" className="mt-3 inline-flex items-center gap-1.5 rounded-md border border-rose-200 bg-white px-3 py-1.5 text-xs font-medium text-rose-700" onClick={() => void query.refetch()}>
+              <RefreshCw className="h-3.5 w-3.5" />
+              {t('chatWorkspaceContinuousAttentionRetry')}
+            </button>
+          </div>
+        ) : items.length === 0 ? (
+          <div className="mt-4 rounded-xl border border-dashed border-gray-300 bg-white px-4 py-8 text-center">
+            <Clock3 className="mx-auto h-5 w-5 text-gray-300" />
+            <p className="mt-2 text-sm font-medium text-gray-700">{t('chatWorkspaceContinuousAttentionEmpty')}</p>
+            <p className="mt-1 text-xs leading-5 text-gray-500">{t('chatWorkspaceContinuousAttentionEmptyDescription')}</p>
+          </div>
+        ) : (
+          <div className="mt-3 space-y-2">
+            {items.map((item) => (
+              <ObservationRow
+                key={`${item.kind}:${item.id}`}
+                item={item}
+                isPending={action.isPending && action.variables?.id === item.id}
+                onAction={(nextAction) => void runAction(item, nextAction)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SummaryCard({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="rounded-lg border border-gray-200/80 bg-white px-3 py-2">
+      <div className="text-[10px] uppercase tracking-wide text-gray-400">{label}</div>
+      <div className="mt-1 text-lg font-semibold tabular-nums text-gray-900">{value}</div>
+    </div>
+  );
+}

package/src/features/chat/features/workspace/utils/__tests__/chat-workspace-panel-view-model.utils.test.ts

@@ -221,6 +221,7 @@ describe("fixed workspace tabs", () => {
       "overview",
       "child-sessions",
       "cron:session",
+      "continuous-attention",
       "project-files",
     ]);
   });
@@ -249,10 +250,10 @@ describe("fixed workspace tabs", () => {
     expect(
       tabs
         .filter((tab) =>
-          ["child-sessions", "cron", "project-files"].includes(tab.kind),
+          ["child-sessions", "cron", "continuous-attention", "project-files"].includes(tab.kind),
         )
         .map((tab) => tab.title),
-    ).toEqual(["子会话", "定时任务", "项目文件"]);
+    ).toEqual(["子会话", "定时任务", "持续关注", "项目文件"]);
   });
 });
 
@@ -284,7 +285,7 @@ describe("buildWorkspaceTabsViewModel", () => {
       onSelectCronJobs: vi.fn(),
     });
 
-    expect(tabs[4]).toMatchObject({
+    expect(tabs[5]).toMatchObject({
       key: "child:child-1",
       kind: "child-session",
       title: "Child session",
@@ -292,7 +293,7 @@ describe("buildWorkspaceTabsViewModel", () => {
       showUnreadDot: true,
     });
 
-    tabs[4]?.onSelect();
+    tabs[5]?.onSelect();
     expect(onSelectSession).toHaveBeenCalledWith("child-1");
   });
 
@@ -328,11 +329,12 @@ describe("buildWorkspaceTabsViewModel", () => {
       "overview",
       "child-sessions",
       "cron:session",
+      "continuous-attention",
       "project-files",
       "side-chat-draft:draft-1",
       "child:child-1",
     ]);
-    expect(tabs[4]).toMatchObject({
+    expect(tabs[5]).toMatchObject({
       kind: "side-chat-draft",
       active: true,
     });
@@ -378,7 +380,7 @@ describe("buildWorkspaceTabsViewModel", () => {
       onSelectCronJobs: vi.fn(),
     });
 
-    expect(tabs.slice(4)).toEqual([
+    expect(tabs.slice(5)).toEqual([
       expect.objectContaining({
         key: "file:parent::preview::demo.html",
         active: true,
@@ -401,7 +403,7 @@ describe("buildWorkspaceTabsViewModel", () => {
         }),
       }),
     ]);
-    tabs[4]?.alternateViewerAction?.onSelect();
+    tabs[5]?.alternateViewerAction?.onSelect();
     expect(onOpenFileViewer).toHaveBeenCalledWith(
       "parent::preview::demo.html",
       "rendered",

package/src/features/chat/features/workspace/utils/chat-thread-workspace-session.utils.ts

@@ -21,7 +21,8 @@ export function areWorkspaceNavigationEntriesEqual(
     current.kind === 'overview' ||
     current.kind === 'child-sessions' ||
     current.kind === 'project-files' ||
-    current.kind === 'cron'
+    current.kind === 'cron' ||
+    current.kind === 'continuous-attention'
   ) {
     return true;
   }
@@ -30,6 +31,7 @@ export function areWorkspaceNavigationEntriesEqual(
     next.kind !== 'child-sessions' &&
     next.kind !== 'project-files' &&
     next.kind !== 'cron' &&
+    next.kind !== 'continuous-attention' &&
     current.key === next.key
   );
 }
@@ -50,7 +52,8 @@ export function createWorkspaceNavigationEntryFromSnapshot(
     activeWorkspacePanelKind === 'overview' ||
     activeWorkspacePanelKind === 'child-sessions' ||
     activeWorkspacePanelKind === 'project-files' ||
-    activeWorkspacePanelKind === 'cron'
+    activeWorkspacePanelKind === 'cron' ||
+    activeWorkspacePanelKind === 'continuous-attention'
   ) {
     return { kind: activeWorkspacePanelKind };
   }
@@ -72,7 +75,8 @@ export function createWorkspaceSelectionPatch(
   if (
     entry.kind === 'overview' ||
     entry.kind === 'child-sessions' ||
-    entry.kind === 'project-files'
+    entry.kind === 'project-files' ||
+    entry.kind === 'continuous-attention'
   ) {
     return {
       activeWorkspacePanelKind: entry.kind,
@@ -128,7 +132,8 @@ export function closeWorkspaceTabSnapshot(
     entry.kind === 'overview' ||
     entry.kind === 'child-sessions' ||
     entry.kind === 'cron' ||
-    entry.kind === 'project-files'
+    entry.kind === 'project-files' ||
+    entry.kind === 'continuous-attention'
   ) {
     return null;
   }

package/src/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils.ts

@@ -1,4 +1,5 @@
 import type { ResolvedChildSessionTab } from "@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view";
+import type { ContextMenuGroup } from "@/shared/components/ui/context-menu/context-menu";
 import { shouldShowUnreadSessionIndicator } from "@/features/chat/stores/chat-session-list.store";
 import type {
   ChatWorkspaceNavigationEntry,
@@ -39,6 +40,9 @@ export type WorkspaceSelection =
     }
   | {
       kind: "cron";
+    }
+  | {
+      kind: "continuous-attention";
     };
 
 export type WorkspaceTabViewModel = {
@@ -48,6 +52,7 @@ export type WorkspaceTabViewModel = {
   tooltip: string;
   active: boolean;
   agentId?: string | null;
+  sessionKey?: string | null;
   fileName?: string | null;
   showUnreadDot?: boolean;
   viewMode?: "preview" | "diff";
@@ -60,6 +65,8 @@ export type WorkspaceTabViewModel = {
   onAddToChat?: () => void;
   onSelect: () => void;
   onClose?: () => void;
+  menuLabel?: string;
+  menuGroups?: readonly ContextMenuGroup[];
 };
 
 export function readWorkspaceFileTitle(file: ChatWorkspaceFileTab): string {
@@ -100,6 +107,10 @@ export function resolveWorkspaceSelection(params: {
     return { kind: "cron" };
   }
 
+  if (activePanelKind === "continuous-attention") {
+    return { kind: "continuous-attention" };
+  }
+
   if (activePanelKind === "side-chat-draft" && activeSideChatDraft) {
     return {
       kind: "side-chat-draft",
@@ -173,6 +184,7 @@ type WorkspaceTabsViewModelParams = {
   onSelectChildSessions: () => void;
   onSelectProjectFiles: () => void;
   onSelectCronJobs: () => void;
+  onSelectContinuousAttention?: () => void;
 };
 
 function buildWorkspacePageTabs({
@@ -182,6 +194,7 @@ function buildWorkspacePageTabs({
   onSelectCronJobs,
   onSelectOverview,
   onSelectProjectFiles,
+  onSelectContinuousAttention,
 }: Pick<
   WorkspaceTabsViewModelParams,
   | "activeSelection"
@@ -190,6 +203,7 @@ function buildWorkspacePageTabs({
   | "onSelectCronJobs"
   | "onSelectOverview"
   | "onSelectProjectFiles"
+  | "onSelectContinuousAttention"
 >): WorkspaceTabViewModel[] {
   const pageTabs: WorkspaceTabViewModel[] = [
     {
@@ -216,6 +230,14 @@ function buildWorkspacePageTabs({
       active: activeSelection?.kind === "cron",
       onSelect: onSelectCronJobs,
     },
+    {
+      key: "continuous-attention",
+      kind: "continuous-attention",
+      title: t("chatWorkspaceContinuousAttention"),
+      tooltip: t("chatWorkspaceContinuousAttention"),
+      active: activeSelection?.kind === "continuous-attention",
+      onSelect: onSelectContinuousAttention ?? (() => undefined),
+    },
     {
       key: "project-files",
       kind: "project-files",
@@ -251,6 +273,7 @@ export function buildWorkspaceTabsViewModel(
     onSelectChildSessions,
     onSelectProjectFiles,
     onSelectCronJobs,
+    onSelectContinuousAttention = () => undefined,
   } = params;
 
   const workspacePages = buildWorkspacePageTabs({
@@ -260,6 +283,7 @@ export function buildWorkspaceTabsViewModel(
     onSelectCronJobs,
     onSelectOverview,
     onSelectProjectFiles,
+    onSelectContinuousAttention,
   });
 
   const sideChatDraftTabs = activeSideChatDraft
@@ -304,6 +328,7 @@ export function buildWorkspaceTabsViewModel(
       title: tab.title,
       tooltip: tab.title,
       agentId: tab.agentId,
+      sessionKey: tab.sessionKey,
       active:
         activeSelection?.kind === "child-session" &&
         activeSelection.tab.sessionKey === tab.sessionKey,

package/src/features/chat/managers/chat-thread.manager.ts

@@ -174,7 +174,7 @@ export class ChatThreadManager {
 
   private openWorkspacePage = (
     rawParentSessionKey: string | null,
-    kind: 'overview' | 'child-sessions' | 'project-files' | 'cron',
+    kind: 'overview' | 'child-sessions' | 'project-files' | 'cron' | 'continuous-attention',
   ) => {
     const parentSessionKey = rawParentSessionKey?.trim() || null;
     if (!parentSessionKey && kind !== 'project-files') {
@@ -234,13 +234,11 @@ export class ChatThreadManager {
     if (snapshot) useChatThreadStore.getState().setSnapshot(snapshot);
   };
 
-  openChildSessions = (sessionKey: string) => {
-    this.openWorkspacePage(sessionKey, 'child-sessions');
-  };
+  openChildSessions = (sessionKey: string) => this.openWorkspacePage(sessionKey, 'child-sessions');
 
-  openProjectFiles = (sessionKey: string | null) => {
-    this.openWorkspacePage(sessionKey, 'project-files');
-  };
+  openContinuousAttention = (sessionKey: string) => this.openWorkspacePage(sessionKey, 'continuous-attention');
+
+  openProjectFiles = (sessionKey: string | null) => this.openWorkspacePage(sessionKey, 'project-files');
 
   materializeRootDraftSession = (rawSessionKey: string) => {
     const sessionKey = rawSessionKey.trim();

package/src/features/chat/stores/chat-thread.store.ts

@@ -57,7 +57,8 @@ export type ChatWorkspacePanelKind =
   | 'side-chat-draft'
   | 'project-files'
   | 'file'
-  | 'cron';
+  | 'cron'
+  | 'continuous-attention';
 
 export type ChatWorkspaceNavigationEntry =
   | { kind: 'overview' }
@@ -66,7 +67,8 @@ export type ChatWorkspaceNavigationEntry =
   | { kind: 'side-chat-draft'; key: string }
   | { kind: 'project-files' }
   | { kind: 'file'; key: string }
-  | { kind: 'cron' };
+  | { kind: 'cron' }
+  | { kind: 'continuous-attention' };
 
 export type ChatThreadSnapshot = {
   sessionTypeLabel?: string | null;
@@ -102,7 +104,7 @@ export type ChatThreadSnapshot = {
 };
 
 const CHAT_THREAD_WORKSPACE_STORAGE_KEY = 'nextclaw.chat.workspace-panel.state';
-const CHAT_THREAD_WORKSPACE_STORAGE_VERSION = 2;
+const CHAT_THREAD_WORKSPACE_STORAGE_VERSION = 3;
 const CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS = 8;
 
 type ChatThreadStore = {
@@ -207,7 +209,8 @@ function normalizePersistedWorkspaceNavigationEntry(value: unknown): ChatWorkspa
     value.kind === 'overview' ||
     value.kind === 'child-sessions' ||
     value.kind === 'project-files' ||
-    value.kind === 'cron'
+    value.kind === 'cron' ||
+    value.kind === 'continuous-attention'
   ) {
     return { kind: value.kind };
   }

package/src/features/extensions/hooks/use-extensions.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchExtensionCatalog } from '@/shared/lib/api';
+
+export function useExtensions() {
+  return useQuery({
+    queryKey: ['extension-catalog'],
+    queryFn: fetchExtensionCatalog,
+    staleTime: 5_000,
+    refetchOnWindowFocus: true,
+  });
+}

package/src/features/extensions/index.ts

@@ -0,0 +1 @@
+export { ExtensionsConfigPage } from "./pages/extensions-config-page";