@korso/shepherd-ui 0.1.0 → 0.2.0

package/dist/components/Dashboard.js

@@ -0,0 +1,209 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLandscapePolling } from "../useLandscapePolling.js";
+import { defaultRepo, distinctRepos, matchesRepo } from "../logic.js";
+import { RepoSelect } from "./RepoSelect.js";
+import { Crew } from "./Crew.js";
+import { ActiveList } from "./ActiveList.js";
+import { DoneList } from "./DoneList.js";
+import { Chat } from "./Chat.js";
+import { Composer } from "./Composer.js";
+/**
+ * localStorage keys + page size, ported verbatim from the state block of
+ * packages/hub/public/app.js (POLL_MS lives in the hook).
+ */
+const TAB_KEY = "shepherd.tab";
+const REPO_KEY = "shepherd.repo";
+const DONE_PAGE = 10;
+/**
+ * Maps the polling hook's {@link LandscapeStatus} onto the chrome text + modifier
+ * class the original board's `setStatus` produced. Kept as data so the header
+ * stays a thin render of the hook's state.
+ */
+const STATUS_VIEW = {
+    live: { text: "live", kind: "ok" },
+    reconnecting: { text: "reconnecting…", kind: "warn" },
+    // app.js cleared the token and re-prompted on 401; in the auth-agnostic port
+    // the injected client's onUnauthorized owns any token handling, so the board
+    // only surfaces the rejected state.
+    unauthorized: { text: "token rejected", kind: "error" },
+};
+/** localStorage read that never throws (private/quota modes return null). */
+function readStored(key) {
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+/** localStorage write that never throws — persistence is best-effort chrome. */
+function writeStored(key, value) {
+    try {
+        localStorage.setItem(key, value);
+    }
+    catch {
+        // Ignore: a board that can't persist its filter still works this session.
+    }
+}
+/**
+ * Resolves the repo to actually filter by for this render, reproducing the
+ * three side-effecting rules inside app.js's `render()` in order:
+ *
+ *  1. `null` (never chosen) + >=2 repos -> derive the newest-active default.
+ *  2. a persisted specific repo that has VANISHED from the data -> "__all__"
+ *     (so a workspace that narrowed to one repo can't strand the board on an
+ *     absent repo — the selector itself hides under 2 repos).
+ *  3. ONLY on first render, a persisted specific repo with no active work while
+ *     another repo has some -> prefer the newest-active default, so a returning
+ *     viewer never lands on an empty Active column. In-session picks are kept.
+ *
+ * Pure given its inputs; the caller commits the result back to state.
+ *
+ * @param selectedRepo - The current selection (`null` = not yet chosen).
+ * @param snapshot - The landscape to resolve against.
+ * @param firstRender - Whether this is the first render with a snapshot.
+ * @returns The repo to use this render (`"__all__"` or a specific repo, never
+ *   `null` once >=2 repos exist with no prior choice).
+ */
+function resolveSelectedRepo(selectedRepo, snapshot, firstRender) {
+    const repos = distinctRepos(snapshot.tasks);
+    let next = selectedRepo;
+    if (next === null && repos.length >= 2) {
+        next = defaultRepo(snapshot.tasks);
+    }
+    if (next !== null && next !== "__all__" && !repos.includes(next)) {
+        next = "__all__";
+    }
+    if (firstRender && next !== null && next !== "__all__") {
+        const pinnedHasActive = snapshot.tasks.some((t) => t.status === "active" && t.repo === next);
+        const anyActive = snapshot.tasks.some((t) => t.status === "active");
+        if (!pinnedHasActive && anyActive)
+            next = defaultRepo(snapshot.tasks);
+    }
+    return next;
+}
+/**
+ * Per-repo `{active,done}` tallies plus the board-wide `"__all__"` aggregate,
+ * mirroring app.js's `counts` map (each task bumps its own repo AND the
+ * aggregate). The shape RepoSelect's `counts` prop expects.
+ *
+ * @param snapshot - The landscape whose tasks are tallied.
+ * @returns A record keyed by repo, with an `"__all__"` aggregate row.
+ */
+function computeCounts(snapshot) {
+    const counts = {};
+    const bump = (repo, key) => {
+        const c = (counts[repo] ??= { active: 0, done: 0 });
+        c[key]++;
+    };
+    for (const t of snapshot.tasks) {
+        const key = t.status === "active" ? "active" : "done";
+        bump(t.repo, key);
+        bump("__all__", key);
+    }
+    return counts;
+}
+/**
+ * The Shepherd wallboard shell. Composes {@link useLandscapePolling} (which reads
+ * the client from context, keeping this auth-agnostic) with the six leaf
+ * components, owning only the UI state app.js kept in module variables:
+ *
+ *  - `activeTab` — persisted to `"shepherd.tab"` (default `"tasks"`).
+ *  - `selectedRepo` — persisted to `"shepherd.repo"`; `null` derives a default on
+ *    the first render with >=2 repos (see {@link resolveSelectedRepo}).
+ *  - `doneShown` — the history page size, grown a page at a time by "Load older".
+ *
+ * Header chrome mirrors app.js: brand, the repo filter, vitals (online/active
+ * counts under the current filter), the poll status indicator, a freshness
+ * string, and the tab strip. The body shows the Tasks panel (crew + active +
+ * done) or the Chat panel (feed + composer); the composer's post-send hook is the
+ * polling hook's `refresh`, so a sent message shows up immediately.
+ *
+ * Renders the header even before the first snapshot arrives so the board never
+ * blanks — the panels simply render their own empty states off an empty
+ * landscape.
+ *
+ * @returns The dashboard element.
+ */
+export function Dashboard({ workspaceId } = {}) {
+    const { snapshot, status, lastUpdatedMs, refresh } = useLandscapePolling({ workspaceId });
+    const [activeTab, setActiveTab] = useState(() => (readStored(TAB_KEY) === "chat" ? "chat" : "tasks"));
+    // `null` = not yet chosen (derive a default on first render); "__all__" = All
+    // repos; else a specific repo. Seeded from storage exactly like app.js.
+    const [selectedRepo, setSelectedRepo] = useState(() => readStored(REPO_KEY));
+    const [doneShown, setDoneShown] = useState(DONE_PAGE);
+    // First-load guard for resolveSelectedRepo's rule 3 — a persisted repo is only
+    // second-guessed once, then in-session selections are respected (a ref because
+    // flipping it must not itself trigger a render).
+    const firstRenderRef = useRef(true);
+    // No local 1s "freshness" timer: useLandscapePolling already runs its own 1s
+    // tick that re-renders this component, so `freshness` (computed from Date.now()
+    // below) refreshes every second on that re-render. A second interval here would
+    // only duplicate the work.
+    const onTab = useCallback((tab) => {
+        setActiveTab(tab);
+        writeStored(TAB_KEY, tab);
+    }, []);
+    const onSelectRepo = useCallback((repo) => {
+        // app.js stores the "__all__" sentinel for All repos (RepoSelect reports null).
+        const next = repo === null ? "__all__" : repo;
+        setSelectedRepo(next);
+        writeStored(REPO_KEY, next);
+        setDoneShown(DONE_PAGE); // a new filter resets the history page
+    }, []);
+    const onLoadMore = useCallback(() => {
+        setDoneShown((n) => n + DONE_PAGE);
+    }, []);
+    // Resolve the effective repo for this render. When the resolver derives a
+    // value different from state (first-load default / vanished repo), commit it so
+    // the selection is sticky and persisted — done in an effect to avoid a setState
+    // during render. `firstRenderRef` is consumed (flipped) once a snapshot exists.
+    const effectiveRepo = snapshot
+        ? resolveSelectedRepo(selectedRepo, snapshot, firstRenderRef.current)
+        : selectedRepo;
+    useEffect(() => {
+        if (!snapshot)
+            return;
+        firstRenderRef.current = false;
+        if (effectiveRepo !== selectedRepo) {
+            setSelectedRepo(effectiveRepo);
+            // Persist a derived *concrete* default so the next visit is stable (a
+            // documented superset of app.js, which wrote REPO_KEY only on an explicit
+            // pick). Do NOT persist the "__all__" vanished-repo fallback: it is a
+            // transient reaction to a repo briefly dropping out of one poll, and
+            // writing it would permanently clobber the viewer's saved specific filter
+            // even after that repo reappears. Keeping it in-state only restores
+            // app.js's recover-the-saved-repo-on-reload behavior.
+            if (effectiveRepo !== null && effectiveRepo !== "__all__") {
+                writeStored(REPO_KEY, effectiveRepo);
+            }
+        }
+    }, [snapshot, effectiveRepo, selectedRepo]);
+    const nowMs = snapshot ? Date.parse(snapshot.serverTime) : Date.now();
+    const repos = snapshot ? distinctRepos(snapshot.tasks) : [];
+    const counts = snapshot
+        ? computeCounts(snapshot)
+        : {};
+    // Vitals: live agents + active tasks under the current filter (matchesRepo
+    // treats null/"__all__" as all), mirroring app.js's `online`/`active`.
+    const online = snapshot
+        ? snapshot.agents.filter((a) => a.presence === "live" && matchesRepo({ repo: a.repo ?? "" }, effectiveRepo)).length
+        : 0;
+    const active = snapshot
+        ? snapshot.tasks.filter((t) => t.status === "active" && matchesRepo(t, effectiveRepo)).length
+        : 0;
+    const statusView = STATUS_VIEW[status];
+    const freshness = lastUpdatedMs === null
+        ? ""
+        : `updated ${Math.floor((Date.now() - lastUpdatedMs) / 1000)}s ago`;
+    const agents = snapshot?.agents ?? [];
+    const tasks = snapshot?.tasks ?? [];
+    const announcements = snapshot?.announcements ?? [];
+    // Column-head badges, ported from `renderActive`/`renderDone` which set
+    // `#active-count`/`#done-count` to the filtered LIST lengths. activeCount
+    // equals the `active` vital here (same filter), but doneCount is distinct.
+    const activeCount = tasks.filter((t) => t.status === "active" && matchesRepo(t, effectiveRepo)).length;
+    const doneCount = tasks.filter((t) => t.status !== "active" && matchesRepo(t, effectiveRepo)).length;
+    return (_jsxs("div", { id: "board", children: [_jsxs("header", { children: [_jsx("span", { className: "brand", children: "Shepherd" }), _jsx(RepoSelect, { repos: repos, counts: counts, selected: effectiveRepo, onSelect: onSelectRepo }), _jsxs("span", { className: "vitals", children: [_jsx("b", { id: "vitals-online", children: online }), " online · ", _jsx("b", { id: "vitals-active", children: active }), " active"] }), _jsx("span", { className: "grow" }), _jsx("span", { id: "status", className: "status" + (statusView.kind ? ` status--${statusView.kind}` : ""), children: statusView.text }), _jsx("span", { id: "freshness", className: "freshness", children: freshness }), _jsxs("nav", { className: "tabs", role: "tablist", "aria-label": "Dashboard views", children: [_jsx("button", { className: "tab" + (activeTab === "tasks" ? " tab--active" : ""), "data-tab": "tasks", type: "button", role: "tab", id: "tab-tasks", "aria-controls": "panel-tasks", "aria-selected": activeTab === "tasks", onClick: () => onTab("tasks"), children: "Tasks" }), _jsx("button", { className: "tab" + (activeTab === "chat" ? " tab--active" : ""), "data-tab": "chat", type: "button", role: "tab", id: "tab-chat", "aria-controls": "panel-chat", "aria-selected": activeTab === "chat", onClick: () => onTab("chat"), children: "Chat" })] })] }), _jsxs("section", { id: "panel-tasks", role: "tabpanel", "aria-labelledby": "tab-tasks", hidden: activeTab !== "tasks", children: [_jsx(Crew, { agents: agents, tasks: tasks, selectedRepo: effectiveRepo }), _jsxs("div", { className: "board", children: [_jsxs("div", { className: "col", children: [_jsxs("div", { className: "colhead", children: [_jsx("h2", { children: "Active" }), _jsx("span", { className: "n", id: "active-count", children: activeCount })] }), _jsx(ActiveList, { tasks: tasks, nowMs: nowMs, selectedRepo: effectiveRepo })] }), _jsx("div", { className: "board__rule" }), _jsxs("div", { className: "col", children: [_jsxs("div", { className: "colhead", children: [_jsx("h2", { children: "Done" }), _jsx("span", { className: "n", id: "done-count", children: doneCount })] }), _jsx(DoneList, { tasks: tasks, nowMs: nowMs, selectedRepo: effectiveRepo, doneShown: doneShown, onLoadMore: onLoadMore })] })] })] }), _jsx("section", { id: "panel-chat", role: "tabpanel", "aria-labelledby": "tab-chat", hidden: activeTab !== "chat", children: _jsxs("div", { className: "chat-wrap", children: [_jsx(Chat, { announcements: announcements, selectedRepo: effectiveRepo, nowMs: nowMs }), _jsx(Composer, { agents: agents, selectedRepo: effectiveRepo, workspaceId: workspaceId, onSent: refresh })] }) })] }));
+}

package/dist/components/DoneList.d.ts

@@ -0,0 +1,29 @@
+import type { ReactElement } from "react";
+import type { WorkspaceTaskT } from "@shepherd/shared";
+/** Props for {@link DoneList}. */
+export interface DoneListProps {
+    /** The board's tasks; only finished ones in the selected repo are shown. */
+    tasks: WorkspaceTaskT[];
+    /** The server-clock "now" in epoch ms, for relative time + day bucketing. */
+    nowMs: number;
+    /** The selected repo, or `null`/`"__all__"` for all repos. */
+    selectedRepo: string | null;
+    /** Cumulative number of finished tasks to display (initial 10). */
+    doneShown: number;
+    /** Called when "Load older" is clicked, to grow `doneShown` by a page. */
+    onLoadMore: () => void;
+}
+/**
+ * The Done column. Ported from app.js `renderDone`. Filters tasks to
+ * non-active + selected-repo, then renders the cumulative `[0, doneShown]`
+ * slice under day-bucket headers ({@link dayBucket} on `endedAt ?? createdAt`).
+ * A dropped task gets a `task__stat--drop` chip and a "went offline … — no done
+ * signal" meta; a done task gets a "done" chip and a "finished … · active Nm"
+ * meta. When more finished tasks exist than are shown, a "Load older · N of M"
+ * button calls {@link DoneListProps.onLoadMore}.
+ *
+ * @param props - The tasks, the server "now", the repo filter, the cumulative
+ *   shown count, and the load-more callback.
+ * @returns The done list element.
+ */
+export declare function DoneList({ tasks, nowMs, selectedRepo, doneShown, onLoadMore, }: DoneListProps): ReactElement;

package/dist/components/DoneList.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { dayBucket, formatActiveDuration, formatRelative, matchesRepo, statusLabel, } from "../logic.js";
+import { Territory } from "./Territory.js";
+/** Stable identity for a task across renders (the payload has no task id). */
+const taskKey = (t) => `${t.agentName}|${t.repo}|${t.createdAt}`;
+/** Whether the board is showing all repos (so cards carry a repo tag). */
+const isAllRepos = (selected) => selected === null || selected === "__all__";
+/**
+ * The Done column. Ported from app.js `renderDone`. Filters tasks to
+ * non-active + selected-repo, then renders the cumulative `[0, doneShown]`
+ * slice under day-bucket headers ({@link dayBucket} on `endedAt ?? createdAt`).
+ * A dropped task gets a `task__stat--drop` chip and a "went offline … — no done
+ * signal" meta; a done task gets a "done" chip and a "finished … · active Nm"
+ * meta. When more finished tasks exist than are shown, a "Load older · N of M"
+ * button calls {@link DoneListProps.onLoadMore}.
+ *
+ * @param props - The tasks, the server "now", the repo filter, the cumulative
+ *   shown count, and the load-more callback.
+ * @returns The done list element.
+ */
+export function DoneList({ tasks, nowMs, selectedRepo, doneShown, onLoadMore, }) {
+    const allRepos = isAllRepos(selectedRepo);
+    const done = tasks.filter((t) => t.status !== "active" && matchesRepo(t, selectedRepo));
+    if (done.length === 0) {
+        const msg = allRepos
+            ? "No finished tasks yet."
+            : `No finished tasks in ${selectedRepo} yet.`;
+        return (_jsx("div", { id: "done-list", children: _jsx("div", { className: "empty", children: msg }) }));
+    }
+    const page = done.slice(0, doneShown);
+    let lastDay = null;
+    return (_jsxs("div", { id: "done-list", children: [page.map((t) => {
+                const day = dayBucket(t.endedAt ?? t.createdAt, nowMs);
+                const header = day !== lastDay ? day : null;
+                lastDay = day;
+                const dropped = t.status === "dropped";
+                const meta = dropped
+                    ? `went offline ${formatRelative(t.endedAt ?? t.createdAt, nowMs)} — no done signal`
+                    : `finished ${formatRelative(t.endedAt ?? t.createdAt, nowMs)}${formatActiveDuration(t.createdAt, t.endedAt)
+                        ? " · " + formatActiveDuration(t.createdAt, t.endedAt)
+                        : ""}`;
+                return (_jsxs(Fragment, { children: [header !== null && _jsx("div", { className: "day", children: header }), _jsxs("div", { className: "task", children: [_jsxs("div", { className: "task__r1", children: [_jsx("span", { className: "task__who", children: t.agentName }), allRepos && _jsx("span", { className: "task__repo", children: t.repo }), _jsx("span", { className: "task__stat" + (dropped ? " task__stat--drop" : ""), children: statusLabel(t.status) })] }), _jsx("div", { className: "task__intent", children: t.intent }), _jsx(Territory, { globs: t.pathGlobs }), _jsx("div", { className: "task__meta", children: meta })] })] }, taskKey(t)));
+            }), done.length > doneShown && (_jsx("div", { className: "more", role: "button", tabIndex: 0, onClick: onLoadMore, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onLoadMore();
+                    }
+                }, children: `Load older · ${doneShown} of ${done.length}` }))] }));
+}

package/dist/components/RepoSelect.d.ts

@@ -0,0 +1,38 @@
+import type { ReactElement } from "react";
+/**
+ * Per-repo task tallies surfaced in the menu rows. The `"__all__"` key carries
+ * the board-wide aggregate shown on the "All repos" option.
+ */
+export interface RepoCounts {
+    /** Active task count for the repo (or aggregate under `"__all__"`). */
+    active: number;
+    /** Finished task count for the repo (or aggregate under `"__all__"`). */
+    done: number;
+}
+/** Props for {@link RepoSelect}. */
+export interface RepoSelectProps {
+    /** The distinct repos present on the board (sorted by the caller). */
+    repos: string[];
+    /** Per-repo `{active,done}` tallies, plus an `"__all__"` aggregate row. */
+    counts: Record<string, RepoCounts>;
+    /** The selected repo, or `null` for All repos. */
+    selected: string | null;
+    /** Called with the chosen repo, or `null` when "All repos" is picked. */
+    onSelect: (repo: string | null) => void;
+}
+/**
+ * The repo filter: a click-to-open menu of repos plus an "All repos" option,
+ * each showing its `"N active · N done"` tally. Ported from app.js
+ * `renderRepoSelect` — same markup, classes, and listbox/option roles so it
+ * stays keyboard- and screen-reader-operable.
+ *
+ * Hidden entirely when fewer than two repos exist (nothing to filter). Owns its
+ * own open/close state; the trigger toggles it and Escape closes it. Choosing a
+ * repo calls `onSelect(repo)`; choosing "All repos" calls `onSelect(null)` —
+ * matching app.js, which then stores the sentinel `"__all__"` for All repos.
+ *
+ * @param props - Repos, per-repo counts, the current selection, and the
+ *   selection callback.
+ * @returns The repo selector, or `null` when there are fewer than two repos.
+ */
+export declare function RepoSelect({ repos, counts, selected, onSelect, }: RepoSelectProps): ReactElement | null;

package/dist/components/RepoSelect.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+const EMPTY = { active: 0, done: 0 };
+/**
+ * The repo filter: a click-to-open menu of repos plus an "All repos" option,
+ * each showing its `"N active · N done"` tally. Ported from app.js
+ * `renderRepoSelect` — same markup, classes, and listbox/option roles so it
+ * stays keyboard- and screen-reader-operable.
+ *
+ * Hidden entirely when fewer than two repos exist (nothing to filter). Owns its
+ * own open/close state; the trigger toggles it and Escape closes it. Choosing a
+ * repo calls `onSelect(repo)`; choosing "All repos" calls `onSelect(null)` —
+ * matching app.js, which then stores the sentinel `"__all__"` for All repos.
+ *
+ * @param props - Repos, per-repo counts, the current selection, and the
+ *   selection callback.
+ * @returns The repo selector, or `null` when there are fewer than two repos.
+ */
+export function RepoSelect({ repos, counts, selected, onSelect, }) {
+    const [open, setOpen] = useState(false);
+    const hostRef = useRef(null);
+    // Move focus into the freshly-opened menu (the selected option, else the
+    // first) so keyboard users can Tab the options and Esc out — only on open.
+    useEffect(() => {
+        if (!open)
+            return;
+        const menu = hostRef.current?.querySelector(".repo-menu");
+        if (!menu)
+            return;
+        const target = menu.querySelector('[aria-selected="true"]') ??
+            menu.querySelector("button");
+        target?.focus();
+    }, [open]);
+    if (repos.length < 2)
+        return null;
+    const isAll = selected === null || selected === "__all__";
+    const label = isAll ? "All repos" : selected;
+    /** A single menu option; `repo === null` is the "All repos" row. */
+    const renderItem = (repo, text) => {
+        const c = repo === null ? counts.__all__ ?? EMPTY : counts[repo] ?? EMPTY;
+        const isOn = repo === null ? isAll : selected === repo;
+        const cls = "repo-mi" + (isOn ? " on" : "") + (repo === null ? " all" : "");
+        return (_jsxs("button", { type: "button", className: cls, role: "option", "aria-selected": isOn, onClick: (e) => {
+                e.stopPropagation();
+                setOpen(false);
+                onSelect(repo);
+            }, children: [_jsx("span", { children: text }), _jsx("span", { className: "ct", children: `${c.active} active · ${c.done} done` })] }, repo ?? "__all__"));
+    };
+    return (_jsxs("span", { ref: hostRef, className: "repo", onKeyDown: (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        }, children: [_jsxs("button", { type: "button", className: "repo-trig", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": `Filter by repo (current: ${label})`, onClick: (e) => {
+                    e.stopPropagation();
+                    setOpen((o) => !o);
+                }, children: [_jsx("span", { className: "slash", children: "/" }), " " + label + " ", _jsx("span", { children: "\u25BC" })] }), open && (_jsxs("div", { className: "repo-menu", role: "listbox", children: [repos.map((r) => renderItem(r, r)), renderItem(null, "All repos")] }))] }));
+}

package/dist/components/Territory.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react";
+/** Props for {@link Territory}. */
+export interface TerritoryProps {
+    /** The claim's path globs. */
+    globs: string[];
+}
+/**
+ * A claim's territory pills. Ported from app.js `taskTerritory`. A single path
+ * (or none) renders inline under a "territory" label; two or more collapse into
+ * a native `<details>` whose summary reads `"N paths"` and expands to the full
+ * glob list.
+ *
+ * Unlike app.js the open/closed state is left to the browser's native
+ * `<details>` rather than persisted across polls: React reconciles the same
+ * element across re-renders (no `replaceChildren` rebuild), so the fold state
+ * survives without manual bookkeeping.
+ *
+ * @param props - The globs to display.
+ * @returns The territory element (inline or a collapsible `<details>`).
+ */
+export declare function Territory({ globs }: TerritoryProps): ReactElement;

package/dist/components/Territory.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A claim's territory pills. Ported from app.js `taskTerritory`. A single path
+ * (or none) renders inline under a "territory" label; two or more collapse into
+ * a native `<details>` whose summary reads `"N paths"` and expands to the full
+ * glob list.
+ *
+ * Unlike app.js the open/closed state is left to the browser's native
+ * `<details>` rather than persisted across polls: React reconciles the same
+ * element across re-renders (no `replaceChildren` rebuild), so the fold state
+ * survives without manual bookkeeping.
+ *
+ * @param props - The globs to display.
+ * @returns The territory element (inline or a collapsible `<details>`).
+ */
+export function Territory({ globs }) {
+    if (globs.length <= 1) {
+        return (_jsxs("div", { className: "terr", children: [_jsx("span", { className: "terr__lbl", children: "territory" }), globs.map((g) => (_jsx("span", { className: "glob", children: g }, g)))] }));
+    }
+    return (_jsxs("details", { className: "terrx", children: [_jsxs("summary", { children: [_jsx("span", { className: "terr__lbl", children: "territory" }), _jsxs("span", { className: "glob glob--more", children: [_jsx("span", { className: "tw", children: "\u25B6" }), ` ${globs.length} paths`] })] }), _jsx("div", { className: "terr terr--full", children: globs.map((g) => (_jsx("span", { className: "glob", children: g }, g))) })] }));
+}

package/dist/config/ConnectAgent.d.ts

@@ -0,0 +1,10 @@
+export interface ConnectAgentProps {
+    workspaceId: string;
+    /**
+     * The DIRECT Hub URL the agent connects to (public Cloud Run URL when hosted).
+     * Defaults to the dashboard client's baseUrl, which is correct for self-host
+     * where the agent and the dashboard share the Hub origin.
+     */
+    hubUrl?: string;
+}
+export declare function ConnectAgent({ workspaceId, hubUrl }: ConnectAgentProps): import("react").JSX.Element;

package/dist/config/ConnectAgent.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { useShepherdClient } from "../context.js";
+import { describeError } from "../client.js";
+const TOOLS = [
+    { id: "claude", label: "Claude Code" },
+    { id: "codex", label: "Codex" },
+    { id: "pi", label: "Pi" },
+    { id: "generic", label: "Generic (JSON)" },
+];
+// The token placeholder shown before a real token is minted. Switching tools or
+// reading the command pre-mint shows this, never a real secret.
+const TOKEN_PLACEHOLDER = "shp_<paste-after-generating>";
+// The CLI tools differ only in the first line of the `mcp add` invocation; the
+// rest of the command (the env flags and the npx tail) is shared.
+const CLI_PREFIX = {
+    claude: "claude mcp add shepherd -s user \\",
+    codex: "codex mcp add shepherd \\",
+    pi: "pi mcp add shepherd \\",
+};
+function installCommand(tool, hubUrl, token) {
+    if (tool === "generic") {
+        return JSON.stringify({
+            mcpServers: {
+                shepherd: {
+                    command: "npx",
+                    args: ["-y", "@korso/shepherd"],
+                    env: { HUB_URL: hubUrl, SHEPHERD_TOKEN: token },
+                },
+            },
+        }, null, 2);
+    }
+    return [
+        CLI_PREFIX[tool],
+        `  -e HUB_URL=${hubUrl} \\`,
+        `  -e SHEPHERD_TOKEN=${token} \\`,
+        "  -- npx -y @korso/shepherd",
+    ].join("\n");
+}
+export function ConnectAgent({ workspaceId, hubUrl }) {
+    const client = useShepherdClient();
+    const directHubUrl = hubUrl ?? client.baseUrl;
+    const headingId = useId();
+    const [tool, setTool] = useState("claude");
+    const [name, setName] = useState("");
+    // The raw token from the most recent mint — shown once, then only as command.
+    const [rawToken, setRawToken] = useState(null);
+    const [tokens, setTokens] = useState([]);
+    const [error, setError] = useState(null);
+    const [status, setStatus] = useState(null);
+    const [busy, setBusy] = useState(false);
+    // True until the first loadTokens() resolves, so the management list shows a
+    // loading placeholder rather than the "No tokens yet." empty state.
+    const [loading, setLoading] = useState(true);
+    // Per-row in-flight revoke guard (by token id) to block double-submit.
+    const [revokingId, setRevokingId] = useState(null);
+    async function loadTokens() {
+        try {
+            const res = await client.listTokens(workspaceId);
+            setTokens(res.tokens);
+        }
+        catch (err) {
+            setError(describeError(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    useEffect(() => {
+        setLoading(true);
+        void loadTokens();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [client, workspaceId]);
+    // The component is re-rendered (not remounted) across a workspace switch, so
+    // clear the once-shown raw token so it never leaks into another workspace's
+    // install command (mirrors Workspaces' setInvite(null) reset).
+    useEffect(() => {
+        setRawToken(null);
+    }, [workspaceId]);
+    async function generate() {
+        setBusy(true);
+        setError(null);
+        try {
+            const res = await client.mintToken(workspaceId, name.trim() ? { name: name.trim() } : {});
+            setRawToken(res.token);
+            setName("");
+            await loadTokens();
+        }
+        catch (err) {
+            setError(describeError(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function revoke(tokenId) {
+        if (revokingId)
+            return;
+        setRevokingId(tokenId);
+        setError(null);
+        setStatus(null);
+        try {
+            await client.revokeToken(workspaceId, tokenId);
+            setTokens((prev) => prev.filter((t) => t.id !== tokenId));
+            setStatus("Token revoked");
+        }
+        catch (err) {
+            setError(describeError(err));
+        }
+        finally {
+            setRevokingId(null);
+        }
+    }
+    const command = installCommand(tool, directHubUrl, rawToken ?? TOKEN_PLACEHOLDER);
+    return (_jsxs("section", { className: "shepherd-connect-agent", "aria-labelledby": headingId, children: [_jsx("h3", { id: headingId, children: "Connect your agent" }), _jsx("label", { htmlFor: "connect-tool", children: "Tool" }), _jsx("select", { id: "connect-tool", value: tool, onChange: (e) => setTool(e.target.value), children: TOOLS.map((t) => (_jsx("option", { value: t.id, children: t.label }, t.id))) }), _jsxs("div", { className: "generate", children: [_jsx("label", { htmlFor: "token-name", children: "Token name (optional)" }), _jsx("input", { id: "token-name", type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "e.g. laptop" }), _jsx("button", { type: "button", onClick: () => void generate(), disabled: busy, children: "Generate token" })] }), error && _jsx("p", { role: "alert", children: error }), status && _jsx("p", { role: "status", children: status }), rawToken && (_jsx("p", { className: "token-once", role: "status", children: "Copy this token now \u2014 it won't be shown again." })), _jsx("pre", { "data-testid": "install-command", children: command }), _jsx("h4", { children: "Existing tokens" }), loading ? (_jsx("p", { role: "status", children: "Loading\u2026" })) : tokens.length === 0 ? (_jsx("p", { children: "No tokens yet." })) : (_jsx("ul", { children: tokens.map((t) => {
+                    const name = t.name ?? t.id;
+                    return (_jsxs("li", { children: [_jsx("span", { children: name }), t.revokedAt ? (_jsx("span", { className: "revoked", children: "revoked" })) : (_jsx("button", { type: "button", "aria-label": `Revoke token ${name}`, onClick: () => void revoke(t.id), disabled: revokingId === t.id, children: "Revoke" }))] }, t.id));
+                }) }))] }));
+}

package/dist/config/ConnectAgent.test.d.ts

@@ -0,0 +1 @@
+export {};