@korso/shepherd-ui 0.3.0 → 0.4.0

package/dist/ShepherdRoot.js

@@ -1,9 +1,8 @@
 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 { WorkspaceSwitcher } from "./config/WorkspaceSwitcher.js";
+import { ConfigPanel } from "./config/ConfigPanel.js";
 import { useShepherdClient } from "./context.js";
 import { describeError } from "./client.js";
 export function ShepherdRoot({ hubUrl }) {
@@ -40,13 +39,15 @@ export function ShepherdRoot({ hubUrl }) {
         return (_jsx("div", { className: "shepherd-root", children: _jsx("p", { role: "alert", children: load.message }) }));
     }
     const hasWorkspace = workspaces.length > 0;
-    // The Config tab's content. Rendered by <Dashboard> in its `config` panel.
-    // 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, 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 }) }));
+    // The app-bar switcher: the active-workspace indicator + the one home for
+    // switch/create/join, shown on every tab. The membersRefreshKey is bumped
+    // after a join (which drops the caller onto a new roster).
+    const switcher = (_jsx(WorkspaceSwitcher, { workspaces: workspaces, selected: selected, onSelect: setSelectedId, onChanged: () => {
+            void fetchWorkspaces();
+        }, onMembersChanged: () => setMembersRefreshKey((k) => k + 1) }));
+    // The Config tab's content. With a workspace selected it's the sidebar
+    // <ConfigPanel>; with none it's a prompt pointing at the switcher, since
+    // create/join now live there (the sidebar has nothing to configure).
+    const configSection = (_jsxs("section", { className: "shepherd-config", "aria-labelledby": "config-heading", children: [_jsx("h2", { id: "config-heading", children: "Configuration" }), selected ? (_jsx(ConfigPanel, { workspace: selected, hubUrl: hubUrl, membersRefreshKey: membersRefreshKey, onMembersChanged: () => setMembersRefreshKey((k) => k + 1), onLeft: () => void fetchWorkspaces() })) : (_jsxs("p", { className: "config-none", children: ["You're not in a workspace yet. Use the ", _jsx("b", { children: "Get started \u25BE" }), " menu at the top to create one or join with an invite code."] }))] }));
+    return (_jsx("div", { className: "shepherd-root", children: _jsx(Dashboard, { workspaceId: selected?.id, config: configSection, switcher: switcher, hasWorkspace: hasWorkspace }) }));
 }

package/dist/components/Dashboard.d.ts

@@ -14,6 +14,12 @@ export interface DashboardProps {
      * (the self-host case) keeps the board a plain two-tab Tasks/Chat wallboard.
      */
     config?: ReactNode;
+    /**
+     * The hosted-shell workspace switcher, rendered in the header beside the brand
+     * on EVERY tab (not just Config) so the active workspace is always visible.
+     * Omitted for self-host, which has a single implicit team workspace.
+     */
+    switcher?: ReactNode;
     /**
      * Whether the account currently belongs to a workspace. Only meaningful in the
      * hosted shell (paired with {@link config}). When `false`, the Tasks/Chat
@@ -45,4 +51,4 @@ export interface DashboardProps {
  *
  * @returns The dashboard element.
  */
-export declare function Dashboard({ workspaceId, config, hasWorkspace, }?: DashboardProps): ReactElement;
+export declare function Dashboard({ workspaceId, config, switcher, hasWorkspace, }?: DashboardProps): ReactElement;

package/dist/components/Dashboard.js

@@ -128,7 +128,7 @@ function computeCounts(snapshot) {
  *
  * @returns The dashboard element.
  */
-export function Dashboard({ workspaceId, config, hasWorkspace, } = {}) {
+export function Dashboard({ workspaceId, config, switcher, 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.
@@ -275,7 +275,7 @@ export function Dashboard({ workspaceId, config, hasWorkspace, } = {}) {
     // 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) => {
+    return (_jsxs("div", { id: "board", children: [_jsxs("header", { children: [_jsx("h1", { className: "brand", style: { margin: 0, font: "inherit" }, children: "Shepherd" }), switcher, 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 })), _jsx(FeedbackWidget, { workspaceId: workspaceId })] }));
 }

package/dist/config/ConfigPanel.d.ts

@@ -0,0 +1,14 @@
+import type { WorkspaceSummaryT } from "@shepherd/shared";
+export interface ConfigPanelProps {
+    /** The active workspace all sections configure. */
+    workspace: WorkspaceSummaryT;
+    /** The DIRECT Hub URL embedded in the agent install command. */
+    hubUrl?: string;
+    /** Bumped by the shell to force the roster to refetch (invite created/redeemed). */
+    membersRefreshKey?: number;
+    /** Called after an invite is created, so the shell can refresh the roster. */
+    onMembersChanged?: () => void;
+    /** Called after a successful leave, so the shell re-lists its workspaces. */
+    onLeft?: () => void;
+}
+export declare function ConfigPanel({ workspace, hubUrl, membersRefreshKey, onMembersChanged, onLeft, }: ConfigPanelProps): import("react").JSX.Element;

package/dist/config/ConfigPanel.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { GeneralSettings } from "./GeneralSettings.js";
+import { Members } from "./Members.js";
+import { Invites } from "./Invites.js";
+import { ConnectAgent } from "./ConnectAgent.js";
+const SECTIONS = [
+    { id: "general", label: "General" },
+    { id: "members", label: "Members" },
+    { id: "agent", label: "Agent" },
+];
+export function ConfigPanel({ workspace, hubUrl, membersRefreshKey, onMembersChanged, onLeft, }) {
+    const [section, setSection] = useState("general");
+    const isAdmin = workspace.role === "admin";
+    return (_jsxs("div", { className: "config-layout", children: [_jsx("nav", { className: "config-nav", "aria-label": "Configuration sections", children: SECTIONS.map(({ id, label }) => (_jsx("button", { type: "button", className: "config-nav__item" + (section === id ? " config-nav__item--on" : ""), "aria-current": section === id ? "page" : undefined, onClick: () => setSection(id), children: label }, id))) }), _jsxs("div", { className: "config-panel", children: [section === "general" && (_jsx(GeneralSettings, { workspace: workspace, onLeft: onLeft })), section === "members" && (_jsxs(_Fragment, { children: [_jsx(Members, { workspaceId: workspace.id, refreshKey: membersRefreshKey, canRemove: isAdmin }), isAdmin && (_jsx(Invites, { workspaceId: workspace.id, onMembersChanged: onMembersChanged }))] })), section === "agent" && _jsx(ConnectAgent, { workspaceId: workspace.id, hubUrl: hubUrl })] })] }));
+}

package/dist/config/ConnectAgent.js

@@ -127,7 +127,7 @@ export function ConnectAgent({ workspaceId, hubUrl }) {
         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) => {
+    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", "aria-label": copied ? "Copied" : "Copy command", title: copied ? "Copied" : "Copy", onClick: () => void copyCommand(), children: copied ? (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) })) : (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] })) })] }), _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 }), _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/GeneralSettings.d.ts

@@ -0,0 +1,8 @@
+import type { WorkspaceSummaryT } from "@shepherd/shared";
+export interface GeneralSettingsProps {
+    /** The active workspace whose identity is shown. */
+    workspace: WorkspaceSummaryT;
+    /** Called after a successful leave, so the shell refreshes its workspace list. */
+    onLeft?: () => void;
+}
+export declare function GeneralSettings({ workspace, onLeft }: GeneralSettingsProps): import("react").JSX.Element;

package/dist/config/GeneralSettings.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { useShepherdClient } from "../context.js";
+import { describeError } from "../client.js";
+export function GeneralSettings({ workspace, onLeft }) {
+    const client = useShepherdClient();
+    const headingId = useId();
+    const [error, setError] = useState(null);
+    const [leaving, setLeaving] = useState(false);
+    async function leave() {
+        if (leaving)
+            return;
+        setLeaving(true);
+        setError(null);
+        try {
+            await client.leave(workspace.id);
+            onLeft?.();
+        }
+        catch (err) {
+            setError(describeError(err));
+        }
+        finally {
+            setLeaving(false);
+        }
+    }
+    return (_jsxs("section", { className: "shepherd-general", "aria-labelledby": headingId, children: [_jsxs("div", { className: "card-head", children: [_jsx("h3", { id: headingId, children: "General" }), _jsx("p", { className: "card-sub", children: "Your active workspace and its settings." })] }), _jsxs("div", { className: "card-body", children: [error && _jsx("p", { role: "alert", children: error }), _jsxs("div", { className: "field", children: [_jsx("label", { children: "Workspace name" }), _jsx("p", { className: "readonly-value", children: workspace.name })] }), _jsxs("div", { className: "field", children: [_jsx("label", { children: "Your role" }), _jsx("p", { className: "readonly-value", children: workspace.role })] }), _jsxs("div", { className: "field leave", children: [_jsx("label", { children: "Leave workspace" }), _jsx("p", { className: "helper", children: "Remove yourself from this workspace. You'll need a new invite to rejoin." }), _jsx("button", { type: "button", className: "danger", onClick: () => void leave(), disabled: leaving, children: "Leave workspace" })] })] })] }));
+}

package/dist/config/Invites.d.ts

@@ -0,0 +1,7 @@
+export interface InvitesProps {
+    /** The workspace invites are minted against. */
+    workspaceId: string;
+    /** Called after an invite is created (may change the pending-invite roster). */
+    onMembersChanged?: () => void;
+}
+export declare function Invites({ workspaceId, onMembersChanged }: InvitesProps): import("react").JSX.Element;

package/dist/config/Invites.js

@@ -0,0 +1,84 @@
+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";
+export function Invites({ workspaceId, onMembersChanged }) {
+    const client = useShepherdClient();
+    const headingId = useId();
+    const [invite, setInvite] = useState(null);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [emailAddress, setEmailAddress] = useState("");
+    const [emailStatus, setEmailStatus] = useState(null);
+    const [emailBusy, setEmailBusy] = useState(false);
+    // Which of the two copyables flashed "Copied" most recently (cleared after 2s).
+    const [copied, setCopied] = useState(null);
+    // Clear any displayed invite/email status when the workspace changes, so a
+    // code minted for one workspace never lingers on another's screen.
+    useEffect(() => {
+        setInvite(null);
+        setEmailStatus(null);
+    }, [workspaceId]);
+    async function createInvite() {
+        if (busy)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            const res = await client.createInvite(workspaceId, {});
+            setInvite(res);
+            onMembersChanged?.();
+        }
+        catch (err) {
+            setError(describeError(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function revokeInvite() {
+        if (!invite || busy)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            await client.revokeInvite(workspaceId, invite.code);
+            setInvite(null);
+        }
+        catch (err) {
+            setError(describeError(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function sendEmailInvite() {
+        if (!emailAddress.trim() || emailBusy)
+            return;
+        setEmailBusy(true);
+        setEmailStatus(null);
+        try {
+            const res = await client.inviteByEmail(workspaceId, emailAddress.trim());
+            setEmailStatus(`Invite sent to ${res.email}.`);
+            setEmailAddress("");
+            onMembersChanged?.();
+        }
+        catch (err) {
+            setEmailStatus(describeError(err));
+        }
+        finally {
+            setEmailBusy(false);
+        }
+    }
+    const joinLink = invite
+        ? `${window.location.origin}/shepherd/join/${encodeURIComponent(invite.code)}`
+        : null;
+    async function copy(what, value) {
+        await navigator.clipboard.writeText(value);
+        setCopied(what);
+        setTimeout(() => setCopied((c) => (c === what ? null : c)), 2000);
+    }
+    return (_jsxs("section", { className: "shepherd-invites", "aria-labelledby": headingId, children: [_jsxs("div", { className: "card-head", children: [_jsx("h3", { id: headingId, children: "Invite people" }), _jsx("p", { className: "card-sub", children: "Share a code, or send a one-time join link by email." })] }), _jsxs("div", { className: "card-body", children: [error && _jsx("p", { role: "alert", children: error }), _jsxs("div", { className: "field invites", children: [_jsx("label", { children: "Invite by code" }), _jsx("p", { className: "helper", children: "Anyone with the code can join this workspace." }), invite && (_jsxs("div", { className: "invite-result", children: [_jsxs("div", { className: "invite-result__head", children: [_jsx("span", { className: "invite-result__eyebrow", children: "Invite code" }), _jsx("span", { className: "invite-uses", children: invite.maxUses === null
+                                                    ? `${invite.useCount} uses`
+                                                    : `${invite.useCount} / ${invite.maxUses} uses` }), _jsx("button", { type: "button", className: "link-btn", "aria-label": "Revoke invite", onClick: () => void revokeInvite(), disabled: busy, children: "Revoke" })] }), _jsxs("div", { className: "invite-result__copyrow", children: [_jsx("code", { children: invite.code }), _jsx("button", { type: "button", className: "copy-btn", onClick: () => void copy("code", invite.code), children: copied === "code" ? "Copied" : "Copy" })] }), joinLink && (_jsxs("div", { className: "invite-result__copyrow invite-result__copyrow--link", children: [_jsx("a", { href: joinLink, children: joinLink }), _jsx("button", { type: "button", className: "copy-btn", onClick: () => void copy("link", joinLink), children: copied === "link" ? "Copied" : "Copy link" })] }))] })), _jsx("button", { type: "button", onClick: () => void createInvite(), disabled: busy, children: "Create invite" })] }), _jsxs("div", { className: "field email-invite", children: [_jsx("label", { htmlFor: "invite-email", children: "Invite by email" }), _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 })] })] })] }));
+}

package/dist/config/Members.d.ts

@@ -4,7 +4,5 @@ export interface MembersProps {
     refreshKey?: number;
     /** When true, render the per-member remove control (the caller gates on admin). */
     canRemove?: boolean;
-    /** Called after a successful self-service leave, so the shell can refresh. */
-    onLeft?: () => void;
 }
-export declare function Members({ workspaceId, refreshKey, canRemove, onLeft }: MembersProps): import("react").JSX.Element;
+export declare function Members({ workspaceId, refreshKey, canRemove }: MembersProps): import("react").JSX.Element;

package/dist/config/Members.js

@@ -2,7 +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";
-export function Members({ workspaceId, refreshKey = 0, canRemove = false, onLeft }) {
+export function Members({ workspaceId, refreshKey = 0, canRemove = false }) {
     const client = useShepherdClient();
     const headingId = useId();
     const [members, setMembers] = useState([]);
@@ -11,10 +11,9 @@ export function Members({ workspaceId, refreshKey = 0, canRemove = false, onLeft
     // True until the first load() resolves, so the initial fetch shows "Loading…"
     // rather than the genuine "No members." empty state.
     const [loading, setLoading] = useState(true);
-    // Per-row in-flight remove guard (by accountId) and a leave busy flag, both
-    // used to disable their buttons and block double-submit.
+    // Per-row in-flight remove guard (by accountId), used to disable the button
+    // and block double-submit.
     const [removingId, setRemovingId] = useState(null);
-    const [leaving, setLeaving] = useState(false);
     // `keepError` lets the remove-failure path re-sync the roster without wiping
     // the message it just surfaced (a fresh fetch normally clears stale errors).
     async function load({ keepError = false } = {}) {
@@ -58,26 +57,8 @@ export function Members({ workspaceId, refreshKey = 0, canRemove = false, onLeft
             setRemovingId(null);
         }
     }
-    async function leave() {
-        if (leaving)
-            return;
-        setLeaving(true);
-        setError(null);
-        setStatus(null);
-        try {
-            await client.leave(workspaceId);
-            setStatus("Left workspace");
-            onLeft?.();
-        }
-        catch (err) {
-            setError(describeError(err));
-        }
-        finally {
-            setLeaving(false);
-        }
-    }
     return (_jsxs("section", { className: "shepherd-members", "aria-labelledby": headingId, children: [_jsx("div", { className: "card-head", children: _jsx("h3", { id: headingId, children: "Members" }) }), _jsxs("div", { className: "card-body", children: [error && _jsx("p", { role: "alert", children: error }), status && _jsx("p", { role: "status", children: status }), loading ? (_jsx("p", { role: "status", children: "Loading\u2026" })) : members.length === 0 ? (_jsx("p", { children: "No members." })) : (_jsx("ul", { children: members.map((m) => {
                             const display = m.displayName ?? m.githubLogin ?? m.accountId;
                             return (_jsxs("li", { children: [_jsx("span", { children: display }), _jsx("span", { className: "role", children: m.role }), canRemove && (_jsx("button", { type: "button", "aria-label": `Remove ${display}`, onClick: () => void remove(m.accountId, display), disabled: removingId === m.accountId, children: "Remove" }))] }, m.accountId));
-                        }) })), _jsx("button", { type: "button", onClick: () => void leave(), disabled: leaving, children: "Leave workspace" })] })] }));
+                        }) }))] })] }));
 }

package/dist/config/WorkspaceSwitcher.d.ts

@@ -0,0 +1,14 @@
+import type { WorkspaceSummaryT } from "@shepherd/shared";
+export interface WorkspaceSwitcherProps {
+    /** All workspaces the account belongs to. */
+    workspaces: WorkspaceSummaryT[];
+    /** The currently-active workspace, or null when the account has none. */
+    selected: WorkspaceSummaryT | null;
+    /** Switch the active workspace. */
+    onSelect: (workspaceId: string) => void;
+    /** Called after a create/join changes membership, so the shell re-lists. */
+    onChanged: () => void;
+    /** Called after a join (which adds the caller to a new roster). */
+    onMembersChanged?: () => void;
+}
+export declare function WorkspaceSwitcher({ workspaces, selected, onSelect, onChanged, onMembersChanged, }: WorkspaceSwitcherProps): import("react").JSX.Element;

package/dist/config/WorkspaceSwitcher.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { useShepherdClient } from "../context.js";
+import { describeError } from "../client.js";
+/** First letter of a workspace name, for the square avatar chip. */
+function initial(name) {
+    return (name.trim()[0] ?? "?").toUpperCase();
+}
+export function WorkspaceSwitcher({ workspaces, selected, onSelect, onChanged, onMembersChanged, }) {
+    const client = useShepherdClient();
+    const menuId = useId();
+    const rootRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [mode, setMode] = useState("menu");
+    const [name, setName] = useState("");
+    const [code, setCode] = useState("");
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    // Reset the popover to its default (menu) state whenever it closes, so it
+    // never re-opens mid-form with a stale input or error.
+    function close() {
+        setOpen(false);
+        setMode("menu");
+        setName("");
+        setCode("");
+        setError(null);
+    }
+    // Dismiss on outside-click and Escape — standard popover behavior.
+    useEffect(() => {
+        if (!open)
+            return;
+        function onDocClick(e) {
+            if (rootRef.current && !rootRef.current.contains(e.target))
+                close();
+        }
+        function onKey(e) {
+            if (e.key === "Escape")
+                close();
+        }
+        document.addEventListener("mousedown", onDocClick);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("mousedown", onDocClick);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [open]);
+    async function create() {
+        if (!name.trim() || busy)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            const ws = await client.createWorkspace({ name: name.trim() });
+            // Switch to the freshly-created workspace, then re-list. ShepherdRoot
+            // preserves a still-present selection across the re-list, so ordering
+            // onSelect before onChanged lands the user on the new workspace.
+            onSelect(ws.id);
+            onChanged();
+            close();
+        }
+        catch (err) {
+            setError(describeError(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function join() {
+        if (!code.trim() || busy)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            const res = await client.redeemInvite(code.trim());
+            onSelect(res.workspace.id);
+            onChanged();
+            onMembersChanged?.();
+            close();
+        }
+        catch (err) {
+            setError(describeError(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    const hasWorkspace = selected !== null;
+    const label = selected ? selected.name : "Get started";
+    return (_jsxs("div", { className: "ws-switcher", ref: rootRef, children: [_jsxs("button", { type: "button", className: "ws-trig" + (hasWorkspace ? "" : " ws-trig--empty"), "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? menuId : undefined, onClick: () => (open ? close() : setOpen(true)), children: [hasWorkspace ? (_jsx("span", { className: "ws-avatar", "aria-hidden": "true", children: initial(label) })) : (_jsx("span", { className: "ws-plus", "aria-hidden": "true", children: "\uFF0B" })), _jsx("span", { className: "ws-name", children: label }), _jsx("span", { className: "ws-caret", "aria-hidden": "true", children: "\u25BE" })] }), open && (_jsxs("div", { className: "ws-menu", id: menuId, role: "menu", children: [mode === "menu" && (_jsxs(_Fragment, { children: [_jsx("p", { className: "ws-menu__head", children: hasWorkspace ? "Switch workspace" : "Your workspaces" }), workspaces.length === 0 ? (_jsx("p", { className: "ws-menu__none", children: "None yet" })) : (_jsx("ul", { className: "ws-menu__list", children: workspaces.map((w) => {
+                                    const active = w.id === selected?.id;
+                                    return (_jsx("li", { children: _jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": active, className: "ws-mi" + (active ? " ws-mi--on" : ""), onClick: () => {
+                                                onSelect(w.id);
+                                                close();
+                                            }, children: [_jsx("span", { className: "ws-avatar ws-avatar--sm", "aria-hidden": "true", children: initial(w.name) }), _jsx("span", { className: "ws-mi__name", children: w.name }), active && _jsx("span", { className: "ws-mi__check", "aria-hidden": "true", children: "\u2713" })] }) }, w.id));
+                                }) })), _jsxs("div", { className: "ws-menu__actions", children: [_jsx("button", { type: "button", role: "menuitem", className: "ws-action", onClick: () => {
+                                            setError(null);
+                                            setMode("create");
+                                        }, children: "\uFF0B Create workspace" }), _jsx("button", { type: "button", role: "menuitem", className: "ws-action", onClick: () => {
+                                            setError(null);
+                                            setMode("join");
+                                        }, children: "\u2398 Join with a code" })] })] })), mode === "create" && (_jsxs("form", { className: "ws-form", onSubmit: (e) => {
+                            e.preventDefault();
+                            void create();
+                        }, children: [_jsx("label", { htmlFor: `${menuId}-name`, children: "New workspace name" }), _jsx("input", { id: `${menuId}-name`, type: "text", placeholder: "e.g. Acme Engineering", value: name, autoFocus: true, onChange: (e) => setName(e.target.value) }), _jsxs("div", { className: "ws-form__row", children: [_jsx("button", { type: "button", className: "ws-form__back", onClick: () => setMode("menu"), children: "Back" }), _jsx("button", { type: "submit", disabled: busy || !name.trim(), children: "Create" })] })] })), mode === "join" && (_jsxs("form", { className: "ws-form", onSubmit: (e) => {
+                            e.preventDefault();
+                            void join();
+                        }, children: [_jsx("label", { htmlFor: `${menuId}-code`, children: "Invite code" }), _jsx("input", { id: `${menuId}-code`, type: "text", placeholder: "Paste an invite code", value: code, autoFocus: true, onChange: (e) => setCode(e.target.value) }), _jsxs("div", { className: "ws-form__row", children: [_jsx("button", { type: "button", className: "ws-form__back", onClick: () => setMode("menu"), children: "Back" }), _jsx("button", { type: "submit", disabled: busy || !code.trim(), children: "Join" })] })] })), error && (_jsx("p", { className: "ws-menu__error", role: "alert", children: error }))] }))] }));
+}

package/dist/config/index.d.ts

@@ -1,8 +1,14 @@
+export { ConfigPanel } from "./ConfigPanel.js";
+export type { ConfigPanelProps } from "./ConfigPanel.js";
+export { WorkspaceSwitcher } from "./WorkspaceSwitcher.js";
+export type { WorkspaceSwitcherProps } from "./WorkspaceSwitcher.js";
+export { GeneralSettings } from "./GeneralSettings.js";
+export type { GeneralSettingsProps } from "./GeneralSettings.js";
 export { ConnectAgent } from "./ConnectAgent.js";
 export type { ConnectAgentProps } from "./ConnectAgent.js";
-export { Workspaces } from "./Workspaces.js";
-export type { WorkspacesProps } from "./Workspaces.js";
 export { Members } from "./Members.js";
 export type { MembersProps } from "./Members.js";
+export { Invites } from "./Invites.js";
+export type { InvitesProps } from "./Invites.js";
 export { EmptyState } from "./EmptyState.js";
 export type { EmptyStateProps } from "./EmptyState.js";

package/dist/config/index.js

@@ -1,6 +1,9 @@
-// Config-surface components (Task 6.3). Re-exported so consumers can compose
-// the pieces directly if they don't use the full ShepherdRoot shell.
+// Config-surface components. Re-exported so consumers can compose the pieces
+// directly if they don't use the full ShepherdRoot shell.
+export { ConfigPanel } from "./ConfigPanel.js";
+export { WorkspaceSwitcher } from "./WorkspaceSwitcher.js";
+export { GeneralSettings } from "./GeneralSettings.js";
 export { ConnectAgent } from "./ConnectAgent.js";
-export { Workspaces } from "./Workspaces.js";
 export { Members } from "./Members.js";
+export { Invites } from "./Invites.js";
 export { EmptyState } from "./EmptyState.js";

package/dist/index.d.ts

@@ -13,6 +13,6 @@ export { ShepherdRoot } from "./ShepherdRoot.js";
 export type { ShepherdRootProps } from "./ShepherdRoot.js";
 export { Dashboard } from "./components/Dashboard.js";
 export type { DashboardProps } from "./components/Dashboard.js";
-export { Workspaces, Members, ConnectAgent, EmptyState, } from "./config/index.js";
-export type { WorkspacesProps, MembersProps, ConnectAgentProps, EmptyStateProps, } from "./config/index.js";
+export { ConfigPanel, WorkspaceSwitcher, GeneralSettings, Members, Invites, ConnectAgent, EmptyState, } from "./config/index.js";
+export type { ConfigPanelProps, WorkspaceSwitcherProps, GeneralSettingsProps, MembersProps, InvitesProps, ConnectAgentProps, EmptyStateProps, } from "./config/index.js";
 export type { WorkspaceLandscapeResponseT, WorkspaceSummaryT, TokenSummaryT, MemberSummaryT, InviteResponseT, } from "@shepherd/shared";

package/dist/index.js

@@ -12,4 +12,4 @@ export { ShepherdRoot } from "./ShepherdRoot.js";
 export { Dashboard } from "./components/Dashboard.js";
 // Config screens — re-exported so consumers can compose the management surface
 // directly without the full ShepherdRoot shell.
-export { Workspaces, Members, ConnectAgent, EmptyState, } from "./config/index.js";
+export { ConfigPanel, WorkspaceSwitcher, GeneralSettings, Members, Invites, ConnectAgent, EmptyState, } from "./config/index.js";