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

package/src/client/quick-panel.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useState } from 'react';
+import { PanelHeader, PanelStyles } from './panel-chrome';
 
 // DSH Crew QUICK CONTROLS panel for the official 3080 surface.
 //
 // Narrow by design: only the user-facing master switch, flash/pro model
 // priority lists and vision/imagegen toggles — all other operations belong
 // to the native 3210 full control plane. Talks only to the quick endpoints
-// (/_dsh/dsh-crew/quick-config, /quick-status, /runtime/restart-request,
-// /runtime/restart-status). NEVER writes to any other surface.
+// (/_dsh/dsh-crew/quick-config, /quick-status). Runtime maintenance stays on 3210.
 
 const API = '/_dsh/dsh-crew';
 const CREW_CONTROL_PLANE_URL = 'http://127.0.0.1:3210/';
@@ -33,14 +33,20 @@ const RESTART_KEYS = new Set([
 const T = {
   zh: {
     title: 'DSH Crew 快捷控制',
-    openFull: '打开完整设置 →',
-    running: '运行中',
+    openFull: '打开 3210 后台 →',
+    running: '后台已连接',
+    surface: '3080 / 日常控制',
+    description: '常用开关与模型顺序在这里调整，更多设置进入后台。',
+    priorityHint: '从上到下按优先级排列；从列表移除不会删除 Provider。',
+    empty: '未配置优先模型，按现有后备策略选择。',
+    models: (n: number) => `${n} 个模型`,
+    moveUp: '上移', moveDown: '下移', remove: '从优先级移除',
     unavailable: 'Crew 后端不可用',
     openDiag: '打开诊断',
     crew: 'Crew',
     enabled: '启用子 Agent',
-    flash: 'Flash 模型',
-    pro: 'Pro 模型',
+    flash: 'Worker / Flash',
+    pro: 'Reviewer / Pro',
     addModel: '+ 添加模型',
     multimodal: '多模态',
     vision: '视觉',
@@ -55,14 +61,20 @@ const T = {
   },
   en: {
     title: 'DSH Crew Quick Controls',
-    openFull: 'Open full settings →',
-    running: 'Running',
+    openFull: 'Open Crew backend (3210) →',
+    running: 'Backend connected',
+    surface: '3080 / DAILY CONTROLS',
+    description: 'Manage everyday switches and model order here. Open the backend for advanced settings.',
+    priorityHint: 'Ordered by priority. Removing a model here does not delete its provider.',
+    empty: 'No priority models. The existing fallback policy applies.',
+    models: (n: number) => `${n} models`,
+    moveUp: 'Move up', moveDown: 'Move down', remove: 'Remove from priority',
     unavailable: 'Crew backend unavailable',
     openDiag: 'Open diagnostics',
     crew: 'Crew',
     enabled: 'Enable sub-agents',
-    flash: 'Flash models',
-    pro: 'Pro models',
+    flash: 'Worker / Flash',
+    pro: 'Reviewer / Pro',
     addModel: '+ Add model',
     multimodal: 'Multimodal',
     vision: 'Vision',
@@ -73,23 +85,39 @@ const T = {
     saved: 'Saved',
     working: 'Working…',
     providerPlaceholder: 'provider',
-    modelPlaceholder: 'model',
+    modelPlaceholder: 'Model',
   },
 };
 
 function LocalStyles() {
   return (
     <style>{`
-      .crew-quick-card { border: 1px solid rgba(128,128,128,0.24); border-radius: 12px; padding: 14px 15px; font-size: 13px; line-height: 1.55; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(135deg, rgba(74,158,255,0.10), rgba(128,128,128,0.025) 56%); }
+      .dsh-crew-ui.crew-quick-card { display: flex; flex-direction: column; gap: 12px; }
       .crew-quick-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
       .crew-quick-title { font-size: 16px; font-weight: 680; }
       .crew-quick-section { font-weight: 650; opacity: 0.85; }
       .crew-quick-chip { border: 1px solid rgba(128,128,128,0.35); border-radius: 999px; padding: 1px 10px; font-size: 12px; }
-      .crew-quick-btn { border: 1px solid rgba(128,128,128,0.4); border-radius: 8px; padding: 2px 10px; cursor: pointer; background: transparent; font-size: 12.5px; }
+      .crew-quick-card .crew-quick-btn { border: 1px solid var(--crew-line); border-radius: 7px; min-height: 30px; padding: 3px 9px; cursor: pointer; background: transparent; color: inherit; font-size: 12px; }
       .crew-quick-btn.primary { border-color: #4a9eff; color: #4a9eff; font-weight: 650; }
-      .crew-quick-input { border: 1px solid rgba(128,128,128,0.35); border-radius: 6px; padding: 2px 8px; font-size: 12.5px; width: 130px; background: transparent; color: inherit; }
+      .crew-quick-card .crew-quick-input { border: 1px solid var(--crew-line); border-radius: 6px; padding: 6px 9px; font-size: 12px; min-width: 0; width: 100%; background: transparent; color: inherit; }
       .crew-quick-notice { opacity: 0.75; font-size: 12.5px; }
-      .crew-quick-model { display: flex; gap: 6px; align-items: center; font-size: 12.5px; }
+      .crew-quick-card .crew-quick-master { padding: 11px 14px; border: 1px solid var(--crew-line); border-radius: 10px; justify-content: space-between; }
+      .crew-quick-card input[type=checkbox] { accent-color: var(--crew-accent); width: 15px; height: 15px; }
+      .crew-quick-card label { display: inline-flex; gap: 7px; align-items: center; }
+      .crew-quick-card .crew-quick-group { border: 1px solid var(--crew-line); border-radius: 10px; overflow: hidden; }
+      .crew-quick-card .crew-quick-group > summary { cursor: pointer; padding: 12px 14px; }
+      .crew-quick-card .crew-quick-count { margin-left: 10px; font-size: 11px; opacity: .65; font-weight: 400; }
+      .crew-quick-card .crew-quick-content { padding: 0 14px 14px; }
+      .crew-quick-card .crew-quick-list { padding: 0; margin: 10px 0; list-style: none; }
+      .crew-quick-card .crew-quick-model { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 9px; align-items: center; border-top: 1px solid var(--crew-line); padding: 10px 0; }
+      .crew-quick-card .crew-quick-rank { opacity: .5; font-size: 11px; font-variant-numeric: tabular-nums; }
+      .crew-quick-card .crew-quick-model-name { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
+      .crew-quick-card .crew-quick-provider { font-size: 11px; opacity: .65; overflow-wrap: anywhere; }
+      .crew-quick-card .crew-quick-actions { display: flex; gap: 4px; }
+      .crew-quick-card .crew-quick-add > summary { color: var(--crew-accent); cursor: pointer; font-size: 12px; padding: 4px 0; }
+      .crew-quick-card .crew-quick-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 7px; margin-top: 9px; }
+      .crew-quick-card .crew-quick-media { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 10px; }
+      @media (max-width: 640px) { .crew-quick-card .crew-quick-form { grid-template-columns: minmax(0, 1fr); } .crew-quick-card .crew-quick-model { grid-template-columns: 18px minmax(0, 1fr); } .crew-quick-card .crew-quick-actions { grid-column: 2; justify-content: flex-end; } }
     `}</style>
   );
 }
@@ -174,108 +202,95 @@ export function QuickPanel({ ctx }: { ctx: any }) {
     void patch({ [listKey]: list } as unknown as QuickConfig);
   };
 
-  const applyRestart = useCallback(async () => {
-    setBusy(true); setNotice(t.working);
-    try {
-      const created = await readJson(await fetch(`${API}/runtime/restart-request`, {
-        method: 'POST', headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ confirm: true, reason: 'quick panel restart' }),
-      }));
-      if (!created.ok) throw new Error(created.code ?? created.error ?? 'restart failed');
-      const requestId = created.request_id;
-      const deadline = Date.now() + 90_000;
-      for (;;) {
-        await new Promise((r) => setTimeout(r, 1000));
-        if (Date.now() > deadline) throw new Error('restart timed out');
-        const status = await readJson(await fetch(`${API}/runtime/restart-status?id=${encodeURIComponent(requestId)}`, { cache: 'no-store' }));
-        if (!status.ok) continue;
-        if (status.state === 'VERIFIED') { setRestartPending(false); setNotice(t.saved); return; }
-        if (status.state !== 'RESTART_REQUESTED') throw new Error(status.state ?? 'restart failed');
-      }
-    } catch (e: any) {
-      setNotice(String(e?.message ?? e));
-    } finally { setBusy(false); }
-  }, [t]);
-
   const modelList = (listKey: 'flash_model_priority' | 'pro_model_priority', label: string) => {
     const list: ModelEntry[] = (config?.[listKey] as ModelEntry[] | undefined) ?? [];
     const draft = drafts[listKey] ?? { provider: '', model: '' };
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-        <div className="crew-quick-section">{label}</div>
+      <details className="crew-quick-group" open={listKey === 'flash_model_priority'}>
+        <summary><strong>{label}</strong><span className="crew-quick-count">{t.models(list.length)}</span></summary>
+        <div className="crew-quick-content">
+        <div className="crew-quick-notice">{t.priorityHint}</div>
+        {list.length === 0 && <p className="crew-quick-notice">{t.empty}</p>}
+        <ol className="crew-quick-list" aria-label={label}>
         {list.map((entry, i) => (
-          <div key={`${entry.provider}/${entry.model}/${i}`} className="crew-quick-model">
-            <span>{i + 1}. {entry.provider} / {entry.model}</span>
-            <button className="crew-quick-btn" disabled={busy || i === 0} onClick={() => moveModel(listKey, i, -1)}>↑</button>
-            <button className="crew-quick-btn" disabled={busy || i === list.length - 1} onClick={() => moveModel(listKey, i, 1)}>↓</button>
-            <button className="crew-quick-btn" disabled={busy} onClick={() => removeModel(listKey, i)}>×</button>
-          </div>
+          <li key={`${entry.provider}/${entry.model}/${i}`} className="crew-quick-model">
+            <span className="crew-quick-rank" aria-hidden="true">{i + 1}.</span>
+            <div><div className="crew-quick-model-name">{entry.model}</div><div className="crew-quick-provider">{entry.provider}</div></div>
+            <div className="crew-quick-actions">
+            <button type="button" className="crew-quick-btn" aria-label={`${t.moveUp} ${entry.model}`} title={t.moveUp} disabled={busy || i === 0} onClick={() => moveModel(listKey, i, -1)}>↑</button>
+            <button type="button" className="crew-quick-btn" aria-label={`${t.moveDown} ${entry.model}`} title={t.moveDown} disabled={busy || i === list.length - 1} onClick={() => moveModel(listKey, i, 1)}>↓</button>
+            <button type="button" className="crew-quick-btn" aria-label={`${t.remove} ${entry.model}`} title={t.remove} disabled={busy} onClick={() => removeModel(listKey, i)}>×</button>
+            </div>
+          </li>
         ))}
-        <div className="crew-quick-row">
-          <input className="crew-quick-input" placeholder={t.providerPlaceholder} disabled={busy}
+        </ol>
+        <details className="crew-quick-add">
+          <summary>{t.addModel}</summary>
+        <div className="crew-quick-form">
+          <input className="crew-quick-input" aria-label={`${label} Provider`} placeholder={t.providerPlaceholder} disabled={busy}
             value={draft.provider} onChange={(e) => setDrafts((d) => ({ ...d, [listKey]: { ...draft, provider: e.target.value } }))} />
-          <input className="crew-quick-input" placeholder={t.modelPlaceholder} disabled={busy}
+          <input className="crew-quick-input" aria-label={`${label} ${locale === 'zh' ? '模型' : 'Model'}`} placeholder={t.modelPlaceholder} disabled={busy}
             value={draft.model} onChange={(e) => setDrafts((d) => ({ ...d, [listKey]: { ...draft, model: e.target.value } }))} />
-          <button className="crew-quick-btn" disabled={busy} onClick={() => addModel(listKey)}>{t.addModel}</button>
+          <button type="button" className="crew-quick-btn" disabled={busy || !draft.provider.trim() || !draft.model.trim()} onClick={() => addModel(listKey)}>{t.addModel}</button>
         </div>
-      </div>
+        </details>
+        </div>
+      </details>
     );
   };
 
   if (ready === false) {
     return (
-      <div className="crew-quick-card">
-        <LocalStyles />
+      <div className="dsh-crew-ui crew-quick-card">
+        <PanelStyles /><LocalStyles />
         <div className="crew-quick-title">{t.title}</div>
         <div className="crew-quick-notice">{t.unavailable}</div>
         <div className="crew-quick-row">
-          <a href={FULL} target="_blank" rel="noreferrer">{t.openDiag}</a>
+          <a className="crew-nav-link" href={FULL} target="_blank" rel="noopener noreferrer">{t.openDiag}</a>
         </div>
       </div>
     );
   }
   if (config === null) {
-    return (<div className="crew-quick-card"><LocalStyles /><div className="crew-quick-notice">{t.working}</div></div>);
+    return (<div className="dsh-crew-ui crew-quick-card"><PanelStyles /><LocalStyles /><div className="crew-quick-notice" role="status">{t.working}</div></div>);
   }
 
   return (
-    <div className="crew-quick-card">
-      <LocalStyles />
-      <div className="crew-quick-row" style={{ justifyContent: 'space-between' }}>
-        <span className="crew-quick-title">{t.title}</span>
+    <div className="dsh-crew-ui crew-quick-card">
+      <PanelStyles /><LocalStyles />
+      <PanelHeader title={t.title} eyebrow={t.surface} description={t.description} href={FULL} linkText={t.openFull}>
         <span className="crew-quick-chip">{t.running} · 3210</span>
-        <a href={FULL} target="_blank" rel="noreferrer">{t.openFull}</a>
-      </div>
-      <div className="crew-quick-row">
+      </PanelHeader>
+      <div className="crew-quick-row crew-quick-master">
         <span className="crew-quick-section">{t.crew}</span>
         <label><input type="checkbox" disabled={busy} checked={config.subagents_enabled !== false}
           onChange={(e) => toggle('subagents_enabled', e.target.checked)} /> {t.enabled}</label>
       </div>
       {modelList('flash_model_priority', t.flash)}
       {modelList('pro_model_priority', t.pro)}
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-        <div className="crew-quick-section">{t.multimodal}</div>
-        <div className="crew-quick-row">
+      <details className="crew-quick-group">
+        <summary><strong>{t.multimodal}</strong><span className="crew-quick-count">{t.vision} / {t.imagegen}</span></summary>
+        <div className="crew-quick-content">
+        <div className="crew-quick-media">
           <label><input type="checkbox" disabled={busy} checked={config.vision_enabled === true}
             onChange={(e) => toggle('vision_enabled', e.target.checked)} /> {t.vision}</label>
-          <span>{t.provider}</span>
-          <input className="crew-quick-input" disabled={busy} defaultValue={config.vision_provider ?? ''} key={`vision-${config.vision_provider ?? ''}`}
+          <input className="crew-quick-input" aria-label={`${t.vision} Provider`} placeholder={t.provider} disabled={busy} defaultValue={config.vision_provider ?? ''} key={`vision-${config.vision_provider ?? ''}`}
             onBlur={(e) => setProvider('vision_provider', e.target.value)} />
         </div>
-        <div className="crew-quick-row">
+        <div className="crew-quick-media">
           <label><input type="checkbox" disabled={busy} checked={config.imagegen_enabled === true}
             onChange={(e) => toggle('imagegen_enabled', e.target.checked)} /> {t.imagegen}</label>
-          <span>{t.provider}</span>
-          <input className="crew-quick-input" disabled={busy} defaultValue={config.imagegen_provider ?? ''}
+          <input className="crew-quick-input" aria-label={`${t.imagegen} Provider`} placeholder={t.provider} disabled={busy} defaultValue={config.imagegen_provider ?? ''}
             onBlur={(e) => setProvider('imagegen_provider', e.target.value)} />
         </div>
-      </div>
+        </div>
+      </details>
       {restartPending && (
         <div className="crew-quick-row">
-          <button className="crew-quick-btn primary" disabled={busy} onClick={() => void applyRestart()}>{t.applyRestart}</button>
+          <a className="crew-quick-btn primary" href={FULL} target="_blank" rel="noopener noreferrer">{t.openFull}</a>
         </div>
       )}
-      {notice && <div className="crew-quick-notice">{notice}</div>}
+      {notice && <div className="crew-quick-notice" role="status" aria-live="polite">{notice}</div>}
     </div>
   );
 }

package/src/client/readiness-envelope.mjs

@@ -0,0 +1,34 @@
+import { isExactNativeCrewIdentity, sameCompleteRuntimeIdentity } from '../runtime-identity-contract.mjs';
+import { validateModelCallabilityV2 } from '../model-callability-contract.mjs';
+
+export function readinessExpiryDelay(expiresAt, now = Date.now()) {
+  return Number.isFinite(expiresAt) ? Math.max(0, expiresAt - now + 10) : null;
+}
+
+/**
+ * Apply one extension response to the atomic runtime/readiness envelope.
+ * Older responses are ignored so a restart cannot be rolled back by a slow
+ * request that started before the new runtime identity was observed.
+ */
+export function acceptReadinessResponse(response, { generation, latestGeneration } = {}) {
+  if (generation !== latestGeneration) return { accepted: false, envelope: null };
+  const extensionRuntime = response?.extension?.runtime;
+  const snapshot = response?.extension?.readiness_snapshot;
+  const valid = response?.ok === true
+    && isExactNativeCrewIdentity(extensionRuntime)
+    && isExactNativeCrewIdentity(snapshot?.runtime)
+    && sameCompleteRuntimeIdentity(extensionRuntime, snapshot.runtime);
+  const expectedEnabledRoles = {
+    worker: response?.extension?.capabilities?.['deepseek.worker'] === true,
+    reviewer: response?.extension?.capabilities?.['deepseek.reviewer'] === true,
+  };
+  const projection = valid ? validateModelCallabilityV2({
+    projection: snapshot.model_callability,
+    runtime: extensionRuntime,
+    expectedEnabledRoles,
+    expectedSelections: { worker: snapshot.worker?.selected ?? null, reviewer: snapshot.reviewer?.selected ?? null },
+  }) : { ok: false };
+  return { accepted: true, envelope: valid && projection.ok
+    ? { runtime: extensionRuntime, snapshot, expiresAt: snapshot.model_callability.expires_at }
+    : {} };
+}

package/src/client/task-telemetry.mjs

@@ -21,9 +21,11 @@ function hasInvocationEvidence(job) {
 }
 
 /**
- * Build a bounded, presentation-only model activity summary from the jobs the
- * Hub already exposes. No prompts, results, credentials, or new persistence
- * are introduced here.
+ * Build a bounded, presentation-only, job-level model activity summary from
+ * the jobs the Hub already exposes. Each qualifying job contributes one row
+ * count for its selected provider/model; the count is not an inferred number
+ * of underlying model turns. No prompts, results, credentials, or new
+ * persistence are introduced here.
  */
 export function aggregateModelInvocations(jobs = []) {
   const groups = new Map();
@@ -45,7 +47,12 @@ export function aggregateModelInvocations(jobs = []) {
     current.count += 1;
     current.taskSources.add(clean(job?.source, 'api'));
     current.selectionSources.add(clean(job?.selection_source, 'unknown'));
-    current.roles.add(job?.role === 'reviewer' ? 'reviewer' : 'worker');
+    // Do not infer a role from malformed, missing, or future role values. The
+    // summary is presentation evidence and must never assert a role the job
+    // did not provide.
+    if (job?.role === 'worker' || job?.role === 'reviewer') {
+      current.roles.add(job.role);
+    }
     const calledAt = validTimestamp(job?.startedAt);
     if (calledAt && (!current.lastCalledAt || Date.parse(calledAt) > Date.parse(current.lastCalledAt))) {
       current.lastCalledAt = calledAt;