@korso/shepherd-ui 0.1.1 → 0.2.1

package/dist/selfhost/assets/{index-tSyzirZa.css → index-DnhlP_lc.css}

@@ -1 +1 @@
-:root{--bg:#ece0c6;--ink:#322c20;--ink2:#6f6450;--ink3:#9c917a;--line:#d7c9ac;--line2:#e0d4b9;--live:#3d8b58;--drop:#bd4f3a;--chip:#e3d6ba;--terr:#7a6a48;--card:#f5ecd9}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.wrap{max-width:1100px;margin:0 auto;padding:40px 44px}header{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line)}#board:has(#panel-chat:not([hidden])) header{border-bottom:0}.brand{font-size:17px;font-weight:600}.vitals{color:var(--ink3);font-size:12.5px}.grow{flex:1}.status{font-size:12px;color:var(--ink3)}.status--ok{color:var(--live)}.status--warn{color:var(--terr)}.status--error{color:var(--drop)}.freshness{font-size:12px;color:var(--ink3)}.repo{position:relative}.repo-trig{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-family:inherit;color:var(--ink);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);border-radius:8px;padding:4px 10px;background:#fffaee66;cursor:pointer}.repo-trig .slash{color:var(--ink3)}.repo-menu{position:absolute;top:36px;left:0;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:5px;box-shadow:0 8px 24px #32281424;z-index:5}.repo-mi{display:flex;justify-content:space-between;gap:14px;padding:7px 9px;width:100%;text-align:left;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;color:inherit;background:transparent;border-radius:7px;font-size:13px;cursor:pointer}.repo-mi:hover{background:var(--chip)}.repo-mi.on{background:var(--chip);font-weight:600}.repo-mi .ct{font-size:11px;color:var(--ink3)}.repo-mi.all{border-top:1px solid var(--line2);margin-top:4px;padding-top:9px;color:var(--ink2)}.tabs{display:flex;gap:4px;margin-left:auto}.tab{font-size:13px;color:var(--ink2);padding:5px 11px;border:0;border-radius:7px;background:transparent;cursor:pointer;font:inherit}.tab--active{background:var(--ink);color:var(--bg)}.crew{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:26px 0 32px}.person{display:inline-flex;align-items:center;gap:9px;padding:5px 13px 5px 5px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px}.person--idle{opacity:.55}.avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;flex:none}.person__name{font-weight:600}.person__doing{color:var(--ink3);font-size:12px}.board{display:grid;grid-template-columns:1fr 1px 1fr;gap:0}.board__rule{background:var(--line)}.col{padding:0 36px}.col:first-child{padding-left:0}.col:last-child{padding-right:0}.colhead{display:flex;align-items:center;gap:8px;margin-bottom:6px}.colhead h2{font-size:12px;font-weight:600;letter-spacing:.03em;margin:0;text-transform:uppercase;color:var(--ink2)}.colhead .n{font-size:11px;color:var(--ink3);background:var(--chip);border-radius:999px;padding:1px 8px}.task{padding:16px 0;border-bottom:1px solid var(--line2)}.task__r1{display:flex;align-items:center;gap:8px}.task__who{font-size:13.5px;font-weight:600}.task__tag{font-size:11px;color:var(--ink3)}.task__repo{font-size:11px;color:var(--terr);background:#7a6a481a;border-radius:4px;padding:0 6px}.task__stat{margin-left:auto;font-size:11px;font-weight:500;color:var(--ink3)}.task__stat--drop{color:var(--drop)}.livedot{width:7px;height:7px;border-radius:50%;background:var(--live);margin-left:auto}.task__intent{font-size:13.5px;margin:5px 0 0;line-height:1.45}.terr{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.terr__lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}.glob{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--terr);background:#7a6a481f;border:1px solid rgba(122,106,72,.22);border-radius:5px;padding:1px 7px}.task__meta{font-size:11.5px;color:var(--ink3);margin-top:6px}.terrx{margin-top:8px}.terrx summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;flex-wrap:wrap;-webkit-user-select:none;user-select:none}.terrx summary::-webkit-details-marker{display:none}.terrx .terr--full{margin-top:8px}.glob--more{cursor:pointer;color:var(--ink2);background:var(--chip);border:1px solid var(--line)}.glob--more .tw{color:var(--ink3);display:inline-block;transition:transform .15s}.terrx[open] summary .glob--more .tw{transform:rotate(90deg)}.grp{padding:16px 0;border-bottom:1px solid var(--line2)}.grp__head{display:flex;align-items:center;gap:8px}.grp__who{font-size:13.5px;font-weight:600}.grp__tag,.grp__count{font-size:11px;color:var(--ink3)}.grp__dot{width:7px;height:7px;border-radius:50%;background:var(--live);margin-left:auto}.claims{margin:10px 0 0 6px;padding-left:14px;border-left:1px solid var(--line)}.claim{padding:6px 0}.claim+.claim{border-top:1px solid var(--line2);margin-top:6px}.fold{margin-top:10px}.fold summary{list-style:none;cursor:pointer;font-size:12px;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;-webkit-user-select:none;user-select:none}.fold summary::-webkit-details-marker{display:none}.fold summary .tw{display:inline-block;color:var(--ink3);transition:transform .15s}.fold[open] summary .tw{transform:rotate(90deg)}.fold__body{margin:8px 0 0 6px;padding-left:14px;border-left:1px dashed var(--line)}.covered{font-size:10.5px;color:var(--ink3);font-style:italic;margin-top:4px}.day{font-size:11px;color:var(--ink3);padding:18px 0 2px;font-weight:600}.more{margin-top:20px;font-size:12.5px;color:var(--ink2);padding:7px 13px;border:1px solid var(--line);border-radius:8px;background:#fffaee59;cursor:pointer}.empty{color:var(--ink3);font-style:italic;padding:14px 0}.chat-wrap{background:var(--card);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;height:calc(100vh - 150px);min-height:320px}.chat{flex:1;overflow-y:auto;padding:16px}.chat{scrollbar-width:thin;scrollbar-color:var(--line) transparent}.chat::-webkit-scrollbar{width:10px}.chat::-webkit-scrollbar-track{background:transparent}.chat::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:3px solid var(--card);background-clip:padding-box}.chat::-webkit-scrollbar-thumb:hover{background:var(--ink3);background-clip:padding-box}.chat__note{padding:9px 16px;font-size:11.5px;color:var(--ink3)}.msg{display:flex;gap:11px;padding:9px 0}.msg__avatar{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff}.msg__body{min-width:0;flex:1}.msg__head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.msg__who{font-weight:600}.msg__human{font-size:12px;color:var(--ink3)}.msg__to{font-size:11.5px;color:var(--terr)}.msg__time{font-size:11.5px;color:var(--ink3);margin-left:auto}.msg__text{margin-top:3px;padding:8px 12px;border-radius:4px 12px 12px;background:var(--chip);white-space:pre-wrap;word-break:break-word}.msg--targeted .msg__text{box-shadow:inset 3px 0 0 var(--terr)}.msg--me,.msg--me .msg__head{flex-direction:row-reverse}.msg--me .msg__time{margin-left:0;margin-right:auto}.msg--me .msg__body{display:flex;flex-direction:column;align-items:flex-end}.msg--me .msg__text{border-radius:12px 4px 12px 12px;background:#d4e7d2}.msg--me.msg--targeted .msg__text{box-shadow:inset -3px 0 0 var(--terr)}.composer{position:relative;border-top:1px solid var(--line);padding:10px 12px}.chat-form{display:flex;gap:8px}.chat-input{flex:1;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}.chat-input:focus{outline:none;border-color:var(--terr)}.chat-send{padding:9px 16px;border-radius:8px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-weight:600;cursor:pointer;font:inherit}.chat-send:disabled{opacity:.5;cursor:default}.mention-pop{position:absolute;left:12px;right:12px;bottom:56px;z-index:6;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:5px;box-shadow:0 8px 24px #32281429;max-height:200px;overflow-y:auto}.mention-mi{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;color:inherit;background:transparent;border-radius:7px;padding:6px 8px;font-size:13px;cursor:pointer}.mention-mi:hover,.mention-mi.on{background:var(--chip)}.mention-mi .ma{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff;flex:none}.gate{max-width:420px;margin:12vh auto 0;text-align:center}.gate h1{font-size:19px;margin:0 0 6px}.gate p{color:var(--ink2);margin:0 0 20px}.gate form{display:flex;gap:8px}.gate input{flex:1;padding:10px 12px;border-radius:8px;border:1px solid var(--line);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}
+:root{--bg:#ece0c6;--ink:#322c20;--ink2:#6f6450;--ink3:#9c917a;--line:#d7c9ac;--line2:#e0d4b9;--live:#3d8b58;--drop:#bd4f3a;--chip:#e3d6ba;--terr:#7a6a48;--card:#f5ecd9}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.wrap{max-width:1100px;margin:0 auto;padding:40px 44px}header{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line)}#board:has(#panel-chat:not([hidden])) header{border-bottom:0}.brand{font-size:17px;font-weight:600}.vitals{color:var(--ink3);font-size:12.5px}.grow{flex:1}.status{font-size:12px;color:var(--ink3)}.status--ok{color:var(--live)}.status--warn{color:var(--terr)}.status--error{color:var(--drop)}.freshness{font-size:12px;color:var(--ink3)}.repo{position:relative}.repo-trig{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-family:inherit;color:var(--ink);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);border-radius:8px;padding:4px 10px;background:#fffaee66;cursor:pointer}.repo-trig .slash{color:var(--ink3)}.repo-menu{position:absolute;top:36px;left:0;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:5px;box-shadow:0 8px 24px #32281424;z-index:5}.repo-mi{display:flex;justify-content:space-between;gap:14px;padding:7px 9px;width:100%;text-align:left;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;color:inherit;background:transparent;border-radius:7px;font-size:13px;cursor:pointer}.repo-mi:hover{background:var(--chip)}.repo-mi.on{background:var(--chip);font-weight:600}.repo-mi .ct{font-size:11px;color:var(--ink3)}.repo-mi.all{border-top:1px solid var(--line2);margin-top:4px;padding-top:9px;color:var(--ink2)}.tabs{display:flex;gap:4px;margin-left:auto}.tab{font-size:13px;color:var(--ink2);padding:5px 11px;border:0;border-radius:7px;background:transparent;cursor:pointer;font:inherit}.tab--active{background:var(--ink);color:var(--bg)}.crew{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:26px 0 32px}.person{display:inline-flex;align-items:center;gap:9px;padding:5px 13px 5px 5px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px}.person--idle{opacity:.55}.avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;flex:none}.person__name{font-weight:600}.person__doing{color:var(--ink3);font-size:12px}.board{display:grid;grid-template-columns:1fr 1px 1fr;gap:0}.board__rule{background:var(--line)}.col{padding:0 36px}.col:first-child{padding-left:0}.col:last-child{padding-right:0}.colhead{display:flex;align-items:center;gap:8px;margin-bottom:6px}.colhead h2{font-size:12px;font-weight:600;letter-spacing:.03em;margin:0;text-transform:uppercase;color:var(--ink2)}.colhead .n{font-size:11px;color:var(--ink3);background:var(--chip);border-radius:999px;padding:1px 8px}.task{padding:16px 0;border-bottom:1px solid var(--line2)}.task__r1{display:flex;align-items:center;gap:8px}.task__who{font-size:13.5px;font-weight:600}.task__tag{font-size:11px;color:var(--ink3)}.task__repo{font-size:11px;color:var(--terr);background:#7a6a481a;border-radius:4px;padding:0 6px}.task__stat{margin-left:auto;font-size:11px;font-weight:500;color:var(--ink3)}.task__stat--drop{color:var(--drop)}.livedot{width:7px;height:7px;border-radius:50%;background:var(--live);margin-left:auto}.task__intent{font-size:13.5px;margin:5px 0 0;line-height:1.45}.terr{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.terr__lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}.glob{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--terr);background:#7a6a481f;border:1px solid rgba(122,106,72,.22);border-radius:5px;padding:1px 7px}.task__meta{font-size:11.5px;color:var(--ink3);margin-top:6px}.terrx{margin-top:8px}.terrx summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;flex-wrap:wrap;-webkit-user-select:none;user-select:none}.terrx summary::-webkit-details-marker{display:none}.terrx .terr--full{margin-top:8px}.glob--more{cursor:pointer;color:var(--ink2);background:var(--chip);border:1px solid var(--line)}.glob--more .tw{color:var(--ink3);display:inline-block;transition:transform .15s}.terrx[open] summary .glob--more .tw{transform:rotate(90deg)}.grp{padding:16px 0;border-bottom:1px solid var(--line2)}.grp__head{display:flex;align-items:center;gap:8px}.grp__who{font-size:13.5px;font-weight:600}.grp__tag,.grp__count{font-size:11px;color:var(--ink3)}.grp__dot{width:7px;height:7px;border-radius:50%;background:var(--live);margin-left:auto}.claims{margin:10px 0 0 6px;padding-left:14px;border-left:1px solid var(--line)}.claim{padding:6px 0}.claim+.claim{border-top:1px solid var(--line2);margin-top:6px}.fold{margin-top:10px}.fold summary{list-style:none;cursor:pointer;font-size:12px;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;-webkit-user-select:none;user-select:none}.fold summary::-webkit-details-marker{display:none}.fold summary .tw{display:inline-block;color:var(--ink3);transition:transform .15s}.fold[open] summary .tw{transform:rotate(90deg)}.fold__body{margin:8px 0 0 6px;padding-left:14px;border-left:1px dashed var(--line)}.covered{font-size:10.5px;color:var(--ink3);font-style:italic;margin-top:4px}.day{font-size:11px;color:var(--ink3);padding:18px 0 2px;font-weight:600}.more{margin-top:20px;font-size:12.5px;color:var(--ink2);padding:7px 13px;border:1px solid var(--line);border-radius:8px;background:#fffaee59;cursor:pointer}.empty{color:var(--ink3);font-style:italic;padding:14px 0}.chat-wrap{background:var(--card);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;height:calc(100vh - 150px);min-height:320px}.chat{flex:1;overflow-y:auto;padding:16px}.chat{scrollbar-width:thin;scrollbar-color:var(--line) transparent}.chat::-webkit-scrollbar{width:10px}.chat::-webkit-scrollbar-track{background:transparent}.chat::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:3px solid var(--card);background-clip:padding-box}.chat::-webkit-scrollbar-thumb:hover{background:var(--ink3);background-clip:padding-box}.chat__note{padding:9px 16px;font-size:11.5px;color:var(--ink3)}.msg{display:flex;gap:11px;padding:9px 0}.msg__avatar{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff}.msg__body{min-width:0;flex:1}.msg__head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.msg__who{font-weight:600}.msg__human{font-size:12px;color:var(--ink3)}.msg__to{font-size:11.5px;color:var(--terr)}.msg__time{font-size:11.5px;color:var(--ink3);margin-left:auto}.msg__text{margin-top:3px;padding:8px 12px;border-radius:4px 12px 12px;background:var(--chip);white-space:pre-wrap;word-break:break-word}.msg--targeted .msg__text{box-shadow:inset 3px 0 0 var(--terr)}.msg--me,.msg--me .msg__head{flex-direction:row-reverse}.msg--me .msg__time{margin-left:0;margin-right:auto}.msg--me .msg__body{display:flex;flex-direction:column;align-items:flex-end}.msg--me .msg__text{border-radius:12px 4px 12px 12px;background:#d4e7d2}.msg--me.msg--targeted .msg__text{box-shadow:inset -3px 0 0 var(--terr)}.composer{position:relative;border-top:1px solid var(--line);padding:10px 12px}.chat-form{display:flex;gap:8px}.chat-input{flex:1;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}.chat-input:focus{outline:none;border-color:var(--terr)}.chat-send{padding:9px 16px;border-radius:8px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-weight:600;cursor:pointer;font:inherit}.chat-send:disabled{opacity:.5;cursor:default}.mention-pop{position:absolute;left:12px;right:12px;bottom:56px;z-index:6;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:5px;box-shadow:0 8px 24px #32281429;max-height:200px;overflow-y:auto}.mention-mi{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;color:inherit;background:transparent;border-radius:7px;padding:6px 8px;font-size:13px;cursor:pointer}.mention-mi:hover,.mention-mi.on{background:var(--chip)}.mention-mi .ma{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff;flex:none}.gate{max-width:420px;margin:12vh auto 0;text-align:center}.gate h1{font-size:19px;margin:0 0 6px}.gate p{color:var(--ink2);margin:0 0 20px}.gate form{display:flex;gap:8px}.gate input{flex:1;padding:10px 12px;border-radius:8px;border:1px solid var(--line);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}.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;align-items:center}.shepherd-workspaces .role{color:var(--ink3);font-size:12px}.shepherd-workspaces .admin,.shepherd-workspaces .invites,.shepherd-workspaces .create,.shepherd-workspaces .join{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.shepherd-workspaces .create>label,.shepherd-workspaces .join>label,.shepherd-workspaces .switcher>label{min-width:104px;color:var(--ink2)}.shepherd-workspaces .create>input,.shepherd-workspaces .join>input{flex:1;min-width:180px}.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}

package/dist/selfhost/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Shepherd</title>
-    <script type="module" crossorigin src="/assets/index-BBx3vo2Y.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-tSyzirZa.css">
+    <script type="module" crossorigin src="/assets/index-D6rTsbVM.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DnhlP_lc.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/selfhost.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement } from "react";
+/**
+ * The self-host SPA root and the ONE place a team token is handled — the named
+ * auth exception to the auth-agnostic core. Everything below the provider (the
+ * client, the polling hook, the {@link Dashboard}) stays token-blind; this
+ * component owns the token's lifecycle:
+ *
+ *  - It seeds token state from `localStorage["shepherd.token"]` (back-compat with
+ *    the legacy board), so a returning viewer skips the gate.
+ *  - With NO token it renders the {@link Gate}; a successful submit persists the
+ *    token and re-renders into the dashboard.
+ *  - With a token it builds a same-origin client (`baseUrl: ""`) that injects the
+ *    `Authorization: Bearer <token>` header and, on a 401, clears the stored
+ *    token and resets state — which re-renders straight back to the gate. This is
+ *    the React analogue of app.js's `clearToken()` + re-prompt 401 flow.
+ *
+ * The client is memoised on the token so it is rebuilt only when the token
+ * actually changes, not on every freshness re-render of the dashboard subtree.
+ *
+ * @returns Either the token gate or the authenticated dashboard.
+ */
+export declare function SelfHostApp(): ReactElement;

package/dist/selfhost.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { createShepherdClient } from "./client.js";
+import { ShepherdClientProvider } from "./context.js";
+import { Dashboard } from "./components/Dashboard.js";
+/**
+ * localStorage key the operator's team token is stored under. Kept identical to
+ * the legacy vanilla board (packages/hub/public/app.js's `TOKEN_KEY`) so a
+ * viewer who already authenticated against the old board stays signed in after
+ * the React cutover — no re-prompt on upgrade.
+ */
+const TOKEN_KEY = "shepherd.token";
+/** localStorage read that never throws (private/quota modes return null). */
+function readToken() {
+    try {
+        return localStorage.getItem(TOKEN_KEY) ?? "";
+    }
+    catch {
+        return "";
+    }
+}
+/**
+ * The token gate, ported from the `.gate` markup in packages/hub/public/index.html.
+ * Rendered whenever no token is stored; submitting a non-empty token persists it
+ * and lifts the gate via {@link onSubmit}.
+ *
+ * @param props.onSubmit - Called with the entered token once the form is submitted.
+ */
+function Gate({ onSubmit }) {
+    const [value, setValue] = useState("");
+    const handle = (e) => {
+        e.preventDefault();
+        const trimmed = value.trim();
+        // Ignore an empty submit so the gate can't store a blank token and then
+        // bounce the viewer straight back to itself on the first 401.
+        if (trimmed !== "")
+            onSubmit(trimmed);
+    };
+    return (_jsxs("section", { id: "gate", className: "gate", children: [_jsx("h1", { children: "Shepherd" }), _jsx("p", { children: "Enter the team token to view the workspace." }), _jsxs("form", { id: "gate-form", onSubmit: handle, children: [_jsx("input", { id: "gate-input", type: "password", placeholder: "Team token", "aria-label": "Team token", autoComplete: "off", value: value, onChange: (e) => setValue(e.target.value) }), _jsx("button", { type: "submit", children: "View" })] })] }));
+}
+/**
+ * The self-host SPA root and the ONE place a team token is handled — the named
+ * auth exception to the auth-agnostic core. Everything below the provider (the
+ * client, the polling hook, the {@link Dashboard}) stays token-blind; this
+ * component owns the token's lifecycle:
+ *
+ *  - It seeds token state from `localStorage["shepherd.token"]` (back-compat with
+ *    the legacy board), so a returning viewer skips the gate.
+ *  - With NO token it renders the {@link Gate}; a successful submit persists the
+ *    token and re-renders into the dashboard.
+ *  - With a token it builds a same-origin client (`baseUrl: ""`) that injects the
+ *    `Authorization: Bearer <token>` header and, on a 401, clears the stored
+ *    token and resets state — which re-renders straight back to the gate. This is
+ *    the React analogue of app.js's `clearToken()` + re-prompt 401 flow.
+ *
+ * The client is memoised on the token so it is rebuilt only when the token
+ * actually changes, not on every freshness re-render of the dashboard subtree.
+ *
+ * @returns Either the token gate or the authenticated dashboard.
+ */
+export function SelfHostApp() {
+    const [token, setToken] = useState(readToken);
+    // Rebuild the client only when the token changes. WHY same-origin (baseUrl
+    // ""): the hub serves this SPA, so requests hit the hub's own origin and need
+    // no cross-origin base. onUnauthorized clears the token + resets state, which
+    // re-renders back to the gate — the automatic 401 re-gate.
+    const client = useMemo(() => createShepherdClient({
+        baseUrl: "",
+        getAuthHeader: () => `Bearer ${token}`,
+        onUnauthorized: () => {
+            try {
+                localStorage.removeItem(TOKEN_KEY);
+            }
+            catch {
+                // Best-effort: even if the remove fails, resetting state below still
+                // returns the viewer to the gate for this session.
+            }
+            setToken("");
+        },
+    }), [token]);
+    if (token === "") {
+        return (_jsx(Gate, { onSubmit: (t) => {
+                try {
+                    localStorage.setItem(TOKEN_KEY, t);
+                }
+                catch {
+                    // Best-effort persistence; the in-memory token still authenticates
+                    // this session even if storage is unavailable.
+                }
+                setToken(t);
+            } }));
+    }
+    // Restore the legacy board's layout container: the ported styles size `.wrap`
+    // to max-width:1100px with page gutters. The gate centers itself (`.gate`), so
+    // only the dashboard view needs the wrapper.
+    return (_jsx("div", { className: "wrap", children: _jsx(ShepherdClientProvider, { client: client, children: _jsx(Dashboard, {}) }) }));
+}

package/dist/test/mockClient.d.ts

@@ -0,0 +1,6 @@
+import { vi } from "vitest";
+import type { ShepherdClient } from "../client.js";
+export type MockClient = {
+    -readonly [K in keyof ShepherdClient]: ShepherdClient[K] extends (...a: infer A) => infer R ? ReturnType<typeof vi.fn<(...a: A) => R>> : ShepherdClient[K];
+};
+export declare function makeMockClient(overrides?: Partial<MockClient>): MockClient;

package/dist/test/mockClient.js

@@ -0,0 +1,45 @@
+import { vi } from "vitest";
+/** A schema-valid empty landscape, shared by getLandscape and landscape(). */
+const EMPTY_LANDSCAPE = {
+    agents: [],
+    tasks: [],
+    announcements: [],
+    serverTime: "2026-06-29T00:00:00.000Z",
+};
+/** A schema-valid empty announce result, shared by announce and announceTo. */
+const EMPTY_ANNOUNCE = { ok: true, announcementIds: [] };
+export function makeMockClient(overrides = {}) {
+    const base = {
+        baseUrl: "https://hub.example.run.app",
+        // --- multi-workspace management surface --------------------------------
+        listWorkspaces: vi.fn().mockResolvedValue({ workspaces: [] }),
+        createWorkspace: vi.fn().mockResolvedValue({
+            id: "ws_new",
+            slug: "new",
+            name: "New",
+            role: "admin",
+        }),
+        mintToken: vi.fn().mockResolvedValue({ token: "shp_mock", id: "tok_mock" }),
+        listTokens: vi.fn().mockResolvedValue({ tokens: [] }),
+        revokeToken: vi.fn().mockResolvedValue(undefined),
+        createInvite: vi.fn().mockResolvedValue({
+            code: "INV-MOCK",
+            expiresAt: null,
+            maxUses: 1,
+            useCount: 0,
+        }),
+        revokeInvite: vi.fn().mockResolvedValue(undefined),
+        redeemInvite: vi.fn().mockResolvedValue({
+            workspace: { id: "ws_joined", slug: "joined", name: "Joined", role: "member" },
+        }),
+        listMembers: vi.fn().mockResolvedValue({ members: [] }),
+        removeMember: vi.fn().mockResolvedValue(undefined),
+        leave: vi.fn().mockResolvedValue(undefined),
+        landscape: vi.fn().mockResolvedValue(EMPTY_LANDSCAPE),
+        announceTo: vi.fn().mockResolvedValue(EMPTY_ANNOUNCE),
+        // --- self-host singular aliases ----------------------------------------
+        getLandscape: vi.fn().mockResolvedValue(EMPTY_LANDSCAPE),
+        announce: vi.fn().mockResolvedValue(EMPTY_ANNOUNCE),
+    };
+    return Object.assign(base, overrides);
+}

package/dist/useLandscapePolling.d.ts

@@ -0,0 +1,70 @@
+import type { WorkspaceLandscapeResponseT } from "@shepherd/shared";
+/**
+ * Connection state surfaced to the board chrome:
+ * - `live`: the most recent poll succeeded.
+ * - `reconnecting`: a poll failed transiently; the last good snapshot is kept.
+ * - `unauthorized`: the hub returned 401; the last good snapshot is kept while
+ *   the host-supplied client's `onUnauthorized` handles any token clearing.
+ */
+export type LandscapeStatus = "live" | "reconnecting" | "unauthorized";
+/** Options for {@link useLandscapePolling}. */
+export interface UseLandscapePollingOptions {
+    /**
+     * Workspace to poll. When given, the hook calls `client.landscape(id)` (the
+     * hosted, multi-workspace route); when omitted it calls the singular
+     * `client.getLandscape()` self-host alias. Changing it re-pulls immediately.
+     */
+    workspaceId?: string;
+    /** Poll cadence in ms; defaults to {@link DEFAULT_POLL_MS} (5000). */
+    pollMs?: number;
+    /**
+     * Whether to poll at all; defaults to `true`. When `false` the hook performs
+     * NO request (no initial poll, no interval) and stays on its last value — used
+     * by the hosted shell to keep the board from polling when there is no
+     * workspace to scope to.
+     */
+    enabled?: boolean;
+}
+/** The reactive value returned by {@link useLandscapePolling}. */
+export interface LandscapePolling {
+    /** Last good landscape, or `null` until the first successful poll. */
+    snapshot: WorkspaceLandscapeResponseT | null;
+    /** Current connection state. */
+    status: LandscapeStatus;
+    /** `Date.now()` of the last successful poll, or `null` before the first. */
+    lastUpdatedMs: number | null;
+    /** Run one poll immediately (used by the composer after a successful send). */
+    refresh: () => Promise<void>;
+}
+/**
+ * Polls the Shepherd hub's whole-workspace landscape on an interval and exposes
+ * the latest good snapshot plus a connection status, mirroring the browser-only
+ * polling loop in packages/hub/public/app.js (`poll` + `tickFreshness`).
+ *
+ * The client is read from {@link useShepherdClient} (context), keeping the hook
+ * auth-agnostic — it never touches tokens or the BFF. On mount it polls once
+ * immediately, then on `setInterval(pollMs)`. A SECOND `setInterval(1000)` only
+ * bumps a tick counter so relative-time text re-renders even between polls (the
+ * React analogue of app.js's `tickFreshness`); both intervals are cleared on
+ * unmount.
+ *
+ * Failure handling preserves the original board's resilience: a 401
+ * {@link ShepherdClientError} sets `unauthorized`, and ANY other error sets
+ * `reconnecting`. In both cases the last good `snapshot`/`lastUpdatedMs` are
+ * RETAINED (app.js's `lastSnapshot` retention), so the wallboard never blanks on
+ * a transient blip. The same last-good retention holds across a `workspaceId`
+ * switch — the prior board stays on screen until the new workspace's first poll
+ * lands, and an in-flight poll for the old workspace is dropped so it can't
+ * clobber the new one.
+ *
+ * Two refinements beyond the original loop: a `workspaceId` change re-pulls the
+ * new workspace immediately (the poll effect depends on it), and the interval
+ * poll is skipped while the tab is hidden (`document.visibilityState`), resuming
+ * with an immediate poll on `visibilitychange` back to visible — a backgrounded
+ * wallboard shouldn't hammer the hub.
+ *
+ * @param opts - Optional workspace to scope to and poll cadence override.
+ * @returns The current snapshot, status, last-updated timestamp, and a manual
+ *   {@link LandscapePolling.refresh}.
+ */
+export declare function useLandscapePolling(opts?: UseLandscapePollingOptions): LandscapePolling;

package/dist/useLandscapePolling.js

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ShepherdClientError } from "./client.js";
+import { useShepherdClient } from "./context.js";
+/** Default poll cadence, mirroring `POLL_MS = 5000` in the original app.js. */
+const DEFAULT_POLL_MS = 5000;
+/** The freshness re-render cadence, mirroring app.js's 1s `tickFreshness` loop. */
+const FRESHNESS_MS = 1000;
+/**
+ * Polls the Shepherd hub's whole-workspace landscape on an interval and exposes
+ * the latest good snapshot plus a connection status, mirroring the browser-only
+ * polling loop in packages/hub/public/app.js (`poll` + `tickFreshness`).
+ *
+ * The client is read from {@link useShepherdClient} (context), keeping the hook
+ * auth-agnostic — it never touches tokens or the BFF. On mount it polls once
+ * immediately, then on `setInterval(pollMs)`. A SECOND `setInterval(1000)` only
+ * bumps a tick counter so relative-time text re-renders even between polls (the
+ * React analogue of app.js's `tickFreshness`); both intervals are cleared on
+ * unmount.
+ *
+ * Failure handling preserves the original board's resilience: a 401
+ * {@link ShepherdClientError} sets `unauthorized`, and ANY other error sets
+ * `reconnecting`. In both cases the last good `snapshot`/`lastUpdatedMs` are
+ * RETAINED (app.js's `lastSnapshot` retention), so the wallboard never blanks on
+ * a transient blip. The same last-good retention holds across a `workspaceId`
+ * switch — the prior board stays on screen until the new workspace's first poll
+ * lands, and an in-flight poll for the old workspace is dropped so it can't
+ * clobber the new one.
+ *
+ * Two refinements beyond the original loop: a `workspaceId` change re-pulls the
+ * new workspace immediately (the poll effect depends on it), and the interval
+ * poll is skipped while the tab is hidden (`document.visibilityState`), resuming
+ * with an immediate poll on `visibilitychange` back to visible — a backgrounded
+ * wallboard shouldn't hammer the hub.
+ *
+ * @param opts - Optional workspace to scope to and poll cadence override.
+ * @returns The current snapshot, status, last-updated timestamp, and a manual
+ *   {@link LandscapePolling.refresh}.
+ */
+export function useLandscapePolling(opts) {
+    const client = useShepherdClient();
+    const workspaceId = opts?.workspaceId;
+    const pollMs = opts?.pollMs ?? DEFAULT_POLL_MS;
+    const enabled = opts?.enabled ?? true;
+    const [snapshot, setSnapshot] = useState(null);
+    const [status, setStatus] = useState("live");
+    const [lastUpdatedMs, setLastUpdatedMs] = useState(null);
+    // A monotonically-bumped counter whose only job is to force a re-render every
+    // second so relative timestamps in the tree refresh between polls. The value
+    // itself is never read — the state change IS the freshness tick.
+    const [, setTick] = useState(0);
+    // The latest client lives in a ref so the stable `poll`/`refresh` callbacks
+    // always call through to the current provider value without re-subscribing.
+    const clientRef = useRef(client);
+    clientRef.current = client;
+    // Each poll effect run bumps this "generation". A poll captures the generation
+    // it started under and compares against the live ref before any setState, so a
+    // response that resolves after its effect was torn down — by unmount OR a
+    // `workspaceId` switch — is dropped and can't clobber a newer workspace's
+    // board. A single shared boolean can't do this: a switch runs old-cleanup then
+    // new-setup synchronously, so a boolean reset by setup would let the stale
+    // promise's late resolve sail through. The generation only ever moves forward,
+    // so a superseded poll's captured value is always behind `gen.current`.
+    const gen = useRef(0);
+    /**
+     * Runs exactly one poll, mapping the outcome onto status/snapshot. Reads
+     * `workspaceId` via closure (it's a `useCallback` dep): a non-empty id hits the
+     * workspace-scoped `landscape(id)` route, an absent one the singular
+     * `getLandscape()` alias. `myGen` is the caller's generation — the result is
+     * applied only while it's still the current one.
+     */
+    const poll = useCallback(async (myGen) => {
+        try {
+            const next = workspaceId
+                ? await clientRef.current.landscape(workspaceId)
+                : await clientRef.current.getLandscape();
+            if (myGen !== gen.current)
+                return;
+            setSnapshot(next);
+            setLastUpdatedMs(Date.now());
+            setStatus("live");
+        }
+        catch (err) {
+            if (myGen !== gen.current)
+                return;
+            // A 401 is terminal-ish: the client's onUnauthorized already ran. Keep
+            // the last good board up and flag it; everything else is a transient
+            // blip and also keeps the last good board ("reconnecting…" in app.js).
+            if (err instanceof ShepherdClientError && err.status === 401) {
+                setStatus("unauthorized");
+            }
+            else {
+                setStatus("reconnecting");
+            }
+        }
+    }, [workspaceId]);
+    // Poll once on mount, then on the cadence interval. Re-runs when `poll`
+    // changes (i.e. on a `workspaceId` switch), re-pulling the new workspace
+    // immediately. The interval tick is skipped while the tab is hidden, and a
+    // return to visibility polls right away to catch up. The 1s freshness interval
+    // is independent so a slow/failed poll never blocks the relative-time refresh.
+    useEffect(() => {
+        // Disabled: do nothing — no poll, no intervals — so a no-workspace board
+        // never hits the hub. Re-enabling re-runs this effect and pulls immediately.
+        if (!enabled)
+            return;
+        const myGen = ++gen.current;
+        void poll(myGen);
+        const pollTimer = setInterval(() => {
+            // A backgrounded wallboard doesn't need to poll; resume below on visible.
+            if (document.visibilityState === "hidden")
+                return;
+            void poll(myGen);
+        }, pollMs);
+        const freshnessTimer = setInterval(() => {
+            setTick((t) => t + 1);
+        }, FRESHNESS_MS);
+        const onVisible = () => {
+            if (document.visibilityState === "visible")
+                void poll(myGen);
+        };
+        document.addEventListener("visibilitychange", onVisible);
+        return () => {
+            // Bumping the generation invalidates any in-flight poll from this run.
+            gen.current++;
+            clearInterval(pollTimer);
+            clearInterval(freshnessTimer);
+            document.removeEventListener("visibilitychange", onVisible);
+        };
+    }, [poll, pollMs, enabled]);
+    // Manual refresh always runs under the current generation, so its result
+    // applies as long as the hook hasn't since switched workspace or unmounted.
+    const refresh = useCallback(() => poll(gen.current), [poll]);
+    return { snapshot, status, lastUpdatedMs, refresh };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korso/shepherd-ui",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Auth-agnostic React UI library for the Shepherd wallboard (Dashboard, client, provider). Host injects auth; the library never reads tokens.",
   "type": "module",
   "license": "UNLICENSED",