crewforth 3.1.1 → 3.2.0-rc.2

package/kit/studio/web/style.css

@@ -402,6 +402,24 @@ mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); co
 }
 .nav-foot-label:hover { color: var(--ink); }
 
+/* Remote viewers, under the machines: who holds a read-only link, and the way to take it back. */
+.rv { margin-top: var(--space-3); }
+.rv-head { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1); }
+.rv-title {
+  font-size: 11px; line-height: var(--type-label-line); font-weight: var(--type-label-weight);
+  letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--ink-dim);
+}
+.rv-say { white-space: normal; padding: 0 var(--space-1); }
+.rv-give {
+  display: flex; flex-direction: column; gap: var(--space-2);
+  padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised);
+}
+.rv-give .rv-say { padding: 0; }
+.rv-url { font-size: 12px; line-height: 16px; overflow-wrap: anywhere; user-select: all; color: var(--ink); }
+.rv-acts { display: flex; gap: var(--space-2); }
+/* A viewer's page offers no way to start a session: the server refuses it, and a button that only fails is noise. */
+body[data-role="viewer"] #new-session { display: none; }
+
 /* ---- menu and toast ---- */
 .menu {
   position: fixed; z-index: 60; min-width: 190px; max-width: 272px;
@@ -525,6 +543,12 @@ mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); co
   border-bottom-color: color-mix(in srgb, var(--status-fail) 45%, var(--line));
 }
 .stage-note-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* A server running older code than the page: the whole sentence is the instruction, so it wraps, not ellipsizes. */
+.stage-note[data-kind="restart"] {
+  color: var(--ink); background: color-mix(in srgb, var(--status-waiting) 12%, var(--surface));
+  border-bottom-color: color-mix(in srgb, var(--status-waiting) 45%, var(--line));
+}
+.stage-note[data-kind="restart"] .stage-note-text { white-space: normal; }
 /* The last picture stays while the server is away, and is drawn as what it is: old. */
 .stage[data-offline="true"] .canvas,
 .stage[data-offline="true"] .tl,
@@ -553,6 +577,107 @@ mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); co
 .mv { flex: 1; min-height: 0; min-width: 0; overflow: auto; background: var(--ground); padding: var(--space-4); }
 .mv[hidden] { display: none; }
 .mv-empty { padding: var(--space-6); color: var(--ink-dim); font-size: 13px; }
+
+/* The Map view: the project as its crew map shows it. Bands, cards, lines, the findings, the inspector. */
+.mp { flex: 1; min-height: 0; min-width: 0; overflow: auto; background: var(--ground); padding: var(--space-4); }
+.mp[hidden] { display: none; }
+.mp .sub { white-space: normal; flex: initial; min-width: 0; }
+.mp .lbl { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
+.mp-empty { padding: var(--space-6); color: var(--ink-dim); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
+.mp-empty p { margin: 0; }
+.mp-pane { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; min-height: 100%; }
+.mp-head, .mp-toolbar, .mp-source { display: flex; align-items: center; gap: var(--space-2); padding: 10px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
+.mp-title { margin: 0; font-size: 15px; font-weight: 700; }
+.mp-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--surface-raised); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
+.mp-pill[data-tone="behind"], .mp-pill[data-tone="missing"] { color: var(--status-bad); background: color-mix(in srgb, var(--status-bad) 14%, transparent); }
+.mp-tog { height: 28px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
+.mp-tog[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); }
+.mp-compare { height: 30px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; padding: 0 8px; max-width: 260px; }
+.mp-legend { position: relative; }
+.mp-legend-box { position: absolute; right: 0; top: 34px; z-index: 5; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); min-width: 220px; }
+.mp-legend-row { display: flex; align-items: center; gap: 8px; }
+.mp-legend-line { width: 28px; height: 0; border-top: 2px solid var(--ink-faint); flex: none; }
+.mp-legend-line[data-kind="inferred"] { border-top-style: dotted; }
+.mp-legend-line[data-kind="model"] { border-top-style: dashed; border-top-color: var(--studio-accent); opacity: 0.7; }
+.mp-legend-line[data-kind="lit"] { border-top-color: var(--studio-accent); }
+.mp-legend-card { width: 22px; height: 14px; border: 1px solid var(--ink-faint); border-radius: 4px; flex: none; }
+.mp-legend-card[data-kind="dashed"] { border-style: dashed; }
+.mp-file { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
+.mp-body { display: flex; min-height: 0; flex: 1; }
+.mp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+/* The pane pans and zooms (viewport.js): the layer is moved by one transform, so nothing inside restyles. */
+.mp-canvas-pane { position: relative; flex: 1; min-height: 380px; overflow: hidden; cursor: grab; background-color: var(--ground); background-image: radial-gradient(var(--line) 1px, transparent 1.2px); background-size: 20px 20px; touch-action: none; }
+.mp-canvas-pane.cv-panning { cursor: grabbing; }
+.mp-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
+.mp-band { position: absolute; left: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; box-sizing: border-box; }
+.mp-group { position: absolute; border: 1px dashed var(--line); border-radius: var(--radius-md); box-sizing: border-box; }
+.mp-group-fold { position: absolute; left: 8px; top: 3px; border: 0; background: none; padding: 0; font: inherit; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); cursor: pointer; }
+.mp-group-fold:hover { color: var(--ink); }
+.mp-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
+.mp-line { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; }
+.mp-line[data-line="inferred"] { stroke-dasharray: 2 4; }
+.mp-line[data-line="model"] { stroke-dasharray: 7 4; stroke: var(--studio-accent); opacity: 0.7; }
+.mp-line[data-lit="false"] { opacity: 0.35; }
+.mp-line[data-lit="true"] { stroke: var(--studio-accent); stroke-width: 2.2; }
+.mp-elab { position: absolute; transform: translate(-50%, -50%); display: flex; gap: 4px; z-index: 2; }
+.mp-mod, .mp-ext { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-md); z-index: 1; overflow: hidden; }
+.mp-mod { background: var(--surface); padding: 10px 14px; }
+.mp-mod[data-kind="client"] { border-style: dashed; }
+.mp-mod[data-kind="group"] { background: var(--surface-raised); }
+.mp-ext[data-inferred="true"] { border-style: dashed; }
+.mp-card.cv-dragging { cursor: grabbing; z-index: 3; }
+.mp-ext { background: var(--ground); padding: 6px 10px; justify-content: center; }
+.mp-card:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 2px; }
+.mp-mod[data-selected="true"], .mp-ext[data-selected="true"] { border-color: var(--studio-accent); box-shadow: 0 0 0 1px var(--studio-accent); }
+.mp-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.mp-name { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.mp-ename { font-family: var(--font-mono); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mp-kind { font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); flex: none; }
+.mp-fb { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--status-bad) 18%, transparent); color: var(--status-bad); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
+.mp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
+.mp-chip { font-family: var(--font-mono); font-size: 11px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--surface-raised); display: inline-flex; align-items: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+.mp-findings { border-top: 1px solid var(--line); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
+.mp-flist { max-height: 132px; overflow: auto; display: flex; flex-direction: column; }
+.mp-frow { display: flex; align-items: center; gap: 10px; min-height: 28px; padding: 0 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
+.mp-frow:hover { background: var(--surface-raised); }
+.mp-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; box-sizing: border-box; border: 1.5px solid var(--status-bad); }
+.mp-dot[data-proven="true"] { background: var(--status-bad); }
+.mp-ftitle { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
+.mp-fcard .mp-ftitle { white-space: normal; }
+.mp-fwhere { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 2 auto; }
+.mp-badge { font-family: var(--font-mono); font-size: 11px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink-dim); display: inline-flex; align-items: center; flex: none; }
+.mp-inspect { width: 340px; flex: none; border-left: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
+.mp-inspect p { margin: 0; font-size: 13px; line-height: 19px; }
+.mp-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--line); }
+.mp-tab { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-dim); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 0; cursor: pointer; }
+.mp-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
+.mp-isec { display: flex; flex-direction: column; gap: 8px; }
+.mp-overview { white-space: pre-wrap; margin: 4px 0 10px; line-height: 1.5; }
+.mp-cites { font-family: var(--font-mono); font-size: 11px; overflow-wrap: anywhere; }
+.mp-conn { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--line); }
+.mp-ev { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
+.mp-fcard { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); }
+.mp-fcard[data-proven="false"] { border-style: dashed; }
+.mp-notmeasured { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
+/* The navigator's Map entry under a project, and its count of findings (spec §11). */
+.map-row .map-word { font-size: 13px; font-weight: 600; }
+.map-count { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--status-bad) 18%, transparent); color: var(--status-bad); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
+.mp-cite { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
+.mp-cite:hover { color: var(--ink); text-decoration: underline; }
+.mp-pill[data-tone="model"] { color: var(--studio-accent); background: color-mix(in srgb, var(--studio-accent) 14%, transparent); }
+/* A phone shows the findings and a list of the modules in place of the pane (spec §11). */
+.mp-modlist { display: none; flex-direction: column; gap: 2px; padding: 10px 14px; border-top: 1px solid var(--line); }
+.mp-mrow { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
+.mp-mrow:hover { background: var(--surface-raised); }
+@media (max-width: 1023px) {
+  .mp-body { flex-direction: column; }
+  .mp-inspect { width: auto; border-left: 0; border-top: 1px solid var(--line); }
+}
+@media (max-width: 639px) {
+  .mp-canvas-pane, .mp-hint { display: none; }
+  .mp-modlist { display: flex; }
+  .mp-flist { max-height: none; }
+}
 .mv-pane { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
 .mv-head { display: flex; align-items: center; gap: var(--space-2); padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
 .mv-title { margin: 0; font-size: 15px; font-weight: 700; }
@@ -571,6 +696,7 @@ mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); co
 .mv-raised .mv-tag[data-kind="lowered"] { margin-left: 0; }
 .mv-tag[data-tone="pass"] { color: var(--status-good); background: color-mix(in srgb, var(--status-good) 14%, transparent); }
 .mv-tag[data-tone="fail"] { color: var(--status-fail); background: color-mix(in srgb, var(--status-fail) 14%, transparent); }
+.mv-tag[data-kind="advisor"] { margin-left: 6px; color: var(--studio-accent); background: color-mix(in srgb, var(--studio-accent) 16%, transparent); }
 .mv-tag[data-kind="escalated"] { color: var(--studio-accent); background: color-mix(in srgb, var(--studio-accent) 16%, transparent); }
 .mv-table td[data-partial="true"] { color: var(--ink-dim); }
 .mv-meter { display: inline-block; width: 72px; height: 6px; margin-left: 8px; border-radius: 999px; background: var(--surface-raised); overflow: hidden; vertical-align: middle; }
@@ -581,6 +707,11 @@ mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); co
 .mv-suggest-h { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--studio-accent); }
 .mv-suggest-text { margin: 0; font-size: 14px; line-height: 21px; }
 .mv-suggest-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+.mv-above { margin: 16px 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
+.mv-above .mv-suggest-h { color: var(--ink-dim); }
+.mv-above p { margin: 0; }
+.mv-above-verdict { font-size: 13px; line-height: 19px; }
+.mv-above-verdict[data-measured="false"] { color: var(--ink-dim); }
 .mv-cmd { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--surface-raised); font-size: 12px; user-select: all; }
 .mv-raised { display: flex; align-items: baseline; gap: var(--space-2); padding: 0 18px 16px; }
 .mv-raised .mv-tag { margin-left: 0; flex: none; }

package/kit/studio/web/usage.js

@@ -111,6 +111,18 @@ export function summaryRows(u, { live = false, now = null } = {}) {
   };
   part('Session', u.parts?.session, 'The session\'s own transcript');
   part('Agents', u.parts?.agents, 'Everything its agents did');
+  // The advisor: a second model the main one consulted mid-response. Its tokens are in the rows above already; this
+  // says how much of them it was. No call recorded, no row: a session that never consulted it shows no zero.
+  if (u.advisor?.calls) {
+    const a = u.advisor;
+    const who = Object.keys(u.advisorModels ?? {}).map(modelName).join(', ');
+    rows.push({
+      label: 'Advisor',
+      value: `${a.calls} ${a.calls === 1 ? 'call' : 'calls'} \u00b7 ${fmtCount(a.tokens.fresh)} \u00b7 ${fmtCost(a.cost)}`,
+      note: `Advice the main model asked a second model for${who ? ` (${who})` : ''}, priced at that model's rates. Included in the totals above; the API's own token count leaves it out\n${costNote(a)}`,
+      detail: kinds(a.tokens),
+    });
+  }
   // Behind the cost: each model's new tokens and what they come to. A model with no price says so with a dash.
   const perModel = Object.entries(u.byModel ?? {}).map(([model, t]) => [modelName(model), `${fmtCount(t.tokens.fresh)} \u00b7 ${fmtCost(t.cost)}`]);
   rows.push({ label: 'Cost', value: k.total ? fmtCost(u.cost) : NO_COST, note: costNote(u), detail: perModel.length ? perModel : undefined });

package/kit/studio/web/viewport.js

@@ -0,0 +1,160 @@
+// A pane that pans and zooms one layer, and cards that can be dragged on it.
+//
+// The graph (canvas.js) and the project map (map.js) both draw cards on a layer the viewer moves around. This is
+// that part, once: a drag on the empty pane pans, the wheel zooms about the pointer (or pans, when it is mostly
+// sideways), Fit puts the whole picture in the pane, and a card dragged more than a few pixels is placed by hand.
+// Where things go and what a card says stay with the view that owns them.
+import { ZOOM, fitZoom } from './graph-plan.js';
+
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+
+export class Viewport {
+  /**
+   * @param pane   the element the pointer works on; its size is the pane's
+   * @param layer  the element moved and scaled: one transform, so a zoom restyles nothing
+   * @param skip   (target) => true when a press on it is not a pan (a card, a control on the pane)
+   * @param onApply  called after every change of the view
+   */
+  constructor(pane, layer, { skip = () => false, onApply = () => {} } = {}) {
+    this.pane = pane;
+    this.layer = layer;
+    this.skip = skip;
+    this.onApply = onApply;
+    this.view = { x: 0, y: 0, k: 1 };
+    this.touched = false;        // the viewer moved the view themselves
+    this.#wire();
+  }
+
+  #wire() {
+    let panning = null;
+    this.pane.addEventListener('pointerdown', (e) => {
+      if (e.button !== 0) return;                 // right/middle must not pan
+      if (this.skip(e.target)) return;
+      panning = { px: e.clientX, py: e.clientY, x: this.view.x, y: this.view.y };
+      this.pane.setPointerCapture(e.pointerId);
+      this.pane.classList.add('cv-panning');
+    });
+    this.pane.addEventListener('pointermove', (e) => {
+      if (!panning) return;
+      this.view.x = panning.x + (e.clientX - panning.px);
+      this.view.y = panning.y + (e.clientY - panning.py);
+      this.touched = true;
+      this.apply();
+    });
+    const endPan = () => { panning = null; this.pane.classList.remove('cv-panning'); };
+    this.pane.addEventListener('pointerup', endPan);
+    this.pane.addEventListener('pointercancel', endPan);
+
+    this.pane.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      const r = this.pane.getBoundingClientRect();
+      const mx = e.clientX - r.left;
+      const my = e.clientY - r.top;
+      // deltaMode 1 is lines and 2 is pages; Firefox reports ~3 where Chrome reports ~100, which made zoom
+      // imperceptible and pan crawl.
+      const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? r.height : 1;
+      const dY = e.deltaY * unit;
+      const dX = e.deltaX * unit;
+      if (e.ctrlKey || e.metaKey || Math.abs(dY) > Math.abs(dX)) {
+        this.zoomAbout(this.view.k * Math.exp(-dY * 0.0016), mx, my);
+      } else {
+        this.view.x -= dX;
+        this.view.y -= dY;
+      }
+      this.touched = true;
+      this.apply();
+    }, { passive: false });
+  }
+
+  /** Zoom to `k`, keeping the world point under (mx, my) where it is. */
+  zoomAbout(k, mx, my) {
+    const next = clamp(k, ZOOM.min, ZOOM.max);
+    this.view.x = mx - (mx - this.view.x) * (next / this.view.k);
+    this.view.y = my - (my - this.view.y) * (next / this.view.k);
+    this.view.k = next;
+  }
+
+  /** Step the zoom from a toolbar: about the middle of the pane. */
+  zoomBy(factor) { this.zoomTo(this.view.k * factor); }
+
+  zoomTo(k) {
+    const r = this.pane.getBoundingClientRect();
+    this.zoomAbout(k, r.width / 2, r.height / 2);
+    this.touched = true;
+    this.apply();
+  }
+
+  /** Turn `view` into pixels: the single place that does. */
+  apply() {
+    const { x, y, k } = this.view;
+    this.layer.style.transform = `translate(${x}px, ${y}px) scale(${k})`;
+    this.onApply();
+  }
+
+  /** The whole picture (width × height, in the layer's own pixels) in the pane, never above 100%. */
+  /** Fit the picture to the pane; `floor` is a zoom it does not go under (the picture then starts at its top). */
+  fit(width, height, floor = 0) {
+    const r = this.pane.getBoundingClientRect();
+    const k = Math.max(fitZoom(width, height, r.width, r.height), Math.min(floor, ZOOM.fitMax));
+    this.view.k = k;
+    this.view.x = Math.max(ZOOM.pad, (r.width - width * k) / 2);
+    this.view.y = Math.max(ZOOM.pad, (r.height - height * k) / 2);
+    this.touched = false;
+    this.apply();
+  }
+
+  /** Bring a point of the layer to the middle of the pane, at least at `minK`. */
+  centerOn(cx, cy, minK = 1) {
+    const r = this.pane.getBoundingClientRect();
+    this.view.k = clamp(Math.max(this.view.k, minK), ZOOM.min, ZOOM.max);
+    this.view.x = r.width / 2 - cx * this.view.k;
+    this.view.y = r.height / 2 - cy * this.view.k;
+    this.touched = true;
+    this.apply();
+  }
+}
+
+/**
+ * A card that can be placed by hand. A press that moves more than 3 px (at the pane's zoom) is a drag, and the
+ * click that ends it is swallowed: without that, every reposition also toggled the selection.
+ * @param scale  () => the pane's zoom
+ * @param at     () => the card's position { x, y } when the drag starts
+ * @param move   (x, y) => the card is now here
+ * @param end    () => the drag is over (persist the place)
+ * @param ignore (target) => true for a part of the card that answers the press itself
+ */
+export function draggable(el, { scale, at, move, end = () => {}, ignore = () => false }) {
+  let drag = null;
+  el.addEventListener('pointerdown', (e) => {
+    if (e.button !== 0) return;
+    e.stopPropagation();                       // do not pan the pane too
+    if (ignore(e.target)) return;
+    const p = at() ?? { x: 0, y: 0 };
+    drag = { px: e.clientX, py: e.clientY, x: p.x, y: p.y, moved: false };
+    el.setPointerCapture(e.pointerId);
+  });
+  el.addEventListener('pointermove', (e) => {
+    if (!drag) return;
+    const dx = (e.clientX - drag.px) / scale();
+    const dy = (e.clientY - drag.py) / scale();
+    if (!drag.moved && Math.abs(dx) <= 3 && Math.abs(dy) <= 3) return;
+    drag.moved = true;
+    el.classList.add('cv-dragging');
+    move(Math.round(drag.x + dx), Math.round(drag.y + dy));
+  });
+  const stop = () => {
+    if (!drag) return;
+    if (drag.moved) { end(); el.dataset.suppressClick = '1'; }
+    drag = null;
+    el.classList.remove('cv-dragging');
+  };
+  el.addEventListener('pointerup', stop);
+  el.addEventListener('pointercancel', stop);
+}
+
+/** Did a drag just end on this element? Answers once, so the click that ends a drag does nothing. */
+export function swallowClick(el) {
+  if (el.dataset.suppressClick !== '1') return false;
+  el.dataset.suppressClick = '0';
+  return true;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "crewforth",
-  "version": "3.1.1",
-  "description": "Crewforth \u2014 your engineering crew for Claude Code: agents, skills and tool-level gates, in any stack.",
+  "version": "3.2.0-rc.2",
+  "description": "Crewforth — your engineering crew for Claude Code: agents, skills and tool-level gates, in any stack.",
   "bin": {
     "crewforth": "bin/cli.js"
   },
@@ -15,7 +15,8 @@
     "kit/",
     "VERSION",
     "LICENSE",
-    "README.md", "CHANGELOG.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "engines": {
     "node": ">=20"
@@ -42,10 +43,10 @@
     "code-review",
     "git-hooks"
   ],
-  "author": "Bar\u0131\u015f Yerlikaya",
+  "author": "Barış Yerlikaya",
   "homepage": "https://crewforth.com/",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Crewforth/crewforth.git"
+    "url": "git+https://github.com/crewforth/crewforth.git"
   }
 }

package/start.sh

@@ -96,6 +96,8 @@ _mt() {   # $1 = English text (the key); further args fill %s; result in _M
   if [ "$CREW_LANG" = tr ]; then
     case "$s" in
       "Crewforth · setup wizard") s='Crewforth · kurulum' ;;
+      "Status line: Crewforth's (the gate's last word, a standing approval, crew agents, fill, cost).") s="Durum satırı: Crewforth'unki (kapının son sözü, geçerli onay, crew ajanları, doluluk, maliyet)." ;;
+      "Status line: yours is kept; Crewforth's is one command away (see /crew-doctor).") s="Durum satırı: seninki korundu; Crewforth'unki tek komutla açılır (/crew-doctor'a bak)." ;;
       "stack-agnostic") s='her yığınla çalışır' ;;
       "[1/2] Who is this install for?") s='[1/2] Kurulumu kim kullanacak?' ;;
       "Decides whether your teammates get Crewforth's configuration — and what goes into .gitignore.") s="Crewforth ayarlarının ekiple paylaşılıp paylaşılmayacağını ve .gitignore'a nelerin ekleneceğini belirler." ;;
@@ -638,6 +640,14 @@ count_showcase .claude/skills
 # studio's gate hook is invoked as `bash <path>` today, so the bit is not load-bearing
 # yet; set it anyway, because a future direct exec would fail silently.
 chmod +x .claude/hooks/*.sh .claude/hooks/pre-commit .claude/hooks/commit-msg .claude/eval/*.sh .claude/studio/server/hooks/*.sh 2>/dev/null || true
+# The status line, only where none is set: a user's own would lose to the project's setting, so it is never
+# replaced. eval/lib/statusline.sh --install decides and writes; this only says what it did.
+if [ -f .claude/eval/lib/statusline.sh ]; then
+  case "$(bash .claude/eval/lib/statusline.sh --install 2>/dev/null)" in
+    installed) _mt "Status line: Crewforth's (the gate's last word, a standing approval, crew agents, fill, cost)."; echo "  ${_M}" ;;
+    kept) _mt "Status line: yours is kept; Crewforth's is one command away (see /crew-doctor)."; echo "  ${_M}" ;;
+  esac
+fi
 
 # §4.2: a vendor line that was armed before this run stays armed (the copy above resets it to a comment); nothing
 # else arms it. Rationale, and the measured failure of "arm it whenever the pattern skill exists", in adopt.sh.