@ran-sh/dsh-crew 1.1.1 → 1.2.0-rc.4

package/src/client/index.tsx

@@ -2,7 +2,7 @@
 // global worker configuration, and the live jobs table.
 // Talks only to the plugin's own loopback routes.
 
-import { useCallback, useEffect, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import {
   openSections,
@@ -12,13 +12,16 @@ import {
 } from './collapsible-sections.mjs';
 import { ActivationSummary } from './activation-summary';
 import { projectHostReadiness, READINESS_STATES } from './host-readiness.mjs';
+import { modelCallabilityState } from './model-callability-view.mjs';
+import { acceptReadinessResponse, readinessExpiryDelay } from './readiness-envelope.mjs';
 import { CREW_UI_SURFACES, classifyCrewSurface, surfaceResponsibilities } from './surface-detection.mjs';
 import { aggregateModelInvocations } from './task-telemetry.mjs';
+import { PanelHeader, PanelStyles } from './panel-chrome';
+import { HistoryPanel } from './history-panel';
 
 export const inject = ['slots', 'locale'];
 
 const API = '/_dsh/dsh-crew';
-const CREW_HARNESS_URL = 'http://127.0.0.1:3210/';
 const CREW_CONTROL_PLANE_URL = 'http://127.0.0.1:3080/';
 
 type AdaptiveConfig = { enabled: boolean; window_size: number; min_samples: number };
@@ -43,9 +46,11 @@ const COPY = {
   zh: {
     label: 'DSH Crew',
     title: 'DSH Crew',
-    intro: '日常 Crew 控制台：在一个入口里配置编排、角色、模型路由与宿主集成，并跟踪真实 Worker / Reviewer 任务。',
+    openOfficial: '打开 3080 官方界面 →',
+    intro: '管理工作流、模型路由与宿主集成。展开分区查看和修改设置。',
+    surfaceLabel: '3210 / 高级配置',
     integrations: '集成',
-    installed: '已安装', notInstalled: '未安装', ready: '可调用', notReady: '未就绪', hud: 'HUD 段',
+    installed: '已安装', notInstalled: '未安装', ready: '集成就绪', integrationReady: '集成就绪', modelCallable: '模型可调用', modelNotCallable: '模型未验证', modelUnknown: '模型未知', notReady: '未就绪', hud: 'HUD 段',
     install: '安装', update: '更新', restore: '还原',
     confirmRestore: (name: string) => `确定从 ${name} 移除 dsh-crew 集成？（settings 会先备份）`,
     globalConfig: '全局配置',
@@ -53,11 +58,10 @@ const COPY = {
     modelCount: (count: number) => `${count} 个模型`, providerCount: (count: number) => `${count} 个 Provider`,
     jobCount: (count: number) => `${count} 个任务`, runningCount: (count: number) => `${count} 个运行中`,
     sectionNames: { integrations: 'Codex / Claude / ZCode 集成状态', workflow: 'Crew 工作流设置', flash: 'Worker / Flash', pro: 'Reviewer / Pro', dispatch: '模型优先级与派发', adaptive: '自适应路由', runtime: '运行 / 生效边界', multimodal: '视觉与生图', harnessProviders: 'Harness Providers', providers: '多模态适配器', jobs: '任务状态' },
-    openHarness: '打开 3210 Crew Harness →',
-    harnessHint: '底层 Provider、Harness Models 与运行时配置',
+    harnessHint: 'DeepSeek 官方 Harness 的 dsh-crew profile：Provider、Harness Models 与运行时配置',
     hostReadiness: '宿主集成就绪度', hostReadinessHint: '只使用结构化安装与运行时证据；缺少证据不会显示 READY。',
-    readinessLabels: { codex_mcp: 'Codex MCP', ds_worker: 'ds-worker', ds_reviewer: 'ds-reviewer', claude_plugin: 'Claude plugin', zcode_mcp: 'ZCode MCP', crew_harness: 'Crew Harness', official_bridge: 'Official bridge' },
-    readinessStates: { READY: 'READY', DEGRADED: 'DEGRADED', UNAVAILABLE: 'UNAVAILABLE', UNKNOWN: 'UNKNOWN' },
+    readinessLabels: { codex_mcp: 'Codex MCP', ds_worker: 'ds-worker', ds_reviewer: 'ds-reviewer', claude_plugin: 'Claude plugin', zcode_mcp: 'ZCode MCP', crew_harness: 'Crew plugin profile', official_bridge: 'Official bridge' },
+    readinessStates: { READY: 'READY', DEGRADED: 'DEGRADED', UNAVAILABLE: 'UNAVAILABLE', UNKNOWN: 'UNKNOWN', NOT_APPLICABLE: 'N/A' },
     globalHint: '修改即时保存到 ~/.config/dsh-crew/config.json；CC / Codex 的新会话自动读取为默认值（会话内可用 /dsh-crew:config 临时覆盖）。',
     orchestration: 'Agent 编排',
     enableSubagents: '启用子 Agent',
@@ -103,7 +107,7 @@ const COPY = {
     presetFlash: 'flash 模式', presetPro: 'pro 模式',
     multimodal: '多模态',
     visionProvider: '视觉 provider', visionModel: '视觉模型', imagegenProvider: '生图 provider',
-    harnessProviders: 'Harness Providers', harnessProviderHint: '3210 Crew Harness 的真实 Provider 注册与生命周期；不是视觉 / 生图适配器。',
+    harnessProviders: 'Harness Providers', harnessProviderHint: 'DeepSeek 官方 Harness 的 3210 dsh-crew profile 中的真实 Provider 注册与生命周期；不是视觉 / 生图适配器。',
     providerState: (state: string) => `状态：${state}`, providerModels: (count: number) => `${count} 个模型`, providerJobs: (count: number) => `${count} 个运行任务`,
     providerOfficialBuiltin: '· 官方内置（不可删除）', providerSourceUnresolved: '· 来源未解析（安全锁定）',
     providerLayerMigration: '检测到旧版 profile Provider', providerLayerMigrationHint: '这些 Provider 仍在 Crew profile/base 层，所以 3210 原生页面不会显示删除。请先按迁移计划提升到 Harness 用户设置层；不会复制密钥。', providerLayerMigrationPlan: '迁移计划', providerLayerMigrate: '迁移到用户层', providerLayerMigrating: '迁移中…', providerLayerMigrationConfirm: '确认把这个 Provider 移到 Harness 用户设置层？会先保存可回滚快照，不会复制密钥值。', providerLayerRollback: '回滚迁移',
@@ -184,9 +188,11 @@ const COPY = {
   en: {
     label: 'DSH Crew',
     title: 'DSH Crew',
-    intro: 'The daily Crew console: configure orchestration, roles, model routing, and host integrations in one place while tracking real Worker / Reviewer jobs.',
+    intro: 'Manage workflows, model routing and host integrations. Expand a section to edit its settings.',
+    surfaceLabel: '3210 / ADVANCED SETTINGS',
+    openOfficial: 'Open official frontend (3080) →',
     integrations: 'Integrations',
-    installed: 'installed', notInstalled: 'not installed', ready: 'ready', notReady: 'not ready', hud: 'HUD segment',
+    installed: 'installed', notInstalled: 'not installed', ready: 'integration ready', integrationReady: 'integration ready', modelCallable: 'model callable', modelNotCallable: 'model not verified', modelUnknown: 'model unknown', notReady: 'not ready', hud: 'HUD segment',
     install: 'Install', update: 'Update', restore: 'Restore',
     confirmRestore: (name: string) => `Remove the dsh-crew integration from ${name}? (settings are backed up first)`,
     globalConfig: 'Global configuration',
@@ -194,11 +200,10 @@ const COPY = {
     modelCount: (count: number) => `${count} models`, providerCount: (count: number) => `${count} providers`,
     jobCount: (count: number) => `${count} jobs`, runningCount: (count: number) => `${count} running`,
     sectionNames: { integrations: 'Codex / Claude / ZCode integration status', workflow: 'Crew workflow settings', flash: 'Worker / Flash', pro: 'Reviewer / Pro', dispatch: 'Model priority & dispatch', adaptive: 'Adaptive routing', runtime: 'Runtime / activation boundaries', multimodal: 'Vision & image generation', harnessProviders: 'Harness Providers', providers: 'Multimodal adapters', jobs: 'Task status' },
-    openHarness: 'Open 3210 Crew Harness →',
-    harnessHint: 'Low-level providers, Harness Models, and runtime configuration',
+    harnessHint: 'The official DeepSeek Harness dsh-crew profile: providers, Harness Models, and runtime configuration',
     hostReadiness: 'Host integration readiness', hostReadinessHint: 'Uses structured installer and runtime evidence only; missing evidence is never READY.',
-    readinessLabels: { codex_mcp: 'Codex MCP', ds_worker: 'ds-worker', ds_reviewer: 'ds-reviewer', claude_plugin: 'Claude plugin', zcode_mcp: 'ZCode MCP', crew_harness: 'Crew Harness', official_bridge: 'Official bridge' },
-    readinessStates: { READY: 'READY', DEGRADED: 'DEGRADED', UNAVAILABLE: 'UNAVAILABLE', UNKNOWN: 'UNKNOWN' },
+    readinessLabels: { codex_mcp: 'Codex MCP', ds_worker: 'ds-worker', ds_reviewer: 'ds-reviewer', claude_plugin: 'Claude plugin', zcode_mcp: 'ZCode MCP', crew_harness: 'Crew plugin profile', official_bridge: 'Official bridge' },
+    readinessStates: { READY: 'READY', DEGRADED: 'DEGRADED', UNAVAILABLE: 'UNAVAILABLE', UNKNOWN: 'UNKNOWN', NOT_APPLICABLE: 'N/A' },
     globalHint: 'Changes save instantly to ~/.config/dsh-crew/config.json; new CC / Codex sessions pick them up as defaults (override per session with /dsh-crew:config).',
     orchestration: 'Agent orchestration',
     enableSubagents: 'Enable Subagents',
@@ -244,7 +249,7 @@ const COPY = {
     presetFlash: 'flash preset', presetPro: 'pro preset',
     multimodal: 'Multimodal',
     visionProvider: 'Vision provider', visionModel: 'Vision model', imagegenProvider: 'Image-gen provider',
-    harnessProviders: 'Harness Providers', harnessProviderHint: 'Live Provider registration and lifecycle in the 3210 Crew Harness; separate from vision / image-gen adapters.',
+    harnessProviders: 'Harness Providers', harnessProviderHint: 'Live Provider registration and lifecycle in the official DeepSeek Harness dsh-crew profile on 3210; separate from vision / image-gen adapters.',
     providerState: (state: string) => `State: ${state}`, providerModels: (count: number) => `${count} models`, providerJobs: (count: number) => `${count} running jobs`,
     providerOfficialBuiltin: '· official built-in (immutable)', providerSourceUnresolved: '· source unresolved (locked)',
     providerLayerMigration: 'Legacy profile Providers detected', providerLayerMigrationHint: 'These Providers still exist in the Crew profile/base layer, so the native 3210 page cannot show Delete. Promote them to Harness user settings with an explicit plan; keys are never copied.', providerLayerMigrationPlan: 'Migration plan', providerLayerMigrate: 'Migrate to user layer', providerLayerMigrating: 'Migrating…', providerLayerMigrationConfirm: 'Move this Provider into Harness user settings? A rollback snapshot is saved first; credential values are never copied.', providerLayerRollback: 'Rollback migration',
@@ -430,10 +435,12 @@ function CollapsibleSection({ sectionId, title, summary, expanded, onToggle, chi
   const bodyId = `dsh-crew-section-${sectionId}`;
   return (
     <section style={S.sectionShell} data-section-id={sectionId}>
-      <button type="button" style={S.sectionButton} aria-expanded={expanded} aria-controls={bodyId} onClick={onToggle}>
+      <button type="button" className="crew-section-trigger" style={S.sectionButton} aria-expanded={expanded} aria-controls={bodyId} onClick={onToggle}>
         <span aria-hidden="true" style={{ width: 14, opacity: 0.62, transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 140ms ease' }}>›</span>
-        <span style={{ fontWeight: 650, fontSize: 13, minWidth: 92 }}>{title}</span>
-        <span title={summary} style={{ flex: 1, minWidth: 0, fontSize: 11.5, opacity: 0.58, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{summary}</span>
+        <span className="crew-section-heading">
+          <span className="crew-section-title">{title}</span>
+          <span className="crew-section-summary">{summary}</span>
+        </span>
       </button>
       <div id={bodyId} hidden={!expanded} style={expanded ? S.sectionBody : undefined}>{children}</div>
     </section>
@@ -463,7 +470,8 @@ function formatTimestamp(value: string | null, locale: string) {
 function readinessChip(state: string) {
   const color = state === READINESS_STATES.READY ? '#3fb950'
     : state === READINESS_STATES.DEGRADED ? '#c98735'
-      : state === READINESS_STATES.UNAVAILABLE ? '#f85149' : 'inherit';
+      : state === READINESS_STATES.UNAVAILABLE ? '#f85149'
+        : state === READINESS_STATES.NOT_APPLICABLE ? '#7d8590' : 'inherit';
   return {
     fontSize: 10.5, fontWeight: 650, padding: '1px 7px', borderRadius: 99,
     border: `1px solid ${state === READINESS_STATES.UNKNOWN ? 'rgba(128,128,128,0.35)' : color}`,
@@ -477,8 +485,8 @@ function MinimalCrewPanel({ locale, surface, runtime }: { locale: string; surfac
   const title = native ? (zh ? 'DSH Crew Runtime' : 'DSH Crew Runtime') : (zh ? 'DSH Crew Surface 未确认' : 'DSH Crew surface not verified');
   const hint = native
     ? (zh
-      ? '这里是隔离的 3210 Crew Harness。请使用 Harness 原生菜单管理 Provider、Harness Models、Agent 预设与底层配置；Crew 编排和宿主集成统一在 3080 管理。'
-      : 'This is the isolated 3210 Crew Harness. Use the native Harness menus for Providers, Harness Models, Agent presets, and low-level settings; manage Crew orchestration and host integrations on 3080.')
+      ? '这里是 DeepSeek 官方 Harness 的专用 dsh-crew profile，DSH Crew 作为插件加载其中。请使用 Harness 原生菜单管理 Provider、Harness Models、Agent 预设与底层配置。'
+      : 'This is the dedicated dsh-crew profile of the official DeepSeek Harness, with DSH Crew loaded as a plugin. Use the native Harness menus for Providers, Harness Models, Agent presets, and low-level settings.')
     : (zh
       ? '无法用结构化后端证据确认当前界面，因此已保守隐藏 Crew 编排、任务与宿主集成功能。'
       : 'Structured backend evidence could not identify this surface, so Crew orchestration, jobs, and host integrations are conservatively hidden.');
@@ -495,13 +503,13 @@ function MinimalCrewPanel({ locale, surface, runtime }: { locale: string; surfac
             {runtimeReady ? `Runtime ${runtime.runtime_version ?? 'READY'}` : 'Runtime UNKNOWN'}
           </span>
           <span style={readinessChip(native ? READINESS_STATES.READY : READINESS_STATES.UNKNOWN)}>
-            {native ? '3210 · isolated' : 'surface · unknown'}
+            {native ? '3210 · official profile + Crew plugin' : 'surface · unknown'}
           </span>
         </div>
         <a href={CREW_CONTROL_PLANE_URL} target="_blank" rel="noopener noreferrer" style={{
           ...S.btn, alignSelf: 'flex-start', textDecoration: 'none', fontWeight: 650, padding: '7px 12px',
           borderColor: 'rgba(74,158,255,0.55)', background: 'rgba(74,158,255,0.08)',
-        }}>{zh ? '打开 3080 DSH Crew 控制台 →' : 'Open the 3080 DSH Crew console →'}</a>
+        }}>{zh ? '打开官方 Harness 界面（3080） →' : 'Open official Harness (3080) →'}</a>
       </div>
     </div>
   );
@@ -544,8 +552,18 @@ function WorkersPanel({ ctx }: { ctx: any }) {
   const [testResult, setTestResult] = useState<{ key: string; ok?: boolean; steps?: any[]; error?: string; busy: boolean } | null>(null);
   const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>(() => readSectionState(sectionStorage()));
   const [surface, setSurface] = useState<string>('detecting');
-  const [runtimeInfo, setRuntimeInfo] = useState<any>(undefined);
-  const [readinessSnapshot, setReadinessSnapshot] = useState<any>(undefined);
+  const [readinessEnvelope, setReadinessEnvelope] = useState<{ runtime?: any; snapshot?: any; expiresAt?: number | null }>({});
+  const readinessGeneration = useRef(0);
+  const runtimeInfo = readinessEnvelope.runtime;
+  const readinessSnapshot = readinessEnvelope.snapshot;
+
+  useEffect(() => {
+    const delay = readinessExpiryDelay(readinessEnvelope.expiresAt);
+    if (delay === null) return undefined;
+    const expected = readinessEnvelope;
+    const timer = setTimeout(() => setReadinessEnvelope((current) => current === expected ? {} : current), delay);
+    return () => clearTimeout(timer);
+  }, [readinessEnvelope]);
 
   const toggleSection = (sectionId: string) => {
     setExpandedSections((current) => ({ ...current, [sectionId]: !current[sectionId] }));
@@ -594,7 +612,7 @@ function WorkersPanel({ ctx }: { ctx: any }) {
   /** Every request carries the active locale: the panel is the authority on it
    * (DSH's setting may be unset), and the hub localizes its own strings from it. */
   const withLang = useCallback((path: string) => `${API}${path}${path.includes('?') ? '&' : '?'}lang=${locale === 'zh' ? 'zh' : 'en'}`, [locale]);
-  const get = useCallback(async (path: string) => readJson(await fetch(withLang(path), { cache: 'no-store' }), path), [readJson, withLang]);
+  const get = useCallback(async (path: string, timeoutMs = 8_000) => readJson(await fetch(withLang(path), { cache: 'no-store', signal: AbortSignal.timeout(timeoutMs) }), path), [readJson, withLang]);
   const post = useCallback(async (path: string, body: any) => readJson(await fetch(withLang(path), {
     method: 'POST', headers: { 'content-type': 'application/json' },
     body: JSON.stringify({ ...body, lang: locale === 'zh' ? 'zh' : 'en' }),
@@ -613,17 +631,18 @@ function WorkersPanel({ ctx }: { ctx: any }) {
       readOptional('/bridge-status'),
       readOptional('/runtime'),
     ]);
-    setRuntimeInfo(runtime);
     setSurface(classifyCrewSurface({ bridgeStatus, runtime }));
   }, []);
 
   useEffect(() => { void detectSurface(); }, [detectSurface]);
 
   const refreshAll = useCallback(async () => {
+    const generation = ++readinessGeneration.current;
+    setReadinessEnvelope({});
     try {
-      const [j, s, c, pr, pi, ph, cr, ext] = await Promise.all([
+      const [j, s, c, pr, pi, ph, cr] = await Promise.all([
         get('/jobs'), get('/install/status'), get('/config'), get('/presets'),
-        get('/providers').catch(() => null), get('/provider-health').catch(() => null), get('/credential-references').catch(() => null), get('/extension').catch(() => null),
+        get('/providers').catch(() => null), get('/provider-health').catch(() => null), get('/credential-references').catch(() => null),
       ]);
       if (j.ok) setJobs(j.jobs ?? []);
       if (s.ok) setStatus(s.status);
@@ -635,21 +654,37 @@ function WorkersPanel({ ctx }: { ctx: any }) {
       if (pi?.ok) setProviderInventory(pi);
       if (ph?.ok) setProviderHealth(ph.health ?? []);
       if (cr?.ok) { setCredentialRefs(cr.records ?? []); setCredentialUnverified(cr.unverified_purges ?? []); }
-      if (ext?.ok) setReadinessSnapshot(ext.extension?.readiness_snapshot ?? undefined);
-    } catch { /* instance restarting */ }
+    } catch {
+      if (generation === readinessGeneration.current) setReadinessEnvelope({});
+    }
   }, [get]);
 
   useEffect(() => {
     const responsibilities = surfaceResponsibilities(surface);
     if (!responsibilities.fullControlPlane) return undefined;
     void refreshAll();
-    const timer = setInterval(() => {
-      void Promise.all([get('/jobs'), get('/provider-health').catch(() => null)]).then(([j, health]) => {
-        if (j.ok) setJobs(j.jobs ?? []);
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const poll = async () => {
+      const generation = ++readinessGeneration.current;
+      try {
+        const ext = await get('/extension', 5_000);
+        if (!cancelled && generation === readinessGeneration.current) {
+          const accepted = acceptReadinessResponse(ext, { generation, latestGeneration: readinessGeneration.current });
+          if (accepted.accepted) setReadinessEnvelope(accepted.envelope);
+        }
+      } catch {
+        if (!cancelled && generation === readinessGeneration.current) setReadinessEnvelope({});
+      }
+      void Promise.all([get('/jobs', 5_000).catch(() => null), get('/provider-health', 5_000).catch(() => null)]).then(([j, health]) => {
+        if (cancelled) return;
+        if (j?.ok) setJobs(j.jobs ?? []);
         if (health?.ok) setProviderHealth(health.health ?? []);
       }).catch(() => {});
-    }, 3000);
-    return () => clearInterval(timer);
+      if (!cancelled) timer = setTimeout(() => { void poll(); }, 3_000);
+    };
+    void poll();
+    return () => { cancelled = true; readinessGeneration.current += 1; if (timer) clearTimeout(timer); };
   }, [surface, refreshAll, get]);
 
   const refreshHarnessModels = useCallback(async () => {
@@ -1060,7 +1095,7 @@ function WorkersPanel({ ctx }: { ctx: any }) {
     <div style={S.card}>
       <span style={{ fontWeight: 600, fontSize: 13, minWidth: 92 }}>{name}</span>
       <span style={S.chip(installed)}>{installed ? `● ${copy.installed}` : `○ ${copy.notInstalled}`}</span>
-      <span style={S.chip(ready)}>{ready ? `● ${copy.ready}` : `○ ${copy.notReady}`}</span>
+      <span style={S.chip(ready)}>{ready ? `● ${copy.integrationReady}` : `○ ${copy.notReady}`}</span>
       {extra}
       <span style={{ flex: 1 }} />
       {!installed && <button style={S.btn} title={tips.install} disabled={busy} onClick={() => { void act(installTarget); }}>{copy.install}</button>}
@@ -1087,6 +1122,7 @@ function WorkersPanel({ ctx }: { ctx: any }) {
     void applyPatch({ worker: { model_policy: { adaptive: next, ordering } } });
   };
   const modelActivity = aggregateModelInvocations(jobs);
+  const modelState = modelCallabilityState(readinessSnapshot?.model_callability, runtimeInfo);
   const currentSurfaceResponsibilities = surfaceResponsibilities(surface);
   const hostReadiness = projectHostReadiness({ installStatus: status, runtime: runtimeInfo, surface, readinessSnapshot });
 
@@ -1095,39 +1131,25 @@ function WorkersPanel({ ctx }: { ctx: any }) {
   }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13, lineHeight: 1.55 }}>
-      <div style={{
-        border: '1px solid rgba(128,128,128,0.24)', borderRadius: 12, padding: '14px 15px',
-        display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap',
-        background: 'linear-gradient(135deg, rgba(74,158,255,0.10), rgba(128,128,128,0.025) 56%)',
-      }}>
-        <div style={{ minWidth: 240, flex: 1 }}>
-          <div style={{ fontSize: 20, fontWeight: 680, letterSpacing: '-0.01em' }}>{copy.title}</div>
-          <div style={{ opacity: 0.7, fontSize: 12.5, marginTop: 2 }}>{copy.intro}</div>
-          <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
-            <span style={S.chip(!!status?.codex?.ready)}>Codex {status?.codex?.ready ? 'READY' : 'CHECK'}</span>
-            <span style={S.chip(!!status?.claude?.ready)}>Claude {status?.claude?.ready ? 'READY' : 'CHECK'}</span>
-            <span style={S.chip(!!status?.zcode?.ready)}>ZCode {status?.zcode?.ready ? 'READY' : 'CHECK'}</span>
-            <span style={S.chip(jobs.some((job) => job.status === 'running'))}>{jobs.filter((job) => job.status === 'running').length} running</span>
-          </div>
-        </div>
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 3 }}>
-          <a href={CREW_HARNESS_URL} target="_blank" rel="noopener noreferrer" style={{
-            ...S.btn, textDecoration: 'none', fontWeight: 650, padding: '7px 12px',
-            borderColor: 'rgba(74,158,255,0.55)', background: 'rgba(74,158,255,0.10)',
-          }}>{copy.openHarness}</a>
-          <span style={{ fontSize: 10.5, opacity: 0.52 }}>{copy.harnessHint}</span>
-        </div>
-      </div>
+    <div className="dsh-crew-ui" style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13, lineHeight: 1.55 }}>
+      <PanelStyles />
+      <PanelHeader title={copy.title} eyebrow={copy.surfaceLabel} description={copy.intro} href={CREW_CONTROL_PLANE_URL} linkText={copy.openOfficial}>
+            <span style={S.chip(status?.codex?.installed === true)}>{`Codex ${status?.codex?.installed === true ? copy.installed : copy.notInstalled}`}</span>
+            <span style={S.chip(status?.claude?.installed === true)}>{`Claude ${status?.claude?.installed === true ? copy.installed : copy.notInstalled}`}</span>
+            <span style={S.chip(status?.zcode?.installed === true)}>{`ZCode ${status?.zcode?.installed === true ? copy.installed : copy.notInstalled}`}</span>
+            <span style={readinessChip(modelState)}>{modelState === READINESS_STATES.READY ? copy.modelCallable : modelState === READINESS_STATES.UNKNOWN ? copy.modelUnknown : copy.modelNotCallable}</span>
+            <span style={S.chip(jobs.some((job) => job.status === 'running'))}>{copy.runningCount(jobs.filter((job) => job.status === 'running').length)}</span>
+      </PanelHeader>
+      <HistoryPanel locale={locale} />
 
-      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 5 }}>
+      <div className="crew-config-toolbar">
         <div style={{ ...S.section, margin: 0, flex: 1 }}>{copy.globalConfig}</div>
         <button type="button" style={{ ...S.btn, padding: '3px 9px' }} onClick={() => toggleAllSections(true)}>{copy.expandAll}</button>
         <button type="button" style={{ ...S.btn, padding: '3px 9px' }} onClick={() => toggleAllSections(false)}>{copy.collapseAll}</button>
       </div>
 
       <CollapsibleSection sectionId="integrations" title={copy.sectionNames.integrations}
-        summary={sectionSummary(status?.claude?.ready ? 'Claude READY' : 'Claude CHECK', `${status?.codex?.ready ? 'Codex READY' : 'Codex CHECK'} · ${status?.zcode?.ready ? 'ZCode READY' : 'ZCode CHECK'}`)}
+        summary={sectionSummary(...['Codex', 'Claude', 'ZCode'].map((name) => `${name} ${status?.[name.toLowerCase()]?.installed ? copy.installed : copy.notInstalled}`), modelState === READINESS_STATES.READY ? copy.modelCallable : copy.modelNotCallable)}
         expanded={!!expandedSections.integrations} onToggle={() => toggleSection('integrations')}>
         <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
           <div style={S.block}>

package/src/client/model-callability-view.mjs

@@ -0,0 +1,17 @@
+// Pure client projection for the server-owned model_callability contract.
+// The client must never infer current callability from historical matrix rows.
+
+import { READINESS_STATES } from './host-readiness.mjs';
+import { validateModelCallabilityV2 } from '../model-callability-contract.mjs';
+
+export function modelCallabilityState(projection, runtime = null, now = Date.now()) {
+  if (!projection || typeof projection !== 'object' || typeof projection.overall !== 'string') {
+    return READINESS_STATES.UNKNOWN;
+  }
+  const validation = validateModelCallabilityV2({ projection, runtime, now });
+  if (!validation.ok) return READINESS_STATES.UNKNOWN;
+  if (validation.state === 'CALLABLE') return READINESS_STATES.READY;
+  if (validation.state === 'NOT_CALLABLE') return READINESS_STATES.UNAVAILABLE;
+  if (validation.state === 'STALE') return READINESS_STATES.DEGRADED;
+  return READINESS_STATES.UNKNOWN;
+}

package/src/client/panel-chrome.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+
+// Scoped to Crew panels: the official application's settings shell is untouched.
+export function PanelStyles() {
+  return <style>{`
+    .dsh-crew-ui { --crew-line: rgba(128,128,128,.24); --crew-soft: rgba(128,128,128,.045); --crew-accent: #2563eb; font-size: 13px; line-height: 1.55; min-width: 0; }
+    .dsh-crew-ui *, .dsh-crew-ui *::before, .dsh-crew-ui *::after { box-sizing: border-box; }
+    .dsh-crew-ui .crew-panel-header { border: 1px solid var(--crew-line); border-radius: 12px; padding: 16px; background: var(--crew-soft); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
+    .dsh-crew-ui .crew-panel-heading { flex: 1 1 260px; min-width: 0; }
+    .dsh-crew-ui .crew-eyebrow { font-size: 10.5px; letter-spacing: .055em; opacity: .65; margin-bottom: 4px; }
+    .dsh-crew-ui .crew-panel-title { margin: 0; font-size: 19px; font-weight: 680; line-height: 1.3; letter-spacing: -.025em; }
+    .dsh-crew-ui .crew-panel-description { margin: 5px 0 0; font-size: 12px; opacity: .72; overflow-wrap: anywhere; }
+    .dsh-crew-ui .crew-panel-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+    .dsh-crew-ui .crew-nav-link { display: inline-flex; align-items: center; justify-content: center; color: var(--crew-accent); background: transparent; border: 1px solid var(--crew-line); border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 600; text-decoration: none; flex-shrink: 0; }
+    .dsh-crew-ui button:focus-visible, .dsh-crew-ui a:focus-visible, .dsh-crew-ui input:focus-visible, .dsh-crew-ui summary:focus-visible { outline: 2px solid var(--crew-accent); outline-offset: 3px; }
+    .dsh-crew-ui button:disabled { cursor: not-allowed; opacity: .4; }
+    .dsh-crew-ui .crew-nav-link:hover, .dsh-crew-ui .crew-section-trigger:hover, .dsh-crew-ui summary:hover { background: rgba(128,128,128,.09); }
+    .dsh-crew-ui .crew-section-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+    .dsh-crew-ui .crew-section-title { font-weight: 650; font-size: 13px; }
+    .dsh-crew-ui .crew-section-summary { font-size: 11.5px; opacity: .65; overflow-wrap: anywhere; }
+    .dsh-crew-ui .crew-config-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 6px 0 2px; }
+    @media (prefers-color-scheme: dark) { .dsh-crew-ui { --crew-accent: #8ab4ff; } }
+    @media (prefers-reduced-motion: reduce) { .dsh-crew-ui * { transition: none !important; } }
+  `}</style>;
+}
+
+export function PanelHeader({ title, eyebrow, description, href, linkText, children }: {
+  title: string; eyebrow: string; description: string; href: string;
+  linkText: string; children?: ReactNode;
+}) {
+  return <header className="crew-panel-header">
+    <div className="crew-panel-heading">
+      <div className="crew-eyebrow">{eyebrow}</div>
+      <h2 className="crew-panel-title">{title}</h2>
+      <p className="crew-panel-description">{description}</p>
+      {children && <div className="crew-panel-badges">{children}</div>}
+    </div>
+    <a className="crew-nav-link" href={href} target="_blank" rel="noopener noreferrer">{linkText}</a>
+  </header>;
+}