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
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
@@ -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
|
||||
-
|
||||
Reference in New Issue
Block a user