headquarter/apps/web/src/components/features/workspace/.pi-map.md

apps/web/src/components/features/workspace

dir: apps/web/src/components/features/workspace

index: apps/web/src/components/features/workspace/.pi-map.index.md

role

Provides 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 | 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 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 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, call:on, header

symbols

• WorkspaceCard
• WorkspaceCreateForm
• WorkspaceDetailHeader
• WorkspaceFilePanel
• WorkspaceGitPanel
• WorkspaceInstanceChips
• WorkspaceSettingsPanel
• WorkspaceTabBar

workflows

• change workspace behavior read: workspace-card.tsx, workspace-create-form.tsx, workspace-detail-header.tsx

dirty