How herockone/pi-web works
Pi Web is a local browser workspace for the pi coding agent. The main workflow is selecting a project and session, composing a prompt, sending it through the agent API to the live pi session, and viewing streamed events and results. Separate branches cover session history, project files and Git worktrees, model and resource configuration, and usage reporting. The README documents these capabilities; the sampled source confirms selected route-to-library calls, but not all UI-to-route wiring, so uncertain links are omitted.
Main entry points: page.tsx Workspace page · SessionSidebar.tsx Project navigation · SettingsPanel.tsx Settings panels · useAgentSession.ts Session interaction
Components 26
Session workspace
- Workspace page
app/page.tsx - Chat interface
components/ChatWindow.tsx - Session interaction
hooks/useAgentSession.ts - Session routes
app/api/sessions/route.ts - Session detail
app/api/sessions/[id]/route.ts - Pi session files
lib/session-reader.ts
Agent runtime
- Agent routes
app/api/agent/[id]/route.ts - Agent RPC manager
lib/rpc-manager.ts - Agent event client
lib/agent-event-connection.ts - Pi agent runtime
Project tools
- Project navigation
components/SessionSidebar.tsx - File access routes
app/api/files/[...path]/route.ts - File index route
app/api/file-index/route.ts - Git routes
app/api/git/status/route.ts - Worktree routes
app/api/worktrees/route.ts - Worktree operations
lib/worktree.ts
Models and resources
- Settings panels
components/SettingsPanel.tsx - Model routes
app/api/models/route.ts - Enabled models
app/api/models/enabled/route.ts - Plugin management
app/api/plugins/route.ts - Skills management
app/api/skills/route.ts
Usage reporting
- Usage dashboard
components/UsageStats.tsx - Usage statistics
app/api/usage-stats/route.ts - Usage records
lib/usage-stats.ts - Provider balances
lib/usage-balances.ts
Other components
- Browser user
Connections 26
- Browser user → Workspace page: opens workspace
- Workspace page → Chat interface: shows chat
- Chat interface → Session interaction: submits prompts
- Session interaction → Agent routes: sends commands
- Agent routes → Agent RPC manager: dispatches RPC
- Agent RPC manager → Pi agent runtime: controls session
- Pi agent runtime → Agent RPC manager: emits events
- Session interaction → Agent event client: connects events
- Agent event client → Agent routes: receives stream
- Workspace page → Session routes: loads sessions
- Session routes → Pi session files: reads history
- Session detail → Pi session files: reads and updates
- Workspace page → Project navigation: browses projects
- Project navigation → File access routes: requests files
- Project navigation → File index route: searches files
- Project navigation → Git routes: checks Git
- Project navigation → Worktree routes: manages worktrees
- Worktree routes → Worktree operations: calls operations
- Settings panels → Model routes: loads models
- Settings panels → Enabled models: sets availability
- Settings panels → Plugin management: manages plugins
- Settings panels → Skills management: manages skills
- Workspace page → Usage dashboard: shows usage
- Usage dashboard → Usage statistics: requests statistics
- Usage statistics → Usage records: reads analytics
- Usage statistics → Provider balances: computes and saves