@nelsonlongxiang/dsh-open-a2a-net 0.5.14 → 0.6.24

package/nexus-stage/src/workbench.css

@@ -0,0 +1,267 @@
+/* A2A workbench styles (0.6.2 merged shell): the planning board is the stage,
+   the operational panels ride a collapsible rail, the inspector is an overlay
+   card. Responsive tiers are CSS-only:
+   - ≥1440px  rail 340px, everything docked
+   - 1024–1439 rail 300px
+   - <1024    rail becomes a left drawer (☰), inspector becomes a bottom sheet
+   Dark default, light via prefers-color-scheme. Panels are data surfaces,
+   not decoration — rows are monospaced data lines. */
+:root{
+  color-scheme:dark;
+  --n-bg:#060a12; --n-ink:#dde3f0; --n-ink-muted:#7a86a0; --n-panel:#0d1322;
+  --n-live:#4ade80; --n-cold:#7a86a0; --n-border:#223052; --n-act:#f59e0b;
+  --n-danger:#f87171; --n-accent:#9673f7; --n-rail-w:300px;
+  --n-canvas:#22d3ee; --n-line:var(--n-border);
+  --n-raised:#131b2e; --n-federal:#6366f1; --n-card-line:#5c6680;
+  --n-error-ink:#fecaca; --n-error-panel:#2a0d10f2; --n-shadow:rgba(0,0,0,.35);
+  --n-role-user:#7dd3fc; --n-role-user-bg:rgba(56,189,248,.16);
+  --n-role-assistant:#6ee7b7; --n-role-assistant-bg:rgba(52,211,153,.14);
+}
+@media (prefers-color-scheme: light){
+  :root{ --n-bg:#eef2fa; --n-ink:#1a2438; --n-ink-muted:#5a6580; --n-panel:#ffffff;
+         --n-live:#157a37; --n-border:#c6d0e6; --n-act:#a84d08;
+         --n-danger:#b91c1c; --n-accent:#6d28d9;
+         --n-cold:#636c81; --n-canvas:#0e7490;
+         --n-raised:#ffffff; --n-federal:#4f46e5; --n-card-line:#8a95ae;
+         --n-error-ink:#b91c1c; --n-error-panel:#fef2f2f2; --n-shadow:rgba(26,36,56,.16);
+         --n-role-user:#075985; --n-role-user-bg:rgba(14,116,144,.12);
+         --n-role-assistant:#065f46; --n-role-assistant-bg:rgba(5,150,105,.12); }
+}
+@media (min-width:1440px){ :root{ --n-rail-w:340px } }
+html,body,#app{height:100%;margin:0}
+body{background:var(--n-bg);color:var(--n-ink);font:13px/1.45 system-ui,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif}
+
+.wb{display:flex;flex-direction:column;height:100%}
+.wb-header{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--n-border);background:var(--n-panel)}
+.wb-title{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;white-space:nowrap}
+.wb-badge{font-size:11px;font-weight:400;color:var(--n-ink-muted);border:1px solid var(--n-border);border-radius:99px;padding:1px 8px}
+.wb-header-stats{display:flex;gap:16px;font-size:12px;color:var(--n-ink-muted);flex-wrap:wrap;min-width:0}
+.wb-header-stats .wb-kv{display:flex;gap:6px}
+.wb-header-stats .wb-kv-k{color:var(--n-ink-muted)}
+.wb-header-stats .wb-kv-v{color:var(--n-ink)}
+/* Header verdict: exceptions only (results-first). Quiet when healthy. */
+.wb-header-ok{color:var(--n-ink-muted)}
+.wb-alert{border:1px solid currentColor;border-radius:99px;padding:0 9px;line-height:20px;white-space:nowrap;cursor:help}
+.wb-alert-danger{color:var(--n-danger)}
+.wb-alert-warn{color:var(--n-act)}
+.wb-forensics{font-family:ui-monospace,Consolas,monospace;font-size:11px}
+.wb-icon-btn{background:none;border:1px solid var(--n-border);color:var(--n-ink);border-radius:8px;
+  width:30px;height:30px;display:none;align-items:center;justify-content:center;font:inherit;font-size:14px;
+  cursor:pointer;flex:none}
+.wb-icon-btn:hover{border-color:var(--n-accent)}
+.wb-menu{margin-left:0}
+.wb-rail-toggle{margin-left:auto}
+.wb.is-rail-collapsed .wb-rail{display:none}
+
+.wb-body{position:relative;display:grid;grid-template-columns:minmax(0,var(--n-rail-w)) minmax(0,1fr);flex:1;min-height:0}
+
+/* ── Rail (directory + operational panels in canvas mode) ── */
+.wb-rail{border-right:1px solid var(--n-border);overflow-y:auto;min-width:0;background:color-mix(in srgb,var(--n-panel) 60%,var(--n-bg))}
+.wb-sec{border-bottom:1px solid color-mix(in srgb,var(--n-border) 60%,transparent)}
+.wb-sec-head{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;
+  background:none;border:none;color:var(--n-ink);font:inherit;font-weight:600;font-size:12.5px;
+  padding:8px 12px;cursor:pointer;text-transform:uppercase;letter-spacing:.05em}
+.wb-sec-head:hover{color:var(--n-accent)}
+.wb-sec-count{font-weight:400;font-size:11px;color:var(--n-ink-muted)}
+.wb-sec.is-collapsed .wb-sec-body{display:none}
+.wb-sec-body{padding:2px 10px 10px}
+/* Data mode: the three panels move to the stage — their rail seats hide. */
+.wb[data-mode="data"] .wb-sec[data-sec="ledger"],
+.wb[data-mode="data"] .wb-sec[data-sec="activity"],
+.wb[data-mode="data"] .wb-sec[data-sec="plan"]{display:none}
+
+.wb-side-head{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--n-ink-muted);margin:10px 2px 4px}
+.wb-item{display:flex;gap:7px;align-items:center;width:100%;text-align:left;background:none;border:none;
+  color:var(--n-ink);font:inherit;padding:3px 6px;border-radius:6px;cursor:pointer}
+.wb-item:hover{background:color-mix(in srgb,var(--n-accent) 14%,transparent)}
+.wb-dot{font-size:10px}
+.wb-dot-live{color:var(--n-live)} .wb-dot-cold{color:var(--n-cold)} .wb-dot-canvas{color:var(--n-canvas)}
+.wb-dot-peer{color:var(--n-accent)} .wb-dot-remote{color:var(--n-act)}
+.wb-item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+/* ── Directory toolbar: unified search + category filters (0.6.6) ── */
+.wb-dir-tools{display:flex;flex-direction:column;gap:6px;padding:8px 6px 4px}
+.wb-search{background:var(--n-panel);border:1px solid var(--n-border);color:var(--n-ink);
+  border-radius:6px;padding:4px 8px;font:inherit;font-size:12.5px;min-width:0}
+.wb-search:focus{outline:1px solid var(--n-accent)}
+.wb-filters{display:flex;flex-wrap:wrap;gap:4px}
+.wb-filter{background:none;border:1px solid var(--n-border);color:var(--n-ink-muted);
+  border-radius:99px;padding:1px 9px;font:inherit;font-size:11.5px;cursor:pointer}
+.wb-filter:hover{border-color:var(--n-accent);color:var(--n-ink)}
+.wb-filter.is-active{border-color:var(--n-accent);color:var(--n-ink);
+  background:color-mix(in srgb,var(--n-accent) 16%,transparent)}
+.wb-item-badge{flex:none;font-size:10.5px;color:var(--n-canvas);border:1px solid color-mix(in srgb,var(--n-canvas) 45%,transparent);
+  border-radius:99px;padding:0 6px;line-height:17px;white-space:nowrap}
+/* 0.6.10: .wb-item-open (the ↗ jump affordance) removed by ruling —
+   禁止任何跳转，全部使用响应式布局. */
+.wb-item-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%}
+
+/* ── Canvas member management (inspector, 0.6.6) ── */
+.wb-member-row{display:flex;align-items:center;gap:8px;padding:3px 2px;border-radius:6px}
+.wb-member-row:hover{background:color-mix(in srgb,var(--n-accent) 10%,transparent)}
+.wb-member-dot{flex:none;font-size:11px;color:var(--n-ink-muted);min-width:44px}
+.wb-member-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.wb-member-remove,.wb-member-submit{background:none;border:1px solid var(--n-border);color:var(--n-ink);
+  border-radius:6px;padding:1px 8px;font:inherit;font-size:11.5px;cursor:pointer;flex:none}
+.wb-member-remove:hover:not(:disabled),.wb-member-submit:hover:not(:disabled){border-color:var(--n-danger)}
+.wb-member-submit:hover:not(:disabled){border-color:var(--n-accent)}
+.wb-member-add{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
+.wb-member-pick,.wb-member-manual{background:var(--n-panel);border:1px solid var(--n-border);color:var(--n-ink);
+  border-radius:6px;padding:3px 8px;font:inherit;font-size:12px;min-width:0}
+.wb-member-pick{flex:1 1 150px}
+.wb-member-manual{flex:1 1 130px}
+.wb-member-pick:focus,.wb-member-manual:focus{outline:1px solid var(--n-accent)}
+.wb-hint{margin-top:10px;font-size:11px;color:var(--n-ink-muted);line-height:1.5}
+/* Quick dispatch (0.6.9): one human message to a routing team. */
+.wb-dispatch{margin-top:12px;border-top:1px dashed var(--n-border);padding-top:8px}
+.wb-dispatch-form{display:flex;flex-direction:column;gap:6px;margin-top:6px}
+.wb-dispatch-text{background:var(--n-panel);border:1px solid var(--n-border);color:var(--n-ink);
+  border-radius:6px;padding:5px 8px;font:inherit;font-size:12px;min-height:52px;resize:vertical}
+.wb-dispatch-text:focus{outline:1px solid var(--n-accent)}
+.wb-dispatch-submit{align-self:flex-end;background:none;border:1px solid var(--n-border);color:var(--n-ink);
+  border-radius:6px;padding:2px 14px;font:inherit;font-size:11.5px;cursor:pointer}
+.wb-dispatch-submit:hover:not(:disabled){border-color:var(--n-accent)}
+.wb-dispatch-note{font-size:11px;color:var(--n-ink-muted);line-height:1.4;min-height:0}
+/* 0.6.11 inline transcript: read-only tail of a local session's own log. */
+.wb-transcript{display:flex;flex-direction:column;gap:6px}
+.wb-transcript-title{font-size:12px;color:var(--n-ink-muted)}
+.wb-transcript-body.is-folded{display:none}
+.wb-transcript-refresh{margin-left:auto;font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid var(--n-line);background:transparent;color:var(--n-ink-muted);cursor:pointer}
+.wb-transcript-body{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto}
+.wb-transcript-row{display:flex;gap:6px;align-items:flex-start;font-size:12px;line-height:1.45}
+.wb-transcript-role{flex:0 0 auto;font-size:10px;padding:0 5px;border-radius:999px;margin-top:2px}
+.wb-transcript-user .wb-transcript-role{background:var(--n-role-user-bg);color:var(--n-role-user)}
+.wb-transcript-assistant .wb-transcript-role{background:var(--n-role-assistant-bg);color:var(--n-role-assistant)}
+.wb-transcript-text{flex:1 1 auto;min-width:0;color:var(--n-ink);word-break:break-word}
+
+/* ── Stage: board (canvas mode) or the data stack (data mode) ── */
+.wb-stage{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column}
+.wb-stage-board{position:absolute;inset:0;overflow:hidden}
+.wb-stage-board.is-hidden{display:none}
+.wb-data{display:flex;flex-direction:column;gap:14px;padding:10px 14px;overflow-y:auto;min-height:0}
+.wb-data.is-hidden{display:none}
+
+.wb-pane-head{font-size:12px;color:var(--n-ink-muted);margin:4px 0 8px}
+.wb-pane-subhead{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--n-ink-muted);margin:12px 0 6px}
+.wb-table,.wb-row{display:flex;gap:10px;align-items:baseline}
+.wb-table{flex-direction:column;gap:2px}
+.wb-row{font-family:ui-monospace,Consolas,monospace;font-size:12px;background:color-mix(in srgb,var(--n-panel) 55%,transparent);
+  border:1px solid var(--n-border);border-radius:6px;padding:3px 8px;flex-wrap:wrap}
+.wb-row-id{min-width:130px}
+.wb-row-team{color:var(--n-accent);min-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.wb-row-meta{color:var(--n-ink-muted)}
+/* Owner signal (2026-10-21): the ledger is a RESULTS face — brief-first
+   rows, exception-driven color, quiet normals. */
+.wb-row-result{flex-direction:column;align-items:stretch;gap:2px;flex-wrap:nowrap}
+.wb-row-head{color:var(--n-ink);font-size:12.5px;font-family:Avenir Next,Segoe UI Variable,Segoe UI,sans-serif;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.wb-row-meta-line{color:var(--n-ink-muted);font-family:ui-monospace,Consolas,monospace;font-size:11px;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.wb-row-result:not(.wb-row-alert) .wb-row-head{color:var(--n-ink-muted)}
+.wb-row-alert{border-color:var(--n-danger)}
+.wb-row-alert .wb-row-head{color:var(--n-danger)}
+/* The dispatch brief is the row's only human-readable payload — give it the
+   remaining width and clip rather than wrapping the table into unreadability
+   (full text stays in the title tooltip). */
+.wb-row-brief{flex:1 1 160px;min-width:0;color:var(--n-ink);overflow:hidden;
+  text-overflow:ellipsis;white-space:nowrap}
+.wb-row-brief:empty{flex:0 0 0;display:none}
+.wb-row-badges{color:var(--n-live)}
+.wb-row-dir{min-width:16px}
+.wb-row-dir.is-fail{color:var(--n-danger)}
+.wb-btn{background:none;border:1px solid var(--n-border);color:var(--n-ink);border-radius:6px;
+  padding:2px 10px;font:inherit;font-size:12px;cursor:pointer;margin-left:auto}
+.wb-btn:hover:not(:disabled){border-color:var(--n-accent)}
+.wb-btn:disabled{opacity:.5;cursor:default}
+.wb-btn-primary{border-color:var(--n-accent);color:var(--n-ink)}
+.wb-action{display:flex;gap:10px;align-items:baseline;font-size:12.5px;padding:5px 8px;border-radius:6px;
+  border:1px solid var(--n-border);margin-bottom:4px}
+.wb-action-high{border-color:var(--n-danger)}
+.wb-action-text{flex:1}
+.wb-draft{display:flex;flex-direction:column;gap:8px;max-width:560px;margin-top:6px}
+.wb-select,.wb-textarea{background:var(--n-panel);border:1px solid var(--n-border);color:var(--n-ink);
+  border-radius:8px;padding:6px 9px;font:inherit}
+.wb-textarea{resize:vertical}
+.wb-select:focus,.wb-textarea:focus{outline:1px solid var(--n-accent)}
+
+/* ── Inspector: overlay card on the stage; bottom sheet when narrow. ── */
+.wb-inspector{position:absolute;top:8px;right:8px;width:280px;max-height:calc(100% - 16px);
+  overflow-y:auto;background:var(--n-panel);border:1px solid var(--n-border);border-radius:10px;
+  padding:10px;z-index:20;box-shadow:0 8px 24px var(--n-shadow);display:none}
+.wb-inspector.is-open{display:block}
+.wb-inspector-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
+.wb-inspector-title{font-weight:600;font-size:12.5px}
+.wb-inspector .wb-icon-btn{display:inline-flex;width:24px;height:24px;font-size:12px}
+.wb-card{display:flex;flex-direction:column;gap:6px}
+.wb-kv{display:flex;gap:8px;font-size:12px}
+.wb-kv-k{color:var(--n-ink-muted);min-width:58px;flex:none}
+.wb-kv-v{word-break:break-all}
+.wb-muted{color:var(--n-ink-muted)}
+
+/* ── Node chat drawer (0.6.13): right-side conversation face. ── */
+.wb-chat{position:absolute;top:8px;right:8px;bottom:8px;width:360px;max-width:calc(100% - 16px);
+  display:flex;flex-direction:column;background:var(--n-panel);border:1px solid var(--n-border);
+  border-radius:10px;z-index:22;box-shadow:0 8px 24px var(--n-shadow);
+  transform:translateX(calc(100% + 12px));transition:transform .18s ease;pointer-events:none}
+.wb-chat.is-open{transform:translateX(0);pointer-events:auto}
+.wb-chat-head{display:flex;align-items:center;gap:8px;padding:10px 10px 8px;border-bottom:1px solid var(--n-border)}
+.wb-chat-dot{flex:none;font-size:11px}
+.wb-chat-dot.is-live{color:var(--n-accent)}
+.wb-chat-dot.is-cold{color:var(--n-ink-muted)}
+.wb-chat-dot.is-peer{color:var(--n-act)}
+.wb-chat-title{font-weight:600;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.wb-chat-sub{flex:1 1 auto;min-width:0;font-size:11px;color:var(--n-ink-muted);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.wb-chat .wb-icon-btn{display:inline-flex;width:24px;height:24px;font-size:12px;flex:none}
+.wb-chat-body{flex:1 1 auto;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px}
+.wb-chat-note{font-size:12px;color:var(--n-ink-muted);border:1px dashed var(--n-border);
+  border-radius:8px;padding:8px 10px}
+
+/* ── Ledger density: stat strip, age histogram, load rows ── */
+.wb-stats{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
+.wb-stat{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:8px;
+  border:1px solid var(--n-border);background:color-mix(in srgb,var(--n-panel) 70%,transparent);cursor:help}
+.wb-stat-k{font-size:11px;color:var(--n-ink-muted)}
+.wb-stat-v{font-family:ui-monospace,Consolas,monospace;font-size:14px;font-weight:600}
+.wb-stat-warn{border-color:var(--n-act)}
+.wb-stat-warn .wb-stat-v{color:var(--n-act)}
+.wb-stat-danger{border-color:var(--n-danger)}
+.wb-stat-danger .wb-stat-v{color:var(--n-danger)}
+.wb-hist{display:flex;flex-direction:column;gap:3px;margin:2px 0 8px;max-width:420px}
+.wb-bar-row{display:flex;align-items:center;gap:8px;font-size:11px}
+.wb-bar-k{color:var(--n-ink-muted);min-width:52px;flex:none;text-align:right}
+.wb-bar-track{flex:1;height:9px;border-radius:4px;overflow:hidden;
+  background:color-mix(in srgb,var(--n-border) 55%,transparent)}
+.wb-bar-fill{display:block;height:100%;border-radius:4px;background:var(--n-accent)}
+.wb-bar-v{font-family:ui-monospace,Consolas,monospace;color:var(--n-ink-muted);min-width:28px}
+
+/* The one fault badge (planning.css carried a second, conflicting copy —
+   the cascade mixed the two). Honesty surface: always above the board. */
+.nexus-fault{display:none;position:fixed;top:10px;right:12px;z-index:50;max-width:420px;
+  font:12px/1.5 ui-monospace,Consolas,monospace;color:var(--n-error-ink);background:var(--n-error-panel);
+  border:1px solid var(--n-danger);border-radius:8px;padding:6px 10px;pointer-events:none}
+
+/* ── Responsive tiers ── */
+@media (max-width:1023px){
+  .wb-menu{display:inline-flex}
+  .wb-rail-toggle{display:none}
+  .wb-body{grid-template-columns:minmax(0,1fr)}
+  .wb-rail{position:fixed;left:0;top:0;bottom:0;width:min(86vw,320px);z-index:40;
+    background:var(--n-panel);border-right:1px solid var(--n-border);
+    transform:translateX(-102%);transition:transform .18s ease;box-shadow:8px 0 24px var(--n-shadow)}
+  .wb.is-rail-open .wb-rail{transform:translateX(0)}
+  .wb-inspector{left:8px;right:8px;width:auto;top:auto;bottom:8px;max-height:45%}
+  .wb-chat{left:8px;right:8px;width:auto;top:auto;bottom:8px;max-height:70%;
+    transform:translateY(102%)}
+  .wb-chat.is-open{transform:translateY(0)}
+}
+@media (pointer:coarse){
+  .wb-filter,.wb-item,.wb-sec-head{min-height:36px}
+  .wb-icon-btn,.wb-inspector .wb-icon-btn,.wb-chat .wb-icon-btn{width:36px;height:36px}
+}
+@media (max-width:680px){
+  .wb-header{flex-wrap:wrap;row-gap:4px}
+  .wb-header-stats{order:3;width:100%}
+  .wb-row-team{min-width:0;flex:1 1 auto}
+  .wb-data{padding:8px}
+}