create-walle 0.10.1 → 0.10.2

package/template/coding-task-manager/public/css/app.css

@@ -5719,6 +5719,32 @@
     pointer-events: auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
     width: min(560px, calc(100% - 24px));
   }
+  /* D-14: the identity line ("branches · Codex · ~/ws/tools · last active 10/14/2026") names the
+     session the card is about, above the headline. D-11: the third recovery option is a text link,
+     not a fourth equal button. D-12: the paths live in one collapsed Details row. */
+  .resume-blocked-identity {
+    position: relative; z-index: 1; box-sizing: border-box;
+    width: min(560px, calc(100% - 24px));
+    color: var(--fg-dim, #565f89); font-size: 11px; line-height: 1.5; text-align: center;
+    overflow-wrap: anywhere;
+  }
+  .resume-blocked-link {
+    font-size: 12px; padding: 6px 4px; cursor: pointer;
+    background: none; border: none; color: var(--accent, #7aa2f7);
+    text-decoration: underline; text-underline-offset: 2px;
+  }
+  .resume-blocked-link:hover { filter: brightness(1.15); }
+  /* The overlay is pointer-events:none, so Details opts back in like the actions row — without it
+     a click on the summary falls through to the terminal and Details never opens. */
+  .resume-blocked-details {
+    position: relative; z-index: 1; box-sizing: border-box; pointer-events: auto;
+    width: min(560px, calc(100% - 24px));
+    color: var(--fg-muted, #8b94bd); font-size: 11px; line-height: 1.6;
+  }
+  .resume-blocked-details > summary {
+    cursor: pointer; color: var(--fg-dim, #565f89); font-size: 11px; text-align: center;
+  }
+  .resume-blocked-detail-line { overflow-wrap: anywhere; }
   .snapshot-loading-input-hint,
   .snapshot-loading-detail {
     position: relative; z-index: 1; box-sizing: border-box;
@@ -5950,7 +5976,16 @@
     flex-shrink: 0;
   }
   .model-switch-control .model-switch-chip { border-radius: 4px 0 0 4px; }
-  .model-switch-chip .model-chip-lead { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  /* WP-1 (docs/session-model-header-truth-and-space-2026-10-25.html §8 WP-1, D-4): the lead row is
+     [ label ][ tag* ][ token badge ] and ONLY the model name yields width. The name was one clipping
+     span shared with the tag and the badge, so a long id ellipsized the context count and percentage
+     away first. Each trailing fact keeps its own box (flex: 0 0 auto) inside the same 260px cap. */
+  .model-switch-chip .model-chip-lead {
+    min-width: 0; display: inline-flex; align-items: center; overflow: hidden;
+  }
+  .model-switch-chip .model-chip-label {
+    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
   .model-request-note {
     display: inline-flex; align-items: center; gap: 4px; height: 24px; box-sizing: border-box; padding: 0 8px;
     border: 1px solid var(--border); border-left: 0; background: var(--bg-input); color: var(--accent);
@@ -8788,3 +8823,246 @@
     max-width: 90vw; max-height: calc(100vh - 80px); overflow: auto;
   }
   #screenshot-editor .ss-canvas-wrap canvas { display: block; }
+
+  /* ── WP-5 machine surfaces (docs/remote-machine-hub-sessions-2026-10-22.html §6.6, D-11) ──
+     The machine chip is the branch badge's twin: same inline-block/ellipsis behaviour, its own
+     hue so the two never read as one badge. A local session renders NO chip at all. */
+  .machine-chip {
+    display: inline-block;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 9px;
+    background: color-mix(in srgb, var(--purple) 15%, transparent);
+    color: var(--purple);
+    padding: 1px 5px;
+    border-radius: 4px;
+    white-space: nowrap;
+    flex: 0 1 auto;
+    min-width: 0;
+    margin-left: 2px;
+  }
+  /* Unreachable is a STATE, not a different badge: the chip keeps its place and says the row is
+     showing another machine's last known state. */
+  .machine-chip.unreachable {
+    background: color-mix(in srgb, var(--yellow) 16%, transparent);
+    color: var(--yellow);
+    border: 1px dashed color-mix(in srgb, var(--yellow) 40%, transparent);
+  }
+  /* Sidebar rows: the machine chip NAMES where the session runs, so in a row that carries one,
+     every other shrinkable item shrinks 5x faster than the chip (their ratios to each other are
+     unchanged: the branch badge still yields 20x faster than the title). The chip keeps its name
+     until the title reaches its 7ch floor. No min-width floor is added and the chip's factor stays
+     1, so no row's minimum width changes and no row overflows that does not overflow today — a
+     factor below 1 would under-shrink once the chip is the last item shrinking (CSS Flexbox
+     §9.7 step 4c). docs/sidebar-machine-chip-readable-2026-10-23.html D-1. */
+  .session-item .machine-chip { flex-shrink: 1; max-width: 96px; }
+  .session-item:has(.machine-chip) .label,
+  .session-item:has(.machine-chip) .session-owner-chip,
+  .session-item:has(.machine-chip) .session-lifecycle-chip,
+  .session-item:has(.machine-chip) .worktree-attn-badge,
+  .session-item:has(.machine-chip) .status-tag:not(.bg-terminal) { flex-shrink: 5; }
+  .session-item:has(.machine-chip) .branch-badge { flex-shrink: 100; }
+  .session-item.active .machine-chip {
+    color: #111827;
+    background: rgba(255, 255, 255, 0.34);
+    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.16);
+    font-weight: 700;
+  }
+  /* The recent-item meta row manages its own gap. */
+  .recent-item .recent-meta .machine-chip { margin-left: 0; }
+  /* Tabs: a clipped title still hides the branch badge, but the machine chip never hides — it
+     keeps a glyph floor (docs/sidebar-machine-chip-readable-2026-10-23.html D-3). */
+  .tab > .machine-chip { max-width: 64px; min-width: 2.6em; }
+
+  /* New-session machine cards: the agent grid's twin, auto-fitting so one machine does not
+     stretch across three columns. WP-4 (S-20/D-1): the track is capped at a third of the grid, so
+     the row can never exceed three columns — and therefore never exceeds two rows for the five cards
+     D-1 allows. No max-height hack; `auto-fit` still lets a single machine fill the row. */
+  .ns-machine-grid {
+    grid-template-columns: repeat(auto-fit, minmax(max(132px, calc((100% - 16px) / 3)), 1fr));
+  }
+  .ns-machine-card {
+    border-style: dashed;
+  }
+  .ns-machine-card.selected {
+    border-style: solid;
+  }
+  .ns-machine-card.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .ns-machine-card .ns-card-sub {
+    overflow-wrap: anywhere;
+  }
+  /* WP-4 (D-1/AC-4e): a long name ellipsizes on one line; the same name is in the card's title, so
+     nothing is lost to the clip (the lesson from docs/sidebar-machine-chip-readable-2026-10-23.md). */
+  .ns-machine-card .ns-card-name {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /* WP-4 (D-12): the box's live numbers are the card's third line. */
+  .ns-machine-card .ns-card-load {
+    font-size: 10px;
+    color: var(--fg-dim);
+    text-align: center;
+    line-height: 1.2;
+    overflow-wrap: anywhere;
+  }
+  /* WP-4 (item 7): the "Manage machines" link under the grid, mounted by the renderer. */
+  .ns-machine-manage {
+    display: inline-block;
+    margin: 0 0 8px;
+    font-size: 11px;
+    color: var(--accent, #7aa2f7);
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .ns-machine-manage:hover { text-decoration: underline; }
+  .ns-machine-hint {
+    font-size: 11px;
+    color: var(--fg-dim);
+    margin: 2px 0 6px;
+    line-height: 1.4;
+  }
+  .ns-machine-hint.warn { color: var(--yellow); }
+
+  /* Machines page — WP-5 (docs/machine-pool-picker-pairing-dashboard-2026-10-24.html D-14/S-20).
+     Replaces the old Settings → Machines card. The card grid scrolls; nothing here caps a height. */
+  .machines-page-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg);
+  }
+  .machines-page-header h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
+  .machines-page-header p { margin: 0; font-size: 12px; color: var(--fg-dim); line-height: 1.5; max-width: 62ch; }
+  .machines-page-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
+  .machines-page-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 10px; }
+  .machines-page-error { padding: 10px 12px; border: 1px solid var(--red); border-radius: 8px; color: var(--red); font-size: 12px; }
+  .machines-page-loading, .machines-page-note { padding: 8px 2px; font-size: 12px; color: var(--fg-dim); }
+  .machines-page-toast { display: none; padding: 8px 20px; font-size: 12px; color: var(--fg-dim); border-top: 1px solid var(--border); }
+  .machines-page-toast.show { display: block; }
+
+  .machine-page-card {
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg-panel, var(--bg));
+    padding: 10px 12px;
+  }
+  .machine-page-self { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
+  .mpc-head { display: flex; align-items: center; gap: 8px; }
+  .mpc-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-dim); }
+  .mpc-dot[data-health="reachable"] { background: var(--green); }
+  .mpc-dot[data-health="unreachable"] { background: var(--red); }
+  .mpc-dot[data-health="unhealthy"] { background: var(--yellow); }
+  /* A rename is a free-text field on the card itself — it must stay legible at every width, so it
+     ellipsizes on one line and carries the same name in its title (wp-4 D-1 lesson). */
+  .mpc-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    color: var(--fg);
+    font-size: 13px;
+    font-weight: 600;
+    padding: 2px 6px;
+  }
+  .mpc-name:hover { border-color: var(--border); }
+  .mpc-name:focus { border-color: var(--accent); outline: none; background: var(--bg); }
+  .mpc-cred { flex: 0 0 auto; font-size: 10px; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--fg-dim) 15%, transparent); color: var(--fg-dim); }
+  .mpc-cred[data-cred="pool"] { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
+  .mpc-cred[data-cred="env"] { background: color-mix(in srgb, var(--yellow) 16%, transparent); color: var(--yellow); }
+  .mpc-cred[data-cred="missing"] { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
+  .mpc-meta { margin: 4px 0 8px; font-size: 11px; color: var(--fg-dim); }
+  .mpc-stale { margin-left: 6px; padding: 0 4px; border-radius: 3px; background: var(--warning-soft); color: var(--yellow); }
+  .mpc-sparks { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
+  .mpc-spark { display: flex; align-items: center; gap: 6px; }
+  .mpc-spark-label { font-size: 10px; color: var(--fg-dim); width: 2.4em; }
+  .mpc-spark-val { font-size: 11px; color: var(--fg); width: 3em; text-align: right; }
+  .machine-spark { display: block; }
+  .machine-spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
+  .mpc-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; }
+  .mpc-fact { display: flex; gap: 6px; font-size: 11px; min-width: 0; }
+  .mpc-fact dt { color: var(--fg-dim); }
+  .mpc-fact dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
+  .mpc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+  .mpc-btn {
+    font-size: 11px;
+    padding: 4px 9px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: transparent;
+    color: var(--fg);
+    cursor: pointer;
+  }
+  .mpc-btn:hover { background: var(--bg-hover); }
+  .mpc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  .mpc-primary { border-color: var(--accent); color: var(--accent); }
+  .mpc-danger { border-color: var(--red); color: var(--red); }
+  .mpc-fav[aria-pressed="true"] { border-color: var(--yellow); color: var(--yellow); }
+
+  /* The Add-machine / show-a-code dialogs. */
+  .machine-modal-overlay {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--overlay-bg);
+    z-index: 400;
+  }
+  .machine-modal {
+    width: min(520px, calc(100vw - 32px));
+    max-height: calc(100vh - 48px);
+    overflow-y: auto;
+    padding: 16px;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: var(--bg-elevated, var(--bg));
+    box-shadow: 0 18px 46px var(--shadow-color);
+  }
+  .machine-modal h3 { margin: 0 0 4px; font-size: 14px; }
+  .machine-modal-sub { margin: 0 0 10px; font-size: 12px; color: var(--fg-dim); line-height: 1.5; }
+  .machine-modal-label { display: block; font-size: 11px; color: var(--fg-dim); margin-bottom: 4px; }
+  .machine-modal-input {
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--fg);
+    font-size: 12px;
+    padding: 6px 8px;
+    font-family: inherit;
+  }
+  .machine-modal-or { margin: 10px 0; font-size: 11px; color: var(--fg-dim); text-align: center; }
+  .machine-modal-row { display: flex; gap: 8px; flex-wrap: wrap; }
+  .machine-modal-row .machine-modal-input { flex: 1 1 180px; width: auto; min-width: 140px; }
+  .machine-pair-preview { margin-top: 6px; font-size: 11px; color: var(--fg-dim); overflow-wrap: anywhere; }
+  .machine-pair-preview.good { color: var(--green); }
+  .machine-pair-preview.bad { color: var(--red); }
+  .machine-modal-error { margin-top: 8px; font-size: 12px; color: var(--red); }
+  .machine-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
+  .machine-modal-legacy { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
+  .machine-modal-legacy summary { font-size: 11px; color: var(--fg-dim); cursor: pointer; }
+  .machine-modal-legacy .machine-modal-row { margin-top: 8px; }
+  .machine-code-value {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 24px;
+    letter-spacing: 2px;
+    color: var(--accent);
+    text-align: center;
+    padding: 10px 0;
+    user-select: all;
+  }

package/template/coding-task-manager/public/css/reviews.css

@@ -1336,6 +1336,10 @@ a.cr-btn { text-decoration: none; }
 .cr-header:has(.cr-doc-header-name) { flex-wrap: nowrap; } /* the path shrinks (dir first) instead of the header wrapping */
 .cr-header:has(.cr-doc-header-name) .cr-navcluster { flex: 0 1 auto; min-width: 160px; }
 .cr-header:has(.cr-doc-header-name) .cr-header-actions { flex-shrink: 0; flex-wrap: nowrap; }
+/* The doc header never wraps and its actions never shrink, so the R-5 chat label
+   (wider than the old "Chat") pushed Send past the panel at 1024 and starved the
+   path at 1440: the doc header shows the chat icon alone (title/aria-label keep the words). */
+.cr-header:has(.cr-doc-header-name) .cr-chat-toggle-label { display: none; }
 .cr-nav-history { display: inline-flex; gap: 2px; flex-shrink: 0; }
 .cr-nav-btn {
   width: 26px; height: 26px; display: inline-grid; place-items: center;