diff --git a/.pi-map.index.md b/.pi-map.index.md index b1801fb..6a0e0d4 100644 --- a/.pi-map.index.md +++ b/.pi-map.index.md @@ -16,7 +16,7 @@ dir: . Trust boundary: index routes, map orients, source decides. ## role -A self-hosted, containerized project management and Git repository platform with OAuth2 SSO integration, designed for deployment via Docker Compose with or without Traefik reverse proxy. +Infrastructure and deployment configuration package for a self-hosted project management platform with OAuth2/SSO authentication. ## parent - ## children diff --git a/.pi-map.md b/.pi-map.md index beec14b..5886565 100644 --- a/.pi-map.md +++ b/.pi-map.md @@ -18,7 +18,7 @@ index: ./.pi-map.index.md Trust boundary: index routes, map orients, source decides. ## role -Infrastructure and deployment configuration for a self-hosted project management and git repository platform with multi-service Docker orchestration. +Infrastructure and deployment configuration package for a self-hosted project management platform with OAuth2/SSO authentication. ## files - .env.example | Provides a template of environment variables for configuring a Headquarter application with PostgreSQL, Redis, Authentik SSO, and Docker/Traefik deployment - .gitignore | Specifies files and directories for Git to ignore across a multi-language project with Python, Node, and custom tooling | dep: Git @@ -31,7 +31,7 @@ Infrastructure and deployment configuration for a self-hosted project management - progress.md | Tracks completed and remaining tasks for a backend-frontend code refactoring project organized in 7 phases - swap-pane | Empty file with no functionality ## arch -Docker Compose-based microservices with PostgreSQL/Redis backend, Traefik reverse proxy, OAuth2 SSO integration, and environment-driven configuration management. +Containerized microservices architecture using Docker Compose with PostgreSQL/Redis backing services, Traefik reverse proxy for TLS termination, and environment-driven configuration management. ## tags docker, redis, git, application, postgresql, compose, traefik, project ## symbols diff --git a/apps/.pi-map.index.md b/apps/.pi-map.index.md index aa9812c..481859e 100644 --- a/apps/.pi-map.index.md +++ b/apps/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps ## role -Contains the main deployable application entry points and executable configurations for the project. +Contains the deployable application entry points and executable binaries for the project. ## parent index: ./.pi-map.index.md map: ./.pi-map.md diff --git a/apps/.pi-map.md b/apps/.pi-map.md index ecbd43c..e50e774 100644 --- a/apps/.pi-map.md +++ b/apps/.pi-map.md @@ -4,10 +4,10 @@ dir: apps index: apps/.pi-map.index.md ## role -Contains the main application entry points and executable modules for the project. +Contains the deployable application entry points and executable binaries for the project. ## files ## arch -Modular application structure with separate deployable units, typically following framework-specific conventions (e.g., Next.js, React, or other app-based architectures). +Layered architecture with separate application modules, each typically containing main functions, configuration, and dependency wiring to compose domain and infrastructure services into runnable programs. ## tags - ## symbols diff --git a/apps/web/.pi-map.index.md b/apps/web/.pi-map.index.md index 7ed2ebf..dd8994a 100644 --- a/apps/web/.pi-map.index.md +++ b/apps/web/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web ## role -Frontend web application for a React-based "headquarter" project providing code editing, terminal, and routing capabilities via Vite/TypeScript. +Frontend web application providing the browser-based UI for the "headquarter" project, built with React/Vite/TypeScript and deployed via nginx. ## parent index: apps/.pi-map.index.md map: apps/.pi-map.md diff --git a/apps/web/.pi-map.md b/apps/web/.pi-map.md index 7974384..e50f9d5 100644 --- a/apps/web/.pi-map.md +++ b/apps/web/.pi-map.md @@ -4,7 +4,7 @@ dir: apps/web index: apps/web/.pi-map.index.md ## role -Frontend web application for a React-based "headquarter" project providing code editing, terminal, and routing capabilities via Vite/TypeScript. +Frontend web application providing the browser-based UI for the "headquarter" project, built with React/Vite/TypeScript and deployed via nginx. ## files - .env.example | Template file defining example environment variables for frontend API and application URL configuration - .eslintrc.cjs | Configures ESLint for a TypeScript browser project with modern ECMAScript module support | dep: @typescript-eslint/parser, @typescript-eslint/eslint-plugin, eslint @@ -16,7 +16,7 @@ Frontend web application for a React-based "headquarter" project providing code - tsconfig.json | TypeScript configuration file for a React project using Vite with modern ES2020 target and bundler module resolution | dep: typescript, react, vite - vite.config.ts | Configures Vite build tool for a React project with custom dev server port and Vitest test settings. | dep: vite, @vitejs/plugin-react ## arch -Modern SPA architecture using Vite bundler with React, TypeScript, nginx static serving, multi-stage Docker containerization, and client-side routing with optimized asset caching. +Modern SPA architecture using Vite for bundling, React for component-based UI, TypeScript for type safety, nginx for static serving with client-side routing fallback, and Docker multi-stage builds for containerized deployment. ## tags react, eslint, vite, typescript, dom, application, nginx, web ## symbols diff --git a/apps/web/src/.pi-map.index.md b/apps/web/src/.pi-map.index.md index 4ebffb3..251db5e 100644 --- a/apps/web/src/.pi-map.index.md +++ b/apps/web/src/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src ## role -Provides the core web application entry point, routing infrastructure, and shared domain type definitions for a React-based frontend. +Provides the core web application entry point, routing infrastructure, and shared domain type definitions for a React-based web frontend. ## parent index: apps/web/.pi-map.index.md map: apps/web/.pi-map.md diff --git a/apps/web/src/.pi-map.md b/apps/web/src/.pi-map.md index 0c9a390..0bccaa9 100644 --- a/apps/web/src/.pi-map.md +++ b/apps/web/src/.pi-map.md @@ -4,13 +4,13 @@ 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 collaborative development platform. +Provides the core web application entry point, routing infrastructure, and shared domain type definitions for a React-based web frontend. ## files - main.tsx | Bootstraps a React application with routing, authentication, and session management 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/projects.css, ./styles/pages/sessions.css, ./styles/pages/ssh-keys.css, ./styles/pages/workspace-detail.css, ./styles/pages/workspaces.css, react-dom - 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 -Modular React SPA with provider-pattern state management, nested routing with authentication guards, and centralized TypeScript domain modeling for multi-tenant workspace/project hierarchy. +Modular React SPA architecture using React Router v6 with nested route layouts, protected route guards via authentication context, provider composition pattern for dependency injection (session/auth), and centralized TypeScript type definitions for cross-cutting domain models. ## tags pages, styles, css, router, react, session, dom, project ## symbols diff --git a/apps/web/src/components/.pi-map.index.md b/apps/web/src/components/.pi-map.index.md index 9c9b73d..5846ea1 100644 --- a/apps/web/src/components/.pi-map.index.md +++ b/apps/web/src/components/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/components ## role -Provides reusable, accessible UI primitives and layout components for a React web application, including shell structure, data visualization states, iconography, code editing/display, authentication guards, and toast notifications. +Provides foundational React UI components and utilities for rendering layouts, navigation, data states, icons, code editing, syntax highlighting, authentication guards, and toast notifications in the web application. ## parent index: apps/web/src/.pi-map.index.md map: apps/web/src/.pi-map.md diff --git a/apps/web/src/components/.pi-map.md b/apps/web/src/components/.pi-map.md index afc841e..bb391b0 100644 --- a/apps/web/src/components/.pi-map.md +++ b/apps/web/src/components/.pi-map.md @@ -4,7 +4,7 @@ dir: apps/web/src/components index: apps/web/src/components/.pi-map.index.md ## role -Provides reusable UI components, layout primitives, and auth guards for the web application's React-based frontend. +Provides reusable, accessible UI components and utilities for a React web application including layout shells, data state handling, iconography, routing guards, and toast notifications. ## files - app-shell.tsx | Renders the main application shell layout with navigation, header, session management, and mobile-responsive behavior for a React Router-based SPA. | 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, ./features/notification/event-toast-bridge, ./features/notification/notification-center, ./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 @@ -17,7 +17,7 @@ Provides reusable UI components, layout primitives, and auth guards for the web - 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 React architecture with functional components, composition patterns, separation of concerns (presentation, auth, feedback), and test colocation. +Component-based React architecture with functional components, custom hooks for auth/session management, utility modules for pure logic (toast rules), centralized icon abstraction layer, and test coverage for critical routing and notification logic. ## tags toast, icon, react, state, code, loading, event, editor ## symbols diff --git a/apps/web/src/components/features/.pi-map.index.md b/apps/web/src/components/features/.pi-map.index.md index 48738e1..9150a42 100644 --- a/apps/web/src/components/features/.pi-map.index.md +++ b/apps/web/src/components/features/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/components/features ## role -Reusable UI feature components for the web application that compose domain-specific user interface elements. +Contains reusable UI components that implement specific business features or domain logic for the web application. ## parent index: apps/web/src/components/.pi-map.index.md map: apps/web/src/components/.pi-map.md diff --git a/apps/web/src/components/features/.pi-map.md b/apps/web/src/components/features/.pi-map.md index 1d1b6f2..37923c9 100644 --- a/apps/web/src/components/features/.pi-map.md +++ b/apps/web/src/components/features/.pi-map.md @@ -4,10 +4,10 @@ dir: apps/web/src/components/features index: apps/web/src/components/features/.pi-map.index.md ## role -Reusable UI feature components for the web application that compose domain-specific user interface elements. +Contains reusable React components that implement specific user-facing features and functionality within the web application. ## files ## arch -Modular feature-based component organization with domain-specific grouping, likely following atomic design or container/presentational patterns with shared component composition. +Feature-based component organization following domain-driven design principles, likely with each sub-directory representing a distinct business capability or user workflow. ## tags - ## symbols diff --git a/apps/web/src/components/features/config-profiles/.pi-map.index.md b/apps/web/src/components/features/config-profiles/.pi-map.index.md index 8d8510b..16b1472 100644 --- a/apps/web/src/components/features/config-profiles/.pi-map.index.md +++ b/apps/web/src/components/features/config-profiles/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/components/features/config-profiles ## role -Provides a complete UI subsystem for managing container configuration profiles across desktop and mobile form factors. +Provides UI components for managing Docker configuration profiles including creation, editing, listing, and mobile-responsive views. ## parent index: apps/web/src/components/features/.pi-map.index.md map: apps/web/src/components/features/.pi-map.md diff --git a/apps/web/src/components/features/config-profiles/.pi-map.md b/apps/web/src/components/features/config-profiles/.pi-map.md index c2ee5cc..7da39d3 100644 --- a/apps/web/src/components/features/config-profiles/.pi-map.md +++ b/apps/web/src/components/features/config-profiles/.pi-map.md @@ -4,13 +4,13 @@ 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 container configuration profiles across desktop and mobile form factors. +Provides UI components for managing Docker configuration profiles including creation, editing, listing, and mobile-responsive views. ## 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-optimized 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 +- 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 ## arch -Compound component architecture with state-driven mobile adaptation, separating list navigation from editing concerns with explicit responsive breakpoint handling. +Feature-based component composition with state-driven panels (list/detail/edit/preview), form-based editing, and responsive layout adaptation for mobile/desktop. ## tags mobile, config, view, profiles, editor, profile, list, icon ## symbols diff --git a/apps/web/src/components/features/config-profiles/ConfigProfilesMobileView.tsx b/apps/web/src/components/features/config-profiles/ConfigProfilesMobileView.tsx index def409d..8a25049 100644 --- a/apps/web/src/components/features/config-profiles/ConfigProfilesMobileView.tsx +++ b/apps/web/src/components/features/config-profiles/ConfigProfilesMobileView.tsx @@ -113,7 +113,7 @@ export const ConfigProfilesMobileView = ({ try { const ok = await onSubmit(); if (ok) { - onViewChange(isCreating ? "list" : "detail"); + onViewChange(isCreating ? "list" : "edit"); } } finally { setIsSaving(false); @@ -150,7 +150,7 @@ export const ConfigProfilesMobileView = ({ const profile = profiles.find((p) => p.id === id); if (profile) { onSelect(profile); - onViewChange("detail"); + onViewChange("edit"); } }} onItemDelete={(id: string) => onDelete(id)} @@ -395,9 +395,11 @@ export const ConfigProfilesMobileView = ({ { - onViewChange(isCreating ? "list" : "detail"); + onViewChange("list"); }} onSave={handleSave} + onDelete={isCreating ? undefined : handleDeleteClick} + deleteLabel="Delete Profile" isSaving={isSaving || saveStatus === "saving"} >
@@ -793,7 +795,7 @@ export const ConfigProfilesMobileView = ({ const profile = profiles.find((p) => p.id === id); if (profile) { onSelect(profile); - onViewChange("detail"); + onViewChange("edit"); } }} onItemDelete={(id: string) => onDelete(id)} diff --git a/apps/web/src/components/features/mobile/.pi-map.index.md b/apps/web/src/components/features/mobile/.pi-map.index.md index 0a82d2d..948883e 100644 --- a/apps/web/src/components/features/mobile/.pi-map.index.md +++ b/apps/web/src/components/features/mobile/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/components/features/mobile ## role -Provides a complete set of mobile-optimized UI components for building responsive mobile interfaces including navigation, lists, detail/edit views, action sheets, and specialized terminal wrappers. +Provides mobile-optimized UI components for a responsive web application, covering navigation, data views, forms, modals, and specialized terminal interfaces. ## parent index: apps/web/src/components/features/.pi-map.index.md map: apps/web/src/components/features/.pi-map.md diff --git a/apps/web/src/components/features/mobile/.pi-map.md b/apps/web/src/components/features/mobile/.pi-map.md index f79f505..b4b99cd 100644 --- a/apps/web/src/components/features/mobile/.pi-map.md +++ b/apps/web/src/components/features/mobile/.pi-map.md @@ -4,11 +4,11 @@ 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 mobile interfaces including navigation, lists, detail/edit views, action sheets, and specialized terminal wrappers. +Provides mobile-optimized UI components for a responsive web application, covering navigation, data views, forms, modals, and specialized terminal interfaces. ## 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 data with configurable field types and save/cancel actions. | exp: MobileEditView | dep: 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 | Renders a mobile-optimized list view with optional search, empty state, and customizable item rendering | 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 @@ -17,7 +17,7 @@ Provides a complete set of mobile-optimized UI components for building responsiv - 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 - 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 library using compound mobile patterns (bottom sheets, FABs, auto-hiding headers) with typed configurable props and progressive enhancement for touch/keyboard interactions. +Compositional React component library with feature-specific mobile adaptations, using bottom sheets/action sheets for mobile navigation patterns, typed configurable props for flexibility, and terminal-specific wrappers with keyboard-aware mobile handling. ## tags mobile, terminal, sheet, icon, view, react, header, renders ## symbols diff --git a/apps/web/src/components/features/mobile/mobile-edit-view.tsx b/apps/web/src/components/features/mobile/mobile-edit-view.tsx index 3801822..40b2b01 100644 --- a/apps/web/src/components/features/mobile/mobile-edit-view.tsx +++ b/apps/web/src/components/features/mobile/mobile-edit-view.tsx @@ -16,6 +16,8 @@ interface MobileEditViewProps { fields?: FormField[]; onSave: (data: Record) => void; onCancel: () => void; + onDelete?: () => void; + deleteLabel?: string; isSaving?: boolean; children?: React.ReactNode; } @@ -25,6 +27,8 @@ export const MobileEditView: React.FC = ({ fields, onSave, onCancel, + onDelete, + deleteLabel = "Delete", isSaving = false, children, }) => { @@ -59,14 +63,7 @@ export const MobileEditView: React.FC = ({ Cancel

{title}

- +
@@ -156,6 +153,27 @@ export const MobileEditView: React.FC = ({
))} + +
+ + {onDelete && ( + + )} +
); }; diff --git a/apps/web/src/components/features/tool-workshop/.pi-map.index.md b/apps/web/src/components/features/tool-workshop/.pi-map.index.md index b8444b5..137abad 100644 --- a/apps/web/src/components/features/tool-workshop/.pi-map.index.md +++ b/apps/web/src/components/features/tool-workshop/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/components/features/tool-workshop ## role -Provides a complete CRUD interface for managing reusable tool type definitions (Docker Compose, Dockerfile, Manifest) in a workshop-style admin panel with responsive desktop and mobile layouts. +Provides a complete UI for managing custom tool types in a "Tool Workshop" feature, enabling users to create, edit, list, and delete tool definitions with multiple definition formats. ## parent index: apps/web/src/components/features/.pi-map.index.md map: apps/web/src/components/features/.pi-map.md diff --git a/apps/web/src/components/features/tool-workshop/.pi-map.md b/apps/web/src/components/features/tool-workshop/.pi-map.md index 54dead6..fceaf4b 100644 --- a/apps/web/src/components/features/tool-workshop/.pi-map.md +++ b/apps/web/src/components/features/tool-workshop/.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 CRUD interface for managing reusable tool type definitions (Docker Compose, Dockerfile, Manifest) in a workshop-style admin panel with responsive desktop and mobile layouts. +Provides a complete UI for managing custom tool types in a "Tool Workshop" feature, enabling users to create, edit, list, and delete tool definitions with multiple definition formats. ## 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 three-view (list/detail/edit) interface for managing tool types in a tool workshop, with form handling for creating and editing tool configurations including Docker Compose, Dockerfile, or Manifest definitions. | 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, ToolTypeEditorPanel, tool-definitions +- ToolWorkshopMobileView.tsx | Renders a mobile-responsive 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 ## arch -Compound component pattern with split-pane desktop layout (sidebar list + editor panel) and state-driven mobile view with three-view routing (list/detail/edit), using React state for form management and optimistic UI updates. +Implements a split-pane layout pattern with sidebar list navigation and detail/editor panel, plus a dedicated mobile-responsive view with state-driven screen switching, all using React functional components with TypeScript. ## tags -tool, mobile, view, type, types, editor, list, workshop +tool, mobile, view, type, types, editor, list, panel ## symbols - ToolTypeFormState - ToolTypeEditorPanel diff --git a/apps/web/src/components/features/tool-workshop/ToolWorkshopMobileView.tsx b/apps/web/src/components/features/tool-workshop/ToolWorkshopMobileView.tsx index 555f814..680059e 100644 --- a/apps/web/src/components/features/tool-workshop/ToolWorkshopMobileView.tsx +++ b/apps/web/src/components/features/tool-workshop/ToolWorkshopMobileView.tsx @@ -60,7 +60,7 @@ export const ToolWorkshopMobileView = ({ try { const ok = await onSubmit(); if (ok) { - onViewChange("list"); + onViewChange(isCreating ? "list" : "edit"); } } finally { setIsSaving(false); @@ -91,7 +91,7 @@ export const ToolWorkshopMobileView = ({ const toolType = toolTypes.find((t) => t.id === id); if (toolType) { onSelect(toolType); - onViewChange("detail"); + onViewChange("edit"); } }} emptyMessage="No tool types yet" @@ -189,6 +189,8 @@ export const ToolWorkshopMobileView = ({ title={isCreating ? "Create Tool Type" : "Edit Tool Type"} onCancel={onCancel} onSave={handleSave} + onDelete={isCreating ? undefined : handleDelete} + deleteLabel="Delete Tool Type" isSaving={isSaving} >
@@ -452,7 +454,7 @@ export const ToolWorkshopMobileView = ({ const toolType = toolTypes.find((t) => t.id === id); if (toolType) { onSelect(toolType); - onViewChange("detail"); + onViewChange("edit"); } }} emptyMessage="No tool types yet" diff --git a/apps/web/src/pages/.pi-map.index.md b/apps/web/src/pages/.pi-map.index.md index d43d7b8..8445fc1 100644 --- a/apps/web/src/pages/.pi-map.index.md +++ b/apps/web/src/pages/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/pages ## role -Contains top-level page components that render the main application screens for workspace management, project administration, Git operations, user settings, and terminal sessions. +Contains top-level page components that render the main UI views for the web application, each corresponding to a distinct route and feature area. ## parent index: apps/web/src/.pi-map.index.md map: apps/web/src/.pi-map.md diff --git a/apps/web/src/pages/.pi-map.md b/apps/web/src/pages/.pi-map.md index bf28b5e..14a1b30 100644 --- a/apps/web/src/pages/.pi-map.md +++ b/apps/web/src/pages/.pi-map.md @@ -4,7 +4,7 @@ dir: apps/web/src/pages index: apps/web/src/pages/.pi-map.index.md ## role -Contains top-level page components that render the main application screens for workspace management, project administration, Git operations, user settings, and terminal sessions. +Contains top-level page components that render the main UI views for the web application, each corresponding to a distinct route and feature area. ## files - ConfigProfilesPage.tsx | Renders a configuration profiles management page with responsive desktop/mobile layouts for creating, editing, previewing, and organizing 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, use-mobile-viewport, use-config-profiles, data-states, ConfigProfileListSidebar, ConfigProfileEditorPanel, ConfigProfilesMobileView - DashboardPage.test.tsx | Unit tests for the DashboardPage component verifying overview loading and error retry behavior | dep: @testing-library/jest-dom/vitest, @testing-library/react, react-router-dom, vitest, ./DashboardPage, ../state/sessions, DashboardPage, SessionsProvider @@ -20,12 +20,12 @@ Contains top-level page components that render the main application screens for - 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 navigation and editor panel for managing tool types, with mobile-specific view switching | 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 +- ToolWorkshopPage.tsx | Renders a responsive tool workshop page with list and editor views for managing tool types, handling loading/error states and mobile/desktop layouts | 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.test.tsx | Tests the WorkspaceDetailPage component rendering and tab switching behavior | dep: @testing-library/jest-dom/vitest, @testing-library/react, react-router-dom, vitest, ./WorkspaceDetailPage, @testing-library/jest-dom, WorkspaceDetailPage, use-workspaces, use-workspace-files, use-workspace-git, use-workspace-instances, use-mobile-viewport - WorkspaceDetailPage.tsx | Renders a workspace detail page with tab-based navigation for files, git, tools, and settings panels, with mobile-responsive layout. | exp: func:WorkspaceDetailPage(), call:useParams, call:useState, call:useMobileViewport, call:useWorkspaces, call:workspaces.find | dep: react, react-router-dom, ../hooks/use-workspaces, ../hooks/use-mobile-viewport, ../components/features/workspace/workspace-detail-header, ../components/features/workspace/workspace-tab-bar, ../components/features/workspace/workspace-file-panel, ../components/features/workspace/workspace-git-panel, ../components/features/workspace/workspace-tools-panel, ../components/features/workspace/workspace-settings-panel, use-workspaces, use-mobile-viewport, workspace-detail-header, workspace-tab-bar, workspace-file-panel, workspace-git-panel, workspace-tools-panel, workspace-settings-panel - WorkspacesPage.tsx | Renders a responsive workspaces management page with mobile and desktop views supporting listing, creating, viewing details, syncing, deleting, and starting tools for workspaces. | 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: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-detail-view, ../components/features/mobile/mobile-fab, ../components/features/tool/tool-starter, ../types/workspace ## arch -Follows a page-based routing architecture with responsive mobile/desktop view splitting, tabbed navigation patterns, polling-based health checks, and CRUD operations backed by API hooks, with co-located test files. +Route-based page organization with responsive mobile/desktop layout patterns, tabbed navigation for complex pages, polling/health-check mechanisms for live data, and CRUD operations with loading/error/empty states throughout. ## tags page, components, workspace, features, mobile, react, hooks, settings ## symbols diff --git a/apps/web/src/pages/ToolWorkshopPage.tsx b/apps/web/src/pages/ToolWorkshopPage.tsx index d971d8a..615ed84 100644 --- a/apps/web/src/pages/ToolWorkshopPage.tsx +++ b/apps/web/src/pages/ToolWorkshopPage.tsx @@ -78,7 +78,7 @@ export const ToolWorkshopPage = () => { return; } } - setMobileView(isCreating ? "list" : "detail"); + setMobileView("list"); }} /> ); diff --git a/apps/web/src/styles/.pi-map.index.md b/apps/web/src/styles/.pi-map.index.md index 834070f..ca7caf9 100644 --- a/apps/web/src/styles/.pi-map.index.md +++ b/apps/web/src/styles/.pi-map.index.md @@ -2,7 +2,7 @@ dir: apps/web/src/styles ## role -Houses the complete CSS styling system for the web application, providing design tokens, global styles, component-specific styles, syntax highlighting themes, and responsive utility classes. +Provides the complete visual design system and styling foundation for the web application, including themes, tokens, utilities, and component-specific styles. ## parent index: apps/web/src/.pi-map.index.md map: apps/web/src/.pi-map.md diff --git a/apps/web/src/styles/.pi-map.md b/apps/web/src/styles/.pi-map.md index 4f5ac9c..07c36ff 100644 --- a/apps/web/src/styles/.pi-map.md +++ b/apps/web/src/styles/.pi-map.md @@ -4,16 +4,16 @@ dir: apps/web/src/styles index: apps/web/src/styles/.pi-map.index.md ## role -Houses the complete CSS styling system for the web application, providing design tokens, global styles, component-specific styles, syntax highlighting themes, and responsive utility classes. +Provides the complete visual design system and styling foundation for the web application, including themes, tokens, utilities, and component-specific styles. ## 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 responsive CSS utility classes and component-specific styles for a web application featuring terminals, session management, dialogs, tables, and forms with mobile-first responsive design. | dep: CSS custom properties (variables like --space-*, --border, --bg, --brand, --muted, --success, --danger, --text-xs, --text-sm), xterm.js (terminal library) +- utilities.css | Provides responsive CSS utility classes and component-specific styles for a web application including layout systems, terminal interfaces, session management, and mobile adaptations. | dep: CSS custom properties (var(--space-*), var(--border), var(--bg), var(--text), var(--muted), var(--success), var(--danger), var(--brand)), xterm.js (terminal component) ## arch -Token-based CSS architecture using CSS custom properties for light/dark theming, mobile-first responsive design with breakpoint scaling, and modular separation of concerns across tokens, globals, utilities, and component-specific stylesheets. +Token-driven CSS architecture using CSS custom properties for light/dark theming, utility-first responsive classes, and modular separation of concerns across global, component-specific, syntax highlighting, and design token layers. ## tags -space, global, css, web, application, responsive, design, syntax +var(, space, global, css, web, application, syntax, defines ## symbols - ## workflows diff --git a/apps/web/src/styles/utilities.css b/apps/web/src/styles/utilities.css index 6a7ad47..9ef951b 100644 --- a/apps/web/src/styles/utilities.css +++ b/apps/web/src/styles/utilities.css @@ -2138,7 +2138,8 @@ a.nav-item, } .mobile-edit-cancel, -.mobile-edit-save { +.mobile-edit-save, +.mobile-edit-delete { min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: 10px; @@ -2159,8 +2160,15 @@ a.nav-item, color: white; } +.mobile-edit-delete { + background: var(--danger-light); + border: 1px solid var(--danger); + color: var(--danger); +} + .mobile-edit-save:disabled, -.mobile-edit-cancel:disabled { +.mobile-edit-cancel:disabled, +.mobile-edit-delete:disabled { opacity: 0.6; cursor: not-allowed; } @@ -2180,7 +2188,31 @@ a.nav-item, flex: 1; overflow-y: auto; padding: var(--space-3); - padding-bottom: calc(var(--space-4) + 64px); + padding-bottom: calc(var(--space-3) + 148px); +} + +/* Mobile Edit Actions (sticky bottom bar) */ +.mobile-edit-actions { + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 20; + display: flex; + flex-direction: column; + gap: var(--space-2); + padding: var(--space-3); + padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); + background: var(--panel); + border-top: 1px solid var(--border); + box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); +} + +.mobile-edit-actions .mobile-edit-save, +.mobile-edit-actions .mobile-edit-delete { + width: 100%; + justify-content: center; + min-height: 48px; } .mobile-edit-field { diff --git a/openspec/changes/mobile-edit-default-bottom-actions/change.md b/openspec/changes/mobile-edit-default-bottom-actions/change.md new file mode 100644 index 0000000..a4b7220 --- /dev/null +++ b/openspec/changes/mobile-edit-default-bottom-actions/change.md @@ -0,0 +1,37 @@ +# Mobile Edit-as-Default with Sticky Bottom Actions + +## Summary + +On mobile, tapping a config profile or tool type now opens the edit view directly instead of the read-only detail view. Save and Delete actions are anchored to a sticky bottom action bar so they are always reachable while scrolling long forms. + +## Motivation + +The previous mobile flow required an extra tap (list → detail → edit) for every change. Power users on phones primarily want to edit, so the default view should be edit. The Save and Delete buttons were also at the top of long forms, forcing users to scroll back up to commit changes. + +## Scope + +- Config Profiles mobile view (`ConfigProfilesMobileView`). +- Tool Workshop mobile view (`ToolWorkshopMobileView`). +- Shared `MobileEditView` component. +- Mobile edit-view CSS (`utilities.css`). + +## Acceptance Criteria + +- [x] Tapping a config profile opens the edit form. +- [x] Tapping a tool type opens the edit form. +- [x] Create flows still open the edit form and return to the list after save. +- [x] Edit flows stay on the edit form after a successful save and show a success message. +- [x] Delete is available in the edit view for existing items. +- [x] Save and Delete buttons are sticky at the bottom of the viewport on mobile. +- [x] Detail and preview views remain reachable from edit where already wired. + +## Non-Goals + +- Changing desktop behavior or layout. +- Removing detail/preview views entirely. +- Altering the user profile page flow (it already uses `MobileEditView` and benefits from the sticky bar automatically). + +## Related + +- `openspec/changes/mobile-config-profiles-ui` +- `openspec/changes/mobile-tool-profile-ui` diff --git a/openspec/changes/mobile-edit-default-bottom-actions/tasks.md b/openspec/changes/mobile-edit-default-bottom-actions/tasks.md new file mode 100644 index 0000000..c9e363e --- /dev/null +++ b/openspec/changes/mobile-edit-default-bottom-actions/tasks.md @@ -0,0 +1,14 @@ +# Mobile Edit-as-Default with Sticky Bottom Actions — Tasks + +- [x] Update `MobileEditView` to accept an optional `onDelete` callback and render Save/Delete in a sticky bottom action bar. +- [x] Move the Save button out of the `MobileEditView` header; keep Cancel + title in the header. +- [x] Update `ConfigProfilesMobileView` so list item clicks open edit view. +- [x] Update `ConfigProfilesMobileView` to pass `onDelete` to `MobileEditView` when editing existing profiles. +- [x] Update `ConfigProfilesMobileView` cancel/save navigation to return to list on create and stay on edit on save. +- [x] Update `ToolWorkshopMobileView` so list item clicks open edit view. +- [x] Update `ToolWorkshopMobileView` to pass `onDelete` to `MobileEditView` when editing existing tool types. +- [x] Update `ToolWorkshopMobileView` cancel/save navigation to return to list on create and stay on edit on save. +- [x] Add CSS for `.mobile-edit-actions` sticky bottom bar and `.mobile-edit-delete` button. +- [x] Increase `.mobile-edit-form` bottom padding so content is not hidden behind the sticky bar. +- [x] Run `npm run typecheck`, `npm run lint`, and `npm test -- --run` in `apps/web`. +- [x] Update project maps for changed files.