dsh-graft-plugin 0.2.1 → 0.3.1

package/src/client.js

@@ -8,6 +8,21 @@ window.__ModuleLoader__.load({
     const React = require("react");
     const h = React.createElement;
 
+    /**
+     * dsh's own themed modal chrome, the same package permission-presets
+     * renders its RiskConfirmation from — body-portaled, Escape + mask-click
+     * handled, themed through the --dsw-* variables for free.
+     *
+     * Guarded: if the package is ever unresolvable the confirm falls back to
+     * window.confirm, so the gate can never go missing silently.
+     */
+    let Primitives = null;
+    try {
+      Primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+    } catch {
+      Primitives = null;
+    }
+
     /* ================================================================== *
      * graft-status — the browser half.
      *
@@ -55,8 +70,10 @@ window.__ModuleLoader__.load({
      * validator requires a strict codec to expose a `create()` factory
      * returning the schema (it throws "strict codec has no create() factory"
      * otherwise, failing `$mount` and with it the whole plugin), while dsh 0.1
-     * read `schema` directly. The host still runs assertJsonValue on every
-     * decoded value, so identity is safe.
+     * read `schema` directly; dsh 0.1.7-rc.2 already refused a codec with no
+     * factory on this fork. `create()` returns the same schema object every
+     * time. The host still runs assertJsonValue on every decoded value, so
+     * identity is safe.
      */
     const IDENTITY_SCHEMA = { parse: identity };
     const CODEC = {
@@ -77,7 +94,7 @@ window.__ModuleLoader__.load({
     });
     const CONTRIBUTION = {
       package: "graft-status",
-      descriptors: [descriptor("status", ["sessionId"]), descriptor("viz", ["sessionId"])],
+      descriptors: [descriptor("status", ["sessionId"]), descriptor("viz", ["sessionId"]), descriptor("build", ["sessionId"])],
     };
 
     /**
@@ -134,84 +151,114 @@ window.__ModuleLoader__.load({
       return [
         ".gs-wrap{display:inline-flex;align-items:center;gap:4px}",
         ".gs-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;",
-        "border-radius:13px;border:1px solid var(--dsh-border,rgba(128,128,128,.28));",
-        "background:var(--dsh-surface-2,rgba(128,128,128,.08));color:var(--dsh-text-2,inherit);",
+        "border-radius:13px;border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.28));",
+        "background:var(--dsw-alias-bg-layer-2,rgba(128,128,128,.08));color:var(--dsw-alias-label-secondary,inherit);",
         "font-size:12px;line-height:1;white-space:nowrap;cursor:default;max-width:200px}",
         ".gs-chip .gs-name{font-weight:600;overflow:hidden;text-overflow:ellipsis}",
+        // The repo name in the trailing-row chip. The chip caps at 200px but
+        // the name itself had no ellipsis of its own, so a long workspace name
+        // stretched the composer instead of collapsing to "name…". The brand
+        // ("graft") and separators never shrink; this span takes the cut.
+        ".gs-chip .gs-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}",
         ".gs-chip .gs-sep{opacity:.45}",
         ".gs-chip .gs-dot{font-size:9px;line-height:1}",
-        ".gs-ok .gs-dot{color:#3fa45b}",
-        ".gs-warn .gs-dot{color:#d08442}",
-        ".gs-busy .gs-dot{color:#4b8bd6;display:inline-block;animation:gs-spin 900ms linear infinite}",
+        ".gs-ok .gs-dot{color:var(--dsw-alias-state-success-primary,#3fa45b)}",
+        ".gs-warn .gs-dot{color:var(--dsw-alias-state-warn-primary,#d08442)}",
+        ".gs-busy .gs-dot{color:var(--dsw-alias-state-business-primary,#4b8bd6);display:inline-block;animation:gs-spin 900ms linear infinite}",
         "@keyframes gs-spin{to{transform:rotate(360deg)}}",
-        /* A rebuild takes about a second, so the chip also breathes: the dot
-           alone is small enough to miss at a glance. */
         ".gs-chip.gs-busy{animation:gs-breathe 1.4s ease-in-out infinite}",
         "@keyframes gs-breathe{0%,100%{opacity:1}50%{opacity:.62}}",
         "@media (prefers-reduced-motion:reduce){.gs-busy .gs-dot{animation:none}.gs-chip.gs-busy{animation:none}}",
-        ".gs-idle .gs-dot{color:var(--dsh-text-3,#888)}",
+        ".gs-idle .gs-dot{color:var(--dsw-alias-label-tertiary,#888)}",
+        // A graft tool is running: the dot blinks violet, on and off. The
+        // blinking itself is JS toggling `gs-live`; this only paints it.
+        // Violet is pinned, not an alias: dsw's state palette has no violet,
+        // and it must NOT borrow the busy blue — the two states would be
+        // indistinguishable. Against both green and orange it also pops.
+        ".gs-chip.gs-live .gs-dot{color:#8b5cf6}",
         ".gs-chip.gs-muted{opacity:.6}",
         ".gs-chip.gs-clickable{cursor:pointer}",
-        ".gs-chip.gs-clickable:hover{border-color:var(--dsh-border-strong,rgba(128,128,128,.5))}",
-        ".gs-chip.gs-clickable:focus-visible{outline:2px solid var(--dsh-accent,#4b8bd6);outline-offset:2px}",
+        ".gs-chip.gs-clickable:hover{border-color:var(--dsw-alias-border-l3,rgba(128,128,128,.5))}",
+        ".gs-chip.gs-clickable:focus-visible{outline:2px solid var(--dsw-focus-ring-color,var(--dsw-alias-brand-primary,#4b8bd6));outline-offset:2px}",
         ".gs-viz{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;",
-        "padding:0;border:0;border-radius:8px;background:transparent;color:var(--dsh-text-2,inherit);",
-        "cursor:pointer;--accent:var(--dsh-accent,#e5484d)}",
-        ".gs-viz:hover{background:var(--dsh-surface-2,rgba(128,128,128,.14))}",
+        "padding:0;border:0;border-radius:var(--dsw-radius-sm,8px);background:transparent;color:var(--dsw-alias-label-secondary,inherit);",
+        "cursor:pointer;--accent:var(--dsw-alias-brand-primary,#e5484d)}",
+        ".gs-viz:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.14))}",
         ".gs-viz:disabled{opacity:.5;cursor:progress}",
-        ".gs-viz.gs-err{color:var(--dsh-danger,#e5484d)}",
-        /* The tab: a header row in the sidebar's own idiom (short row, hairline
-           rule, icon control on the right), then the visualiser filling the rest. */
+        ".gs-viz.gs-err{color:var(--dsw-alias-state-error-primary,#e5484d)}",
         ".gs-tabwrap{display:flex;flex-direction:column;height:100%;min-height:0}",
         ".gs-tabbar{display:flex;align-items:center;gap:6px;padding:0 6px 0 10px;min-height:32px;",
-        "border-bottom:1px solid var(--dsh-border,rgba(128,128,128,.22));font-size:11.5px;",
-        "white-space:nowrap;overflow:hidden;flex:0 0 auto}",
-        ".gs-tb-brand{color:var(--dsh-accent,#e5484d);font-weight:700}",
+        "border-bottom:1px solid var(--dsw-alias-border-l1,rgba(128,128,128,.22));font-size:11.5px;",
+        "color:var(--dsw-alias-label-secondary,inherit);white-space:nowrap;overflow:hidden;flex:0 0 auto}",
+        ".gs-tb-brand{color:var(--dsw-alias-brand-primary,#e5484d);font-weight:700}",
         ".gs-tb-sep{opacity:.38}",
-        ".gs-tb-dim{opacity:.72;overflow:hidden;text-overflow:ellipsis}",
+        ".gs-tb-dim{color:var(--dsw-alias-label-tertiary,currentColor);opacity:.72;overflow:hidden;text-overflow:ellipsis}",
         ".gs-tb-fresh{font-weight:600}",
-        ".gs-tb-fresh.gs-ok{color:#5cbe78}",
-        ".gs-tb-fresh.gs-warn{color:#e0a066}",
-        ".gs-tb-fresh.gs-busy{color:#79aee8}",
-        ".gs-tb-fresh.gs-idle{color:var(--dsh-text-3,#9a9a9a)}",
-        ".gs-tb-saved{color:#79aee8}",
+        ".gs-tb-fresh.gs-ok{color:var(--dsw-alias-state-success-primary,#5cbe78)}",
+        ".gs-tb-fresh.gs-warn{color:var(--dsw-alias-state-warn-primary,#e0a066)}",
+        ".gs-tb-fresh.gs-busy{color:var(--dsw-alias-state-business-primary,#79aee8)}",
+        ".gs-tb-fresh.gs-idle{color:var(--dsw-alias-label-tertiary,#9a9a9a)}",
+        ".gs-tb-saved{color:var(--dsw-alias-link,#79aee8)}",
         ".gs-refresh{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;",
-        "width:24px;height:24px;flex:0 0 auto;padding:0;border:0;border-radius:6px;background:transparent;",
-        "color:var(--dsh-text-2,inherit);cursor:pointer;opacity:.75}",
-        ".gs-refresh:hover{background:var(--dsh-surface-2,rgba(128,128,128,.16));opacity:1}",
+        "width:24px;height:24px;flex:0 0 auto;padding:0;border:0;border-radius:var(--dsw-radius-sm,6px);background:transparent;",
+        "color:var(--dsw-alias-label-secondary,inherit);cursor:pointer;opacity:.75}",
+        ".gs-refresh:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.16));opacity:1}",
         ".gs-refresh.gs-spinning svg{animation:gs-spin 600ms linear}",
-        ".gs-tabframe{width:100%;flex:1 1 auto;min-height:0;border:0;background:#fff;display:block}",
-        ".gs-tabmsg{padding:14px;font-size:12px;line-height:1.6;opacity:.85}",
+        ".gs-tabframe{width:100%;flex:1 1 auto;min-height:0;border:0;background:var(--dsw-alias-bg-base,transparent);display:block}",
+        ".gs-tabmsg{padding:14px;font-size:12px;line-height:1.6;color:var(--dsw-alias-label-secondary,inherit);opacity:.85}",
         ".gs-tabreason{margin-top:6px;opacity:.7;font-family:ui-monospace,monospace;font-size:11px;word-break:break-word}",
-        /* The hover card. Anchored to the wrap, which is why the wrap is
-           positioned; `pointer-events:none` so it can never swallow a click
-           meant for the button underneath it. */
         ".gs-wrap{position:relative}",
         ".gs-pop{position:absolute;bottom:calc(100% + 10px);right:0;z-index:80;width:296px;",
         "padding:12px 13px;border-radius:12px;pointer-events:none;text-align:left;",
-        "border:1px solid var(--dsh-border,rgba(128,128,128,.3));",
-        "background:var(--dsh-surface,#1b1b1e);color:var(--dsh-text,inherit);",
+        "border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));",
+        "background:var(--dsw-alias-bg-layer-2,#1b1b1e);color:var(--dsw-alias-label-primary,inherit);",
         "box-shadow:0 10px 30px rgba(0,0,0,.34);font-size:12px;line-height:1.5;",
         "opacity:0;transform:translateY(4px);animation:gs-pop-in .13s ease-out forwards}",
         "@keyframes gs-pop-in{to{opacity:1;transform:none}}",
         ".gs-pop-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}",
         ".gs-pop-head .gs-pop-title{font-weight:700;letter-spacing:.02em}",
-        ".gs-pill{margin-left:auto;font-size:9.5px;font-weight:700;text-transform:uppercase;",
+        // Pill + Build travel as ONE group at the header's right: the wrapper
+        // carries the row's only auto margin, so the 8px flex gap is the only
+        // thing between the pair and nothing can split them — either apart or
+        // across the header.
+        ".gs-pop-group{margin-left:auto;display:inline-flex;align-items:center;gap:8px}",
+        ".gs-pill{font-size:9.5px;font-weight:700;text-transform:uppercase;",
         "letter-spacing:.07em;padding:3px 8px;border-radius:999px;white-space:nowrap}",
-        ".gs-pill.gs-p-ok{background:rgba(63,164,91,.18);color:#5cbe78}",
-        ".gs-pill.gs-p-warn{background:rgba(208,132,66,.2);color:#e0a066}",
-        ".gs-pill.gs-p-busy{background:rgba(75,139,214,.2);color:#79aee8}",
-        ".gs-pill.gs-p-idle{background:rgba(128,128,128,.2);color:var(--dsh-text-3,#9a9a9a)}",
+        ".gs-pill.gs-p-ok{background:color-mix(in srgb,var(--dsw-alias-state-success-primary,#3fa45b) 18%,transparent);color:var(--dsw-alias-state-success-primary,#5cbe78)}",
+        ".gs-pill.gs-p-warn{background:color-mix(in srgb,var(--dsw-alias-state-warn-primary,#d08442) 20%,transparent);color:var(--dsw-alias-state-warn-primary,#e0a066)}",
+        ".gs-pill.gs-p-busy{background:color-mix(in srgb,var(--dsw-alias-state-business-primary,#4b8bd6) 20%,transparent);color:var(--dsw-alias-state-business-primary,#79aee8)}",
+        ".gs-pill.gs-p-idle{background:color-mix(in srgb,var(--dsw-alias-label-tertiary,#888) 20%,transparent);color:var(--dsw-alias-label-tertiary,#9a9a9a)}",
         ".gs-pop-repo{font-weight:600;font-size:12.5px;margin-bottom:2px}",
         ".gs-pop-path{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10.5px;",
-        "opacity:.58;word-break:break-all}",
+        "color:var(--dsw-alias-label-tertiary,inherit);opacity:.58;word-break:break-all}",
         ".gs-pop-stats{display:flex;gap:18px;margin:11px 0 0;padding:10px 0 2px;",
-        "border-top:1px solid var(--dsh-border,rgba(128,128,128,.2))}",
+        "border-top:1px solid var(--dsw-alias-border-l1,rgba(128,128,128,.2))}",
         ".gs-stat b{display:block;font-size:15px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}",
         ".gs-stat i{display:block;font-style:normal;font-size:9.5px;text-transform:uppercase;",
         "letter-spacing:.07em;opacity:.55;margin-top:1px}",
         ".gs-pop-note{margin-top:10px;padding-top:9px;font-size:11px;opacity:.68;",
-        "border-top:1px solid var(--dsh-border,rgba(128,128,128,.2))}",
+        "border-top:1px solid var(--dsw-alias-border-l1,rgba(128,128,128,.2))}",
+        // The popup's Build button, grouped with the status pill at the
+        // header's right (see .gs-pop-group). Quiet at header scale — an
+        // outline button, not the brand fill — because a 24px solid pill
+        // would dominate the 9.5px status pill it sits beside. Disabled (and
+        // labelled Building…) while the build runs, so a double click cannot
+        // queue two of them.
+        //
+        // pointer-events:auto is load-bearing, not cosmetic: the card itself
+        // is pointer-events:none (pure text needs no clicks and must not eat
+        // them), so without this the button renders but can never be pressed.
+        ".gs-build{pointer-events:auto;display:inline-flex;align-items:center;height:20px;padding:0 10px;",
+        "border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));border-radius:999px;",
+        "background:transparent;color:var(--dsw-alias-label-secondary,inherit);",
+        "font-size:10.5px;font-weight:600;cursor:pointer;white-space:nowrap}",
+        ".gs-build:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.14))}",
+        ".gs-build:disabled{opacity:.6;cursor:progress}",
+        // The confirm modal's footer: Cancel beside a brand-fill accept, in
+        // the theme's own button language. The Modal itself (mask, card,
+        // Escape, focus) is dsh's chrome and needs no styles here.
+        ".gs-modal-foot{display:flex;gap:8px;justify-content:flex-end}",
+        ".gs-build.gs-confirm{background:var(--dsw-alias-brand-primary,#e5484d);border-color:transparent;color:var(--dsw-alias-label-primary-foreground,#fff)}",
         ".gs-pop-reason{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10.5px;",
         "opacity:.75;word-break:break-word;margin-top:4px}",
       ].join("");
@@ -244,7 +291,113 @@ window.__ModuleLoader__.load({
      * under them as supporting detail.
      */
     function StatusCard(props) {
-      const { status } = props;
+      const { status, runBuild, onSynced } = props;
+      const [building, setBuilding] = React.useState(false);
+      const [buildError, setBuildError] = React.useState(null);
+      // Whether the themed confirm modal is open (no index yet). Held here
+      // because only the no-graph path ever asks.
+      const [confirming, setConfirming] = React.useState(false);
+
+      // The popup's Build button runs the same rebuild the automatic hooks
+      // run, for this session's repo — or the plain offline initialise when
+      // there is no index yet. It holds Building… until OBSERVED freshness
+      // flips to synced — not until the build call lands, which only means
+      // "started". A bare `graft build` was tried here first and shipped as
+      // a press that changed nothing: the child exited while stats.json still
+      // read dirty, the button re-enabled against a pill that still said
+      // STALE, and the pill only moved when some later rebuild rewrote stats.
+      // A timed-out wait re-enables with the last error rather than holding
+      // Building… forever.
+      const proceed = React.useCallback(() => {
+        if (building || typeof runBuild !== "function") return;
+        // Indexed: rebuild at once, no question. Unindexed: indexing a tree
+        // writes a graft/ directory into it, so the press asks first and a
+        // decline builds nothing. A blind press that silently indexed whatever
+        // happened to be open shipped once; this gate is the reason it will
+        // not ship again.
+        if (status !== null && status.ok === true) {
+          startBuild();
+          return;
+        }
+        if (Primitives !== null && typeof Primitives.Modal === "function") {
+          setConfirming(true);
+          return;
+        }
+        // Primitives unresolvable: the ugly box is better than no gate.
+        if (
+          window.confirm(
+            "Build a new graft index in this workspace?\n\n" +
+              String(status.from ?? status.root ?? "") +
+              "\n\nPlain structural build — offline, no API key needed.",
+          )
+        ) {
+          startBuild();
+        }
+      }, [building, runBuild, status]);
+      const startBuild = React.useCallback(() => {
+        if (building || typeof runBuild !== "function") return;
+        setBuilding(true);
+        setBuildError(null);
+        setConfirming(false);
+        const finish = (ok, reason) => {
+          setBuilding(false);
+          if (!ok) setBuildError(String(reason || "unknown reason"));
+        };
+        Promise.resolve(runBuild()).then(
+          (answer) => {
+            let started;
+            try {
+              started = unwrap(answer);
+            } catch (error) {
+              finish(false, String(error?.message ?? error));
+              return;
+            }
+            if (!started || started.ok !== true) {
+              finish(false, String((started && started.reason) || "unknown reason"));
+              return;
+            }
+            // A fresh initialise has no stats.json yet for a freshness poll to
+            // observe, so there is nothing to wait for — the next status poll
+            // picks the new graph up on its own.
+            if (started.initialising === true) {
+              finish(true);
+              return;
+            }
+            if (typeof onSynced === "function") {
+              Promise.resolve(onSynced()).then(
+                (synced) => finish(synced === true, synced === true ? null : "the rebuild did not report in sync — try again"),
+                (error) => finish(false, String(error?.message ?? error)),
+              );
+            } else {
+              finish(true);
+            }
+          },
+          (error) => {
+            finish(false, String(error?.message ?? error));
+          },
+        );
+      }, [building, runBuild, onSynced]);
+
+      // One pair, rendered in both pill-carrying heads: pill and button
+      // grouped at the header's right, travelling together.
+      const headGroup = (pill) =>
+        h(
+          "div",
+          { className: "gs-pop-group" },
+          pill,
+          h(
+            "button",
+            {
+              type: "button",
+              className: "gs-build",
+              onClick: () => proceed(),
+              disabled: building,
+            },
+            building ? "Building…" : "Build",
+          ),
+        );
+      const buildFailure =
+        buildError === null ? null : h("div", { className: "gs-pop-reason" }, buildError);
       if (status === null || status === undefined) {
         return h(
           "div",
@@ -255,6 +408,54 @@ window.__ModuleLoader__.load({
       }
 
       if (status.ok !== true) {
+        // The themed confirm: dsh's own Modal, same chrome as every other
+        // dialog in the app. Rendered here (not in the head) because a modal
+        // portals to the body — it must not live inside the click-through
+        // card. Cancel/Escape/mask-click closes and builds nothing; the
+        // accept starts the initialise.
+        const confirmModal =
+          Primitives !== null && typeof Primitives.Modal === "function"
+            ? h(
+                Primitives.Modal,
+                {
+                  open: confirming,
+                  onClose: () => {
+                    if (!building) setConfirming(false);
+                  },
+                  title: "Build graft index?",
+                  description:
+                    "Index " +
+                    basename(String(status.from ?? status.root ?? "")) +
+                    " with a plain structural build — offline, no API key needed. Writes a graft/ directory there.",
+                  closeLabel: "Close",
+                  footer: h(
+                    "div",
+                    { className: "gs-modal-foot" },
+                    h(
+                      "button",
+                      {
+                        type: "button",
+                        className: "gs-build",
+                        onClick: () => setConfirming(false),
+                        disabled: building,
+                      },
+                      "Cancel",
+                    ),
+                    h(
+                      "button",
+                      {
+                        type: "button",
+                        className: "gs-build gs-confirm",
+                        onClick: () => startBuild(),
+                        disabled: building,
+                        "data-modal-autofocus": true,
+                      },
+                      building ? "Building…" : "Build index",
+                    ),
+                  ),
+                },
+              )
+            : null;
         return h(
           "div",
           { className: "gs-pop", role: "tooltip" },
@@ -262,11 +463,16 @@ window.__ModuleLoader__.load({
             "div",
             { className: "gs-pop-head" },
             h("span", { className: "gs-pop-title" }, "graft"),
-            h("span", { className: "gs-pill gs-p-idle" }, "no graph"),
+            headGroup(h("span", { className: "gs-pill gs-p-idle" }, "no graph")),
           ),
           h("div", null, "No graft index for this workspace."),
           h("div", { className: "gs-pop-reason" }, String(status.reason ?? "unknown reason")),
+          status.worktreeOf
+            ? h("div", { className: "gs-pop-note" }, "git worktree of " + basename(status.worktreeOf) + " — /graft here seeds the first graph from it.")
+            : null,
           h("div", { className: "gs-pop-note" }, "Run `graft build` in it once — no API key needed."),
+          buildFailure,
+          confirmModal,
         );
       }
 
@@ -281,10 +487,13 @@ window.__ModuleLoader__.load({
           "div",
           { className: "gs-pop-head" },
           h("span", { className: "gs-pop-title" }, "graft"),
-          h("span", { className: "gs-pill " + pill.className }, pill.label),
+          headGroup(h("span", { className: "gs-pill " + pill.className }, pill.label)),
         ),
         h("div", { className: "gs-pop-repo" }, basename(status.root)),
         h("div", { className: "gs-pop-path" }, status.root),
+        status.worktreeOf
+          ? h("div", { className: "gs-pop-note" }, "git worktree of " + basename(status.worktreeOf))
+          : null,
         h(
           "div",
           { className: "gs-pop-stats" },
@@ -299,24 +508,29 @@ window.__ModuleLoader__.load({
             // drift signal at all, so "in sync" is an absence of evidence.
             ? h("div", { className: "gs-pop-note" }, "Read from the graph itself; no live drift signal.")
             : null,
+        buildFailure,
       );
     }
 
-    /** The graph mark, exactly as supplied. `--accent` is set by `.gs-viz`. */
+    /** The graft mark: thick trunk with a leaf, thin branches, accent node.
+     *  The same design as `assets/icon.svg` and the banners, at button scale
+     *  (trunk and branch widths match the tuned vector's tube widths).
+     *  `--accent` is set by `.gs-viz`. */
     function GraphIcon() {
       return h(
         "svg",
         { width: 19, height: 19, viewBox: "0 0 24 24", "aria-hidden": "true" },
+        h("path", { d: "M11.6 17.8 C9.9 17.9 8.2 17.1 7.3 15.4 C9.2 14.9 11 15.9 11.6 17.8 Z", fill: "var(--accent)" }),
         h(
           "g",
-          { fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round" },
-          h("path", { d: "M12 21 V12" }),
-          h("path", { d: "M12 12 L6.8 6.6" }),
-          h("path", { stroke: "var(--accent)", d: "M12 12 L17.4 7.6" }),
+          { fill: "none", stroke: "currentColor", strokeLinecap: "round" },
+          h("path", { strokeWidth: 3.1, d: "M12 21 V12" }),
+          h("path", { strokeWidth: 1.7, d: "M12 12 L6.8 6.6" }),
+          h("path", { stroke: "var(--accent)", strokeWidth: 1.8, d: "M12 12 L17.4 7.6" }),
         ),
-        h("circle", { cx: 12, cy: 12, r: 2.1, fill: "currentColor" }),
-        h("circle", { cx: 6.8, cy: 6.6, r: 1.7, fill: "currentColor" }),
-        h("circle", { cx: 17.4, cy: 7.6, r: 1.7, fill: "var(--accent)" }),
+        h("circle", { cx: 12, cy: 12, r: 2.2, fill: "currentColor" }),
+        h("circle", { cx: 6.8, cy: 6.6, r: 1.8, fill: "currentColor" }),
+        h("circle", { cx: 17.4, cy: 7.6, r: 1.8, fill: "var(--accent)" }),
       );
     }
 
@@ -329,11 +543,16 @@ window.__ModuleLoader__.load({
      * stares at a blank white tab and assumes it broke.
      */
     function waitingDocument(repo) {
+      // A popped-out document cannot see the app's theme variables; the best
+      // it can do is follow the OS preference.
+      const dark = window.matchMedia !== undefined && window.matchMedia("(prefers-color-scheme: dark)").matches;
+      const bg = dark ? "#161616" : "#f6f6f6";
+      const fg = dark ? "#ddd" : "#333";
       return [
         "<!doctype html><meta charset=utf-8>",
         "<title>graft viz — ", repo, "</title>",
         "<style>body{margin:0;display:grid;place-items:center;height:100vh;",
-        "font:14px system-ui,sans-serif;background:#161616;color:#ddd}</style>",
+        "font:14px system-ui,sans-serif;background:", bg, ";color:", fg, "}</style>",
         "<div>Starting <b>graft viz</b> for ", repo, "…</div>",
       ].join("");
     }
@@ -378,6 +597,15 @@ window.__ModuleLoader__.load({
 
     const FRESH_MARK = { synced: "✓ synced", stale: "▲ stale", syncing: "◐ syncing", unknown: "○ unknown" };
 
+    /**
+     * How long the Build button waits for observed sync before giving up.
+     *
+     * Two minutes of 2s polls: a structural rebuild of a normal repo takes
+     * about a second, a large one can take minutes, and a wedged one must not
+     * hold Building… forever.
+     */
+    const SYNC_WAIT_MS = 120000;
+
     /** ⟳ — the one control adopted from the sidebar's own tab headers. */
     function RefreshIcon() {
       return h(
@@ -461,6 +689,7 @@ window.__ModuleLoader__.load({
         const ok = status !== null && status.ok === true;
         const freshness = ok ? status.freshness ?? "unknown" : "unknown";
         const saved = ok ? tokensFull(status.savedTokens) : null;
+        const wt = status !== null && status.worktreeOf ? basename(status.worktreeOf) : null;
 
         const bar = h(
           "div",
@@ -476,8 +705,10 @@ window.__ModuleLoader__.load({
                 h("span", { className: "gs-tb-fresh " + (TONE[freshness] ?? TONE.unknown) }, FRESH_MARK[freshness] ?? FRESH_MARK.unknown),
                 saved === null ? null : h("span", { className: "gs-tb-sep" }, "·"),
                 saved === null ? null : h("span", { className: "gs-tb-saved" }, saved),
+                wt === null ? null : h("span", { className: "gs-tb-sep" }, "·"),
+                wt === null ? null : h("span", { className: "gs-tb-dim" }, "worktree of " + wt),
               )
-            : h("span", { className: "gs-tb-dim" }, status === null ? "…" : "no graph"),
+            : h("span", { className: "gs-tb-dim" }, status === null ? "…" : wt === null ? "no graph" : "no graph — worktree of " + wt),
           h(
             "button",
             {
@@ -520,6 +751,21 @@ window.__ModuleLoader__.load({
         const dwell = React.useRef(null);
         const wrap = React.useRef(null);
 
+        // Whether the dot should be blinking violet right now: a graft tool call
+        // was seen and its blink window has not run out yet.
+        const [flick, setFlick] = React.useState(false);
+        // Whether a graft tool was seen recently. Outlives the blink on
+        // purpose: it holds the fast poll for a tail after the last pulse, so
+        // the NEXT call in an active burst is caught within one fast tick
+        // instead of waiting out the slow settled cadence — exactly the lag a
+        // second tool call used to show.
+        const [recent, setRecent] = React.useState(false);
+        const recentTimer = React.useRef(null);
+        // The last pulse consumed, as { root, count }: the blink fires when the
+        // count MOVES for the repo this chip describes, never on first sight.
+        const pulseSeen = React.useRef(null);
+        const flickTimers = React.useRef([]);
+
         // Whether the graph is at rest. Drives the poll cadence below.
         const settled = status !== null && status.ok === true && status.freshness === "synced";
 
@@ -560,7 +806,14 @@ window.__ModuleLoader__.load({
           const onDocument = (event) => {
             // `contains` rather than a target comparison, so a click on the
             // card's own text — or on the chip, which toggles — is not treated
-            // as "outside" and closed twice.
+            // as "outside" and closed twice. Clicks inside the confirm modal
+            // are ALSO inside: it portals to document.body, outside the wrap,
+            // so without this guard the capture-phase closer unmounts the card
+            // (modal included) before the accept's own click ever dispatches —
+            // an accept that hides the dialog and builds nothing.
+            const inModal =
+              event.target instanceof Element && event.target.closest('[role="dialog"], .gs-modal-foot') !== null;
+            if (inModal) return;
             if (wrap.current !== null && wrap.current.contains(event.target)) return;
             setCard(false);
           };
@@ -573,6 +826,61 @@ window.__ModuleLoader__.load({
         // component; one that fires after the session switched would show the
         // previous workspace's card.
         React.useEffect(() => () => window.clearTimeout(dwell.current), []);
+        // The blink must not cross a session boundary — this component stays
+        // mounted across one — and its timers must not outlive it. Effect
+        // cleanup runs for both, so this one block is the whole hygiene.
+        React.useEffect(
+          () => () => {
+            for (const t of flickTimers.current) window.clearTimeout(t);
+            flickTimers.current = [];
+            window.clearTimeout(recentTimer.current);
+            pulseSeen.current = null;
+            setFlick(false);
+            setRecent(false);
+          },
+          [sessionId],
+        );
+
+        // Blink the dot violet on and off — intermittent, never solid — for just
+        // under two seconds, toggling every 175ms. The mark list is EVEN on
+        // purpose: the final toggle is always "off", so the dot returns to its
+        // resting colour instead of sticking on violet. A pulse arriving
+        // mid-blink restarts the run, so a burst of graft calls reads as one
+        // flicker that ends when they do.
+        const blink = React.useCallback(() => {
+          for (const t of flickTimers.current) window.clearTimeout(t);
+          flickTimers.current = [];
+          for (const ms of [0, 175, 350, 525, 700, 875, 1050, 1225, 1400, 1575, 1750, 1925]) {
+            const on = flickTimers.current.length % 2 === 0;
+            flickTimers.current.push(window.setTimeout(() => setFlick(on), ms));
+          }
+        }, []);
+
+        // Consume one polled status: blink when its tool-use count has moved
+        // for THIS repo. A first look — or the first look after the chip
+        // switched repos — only sets the baseline, so history never blinks.
+        const pulseCheck = React.useCallback(
+          (next) => {
+            const count = next?.toolUse?.count;
+            if (typeof count !== "number") return;
+            const seen = pulseSeen.current;
+            if (seen === null || seen.root !== next.root) {
+              pulseSeen.current = { root: next.root, count };
+              return;
+            }
+            if (count > seen.count) {
+              pulseSeen.current = { root: next.root, count };
+              blink();
+              // Hold the fast poll for a tail after the last use, so the next
+              // call in a burst is seen within one tick of the harness's own
+              // tool feedback.
+              setRecent(true);
+              window.clearTimeout(recentTimer.current);
+              recentTimer.current = window.setTimeout(() => setRecent(false), 20000);
+            }
+          },
+          [blink],
+        );
 
         React.useEffect(() => {
           let live = true;
@@ -584,7 +892,10 @@ window.__ModuleLoader__.load({
             }
             Promise.resolve(service.status(sessionId)).then(
               (answer) => {
-                if (live) setStatus(unwrap(answer));
+                if (!live) return;
+                const next = unwrap(answer);
+                setStatus(next);
+                pulseCheck(next);
               },
               (error) => {
                 if (live) setStatus({ ok: false, reason: String(error?.message ?? error) });
@@ -598,8 +909,13 @@ window.__ModuleLoader__.load({
           // near zero and the chip appeared to jump straight from stale back
           // to green. While the graph is MOVING — stale, mid-sync, or not yet
           // known — it is watched closely; once it is in sync there is nothing
-          // to watch and the slow interval is right again.
-          const timer = window.setInterval(pull, settled ? 15000 : 2000);
+          // to watch. Even at rest it still polls at 4s rather than the old
+          // 15s, because graft tool feedback must keep up with the harness's
+          // own tool feedback — a settled chip that only looked twice a minute
+          // was the reported lag on every call after the first. The server
+          // caches status for 5s, so 4s adds no real reads; a pulse then holds
+          // the 2s cadence for a 20s tail.
+          const timer = window.setInterval(pull, settled && !recent ? 4000 : 2000);
           return () => {
             live = false;
             window.clearInterval(timer);
@@ -607,7 +923,50 @@ window.__ModuleLoader__.load({
           // `settled` is a dependency, not just a value read inside: without it
           // the interval would keep whatever cadence it had at mount — 2s, from
           // the initial unknown state — and never slow down again.
-        }, [sessionId, settled]);
+        }, [sessionId, settled, recent, pulseCheck]);
+
+        // The build the popup button triggers. Resolved here, in a callback
+        // like every other remote access, rather than in render.
+        const runBuild = React.useCallback(() => {
+          const service = ctx.get("remote.graftStatus");
+          if (service === undefined || service === null) {
+            return Promise.reject(new Error("graft-status host half is not mounted"));
+          }
+          return service.build(sessionId);
+        }, [sessionId]);
+
+        // Re-read status on demand — after the popup's Build lands — rather
+        // than waiting out the poll. Returns the observed freshness, so a
+        // waiter can hold until the rebuild is VISIBLE, not just started.
+        const repull = React.useCallback(() => {
+          const service = ctx.get("remote.graftStatus");
+          if (service === undefined || service === null) return Promise.resolve(null);
+          return Promise.resolve(service.status(sessionId)).then(
+            (answer) => {
+              const next = unwrap(answer);
+              setStatus(next);
+              pulseCheck(next);
+              return next !== null && next.ok === true ? next.freshness ?? "unknown" : null;
+            },
+            () => null,
+          );
+        }, [sessionId, pulseCheck]);
+
+        // Hold until a re-read OBSERVES `synced`, not until the build call
+        // lands: the rebuild runs detached, so "started" says nothing about
+        // what stats.json reads yet. Bounded — two minutes of 2s polls — so a
+        // wedged rebuild re-enables the button with the last error rather
+        // than holding Building… forever.
+        const waitForSynced = React.useCallback(() => {
+          const started = Date.now();
+          const look = () =>
+            Promise.resolve(repull()).then((freshness) => {
+              if (freshness === "synced") return true;
+              if (Date.now() - started > SYNC_WAIT_MS) return false;
+              return new Promise((resolve) => window.setTimeout(() => resolve(look().then(resolve)), 2000));
+            });
+          return look();
+        }, [repull]);
 
         const openViz = React.useCallback(() => {
           const repo = basename((status && status.root) || "");
@@ -764,11 +1123,21 @@ window.__ModuleLoader__.load({
         return h(
           "div",
           { className: "gs-wrap", ref: wrap },
-          card ? h(StatusCard, { status }) : null,
+          card
+            ? h(StatusCard, {
+                status,
+                runBuild,
+                // The button holds Building… until this OBSERVES synced, so
+                // the pill flips first and the button follows — never the
+                // other way round.
+                onSynced: waitForSynced,
+              })
+            : null,
           h(
             "div",
             {
-              className: "gs-chip gs-clickable " + tone + (ok ? "" : " gs-muted"),
+              className:
+                "gs-chip gs-clickable " + tone + (ok ? "" : " gs-muted") + (flick ? " gs-live" : ""),
               onMouseEnter: enter,
               onMouseLeave: leave,
               onClick: toggleCard,
@@ -792,7 +1161,7 @@ window.__ModuleLoader__.load({
             h("span", { className: "gs-dot", "aria-hidden": "true" }, glyph),
             h("span", { className: "gs-name" }, "graft"),
             h("span", { className: "gs-sep" }, "·"),
-            h("span", null, label),
+            h("span", { className: "gs-label" }, label),
             ok && freshness === "stale" ? h("span", { className: "gs-sep" }, "·") : null,
             ok && freshness === "stale" ? h("span", null, "stale") : null,
           ),