chore(project-map): regenerate .pi-map artifacts across the repo
This commit is contained in:
Developer
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features
|
||||
|
||||
## role
|
||||
Contains reusable React components that implement specific product features and user-facing functionality across the web application.
|
||||
Reusable UI feature components that compose domain-specific functionality for the web application.
|
||||
## parent
|
||||
index: apps/web/src/components/.pi-map.index.md
|
||||
map: apps/web/src/components/.pi-map.md
|
||||
|
||||
@@ -4,10 +4,10 @@ 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 user-facing functionality across the web application.
|
||||
Reusable UI feature components that compose domain-specific functionality for the web application.
|
||||
## files
|
||||
## arch
|
||||
Feature-based component organization with domain-specific groupings, likely combining presentational and container patterns with hooks for state management, following a modular architecture where each feature encapsulates its own UI, logic, and data fetching concerns.
|
||||
Feature-based component organization with domain-driven design patterns, likely combining presentational components with localized state and business logic.
|
||||
## tags
|
||||
-
|
||||
## symbols
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/config-profiles
|
||||
|
||||
## role
|
||||
Provides UI components for managing Docker configuration profiles including creation, editing, listing, and mobile-responsive views.
|
||||
Provides UI components for managing configuration profiles (create, edit, list, delete) with support for desktop and mobile layouts.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
|
||||
@@ -4,15 +4,15 @@ dir: apps/web/src/components/features/config-profiles
|
||||
index: apps/web/src/components/features/config-profiles/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides UI components for managing Docker configuration profiles including creation, editing, listing, and mobile-responsive views.
|
||||
Provides UI components for managing configuration profiles (create, edit, list, delete) with support for desktop and mobile layouts.
|
||||
## 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 view for managing configuration profiles with list, detail, edit, and preview states. | exp: ConfigProfilesMobileView | dep: react, ../mobile/mobile-list-view, ../mobile/mobile-detail-view, ../mobile/mobile-edit-view, ../mobile/mobile-fab, ../git/git-mount-editor, ../../icon, ../../../api/config-profiles, ../../../types, ../../../api/tool-types, mobile-list-view, mobile-detail-view, mobile-edit-view, mobile-fab, git-mount-editor, icon, config-profiles API types, types
|
||||
- ConfigProfileEditorPanel.tsx | Renders a form panel for creating or editing configuration profiles with includes, environment variables, files, mounts, and git mounts. | exp: ConfigProfileEditorPanel | dep: ../../icon, ../git/git-mount-editor, ../../../api/config-profiles, ../../../types, ../../../api/tool-types, Icon, GitMountEditor, config-profiles API types, ProjectWithRepos types, tool-types API
|
||||
- ConfigProfileListSidebar.tsx | Renders a sidebar UI component for listing, selecting, creating, and deleting configuration profiles with visual indicators for scope and metadata. | exp: ConfigProfileListSidebar | dep: ../../icon, ../../../api/config-profiles, React, Icon component, ConfigProfile type
|
||||
- ConfigProfilesMobileView.tsx | Renders a mobile-responsive view for managing configuration profiles with list, detail, edit, and preview states. | exp: ConfigProfilesMobileView | dep: react, ../mobile/mobile-list-view, ../mobile/mobile-detail-view, ../mobile/mobile-edit-view, ../mobile/mobile-fab, ../git/git-mount-editor, ../../icon, ../../../api/config-profiles, ../../../types, ../../../api/tool-types, mobile-list-view, mobile-detail-view, mobile-edit-view, mobile-fab, git-mount-editor, icon, config-profiles API types, project types, tool-types API
|
||||
## arch
|
||||
Feature-based component composition with state-driven panels (list/detail/edit/preview), form-based editing, and responsive layout adaptation for mobile/desktop.
|
||||
Feature-based component composition with panel/sidebar split-view pattern, responsive mobile state machine (list/detail/edit/preview), and form-driven data editing for complex nested configuration objects.
|
||||
## tags
|
||||
mobile, config, view, profiles, editor, profile, list, icon
|
||||
config, mobile, view, profiles, profile, editor, list, git
|
||||
## symbols
|
||||
- ConfigProfileEditorPanel
|
||||
- ConfigProfileListSidebar
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/git
|
||||
|
||||
## role
|
||||
Provides React UI components for Git repository operations including commit, merge, and mount configuration workflows.
|
||||
Provides Git repository management UI components for mounting, committing, and merging operations within the web application.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
|
||||
@@ -4,15 +4,15 @@ dir: apps/web/src/components/features/git
|
||||
index: apps/web/src/components/features/git/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides React UI components for Git repository operations including commit, merge, and mount configuration workflows.
|
||||
Provides Git repository management UI components for mounting, committing, and merging operations within the web application.
|
||||
## 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
|
||||
- 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
|
||||
- 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
|
||||
- commit-dialog.tsx | Renders a modal dialog for reviewing code diffs and entering a commit message before committing changes to a file. | exp: CommitDialog | dep: react, ../../icon
|
||||
- git-mount-editor.tsx | A React component that provides a UI for editing Git repository mounts with path mappings, including URL validation and branch selection. | exp: GitMountEditor | dep: react, ../../icon, ../../../api/config-profiles, icon, config-profiles API (validateGitUrl, GitMount, GitMountMapping types)
|
||||
- merge-dialog.tsx | A React modal dialog component that allows users to merge Git branches by selecting a source branch, optionally providing a commit message, and executing the merge operation. | exp: MergeDialog | dep: react, ../../../api/git-repositories, ../../icon
|
||||
## arch
|
||||
Uses modal dialog pattern with form state management, loading/error/success state handling, and controlled inputs for Git-specific operations.
|
||||
React component-based architecture using modal dialog patterns for discrete Git workflows, with form-driven interfaces for repository configuration and branch operations.
|
||||
## tags
|
||||
dialog, git, react, commit, icon, mount, merge, editor
|
||||
dialog, git, commit, merge, react, icon, mount, editor
|
||||
## symbols
|
||||
- CommitDialog
|
||||
- GitMountEditor
|
||||
|
||||
@@ -6,20 +6,20 @@ index: apps/web/src/components/features/mobile/.pi-map.index.md
|
||||
## role
|
||||
Provides a complete set of mobile-optimized UI components for CRUD operations, navigation, and terminal interfaces in a responsive web application.
|
||||
## 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/edit/delete actions, and a configurable list of typed fields. | exp: MobileDetailView | dep: ../../icon, React
|
||||
- mobile-edit-view.tsx | A React component that renders a mobile-optimized form for editing records with configurable field types and save/cancel/delete 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 | A reusable React component that renders a mobile-optimized list view with optional search, custom item rendering, and action buttons (duplicate/delete). | exp: MobileListView | dep: react, ../../icon, ../../../utils/icons, icon
|
||||
- mobile-nav.tsx | Renders a mobile navigation bar with grouped items that trigger bottom sheets and standard links with active state highlighting | exp: MobileNav | dep: react, react-router-dom, ../../icon, ../tool/tools-bottom-sheet, ./spaces-bottom-sheet, ../../../utils/icons
|
||||
- mobile-action-sheet.tsx | Renders a mobile-optimized action sheet modal with a list of actions, optional icons, variant styling, and keyboard/overlay dismissal handling. | 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/edit/delete actions, and a configurable list of typed fields. | exp: MobileDetailView | dep: ../../icon, react, icon
|
||||
- mobile-edit-view.tsx | Renders a mobile-optimized form view for editing records with configurable field types and save/cancel/delete actions. | exp: MobileEditView | dep: react
|
||||
- mobile-fab.tsx | Renders a mobile floating action button with an add icon and customizable label | exp: MobileFAB | dep: ../../icon, React, Icon component
|
||||
- mobile-list-view.tsx | A reusable React component that renders a mobile-optimized list view with optional search, custom item rendering, and action buttons for duplicate/delete. | exp: MobileListView | dep: react, ../../icon, ../../../utils/icons, icon (local component), icons (local utils)
|
||||
- mobile-nav.tsx | Renders a mobile navigation bar with grouped items that open bottom sheets and standard items that use React Router links, including active state handling and session count badges. | exp: MobileNav | dep: react, react-router-dom, ../../icon, ../tool/tools-bottom-sheet, ./spaces-bottom-sheet, ../../../utils/icons, icon, tools-bottom-sheet, spaces-bottom-sheet, icons
|
||||
- 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
|
||||
- mobile-terminal-header.tsx | Renders a mobile-responsive header for a terminal interface with navigation, status, and font size controls. | 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 input panels. | 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, React, TerminalComponent, MobileTerminalHeader, SpecialKeysStrip, SpecialKeysPanel, useMobileViewport, useVirtualKeyboard, useAutoHide, ModifierKey
|
||||
- spaces-bottom-sheet.tsx | Renders a mobile bottom sheet navigation menu for switching between "Projects" and "Workspaces" spaces with active state highlighting. | exp: SpacesBottomSheet | dep: react-router-dom, ../../icon, icon
|
||||
## arch
|
||||
Feature-based component architecture using compound mobile patterns (bottom sheets, action sheets, FABs) with typed configurable props, consistent mobile-first design system, and specialized terminal wrapper with native-like behaviors (auto-hiding headers, virtual keyboard handling).
|
||||
Compound component pattern with feature-specific mobile wrappers that adapt desktop functionality to touch-friendly bottom sheets, action sheets, and specialized mobile views, using React Router for navigation and consistent mobile-first styling variants.
|
||||
## tags
|
||||
mobile, terminal, sheet, react, icon, view, header, action
|
||||
mobile, sheet, react, view, terminal, icon, header, bottom
|
||||
## symbols
|
||||
- MobileActionSheet
|
||||
- MobilePageHeader
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/notification
|
||||
|
||||
## role
|
||||
Provides notification UI components and event-to-toast bridging logic for the web application.
|
||||
Provides the complete notification UI system including toast notifications, notification center dropdown, and individual notification items with user preference filtering.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
|
||||
@@ -4,18 +4,18 @@ 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 logic for the web application.
|
||||
Provides the complete notification UI system including toast notifications, notification center dropdown, and individual notification items with user preference filtering.
|
||||
## 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
|
||||
- event-toast-bridge.test.tsx | Tests the EventToastBridge component's notification preference filtering logic, including toast level settings, category muting, and deduplication behavior. | dep: vitest, @testing-library/react, ./event-toast-bridge, ../../../state/events, ../../../api/settings, ../../toast-rules, ../../../types/events, event-toast-bridge component, useEventContext hook, getUserConfig API, handleEventToast utility
|
||||
- event-toast-bridge.tsx | Bridges events from an event context to toast notifications with user-configurable filtering by severity and category | 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 React 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 for viewing, managing, and dismissing notifications, supporting both desktop and mobile responsive layouts. | 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 behavior. | dep: vitest, @testing-library/react, ./notification-item
|
||||
- notification-item.tsx | Renders a single notification item with expandable metadata, severity-based icons, read/dismiss actions, and relative time formatting. | 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 utils, notifications API, icons utils
|
||||
## arch
|
||||
React component-based architecture with feature-based directory organization, using portals for dropdown rendering, event-driven toast bridging with user preference filtering, and severity-based visual states.
|
||||
Component-based React architecture with clear separation of concerns: bridge pattern for event-to-toast translation, compound component pattern for notification center UI, and granular single-responsibility components with comprehensive test coverage.
|
||||
## tags
|
||||
event, notification, call:use, toast, notifications, listener, react, item
|
||||
event, notification, call:use, toast, listener, react, notifications, item
|
||||
## symbols
|
||||
- EventToastBridge
|
||||
- NotificationCenter
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/profile
|
||||
|
||||
## role
|
||||
Provides a mobile-specific UI for users to view and edit their profile information.
|
||||
Provides a mobile-responsive user interface for editing user profile information and managing avatar uploads.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
|
||||
@@ -4,11 +4,11 @@ dir: apps/web/src/components/features/profile
|
||||
index: apps/web/src/components/features/profile/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides a mobile-specific UI for users to view and edit their profile information.
|
||||
Provides a mobile-responsive user interface for editing user profile information and managing avatar uploads.
|
||||
## files
|
||||
- ProfileMobileView.tsx | Renders a mobile-optimized profile editing form with avatar upload, name/email fields, and save/cancel functionality. | exp: ProfileMobileView | dep: react-router-dom, ../mobile/mobile-edit-view, ../../icon, ../../../api/profile
|
||||
- ProfileMobileView.tsx | Renders a mobile-optimized profile editing form with avatar upload, name/email fields, and save/cancel actions | exp: ProfileMobileView | dep: react-router-dom, ../mobile/mobile-edit-view, ../../icon, ../../../api/profile
|
||||
## arch
|
||||
Single feature-focused component with form handling and file upload, likely using controlled inputs and local state management.
|
||||
Single-feature component with form state management, file upload handling, and responsive design patterns for mobile-first profile editing.
|
||||
## tags
|
||||
mobile, profile, view, renders, optimized, editing, form, avatar
|
||||
## symbols
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/project
|
||||
|
||||
## role
|
||||
Provides UI components for managing projects and their Git repositories, including cards, dialogs, and settings tabs with CRUD operations.
|
||||
Provides UI components for managing projects, repositories, and workspaces in a web application.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
@@ -12,6 +12,7 @@ map: apps/web/src/components/features/.pi-map.md
|
||||
- ProjectCard.test.tsx
|
||||
- ProjectCard.tsx
|
||||
- ProjectDialog.tsx
|
||||
- ProjectListItem.tsx
|
||||
- repositories-settings-tab.test.tsx
|
||||
- repositories-settings-tab.tsx
|
||||
- repository-create-dialog.tsx
|
||||
@@ -20,7 +21,7 @@ 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
|
||||
read: ProjectCard.tsx, ProjectDialog.tsx, ProjectListItem.tsx
|
||||
- update project tests
|
||||
read: ProjectCard.test.tsx, repositories-settings-tab.test.tsx
|
||||
## dirty
|
||||
|
||||
@@ -4,26 +4,28 @@ 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 and their Git repositories, including cards, dialogs, and settings tabs with CRUD operations.
|
||||
Provides UI components for managing projects, repositories, and workspaces in a web application.
|
||||
## files
|
||||
- ProjectCard.test.tsx | Unit tests for the ProjectCard component verifying rendering, workspace creation, and delete confirmation behavior. | dep: @testing-library/jest-dom/vitest, @testing-library/react, react-router-dom, vitest, ./ProjectCard, ../../../types, ProjectCard, types
|
||||
- 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
|
||||
- ProjectCard.test.tsx | Unit tests for the ProjectCard React component verifying rendering, workspace creation, and delete confirmation behavior. | dep: @testing-library/jest-dom/vitest, @testing-library/react, react-router-dom, vitest, ./ProjectCard, ../../../types, ProjectCard component, types
|
||||
- ProjectCard.tsx | Renders an expandable project card UI component displaying project info, repositories, and associated workspaces with CRUD actions. | exp: ProjectCard | dep: ../../icon, ../workspace/workspace-create-form, ../../../types, icon, workspace-create-form, types
|
||||
- ProjectDialog.tsx | Renders a modal dialog for creating or editing a project with name/description inputs and submit/cancel actions. | exp: ProjectDialog | dep: ../../icon, React, Icon
|
||||
- ProjectListItem.tsx | Renders a project list item with repositories, workspaces, and running sessions, including edit/delete actions and session management. | exp: ProjectListItem | dep: react, react-router-dom, ../../icon, ../../../api/sessions, ../../../utils/icons, ../../../types, ../../../utils/open-session
|
||||
- repositories-settings-tab.test.tsx | Tests the RepositoriesSettingsTab component's repository creation flows including full URL cloning, owner/repo mode with SSH key generation, SSH URL validation, and form error handling. | dep: @testing-library/react, vitest, ./repositories-settings-tab, ../../../api/git-repositories, ../../../api/ssh-keys, react-router-dom
|
||||
- repositories-settings-tab.tsx | React component that displays and manages Git repositories for a project, including listing, creating, and deleting repositories | exp: RepositoriesSettingsTab | dep: react, react-router-dom, ../../../api/git-repositories, ./repository-create-dialog, ../../icon
|
||||
- repository-create-dialog.tsx | A React dialog component for creating or cloning Git repositories with URL validation, SSH key selection, and support for both simple owner/repo and advanced URL modes. | exp: RepositoryCreateDialog | dep: react, ../../../api/git-repositories, ../../../api/ssh-keys, ../../icon
|
||||
## arch
|
||||
React component-based architecture with feature-specific composition, dialog-based modals for forms, and comprehensive test coverage using unit tests for component behavior and user flows.
|
||||
React component-based architecture with feature-specific composition, separating presentation (cards/lists/dialogs) from business logic, using dialogs for modal CRUD operations and comprehensive unit testing for complex user flows.
|
||||
## tags
|
||||
project, repositories, dialog, react, create, settings, icon, repository
|
||||
project, repositories, react, dialog, icon, create, settings, api
|
||||
## symbols
|
||||
- ProjectCard
|
||||
- ProjectDialog
|
||||
- ProjectListItem
|
||||
- RepositoriesSettingsTab
|
||||
- RepositoryCreateDialog
|
||||
## workflows
|
||||
- change project behavior
|
||||
read: ProjectCard.tsx, ProjectDialog.tsx, repositories-settings-tab.tsx
|
||||
read: ProjectCard.tsx, ProjectDialog.tsx, ProjectListItem.tsx
|
||||
- update project tests
|
||||
read: ProjectCard.test.tsx, repositories-settings-tab.test.tsx
|
||||
## dirty
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/session
|
||||
|
||||
## role
|
||||
Provides UI components for managing development sessions including creation, listing, and interacting with individual sessions.
|
||||
Provides UI components for managing development sessions including creation, listing, and individual session display with status and actions.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
|
||||
@@ -4,15 +4,15 @@ 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 sessions including creation, listing, and interacting with individual sessions.
|
||||
Provides UI components for managing development sessions including creation, listing, and individual session display with status and actions.
|
||||
## files
|
||||
- create-session-form.tsx | A React form component for creating and starting a new development session with configurable project, repository, workspace, tool type, config profile, and SSH key options. | exp: CreateSessionForm | dep: react, ../../icon, ../../../api/sessions, ../../../types, ../../../api/git-repositories, ../../../api/tool-types, ../../../api/ssh-keys, ../../../api/config-profiles, ../../../api/workspaces, ../../../types/workspace, icon, sessions API, git-repositories API, tool-types API, ssh-keys API, config-profiles API, workspaces API, types
|
||||
- session-card.tsx | Renders a card component displaying session information with status badges, inline rename editing, action buttons, and responsive mobile/desktop layouts including a dropdown options menu and mobile action sheet. | 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
|
||||
- create-session-form.tsx | A React form component for creating and starting a new development session with configurable project, repository, workspace, tool type, config profile, and SSH key options. | exp: CreateSessionForm | dep: react, ../../icon, ../../loading-overlay, ../../../api/sessions, ../../../types, ../../../api/git-repositories, ../../../api/tool-types, ../../../api/ssh-keys, ../../../api/config-profiles, ../../../api/workspaces, ../../../types/workspace, icon, loading-overlay, sessions API, git-repositories API, tool-types API, ssh-keys API, config-profiles API, workspaces API, types
|
||||
- session-card.tsx | Renders a React card component displaying session information with status badges, inline rename editing, action buttons, and responsive mobile/desktop layouts including dropdown menus and action sheets. | exp: SessionCardProps, func:SessionCard({ session, onOpen, onStart, onStop, onDelete, onRecreateTunnel, onRename, isBusy = false, busyLabel = "Working...", 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, ../../loading-overlay
|
||||
- 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
|
||||
## arch
|
||||
Feature-based component architecture with compound component pattern (SessionCard/SessionList), controlled forms with validation, optimistic UI updates for inline editing, responsive design with mobile/desktop layout variants, and compound action menus using dropdowns/sheets.
|
||||
Presentational component pattern with feature-specific compound components (form, list, card) using responsive design and inline editing for CRUD session operations.
|
||||
## tags
|
||||
session, call:use, call:on, api, card, call:set, event, mobile
|
||||
session, call:on, api, card, call:use, call:set, list, mobile
|
||||
## symbols
|
||||
- SessionCard
|
||||
- SessionList
|
||||
@@ -21,6 +21,7 @@ session, call:use, call:on, api, card, call:set, event, mobile
|
||||
- call:useState
|
||||
- call:useRef
|
||||
- call:useMobileViewport
|
||||
- call:session.tool_type_interfaces?.includes
|
||||
## workflows
|
||||
- change session behavior
|
||||
read: create-session-form.tsx, session-card.tsx, session-list.tsx
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/settings
|
||||
|
||||
## role
|
||||
Provides the UI components for the application's settings interface, enabling users to configure preferences through a tabbed navigation layout.
|
||||
Provides the UI components for user-configurable application settings with tab-based navigation and form controls.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
|
||||
@@ -4,12 +4,12 @@ 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 through a tabbed navigation layout.
|
||||
Provides the UI components for user-configurable application settings with tab-based navigation and form controls.
|
||||
## 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
|
||||
- GeneralSettingsTab.tsx | Renders a general settings tab with form controls for theme, git config, default editor, and notification preferences, wired to a parent-provided save handler. | exp: GeneralSettingsTab | dep: react-router-dom, ../../icon, ../../../api/settings
|
||||
- settings-tab-layout.tsx | Renders a settings page layout with a sidebar navigation of tabs and a content area for the active tab. | exp: SettingsTabLayout | dep: react, react-router-dom
|
||||
## arch
|
||||
Uses a tabbed layout pattern with URL-based routing for navigation state, shared React context for data access, and compound component structure separating layout shell from content panels.
|
||||
Compound component pattern with a layout shell (sidebar + content area) and specialized tab content components, using controlled forms with parent-managed save handlers.
|
||||
## tags
|
||||
settings, tab, general, layout, react, renders, router, dom
|
||||
## symbols
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/ssh-keys
|
||||
|
||||
## role
|
||||
Provides UI components for managing SSH keys, including creation and listing with cryptographic operations.
|
||||
Provides UI components for SSH key lifecycle management including creation and listing with cryptographic operations.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
|
||||
@@ -4,14 +4,14 @@ 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 managing SSH keys, including creation and listing with cryptographic operations.
|
||||
Provides UI components for SSH key lifecycle management including creation and listing with cryptographic operations.
|
||||
## 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
|
||||
- SSHKeyCreateForm.tsx | Renders a form for creating/generating a new SSH key with name input and submit button | exp: SSHKeyCreateForm | dep: ../../icon, React, icon
|
||||
- SSHKeyList.tsx | Renders a list of SSH keys with signing and signature verification capabilities | exp: SSHKeyList | dep: ../../icon, ../../data-states, ../../../api/ssh-keys, icon, data-states, api/ssh-keys
|
||||
## arch
|
||||
Feature-based component organization with presentational components following single-responsibility pattern (form vs list separation).
|
||||
Feature-based component organization with form/list pattern separation, each component handling distinct user workflows (creation vs. management/verification).
|
||||
## tags
|
||||
sshkey, form, list, create, ssh, icon, renders, keys
|
||||
sshkey, form, list, ssh, create, icon, keys, renders
|
||||
## symbols
|
||||
- SSHKeyCreateForm
|
||||
- SSHKeyList
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/terminal
|
||||
|
||||
## role
|
||||
Provides a cross-platform terminal emulator interface with WebSocket backend connectivity, supporting multiple sessions, special key input, and responsive desktop/mobile layouts.
|
||||
Provides responsive, cross-platform terminal UI components with session management, virtual special keys, and WebSocket-backed xterm.js integration for web-based terminal access.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
|
||||
@@ -4,19 +4,19 @@ dir: apps/web/src/components/features/terminal
|
||||
index: apps/web/src/components/features/terminal/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides a cross-platform terminal emulator interface with WebSocket backend connectivity, supporting multiple sessions, special key input, and responsive desktop/mobile layouts.
|
||||
Provides responsive, cross-platform terminal UI components with session management, virtual special keys, and WebSocket-backed xterm.js integration for web-based terminal access.
|
||||
## 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 | A React component that renders an interactive terminal emulator using xterm.js, connecting to a WebSocket backend with features like mobile touch scrolling, font resizing, flow control, heartbeat monitoring, and automatic reconnection. | exp: TerminalProps, TerminalRef, TerminalComponent | dep: react, xterm, xterm-addon-fit, xterm-addon-web-links, xterm/css/xterm.css, ../../../hooks/use-special-keys
|
||||
- DesktopTerminalView.tsx | Renders a desktop terminal view with session tabs, fullscreen controls, and multiple terminal instances | exp: DesktopTerminalView | dep: react, ./terminal, ./terminal-session-tabs, ../../../api/terminal
|
||||
- MobileTerminalView.tsx | Renders a mobile-optimized terminal interface with session tabs, toolbar controls, special keys input, and keyboard-aware layout adjustments. | exp: MobileTerminalView | dep: react, ./terminal, ./terminal-session-tabs, ../../icon, ./special-keys-strip, ./special-keys-panel, ../../../hooks/use-special-keys, ../../../api/terminal, terminal, terminal-session-tabs, icon, special-keys-strip, special-keys-panel, use-special-keys, api/terminal
|
||||
- special-keys-panel.tsx | Renders an overlay panel of special keyboard keys (Home, End, F1-F12, Ctrl+C, etc.) that sends terminal sequences when clicked and supports modifier key combinations. | exp: SpecialKeysPanel | dep: react, ../../../hooks/use-special-keys, React, use-special-keys hook
|
||||
- special-keys-strip.tsx | Renders a strip of virtual special keys (Esc, Tab, Ctrl, Alt, arrows, etc.) for sending terminal key sequences with optional modifier support. | exp: SpecialKeysStrip | dep: react, ../../../hooks/use-special-keys, use-special-keys hook
|
||||
- terminal-session-tabs.test.tsx | Tests a React terminal session tabs component for rendering, selection, closing with confirmation, renaming, session limits, and connection status display. | dep: @testing-library/react, vitest, ./terminal-session-tabs
|
||||
- terminal-session-tabs.tsx | Renders an interactive tab bar for managing multiple terminal sessions with selection, renaming, closing, and creation capabilities | exp: TerminalSessionInfo, TerminalSessionTabsProps, TerminalSessionTabs | dep: react, React, useState, useRef, useCallback
|
||||
- terminal.tsx | A React terminal component that provides an interactive xterm.js-based terminal with WebSocket connectivity, mobile touch support, and session management. | exp: TerminalProps, TerminalRef, TerminalComponent | dep: react, xterm, xterm-addon-fit, xterm-addon-web-links, xterm/css/xterm.css, ../../../hooks/use-special-keys, React
|
||||
## arch
|
||||
Component-based architecture with platform-specific view variants (Desktop/Mobile), compound component pattern for terminal subsystems (tabs, special keys, xterm.js integration), and WebSocket-based real-time communication with reconnection and heartbeat monitoring.
|
||||
Component-based architecture with platform-specific view layers (desktop/mobile), modular special keys subsystems (strip/overlay panel), tab-based session management with React state, and xterm.js integration via WebSocket abstraction with touch/mobile adaptations.
|
||||
## tags
|
||||
terminal, special, keys, session, react, tabs, view, renders
|
||||
terminal, special, keys, session, tabs, react, view, strip
|
||||
## symbols
|
||||
- DesktopTerminalView
|
||||
- MobileTerminalView
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/tool-workshop
|
||||
|
||||
## role
|
||||
Provides a complete UI for managing custom tool types (compose, dockerfile, manifest) in a workshop interface with list, edit, and mobile-responsive views.
|
||||
Provides the UI components for a "Tool Workshop" feature that allows users to create, edit, list, and manage tool type definitions across desktop and mobile interfaces.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
|
||||
@@ -4,15 +4,15 @@ dir: apps/web/src/components/features/tool-workshop
|
||||
index: apps/web/src/components/features/tool-workshop/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides a complete UI for managing custom tool types (compose, dockerfile, manifest) in a workshop interface with list, edit, and mobile-responsive views.
|
||||
Provides the UI components for a "Tool Workshop" feature that allows users to create, edit, list, and manage tool type definitions across desktop and mobile interfaces.
|
||||
## 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 workshop interface for managing tool types with list, detail, and edit views. | exp: MobileView, ToolWorkshopMobileView | dep: react, ../mobile/mobile-list-view, ../mobile/mobile-detail-view, ../mobile/mobile-edit-view, ../mobile/mobile-fab, ../tool/manifest-editor, ../../icon, ../../../api/tool-types, ./ToolTypeEditorPanel, ../../../api/tool-definitions, mobile-list-view, mobile-detail-view, mobile-edit-view, mobile-fab, manifest-editor, icon, tool-types, tool-definitions
|
||||
- ToolTypeEditorPanel.tsx | Renders a form panel for creating or editing tool type definitions 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, ToolType, ToolDefinitionManifest
|
||||
- ToolTypeListSidebar.tsx | Renders a sidebar listing tool types with selection, creation, and deletion capabilities | exp: ToolTypeListSidebar | dep: ../../icon, ../../../api/tool-types, react, icon component, tool-types API type
|
||||
- ToolWorkshopMobileView.tsx | Renders a mobile-responsive three-view (list/detail/edit) interface for managing tool types in a Tool Workshop, with conditional form fields based on definition type and interface type. | exp: MobileView, ToolWorkshopMobileView | dep: react, ../mobile/mobile-list-view, ../mobile/mobile-detail-view, ../mobile/mobile-edit-view, ../mobile/mobile-fab, ../tool/manifest-editor, ../../icon, ../../../api/tool-types, ./ToolTypeEditorPanel, ../../../api/tool-definitions, mobile-list-view, mobile-detail-view, mobile-edit-view, mobile-fab, manifest-editor, icon, tool-types, tool-definitions
|
||||
## arch
|
||||
Feature-based component composition with split-pane layout (sidebar + editor panel), responsive mobile adaptation, and CRUD operations for tool type definitions.
|
||||
Follows a split-pane layout pattern with sidebar list + detail/editor panels, using a mobile-specific three-view navigation variant; components are feature-scoped with prop-driven data flow and conditional rendering based on definition/interface type enums.
|
||||
## tags
|
||||
tool, mobile, view, type, types, editor, list, workshop
|
||||
tool, mobile, type, view, types, editor, list, panel
|
||||
## symbols
|
||||
- ToolTypeFormState
|
||||
- ToolTypeEditorPanel
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/tool
|
||||
|
||||
## role
|
||||
Provides React components for managing container-based development tools, including instance lifecycle, manifest editing, and workspace-integrated tool launching.
|
||||
Provides UI components for managing containerized development tools, including instance lifecycle management, manifest configuration, 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
|
||||
|
||||
@@ -4,18 +4,18 @@ dir: apps/web/src/components/features/tool
|
||||
index: apps/web/src/components/features/tool/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides React components for managing container-based development tools, including instance lifecycle, manifest editing, and workspace-integrated tool launching.
|
||||
Provides UI components for managing containerized development tools, including instance lifecycle management, manifest configuration, 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 | A React component that provides a workspace-first UI for selecting tool types, config profiles, and SSH keys to create and start a new tool instance/session. | 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
|
||||
- instance-list.tsx | React component that 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, ../../loading-overlay, ../../../api/sessions, ../../../api/tool-types, ../session/create-session-form, ../../../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 manifest configurations including base images, packages, environment variables, scripts, mounts, and runtime settings, with live preview generation capability. | exp: ManifestEditor | dep: react, ../../icon, ../../../utils/errors, ../../../api/tool-definitions, icon, errors utils, tool-definitions API
|
||||
- start-tool-fab.tsx | Renders a floating action button 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, workspace types, workspaces api
|
||||
- start-tool-modal.tsx | React modal component for selecting a tool type and optional config profile to start a tool 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
|
||||
- tool-starter.tsx | React component for starting a tool instance within a workspace with configurable tool types, profiles, and SSH keys | exp: ToolStarterProps, func:ToolStarter({ workspace, onStarted, onCancel, }: ToolStarterProps), call:useSessions, 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: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, ../../loading-overlay, ../../../api/tool-types, ../../../api/config-profiles, ../../../api/ssh-keys, ../../../state/sessions, ../../../types/workspace, ../../../api/sessions, icon, loading-overlay, tool-types, config-profiles, ssh-keys, sessions, workspace types, sessions api
|
||||
- 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 modal/sheet UI patterns, form-driven configuration editing, and workspace-contextual tool orchestration with mobile-responsive navigation.
|
||||
Feature-based React component architecture with modal/bottom-sheet mobile-responsive patterns, form-driven configuration editing with live preview, and workspace-contextual tool orchestration.
|
||||
## tags
|
||||
tool, call:set, types, call:use, api, start, ssh, icon
|
||||
call:set, tool, types, start, call:use, ssh, react, loading
|
||||
## symbols
|
||||
- StartToolFAB
|
||||
- StartToolModal
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/workspace
|
||||
|
||||
## role
|
||||
Provides the complete UI component suite for workspace management, including creation, detail viewing, file editing, Git operations, tool management, and settings.
|
||||
Provides UI components for workspace management, navigation, and operations in a web-based development environment.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
|
||||
@@ -4,22 +4,22 @@ dir: apps/web/src/components/features/workspace
|
||||
index: apps/web/src/components/features/workspace/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides the complete UI component suite for workspace management, including creation, detail viewing, file editing, Git operations, tool management, and settings.
|
||||
Provides UI components for workspace management, navigation, and operations in a web-based development environment.
|
||||
## files
|
||||
- workspace-card.tsx | React component that renders a card displaying 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-detail-header.tsx | Renders a header component for a workspace detail page showing breadcrumb navigation and branch information. | exp: WorkspaceDetailHeaderProps, func:WorkspaceDetailHeader({ workspace, }: WorkspaceDetailHeaderProps) | dep: ../../icon, react
|
||||
- workspace-file-panel.tsx | Renders a file browser and editor panel with Git integration for a workspace detail page. | exp: func:WorkspaceFilePanel({ workspaceId }: WorkspaceFilePanelProps), call:useWorkspaceFiles, call:useWorkspaceGit, call:useState, call:setSelectedPath, call:setIsEditing, call:setEditContent, call:navigateTo, call:loadFile, call:currentPath.split("/").slice(0, -1).join, call:saveFile, call:setCommitMessage, call:commit, call:entries.map, call:handleSelect | dep: react, ../../icon, ../../../hooks/use-workspace-files, ../../../hooks/use-workspace-git, ../../../api/workspace-files
|
||||
- workspace-git-panel.tsx | Renders a Git panel for a workspace detail page that displays branch selection and commit history. | exp: func:WorkspaceGitPanel({ workspaceId }: WorkspaceGitPanelProps), call:useWorkspaceGit, call:checkout, call:branches.map, call:history.map, call:commit.hash.slice | dep: ../../../hooks/use-workspace-git, react, use-workspace-git hook
|
||||
- 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-create-form.tsx | A React form component for creating workspaces with cascading project/repository/branch selectors and support for both contextual (pre-selected) 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 component, projects API, git-repositories API, workspaces API, use-git-repo hook
|
||||
- workspace-detail-header.tsx | Renders a header component for a workspace detail page showing breadcrumb navigation and branch information. | exp: WorkspaceDetailHeaderProps, func:WorkspaceDetailHeader({ workspace, }: WorkspaceDetailHeaderProps) | dep: ../../icon, icon
|
||||
- workspace-file-panel.tsx | Renders a file browser and editor panel for a workspace with integrated Git status and operations toolbar. | exp: func:WorkspaceFilePanel({ workspaceId }: WorkspaceFilePanelProps), call:useWorkspaceFiles, call:useWorkspaceGit, call:useState, call:setSelectedPath, call:setIsEditing, call:setEditContent, call:navigateTo, call:loadFile, call:currentPath.split("/").slice(0, -1).join, call:saveFile, call:setCommitMessage, call:commit, call:entries.map, call:handleSelect | dep: react, ../../icon, ../../../hooks/use-workspace-files, ../../../hooks/use-workspace-git, ../../../api/workspace-files
|
||||
- workspace-git-panel.tsx | Renders a Git panel for a workspace detail page showing branch selector and commit history. | exp: func:WorkspaceGitPanel({ workspaceId }: WorkspaceGitPanelProps), call:useWorkspaceGit, call:checkout, call:branches.map, call:history.map, call:commit.hash.slice | dep: ../../../hooks/use-workspace-git, react, use-workspace-git hook
|
||||
- workspace-header.tsx | Renders a workspace header component displaying project info, current repository, and 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
|
||||
- workspace-settings-panel.tsx | Displays a read-only settings panel showing workspace information details | exp: func:WorkspaceSettingsPanel({ workspace, }: WorkspaceSettingsPanelProps) | dep: ../../../types/workspace, React, Workspace type
|
||||
- workspace-tab-bar.tsx | Renders desktop and mobile tab bar components for workspace navigation with files, git, tools, and settings tabs. | exp: WorkspaceTab, func:WorkspaceTabBar({ active, onChange }: WorkspaceTabBarProps), call:TABS.map, call:onChange, func:WorkspaceMobileTabBar({ active, onChange, }: WorkspaceTabBarProps), call:TABS.map, call:onChange | dep: ../../icon, react
|
||||
- workspace-tools-panel.tsx | Renders a tools management panel for a workspace that displays running tool instances and allows starting new tools via a modal | exp: func:WorkspaceToolsPanel({ workspace }: WorkspaceToolsPanelProps), call:useWorkspaceInstances, call:useState, call:setShowModal, call:instances.map, call:e.stopPropagation, call:refresh | dep: react, ../../icon, ../tool/tool-starter, ../../../hooks/use-workspace-instances, ../../../types/workspace, icon, tool-starter, use-workspace-instances, workspace types
|
||||
- workspace-settings-panel.tsx | Displays a read-only settings panel showing workspace information for a workspace detail page. | exp: func:WorkspaceSettingsPanel({ workspace, }: WorkspaceSettingsPanelProps) | dep: ../../../types/workspace, React, types/workspace
|
||||
- workspace-tab-bar.tsx | Renders a tab bar navigation component for workspace detail pages with desktop and mobile variants. | exp: WorkspaceTab, func:WorkspaceTabBar({ active, onChange }: WorkspaceTabBarProps), call:TABS.map, call:onChange, func:WorkspaceMobileTabBar({ active, onChange, }: WorkspaceTabBarProps), call:TABS.map, call:onChange | dep: ../../icon, icon
|
||||
- workspace-tools-panel.tsx | Renders a tools management panel for a workspace that displays running tool instances and provides a modal to start new tools. | exp: func:WorkspaceToolsPanel({ workspace }: WorkspaceToolsPanelProps), call:useWorkspaceInstances, call:useState, call:setShowModal, call:instances.map, call:e.stopPropagation, call:refresh | dep: react, ../../icon, ../tool/tool-starter, ../../../hooks/use-workspace-instances, ../../../types/workspace
|
||||
## arch
|
||||
Feature-based component organization with compound page pattern (header/tab-bar/panels), form abstraction for creation, and modal-driven tool management with responsive mobile/desktop tab navigation.
|
||||
Feature-based component architecture with compound UI pattern - specialized sub-components (header, panels, forms, navigation) compose into complete workspace views, using container/presentational separation with integrated Git tooling and multi-modal workspace interactions.
|
||||
## tags
|
||||
workspace, call:set, call:use, panel, git, branch, react, call:on
|
||||
workspace, call:set, call:use, panel, git, branch, call:on, header
|
||||
## symbols
|
||||
- WorkspaceCard
|
||||
- WorkspaceCreateForm
|
||||
|
||||
Reference in New Issue
Block a user