A professional workspace for AI coding agents with: - Real-time streaming chat with SSE - Session management (fork, clone, tree navigation) - MCP tools browser & metadata panel - Skills browser (global, project, package sources) - Voice input & STT provider configuration - Integrated terminal & file explorer - Model selector with capability metadata - Keyboard-first UI with command palette - 8 languages (en, pt-BR, es, ja, zh-CN, ar, bn, hi) - Tauri 2 desktop app - React 19 + TypeScript + Vite 8 + Tailwind CSS 4 - Pi Agent extension runtime Originally forked from OpenCodeUI, now an independent project. License: GPL-3.0-only
5.5 KiB
PiAgentUI STT LAN Real Sessions Project Folders Implementation Plan
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.
Goal: Implement real Pi session creation, project-folder session history, LAN access with QR code, and file-based STT voice input for PiAgentUI.
Architecture: Keep runtime changes inside PiAgentUI's extension backend and focused frontend surfaces. Add pure helpers for network/session grouping/STT settings, test them first, then wire endpoints and UI with minimal component changes.
Tech Stack: TypeScript, React 19, Vite 8, Vitest, Testing Library, Node HTTP extension server, browser MediaRecorder, OpenAI-compatible transcription API.
File Map
extensions/piagentui-server-core.ts: host/origin validation helpers, LAN URL discovery, STT URL/settings sanitization helpers.extensions/piagentui-server-core.test.ts: unit tests for backend helpers.extensions/piagentui-server.ts: real session creation, LAN settings endpoints, STT settings/transcription endpoints, dynamic boot base URL.extensions/piagentui-server.test.ts: integration tests for endpoints.src/types/api/network.ts: network access response/request types.src/api/network.ts,src/api/network.test.ts: client API for LAN access.src/types/api/stt.ts: STT settings/transcription types.src/api/stt.ts,src/api/stt.test.ts: client API for STT.src/hooks/useVoiceTranscription.ts,src/hooks/useVoiceTranscription.test.tsx: browser recording/transcription state machine.src/features/chat/input/VoiceInputButton.tsx,src/features/chat/input/VoiceInputButton.test.tsx: mic UI.src/features/chat/InputBox.tsx: accept voice transcript insertion.src/features/chat/input/InputToolbar.tsx: render voice button.src/features/sessions/sessionProjectGroups.ts,src/features/sessions/sessionProjectGroups.test.ts: pure project grouping.src/features/sessions/SessionList.tsx,src/features/sessions/SessionList.test.tsx: project folder rendering.src/features/settings/components/NetworkAccessSettings.tsx,src/features/settings/components/NetworkAccessSettings.test.tsx: LAN toggle/URL/QR UI.src/features/settings/components/ServersSettings.tsx: include network section.src/locales/en/*.json,src/locales/zh-CN/*.json: minimal labels.package.json: addqrcodeonly if frontend QR generation needs it.
Task 1: Backend helper tests and helpers
- Write tests in
extensions/piagentui-server-core.test.tsfor LAN host validation, local URL discovery injection, and STT URL/settings sanitization. - Implement helpers in
extensions/piagentui-server-core.ts. - Run
npx vitest run extensions/piagentui-server-core.test.ts. - Commit
test/feat: add network and stt backend helpers.
Task 2: Real session creation endpoint
- Add failing tests in
extensions/piagentui-server.test.tsprovingPOST /api/sessionscreates a new.jsonl, callsswitchSession, returns the new id, and returns501withoutswitchSession. - Implement minimal real session file creation in
extensions/piagentui-server.ts. - Run
npx vitest run extensions/piagentui-server.test.ts. - Commit
feat: create real pi sessions from ui.
Task 3: Project folder grouping
- Add failing tests in
src/features/sessions/sessionProjectGroups.test.tsfor Windows/POSIX grouping, basename labels, ordering, and search behavior. - Implement
sessionProjectGroups.ts. - Add/adjust
SessionList.test.tsxfor folders expand/collapse and selection. - Update
SessionList.tsxminimally to render project folders by default when grouped. - Run
npx vitest run src/features/sessions/sessionProjectGroups.test.ts src/features/sessions/SessionList.test.tsx. - Commit
feat: group sessions by project folder.
Task 4: LAN access endpoints and UI
- Add backend endpoint tests for
GET/POST /api/network/access, LAN host allowed only when enabled, and host-based boot data. - Implement network settings persistence and endpoint behavior.
- Add frontend API tests for
src/api/network.ts. - Add
NetworkAccessSettingstests for toggle, URL, and QR placeholder/rendering. - Implement API and settings component.
- Wire it into
ServersSettings.tsx. - Run targeted backend/frontend tests.
- Commit
feat: expose local network access settings.
Task 5: STT settings and transcription backend/client
- Add backend tests for redacted settings, save semantics, invalid URLs, and transcription provider errors.
- Implement settings persistence and transcription endpoint.
- Add
src/api/stt.test.tsand implementsrc/api/stt.ts. - Run targeted tests.
- Commit
feat: add stt settings and transcription api.
Task 6: Voice recording UI
- Add hook tests for permission denied, record/transcribe success, and error path.
- Implement
useVoiceTranscription.ts. - Add
VoiceInputButtontests and component. - Wire
InputToolbarandInputBoxto append transcript to composer without auto-send. - Run targeted tests.
- Commit
feat: add voice transcription composer control.
Task 7: Final validation and review
- Run
npx tsc --noEmit. - Run
npx tsc --noEmit -p tsconfig.extension.json. - Run
npm run test:run. - Run
npm run build. - Run
git diff --check. - Review changed files for unnecessary edits.
- Commit any final fixes.