{
  "id": "page:docs-superpowers-plans-2026-06-03-genty-ui-extraction-and-apps",
  "_kind": "Page",
  "_file": "wiki/docs/superpowers/plans/2026-06-03-genty-ui-extraction-and-apps.md",
  "_cluster": "wiki",
  "attributes": {
    "nodeKind": "Page",
    "sourcePath": "docs/superpowers/plans/2026-06-03-genty-ui-extraction-and-apps.md",
    "sourceKind": "repo-docs",
    "title": "genty UI Extraction & App Scaffolding Plan",
    "displayName": "genty UI Extraction & App Scaffolding Plan",
    "slug": "docs/superpowers/plans/2026-06-03-genty-ui-extraction-and-apps",
    "articlePath": "wiki/docs/superpowers/plans/2026-06-03-genty-ui-extraction-and-apps.md",
    "article": "\n# genty UI Extraction & App Scaffolding Plan\n\n> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.\n\n**Goal:** Extract reusable agentic UI components from kradle-web into genty/ui shared library, create genty/web-app (replacing webui), and scaffold genty/desktop-app (Electron) — achieving zero duplication of chat views, tool call renderers, kanban boards, workspace management, and other agentic UI between kradle-web and genty apps.\n\n**Architecture:** Three-layer approach: (1) Extract ~40 generic agentic React components from kradle-web into `packages/genty/ui/src/components/` as framework-agnostic exports, (2) Replace `packages/adapters/webui/` with `packages/genty/web-app/` using Vite + React Router + genty-ui, (3) Scaffold `packages/genty/desktop-app/` as Electron wrapper around the same genty-ui components. Kradle-web retains kradle-specific components (inference, external providers, settings) but imports shared agentic components from `@a5c-ai/genty-ui`.\n\n**Tech Stack:** React 19, Vite, React Router v6, Electron 36, TypeScript, `@a5c-ai/genty-ui` as the shared component library.\n\n---\n\n## Audit Findings\n\n### What exists today\n\n| Package | Location | Build | Components | Purpose |\n|---------|----------|-------|------------|---------|\n| `@a5c-ai/genty-ui` | `packages/genty/ui/` | TS | 90 files | Cross-platform React primitives, session-flow, gateway client, event cards |\n| `@a5c-ai/genty-web-app` | `packages/genty/webui/` | Vite | 76 files | Browser SPA for adapters gateway control |\n| `@a5c-ai/genty-tui` | `packages/genty/tui/` | TS+Ink | 50 files | Terminal UI |\n| `@a5c-ai/kradle-web` | `packages/kradle/web/` | Next.js | 103 files | Kubernetes forge console |\n\n### Component overlap (kradle-web ↔ genty-ui/genty-web-app)\n\n| Domain | Kradle Components | genty Equivalent | Action |\n|--------|-------------------|-----------------|--------|\n| Chat/assistant | assistant-chat, assistant-chat-messages | SessionConversationSurface, EventCards | **Extract kradle → genty/ui** (kradle has richer message rendering) |\n| Tool call rendering | tool-inspector | ToolCallCard, ToolResultCard | **Keep genty/ui** (already well-structured), extend with kradle's inspector |\n| Session management | session-shell, session-cost, session-tabs | SessionFlowView, SessionObservabilityPanel | **Merge** — genty has realtime, kradle has CRD lifecycle |\n| Kanban boards | kanban-enhanced, kanban-card, kanban-column, kanban-filters | KanbanLayout (webui) | **Extract kradle → genty/ui** (kradle is more complete) |\n| Workspace | workspace-panel, workspace-associations, workspace-codespace | WorkspaceDetailShell, WorkspacesPage | **Extract kradle → genty/ui** |\n| Dispatch/run | dispatch-button, run-actions, approval-actions | RunCard, RunList | **Merge** — both have pieces |\n| Command palette | command-palette | - | **Extract to genty/ui** (remove next/navigation dep) |\n| Confirm dialog | confirm-dialog | - | **Extract to genty/ui** |\n| Pagination | pagination | PaginationControls | **Keep genty-web-app's**, extract to genty/ui |\n| Search | global-search | GlobalSearch (webui) | **Keep genty-web-app's**, extract to genty/ui |\n| Code editor | code-editor (CodeMirror) | - | **Keep in kradle** (forge-specific) |\n| Inference/model | inference-*, model-route-*, virtual-model-* | - | **Keep in kradle** (forge-specific) |\n| External providers | external-* | - | **Keep in kradle** (forge-specific) |\n| Jitsi meetings | jitsi-* | - | **Keep in kradle** (forge-specific) |\n| Settings | settings-*, app-settings | SettingsPage (webui) | **Both keep their own** (different domains) |\n| Agent identity | agent-directory, agent-profile-*, agent-persona-*, agent-soul-*, agent-appearance-*, agent-voice-* | - | **Extract to genty/ui** (identity is cross-platform) |\n\n### Components to extract from kradle → genty/ui (~35 files)\n\n**Agentic core (from `components/agent/`):**\n- dispatch-button.jsx → `genty/ui/src/components/Agent/DispatchButton.tsx`\n- run-actions.jsx → `genty/ui/src/components/Agent/RunActions.tsx`\n- approval-actions.jsx → `genty/ui/src/components/Agent/ApprovalActions.tsx`\n- approval-mode-toggle.jsx → `genty/ui/src/components/Agent/ApprovalModeToggle.tsx`\n- session-shell.jsx → `genty/ui/src/components/Session/SessionShell.tsx`\n- session-cost.jsx → `genty/ui/src/components/Session/SessionCost.tsx`\n- session-tabs.jsx → `genty/ui/src/components/Session/SessionTabs.tsx`\n- stack-builder.jsx → `genty/ui/src/components/Agent/StackBuilder.tsx`\n- agent-directory.jsx → `genty/ui/src/components/Agent/AgentDirectory.tsx`\n- agent-profile-card.jsx → `genty/ui/src/components/Agent/AgentProfileCard.tsx`\n- agent-profile-page.jsx → `genty/ui/src/components/Agent/AgentProfilePage.tsx`\n- agent-create-wizard.jsx → `genty/ui/src/components/Agent/AgentCreateWizard.tsx`\n- agent-persona-editor.jsx → `genty/ui/src/components/Agent/AgentPersonaEditor.tsx`\n- agent-soul-editor.jsx → `genty/ui/src/components/Agent/AgentSoulEditor.tsx`\n- agent-appearance-editor.jsx → `genty/ui/src/components/Agent/AgentAppearanceEditor.tsx`\n- agent-voice-editor.jsx → `genty/ui/src/components/Agent/AgentVoiceEditor.tsx`\n\n**Assistant/chat (from `components/assistant/`):**\n- assistant-chat.jsx → `genty/ui/src/components/Chat/AssistantChat.tsx`\n- assistant-chat-messages.jsx → `genty/ui/src/components/Chat/ChatMessages.tsx`\n- assistant-chat-styles.jsx → `genty/ui/src/components/Chat/chatStyles.ts`\n\n**Kanban (from `components/kanban/`):**\n- kanban-enhanced.jsx → `genty/ui/src/components/Kanban/KanbanBoard.tsx`\n- kanban-card.jsx → `genty/ui/src/components/Kanban/KanbanCard.tsx`\n- kanban-column.jsx → `genty/ui/src/components/Kanban/KanbanColumn.tsx`\n- kanban-filters.jsx → `genty/ui/src/components/Kanban/KanbanFilters.tsx`\n- kanban-enhanced-helpers.jsx → `genty/ui/src/components/Kanban/kanbanHelpers.ts`\n\n**Workspace (from `components/workspace/`):**\n- workspace-panel.jsx → `genty/ui/src/components/Workspace/WorkspacePanel.tsx`\n- workspace-associations.jsx → `genty/ui/src/components/Workspace/WorkspaceAssociations.tsx`\n- workspace-codespace.jsx → `genty/ui/src/components/Workspace/WorkspaceCodespace.tsx`\n- memory-search-form.jsx → `genty/ui/src/components/Memory/MemorySearchForm.tsx`\n- memory-ontology-editor.jsx → `genty/ui/src/components/Memory/MemoryOntologyEditor.tsx`\n\n**Shell primitives (from `components/shell/`):**\n- confirm-dialog.jsx → `genty/ui/src/components/Primitives/ConfirmDialog.tsx`\n- pagination.jsx → `genty/ui/src/components/Primitives/Pagination.tsx`\n- command-palette.jsx → `genty/ui/src/components/Primitives/CommandPalette.tsx` (remove next/navigation)\n- notification-bell.jsx → `genty/ui/src/components/Primitives/NotificationBell.tsx`\n\n**Observability (from `components/observability/`):**\n- tool-inspector.jsx → `genty/ui/src/components/Observability/ToolInspector.tsx`\n- activity-feed.jsx → `genty/ui/src/components/Observability/ActivityFeed.tsx`\n\n---\n\n## Phase 1: Extract Components to genty/ui (Tasks 1-4)\n\n### Task 1: Add agentic component directories to genty/ui\n\n**Files:**\n- Create: `packages/genty/ui/src/components/Agent/index.ts`\n- Create: `packages/genty/ui/src/components/Chat/index.ts`\n- Create: `packages/genty/ui/src/components/Kanban/index.ts`\n- Create: `packages/genty/ui/src/components/Workspace/index.ts`\n- Create: `packages/genty/ui/src/components/Memory/index.ts`\n- Create: `packages/genty/ui/src/components/Session/index.ts`\n- Create: `packages/genty/ui/src/components/Observability/index.ts`\n- Create: `packages/genty/ui/src/components/Primitives/index.ts`\n- Modify: `packages/genty/ui/src/index.ts` (add new exports)\n- Modify: `packages/genty/ui/package.json` (add new export paths)\n\nThis task creates the directory structure and barrel exports. No component code yet — just the skeleton.\n\n- [ ] Create each directory with an empty `index.ts` that exports `{}`\n- [ ] Add export paths to `packages/genty/ui/package.json` for each new entry point (e.g. `\"./agent\"`, `\"./chat\"`, `\"./kanban\"`)\n- [ ] Add re-exports from `packages/genty/ui/src/index.ts`\n- [ ] Run `npm run build --workspace=@a5c-ai/genty-ui` to verify\n- [ ] Commit: `feat(genty-ui): add agentic component directory skeleton`\n\n### Task 2: Extract shell primitives (ConfirmDialog, Pagination, CommandPalette, NotificationBell)\n\n**Files:**\n- Create: `packages/genty/ui/src/components/Primitives/ConfirmDialog.tsx`\n- Create: `packages/genty/ui/src/components/Primitives/Pagination.tsx`\n- Create: `packages/genty/ui/src/components/Primitives/CommandPalette.tsx`\n- Create: `packages/genty/ui/src/components/Primitives/NotificationBell.tsx`\n- Modify: `packages/genty/ui/src/components/Primitives/index.ts`\n- Modify: `packages/kradle/web/app/components/shell/confirm-dialog.jsx` (re-export from genty-ui)\n- Modify: `packages/kradle/web/app/components/shell/pagination.jsx` (re-export from genty-ui)\n\nFor each component:\n- [ ] Copy the kradle JSX source to genty/ui as TSX\n- [ ] Remove `'use client'` directive (not needed outside Next.js)\n- [ ] Remove any `next/*` imports, replace with generic React equivalents (e.g. `useRouter` → callback props)\n- [ ] Add TypeScript prop types\n- [ ] Export from barrel index\n- [ ] Build to verify: `npm run build --workspace=@a5c-ai/genty-ui`\n- [ ] Update kradle component to re-export from `@a5c-ai/genty-ui/primitives`\n- [ ] Run kradle tests: `cd packages/kradle/web && npm test`\n- [ ] Commit: `feat(genty-ui): extract shell primitives from kradle`\n\n### Task 3: Extract kanban + chat + session components\n\n**Files:**\n- Create: 5 files in `packages/genty/ui/src/components/Kanban/`\n- Create: 3 files in `packages/genty/ui/src/components/Chat/`\n- Create: 3 files in `packages/genty/ui/src/components/Session/`\n- Modify: kradle kanban/, assistant/, agent/ components to re-export\n\nSame pattern as Task 2 for each component group:\n- [ ] Copy JSX → TSX, remove `'use client'`, add types\n- [ ] Replace kradle-specific imports (orgHref, StatusPill) with prop callbacks\n- [ ] Export from barrel indices\n- [ ] Update kradle components to re-export\n- [ ] Build genty-ui + run kradle tests\n- [ ] Commit: `feat(genty-ui): extract kanban, chat, and session components from kradle`\n\n### Task 4: Extract agent identity + workspace + observability components\n\n**Files:**\n- Create: 10+ files in `packages/genty/ui/src/components/Agent/`\n- Create: 3 files in `packages/genty/ui/src/components/Workspace/`\n- Create: 2 files in `packages/genty/ui/src/components/Memory/`\n- Create: 2 files in `packages/genty/ui/src/components/Observability/`\n- Modify: kradle components to re-export\n\nSame pattern:\n- [ ] Copy, convert, type, export\n- [ ] Update kradle to re-export\n- [ ] Build + test\n- [ ] Commit: `feat(genty-ui): extract agent identity, workspace, and observability components`\n\n---\n\n## Phase 2: Create genty/web-app (Tasks 5-7)\n\n### Task 5: Scaffold genty/web-app package\n\n**Files:**\n- Create: `packages/genty/web-app/package.json`\n- Create: `packages/genty/web-app/tsconfig.json`\n- Create: `packages/genty/web-app/vite.config.ts`\n- Create: `packages/genty/web-app/index.html`\n- Create: `packages/genty/web-app/src/main.tsx`\n- Create: `packages/genty/web-app/src/App.tsx`\n- Create: `packages/genty/web-app/src/routes.tsx`\n- Modify: root `package.json` (add workspace)\n- Modify: `scripts/check-architecture-boundaries.cjs` (add to dispatch-surfaces)\n\n- [ ] Create `package.json` with name `@a5c-ai/genty-web-app`, deps: react, react-dom, react-router-dom, `@a5c-ai/genty-ui`, vite\n- [ ] Create Vite config (same as current genty-web-app)\n- [ ] Create `index.html` with root div\n- [ ] Create `main.tsx` with React root + BrowserRouter\n- [ ] Create `App.tsx` with route layout (sidebar + main)\n- [ ] Create `routes.tsx` with initial routes: /, /sessions, /agents, /kanban, /workspaces\n- [ ] Add to root workspace array\n- [ ] Add to architecture boundaries as dispatch-surface\n- [ ] Build: `npm run build --workspace=@a5c-ai/genty-web-app`\n- [ ] Commit: `feat(genty): scaffold genty/web-app package`\n\n### Task 6: Port core pages from genty-web-app to genty/web-app\n\n**Files:**\n- Create: `packages/genty/web-app/src/pages/HomePage.tsx`\n- Create: `packages/genty/web-app/src/pages/SessionsPage.tsx`\n- Create: `packages/genty/web-app/src/pages/AgentsPage.tsx`\n- Create: `packages/genty/web-app/src/pages/KanbanPage.tsx`\n- Create: `packages/genty/web-app/src/pages/WorkspacesPage.tsx`\n- Create: `packages/genty/web-app/src/pages/SettingsPage.tsx`\n- Create: `packages/genty/web-app/src/layout/AppShell.tsx`\n- Create: `packages/genty/web-app/src/layout/Sidebar.tsx`\n\nFor each page:\n- [ ] Import shared components from `@a5c-ai/genty-ui` (Agent, Session, Kanban, etc.)\n- [ ] Import gateway hooks from `@a5c-ai/genty-ui/gateway`\n- [ ] Compose page layout using genty-ui components\n- [ ] No duplication — pages are thin wrappers around genty-ui components\n- [ ] Build + dev server: `npm run dev --workspace=@a5c-ai/genty-web-app`\n- [ ] Commit: `feat(genty-web-app): port core pages using genty-ui components`\n\n### Task 7: Remove old genty-web-app, update references\n\n**Files:**\n- Delete: `packages/genty/webui/` (entire directory)\n- Modify: root `package.json` (remove old workspace)\n- Modify: `.github/workflows/publish.yml` (update build/test/publish references)\n- Modify: `scripts/check-architecture-boundaries.cjs` (replace @a5c-ai/genty-web-app with @a5c-ai/genty-web-app)\n\n- [ ] Remove old workspace entry\n- [ ] Update workflow: build:webui → build:web-app, test:webui → test:web-app\n- [ ] Update architecture boundary: genty-web-app → genty-web-app\n- [ ] Run boundary check: `node scripts/check-architecture-boundaries.cjs`\n- [ ] Commit: `refactor: replace genty-web-app with genty/web-app`\n\n---\n\n## Phase 3: Scaffold genty/desktop-app (Tasks 8-9)\n\n### Task 8: Create Electron app scaffold\n\n**Files:**\n- Create: `packages/genty/desktop-app/package.json`\n- Create: `packages/genty/desktop-app/tsconfig.json`\n- Create: `packages/genty/desktop-app/src/main.ts` (Electron main process)\n- Create: `packages/genty/desktop-app/src/preload.ts` (preload script)\n- Create: `packages/genty/desktop-app/src/renderer/index.html`\n- Create: `packages/genty/desktop-app/src/renderer/main.tsx` (React entry)\n- Create: `packages/genty/desktop-app/src/renderer/App.tsx`\n- Create: `packages/genty/desktop-app/electron-builder.yml`\n- Modify: root `package.json` (add workspace)\n- Modify: `scripts/check-architecture-boundaries.cjs` (add to dispatch-surfaces)\n\n- [ ] Create `package.json` with name `@a5c-ai/genty-desktop-app`, deps: electron, `@a5c-ai/genty-ui`, react, react-dom, electron-builder\n- [ ] Create `src/main.ts` with BrowserWindow, loadURL for dev or loadFile for prod\n- [ ] Create `src/preload.ts` with contextBridge for IPC\n- [ ] Create renderer `index.html` + `main.tsx` + `App.tsx` (same structure as web-app)\n- [ ] Create `electron-builder.yml` with macOS + Windows + Linux targets\n- [ ] Add scripts: `dev` (electron .), `build` (electron-builder), `package` (electron-builder --dir)\n- [ ] Add to root workspace + architecture boundaries\n- [ ] Build: `npm run build --workspace=@a5c-ai/genty-desktop-app`\n- [ ] Commit: `feat(genty): scaffold genty/desktop-app Electron package`\n\n### Task 9: Wire genty-ui components into desktop app\n\n**Files:**\n- Modify: `packages/genty/desktop-app/src/renderer/App.tsx`\n- Create: `packages/genty/desktop-app/src/renderer/pages/HomePage.tsx`\n- Create: `packages/genty/desktop-app/src/renderer/pages/SessionsPage.tsx`\n- Create: `packages/genty/desktop-app/src/renderer/layout/AppShell.tsx`\n\n- [ ] Import and render genty-ui components (same as web-app pages)\n- [ ] Add Electron-specific features: native menu bar, system tray, auto-updater stub\n- [ ] Dev mode: `npm run dev --workspace=@a5c-ai/genty-desktop-app`\n- [ ] Commit: `feat(genty-desktop-app): wire genty-ui components with Electron shell`\n\n---\n\n## Phase 4: Update kradle-web to consume from genty/ui (Tasks 10-11)\n\n### Task 10: Update kradle-web imports to use genty-ui\n\n**Files:**\n- Modify: `packages/kradle/web/package.json` (add `@a5c-ai/genty-ui` dependency)\n- Modify: `packages/kradle/web/app/components/shell/*.jsx` (import from genty-ui)\n- Modify: `packages/kradle/web/app/components/kanban/*.jsx` (import from genty-ui)\n- Modify: `packages/kradle/web/app/components/agent/*.jsx` (import shared components)\n- Modify: `packages/kradle/web/app/components/assistant/*.jsx` (import from genty-ui)\n- Modify: `packages/kradle/web/app/components/workspace/*.jsx` (import from genty-ui)\n\nFor each kradle component that was extracted:\n- [ ] Replace the component body with a re-export: `export { ConfirmDialog } from '@a5c-ai/genty-ui/primitives'`\n- [ ] Or wrap with kradle-specific props: `export function KradleConfirmDialog(props) { return <ConfirmDialog {...props} theme=\"kradle\" /> }`\n- [ ] Run: `cd packages/kradle/web && npm test && npm run build`\n- [ ] Commit: `refactor(kradle-web): consume shared components from genty-ui`\n\n### Task 11: Update docs, atlas graph, architecture boundaries\n\n**Files:**\n- Modify: `packages/kradle/web/app/components/README.md`\n- Modify: `packages/kradle/docs/gaps/ui-ux-remaining.md`\n- Modify: `scripts/check-architecture-boundaries.cjs` (verify all new packages classified)\n- Create: `packages/genty/web-app/README.md`\n- Create: `packages/genty/desktop-app/README.md`\n\n- [ ] Update kradle component README to note shared components come from genty-ui\n- [ ] Update gaps doc to reflect component extraction\n- [ ] Verify all new packages are in architecture boundary families\n- [ ] Write README for web-app and desktop-app\n- [ ] Run full boundary check\n- [ ] Commit: `docs: update for genty-ui extraction and new app packages`\n\n---\n\n## Verification Checklist\n\nAfter all tasks:\n- [ ] `npm run build --workspace=@a5c-ai/genty-ui` — builds with new components\n- [ ] `npm run build --workspace=@a5c-ai/genty-web-app` — builds standalone\n- [ ] `npm run build --workspace=@a5c-ai/genty-desktop-app` — builds Electron\n- [ ] `cd packages/kradle/web && npm test` — all 300+ tests pass\n- [ ] `cd packages/kradle/web && npm run build` — Next.js build succeeds\n- [ ] `node scripts/check-architecture-boundaries.cjs` — passes\n- [ ] No duplicate component implementations between kradle-web and genty-ui\n",
    "documents": []
  },
  "outgoingEdges": [],
  "incomingEdges": [
    {
      "from": "page:docs",
      "to": "page:docs-superpowers-plans-2026-06-03-genty-ui-extraction-and-apps",
      "kind": "contains_page"
    }
  ]
}