@songsid/agend 2.3.5-alpha.4 → 2.3.5-alpha.5

package/dist/ui/shared/app.css

@@ -296,6 +296,18 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .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; }
+/* M-2556: bound Fleet's warning independently of tab placement. Cached panels without a tooltip keep wrapping. */
+.p-fleet .panel-sub:has(.host-mem) { flex: 0 1 16rem; width: 16rem; min-width: 0; max-width: 100%; white-space: normal; }
+.p-fleet .host-mem { --fleet-memory-header: 1; display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 2px 6px; min-width: 0; max-width: 100%; white-space: normal; }
+.p-fleet .host-mem > .dot { margin-top: 6px; }
+.p-fleet .host-mem-top { grid-column: 2; min-width: 0; max-width: 100%; margin-left: 0; }
+.p-fleet .host-mem-top[title] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (max-width: 899px) {
+  .p-fleet .panel-head:has(.host-mem) { flex-wrap: wrap; }
+  .p-fleet .panel-title:has(.host-mem) { display: contents; }
+  .p-fleet .panel-title:has(.host-mem) > h1 { flex: 1; }
+  .p-fleet .panel-sub:has(.host-mem) { order: 1; flex: 1 0 100%; width: 100%; }
+}
 .panel-actions { display: flex; align-items: center; gap: var(--s-1); }
 /* #1523 N2: the instance view switch — beside the title on a wide screen; on a phone, a row of tabs under the header. */
 .inst-switch.seg { padding: 0; margin: 0; width: auto; max-width: none; flex-shrink: 0; }
@@ -351,6 +363,11 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
    its row (a phone puts them on a row of their own, under it). */
 .panel-head .btn-sm { min-height: 36px; }
 @media (min-width: 900px) { .panel-head .inst-switch .seg-item { min-height: 36px; } }
+/* M-2542: Fleet's tabs on its title row — the title, then the tabs (scrolling sideways if they do not fit), then the
+   header's tools; under 900 px a row of their own under the header, as the instance tabs. Never wider than the page. */
+.p-fleet .panel-head .panel-title:has(+ .fleet-tabs) { flex: 0 1 auto; }   /* M-2542: only when everything fits (panel-fleet) */
+.fleet-tabs { display: flex; gap: var(--s-1); flex: 1 1 auto; min-width: 0; overflow-x: auto; }
+.panel-head .fleet-tabs .seg-item { min-height: 36px; flex-shrink: 0; }
 @media (max-width: 899px) {
   .panel-head:has(.inst-switch) { flex-wrap: wrap; }
   .inst-switch.seg { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 0 var(--s-1); }
@@ -878,6 +895,10 @@ img.amb-p { object-fit: contain; }
 .pv-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--s-3) var(--s-3); }
 .pv-panel-body .pv-holder { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; }
 .pv-panel-body.show-code .pv-holder { display: none; }
+/* M-2448: a Markdown file in the panel — the chat's Markdown look, scrolling inside the panel (never the page). */
+.pv-code.pv-md { font-family: var(--font-ui); font-size: var(--fs-md); line-height: 1.6; white-space: normal; padding: var(--s-3) var(--s-4); }
+.pv-md .md { max-width: 860px; overflow-wrap: anywhere; }
+.pv-md .tc-pre { white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--fs-xs); }
 .preview-frame.fill { flex: 1; height: 100%; min-height: 0; }
 .pv-code { flex: 1; min-height: 0; margin: 0; overflow: auto; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5;
   background: var(--surface); border-radius: var(--r-sm); padding: var(--s-3); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
@@ -1105,7 +1126,7 @@ img.amb-p { object-fit: contain; }
 .s-web-authority .s-va-sessions li { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); overflow-wrap: anywhere; }
 /* #2453: "over your named link" stays one phrase (the list item may break anywhere, CJK included). */
 .s-web-authority .s-va-named { white-space: nowrap; }
-.s-web-authority .s-va-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); border-radius: var(--r-sm); padding: var(--s-1) var(--s-2); }
+.s-web-authority .s-va-warn, .s-devices .s-va-warn, .dlg .s-va-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); border-radius: var(--r-sm); padding: var(--s-1) var(--s-2); }
 .s-web-authority .save-row { flex-wrap: wrap; }
 /* #1920: a guest's note under the composer — on a phone too, where the key hints are hidden. */
 .guest-note { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
@@ -1456,6 +1477,11 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .u-stale { font-weight: var(--fw-semibold); }
 .u-stale-detail { color: var(--text-3); font-size: var(--fs-xs); }
 .u-sub { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
+/* #3066 §1: a weekly quota's measured 100% under its bar, and its notes (the fleet-only limit always). */
+.u-cap { margin-top: 4px; font-size: var(--fs-xs); }
+.u-cap-line { color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.u-cap-wait .u-cap-line { color: var(--text-3); }
+.u-cap-note { color: var(--text-3); overflow-wrap: anywhere; }
 .u-err { color: var(--warn); font-size: var(--fs-sm); }
 .u-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
 /* #1673: the usage rail beside the page on a wide screen (header-tools.js UsageRail; shown only at min-width 1200px). */
@@ -1578,6 +1604,60 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .drawer { border-top: 1px solid var(--border); padding-top: var(--s-2); }
 .drawer > summary { cursor: pointer; color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); padding: var(--s-1) 0; }
 .drawer-body { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-2); }
+/* Settings → Shared agent settings (settings-shared.js): two cards, a field's header (name, marks, ⓘ, usage pill), segmented
+   choices, switches, the grey line of explanation and the amber note that shows only once a field is edited. */
+.s-shared { display: flex; flex-direction: column; gap: var(--s-3); }
+.s-group h3 { font-size: var(--fs-md); letter-spacing: 0; text-transform: none; color: var(--text); }
+.s-group > div:first-child { display: flex; flex-direction: column; gap: 2px; }
+.s-wide { grid-column: 1 / -1; min-width: 0; }
+.s-lab { display: flex; align-items: center; gap: var(--s-2); min-height: 22px; min-width: 0; }
+.s-lab label, .s-lab .s-lab-text { color: var(--text); font-weight: var(--fw-semibold); word-break: keep-all; }
+.tag.s-host { background: var(--accent-dim); color: var(--accent); }
+.s-tipwrap { position: relative; display: inline-flex; flex: none; }
+.s-tipwrap.s-use { margin-left: auto; flex: 0 1 auto; min-width: 0; }
+.s-use .s-tipbtn { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+.s-tipbtn { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: help; text-align: inherit; }
+.s-i .s-tipbtn { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-full); border: 1px solid var(--border-strong);
+  color: var(--text-3); font: var(--fw-semibold) 11px/1 var(--font-ui); }
+.s-i .s-tipbtn:hover, .s-i .s-tipbtn:focus-visible { color: var(--accent); border-color: var(--accent); }
+.s-use .s-tipbtn { font-size: 11px; font-weight: var(--fw-regular); color: var(--text-3); padding: 1px var(--s-2); border-radius: var(--r-full); border: 1px solid var(--border); white-space: nowrap; }
+.s-use .s-tipbtn:hover, .s-use .s-tipbtn:focus-visible { color: var(--text); border-color: var(--text-3); }
+.s-tipbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.s-tipbody { position: absolute; z-index: 60; top: calc(100% + 6px); left: var(--tip-dx, 0); width: max-content; max-width: 290px; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); border: 1px solid var(--border-strong);
+  background: var(--surface-2); color: var(--text); font-size: var(--fs-xs); line-height: 1.5; box-shadow: var(--shadow-2); pointer-events: none; text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); }
+.s-tipbody[hidden] { display: none; }
+.s-tipbody.above { top: auto; bottom: calc(100% + 6px); }
+.s-shared .field { container-type: inline-size; }
+.s-shared .field:has(.s-tipbody:not([hidden])) { position: relative; z-index: 5; }
+/* A field in a narrow column has no room for its name, marks and usage pill on one line: the pill goes under them, in every field of the column alike (the controls below stay level). */
+@container (max-width: 360px) {
+  .s-lab { flex-wrap: wrap; row-gap: 2px; }
+  .s-tipwrap.s-use { margin-left: 0; flex-basis: 100%; }
+}
+.s-info { display: flex; gap: var(--s-2); margin: 0; padding: 6px var(--s-3); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs); }
+.s-note { display: flex; flex-direction: column; gap: 2px; padding: 6px var(--s-3); border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn); font-size: var(--fs-xs); }
+.s-note p { margin: 0; }
+.s-seg { display: flex; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg); }
+.s-seg-opt { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 var(--s-2); border-radius: 6px;
+  color: var(--text-2); font-size: var(--fs-sm); text-align: center; cursor: pointer; }
+.s-seg-opt:hover { color: var(--text); }
+.s-seg-opt.on { background: var(--accent-fill); color: var(--on-accent); font-weight: var(--fw-semibold); }
+.field .s-seg-opt input[type="radio"], .field .s-switch input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+.s-seg-opt:has(input:focus-visible), .s-switch:has(input:focus-visible) .s-track { outline: 2px solid var(--focus); outline-offset: 1px; }
+.s-switch { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 34px; cursor: pointer; }
+.field .s-switch input[type="checkbox"] { inset: 0 auto 0 0; width: 38px; }
+.s-track { position: relative; flex: none; width: 38px; height: 22px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border-strong); transition: background 0.15s; }
+.s-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: left 0.15s, background 0.15s; }
+.s-switch input:checked + .s-track { background: var(--ok); border-color: var(--ok); }
+.s-switch input:checked + .s-track::after { left: 18px; background: #fff; }
+.s-switch-text { font-size: var(--fs-sm); color: var(--text-2); }
+.s-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-4); }
+.s-checks .check { align-items: flex-start; }
+.s-checks .check input { margin-top: 3px; }
+.s-hang-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
+.field .s-hang-row input[type="number"] { width: 72px; }
+.s-unit { font-size: var(--fs-sm); color: var(--text-2); }
+@media (max-width: 620px) { .s-checks { grid-template-columns: minmax(0, 1fr); } }
 .chips-box { display: flex; flex-direction: column; gap: var(--s-1); }
 .chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
 .chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px var(--s-2); border-radius: var(--r-full); background: var(--surface-2); font-size: var(--fs-xs); }
@@ -2197,6 +2277,16 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 .us-meta { display: block; font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
 .us-est { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-3); }
 .us-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+/* #3066 §3: a row's numbers carry small marks (◐ partly priced, † the CLI's amount, ≈ estimated) and "—" with a reason,
+   each said in its tooltip; the key under the table names only the marks that appear. */
+.us-mark { margin-left: 2px; color: var(--text-3); font-size: var(--fs-xs); cursor: help; }
+.us-mark.us-approx { margin-left: 0; margin-right: 1px; }
+.us-none { cursor: help; }
+.us-key { margin-top: 6px; }
+/* #3066 §2: each model's speed after the first token. */
+.us-speed { margin-top: 12px; }
+.us-speed .row-item { gap: 8px; flex-wrap: wrap; }
+.us-speed .num { font-variant-numeric: tabular-nums; }
 .us-trend, .us-heat { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
 .us-trend h3, .us-heat h3, .us-rest h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
 .us-scroll { overflow-x: auto; max-width: 100%; }
@@ -3307,16 +3397,11 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 .p-settings [data-section="agent-defaults"] .s-general { width: 100%; margin: 0 auto; }
 .p-settings [data-section="agent-defaults"] .s-general > .card { margin: 0; }
 .p-settings :is([data-section="agent-defaults"], [data-section="chat"]) .s-general .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.p-settings .s-defaults-collaboration .grid2 > .field:first-child { grid-column: 1 / -1; }
-.p-settings .s-defaults-permissions .dash-perms { margin: 0; padding: 0; }
-.p-settings .s-defaults-permissions .dash-perms > .check { padding: 10px 0; border-bottom: 1px solid var(--border); }
-.p-settings .s-defaults-permissions .dash-perms > .check:last-child { border-bottom: 0; }
-.p-settings .s-defaults-workspace .card { padding: 0; border: 0; margin: 0; background: transparent; }
-.p-settings [data-section="agent-defaults"] .s-general > .drawer { padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
-.p-settings [data-section="agent-defaults"] .s-general > .drawer > summary { padding: 16px 20px; font-weight: var(--fw-semibold); }
-.p-settings [data-section="agent-defaults"] .s-general > .drawer > .drawer-body { display: flex; flex-direction: column; padding: 0 20px 20px; gap: 20px; }
-.p-settings [data-section="agent-defaults"] .s-general > .drawer > .drawer-body > .card { padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
-.p-settings [data-section="agent-defaults"] .s-general > .drawer > .drawer-body > .card + .card { padding-top: 20px; border-top: 1px solid var(--border); }
+.p-settings [data-section="agent-defaults"] .s-general > .s-shared > .drawer { padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
+.p-settings [data-section="agent-defaults"] .s-general > .s-shared > .drawer > summary { padding: 16px 20px; font-weight: var(--fw-semibold); }
+.p-settings [data-section="agent-defaults"] .s-general > .s-shared > .drawer > .drawer-body { display: flex; flex-direction: column; padding: 0 20px 20px; gap: 20px; }
+.p-settings [data-section="agent-defaults"] .s-general > .s-shared > .drawer > .drawer-body > .card { padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
+.p-settings [data-section="agent-defaults"] .s-general > .s-shared > .drawer > .drawer-body > .card + .card { padding-top: 20px; border-top: 1px solid var(--border); }
 .p-settings .s-classic-defaults-card { margin: 0; }
 @container settings-page (min-width: 620px) {
   .p-settings .s-agent-runtime { grid-column: 1; }
@@ -3459,6 +3544,29 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 .p-settings .s-auth-section-head h3 { margin: 0; color: var(--text); font-size: 16px; font-weight: var(--fw-semibold); line-height: 1.5; text-transform: none; letter-spacing: normal; }
 .p-settings .s-auth-section-head p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-3); }
 .p-settings .s-auth-host-badge { flex: none; border: 1px solid var(--border); padding: 3px 8px; border-radius: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
+/* Refs #3061 (P2a): Devices & sign-in — the code field, and who is asking. */
+.p-settings .s-dev-code, .dlg .s-dev-code { font-family: var(--font-mono); font-size: 20px; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
+.dlg .s-dev-facts { margin: 0 0 12px; display: grid; gap: 6px; }
+.dlg .s-dev-facts > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; align-items: baseline; }
+.dlg .s-dev-facts dt { margin: 0; color: var(--text-3); font-size: 13px; }
+.dlg .s-dev-facts dd { margin: 0; color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
+.dlg .s-dev-facts code { font-family: var(--font-mono); letter-spacing: .08em; }
+/* Refs #3061: the confirm screen leads with where the request is from and its address — what tells devices apart; the name is the browser's word. */
+.dlg .s-dev-facts .s-dev-key dt { color: var(--text-2); }
+.dlg .s-dev-facts .s-dev-key dd { font-weight: var(--fw-semibold); }
+/* Refs #3061: the authenticator set-up dialog — the QR code sits in the middle, as on the reference page. */
+.dlg .s-out-qr { align-self: center; }
+/* Refs #3061 (P2b): the signed-in devices of Devices & sign-in. */
+.p-settings .s-devices .s-dev-listhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 14px 0 6px; }
+.p-settings .s-devices .s-dev-listhead h4 { margin: 0; font-size: var(--fs-sm); color: var(--text-2); font-weight: var(--fw-semibold); }
+.p-settings .s-dev-list { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
+.p-settings .s-dev-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
+.p-settings .s-dev-row + .s-dev-row { border-top: 1px solid var(--border); }
+.p-settings .s-dev-row.current { background: var(--surface-2); }
+.p-settings .s-dev-main { display: grid; gap: 2px; min-width: 0; }
+.p-settings .s-dev-name { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
+.p-settings .s-dev-meta { font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
+.p-settings .s-dev-row .btn { flex: none; }
 .p-settings .s-auth-state { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 3px 8px; border-radius: 6px; color: var(--text-3); background: var(--surface-2); font-size: 12px; font-weight: var(--fw-regular); line-height: 1.5; white-space: nowrap; }
 .p-settings .s-auth-state.is-usable { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
 .p-settings .s-auth-state:is(.is-not_signed_in, .is-too_old) { color: var(--warn); background: var(--warn-bg); }
@@ -3615,21 +3723,9 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
 /* Defaults share the content width, with collaboration controls in a single column. */
 .p-settings .s-defaults-layout { width: 100%; margin: 0 auto; min-width: 0; }
 .p-settings .s-defaults-layout > .s-general { gap: 16px; }
-.p-settings .s-defaults-layout > .s-general > .card { gap: 12px; padding: 20px; }
+.p-settings .s-defaults-layout > .s-general > .s-shared { gap: 16px; }
+.p-settings .s-defaults-layout > .s-general > .s-shared > .card { gap: 12px; padding: 20px; }
 .p-settings .s-defaults-layout .grid2 { gap: 12px 16px; align-items: start; }
-.p-settings .s-defaults-model .grid2 > .field:first-child { grid-column: 1; grid-row: 1; }
-.p-settings .s-defaults-model .grid2 > .field:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
-.p-settings .s-defaults-model .grid2 > .field:nth-child(3) { grid-column: 1; grid-row: 2; }
-.p-settings .s-defaults-layout .s-defaults-collaboration > .grid2 { grid-template-columns: minmax(0, 1fr); }
-.p-settings .s-defaults-collaboration .grid2 > .field { grid-column: 1; }
-.p-settings .s-defaults-collaboration .grid2 > .field:first-child { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 6px 16px; align-items: center; }
-.p-settings .s-defaults-collaboration .grid2 > .field:first-child > .note { grid-column: 2; }
-.p-settings .s-defaults-collaboration .grid2 > .field:not(:first-child) { display: grid; grid-template-columns: 210px 38px minmax(0, 1fr); gap: 6px 16px; align-items: center; }
-.p-settings .s-defaults-toggle-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
-.p-settings .s-defaults-toggle-help { display: grid; gap: 4px; min-width: 0; }
-.p-settings .s-defaults-explanation { font-size: var(--fs-xs); color: var(--text-3); }
-.p-settings .s-defaults-explanation > summary { cursor: pointer; }
-.p-settings .s-defaults-explanation[open] > summary { margin-bottom: 6px; }
 
 /* Connection cards use compact real empty states instead of a pair of oversized generic placeholders. */
 .p-settings .s-chat-connections, .p-settings .s-chat-classic { margin: 0; padding: 24px; gap: 18px; border: 1px solid var(--border); }
@@ -3667,11 +3763,6 @@ html.oo-immersive .p-fleet > .panel-body { z-index: 50; }
   .p-settings .s-color-settings { padding-left: 0; }
   .p-settings .s-look-toggle-line { grid-template-columns: minmax(0, 1fr) 38px; }
   .p-settings .s-look-toggle-line > .sub { grid-column: 1 / -1; }
-  .p-settings .s-defaults-model .grid2 > .field, .p-settings .s-defaults-model .grid2 > .field:nth-child(2), .p-settings .s-defaults-model .grid2 > .field:nth-child(3) { grid-column: 1; grid-row: auto; }
-  .p-settings .s-defaults-collaboration .grid2 > .field:first-child, .p-settings .s-defaults-collaboration .grid2 > .field:not(:first-child) { grid-template-columns: minmax(0, 1fr); }
-  .p-settings .s-defaults-collaboration .grid2 > .field:first-child > .note { grid-column: 1; }
-  .p-settings .s-defaults-collaboration .grid2 > .field:not(:first-child) { grid-template-columns: minmax(0, 1fr) 38px; }
-  .p-settings .s-defaults-toggle-help { grid-column: 1 / -1; }
   .p-settings .s-chat-connections, .p-settings .s-chat-classic, .p-settings [data-section="chat"] .s-web-chat { padding: 18px; }
 }
 

package/dist/ui/shared/app.js

@@ -33,6 +33,10 @@ appStore.set({ viewOnly: mode === "view-only" });
 // #1920 phase 3: a guest's page has its chats and nothing else — no panel, notifier, theme list or owner CSS a guest
 // would be refused.
 const guest = guestPage();
+// AgEnD Hub P1 (S3b): a Hub's own workspace (the mark its listener sets). It boots Hub-only: no fleet stream, chat,
+// Needs you, notices, preferences, themes or owner CSS — none of the fleet's endpoints exist at the Hub's origin, and
+// who is signed in is the Hub's own session (/hub/v1/session), read by its pages.
+const hubPage = mode === "full" && !guest && String(boot.hub || "").split(/\s+/).includes("hub");
 
 // A failed load can be retried (the panel's Retry): each retry asks for a fresh URL, since a browser may keep a failed
 // module import cached under the first one. boot() runs once, whichever attempt succeeds.
@@ -42,7 +46,12 @@ const loadView = retryable((a) => import(retryUrl("/assets/panel-view.js", a)));
 const panels = new Map([["view", { load: () => loadView().then((m) => m.ViewPanel) }]]);
 let onNewInstance = null;
 
-if (mode === "full") {
+if (hubPage) {
+  const loadHub = retryable((a) => import(retryUrl("/ui/js/panel-hub.js", a)));
+  panels.set("hub", { load: () => loadHub().then((m) => m.HubPanel) });
+  appStore.set({ connection: "none" });
+  if (!location.pathname.startsWith("/ui/hub")) history.replaceState(history.state, "", "/ui/hub");
+} else if (mode === "full") {
   const stream = createStream({ mode, transport: boot.webTransport });
   stream.on("status", applyStatus);
   stream.on("activity", applyActivity);
@@ -143,7 +152,7 @@ if (mode === "full") {
 startRouter(window);
 // #1629 r4 §3: the person's owner CSS (full app only; never on Settings, in safe mode or where this device turned it off;
 // never a guest's — owner CSS is an admin's).
-if (!guest) installOwnerCss();
+if (!guest && !hubPage) installOwnerCss();
 // /ui on its own opens the chat this browser had open last (an unknown name shows the panel's "not found").
 {
   const r = navStore.get().route;
@@ -154,7 +163,7 @@ if (!guest) installOwnerCss();
 
 document.addEventListener("keydown", handleKey);
 // #2293: Ctrl+K / ⌘K (and Ctrl+F in a chat) — an admin's full app, and a trusted guest's (#2855: what it can see).
-if (mode === "full" && (!guest || guestTrusted())) document.addEventListener("keydown", handleSearchKey);
+if (mode === "full" && !hubPage && (!guest || guestTrusted())) document.addEventListener("keydown", handleSearchKey);
 // #2342: Ctrl/⌘+Z and Ctrl+Shift+Z / Ctrl+Y / ⌘⇧Z in every text field, one history per field (the browser's is one
 // for the whole page, and any script write wipes it).
 installTextUndo({ mac: isMacLike() });

package/dist/ui/shared/chat-composer.js

@@ -0,0 +1,68 @@
+// Hub PR A (#3226): the chat composer's and WorkBar's drawing, shared by the fleet's chat (panel-chat.js) and the Hub's.
+// Drawing only: what the words are, what Send does, whether files may be attached and what a key does are the caller's
+// (props); nothing here reads a store, a route or a string table, so the Hub listener can serve it from /assets/.
+//
+// ComposerInput is the composer's row: Attach (when `attach` is given) with its hidden file input, the text box with its
+// drawn placeholder, Stop and Send. The box is the IME's while it composes (Zhuyin, Pinyin, kana…): between
+// compositionstart and compositionend nothing here writes it, re-renders it or grows it — each one moved the box, and iOS
+// redrew the candidate bar on every keystroke — and what it holds is handed over once, at compositionend (or a blur that
+// ends one that never ended). It grows with the text up to 240px, through the CSSOM (#1300: never a style attribute).
+import { html, useLayoutEffect, useRef } from "./app-html.js";
+import { Icon } from "./ui-icons.js";
+
+/** A coarse pointer (a phone, a tablet): Enter makes a new line there and the box says "enter" to the keyboard. */
+export const touchScreen = () => typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches;
+
+/**
+ * The composer's row. `value`: the draft; `onValue(text)`: the draft changed (never while composing). `placeholder`: the
+ * words drawn in the empty box (also its accessible name). `inputRef`: the caller's ref to the box (focus, undo).
+ * `attach`: { title, onFiles(fileList) } or null (no Attach). `stop`: { hidden, disabled, title, label, onClick }.
+ * `send`: { hidden, disabled, label, onClick }. `controls` / `expanded` / `activeDescendant`: the box's palette ARIA.
+ */
+export function ComposerInput({ inputRef, value, placeholder, onValue, onKeyDown, onPaste, attach = null, stop, send,
+  controls, expanded = false, activeDescendant }) {
+  const own = useRef(null), input = inputRef || own, fileIn = useRef(null);
+  const composing = useRef(false);
+  // A render while composing (another part of the page changed) gives the box what it holds, so it never writes it.
+  const boxValue = composing.current && input.current ? input.current.value : value;
+  // Grow with the text, up to a limit. Empty, it is one line (#2478 — a long name's placeholder made the box two lines).
+  useLayoutEffect(() => {
+    const el = input.current; if (!el || composing.current) return;
+    el.style.height = "auto";
+    if (value) el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
+  }, [value]);
+  const onInput = (e) => { if (composing.current || e.isComposing) return; onValue(e.target.value); };
+  const onCompositionStart = () => { composing.current = true; };
+  // The composed text is the draft now (some engines send no input after it); a blur ends one that never ended.
+  // Lower-case props below: an element has no oncomposition… property, so Preact would listen for "CompositionStart".
+  const onCompositionEnd = (e) => { if (!composing.current) return; composing.current = false; onValue(e.target.value); };
+  return html`<div class="composer">
+      ${attach ? html`<button id="attachBtn" type="button" class="icon-btn" title=${attach.title} aria-label=${attach.title} onClick=${() => fileIn.current && fileIn.current.click()}><${Icon} name="attach" /></button>
+      <input ref=${fileIn} type="file" multiple hidden
+        onChange=${(e) => { attach.onFiles(e.target.files); e.target.value = ""; }} />` : null}
+      ${/* #2478: the placeholder is drawn beside the box, one line ending in "…" — a textarea's own placeholder is clipped,
+          never ellipsized, and a long name wrapped it to two lines. The box keeps the words as its accessible name. Its own
+          placeholder is one space: :placeholder-shown hides the drawn one (app.css) the moment the box holds text, an
+          IME's composing text included, with no change to the page. */ ""}
+      <span class="composer-field"><textarea id="msgIn" ref=${input} rows="1" value=${boxValue} aria-label=${placeholder}
+        enterkeyhint=${touchScreen() ? "enter" : undefined} autocomplete="off" aria-controls=${controls} aria-expanded=${expanded ? "true" : "false"}
+        aria-activedescendant=${activeDescendant} onInput=${onInput} onKeyDown=${onKeyDown} onPaste=${onPaste}
+        oncompositionstart=${onCompositionStart} oncompositionend=${onCompositionEnd} onBlur=${onCompositionEnd}
+        placeholder=" "></textarea><span class="composer-ph" aria-hidden="true">${placeholder}</span></span>
+      <button id="stopBtn" type="button" class="btn btn-stop" hidden=${stop.hidden} title=${stop.title}
+        disabled=${stop.disabled} onClick=${stop.onClick}><${Icon} name="stop" size=${14} /><span class="stop-label">${stop.label}</span></button>
+      <button id="sendBtn" type="button" class="btn btn-primary btn-send" hidden=${send.hidden} disabled=${send.disabled}
+        onMouseDown=${(e) => e.preventDefault()}
+        aria-label=${send.label} title=${send.label} onClick=${send.onClick}><${Icon} name="send" size=${16} /><span class="send-label">${send.label}</span></button>
+    </div>`;
+}
+
+/**
+ * The bar above the composer while the agent works (`kind`: working, stuck, stopping) or waits on something it cannot
+ * see (`awaiting`, with `note`). `elapsed`: the time it has been at it, as the caller words it (it ticks the caller's way).
+ */
+export function WorkBarView({ kind, label, note, noteTitle, elapsed, elapsedTitle }) {
+  return html`<div class=${`work-bar ${kind}`}><span class="pulse" aria-hidden="true"></span><span class="lbl">${label}</span>
+    ${kind === "awaiting" ? html`<span class="note" title=${noteTitle}>${note}</span>`
+      : html`<span class="elapsed" title=${elapsedTitle} aria-hidden="true">${elapsed}</span>`}</div>`;
+}

package/dist/ui/shared/chat-md-strings.js

@@ -0,0 +1,9 @@
+// M-2448 (Prism on #3155): the Markdown side panel's own words, registered by the panel's module (preview-panel.js). A
+// page that opened Log or Details before an upgrade may hold an older chat-strings.js without them; these keep the
+// panel saying what it shows, never a raw key.
+import { register } from "./app-i18n.js";
+
+register("chat", {
+  en: { pvMdPanel: "Markdown preview", pvMdRendered: "Formatted", pvMdSource: "Source" },
+  "zh-TW": { pvMdPanel: "Markdown 預覽", pvMdRendered: "排版", pvMdSource: "原始內容" },
+});