crewforth 3.0.3 → 3.1.0-rc.1

package/kit/studio/web/timeline.js

@@ -0,0 +1,400 @@
+// The Timeline: the session's agents against time.
+//
+// Which rows there are, where a bar starts and ends and what it says is decided in timeline-plan.js. This file
+// draws that, and hands back what the viewer did: a row chosen, a group folded, the view moved.
+import {
+  rows, groupsOf, extent, windowOf, place, ticks, clock, stepRange, waitNote, factsOf, xOf, RANGES, DEFAULT_RANGE,
+} from './timeline-plan.js';
+import { Press } from './press.js';
+
+
+function mk(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text != null) n.textContent = text;
+  return n;
+}
+
+export class Timeline {
+  /**
+   * @param hooks.tileOf(node)      the agent's mark, as the graph draws it
+   * @param hooks.statusOf(node)    the word and tone of its status
+   * @param hooks.detailOf(node)    its transcript's reading, or null while it is not read
+   * @param hooks.onSelect(node|null)
+   * @param hooks.onShowOnGraph(node)
+   * @param hooks.onOpenConversation()
+   * @param hooks.onChange(state)   the toolbar's values changed
+   * @param hooks.fmt               { duration(ms), tokens(n) }
+   */
+  constructor(root, hooks = {}) {
+    this.root = root;
+    this.hooks = hooks;
+    // A redraw waits while a button is down on the view: the element under a press has to live to the release.
+    this.press = new Press(() => this.render());
+    if (typeof window !== 'undefined' && root.addEventListener) this.press.watch(root, window);
+    this.nodes = [];
+    this.session = null;
+    this.group = 'run';
+    this.range = DEFAULT_RANGE;
+    this.follow = true;
+    this.end = null;               // where the view ends when it is not following
+    this.folded = new Set();
+    this.expanded = new Set();
+    this.waiting = new Set();
+    this.filter = null;            // Set of statuses, or null
+    this.keepWaiting = false;
+    this.owned = null;             // the session's summary when Studio started it
+    this.live = false;
+    this.selected = null;
+    this.now = () => Date.now();
+    this.win = null;
+    this.#build();
+  }
+
+  #build() {
+    this.root.classList.add('tl');
+    this.axis = mk('div', 'tl-axis');
+    this.axisLabel = mk('div', 'tl-axis-label', 'Agent');
+    this.axisTrack = mk('div', 'tl-axis-track');
+    this.axis.append(this.axisLabel, this.axisTrack);
+
+    this.body = mk('div', 'tl-body');
+    this.rowsEl = mk('div', 'tl-rows');
+    this.nowLine = mk('div', 'tl-now');
+    this.nowLine.hidden = true;
+    this.body.append(this.rowsEl, this.nowLine);
+
+    this.noteEl = mk('div', 'tl-note');
+    this.drawer = mk('div', 'tl-drawer');
+    this.drawer.setAttribute('role', 'region');
+    this.drawer.setAttribute('aria-label', 'Selected agent');
+    this.drawer.hidden = true;
+    this.empty = mk('div', 'tl-empty');
+    this.empty.hidden = true;
+    // Said when the stretch of time on screen holds no bar although the session has some: an empty track with
+    // no word would read as a session in which nothing happened.
+    this.away = mk('div', 'tl-away');
+    this.away.hidden = true;
+    const whole = mk('button', 'btn sm', 'Show the whole session');
+    whole.type = 'button';
+    whole.addEventListener('click', () => { this.range = 'all'; this.render(); this.#changed(); });
+    this.awayText = mk('span', null);
+    this.away.append(this.awayText, whole);
+
+    this.root.replaceChildren(this.axis, this.body, this.empty, this.away, this.noteEl, this.drawer);
+
+    // Moving the view by hand is the viewer saying "stay here": following stops.
+    this.body.addEventListener('wheel', (e) => {
+      const dx = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : (e.shiftKey ? e.deltaY : 0);
+      if (!dx || !this.win) return;
+      e.preventDefault();
+      this.pan(dx);
+    }, { passive: false });
+  }
+
+  state() {
+    return { range: this.range, follow: this.follow && this.live, live: this.live, canZoomIn: stepRange(this.range, -1) !== null, canZoomOut: stepRange(this.range, 1) !== null };
+  }
+
+  #changed() { this.hooks.onChange?.(this.state()); }
+
+  setSession(id) {
+    if (id === this.session) return;
+    this.session = id;
+    this.nodes = [];
+    this.folded = new Set();
+    this.expanded = new Set();
+    this.selected = null;
+    this.follow = true;
+    this.end = null;
+    this.render();
+    this.#changed();
+  }
+
+  setNodes(nodes) { this.nodes = nodes ?? []; this.render(); }
+  setGroup(g) { if (g === this.group) return; this.group = g; this.folded = new Set(); this.expanded = new Set(); this.render(); }
+  setWaiting(ids) { this.waiting = new Set(ids ?? []); this.render(); }
+  setFilter(statuses, { keepWaiting = false } = {}) { this.filter = statuses ? new Set(statuses) : null; this.keepWaiting = keepWaiting; this.render(); }
+  setOwned(summary) { this.owned = summary ?? null; this.render(); }
+  setLive(live) { if (live === this.live) return; this.live = live; this.render(); this.#changed(); }
+
+  zoom(by) {
+    const next = stepRange(this.range, by);
+    if (!next) return;
+    this.range = next;
+    this.render();
+    this.#changed();
+  }
+
+  setFollow(on) {
+    this.follow = on;
+    if (on) this.end = null;
+    this.render();
+    this.#changed();
+  }
+
+  /** Move the view by pixels. Following stops: the viewer has chosen where to look. */
+  pan(dx) {
+    const width = this.trackWidth();
+    if (!this.win || !width) return;
+    this.end = this.win.to + (dx / width) * this.win.span;
+    if (this.follow) { this.follow = false; this.#changed(); }
+    this.render();
+  }
+
+  /** Choose an agent from outside (the attention strip, the dock, a card in the conversation). A folded group
+   *  that holds it is opened, and a group cut short shows all its rows: choosing something never hides it. */
+  select(id) {
+    this.selected = id;
+    if (id) {
+      for (const g of groupsOf(this.nodes, this.group)) {
+        if (!g.members.some((m) => m.id === id)) continue;
+        this.folded.delete(g.id);
+        this.expanded.add(g.id);
+      }
+    }
+    this.render();
+    if (id) this.rowsEl.querySelector?.('.tl-row.on')?.scrollIntoView?.({ block: 'nearest' });
+  }
+
+  dimmed(n) {
+    if (!this.filter) return false;
+    if (this.keepWaiting && this.waiting.has(n.id)) return false;
+    return !this.filter.has(n.status);
+  }
+
+  /** The label column's width is the stylesheet's (it narrows on a phone); the track is what is left. */
+  labelWidth() { return this.axisLabel.getBoundingClientRect?.().width ?? 0; }
+
+  trackWidth() {
+    const w = this.root.getBoundingClientRect?.().width ?? 0;
+    return Math.max(0, w - this.labelWidth());
+  }
+
+  /** Called once a second while the session is live, so that now moves. */
+  tick() { if (this.live && !this.root.hidden) this.render(); }
+
+  render() {
+    if (this.root.hidden) return;
+    if (this.press.defer()) return;
+    const now = this.now();
+    const agents = this.nodes.filter((n) => n.kind === 'agent');
+    const ext = extent(this.nodes, now, this.live);
+    const width = this.trackWidth();
+
+    this.empty.hidden = agents.length > 0;
+    this.body.hidden = agents.length === 0;
+    this.axis.hidden = agents.length === 0;
+    if (!agents.length) {
+      this.empty.replaceChildren(mk('strong', null, 'No agents yet'),
+        mk('span', null, 'This session has not delegated to a subagent. When it does, each one gets a row here.'));
+      this.noteEl.hidden = true;
+      this.nowLine.hidden = true;
+      this.away.hidden = true;
+      this.paintDrawer();
+      return;
+    }
+
+    this.win = windowOf(ext, this.range, { follow: this.follow && this.live, end: this.end });
+    const win = this.win;
+
+    // The axis.
+    this.axisTrack.replaceChildren(...(win ? ticks(win, width).map((t) => {
+      const m = mk('span', 'tl-tick', clock(t.at, t.seconds));
+      m.style.left = `${xOf(t.at, win, width)}px`;
+      return m;
+    }) : []));
+
+    // The rows.
+    // The rows are drawn again from the data each time; a keyboard reader's place among them is kept.
+    const focused = this.rowsEl.contains?.(document.activeElement) ? document.activeElement.dataset?.key ?? null : null;
+    const top = this.body.scrollTop;
+    const list = rows(this.nodes, {
+      group: this.group, folded: this.folded, expanded: this.expanded, waiting: this.waiting,
+      approvals: this.owned?.approvals ?? null, now,
+    });
+    this.rowsEl.replaceChildren(...list.map((r) => this.#row(r, win, width)));
+    this.body.scrollTop = top;
+    if (focused) [...this.rowsEl.querySelectorAll('[data-key]')].find((el) => el.dataset.key === focused)?.focus();
+
+    // Now: a line across the rows, while the session is live and now is on screen.
+    const nowX = win ? xOf(now, win, width) : -1;
+    this.nowLine.hidden = !this.live || !win || nowX < 0 || nowX > width + 1;
+    if (!this.nowLine.hidden) {
+      this.nowLine.style.left = `${this.labelWidth() + Math.min(nowX, width - 1)}px`;
+      this.nowLine.dataset.label = `now ${clock(now)}`;
+    }
+
+    // Bars exist, and none of them is in the stretch on screen.
+    const timed = agents.filter((n) => n.startedAt != null);
+    const onScreen = this.rowsEl.querySelectorAll('.tl-bar').length;
+    this.away.hidden = !(timed.length && onScreen === 0);
+    if (!this.away.hidden) {
+      const last = Math.max(...timed.map((n) => n.endedAt ?? n.updatedAt ?? n.startedAt));
+      this.awayText.textContent = last < win.from
+        ? `Nothing in this stretch of time. The last activity ended at ${clock(last)}.`
+        : 'Nothing in this stretch of time.';
+    }
+
+    const note = waitNote(this.owned);
+    this.noteEl.hidden = false;
+    this.noteEl.textContent = note.text;
+    this.noteEl.dataset.measured = String(note.measured);
+
+    this.paintDrawer();
+  }
+
+  #bars(track, laneList, win, width) {
+    const thin = laneList.length > 1;
+    laneList.forEach((lane, li) => {
+      for (const seg of lane) {
+        const at = win ? place(seg, win, width) : null;
+        if (!at) continue;
+        const b = mk('button', `tl-bar${thin ? ' thin' : ''}`);
+        b.type = 'button';
+        b.dataset.tone = seg.tone;
+        b.dataset.lane = String(li);
+        b.dataset.key = `bar:${seg.id}:${seg.from}`;
+        if (at.cutLeft) b.dataset.cutLeft = 'true';
+        if (at.cutRight) b.dataset.cutRight = 'true';
+        b.style.left = `${at.left}px`;
+        b.style.width = `${at.width}px`;
+        const node = this.nodes.find((n) => n.id === seg.id);
+        b.setAttribute('aria-label', `${node?.agentType ?? 'agent'}, ${seg.tone === 'wait' ? 'waiting for you' : (node?.status ?? '')}, ${clock(seg.from)} to ${clock(seg.to)}`);
+        if (node && this.dimmed(node)) b.classList.add('dim');
+        if (seg.id === this.selected) b.classList.add('on');
+        b.addEventListener('click', (e) => { e.stopPropagation(); this.#choose(seg.id); });
+        track.append(b);
+        // Where a failed agent stopped is marked.
+        if (seg.failedAt != null && !at.cutRight) {
+          const x = mk('span', 'tl-x', '×');
+          x.style.left = `${at.left + at.width}px`;
+          x.dataset.lane = String(li);
+          track.append(x);
+        }
+      }
+    });
+  }
+
+  #row(r, win, width) {
+    if (r.kind === 'more') {
+      const row = mk('div', 'tl-row tl-more');
+      const b = mk('button', 'tl-more-btn', `Show ${r.count} more in this ${this.group === 'run' ? 'run' : 'group'}`);
+      b.type = 'button';
+      b.addEventListener('click', () => { this.expanded.add(r.group); this.render(); });
+      const lab = mk('div', 'tl-lab');
+      if (r.indent) lab.classList.add('indent');
+      lab.append(b);
+      row.append(lab);
+      return row;
+    }
+
+    const row = mk('div', `tl-row tl-${r.kind}`);
+    const lab = mk(r.kind === 'merged' ? 'div' : 'button', 'tl-lab');
+    if (r.indent) lab.classList.add('indent');
+    lab.dataset.key = `row:${r.id}`;
+    const track = mk('div', 'tl-track');
+
+    if (r.kind === 'group') {
+      lab.type = 'button';
+      lab.setAttribute('aria-expanded', String(!r.folded));
+      const chev = mk('span', 'tl-chev');
+      chev.innerHTML = '<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>';
+      lab.append(chev, mk('span', 'tl-name', r.label), mk('span', 'row-fill'), mk('span', 'sub', r.sub));
+      lab.addEventListener('click', () => {
+        if (this.folded.has(r.id)) this.folded.delete(r.id); else this.folded.add(r.id);
+        this.render();
+      });
+      this.#bars(track, r.lanes, win, width);
+    } else if (r.kind === 'merged') {
+      const tile = this.hooks.tileOf?.(r.members[0]);
+      if (tile) lab.append(tile);
+      lab.append(mk('span', 'tl-name', r.label), mk('span', 'row-fill'), mk('span', 'sub', r.sub));
+      this.#bars(track, r.lanes, win, width);
+      if (r.members.every((m) => this.dimmed(m))) row.classList.add('dim');
+    } else {
+      lab.type = 'button';
+      const tile = this.hooks.tileOf?.(r.node);
+      if (tile) lab.append(tile);
+      const sub = mk('span', 'sub', r.sub);
+      if (r.tone) sub.dataset.tone = r.tone;
+      lab.append(mk('span', 'tl-name', r.label), mk('span', 'row-fill'), sub);
+      lab.title = r.node.description ?? '';
+      // One listener, on the row: the label is a button inside it, and its click arrives here too. Two
+      // listeners chose the agent and un-chose it in the same click.
+      row.addEventListener('click', () => this.#choose(r.id));
+      if (r.timed) this.#bars(track, [r.bars], win, width);
+      // No start was recorded, so there is nowhere to put a bar; the row says that instead of drawing one at zero.
+      else track.append(mk('span', 'tl-untimed', 'no start time recorded'));
+      if (r.id === this.selected) row.classList.add('on');
+      if (this.dimmed(r.node)) row.classList.add('dim');
+    }
+    row.append(lab, track);
+    return row;
+  }
+
+  #choose(id) {
+    this.selected = this.selected === id ? null : id;
+    this.render();
+    this.hooks.onSelect?.(this.selected ? this.nodes.find((n) => n.id === this.selected) ?? null : null);
+  }
+
+  /** The drawer under the rows: the chosen agent, its task, its numbers, and the last thing that went wrong. */
+  paintDrawer() {
+    const n = this.selected ? this.nodes.find((x) => x.id === this.selected) : null;
+    this.drawer.hidden = !n;
+    if (!n) return;
+    const now = this.now();
+    const st = this.hooks.statusOf?.(n) ?? { word: n.status, tone: null };
+
+    const left = mk('div', 'tl-d-main');
+    const head = mk('div', 'tl-d-head');
+    const tile = this.hooks.tileOf?.(n);
+    if (tile) head.append(tile);
+    const pill = mk('span', 'pill');
+    const dot = mk('span', 'dot');
+    dot.dataset.tone = st.tone ?? 'none';
+    pill.append(dot, mk('span', null, st.word ?? 'State not measured'));
+    head.append(mk('span', 'tl-d-name', n.agentType ?? 'unknown agent'), pill);
+    left.append(head, mk('div', 'tl-d-task', n.description ?? ''), mk('div', 'sub tl-d-facts', factsOf(n, now, this.hooks.fmt)));
+
+    const mid = mk('div', 'tl-d-error');
+    mid.append(mk('div', 'isec-h', 'Last error'));
+    const detail = this.hooks.detailOf?.(n);
+    if (!detail || detail.loading) {
+      mid.append(mk('div', 'ihint', 'Reading the agent transcript…'));
+    } else if (detail.measured === false) {
+      const hint = mk('div', 'ihint');
+      hint.append(mk('strong', null, 'Not measured'), mk('div', null, detail.reason || 'no reason given'));
+      mid.append(hint);
+    } else if (!detail.lastError) {
+      mid.append(mk('div', 'ihint', 'None — no tool call in this agent\'s transcript came back as an error.'));
+    } else {
+      const e = detail.lastError;
+      const text = mk('pre', 'tl-d-errtext', e.truncated ? `… ${(e.length - e.text.length).toLocaleString('en-US')} earlier characters not shown\n${e.text}` : (e.text || '(no output)'));
+      const count = detail.errors ?? 0;
+      const facts = [`${count} ${count === 1 ? 'error' : 'errors'}`];
+      if (e.at != null) facts.push(`last at ${clock(e.at, true)}`);
+      if (e.tool) facts.push(e.tool);
+      mid.append(text, mk('div', 'sub', facts.join(' · ')));
+    }
+
+    const acts = mk('div', 'tl-d-acts');
+    const show = mk('button', 'btn sm primary', 'Show on graph');
+    show.type = 'button';
+    show.addEventListener('click', () => this.hooks.onShowOnGraph?.(n));
+    const open = mk('button', 'btn sm', 'Open conversation');
+    open.type = 'button';
+    open.addEventListener('click', () => this.hooks.onOpenConversation?.());
+    const close = mk('button', 'btn icon sm ghost');
+    close.type = 'button';
+    close.setAttribute('aria-label', 'Close');
+    close.innerHTML = '<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+    close.addEventListener('click', () => this.#choose(n.id));
+    acts.append(show, open, close);
+
+    this.drawer.replaceChildren(left, mid, acts);
+  }
+}
+
+export { RANGES };

package/kit/studio/web/tokens.css

@@ -0,0 +1,131 @@
+/* GENERATED from packaging/design/tokens.json (Crewforth, version 1) by
+   packaging/gen-studio-tokens.mjs. Do not edit: change the JSON and run the generator. */
+
+:root {
+  color-scheme: dark;
+  --ground: #0B1020;
+  --surface: #141821;
+  --surface-raised: #1b202b;
+  --line: #262c39;
+  --ink: #e6e9f0;
+  --ink-dim: #9aa7cc;
+  --ink-faint: #5c6472;
+  --accent: #A78BFA;
+  --on-accent: #0B1020;
+  --wordmark-ink: #FFFFFF;
+  --wordmark-accent: #A78BFA;
+  --chevron-1: #E5E7FB;
+  --chevron-2: #B9BEF9;
+  --chevron-3: #A78BFA;
+  --brand-navy: #0B1020;
+  --studio-accent: #5b8cff;
+  --status-busy: #26c6e6;
+  --status-waiting: #f2a65a;
+  --status-idle: #9aa7cc;
+  --status-good: #35c874;
+  --status-bad: #ff8a4d;
+  --status-fail: #ff6b7a;
+  --font-sans: Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --type-wordmark-size: 56px;
+  --type-wordmark-line: 1;
+  --type-wordmark-weight: 800;
+  --type-wordmark-tracking: -1.5px;
+  --type-hero-size: 48px;
+  --type-hero-line: 52px;
+  --type-hero-weight: 800;
+  --type-hero-tracking: -1px;
+  --type-h1-size: 36px;
+  --type-h1-line: 42px;
+  --type-h1-weight: 700;
+  --type-h1-tracking: -0.5px;
+  --type-h2-size: 24px;
+  --type-h2-line: 32px;
+  --type-h2-weight: 700;
+  --type-h3-size: 18px;
+  --type-h3-line: 26px;
+  --type-h3-weight: 600;
+  --type-body-size: 16px;
+  --type-body-line: 26px;
+  --type-body-weight: 400;
+  --type-body-sm-size: 14px;
+  --type-body-sm-line: 22px;
+  --type-body-sm-weight: 400;
+  --type-label-size: 12px;
+  --type-label-line: 16px;
+  --type-label-weight: 600;
+  --type-label-tracking: 0.06em;
+  --type-code-size: 14px;
+  --type-code-line: 22px;
+  --type-code-weight: 400;
+  --type-code-sm-size: 12px;
+  --type-code-sm-line: 18px;
+  --type-code-sm-weight: 400;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --radius-sm: 4px;
+  --radius-md: 10px;
+  --radius-lg: 20px;
+  --radius-icon: 23%;
+  --radius-pill: 999px;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    color-scheme: light;
+    --ground: #f7f8fa;
+    --surface: #ffffff;
+    --surface-raised: #eef0f4;
+    --line: #d9dde5;
+    --ink: #1a1d24;
+    --ink-dim: #5c6472;
+    --ink-faint: #8d95a3;
+    --accent: #6D28D9;
+    --on-accent: #ffffff;
+    --wordmark-ink: #0F172A;
+    --wordmark-accent: #6366F1;
+    --chevron-1: #A8AEF6;
+    --chevron-2: #7C83F5;
+    --chevron-3: #6D28D9;
+    --brand-navy: #0B1020;
+    --studio-accent: #5b8cff;
+    --status-busy: #26c6e6;
+    --status-waiting: #f2a65a;
+    --status-idle: #9aa7cc;
+    --status-good: #35c874;
+    --status-bad: #ff8a4d;
+    --status-fail: #d92d3f;
+  }
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+  --ground: #f7f8fa;
+  --surface: #ffffff;
+  --surface-raised: #eef0f4;
+  --line: #d9dde5;
+  --ink: #1a1d24;
+  --ink-dim: #5c6472;
+  --ink-faint: #8d95a3;
+  --accent: #6D28D9;
+  --on-accent: #ffffff;
+  --wordmark-ink: #0F172A;
+  --wordmark-accent: #6366F1;
+  --chevron-1: #A8AEF6;
+  --chevron-2: #7C83F5;
+  --chevron-3: #6D28D9;
+  --brand-navy: #0B1020;
+  --studio-accent: #5b8cff;
+  --status-busy: #26c6e6;
+  --status-waiting: #f2a65a;
+  --status-idle: #9aa7cc;
+  --status-good: #35c874;
+  --status-bad: #ff8a4d;
+  --status-fail: #d92d3f;
+}

package/kit/studio/web/toolbar-fit.js

@@ -0,0 +1,35 @@
+// How much the toolbar gives up so that what it shows fits in it.
+//
+// The steps used to be widths in the stylesheet: under 880 px the buttons lost their words, under 760 px the
+// menus became one. Those numbers were a guess at how wide the words are, and the guess was low: with every word
+// on, the Graph's toolbar needs about 1080 px in the font it was measured in, so between the two it ran out of
+// its own box and over whatever was beside it. A width cannot be right for every font and every label. So the
+// toolbar is measured instead: a step at a time, until it holds what it shows.
+//
+//   0  everything
+//   1  the buttons that have an icon lose their words, and the note goes
+//   2  Group, Density, Show, Expand and Fold become one menu, "View options"
+//   3  the zoom figure and the name of the Timeline's range go; their buttons stay
+
+export const FIT_MAX = 3;
+
+/**
+ * The first step at which the toolbar holds what it shows.
+ * @param overflows (step) => boolean — puts the step on and says whether the toolbar still runs over
+ * @returns 0…max; max when nothing more can be given up, whether or not it fits
+ */
+export function fitLevel(overflows, max = FIT_MAX) {
+  for (let step = 0; step < max; step += 1) if (!overflows(step)) return step;
+  return max;
+}
+
+/**
+ * Does a row run over? Asked of the boxes, not of scrollWidth: a browser may leave the row's own end padding out
+ * of scrollWidth, and the last button would sit against the edge before anything was said.
+ * @param box   { right, padRight } of the row
+ * @param ends  the right edge of each thing shown in it
+ */
+export function runsOver(box, ends) {
+  const limit = box.right - (box.padRight ?? 0);
+  return ends.some((right) => right > limit + 0.5);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "crewforth",
-  "version": "3.0.3",
-  "description": "Crewforth \u2014 your engineering crew for Claude Code: agents, skills and tool-level gates, in any stack.",
+  "version": "3.1.0-rc.1",
+  "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,7 +43,7 @@
     "code-review",
     "git-hooks"
   ],
-  "author": "Bar\u0131\u015f Yerlikaya",
+  "author": "Barış Yerlikaya",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Crewforth/crewforth.git"