npm - @nextclaw/ui - Versions diffs - 0.9.2 → 0.9.4 - Mend

@nextclaw/ui 0.9.2 → 0.9.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/CHANGELOG.md +12 -0
package/dist/assets/ChannelsList-DDfZIiJa.js +1 -0
package/dist/assets/ChatPage-FpRraTxm.js +38 -0
package/dist/assets/{DocBrowser-CVwUDJMO.js → DocBrowser-Kndx8OJj.js} +1 -1
package/dist/assets/LogoBadge-hKHoLH9n.js +1 -0
package/dist/assets/MarketplacePage-CZIJyfjK.js +49 -0
package/dist/assets/McpMarketplacePage-BGrAMA37.js +40 -0
package/dist/assets/{ModelConfig-CsX-_fyy.js → ModelConfig-BpKQeGfb.js} +1 -1
package/dist/assets/ProvidersList-qfUL6mrW.js +1 -0
package/dist/assets/RemoteAccessPage-BQuMsngI.js +1 -0
package/dist/assets/{RuntimeConfig-CX2TGEG1.js → RuntimeConfig-CVlqNWKO.js} +1 -1
package/dist/assets/{SearchConfig-C-WBTcWi.js → SearchConfig-DXFV6Mvx.js} +1 -1
package/dist/assets/{SecretsConfig-9kbR0ZCB.js → SecretsConfig-BGW9aUqv.js} +2 -2
package/dist/assets/{SessionsConfig-Bohn3P1q.js → SessionsConfig-BByfa1ke.js} +2 -2
package/dist/assets/{chat-message-AWIcksDK.js → chat-message-ZwnDwDuQ.js} +1 -1
package/dist/assets/index-BWvap_iq.js +8 -0
package/dist/assets/index-COrhpAdh.css +1 -0
package/dist/assets/{index-CPDASUXh.js → index-Ct7FQpxN.js} +1 -1
package/dist/assets/{label-DD61y-4v.js → label-Bklr3fXc.js} +1 -1
package/dist/assets/marketplace-localization-Dk31LJJJ.js +1 -0
package/dist/assets/{page-layout-CfnoVycc.js → page-layout-sNhcbwtm.js} +1 -1
package/dist/assets/{popover-DsugZ6rp.js → popover-C3rJrJJG.js} +1 -1
package/dist/assets/{security-config-DIrf2Z0O.js → security-config-BueosYw1.js} +1 -1
package/dist/assets/skeleton-CiG6msbm.js +1 -0
package/dist/assets/status-dot-CsIV5YrS.js +1 -0
package/dist/assets/{switch-NX5OmUXQ.js → switch-DSdHSIsC.js} +1 -1
package/dist/assets/{tabs-custom-9ihB5Jem.js → tabs-custom-BB-VjdL2.js} +1 -1
package/dist/assets/{useConfirmDialog-BuQnVTeR.js → useConfirmDialog-BL5s8KDC.js} +2 -2
package/dist/assets/{vendor-DKBNiC31.js → vendor-CwsIoNvJ.js} +128 -93
package/dist/index.html +3 -3
package/package.json +3 -3
package/src/App.tsx +4 -0
package/src/api/auth.types.ts +24 -0
package/src/api/chat-session-type.types.ts +21 -0
package/src/api/marketplace.ts +8 -2
package/src/api/mcp-marketplace.ts +138 -0
package/src/api/remote.ts +77 -0
package/src/api/remote.types.ts +104 -0
package/src/api/types.ts +28 -34
package/src/components/chat/ChatSidebar.test.tsx +31 -2
package/src/components/chat/ChatSidebar.tsx +26 -2
package/src/components/chat/chat-page-data.ts +36 -38
package/src/components/chat/chat-page-runtime.test.ts +96 -2
package/src/components/chat/chat-page-runtime.ts +1 -135
package/src/components/chat/chat-session-preference-governance.ts +303 -0
package/src/components/chat/legacy/LegacyChatPage.tsx +4 -19
package/src/components/chat/ncp/NcpChatPage.tsx +4 -19
package/src/components/chat/ncp/ncp-chat-page-data.test.ts +36 -0
package/src/components/chat/ncp/ncp-chat-page-data.ts +62 -21
package/src/components/chat/ncp/ncp-session-adapter.test.ts +2 -0
package/src/components/chat/ncp/ncp-session-adapter.ts +2 -0
package/src/components/chat/stores/chat-input.store.ts +14 -1
package/src/components/chat/useChatSessionTypeState.test.tsx +29 -0
package/src/components/chat/useChatSessionTypeState.ts +55 -12
package/src/components/layout/Sidebar.tsx +11 -1
package/src/components/marketplace/MarketplacePage.test.tsx +152 -0
package/src/components/marketplace/MarketplacePage.tsx +52 -199
package/src/components/marketplace/marketplace-installed-cache.test.ts +110 -0
package/src/components/marketplace/marketplace-installed-cache.ts +149 -0
package/src/components/marketplace/marketplace-localization.ts +77 -0
package/src/components/marketplace/marketplace-page-parts.tsx +102 -0
package/src/components/marketplace/mcp/McpMarketplacePage.test.tsx +208 -0
package/src/components/marketplace/mcp/McpMarketplacePage.tsx +578 -0
package/src/components/remote/RemoteAccessPage.tsx +396 -0
package/src/components/ui/input.tsx +1 -1
package/src/components/ui/label.tsx +1 -1
package/src/hooks/useMarketplace.ts +36 -7
package/src/hooks/useMcpMarketplace.ts +99 -0
package/src/hooks/useRemoteAccess.ts +120 -0
package/src/hooks/useWebSocket.ts +25 -16
package/src/lib/i18n.marketplace.ts +91 -0
package/src/lib/i18n.remote.ts +142 -0
package/src/lib/i18n.ts +10 -68
package/dist/assets/ChannelsList-DKD6Llid.js +0 -1
package/dist/assets/ChatPage-BK9X4Tin.js +0 -38
package/dist/assets/LogoBadge-CYQ_b7jk.js +0 -1
package/dist/assets/MarketplacePage-B_2z3ii_.js +0 -49
package/dist/assets/ProvidersList-CZstsyv7.js +0 -1
package/dist/assets/index-BEgClaDH.js +0 -8
package/dist/assets/index-C8GsgIUn.css +0 -1
package/dist/assets/skeleton-DJ-Wen2o.js +0 -1

package/dist/index.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw - 系统配置</title>
-  <script type="module" crossorigin src="/assets/index-BEgClaDH.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-DKBNiC31.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-C8GsgIUn.css">
+  <script type="module" crossorigin src="/assets/index-BWvap_iq.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-CwsIoNvJ.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-COrhpAdh.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -28,10 +28,10 @@
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
     "@nextclaw/agent-chat-ui": "0.2.1",
+    "@nextclaw/ncp-http-agent-client": "0.3.1",
     "@nextclaw/ncp": "0.3.1",
     "@nextclaw/ncp-react": "0.3.2",
-    "@nextclaw/agent-chat": "0.1.1",
-    "@nextclaw/ncp-http-agent-client": "0.3.1"
+    "@nextclaw/agent-chat": "0.1.1"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/App.tsx CHANGED Viewed

@@ -25,7 +25,9 @@ const RuntimeConfigPage = lazy(async () => ({ default: (await import('@/componen
 const SecurityConfigPage = lazy(async () => ({ default: (await import('@/components/config/security-config')).SecurityConfig }));
 const SessionsConfigPage = lazy(async () => ({ default: (await import('@/components/config/SessionsConfig')).SessionsConfig }));
 const SecretsConfigPage = lazy(async () => ({ default: (await import('@/components/config/SecretsConfig')).SecretsConfig }));
+const RemoteAccessPage = lazy(async () => ({ default: (await import('@/components/remote/RemoteAccessPage')).RemoteAccessPage }));
 const MarketplacePage = lazy(async () => ({ default: (await import('@/components/marketplace/MarketplacePage')).MarketplacePage }));
+const McpMarketplacePage = lazy(async () => ({ default: (await import('@/components/marketplace/mcp/McpMarketplacePage')).McpMarketplacePage }));
 function RouteFallback() {
   return <div className="h-full w-full animate-pulse rounded-2xl border border-border/40 bg-card/40" />;
@@ -52,12 +54,14 @@ function ProtectedApp() {
           <Route path="/providers" element={<LazyRoute><ProvidersListPage /></LazyRoute>} />
           <Route path="/channels" element={<LazyRoute><ChannelsListPage /></LazyRoute>} />
           <Route path="/runtime" element={<LazyRoute><RuntimeConfigPage /></LazyRoute>} />
+          <Route path="/remote" element={<LazyRoute><RemoteAccessPage /></LazyRoute>} />
           <Route path="/security" element={<LazyRoute><SecurityConfigPage /></LazyRoute>} />
           <Route path="/sessions" element={<LazyRoute><SessionsConfigPage /></LazyRoute>} />
           <Route path="/secrets" element={<LazyRoute><SecretsConfigPage /></LazyRoute>} />
           <Route path="/settings" element={<Navigate to="/model" replace />} />
           <Route path="/marketplace/skills" element={<Navigate to="/skills" replace />} />
           <Route path="/marketplace" element={<Navigate to="/marketplace/plugins" replace />} />
+          <Route path="/marketplace/mcp" element={<LazyRoute><McpMarketplacePage /></LazyRoute>} />
           <Route path="/marketplace/:type" element={<LazyRoute><MarketplacePage /></LazyRoute>} />
           <Route path="/" element={<Navigate to="/chat" replace />} />
           <Route path="*" element={<Navigate to="/chat" replace />} />

package/src/api/auth.types.ts ADDED Viewed

@@ -0,0 +1,24 @@
+export type AuthStatusView = {
+  enabled: boolean;
+  configured: boolean;
+  authenticated: boolean;
+  username?: string;
+};
+export type AuthSetupRequest = {
+  username: string;
+  password: string;
+};
+export type AuthLoginRequest = {
+  username: string;
+  password: string;
+};
+export type AuthPasswordUpdateRequest = {
+  password: string;
+};
+export type AuthEnabledUpdateRequest = {
+  enabled: boolean;
+};

package/src/api/chat-session-type.types.ts ADDED Viewed

@@ -0,0 +1,21 @@
+export type ChatSessionTypeCtaView = {
+  kind: string;
+  label?: string;
+  href?: string;
+};
+export type ChatSessionTypeOptionView = {
+  value: string;
+  label: string;
+  ready?: boolean;
+  reason?: string | null;
+  reasonMessage?: string | null;
+  supportedModels?: string[];
+  recommendedModel?: string | null;
+  cta?: ChatSessionTypeCtaView | null;
+};
+export type ChatSessionTypesView = {
+  defaultType: string;
+  options: ChatSessionTypeOptionView[];
+};

package/src/api/marketplace.ts CHANGED Viewed

@@ -23,8 +23,14 @@ export type MarketplaceListParams = {
   pageSize?: number;
 };
-function toMarketplaceTypeSegment(type: MarketplaceItemType): 'plugins' | 'skills' {
-  return type === 'plugin' ? 'plugins' : 'skills';
+function toMarketplaceTypeSegment(type: MarketplaceItemType): 'plugins' | 'skills' | 'mcp' {
+  if (type === 'plugin') {
+    return 'plugins';
+  }
+  if (type === 'skill') {
+    return 'skills';
+  }
+  return 'mcp';
 }
 export async function fetchMarketplaceItems(params: MarketplaceListParams): Promise<MarketplaceListView> {

package/src/api/mcp-marketplace.ts ADDED Viewed

@@ -0,0 +1,138 @@
+import { api } from './client';
+import type {
+  MarketplaceInstalledView,
+  MarketplaceItemView,
+  MarketplaceListView,
+  MarketplaceMcpContentView,
+  MarketplaceMcpDoctorResult,
+  MarketplaceRecommendationView,
+  MarketplaceSort
+} from './types';
+export type McpMarketplaceListParams = {
+  q?: string;
+  tag?: string;
+  sort?: MarketplaceSort;
+  page?: number;
+  pageSize?: number;
+};
+export async function fetchMcpMarketplaceItems(params: McpMarketplaceListParams): Promise<MarketplaceListView> {
+  const query = new URLSearchParams();
+  if (params.q?.trim()) {
+    query.set('q', params.q.trim());
+  }
+  if (params.tag?.trim()) {
+    query.set('tag', params.tag.trim());
+  }
+  if (params.sort) {
+    query.set('sort', params.sort);
+  }
+  if (typeof params.page === 'number' && Number.isFinite(params.page)) {
+    query.set('page', String(Math.max(1, Math.trunc(params.page))));
+  }
+  if (typeof params.pageSize === 'number' && Number.isFinite(params.pageSize)) {
+    query.set('pageSize', String(Math.max(1, Math.trunc(params.pageSize))));
+  }
+  const suffix = query.toString();
+  const response = await api.get<MarketplaceListView>(
+    suffix ? `/api/marketplace/mcp/items?${suffix}` : '/api/marketplace/mcp/items'
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function fetchMcpMarketplaceInstalled(): Promise<MarketplaceInstalledView> {
+  const response = await api.get<MarketplaceInstalledView>('/api/marketplace/mcp/installed');
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function fetchMcpMarketplaceItem(slug: string): Promise<MarketplaceItemView> {
+  const response = await api.get<MarketplaceItemView>(`/api/marketplace/mcp/items/${encodeURIComponent(slug)}`);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function fetchMcpMarketplaceContent(slug: string): Promise<MarketplaceMcpContentView> {
+  const response = await api.get<MarketplaceMcpContentView>(`/api/marketplace/mcp/items/${encodeURIComponent(slug)}/content`);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function fetchMcpMarketplaceRecommendations(params: {
+  scene?: string;
+  limit?: number;
+} = {}): Promise<MarketplaceRecommendationView> {
+  const query = new URLSearchParams();
+  if (params.scene?.trim()) {
+    query.set('scene', params.scene.trim());
+  }
+  if (typeof params.limit === 'number' && Number.isFinite(params.limit)) {
+    query.set('limit', String(Math.max(1, Math.trunc(params.limit))));
+  }
+  const suffix = query.toString();
+  const response = await api.get<MarketplaceRecommendationView>(
+    suffix ? `/api/marketplace/mcp/recommendations?${suffix}` : '/api/marketplace/mcp/recommendations'
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function installMcpMarketplaceItem(request: {
+  spec: string;
+  name?: string;
+  enabled?: boolean;
+  allAgents?: boolean;
+  agents?: string[];
+  inputs?: Record<string, string>;
+}): Promise<{ type: 'mcp'; spec: string; name?: string; message: string; output?: string }> {
+  const response = await api.post<{ type: 'mcp'; spec: string; name?: string; message: string; output?: string }>(
+    '/api/marketplace/mcp/install',
+    {
+    type: 'mcp',
+    ...request
+    }
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function manageMcpMarketplaceItem(request: {
+  action: 'enable' | 'disable' | 'remove';
+  id?: string;
+  spec?: string;
+}): Promise<{ type: 'mcp'; action: 'enable' | 'disable' | 'remove'; id: string; message: string; output?: string }> {
+  const response = await api.post<{ type: 'mcp'; action: 'enable' | 'disable' | 'remove'; id: string; message: string; output?: string }>(
+    '/api/marketplace/mcp/manage',
+    {
+    type: 'mcp',
+    ...request
+    }
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function doctorMcpMarketplaceItem(name: string): Promise<MarketplaceMcpDoctorResult> {
+  const response = await api.post<MarketplaceMcpDoctorResult>('/api/marketplace/mcp/doctor', { name });
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}

package/src/api/remote.ts ADDED Viewed

@@ -0,0 +1,77 @@
+import { api } from './client';
+import type {
+  RemoteAccessView,
+  RemoteBrowserAuthPollRequest,
+  RemoteBrowserAuthPollResult,
+  RemoteBrowserAuthStartRequest,
+  RemoteBrowserAuthStartResult,
+  RemoteDoctorView,
+  RemoteLoginRequest,
+  RemoteServiceAction,
+  RemoteServiceActionResult,
+  RemoteSettingsUpdateRequest
+} from './remote.types';
+export async function fetchRemoteStatus(): Promise<RemoteAccessView> {
+  const response = await api.get<RemoteAccessView>('/api/remote/status');
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function fetchRemoteDoctor(): Promise<RemoteDoctorView> {
+  const response = await api.get<RemoteDoctorView>('/api/remote/doctor');
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function loginRemote(data: RemoteLoginRequest): Promise<RemoteAccessView> {
+  const response = await api.post<RemoteAccessView>('/api/remote/login', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function startRemoteBrowserAuth(data: RemoteBrowserAuthStartRequest): Promise<RemoteBrowserAuthStartResult> {
+  const response = await api.post<RemoteBrowserAuthStartResult>('/api/remote/auth/start', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function pollRemoteBrowserAuth(data: RemoteBrowserAuthPollRequest): Promise<RemoteBrowserAuthPollResult> {
+  const response = await api.post<RemoteBrowserAuthPollResult>('/api/remote/auth/poll', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function logoutRemote(): Promise<RemoteAccessView> {
+  const response = await api.post<RemoteAccessView>('/api/remote/logout', {});
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function updateRemoteSettings(data: RemoteSettingsUpdateRequest): Promise<RemoteAccessView> {
+  const response = await api.put<RemoteAccessView>('/api/remote/settings', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function controlRemoteService(action: RemoteServiceAction): Promise<RemoteServiceActionResult> {
+  const response = await api.post<RemoteServiceActionResult>(`/api/remote/service/${action}`, {});
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}

package/src/api/remote.types.ts ADDED Viewed

@@ -0,0 +1,104 @@
+export type RemoteAccountView = {
+  loggedIn: boolean;
+  email?: string;
+  role?: string;
+  platformBase?: string | null;
+  apiBase?: string | null;
+};
+export type RemoteRuntimeView = {
+  enabled: boolean;
+  mode: "service" | "foreground";
+  state: "disabled" | "connecting" | "connected" | "disconnected" | "error";
+  deviceId?: string;
+  deviceName?: string;
+  platformBase?: string;
+  localOrigin?: string;
+  lastConnectedAt?: string | null;
+  lastError?: string | null;
+  updatedAt: string;
+};
+export type RemoteServiceView = {
+  running: boolean;
+  pid?: number;
+  uiUrl?: string;
+  uiPort?: number;
+  currentProcess: boolean;
+};
+export type RemoteSettingsView = {
+  enabled: boolean;
+  deviceName: string;
+  platformApiBase: string;
+};
+export type RemoteAccessView = {
+  account: RemoteAccountView;
+  settings: RemoteSettingsView;
+  service: RemoteServiceView;
+  localOrigin: string;
+  configuredEnabled: boolean;
+  platformBase?: string | null;
+  runtime: RemoteRuntimeView | null;
+};
+export type RemoteDoctorCheckView = {
+  name: string;
+  ok: boolean;
+  detail: string;
+};
+export type RemoteDoctorView = {
+  generatedAt: string;
+  checks: RemoteDoctorCheckView[];
+  snapshot: {
+    configuredEnabled: boolean;
+    runtime: RemoteRuntimeView | null;
+  };
+};
+export type RemoteLoginRequest = {
+  email: string;
+  password: string;
+  apiBase?: string;
+  register?: boolean;
+};
+export type RemoteBrowserAuthStartRequest = {
+  apiBase?: string;
+};
+export type RemoteBrowserAuthStartResult = {
+  sessionId: string;
+  verificationUri: string;
+  expiresAt: string;
+  intervalMs: number;
+};
+export type RemoteBrowserAuthPollRequest = {
+  sessionId: string;
+  apiBase?: string;
+};
+export type RemoteBrowserAuthPollResult = {
+  status: "pending" | "authorized" | "expired";
+  message?: string;
+  nextPollMs?: number;
+  email?: string;
+  role?: string;
+};
+export type RemoteSettingsUpdateRequest = {
+  enabled?: boolean;
+  deviceName?: string;
+  platformApiBase?: string;
+};
+export type RemoteServiceAction = "start" | "restart" | "stop";
+export type RemoteServiceActionResult = {
+  accepted: boolean;
+  action: RemoteServiceAction;
+  message: string;
+};

package/src/api/types.ts CHANGED Viewed

@@ -160,30 +160,27 @@ export type ProviderAuthImportResult = {
   expiresAt?: string;
 };
-export type AuthStatusView = {
-  enabled: boolean;
-  configured: boolean;
-  authenticated: boolean;
-  username?: string;
-};
-export type AuthSetupRequest = {
-  username: string;
-  password: string;
-};
-export type AuthLoginRequest = {
-  username: string;
-  password: string;
-};
-export type AuthPasswordUpdateRequest = {
-  password: string;
-};
-export type AuthEnabledUpdateRequest = {
-  enabled: boolean;
-};
+export type {
+  AuthEnabledUpdateRequest,
+  AuthLoginRequest,
+  AuthPasswordUpdateRequest,
+  AuthSetupRequest,
+  AuthStatusView
+} from './auth.types';
+export type {
+  RemoteAccessView,
+  RemoteAccountView,
+  RemoteDoctorCheckView,
+  RemoteDoctorView,
+  RemoteLoginRequest,
+  RemoteRuntimeView,
+  RemoteServiceAction,
+  RemoteServiceActionResult,
+  RemoteServiceView,
+  RemoteSettingsUpdateRequest,
+  RemoteSettingsView
+} from './remote.types';
 export type AgentProfileView = {
   id: string;
@@ -223,6 +220,7 @@ export type SessionEntryView = {
   updatedAt: string;
   label?: string;
   preferredModel?: string;
+  preferredThinking?: ThinkingLevel | null;
   sessionType: string;
   sessionTypeMutable: boolean;
   messageCount: number;
@@ -316,6 +314,12 @@ export type ChatTurnStreamReadyEvent = {
   stopReason?: string;
 };
+export type {
+  ChatSessionTypeCtaView,
+  ChatSessionTypeOptionView,
+  ChatSessionTypesView,
+} from './chat-session-type.types';
 export type ChatTurnStreamDeltaEvent = {
   delta: string;
 };
@@ -334,16 +338,6 @@ export type ChatCapabilitiesView = {
   stopReason?: string;
 };
-export type ChatSessionTypeOptionView = {
-  value: string;
-  label: string;
-};
-export type ChatSessionTypesView = {
-  defaultType: string;
-  options: ChatSessionTypeOptionView[];
-};
 export type ChatCommandOptionView = {
   name: string;
   description: string;

package/src/components/chat/ChatSidebar.test.tsx CHANGED Viewed

@@ -68,8 +68,8 @@ describe('ChatSidebar', () => {
         ...useChatInputStore.getState().snapshot,
         defaultSessionType: 'native',
         sessionTypeOptions: [
-          { value: 'native', label: 'Native' },
-          { value: 'codex', label: 'Codex' }
+          { value: 'native', label: 'Native', ready: true },
+          { value: 'codex', label: 'Codex', ready: true }
         ]
       }
     });
@@ -105,6 +105,35 @@ describe('ChatSidebar', () => {
     });
   });
+  it('shows setup required status for runtime session types that are not ready yet', () => {
+    useChatInputStore.setState({
+      snapshot: {
+        ...useChatInputStore.getState().snapshot,
+        sessionTypeOptions: [
+          { value: 'native', label: 'Native', ready: true },
+          {
+            value: 'claude',
+            label: 'Claude',
+            ready: false,
+            reasonMessage: 'Configure a provider API key first.'
+          }
+        ]
+      }
+    });
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+    fireEvent.click(screen.getByLabelText('Session Type'));
+    expect(screen.getByText('Claude')).not.toBeNull();
+    expect(screen.getByText('Setup')).not.toBeNull();
+    expect(screen.getByText('Configure a provider API key first.')).not.toBeNull();
+  });
   it('shows a session type badge for non-native sessions in the list', () => {
     useChatSessionListStore.setState({
       snapshot: {

package/src/components/chat/ChatSidebar.tsx CHANGED Viewed

@@ -85,6 +85,16 @@ function resolveSessionTypeLabel(
     .join(' ');
 }
+function resolveSessionTypeStatusText(option: {
+  ready?: boolean;
+  reasonMessage?: string | null;
+}): string {
+  if (option.ready === false) {
+    return option.reasonMessage?.trim() || t('statusSetup');
+  }
+  return t('statusReady');
+}
 const navItems = [
   { target: '/cron', label: () => t('chatSidebarScheduledTasks'), icon: AlarmClock },
   { target: '/skills', label: () => t('chatSidebarSkills'), icon: BrainCircuit },
@@ -168,8 +178,22 @@ export function ChatSidebar() {
                       }}
                       className="w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-gray-100"
                     >
-                      <div className="text-[13px] font-medium text-gray-900">{option.label}</div>
-                      <div className="mt-0.5 text-[11px] text-gray-500">{t('chatSidebarNewTask')}</div>
+                      <div className="flex items-center justify-between gap-3">
+                        <div className="text-[13px] font-medium text-gray-900">{option.label}</div>
+                        <span
+                          className={cn(
+                            'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold',
+                            option.ready === false
+                              ? 'bg-amber-100 text-amber-800'
+                              : 'bg-emerald-100 text-emerald-700'
+                          )}
+                        >
+                          {option.ready === false ? t('statusSetup') : t('statusReady')}
+                        </span>
+                      </div>
+                      <div className="mt-0.5 text-[11px] text-gray-500">
+                        {resolveSessionTypeStatusText(option)}
+                      </div>
                     </button>
                   ))}
                 </div>