chore: track all project map and index files

Add generated .pi-map.md and .pi-map.index.md files across the repository
so the project navigation maps are shared and versioned. These artifacts
are maintained by project_map_init/patch/validate and must be kept in
sync with source edits.

Note: .cache/ remains ignored (added in previous commit).
This commit is contained in:
Developer
2026-06-12 13:46:23 +00:00
parent 44ef62271e
commit 070cd4d5a5
642 changed files with 14785 additions and 0 deletions
+40
View File
@@ -0,0 +1,40 @@
# apps/web (index)
dir: apps/web
## role
Browser-based web frontend providing the user-facing React application for code editing, terminal access, and routing functionality.
## parent
index: apps/.pi-map.index.md
map: apps/.pi-map.md
## children
- apps/web/.pi-lens
index: apps/web/.pi-lens/.pi-map.index.md
map: apps/web/.pi-lens/.pi-map.md
- apps/web/public
index: apps/web/public/.pi-map.index.md
map: apps/web/public/.pi-map.md
- apps/web/src
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
## files
- .env.example
- .eslintrc.cjs
- Dockerfile
- index.html
- nginx.conf
- package-lock.json
- package.json
- tsconfig.json
- vite.config.ts
## links
index: apps/web/.pi-map.index.md
map: apps/web/.pi-map.md
## workflows
- change web behavior
read: .env.example, .eslintrc.cjs, Dockerfile
- change web config
read: package-lock.json, package.json, tsconfig.json
- explore web subdirectories
index: apps/web/.pi-lens/.pi-map.index.md, apps/web/public/.pi-map.index.md, apps/web/src/.pi-map.index.md
## dirty
-
+32
View File
@@ -0,0 +1,32 @@
# apps/web
dir: apps/web
index: apps/web/.pi-map.index.md
## role
Browser-based web frontend providing the user-facing React application for code editing, terminal access, and routing functionality.
## files
- .env.example | Template file defining example environment variables for frontend API and application URL configuration
- .eslintrc.cjs | Configures ESLint for a TypeScript browser project with modern ECMAScript module support | dep: @typescript-eslint/parser, @typescript-eslint/eslint-plugin, eslint
- Dockerfile | Multi-stage Docker build for a Node.js/Vite frontend application served by nginx with non-root user security | dep: node:20-alpine, nginx:alpine, npm, wget
- index.html | Standard HTML entry point for a React/Vite application that loads a TypeScript root component | dep: Google Fonts (Inter, IBM Plex Mono), main.tsx entry module
- nginx.conf | Configures nginx as a web server for a single-page application with optimized caching, compression, and client-side routing support. | dep: nginx
- package-lock.json | Records exact dependency versions and resolved URLs for reproducible npm package installation in the "headquarter-web" React project. | dep: npm, @phosphor-icons/react, @types/prismjs, axios, prismjs, react, react-dom, react-router-dom, react-simple-code-editor, tailwindcss, xterm, xterm-addon-fit, xterm-addon-web-links, xterm-addon-webgl, @testing-library/jest-dom, @testing-library/react, @types/react, @types/react-dom, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, @vitejs/plugin-react, autoprefixer, eslint, jsdom, postcss, typescript, vite, vitest, @babel/core, @babel/runtime
- package.json | Configuration file for a React-based web application named "headquarter-web" built with Vite and TypeScript, featuring code editing, terminal, and routing capabilities. | dep: react, react-dom, react-router-dom, vite, typescript, tailwindcss, axios, prismjs, xterm, @phosphor-icons/react, react-simple-code-editor, vitest, eslint
- tsconfig.json | TypeScript configuration file for a React project using Vite with modern ES2020 target and bundler module resolution | dep: typescript, react, vite
- vite.config.ts | Configures Vite build tool for a React project with custom dev server port and Vitest test settings. | dep: vite, @vitejs/plugin-react
## arch
Modern React SPA built with Vite and TypeScript, containerized via multi-stage Docker/nginx deployment with client-side routing and optimized static asset delivery.
## tags
react, eslint, vite, typescript, dom, application, nginx, web
## symbols
-
## workflows
- change web behavior
read: .env.example, .eslintrc.cjs, Dockerfile
- change web config
read: package-lock.json, package.json, tsconfig.json
- explore web subdirectories
index: apps/web/.pi-lens/.pi-map.index.md, apps/web/public/.pi-map.index.md, apps/web/src/.pi-map.index.md
## dirty
-
+19
View File
@@ -0,0 +1,19 @@
# apps/web/public (index)
dir: apps/web/public
## role
Static HTML prototype for UI/UX validation and stakeholder review of the workspace dashboard design before React implementation.
## parent
index: apps/web/.pi-map.index.md
map: apps/web/.pi-map.md
## children
-
## files
- preview.html
## links
index: apps/web/public/.pi-map.index.md
map: apps/web/public/.pi-map.md
## workflows
-
## dirty
-
+19
View File
@@ -0,0 +1,19 @@
# apps/web/public
dir: apps/web/public
index: apps/web/public/.pi-map.index.md
## role
Static HTML prototype for UI/UX validation and stakeholder review of the workspace dashboard design before React implementation.
## files
- preview.html | Static HTML/CSS UI mockup for a "Headquarter" workspace dashboard with interactive page preview switching between Home, Projects, and Settings views. | dep: Google Fonts (Inter, IBM Plex Mono)
## arch
Vanilla HTML/CSS mockup with JavaScript-driven view switching, using CSS Grid/Flexbox layout and class-based DOM manipulation for interactive state transitions.
## tags
preview, static, html, css, mockup, headquarter, workspace, dashboard
## symbols
-
## workflows
-
## dirty
-
+50
View File
@@ -0,0 +1,50 @@
# apps/web/src (index)
dir: apps/web/src
## role
Frontend web application entry point and core infrastructure for a React-based single-page application with authentication, routing, and domain type definitions.
## parent
index: apps/web/.pi-map.index.md
map: apps/web/.pi-map.md
## children
- apps/web/src/api
index: apps/web/src/api/.pi-map.index.md
map: apps/web/src/api/.pi-map.md
- apps/web/src/components
index: apps/web/src/components/.pi-map.index.md
map: apps/web/src/components/.pi-map.md
- apps/web/src/hooks
index: apps/web/src/hooks/.pi-map.index.md
map: apps/web/src/hooks/.pi-map.md
- apps/web/src/pages
index: apps/web/src/pages/.pi-map.index.md
map: apps/web/src/pages/.pi-map.md
- apps/web/src/state
index: apps/web/src/state/.pi-map.index.md
map: apps/web/src/state/.pi-map.md
- apps/web/src/styles
index: apps/web/src/styles/.pi-map.index.md
map: apps/web/src/styles/.pi-map.md
- apps/web/src/test
index: apps/web/src/test/.pi-map.index.md
map: apps/web/src/test/.pi-map.md
- apps/web/src/types
index: apps/web/src/types/.pi-map.index.md
map: apps/web/src/types/.pi-map.md
- apps/web/src/utils
index: apps/web/src/utils/.pi-map.index.md
map: apps/web/src/utils/.pi-map.md
## files
- main.tsx
- router.tsx
- types.ts
## links
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
## workflows
- change src behavior
read: main.tsx, router.tsx, types.ts
- explore src subdirectories
index: apps/web/src/api/.pi-map.index.md, apps/web/src/components/.pi-map.index.md, apps/web/src/hooks/.pi-map.index.md
## dirty
-
+30
View File
@@ -0,0 +1,30 @@
# apps/web/src
dir: apps/web/src
index: apps/web/src/.pi-map.index.md
## role
Frontend web application entry point and core infrastructure for a React-based single-page application with authentication, routing, and domain type definitions.
## files
- main.tsx | Entry point that bootstraps a React SPA with routing, authentication, and session management context providers. | dep: react, react-dom/client, react-router-dom, ./router, ./state/auth, ./state/sessions, ./styles/tokens.css, ./styles/global.css, ./styles/utilities.css, ./styles/syntax-highlight.css, ./styles/pages/git-history.css, ./styles/pages/repo-workspace.css, ./styles/pages/projects.css, ./styles/pages/sessions.css, ./styles/pages/ssh-keys.css, ./styles/pages/workspace-detail.css, ./styles/pages/workspaces.css, react-dom, ./styles/*
- router.tsx | Defines the React Router configuration for a web application with protected routes, nested layouts, and redirects. | exp: AppRouter | dep: react-router-dom, ./components/app-shell, ./components/protected-route, ./pages/DashboardPage, ./pages/PlaceholderPage, ./pages/ProfilePage, ./pages/ProjectsPage, ./pages/GitRepositoriesPage, ./pages/GitHistoryPage, ./pages/ProjectSettingsPage, ./pages/SettingsPage, ./pages/TerminalPage, ./pages/ToolWorkshopPage, ./pages/SshKeysPage, ./pages/ConfigProfilesPage, ./pages/SessionsPage, ./pages/WorkspacesPage, ./pages/WorkspaceDetailPage
- types.ts | Defines TypeScript type definitions for user sessions, projects, repositories, and workspaces in an application. | exp: SessionUser, SessionPayload, Project, WorkspaceSummary, RepositorySummary, ProjectWithRepos
## arch
Layered React SPA architecture using context providers for cross-cutting concerns (auth/session), declarative routing with protected route guards and nested layouts, and centralized TypeScript type definitions for domain models.
## tags
pages, styles, css, router, react, session, dom, workspace
## symbols
- AppRouter
- SessionUser
- SessionPayload
- Project
- WorkspaceSummary
- RepositorySummary
- ProjectWithRepos
## workflows
- change src behavior
read: main.tsx, router.tsx, types.ts
- explore src subdirectories
index: apps/web/src/api/.pi-map.index.md, apps/web/src/components/.pi-map.index.md, apps/web/src/hooks/.pi-map.index.md
## dirty
-
+44
View File
@@ -0,0 +1,44 @@
# apps/web/src/api (index)
dir: apps/web/src/api
## role
Provides typed HTTP API client modules and interfaces for all backend communication in the web application, covering domains from authentication and user management to workspaces, tools, git, terminals, and real-time events.
## parent
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
## children
-
## files
- client.ts
- config-profiles.ts
- dashboard.ts
- events.ts
- git-repositories.ts
- notifications.ts
- profile.ts
- projects.ts
- sessions.ts
- settings.ts
- ssh-keys.ts
- terminal.ts
- tool-definitions.ts
- tool-types.test.ts
- tool-types.ts
- workspace-files.ts
- workspace-git.ts
- workspace-instances.ts
- workspaces.ts
## links
index: apps/web/src/api/.pi-map.index.md
map: apps/web/src/api/.pi-map.md
## workflows
- change api behavior
read: client.ts, config-profiles.ts, dashboard.ts
- update api tests
read: tool-types.test.ts
- change api CLI
read: client.ts
- change api config
read: config-profiles.ts
## dirty
-
+51
View File
@@ -0,0 +1,51 @@
# apps/web/src/api
dir: apps/web/src/api
index: apps/web/src/api/.pi-map.index.md
## role
Provides typed HTTP API client modules and interfaces for all backend communication in the web application, covering domains from authentication and user management to workspaces, tools, git, terminals, and real-time events.
## files
- client.ts | Configures an Axios HTTP client with automatic 401 redirect handling and exponential backoff retry logic for transient network/server errors. | exp: apiClient, shouldSkipAuthRedirect | dep: axios
- config-profiles.ts | Defines TypeScript interfaces and API client functions for managing configuration profiles with environment variables, mounts, git mounts, file inclusions, and profile resolution. | exp: ConfigProfile, ConfigProfileMount, GitMountMapping, GitMount, ConfigProfileInclude, ResolvedProfile, ResolvedMount, CreateConfigProfileRequest, UpdateConfigProfileRequest, UpdateIncludesRequest, listConfigProfiles, getConfigProfile, createConfigProfile, updateConfigProfile, deleteConfigProfile, updateProfileIncludes, previewConfigProfile, resolveDefaultProfile, ValidateGitUrlResponse, validateGitUrl | dep: ./client, client
- dashboard.ts | Defines a TypeScript type and API function to fetch dashboard summary data from a backend endpoint. | exp: DashboardSummary, getDashboardSummary | dep: ./client
- events.ts | Provides utilities for establishing a Server-Sent Events connection and checking the event stream endpoint status. | exp: func:createEventSource() → EventSource, func:probeEventStreamStatus() → Promise<number | null>, call:setTimeout, call:controller.abort, call:fetch, call:clearTimeout
- git-repositories.ts | Provides a TypeScript API client module for managing Git repositories, branches, commits, and version control operations via HTTP endpoints. | exp: GitRepository, GitRepositoryCreate, URLParseResult, Branch, BranchesResponse, CommitHistoryEntry, CommitHistoryResponse, CommitDetail, GitStatus, CommitResponse, MergeResponse, func:parseGitUrl(url: string) → Promise<URLParseResult>, call:apiClient.post, func:listRepositories(projectId: string) → Promise<GitRepository[]>, func:listAllUserRepositories() → Promise<GitRepository[]>, func:createRepository(projectId: string, data: GitRepositoryCreate) → Promise<GitRepository>, call:apiClient.post, func:createExternalRepository(data: GitRepositoryCreate) → Promise<GitRepository>, func:deleteRepository(projectId: string, repoId: string) → Promise<void>, call:apiClient.delete, func:updateRepositorySshKey(projectId: string, repoId: string, sshKeyId: string | null) → Promise<GitRepository>, call:apiClient.patch, func:listRepositoryBranches(projectId: string, repoId: string) → Promise<BranchesResponse>, call:apiClient.get, func:getRepositoryHistory(projectId: string, repoId: string, branch: string, limit: number) → Promise<CommitHistoryResponse>, call:searchParams.set, call:String, call:searchParams.toString, call:apiClient.get, func:getCommitDetail(projectId: string, repoId: string, commitHash: string) → Promise<CommitDetail>, call:apiClient.get, func:getRepositoryStatus(projectId: string, repoId: string) → Promise<GitStatus>, call:apiClient.get, func:createBranch(projectId: string, repoId: string, name: string, baseBranch: string) → Promise<{ message: string; branch: string }>, call:apiClient.post, func:deleteBranch(projectId: string, repoId: string, branchName: string, force: boolean) → Promise<{ message: string }>, call:apiClient.delete, func:checkoutBranch(projectId: string, repoId: string, branch: string) → Promise<{ message: string; branch: string }>, call:apiClient.post, func:commitChanges(projectId: string, repoId: string, message: string, files: string[]) → Promise<CommitResponse>, call:apiClient.post, func:fetchRepository(projectId: string, repoId: string) → Promise<{ message: string }>, call:apiClient.post, func:pullRepository(projectId: string, repoId: string, branch: string) → Promise<{ message: string }>, call:apiClient.post, func:pushRepository(projectId: string, repoId: string, branch: string) → Promise<{ message: string }>, call:apiClient.post, func:mergeBranches(projectId: string, repoId: string, sourceBranch: string, targetBranch: string, message: string) → Promise<MergeResponse>, call:apiClient.post | dep: ./client, apiClient
- notifications.ts | Defines TypeScript interfaces and API client functions for fetching, reading, dismissing, and clearing user notifications. | exp: NotificationItem, NotificationListResponse, UnreadCountResponse, MarkAllReadResponse, ClearAllResponse, getNotifications, getUnreadCount, markNotificationRead, markAllNotificationsRead, dismissNotification, clearAllNotifications | dep: ./client, apiClient
- profile.ts | Provides API functions for fetching, updating, and uploading avatar for the current user's profile. | exp: UserProfile, ProfileUpdatePayload, getProfile, updateProfile, uploadAvatar | dep: ./client, ../types, apiClient, SessionUser
- projects.ts | Provides typed API functions for CRUD operations on projects via HTTP endpoints. | exp: ProjectCreateInput, ProjectUpdateInput, SetDefaultSSHKeyInput, listProjects, createProject, updateProject, deleteProject, setDefaultSSHKey | dep: ./client, ../types
- sessions.ts | Provides API client functions for managing cloud development tool instances and user sessions via REST endpoints. | exp: ToolInstance, Session, InstanceHealth, func:listInstances(projectId: string, repoId: string) → Promise<ToolInstance[]>, call:apiClient.get, func:createInstance(projectId: string, repoId: string, toolTypeId: string, displayName: string, cloneMode: string, branch: string, newBranch: string, configProfileId: string, sshKeyIds: string[], workspaceId: string) → Promise<ToolInstance>, call:apiClient.post, func:startInstance(projectId: string, repoId: string, instanceId: string, configProfileId: string, sshKeyIds: string[], retries) → Promise<{ status: string; url?: string }>, call:apiClient.post, call:setTimeout, call:startInstance, raise:error, func:stopInstance(projectId: string, repoId: string, instanceId: string) → Promise<{ status: string }>, call:apiClient.post, func:restartInstance(projectId: string, repoId: string, instanceId: string, configProfileId: string, sshKeyIds: string[], retries) → Promise<{ status: string; url?: string }>, call:apiClient.post, call:setTimeout, call:restartInstance, raise:error, func:deleteInstance(projectId: string, repoId: string, instanceId: string, force: boolean) → Promise<void>, call:apiClient.delete, func:getInstance(projectId: string, repoId: string, instanceId: string) → Promise<ToolInstance>, call:apiClient.get, func:getUserSessions() → Promise<Session[]>, call:apiClient.get, func:checkInstanceHealth(projectId: string, repoId: string, instanceId: string) → Promise<InstanceHealth>, call:apiClient.get, func:renameInstance(projectId: string, repoId: string, instanceId: string, displayName: string) → Promise<{ id: string; name: string; display_name: string }>, call:apiClient.patch, func:recreateInstanceTunnel(projectId: string, repoId: string, instanceId: string) → Promise<{ status: string; url?: string }>, call:apiClient.post | dep: axios, ./client
- settings.ts | Defines user configuration interfaces and API functions for fetching and updating user settings via HTTP requests. | exp: UserConfig, UserConfigUpdate, getUserConfig, updateUserConfig | dep: ./client, apiClient
- ssh-keys.ts | Provides a TypeScript API client for SSH key management operations including listing, creating, deleting, and cryptographic signing/verification. | exp: SSHKey, SSHKeyCreate, SignPayloadRequest, SignatureResponse, VerifySignatureRequest, VerifySignatureResponse, func:listSSHKeys() → Promise<SSHKey[]>, func:createSSHKey(data: SSHKeyCreate) → Promise<SSHKey>, func:deleteSSHKey(keyId: string) → Promise<void>, call:apiClient.delete, func:signPayload(keyId: string, data: SignPayloadRequest) → Promise<SignatureResponse>, func:verifySignature(keyId: string, data: VerifySignatureRequest) → Promise<VerifySignatureResponse> | dep: ./client, apiClient
- terminal.ts | Provides a TypeScript API client module for managing remote terminal sessions (CRUD operations) on cloud instances via REST endpoints. | exp: TerminalSession, TerminalSessionListResponse, TerminalSessionCreateRequest, TerminalSessionCreateResponse, func:listTerminalSessions(instanceId: string) → Promise<TerminalSession[]>, call:apiClient.get, func:createTerminalSession(instanceId: string, name: string) → Promise<TerminalSessionCreateResponse>, call:apiClient.post, func:closeTerminalSession(instanceId: string, sessionId: string) → Promise<{ status: string; session_id: string }>, call:apiClient.delete, func:resetTerminalSession(instanceId: string, sessionId: string) → Promise<{ id: string; name: string; status: string }>, call:apiClient.post, func:renameTerminalSession(instanceId: string, sessionId: string, name: string) → Promise<{ id: string; name: string }>, call:apiClient.post | dep: ./client, client
- tool-definitions.ts | Defines TypeScript interfaces and API client functions for CRUD operations and compilation of tool definitions in a containerized tool management system. | exp: ToolDefinitionManifest, CreateToolDefinitionRequest, UpdateToolDefinitionRequest, CompileResult, listToolDefinitions, getToolDefinition, createToolDefinition, updateToolDefinition, deleteToolDefinition, compileToolDefinition | dep: ./client, apiClient
- tool-types.test.ts | Unit tests for tool type API operations including CRUD, validation, and field handling for dockerfile and compose definitions. | dep: vitest, ../api/tool-types, ../api/client
- tool-types.ts | Defines TypeScript interfaces and API client functions for CRUD operations on tool types in a containerized deployment system. | exp: ReadinessProbe, ToolType, CreateToolTypeRequest, UpdateToolTypeRequest, listToolTypes, getToolType, createToolType, updateToolType, deleteToolType, validateToolType | dep: ./client, apiClient
- workspace-files.ts | Provides an API client for listing, reading, and saving workspace files. | exp: FileEntry, func:listWorkspaceFiles(workspaceId: string, path: string) → Promise<FileEntry[]>, func:getWorkspaceFileContent(workspaceId: string, path: string) → Promise<string>, func:saveWorkspaceFile(workspaceId: string, path: string, content: string, commitMessage: string) → Promise<void>, call:apiClient.post | dep: ./client, apiClient
- workspace-git.ts | Provides a typed API client for git operations on remote workspaces via HTTP endpoints. | exp: GitStatus, Commit, func:getGitStatus(workspaceId: string) → Promise<GitStatus>, func:getGitBranches(workspaceId: string) → Promise<{ branches: string[]; current_branch: string }>, func:gitCommit(workspaceId: string, message: string) → Promise<void>, call:apiClient.post, func:gitPush(workspaceId: string) → Promise<void>, call:apiClient.post, func:gitPull(workspaceId: string) → Promise<void>, call:apiClient.post, func:gitFetch(workspaceId: string) → Promise<void>, call:apiClient.post, func:gitCheckout(workspaceId: string, branch: string) → Promise<void>, call:apiClient.post, func:getGitHistory(workspaceId: string, path: string, limit: number) → Promise<Commit[]> | dep: ./client
- workspace-instances.ts | Provides API client functions to list and create workspace tool instances. | exp: func:listWorkspaceInstances(workspaceId: string) → Promise<ToolInstance[]>, func:createWorkspaceInstance(workspaceId: string, toolTypeId: string, displayName: string, configProfileId: string) → Promise<ToolInstance> | dep: ./client, ./sessions
- workspaces.ts | Provides an API client wrapper for CRUD operations and sync functionality on workspaces via HTTP endpoints. | exp: func:listWorkspaces(projectId: string, repoId: string) → Promise<Workspace[]>, call:workspaceUrl, func:listAllWorkspaces() → Promise<Workspace[]>, func:createWorkspace(projectId: string, repoId: string, data: CreateWorkspaceRequest) → Promise<Workspace>, call:workspaceUrl, func:createWorkspaceTopLevel(data: CreateWorkspaceRequest & { repo_id: string }) → Promise<Workspace>, func:getWorkspace(projectId: string, repoId: string, workspaceId: string) → Promise<Workspace>, call:workspaceUrl, func:updateWorkspace(projectId: string, repoId: string, workspaceId: string, data: Partial<CreateWorkspaceRequest>) → Promise<Workspace>, call:workspaceUrl, func:deleteWorkspace(workspaceId: string, force) → Promise<{ status: string }>, func:syncWorkspace(projectId: string, repoId: string, workspaceId: string) → Promise<SyncResult>, call:workspaceUrl | dep: ./client, ../types/workspace, apiClient, Workspace, CreateWorkspaceRequest, SyncResult
## arch
Modular facade pattern with a centralized Axios client instance (client.ts) featuring cross-cutting concerns (auth redirect, retry logic), with each domain exposing isolated typed API function modules that map to REST endpoints; includes SSE for real-time events and mirrors backend domain boundaries.
## tags
call:api, tool, client.post, create, git, profile, client, get
## symbols
- createEventSource
- probeEventStreamStatus
- parseGitUrl
- listRepositories
- listAllUserRepositories
- createRepository
- createExternalRepository
- deleteRepository
## workflows
- change api behavior
read: client.ts, config-profiles.ts, dashboard.ts
- update api tests
read: tool-types.test.ts
- change api CLI
read: client.ts
- change api config
read: config-profiles.ts
## dirty
-
+34
View File
@@ -0,0 +1,34 @@
# apps/web/src/components (index)
dir: apps/web/src/components
## role
Provides reusable, foundational React UI components and utilities for the web application, including layout shell, data visualization, navigation guards, and user feedback systems.
## parent
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
## children
- apps/web/src/components/features
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## files
- app-shell.tsx
- code-editor.tsx
- data-states.tsx
- icon.tsx
- protected-route.test.tsx
- protected-route.tsx
- syntax-highlighter.tsx
- toast-rules.test.ts
- toast-rules.ts
## links
index: apps/web/src/components/.pi-map.index.md
map: apps/web/src/components/.pi-map.md
## workflows
- change components behavior
read: app-shell.tsx, code-editor.tsx, data-states.tsx
- update components tests
read: protected-route.test.tsx, toast-rules.test.ts
- explore components subdirectories
index: apps/web/src/components/features/.pi-map.index.md
## dirty
-
+39
View File
@@ -0,0 +1,39 @@
# apps/web/src/components
dir: apps/web/src/components
index: apps/web/src/components/.pi-map.index.md
## role
Provides reusable, foundational React UI components and utilities for the web application, including layout shell, data visualization, navigation guards, and user feedback systems.
## files
- app-shell.tsx | Renders the main application shell layout with navigation, session management, and responsive mobile/desktop views for a React Router-based app. | exp: AppShell | dep: react-router-dom, ../api/sessions, ../hooks/use-theme, ../state/auth, ../state/sessions, ../hooks/use-mobile-viewport, ../state/events, ../state/toast, ../state/notifications, ../state/session-operations, ./features/notification/event-toast-bridge, ./features/notification/notification-center, ./features/session/session-progress-panel, ./icon, ./features/mobile/mobile-nav, ./features/tool/start-tool-fab, ../utils/icons
- code-editor.tsx | A React component that renders a syntax-highlighted code editor with line numbers using react-simple-code-editor. | exp: CodeEditor | dep: react, react-simple-code-editor, ../utils/language
- data-states.tsx | Provides reusable React components for displaying loading, error, and empty data states in a UI. | exp: LoadingState, ErrorState, EmptyState | dep: ./icon, icon
- icon.tsx | Provides a centralized, type-safe React icon component that maps semantic names to Phosphor icons with configurable size, weight, color, and accessibility attributes. | exp: IconName, IconProps, Icon | dep: react, @phosphor-icons/react
- protected-route.test.tsx | Tests a ProtectedRoute component that guards content based on authentication state | dep: @testing-library/react, react-router-dom, vitest, ./protected-route
- protected-route.tsx | Conditionally renders children or redirects to login based on authentication state | exp: ProtectedRoute | dep: react-router-dom, ../state/auth
- syntax-highlighter.tsx | Renders syntax-highlighted code blocks with optional line numbers and copy-to-clipboard functionality | exp: SyntaxHighlighter | dep: react, ./icon, ../utils/language, React, icon, language (utils)
- toast-rules.test.ts | Unit tests for mapping instance events to toast notification categories and severities | dep: vitest, ./toast-rules, ../types/events
- toast-rules.ts | Maps instance events to toast notifications with deduplication logic to prevent spam | exp: func:mapEventToCategory(event: InstanceEventPayload) → string, call:event.event.startsWith, func:mapEventToSeverity(event: InstanceEventPayload) → "info" | "warning" | "error" | "success", func:handleEventToast(event: InstanceEventPayload) → void, call:shouldShowToast, call:toast.info, call:toast.success, call:toast.warning, call:toast.error, func:clearToastDedup() → void, call:lastToastTime.clear | dep: ../state/toast, ../types/events, toast state module, InstanceEventPayload type
## arch
Component-based architecture with functional React patterns, composition of specialized sub-components (icon, editor, syntax highlighter), separation of concerns via dedicated state-management components (data states, protected routes), and utility modules with pure logic for cross-cutting concerns (toast rules with deduplication).
## tags
toast, state, react, icon, code, event, editor, protected
## symbols
- mapEventToCategory
- mapEventToSeverity
- handleEventToast
- clearToastDedup
- AppShell
- CodeEditor
- LoadingState
- ErrorState
## workflows
- change components behavior
read: app-shell.tsx, code-editor.tsx, data-states.tsx
- update components tests
read: protected-route.test.tsx, toast-rules.test.ts
- explore components subdirectories
index: apps/web/src/components/features/.pi-map.index.md
## dirty
-
@@ -0,0 +1,53 @@
# apps/web/src/components/features (index)
dir: apps/web/src/components/features
## role
Contains reusable React components that implement specific product features and business logic for the web application.
## parent
index: apps/web/src/components/.pi-map.index.md
map: apps/web/src/components/.pi-map.md
## children
- apps/web/src/components/features/config-profiles
index: apps/web/src/components/features/config-profiles/.pi-map.index.md
map: apps/web/src/components/features/config-profiles/.pi-map.md
- apps/web/src/components/features/git
index: apps/web/src/components/features/git/.pi-map.index.md
map: apps/web/src/components/features/git/.pi-map.md
- apps/web/src/components/features/mobile
index: apps/web/src/components/features/mobile/.pi-map.index.md
map: apps/web/src/components/features/mobile/.pi-map.md
- apps/web/src/components/features/notification
index: apps/web/src/components/features/notification/.pi-map.index.md
map: apps/web/src/components/features/notification/.pi-map.md
- apps/web/src/components/features/project
index: apps/web/src/components/features/project/.pi-map.index.md
map: apps/web/src/components/features/project/.pi-map.md
- apps/web/src/components/features/session
index: apps/web/src/components/features/session/.pi-map.index.md
map: apps/web/src/components/features/session/.pi-map.md
- apps/web/src/components/features/settings
index: apps/web/src/components/features/settings/.pi-map.index.md
map: apps/web/src/components/features/settings/.pi-map.md
- apps/web/src/components/features/ssh-keys
index: apps/web/src/components/features/ssh-keys/.pi-map.index.md
map: apps/web/src/components/features/ssh-keys/.pi-map.md
- apps/web/src/components/features/terminal
index: apps/web/src/components/features/terminal/.pi-map.index.md
map: apps/web/src/components/features/terminal/.pi-map.md
- apps/web/src/components/features/tool
index: apps/web/src/components/features/tool/.pi-map.index.md
map: apps/web/src/components/features/tool/.pi-map.md
- apps/web/src/components/features/tool-workshop
index: apps/web/src/components/features/tool-workshop/.pi-map.index.md
map: apps/web/src/components/features/tool-workshop/.pi-map.md
- apps/web/src/components/features/workspace
index: apps/web/src/components/features/workspace/.pi-map.index.md
map: apps/web/src/components/features/workspace/.pi-map.md
## files
## links
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## workflows
-
## dirty
-
@@ -0,0 +1,18 @@
# apps/web/src/components/features
dir: apps/web/src/components/features
index: apps/web/src/components/features/.pi-map.index.md
## role
Contains reusable React components that implement specific product features and business logic for the web application.
## files
## arch
Feature-based component organization with domain-specific UI building blocks, likely composed of atomic design elements (from components/ui) and consumed by page-level routes.
## tags
-
## symbols
-
## workflows
-
## dirty
-
@@ -0,0 +1,22 @@
# apps/web/src/components/features/config-profiles (index)
dir: apps/web/src/components/features/config-profiles
## role
Provides a complete UI subsystem for managing configuration profiles through list, edit, and mobile-responsive views with CRUD operations.
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## children
-
## files
- ConfigProfileEditorPanel.tsx
- ConfigProfileListSidebar.tsx
- ConfigProfilesMobileView.tsx
## links
index: apps/web/src/components/features/config-profiles/.pi-map.index.md
map: apps/web/src/components/features/config-profiles/.pi-map.md
## workflows
- change config-profiles behavior
read: ConfigProfileEditorPanel.tsx, ConfigProfileListSidebar.tsx, ConfigProfilesMobileView.tsx
## dirty
-
@@ -0,0 +1,24 @@
# apps/web/src/components/features/config-profiles
dir: apps/web/src/components/features/config-profiles
index: apps/web/src/components/features/config-profiles/.pi-map.index.md
## role
Provides a complete UI subsystem for managing configuration profiles through list, edit, and mobile-responsive views with CRUD operations.
## files
- ConfigProfileEditorPanel.tsx | React component that renders a form-based editor panel for creating and editing configuration profiles with support for includes, environment variables, runtime hints, files, and mounts. | exp: ConfigProfileEditorPanel | dep: ../../icon, ../git/git-mount-editor, ../../../api/config-profiles, ../../../types, ../../../api/tool-types, React, Icon, GitMountEditor, ConfigProfile, CreateConfigProfileRequest, ResolvedProfile, ProjectWithRepos, ToolType
- ConfigProfileListSidebar.tsx | Renders a sidebar component for listing, selecting, creating, and deleting configuration profiles with visual indicators for default status, scope, and includes. | exp: ConfigProfileListSidebar | dep: ../../icon, ../../../api/config-profiles, Icon, ConfigProfile
- ConfigProfilesMobileView.tsx | Renders a mobile-responsive CRUD interface for managing configuration profiles with list, detail, and edit views. | exp: ConfigProfilesMobileView | dep: ../mobile/mobile-list-view, ../mobile/mobile-detail-view, ../mobile/mobile-edit-view, ../mobile/mobile-fab, ../../icon, ../../../api/config-profiles, MobileListView, MobileDetailView, MobileEditView, MobileFAB, Icon, ConfigProfile, CreateConfigProfileRequest
## arch
Compound component pattern with panel/sidebar/mobile view variants, form-based editor with nested array/object state management, and responsive design splitting desktop (sidebar+panel) from mobile (routed views).
## tags
config, mobile, profiles, profile, view, editor, icon, list
## symbols
- ConfigProfileEditorPanel
- ConfigProfileListSidebar
- ConfigProfilesMobileView
## workflows
- change config-profiles behavior
read: ConfigProfileEditorPanel.tsx, ConfigProfileListSidebar.tsx, ConfigProfilesMobileView.tsx
## dirty
-
@@ -0,0 +1,25 @@
# apps/web/src/components/features/git (index)
dir: apps/web/src/components/features/git
## role
React components providing Git repository management UI including commit, merge, branch operations, and file editing with syntax highlighting.
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## children
-
## files
- commit-dialog.tsx
- commit-panel.tsx
- file-editor.tsx
- git-mount-editor.tsx
- git-toolbar.tsx
- merge-dialog.tsx
## links
index: apps/web/src/components/features/git/.pi-map.index.md
map: apps/web/src/components/features/git/.pi-map.md
## workflows
- change git behavior
read: commit-dialog.tsx, commit-panel.tsx, file-editor.tsx
## dirty
-
@@ -0,0 +1,30 @@
# apps/web/src/components/features/git
dir: apps/web/src/components/features/git
index: apps/web/src/components/features/git/.pi-map.index.md
## role
React components providing Git repository management UI including commit, merge, branch operations, and file editing with syntax highlighting.
## files
- commit-dialog.tsx | A React modal dialog component that displays a diff preview of file changes and allows users to enter a commit message to save those changes. | exp: CommitDialog | dep: react, ../../icon, icon
- commit-panel.tsx | React component that displays git repository changes and provides a form to commit them with a message | exp: CommitPanel | dep: react, ../../../api/git-repositories, api/git-repositories
- file-editor.tsx | A React component that displays and edits repository files with view/edit modes, syntax highlighting, and git commit functionality | exp: FileEditor | dep: react, react-router-dom, ../../../api/client, ../../../state/auth, ../../code-editor, ./commit-dialog, ../../icon, ../../syntax-highlighter, ../../../utils/language, apiClient, useAuth, CodeEditor, CommitDialog, Icon, SyntaxHighlighter, detectLanguage
- git-mount-editor.tsx | A React component for editing Git repository mount configurations with URL validation, branch selection, and path mappings. | exp: GitMountEditor | dep: react, ../../icon, ../../../api/config-profiles, icon, config-profiles
- git-toolbar.tsx | React component providing a toolbar UI for Git repository operations including branch management, fetch/pull/push, merge, and status display with polling. | exp: GitToolbar | dep: react, ../../../api/git-repositories, ../../icon, ./merge-dialog
- merge-dialog.tsx | A React modal dialog component that allows users to merge Git branches with source/target selection, optional commit message, and loading/error/success state handling. | exp: MergeDialog | dep: react, ../../../api/git-repositories, ../../icon, api/git-repositories, icon
## arch
Feature-based component architecture with modular dialog/panel pattern, form-driven state management, and optimistic UI with polling for async git operations.
## tags
git, react, commit, dialog, icon, editor, api, merge
## symbols
- CommitDialog
- CommitPanel
- FileEditor
- GitMountEditor
- GitToolbar
- MergeDialog
## workflows
- change git behavior
read: commit-dialog.tsx, commit-panel.tsx, file-editor.tsx
## dirty
-
@@ -0,0 +1,28 @@
# apps/web/src/components/features/mobile (index)
dir: apps/web/src/components/features/mobile
## role
Provides a complete set of mobile-optimized UI components for building responsive, touch-friendly interfaces across list views, detail views, forms, navigation, modals, and specialized terminal experiences.
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## children
-
## files
- mobile-action-sheet.tsx
- mobile-detail-view.tsx
- mobile-edit-view.tsx
- mobile-fab.tsx
- mobile-list-view.tsx
- mobile-nav.tsx
- mobile-page-header.tsx
- mobile-terminal-header.tsx
- mobile-terminal-wrapper.tsx
## links
index: apps/web/src/components/features/mobile/.pi-map.index.md
map: apps/web/src/components/features/mobile/.pi-map.md
## workflows
- change mobile behavior
read: mobile-action-sheet.tsx, mobile-detail-view.tsx, mobile-edit-view.tsx
## dirty
-
@@ -0,0 +1,35 @@
# apps/web/src/components/features/mobile
dir: apps/web/src/components/features/mobile
index: apps/web/src/components/features/mobile/.pi-map.index.md
## role
Provides a complete set of mobile-optimized UI components for building responsive, touch-friendly interfaces across list views, detail views, forms, navigation, modals, and specialized terminal experiences.
## files
- mobile-action-sheet.tsx | Renders a mobile-optimized action sheet modal with title, configurable action buttons, and cancel option. | exp: MobileActionSheetItem, func:MobileActionSheet({ isOpen, onClose, title, actions, }: MobileActionSheetProps), call:useRef, call:useEffect, call:onClose, call:document.addEventListener, call:document.removeEventListener, call:e.stopPropagation, call:actions.map, call:action.onClick | dep: react, ../../icon, icon
- mobile-detail-view.tsx | A React component that renders a mobile-optimized detail view with a header (back button, title, edit/delete actions) and a field list supporting multiple value types (text, code, JSON, boolean). | exp: MobileDetailView | dep: ../../icon, react
- mobile-edit-view.tsx | A React component that renders a mobile-optimized form for editing data with configurable field types and save/cancel actions. | exp: MobileEditView | dep: react
- mobile-fab.tsx | Renders a floating action button component for mobile with an add icon and configurable click handler and label. | exp: MobileFAB | dep: ../../icon, react, icon
- mobile-list-view.tsx | Renders a searchable mobile-friendly list view with optional icons, subtitles, and click handling | exp: MobileListView | dep: ../../icon, ../../../utils/icons, react, icon, icons
- mobile-nav.tsx | Renders a mobile navigation bar with routing links, a tools group button that opens a bottom sheet, and session count badges | exp: MobileNav | dep: react, react-router-dom, ../../icon, ../tool/tools-bottom-sheet, ../../../utils/icons, icon, tools-bottom-sheet, icons utils
- mobile-page-header.tsx | Renders a mobile-only page header with optional back navigation and custom actions. | exp: func:MobilePageHeader({ title, showBack = true, actions }: MobilePageHeaderProps), call:useNavigate, call:useMobileViewport, call:navigate | dep: react-router-dom, ../../../hooks/use-mobile-viewport, ../../icon, use-mobile-viewport hook, Icon component
- mobile-terminal-header.tsx | Renders a mobile-responsive header for a terminal interface with navigation, title, connection status, font size controls, and close actions. | exp: MobileTerminalHeader | dep: react, ../../icon, icon
- mobile-terminal-wrapper.tsx | Wraps a terminal component with mobile-specific UI including auto-hiding header, virtual keyboard handling, and special keys interface. | exp: MobileTerminalWrapper | dep: react, ../terminal/terminal, ./mobile-terminal-header, ../terminal/special-keys-strip, ../terminal/special-keys-panel, ../../../hooks/use-mobile-viewport, ../../../hooks/use-virtual-keyboard, ../../../hooks/use-auto-hide, ../../../hooks/use-special-keys
## arch
Follows a feature-based component architecture with consistent mobile-first design patterns including bottom sheets, floating action buttons, auto-hiding headers, virtual keyboard handling, and contextual action menus; each component is self-contained with configurable props for titles, actions, field types, and click handlers, suggesting a reusable component library pattern rather than business-logic containers.
## tags
mobile, terminal, view, icon, header, react, sheet, action
## symbols
- MobileActionSheet
- MobilePageHeader
- MobileActionSheetItem
- call:useRef
- call:useEffect
- call:onClose
- call:document.addEventListener
- call:document.removeEventListener
## workflows
- change mobile behavior
read: mobile-action-sheet.tsx, mobile-detail-view.tsx, mobile-edit-view.tsx
## dirty
-
@@ -0,0 +1,27 @@
# apps/web/src/components/features/notification (index)
dir: apps/web/src/components/features/notification
## role
Provides notification UI components and event-to-toast bridging infrastructure for user-facing alerts and notifications.
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## children
-
## files
- event-toast-bridge.test.tsx
- event-toast-bridge.tsx
- notification-center.test.tsx
- notification-center.tsx
- notification-item.test.tsx
- notification-item.tsx
## links
index: apps/web/src/components/features/notification/.pi-map.index.md
map: apps/web/src/components/features/notification/.pi-map.md
## workflows
- change notification behavior
read: event-toast-bridge.tsx, notification-center.tsx, notification-item.tsx
- update notification tests
read: event-toast-bridge.test.tsx, notification-center.test.tsx, notification-item.test.tsx
## dirty
-
@@ -0,0 +1,34 @@
# apps/web/src/components/features/notification
dir: apps/web/src/components/features/notification
index: apps/web/src/components/features/notification/.pi-map.index.md
## role
Provides notification UI components and event-to-toast bridging infrastructure for user-facing alerts and notifications.
## files
- event-toast-bridge.test.tsx | Tests that EventToastBridge correctly filters instance events based on user notification preferences (toast level and muted categories) before triggering toast notifications. | dep: vitest, @testing-library/react, ./event-toast-bridge, ../../../state/events, ../../../api/settings, ../../toast-rules, ../../../types/events, event-toast-bridge, useEventContext, getUserConfig, handleEventToast, InstanceEventPayload
- event-toast-bridge.tsx | Bridges event system to toast notifications by filtering events based on user config and processing them through toast rules | exp: func:EventToastBridge() → JSX.Element | null, call:useEventContext, call:useRef, call:useState, call:useEffect, call:getUserConfig() .then((c) => { setConfig({ notification_toast_level: c.notification_toast_level ?? "all", notification_mute_categories: c.notification_mute_categories ?? [], }); }) .catch, call:setConfig, call:window.addEventListener, call:window.removeEventListener, call:processedRef.current.has, call:processedRef.current.add, call:mapEventToCategory, call:mapEventToSeverity, call:config.notification_mute_categories.includes, call:handleEventToast | dep: react, ../../../state/events, ../../toast-rules, ../../../api/settings, useEventContext, toast-rules, settings api
- notification-center.test.tsx | Tests the NotificationCenter UI component's rendering, interactions, and API integration using Vitest and React Testing Library. | dep: vitest, @testing-library/react, ./notification-center, ../../../state/notifications, ../../../api/notifications, notification-center, notification-provider, notifications-api
- notification-center.tsx | Renders a notification bell icon with a dropdown panel showing notifications, supporting mobile and desktop responsive layouts via React portal. | exp: func:NotificationCenter({ isMobileTerminal = false, }: NotificationCenterProps), call:useNotifications, call:useMobileViewport, call:useRef, call:useState, call:useCallback, call:bellRef.current.getBoundingClientRect, call:setDropdownStyle, call:useEffect, call:updatePosition, call:dropdownRef.current.contains, call:bellRef.current?.contains, call:setIsDropdownOpen, call:document.addEventListener, call:window.addEventListener, call:document.removeEventListener, call:window.removeEventListener, call:refreshList, call:String, call:createPortal, call:notifications.map, call:markAllRead, call:clearAll | dep: react, react-dom, ../../../hooks/use-notifications, ../../../hooks/use-mobile-viewport, ./notification-item, ../../icon, use-notifications, use-mobile-viewport, notification-item, icon
- notification-item.test.tsx | Tests the NotificationItem React component for rendering, styling, and user interaction behaviors. | dep: vitest, @testing-library/react, ./notification-item
- notification-item.tsx | Renders a single notification item with expandable metadata, read/dismiss actions, and severity-based icon display. | exp: NotificationItemProps, func:NotificationItem({ notification, onMarkRead, onDismiss, }: NotificationItemProps), call:useState, call:Object.keys, call:formatRelativeTime, call:Object.entries(notification.metadata).map, call:key.replace, call:formatMetadataValue, call:setExpanded, call:onMarkRead, call:onDismiss | dep: react, ../../icon, ../../../utils/time, ../../../api/notifications, ../../../utils/icons, icon, time, notifications, icons
## arch
React component-based architecture with event-driven toast bridging, responsive portal-based dropdowns, and severity-based conditional rendering with comprehensive Vitest test coverage.
## tags
event, notification, call:use, toast, notifications, listener, react, item
## symbols
- EventToastBridge
- NotificationCenter
- NotificationItem
- call:useEventContext
- call:useRef
- call:useState
- call:useEffect
- call:getUserConfig() .then((c) => { setConfig({ notification_toast_level: c.notification_toast_level ?? "all", notification_mute_categories: c.notification_mute_categories ?? [], }); }) .catch
## workflows
- change notification behavior
read: event-toast-bridge.tsx, notification-center.tsx, notification-item.tsx
- update notification tests
read: event-toast-bridge.test.tsx, notification-center.test.tsx, notification-item.test.tsx
## dirty
-
@@ -0,0 +1,26 @@
# apps/web/src/components/features/project (index)
dir: apps/web/src/components/features/project
## role
Provides UI components for managing projects, including cards, dialogs, and repository settings with full CRUD operations and Git integration.
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## children
-
## files
- ProjectCard.tsx
- ProjectDialog.tsx
- repositories-settings-tab.test.tsx
- repositories-settings-tab.tsx
- repository-create-dialog.tsx
## links
index: apps/web/src/components/features/project/.pi-map.index.md
map: apps/web/src/components/features/project/.pi-map.md
## workflows
- change project behavior
read: ProjectCard.tsx, ProjectDialog.tsx, repositories-settings-tab.tsx
- update project tests
read: repositories-settings-tab.test.tsx
## dirty
-
@@ -0,0 +1,29 @@
# apps/web/src/components/features/project
dir: apps/web/src/components/features/project
index: apps/web/src/components/features/project/.pi-map.index.md
## role
Provides UI components for managing projects, including cards, dialogs, and repository settings with full CRUD operations and Git integration.
## files
- ProjectCard.tsx | Renders an expandable project card displaying project info, repositories, and associated workspaces with CRUD actions. | exp: ProjectCard | dep: ../../icon, ../workspace/workspace-create-form, ../../../types, Icon, WorkspaceCreateForm, ProjectWithRepos, WorkspaceSummary
- ProjectDialog.tsx | Renders a modal dialog for creating or editing a project with name/description inputs and cancel/submit actions. | exp: ProjectDialog | dep: ../../icon, React, icon
- repositories-settings-tab.test.tsx | Tests the RepositoriesSettingsTab component's repository creation flows including full URL cloning, owner/repo mode with SSH key selection, and SSH URL validation. | dep: @testing-library/react, vitest, ./repositories-settings-tab, ../../../api/git-repositories, ../../../api/ssh-keys, react-router-dom
- repositories-settings-tab.tsx | A React component that displays and manages Git repositories for a project, allowing users to list, create, and delete repositories. | exp: RepositoriesSettingsTab | dep: react, react-router-dom, ../../../api/git-repositories, ./repository-create-dialog, ../../icon
- repository-create-dialog.tsx | React dialog component for creating or cloning Git repositories with URL validation and SSH key selection. | exp: RepositoryCreateDialog | dep: react, ../../../api/git-repositories, ../../../api/ssh-keys, ../../icon
## arch
Feature-based component architecture with compound UI patterns (card/dialog/tab), form handling for CRUD, and SSH-aware Git repository management with validation testing.
## tags
repositories, project, dialog, react, create, settings, icon, repository
## symbols
- ProjectCard
- ProjectDialog
- RepositoriesSettingsTab
- RepositoryCreateDialog
## workflows
- change project behavior
read: ProjectCard.tsx, ProjectDialog.tsx, repositories-settings-tab.tsx
- update project tests
read: repositories-settings-tab.test.tsx
## dirty
-
@@ -0,0 +1,23 @@
# apps/web/src/components/features/session (index)
dir: apps/web/src/components/features/session
## role
Provides UI components for managing development environment sessions including creation, listing, monitoring progress, and interacting with individual sessions.
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## children
-
## files
- create-session-form.tsx
- session-card.tsx
- session-list.tsx
- session-progress-panel.tsx
## links
index: apps/web/src/components/features/session/.pi-map.index.md
map: apps/web/src/components/features/session/.pi-map.md
## workflows
- change session behavior
read: create-session-form.tsx, session-card.tsx, session-list.tsx
## dirty
-
@@ -0,0 +1,30 @@
# apps/web/src/components/features/session
dir: apps/web/src/components/features/session
index: apps/web/src/components/features/session/.pi-map.index.md
## role
Provides UI components for managing development environment sessions including creation, listing, monitoring progress, and interacting with individual sessions.
## files
- create-session-form.tsx | React form component for creating development sessions with configurable project, repository, tool type, branch, SSH keys, and config profile options | exp: CreateSessionForm | dep: react, ../../icon, ../../../api/sessions, ../../../types, ../../../api/git-repositories, ../../../api/tool-types, ../../../api/ssh-keys, ../../../api/config-profiles, icon component, sessions API, git-repositories API, ssh-keys API, config-profiles API, tool-types API, types
- session-card.tsx | Renders a React card component displaying session information with status badges, inline editing, action buttons, and responsive mobile/desktop layouts. | exp: SessionCardProps, func:SessionCard({ session, onOpen, onStart, onStop, onDelete, onRecreateTunnel, onRename, isBusy = false, tunnelHealth = null, }: SessionCardProps), call:useState, call:useRef, call:useMobileViewport, call:session.tool_type_interfaces?.includes, call:[ "running", "building", "starting", "probing", "pending", "unhealthy", ].includes, call:useEffect, call:optionsRef.current.contains, call:setOptionsOpen, call:document.addEventListener, call:document.removeEventListener, call:window.confirm, call:onDelete, call:setEditName, call:onRename, call:setIsEditingName, call:editName.trim, call:onOpen, call:new Date(session.created_at).toLocaleString, call:setShowActionSheet, call:onStart, call:onStop, call:onRecreateTunnel | dep: react, ../../../api/sessions, ../../icon, ../../../hooks/use-mobile-viewport, ../mobile/mobile-action-sheet, icon, use-mobile-viewport, mobile-action-sheet, sessions api types
- session-list.tsx | Renders a list of sessions grouped by active/recent status or as a flat grid, delegating to SessionCard for individual session display. | exp: SessionListProps, func:SessionList({ sessions, onOpen, onStart, onStop, onDelete, onRecreateTunnel, onRename, actionBusyId = null, tunnelHealth = {}, showGrouping = true, activeTitle = "Active Sessions", recentTitle = "Recent Sessions", maxRecent = 5, emptyMessage = "No sessions", }: SessionListProps), call:sessions.filter, call:activeStatuses.includes, call:sessions .filter((s) => recentStatuses.includes(s.status)) .slice, call:recentStatuses.includes, call:sessions.map, call:activeSessions.map, call:recentSessions.map | dep: ../../../api/sessions, ./session-card, Session, SessionCard, InstanceHealth
- session-progress-panel.tsx | Renders a panel displaying active and recently completed session operations with step-by-step progress indicators and dismissible notifications. | exp: func:SessionProgressPanel(), call:useSessionOperations, call:useEventContext, call:useEffect, call:updateOperationFromEvent, call:operations.filter, call:Date.now, call:visibleOperations.map, call:dismissOperation | dep: react, ../../../state/session-operations, ../../../state/events, ../../icon, useSessionOperations, useEventContext, Icon
## arch
Feature-based component composition with presentational components following a container/presenter pattern, using status-driven conditional rendering and responsive layout adaptations.
## tags
session, call:use, call:on, card, mobile, call:set, event, api
## symbols
- SessionCard
- SessionList
- SessionProgressPanel
- CreateSessionForm
- SessionCardProps
- call:useState
- call:useRef
- call:useMobileViewport
## workflows
- change session behavior
read: create-session-form.tsx, session-card.tsx, session-list.tsx
## dirty
-
@@ -0,0 +1,21 @@
# apps/web/src/components/features/settings (index)
dir: apps/web/src/components/features/settings
## role
Provides the UI components for the application's settings interface, enabling users to configure preferences across multiple categorized tabs.
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## children
-
## files
- GeneralSettingsTab.tsx
- settings-tab-layout.tsx
## links
index: apps/web/src/components/features/settings/.pi-map.index.md
map: apps/web/src/components/features/settings/.pi-map.md
## workflows
- change settings behavior
read: GeneralSettingsTab.tsx, settings-tab-layout.tsx
## dirty
-
@@ -0,0 +1,22 @@
# apps/web/src/components/features/settings
dir: apps/web/src/components/features/settings
index: apps/web/src/components/features/settings/.pi-map.index.md
## role
Provides the UI components for the application's settings interface, enabling users to configure preferences across multiple categorized tabs.
## files
- GeneralSettingsTab.tsx | Renders a general settings tab with theme, git, editor, and notification preferences using shared outlet context | exp: GeneralSettingsTab | dep: react-router-dom, ../../icon, ../../../api/settings
- settings-tab-layout.tsx | Renders a tabbed settings layout with a sidebar navigation and active tab highlighting based on current URL path. | exp: SettingsTabLayout | dep: react, react-router-dom
## arch
Tab-based layout using React Router outlet context for state sharing, with URL-driven navigation and sidebar-based tab switching pattern.
## tags
settings, tab, general, layout, react, renders, router, dom
## symbols
- GeneralSettingsTab
- SettingsTabLayout
## workflows
- change settings behavior
read: GeneralSettingsTab.tsx, settings-tab-layout.tsx
## dirty
-
@@ -0,0 +1,21 @@
# apps/web/src/components/features/ssh-keys (index)
dir: apps/web/src/components/features/ssh-keys
## role
Provides UI components for SSH key lifecycle management including creation and list operations with cryptographic signing/verification features.
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## children
-
## files
- SSHKeyCreateForm.tsx
- SSHKeyList.tsx
## links
index: apps/web/src/components/features/ssh-keys/.pi-map.index.md
map: apps/web/src/components/features/ssh-keys/.pi-map.md
## workflows
- change ssh-keys behavior
read: SSHKeyCreateForm.tsx, SSHKeyList.tsx
## dirty
-
@@ -0,0 +1,22 @@
# apps/web/src/components/features/ssh-keys
dir: apps/web/src/components/features/ssh-keys
index: apps/web/src/components/features/ssh-keys/.pi-map.index.md
## role
Provides UI components for SSH key lifecycle management including creation and list operations with cryptographic signing/verification features.
## files
- SSHKeyCreateForm.tsx | Renders a form for creating/generating a new SSH key with name input and submit button. | exp: SSHKeyCreateForm | dep: ../../icon, React, Icon component
- SSHKeyList.tsx | Renders a list of SSH keys with signing and verification capabilities | exp: SSHKeyList | dep: ../../icon, ../../data-states, ../../../api/ssh-keys, Icon, EmptyState, ErrorState, SSHKey type
## arch
Feature-based component composition with form/list separation pattern, likely using React functional components with hooks for state management and API integration.
## tags
sshkey, form, list, create, ssh, icon, renders, keys
## symbols
- SSHKeyCreateForm
- SSHKeyList
## workflows
- change ssh-keys behavior
read: SSHKeyCreateForm.tsx, SSHKeyList.tsx
## dirty
-
@@ -0,0 +1,28 @@
# apps/web/src/components/features/terminal (index)
dir: apps/web/src/components/features/terminal
## role
Provides cross-platform terminal UI components with session management, special key input, and WebSocket-backed xterm.js integration for web-based terminal emulation.
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## children
-
## files
- DesktopTerminalView.tsx
- MobileTerminalView.tsx
- special-keys-panel.tsx
- special-keys-strip.tsx
- terminal-session-tabs.test.tsx
- terminal-session-tabs.tsx
- terminal.tsx
## links
index: apps/web/src/components/features/terminal/.pi-map.index.md
map: apps/web/src/components/features/terminal/.pi-map.md
## workflows
- change terminal behavior
read: DesktopTerminalView.tsx, MobileTerminalView.tsx, special-keys-panel.tsx
- update terminal tests
read: terminal-session-tabs.test.tsx
## dirty
-
@@ -0,0 +1,35 @@
# apps/web/src/components/features/terminal
dir: apps/web/src/components/features/terminal
index: apps/web/src/components/features/terminal/.pi-map.index.md
## role
Provides cross-platform terminal UI components with session management, special key input, and WebSocket-backed xterm.js integration for web-based terminal emulation.
## files
- DesktopTerminalView.tsx | Renders a desktop-optimized terminal view with session tabs, fullscreen mode, font controls, and reset confirmation dialog | exp: DesktopTerminalView | dep: react, ./terminal, ./terminal-session-tabs, ../../../api/terminal, React, TerminalComponent, TerminalSessionTabs, TerminalSession type
- MobileTerminalView.tsx | Renders a mobile-optimized terminal interface with toolbar, session tabs, terminal output, and special keys input controls. | exp: MobileTerminalView | dep: react, ./terminal, ./terminal-session-tabs, ../../icon, ./special-keys-strip, ./special-keys-panel, ../../../hooks/use-special-keys, ../../../api/terminal
- special-keys-panel.tsx | Renders an overlay panel of special keyboard keys (Home, End, F1-F12, etc.) that sends terminal escape sequences when clicked, with optional modifier key support. | exp: SpecialKeysPanel | dep: react, ../../../hooks/use-special-keys, React, use-special-keys hook
- special-keys-strip.tsx | Renders a strip of buttons for sending special keyboard keys (Esc, Tab, arrows, etc.) with optional modifier support for a terminal interface. | exp: SpecialKeysStrip | dep: react, ../../../hooks/use-special-keys, React, use-special-keys hook
- terminal-session-tabs.test.tsx | Tests a React component that renders interactive terminal session tabs with selection, close confirmation, renaming, creation limits, and status indicators. | dep: @testing-library/react, vitest, ./terminal-session-tabs
- terminal-session-tabs.tsx | Renders a tabbed interface for managing multiple terminal sessions with selection, creation, renaming, and close confirmation features. | exp: TerminalSessionInfo, TerminalSessionTabsProps, TerminalSessionTabs | dep: react, React
- terminal.tsx | React component that renders an interactive xterm.js terminal with WebSocket connectivity, mobile touch support, flow control, heartbeat monitoring, and reconnection logic. | exp: TerminalProps, TerminalRef, TerminalComponent | dep: react, xterm, xterm-addon-fit, xterm-addon-web-links, xterm/css/xterm.css, ../../../hooks/use-special-keys, React, use-special-keys hook
## arch
Feature-based component architecture with platform-specific view splitting (desktop/mobile), compound component pattern for terminal controls, custom hook-driven WebSocket/xterm.js integration with heartbeat/reconnection logic, and Jest-tested tabbed session management.
## tags
terminal, special, keys, session, react, tabs, view, renders
## symbols
- DesktopTerminalView
- MobileTerminalView
- SpecialKeysPanel
- SpecialKeysStrip
- TerminalSessionInfo
- TerminalSessionTabsProps
- TerminalSessionTabs
- TerminalProps
## workflows
- change terminal behavior
read: DesktopTerminalView.tsx, MobileTerminalView.tsx, special-keys-panel.tsx
- update terminal tests
read: terminal-session-tabs.test.tsx
## dirty
-
@@ -0,0 +1,22 @@
# apps/web/src/components/features/tool-workshop (index)
dir: apps/web/src/components/features/tool-workshop
## role
Provides a complete CRUD interface for managing tool types in a "Tool Workshop" feature with desktop and mobile views
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## children
-
## files
- ToolTypeEditorPanel.tsx
- ToolTypeListSidebar.tsx
- ToolWorkshopMobileView.tsx
## links
index: apps/web/src/components/features/tool-workshop/.pi-map.index.md
map: apps/web/src/components/features/tool-workshop/.pi-map.md
## workflows
- change tool-workshop behavior
read: ToolTypeEditorPanel.tsx, ToolTypeListSidebar.tsx, ToolWorkshopMobileView.tsx
## dirty
-
@@ -0,0 +1,26 @@
# apps/web/src/components/features/tool-workshop
dir: apps/web/src/components/features/tool-workshop
index: apps/web/src/components/features/tool-workshop/.pi-map.index.md
## role
Provides a complete CRUD interface for managing tool types in a "Tool Workshop" feature with desktop and mobile views
## files
- ToolTypeEditorPanel.tsx | Renders a form panel for creating or editing tool types with support for compose, dockerfile, and manifest definition types | exp: ToolTypeFormState, ToolTypeEditorPanel | dep: ../../icon, ../tool/manifest-editor, ../../../api/tool-types, ../../../api/tool-definitions, React, Icon, ManifestEditor
- ToolTypeListSidebar.tsx | Renders a sidebar component for listing, selecting, creating, and deleting tool types in a "Tool Workshop" interface. | exp: ToolTypeListSidebar | dep: ../../icon, ../../../api/tool-types, React, Icon component, ToolType type
- ToolWorkshopMobileView.tsx | Renders a mobile-responsive view for managing tool types with list, detail, and edit modes | exp: MobileView, ToolWorkshopMobileView | dep: ../mobile/mobile-list-view, ../mobile/mobile-detail-view, ../mobile/mobile-edit-view, ../mobile/mobile-fab, ../../../api/tool-types, ./ToolTypeEditorPanel, MobileListView, MobileDetailView, MobileEditView, MobileFAB, ToolType, ToolTypeFormState
## arch
Split-pane layout with sidebar list navigation, detail/edit panel, and mobile-responsive view switching using conditional rendering patterns
## tags
tool, mobile, type, view, types, list, panel, editor
## symbols
- ToolTypeFormState
- ToolTypeEditorPanel
- ToolTypeListSidebar
- MobileView
- ToolWorkshopMobileView
## workflows
- change tool-workshop behavior
read: ToolTypeEditorPanel.tsx, ToolTypeListSidebar.tsx, ToolWorkshopMobileView.tsx
## dirty
-
@@ -0,0 +1,25 @@
# apps/web/src/components/features/tool (index)
dir: apps/web/src/components/features/tool
## role
Provides UI components for managing container-based development tools, including instance lifecycle operations, manifest editing, and workspace-integrated tool launching.
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## children
-
## files
- instance-list.tsx
- manifest-editor.tsx
- start-tool-fab.tsx
- start-tool-modal.tsx
- tool-starter.tsx
- tools-bottom-sheet.tsx
## links
index: apps/web/src/components/features/tool/.pi-map.index.md
map: apps/web/src/components/features/tool/.pi-map.md
## workflows
- change tool behavior
read: instance-list.tsx, manifest-editor.tsx, start-tool-fab.tsx
## dirty
-
@@ -0,0 +1,32 @@
# apps/web/src/components/features/tool
dir: apps/web/src/components/features/tool
index: apps/web/src/components/features/tool/.pi-map.index.md
## role
Provides UI components for managing container-based development tools, including instance lifecycle operations, manifest editing, and workspace-integrated tool launching.
## files
- instance-list.tsx | Displays and manages a list of tool instances with CRUD operations, real-time status updates, and configuration profile selection. | exp: InstanceList | dep: react, react-router-dom, ../../icon, ../../../api/sessions, ../../../api/tool-types, ../session/create-session-form, ../../../api/config-profiles, ../../../api/ssh-keys, ../../../state/events, ../../../state/sessions, icon, api/sessions, api/tool-types, api/config-profiles, api/ssh-keys, state/events, state/sessions
- manifest-editor.tsx | A React component that provides a form-based UI for editing container tool definition manifests with fields for base images, packages, user config, environment variables, scripts, mounts, and runtime settings, including compilation preview functionality. | exp: ManifestEditor | dep: react, ../../icon, ../../../utils/errors, ../../../api/tool-definitions, icon, errors, tool-definitions
- start-tool-fab.tsx | A floating action button component that opens a modal to select a workspace and start a tool. | exp: func:StartToolFAB(), call:useState, call:setOpen, call:setWorkspacesLoading, call:listAllWorkspaces, call:setWorkspaces, call:setSelectedWorkspace, call:e.stopPropagation, call:workspaces.find, call:workspaces.map | dep: react, ../../icon, ./tool-starter, ../../../types/workspace, ../../../api/workspaces, icon, tool-starter, workspaces api, workspace types
- start-tool-modal.tsx | Renders a modal dialog for selecting a tool type and optional config profile to start on a workspace. | exp: StartToolModalProps, func:StartToolModal({ workspace, onClose, onStart, }: StartToolModalProps), call:useState, call:useAsyncData, call:e.preventDefault, call:setError, call:setSubmitting, call:onStart, call:onClose, call:e.stopPropagation, call:setToolTypeId, call:toolTypes?.map, call:setConfigProfileId | dep: react, ../../icon, ../../../api/tool-types, ../../../hooks/use-async-data, ../../../types/workspace, icon, tool-types, use-async-data, workspace
- tool-starter.tsx | React component that provides a workspace-first form for starting a new tool instance, fetching tool types, config profiles, and SSH keys dynamically. | exp: ToolStarterProps, func:ToolStarter({ workspace, onStarted, onCancel, }: ToolStarterProps), call:useSessions, call:useSessionOperations, call:useState, call:useEffect, call:listToolTypes, call:setToolTypes, call:setToolTypesError, call:setToolTypesLoading, call:load, call:setProfiles, call:setSelectedProfileId, call:setProfilesLoading, call:listConfigProfiles, call:data.find, call:listSSHKeys, call:setSshKeys, call:setSelectedSshKeyIds, call:console.error, call:setSshKeysLoading, call:sshKeys.find, call:useCallback, call:setError, call:setStarting, call:createInstance, call:displayName.trim, call:startInstance, call:addOrUpdateSession, call:startOperation, call:onStarted, call:setSelectedToolTypeId, call:toolTypes.find, call:setDisplayName, call:toolTypes.map, call:setNameEdited, call:profiles.map, call:sshKeys.map, call:selectedSshKeyIds.includes, call:prev.filter | dep: react, ../../icon, ../../../api/tool-types, ../../../api/config-profiles, ../../../api/ssh-keys, ../../../state/sessions, ../../../state/session-operations, ../../../types/workspace, ../../../api/sessions, icon, tool-types, config-profiles, ssh-keys, sessions, session-operations, workspace
- tools-bottom-sheet.tsx | Renders a mobile bottom sheet navigation menu for tools with active route highlighting | exp: ToolsBottomSheet | dep: react-router-dom, ../../icon, icon
## arch
Feature-based component architecture with form-driven modals, real-time status integration, and responsive mobile/desktop patterns (bottom sheets vs modals)
## tags
tool, call:set, types, call:use, api, start, ssh, icon
## symbols
- StartToolFAB
- StartToolModal
- ToolStarter
- InstanceList
- ManifestEditor
- call:useState
- call:setOpen
- call:setWorkspacesLoading
## workflows
- change tool behavior
read: instance-list.tsx, manifest-editor.tsx, start-tool-fab.tsx
## dirty
-
@@ -0,0 +1,25 @@
# apps/web/src/components/features/workspace (index)
dir: apps/web/src/components/features/workspace
## role
Provides the workspace UI shell and container components that orchestrate the repository browsing, editing, and tool execution environment for the web application.
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
## children
-
## files
- FileBrowser.tsx
- WorkspaceLayout.tsx
- workspace-card.tsx
- workspace-create-form.tsx
- workspace-header.tsx
- workspace-instance-chips.tsx
## links
index: apps/web/src/components/features/workspace/.pi-map.index.md
map: apps/web/src/components/features/workspace/.pi-map.md
## workflows
- change workspace behavior
read: FileBrowser.tsx, WorkspaceLayout.tsx, workspace-card.tsx
## dirty
-
@@ -0,0 +1,32 @@
# apps/web/src/components/features/workspace
dir: apps/web/src/components/features/workspace
index: apps/web/src/components/features/workspace/.pi-map.index.md
## role
Provides the workspace UI shell and container components that orchestrate the repository browsing, editing, and tool execution environment for the web application.
## files
- FileBrowser.tsx | A React component that displays a browsable file tree for a git repository with directory navigation, file status indicators, and URL-based state management. | exp: FileBrowser | dep: react, react-router-dom, ../../../api/client, ../../data-states, ../../icon, ../../../api/git-repositories, apiClient, EmptyState, Icon
- WorkspaceLayout.tsx | Renders a responsive workspace layout that switches between mobile tab-based navigation and desktop sidebar/main panel layout for repository file browsing, editing, git operations, and terminal tools. | exp: WorkspaceLayout | dep: ../../icon, ./FileBrowser, ../git/file-editor, ../git/commit-panel, ../git/git-toolbar, ../tool/instance-list, ../../../api/git-repositories, ../../../api/tool-types, ../../../hooks/use-repo-workspace, Icon, FileBrowser, FileEditor, CommitPanel, GitToolbar, InstanceList, GitRepository, GitStatus, ToolType, Project
- workspace-card.tsx | React card component that displays workspace information with status, metadata, and action buttons | exp: WorkspaceCardProps, func:WorkspaceCard({ workspace, loading = false, onStartTool, onSync, onDelete, }: WorkspaceCardProps), call:onStartTool, call:onSync, call:onDelete | dep: react-router-dom, ../../icon, ./workspace-instance-chips, ../../../types/workspace
- workspace-create-form.tsx | React form component for creating workspaces with cascading project/repository/branch selectors and support for both contextual and standalone modes | exp: WorkspaceCreateFormProps, func:WorkspaceCreateForm({ onSubmit, onCancel, defaultProjectId, defaultRepoId, }: WorkspaceCreateFormProps), call:Boolean, call:useState, call:useGitRepo, call:useEffect, call:git.branches.includes, call:setSelectedBranch, call:setIsNewBranch, call:useCallback, call:listProjects, call:setProjects, call:setSelectedProject, call:setError, call:setFetchingProjects, call:loadProjects, call:setRepos, call:setSelectedRepo, call:listRepositories, call:loadRepos, call:setNewBranchName, call:e.preventDefault, call:name.trim, call:newBranchName.trim, call:setSubmitting, call:createWorkspaceTopLevel, call:onSubmit, call:projects.map, call:repos.map, call:setName, call:handleBranchChange, call:git.branches.map | dep: react, ../../icon, ../../../api/projects, ../../../api/git-repositories, ../../../api/workspaces, ../../../hooks/use-git-repo, ../../../types, icon, api/projects, api/git-repositories, api/workspaces, hooks/use-git-repo, types
- workspace-header.tsx | Renders a workspace header component displaying project info with navigation links to history and settings pages. | exp: WorkspaceHeader | dep: react-router-dom, ../../icon, icon
- workspace-instance-chips.tsx | Displays running tool instances for a workspace as clickable status chips with external links. | exp: func:WorkspaceInstanceChips({ workspaceId, }: WorkspaceInstanceChipsProps), call:useState, call:useEffect, call:listWorkspaceInstances, call:setInstances, call:setLoading, call:load, call:instances.map, call:e.stopPropagation | dep: react, ../../../api/workspace-instances, ../../../api/sessions
## arch
Compound component architecture with responsive layout switching (mobile/desktop), URL-driven state management for file navigation, and feature-based composition combining card/list views, forms, headers, and dynamic tool instance indicators.
## tags
workspace, call:set, git, api, call:use, branch, projects, react
## symbols
- WorkspaceCard
- WorkspaceCreateForm
- WorkspaceInstanceChips
- FileBrowser
- WorkspaceLayout
- WorkspaceCardProps
- call:onStartTool
- call:onSync
## workflows
- change workspace behavior
read: FileBrowser.tsx, WorkspaceLayout.tsx, workspace-card.tsx
## dirty
-
+48
View File
@@ -0,0 +1,48 @@
# apps/web/src/hooks (index)
dir: apps/web/src/hooks
## role
Provides a comprehensive collection of custom React hooks that encapsulate reusable stateful logic, side effects, and API interactions for the web application's UI, data management, and domain-specific operations.
## parent
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
## children
-
## files
- use-async-data.ts
- use-auto-hide.ts
- use-config-profiles.ts
- use-events.test.ts
- use-events.ts
- use-git-repo.ts
- use-instance-actions.ts
- use-mobile-viewport.ts
- use-notifications.test.tsx
- use-notifications.ts
- use-projects.ts
- use-repo-workspace.ts
- use-special-keys.ts
- use-ssh-keys.ts
- use-start-tool.ts
- use-terminal-page.ts
- use-terminal-sessions.ts
- use-theme.ts
- use-tool-workshop.ts
- use-virtual-keyboard.ts
- use-workspace-actions.ts
- use-workspace-files.ts
- use-workspace-git.ts
- use-workspace-instances.ts
- use-workspaces.ts
## links
index: apps/web/src/hooks/.pi-map.index.md
map: apps/web/src/hooks/.pi-map.md
## workflows
- change hooks behavior
read: use-async-data.ts, use-auto-hide.ts, use-config-profiles.ts
- update hooks tests
read: use-events.test.ts, use-notifications.test.tsx
- change hooks config
read: use-config-profiles.ts
## dirty
-
+55
View File
@@ -0,0 +1,55 @@
# apps/web/src/hooks
dir: apps/web/src/hooks
index: apps/web/src/hooks/.pi-map.index.md
## role
Provides a comprehensive collection of custom React hooks that encapsulate reusable stateful logic, side effects, and API interactions for the web application's UI, data management, and domain-specific operations.
## files
- use-async-data.ts | A custom React hook that manages asynchronous data fetching with loading, error, and ready states, plus a manual reload capability. | exp: func:useAsyncData(fetcher: () => Promise<T>, deps: React.DependencyList) → UseAsyncDataResult<T>, call:useState, call:useCallback, call:setStatus, call:setError, call:fetcher, call:setData, call:load, call:useEffect | dep: react
- use-auto-hide.ts | A React custom hook that automatically hides an element after a specified timeout and provides manual controls for showing, hiding, and toggling visibility. | exp: func:useAutoHide(options: AutoHideOptions), call:useState, call:useRef, call:Date.now, call:useCallback, call:setIsVisible, call:clearTimeout, call:setTimeout, call:hide, call:show, call:useEffect | dep: react
- use-config-profiles.ts | A React custom hook that manages config profile CRUD operations, form state, profile inclusion with cycle detection, and drag-and-drop reordering. | exp: useConfigProfiles | dep: react, ../utils/errors, ../api/config-profiles, ../api/projects, ../api/tool-types, ../types
- use-events.test.ts | Tests a React custom hook that manages Server-Sent Events connections with automatic reconnection, backoff strategies, and error handling. | dep: vitest, @testing-library/react, ./use-events, ../api/events, use-events hook, ../api/events module
- use-events.ts | React hook that manages a Server-Sent Events connection with exponential backoff reconnection, event buffering, and auth/rate-limit handling. | exp: UseEventsReturn, func:useEvents() → UseEventsReturn, call:useState, call:useRef, call:useCallback, call:clearTimeout, call:createEventSource, call:setConnected, call:setError, call:setReconnectCount, call:JSON.parse, call:setEvents, call:es.close, call:Math.min, call:Math.pow, call:Math.random, call:setTimeout, call:probeEventStreamStatus, call:window.location.assign, call:connect, call:useEffect, call:esRef.current.close | dep: react, ../api/events, ../types/events
- use-git-repo.ts | A custom React hook that centralizes all git repository operations (branch management, status tracking, commit history, and git actions) into a reusable interface for components. | exp: GitStatus, UseGitRepoResult, func:useGitRepo(projectId: string | undefined, repoId: string | undefined) → UseGitRepoResult, call:useState, call:useCallback, call:setLoading, call:setError, call:fn, call:extractError, call:withLoading, call:listRepositoryBranches, call:setBranches, call:data.branches.map, call:setDefaultBranch, call:getRepositoryStatus, call:setStatus, call:getRepositoryHistory, call:setHistory, call:getCommitDetail, call:setCommitDetail, call:commitChanges, call:refreshStatus, call:pushRepository, call:pullRepository, call:fetchRepository, call:checkoutBranch, call:refreshBranches, call:createBranch, call:deleteBranch, call:mergeBranches, call:refreshHistory, call:useEffect, raise:err | dep: react, ../api/git-repositories
- use-instance-actions.ts | A custom React hook that provides a centralized interface for managing instance/session actions including opening, starting, stopping, deleting, force-deleting, recreating tunnels, and renaming, with loading states and dirty delete handling for conflict resolution. | exp: func:useInstanceActions(options: UseInstanceActionsOptions) → UseInstanceActionsReturn, call:useSessions, call:useSessionOperations, call:useState, call:useRef, call:useCallback, call:tabRefs.current.get, call:existing.focus, call:session.tool_type_interfaces?.includes, call:window.open, call:tabRefs.current.set, call:setLoadingSessionId, call:startOperation, call:startInstance, call:onRefresh, call:completeOperation, call:stopInstance, call:deleteInstance, call:setDirtyDeleteSession, call:setDirtyDeleteFiles, call:removeSession, call:recreateInstanceTunnel, call:alert, call:newName.trim, call:renameInstance | dep: react, ../api/sessions, ../state/sessions, ../state/session-operations
- use-mobile-viewport.ts | A React hook that tracks whether the viewport width is below a mobile breakpoint (768px) | exp: func:useMobileViewport(), call:useState, call:useEffect, call:setIsMobile, call:window.addEventListener, call:window.removeEventListener | dep: react
- use-notifications.test.tsx | Tests the useNotifications custom React hook with mocked API calls, covering optimistic updates, polling behavior, and error handling. | dep: vitest, @testing-library/react, ./use-notifications, ../state/notifications, ../api/notifications, use-notifications
- use-notifications.ts | Custom React hook that provides access to notification state and ensures it's used within a NotificationProvider | exp: func:useNotifications(), call:useContext, raise:Error | dep: react, ../state/notifications
- use-projects.ts | Custom React hook for managing project CRUD operations, workspace management, and dialog state for a project management UI | exp: useProjects | dep: react, ../api/projects, ../api/workspaces, ./use-async-data, ../types
- use-repo-workspace.ts | A React custom hook that manages workspace state for a repository-based project, including loading project data, repositories, branches, git status, and tool types while synchronizing selection state with URL search parameters. | exp: Project, useRepoWorkspace | dep: react, react-router-dom, ../api/client, ../api/git-repositories, ../api/tool-types
- use-special-keys.ts | Maps special keys and modifier+character combinations to ANSI escape sequences for terminal input simulation. | exp: SpecialKey, ModifierKey, func:getSequenceWithModifier(key: SpecialKey, activeModifier: ModifierKey | null) → { sequence: string; clearModifier: boolean } | null, call:char.toLowerCase, func:applyModifierToChar(char: string, modifier: ModifierKey) → string | null, call:char.toLowerCase
- use-ssh-keys.ts | A React custom hook that manages SSH key operations including listing, generating, deleting, signing payloads, and verifying signatures. | exp: useSSHKeys | dep: react, ../api/ssh-keys, ./use-async-data
- use-start-tool.ts | React hook that manages the state and API calls for creating and starting a tool instance on a workspace | exp: UseStartToolResult, func:useStartTool() → UseStartToolResult, call:useState, call:useCallback, call:setStarting, call:setError, call:createInstance, call:startInstance | dep: react, ../api/sessions, ../types/workspace
- use-terminal-page.ts | Manages terminal page state including sessions, keyboard shortcuts, fullscreen mode, mobile viewport handling, and terminal lifecycle operations. | exp: useTerminalPage | dep: react, react-router-dom, ../components/features/terminal/terminal, ../components/features/terminal/terminal-session-tabs, ./use-mobile-viewport, ./use-auto-hide, ./use-virtual-keyboard, ./use-terminal-sessions, ../api/terminal, ./use-special-keys, use-mobile-viewport, use-auto-hide, use-virtual-keyboard, use-terminal-sessions, terminal, terminal-session-tabs, api/terminal, api/sessions, use-special-keys
- use-terminal-sessions.ts | React custom hook that manages terminal session state (CRUD operations, active session tracking) for a given instance | exp: UseTerminalSessionsResult, func:useTerminalSessions(instanceId: string) → UseTerminalSessionsResult, call:useState, call:useCallback, call:setLoading, call:setError, call:listTerminalSessions, call:setSessions, call:setActiveSessionId, call:createTerminalSession, call:closeTerminalSession, call:prev.filter, call:renameTerminalSession, call:prev.map, call:resetTerminalSession, call:loadSessions, call:useEffect | dep: react, ../api/terminal
- use-theme.ts | React hook that fetches user theme preference on mount and applies it to the document root element via data-theme attribute | exp: func:useTheme(), call:useEffect, call:getUserConfig, call:document.documentElement.removeAttribute, call:document.documentElement.setAttribute | dep: react, ../api/settings
- use-tool-workshop.ts | React custom hook that manages state and operations for a tool workshop UI, including CRUD operations for tool types and tool definitions with form handling and validation. | exp: useToolWorkshop | dep: react, ../utils/errors, ../api/tool-types, ../api/tool-definitions, ../components/features/tool-workshop/ToolTypeEditorPanel
- use-virtual-keyboard.ts | React hook that detects virtual keyboard open/close state and measures its height on mobile devices | exp: func:useVirtualKeyboard(), call:useState, call:useCallback, call:setState, call:useEffect, call:visualViewport.addEventListener, call:window.addEventListener, call:updateKeyboardState, call:visualViewport.removeEventListener, call:window.removeEventListener | dep: react
- use-workspace-actions.ts | Provides a React hook that encapsulates workspace CRUD operations with loading state management and user confirmation dialogs for destructive actions. | exp: UseWorkspaceActionsResult, func:useWorkspaceActions() → UseWorkspaceActionsResult, call:useState, call:useCallback, call:createWorkspace, call:setLoadingId, call:deleteWorkspace, call:onRefresh, call:window.confirm, call:instances.map((i) => `- ${i.name}`).join, call:syncWorkspace, call:updateWorkspace, raise:err | dep: react, ../api/workspaces, ../types/workspace
- use-workspace-files.ts | Custom React hook for managing workspace file operations including listing, loading, saving, and navigating files. | exp: UseWorkspaceFilesResult, func:useWorkspaceFiles(workspaceId: string) → UseWorkspaceFilesResult, call:useState, call:useCallback, call:setLoading, call:setError, call:listWorkspaceFiles, call:setEntries, call:setCurrentPath, call:setContent, call:getWorkspaceFileContent, call:saveWorkspaceFile, call:refresh, call:useEffect | dep: react, ../api/workspace-files
- use-workspace-git.ts | Custom React hook that provides git operations and state management for a workspace | exp: UseWorkspaceGitResult, func:useWorkspaceGit(workspaceId: string) → UseWorkspaceGitResult, call:useState, call:useCallback, call:setLoading, call:setError, call:Promise.all, call:getGitStatus, call:getGitBranches, call:getGitHistory, call:setStatus, call:setBranches, call:setCurrentBranch, call:setHistory, call:gitCommit, call:refresh, call:gitPush, call:gitPull, call:gitFetch, call:gitCheckout, call:useEffect | dep: react, ../api/workspace-git
- use-workspace-instances.ts | Custom React hook for managing workspace instances with CRUD operations, loading states, and error handling. | exp: UseWorkspaceInstancesResult, func:useWorkspaceInstances(workspaceId: string) → UseWorkspaceInstancesResult, call:useState, call:useCallback, call:setLoading, call:setError, call:listWorkspaceInstances, call:setInstances, call:createWorkspaceInstance, call:refresh, call:useEffect | dep: react, ../api/workspace-instances, ../api/sessions
- use-workspaces.ts | Custom React hook that fetches and manages workspace data with loading and error states. | exp: UseWorkspacesResult, func:useWorkspaces(projectId: string, repoId: string) → UseWorkspacesResult, call:useState, call:useCallback, call:setLoading, call:setError, call:listWorkspaces, call:listAllWorkspaces, call:setWorkspaces, call:useEffect, call:refresh | dep: react, ../api/workspaces, ../types/workspace
## arch
Follows the React Hooks pattern with custom hooks as the primary abstraction—each hook typically combines useState/useEffect/useCallback to manage local state, API calls, and side effects; many hooks integrate with TanStack Query/SWR-like patterns for server state (loading/error/reload), use context providers (e.g., NotificationProvider), and synchronize with URL search params; complex hooks compose simpler ones (e.g., use-terminal-page composes use-mobile-viewport, use-auto-hide) and use reducer-like state management for multi-faceted domain operations (CRUD, drag-and-drop, form handling).
## tags
call:set, call:use, workspace, react, state, terminal, api, git
## symbols
- useAsyncData
- useAutoHide
- useEvents
- useGitRepo
- useInstanceActions
- useMobileViewport
- useNotifications
- getSequenceWithModifier
## workflows
- change hooks behavior
read: use-async-data.ts, use-auto-hide.ts, use-config-profiles.ts
- update hooks tests
read: use-events.test.ts, use-notifications.test.tsx
- change hooks config
read: use-config-profiles.ts
## dirty
-
+39
View File
@@ -0,0 +1,39 @@
# apps/web/src/pages (index)
dir: apps/web/src/pages
## role
Implements the complete set of top-level routed page components for the web application, covering all major user-facing features including project management, git operations, workspace management, terminal access, user settings, and system administration.
## parent
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
## children
-
## files
- ConfigProfilesPage.tsx
- DashboardPage.test.tsx
- DashboardPage.tsx
- GitHistoryPage.tsx
- GitRepositoriesPage.tsx
- PlaceholderPage.tsx
- ProfilePage.tsx
- ProjectSettingsPage.tsx
- ProjectsPage.test.tsx
- ProjectsPage.tsx
- RepoWorkspacePage.tsx
- SessionsPage.tsx
- SettingsPage.tsx
- SshKeysPage.tsx
- TerminalPage.tsx
- ToolWorkshopPage.tsx
- WorkspaceDetailPage.tsx
- WorkspacesPage.tsx
## links
index: apps/web/src/pages/.pi-map.index.md
map: apps/web/src/pages/.pi-map.md
## workflows
- change pages behavior
read: ConfigProfilesPage.tsx, DashboardPage.tsx, GitHistoryPage.tsx
- update pages tests
read: DashboardPage.test.tsx, ProjectsPage.test.tsx
## dirty
-
+46
View File
@@ -0,0 +1,46 @@
# apps/web/src/pages
dir: apps/web/src/pages
index: apps/web/src/pages/.pi-map.index.md
## role
Implements the complete set of top-level routed page components for the web application, covering all major user-facing features including project management, git operations, workspace management, terminal access, user settings, and system administration.
## files
- ConfigProfilesPage.tsx | Renders a responsive configuration profiles management page with sidebar list and editor panel for desktop, and a dedicated mobile view for creating, editing, and managing config profiles. | exp: ConfigProfilesPage | dep: react, ../components/data-states, ../hooks/use-mobile-viewport, ../hooks/use-config-profiles, ../components/features/config-profiles/ConfigProfileListSidebar, ../components/features/config-profiles/ConfigProfileEditorPanel, ../components/features/config-profiles/ConfigProfilesMobileView
- DashboardPage.test.tsx | Tests the DashboardPage (HomePage) component's rendering, loading states, and error handling with retry functionality. | dep: @testing-library/react, react-router-dom, vitest, ./DashboardPage, ../state/sessions, ../state/session-operations, ../api/dashboard, ../api/sessions, ../api/projects, ../api/git-repositories, ../api/tool-types
- DashboardPage.tsx | Renders a dashboard homepage that displays workspace overview, active/recent sessions, summary statistics, and polling health checks for running instances. | exp: HomePage | dep: react, react-router-dom, ../api/dashboard, ../api/sessions, ../components/data-states, ../components/features/session/session-list, ../hooks/use-instance-actions, ../state/sessions
- GitHistoryPage.tsx | Renders a Git commit history page with branch selection, commit list with graph visualization, and a detail panel showing commit metadata, stats, and diffs. | exp: GitHistoryPage | dep: react, react-router-dom, ../api/git-repositories, ../components/data-states, ../components/icon, ../hooks/use-async-data
- GitRepositoriesPage.tsx | Displays and manages a project's Git repositories with CRUD operations including listing, creating, navigating to history, and deleting with confirmation | exp: GitRepositoriesPage | dep: react, react-router-dom, ../api/git-repositories, ../components/data-states, ../components/icon, ../components/features/project/repository-create-dialog, ../hooks/use-async-data
- PlaceholderPage.tsx | Exports three simple React page components (PlaceholderPage, NotFoundPage, LoginRedirectPage) for a frontend scaffold. | exp: PlaceholderPage, NotFoundPage, LoginRedirectPage | dep: ../components/icon, React
- ProfilePage.tsx | A React component that displays and allows editing of a user profile, including name, email, and avatar upload with validation. | exp: ProfilePage | dep: react, ../api/profile, ../components/data-states, ../components/icon, ../state/auth, ../hooks/use-async-data
- ProjectSettingsPage.tsx | Renders a project settings page with tabbed navigation for general settings, repositories, and members, including project data fetching, editing, and deletion capabilities. | exp: ProjectSettingsPage | dep: react, react-router-dom, ../components/features/settings/settings-tab-layout, ../components/features/project/repositories-settings-tab, ../api/client, ../types
- ProjectsPage.test.tsx | Unit tests for the ProjectsPage component covering loading, empty, error, create, edit, and delete states with API mocking. | dep: @testing-library/react, react-router-dom, vitest, ./ProjectsPage, ../api/projects, ProjectsPage
- ProjectsPage.tsx | Renders a responsive projects management page with separate mobile and desktop layouts, supporting project CRUD operations, repository creation, and workspace management. | exp: ProjectsPage | dep: react, ../components/data-states, ../components/icon, ../hooks/use-mobile-viewport, ../components/features/project/ProjectCard, ../components/features/project/ProjectDialog, ../components/features/project/repository-create-dialog, ../components/features/mobile/mobile-list-view, ../components/features/mobile/mobile-fab, ../hooks/use-projects, ../types
- RepoWorkspacePage.tsx | Renders a repository workspace page with loading/error/empty states and a responsive layout for managing repositories, branches, and git operations. | exp: RepoWorkspace | dep: react, react-router-dom, ../components/data-states, ../hooks/use-mobile-viewport, ../hooks/use-repo-workspace, ../components/features/workspace/workspace-header, ../components/features/workspace/WorkspaceLayout
- SessionsPage.tsx | Renders a sessions management page that displays, polls health for, and handles CRUD operations on development environment sessions with dirty delete confirmation. | exp: SessionsPage | dep: react, ../api/sessions, ../api/settings, ../components/data-states, ../components/features/session/session-list, ../components/features/session/session-card, ../hooks/use-instance-actions, ../state/sessions
- SettingsPage.tsx | A React settings page component that loads, displays, and manages user configuration with tabbed navigation and nested outlet for child routes. | exp: SettingsPage | dep: react, react-router-dom, ../api/settings, ../components/data-states, ../hooks/use-async-data, ../components/features/settings/GeneralSettingsTab
- SshKeysPage.tsx | React page component for managing SSH keys including generation, listing, signing, verification, and deletion | exp: SSHKeysPage | dep: react-router-dom, ../components/data-states, ../hooks/use-ssh-keys, ../components/features/ssh-keys/SSHKeyCreateForm, ../components/features/ssh-keys/SSHKeyList
- TerminalPage.tsx | Renders a responsive terminal page that switches between mobile and desktop views based on device type, managing terminal sessions and their interactions. | exp: TerminalPage | dep: react, ../hooks/use-terminal-page, ../components/features/terminal/MobileTerminalView, ../components/features/terminal/DesktopTerminalView, useTerminalPage hook, MobileTerminalView, DesktopTerminalView
- ToolWorkshopPage.tsx | Renders a responsive tool workshop page with sidebar/editor layout for desktop and tabbed mobile view for managing tool types | exp: ToolWorkshopPage | dep: ../components/data-states, ../hooks/use-mobile-viewport, ../hooks/use-tool-workshop, ../components/features/tool-workshop/ToolTypeListSidebar, ../components/features/tool-workshop/ToolTypeEditorPanel, ../components/features/tool-workshop/ToolWorkshopMobileView, react, use-mobile-viewport, use-tool-workshop, data-states, ToolTypeListSidebar, ToolTypeEditorPanel, ToolWorkshopMobileView
- WorkspaceDetailPage.tsx | Renders a workspace detail page with tabbed navigation for files, git, tools, and settings management. | exp: func:WorkspaceDetailPage(), call:useParams, call:useState, call:useMobileViewport, call:useWorkspaces, call:workspaces.find | dep: react, react-router-dom, ../components/icon, ../hooks/use-workspaces, ../hooks/use-workspace-files, ../hooks/use-workspace-git, ../hooks/use-workspace-instances, ../hooks/use-mobile-viewport, ../components/features/tool/tool-starter, ../api/workspace-files, ../types/workspace
- WorkspacesPage.tsx | Renders a responsive workspaces management page with separate mobile (list/detail/create views) and desktop (grid with cards) layouts, supporting CRUD operations and tool launching. | exp: func:WorkspacesPage(), call:useMobileViewport, call:useState, call:useWorkspaces, call:useWorkspaceActions, call:actions.delete, call:actions.sync, call:setMobileView, call:refresh, call:setStartWorkspace, call:handleDelete, call:setSelectedWorkspace, call:workspaces.map, call:workspaces.find, call:e.stopPropagation, call:setShowCreate | dep: react, ../components/icon, ../hooks/use-mobile-viewport, ../hooks/use-workspaces, ../hooks/use-workspace-actions, ../components/features/workspace/workspace-card, ../components/features/workspace/workspace-create-form, ../components/features/mobile/mobile-list-view, ../components/features/mobile/mobile-detail-view, ../components/features/mobile/mobile-fab, ../components/features/tool/tool-starter, ../types/workspace
## arch
Follows a page-based routing architecture where each file corresponds to a route endpoint, using responsive conditional rendering patterns (mobile/desktop split layouts), tabbed navigation with nested outlets, polling-based real-time data updates, and container-presentational component separation with embedded data fetching, state management, and CRUD operations directly in page components.
## tags
page, components, workspace, react, features, mobile, hooks, settings
## symbols
- WorkspaceDetailPage
- WorkspacesPage
- ConfigProfilesPage
- HomePage
- GitHistoryPage
- GitRepositoriesPage
- PlaceholderPage
- NotFoundPage
## workflows
- change pages behavior
read: ConfigProfilesPage.tsx, DashboardPage.tsx, GitHistoryPage.tsx
- update pages tests
read: DashboardPage.test.tsx, ProjectsPage.test.tsx
## dirty
-
+25
View File
@@ -0,0 +1,25 @@
# apps/web/src/state (index)
dir: apps/web/src/state
## role
Centralized React state management layer providing application-wide contexts for authentication, real-time events, notifications, session operations, user sessions, and toast notifications.
## parent
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
## children
-
## files
- auth.tsx
- events.tsx
- notifications.tsx
- session-operations.tsx
- sessions.tsx
- toast.tsx
## links
index: apps/web/src/state/.pi-map.index.md
map: apps/web/src/state/.pi-map.md
## workflows
- change state behavior
read: auth.tsx, events.tsx, notifications.tsx
## dirty
-
+32
View File
@@ -0,0 +1,32 @@
# apps/web/src/state
dir: apps/web/src/state
index: apps/web/src/state/.pi-map.index.md
## role
Centralized React state management layer providing application-wide contexts for authentication, real-time events, notifications, session operations, user sessions, and toast notifications.
## files
- auth.tsx | Provides React authentication context for managing user session state with login status, user data, and session refresh/logout operations. | exp: AuthProvider, useAuth | dep: react, ../api/client, ../types
- events.tsx | Creates a React context provider for real-time event data with connection status and reconnection tracking | exp: func:EventProvider({ children }: { children: React.ReactNode }), call:useEvents, call:useMemo, func:useEventContext(), call:useContext | dep: react, ../hooks/use-events, ../types/events
- notifications.tsx | Provides a React context provider that manages notification state with optimistic updates, polling, and dropdown-aware fetching. | exp: NotificationContextValue, NotificationContext, func:NotificationProvider({ children, }: { children: React.ReactNode; }), call:useState, call:useRef, call:useCallback, call:getUnreadCount, call:setUnreadCount, call:clearInterval, call:console.error, call:setIsLoading, call:getNotifications, call:setNotifications, call:fetchUnreadCount, call:setInterval, call:fetchList, call:useEffect, call:stopPolling, call:startPolling, call:document.addEventListener, call:document.removeEventListener, call:currentNotifications.find, call:currentNotifications.map, call:new Date().toISOString, call:Math.max, call:setError, call:markNotificationRead, call:markAllNotificationsRead, call:currentNotifications.filter, call:dismissNotification, call:clearAllNotifications | dep: react, ../api/notifications, React
- session-operations.tsx | Manages a React context provider for tracking asynchronous instance operations (create, start, stop, etc.) with status updates from event payloads. | exp: OperationType, OperationStatus, Operation, SessionOperationsContextType, SessionOperationsProvider, useSessionOperations | dep: react, ../types/events
- sessions.tsx | Provides a React context that manages user sessions state with server polling, local CRUD operations, and loading/error handling. | exp: SessionsContextType, SessionsProvider, useSessions | dep: react, ../api/sessions
- toast.tsx | Implements a React toast notification system with context-based state management, auto-dismiss timers, and imperative API shortcuts. | exp: ToastSeverity, ToastItem, toast, func:ToastProvider({ children }: { children: React.ReactNode }), call:useState, call:useRef, call:useCallback, call:setToasts, call:prev.filter, call:timersRef.current.get, call:clearTimeout, call:timersRef.current.delete, call:Date.now, call:setTimeout, call:removeToast, call:timersRef.current.set, call:useEffect, call:addToast, func:useToast(), call:useContext, raise:Error | dep: react, React
## arch
Context-based state architecture using React Context API with providers for dependency injection, combining optimistic updates, server polling, event-driven updates, and imperative APIs for cross-cutting concerns.
## tags
call:use, context, toast, provider, react, call:set, notification, operations
## symbols
- EventProvider
- useEventContext
- NotificationProvider
- ToastProvider
- useToast
- AuthProvider
- useAuth
- call:useEvents
## workflows
- change state behavior
read: auth.tsx, events.tsx, notifications.tsx
## dirty
-
+24
View File
@@ -0,0 +1,24 @@
# apps/web/src/styles (index)
dir: apps/web/src/styles
## role
Houses the complete CSS styling system for a web application, providing global styles, design tokens, syntax highlighting, and utility classes.
## parent
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
## children
- apps/web/src/styles/pages
index: apps/web/src/styles/pages/.pi-map.index.md
map: apps/web/src/styles/pages/.pi-map.md
## files
- global.css
- syntax-highlight.css
- tokens.css
- utilities.css
## links
index: apps/web/src/styles/.pi-map.index.md
map: apps/web/src/styles/.pi-map.md
## workflows
-
## dirty
-
+22
View File
@@ -0,0 +1,22 @@
# apps/web/src/styles
dir: apps/web/src/styles
index: apps/web/src/styles/.pi-map.index.md
## role
Houses the complete CSS styling system for a web application, providing global styles, design tokens, syntax highlighting, and utility classes.
## files
- global.css | Defines global CSS styles for a web application shell layout, navigation, cards, forms, dialogs, settings pages, and responsive design patterns. | dep: CSS custom properties (CSS variables: --border, --panel, --brand, --muted, --ink, --bg, --danger, --success, --warning, --font-size-xs, --font-size-sm, --space-2, --space-3, --space-4, --space-5)
- syntax-highlight.css | Stylesheet for a syntax highlighting component with toolbar, line numbers, code display, and Prism.js theme integration | dep: Prism.js
- tokens.css | Defines a comprehensive CSS design token system with light/dark themes, spacing scales, breakpoints, and fluid typography for a web application.
- utilities.css | Provides a comprehensive responsive CSS utility system including layout primitives, mobile-first breakpoints, terminal styling, session management UI, and touch-target accessibility patterns for a web application. | dep: CSS custom properties (var(--space-*), var(--border), var(--bg), var(--primary), var(--danger), etc.), xterm.js (terminal rendering)
## arch
Layered CSS architecture using design tokens (tokens.css), global base styles (global.css), component-specific styles (syntax-highlight.css), and utility-first responsive utilities (utilities.css) with light/dark theme support and mobile-first breakpoints.
## tags
space, var(, global, css, web, application, syntax, defines
## symbols
-
## workflows
-
## dirty
-
@@ -0,0 +1,25 @@
# apps/web/src/styles/pages (index)
dir: apps/web/src/styles/pages
## role
Contains page-specific CSS stylesheets for distinct application views in the web frontend.
## parent
index: apps/web/src/styles/.pi-map.index.md
map: apps/web/src/styles/.pi-map.md
## children
-
## files
- git-history.css
- projects.css
- repo-workspace.css
- sessions.css
- ssh-keys.css
- workspace-detail.css
- workspaces.css
## links
index: apps/web/src/styles/pages/.pi-map.index.md
map: apps/web/src/styles/pages/.pi-map.md
## workflows
-
## dirty
-
+25
View File
@@ -0,0 +1,25 @@
# apps/web/src/styles/pages
dir: apps/web/src/styles/pages
index: apps/web/src/styles/pages/.pi-map.index.md
## role
Contains page-specific CSS stylesheets for distinct application views in the web frontend.
## files
- git-history.css | Stylesheet for a Git history visualization page with commit list, branch selector, and detail panel layout | dep: CSS custom properties (var(--border), var(--panel), var(--ink), var(--brand), var(--muted))
- projects.css | Stylesheet for a projects page UI featuring expandable project toggles, repository listings, workspace grids, and repository creation radio controls. | dep: CSS custom properties (variables)
- repo-workspace.css | Stylesheet for a repository workspace UI with git integration, file management, and code editing components | dep: CSS custom properties (variables), IBM Plex Mono font
- sessions.css | Stylesheet for session management UI components including cards, dropdowns, forms, and responsive mobile layouts. | dep: CSS custom properties/variables (var(--border), var(--panel), var(--text), var(--space-*), var(--danger), var(--color-border))
- ssh-keys.css | Styles a responsive SSH key list component that stacks vertically on mobile and switches to horizontal layout on larger screens | dep: CSS custom properties (var(--space-3), var(--space-2), var(--space-4), var(--bg), var(--border))
- workspace-detail.css | Stylesheet for a workspace detail page with tabbed interface including files, git, tools, and settings views, plus a workspace creation form | dep: CSS custom properties (variables for colors, spacing, typography)
- workspaces.css | Stylesheet for a workspaces page featuring a responsive grid of workspace cards with status badges, hover effects, and mobile adaptations. | dep: CSS custom properties (var(--space-*), var(--border), var(--panel), var(--muted), var(--success), var(--warning), var(--danger))
## arch
Modular page-scoped styling architecture with responsive design patterns (mobile-first breakpoints, grid/flex layouts, component-based organization) and consistent UI system conventions (cards, tabs, forms, badges, hover states).
## tags
var(, workspace, stylesheet, git, space, page, detail, history
## symbols
-
## workflows
-
## dirty
-
+20
View File
@@ -0,0 +1,20 @@
# apps/web/src/test (index)
dir: apps/web/src/test
## role
Provides shared testing infrastructure and configuration for the web application's test suite
## parent
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
## children
-
## files
- setup.ts
## links
index: apps/web/src/test/.pi-map.index.md
map: apps/web/src/test/.pi-map.md
## workflows
- change test behavior
read: setup.ts
## dirty
-
+20
View File
@@ -0,0 +1,20 @@
# apps/web/src/test
dir: apps/web/src/test
index: apps/web/src/test/.pi-map.index.md
## role
Provides shared testing infrastructure and configuration for the web application's test suite
## files
- setup.ts | Configures Vitest testing environment with Jest DOM matchers for enhanced DOM assertions | dep: @testing-library/jest-dom/vitest
## arch
Minimal utility module pattern - single configuration file exporting Vitest setup with Jest DOM matchers integration
## tags
dom, vitest, jest, setup, configures, testing, environment, matchers
## symbols
-
## workflows
- change test behavior
read: setup.ts
## dirty
-
+21
View File
@@ -0,0 +1,21 @@
# apps/web/src/types (index)
dir: apps/web/src/types
## role
Defines shared TypeScript type definitions and interfaces for data models used across the web application.
## parent
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
## children
-
## files
- events.ts
- workspace.ts
## links
index: apps/web/src/types/.pi-map.index.md
map: apps/web/src/types/.pi-map.md
## workflows
- change types behavior
read: events.ts, workspace.ts
## dirty
-
+25
View File
@@ -0,0 +1,25 @@
# apps/web/src/types
dir: apps/web/src/types
index: apps/web/src/types/.pi-map.index.md
## role
Defines shared TypeScript type definitions and interfaces for data models used across the web application.
## files
- events.ts | Defines TypeScript interfaces for instance event metadata and payload structures used in event-driven system communication. | exp: InstanceEventMetadata, InstanceEventPayload
- workspace.ts | Defines TypeScript interfaces for workspace data models, requests, and sync results in a workspace management feature. | exp: Workspace, CreateWorkspaceRequest, SyncResult
## arch
Simple barrel-style type package with domain-oriented interface modules (events, workspace) for compile-time type safety and API contract enforcement.
## tags
workspace, event, instance, metadata, payload, sync, defines, typescript
## symbols
- InstanceEventMetadata
- InstanceEventPayload
- Workspace
- CreateWorkspaceRequest
- SyncResult
## workflows
- change types behavior
read: events.ts, workspace.ts
## dirty
-
+23
View File
@@ -0,0 +1,23 @@
# apps/web/src/utils (index)
dir: apps/web/src/utils
## role
Shared utility functions providing cross-cutting concerns for error handling, icon types, syntax highlighting, and time formatting across the web application.
## parent
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
## children
-
## files
- errors.ts
- icons.ts
- language.ts
- time.ts
## links
index: apps/web/src/utils/.pi-map.index.md
map: apps/web/src/utils/.pi-map.md
## workflows
- change utils behavior
read: errors.ts, icons.ts, language.ts
## dirty
-
+30
View File
@@ -0,0 +1,30 @@
# apps/web/src/utils
dir: apps/web/src/utils
index: apps/web/src/utils/.pi-map.index.md
## role
Shared utility functions providing cross-cutting concerns for error handling, icon types, syntax highlighting, and time formatting across the web application.
## files
- errors.ts | Extracts a human-readable error message from an unknown error object, specifically handling axios-style errors with string or array detail fields | exp: extractErrorMessage
- icons.ts | Re-exports the IconName type from the icon component for external consumption | dep: ../components/icon
- language.ts | Maps file extensions to Prism.js language identifiers and provides utilities for syntax highlighting with lazy language loading. | exp: detectLanguage, highlightCode, loadLanguage | dep: prismjs
- time.ts | Formats a date string into a human-readable relative time string (e.g., "2h ago", "3d ago") | exp: func:formatRelativeTime(dateStr: string) → string, call:Math.max, call:Math.floor, call:now.getTime, call:date.getTime
## arch
Flat barrel-style utility module with pure functions, lazy loading for heavy dependencies (Prism), and thin abstraction layers over third-party libraries.
## tags
time, language, error, message, errors, string, relative, human
## symbols
- formatRelativeTime
- extractErrorMessage
- detectLanguage
- highlightCode
- loadLanguage
- call:Math.max
- call:Math.floor
- call:now.getTime
## workflows
- change utils behavior
read: errors.ts, icons.ts, language.ts
## dirty
-