aimeat 1.33.2 → 1.35.0

package/dist/public/css/views/secretary.css

@@ -3,13 +3,24 @@
  * @description Styles for the Secretary view (Phase 0 shell) and the header Secretary button.
  *   Prefix `sec-`. Dark/light safe — uses theme tokens only, no hardcoded colors.
  * @version-history
+ *   v0.11.0 — 2026-06-28 — .sec-strategy: steering card (vision/mission/principles/risks + current→target
+ *     band + ordered milestone gates with status pills + focus highlight + goal-link details).
+ *   v0.10.0 — 2026-06-28 — .sec-danger: Reset Secretary card (danger-tinted border).
+ *   v0.9.0 — 2026-06-28 — Bound triggers: .sec-trig-bound badge + .sec-trig-actlabel spacing.
+ *   v0.8.0 — 2026-06-28 — B5 action-items: dashboard action-item rows (one-click handle / dismiss).
+ *   v0.7.0 — 2026-06-28 — B4 delegation: delegate step control (agent picker + delegate button).
+ *   v0.6.0 — 2026-06-27 — B3 dynamic quick actions: ✎ manager panel, proposed/active shortcut rows.
+ *   v0.5.0 — 2026-06-27 — B2 Routines + "What's next": routine + step rows, band tags, dashboard
+ *     routines list.
+ *   v0.4.0 — 2026-06-27 — B1 dashboard-first IA: quick-action row, "Today" status strip + chips,
+ *     where-things-stand panel, and the collapsible "Manage & setup" disclosure header.
  *   v0.3.0 — 2026-06-25 — `.sec-consent` specialist scope-consent checklist (declare → consent → grant).
  *   v0.2.0 — 2026-06-24 — P3-A: doc/image attach control + status line in the chat input row.
  *   v0.1.0 — 2026-06-23 — Phase 0: hero + provisioning status card + header button/icon.
  */
 
 .sec {
-  max-width: 720px;
+  max-width: 1280px;
   margin: 0 auto;
   padding: 2rem 1rem;
 }
@@ -301,7 +312,31 @@
 .sec-score.mid { background: var(--bg-dim); color: var(--warning); }
 .sec-score.bad { background: var(--danger-bg); color: var(--danger-fg); }
 
-/* Home feed (4) */
+/* Home feed (4) + day grouping (G10) */
+.sec-feed-day + .sec-feed-day { margin-top: 0.5rem; }
+.sec-feed-day-head {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 0.5rem 0 0.25rem;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: var(--card);
+}
+.sec-feed-day-count {
+  font-weight: 400;
+  font-size: 0.7rem;
+  padding: 0.05rem 0.4rem;
+  border-radius: 999px;
+  background: var(--bg-dim);
+  color: var(--text-dim);
+}
 .sec-feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
 .sec-feed-item { padding: 0.5rem 0; border-top: 1px solid var(--border); }
 .sec-feed-meta { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 0.2rem; }
@@ -606,3 +641,430 @@
   width: 18px;
   height: 18px;
 }
+
+/* metaCard: link from the read-only Permissions chips to the agent's scope editor in Agents view */
+.sec-perm-link { display: inline-block; margin-top: 0.4rem; font-size: 0.78rem; color: var(--accent); text-decoration: none; }
+.sec-perm-link:hover { text-decoration: underline; }
+
+/* ── B1 dashboard-first IA ── */
+/* Quick-action row (core + later dynamic) */
+.sec-quick {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.sec-quick-btn { white-space: nowrap; }
+
+/* The Secretary view stacks its cards; give every card breathing room (was per-card before B1). */
+.sec-card + .sec-card,
+.sec-quick + .sec-card { margin-top: 1rem; }
+
+/* "Today" status strip */
+.sec-dash-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.75rem;
+}
+.sec-chip {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm, 8px);
+  background: var(--bg-dim);
+  min-width: 8rem;
+}
+.sec-chip.stale { border-color: var(--warning); }
+.sec-chip-k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); }
+.sec-chip-v { color: var(--text); font-size: 0.9rem; font-weight: 600; }
+.sec-chip-v .sec-hint { font-weight: 400; }
+.sec-chip-badge {
+  font-size: 0.68rem;
+  font-weight: 600;
+  padding: 0.05rem 0.4rem;
+  border-radius: 999px;
+  background: var(--bg-dim);
+  border: 1px solid var(--warning);
+  color: var(--warning);
+}
+
+/* Where-things-stand orientation panel */
+.sec-stand-body {
+  color: var(--text);
+  font-size: 0.9rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Manage & setup disclosure */
+.sec-manage-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+}
+.sec-manage-title { color: var(--text); }
+.sec-manage-meta { color: var(--text-dim); font-size: 0.85rem; font-weight: 400; }
+.sec-manage-hint { margin: 0.4rem 0 0; }
+
+/* ── B2 Routines + "What's next" ── */
+/* Dashboard routines list */
+.sec-routine-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
+.sec-routine-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+  border-top: 1px solid var(--border);
+}
+.sec-routine-row:first-child { border-top: 0; }
+.sec-routine-main { flex: 1; min-width: 0; }
+.sec-routine-title { color: var(--text); font-weight: 600; font-size: 0.92rem; }
+
+/* What's-next working card: routine detail + steps */
+.sec-routine-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
+/* G2: recurrence picker + dashboard badge */
+.sec-routine-cadence { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
+.sec-cadence-badge {
+  font-size: 0.66rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 0.05rem 0.4rem;
+  border-radius: var(--radius-xs, 6px);
+  background: var(--accent-subtle);
+  color: var(--accent);
+  vertical-align: middle;
+}
+.sec-routine-actions { gap: 0.5rem; }
+.sec-step-list { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
+.sec-step-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  padding: 0.5rem 0;
+  border-top: 1px solid var(--border);
+}
+.sec-step-row.done, .sec-step-row.skipped { opacity: 0.7; }
+.sec-step-main { flex: 1; min-width: 0; }
+.sec-step-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.2rem; }
+.sec-step-cap {
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 0.1rem 0.45rem;
+  border-radius: var(--radius-xs, 6px);
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+.sec-band-tag {
+  font-size: 0.68rem;
+  padding: 0.1rem 0.45rem;
+  border-radius: var(--radius-xs, 6px);
+  border: 1px solid var(--border);
+  background: var(--bg-dim);
+  color: var(--text-dim);
+}
+.sec-band-tag.band-act { border-color: var(--success, #3fb950); color: var(--success, #3fb950); }
+.sec-band-tag.band-off { opacity: 0.7; }
+.sec-step-summary { color: var(--text); font-size: 0.9rem; }
+.sec-step-status { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; }
+.sec-step-status.sec-done { color: var(--success, #3fb950); }
+.sec-step-status.sec-delegated { color: var(--accent); }
+
+/* B4 delegate step control (agent picker + delegate button) */
+.sec-delegate { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
+
+/* B5 action-items (tick-derived follow-ups on the dashboard) */
+.sec-item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
+.sec-item-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5rem 0.6rem;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-sm, 8px);
+  background: var(--bg-dim);
+}
+.sec-item-text { color: var(--text); font-size: 0.9rem; min-width: 0; }
+.sec-item-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
+
+/* ── B3 dynamic quick actions (✎ manager) ── */
+.sec-qa-manage { margin-top: 1rem; }
+.sec-qa-list { list-style: none; margin: 0.4rem 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
+.sec-qa-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 0;
+  border-top: 1px solid var(--border);
+}
+.sec-qa-row:first-child { border-top: 0; }
+.sec-qa-row.proposed {
+  border: 1px dashed var(--accent);
+  border-radius: var(--radius-sm, 8px);
+  background: var(--accent-subtle);
+  padding: 0.5rem 0.6rem;
+}
+.sec-qa-main { flex: 1; min-width: 0; }
+.sec-qa-label { color: var(--text); font-size: 0.9rem; font-weight: 600; }
+.sec-qa-kind {
+  font-size: 0.66rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  margin-left: 0.4rem;
+  padding: 0.05rem 0.4rem;
+  border-radius: var(--radius-xs, 6px);
+  background: var(--bg-dim);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font-weight: 400;
+}
+
+/* ── Calendar (Decision B): month / week / day of the Secretary's schedule ── */
+.sec-cal-nav { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
+.sec-cal-modes, .sec-cal-move { display: inline-flex; gap: 0.25rem; }
+.sec-cal-range { width: 100%; color: var(--text-dim); font-size: 0.85rem; margin-top: 0.25rem; }
+.sec-cal-weekrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 0.5rem; }
+.sec-cal-wd { font-size: 0.72rem; color: var(--text-dim); text-align: center; padding: 0.2rem 0; }
+.sec-cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
+.sec-cal-cell { min-height: 64px; display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; padding: 0.25rem; background: var(--bg-dim); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; text-align: left; }
+.sec-cal-cell:hover { border-color: var(--accent); }
+.sec-cal-cell--dim { opacity: 0.45; }
+.sec-cal-cell--today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
+.sec-cal-daynum { font-size: 0.78rem; color: var(--text); font-weight: 600; }
+.sec-cal-cell-evs { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
+.sec-cal-more { font-size: 0.68rem; color: var(--text-dim); }
+.sec-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 0.5rem; }
+.sec-cal-weekcol { background: var(--bg-dim); border: 1px solid var(--border); border-radius: 6px; min-height: 120px; display: flex; flex-direction: column; }
+.sec-cal-weekcol--today { border-color: var(--accent); }
+.sec-cal-weekcol-head { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.3rem; background: transparent; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; }
+.sec-cal-weekcol-evs { display: flex; flex-direction: column; gap: 2px; padding: 0.25rem; }
+.sec-cal-day { display: flex; flex-direction: column; gap: 1px; margin-top: 0.5rem; }
+.sec-cal-hourrow { display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.5rem; align-items: start; min-height: 1.9rem; border-top: 1px solid var(--border); padding-top: 0.2rem; }
+.sec-cal-bucket { display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.5rem; align-items: start; margin: 0.3rem 0; }
+.sec-cal-hour { font-size: 0.72rem; color: var(--text-dim); padding-top: 0.15rem; }
+.sec-cal-hour-evs { display: flex; flex-direction: column; gap: 2px; }
+.sec-cal-ev { font-size: 0.72rem; padding: 0.1rem 0.35rem; border-radius: 4px; border-left: 2px solid var(--border); background: var(--card); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sec-cal-ev--scheduled { border-left-color: var(--accent); }
+.sec-cal-ev--done { opacity: 0.7; border-left-color: var(--success, #3fb950); }
+.sec-cal-ev--routine { border-left-color: var(--warning, #d29922); }
+.sec-cal-evtime { color: var(--text-dim); }
+.sec-cal-empty { text-align: center; padding: 0.4rem; }
+
+/* ── Direct brain editor (Decision C2) ── */
+.sec-brain-actions { display: inline-flex; gap: 0.25rem; }
+.sec-rule-edit { list-style: none; margin: 0.25rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
+.sec-rule-row { display: flex; gap: 0.4rem; align-items: center; }
+.sec-rule-row .sec-input { flex: 1; }
+
+/* Calendar layout fix: equal day columns + contain long event text (grid/flex children need min-width:0,
+   else a nowrap event string forces its column wide and the 7 columns go uneven). */
+.sec-cal-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+.sec-cal-month { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+.sec-cal-weekcol, .sec-cal-weekcol-evs, .sec-cal-hour-evs, .sec-cal-cell, .sec-cal-cell-evs { min-width: 0; }
+.sec-cal-ev { display: block; max-width: 100%; box-sizing: border-box; }
+.sec-cal-hourrow, .sec-cal-bucket { grid-template-columns: 3.2rem minmax(0, 1fr); }
+
+/* "What's next" actionable proposals (Do it / Skip) */
+.sec-next-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
+.sec-next-action { display: flex; gap: 0.6rem; align-items: flex-start; justify-content: space-between; padding: 0.5rem 0; border-top: 1px solid var(--border); }
+.sec-next-action:first-child { border-top: 0; }
+.sec-next-action-main { flex: 1; min-width: 0; }
+.sec-next-action-sum { color: var(--text); font-size: 0.92rem; }
+.sec-next-action-btns { display: inline-flex; gap: 0.3rem; flex: 0 0 auto; }
+.sec-next-action--done .sec-next-action-sum, .sec-next-action--skipped .sec-next-action-sum { color: var(--text-dim); }
+.sec-next-action--skipped .sec-next-action-sum { text-decoration: line-through; }
+
+/* Triggers (Slice 3) */
+.sec-trig-list { list-style: none; margin: 0.25rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
+.sec-trig-row { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; padding: 0.4rem 0; border-top: 1px solid var(--border); }
+.sec-trig-row:first-child { border-top: 0; }
+.sec-trig-row.paused { opacity: 0.6; }
+.sec-trig-main { flex: 1; min-width: 0; }
+.sec-trig-label { color: var(--text); font-size: 0.9rem; }
+.sec-trig-bound { color: var(--accent); font-size: 0.8rem; white-space: nowrap; }
+.sec-trig-btns { display: inline-flex; gap: 0.25rem; flex: 0 0 auto; }
+.sec-trig-form { margin-top: 0.5rem; }
+.sec-trig-actlabel { display: block; margin-top: 0.35rem; }
+.sec-cal-ev--trigger { border-left-color: var(--accent); }
+.sec-danger { border-color: var(--danger, #e8564a); }
+.sec-danger .sec-warn { color: var(--danger, #e8564a); font-weight: 600; }
+
+/* Strategy — steering card (vision/mission/principles/risks + current → target + milestone gates) */
+.sec-dir-line { margin: 0.15rem 0; font-size: 0.9rem; color: var(--text); }
+.sec-dir-bul { margin: 0.15rem 0 0.35rem; padding-left: 1.1rem; }
+.sec-dir-bul li { font-size: 0.85rem; color: var(--text); }
+.sec-dir-goals { margin-top: 0.25rem; }
+.sec-dir-goals summary { cursor: pointer; }
+.sec-dir-goal-opt { display: block; margin: 0.15rem 0; }
+.sec-strategy .sec-dir-state { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.25rem 0 0.5rem; }
+.sec-dir-lbl { display: inline-block; min-width: 3.5rem; color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
+.sec-dir-arrow { color: var(--text-dim); font-size: 0.85rem; padding-left: 0.25rem; }
+.sec-dir-ms { list-style: none; margin: 0.25rem 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
+.sec-dir-ms-row { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--bg-dim); }
+.sec-dir-ms-row.focus { border-color: var(--accent); }
+.sec-dir-ms-row.reached { opacity: 0.6; }
+.sec-dir-ms-main { flex: 1; min-width: 0; }
+.sec-dir-ms-title { color: var(--text); font-size: 0.9rem; }
+.sec-dir-focus { color: var(--accent); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
+.sec-dir-pill { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.72rem; cursor: pointer; background: var(--surface); color: var(--text-dim); }
+.sec-dir-pill.sec-dir-in-progress { color: var(--accent); border-color: var(--accent); }
+.sec-dir-pill.sec-dir-reached { color: var(--success, #4caf50); border-color: var(--success, #4caf50); }
+.sec-dir-off { margin-top: 0.25rem; color: var(--text-dim); }
+
+/* Feed entry link ("What I've done" → open the result) */
+.sec-feed-link { display: inline-block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--accent); text-decoration: none; }
+.sec-feed-link:hover { text-decoration: underline; }
+
+/* "Where things stand" — timestamp + inline refresh + linkified mentions */
+.sec-stand-when { margin-bottom: 0.5rem; }
+.sec-linkbtn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }
+.sec-stand-body a { color: var(--accent); }
+
+/* What's next — inline deliverable preview (show the produced content without navigating) */
+.sec-next-toggle { margin-top: 0.35rem; }
+.sec-next-preview { margin-top: 0.4rem; padding: 0.6rem 0.8rem; background: var(--bg-dim); border: 1px solid var(--border); border-radius: 8px; max-height: 22rem; overflow: auto; }
+.sec-next-preview .md-body { font-size: 0.9rem; }
+
+/* ── Customizable two-column dashboard (use-layout.js) ─────────────────────────────────────
+   Wide screens: main column + sticky right rail. Narrow: collapses to one column (order kept). */
+.sec-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  gap: 1rem;
+  align-items: start;
+  margin-top: 1rem;
+}
+.sec-col { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
+.sec-col-right { position: sticky; top: 1rem; }
+@media (max-width: 1100px) {
+  .sec-grid { grid-template-columns: 1fr; }
+  .sec-col-right { position: static; }
+}
+/* Cards already carry their own spacing internally; the column gap owns inter-card spacing. */
+.sec-col .sec-card, .sec-col .sec-status { margin-bottom: 0; }
+
+/* Per-card arrange handle (⋮): reveal on hover (desktop), always visible on touch. */
+.sec-lc { position: relative; }
+.sec-lc-menu { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 6; }
+.sec-lc-btn {
+  width: 1.6rem; height: 1.6rem; border-radius: 6px; border: 1px solid var(--border);
+  background: var(--surface); color: var(--text-dim); cursor: pointer; line-height: 1;
+  opacity: 0; transition: opacity 0.12s;
+}
+.sec-lc:hover .sec-lc-btn, .sec-lc-menu.open .sec-lc-btn { opacity: 1; }
+.sec-lc-btn:hover { color: var(--text); border-color: var(--accent); }
+.sec-lc-pop {
+  position: absolute; top: 1.9rem; right: 0; min-width: 12rem; z-index: 7;
+  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; padding: 0.25rem;
+}
+.sec-lc-pop button { text-align: left; background: none; border: 0; color: var(--text); padding: 0.4rem 0.6rem; border-radius: 6px; cursor: pointer; font: inherit; }
+.sec-lc-pop button:hover:not(:disabled) { background: var(--bg-dim); }
+.sec-lc-pop button:disabled { color: var(--text-dim); cursor: default; }
+.sec-lc-pop .sec-lc-hide { color: var(--danger, #e8564a); }
+@media (hover: none) { .sec-lc-btn { opacity: 1; } }
+
+/* Layout toolbar: reset + restore hidden sections. */
+.sec-layout-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1rem; }
+.sec-chip { background: var(--bg-dim); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.8rem; color: var(--text); cursor: pointer; }
+.sec-chip:hover { border-color: var(--accent); }
+
+.sec-next-discard { color: var(--danger, #e8564a); }
+
+/* Quality pipeline: verify warnings + prompt-driven fallback block */
+.sec-warn { color: var(--warning, #d29922); }
+.sec-next-prompt { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
+
+/* Phase 3 — "Design a workflow" panel */
+.sec-wf-outcome { min-height: 4rem; }
+.sec-wf-steps { margin: 0.25rem 0 0.5rem; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; }
+.sec-wf-steps li { color: var(--text); font-size: 0.9rem; }
+.sec-wf-cron { width: 12rem; margin-top: 0.4rem; }
+
+/* Loading spinner for "thinking"/"running" states */
+.sec-spin {
+  display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.45rem; vertical-align: -0.1em;
+  border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%;
+  animation: sec-spin 0.7s linear infinite;
+}
+@keyframes sec-spin { to { transform: rotate(360deg); } }
+
+/* Calendar entry inline editor (modal) + clickable entries */
+.sec-cal-ev--click { cursor: pointer; }
+.sec-cal-ev--click:hover { filter: brightness(1.15); }
+.sec-modal-backdrop {
+  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 50;
+  display: flex; align-items: center; justify-content: center; padding: 1rem;
+}
+.sec-modal {
+  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
+  padding: 1.25rem 1.5rem; width: min(36rem, 96vw); max-height: 85vh; overflow: auto;
+  display: flex; flex-direction: column; gap: 0.5rem;
+}
+.sec-modal .sec-input, .sec-modal .sec-stand-body { margin-top: 0.2rem; }
+
+/* Live setup-progress overlay — a top-level modal shown through the whole setup (incl. the slow fill),
+   surviving the hire→dashboard switch so the owner always sees what's happening and how far along it is. */
+.sec-setup-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
+  background: rgba(0, 0, 0, 0.45); padding: 1rem; }
+.sec-setup-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
+  padding: 1.25rem 1.5rem; width: min(28rem, 96vw); display: flex; flex-direction: column; gap: 0.5rem; }
+.sec-setup-row { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; margin: 0.25rem 0 0.5rem; }
+.sec-progress-bar { height: 8px; border-radius: 999px; background: var(--bg-dim, var(--border)); overflow: hidden; }
+.sec-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.4s ease; }
+
+/* "How should your Secretary work?" autonomy step (asked once, up front, during setup). */
+.sec-mode-box { width: min(34rem, 96vw); }
+.sec-mode-opt { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.75rem; border: 1px solid var(--border);
+  border-radius: 10px; cursor: pointer; }
+.sec-mode-opt + .sec-mode-opt { margin-top: 0.4rem; }
+.sec-mode-opt--on { border-color: var(--accent); background: var(--bg-dim, var(--card)); }
+.sec-mode-opt input { margin-top: 0.2rem; accent-color: var(--accent); }
+.sec-mode-opt-t { font-weight: 700; display: block; }
+
+/* Work Brief tray — heavy work the Secretary prepared for a Builder (the light-vs-heavy seam). */
+.sec-brief-tray { border-color: var(--accent-border, var(--accent)); }
+.sec-brief-tray .sec-count { font-size: 0.78rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px;
+  background: var(--accent-soft, var(--bg-dim)); color: var(--accent); margin-left: 0.35rem; }
+.sec-brief-banner { margin: 0 0 0.5rem; padding: 0.45rem 0.6rem; font-size: 0.82rem; color: var(--text-dim);
+  background: var(--bg-dim); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); }
+.sec-brief-wait { margin-top: 0.3rem; }
+.sec-brief { padding: 0.65rem 0; border-top: 1px solid var(--border); }
+.sec-brief:first-of-type { border-top: none; }
+.sec-brief-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; }
+.sec-brief-obj { font-weight: 600; color: var(--text); }
+.sec-brief-ws { margin-left: auto; }
+.sec-brief-badge { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
+  padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--accent-soft, var(--bg-dim));
+  border: 1px solid var(--accent-border, var(--accent)); color: var(--accent); }
+.sec-brief-badge.is-dispatched { background: var(--info-bg, var(--bg-dim)); border-color: var(--info-border, var(--border)); color: var(--info-fg, var(--text-dim)); }
+.sec-brief-detail { margin: 0.4rem 0; }
+.sec-brief-detail > summary { cursor: pointer; color: var(--accent); font-size: 0.82rem; }
+.sec-brief-md { margin-top: 0.5rem; padding: 0.6rem 0.75rem; background: var(--bg-dim); border: 1px solid var(--border);
+  border-radius: var(--radius-sm, 8px); max-height: 22rem; overflow: auto; font-size: 0.85rem; }
+.sec-brief-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
+.sec-select { padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
+  background: var(--card); color: var(--text); font-size: 0.82rem; }
+
+/* One autonomy toggle (collapses the per-capability band sprawl). */
+.sec-autonomy { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }
+.sec-auto-opt { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.55rem 0.7rem; border: 1px solid var(--border);
+  border-radius: 10px; cursor: pointer; }
+.sec-auto-opt--on { border-color: var(--accent); background: var(--bg-dim, var(--card)); }
+.sec-auto-opt input { margin-top: 0.2rem; accent-color: var(--accent); }
+.sec-adv { margin-top: 0.75rem; }
+.sec-adv > summary { cursor: pointer; color: var(--text-dim); font-size: 0.85rem; }

package/dist/public/js/i18n.js

@@ -63,6 +63,15 @@ export function t(key, vars) {
   return str;
 }
 
+/** Translate a key, but fall back to `fallbackText` when the key is missing.
+ *  t() returns the raw key string on a miss (truthy), which defeats the common
+ *  `t(key) || serverProvidedTitle` pattern -- use this when a server-provided
+ *  label should win over a raw key. */
+export function tOr(key, fallbackText, vars) {
+  const val = t(key, vars);
+  return val === key ? (fallbackText ?? key) : val;
+}
+
 /** Get current locale. */
 export function getLocale() {
   return currentLocale;

package/dist/public/js/services/apps.js

@@ -4,7 +4,9 @@
  */
 import { apiGet, apiDelete, apiPatch, api } from '/js/api.js';
 
-/** List all apps. Returns array. */
+/** List apps. Returns array. The server decides visibility from who is
+ *  authenticated: the owner sees their own parked/operator-hidden apps (the latter
+ *  flagged operator_hidden so the UI can badge them); everyone else does not. */
 export async function listApps() {
   const data = await apiGet('/v1/apps');
   return data?.data?.apps || [];
@@ -29,7 +31,7 @@ export async function deleteApp(filename) {
   return apiDelete('/v1/apps/' + encodeURIComponent(filename));
 }
 
-/** Update app metadata (e.g. access_code, protected). */
+/** Update app metadata (name, description, access_code, parked). The URL never changes. */
 export async function patchApp(filename, updates) {
   return apiPatch('/v1/apps/' + encodeURIComponent(filename), updates);
 }

package/dist/public/js/services/memory.js

@@ -11,8 +11,12 @@
 import { api, apiGet, apiPost, apiDelete } from '/js/api.js';
 
 /** List all memory entries. Returns array. Optional agentGaii to view another agent's memory. */
-export async function listMemories(agentGaii) {
-  const url = agentGaii ? `/v1/memory?agent=${encodeURIComponent(agentGaii)}` : '/v1/memory';
+export async function listMemories(agentGaii, opts) {
+  const p = new URLSearchParams();
+  if (agentGaii) p.set('agent', agentGaii);
+  if (opts?.archived === 'only') p.set('archived', 'only');
+  else if (opts?.archived === 'include') p.set('include_archived', 'true');
+  const url = '/v1/memory' + (p.toString() ? '?' + p.toString() : '');
   const data = await apiGet(url);
   const list = data?.data?.items || data?.data?.entries || [];
   return Array.isArray(list) ? list : [];
@@ -23,9 +27,11 @@ export async function listMemories(agentGaii) {
  * (include=meta). Fast for thousands of keys; values are fetched per-key on expand via getMemory().
  * Returns { items, quota } so the tab can render the storage-usage bar.
  */
-export async function listMemoriesMeta(agentGaii) {
+export async function listMemoriesMeta(agentGaii, opts) {
   let url = '/v1/memory?include=meta';
   if (agentGaii) url += `&agent=${encodeURIComponent(agentGaii)}`;
+  if (opts?.archived === 'only') url += '&archived=only';
+  else if (opts?.archived === 'include') url += '&include_archived=true';
   const data = await apiGet(url);
   const list = data?.data?.items || data?.data?.entries || [];
   return { items: Array.isArray(list) ? list : [], quota: data?.data?.quota || null };

package/dist/public/js/services/offers.js

@@ -95,7 +95,7 @@ export async function rankOffersByNeed(needText, items) {
   const prompt = `NEED: ${needText}\n\nCATALOGUE (${catalogue.length} offers):\n${JSON.stringify(catalogue)}`;
   const r = await api('/v1/ai/complete', {
     method: 'POST',
-    body: JSON.stringify({ prompt, systemPrompt, modelRole: 'execution', max_tokens: 900, app_id: 'offers-need-router' }),
+    body: JSON.stringify({ prompt, systemPrompt, modelRole: 'execution', app_id: 'offers-need-router' }),
     timeoutMs: 120_000, retries: 0,
   });
   if (!r?.ok) { const e = new Error(r?.error?.message || 'AI call failed'); e.code = r?.error?.code || 'UNKNOWN'; throw e; }