@korso/shepherd-ui 0.1.0 → 0.2.0

package/dist/lib/index.js

@@ -1,8 +1,457 @@
-import { D as a, S as h, a as s, c as d, u as t } from "./Dashboard-CB6SL-J2.js";
+import { u as $, d as I, D as U } from "./Dashboard-CG6KeFQ3.js";
+import { S as ne, a as te, c as ae } from "./Dashboard-CG6KeFQ3.js";
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { useId as O, useState as i, useEffect as H, useRef as _, useCallback as D } from "react";
+function F({ workspaceId: c, refreshKey: t = 0, canRemove: l = !1, onLeft: k }) {
+  const f = $(), R = O(), [w, v] = i([]), [N, y] = i(null), [p, C] = i(null), [E, d] = i(!0), [u, n] = i(null), [o, m] = i(!1);
+  async function s({ keepError: h = !1 } = {}) {
+    h || y(null);
+    try {
+      const g = await f.listMembers(c);
+      v(g.members);
+    } catch (g) {
+      y(I(g));
+    } finally {
+      d(!1);
+    }
+  }
+  H(() => {
+    d(!0), s();
+  }, [f, c, t]);
+  async function S(h, g) {
+    if (!u) {
+      n(h), y(null), C(null), v((T) => T.filter((r) => r.accountId !== h));
+      try {
+        await f.removeMember(c, h), C(`Removed ${g}`);
+      } catch (T) {
+        y(I(T)), s({ keepError: !0 });
+      } finally {
+        n(null);
+      }
+    }
+  }
+  async function x() {
+    if (!o) {
+      m(!0), y(null), C(null);
+      try {
+        await f.leave(c), C("Left workspace"), k == null || k();
+      } catch (h) {
+        y(I(h));
+      } finally {
+        m(!1);
+      }
+    }
+  }
+  return /* @__PURE__ */ b("section", { className: "shepherd-members", "aria-labelledby": R, children: [
+    /* @__PURE__ */ e("h3", { id: R, children: "Members" }),
+    N && /* @__PURE__ */ e("p", { role: "alert", children: N }),
+    p && /* @__PURE__ */ e("p", { role: "status", children: p }),
+    E ? /* @__PURE__ */ e("p", { role: "status", children: "Loading…" }) : w.length === 0 ? /* @__PURE__ */ e("p", { children: "No members." }) : /* @__PURE__ */ e("ul", { children: w.map((h) => {
+      const g = h.displayName ?? h.githubLogin ?? h.accountId;
+      return /* @__PURE__ */ b("li", { children: [
+        /* @__PURE__ */ e("span", { children: g }),
+        /* @__PURE__ */ e("span", { className: "role", children: h.role }),
+        l && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${g}`,
+            onClick: () => void S(h.accountId, g),
+            disabled: u === h.accountId,
+            children: "Remove"
+          }
+        )
+      ] }, h.accountId);
+    }) }),
+    /* @__PURE__ */ e("button", { type: "button", onClick: () => void x(), disabled: o, children: "Leave workspace" })
+  ] });
+}
+function M({ workspaces: c, selected: t, onChanged: l, onSelect: k }) {
+  const f = $(), R = O(), [w, v] = i(""), [N, y] = i(""), [p, C] = i(null), [E, d] = i(null), [u, n] = i(!1), [o, m] = i(0), s = (t == null ? void 0 : t.role) === "admin";
+  async function S() {
+    if (!(!w.trim() || u)) {
+      n(!0), d(null);
+      try {
+        await f.createWorkspace({ name: w.trim() }), v(""), l();
+      } catch (r) {
+        d(I(r));
+      } finally {
+        n(!1);
+      }
+    }
+  }
+  async function x() {
+    if (!(!N.trim() || u)) {
+      n(!0), d(null);
+      try {
+        await f.redeemInvite(N.trim()), y(""), l(), m((r) => r + 1);
+      } catch (r) {
+        d(I(r));
+      } finally {
+        n(!1);
+      }
+    }
+  }
+  async function h() {
+    if (!(!t || u)) {
+      n(!0), d(null);
+      try {
+        const r = await f.createInvite(t.id, {});
+        C(r), m((j) => j + 1);
+      } catch (r) {
+        d(I(r));
+      } finally {
+        n(!1);
+      }
+    }
+  }
+  async function g() {
+    if (!(!t || !p || u)) {
+      n(!0), d(null);
+      try {
+        await f.revokeInvite(t.id, p.code), C(null);
+      } catch (r) {
+        d(I(r));
+      } finally {
+        n(!1);
+      }
+    }
+  }
+  H(() => {
+    C(null);
+  }, [t == null ? void 0 : t.id]);
+  const T = p ? `${window.location.origin}/join/${encodeURIComponent(p.code)}` : null;
+  return /* @__PURE__ */ b("section", { className: "shepherd-workspaces", "aria-labelledby": R, children: [
+    /* @__PURE__ */ e("h3", { id: R, children: "Workspace management" }),
+    E && /* @__PURE__ */ e("p", { role: "alert", children: E }),
+    c.length > 1 && k && /* @__PURE__ */ b("div", { className: "switcher", children: [
+      /* @__PURE__ */ e("label", { htmlFor: "ws-switcher", children: "Active workspace" }),
+      /* @__PURE__ */ e(
+        "select",
+        {
+          id: "ws-switcher",
+          value: (t == null ? void 0 : t.id) ?? "",
+          onChange: (r) => k(r.target.value),
+          children: c.map((r) => /* @__PURE__ */ e("option", { value: r.id, children: r.name }, r.id))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ b("div", { className: "create", children: [
+      /* @__PURE__ */ e("label", { htmlFor: "ws-name", children: "Workspace name" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          id: "ws-name",
+          type: "text",
+          value: w,
+          onChange: (r) => v(r.target.value)
+        }
+      ),
+      /* @__PURE__ */ e("button", { type: "button", onClick: () => void S(), disabled: u, children: "Create workspace" })
+    ] }),
+    /* @__PURE__ */ b("div", { className: "join", children: [
+      /* @__PURE__ */ e("label", { htmlFor: "invite-code", children: "Invite code" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          id: "invite-code",
+          type: "text",
+          value: N,
+          onChange: (r) => y(r.target.value)
+        }
+      ),
+      /* @__PURE__ */ e("button", { type: "button", onClick: () => void x(), disabled: u, children: "Join" })
+    ] }),
+    s && t && /* @__PURE__ */ b("div", { className: "admin", children: [
+      /* @__PURE__ */ b("div", { className: "invites", children: [
+        /* @__PURE__ */ e("button", { type: "button", onClick: () => void h(), disabled: u, children: "Create invite" }),
+        p && /* @__PURE__ */ b("div", { className: "invite-result", children: [
+          /* @__PURE__ */ e("code", { children: p.code }),
+          /* @__PURE__ */ e("a", { href: T ?? void 0, children: T }),
+          /* @__PURE__ */ b("span", { className: "invite-uses", children: [
+            p.useCount,
+            " / ",
+            p.maxUses,
+            " uses"
+          ] }),
+          /* @__PURE__ */ e("button", { type: "button", onClick: () => void g(), disabled: u, children: "Revoke invite" })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(
+        F,
+        {
+          workspaceId: t.id,
+          refreshKey: o,
+          onLeft: l,
+          canRemove: !0
+        }
+      )
+    ] })
+  ] });
+}
+const P = [
+  { id: "claude", label: "Claude Code" },
+  { id: "codex", label: "Codex" },
+  { id: "pi", label: "Pi" },
+  { id: "generic", label: "Generic (JSON)" }
+], B = "shp_<paste-after-generating>", G = {
+  claude: "claude mcp add shepherd -s user \\",
+  codex: "codex mcp add shepherd \\",
+  pi: "pi mcp add shepherd \\"
+};
+function J(c, t, l) {
+  return c === "generic" ? JSON.stringify(
+    {
+      mcpServers: {
+        shepherd: {
+          command: "npx",
+          args: ["-y", "@korso/shepherd"],
+          env: { HUB_URL: t, SHEPHERD_TOKEN: l }
+        }
+      }
+    },
+    null,
+    2
+  ) : [
+    G[c],
+    `  -e HUB_URL=${t} \\`,
+    `  -e SHEPHERD_TOKEN=${l} \\`,
+    "  -- npx -y @korso/shepherd"
+  ].join(`
+`);
+}
+function V({ workspaceId: c, hubUrl: t }) {
+  const l = $(), k = t ?? l.baseUrl, f = O(), [R, w] = i("claude"), [v, N] = i(""), [y, p] = i(null), [C, E] = i([]), [d, u] = i(null), [n, o] = i(null), [m, s] = i(!1), [S, x] = i(!0), [h, g] = i(null);
+  async function T() {
+    try {
+      const a = await l.listTokens(c);
+      E(a.tokens);
+    } catch (a) {
+      u(I(a));
+    } finally {
+      x(!1);
+    }
+  }
+  H(() => {
+    x(!0), T();
+  }, [l, c]), H(() => {
+    p(null);
+  }, [c]);
+  async function r() {
+    s(!0), u(null);
+    try {
+      const a = await l.mintToken(
+        c,
+        v.trim() ? { name: v.trim() } : {}
+      );
+      p(a.token), N(""), await T();
+    } catch (a) {
+      u(I(a));
+    } finally {
+      s(!1);
+    }
+  }
+  async function j(a) {
+    if (!h) {
+      g(a), u(null), o(null);
+      try {
+        await l.revokeToken(c, a), E((L) => L.filter((A) => A.id !== a)), o("Token revoked");
+      } catch (L) {
+        u(I(L));
+      } finally {
+        g(null);
+      }
+    }
+  }
+  const W = J(R, k, y ?? B);
+  return /* @__PURE__ */ b("section", { className: "shepherd-connect-agent", "aria-labelledby": f, children: [
+    /* @__PURE__ */ e("h3", { id: f, children: "Connect your agent" }),
+    /* @__PURE__ */ e("label", { htmlFor: "connect-tool", children: "Tool" }),
+    /* @__PURE__ */ e(
+      "select",
+      {
+        id: "connect-tool",
+        value: R,
+        onChange: (a) => w(a.target.value),
+        children: P.map((a) => /* @__PURE__ */ e("option", { value: a.id, children: a.label }, a.id))
+      }
+    ),
+    /* @__PURE__ */ b("div", { className: "generate", children: [
+      /* @__PURE__ */ e("label", { htmlFor: "token-name", children: "Token name (optional)" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          id: "token-name",
+          type: "text",
+          value: v,
+          onChange: (a) => N(a.target.value),
+          placeholder: "e.g. laptop"
+        }
+      ),
+      /* @__PURE__ */ e("button", { type: "button", onClick: () => void r(), disabled: m, children: "Generate token" })
+    ] }),
+    d && /* @__PURE__ */ e("p", { role: "alert", children: d }),
+    n && /* @__PURE__ */ e("p", { role: "status", children: n }),
+    y && /* @__PURE__ */ e("p", { className: "token-once", role: "status", children: "Copy this token now — it won't be shown again." }),
+    /* @__PURE__ */ e("pre", { "data-testid": "install-command", children: W }),
+    /* @__PURE__ */ e("h4", { children: "Existing tokens" }),
+    S ? /* @__PURE__ */ e("p", { role: "status", children: "Loading…" }) : C.length === 0 ? /* @__PURE__ */ e("p", { children: "No tokens yet." }) : /* @__PURE__ */ e("ul", { children: C.map((a) => {
+      const L = a.name ?? a.id;
+      return /* @__PURE__ */ b("li", { children: [
+        /* @__PURE__ */ e("span", { children: L }),
+        a.revokedAt ? /* @__PURE__ */ e("span", { className: "revoked", children: "revoked" }) : /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Revoke token ${L}`,
+            onClick: () => void j(a.id),
+            disabled: h === a.id,
+            children: "Revoke"
+          }
+        )
+      ] }, a.id);
+    }) })
+  ] });
+}
+function X({
+  title: c = "No workspace yet",
+  children: t,
+  onGetStarted: l,
+  ctaLabel: k = "Go to Config"
+}) {
+  return /* @__PURE__ */ b("section", { className: "shepherd-empty-state", "aria-labelledby": "empty-state-heading", children: [
+    /* @__PURE__ */ e("h2", { id: "empty-state-heading", children: c }),
+    /* @__PURE__ */ e("p", { children: t ?? "Create a workspace or join one with an invite code to get started." }),
+    l && /* @__PURE__ */ e("button", { type: "button", onClick: l, children: k })
+  ] });
+}
+const K = [
+  { id: "board", label: "Board" },
+  { id: "config", label: "Config" }
+];
+function Y({ hubUrl: c }) {
+  const t = $(), [l, k] = i({ status: "loading" }), [f, R] = i(null), [w, v] = i("board"), N = _([]), y = D(
+    (n, o) => {
+      var S;
+      const m = K.length - 1;
+      let s = null;
+      switch (n.key) {
+        case "ArrowRight":
+          s = o === m ? 0 : o + 1;
+          break;
+        case "ArrowLeft":
+          s = o === 0 ? m : o - 1;
+          break;
+        case "Home":
+          s = 0;
+          break;
+        case "End":
+          s = m;
+          break;
+        default:
+          return;
+      }
+      n.preventDefault(), v(K[s].id), (S = N.current[s]) == null || S.focus();
+    },
+    []
+  ), p = D(
+    async (n) => {
+      try {
+        const o = await t.listWorkspaces();
+        k({ status: "ready", workspaces: o.workspaces }), R(
+          (m) => {
+            var s;
+            return m && o.workspaces.some((S) => S.id === m) ? m : ((s = o.workspaces[0]) == null ? void 0 : s.id) ?? null;
+          }
+        ), n && v(o.workspaces.length === 0 ? "config" : "board");
+      } catch (o) {
+        k({
+          status: "error",
+          message: I(o)
+        });
+      }
+    },
+    [t]
+  );
+  H(() => {
+    p(!0);
+  }, []);
+  const C = D(() => p(!1), [p]), E = l.status === "ready" ? l.workspaces : [], d = E.find((n) => n.id === f) ?? null;
+  if (l.status === "loading")
+    return /* @__PURE__ */ e("div", { className: "shepherd-root", children: /* @__PURE__ */ e("p", { role: "status", children: "Loading…" }) });
+  if (l.status === "error")
+    return /* @__PURE__ */ e("div", { className: "shepherd-root", children: /* @__PURE__ */ e("p", { role: "alert", children: l.message }) });
+  const u = E.length > 0;
+  return /* @__PURE__ */ b("div", { className: "shepherd-root", children: [
+    /* @__PURE__ */ b("header", { children: [
+      /* @__PURE__ */ e("h1", { className: "brand", style: { margin: 0, font: "inherit" }, children: "Shepherd" }),
+      /* @__PURE__ */ e("nav", { className: "tabs", role: "tablist", "aria-label": "Shepherd views", children: K.map(({ id: n, label: o }, m) => /* @__PURE__ */ e(
+        "button",
+        {
+          ref: (s) => {
+            N.current[m] = s;
+          },
+          type: "button",
+          role: "tab",
+          id: `tab-${n}`,
+          "aria-controls": `panel-${n}`,
+          "aria-selected": w === n,
+          tabIndex: w === n ? 0 : -1,
+          onClick: () => v(n),
+          onKeyDown: (s) => y(s, m),
+          children: o
+        },
+        n
+      )) })
+    ] }),
+    /* @__PURE__ */ b("main", { children: [
+      w === "board" && /* @__PURE__ */ e(
+        "div",
+        {
+          role: "tabpanel",
+          id: "panel-board",
+          "aria-labelledby": "tab-board",
+          tabIndex: 0,
+          children: u && d ? /* @__PURE__ */ e(U, { workspaceId: d.id }) : /* @__PURE__ */ e(X, { onGetStarted: () => v("config") })
+        }
+      ),
+      w === "config" && /* @__PURE__ */ e(
+        "div",
+        {
+          role: "tabpanel",
+          id: "panel-config",
+          "aria-labelledby": "tab-config",
+          tabIndex: 0,
+          children: /* @__PURE__ */ b("section", { className: "shepherd-config", "aria-labelledby": "config-heading", children: [
+            /* @__PURE__ */ e("h2", { id: "config-heading", children: "Configuration" }),
+            /* @__PURE__ */ e(
+              M,
+              {
+                workspaces: E,
+                selected: d,
+                onChanged: () => {
+                  C();
+                },
+                onSelect: R
+              }
+            ),
+            d && /* @__PURE__ */ e(V, { workspaceId: d.id, hubUrl: c })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
 export {
-  a as Dashboard,
-  h as ShepherdClientError,
-  s as ShepherdClientProvider,
-  d as createShepherdClient,
-  t as useShepherdClient
+  V as ConnectAgent,
+  U as Dashboard,
+  X as EmptyState,
+  F as Members,
+  ne as ShepherdClientError,
+  te as ShepherdClientProvider,
+  Y as ShepherdRoot,
+  M as Workspaces,
+  ae as createShepherdClient,
+  I as describeError,
+  $ as useShepherdClient
 };

package/dist/lib/selfhost.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { useState as s, useMemo as h } from "react";
-import { c as d, a as m, D as u } from "./Dashboard-CB6SL-J2.js";
+import { c as d, a as m, D as u } from "./Dashboard-CG6KeFQ3.js";
 const i = "shepherd.token";
 function p() {
   try {
@@ -10,7 +10,7 @@ function p() {
   }
 }
 function f({ onSubmit: t }) {
-  const [r, o] = s("");
+  const [r, a] = s("");
   return /* @__PURE__ */ l("section", { id: "gate", className: "gate", children: [
     /* @__PURE__ */ e("h1", { children: "Shepherd" }),
     /* @__PURE__ */ e("p", { children: "Enter the team token to view the workspace." }),
@@ -28,7 +28,7 @@ function f({ onSubmit: t }) {
           "aria-label": "Team token",
           autoComplete: "off",
           value: r,
-          onChange: (n) => o(n.target.value)
+          onChange: (n) => a(n.target.value)
         }
       ),
       /* @__PURE__ */ e("button", { type: "submit", children: "View" })
@@ -36,10 +36,10 @@ function f({ onSubmit: t }) {
   ] });
 }
 function b() {
-  const [t, r] = s(p), o = h(
+  const [t, r] = s(p), a = h(
     () => d({
       baseUrl: "",
-      getAuthHeaders: () => ({ Authorization: `Bearer ${t}` }),
+      getAuthHeader: () => `Bearer ${t}`,
       onUnauthorized: () => {
         try {
           localStorage.removeItem(i);
@@ -53,15 +53,15 @@ function b() {
   return t === "" ? /* @__PURE__ */ e(
     f,
     {
-      onSubmit: (a) => {
+      onSubmit: (o) => {
         try {
-          localStorage.setItem(i, a);
+          localStorage.setItem(i, o);
         } catch {
         }
-        r(a);
+        r(o);
       }
     }
-  ) : /* @__PURE__ */ e("div", { className: "wrap", children: /* @__PURE__ */ e(m, { client: o, children: /* @__PURE__ */ e(u, {}) }) });
+  ) : /* @__PURE__ */ e("div", { className: "wrap", children: /* @__PURE__ */ e(m, { client: a, children: /* @__PURE__ */ e(u, {}) }) });
 }
 export {
   b as SelfHostApp

package/dist/lib/styles.css

@@ -180,3 +180,30 @@
         background:var(--card); color:var(--ink); }
       .gate button { padding:10px 16px; border-radius:8px; border:1px solid var(--ink);
         background:var(--ink); color:var(--bg); font-weight:600; cursor:pointer; }
+
+      /* --- Multi-workspace hosted shell + config surface (functional, not polished;
+         a dedicated styling sub-project refines this). Reuses the board's tokens. --- */
+      .shepherd-root { max-width:1100px; margin:0 auto; padding:40px 44px; }
+      .shepherd-root > main { padding-top:18px; }
+      .shepherd-config { display:flex; flex-direction:column; gap:24px; }
+      .shepherd-config h2 { font-size:16px; margin:0 0 4px; }
+      .shepherd-workspaces, .shepherd-members, .shepherd-connect-agent {
+        display:flex; flex-direction:column; gap:10px;
+        padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
+      .shepherd-workspaces .switcher { display:flex; flex-wrap:wrap; gap:8px; }
+      .shepherd-workspaces .role { color:var(--ink3); font-size:12px; }
+      .shepherd-workspaces .admin, .shepherd-workspaces .invites { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
+      .shepherd-config input, .shepherd-config select {
+        padding:8px 10px; border-radius:8px; border:1px solid var(--line);
+        background:var(--bg); color:var(--ink); }
+      .shepherd-config button {
+        padding:8px 14px; border-radius:8px; border:1px solid var(--ink);
+        background:var(--ink); color:var(--bg); font-weight:600; cursor:pointer; }
+      .shepherd-config button:disabled { opacity:.55; cursor:default; }
+      .shepherd-config .invite-result, .shepherd-connect-agent .token-once {
+        font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px;
+        word-break:break-all; padding:8px 10px; border-radius:8px;
+        background:var(--chip); border:1px solid var(--line2); }
+      .shepherd-config .revoked { color:var(--ink3); text-decoration:line-through; }
+      .shepherd-empty-state { text-align:center; color:var(--ink2); padding:48px 24px; }
+      .shepherd-empty-state button { margin-top:14px; }