@nextclaw/ui 0.12.9 → 0.12.11

package/src/features/system-status/utils/system-status.utils.test.ts

@@ -0,0 +1,132 @@
+import { describe, expect, it } from 'vitest';
+import { t } from '@/lib/i18n';
+import {
+  resolveChatRuntimeMessage,
+  resolveSystemConnectionStatus,
+  toSystemStatusView,
+} from './system-status.utils';
+
+describe('resolveSystemConnectionStatus', () => {
+  it('maps cold-starting to connecting', () => {
+    expect(resolveSystemConnectionStatus('cold-starting')).toBe('connecting');
+  });
+
+  it('maps ready to connected', () => {
+    expect(resolveSystemConnectionStatus('ready')).toBe('connected');
+  });
+
+  it('maps stalled to disconnected', () => {
+    expect(resolveSystemConnectionStatus('stalled')).toBe('disconnected');
+  });
+
+  it('maps service-transitioning to connecting', () => {
+    expect(resolveSystemConnectionStatus('service-transitioning')).toBe(
+      'connecting'
+    );
+  });
+});
+
+describe('resolveChatRuntimeMessage', () => {
+  it('uses the startup message during cold start', () => {
+    expect(
+      resolveChatRuntimeMessage({
+        lifecyclePhase: 'cold-starting',
+        hasReachedReady: false,
+        lastReadyAt: null,
+        recoveryStartedAt: null,
+        bootstrapStatus: null,
+        lastError: null,
+        lastTransportError: null,
+        runtimeControlView: null,
+        runtimeControlError: null,
+        activeSystemAction: null,
+        lastSystemActionError: null,
+      })
+    ).toBe(t('chatRuntimeInitializing'));
+  });
+
+  it('uses the bootstrap error when startup failed', () => {
+    expect(
+      resolveChatRuntimeMessage({
+        lifecyclePhase: 'startup-failed',
+        hasReachedReady: false,
+        lastReadyAt: null,
+        recoveryStartedAt: null,
+        bootstrapStatus: {
+          phase: 'error',
+          ncpAgent: {
+            state: 'error',
+            error: 'boom',
+          },
+          pluginHydration: {
+            state: 'pending',
+            loadedPluginCount: 0,
+            totalPluginCount: 0,
+          },
+          channels: {
+            state: 'pending',
+            enabled: [],
+          },
+          remote: {
+            state: 'pending',
+          },
+          lastError: 'boom',
+        },
+        lastError: null,
+        lastTransportError: null,
+        runtimeControlView: null,
+        runtimeControlError: null,
+        activeSystemAction: null,
+        lastSystemActionError: null,
+      })
+    ).toBe('boom');
+  });
+
+  it('prefers the centralized action message while a system action is running', () => {
+    expect(
+      resolveChatRuntimeMessage({
+        lifecyclePhase: 'ready',
+        hasReachedReady: true,
+        lastReadyAt: Date.now(),
+        recoveryStartedAt: null,
+        bootstrapStatus: null,
+        lastError: null,
+        lastTransportError: null,
+        runtimeControlView: null,
+        runtimeControlError: null,
+        activeSystemAction: {
+          action: 'restart-service',
+          lifecycle: 'recovering',
+          serviceState: null,
+          message: 'NextClaw 正在恢复连接',
+        },
+        lastSystemActionError: null,
+      })
+    ).toBe('NextClaw 正在恢复连接');
+  });
+});
+
+describe('toSystemStatusView', () => {
+  it('keeps stalled chat blocked without surfacing a timeout banner', () => {
+    expect(
+      toSystemStatusView({
+        lifecyclePhase: 'stalled',
+        hasReachedReady: true,
+        lastReadyAt: Date.now(),
+        recoveryStartedAt: Date.now(),
+        bootstrapStatus: null,
+        lastError: 'Failed to fetch',
+        lastTransportError: 'Failed to fetch',
+        runtimeControlView: null,
+        runtimeControlError: null,
+        activeSystemAction: null,
+        lastSystemActionError: null,
+      })
+    ).toMatchObject({
+      isChatBlocked: true,
+      chatMessage: null,
+      connectionStatus: 'disconnected',
+      phase: 'stalled',
+    });
+  });
+});

package/src/features/system-status/utils/system-status.utils.ts

@@ -0,0 +1,202 @@
+import { t } from '@/lib/i18n';
+import type {
+  RuntimeControlAction,
+  RuntimeLifecycleState,
+  RuntimeServiceState,
+} from '@/api/runtime-control.types';
+import type {
+  RuntimeControlPanelView,
+  RuntimeStatusBadgeView,
+  SystemConnectionStatus,
+  SystemStatusPhase,
+  SystemStatusState,
+  SystemStatusView,
+} from '@/features/system-status/types/system-status.types';
+
+function resolveSystemStatusPhase(state: SystemStatusState): SystemStatusPhase {
+  return state.activeSystemAction ? 'service-transitioning' : state.lifecyclePhase;
+}
+
+export function resolveSystemConnectionStatus(
+  phase: SystemStatusPhase
+): SystemConnectionStatus {
+  if (phase === 'ready') {
+    return 'connected';
+  }
+  if (phase === 'startup-failed' || phase === 'stalled') {
+    return 'disconnected';
+  }
+  return 'connecting';
+}
+
+export function resolveChatRuntimeMessage(
+  state: SystemStatusState
+): string | null {
+  if (state.activeSystemAction?.message?.trim()) {
+    return state.activeSystemAction.message.trim();
+  }
+  if (state.lifecyclePhase === 'cold-starting') {
+    return t('chatRuntimeInitializing');
+  }
+  if (state.lifecyclePhase === 'startup-failed') {
+    return (
+      state.bootstrapStatus?.ncpAgent.error?.trim() ||
+      state.bootstrapStatus?.lastError?.trim() ||
+      state.lastError?.trim() ||
+      t('chatRuntimeInitializationFailed')
+    );
+  }
+  return null;
+}
+
+export function toSystemStatusView(
+  state: SystemStatusState
+): SystemStatusView {
+  const phase = resolveSystemStatusPhase(state);
+  return {
+    ...state,
+    phase,
+    connectionStatus: resolveSystemConnectionStatus(phase),
+    isChatBlocked: phase !== 'ready',
+    chatMessage: resolveChatRuntimeMessage(state),
+  };
+}
+
+function resolveActionLifecycleLabel(
+  action: RuntimeControlAction
+): RuntimeLifecycleState {
+  if (action === 'start-service') {
+    return 'starting-service';
+  }
+  if (action === 'stop-service') {
+    return 'stopping-service';
+  }
+  if (action === 'restart-service') {
+    return 'restarting-service';
+  }
+  return 'restarting-app';
+}
+
+function resolveActionServiceState(
+  action: RuntimeControlAction
+): RuntimeServiceState | null {
+  if (action === 'start-service') {
+    return 'starting';
+  }
+  if (action === 'stop-service') {
+    return 'stopping';
+  }
+  if (action === 'restart-service') {
+    return 'restarting';
+  }
+  return null;
+}
+
+export function buildActiveSystemActionState(params: {
+  action: RuntimeControlAction;
+  message: string | null;
+}): SystemStatusState['activeSystemAction'] {
+  const { action, message } = params;
+  return {
+    action,
+    lifecycle: resolveActionLifecycleLabel(action),
+    serviceState: resolveActionServiceState(action),
+    message,
+  };
+}
+
+export function toRuntimeStatusBadgeView(
+  state: SystemStatusState
+): RuntimeStatusBadgeView {
+  if (state.runtimeControlError) {
+    return {
+      tone: 'inactive',
+      title: t('runtimeControlLoadFailed'),
+      description: state.runtimeControlError,
+      reasonLines: [],
+      actionLabel: null,
+      isBusy: false,
+    };
+  }
+
+  if (!state.runtimeControlView) {
+    return {
+      tone: 'inactive',
+      title: t('runtimeStatusLoadingTitle'),
+      description: t('runtimeStatusLoadingDescription'),
+      reasonLines: [],
+      actionLabel: null,
+      isBusy: Boolean(state.activeSystemAction),
+    };
+  }
+
+  if (state.activeSystemAction) {
+    return {
+      tone: 'attention',
+      title: t('runtimeControlTitle'),
+      description:
+        state.activeSystemAction.message ||
+        state.runtimeControlView.message ||
+        t('runtimeControlDescription'),
+      reasonLines: [],
+      actionLabel: null,
+      isBusy: true,
+    };
+  }
+
+  const view = state.runtimeControlView;
+  if (view.pendingRestart) {
+    return {
+      tone: 'attention',
+      title: t('runtimeStatusPendingRestartTitle'),
+      description: t('runtimeStatusPendingRestartDescription'),
+      reasonLines:
+        view.pendingRestart.changedPaths.length > 0
+          ? view.pendingRestart.changedPaths.map((path: string) =>
+              t('runtimeStatusPendingRestartReasonItem').replace('{path}', path)
+            )
+          : [view.pendingRestart.message],
+      actionLabel: view.canRestartService.available
+        ? t('runtimeStatusRestartAction')
+        : null,
+      isBusy: false,
+    };
+  }
+
+  return {
+    tone: view.lifecycle === 'healthy' ? 'healthy' : 'inactive',
+    title: t('runtimeStatusHealthyTitle'),
+    description: t('runtimeStatusHealthyDescription'),
+    reasonLines: [],
+    actionLabel: null,
+    isBusy: false,
+  };
+}
+
+export function toRuntimeControlPanelView(
+  state: SystemStatusState
+): RuntimeControlPanelView {
+  const action = state.activeSystemAction;
+  const controlView = state.runtimeControlView;
+  const visibleLifecycle =
+    action?.lifecycle ?? controlView?.lifecycle ?? 'healthy';
+  const visibleServiceState =
+    action?.serviceState ?? controlView?.serviceState ?? 'unknown';
+  const visibleMessage =
+    action?.message ||
+    state.lastSystemActionError ||
+    controlView?.message ||
+    t('runtimeControlDescription');
+
+  return {
+    controlView,
+    visibleLifecycle,
+    visibleServiceState,
+    visibleMessage,
+    busyAction: action?.action ?? null,
+    busy: Boolean(action),
+    pendingRestart: controlView?.pendingRestart ?? null,
+    errorMessage:
+      state.lastSystemActionError || state.runtimeControlError || null,
+  };
+}

package/src/hooks/use-realtime-query-bridge.ts

@@ -1,12 +1,9 @@
 import { useEffect, useRef } from 'react';
 import { applyNcpSessionRealtimeEvent } from '@/api/ncp-session-query-cache';
+import { systemStatusManager } from '@/features/system-status';
 import { appClient } from '@/transport';
-import { useUiStore } from '@/stores/ui.store';
 import type { QueryClient } from '@tanstack/react-query';
 
-type ConnectionStatus = 'connected' | 'disconnected' | 'connecting';
-type SetConnectionStatus = (status: ConnectionStatus) => void;
-
 function shouldInvalidateConfigQuery(configPath: string) {
   const normalized = configPath.trim().toLowerCase();
   if (!normalized) {
@@ -39,22 +36,34 @@ function handleConfigUpdatedEvent(queryClient: QueryClient | undefined, path: st
 }
 
 function handleRealtimeEvent(
-  queryClient: QueryClient | undefined,
-  setConnectionStatus: SetConnectionStatus,
-  shouldResyncSessionsRef: { current: boolean },
-  event: Parameters<Parameters<typeof appClient.subscribe>[0]>[0]
+  params: {
+    queryClient: QueryClient | undefined;
+    shouldResyncSessions: boolean;
+    clearShouldResyncSessions: () => void;
+    markShouldResyncSessions: () => void;
+    event: Parameters<Parameters<typeof appClient.subscribe>[0]>[0];
+  }
 ): void {
+  const {
+    queryClient,
+    shouldResyncSessions,
+    clearShouldResyncSessions,
+    markShouldResyncSessions,
+    event,
+  } = params;
   if (event.type === 'connection.open') {
-    setConnectionStatus('connected');
-    if (shouldResyncSessionsRef.current) {
-      shouldResyncSessionsRef.current = false;
+    systemStatusManager.handleConnectionRestored();
+    if (shouldResyncSessions) {
+      clearShouldResyncSessions();
       queryClient?.invalidateQueries({ queryKey: ['ncp-sessions'] });
     }
     return;
   }
   if (event.type === 'connection.close' || event.type === 'connection.error') {
-    setConnectionStatus('disconnected');
-    shouldResyncSessionsRef.current = true;
+    systemStatusManager.handleConnectionInterrupted(
+      event.type === 'connection.error' ? event.payload?.message : null
+    );
+    markShouldResyncSessions();
     return;
   }
   if (event.type === 'config.updated') {
@@ -76,14 +85,21 @@ function handleRealtimeEvent(
 }
 
 export function useRealtimeQueryBridge(queryClient?: QueryClient) {
-  const { setConnectionStatus } = useUiStore();
   const shouldResyncSessionsRef = useRef(false);
 
   useEffect(() => {
-    setConnectionStatus('connecting');
-
     return appClient.subscribe((event) =>
-      handleRealtimeEvent(queryClient, setConnectionStatus, shouldResyncSessionsRef, event)
+      handleRealtimeEvent({
+        queryClient,
+        shouldResyncSessions: shouldResyncSessionsRef.current,
+        clearShouldResyncSessions: () => {
+          shouldResyncSessionsRef.current = false;
+        },
+        markShouldResyncSessions: () => {
+          shouldResyncSessionsRef.current = true;
+        },
+        event,
+      })
     );
-  }, [queryClient, setConnectionStatus]);
+  }, [queryClient]);
 }

package/src/hooks/useConfig.ts

@@ -185,7 +185,8 @@ export function useUpdateChannel() {
       updateChannel(channel, data as Parameters<typeof updateChannel>[1]),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['config'] });
-      toast.success(t('configSavedApplied'));
+      queryClient.invalidateQueries({ queryKey: ['config-meta'] });
+      toast.success(t('configSavedApplying'));
     },
     onError: (error: Error) => {
       toast.error(t('configSaveFailed') + ': ' + error.message);

package/src/index.css

@@ -59,6 +59,30 @@
     background: hsl(var(--gray-400));
   }
 
+  .workspace-horizontal-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--gray-300) / 0.38) transparent;
+    scrollbar-gutter: stable;
+  }
+
+  .workspace-horizontal-scrollbar::-webkit-scrollbar {
+    width: 3px;
+    height: 2px;
+  }
+
+  .workspace-horizontal-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .workspace-horizontal-scrollbar::-webkit-scrollbar-thumb {
+    background: hsl(var(--gray-300) / 0.38);
+    border-radius: 999px;
+  }
+
+  .workspace-horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--gray-400) / 0.48);
+  }
+
   /* ========================================
      GLASSMORPHISM
      ======================================== */

package/src/lib/app-resource-uri.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { resolveAppResourceUri } from "@/lib/app-resource-uri";
+
+describe("resolveAppResourceUri", () => {
+  it("maps app resource uris to public app paths", () => {
+    expect(resolveAppResourceUri("app://runtime-icons/codex-openai.svg")).toBe(
+      "/runtime-icons/codex-openai.svg",
+    );
+  });
+
+  it("passes through ordinary image src values for compatibility", () => {
+    expect(resolveAppResourceUri("https://example.com/icon.png")).toBe(
+      "https://example.com/icon.png",
+    );
+  });
+
+  it("rejects app resource uris that escape the app resource directory", () => {
+    expect(resolveAppResourceUri("app://../icon.png")).toBeNull();
+  });
+});

package/src/lib/app-resource-uri.ts

@@ -0,0 +1,29 @@
+const APP_RESOURCE_URI_PREFIX = "app://";
+
+function normalizeAppResourcePath(value: string): string | null {
+  const normalized = value.trim().replace(/^\/+/, "");
+  if (!normalized) {
+    return null;
+  }
+  const segments = normalized.split("/");
+  if (
+    segments.some((segment) => segment.trim().length === 0 || segment === "." || segment === "..")
+  ) {
+    return null;
+  }
+  return segments.join("/");
+}
+
+export function resolveAppResourceUri(uri: string): string | null {
+  const normalized = uri.trim();
+  if (!normalized) {
+    return null;
+  }
+  if (!normalized.startsWith(APP_RESOURCE_URI_PREFIX)) {
+    return normalized;
+  }
+  const appResourcePath = normalizeAppResourcePath(
+    normalized.slice(APP_RESOURCE_URI_PREFIX.length),
+  );
+  return appResourcePath ? `/${appResourcePath}` : null;
+}

package/src/lib/i18n.chat.ts

@@ -59,6 +59,14 @@ export const CHAT_LABELS: Record<string, { zh: string; en: string }> = {
   chatWorkspacePreviewTruncated: { zh: '内容已截断', en: 'Preview truncated' },
   chatSessionUnread: { zh: '会话有未读更新', en: 'Session has unread updates' },
   chatTyping: { zh: 'Agent 正在思考...', en: 'Agent is thinking...' },
+  chatRuntimeInitializing: {
+    zh: '聊天能力正在初始化。你可以先输入内容，完成后即可发送。',
+    en: 'Chat is still initializing. You can keep typing and send once startup finishes.'
+  },
+  chatRuntimeInitializationFailed: {
+    zh: '聊天能力启动失败，请稍后重试或检查服务日志。',
+    en: 'Chat startup failed. Please retry in a moment or inspect the service logs.'
+  },
   chatInputPlaceholder: { zh: '输入消息，输入 / 选择技能，Enter 发送，Shift + Enter 换行', en: 'Type a message, type / to select skills, Enter to send, Shift + Enter for newline' },
   chatInputHint: { zh: '支持多轮上下文，默认走当前会话。', en: 'Multi-turn context is preserved in the current session.' },
   chatSlashSectionCommands: { zh: '命令', en: 'Commands' },

package/src/lib/i18n.remote.ts

@@ -5,7 +5,7 @@ export const REMOTE_LABELS: Record<string, { zh: string; en: string }> = {
     en: 'Make this device appear in your NextClaw Platform device list and open it from the web.'
   },
   remoteOpenWeb: { zh: '前往 NextClaw Web', en: 'Open NextClaw Web' },
-  remoteOpenDeviceList: { zh: '查看我的设备', en: 'View My Devices' },
+  remoteOpenDeviceList: { zh: '前往 NextClaw Web', en: 'Open NextClaw Web' },
   remoteOpenWebHint: {
     zh: '开启后，这台设备会出现在 NextClaw Web 中，你可以在那里点击打开并继续使用。',
     en: 'Once enabled, this device appears in NextClaw Web, where you can open it and keep working.'

package/src/lib/i18n.runtime-control.ts

@@ -75,6 +75,37 @@ export const RUNTIME_CONTROL_LABELS: Record<string, { zh: string; en: string }>
   runtimeControlRestartService: { zh: '重启服务', en: 'Restart Service' },
   runtimeControlStopService: { zh: '停止服务', en: 'Stop Service' },
   runtimeControlRestartApp: { zh: '重启应用', en: 'Restart App' },
+  runtimeControlPendingRestartTitle: { zh: '待重启', en: 'Pending Restart' },
+  runtimeControlPendingRestartDescription: {
+    zh: '这次改动已经保存，但系统不会自动重启。请在你方便的时候手动重启，重启完成后该提示会自动清空。',
+    en: 'These changes are saved, but the system will not restart automatically. Restart manually when you are ready, and this notice clears after the restart finishes.'
+  },
+  runtimeControlPendingRestartPaths: { zh: '待生效项', en: 'Changes Waiting For Restart' },
+  runtimeStatusLoadingTitle: { zh: '读取状态中', en: 'Loading status' },
+  runtimeStatusLoadingDescription: {
+    zh: '正在读取当前系统状态。',
+    en: 'Loading the current system status.'
+  },
+  runtimeStatusHealthyTitle: { zh: '系统正常', en: 'System healthy' },
+  runtimeStatusHealthyDescription: {
+    zh: '当前没有需要你立即处理的系统动作。',
+    en: 'There is no system action that needs your attention right now.'
+  },
+  runtimeStatusPendingRestartTitle: { zh: '待重启', en: 'Restart required' },
+  runtimeStatusPendingRestartDescription: {
+    zh: '这些改动已经保存，但不会自动重启。你可以在这里查看原因，并在方便的时候手动重启。',
+    en: 'These changes are saved, but the system will not restart automatically. Review the reason here and restart when you are ready.'
+  },
+  runtimeStatusPendingRestartReasonItem: {
+    zh: '{path} 改动将在重启后生效。',
+    en: 'Changes in {path} will apply after restart.'
+  },
+  runtimeStatusActionHint: {
+    zh: '准备好时再执行',
+    en: 'Run when you are ready'
+  },
+  runtimeStatusRestartAction: { zh: '立即重启', en: 'Restart now' },
+  runtimeStatusRestartingAction: { zh: '重启中...', en: 'Restarting...' },
   runtimeControlStartingServiceHelp: {
     zh: '正在启动 NextClaw 服务，页面可能会在服务恢复后重新连接。',
     en: 'Starting the NextClaw service. The page may reconnect after the service becomes available.'

package/src/lib/i18n.ts

@@ -497,22 +497,19 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
 
   // Remote & Status
   ...REMOTE_LABELS,
-
-  // Action labels
   actionConfigure: { zh: '配置', en: 'Configure' },
   actionAddProvider: { zh: '添加提供商', en: 'Add Provider' },
   actionEnable: { zh: '启用', en: 'Enable' },
-
-  // Messages
   configSaved: { zh: '配置已保存', en: 'Configuration saved' },
+  configSavedApplying: { zh: '配置已保存，正在应用', en: 'Configuration saved, applying changes' },
   configSavedApplied: { zh: '配置已保存并已应用', en: 'Configuration saved and applied' },
   configSaveFailed: { zh: '保存配置失败', en: 'Failed to save configuration' },
   configReloaded: { zh: '配置已重载', en: 'Configuration reloaded' },
   configReloadFailed: { zh: '重载配置失败', en: 'Failed to reload configuration' },
-  feishuVerifySuccess: {
-    zh: '验证成功，请到飞书开放平台完成事件订阅与发布后再开始使用。',
-    en: 'Verified. Please finish Feishu event subscription and app publishing before using.'
-  },
+  channelConfigApplying: { zh: '渠道配置正在应用', en: 'Channel configuration is applying' },
+  channelConfigApplied: { zh: '渠道配置已应用', en: 'Channel configuration applied' },
+  channelConfigApplyFailed: { zh: '渠道配置应用失败', en: 'Failed to apply channel configuration' },
+  feishuVerifySuccess: { zh: '验证成功，请到飞书开放平台完成事件订阅与发布后再开始使用。', en: 'Verified. Please finish Feishu event subscription and app publishing before using.' },
   feishuVerifyFailed: { zh: '验证失败', en: 'Verification failed' },
   enterTag: { zh: '输入后按回车...', en: 'Type and press Enter...' },
   headerName: { zh: 'Header 名称', en: 'Header Name' },

package/src/lib/session-context.utils.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it, vi } from "vitest";
+import { resolveSessionContextView } from "@/lib/session-context.utils";
+
+vi.mock("@/lib/logos", () => ({
+  getChannelLogo: vi.fn(() => null),
+}));
+
+vi.mock("@/lib/i18n", () => ({
+  t: (key: string) => key,
+}));
+
+describe("resolveSessionContextView", () => {
+  it("prefers a declared runtime icon before falling back to a text label", () => {
+    const view = resolveSessionContextView(
+      {
+        key: "session-1",
+        createdAt: "2026-04-18T00:00:00.000Z",
+        updatedAt: "2026-04-18T00:00:00.000Z",
+        sessionType: "hermes",
+        sessionTypeMutable: true,
+        messageCount: 1,
+      },
+      [
+        {
+          value: "hermes",
+          label: "Hermes",
+          icon: {
+            kind: "image",
+            src: "app://runtime-icons/hermes-agent.png",
+            alt: "Hermes",
+          },
+        },
+      ],
+    );
+
+    expect(view).toEqual({
+      icon: {
+        kind: "runtime-image",
+        src: "app://runtime-icons/hermes-agent.png",
+        alt: "Hermes",
+        name: "Hermes",
+      },
+      label: null,
+    });
+  });
+
+  it("falls back to the resolved runtime label when no runtime icon is available", () => {
+    const view = resolveSessionContextView(
+      {
+        key: "session-2",
+        createdAt: "2026-04-18T00:00:00.000Z",
+        updatedAt: "2026-04-18T00:00:00.000Z",
+        sessionType: "custom-runtime",
+        sessionTypeMutable: true,
+        messageCount: 2,
+      },
+      [
+        {
+          value: "custom-runtime",
+          label: "Custom Runtime",
+          icon: null,
+        },
+      ],
+    );
+
+    expect(view).toEqual({
+      icon: null,
+      label: "Custom Runtime",
+    });
+  });
+});