@korso/shepherd-ui 0.1.1 → 0.2.1

package/dist/components/Composer.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { useShepherdClient } from "../context.js";
+import { colorForName, extractTarget, initialsFor, mentionableAgents, parseMention, } from "../logic.js";
+/** How many autocomplete suggestions to show — ported from app.js `.slice(0, 8)`. */
+const MAX_SUGGESTIONS = 8;
+/**
+ * The operator's message composer (the "Chat" tab footer). A controlled input
+ * with an @-mention autocomplete and a send button, ported from app.js
+ * `setupComposer` + `renderPop`.
+ *
+ * As the operator types, the token immediately left of the caret is parsed; if
+ * it is an `@mention`, a `role="listbox"` of live agents in the selected repo
+ * opens. ArrowUp/ArrowDown move the highlight, Enter/Tab (or a mousedown on a
+ * row) accept it — inserting `"@Name "` — and Escape closes it. On submit a
+ * blank body is ignored; otherwise the first mention matching a known agent
+ * directs the message (`targetAgentName`) and the selected repo scopes a
+ * broadcast (`null` in All-repos mode). The send button is disabled in-flight;
+ * on success the input clears and `onSent` is awaited, on failure a
+ * "send failed — retry" status shows and the button re-enables. The client comes
+ * from context, keeping the composer auth-agnostic.
+ *
+ * @param props - The agents, repo filter, and post-send callback.
+ * @returns The composer element (autocomplete popup + form).
+ */
+export function Composer({ agents, selectedRepo, workspaceId, onSent }) {
+    const client = useShepherdClient();
+    const inputRef = useRef(null);
+    const [value, setValue] = useState("");
+    const [items, setItems] = useState([]);
+    const [active, setActive] = useState(0);
+    const [range, setRange] = useState(null);
+    const [sending, setSending] = useState(false);
+    const [failed, setFailed] = useState(false);
+    // The names addressable under the current filter — the same crew the board
+    // shows for the selected repo. Recomputed each render; cheap for board sizes.
+    // An agent with no session repo (repo === null) coalesces to "" so it never
+    // equals a real repo (mentionable only in All-repos, via matchesRepo's
+    // short-circuit) — exactly the original app.js behavior.
+    const names = mentionableAgents(agents.map((a) => ({ name: a.name, presence: a.presence, repo: a.repo ?? "" })), selectedRepo);
+    const popOpen = items.length > 0;
+    const closePop = useCallback(() => {
+        setItems([]);
+        setRange(null);
+    }, []);
+    /**
+     * Recompute the autocomplete from the caret position: open it on an active
+     * @mention (filtered by the live crew), else close it. Mirrors `refreshPop`.
+     */
+    const refreshPop = useCallback((nextValue, caret) => {
+        const mention = parseMention(nextValue, caret);
+        if (!mention) {
+            closePop();
+            return;
+        }
+        const q = mention.query.toLowerCase();
+        const next = names
+            .filter((n) => n.toLowerCase().startsWith(q))
+            .slice(0, MAX_SUGGESTIONS);
+        setItems(next);
+        setRange({ start: mention.start, end: mention.end });
+        setActive(0);
+    }, [names, closePop]);
+    /** Replace the @-token with `"@Name "` and place the caret after it. */
+    const accept = useCallback((name) => {
+        if (!range)
+            return;
+        const insert = "@" + name + " ";
+        const next = value.slice(0, range.start) + insert + value.slice(range.end);
+        const caret = range.start + insert.length;
+        setValue(next);
+        closePop();
+        // Restore focus + caret after React commits the new value.
+        requestAnimationFrame(() => {
+            const el = inputRef.current;
+            if (el) {
+                el.focus();
+                el.setSelectionRange(caret, caret);
+            }
+        });
+    }, [range, value, closePop]);
+    const onInput = useCallback((next) => {
+        setValue(next);
+        const caret = inputRef.current?.selectionStart ?? next.length;
+        refreshPop(next, caret);
+    }, [refreshPop]);
+    const onKeyDown = useCallback((e) => {
+        if (!popOpen)
+            return;
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setActive((a) => (a + 1) % items.length);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setActive((a) => (a - 1 + items.length) % items.length);
+        }
+        else if (e.key === "Enter" || e.key === "Tab") {
+            e.preventDefault();
+            accept(items[active]);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closePop();
+        }
+    }, [popOpen, items, active, accept, closePop]);
+    const onSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        const body = value.trim();
+        if (!body)
+            return;
+        // The first @mention matching a live agent directs the message; otherwise
+        // it broadcasts to the selected repo (null repo => fan out to all repos).
+        const targetAgentName = extractTarget(body, names);
+        const repo = selectedRepo === null || selectedRepo === "__all__" ? null : selectedRepo;
+        setSending(true);
+        setFailed(false);
+        try {
+            // A scoped composer posts to the workspace-scoped route; otherwise the
+            // singular self-host alias. Same request body either way.
+            const req = { body, targetAgentName, repo };
+            await (workspaceId !== undefined
+                ? client.announceTo(workspaceId, req)
+                : client.announce(req));
+            setValue("");
+            closePop();
+            await onSent();
+        }
+        catch {
+            // A 401 is handled by the client's onUnauthorized (self-host); the
+            // composer just shows the rejected state and keeps the body for retry.
+            setFailed(true);
+        }
+        finally {
+            setSending(false);
+        }
+    }, [value, names, selectedRepo, workspaceId, client, closePop, onSent]);
+    return (_jsxs("div", { className: "composer", children: [_jsx("div", { id: "mention-pop", className: "mention-pop", role: "listbox", "aria-label": "Agents to mention", hidden: !popOpen, children: items.map((name, i) => (_jsxs("button", { id: `mention-opt-${i}`, type: "button", role: "option", "aria-selected": i === active, className: "mention-mi" + (i === active ? " on" : ""), 
+                    // mousedown fires before the input blurs, so the click still lands.
+                    onMouseDown: (e) => {
+                        e.preventDefault();
+                        accept(name);
+                    }, children: [_jsx("div", { className: "ma", style: { background: colorForName(name) }, children: initialsFor(name) }), _jsx("span", { children: name })] }, name))) }), _jsxs("form", { id: "chat-form", className: "chat-form", onSubmit: (e) => {
+                    void onSubmit(e);
+                }, children: [_jsx("input", { id: "chat-input", className: "chat-input", type: "text", autoComplete: "off", "aria-label": "Message the team", placeholder: "Message the team\u2026 use @name to direct it", role: "combobox", "aria-expanded": popOpen, "aria-controls": "mention-pop", "aria-autocomplete": "list", "aria-activedescendant": popOpen ? `mention-opt-${active}` : undefined, ref: inputRef, value: value, onChange: (e) => onInput(e.target.value), onKeyDown: onKeyDown }), _jsx("button", { id: "chat-send", className: "chat-send", type: "submit", disabled: sending, children: "Send" })] }), failed ? (_jsx("div", { className: "chat__note", role: "status", children: "send failed \u2014 retry" })) : null] }));
+}

package/dist/components/Crew.d.ts

@@ -0,0 +1,23 @@
+import type { ReactElement } from "react";
+import type { WorkspaceAgentT, WorkspaceTaskT } from "@shepherd/shared";
+/** Props for {@link Crew}. */
+export interface CrewProps {
+    /** All known agents; only live ones in the selected repo are shown. */
+    agents: WorkspaceAgentT[];
+    /** Active/history tasks, used to mark which agents are currently working. */
+    tasks: WorkspaceTaskT[];
+    /** The selected repo, or `null`/`"__all__"` for all repos. */
+    selectedRepo: string | null;
+}
+/**
+ * The crew rail: live agents in the current repo view. Ported from app.js
+ * `renderCrew`. An agent is "active" when they own an active task in view;
+ * active agents sort first, then alphabetical, and idle (non-active) agents are
+ * greyed via `.person--idle`. Each avatar shows {@link initialsFor} on a
+ * {@link colorForName} background.
+ *
+ * @param props - The agents, the tasks that determine activity, and the repo
+ *   filter.
+ * @returns The crew rail element.
+ */
+export declare function Crew({ agents, tasks, selectedRepo }: CrewProps): ReactElement;

package/dist/components/Crew.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colorForName, initialsFor, matchesRepo } from "../logic.js";
+/**
+ * The crew rail: live agents in the current repo view. Ported from app.js
+ * `renderCrew`. An agent is "active" when they own an active task in view;
+ * active agents sort first, then alphabetical, and idle (non-active) agents are
+ * greyed via `.person--idle`. Each avatar shows {@link initialsFor} on a
+ * {@link colorForName} background.
+ *
+ * @param props - The agents, the tasks that determine activity, and the repo
+ *   filter.
+ * @returns The crew rail element.
+ */
+export function Crew({ agents, tasks, selectedRepo }) {
+    const live = agents.filter((a) => a.presence === "live" && matchesRepo({ repo: a.repo ?? "" }, selectedRepo));
+    // An agent is "active" iff they own an active task — mirrors app.js, which
+    // builds an intent-by-agent map from the active tasks.
+    const activeAgents = new Set();
+    for (const t of tasks)
+        if (t.status === "active")
+            activeAgents.add(t.agentName);
+    const isActive = (a) => activeAgents.has(a.name);
+    const ordered = [...live].sort((x, y) => {
+        const ax = isActive(x);
+        const ay = isActive(y);
+        if (ax !== ay)
+            return ax ? -1 : 1; // active agents first
+        return x.name.localeCompare(y.name);
+    });
+    return (_jsx("div", { className: "crew", id: "crew", children: ordered.map((a) => (_jsxs("div", { className: "person" + (isActive(a) ? "" : " person--idle"), children: [_jsx("div", { className: "avatar", style: { background: colorForName(a.name) }, children: initialsFor(a.name) }), _jsx("span", { className: "person__name", children: a.name })] }, a.name))) }));
+}

package/dist/components/Dashboard.d.ts

@@ -0,0 +1,48 @@
+import type { ReactElement, ReactNode } from "react";
+/** Props for {@link Dashboard}. The client comes from context. */
+export interface DashboardProps {
+    /**
+     * Workspace to scope the board to. When given, the polling hook hits the
+     * workspace-scoped `landscape(id)` route and the composer posts via
+     * `announceTo(id, …)`; when omitted, both fall back to the self-host singular
+     * aliases, so a no-id render is unchanged.
+     */
+    workspaceId?: string;
+    /**
+     * The hosted-shell management view. When supplied, a third `Config` tab is
+     * shown beside `Tasks`/`Chat` and this node renders in its panel. Omitting it
+     * (the self-host case) keeps the board a plain two-tab Tasks/Chat wallboard.
+     */
+    config?: ReactNode;
+    /**
+     * Whether the account currently belongs to a workspace. Only meaningful in the
+     * hosted shell (paired with {@link config}). When `false`, the Tasks/Chat
+     * panels show an {@link EmptyState} prompt instead of a board, the board does
+     * not poll, and the view lands on Config. Defaults to "yes" (self-host always
+     * has its implicit team workspace).
+     */
+    hasWorkspace?: boolean;
+}
+/**
+ * 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 declare function Dashboard({ workspaceId, config, hasWorkspace, }?: DashboardProps): ReactElement;

package/dist/components/Dashboard.js

@@ -0,0 +1,280 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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";
+import { EmptyState } from "../config/EmptyState.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, config, hasWorkspace, } = {}) {
+    const hasConfig = config != null;
+    // Only the hosted shell with an explicit empty account suppresses the board;
+    // self-host (hasWorkspace undefined) always has its implicit team workspace.
+    const noWorkspace = hasWorkspace === false;
+    const { snapshot, status, lastUpdatedMs, refresh } = useLandscapePolling({
+        workspaceId,
+        // A no-workspace board has nothing to poll; keep it off the hub.
+        enabled: !noWorkspace,
+    });
+    const [activeTab, setActiveTab] = useState(() => {
+        // No workspace yet → land on Config, where create/join lives.
+        if (hasConfig && noWorkspace)
+            return "config";
+        const stored = readStored(TAB_KEY);
+        if (stored === "chat")
+            return "chat";
+        if (stored === "config" && hasConfig)
+            return "config";
+        return "tasks";
+    });
+    // The flat tab strip: Tasks/Chat always, Config only when the host supplies it.
+    const tabs = hasConfig
+        ? [
+            { id: "tasks", label: "Tasks" },
+            { id: "chat", label: "Chat" },
+            { id: "config", label: "Config" },
+        ]
+        : [
+            { id: "tasks", label: "Tasks" },
+            { id: "chat", label: "Chat" },
+        ];
+    // Roving-tabindex refs for the tablist: each tab registers by index so
+    // arrow/Home/End navigation can move DOM focus to the target tab.
+    const tabRefs = useRef([]);
+    // WAI-ARIA "tabs with automatic activation": Arrow keys (wrap-around), Home,
+    // End change the active view AND move focus to the matching tab.
+    const onTabKeyDown = useCallback((e, index) => {
+        const last = tabs.length - 1;
+        let next = null;
+        switch (e.key) {
+            case "ArrowRight":
+                next = index === last ? 0 : index + 1;
+                break;
+            case "ArrowLeft":
+                next = index === 0 ? last : index - 1;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = last;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        const target = tabs[next];
+        if (!target)
+            return;
+        onTab(target.id);
+        tabRefs.current[next]?.focus();
+    }, 
+    // `tabs` is rebuilt each render but its identity only matters by length,
+    // which is stable for a given `hasConfig`; `onTab` is stable.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hasConfig]);
+    // `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;
+    // The poll-driven header chrome (repo filter, vitals, status, freshness) only
+    // makes sense for a live board — hide it on the Config tab and when there is
+    // no workspace to poll. The brand and the tab strip stay in every state.
+    const showBoardChrome = !noWorkspace && activeTab !== "config";
+    return (_jsxs("div", { id: "board", children: [_jsxs("header", { children: [_jsx("h1", { className: "brand", style: { margin: 0, font: "inherit" }, children: "Shepherd" }), showBoardChrome && (_jsxs(_Fragment, { children: [_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" }), showBoardChrome && (_jsxs(_Fragment, { children: [_jsx("span", { id: "status", className: "status" + (statusView.kind ? ` status--${statusView.kind}` : ""), children: statusView.text }), _jsx("span", { id: "freshness", className: "freshness", children: freshness })] })), _jsx("nav", { className: "tabs", role: "tablist", "aria-label": "Shepherd views", children: tabs.map(({ id, label }, index) => (_jsx("button", { ref: (el) => {
+                                tabRefs.current[index] = el;
+                            }, className: "tab" + (activeTab === id ? " tab--active" : ""), "data-tab": id, type: "button", role: "tab", id: `tab-${id}`, "aria-controls": `panel-${id}`, "aria-selected": activeTab === id, tabIndex: activeTab === id ? 0 : -1, onClick: () => onTab(id), onKeyDown: (e) => onTabKeyDown(e, index), children: label }, id))) })] }), _jsx("section", { id: "panel-tasks", role: "tabpanel", "aria-labelledby": "tab-tasks", hidden: activeTab !== "tasks", children: noWorkspace ? (_jsx(EmptyState, { onGetStarted: () => onTab("config") })) : (_jsxs(_Fragment, { 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: noWorkspace ? (_jsx(EmptyState, { onGetStarted: () => onTab("config") })) : (_jsxs("div", { className: "chat-wrap", children: [_jsx(Chat, { announcements: announcements, selectedRepo: effectiveRepo, nowMs: nowMs }), _jsx(Composer, { agents: agents, selectedRepo: effectiveRepo, workspaceId: workspaceId, onSent: refresh })] })) }), hasConfig && (_jsx("section", { id: "panel-config", role: "tabpanel", "aria-labelledby": "tab-config", hidden: activeTab !== "config", children: config }))] }));
+}

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;