shraga 0.1.112 → 0.1.114

package/src/client/components/SkillsManager.tsx

@@ -4,6 +4,7 @@ import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Textarea } from './ui/textarea';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
+import { useIsOwner } from '@/hooks/useIsOwner';
 
 type DefaultSkillEntry = string | { name: string; capped?: boolean | number };
 
@@ -43,8 +44,21 @@ export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
   const [dirty, setDirty] = useState(false);
   const [action, setAction] = useState<SidebarAction>(null);
   const [actionName, setActionName] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const isOwner = useIsOwner(getToken, open);
+  const canEdit = isOwner === true;
 
   const isSelectedBuiltin = selected ? builtins.includes(selected) : false;
+  const readOnly = isSelectedBuiltin || !canEdit;
+
+  /** True if the mutation succeeded; otherwise surfaces the server's error and returns false. */
+  const ok = async (res: Response, what: string) => {
+    if (res.ok) { setError(null); return true; }
+    const msg = (await res.json().catch((e) => { console.warn(`[SkillsManager] ${what} error response not JSON`, res.status, e); return {}; })).error || `HTTP ${res.status}`;
+    console.warn(`[SkillsManager] ${what} failed`, msg);
+    setError(`${what} failed: ${msg}`);
+    return false;
+  };
 
   const loadList = async () => {
     const token = await getToken();
@@ -72,11 +86,11 @@ export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
   };
 
   const save = async () => {
-    if (!selected || isSelectedBuiltin) return;
+    if (!selected || readOnly) return;
     const token = await getToken();
     if (!token) return;
-    await apiFetch(`/api/skills/${selected}`, token, { method: 'PUT', body: JSON.stringify({ content }) });
-    setDirty(false);
+    const res = await apiFetch(`/api/skills/${selected}`, token, { method: 'PUT', body: JSON.stringify({ content }) });
+    if (await ok(res, 'Save')) setDirty(false);
   };
 
   const submitAction = async () => {
@@ -86,17 +100,18 @@ export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
     if (!token) return;
 
     if (action === 'create') {
-      await apiFetch(`/api/skills/${name}`, token, { method: 'PUT', body: JSON.stringify({ content: '' }) });
+      const res = await apiFetch(`/api/skills/${name}`, token, { method: 'PUT', body: JSON.stringify({ content: '' }) });
+      if (!await ok(res, 'Create')) return;
       await loadList();
       await loadSkill(name);
     } else if (action === 'duplicate' && selected) {
       const res = await apiFetch(`/api/skills/${selected}/duplicate`, token, { method: 'POST', body: JSON.stringify({ newName: name }) });
-      if (!res.ok) return;
+      if (!await ok(res, 'Duplicate')) return;
       await loadList();
       await loadSkill(name);
     } else if (action === 'rename' && selected) {
       const res = await apiFetch(`/api/skills/${selected}/rename`, token, { method: 'POST', body: JSON.stringify({ newName: name }) });
-      if (!res.ok) return;
+      if (!await ok(res, 'Rename')) return;
       await loadList();
       await loadSkill(name);
     }
@@ -109,7 +124,7 @@ export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
     const token = await getToken();
     if (!token) return;
     const res = await apiFetch(`/api/skills/${name}`, token, { method: 'DELETE' });
-    if (!res.ok) return;
+    if (!await ok(res, 'Delete')) return;
     if (selected === name) { setSelected(null); setContent(''); }
     await loadList();
   };
@@ -120,8 +135,8 @@ export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
     const next = isDefault(defaults, name)
       ? defaults.filter((d) => entryName(d) !== name)
       : [...defaults, name];
-    await apiFetch('/api/skills-defaults', token, { method: 'PUT', body: JSON.stringify(next) });
-    setDefaults(next);
+    const res = await apiFetch('/api/skills-defaults', token, { method: 'PUT', body: JSON.stringify(next) });
+    if (await ok(res, 'Update defaults')) setDefaults(next);
   };
 
 
@@ -163,9 +178,10 @@ export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
                   onClick={() => loadSkill(s)}
                 >
                   <button
-                    className={`shrink-0 transition-colors ${isDefault(defaults, s) ? 'text-amber-500' : 'text-muted-foreground/30 hover:text-amber-400'}`}
-                    onClick={(e) => { e.stopPropagation(); toggleDefault(s); }}
-                    title={isDefault(defaults, s) ? 'Remove from defaults' : 'Set as default (always active)'}
+                    className={`shrink-0 transition-colors ${isDefault(defaults, s) ? 'text-amber-500' : 'text-muted-foreground/30'} ${canEdit && !isDefault(defaults, s) ? 'hover:text-amber-400' : ''}`}
+                    disabled={!canEdit}
+                    onClick={(e) => { e.stopPropagation(); if (canEdit) toggleDefault(s); }}
+                    title={!canEdit ? (isDefault(defaults, s) ? 'Default (only an owner can change)' : 'Only an owner can change defaults') : isDefault(defaults, s) ? 'Remove from defaults' : 'Set as default (always active)'}
                   >
                     <Star className={`w-3 h-3 ${isDefault(defaults, s) ? 'fill-current' : ''}`} />
                   </button>
@@ -173,7 +189,7 @@ export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
                   {builtins.includes(s) && (
                     <span title="Built-in (read-only)"><Lock className="w-2.5 h-2.5 text-muted-foreground/40 shrink-0" /></span>
                   )}
-                  {!builtins.includes(s) && (
+                  {!builtins.includes(s) && canEdit && (
                     <button
                       className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive transition-opacity shrink-0"
                       onClick={(e) => { e.stopPropagation(); remove(s); }}
@@ -200,11 +216,14 @@ export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
                   <Button size="icon" className="h-7 w-7 shrink-0" onClick={submitAction}><Check className="w-3 h-3" /></Button>
                   <Button size="icon" variant="ghost" className="h-7 w-7 shrink-0" onClick={cancelAction}><X className="w-3 h-3" /></Button>
                 </div>
-              ) : (
+              ) : canEdit ? (
                 <Button variant="outline" size="sm" className="w-full h-7 text-xs" onClick={() => startAction('create')}>
                   <Plus className="w-3 h-3 mr-1" /> New skill
                 </Button>
+              ) : (
+                <p className="text-[11px] text-muted-foreground text-center">{isOwner === false ? 'Read-only — only an owner can change skills' : ''}</p>
               )}
+              {error && <p className="text-[11px] text-destructive mt-1 break-words">{error}</p>}
             </div>
           </div>
 
@@ -219,7 +238,7 @@ export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
                     <span>{selected}</span>
                   </div>
                   <div className="flex items-center gap-1.5">
-                    {isSelectedBuiltin && (
+                    {readOnly && (
                       <span className="text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded font-medium flex items-center gap-0.5">
                         <Lock className="w-2.5 h-2.5" /> read-only
                       </span>
@@ -234,14 +253,16 @@ export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
                         </span>
                       </>
                     )}
-                    <Button
-                      variant="ghost" size="sm" className="h-6 text-xs px-1.5"
-                      onClick={() => startAction('duplicate')}
-                      title="Duplicate"
-                    >
-                      <Copy className="w-3 h-3" />
-                    </Button>
-                    {!isSelectedBuiltin && (
+                    {canEdit && (
+                      <Button
+                        variant="ghost" size="sm" className="h-6 text-xs px-1.5"
+                        onClick={() => startAction('duplicate')}
+                        title="Duplicate"
+                      >
+                        <Copy className="w-3 h-3" />
+                      </Button>
+                    )}
+                    {!readOnly && (
                       <Button
                         variant="ghost" size="sm" className="h-6 text-xs px-1.5"
                         onClick={() => startAction('rename')}
@@ -250,7 +271,7 @@ export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
                         <Pencil className="w-3 h-3" />
                       </Button>
                     )}
-                    {dirty && !isSelectedBuiltin && (
+                    {dirty && !readOnly && (
                       <Button size="sm" className="h-6 text-xs" onClick={save}>
                         <Check className="w-3 h-3 mr-1" /> Save
                       </Button>
@@ -259,9 +280,9 @@ export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
                 </div>
                 <Textarea
                   value={content}
-                  onChange={(e) => { if (!isSelectedBuiltin) { setContent(e.target.value); setDirty(true); } }}
-                  readOnly={isSelectedBuiltin}
-                  className={`flex-1 resize-none rounded-none border-0 font-mono text-xs focus-visible:ring-0 ${isSelectedBuiltin ? 'opacity-70 cursor-default' : ''}`}
+                  onChange={(e) => { if (!readOnly) { setContent(e.target.value); setDirty(true); } }}
+                  readOnly={readOnly}
+                  className={`flex-1 resize-none rounded-none border-0 font-mono text-xs focus-visible:ring-0 ${readOnly ? 'opacity-70 cursor-default' : ''}`}
                   placeholder="Write the skill instructions here…"
                 />
               </>

package/src/client/components/owner/ApiKeysTab.tsx

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Copy, Loader2, Plus, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ErrorBox, fmtTs, iconBtn, inputCls, selectCls, tdCls, thCls, useAction, type OwnerCall } from './shared';
+
+interface Key { id: string; keyPreview: string; label: string; email: string; createdAt: number; role?: string; expiresAt?: number }
+const EXPIRY: [string, number][] = [['never', 0], ['1 day', 1], ['7 days', 7], ['30 days', 30], ['90 days', 90]];
+
+export function ApiKeysTab({ call, roles }: { call: OwnerCall; roles: string[] }) {
+  const [keys, setKeys] = useState<Key[] | null>(null);
+  const [form, setForm] = useState({ label: '', role: '', days: 0 });
+  const [created, setCreated] = useState<{ key: string; label: string } | null>(null);
+  const { busy, error, run } = useAction();
+  const load = useCallback(async () => setKeys((await call<{ keys: Key[] }>('/api-keys')).keys), [call]);
+  useEffect(() => { run('load', load); }, [load]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const create = () => run('create', async () => {
+    const k = await call<{ key: string; label: string }>('/api-keys', 'POST', {
+      label: form.label || 'Unnamed', ...(form.role ? { role: form.role } : {}),
+      ...(form.days ? { expiresAt: Date.now() + form.days * 86_400_000 } : {}),
+    });
+    setCreated(k);
+    setForm({ label: '', role: '', days: 0 });
+    await load();
+  });
+  const copy = (text: string) => navigator.clipboard.writeText(text).catch((e) => console.warn('[owner] clipboard write failed', e));
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <Input className={`${inputCls} w-48`} placeholder="label" value={form.label} onChange={(e) => setForm({ ...form, label: e.target.value })} />
+        <select className={selectCls} value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })} title="Role cap (never above the creator)">
+          <option value="">role: creator's (uncapped)</option>
+          {roles.map((r) => <option key={r} value={r}>role cap: {r}</option>)}
+        </select>
+        <select className={selectCls} value={form.days} onChange={(e) => setForm({ ...form, days: Number(e.target.value) })}>
+          {EXPIRY.map(([l, d]) => <option key={d} value={d}>expires: {l}</option>)}
+        </select>
+        <Button size="sm" className="h-7 text-xs" disabled={!!busy} onClick={create}>
+          {busy === 'create' ? <Loader2 className="w-3 h-3 mr-1 animate-spin" /> : <Plus className="w-3 h-3 mr-1" />} Create key
+        </Button>
+      </div>
+      {created && (
+        <div className="border border-amber-500/50 bg-amber-500/10 rounded-lg p-2 space-y-1">
+          <p className="text-xs font-medium">Key "{created.label}" — copy it now, it won't be shown again:</p>
+          <div className="flex items-center gap-2">
+            <code className="text-xs font-mono break-all flex-1 select-all">{created.key}</code>
+            <button className={iconBtn} title="Copy" onClick={() => copy(created.key)}><Copy className="w-3.5 h-3.5" /></button>
+            <Button size="sm" variant="ghost" className="h-6 text-xs" onClick={() => setCreated(null)}>Done</Button>
+          </div>
+        </div>
+      )}
+      <ErrorBox error={error} />
+      <div className="border rounded-lg overflow-x-auto">
+        <table className="w-full text-xs">
+          <thead className="bg-muted/40"><tr>
+            <th className={thCls}>Label</th><th className={thCls}>Key</th><th className={thCls}>Creator</th><th className={thCls}>Role</th>
+            <th className={thCls}>Created</th><th className={thCls}>Expires</th><th className={thCls} />
+          </tr></thead>
+          <tbody className="divide-y">
+            {keys?.map((k) => {
+              const expired = k.expiresAt !== undefined && k.expiresAt <= Date.now();
+              return (
+                <tr key={k.id} className={expired ? 'opacity-50' : ''}>
+                  <td className={tdCls}>{k.label}</td>
+                  <td className={`${tdCls} font-mono`}>{k.keyPreview}</td>
+                  <td className={tdCls}>{k.email}</td>
+                  <td className={tdCls}>{k.role ?? <span className="text-muted-foreground">creator's</span>}</td>
+                  <td className={`${tdCls} whitespace-nowrap`}>{fmtTs(k.createdAt)}</td>
+                  <td className={`${tdCls} whitespace-nowrap`}>{k.expiresAt ? `${fmtTs(k.expiresAt)}${expired ? ' (expired)' : ''}` : 'never'}</td>
+                  <td className={`${tdCls} text-right`}>
+                    <button className={`${iconBtn} hover:text-destructive`} title="Revoke" disabled={!!busy}
+                      onClick={() => { if (confirm(`Revoke key "${k.label}" (${k.keyPreview})?`)) run(`rm-${k.id}`, async () => { await call(`/api-keys/${k.id}`, 'DELETE'); await load(); }); }}>
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+            {keys && !keys.length && <tr><td colSpan={7} className="text-center text-muted-foreground py-6">No API keys.</td></tr>}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/src/client/components/owner/AuditTab.tsx

@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Ban, ExternalLink, KeyRound, Loader2, RefreshCw, ShieldAlert, ShieldCheck } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ErrorBox, fmtTs, iconBtn, inputCls, principalActions, selectCls, tdCls, thCls, useAction, type OwnerCall } from './shared';
+
+interface Rec { ts: string; type: string; principal?: string; role?: string; sessionId?: string; target?: string; reason?: string; hash: string }
+interface Verify { ok: boolean; lines: number; brokenAt?: { file: string; line: number; reason: string }; planted?: string[] }
+/** A failed verify: the real break (file:line, or just the file for a whole-file reason) plus any planted month entries. */
+const verifyText = ({ brokenAt: b, planted }: Verify) => [
+  b && !(b.reason === 'not-regular-file' && planted?.length) ? `chain broken at ${b.file || 'audit dir'}${b.line ? `:${b.line}` : ''} (${b.reason})` : '',
+  planted?.length ? `planted entries (not regular files): ${planted.join(', ')}` : '',
+].filter(Boolean).join(' · ') || 'chain verify failed';
+const TYPES = ['auth.allow', 'auth.deny', 'role.resolve', 'turn.start', 'turn.end', 'tool.allow', 'tool.deny', 'guard.limit', 'guard.block',
+  'escalate', 'policy.change', 'policy.tamper', 'key.create', 'key.revoke', 'token.revoke', 'session.delete'];
+const PAGE = 100;
+
+export function AuditTab({ call, onOpenSession, onPolicyChange, ownerIds }: { call: OwnerCall; onOpenSession: (sessionId: string) => void | Promise<void>; onPolicyChange: () => Promise<void>; ownerIds: string[] }) {
+  const [f, setF] = useState({ principal: '', type: '', from: '', to: '' });
+  const [items, setItems] = useState<Rec[]>([]);
+  const [cursor, setCursor] = useState<string | undefined>();
+  const [verify, setVerify] = useState<Verify | null>(null);
+  const [deleted, setDeleted] = useState<ReadonlySet<string>>(new Set());
+  const { busy, error, run } = useAction();
+  const actions = principalActions(call, onPolicyChange, ownerIds);
+  /** Run a per-conversation action; a 404 means it's gone (removed by hand on the box): hide its row actions and say so. */
+  const onSession = (key: string, id: string, fn: () => void | Promise<void>) => run(key, async () => {
+    try { await fn(); } catch (e: any) {
+      if (e?.status !== 404) throw e;
+      setDeleted((s) => new Set(s).add(id));
+      throw new Error('Conversation no longer exists');
+    }
+  });
+
+  const query = (after?: string) => {
+    const q = new URLSearchParams({ limit: String(PAGE) });
+    if (f.principal.trim()) q.set('principal', f.principal.trim());
+    if (f.type) q.set('type', f.type);
+    if (f.from) q.set('from', new Date(f.from).toISOString());
+    if (f.to) q.set('to', new Date(f.to).toISOString());
+    if (after) q.set('cursor', after);
+    return call<{ items: Rec[]; nextCursor?: string }>(`/audit?${q}`);
+  };
+  const search = useCallback(() => run('load', async () => { const p = await query(); setItems(p.items); setCursor(p.nextCursor); }), [call, f]); // eslint-disable-line react-hooks/exhaustive-deps
+  const more = () => run('more', async () => { const p = await query(cursor); setItems((x) => [...x, ...p.items]); setCursor(p.nextCursor); });
+  const check = () => run('verify', async () => setVerify(await call<Verify>('/audit/verify')));
+  useEffect(() => { search(); check(); }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap items-center gap-2">
+        <Input className={`${inputCls} w-56`} placeholder="principal (exact id)" value={f.principal} onChange={(e) => setF({ ...f, principal: e.target.value })} onKeyDown={(e) => e.key === 'Enter' && search()} />
+        <select className={selectCls} value={f.type} onChange={(e) => setF({ ...f, type: e.target.value })}>
+          <option value="">all types</option>
+          {TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+        </select>
+        <label className="text-[10px] text-muted-foreground">from</label>
+        <input type="datetime-local" className={selectCls} value={f.from} onChange={(e) => setF({ ...f, from: e.target.value })} />
+        <label className="text-[10px] text-muted-foreground">to</label>
+        <input type="datetime-local" className={selectCls} value={f.to} onChange={(e) => setF({ ...f, to: e.target.value })} />
+        <Button size="sm" className="h-7 text-xs" disabled={!!busy} onClick={search}>
+          {busy === 'load' ? <Loader2 className="w-3 h-3 mr-1 animate-spin" /> : <RefreshCw className="w-3 h-3 mr-1" />} Search
+        </Button>
+        <div className="flex-1" />
+        {verify && (
+          <button onClick={check} title="Re-verify the hash chain"
+            className={`flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full border ${verify.ok ? 'border-green-500/50 text-green-600 dark:text-green-400' : 'border-destructive text-destructive'}`}>
+            {verify.ok ? <ShieldCheck className="w-3.5 h-3.5" /> : <ShieldAlert className="w-3.5 h-3.5" />}
+            {verify.ok ? `chain verified · ${verify.lines} lines` : verifyText(verify)}
+          </button>
+        )}
+      </div>
+      <ErrorBox error={error} />
+      <div className="border rounded-lg overflow-x-auto">
+        <table className="w-full text-xs">
+          <thead className="bg-muted/40"><tr>
+            <th className={thCls}>Time</th><th className={thCls}>Type</th><th className={thCls}>Principal</th><th className={thCls}>Role</th>
+            <th className={thCls}>Target / reason</th><th className={thCls} />
+          </tr></thead>
+          <tbody className="divide-y">
+            {items.map((r) => (
+              <tr key={r.hash}>
+                <td className={`${tdCls} whitespace-nowrap`} title={r.ts}>{fmtTs(r.ts)}</td>
+                <td className={`${tdCls} font-mono whitespace-nowrap ${/deny|block|tamper/.test(r.type) ? 'text-destructive' : ''}`}>{r.type}</td>
+                <td className={`${tdCls} font-mono break-all`}>
+                  {r.principal ? <button className="hover:underline text-left" title="Filter by this principal" onClick={() => setF({ ...f, principal: r.principal! })}>{r.principal}</button> : '—'}
+                </td>
+                <td className={tdCls}>{r.role ?? '—'}</td>
+                <td className={`${tdCls} break-all`}>{[r.target, r.reason].filter(Boolean).join(' · ') || '—'}</td>
+                <td className={`${tdCls} whitespace-nowrap text-right`}>
+                  {r.sessionId && !deleted.has(r.sessionId) && <button className={`${iconBtn} mr-2`} title="Open session" disabled={!!busy} onClick={() => onSession('open', r.sessionId!, () => onOpenSession(r.sessionId!))}><ExternalLink className="w-3.5 h-3.5" /></button>}
+                  {r.principal && actions.canRevoke(r.principal) && (
+                    <button className={`${iconBtn} mr-2`} title="Revoke tokens" disabled={!!busy} onClick={() => run('rv', () => actions.revoke(r.principal!))}><KeyRound className="w-3.5 h-3.5" /></button>
+                  )}
+                  {r.principal && actions.canBlock(r.principal) && <button className={`${iconBtn} hover:text-destructive`} title="Block principal" disabled={!!busy} onClick={() => run('bl', () => actions.block(r.principal!))}><Ban className="w-3.5 h-3.5" /></button>}
+                </td>
+              </tr>
+            ))}
+            {!items.length && busy !== 'load' && <tr><td colSpan={6} className="text-center text-muted-foreground py-6">No audit records match.</td></tr>}
+          </tbody>
+        </table>
+      </div>
+      {cursor && (
+        <Button size="sm" variant="outline" className="h-7 text-xs" disabled={!!busy} onClick={more}>
+          {busy === 'more' && <Loader2 className="w-3 h-3 mr-1 animate-spin" />} Load older
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/client/components/owner/BindingsTab.tsx

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { ArrowDown, ArrowUp, FlaskConical, Loader2, Plus, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { usePolicyDraft } from './RolesTab';
+import { CsvInput, ErrorBox, iconBtn, inputCls, KINDS, selectCls, useAction, type Match, type OwnerCall, type Policy, type PolicyDoc, type SavePolicy } from './shared';
+
+const KNOWN = new Set(['kind', 'id', 'emailIn', 'domain', 'verified']);
+
+export function BindingsTab({ doc, save, call, onDirty }: { doc: PolicyDoc; save: SavePolicy; call: OwnerCall; onDirty: (dirty: boolean) => void }) {
+  const { draft, setDraft, error, saveBar } = usePolicyDraft(doc, save, onDirty);
+  const roles = Object.keys(draft.roles).filter((r) => r !== 'owner');
+
+  const update = (fn: (b: Policy['bindings']) => Policy['bindings']) => setDraft((d) => ({ ...d, bindings: fn([...d.bindings]) }));
+  /** Empty values are dropped from the match (absent = "any"); unknown match keys are preserved untouched. */
+  const setMatch = (i: number, key: string, v: unknown) => update((b) => {
+    const m: Match = { ...b[i].match };
+    if (v === undefined || v === '' || (Array.isArray(v) && !v.length)) delete m[key]; else m[key] = v;
+    b[i] = { ...b[i], match: m };
+    return b;
+  });
+  const move = (i: number, to: number) => update((b) => { const [x] = b.splice(i, 1); b.splice(to, 0, x); return b; });
+
+  return (
+    <div className="space-y-4">
+      <ErrorBox error={error} />
+      <p className="text-[11px] text-muted-foreground">Ordered — the first matching binding decides the role; no match → default role <b>{draft.default}</b>.</p>
+      <div className="space-y-2">
+        {draft.bindings.map((b, i) => {
+          const extra = Object.entries(b.match).filter(([k]) => !KNOWN.has(k));
+          return (
+            <div key={i} className="border rounded-lg p-2 space-y-1.5">
+              <div className="flex items-center gap-2">
+                <span className="text-[10px] font-mono text-muted-foreground w-5">#{i + 1}</span>
+                <label className="text-[10px] text-muted-foreground">role</label>
+                <select className={selectCls} value={b.role} onChange={(e) => update((x) => { x[i] = { ...x[i], role: e.target.value }; return x; })}>
+                  {!roles.includes(b.role) && <option value={b.role}>{b.role} (invalid)</option>}
+                  {roles.map((r) => <option key={r} value={r}>{r}</option>)}
+                </select>
+                <div className="flex-1" />
+                <button className={iconBtn} title="Move up" disabled={i === 0} onClick={() => move(i, i - 1)}><ArrowUp className="w-3.5 h-3.5" /></button>
+                <button className={iconBtn} title="Move down" disabled={i === draft.bindings.length - 1} onClick={() => move(i, i + 1)}><ArrowDown className="w-3.5 h-3.5" /></button>
+                <button className={`${iconBtn} hover:text-destructive`} title="Remove" onClick={() => update((x) => x.filter((_, j) => j !== i))}><Trash2 className="w-3.5 h-3.5" /></button>
+              </div>
+              <div className="flex flex-wrap items-center gap-2">
+                <select className={selectCls} title="kind" value={b.match.kind ?? ''} onChange={(e) => setMatch(i, 'kind', e.target.value)}>
+                  <option value="">any kind</option>
+                  {KINDS.map((k) => <option key={k} value={k}>{k}</option>)}
+                </select>
+                <select className={selectCls} title="verified" value={b.match.verified === undefined ? '' : String(b.match.verified)} onChange={(e) => setMatch(i, 'verified', e.target.value === '' ? undefined : e.target.value === 'true')}>
+                  <option value="">verified: any</option><option value="true">verified</option><option value="false">unverified</option>
+                </select>
+                <Input className={`${inputCls} w-40`} placeholder="domain" value={b.match.domain ?? ''} onChange={(e) => setMatch(i, 'domain', e.target.value.trim())} />
+                <Input className={`${inputCls} w-48`} placeholder="id (e.g. slack:U123)" value={b.match.id ?? ''} onChange={(e) => setMatch(i, 'id', e.target.value.trim())} />
+                <div className="flex-1 min-w-48"><CsvInput value={b.match.emailIn} onChange={(v) => setMatch(i, 'emailIn', v)} placeholder="emails (comma-separated)" /></div>
+              </div>
+              {extra.length > 0 && <p className="text-[10px] font-mono text-muted-foreground">also matches: {JSON.stringify(Object.fromEntries(extra))}</p>}
+            </div>
+          );
+        })}
+        <Button size="sm" variant="outline" className="h-7 text-xs" disabled={!roles.length}
+          onClick={() => update((b) => [...b, { match: { kind: 'user' }, role: roles.includes('guest') ? 'guest' : roles[roles.length - 1] }])}>
+          <Plus className="w-3 h-3 mr-1" /> Add binding
+        </Button>
+      </div>
+      {saveBar}
+      <TestPrincipal call={call} />
+    </div>
+  );
+}
+
+interface TestResult { principal: string; role: string; rank: number; profile: string; blocked: { reason?: string } | null }
+
+function TestPrincipal({ call }: { call: OwnerCall }) {
+  const [d, setD] = useState({ kind: 'user', email: '', id: '', verified: true, lane: '', role: '' });
+  const [result, setResult] = useState<TestResult | null>(null);
+  const { busy, error, run } = useAction();
+  const set = (patch: Partial<typeof d>) => { setD((x) => ({ ...x, ...patch })); setResult(null); };
+  const test = () => run('test', async () => {
+    setResult(await call<TestResult>('/policy/test', 'POST', {
+      kind: d.kind, verified: d.verified, ...(d.email ? { email: d.email } : {}), ...(d.id ? { id: d.id } : {}),
+      ...(d.lane ? { lane: d.lane } : {}), ...(d.role ? { role: d.role } : {}),
+    }));
+  });
+  return (
+    <section className="border rounded-lg p-3 space-y-2 bg-muted/20">
+      <h3 className="text-xs font-medium flex items-center gap-1.5"><FlaskConical className="w-3.5 h-3.5" /> Test a principal <span className="text-muted-foreground font-normal">(against the SAVED policy)</span></h3>
+      <div className="flex flex-wrap items-center gap-2">
+        <select className={selectCls} value={d.kind} onChange={(e) => set({ kind: e.target.value })}>
+          {KINDS.map((k) => <option key={k} value={k}>{k}</option>)}
+        </select>
+        <Input className={`${inputCls} w-52`} placeholder={d.kind === 'apikey' ? 'creator email' : 'email'} value={d.email} onChange={(e) => set({ email: e.target.value.trim() })} />
+        <Input className={`${inputCls} w-32`} placeholder="id (optional)" value={d.id} onChange={(e) => set({ id: e.target.value.trim() })} />
+        {d.kind === 'internal' && <Input className={`${inputCls} w-28`} placeholder="lane" value={d.lane} onChange={(e) => set({ lane: e.target.value.trim() })} />}
+        {d.kind === 'apikey' && <Input className={`${inputCls} w-28`} placeholder="key role cap" value={d.role} onChange={(e) => set({ role: e.target.value.trim() })} />}
+        <label className="flex items-center gap-1 text-xs"><input type="checkbox" checked={d.verified} onChange={(e) => set({ verified: e.target.checked })} /> verified</label>
+        <Button size="sm" className="h-7 text-xs" disabled={!!busy} onClick={test}>
+          {busy && <Loader2 className="w-3 h-3 mr-1 animate-spin" />} Resolve
+        </Button>
+      </div>
+      <ErrorBox error={error} />
+      {result && (
+        <p className="text-xs font-mono">
+          {result.principal} → role <b>{result.role}</b> · rank {result.rank} · profile <b>{result.profile}</b>
+          {result.blocked && <span className="text-destructive"> · BLOCKED{result.blocked.reason ? ` (${result.blocked.reason})` : ''}</span>}
+        </p>
+      )}
+    </section>
+  );
+}

package/src/client/components/owner/BlocklistTab.tsx

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Loader2, Plus, RefreshCw, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ErrorBox, fmtTs, iconBtn, inputCls, matchLabel, selectCls, tdCls, thCls, useAction, type Match, type OwnerCall } from './shared';
+
+interface Blocks {
+  manual: { index: number; match: Match; until: number | null; reason?: string }[];
+  auto: { key: string; until: number; reason: string; at: number }[];
+}
+const TTL: [string, number][] = [['permanent', 0], ['1 hour', 3600], ['24 hours', 86_400], ['7 days', 604_800], ['30 days', 2_592_000]];
+
+export function BlocklistTab({ call, onPolicyChange }: { call: OwnerCall; onPolicyChange: () => Promise<void> }) {
+  const [blocks, setBlocks] = useState<Blocks | null>(null);
+  const [form, setForm] = useState({ field: 'id', value: '', ttl: 0, reason: '' });
+  const { busy, error, run } = useAction();
+  const load = useCallback(async () => setBlocks(await call<Blocks>('/blocks')), [call]);
+  useEffect(() => { run('load', load); }, [load]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const add = () => run('add', async () => {
+    const v = form.value.trim();
+    const match: Match = form.field === 'emailIn' ? { emailIn: [v] } : { [form.field]: v };
+    await call('/blocks', 'POST', { match, until: form.ttl ? Math.floor(Date.now() / 1000) + form.ttl : null, reason: form.reason });
+    setForm({ ...form, value: '', reason: '' });
+    await Promise.all([load(), onPolicyChange()]);
+  });
+  const remove = (body: object) => run('rm', async () => { await call('/blocks', 'DELETE', body); await Promise.all([load(), onPolicyChange()]); });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <select className={selectCls} value={form.field} onChange={(e) => setForm({ ...form, field: e.target.value })}>
+          <option value="id">principal id</option><option value="emailIn">email</option><option value="domain">domain</option>
+        </select>
+        <Input className={`${inputCls} w-56`} placeholder={form.field === 'id' ? 'user:x@y.com / slack:U123' : form.field === 'domain' ? 'spam.tld' : 'x@y.com'} value={form.value} onChange={(e) => setForm({ ...form, value: e.target.value })} />
+        <select className={selectCls} value={form.ttl} onChange={(e) => setForm({ ...form, ttl: Number(e.target.value) })}>
+          {TTL.map(([l, s]) => <option key={s} value={s}>{l}</option>)}
+        </select>
+        <Input className={`${inputCls} w-40`} placeholder="reason" value={form.reason} onChange={(e) => setForm({ ...form, reason: e.target.value })} />
+        <Button size="sm" className="h-7 text-xs" disabled={!!busy || !form.value.trim()} onClick={add}>
+          {busy === 'add' ? <Loader2 className="w-3 h-3 mr-1 animate-spin" /> : <Plus className="w-3 h-3 mr-1" />} Block
+        </Button>
+        <button className={iconBtn} title="Refresh" onClick={() => run('load', load)}><RefreshCw className={`w-3.5 h-3.5 ${busy === 'load' ? 'animate-spin' : ''}`} /></button>
+      </div>
+      <ErrorBox error={error} />
+
+      <section className="space-y-1">
+        <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Manual (policy)</h3>
+        <div className="border rounded-lg overflow-x-auto">
+          <table className="w-full text-xs">
+            <thead className="bg-muted/40"><tr><th className={thCls}>Match</th><th className={thCls}>Until</th><th className={thCls}>Reason</th><th className={thCls} /></tr></thead>
+            <tbody className="divide-y">
+              {blocks?.manual.map((b) => {
+                const expired = b.until !== null && b.until * 1000 <= Date.now();
+                return (
+                  <tr key={b.index} className={expired ? 'opacity-50' : ''}>
+                    <td className={`${tdCls} font-mono break-all`}>{matchLabel(b.match)}</td>
+                    <td className={`${tdCls} whitespace-nowrap`}>{b.until === null ? 'permanent' : `${fmtTs(b.until * 1000)}${expired ? ' (expired)' : ''}`}</td>
+                    <td className={tdCls}>{b.reason || '—'}</td>
+                    <td className={`${tdCls} text-right`}>
+                      <button className={`${iconBtn} hover:text-destructive`} title="Remove" disabled={!!busy} onClick={() => remove({ source: 'manual', index: b.index, match: b.match })}><Trash2 className="w-3.5 h-3.5" /></button>
+                    </td>
+                  </tr>
+                );
+              })}
+              {blocks && !blocks.manual.length && <tr><td colSpan={4} className="text-center text-muted-foreground py-4">No manual blocks.</td></tr>}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section className="space-y-1">
+        <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Automatic (guard)</h3>
+        <div className="border rounded-lg overflow-x-auto">
+          <table className="w-full text-xs">
+            <thead className="bg-muted/40"><tr><th className={thCls}>Key</th><th className={thCls}>Since</th><th className={thCls}>Until</th><th className={thCls}>Reason</th><th className={thCls} /></tr></thead>
+            <tbody className="divide-y">
+              {blocks?.auto.map((b) => (
+                <tr key={b.key}>
+                  <td className={`${tdCls} font-mono break-all`}>{b.key}</td>
+                  <td className={`${tdCls} whitespace-nowrap`}>{fmtTs(b.at)}</td>
+                  <td className={`${tdCls} whitespace-nowrap`}>{fmtTs(b.until)}</td>
+                  <td className={tdCls}>{b.reason}</td>
+                  <td className={`${tdCls} text-right`}>
+                    <button className={`${iconBtn} hover:text-destructive`} title="Clear" disabled={!!busy} onClick={() => remove({ source: 'auto', key: b.key })}><Trash2 className="w-3.5 h-3.5" /></button>
+                  </td>
+                </tr>
+              ))}
+              {blocks && !blocks.auto.length && <tr><td colSpan={5} className="text-center text-muted-foreground py-4">No active auto-blocks.</td></tr>}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}