makersclaw 0.8.0 → 0.8.2

package/registry/blocks/time-strip/time-strip.jsx

@@ -0,0 +1,260 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { Button, Notice, Skeleton, cx } from "../../ui";
+import { clockOf, countMarks, lengthOf, marksOf, nextMark, pctOf, rangeOf, rangesOf, secondsAt, shareOf, stripWords, ticksFor, toSeconds } from "./strip-model";
+
+// One bar for a span that has a length (a call, a recording, a shift), with
+// marks at the times that matter on it. The marks are the app's: a cut, a
+// comment, a decision. The bar can show the stretch somebody was away
+// (hatched), and can let a person drag out a part of it.
+//
+// Props in, callbacks out (`onMark`, `onSelect`): the block never reads or
+// writes data. Positions are percentages of the length, so the server draws
+// what the browser draws. README.md beside this file lists every prop.
+
+// Literal class names, so Tailwind sees every one of them.
+const COLOR = {
+  neutral: "bg-muted-foreground",
+  primary: "bg-primary",
+  info: "bg-info",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive",
+};
+const HUE = { 1: "bg-chart-1", 2: "bg-chart-2", 3: "bg-chart-3", 4: "bg-chart-4", 5: "bg-chart-5" };
+
+const SIZE = {
+  sm: { track: "h-[22px]", mark: "inset-y-[3px] w-[5px]", on: "inset-y-0 w-[7px]", handle: "inset-y-0 w-2" },
+  lg: { track: "h-11", mark: "inset-y-1.5 w-1.5", on: "inset-y-0.5 w-2", handle: "inset-y-0 w-2.5" },
+};
+
+const HATCH = { backgroundImage: "repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 5px)" };
+
+const colorOf = (m) => (m.hue && HUE[m.hue] ? HUE[m.hue] : COLOR[m.tone] ?? "bg-foreground");
+
+/**
+ * The strip.
+ *
+ * Props: `length` (seconds, or "mm:ss"), `marks` `[{ id, at, hue?, tone?,
+ * label? }]`, `away` `[[from, to]]`, `selection` `{ from, to }`,
+ * `onSelect(range | null)`, `selected` (a mark id), `onMark(mark)`, `size`
+ * (sm | lg), `axis` (true, false, or `[{ at, label? }]`), `step`, `noun`,
+ * `label`, `status`, `error`, `onRetry`, `className`.
+ */
+export function TimeStrip({
+  length,
+  marks,
+  away,
+  selection,
+  onSelect,
+  selected,
+  onMark,
+  size = "sm",
+  axis = true,
+  ticks = 5,
+  step = 1,
+  noun = "mark",
+  label = "Timeline",
+  status = "ready",
+  error,
+  onRetry,
+  className,
+}) {
+  const track = useRef(null);
+  const [drag, setDrag] = useState(null);
+  const total = lengthOf(length);
+  const look = SIZE[size] ?? SIZE.sm;
+  const placed = marksOf(marks, total);
+  const gaps = rangesOf(away, total);
+  const shown = drag ?? (selection ? rangeOf(selection.from, selection.to, total) : null);
+  const canPick = Boolean(onSelect) && total > 0;
+
+  if (status === "loading") {
+    return (
+      <div role="status" aria-label={`${label}, loading`} className={cx("grid gap-1", className)}>
+        <Skeleton className={cx("w-full", look.track)} />
+        {axis ? <Skeleton className="h-3 w-full" /> : null}
+      </div>
+    );
+  }
+  if (status === "failed") {
+    return (
+      <Notice
+        tone="danger"
+        className={className}
+        action={
+          onRetry ? (
+            <Button size="sm" onClick={onRetry}>
+              Try again
+            </Button>
+          ) : undefined
+        }
+      >
+        {error || "The timeline could not be read."}
+      </Notice>
+    );
+  }
+
+  // The bar's own ticks, or the app's.
+  const labels = (() => {
+    if (axis === false || total <= 0) return [];
+    if (Array.isArray(axis)) {
+      const list = axis
+        .map((t) => ({ ...t, seconds: toSeconds(t?.at) }))
+        .filter((t) => t.seconds != null)
+        .sort((a, b) => a.seconds - b.seconds);
+      return list.map((t, i) => ({ at: t.seconds, label: t.label ?? clockOf(t.seconds), pct: pctOf(shareOf(t.seconds, total)), edge: i === 0 && t.seconds <= 0 ? "start" : i === list.length - 1 && t.seconds >= total ? "end" : null }));
+    }
+    return ticksFor(total, ticks);
+  })();
+
+  function secondsFromPointer(e) {
+    const box = track.current?.getBoundingClientRect();
+    if (!box || !box.width) return 0;
+    return secondsAt((e.clientX - box.left) / box.width, total, step);
+  }
+
+  function down(e) {
+    if (!canPick || e.button !== 0) return;
+    const at = secondsFromPointer(e);
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    setDrag({ anchor: at, from: at, to: at, fromPct: 0, widthPct: 0, moving: false });
+  }
+  function move(e) {
+    if (!drag) return;
+    const at = secondsFromPointer(e);
+    const r = rangeOf(drag.anchor, at, total);
+    setDrag({ ...drag, moving: true, ...(r ?? { from: at, to: at, fromPct: pctOf(at / total), widthPct: 0 }) });
+  }
+  function up(e) {
+    if (!drag) return;
+    const at = secondsFromPointer(e);
+    const r = rangeOf(drag.anchor, at, total, { min: Math.max(1, Number(step) || 1) - 1 });
+    setDrag(null);
+    e.currentTarget.releasePointerCapture?.(e.pointerId);
+    // A press that went nowhere clears the part; a drag picks one.
+    onSelect(r ? { from: r.from, to: r.to } : null);
+  }
+
+  function nudge(which, e) {
+    if (!shown) return;
+    const unit = Math.max(1, Number(step) || 1) * (e.shiftKey ? 10 : 1);
+    const keys = { ArrowLeft: -unit, ArrowDown: -unit, ArrowRight: unit, ArrowUp: unit };
+    let from = shown.from;
+    let to = shown.to;
+    const move = which === "from" ? "from" : "to";
+    let value = move === "from" ? from : to;
+    if (e.key in keys) value += keys[e.key];
+    else if (e.key === "Home") value = 0;
+    else if (e.key === "End") value = total;
+    else if (e.key === "Escape") {
+      e.preventDefault();
+      onSelect(null);
+      return;
+    } else return;
+    e.preventDefault();
+    if (move === "from") from = value;
+    else to = value;
+    const r = rangeOf(from, to, total, { min: 0 });
+    if (r) onSelect({ from: r.from, to: r.to });
+  }
+
+  const words = stripWords({ length: total, marks: placed, noun });
+  const kinds = countMarks(placed);
+
+  return (
+    <div role="group" aria-label={label} className={cx("relative grid min-w-0 gap-1", className)}>
+      <div
+        ref={track}
+        className={cx("relative overflow-hidden rounded-[4px] border border-border bg-muted", look.track, canPick && "cursor-crosshair touch-none select-none")}
+        onPointerDown={down}
+        onPointerMove={move}
+        onPointerUp={up}
+        onPointerCancel={() => setDrag(null)}
+      >
+        {gaps.map((g, i) => (
+          <span key={`away-${i}`} aria-hidden="true" title={g.label} className="absolute inset-y-0 left-(--at) w-(--width) text-input" style={{ ...HATCH, "--at": `${g.fromPct}%`, "--width": `${g.widthPct}%` }} />
+        ))}
+        {shown && shown.widthPct > 0 ? (
+          <span aria-hidden="true" className="absolute inset-y-0 left-(--at) w-(--width) rounded-[4px] border-2 border-primary bg-primary/10" style={{ "--at": `${shown.fromPct}%`, "--width": `${shown.widthPct}%` }} />
+        ) : null}
+        {placed.map((m) => {
+          const on = selected != null && m.id === selected;
+          const name = `${m.label ? `${m.label}, ` : ""}${noun} at ${clockOf(m.seconds)}`;
+          const className = cx(
+            "absolute left-(--at) -translate-x-1/2 rounded-[2px] outline-none before:absolute before:inset-y-0 before:-inset-x-1.5 before:content-[''] focus-visible:ring-2 focus-visible:ring-ring",
+            on ? look.on : look.mark,
+            colorOf(m),
+            on && "ring-2 ring-background",
+          );
+          const style = { "--at": `${m.pct}%` };
+          return onMark ? (
+            <button
+              key={m.id}
+              type="button"
+              aria-label={name}
+              aria-pressed={on}
+              title={name}
+              className={className}
+              style={style}
+              onPointerDown={(e) => e.stopPropagation()}
+              onClick={() => onMark(m)}
+              onKeyDown={(e) => {
+                if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+                const to = nextMark(placed, m.id, e.key === "ArrowRight" ? 1 : -1);
+                const el = e.currentTarget.parentElement?.querySelector(`[data-mark="${CSS.escape(String(to))}"]`);
+                if (el && to !== m.id) {
+                  e.preventDefault();
+                  el.focus();
+                }
+              }}
+              data-mark={m.id}
+            />
+          ) : (
+            <span key={m.id} role="img" aria-label={name} title={name} className={className} style={style} />
+          );
+        })}
+        {canPick && shown && shown.widthPct > 0
+          ? [
+              ["from", shown.from, shown.fromPct],
+              ["to", shown.to, shown.fromPct + shown.widthPct],
+            ].map(([which, value, at]) => (
+              <button
+                key={which}
+                type="button"
+                role="slider"
+                aria-label={which === "from" ? "Part starts at" : "Part ends at"}
+                aria-valuemin={0}
+                aria-valuemax={total}
+                aria-valuenow={Math.round(value)}
+                aria-valuetext={clockOf(value)}
+                className={cx("absolute left-(--at) -translate-x-1/2 cursor-ew-resize rounded-[2px] bg-primary outline-none focus-visible:ring-2 focus-visible:ring-ring", look.handle)}
+                style={{ "--at": `${at}%` }}
+                onPointerDown={(e) => e.stopPropagation()}
+                onKeyDown={(e) => nudge(which, e)}
+              />
+            ))
+          : null}
+      </div>
+      {labels.length ? (
+        <div aria-hidden="true" className="relative h-4 text-[11px] tabular-nums text-muted-foreground">
+          {labels.map((t, i) => (
+            <span
+              key={`${t.at}-${i}`}
+              className={cx("absolute left-(--at) top-0 whitespace-nowrap", t.edge === "end" ? "-translate-x-full" : t.edge === "start" ? "" : "-translate-x-1/2")}
+              style={{ "--at": `${t.pct}%` }}
+            >
+              {t.label}
+            </span>
+          ))}
+        </div>
+      ) : null}
+      <span className="sr-only">
+        {words}
+        {Object.keys(kinds).length > 1 ? `, in ${Object.keys(kinds).length} kinds` : ""}
+        {shown && shown.widthPct > 0 ? `. Part picked: ${clockOf(shown.from)} to ${clockOf(shown.to)}.` : ""}
+      </span>
+    </div>
+  );
+}

package/registry/blocks/top-bar/README.md

@@ -0,0 +1,149 @@
+# TopBar
+
+The one bar every app draws over its work (0.8.1): where you are, the week's
+allowance, Find, Ask and the screen's main action.
+
+Until now fourteen apps drew their own (`components/<app>/frame.jsx`,
+`TopBar`). So a fix to one never reached the others, and each broke in its own
+way. The founder's review of 2026-10-12: Newsletter's "15,000 cr left" ran
+into Find; Gantt Planner mounted the agent's dock and had no button that
+opened it. This is the bar, once.
+
+- **It never overlaps.** Every piece has a width it may take, and the bar
+  gives way in a fixed order as the app's window narrows. The sizes are
+  measures of the BAR (a container query), not of the screen: an open agent
+  dock takes a quarter of the window.
+
+  | The bar is | It draws |
+  | --- | --- |
+  | any width | the lead, the last crumb, Find and Ask as icons, the action as an icon |
+  | 32rem | the words on Find, Ask and the action |
+  | 36rem | the earlier crumbs and the note |
+  | 42rem | the ⌘K key on Find |
+  | 48rem | `extra` |
+  | 56rem | the allowance, as a bar |
+  | 64rem | the allowance in words ("this week") |
+
+  The table is `PIECES` in `top-bar-model.js`; a test walks every width from
+  18rem to 100rem and checks that what is drawn fits.
+- **Ask can't be left out.** When the app has an agent to ask (a `dock` from
+  `useAgentDock()`, an `onAsk`, or an `AskProvider` above the bar) the bar
+  draws Ask and it opens the agent. No prop turns it off. `npm run check`
+  (rule `ask`) refuses an app that mounts an `AgentDock` with no way to open
+  it.
+- **The allowance is the kit's compact Meter**: the bar alone, with its label
+  and numbers for a screen reader and the tooltip.
+
+```jsx
+import { AskProvider, BarText, TopBar, TopBarSlot } from "../components/blocks/top-bar";   // a Makersclaw app ("./blocks/top-bar" from components/)
+import { TopBar } from "@/components/makersclaw/blocks/top-bar";   // a shadcn project
+```
+
+A client component. It needs the kit (Button, Icon, Kbd, Meter) and nothing
+else.
+
+## Adopting it (an app that drew its own)
+
+1. In the shell, wrap the layout in `AskProvider` with the dock:
+   `<AskProvider dock={dock}>…</AskProvider>`, where `dock = useAgentDock({ storageKey })`.
+   Delete the shell's old Ask handling (the `app:ask` window event, the
+   `toggleAgent()` bus) that only the old bar called.
+2. Delete the app's own `TopBar` from `components/<app>/frame.jsx` (and its
+   `allowanceOf`, `Meter` and `Find`/`Ask` buttons). Keep the rail.
+3. Say what every screen's bar repeats **once, on the `AskProvider`**: the
+   platform's budget as `allowance={{ used, cap }}` (and `allowanceLabel`,
+   `allowanceUnit`, `allowancePeriod` if they are not the defaults), and how
+   Find is reached, `findEvent="issues:find"` if the app's finder listens for a
+   window event (`findLabel`, `findWord`, or an `onFind`). Every `<TopBar>`
+   below uses them unless it passes its own (`allowance={null}` leaves the
+   allowance out on one screen).
+4. Import `TopBar` from `blocks/top-bar` and give each screen's bar only what is
+   that screen's: `crumb`, `note`, `extra`, `action`, `back`, `lead`.
+5. The action's words go in `<BarText>`: `<Button variant="primary" size="sm"
+   icon="plus"><BarText>New issue</BarText></Button>`. Under 32rem the button
+   is its icon and the words stay for a screen reader (`sr-only`). The button
+   must have an `icon`: `npm run check` (rule `barlabel`) refuses a `BarText`
+   button without one, because under 32rem it would draw nothing. Keep the
+   words to about 12 characters.
+6. If the old bar rendered through a portal into the shell's header slot, keep
+   the slot and provide it: `<TopBarSlot.Provider value={slotEl}>` (an
+   element; `null` until it has mounted). With no provider the bar draws where
+   it is rendered, as an `AppLayout` `header`.
+
+## Props
+
+- `lead`: a node before everything (the sidebar trigger, a period picker).
+- `back`: a path; a back button before the crumb.
+- `crumb`: `[{ label, href?, muted? }]`; the last is this screen. The last
+  label truncates last.
+- `note`: muted words after the crumb (from 36rem).
+- `extra`: nodes before the allowance (from 48rem). Keep it to about 12rem
+  (a switch, a chip).
+- `allowance`: `{ used, cap }` (the platform's budget); nothing when null.
+  `allowanceLabel`, `allowanceUnit` (`"cr"`), `allowancePeriod` (`"this
+  week"`). Left out, the `AskProvider`'s (below).
+- `find`: `false` leaves Find out. `onFind`, or `findEvent` (a window event;
+  default `"app:find"`); `findLabel` (a screen reader's), `findWord`. Left
+  out, the `AskProvider`'s.
+- `dock`: what `useAgentDock()` returns. `onAsk`: or your own opener, with
+  `asking` for its state. Neither: the nearest `AskProvider`'s. `askLabel`.
+- `action`: the screen's main action, last in the bar.
+- `className`: spacing only.
+
+`AskProvider({ dock, onAsk, open, …defaults })`, `useAsk()` (`{ toggle, open }`
+or null), `AskButton`, `FindButton` and `BarText` are exported.
+
+**Bar defaults.** The provider also carries the props the bars of an app
+repeat: `allowance`, `allowanceLabel`, `allowanceUnit`, `allowancePeriod`,
+`findEvent`, `onFind`, `findLabel`, `findWord` and `askLabel`. A `TopBar` uses
+them for any of those it does not pass; a prop it does pass (even `null`) wins.
+The resolution is `resolveBar(own, defaults)` in the model. `useAsk()` reads
+the agent (`open` is whether it is open; `toggle` toggles it); to **open** it
+from a screen, call `openAgent()` (blocks/agent-dock), not `useAsk()`. `AskButton` is for a bar
+that cannot be a `TopBar` (the check accepts it as a way to open the dock).
+
+## The model (plain functions)
+
+`PIECES`, `SIZES`, `SHOW`, `visibleAt(rem)`, `usedAt(rem)`, `fitsAt(rem)`,
+`floorRem()`, `askDrawn({ dock, onAsk, context })`, `askAction(...)`,
+`askOpen(...)`, `allowanceOf({ used, cap })`, `allowanceWords(...)`,
+`BAR_DEFAULTS`, `barDefaultsOf(props)`, `resolveBar(own, defaults)`.
+
+## Example
+
+```jsx
+// app/shell.jsx
+"use client";
+import { AppLayout, Button } from "../components/ui";
+import { AgentDock, useAgentDock } from "../components/blocks/agent-dock";
+import { AskProvider, BarText, TopBar } from "../components/blocks/top-bar";
+
+export default function Shell({ children, budget }) {
+  const dock = useAgentDock({ storageKey: "issues" });
+  return (
+    <AskProvider dock={dock} allowance={{ used: budget.used, cap: budget.cap }} findEvent="issues:find" findLabel="Find an issue">
+      <AppLayout
+        header={
+          <TopBar
+            crumb={[{ label: "Issues", href: "/s/issues" }, { label: "Issue 14" }]}
+            action={
+              <Button variant="primary" size="sm" icon="plus">
+                <BarText>New issue</BarText>
+              </Button>
+            }
+          />
+        }
+        dock={<AgentDock dock={dock} label="Ask the agent" />}
+      >
+        {children}
+      </AppLayout>
+    </AskProvider>
+  );
+}
+```
+
+## States drawn in the demo
+
+The same bar at 320, 480, 640, 800 and 1100 px; Ask with the dock closed and
+open; a dock passed straight to the bar; an app with no agent (no Ask); a long
+title with a back button and no Find.

package/registry/blocks/top-bar/block.json

@@ -0,0 +1,35 @@
+{
+  "name": "top-bar",
+  "title": "TopBar",
+  "description": "The one bar every app draws over its work: where you are (a back button, a breadcrumb that keeps its last label and gives up the earlier ones first, a note), the week's allowance (words and the kit's compact Meter), Find, Ask and the screen's main action. It gives way in a set order as the app's window narrows, measured by the bar's own width (a container query, not the window: an open agent dock takes a quarter of it): under 32rem Find, Ask and the action are icons; from 32rem their words; from 36rem the earlier crumbs and the note; from 42rem the ⌘K key; from 48rem `extra`; from 56rem the allowance bar; from 64rem the allowance in words. A table of every piece's width is the single source (top-bar-model.js), and a test walks every width from a phone to a wide desk and checks what is drawn fits, so nothing overlaps. Ask is never optional: when the app has an agent to ask (a dock from useAgentDock, an onAsk, or an AskProvider above) the bar draws Ask and it opens the agent; no prop leaves it out, and `npm run check` refuses an app that mounts an AgentDock with no way to open it. It draws where it is rendered (an AppLayout header) or into the shell's header slot (TopBarSlot). AskProvider, AskButton, FindButton, BarText and the model's plain functions are exported.",
+  "useWhen": "Every app's top bar, replacing each app's own components/<app>/frame.jsx TopBar: the shell or each screen's AppLayout header. Any app that mounts an AgentDock uses it (or AskButton in a bar it cannot replace) so the agent can be opened. Not for a bar inside a card or a sheet (use the parts), and not for the rail or the navigation (sidebar, navigation-menu).",
+  "tags": ["top bar", "header", "breadcrumb", "find", "ask", "agent", "allowance", "credits", "action", "shell", "chrome", "responsive", "dock", "search"],
+  "exports": [
+    "AskButton",
+    "AskProvider",
+    "BAR_DEFAULTS",
+    "BarText",
+    "FindButton",
+    "GAP",
+    "PIECES",
+    "SHOW",
+    "SIZES",
+    "TopBar",
+    "TopBarSlot",
+    "allowanceOf",
+    "allowanceWords",
+    "askAction",
+    "askDrawn",
+    "askOpen",
+    "barDefaultsOf",
+    "fitsAt",
+    "floorRem",
+    "resolveBar",
+    "useAsk",
+    "usedAt",
+    "visibleAt"
+  ],
+  "files": ["index.js", "top-bar.jsx", "top-bar-model.js", "probe-rules.js"],
+  "requires": [],
+  "offer": { "since": "0.8.1", "why": "the one top bar (where you are, the allowance, Find, Ask, the action), in place of the app's own TopBar in components/<app>/frame.jsx" }
+}

package/registry/blocks/top-bar/demo.jsx

@@ -0,0 +1,78 @@
+"use client";
+
+// TopBar in every state — the gallery's and the smoke test's surface. Not
+// installed into apps: `makersclaw add top-bar` lays index.js, top-bar.jsx and
+// top-bar-model.js only.
+//   Widths      the same bar at 320, 480, 640, 800 and 1100 px, so the order
+//               it gives way in can be read: words on Find, Ask and the
+//               action go first, then the earlier crumbs and the note, the
+//               ⌘K key, `extra`, the allowance's bar, the allowance's words.
+//   Ask         an agent is in reach (AskProvider): Ask is drawn at every
+//               width and opens the dock; the dock's open state shows on it.
+//   No agent    no dock, no Ask. The only way to have no Ask.
+//   Long crumb  a long title truncates; nothing runs into Find.
+//   Back        a back button before the crumb.
+//   Find off    find={false}.
+import { useState } from "react";
+import { Button, Card } from "../components/ui";
+import { AskProvider, BarText, TopBar } from "../components/blocks/top-bar";
+
+const WIDTHS = [320, 480, 640, 800, 1100];
+const ALLOWANCE = { used: 4120, cap: 15000 };
+const CRUMB = [{ label: "Issues", href: "/s/issues" }, { label: "Issue 14" }];
+
+function Framed({ width, children }) {
+  return (
+    <div style={{ width }} className="max-w-full overflow-hidden rounded-md border border-border bg-background">
+      {children}
+    </div>
+  );
+}
+
+const newIssue = (
+  <Button variant="primary" size="sm" icon="plus">
+    <BarText>New issue</BarText>
+  </Button>
+);
+
+export default function TopBarDemo() {
+  const [open, setOpen] = useState(false);
+  const dock = { open, toggle: () => setOpen((v) => !v) };
+  return (
+    <div className="grid gap-6">
+      <section className="grid gap-3">
+        <h2 className="text-sm font-semibold">The same bar at five widths (agent in reach: Ask {open ? "open" : "closed"})</h2>
+        <AskProvider dock={dock}>
+          {WIDTHS.map((w) => (
+            <div key={w} className="grid gap-1">
+              <p className="text-xs text-muted-foreground">{w}px</p>
+              <Framed width={w}>
+                <TopBar crumb={CRUMB} note="Draft · saved" extra={<Button variant="quiet" size="sm">Week</Button>} allowance={ALLOWANCE} findLabel="Find an issue" action={newIssue} />
+              </Framed>
+            </div>
+          ))}
+        </AskProvider>
+      </section>
+
+      <Card title="A dock passed straight to the bar" description="No provider: the bar's own dock prop.">
+        <Framed width={640}>
+          <TopBar crumb={[{ label: "Home" }]} dock={dock} />
+        </Framed>
+      </Card>
+
+      <Card title="No agent in this app" description="No dock, no provider: no Ask. Find stays.">
+        <Framed width={640}>
+          <TopBar crumb={[{ label: "Ledger" }]} action={newIssue} />
+        </Framed>
+      </Card>
+
+      <Card title="A long title, a back button, no Find" description="The title truncates before it reaches the buttons.">
+        <AskProvider dock={dock}>
+          <Framed width={480}>
+            <TopBar back="/s/issues" find={false} crumb={[{ label: "Issues", href: "/s/issues" }, { label: "Turn a developer's line into a customer's: the Monday issue that nobody wanted to write" }]} action={newIssue} />
+          </Framed>
+        </AskProvider>
+      </Card>
+    </div>
+  );
+}

package/registry/blocks/top-bar/index.js

@@ -0,0 +1,5 @@
+// The TopBar block — `makersclaw add top-bar`. Fixed: compose it through its
+// props (README.md beside this file). The model's helpers are plain
+// functions; they work on the server too.
+export { AskButton, AskProvider, BarText, FindButton, TopBar, TopBarSlot, useAsk } from "./top-bar";
+export { BAR_DEFAULTS, GAP, PIECES, SHOW, SIZES, allowanceOf, allowanceWords, askAction, askDrawn, askOpen, barDefaultsOf, fitsAt, floorRem, resolveBar, usedAt, visibleAt } from "./top-bar-model";

package/registry/blocks/top-bar/probe-rules.js

@@ -0,0 +1,74 @@
+// The layout rules this block ships for the store's probe (makersclaw-store
+// scripts/probe.mjs --suite). They are data: the probe reads them from this
+// block in the app (components/blocks/top-bar/probe-rules.js) and checks each
+// one on every screen, at every window size, with the agent column shut and
+// open. Nothing in the app imports this file; it costs a few hundred bytes.
+//
+// `pieces` and `target` name the bar's parts by their data-bar-piece hook;
+// the second selector in each is the accessible name an older copy of the bar
+// (before the hooks) already has. Each finding is a UI-review number
+// (docs/UI-REVIEW-2026-10-12.md) turned into a measure.
+export default {
+  block: "top-bar",
+  rules: [
+    {
+      id: "pieces-never-intersect",
+      kind: "disjoint",
+      note: "UI review 1.1, 1.4: the bar's pieces overlapped",
+      scope: "[data-top-bar]",
+      pieces: {
+        "Where you are": '[data-bar-piece="crumb"], nav[aria-label="Where you are"]',
+        "the note": '[data-bar-piece="note"]',
+        "the extra": '[data-bar-piece="extra"]',
+        "the allowance": '[data-bar-piece="allowance"]',
+        Find: '[data-bar-piece="find"], button[aria-label^="Find"]',
+        Ask: '[data-bar-piece="ask"], button[aria-label="Ask the agent"]',
+        "the action": '[data-bar-piece="action"]',
+      },
+    },
+    {
+      id: "ask-reachable",
+      kind: "clickable",
+      note: "UI review X8: no way to open the agent",
+      scope: "[data-top-bar]",
+      target: '[data-bar-piece="ask"], button[aria-label="Ask the agent"]',
+      name: "Ask",
+      minSize: 24,
+    },
+    {
+      id: "find-reachable",
+      kind: "clickable",
+      note: "UI review 1.1: Find pushed out or covered",
+      scope: "[data-top-bar]",
+      target: '[data-bar-piece="find"], button[aria-label^="Find"]',
+      name: "Find",
+      minSize: 24,
+    },
+    {
+      id: "action-reachable",
+      kind: "clickable",
+      note: "the screen's main action stays inside the window",
+      scope: "[data-top-bar]",
+      target: '[data-bar-piece="action"] button, [data-bar-piece="action"] a',
+      name: "the action",
+      minSize: 24,
+    },
+    {
+      id: "crumb-label-not-cut-to-nothing",
+      kind: "visible-text",
+      note: "UI review 1.2, X3: a label cut to nothing",
+      scope: "[data-top-bar]",
+      target: '[data-bar-piece="crumb"] [aria-current="page"], nav[aria-label="Where you are"] [aria-current="page"]',
+      min: 3,
+    },
+    {
+      id: "an-agent-has-a-way-in",
+      kind: "clickable",
+      note: "UI review X8: a dock is mounted and nothing opens it",
+      target: '[data-bar-piece="ask"], button[aria-label="Ask the agent"], [data-ask]',
+      name: "a control that opens the agent",
+      requiredWhen: "[data-agent-dock]",
+      minSize: 24,
+    },
+  ],
+};