@korso/shepherd-ui 0.2.2 → 0.3.0

package/dist/ShepherdRoot.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { Dashboard } from "./components/Dashboard.js";
 import { Workspaces } from "./config/Workspaces.js";
+import { Members } from "./config/Members.js";
 import { ConnectAgent } from "./config/ConnectAgent.js";
 import { useShepherdClient } from "./context.js";
 import { describeError } from "./client.js";
@@ -9,6 +10,9 @@ export function ShepherdRoot({ hubUrl }) {
     const client = useShepherdClient();
     const [load, setLoad] = useState({ status: "loading" });
     const [selectedId, setSelectedId] = useState(null);
+    // Bumped whenever a mutation may have changed the selected workspace's
+    // roster (an invite created, a code redeemed), so <Members> refetches.
+    const [membersRefreshKey, setMembersRefreshKey] = useState(0);
     // Loads the workspace list and keeps the selection valid: a still-present
     // selection is preserved (so a create/join refresh never yanks the user off
     // their current workspace), otherwise it falls back to the first workspace.
@@ -37,10 +41,12 @@ export function ShepherdRoot({ hubUrl }) {
     }
     const hasWorkspace = workspaces.length > 0;
     // The Config tab's content. Rendered by <Dashboard> in its `config` panel.
-    // ConnectAgent only appears once a workspace is selected (nothing to connect
-    // an agent to otherwise).
+    // Members is a peer section (visible to every member, not just admins) so
+    // its refresh key lives here, bumped by Workspaces after a roster-affecting
+    // mutation (invite created, code redeemed). ConnectAgent only appears once a
+    // workspace is selected (nothing to connect an agent to otherwise).
     const configSection = (_jsxs("section", { className: "shepherd-config", "aria-labelledby": "config-heading", children: [_jsx("h2", { id: "config-heading", children: "Configuration" }), _jsx(Workspaces, { workspaces: workspaces, selected: selected, onChanged: () => {
                     void fetchWorkspaces();
-                }, onSelect: setSelectedId }), selected && _jsx(ConnectAgent, { workspaceId: selected.id, hubUrl: hubUrl })] }));
+                }, onSelect: setSelectedId, onMembersChanged: () => setMembersRefreshKey((k) => k + 1) }), selected && (_jsx(Members, { workspaceId: selected.id, refreshKey: membersRefreshKey, canRemove: selected.role === "admin", onLeft: () => void fetchWorkspaces() })), selected && _jsx(ConnectAgent, { workspaceId: selected.id, hubUrl: hubUrl })] }));
     return (_jsx("div", { className: "shepherd-root", children: _jsx(Dashboard, { workspaceId: selected?.id, config: configSection, hasWorkspace: hasWorkspace }) }));
 }

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import type { ListWorkspacesResponseT, CreateWorkspaceRequestT, CreateWorkspaceResponseT, MintTokenRequestT, MintTokenResponseT, ListTokensResponseT, CreateInviteRequestT, InviteResponseT, RedeemInviteResponseT, ListMembersResponseT, WorkspaceLandscapeResponseT, WorkspaceAnnounceRequestT, WorkspaceAnnounceResponseT } from "@shepherd/shared";
+import type { ListWorkspacesResponseT, CreateWorkspaceRequestT, CreateWorkspaceResponseT, MintTokenRequestT, MintTokenResponseT, ListTokensResponseT, CreateInviteRequestT, InviteResponseT, InviteByEmailResponseT, RedeemInviteResponseT, ListMembersResponseT, WorkspaceLandscapeResponseT, WorkspaceAnnounceRequestT, WorkspaceAnnounceResponseT, FeedbackRequestT, FeedbackResponseT } from "@shepherd/shared";
 /**
  * The single error type surfaced by the client. A missing `status` means a
  * transport failure (network error or request timeout); a present `status` is
@@ -51,6 +51,8 @@ export interface ShepherdClient {
     revokeToken(workspaceId: string, tokenId: string): Promise<void>;
     /** POST a new invite code for the workspace (admin only). */
     createInvite(workspaceId: string, body: CreateInviteRequestT): Promise<InviteResponseT>;
+    /** POST a one-time-use invite emailed directly to an address (admin only). */
+    inviteByEmail(workspaceId: string, email: string): Promise<InviteByEmailResponseT>;
     /** POST to revoke an invite code (admin only). */
     revokeInvite(workspaceId: string, code: string): Promise<void>;
     /** POST to redeem an invite code, joining its workspace as a member. */
@@ -65,6 +67,13 @@ export interface ShepherdClient {
     landscape(workspaceId: string): Promise<WorkspaceLandscapeResponseT>;
     /** POST an operator announcement to a specific workspace. */
     announceTo(workspaceId: string, body: WorkspaceAnnounceRequestT): Promise<WorkspaceAnnounceResponseT>;
+    /**
+     * POST a bug/suggestion/other note from the feedback widget. Hits
+     * `/workspaces/:id/feedback` when `workspaceId` is given (the normal hosted
+     * case — a validated workspace to attach), or the flat `/feedback` otherwise
+     * (self-host, or a hosted caller with no workspace selected yet).
+     */
+    submitFeedback(body: FeedbackRequestT, workspaceId?: string): Promise<FeedbackResponseT>;
     /** GET the unfiltered whole-workspace view (agents, tasks, announcements). */
     getLandscape(): Promise<WorkspaceLandscapeResponseT>;
     /** POST an operator announcement (broadcast or @targeted) to the workspace. */

package/dist/client.js

@@ -1,4 +1,4 @@
-import { ListWorkspacesResponse, CreateWorkspaceResponse, MintTokenResponse, ListTokensResponse, InviteResponse, RedeemInviteResponse, ListMembersResponse, WorkspaceLandscapeResponse, WorkspaceAnnounceResponse, } from "@shepherd/shared";
+import { ListWorkspacesResponse, CreateWorkspaceResponse, MintTokenResponse, ListTokensResponse, InviteResponse, InviteByEmailResponse, RedeemInviteResponse, ListMembersResponse, WorkspaceLandscapeResponse, WorkspaceAnnounceResponse, FeedbackResponse, } from "@shepherd/shared";
 /** Per-request abort fires after this many ms when no timeoutMs is configured. */
 const DEFAULT_TIMEOUT_MS = 5000;
 /**
@@ -183,6 +183,12 @@ export function createShepherdClient(config) {
                 schema: InviteResponse,
             });
         },
+        inviteByEmail(workspaceId, email) {
+            return request("POST", `/workspaces/${enc(workspaceId)}/invites/email`, {
+                body: { email },
+                schema: InviteByEmailResponse,
+            });
+        },
         revokeInvite(workspaceId, code) {
             return request("POST", `/workspaces/${enc(workspaceId)}/invites/${enc(code)}/revoke`);
         },
@@ -218,6 +224,12 @@ export function createShepherdClient(config) {
                 schema: WorkspaceAnnounceResponse,
             });
         },
+        submitFeedback(body, workspaceId) {
+            const path = workspaceId !== undefined
+                ? `/workspaces/${enc(workspaceId)}/feedback`
+                : "/feedback";
+            return request("POST", path, { body, schema: FeedbackResponse });
+        },
         // --- self-host singular aliases (implicit single workspace) -------------
         getLandscape() {
             // See landscape() above: this schema's inferred type doesn't structurally

package/dist/components/Dashboard.js

@@ -9,6 +9,7 @@ import { DoneList } from "./DoneList.js";
 import { Chat } from "./Chat.js";
 import { Composer } from "./Composer.js";
 import { EmptyState } from "../config/EmptyState.js";
+import { FeedbackWidget } from "./FeedbackWidget.js";
 /**
  * localStorage keys + page size, ported verbatim from the state block of
  * packages/hub/public/app.js (POLL_MS lives in the hook).
@@ -276,5 +277,5 @@ export function Dashboard({ workspaceId, config, hasWorkspace, } = {}) {
     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 }))] }));
+                            }, 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 })), _jsx(FeedbackWidget, { workspaceId: workspaceId })] }));
 }

package/dist/components/FeedbackWidget.d.ts

@@ -0,0 +1,5 @@
+export interface FeedbackWidgetProps {
+    /** The currently selected workspace, if any — forwarded so the hub can attach it. */
+    workspaceId?: string;
+}
+export declare function FeedbackWidget({ workspaceId }: FeedbackWidgetProps): import("react").JSX.Element;

package/dist/components/FeedbackWidget.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { useShepherdClient } from "../context.js";
+import { describeError } from "../client.js";
+const TYPES = [
+    { id: "bug", label: "Bug" },
+    { id: "suggestion", label: "Suggestion" },
+    { id: "other", label: "Other" },
+];
+/** How long the "Thanks!" confirmation shows before the popover auto-closes. */
+const CONFIRMATION_MS = 1500;
+export function FeedbackWidget({ workspaceId }) {
+    const client = useShepherdClient();
+    const headingId = useId();
+    const [open, setOpen] = useState(false);
+    const [type, setType] = useState("bug");
+    const [body, setBody] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [sent, setSent] = useState(false);
+    function toggle() {
+        setOpen((o) => !o);
+    }
+    function reset() {
+        setType("bug");
+        setBody("");
+        setError(null);
+        setSent(false);
+    }
+    async function submit() {
+        setBusy(true);
+        setError(null);
+        try {
+            await client.submitFeedback({ type, body: body.trim() }, workspaceId);
+            setSent(true);
+            setBody("");
+            setTimeout(() => {
+                setOpen(false);
+                reset();
+            }, CONFIRMATION_MS);
+        }
+        catch (err) {
+            setError(describeError(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("div", { className: "shepherd-feedback", children: [_jsx("button", { type: "button", className: "shepherd-feedback__trigger", onClick: toggle, "aria-expanded": open, children: "Feedback" }), open && (_jsxs("section", { className: "shepherd-feedback__panel", "aria-labelledby": headingId, children: [_jsx("h3", { id: headingId, children: "Give feedback" }), sent ? (_jsx("p", { role: "status", children: "Thanks! Your feedback was sent." })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "shepherd-feedback__types", children: TYPES.map((t) => (_jsx("button", { type: "button", "aria-pressed": type === t.id, onClick: () => setType(t.id), children: t.label }, t.id))) }), _jsx("textarea", { "aria-label": "Feedback", placeholder: "What's on your mind?", value: body, onChange: (e) => setBody(e.target.value) }), error && _jsx("p", { role: "alert", children: error }), _jsx("button", { type: "button", onClick: () => void submit(), disabled: body.trim() === "" || busy, children: "Submit" })] }))] }))] }));
+}

package/dist/config/ConnectAgent.js

@@ -2,6 +2,7 @@ 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";
+import { formatRelative } from "../logic.js";
 const TOOLS = [
     { id: "claude", label: "Claude Code" },
     { id: "codex", label: "Codex" },
@@ -18,6 +19,13 @@ const CLI_PREFIX = {
     codex: "codex mcp add shepherd \\",
     pi: "pi mcp add shepherd \\",
 };
+// "created 3d ago · never used" / "created 3d ago · last used 2h ago" — helps
+// an operator tell which tokens are still active before revoking one.
+function tokenMeta(token, nowMs) {
+    const created = `created ${formatRelative(token.createdAt, nowMs)}`;
+    const used = token.lastUsedAt ? `last used ${formatRelative(token.lastUsedAt, nowMs)}` : "never used";
+    return `${created} · ${used}`;
+}
 function installCommand(tool, hubUrl, token) {
     if (tool === "generic") {
         return JSON.stringify({
@@ -49,6 +57,8 @@ export function ConnectAgent({ workspaceId, hubUrl }) {
     const [error, setError] = useState(null);
     const [status, setStatus] = useState(null);
     const [busy, setBusy] = useState(false);
+    // True for a couple seconds after a successful copy, to flash the button label.
+    const [copied, setCopied] = 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);
@@ -112,8 +122,13 @@ export function ConnectAgent({ workspaceId, hubUrl }) {
         }
     }
     const command = installCommand(tool, directHubUrl, rawToken ?? TOKEN_PLACEHOLDER);
-    return (_jsxs("section", { className: "shepherd-connect-agent", "aria-labelledby": headingId, children: [_jsxs("div", { className: "card-head", children: [_jsx("h3", { id: headingId, children: "Connect your agent" }), _jsx("p", { className: "card-sub", children: "Generate a token, then paste the command into your coding tool." })] }), _jsxs("div", { className: "card-body", children: [_jsxs("div", { className: "field", children: [_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: "field generate", children: [_jsx("label", { htmlFor: "token-name", children: "Token name (optional)" }), _jsxs("div", { className: "field__row", children: [_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) => {
+    async function copyCommand() {
+        await navigator.clipboard.writeText(command);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }
+    return (_jsxs("section", { className: "shepherd-connect-agent", "aria-labelledby": headingId, children: [_jsxs("div", { className: "card-head", children: [_jsx("h3", { id: headingId, children: "Connect your agent" }), _jsx("p", { className: "card-sub", children: "Generate a token, then paste the command into your coding tool." })] }), _jsxs("div", { className: "card-body", children: [_jsxs("div", { className: "field", children: [_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: "field generate", children: [_jsx("label", { htmlFor: "token-name", children: "Token name (optional)" }), _jsxs("div", { className: "field__row", children: [_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." })), _jsxs("div", { className: "install-command", children: [_jsx("pre", { "data-testid": "install-command", children: command }), _jsx("button", { type: "button", className: "install-command__copy", onClick: () => void copyCommand(), children: copied ? "Copied" : "Copy" })] }), _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));
+                            return (_jsxs("li", { children: [_jsx("span", { children: name }), _jsx("span", { className: "token-meta", children: tokenMeta(t, Date.now()) }), 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/Workspaces.d.ts

@@ -8,5 +8,8 @@ export interface WorkspacesProps {
     onChanged: () => void;
     /** Switch the active workspace (optional simple switcher). */
     onSelect?: (workspaceId: string) => void;
+    /** Called after a mutation that may change the selected workspace's roster
+     * (an invite created, a code redeemed), so the sibling <Members> refetches. */
+    onMembersChanged?: () => void;
 }
-export declare function Workspaces({ workspaces, selected, onChanged, onSelect }: WorkspacesProps): import("react").JSX.Element;
+export declare function Workspaces({ workspaces, selected, onChanged, onSelect, onMembersChanged, }: WorkspacesProps): import("react").JSX.Element;

package/dist/config/Workspaces.js

@@ -2,8 +2,7 @@ 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";
-import { Members } from "./Members.js";
-export function Workspaces({ workspaces, selected, onChanged, onSelect }) {
+export function Workspaces({ workspaces, selected, onChanged, onSelect, onMembersChanged, }) {
     const client = useShepherdClient();
     const headingId = useId();
     const [name, setName] = useState("");
@@ -11,9 +10,9 @@ export function Workspaces({ workspaces, selected, onChanged, onSelect }) {
     const [invite, setInvite] = useState(null);
     const [error, setError] = useState(null);
     const [busy, setBusy] = useState(false);
-    // Bumped after a mutation that affects the current workspace's roster, so the
-    // <Members> child refetches (e.g. after an invite is created or a join lands).
-    const [membersRefreshKey, setMembersRefreshKey] = useState(0);
+    const [emailAddress, setEmailAddress] = useState("");
+    const [emailStatus, setEmailStatus] = useState(null);
+    const [emailBusy, setEmailBusy] = useState(false);
     const isAdmin = selected?.role === "admin";
     async function create() {
         if (!name.trim() || busy)
@@ -41,7 +40,7 @@ export function Workspaces({ workspaces, selected, onChanged, onSelect }) {
             await client.redeemInvite(code.trim());
             setCode("");
             onChanged();
-            setMembersRefreshKey((k) => k + 1);
+            onMembersChanged?.();
         }
         catch (err) {
             setError(describeError(err));
@@ -58,7 +57,7 @@ export function Workspaces({ workspaces, selected, onChanged, onSelect }) {
         try {
             const res = await client.createInvite(selected.id, {});
             setInvite(res);
-            setMembersRefreshKey((k) => k + 1);
+            onMembersChanged?.();
         }
         catch (err) {
             setError(describeError(err));
@@ -67,6 +66,24 @@ export function Workspaces({ workspaces, selected, onChanged, onSelect }) {
             setBusy(false);
         }
     }
+    async function sendEmailInvite() {
+        if (!selected || !emailAddress.trim() || emailBusy)
+            return;
+        setEmailBusy(true);
+        setEmailStatus(null);
+        try {
+            const res = await client.inviteByEmail(selected.id, emailAddress.trim());
+            setEmailStatus(`Invite sent to ${res.email}.`);
+            setEmailAddress("");
+            onMembersChanged?.();
+        }
+        catch (err) {
+            setEmailStatus(describeError(err));
+        }
+        finally {
+            setEmailBusy(false);
+        }
+    }
     async function revokeInvite() {
         if (!selected || !invite || busy)
             return;
@@ -83,14 +100,17 @@ export function Workspaces({ workspaces, selected, onChanged, onSelect }) {
             setBusy(false);
         }
     }
-    // Clear any displayed invite when the selected workspace changes.
+    // Clear any displayed invite/email status when the selected workspace changes.
     useEffect(() => {
         setInvite(null);
+        setEmailStatus(null);
     }, [selected?.id]);
     // InviteResponse has no `link`; build the shareable join URL from the code.
     // Encode the code for path-safety (parity with client.ts path encoding).
     const joinLink = invite
         ? `${window.location.origin}/join/${encodeURIComponent(invite.code)}`
         : null;
-    return (_jsxs("section", { className: "shepherd-workspaces", "aria-labelledby": headingId, children: [_jsxs("div", { className: "card-head", children: [_jsx("h3", { id: headingId, children: "Workspace management" }), _jsx("p", { className: "card-sub", children: "Create a workspace to get started, or join an existing one with an invite code." })] }), _jsxs("div", { className: "card-body", children: [error && _jsx("p", { role: "alert", children: error }), workspaces.length > 1 && onSelect && (_jsxs("div", { className: "field switcher", children: [_jsx("label", { htmlFor: "ws-switcher", children: "Active workspace" }), _jsx("select", { id: "ws-switcher", value: selected?.id ?? "", onChange: (e) => onSelect(e.target.value), children: workspaces.map((w) => (_jsx("option", { value: w.id, children: w.name }, w.id))) })] })), _jsxs("div", { className: "field create", children: [_jsx("label", { htmlFor: "ws-name", children: "Workspace name" }), _jsx("p", { className: "helper", children: "Start a fresh workspace \u2014 you'll be its admin." }), _jsxs("div", { className: "field__row", children: [_jsx("input", { id: "ws-name", type: "text", placeholder: "e.g. Acme Engineering", value: name, onChange: (e) => setName(e.target.value) }), _jsx("button", { type: "button", onClick: () => void create(), disabled: busy, children: "Create workspace" })] })] }), _jsxs("div", { className: "field join", children: [_jsx("label", { htmlFor: "invite-code", children: "Invite code" }), _jsx("p", { className: "helper", children: "Paste an invite code someone shared to join their workspace." }), _jsxs("div", { className: "field__row", children: [_jsx("input", { id: "invite-code", type: "text", placeholder: "Invite code", value: code, onChange: (e) => setCode(e.target.value) }), _jsx("button", { type: "button", onClick: () => void join(), disabled: busy, children: "Join" })] })] }), isAdmin && selected && (_jsxs("div", { className: "admin", children: [_jsxs("div", { className: "invites", children: [_jsx("button", { type: "button", onClick: () => void createInvite(), disabled: busy, children: "Create invite" }), invite && (_jsxs("div", { className: "invite-result", children: [_jsx("code", { children: invite.code }), _jsx("a", { href: joinLink ?? undefined, children: joinLink }), _jsxs("span", { className: "invite-uses", children: [invite.useCount, " / ", invite.maxUses, " uses"] }), _jsx("button", { type: "button", onClick: () => void revokeInvite(), disabled: busy, children: "Revoke invite" })] }))] }), _jsx(Members, { workspaceId: selected.id, refreshKey: membersRefreshKey, onLeft: onChanged, canRemove: true })] }))] })] }));
+    return (_jsxs("section", { className: "shepherd-workspaces", "aria-labelledby": headingId, children: [_jsxs("div", { className: "card-head", children: [_jsx("h3", { id: headingId, children: "Workspace management" }), _jsx("p", { className: "card-sub", children: "Create a workspace to get started, or join an existing one with an invite code." })] }), _jsxs("div", { className: "card-body", children: [error && _jsx("p", { role: "alert", children: error }), workspaces.length > 1 && onSelect && (_jsxs("div", { className: "field switcher", children: [_jsx("label", { htmlFor: "ws-switcher", children: "Active workspace" }), _jsx("select", { id: "ws-switcher", value: selected?.id ?? "", onChange: (e) => onSelect(e.target.value), children: workspaces.map((w) => (_jsx("option", { value: w.id, children: w.name }, w.id))) })] })), _jsxs("div", { className: "field create", children: [_jsx("label", { htmlFor: "ws-name", children: "Workspace name" }), _jsx("p", { className: "helper", children: "Start a fresh workspace \u2014 you'll be its admin." }), _jsxs("div", { className: "field__row", children: [_jsx("input", { id: "ws-name", type: "text", placeholder: "e.g. Acme Engineering", value: name, onChange: (e) => setName(e.target.value) }), _jsx("button", { type: "button", onClick: () => void create(), disabled: busy, children: "Create workspace" })] })] }), _jsxs("div", { className: "field join", children: [_jsx("label", { htmlFor: "invite-code", children: "Invite code" }), _jsx("p", { className: "helper", children: "Paste an invite code someone shared to join their workspace." }), _jsxs("div", { className: "field__row", children: [_jsx("input", { id: "invite-code", type: "text", placeholder: "Invite code", value: code, onChange: (e) => setCode(e.target.value) }), _jsx("button", { type: "button", onClick: () => void join(), disabled: busy, children: "Join" })] })] }), isAdmin && selected && (_jsxs("div", { className: "admin", children: [_jsxs("div", { className: "invites", children: [_jsx("button", { type: "button", onClick: () => void createInvite(), disabled: busy, children: "Create invite" }), invite && (_jsxs("div", { className: "invite-result", children: [_jsxs("div", { className: "invite-result__row", children: [_jsx("code", { children: invite.code }), _jsx("span", { className: "invite-uses", children: invite.maxUses === null
+                                                            ? `${invite.useCount} uses`
+                                                            : `${invite.useCount} / ${invite.maxUses} uses` }), _jsx("button", { type: "button", onClick: () => void revokeInvite(), disabled: busy, children: "Revoke invite" })] }), _jsx("a", { href: joinLink ?? undefined, children: joinLink })] }))] }), _jsxs("div", { className: "field email-invite", children: [_jsx("label", { htmlFor: "invite-email", children: "Email invite" }), _jsx("p", { className: "helper", children: "Send a one-time-use join link directly to someone's inbox." }), _jsxs("div", { className: "field__row", children: [_jsx("input", { id: "invite-email", type: "email", placeholder: "name@example.com", value: emailAddress, onChange: (e) => setEmailAddress(e.target.value) }), _jsx("button", { type: "button", onClick: () => void sendEmailInvite(), disabled: emailBusy, children: "Send invite" })] }), emailStatus && _jsx("p", { className: "email-invite__status", children: emailStatus })] })] }))] })] }));
 }