Graph management UI — admin page, improved picker, org-style switcher

[charlie83Gs]

Context

PR #166 implemented the backend for multi-graph support (graph-scoped endpoints for all resources, MCP membership checks, RBAC). The frontend has basic graph infrastructure (/graphs list page, /graphs/[slug] detail page, GraphPicker in sidebar), but the UX needs significant improvement for production use.

Current State

What exists:

• /graphs — list page with create form (superuser-only)
• /graphs/[slug] — detail page with member management (add by UUID, change roles, remove)
• GraphPicker in sidebar — dropdown select, hidden when ≤1 graph
• GraphProvider context with activeGraph, switchGeneration, error state
• Full API client: createGraph, deleteGraph, listGraphMembers, addGraphMember, etc.

What's missing:

• No /graphs link in the sidebar navigation — users can't discover the management page
• Graph picker is buried in sidebar, not prominent enough for multi-graph workflows
• Member invites require raw UUIDs — no user search/lookup
• No delete graph UI (API exists but no button/confirmation)
• No graph-level stats (fact count, edge count, last activity)

Requirements

1. Sidebar: Add "Graphs" link to admin nav section

Add a nav item to the admin section of the sidebar that links to /graphs. Only visible to superusers (matches existing admin section pattern for Usage, Source Insights, Members, Settings).

File: frontend/src/components/layout/Sidebar.tsx
Pattern: Follow existing admin nav items (e.g., { href: "/usage", label: "Usage", icon: BarChart3 })
Icon suggestion: Database or Layers from lucide-react

2. Graph picker: GitHub org-style switcher

Replace the current plain <select> dropdown with a more prominent switcher, similar to GitHub's organization picker. Options:

Option A — Top of sidebar (current location, improved UX):

• Show active graph name + icon always (not just when >1 graph)
• Click opens a popover with graph list, search, and "Manage graphs" link
• Show graph status badge (active/error) and node count in the popover

Option B — Navbar/header (like GitHub orgs):

• Add graph switcher to the top-right area of the page header
• Dropdown with graph list + "Manage graphs" link
• Always visible, shows current graph name

Either option should:

• Show the active graph name prominently (not just in collapsed icon mode)
• Include a link to /graphs management page
• Show basic stats per graph (node count from GraphResponse.node_count)

3. /graphs management page improvements

The existing page (frontend/src/app/graphs/page.tsx) needs:

• Delete graph button on each card — with confirmation modal ("Type the slug to confirm" pattern). Call existing api.deleteGraph(slug). Only for non-default graphs, superuser-only.
• Retry provisioning button for graphs in error status. Call existing POST /graphs/{slug}/retry-provision.
• Graph stats on cards — show node_count (already in GraphResponse), member_count, created_at
• Search/filter — filter graphs by name/slug as the list grows
• Empty state — show a helpful message when no non-default graphs exist

4. /graphs/[slug] detail page improvements

The existing page (frontend/src/app/graphs/[slug]/page.tsx) needs:

• Delete graph button with confirmation modal (same pattern as above)
• Member invite by email — add a user search/autocomplete instead of raw UUID input. Use GET /api/v1/members to search users by email.
• Role descriptions — tooltip or help text explaining reader/writer/admin permissions
• Activity stats — fact count, edge count, last research session date
• Danger zone section at bottom for destructive actions (delete, transfer ownership)

Architecture Notes

• All graph API calls go through frontend/src/lib/api.ts (functions already exist: createGraph, deleteGraph, getGraph, updateGraph, listGraphMembers, etc.)
• Graph state is managed via frontend/src/contexts/graph.tsx (useGraph() hook)
• Graph picker component: frontend/src/components/graphs/GraphPicker.tsx
• Sidebar layout: frontend/src/components/layout/Sidebar.tsx
• Use shadcn/ui components (Popover, Dialog, Badge, etc.) — install with pnpm dlx shadcn@latest add <component>
• Named exports for all custom components (not default exports)

Priority

1. Add "Graphs" link to sidebar admin section (5 min)
2. Delete graph with confirmation modal (both list and detail pages)
3. Graph picker UX improvement (org-style switcher)
4. Member invite by email lookup
5. Stats and polish

🤖 Generated with Claude Code

[charlie83Gs]

implemented