makersclaw 0.7.0 → 0.8.1

package/registry/blocks/schedule-gantt/sheet.jsx

@@ -0,0 +1,372 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Icon, Menu, cx } from "../../ui";
+import { monthDay } from "./gantt-model";
+
+// The task sheet on the chart's left, one row for one row of bars: the
+// outline number, the task (a phase folds, a milestone is a diamond, its
+// tags in words), and whichever columns the page asked for: start, finish,
+// length in working days, how much is done, the owner, what it waits on,
+// slack, and how far it sits from a baseline. A row's "…" holds every
+// change; double-click a name, a length, a % or a "waits on" to type it.
+// The last row adds a task in place.
+
+export const ROW = 30;
+
+const NUM = "tabular-nums";
+
+function Chevron({ open }) {
+  return <Icon name={open ? "chevron-down" : "chevron-right"} size={14} />;
+}
+
+const TAG = {
+  late: "border border-warning text-warning",
+  crit: "border border-destructive text-destructive",
+  pole: "border border-destructive text-destructive",
+  unsaved: "border border-destructive text-destructive",
+  blue: "border border-info text-info",
+  ink: "bg-foreground text-background",
+  quiet: "text-muted-foreground",
+};
+
+/** A tag in a row: words in a small outlined pill; the agent's is a filled badge with its reason on hover. */
+export function TagChip({ tag }) {
+  if (tag.kind === "agent")
+    return (
+      <span title={tag.title ?? tag.label ?? "The agent did this"} className="inline-flex size-[14px] shrink-0 items-center justify-center rounded-[3px] bg-info text-background">
+        <Icon name="sparkles" size={9} label={tag.title ?? "The agent did this"} />
+      </span>
+    );
+  if (tag.kind === "dot") return <span title={tag.title ?? tag.label} aria-label={tag.title ?? tag.label} className="size-1.5 shrink-0 rounded-full bg-warning" />;
+  return <span className={cx("inline-flex h-4 shrink-0 items-center whitespace-nowrap rounded-[3px] px-1 text-[10px] font-semibold", tag.kind === "quiet" ? "font-normal" : "", TAG[tag.kind] ?? TAG.quiet)}>{tag.label}</span>;
+}
+
+/** A dense cell editor: a 30 px row needs its own. */
+export function CellInput({ type = "text", value, onCommit, onCancel, label, align = "left", min, max, className, placeholder, quiet = false, autoFocus = true }) {
+  const ref = useRef(null);
+  const [v, setV] = useState(value ?? "");
+  const settled = useRef(false);
+  useEffect(() => {
+    if (!autoFocus) return;
+    ref.current?.focus();
+    ref.current?.select?.();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  const commit = () => {
+    if (settled.current) return;
+    settled.current = true;
+    onCommit(v);
+  };
+  return (
+    <input
+      ref={ref}
+      type={type}
+      aria-label={label}
+      value={v}
+      min={min}
+      max={max}
+      placeholder={placeholder}
+      onChange={(e) => setV(e.target.value)}
+      onBlur={commit}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          settled.current = true;
+          onCancel();
+        }
+      }}
+      className={cx("h-6 w-full min-w-0 rounded-[3px] bg-background px-1.5 text-[12px] text-foreground outline-none", quiet ? "border border-border focus-visible:border-ring" : "border border-ring ring-1 ring-ring", align === "right" && "text-right", type !== "text" && NUM, className)}
+    />
+  );
+}
+
+export function SheetHead({ cols }) {
+  return (
+    <div className="flex h-full items-end px-0 pb-1.5">
+      {cols.map((c) => (
+        <div key={c.key} className={cx("shrink-0 truncate px-1.5 text-[11px] font-semibold text-muted-foreground", c.key === "title" && "min-w-0 flex-1", c.right && "text-right")} style={c.key === "title" ? undefined : { width: c.w }}>
+          {c.label}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const tone = { late: "text-warning", early: "text-success", same: "text-muted-foreground", new: "text-info" };
+
+/**
+ * One row of the sheet. `r` is the engine's row; `cells` carries what the
+ * page worked out (owner words, the waits-on text, the baseline delta).
+ * `editing` { field } when a cell is open.
+ */
+export function SheetRow({ e, t, r, cols, selected, closed, cells, tags, late, editing, rowH, critical, onSelect, onOpen, onToggle, onStartEdit, onCommit, onCancel, onOpenLink, menu, dim, onHover, foldedCount, moving }) {
+  const summary = r?.summary;
+  const done = r?.pinned;
+  const crit = critical && r?.critical && !done;
+  const editableLength = !summary && !r?.milestone && !done;
+  return (
+    <div
+      data-row={e.id}
+      onMouseEnter={onHover}
+      onClick={(ev) => onSelect?.(e.id, { additive: ev.metaKey || ev.ctrlKey || ev.shiftKey })}
+      onDoubleClick={() => onOpen?.(t)}
+      className={cx("group/row relative flex items-center border-b border-border text-[13px]", selected ? "bg-accent" : "hover:bg-muted/50", dim && "opacity-50")}
+      style={{ height: rowH }}
+    >
+      {cols.map((c) => {
+        if (c.key === "outline")
+          return (
+            <div key="outline" className={cx(NUM, "shrink-0 truncate px-1.5 text-[12px]", crit ? "text-destructive" : "text-muted-foreground")} style={{ width: c.w }}>
+              {e.outline}
+            </div>
+          );
+        if (c.key === "title") {
+          const isEditing = editing?.field === "title";
+          return (
+            <div key="title" className="flex min-w-0 flex-1 items-center gap-1 px-1.5" style={{ paddingLeft: 6 + e.depth * 14 }}>
+              {summary ? (
+                <button
+                  type="button"
+                  aria-label={closed ? `Open ${t.title}` : `Fold ${t.title}`}
+                  aria-expanded={!closed}
+                  onClick={(ev) => {
+                    ev.stopPropagation();
+                    onToggle?.(e.id);
+                  }}
+                  className="grid size-5 shrink-0 place-items-center rounded-[3px] text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <Chevron open={!closed} />
+                </button>
+              ) : r?.milestone ? (
+                <span className="grid size-5 shrink-0 place-items-center">
+                  <span aria-hidden="true" className={cx("size-[9px] rotate-45 bg-foreground", crit && "bg-destructive")} />
+                </span>
+              ) : (
+                <span className="size-5 shrink-0" aria-hidden="true" />
+              )}
+              {isEditing ? (
+                <CellInput value={t.title} label={`Name of ${t.title}`} onCancel={onCancel} onCommit={(v) => onCommit("title", v)} />
+              ) : (
+                <span
+                  onDoubleClick={(ev) => {
+                    ev.stopPropagation();
+                    onStartEdit?.("title");
+                  }}
+                  title={t.title}
+                  className={cx("min-w-0 truncate", summary ? "font-semibold" : done ? "text-muted-foreground" : "text-foreground")}
+                >
+                  {t.title}
+                </span>
+              )}
+              {closed && summary && foldedCount ? <span className="shrink-0 text-[11px] text-muted-foreground">{foldedCount}</span> : null}
+              {late ? <TagChip tag={{ label: "Late", kind: "late" }} /> : null}
+              {(tags ?? []).map((g, i) => (
+                <TagChip key={`${g.kind}${g.label ?? i}`} tag={g} />
+              ))}
+              {menu ? (
+                <span className={cx("ml-auto shrink-0 opacity-0 group-hover/row:opacity-100 focus-within:opacity-100", selected && "opacity-100")} onClickCapture={() => !selected && onSelect?.(e.id)} onClick={(ev) => ev.stopPropagation()}>
+                  <Menu label={`${t.title}: change it`} items={menu} />
+                </span>
+              ) : null}
+            </div>
+          );
+        }
+        if (c.key === "start" || c.key === "due") {
+          const iso = c.key === "start" ? r?.start : r?.due;
+          const shown = c.key === "due" && r?.milestone ? "" : iso ? monthDay(iso) : null;
+          return (
+            <div key={c.key} className={cx(NUM, "shrink-0 truncate px-1.5 text-[12px]", moving?.has?.(e.id) && "text-ring")} style={{ width: c.w }}>
+              {shown === null ? <span className="text-muted-foreground">no date</span> : shown}
+            </div>
+          );
+        }
+        if (c.key === "who") {
+          const o = cells?.owner;
+          return (
+            <div key="who" className="shrink-0 truncate px-1.5 text-[12px]" style={{ width: c.w }} title={o?.title}>
+              {summary || r?.milestone ? null : o?.name ? (
+                <span className={o.left ? "text-muted-foreground" : undefined}>{o.name}{o.left ? " (left)" : ""}</span>
+              ) : (
+                <span className="text-warning">no owner</span>
+              )}
+            </div>
+          );
+        }
+        if (c.key === "days") {
+          const undated = !r?.dated;
+          if (editing?.field === "days" || (undated && !summary && editableLength))
+            return (
+              <div key="days" className="shrink-0 px-1" style={{ width: c.w }} onClick={(ev) => ev.stopPropagation()}>
+                <CellInput
+                  type="number"
+                  min={1}
+                  align="right"
+                  placeholder="none"
+                  value={cells?.lengthGuess != null ? String(cells.lengthGuess) : undated ? "" : String(r?.duration ?? "")}
+                  label={`Length of ${t.title} in working days`}
+                  onCancel={onCancel}
+                  onCommit={(v) => (String(v) === String(r?.duration ?? "") || v === "" ? onCancel() : onCommit("days", v))}
+                  quiet={undated && editing?.field !== "days"}
+                  autoFocus={!undated || editing?.field === "days"}
+                />
+              </div>
+            );
+          const text = summary ? (r?.dated && r.duration != null ? `${r.duration} wd` : "") : r?.milestone ? "0 wd" : r?.duration != null ? `${r.duration} wd${cells?.guessed ? "?" : ""}` : "";
+          return (
+            <div
+              key="days"
+              onDoubleClick={(ev) => {
+                if (!editableLength) return;
+                ev.stopPropagation();
+                onStartEdit?.("days");
+              }}
+              className={cx(NUM, "shrink-0 truncate px-1.5 text-right text-[12px]", cells?.guessed ? "text-info" : summary || r?.milestone ? "text-muted-foreground" : "text-foreground")}
+              style={{ width: c.w }}
+              title={cells?.guessed ? "A guess from the title" : undefined}
+            >
+              {text}
+            </div>
+          );
+        }
+        if (c.key === "done") {
+          if (editing?.field === "progress")
+            return (
+              <div key="done" className="shrink-0 px-1" style={{ width: c.w }} onClick={(ev) => ev.stopPropagation()}>
+                <CellInput type="number" min={0} max={100} align="right" value={String(r?.progress ?? 0)} label={`Done, in per cent, of ${t.title}`} onCancel={onCancel} onCommit={(v) => onCommit("progress", v)} />
+              </div>
+            );
+          return (
+            <div
+              key="done"
+              onDoubleClick={(ev) => {
+                if (summary || r?.milestone || done) return;
+                ev.stopPropagation();
+                onStartEdit?.("progress");
+              }}
+              className={cx(NUM, "flex shrink-0 justify-end px-1.5 text-[12px] text-muted-foreground")}
+              style={{ width: c.w }}
+            >
+              {done && !summary ? <Icon name="check" size={14} label="Done" /> : r?.milestone || !r ? "" : `${r.progress}%`}
+            </div>
+          );
+        }
+        if (c.key === "waits") {
+          const text = cells?.waits ?? "";
+          if (editing?.field === "waits")
+            return (
+              <div key="waits" className="shrink-0 px-1" style={{ width: c.w }} onClick={(ev) => ev.stopPropagation()}>
+                <CellInput value={text} label={`What ${t.title} waits on`} placeholder="2.2FS+2d" onCancel={onCancel} onCommit={(v) => (v === text ? onCancel() : onCommit("waits", v))} />
+              </div>
+            );
+          return (
+            <div
+              key="waits"
+              onDoubleClick={(ev) => {
+                ev.stopPropagation();
+                onStartEdit?.("waits");
+              }}
+              onClick={(ev) => {
+                if (cells?.waitsLinks?.length === 1 && onOpenLink && (ev.metaKey || ev.ctrlKey)) {
+                  ev.stopPropagation();
+                  onOpenLink(cells.waitsLinks[0]);
+                }
+              }}
+              title={text ? `${text} (double-click to change)` : "Double-click to say what it waits on"}
+              className={cx(NUM, "shrink-0 truncate px-1.5 text-[12px]", cells?.waitsBroken ? "text-destructive" : "text-foreground")}
+              style={{ width: c.w }}
+            >
+              {text}
+            </div>
+          );
+        }
+        if (c.key === "slack") {
+          const text = cells?.slack ?? "";
+          return (
+            <div key="slack" className={cx(NUM, "shrink-0 truncate px-1.5 text-right text-[12px]", crit ? "font-semibold text-destructive" : "text-muted-foreground")} style={{ width: c.w }}>
+              {text}
+            </div>
+          );
+        }
+        if (c.key === "vs") {
+          const d = cells?.delta;
+          return (
+            <div key="vs" className={cx(NUM, "shrink-0 truncate px-1.5 text-right text-[12px]", d?.tone ? tone[d.tone] : "text-muted-foreground")} style={{ width: c.w }}>
+              {d?.text ?? ""}
+            </div>
+          );
+        }
+        return null;
+      })}
+    </div>
+  );
+}
+
+/**
+ * The row that adds in place: a title and a length. Enter adds a task,
+ * Shift+Enter a milestone; Tab makes it a sub-task of the row above; Esc
+ * cancels. Closed, it is one quiet line that says so.
+ */
+export function AddRow({ open, onOpen, draft, setDraft, onSubmit, busy, addRef, parentTitle, aboveTitle, onIndent, height = ROW }) {
+  if (!open)
+    return (
+      <button type="button" onClick={onOpen} className="flex w-full items-center gap-2 border-b border-border px-3 text-left text-[13px] text-muted-foreground outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring" style={{ height }}>
+        <Icon name="plus" size={14} />
+        <span>Add task</span>
+        <kbd className="rounded-[3px] border border-border px-1 text-[10px]">Enter</kbd>
+        <span>milestone</span>
+        <kbd className="rounded-[3px] border border-border px-1 text-[10px]">Shift+Enter</kbd>
+      </button>
+    );
+  return (
+    <div className="border-b border-border bg-accent">
+      <div className="flex items-center gap-2 px-3" style={{ height: height + 6 }}>
+        <span className="w-9 shrink-0">
+          <Icon name={draft.milestone ? "diamond" : "plus"} size={14} className="text-muted-foreground" />
+        </span>
+        <input
+          ref={addRef}
+          value={draft.title}
+          onChange={(ev) => setDraft((d) => ({ ...d, title: ev.target.value }))}
+          onKeyDown={(ev) => {
+            ev.stopPropagation();
+            if (ev.key === "Enter") {
+              ev.preventDefault();
+              onSubmit(ev.shiftKey);
+            } else if (ev.key === "Tab" && !ev.shiftKey && aboveTitle && !draft.milestone) {
+              ev.preventDefault();
+              onIndent?.();
+            } else if (ev.key === "Escape") {
+              setDraft({ title: "", days: "", milestone: false, parentId: null, afterId: null });
+              ev.currentTarget.blur();
+            }
+          }}
+          placeholder={parentTitle ? `A sub-task of ${parentTitle}` : draft.milestone ? "Name the milestone" : "Add a task"}
+          aria-label={parentTitle ? `Add a sub-task of ${parentTitle}` : draft.milestone ? "Milestone name" : "Task title"}
+          disabled={busy}
+          className="h-6 min-w-0 flex-1 rounded-[3px] border border-ring bg-background px-1.5 text-[13px] text-foreground outline-none ring-1 ring-ring placeholder:text-muted-foreground"
+        />
+        {!draft.milestone ? (
+          <input
+            value={draft.days}
+            onChange={(ev) => setDraft((d) => ({ ...d, days: ev.target.value.replace(/[^0-9]/g, "").slice(0, 3) }))}
+            onKeyDown={(ev) => {
+              ev.stopPropagation();
+              if (ev.key === "Enter") {
+                ev.preventDefault();
+                onSubmit(ev.shiftKey);
+              }
+            }}
+            inputMode="numeric"
+            placeholder="5"
+            aria-label="Length in working days"
+            className={cx(NUM, "h-6 w-10 shrink-0 rounded-[3px] border border-ring bg-background px-1 text-right text-[13px] outline-none ring-1 ring-ring")}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/registry/blocks/schedule-gantt/track.jsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { Fragment } from "react";
+import { cx } from "../../ui";
+import { monthDay } from "./gantt-model";
+
+// The time scale's paper and lines: the header with its flags (today, the
+// target and the finish, with the gap between them as a line you can read),
+// weekends and the grid, the target as a dashed rule, the finish as a solid
+// one, today in the accent, the link lines (elbows between the bars, the
+// critical ones red when the page asks for them, a broken one dashed with a
+// cross), ghosts of where bars were, pencil for where a suggestion would put
+// them, and the lanes under the rows (who is on what, on the same scale).
+
+const NUM = "tabular-nums";
+export const HEAD = 56;
+
+/** The header: the axis tiers, then a band with Today, Target and Finish. */
+export function TrackHead({ axis, range, ppd, z, gridW, marks }) {
+  const late = marks.gap?.state === "late";
+  const early = marks.gap?.state === "early";
+  const finishText = marks.gap?.text ?? "";
+  const targetText = marks.target != null ? `Target ${monthDay(marks.targetIso)}` : "";
+  const same = marks.target != null && marks.finish != null && marks.target === marks.finish;
+  return (
+    <>
+      {axis.top.map((s) => (
+        <div key={`t${s.start}`} className="absolute top-0 h-[18px] border-l border-border" style={{ left: (s.start - range.from) * ppd, width: (s.end - s.start + 1) * ppd }}>
+          <span className="sticky block w-max px-1.5 pt-0.5 text-[11px] font-semibold text-foreground" style={{ left: gridW }}>
+            {s.label}
+          </span>
+        </div>
+      ))}
+      {axis.bottom.map((s) => (
+        <div key={`b${s.start}`} className={cx(NUM, "absolute top-[18px] h-[18px] overflow-hidden whitespace-nowrap pt-0.5 text-[11px]", z === "day" ? "text-center" : "pl-1", s.dim ? "text-muted-foreground/70" : "text-muted-foreground")} style={{ left: (s.start - range.from) * ppd, width: (s.end - s.start + 1) * ppd }}>
+          {s.label}
+        </div>
+      ))}
+      <div className="absolute inset-x-0 top-[36px] border-t border-border" />
+      {marks.target != null && marks.finish != null && !same ? (
+        <span aria-hidden="true" className={cx("absolute top-[45px] h-0 border-t-2", late ? "border-warning" : "border-success")} style={{ left: Math.min(marks.target, marks.finish), width: Math.abs(marks.finish - marks.target) }} />
+      ) : null}
+      {marks.finishFrom != null && marks.finishFrom !== marks.finish ? <span aria-hidden="true" className="absolute top-[40px] h-3 w-0.5 bg-chart-3" style={{ left: marks.finishFrom }} /> : null}
+      {marks.today != null ? (
+        <span className="absolute top-[38px] z-10 h-4 -translate-x-1/2 whitespace-nowrap rounded-[3px] bg-primary px-1.5 text-[11px] font-semibold leading-4 text-primary-foreground" style={{ left: marks.today }}>
+          Today
+        </span>
+      ) : null}
+      {marks.target != null && !same ? (
+        <span className={cx("absolute top-[38px] z-10 h-4 whitespace-nowrap rounded-[3px] border border-dashed border-foreground bg-background px-1.5 text-[11px] font-semibold leading-[14px] text-foreground", late ? "-translate-x-full -ml-px" : "ml-px")} style={{ left: marks.target }}>
+          {targetText}
+        </span>
+      ) : null}
+      {marks.finish != null ? (
+        <span className={cx("absolute top-[38px] z-10 h-4 whitespace-nowrap rounded-[3px] px-1.5 text-[11px] font-semibold leading-4", marks.moving ? "bg-ring text-primary-foreground" : "bg-foreground text-background", early ? "-translate-x-full -ml-px" : "ml-px")} style={{ left: marks.finish }}>
+          {finishText}
+        </span>
+      ) : null}
+    </>
+  );
+}
+
+/** Weekends, grid lines, the selected rows, target, finish and today, under everything. */
+export function Paper({ axis, range, ppd, z, marks, rowTops, rowH, selectedRows }) {
+  return (
+    <div aria-hidden="true" className="pointer-events-none absolute inset-0">
+      {z === "month" || z === "fit" || ppd < 4 ? null : axis.shade.map((s) => <div key={`s${s.start}`} className="absolute inset-y-0 bg-muted" style={{ left: (s.start - range.from) * ppd, width: (s.end - s.start + 1) * ppd }} />)}
+      {axis.lines.map((l) => (
+        <div key={`l${l.day}${l.strong ? "s" : ""}`} className={cx("absolute inset-y-0 w-px", l.strong ? "bg-border" : "bg-border/50")} style={{ left: (l.day - range.from) * ppd }} />
+      ))}
+      {rowTops.map((top, i) => (
+        <div key={i} className={cx("absolute inset-x-0 border-b border-border", selectedRows.has(i) && "bg-accent")} style={{ top, height: rowH }} />
+      ))}
+      {marks.target != null ? <div className="absolute inset-y-0 border-l-[1.5px] border-dashed border-foreground" style={{ left: marks.target }} /> : null}
+      {marks.finish != null ? <div className={cx("absolute inset-y-0 w-0.5 -translate-x-px", marks.moving ? "bg-ring" : "bg-foreground")} style={{ left: marks.finish }} /> : null}
+      {marks.today != null ? <div className="absolute inset-y-0 w-0.5 -translate-x-px bg-primary" style={{ left: marks.today }} /> : null}
+    </div>
+  );
+}
+
+const HEAD_PATH = {
+  down: (x, y) => `${x - 3.5},${y - 5} ${x + 3.5},${y - 5} ${x},${y}`,
+  up: (x, y) => `${x - 3.5},${y + 5} ${x + 3.5},${y + 5} ${x},${y}`,
+  right: (x, y) => `${x - 5},${y - 3.5} ${x - 5},${y + 3.5} ${x},${y}`,
+  left: (x, y) => `${x + 5},${y - 3.5} ${x + 5},${y + 3.5} ${x},${y}`,
+};
+
+/**
+ * Link lines on one svg: hairline in muted ink, the critical ones red (when
+ * the page switches the critical path on), a broken one dashed with a
+ * cross, the ones that move with a drag in the ring colour, the lag beside
+ * the first leg. Each is pressable (double-click) when `onOpenLink` is given.
+ */
+export function Links({ lines, width, height, critical, onOpenLink }) {
+  return (
+    <svg aria-hidden="true" className="pointer-events-none absolute left-0 top-0 z-[5] overflow-visible" width={width} height={height}>
+      {lines.map((l) => {
+        const tone = l.link.violated ? "broken" : l.moving ? "moving" : critical && l.critical ? "crit" : l.touches ? "strong" : "quiet";
+        const stroke = { broken: "stroke-destructive", crit: "stroke-destructive", moving: "stroke-ring", strong: "stroke-foreground", quiet: "stroke-muted-foreground" }[tone];
+        const fill = { broken: "fill-destructive", crit: "fill-destructive", moving: "fill-ring", strong: "fill-foreground", quiet: "fill-muted-foreground" }[tone];
+        const w = tone === "crit" || tone === "broken" || tone === "moving" ? 1.5 : 1;
+        const segs = l.route.segments;
+        if (!segs.length) return null;
+        const d = `M${segs[0].x1 + 0.5} ${segs[0].y1 + 0.5}${segs.map((s) => ` L${s.x2 + 0.5} ${s.y2 + 0.5}`).join("")}`;
+        const first = segs.find((s) => s.x1 === s.x2);
+        const mid = segs[Math.floor(segs.length / 2)];
+        return (
+          <Fragment key={l.id}>
+            <path d={d} fill="none" className={stroke} strokeWidth={w} strokeDasharray={tone === "broken" ? "4 3" : undefined} />
+            {l.route.head ? <polygon points={HEAD_PATH[l.route.head.dir](l.route.head.x + 0.5, l.route.head.y + 0.5)} className={fill} /> : null}
+            {tone === "broken" && mid ? (
+              <path d={`M${(mid.x1 + mid.x2) / 2 - 4} ${(mid.y1 + mid.y2) / 2 - 4}l8 8M${(mid.x1 + mid.x2) / 2 + 4} ${(mid.y1 + mid.y2) / 2 - 4}l-8 8`} fill="none" className="stroke-destructive" strokeWidth={2} />
+            ) : null}
+            {l.lag && first ? (
+              <text x={first.x1 + 4} y={(first.y1 + first.y2) / 2} dominantBaseline="middle" className={cx("text-[10px]", tone === "crit" ? "fill-destructive" : "fill-muted-foreground")}>
+                {l.lag > 0 ? `+${l.lag}` : l.lag}
+              </text>
+            ) : null}
+            {onOpenLink ? (
+              <path d={d} fill="none" stroke="transparent" strokeWidth={10} className="pointer-events-auto cursor-pointer" onDoubleClick={() => onOpenLink(l.link)}>
+                <title>{`Double-click to change this link`}</title>
+              </path>
+            ) : null}
+          </Fragment>
+        );
+      })}
+    </svg>
+  );
+}
+
+/** Where bars were (dashed grey) or where a suggestion would put them (dashed in the agent's colour). */
+export function Ghosts({ ghosts, visible, X, ppd, rowH, rowTop, live, kind = "was", bar = 14 }) {
+  if (!ghosts?.size) return null;
+  const ring = kind === "pencil" ? "border-info" : "border-chart-3";
+  return (
+    <div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[6]">
+      {visible.map((e, i) => {
+        const g = ghosts.get(e.id);
+        const r = live.rows.get(e.id);
+        if (!g || !r || r.summary) return null;
+        const y = (rowTop ? rowTop(i) : i * rowH) + rowH / 2;
+        if (r.milestone) {
+          const cx0 = X(g.due ?? g.start) + ppd / 2;
+          return <span key={e.id} className={cx("absolute size-3 -translate-x-1/2 -translate-y-1/2 rotate-45 border-[1.5px] border-dashed", ring)} style={{ left: cx0, top: y }} />;
+        }
+        const x0 = X(g.start);
+        const w = Math.max(ppd, X(g.due) + ppd - x0);
+        return <span key={e.id} className={cx("absolute -translate-y-1/2 rounded-[2px] border-[1.5px] border-dashed", ring)} style={{ left: x0, width: w, top: y, height: bar }} />;
+      })}
+    </div>
+  );
+}
+
+/**
+ * Lanes under the rows, on the same scale: one thin row per lane (a person)
+ * with a bar for each of its items and a box where two or more overlap
+ * (the count in it). The label side is drawn by the sheet's twin
+ * (LaneLabels); both take the same lane list.
+ */
+export function LaneTrack({ lanes, X, ppd, laneH = 20, top }) {
+  return (
+    <div className="absolute inset-x-0" style={{ top }}>
+      {lanes.map((lane, i) => (
+        <div key={lane.id} className="absolute inset-x-0 border-b border-border" style={{ top: i * laneH, height: laneH }}>
+          {(lane.items ?? []).map((it, k) => (
+            <span key={`${it.id ?? k}`} title={it.title} className="absolute h-1.5 rounded-[2px] bg-chart-1" style={{ left: X(it.start), width: Math.max(ppd, X(it.due) + ppd - X(it.start)), top: 7 }} />
+          ))}
+          {(lane.marks ?? []).map((m, k) => (
+            <span key={`m${k}`} title={m.title ?? `${m.count} at once`} className="absolute rounded-[2px] border-[1.5px] border-warning pl-0.5 text-[10px] font-bold leading-[11px] text-warning" style={{ left: X(m.from), width: Math.max(ppd, X(m.to) + ppd - X(m.from)), top: 3, height: 14 }}>
+              {m.count}
+            </span>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function LaneLabels({ lanes, laneH = 20, width }) {
+  return (
+    <div style={{ width }}>
+      {lanes.map((lane) => (
+        <div key={lane.id} className="flex items-center gap-1.5 border-b border-border px-3 text-[12px]" style={{ height: laneH }}>
+          <span className="truncate">{lane.label}</span>
+          <span className="ml-auto shrink-0 text-muted-foreground">{lane.sub}</span>
+        </div>
+      ))}
+    </div>
+  );
+}