wisp-agents 0.15.0 → 0.16.0

package/web/css/blocks.css

@@ -0,0 +1,461 @@
+/* ---------- presentation blocks ---------- */
+.presentation { display: flex; flex-direction: column; gap: 14px; }
+.blk { animation: rise 0.45s var(--ease) var(--d) both; min-width: 0; }
+@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
+.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
+.b-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
+.b-title .count { font-weight: 500; color: var(--faint); }
+.caption { margin: 0; padding: 10px 16px 12px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
+.fallback-note { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
+
+/* hero */
+.b-hero { position: relative; padding: 2px 0 6px; }
+.b-hero .aura { display: none; }
+.hero-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.hero-top .meta { font-size: 12.5px; color: var(--muted); }
+.hero-top .meta + .meta::before { content: '·'; margin-right: 12px; color: var(--faint); }
+.b-hero h2 { margin: 12px 0 6px; font: 600 26px/1.2 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
+.b-hero p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; text-wrap: pretty; }
+
+/* markdown */
+.prose { color: var(--ink-2); line-height: 1.65; }
+.prose > :first-child { margin-top: 0; }
+.prose > :last-child { margin-bottom: 0; }
+.prose p, .prose ul, .prose ol, .prose pre, .prose blockquote, .prose .table-wrap { margin: 0 0 12px; }
+.prose h3, .prose h4, .prose h5, .prose h6 { color: var(--ink); margin: 18px 0 8px; font-weight: 600; font-size: 15px; }
+.prose h3 { font: 600 17px/1.3 var(--display); letter-spacing: -0.015em; }
+.prose ul, .prose ol { padding-left: 20px; }
+.prose li { margin: 3px 0; }
+.prose li::marker { color: var(--faint); }
+.prose li.task { list-style: none; margin-left: -18px; }
+.prose li.task::before { content: '☐ '; color: var(--faint); }
+.prose li.task.done::before { content: '☑ '; color: var(--good); }
+.prose strong { color: var(--ink); font-weight: 600; }
+.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
+.prose code, .b-hero code, .note code, .b-steps code, .q-text code, .b-check code, .b-compare code, .b-commits code {
+  font-size: 0.86em; padding: 1px 5px; border-radius: 5px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
+}
+.prose blockquote { border-left: 2px solid var(--line-2); padding-left: 14px; color: var(--muted); }
+.prose hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
+.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
+.prose table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
+.prose th, .prose td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--line); }
+.prose th { font-weight: 600; color: var(--ink); background: var(--surface-2); }
+.prose tr:last-child td { border-bottom: 0; }
+pre.code { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); overflow-x: auto; font-size: 12.5px; line-height: 1.6; }
+.b-md { padding: 0 2px; }
+
+/* steps */
+.b-steps { padding: 18px 20px 8px; }
+.b-steps ol { list-style: none; margin: 0; padding: 0; position: relative; }
+.b-steps ol::before {
+  content: ''; position: absolute; left: 10px; top: 12px; bottom: 22px; width: 1.5px; background: var(--line-2);
+  transform-origin: top; animation: draw-y 1.1s var(--ease) calc(var(--d, 0ms) + 200ms) both;
+}
+.blk-steps { --dd: var(--d); }
+.b-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-bottom: 14px; position: relative; animation: rise 0.55s var(--ease) calc(240ms + var(--k) * 110ms) both; }
+.b-steps .dot {
+  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface);
+  border: 1.5px solid var(--good); color: var(--good); position: relative; z-index: 1;
+}
+.b-steps .dot .i { width: 12px; height: 12px; }
+.b-steps .st-failed .dot { border-color: var(--bad); color: var(--bad); }
+.b-steps .st-skipped .dot { border-color: var(--line-2); color: var(--faint); }
+.b-steps b { font-weight: 600; display: block; line-height: 22px; }
+.b-steps li p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
+@keyframes draw-y { from { transform: scaleY(0); } }
+
+/* stats */
+.b-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
+.stat { position: relative; padding: 14px 16px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; animation: rise 0.4s var(--ease) calc(var(--k) * 50ms) both; }
+.stat .num { font: 600 26px/1.1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
+.stat .u { font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 2px; letter-spacing: 0; }
+.stat .lbl { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
+.stat .delta { position: absolute; top: 12px; right: 12px; font: 500 11.5px var(--mono); padding: 1px 6px; border-radius: 5px; background: var(--bg-2); color: var(--ink-2); }
+.stat.tone-good .delta { background: var(--add-bg); color: var(--good); }
+.stat.tone-bad .delta { background: var(--del-bg); color: var(--bad); }
+@keyframes draw-x { from { transform: scaleX(0); } }
+
+/* files */
+.b-files { padding: 16px 8px 8px; }
+.b-files .b-title { padding: 0 12px; }
+.b-files ul { list-style: none; margin: 0; padding: 0; }
+.b-files li { border-radius: 10px; animation: rise 0.5s var(--ease) calc(200ms + var(--k) * 60ms) both; }
+.b-files li.has-diff { cursor: pointer; }
+.b-files li:hover { background: var(--surface-2); }
+.b-files li.open { background: var(--surface-2); }
+.b-files .row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; min-width: 0; }
+.b-files .note { margin: -4px 0 0; padding: 0 12px 8px 42px; font-size: 13px; color: var(--muted); }
+.b-files .actions { margin-left: auto; display: flex; opacity: 0; transition: opacity 0.15s; }
+.b-files li:hover .actions, .b-files li.open .actions { opacity: 1; }
+.b-files .toggle .i { transition: transform 0.2s; }
+.b-files li.open .toggle .i { transform: rotate(90deg); }
+.b-files .b-diff.bare { margin: 0 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
+.badge { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font: 600 11px var(--mono); flex: none; }
+.badge.add { background: var(--add-bg); color: var(--add); }
+.badge.mod { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
+.badge.del { background: var(--del-bg); color: var(--del); }
+.badge.ren { background: var(--accent-soft); color: var(--accent-ink); }
+.path { font: 12.5px var(--mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.path .dir { color: var(--faint); }
+.path .base { color: var(--ink); font-weight: 500; }
+.nums { font: 500 11.5px var(--mono); display: inline-flex; gap: 6px; flex: none; }
+.plus { color: var(--add); }
+.minus { color: var(--del); }
+
+/* tree */
+.b-tree { padding: 16px 18px 12px; }
+.b-tree ul { list-style: none; margin: 0; padding: 0; font: 12.5px/1.5 var(--mono); }
+.b-tree li { padding-left: calc(var(--depth) * 18px); animation: rise 0.45s var(--ease) calc(150ms + var(--k) * 40ms) both; }
+.b-tree .row { display: flex; align-items: center; gap: 7px; padding: 3px 6px; border-radius: 7px; }
+.b-tree li.file .row { cursor: pointer; }
+.b-tree li.file .row:hover { background: var(--surface-2); }
+.b-tree .i { width: 14px; height: 14px; color: var(--faint); }
+.b-tree .dir .name { color: var(--muted); }
+.b-tree .badge { width: 17px; height: 17px; font-size: 10px; }
+.b-tree .note { font-family: var(--sans); color: var(--muted); font-size: 12.5px; margin-left: 4px; }
+
+/* diff & code */
+.b-diff, .b-code { overflow: hidden; }
+.diff-head, .code-head {
+  display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
+}
+.diff-head .i { color: var(--faint); }
+.diff-head .nums { margin-left: auto; }
+.code-head { justify-content: space-between; }
+.code-head .lang { font: 500 11.5px var(--mono); color: var(--muted); }
+.code-head .file { display: inline-flex; min-width: 0; }
+.lineno { font: 12.5px var(--mono); color: var(--faint); }
+.diff-scroll, .code-scroll { overflow-x: auto; max-height: 560px; overflow-y: auto; }
+.b-diff table, .b-code table { border-collapse: collapse; width: 100%; font: 12.5px/1.65 var(--mono); }
+.b-diff td, .b-code td { padding: 0; vertical-align: top; }
+.b-diff .no, .b-code .no { width: 1%; min-width: 36px; padding: 0 10px 0 12px; text-align: right; color: var(--faint); user-select: none; font-size: 11.5px; }
+.b-diff .sign { width: 1%; padding: 0 6px 0 4px; color: var(--faint); user-select: none; }
+.b-diff .src, .b-code .src { white-space: pre; padding-right: 18px; color: var(--ink-2); }
+.b-diff tr.add { background: var(--add-bg); }
+.b-diff tr.add .sign, .b-diff tr.add .no { color: var(--add); }
+.b-diff tr.del { background: var(--del-bg); }
+.b-diff tr.del .sign, .b-diff tr.del .no { color: var(--del); }
+.b-diff tr.del .src { opacity: 0.8; }
+.b-diff tr.gap td { padding: 3px 12px; font: 11.5px var(--sans); color: var(--faint); background: var(--surface-2); }
+.b-diff tr.gap .i { width: 12px; height: 12px; vertical-align: -2px; }
+.b-diff tr.sep td { height: 10px; background: var(--surface-2); border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
+.b-diff tbody tr:first-child td { padding-top: 6px; }
+.b-diff tbody tr:last-child td { padding-bottom: 6px; }
+.b-diff tr.ln { animation: line-in 0.4s var(--ease) both; }
+.b-diff.missing { padding: 0 0 4px; }
+.b-diff.missing p { padding: 10px 14px; margin: 0; font-size: 13px; }
+.b-code tr.hl { background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.b-code tr.hl .no { color: var(--accent); box-shadow: inset 2px 0 var(--accent); }
+.b-code .code-scroll { padding: 6px 0; }
+.copy.copied { color: var(--good); }
+@keyframes line-in { from { opacity: 0; } }
+
+.tk-k { color: var(--tk-k); }
+.tk-s { color: var(--tk-s); }
+.tk-c { color: var(--tk-c); font-style: italic; }
+.tk-n { color: var(--tk-n); }
+.tk-t { color: var(--tk-t); }
+
+/* compare */
+.b-compare { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: stretch; }
+.b-compare .side { padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
+.b-compare .before { background: var(--surface-2); }
+.b-compare .after { border-color: var(--line-2); }
+.side-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
+.after .side-label { color: var(--good); }
+.b-compare ul { list-style: none; margin: 0; padding: 0; }
+.b-compare li { display: flex; gap: 9px; padding: 4px 0; font-size: 13.5px; animation: rise 0.5s var(--ease) calc(250ms + var(--k) * 90ms) both; }
+.b-compare li .i { margin-top: 3px; width: 14px; height: 14px; }
+.before li { color: var(--muted); }
+.before li .i { color: var(--del); }
+.after li .i { color: var(--good); }
+.b-compare .arrow { display: grid; place-items: center; color: var(--faint); }
+.b-compare pre.code { margin: 0; }
+
+/* flow */
+.b-flow { padding: 16px 18px 20px; }
+.flow-stage { position: relative; padding: 4px 2px; }
+.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
+.wire { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.9s var(--ease) calc(500ms + var(--k) * 180ms) forwards; }
+.wire.back { stroke-dasharray: 0.012 0.012; stroke-dashoffset: 0; animation: fade-in 0.6s calc(900ms + var(--k) * 180ms) both; stroke: var(--faint); }
+.spark { fill: var(--accent); }
+.spark.back { fill: var(--muted); }
+.wire-label { font: 500 11px var(--sans); fill: var(--muted); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
+.cols { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 46px; }
+.col { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 220px; }
+.cols.snake { display: grid; grid-template-columns: repeat(var(--per-row), minmax(0, 1fr)); column-gap: 46px; row-gap: 40px; align-items: center; }
+.cols.snake .col { width: 100%; max-width: 220px; justify-self: center; }
+.node {
+  position: relative; padding: 9px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-2);
+  text-align: center; animation: pop 0.4s var(--ease) calc(200ms + var(--k) * 120ms) both;
+}
+.node b { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
+.node span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.35; }
+@keyframes draw { to { stroke-dashoffset: 0; } }
+@keyframes dash { to { stroke-dashoffset: -0.024; } }
+@keyframes fade-in { from { opacity: 0; } }
+@keyframes pop { from { opacity: 0; transform: scale(0.9) translateY(6px); } }
+
+/* chart */
+.b-chart { padding: 16px 18px 14px; }
+.bars { display: flex; flex-direction: column; gap: 10px; }
+.bar-row { display: grid; grid-template-columns: minmax(80px, 28%) 1fr auto; align-items: center; gap: 12px; animation: rise 0.5s var(--ease) calc(150ms + var(--k) * 90ms) both; }
+.bar-label { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bar-track { height: 8px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
+.bar { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--accent); transform-origin: left; animation: grow-x 0.8s var(--ease) calc(200ms + var(--k) * 100ms) both; }
+.bar-row:nth-child(2n) .bar { background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
+.bar-val { font: 500 13px var(--mono); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
+.bar-val .u { color: var(--muted); margin-left: 2px; font-size: 11.5px; }
+@keyframes grow-x { from { transform: scaleX(0); } }
+
+/* terminal */
+.b-term { border-radius: var(--radius); background: var(--term-bg); color: var(--term-ink); overflow: hidden; border: 1px solid var(--line); }
+.term-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 12px; color: #8a8a8a; }
+.lights { display: none; }
+.term-head .title { flex: 1; font-family: var(--mono); font-size: 11.5px; }
+.exit { font: 500 11px var(--mono); padding: 1px 7px; border-radius: 5px; }
+.exit.ok { background: rgba(76, 195, 138, 0.14); color: #4cc38a; }
+.exit.bad { background: rgba(255, 99, 105, 0.14); color: #ff6369; }
+.b-term pre { margin: 0; padding: 12px 14px 14px; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 440px; overflow-y: auto; }
+.b-term .ps { color: #8a8a8a; }
+.b-term .cmd { color: #fff; }
+.b-term .caret { display: inline-block; width: 7px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #e8e8e6; animation: blink 1s steps(1) infinite; }
+.b-term.ran .caret { display: none; }
+.b-term .out { color: #b4b4b0; opacity: 0; transition: opacity 0.4s; }
+.b-term.ran .out { opacity: 1; }
+@keyframes blink { 50% { opacity: 0; } }
+
+/* tests */
+.b-tests { padding: 18px 20px; }
+.tests-main { display: flex; align-items: center; gap: 18px; position: relative; }
+.ring { width: 76px; height: 76px; transform: rotate(-90deg); flex: none; }
+.ring circle { fill: none; stroke-width: 7; }
+.ring .track { stroke: var(--bg-2); }
+.ring .seg { stroke-linecap: butt; animation: ring-in 1.3s var(--ease) 0.35s both; }
+.ring .pass { stroke: var(--good); }
+.ring .fail { stroke: var(--bad); }
+.ring .skip { stroke: var(--line-2); }
+.ring-label { position: absolute; left: 0; width: 76px; display: grid; place-items: center; }
+.ring-label .i { width: 24px; height: 24px; }
+.b-tests.ok .ring-label { color: var(--good); }
+.b-tests.bad .ring-label { color: var(--bad); }
+.verdict { font: 600 18px/1.25 var(--display); letter-spacing: -0.015em; }
+.counts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; font-size: 13px; color: var(--muted); }
+.counts b { font-weight: 600; font-variant-numeric: tabular-nums; }
+.counts .pass b { color: var(--good); }
+.counts .fail b { color: var(--bad); }
+.cmdline { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--muted); }
+.failures { list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
+.failures li { display: flex; gap: 10px; padding: 6px 0; }
+.failures li > .i { color: var(--bad); margin-top: 3px; }
+.failures b { font-weight: 600; font-size: 13.5px; }
+.failures pre { margin: 4px 0; padding: 8px 10px; border-radius: 8px; background: var(--del-bg); font-size: 12px; white-space: pre-wrap; color: var(--ink-2); }
+.failures .file { font: 12px var(--mono); }
+@keyframes ring-in { from { stroke-dasharray: 0 400; } }
+
+/* commits */
+.b-commits { padding: 16px 20px 10px; }
+.b-commits .b-title .i { width: 14px; height: 14px; }
+.b-commits ol { list-style: none; margin: 0; padding: 0; position: relative; }
+.b-commits ol::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 16px; width: 2px; background: var(--line-2); transform-origin: top; animation: draw-y 0.9s var(--ease) 0.3s both; }
+.b-commits li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; padding-bottom: 12px; animation: rise 0.5s var(--ease) calc(300ms + var(--k) * 110ms) both; }
+.b-commits .node { all: unset; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-2); position: relative; z-index: 1; }
+.b-commits .msg { font-weight: 500; }
+.b-commits .sub { display: flex; gap: 10px; margin-top: 2px; font: 12px var(--mono); color: var(--muted); }
+.b-commits .sub code { padding: 0 5px; }
+
+/* graph: a PR's branches, the merge target and its conflicts */
+.b-graph { --g-base: var(--faint); --g-1: #3b82f6; --g-2: #14b8a6; --g-3: #8b5cf6; --g-4: #e5487f; --g-merged: #8250df; padding: 14px 16px 12px; container-type: inline-size; }
+.g-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
+.g-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
+.g-ref { font-weight: 500; color: var(--muted); }
+.g-pr { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; --tone: var(--good); color: var(--tone); }
+.g-pr i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.g-pr.st-merged { --tone: var(--g-merged); }
+.g-pr.st-closed { --tone: var(--bad); }
+.g-pr.st-draft { --tone: var(--muted); }
+.g-body { position: relative; display: grid; grid-template-columns: var(--g-w) 1fr; column-gap: 14px; }
+.g-svg { overflow: visible; }
+.g-wire { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.75; animation: draw 0.7s var(--ease) calc(250ms + var(--k) * 60ms) forwards; }
+.g-wire.pending { stroke-dasharray: 3 3; stroke-dashoffset: 0; animation: fade-in 0.5s 0.5s both; stroke: var(--faint); }
+.g-wire.pending.st-conflict { stroke: var(--warn); }
+.g-wire.pending.st-ready { stroke: var(--good); }
+.g-wire.st-merged { stroke: var(--g-merged); }
+.g-tail { fill: none; stroke-width: 1.5; stroke-dasharray: 2 3; opacity: 0.5; animation: fade-in 0.5s 0.4s both; }
+.g-dot { fill: var(--lc); stroke: var(--surface); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pop 0.35s var(--ease) calc(200ms + var(--k) * 60ms) both; }
+.g-dot.conflict { fill: var(--warn); }
+.g-dot.merge { fill: var(--surface); stroke: var(--lc); stroke-width: 1.6; }
+.g-target circle { fill: var(--surface); stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 2 2; }
+.g-target path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+.g-target.st-conflict circle { fill: var(--warn); stroke: color-mix(in srgb, var(--warn) 25%, transparent); stroke-width: 4; stroke-dasharray: none; paint-order: stroke; }
+.g-target.st-ready circle { fill: var(--good); stroke: color-mix(in srgb, var(--good) 22%, transparent); stroke-width: 4; stroke-dasharray: none; paint-order: stroke; }
+.g-target.st-merged circle { fill: var(--g-merged); stroke: none; }
+.g-target.st-blocked circle { fill: var(--bad); stroke: none; }
+.g-rows { list-style: none; margin: 0; padding: 0; min-width: 0; }
+.g-row { display: flex; align-items: center; gap: 8px; height: 30px; min-width: 0; margin: 0 -6px; padding: 0 6px; border-radius: 6px; font-size: 13.5px; animation: rise 0.4s var(--ease) calc(200ms + var(--k) * 60ms) both; transition: background 0.15s; }
+.g-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
+.g-row.other .g-msg, .g-row.target .g-msg { color: var(--muted); }
+.g-row.conflict .g-msg { color: var(--warn); }
+.g-row.lit { background: color-mix(in srgb, var(--warn) 9%, transparent); }
+.g-tag { flex: none; padding: 1px 6px; border-radius: 5px; font: 11.5px var(--mono); color: var(--lc); background: color-mix(in srgb, var(--lc) 11%, transparent); }
+.g-num { flex: none; display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; font-size: 11px; font-weight: 600; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
+.g-meta { flex: none; margin-left: auto; padding-left: 10px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
+.g-meta code { font: 12px var(--mono); color: var(--faint); background: none; padding: 0; margin-right: 4px; }
+.g-state { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--muted); }
+.g-row.st-conflict .g-state { color: var(--warn); }
+.g-row.st-ready .g-state { color: var(--good); }
+.g-row.st-merged .g-state { color: var(--g-merged); }
+.g-row.st-blocked .g-state { color: var(--bad); }
+.g-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+.g-check { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 13px; font-size: 12.5px; animation: rise 0.4s var(--ease) calc(500ms + var(--k) * 60ms) both; }
+.g-check .i { width: 12px; height: 12px; color: var(--good); }
+.g-check b { font-weight: 500; }
+.g-check span { color: var(--muted); }
+.g-check.st-fail .i { color: var(--bad); }
+.g-check.st-pending .i, .g-check.st-skip .i { color: var(--muted); }
+.g-conflicts { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
+.g-conflicts li { padding: 7px 6px; margin: 0 -6px; border-radius: 8px; animation: rise 0.4s var(--ease) calc(500ms + var(--k) * 70ms) both; transition: background 0.15s; }
+.g-conflicts li.lit { background: color-mix(in srgb, var(--warn) 7%, transparent); }
+.g-c-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
+.g-c-head .g-num { align-self: center; }
+.g-file { font: 12.5px var(--mono); }
+.g-c-detail { color: var(--ink-2); }
+.g-sides { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; align-items: baseline; margin: 5px 0 0 25px; font-size: 12px; }
+.g-side { display: contents; }
+.g-num.plain { color: var(--muted); background: var(--bg-2); }
+.g-who { font: 11.5px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
+.g-side code { font: 12px var(--mono); white-space: pre-wrap; word-break: break-word; padding: 2px 6px; border-radius: 5px; background: var(--add-bg); color: var(--ink-2); }
+.g-side.theirs code { background: color-mix(in srgb, var(--warn) 8%, transparent); }
+.g-res { display: flex; gap: 6px; margin: 5px 0 0 25px; font-size: 12.5px; color: var(--ink-2); }
+.g-res .i { width: 13px; height: 13px; margin-top: 2px; color: var(--good); flex: none; }
+.g-foot { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-top: 8px; font-size: 13.5px; color: var(--ink); }
+.g-foot > .i { width: 14px; height: 14px; color: var(--muted); flex: none; }
+.g-foot.st-conflict > .i, .g-count { color: var(--warn); }
+.g-foot.st-ready > .i { color: var(--good); }
+.g-foot.st-merged > .i { color: var(--g-merged); }
+.g-foot.st-blocked > .i { color: var(--bad); }
+.g-foot-text { flex: 1; min-width: 0; }
+.g-count { font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
+.g-action { flex: none; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); transition: background 0.15s; }
+.g-action:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 16%, transparent); }
+.g-action:disabled { opacity: 0.5; cursor: default; }
+@container (max-width: 520px) {
+  .g-meta { display: none; }
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .b-graph { --g-1: #6d8dff; --g-2: #2fd0b4; --g-3: #a78bfa; --g-4: #f472b6; --g-merged: #b48cff; }
+}
+
+/* checklist */
+.b-check { padding: 16px 20px 12px; }
+.b-check ul { list-style: none; margin: 0; padding: 0; }
+.b-check li { display: flex; gap: 10px; padding: 5px 0; animation: rise 0.45s var(--ease) calc(200ms + var(--k) * 90ms) both; }
+.b-check .box { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 6px; border: 1.5px solid var(--line-2); color: transparent; flex: none; }
+.b-check .box .i { width: 12px; height: 12px; }
+.b-check li.done .box { background: var(--good); border-color: var(--good); color: #fff; animation: check-in 0.4s var(--ease) calc(400ms + var(--k) * 90ms) both; }
+.b-check li.done > span:last-child { color: var(--ink-2); }
+.b-check li:not(.done) > span:last-child { color: var(--muted); }
+@keyframes check-in { from { transform: scale(0.4); background: transparent; border-color: var(--line-2); } }
+
+/* callout */
+.b-callout { --t: var(--info); display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--t) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--t) 20%, var(--line)); }
+.b-callout.tone-success { --t: var(--good); }
+.b-callout.tone-warn { --t: var(--warn); }
+.b-callout.tone-danger { --t: var(--bad); }
+.b-callout .ic { color: var(--t); padding-top: 1px; }
+.b-callout b { display: block; font-weight: 600; margin-bottom: 2px; color: var(--ink); }
+.b-callout .prose { font-size: 14px; }
+
+/* image */
+.b-image { margin: 0; overflow: hidden; }
+.b-image img { display: block; width: 100%; max-height: 520px; object-fit: contain; background: var(--surface-2); cursor: zoom-in; }
+.b-image figcaption { padding: 10px 16px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
+.b-image.broken img { min-height: 80px; }
+.lightbox { max-width: 92vw; max-height: 90vh; border-radius: 12px; box-shadow: var(--shadow-2); }
+
+/* next */
+.b-next { padding-top: 6px; }
+.next-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
+.next-label .i { color: var(--muted); width: 14px; height: 14px; }
+.chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.chip {
+  padding: 6px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2);
+  transition: border-color 0.15s, background 0.15s, color 0.15s; animation: rise 0.4s var(--ease) calc(200ms + var(--k) * 50ms) both; text-align: left;
+}
+.chip:hover { border-color: var(--faint); color: var(--ink); background: var(--surface-2); }
+
+/* actions block */
+.b-actions { padding: 16px 18px 12px; }
+.act-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.act-row { border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; animation: rise 0.45s var(--ease) calc(150ms + var(--k) * 70ms) both; transition: border-color 0.15s; }
+.act-row.ran-ok { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
+.act-row.ran-bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
+.act-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; }
+.act-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.act-info b { font-weight: 600; font-size: 13.5px; color: var(--ink); }
+.act-cmd { font: 11.5px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.act-detail { font-size: 12.5px; color: var(--muted); }
+.act-side { display: inline-flex; align-items: center; gap: 8px; flex: none; }
+.act-side .exit { background: var(--bg-2); color: var(--muted); }
+.act-side .exit.ok { background: var(--add-bg); color: var(--good); }
+.act-side .exit.bad { background: var(--del-bg); color: var(--bad); }
+.act-res { border-top: 1px solid var(--line); background: var(--term-bg); color: var(--term-ink); padding: 10px 12px; }
+.act-out { margin: 0; font: 12px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 280px; overflow-y: auto; color: #b4b4b0; }
+.act-fix { margin-top: 8px; }
+
+/* interactive terminal, tests, revert & checkpoints */
+.term-run { color: #b4b4b0; border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); }
+.term-run:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); }
+.tests-cmd { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
+.tests-cmd .cmdline { margin-top: 0; }
+.tests-rerun-out { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--term-bg); color: var(--term-ink); }
+.tests-rerun-out pre { margin: 0; font: 12px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto; color: #b4b4b0; }
+.rev-tag { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 5px; font: 500 11px var(--sans); background: var(--bg-2); color: var(--muted); border: 1px solid var(--line); }
+.cp-sha { font: 500 11px var(--mono); color: var(--faint); padding: 1px 5px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); }
+.b-diff.is-reverted .diff-scroll { opacity: 0.55; }
+.b-diff.is-reverted .path .base, .b-files li.is-reverted .path .base { text-decoration: line-through; color: var(--muted); }
+.cp-rollback { display: inline-flex; align-items: center; gap: 5px; }
+.cp-rollback .i { width: 12px; height: 12px; }
+.cp-rollback.rolled-back { color: var(--accent-ink); }
+
+/* trail */
+.trail { margin-top: 18px; }
+.trail-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 8px 2px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--faint); }
+.tb { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
+.tb .i { width: 13px; height: 13px; }
+.trail-bar .link { font-size: 12px; }
+/* Activity counts double as the Activity toggle, so the bar carries no separate "Activity" link. */
+.tb-acts { display: inline-flex; align-items: center; gap: 10px; margin: -3px -6px; padding: 3px 6px; border-radius: 6px; color: inherit; transition: color 0.15s, background 0.15s; }
+.tb-acts:hover, .tb-acts.on { color: var(--ink); background: var(--bg-2); }
+/* Secondary turn actions: icon-only, faint until the turn is hovered (same rule as the thumbs). */
+.tb-tools { display: inline-flex; align-items: center; gap: 1px; margin-left: -8px; }
+.tb-btn { display: inline-grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; color: var(--faint); opacity: 0.5; transition: color 0.15s, background 0.15s, opacity 0.15s; }
+.tb-btn .i { width: 13px; height: 13px; }
+.tb-btn:hover, .tb-btn.on { color: var(--ink); background: var(--bg-2); }
+.turn:hover .tb-btn, .tb-btn:focus-visible, .tb-btn.on { opacity: 1; }
+.trail-body { padding: 8px 0 0; animation: rise 0.4s var(--ease); }
+.trail-body .presentation { gap: 10px; }
+/* Thumbs: faint until the trail is hovered or the turn is rated, so a finished turn reads the same. */
+.rate { display: inline-flex; gap: 1px; opacity: 0.5; transition: opacity 0.15s; }
+.turn:hover .rate, .rate.rated, .rate:focus-within { opacity: 1; }
+.rate-btn { display: inline-grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; color: var(--faint); transition: color 0.15s, background 0.15s; }
+.rate-btn .i { width: 13px; height: 13px; }
+.rate-btn:hover { color: var(--ink); background: var(--bg-2); }
+.rate-btn[data-rate="up"].on { color: var(--good); }
+.rate-btn[data-rate="down"].on { color: var(--bad); }
+.rate-btn.on .i { fill: color-mix(in srgb, currentColor 18%, transparent); }
+.rate.thanked [data-rate="up"].on .i { animation: thumb-pop 0.45s var(--ease); }
+@keyframes thumb-pop { 40% { transform: scale(1.35) rotate(-12deg); } }
+.why { display: grid; gap: 6px; }
+.why .textarea { min-height: 0; resize: none; }
+.why-foot { display: flex; align-items: center; gap: 10px; }
+.why-foot .muted { margin-right: auto; }
+.why-foot .primary { height: 24px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
+.fb-modal { width: min(520px, 100%); }
+.fb-rate { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
+.fb-rate span { margin-right: 6px; }
+.fb-rate .rate-btn { width: 30px; height: 28px; }
+.fb-rate .rate-btn .i { width: 16px; height: 16px; }
+.fb-modal .ship-foot { margin-top: 12px; }
+

package/web/css/composer.css

@@ -0,0 +1,62 @@
+/* ---------- per-item composer ---------- */
+.composer {
+  padding: 6px 8px 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
+  transition: box-shadow 0.15s, border-color 0.15s;
+}
+.composer:focus-within { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); box-shadow: 0 0 0 3px var(--accent-soft); }
+.composer textarea { min-height: 26px; font-size: 14px; padding: 6px 2px; }
+.composer textarea:disabled { cursor: not-allowed; }
+.c-bar { display: flex; align-items: center; gap: 8px; }
+.c-queued { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+.c-queued:not(:empty) { padding: 4px 0 6px; }
+.cq { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 6px 30px 6px 10px; border-radius: 8px; border: 1px dashed var(--line-2); font-size: 12.5px; animation: pop 0.35s var(--ease); }
+.cq-tag { flex: none; font-size: 11px; font-weight: 600; color: var(--accent-ink); }
+.cq .att-x:hover { color: var(--bad); }
+.cq-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
+.c-hint { flex: 1; font-size: 11.5px; color: var(--faint); }
+.c-bar .mode-btn { height: 30px; min-width: 30px; padding: 0 8px; }
+.c-bar .mode-btn.changed { background: var(--bg-2); }
+.t-mode { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 5px; font: 500 11px var(--sans); color: var(--muted); border: 1px solid var(--line); }
+.t-mode .i { width: 12px; height: 12px; }
+.t-mode.m-plan { color: var(--accent-ink); }
+.t-mode.m-auto { color: var(--warn); }
+.send { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--bg); transition: opacity 0.15s; }
+.send:hover { opacity: 0.86; }
+.send:disabled { opacity: 0.5; }
+.send.busy { opacity: 1; position: relative; color: transparent; }
+.send.busy::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 2px solid var(--bg); border-right-color: transparent; animation: spin 0.7s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.c-done { color: var(--muted); }
+.c-ship { color: var(--accent-ink); }
+.c-queue { color: var(--faint); font-size: 12px; }
+.c-queue.on { color: var(--ink); background: var(--bg-2); }
+.c-done:hover { color: var(--good); }
+
+/* attachments tray */
+.tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
+.att {
+  position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 30px 0 4px; border-radius: 10px;
+  background: var(--surface-2); border: 1px solid var(--line); max-width: 240px; animation: pop 0.35s var(--ease);
+}
+.att img { width: 36px; height: 36px; border-radius: 7px; object-fit: cover; }
+.att-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 7px; background: var(--bg-2); color: var(--muted); }
+.att-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.att-size { font-size: 11px; color: var(--faint); white-space: nowrap; }
+.att-x { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: var(--muted); }
+.att-x:hover { background: var(--bg-2); color: var(--ink); }
+.att-x .i { width: 12px; height: 12px; }
+.att.uploading::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }
+.att.failed { border-color: var(--bad); }
+
+
+/* harness · model for the next follow-up: a quiet logo, spelled out once it's switched */
+.c-runner {
+  display: inline-flex; align-items: center; height: 30px; min-width: 30px; padding: 0 4px; border-radius: 8px; gap: 0;
+  font-size: 12px; color: var(--muted); transition: background 0.15s, color 0.15s;
+}
+.c-runner .rb-logo { margin-right: 0; background: transparent; }
+.c-runner:hover, .c-runner.open, .c-runner.changed { background: var(--bg-2); color: var(--ink); }
+.c-runner.changed { padding-right: 8px; }
+.c-runner.changed .rb-logo { margin-right: 4px; }
+.c-runner:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent); }
+.cr-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }