@songsid/agend 2.3.4-beta.7 → 2.3.5-alpha.3

package/dist/ui/shared/app.css

@@ -285,6 +285,14 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .panel-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); min-height: calc(var(--header-h) - 2 * var(--s-1)); }
 .panel-title h1 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; outline: none; }
 .panel-sub { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
+/* S-30: on a phone the chat's state and chips (Windows, computer, model…) left the agent's name two letters. There the
+   header keeps the name (at least ~10 characters) and the state ("idle", "閒置"); the chips are on the sidebar row and
+   in Details. */
+@media (max-width: 479px) {
+  .p-chat .panel-title h1 { flex: 0 1 auto; min-width: min(10ch, 45%); }
+  .p-chat .panel-sub { flex: 0 0 auto; }
+  .p-chat .panel-sub > :not(.status) { display: none; }
+}
 .status { display: inline-flex; align-items: center; gap: 6px; }
 /* #2015: the largest processes, after the host memory chip's text. */
 .host-mem-top { margin-left: var(--s-2); opacity: 0.8; overflow-wrap: anywhere; }
@@ -425,6 +433,9 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 /* #2072: a model field — the list, and the text box "Other…" opens under it. */
 .model-pick { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
 .model-pick > select, .model-pick > input { width: 100%; }
+.model-catalog-status { display: flex; gap: var(--s-2); align-items: center; justify-content: space-between; }
+.model-catalog-status > .note { line-height: 1.5; }
+.model-catalog-status > button { flex-shrink: 0; }
 .note { font-size: var(--fs-xs); color: var(--text-3); }
 .checks { display: flex; flex-direction: column; gap: var(--s-1); max-height: 180px; overflow-y: auto; }
 .check { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-sm); }
@@ -936,6 +947,8 @@ img.amb-p { object-fit: contain; }
 .failed-send { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); font-size: var(--fs-xs); background: var(--danger-bg); border: 1px solid var(--danger-line); display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
 .failed-send .txt { flex: 1; min-width: 120px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 4.5em; overflow: hidden; }
 .composer-box { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
+/* S-30: a state note above the composer ("Connection revoked…", "still working") sat flush on the box's edge. */
+.composer-box > .note { margin: 0; padding: var(--s-2) var(--s-3) 0; }
 .composer-box:focus-within { box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-1); }
 .composer { display: flex; align-items: flex-end; gap: var(--s-1); padding: var(--s-2); }
 .composer textarea {
@@ -2673,3 +2686,291 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 .os-none { margin: 0; }
 .os-form .os-err { grid-column: 1 / -1; margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--danger); border-radius: var(--r-sm); }
 @media (max-width: 480px) { .os-form { grid-template-columns: 1fr; } }
+/* Windows CLI preview: local providers, a task composer and a compact execution history. */
+.p-windows-cli .windows-cli-content { width: 100%; max-width: 1160px; margin: 0 auto; padding: 28px 28px 48px; }
+.p-windows-cli .windows-cli-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
+.p-windows-cli .windows-cli-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
+.p-windows-cli .windows-cli-intro h2 { margin-top: 7px; font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: -.04em; }
+.p-windows-cli .windows-cli-intro p { margin-top: 7px; font-size: 13px; color: var(--text-2); line-height: 1.7; }
+.p-windows-cli .windows-cli-probe { flex-shrink: 0; min-height: 38px; border-radius: 9px; }
+.p-windows-cli .windows-cli-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
+.p-windows-cli .windows-cli-provider { min-width: 0; padding: 20px 20px 0; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
+.p-windows-cli .windows-cli-provider-head { display: flex; align-items: center; gap: 12px; }
+.p-windows-cli .windows-cli-brand { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 12px; }
+.p-windows-cli .brand-openai { color: #fff; background: #141413; }
+.p-windows-cli .brand-anthropic { color: #141413; background: #f0e9df; }
+.p-windows-cli .windows-cli-provider-name { flex: 1; min-width: 0; }
+.p-windows-cli .windows-cli-provider-name > span { font-size: 11px; color: var(--text-2); }
+.p-windows-cli .windows-cli-provider-name h3 { font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; }
+.p-windows-cli .windows-cli-badge { display: inline-flex; align-items: center; flex-shrink: 0; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
+.p-windows-cli .tone-ready { color: var(--ok); }
+.p-windows-cli .tone-neutral { color: var(--text-2); }
+.p-windows-cli .tone-failed { color: var(--danger); }
+.p-windows-cli .tone-working { color: var(--accent); }
+.p-windows-cli .windows-cli-badge.tone-ready { background: var(--ok-bg); }
+.p-windows-cli .windows-cli-badge.tone-neutral { background: var(--surface); }
+.p-windows-cli .windows-cli-provider-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin: 17px 0 14px; font-size: 12px; }
+.p-windows-cli .windows-cli-auth, .p-windows-cli .windows-cli-readiness, .p-windows-cli .windows-cli-task-state { display: inline-flex; align-items: center; gap: 7px; }
+.p-windows-cli .windows-cli-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
+.p-windows-cli .windows-cli-version { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; overflow-wrap: anywhere; }
+.p-windows-cli .windows-cli-location { border-top: 1px solid var(--border); }
+.p-windows-cli summary { cursor: pointer; list-style: none; }
+.p-windows-cli summary::-webkit-details-marker { display: none; }
+.p-windows-cli .windows-cli-location summary { display: flex; justify-content: space-between; align-items: center; min-height: 37px; color: var(--text-2); font-size: 11px; }
+.p-windows-cli details[open] > summary > .icon:last-child { transform: rotate(180deg); }
+.p-windows-cli .windows-cli-path { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.7 var(--font-mono); color: var(--text-2); }
+.p-windows-cli .windows-cli-location .windows-cli-path { padding: 0 0 12px; }
+.p-windows-cli .windows-cli-workbench { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: 20px; }
+.p-windows-cli .windows-cli-card { min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
+.p-windows-cli .windows-cli-composer { padding: 22px; }
+.p-windows-cli .windows-cli-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
+.p-windows-cli .windows-cli-section-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--surface); color: var(--text-2); }
+.p-windows-cli .windows-cli-section-head > div { flex: 1; min-width: 0; }
+.p-windows-cli .windows-cli-section-head h2 { display: flex; align-items: center; gap: 7px; font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: -.02em; }
+.p-windows-cli .windows-cli-section-head p { margin-top: 4px; color: var(--text-2); font-size: 11px; line-height: 1.6; }
+.p-windows-cli .windows-cli-field { margin-bottom: 18px; }
+.p-windows-cli .windows-cli-field > label, .p-windows-cli .windows-cli-access > legend { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
+.p-windows-cli .windows-cli-field > input, .p-windows-cli .windows-cli-field > textarea { display: block; width: 100%; max-width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg); color: var(--text); font-size: var(--fs-sm); line-height: 1.6; }
+.p-windows-cli .windows-cli-field > input:focus, .p-windows-cli .windows-cli-field > textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--accent-dim); }
+.p-windows-cli .windows-cli-field > textarea { min-height: 120px; resize: vertical; }
+.p-windows-cli .windows-cli-field .windows-cli-directory { font-family: var(--font-mono); font-size: var(--fs-xs); }
+.p-windows-cli .windows-cli-field > p { margin-top: 6px; font-size: 11px; line-height: 1.6; color: var(--text-3); }
+.p-windows-cli .windows-cli-field ::placeholder { color: var(--text-3); }
+.p-windows-cli .windows-cli-access-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.p-windows-cli .windows-cli-access-option { display: flex; align-items: flex-start; gap: 8px; padding: 11px 10px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
+.p-windows-cli .windows-cli-access-option.selected { background: var(--accent-dim); border-color: var(--focus); }
+.p-windows-cli .windows-cli-access-option input { margin: 3px 0 0; accent-color: var(--accent); width: 13px; height: 13px; flex-shrink: 0; }
+.p-windows-cli .windows-cli-access-option strong { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.6; font-weight: 600; }
+.p-windows-cli .windows-cli-access-option small { display: block; margin-top: 3px; font-size: 10px; line-height: 1.6; color: var(--text-2); }
+.p-windows-cli .windows-cli-policy { margin-top: 14px; color: var(--text-2); font-size: 11px; }
+.p-windows-cli .windows-cli-policy summary { display: flex; align-items: center; gap: 6px; min-height: 28px; }
+.p-windows-cli .windows-cli-policy p { padding: 4px 0 10px; line-height: 1.8; }
+.p-windows-cli .windows-cli-submit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; margin-top: 10px; border-top: 1px solid var(--border); }
+.p-windows-cli .windows-cli-readiness { font-size: 11px; line-height: 1.6; }
+.p-windows-cli .windows-cli-submit .btn { min-height: 40px; border-radius: 8px; }
+.p-windows-cli .windows-cli-limits { display: flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--text-3); font-size: 10px; line-height: 1.6; }
+.p-windows-cli .windows-cli-history { padding: 22px 20px 0; }
+.p-windows-cli .windows-cli-history .windows-cli-section-head { margin-bottom: 18px; }
+.p-windows-cli .windows-cli-history .icon-btn { width: 30px; height: 30px; }
+.p-windows-cli .windows-cli-count { color: var(--text-2); background: var(--surface); padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 500; }
+.p-windows-cli .windows-cli-task { margin-top: 10px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
+.p-windows-cli .windows-cli-task > summary { display: flex; align-items: center; gap: 10px; padding: 12px; font-size: 12px; }
+.p-windows-cli .windows-cli-task > summary:hover { background: var(--surface); }
+.p-windows-cli .windows-cli-task-state { flex: 1; font-weight: 600; }
+.p-windows-cli .windows-cli-task time { font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }
+.p-windows-cli .windows-cli-task-cwd { padding: 0 12px 12px; font-size: 10px; }
+.p-windows-cli .windows-cli-task-detail { padding: 0 12px 12px; }
+.p-windows-cli .windows-cli-output-label { display: flex; align-items: center; gap: 5px; padding: 9px 10px; border-radius: 6px 6px 0 0; background: var(--code-head); color: var(--text-2); font-size: 10px; }
+.p-windows-cli .windows-cli-output { padding: 12px; margin: 0; max-height: 320px; overflow: auto; border-radius: 0 0 6px 6px; background: var(--code-bg); white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.8 var(--font-mono); }
+.p-windows-cli .windows-cli-task-detail > .btn { margin-top: 10px; }
+.p-windows-cli .windows-cli-history-note { margin-top: 18px; padding: 12px 0; border-top: 1px solid var(--border); color: var(--text-3); text-align: center; font-size: 10px; }
+.p-windows-cli .windows-cli-empty { display: flex; flex-direction: column; align-items: center; padding: 42px 16px; text-align: center; }
+.p-windows-cli .windows-cli-empty > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--surface); color: var(--text-3); margin-bottom: 16px; }
+.p-windows-cli .windows-cli-empty h3 { font-size: 13px; font-weight: 600; }
+.p-windows-cli .windows-cli-empty p { max-width: 220px; margin-top: 7px; font-size: 12px; line-height: 1.8; color: var(--text-3); }
+.p-windows-cli .error { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--danger); font-size: 12px; }
+.p-windows-cli .windows-cli-error { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 14px; border-radius: 10px; background: var(--danger-bg); }
+.p-windows-cli .windows-cli-error .icon { margin-top: 2px; }
+.p-windows-cli .windows-cli-spin { animation: windows-cli-rotate 1.4s linear infinite; }
+@keyframes windows-cli-rotate { to { transform: rotate(360deg); } }
+@media (max-width: 1130px) { .p-windows-cli .windows-cli-workbench { grid-template-columns: minmax(0, 1fr); } }
+@media (max-width: 620px) {
+  .p-windows-cli .windows-cli-content { padding: 20px 16px 32px; }
+  .p-windows-cli .windows-cli-intro { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
+  .p-windows-cli .windows-cli-intro h2 { font-size: 23px; }
+  .p-windows-cli .windows-cli-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }
+  .p-windows-cli .windows-cli-provider { padding: 16px 16px 0; }
+  .p-windows-cli .windows-cli-composer, .p-windows-cli .windows-cli-history { padding: 18px 16px; }
+  .p-windows-cli .windows-cli-history { padding-bottom: 0; }
+  .p-windows-cli .windows-cli-field > input, .p-windows-cli .windows-cli-field > textarea { font-size: 16px; }
+  .p-windows-cli .windows-cli-submit { flex-direction: column; align-items: stretch; }
+  .p-windows-cli .windows-cli-access-option { padding: 10px 8px; }
+  .p-windows-cli .windows-cli-access-option strong { font-size: 11px; }
+}
+@media (prefers-reduced-motion: reduce) { .p-windows-cli .windows-cli-spin { animation: none; } }
+.p-windows-cli.windows-cli-settings .windows-cli-content { padding: 0; }
+.p-settings .col:has(> .windows-cli-settings) { max-width: 1160px; }
+.p-settings .windows-cli-settings .windows-cli-workbench { grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 1500px) { .p-settings .windows-cli-settings .windows-cli-workbench { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
+/* Runtime-first agent creation and native Windows conversations. */
+.agent-runtime-picker > legend, .agent-runtime-fields > legend { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
+.agent-runtime-picker > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
+.agent-runtime-choice { display: flex; align-items: center; gap: 9px; padding: 14px 11px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
+.agent-runtime-choice.selected { border-color: var(--focus); background: var(--accent-dim); }
+.agent-runtime-choice > input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
+.agent-runtime-choice > span { min-width: 0; }
+.agent-runtime-choice strong { display: block; font-size: 12px; line-height: 1.6; }
+.agent-runtime-choice small { display: block; margin-top: 3px; color: var(--text-2); font-size: 10px; line-height: 1.6; }
+.agent-runtime-fields { border-top: 1px solid var(--border); padding-top: 14px; }
+.agent-draft-assistant { padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
+.agent-draft-assistant > summary { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; cursor: pointer; }
+.agent-draft-assistant > .note { margin: 10px 0; font-size: 11px; }
+.agent-draft-assistant .btn { margin-top: 10px; }
+.agent-draft-assistant textarea { resize: vertical; }
+.windows-agent-nav { flex-shrink: 0; padding: 8px; border-top: 1px solid var(--border); max-height: 25vh; overflow: auto; }
+.windows-agent-nav h3 { padding: 0 12px 5px; color: var(--text-3); font-size: 11px; font-weight: 500; }
+.windows-agent-nav svg { flex-shrink: 0; }
+.p-windows-agent .windows-agent-conversation { max-width: 960px; }
+.windows-agent-identity { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
+.windows-agent-identity > span:first-child { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: white; background: #141413; flex-shrink: 0; }
+.windows-agent-identity > div { flex: 1; min-width: 0; }
+.windows-agent-identity strong { font-size: 13px; }
+.windows-agent-identity code { display: block; overflow-wrap: anywhere; color: var(--text-2); font: 11px/1.7 var(--font-mono); }
+.windows-agent-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 12px; color: var(--text-2); }
+.windows-agent-empty h2 { margin: 18px 0 8px; color: var(--text); font-size: 20px; }
+.windows-agent-empty p { max-width: 400px; font-size: 13px; line-height: 1.8; }
+.windows-agent-turn { margin-bottom: 26px; }
+.windows-agent-human { padding: 14px 18px; margin-left: 15%; border-radius: 12px; background: var(--surface); }
+.windows-agent-human strong { font-size: 12px; }
+.windows-agent-human p { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 6px; }
+.windows-agent-reply { padding: 20px 0 0; }
+.windows-agent-reply > strong { display: flex; gap: 8px; align-items: center; font-size: 13px; }
+.windows-agent-reply pre { margin: 14px 0 7px; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.8 var(--font-mono); }
+.windows-agent-reply small { color: var(--text-3); font-size: 11px; }
+.windows-agent-composer { padding: 12px 24px 18px; border-top: 1px solid var(--border); }
+.windows-agent-composer > div, .windows-agent-composer > p { max-width: 900px; margin-left: auto; margin-right: auto; }
+.windows-agent-input { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
+.windows-agent-input > textarea { display: block; width: 100%; border: 0; resize: vertical; padding: 4px; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: var(--fs-md); min-height: 60px; max-height: 180px; }
+.runtime-settings { max-width: 1080px; }
+.runtime-heading, .runtime-heading > div:last-child, .runtime-machine > header, .runtime-machine-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.runtime-heading { justify-content: space-between; margin-bottom: 20px; }
+.runtime-heading h2, .runtime-machine h3 { margin: 0; }
+.runtime-local, .runtime-machine, .runtime-pairing { padding: 18px; margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
+.runtime-local h3 { display: flex; align-items: center; gap: 8px; }
+/* M-2255: Settings → Runtime's switches. */
+.runtime-switches { padding: 18px; margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
+.runtime-switches > h3 { margin: 0 0 6px; }
+.runtime-switch { padding: 12px 0; border-bottom: 1px solid var(--border); }
+.runtime-switch-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
+.runtime-switch-row input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
+.runtime-switch-row input:disabled { cursor: not-allowed; }
+.runtime-switch-row > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.runtime-switch-row small { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
+.runtime-switch-env, .runtime-switch-pending { display: block; margin: 8px 0 0 32px; font-size: var(--fs-sm); }
+.runtime-switch-env { color: var(--warn); }
+.runtime-switches > .note { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--text-3); }
+.runtime-guide { margin: 10px 0 0 32px; font-size: var(--fs-sm); }
+.runtime-guide > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
+.runtime-guide p { margin: 8px 0; line-height: 1.5; }
+/* A command wraps only between its words (never inside an address), so all of it is in view, on a phone too. */
+.runtime-guide pre { margin: 6px 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg); overflow-x: auto; white-space: pre-wrap; overflow-wrap: normal; word-break: normal; max-width: 100%; }
+.runtime-guide-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
+.runtime-guide-warn { color: var(--warn); }
+.runtime-limit { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
+.runtime-limit label { display: flex; flex-direction: column; gap: 4px; }
+.runtime-limit small { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; }
+.runtime-limit > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.runtime-limit input { width: 6em; font-size: var(--fs-md); }
+@media (max-width: 600px) { .runtime-guide, .runtime-switch-env, .runtime-switch-pending { margin-left: 0; } }
+.runtime-machine > header > div { flex: 1; min-width: 140px; }
+.runtime-machine > header p, .runtime-machine .note { margin: 7px 0; font-size: var(--fs-sm); color: var(--text-3); }
+.runtime-machine-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--bg); }
+.runtime-status { padding: 4px 10px; border: 1px solid var(--border); border-radius: 20px; font-size: var(--fs-sm); }
+.runtime-status.is-online { color: var(--ok); }
+.runtime-status.is-pending { color: var(--warn); }
+.runtime-status.is-offline, .runtime-status.is-revoked { color: var(--text-3); }
+.runtime-machine-id { display: block; margin: 8px 0; overflow-wrap: anywhere; }
+.runtime-cli-list { padding: 0; margin: 14px 0; list-style: none; }
+.runtime-cli-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
+.runtime-cli-list li > span:nth-child(2) { flex: 1; }
+.runtime-cli-list small { display: block; color: var(--text-3); font-size: var(--fs-sm); }
+.runtime-machine-actions { margin-top: 14px; }
+/* S-30: the ZIP step is a button with its hint beside it (wrapping under it on a phone), not text flush against it. */
+.runtime-bundle-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; }
+.runtime-bundle-step .note { margin: 0; flex: 1 1 220px; }
+.runtime-pairing label, .runtime-rename label { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
+.runtime-pairing input, .runtime-rename input { width: 100%; min-width: 0; font-family: var(--font-ui); font-size: var(--fs-md); }
+.runtime-pair-code { letter-spacing: .14em; }
+.runtime-error { border: 1px solid var(--danger); padding: 12px; border-radius: 10px; overflow-wrap: anywhere; }
+.runtime-local-diagnostics { margin-top: 22px; }
+.runtime-local-diagnostics > summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
+.runtime-remote-targets { display: grid; gap: 8px; margin-top: 16px; }
+.runtime-remote-targets h4 { margin: 0 0 4px; font-size: var(--fs-md); }
+.runtime-remote-targets .agent-runtime-choice { min-width: 0; width: 100%; }
+.runtime-manage-link { display: inline-block; margin-top: 12px; }
+.inst-machine { display: flex; gap: 5px; overflow: hidden; white-space: nowrap; font-size: var(--fs-xs); color: var(--text-3); }
+/* S-30: the machine name gives way; "Connection revoked" / "Offline" always stays readable. */
+.inst-machine-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.inst-machine-status { flex: none; }
+.inst-machine.offline, .runtime-machine-offline { color: var(--warn); }
+.runtime-machine-tag { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (max-width: 600px) {
+  .runtime-heading > div:last-child { width: 100%; }
+  .runtime-machine, .runtime-pairing, .runtime-local { padding: 14px; }
+  .runtime-cli-list li { flex-wrap: wrap; }
+  .runtime-cli-list li > .note { width: 100%; }
+}
+.windows-agent-input > div { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
+.windows-agent-composer > .note { margin-top: 8px; font-size: 10px; }
+.p-windows-agent .error, .agent-draft-assistant .error { color: var(--danger); font-size: 12px; overflow-wrap: anywhere; }
+.windows-agent-blocked { padding: 16px; background: var(--warn-bg); border-radius: 10px; }
+.windows-agent-blocked p { margin-bottom: 12px; }
+@media (max-width: 620px) {
+  .agent-runtime-choice { flex-wrap: wrap; padding: 12px; }
+  .agent-runtime-choice > span { flex-basis: 100%; }
+  .windows-agent-composer { padding: 10px 12px; }
+  .windows-agent-identity { flex-wrap: wrap; }
+}
+/* Agent creation wizard: one active stage per screen, with persistent navigation actions. */
+.agent-create-wizard { display: flex; flex-direction: column; gap: 24px; }
+/* S-30: the body's top padding scrolled content through above the sticky steps (a phone showed card edges there); a
+   background-coloured copy of the bar, shifted up, covers that strip. */
+.agent-create-steps { position: sticky; top: 0; z-index: 2; background: var(--bg); box-shadow: 0 calc(-1 * var(--s-5)) 0 var(--bg); display: flex; align-items: center; gap: 8px; padding-bottom: 20px; margin: 0; list-style: none; border-bottom: 1px solid var(--border); }
+.agent-create-steps > li { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 12px; min-width: 0; }
+.agent-create-steps > li:not(:last-child)::after { content: ""; width: 28px; height: 1px; background: var(--border); margin: 0 6px; }
+.agent-create-steps > li.current { color: var(--text); font-weight: 600; }
+.agent-create-step-number { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: 50%; font-size: 11px; }
+.agent-create-steps .current .agent-create-step-number { color: var(--on-accent); background: var(--accent-fill); border-color: var(--accent-fill); }
+.agent-create-steps .complete .agent-create-step-number { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
+.agent-create-stage { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
+.agent-create-stage > h3 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em; }
+.agent-create-stage > h3:focus { outline: none; }
+.agent-create-stage > .note { margin-top: -12px; font-size: 12px; line-height: 1.8; }
+.agent-create-cli { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
+.agent-create-cli .field { margin: 0; }
+.agent-create-selection { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
+.agent-create-selection > div { flex: 1; min-width: 0; }
+.agent-create-selection strong { display: block; font-size: 12px; }
+.agent-create-selection span { display: block; color: var(--text-2); font-size: 11px; overflow-wrap: anywhere; }
+.agent-create-wizard .agent-runtime-fields { padding-top: 0; border-top: 0; }
+.agent-create-success { align-items: center; text-align: center; padding: 18px 0 8px; }
+.agent-create-success-icon { display: grid; place-items: center; width: 64px; height: 64px; color: var(--ok); background: var(--ok-bg); border-radius: 50%; }
+.agent-create-success dl { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 12px 20px; width: 100%; margin: 0; padding: 18px; border: 1px solid var(--border); border-radius: 10px; text-align: left; font-size: 13px; }
+.agent-create-success dt { color: var(--text-2); }
+.agent-create-success dd { margin: 0; overflow-wrap: anywhere; }
+.agent-create-success code { font-family: var(--font-mono); font-size: 12px; }
+@media (max-width: 620px) {
+  .agent-create-steps { gap: 6px; }
+  .agent-create-steps > li { gap: 5px; font-size: 11px; }
+  .agent-create-steps > li:not(:last-child)::after { width: 12px; margin: 0 2px; }
+  .agent-create-selection { gap: 8px; padding: 10px; }
+  .agent-create-selection .btn { padding: 0 8px; }
+  .agent-create-stage > h3 { font-size: 20px; }
+}
+.cli-picker { width: 100%; min-width: 0; }
+.cli-picker-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
+.cli-picker-trigger:hover:not(:disabled) { border-color: var(--accent); }
+.cli-picker-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.cli-picker-trigger:disabled { opacity: .5; cursor: not-allowed; }
+.cli-product-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; }
+.cli-product-mark svg, .cli-product-mark img { display: block; flex-shrink: 0; }
+.cli-picker-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cli-picker-chevron { display: inline-flex; color: var(--text-3); }
+.cli-picker .menu-list { left: 0; right: 0; min-width: 0; max-height: 280px; overflow-y: auto; }
+.cli-picker .menu-list.menu-up { top: auto; bottom: calc(100% + 6px); }
+.cli-picker .menu-list.menu-compact { max-height: 180px; }
+.cli-picker .menu-list.menu-short { max-height: 96px; }
+.cli-picker .menu-item { padding-top: 8px; padding-bottom: 8px; }
+.cli-picker .menu-radio > span:last-child { flex: 1; min-width: 0; }
+.cli-picker-option { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.cli-picker-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.cli-picker-description { color: var(--text-2); font-size: var(--fs-xs); line-height: 1.4; }
+.cli-discovery-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
+.cli-discovery-status { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
+.cli-discovery-status > .out-spin { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; color: var(--accent); }
+.cli-discovery-status > div { min-width: 0; }
+.cli-discovery-status strong { display: block; font-size: var(--fs-sm); line-height: 1.5; }
+.cli-discovery-status p, .cli-discovery-status small { display: block; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.6; margin: 4px 0 0; overflow-wrap: anywhere; }
+.cli-discovery-status .btn { margin-top: 10px; }
+.cli-discovery-status.is-error { border-color: var(--border-strong); }
+.cli-discovery-status.is-error > svg { flex: 0 0 auto; margin-top: 2px; }

package/dist/ui/shared/app.js

@@ -85,6 +85,8 @@ if (mode === "full") {
   let chatLoads = 0;
   panels.set("chat", { load: () => (chatLoads++ === 0 ? chatBoot : loadChat()).then((m) => m.ChatPanel) });
   if (!guest) {
+    const loadWindowsAgent = retryable((a) => import(retryUrl("/ui/js/panel-windows-agent.js", a)));
+    panels.set("windows-agent", { load: () => loadWindowsAgent().then((m) => m.WindowsAgentPanel) });
     panels.set("fleet", { load: () => loadFleet().then((m) => m.FleetPanel) });
     panels.set("settings", { load: () => loadSettings().then((m) => m.SettingsPanel) });
     // #2347: the restart banner's Restart now, in any panel — the Settings runner (behind the session) does it.
@@ -120,6 +122,8 @@ if (mode === "full") {
     startNeedsNotifier({ open: (instance) => navigate(chatPath(instance)) });
     // #2233: a backend sign-in running anywhere is shown on every admin page (the module lives behind the session gate).
     import("/ui/js/backend-signin.js").then((m) => m.installSignIn(), () => {});
+    // alpha.2 (M-2300): an agent's Windows request waiting for a web-only fleet's owner — counted in Needs you everywhere.
+    import("/ui/js/agent-proposals.js").then((m) => m.installProposals(), () => {});
   }
   // #1665: this device's first upload of its own choices (once), then another device's changes at each status frame.
   // A guest's page (#2855) uploads and saves only its own keys (prefsWritable(key)); another device's changes reach it at

package/dist/ui/shared/header-tools.js

@@ -7,7 +7,7 @@
 // Fleet read (#1300: no style attribute). View's terminal multiplies its fitted size by VIEW_SCALE, as its density did.
 import { html, useEffect, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
-import { createStore, useStore } from "./app-store.js";
+import { appStore, createStore, useStore } from "./app-store.js";
 import { Icon } from "./ui-icons.js";
 import { UsageBody, UsageCompactToggle, UsageDialog } from "./usage-dialog.js";
 
@@ -124,7 +124,9 @@ export function useRailWidth() {
 export function UsageRail({ route }) {
   const wide = useRailWidth();
   const { open } = useStore(usageRailStore);
-  if (!wide || !open || !route || !RAIL_PANELS.includes(route.panel) || !usageOffered()) return null;
+  const { instances = [] } = useStore(appStore);
+  const instance = instances.find(item => item.name === route?.instance);
+  if (!wide || !open || !route || !RAIL_PANELS.includes(route.panel) || !usageOffered() || instance?.capabilities?.usage === false) return null;
   return html`<aside data-trust="usage" class="u-rail" aria-label=${t("view.usage.title_plain")}>
     <div class="u-rail-head"><h2>${t("view.usage.title")}</h2><${UsageCompactToggle} />
       <button type="button" class="icon-btn" onClick=${() => setUsageRail(false)} aria-label=${t("app.usageHide")} title=${t("app.usageHide")}><${Icon} name="close" size=${16} /></button></div>
@@ -154,8 +156,8 @@ export function UsageButton({ navKey }) {
 }
 
 /** The shared controls, in the one order every page uses. `navKey`: the page's navigation (the usage dialog's owner). */
-export function HeaderTools({ view = false, navKey }) {
-  return html`<${TextSizeButton} view=${view} /><${UsageButton} navKey=${navKey} />`;
+export function HeaderTools({ view = false, navKey, usage = true }) {
+  return html`<${TextSizeButton} view=${view} />${usage ? html`<${UsageButton} navKey=${navKey} />` : null}`;
 }
 /** Where a page with no control of its own after the shared ones (Log) keeps the room Chat's ⋯ takes: the same box on every tab. */
 export function HeaderSlot() {

package/dist/ui/shared/instance-nav.js

@@ -79,6 +79,14 @@ export function modelText(it, raw = it && it.model) {
 }
 const BACKEND_LABELS = { "claude-code": "Claude Code", "kiro-cli": "Kiro CLI", codex: "Codex", grok: "Grok Build", antigravity: "Antigravity", opencode: "OpenCode" };
 export function backendLabel(backend) { return BACKEND_LABELS[backend] || backend || "Unknown"; }
+export function runtimeLabel(runtime) { return runtime === "windows" ? "Windows" : runtime === "wsl" ? "WSL / Linux" : runtime || ""; }
+/** Missing capabilities preserve the existing Linux UI; native runtimes expose only implemented controls. */
+export function supportsInstanceFeature(instance, feature) {
+  const key = feature === "view" ? "terminal" : feature;
+  if (typeof instance?.capabilities?.[key] === "boolean") return instance.capabilities[key];
+  if (feature === "log" && typeof instance?.capabilities?.terminal === "boolean") return instance.capabilities.terminal;
+  return instance?.runtime !== "windows" || !["terminal","view","log","details","attachments","commands","effort","send_while_busy"].includes(feature);
+}
 export const KNOWN_BACKENDS = new Set(Object.keys(BACKEND_LABELS));
 export const STATUS_KEYS = { running: "statusRunning", paused: "statusPaused", stopped: "statusStopped", crashed: "statusCrashed" };
 
@@ -97,7 +105,7 @@ export function normalizeFilter(query) { return String(query == null ? "" : quer
 /** Case-insensitive substring on name (incl. display name), model and backend. */
 export function instanceMatchesFilter(it, needle, labelOf) {
   if (!needle) return true;
-  const fields = [nameOf(it), it.display_name, it.model, it.backend, labelOf ? labelOf(it.backend) : null];
+  const fields = [nameOf(it), it.display_name, it.model, it.backend, it.machine_name, it.machine_id, runtimeLabel(it.runtime), labelOf ? labelOf(it.backend) : null];
   return fields.some((value) => typeof value === "string" && value.toLowerCase().includes(needle));
 }
 /**
@@ -136,6 +144,9 @@ export function instanceTooltip(it) {
   if (it.display_name && it.display_name !== name) lines.push(it.display_name, `(${name})`);
   else lines.push(name);
   lines.push(line("tooltipBackend", backendLabel(it.backend)));
+  if (it.runtime) lines.push(`Runtime: ${runtimeLabel(it.runtime)}`);
+  if (it.machine_id) lines.push(line("tooltipMachine",it.machine_name || it.machine_id));
+  if (it.machine_id && it.machine_status !== "online") lines.push(tn(it.machine_status === "revoked" ? "machineRevoked" : "machineOffline"));
   const src = (s) => (s === "instance" || s === "classic" ? tn("srcConfigured") : s === "fleet-default" ? tn("srcFleetDefault") : "");
   lines.push(line("tooltipModel", (modelText(it) || tn("tooltipUnavailable")) + src(it.model_source)));
   lines.push(line("tooltipStatus", status));
@@ -283,6 +294,8 @@ function writeFacetsOpen(open) { try { localStorage.setItem(FACETS_KEY, JSON.str
 
 /** The Favorites group's key among the tag groups: no tag can be it (a group name is never a control character). */
 const FAV_GROUP = "\u0000favorites";
+/** #3008 G2: a web-only fleet's General (its status row says `general: true`), pinned first under its own head. */
+const GENERAL_GROUP = "\u0000general";
 /** #1936: the open instance, pinned on top while a filter is on. */
 const PINNED_GROUP = "\u0000pinned";
 function persistOrder(groupNames, instByGroup) {
@@ -490,9 +503,11 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const [editing, setEditing] = useState(false);
   // Where a row goes: the view the page is in (#1523 §3.1). View → View; Details → Details; everywhere else, a Fleet tab
   // included (#1917: the user's call, replacing Q4 = A), → Chat. The anonymous reader only ever has View.
-  const rowPath = viewOnly || (route && route.panel === "view") ? viewPath
+  const panelPath = viewOnly || (route && route.panel === "view") ? viewPath
     : route && route.panel === "log" ? logPath                                  // #1218: Log → Log
     : route && route.panel === "details" ? detailsPath : chatPath;
+  const rowPath = (name) => byName.get(name)?.runtime === "windows" && ["view", "log", "details"].includes(route?.panel)
+    ? chatPath(name) : panelPath(name);
   const active = route && (route.panel === "chat" || route.panel === "view" || route.panel === "log" || route.panel === "details") ? route.instance : null;
   const own = (map, name) => Object.prototype.hasOwnProperty.call(map, name);
   const byName = new Map(items.map((it) => [nameOf(it), it]));
@@ -502,7 +517,10 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   // their order. Changing them: a signed-in page that may write preferences (not the public link, not the anonymous
   // reader — they still see the list).
   const known = new Set(byName.keys());
-  const favs = nav.favorites.filter((n) => known.has(n));
+  // #3008 G2: the General, when the server marks one (a web-only fleet), comes first — out of every other group.
+  const general = items.find((it) => it && it.general === true);
+  const generalName = general ? nameOf(general) : null;
+  const favs = nav.favorites.filter((n) => known.has(n) && n !== generalName);
   const favSet = new Set(favs);
   const canStar = !viewOnly && prefsWritable("nav.favorites");
   // #1920: a guest's list is not reordered (the order is the host's). #2855: it stars, sorts and filters as its own
@@ -520,14 +538,15 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   let shownGroups, shownInsts;
   if (recent) {
     const sortRecent = byRecentReply(ageOf);
-    const rest = groupNames.flatMap((g) => instByGroup.get(g) || []).filter((n) => !favSet.has(n)).sort(sortRecent);
+    const rest = groupNames.flatMap((g) => instByGroup.get(g) || []).filter((n) => !favSet.has(n) && n !== generalName).sort(sortRecent);
     shownGroups = [...(favs.length ? [FAV_GROUP] : []), ...(rest.length ? [RECENT_GROUP] : [])];
     shownInsts = new Map([[FAV_GROUP, favsSorted ? [...favs].sort(sortRecent) : favs], [RECENT_GROUP, rest]]);
   } else {
     shownGroups = favs.length ? [FAV_GROUP, ...groupNames] : groupNames;
-    shownInsts = new Map([...instByGroup].map(([g, names]) => [g, names.filter((n) => !favSet.has(n))]));
+    shownInsts = new Map([...instByGroup].map(([g, names]) => [g, names.filter((n) => !favSet.has(n) && n !== generalName)]));
     if (favs.length) shownInsts.set(FAV_GROUP, favs);
   }
+  if (generalName) { shownGroups = [GENERAL_GROUP, ...shownGroups]; shownInsts.set(GENERAL_GROUP, [generalName]); }
   const f = nav.filter;
   const shown = filterSidebar(shownGroups, shownInsts, byName, f.q, backendLabel, { status: f.status, cli: f.cli, statusOf: facetOf });
   // #1936: while a filter is on, the instance you have open stays on top, pinned and marked "Current", whether or not
@@ -589,7 +608,9 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   const row = (name, g, i, count) => {
     const it = byName.get(name);
     // #1722: both names, the preferred one first; one line when there is no other.
-    const { primary: label, secondary } = namesOf(it, names.primary);
+    const preferred = namesOf(it, names.primary);
+    const label = it.runtime === "windows" ? it.display_name || preferred.primary : preferred.primary;
+    const secondary = it.runtime === "windows" ? backendLabel(it.backend) : preferred.secondary;
     const facet = facetOf(name);
     const waiting = own(awaiting, name) ? awaiting[name] : null;
     const on = name === active;
@@ -606,9 +627,10 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
         aria-current=${on ? "page" : undefined} onClick=${onPick} ...${fav ? {} : dragProps({ type: "instance", name, group: g })}>
       <${InstanceAvatar} it=${it} state=${dotState(it, own(exec, name) ? exec[name] : null, waiting)} cli=${true} />
       <span class="inst-text"><span class="inst-line"><span class="inst-name" title=${label}>${label}</span>
-          <span class="v-meta">${it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</span></span>
+          <span class="v-meta">${it.runtime === "windows" ? "Windows" : it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</span></span>
         ${two ? html`<span class="inst-line inst-line2"><span class="inst-alt" title=${secondary || undefined}>${secondary || ""}</span>
           ${mins != null ? html`<span class=${`inst-when${fade > 0 ? " fresh" : ""}`} title=${tn("replyTitle", { time: new Date(Date.parse(it.last_reply)).toLocaleString() })}>${replyText(mins)}</span>` : null}</span>` : null}
+        ${it.machine_id ? html`<span class=${`inst-machine${it.machine_status !== "online" ? " offline" : ""}`} title=${tn("tooltipMachine",{value:it.machine_name || it.machine_id})}><span class="inst-machine-name">${it.machine_name || it.machine_id}</span>${it.machine_status !== "online" ? html`<span class="inst-machine-status">${tn(it.machine_status === "revoked" ? "machineRevoked" : "machineOffline")}</span>` : null}</span>` : null}
         ${facet === "needs" ? html`<span class="inst-sub"><span class="badge-await" title=${waiting || t("app.approxNote")}>${t("app.needsYou")}</span></span>` : null}
         <span class="sr-only">${tn("tooltipBackend", { value: backendLabel(it.backend) })}</span></span>
     </a>${fav && editing && canStar ? html`<button type="button" class="icon-btn inst-move" aria-label=${tn("favUp", { name: label })}
@@ -639,6 +661,10 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       if (g === RECENT_GROUP) return html`<div key=${g} class="v-group v-recent" role="group" aria-label=${tn("recentOthers")}>
         <div class="v-group-head recent-head"><${Icon} name="clock" size=${14} /><span class="grow">${tn("recentOthers")}</span><span class="count">${names.length}</span></div>
         <ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul></div>`;
+      // #3008 G2: the General — always open, first, not dragged or starred into another place.
+      if (g === GENERAL_GROUP) return html`<div key=${g} class="v-group v-general" role="group" aria-label=${tn("generalGroup")}>
+        <div class="v-group-head general-head"><span class="grow">${tn("generalGroup")}</span></div>
+        <ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul></div>`;
       // #1664: Favorites — always open, not dragged (↑ ↓ in Edit), named in the page's language.
       if (g === FAV_GROUP) return html`<div key=${g} class="v-group v-fav" role="group" aria-label=${tn("favorites")}>
         <div class="v-group-head fav-head"><${Icon} name="star" size=${14} cls="fav-mark" /><span class="grow">${tn("favorites")}</span><span class="count">${names.length}</span></div>

package/dist/ui/shared/instance-switch.js

@@ -7,19 +7,20 @@ import { html } from "./app-html.js";
 import { openSearch } from "./app-shell.js";
 import { t } from "./app-i18n.js";
 import { chatPath, detailsPath, logPath, viewPath } from "./app-route.js";
+import { supportsInstanceFeature } from "./instance-nav.js";
 
 /**
  * current: "chat" | "view" | "log" | "details". #1218: Log sits between View and Details. `data-label`: each tab is as
  * wide as its label in the current tab's weight (app.css), so the bar keeps its size whichever tab is current.
  */
-export function InstanceSwitch({ name, current, guest = false }) {
+export function InstanceSwitch({ name, current, guest = false, instance }) {
   const seg = (key, href, label) => html`<a key=${key} class=${`seg-item${current === key ? " active" : ""}`} href=${href}
     aria-current=${current === key ? "page" : undefined} data-label=${label}>${label}</a>`;
   if (guest) return html`<nav class="inst-switch seg" aria-label=${t("app.instanceViews", name)}>
-    ${seg("chat", chatPath(name), t("app.chat"))}${seg("view", viewPath(name), t("app.view"))}<button key="search" type="button" class="seg-item"
+    ${seg("chat", chatPath(name), t("app.chat"))}${supportsInstanceFeature(instance,"view") ? seg("view", viewPath(name), t("app.view")) : null}<button key="search" type="button" class="seg-item"
       data-label=${t("app.search")} onClick=${() => openSearch({ instance: name })}>${t("app.search")}</button>
   </nav>`;
   return html`<nav class="inst-switch seg" aria-label=${t("app.instanceViews", name)}>
-    ${seg("chat", chatPath(name), t("app.chat"))}${seg("view", viewPath(name), t("app.view"))}${seg("log", logPath(name), t("app.log"))}${seg("details", detailsPath(name), t("app.details"))}
+    ${seg("chat", chatPath(name), t("app.chat"))}${supportsInstanceFeature(instance,"view") ? seg("view", viewPath(name), t("app.view")) : null}${supportsInstanceFeature(instance,"log") ? seg("log", logPath(name), t("app.log")) : null}${supportsInstanceFeature(instance,"details") ? seg("details", detailsPath(name), t("app.details")) : null}
   </nav>`;
 }