@toolr/ui-design 0.1.8 → 0.1.10

package/ai-manifest.json

@@ -51,28 +51,28 @@
     "form": [
       { "name": "Input", "description": "Text input with search mode, action slot, error state", "replaces": "input", "keyProps": "value, onChange, type?: text|search, variant?: filled|ghost, size?: sm|md, error?, mono?, actionSlot?", "file": "components/ui/input.tsx" },
       { "name": "NumberInput", "description": "Numeric input with increment/decrement buttons", "replaces": "input[type=number]", "keyProps": "value, onChange, min?, max?, step?, size?: sm|md", "file": "components/ui/number-input.tsx" },
-      { "name": "Select", "description": "Portal dropdown with keyboard nav and check indicators", "replaces": "select", "keyProps": "value, onChange, options: SelectOption[], color?: FormColor, size?: sm|md, variant?: filled|ghost", "file": "components/ui/select.tsx" },
+      { "name": "Select", "description": "Portal dropdown with keyboard nav and check indicators", "replaces": "select", "keyProps": "value, onChange, options: SelectOption[], accentColor?: FormColor, size?: sm|md, variant?: filled|ghost", "file": "components/ui/select.tsx" },
       { "name": "FilterDropdown", "description": "Clearable single-select filter with 'All' default and optional search", "keyProps": "value, onChange, options, allLabel?, searchable?", "file": "components/ui/filter-dropdown.tsx" },
       { "name": "SortDropdown", "description": "Field picker with direction toggle arrow", "keyProps": "field, ascending, fields: SortField[], onFieldChange, onToggleDirection", "file": "components/ui/sort-dropdown.tsx" },
-      { "name": "Toggle", "description": "iOS-style boolean switch", "replaces": "input[type=checkbox] (for on/off settings)", "keyProps": "checked, onChange, color?: FormColor, size?: sm|md|lg", "file": "components/ui/toggle.tsx" },
-      { "name": "Checkbox", "description": "Check-icon boolean for multi-select lists", "replaces": "input[type=checkbox] (for checklists)", "keyProps": "checked, onChange, color?: FormColor, size?: sm|md|lg", "file": "components/ui/checkbox.tsx" },
-      { "name": "SegmentedToggle", "description": "Horizontal icon-based mutually-exclusive toggle group", "keyProps": "options: SegmentedToggleOption[], value, onChange, color?: FormColor", "file": "components/ui/segmented-toggle.tsx" },
+      { "name": "Toggle", "description": "iOS-style boolean switch", "replaces": "input[type=checkbox] (for on/off settings)", "keyProps": "checked, onChange, accentColor?: FormColor, size?: sm|md|lg", "file": "components/ui/toggle.tsx" },
+      { "name": "Checkbox", "description": "Check-icon boolean for multi-select lists", "replaces": "input[type=checkbox] (for checklists)", "keyProps": "checked, onChange, accentColor?: FormColor, size?: sm|md|lg", "file": "components/ui/checkbox.tsx" },
+      { "name": "SegmentedToggle", "description": "Horizontal icon-based mutually-exclusive toggle group", "keyProps": "options: SegmentedToggleOption[], value, onChange, accentColor?: FormColor", "file": "components/ui/segmented-toggle.tsx" },
       { "name": "ResizableTextarea", "description": "Textarea with drag-to-resize handle", "replaces": "textarea", "keyProps": "value, onChange, variant?: filled|ghost, minHeight?, maxHeight?", "file": "components/ui/resizable-textarea.tsx" },
       { "name": "FormActions", "description": "Flex row for form buttons with optional nav slot", "keyProps": "padding?: compact|normal|modal, children", "file": "components/ui/form-actions.tsx" },
       { "name": "SelectionGrid", "description": "Grid of selectable cards with icons and descriptions", "keyProps": "items: SelectionCardItem[], selected, onSelect", "file": "components/ui/selection-grid.tsx" }
     ],
 
     "action": [
-      { "name": "IconButton", "description": "Icon-only button with tooltip, badge, status indicator, href mode", "replaces": "button", "keyProps": "icon: IconName|ReactNode, tooltip: TooltipContent, color?: FormColor, size?: xss|xs|sm|lg, status?, badge?, href?, strikethrough?, disabled?", "file": "components/ui/icon-button.tsx" },
+      { "name": "IconButton", "description": "Icon-only button with tooltip, badge, status indicator, href mode", "replaces": "button", "keyProps": "icon: IconName|ReactNode, tooltip: TooltipContent, accentColor?: FormColor, size?: xss|xs|sm|lg, status?, badge?, href?, strikethrough?, disabled?", "file": "components/ui/icon-button.tsx" },
       { "name": "CollapseButton", "description": "Animated chevron toggle button for expand/collapse", "keyProps": "isOpen, onToggle, tooltip: TooltipContent", "file": "components/ui/icon-button.tsx" },
       { "name": "AiActionButton", "description": "Button with AI loading/success/error states for async AI operations", "keyProps": "icon, tooltip, status: AiActionStatus, onClick, completionResult?", "file": "components/ui/ai-action-button.tsx" },
       { "name": "AiExecutionActionButtons", "description": "Run/stop/retry button group for AI execution workflows", "keyProps": "status: ExecutionStatus, onRun, onStop, onRetry", "file": "components/ui/ai-execution-action-buttons.tsx" },
-      { "name": "ConfirmBadge", "description": "Badge that requires click-confirmation before triggering action", "keyProps": "label, onConfirm, color?: ConfirmBadgeColor", "file": "components/ui/confirm-badge.tsx" }
+      { "name": "ConfirmBadge", "description": "Badge that requires click-confirmation before triggering action", "keyProps": "label, onConfirm, accentColor?: ConfirmBadgeColor", "file": "components/ui/confirm-badge.tsx" }
     ],
 
     "display": [
-      { "name": "Label", "description": "Border-focused colored badge/tag with icon and tooltip", "keyProps": "text, color: LabelColor, icon?, tooltip?: TooltipContent, size?: xs|sm|md", "file": "components/ui/label.tsx" },
-      { "name": "Badge", "description": "Minimal inline badge for counts or short labels", "keyProps": "text, color?: BadgeColor", "file": "components/ui/badge.tsx" },
+      { "name": "Label", "description": "Border-focused colored badge/tag with icon and tooltip", "keyProps": "text, accentColor: LabelColor, icon?, tooltip?: TooltipContent, size?: xs|sm|md", "file": "components/ui/label.tsx" },
+      { "name": "Badge", "description": "Minimal inline badge for counts or short labels", "keyProps": "text, accentColor?: BadgeColor", "file": "components/ui/badge.tsx" },
       { "name": "ScopeBadge", "description": "Pre-configured Label for user/project/local/read-only scopes", "keyProps": "scope: ScopeType", "file": "components/ui/scope-badge.tsx" },
       { "name": "Tooltip", "description": "Portal-based tooltip with auto-positioning and arrow", "keyProps": "content: TooltipContent, position?: top|bottom|left|right|auto, children", "file": "components/ui/tooltip.tsx" },
       { "name": "TooltipButton", "description": "Icon button that toggles a persistent tooltip on click", "keyProps": "content: TooltipContent, icon?: IconName", "file": "components/ui/tooltip.tsx" },
@@ -89,7 +89,9 @@
       { "name": "EditorPlaceholderCard", "description": "Centered placeholder card shown when no editor content is active", "keyProps": "icon, title, description", "file": "components/ui/editor-placeholder-card.tsx" },
       { "name": "FrontmatterFormHeader", "description": "Form header for YAML frontmatter editing with field labels", "keyProps": "fields, onChange", "file": "components/ui/frontmatter-form-header.tsx" },
       { "name": "FilesPanel", "description": "File list panel with add/remove actions", "keyProps": "files: FileEntry[], onAdd?, onRemove?", "file": "components/ui/files-panel.tsx" },
-      { "name": "SnippetsPanel", "description": "Panel displaying a list of text snippets with copy action", "keyProps": "snippets: Snippet[], onCopy?", "file": "components/ui/snippets-panel.tsx" }
+      { "name": "SnippetsPanel", "description": "Panel displaying a list of text snippets with copy action", "keyProps": "snippets: Snippet[], onCopy?", "file": "components/ui/snippets-panel.tsx" },
+      { "name": "ProjectExplorer", "description": "Resizable sidebar explorer with project tree, search, collapse, and top items", "keyProps": "tree: ExplorerNode[], selectedProjectId, onSelectProject, width, onWidthChange, collapsed, onToggleCollapsed, onAddProject, accentColor?: FormColor", "file": "components/ui/project-explorer.tsx" },
+      { "name": "AccentColorProvider", "description": "React context provider that sets accent color for all descendant ui-design components", "keyProps": "value: FormColor, children", "file": "components/lib/accent-context.ts" }
     ],
 
     "navigation": [
@@ -97,8 +99,8 @@
       { "name": "NavigationBar", "description": "Top navigation bar with title, back button, and actions", "keyProps": "title, onBack?, children", "file": "components/ui/navigation-bar.tsx" },
       { "name": "TabBar", "description": "Horizontal tab strip with optional badge counts", "keyProps": "tabs: Tab[], activeTab, onTabChange", "file": "components/ui/tab-bar.tsx" },
       { "name": "LayoutTabBar", "description": "Tab bar for switching layout views (e.g. split/full)", "keyProps": "tabs: LayoutTab[], activeTab, onTabChange", "file": "components/ui/layout-tab-bar.tsx" },
-      { "name": "NavCard", "description": "Navigation card with icon, title, and description for app selection", "keyProps": "title, description, icon, onClick, color?", "file": "components/ui/nav-card.tsx" },
-      { "name": "ExtensionListCard", "description": "Card showing extension info with type indicator and actions", "keyProps": "title, type, description, actions?", "file": "components/ui/extension-list-card.tsx" }
+      { "name": "NavCard", "description": "Navigation card with icon, title, and description for app selection", "keyProps": "title, description, icon, onClick, accentColor?", "file": "components/ui/nav-card.tsx" },
+      { "name": "CapabilityListCard", "description": "Card showing capability info with type indicator and actions", "keyProps": "title, type, description, actions?", "file": "components/ui/capability-list-card.tsx" }
     ],
 
     "modal": [
@@ -108,19 +110,28 @@
     ],
 
     "section": [
-      { "name": "TabbedPromptEditor", "description": "Multi-tab prompt editor with variable insertion and dirty detection. Use with usePromptEditor() hook", "keyProps": "...usePromptEditor(), standalone?, className?", "hook": "usePromptEditor", "file": "components/sections/prompt-editor/index.ts" },
-      { "name": "FileTypeTabbedPromptEditor", "description": "Prompt editor variant with file type tabs", "keyProps": "...usePromptEditor(), fileTypes: FileTypeOption[]", "hook": "usePromptEditor", "file": "components/sections/prompt-editor/index.ts" },
-      { "name": "SimulatorPromptEditor", "description": "Prompt editor with scenario selector for testing prompts", "keyProps": "...usePromptEditor(), scenarios: ScenarioOption[]", "file": "components/sections/prompt-editor/index.ts" },
+      { "name": "TabbedPromptEditor", "description": "Multi-tab prompt editor with variable insertion and dirty detection", "keyProps": "prompts: Record<string, string>, onPromptChange, tools: ToolTab[], defaultPrompts?, variables?: PromptPlaceholder[], standalone?, accentColor?", "file": "components/sections/prompt-editor/index.ts" },
+      { "name": "FileTypeTabbedPromptEditor", "description": "Prompt editor variant with file type sidebar", "keyProps": "prompts: Record<string, Record<string, string>>, onPromptChange, fileTypes: FileTypeOption[], tools: ToolTab[], defaultPrompts?, variables?", "file": "components/sections/prompt-editor/index.ts" },
+      { "name": "SimulatorPromptEditor", "description": "Prompt editor with hierarchical scenario/step sidebar", "keyProps": "prompts: Record<string, Record<string, Record<string, string>>>, onPromptChange, scenarios: ScenarioOption[], tools: ToolTab[], defaultPrompts?, variables?", "file": "components/sections/prompt-editor/index.ts" },
       { "name": "RegistryBrowser", "description": "Browsable grid of registry items with search, filter, sort", "keyProps": "items, onSelect, selectedId?", "file": "components/ui/registry-browser.tsx" },
       { "name": "RegistryDetail", "description": "Detail view for a single registry item with file structure", "keyProps": "item, onBack, onInstall?", "file": "components/ui/registry-detail.tsx" },
       { "name": "RegistryCard", "description": "Card displaying a registry item with type badge and metadata", "keyProps": "item, onClick?, selected?", "file": "components/ui/registry-card.tsx" },
       { "name": "GoldenSyncPanel", "description": "Golden snapshot sync panel with diff viewer. Use with useGoldenSync() hook", "keyProps": "...useGoldenSync()", "hook": "useGoldenSync", "file": "components/sections/golden-snapshots/index.ts" },
+      { "name": "StatusOverview", "description": "Status dashboard for golden sync with component-level version info", "keyProps": "status: GoldenStatus, components: string[], componentLabels?, devtools, manifest?", "file": "components/sections/golden-snapshots/status-overview.tsx" },
+      { "name": "FileDiffViewer", "description": "Side-by-side diff viewer for golden vs live file comparison", "keyProps": "sync: UseGoldenSyncReturn, componentLabels?, monacoTheme?, renderFileIcon?", "file": "components/sections/golden-snapshots/file-diff-viewer.tsx" },
+      { "name": "SnapshotManager", "description": "Create, restore, and delete golden snapshots", "keyProps": "sync: UseGoldenSyncReturn", "file": "components/sections/golden-snapshots/snapshot-manager.tsx" },
+      { "name": "VersionManager", "description": "Manage component versions with update and bump actions", "keyProps": "sync: UseGoldenSyncReturn, components: string[], componentLabels?", "file": "components/sections/golden-snapshots/version-manager.tsx" },
       { "name": "SnapshotBrowserPanel", "description": "Browse and manage snapshots. Use with useSnapshotBrowser() hook", "keyProps": "...useSnapshotBrowser()", "hook": "useSnapshotBrowser", "file": "components/sections/snapshot-browser/index.ts" },
+      { "name": "SnapshotTree", "description": "Hierarchical tree view for browsing snapshots by scope/category/item", "keyProps": "scopes: SnapshotScope[], searchQuery, onSearchChange, expandedPaths, onToggleExpand, onExpandAll, onCollapseAll, allExpanded", "file": "components/sections/snapshot-browser/snapshot-tree.tsx" },
       { "name": "SnippetsEditor", "description": "Create and edit text snippets. Use with useSnippetsEditor() hook", "keyProps": "...useSnippetsEditor()", "hook": "useSnippetsEditor", "file": "components/sections/snippets-editor/index.ts" },
       { "name": "ReportBugForm", "description": "Bug report form with screenshot capture. Use with useReportBug() hook", "keyProps": "...useReportBug()", "hook": "useReportBug", "file": "components/sections/report-bug/index.ts" },
       { "name": "ScreenshotUploader", "description": "Drag & drop multi-image upload with base64 encoding and preview thumbnails", "keyProps": "screenshots: Screenshot[], onChange, maxTotalSize?, disabled?", "file": "components/sections/report-bug/index.ts" },
-      { "name": "ToolsPathsPanel", "description": "AI tool path configuration panel. Use with useToolsPaths() hook", "keyProps": "...useToolsPaths()", "hook": "useToolsPaths", "file": "components/sections/ai-tools-paths/index.ts" },
+      { "name": "AgentPathsPanel", "description": "Coding agent path configuration panel. Use with useAgentPaths() hook", "keyProps": "...useAgentPaths()", "hook": "useAgentPaths", "file": "components/sections/coding-agent-paths/index.ts" },
       { "name": "CapturedIssuesPanel", "description": "View and manage captured error issues. Use with useCapturedIssues() hook", "keyProps": "...useCapturedIssues()", "hook": "useCapturedIssues", "file": "components/sections/captured-issues/index.ts" },
+      { "name": "DashboardPanel", "description": "Dashboard shell with tabbed navigation, accent-colored tab header, and content area", "keyProps": "tabs: DashboardTab[], activeTab, onTabChange, children, headerRight?", "file": "components/composites/dashboard-panel.tsx" },
+      { "name": "DashboardFilterBar", "description": "Search and filter bar for dashboard panels with left search and right filter slots", "keyProps": "search: ReactNode, filters?: ReactNode", "file": "components/composites/dashboard-panel.tsx" },
+      { "name": "DashboardList", "description": "List container with dividers between children and configurable empty state", "keyProps": "children?, isEmpty?, emptyIcon?, emptyTitle?, emptyDescription?", "file": "components/composites/dashboard-panel.tsx" },
+      { "name": "DashboardListItem", "description": "Composable list item with git provider, title, status label, metadata, and action slots", "keyProps": "title, variant?: overview|project, gitProvider?, repository?, status?: DashboardItemStatus, metadata?, actions?", "file": "components/composites/dashboard-list-item.tsx" },
       { "name": "FileStructureSection", "description": "File tree with code preview, syntax highlighting, and copy", "keyProps": "files: FileTreeNode[], accentColor?: AccentColor", "file": "components/ui/file-structure-section.tsx" },
       { "name": "FileTree", "description": "Expandable file/folder tree with selection", "keyProps": "nodes: FileTreeNode[], selectedPath?, onSelect", "file": "components/ui/file-tree.tsx" },
       { "name": "ExecutionDetailsPanel", "description": "Panel showing execution result rows with expandable details", "keyProps": "rows: ExecutionDetailRow[]", "file": "components/ui/execution-details-panel.tsx" }
@@ -138,27 +149,31 @@
 
     "brand": [
       { "name": "ToolrAppLogo", "description": "App logo with icon and name for toolr suite apps", "keyProps": "appId: ToolrAppId, size?: sm|md|lg", "file": "components/lib/toolr-brand.tsx" },
-      { "name": "AiToolIcon", "description": "Logo icon for AI tools (Claude, GPT, Gemini, etc.)", "keyProps": "tool: AiToolKey, size?: number", "file": "components/lib/ai-tools.tsx" },
+      { "name": "CodingAgentIcon", "description": "Logo icon for coding agents (Claude, Gemini, Copilot, etc.). Supports selected state with accent-colored border.", "keyProps": "agent: CodingAgentKey, size?: number, showName?: boolean, selected?: boolean, accentColor?: FormColor", "file": "components/lib/coding-agents.tsx" },
+      { "name": "GitProviderIcon", "description": "Icon for git hosting providers (GitHub, GitLab, Gerrit) with brand colors", "keyProps": "provider: GitProviderKey, size?: number, className?", "file": "components/lib/git-providers.tsx" },
+      { "name": "CustomIcon", "description": "SVG icon for brands not available in lucide-react (e.g. Gerrit)", "keyProps": "icon: CustomIconKey, size?: number, className?", "file": "components/lib/custom-icons.tsx" },
       { "name": "CookieConsent", "description": "Cookie consent banner with accept/reject", "keyProps": "onConsent: (choice: ConsentChoice) => void", "file": "components/ui/cookie-consent.tsx" }
     ]
   },
 
   "hooks": [
-    { "name": "usePromptEditor", "description": "State manager for TabbedPromptEditor — tabs, dirty detection, save, variables", "file": "components/sections/prompt-editor/index.ts" },
     { "name": "useGoldenSync", "description": "State manager for GoldenSyncPanel — diff tree, sync status, file comparison", "file": "components/sections/golden-snapshots/index.ts" },
     { "name": "useSnapshotBrowser", "description": "State manager for SnapshotBrowserPanel — snapshot list, categories, actions", "file": "components/sections/snapshot-browser/index.ts" },
     { "name": "useSnippetsEditor", "description": "State manager for SnippetsEditor — CRUD operations on snippets", "file": "components/sections/snippets-editor/index.ts" },
     { "name": "useReportBug", "description": "State manager for ReportBugForm — issue types, screenshots, submission", "file": "components/sections/report-bug/index.ts" },
-    { "name": "useToolsPaths", "description": "State manager for ToolsPathsPanel — AI tool detection, path configuration", "file": "components/sections/ai-tools-paths/index.ts" },
+    { "name": "useAgentPaths", "description": "State manager for AgentPathsPanel — coding agent detection, path configuration", "file": "components/sections/coding-agent-paths/index.ts" },
     { "name": "useCapturedIssues", "description": "State manager for CapturedIssuesPanel — error list, submission, dismissal", "file": "components/sections/captured-issues/index.ts" },
     { "name": "useClickOutside", "description": "Close menus/dropdowns when clicking outside the ref element", "file": "components/hooks/use-click-outside.ts" },
     { "name": "useDropdownMaxHeight", "description": "Calculate max height for dropdowns to stay within viewport", "file": "components/hooks/use-dropdown-max-height.ts" },
-    { "name": "useNavigationHistory", "description": "Browser-like back/forward navigation state", "file": "components/hooks/use-navigation-history.ts" }
+    { "name": "useModalBehavior", "description": "Escape key close, body overflow lock, and focus trap for modals", "file": "components/hooks/use-modal-behavior.ts" },
+    { "name": "useNavigationHistory", "description": "Browser-like back/forward navigation state", "file": "components/hooks/use-navigation-history.ts" },
+    { "name": "useResizableSidebar", "description": "Drag-to-resize sidebar with min/max constraints", "file": "components/hooks/use-resizable-sidebar.ts" }
   ],
 
   "utilities": [
+    { "name": "AccentColorProvider", "description": "React context provider that sets accent color for all descendant components. Children read via useAccentColor()", "usage": "<AccentColorProvider value={color}>...</AccentColorProvider>", "file": "components/lib/accent-context.ts" },
     { "name": "cn", "description": "clsx + tailwind-merge for conditional class composition", "usage": "cn('base-class', condition && 'conditional-class', className)", "file": "components/lib/cn.ts" },
-    { "name": "FORM_COLORS", "description": "Color config map — FORM_COLORS[color].border/.hover/.focus/.selectedBg/.accent", "file": "components/lib/form-colors.ts" },
+    { "name": "FORM_COLORS", "description": "Color config map — FORM_COLORS[accentColor].border/.hover/.focus/.selectedBg/.accent", "file": "components/lib/form-colors.ts" },
     { "name": "applyTheme", "description": "Apply theme to document — applyTheme(themeId, accentHue)", "file": "components/lib/theme-engine.ts" },
     { "name": "ACCENT_DEFS", "description": "Array of { id, label, hue } for all available accent colors", "file": "components/lib/theme-engine.ts" },
     { "name": "iconMap", "description": "Map of icon name strings to lucide-react components", "file": "components/ui/icon-button.tsx" }

package/components/composites/dashboard-list-item.tsx

@@ -0,0 +1,172 @@
+/**
+ * DashboardListItem — A composable list item for dashboard views.
+ *
+ * Two variants:
+ * - 'overview': [GitProviderIcon] repo-name → title [status] → metadata row
+ * - 'project':  title [status] → metadata row  (no platform/repo info)
+ *
+ * All labels, icons, and controls use ui-design primitives.
+ */
+
+import { type ReactNode } from 'react'
+import { GitProviderIcon, GIT_PROVIDER_NAMES, type GitProviderKey } from '../lib/git-providers.tsx'
+import { Label, type LabelColor } from '../ui/label.tsx'
+import { Tooltip } from '../ui/tooltip.tsx'
+import type { IconName } from '../ui/icon-button.tsx'
+import { cn } from '../lib/cn.ts'
+
+// ─── Types ───────────────────────────────────────────────────────────
+
+export interface DashboardItemStatus {
+  text: string
+  color: LabelColor
+  icon?: IconName
+  tooltip?: { title?: string; description: string }
+  onClick?: () => void
+}
+
+export interface DashboardListItemProps {
+  /** 'overview' shows git provider + repo row, 'project' omits it */
+  variant?: 'overview' | 'project'
+
+  /** Git provider (overview variant only) */
+  gitProvider?: GitProviderKey
+  onGitProviderClick?: () => void
+
+  /** Repository name (overview variant only) */
+  repository?: string
+  /** Suffix appended to repo (e.g. " #123") */
+  repositorySuffix?: string
+  onRepositoryClick?: () => void
+
+  /** Main title */
+  title: string
+  onTitleClick?: () => void
+
+  /** Status label displayed inline with the title */
+  status?: DashboardItemStatus
+
+  /** Additional content after status label (extra labels, badges) */
+  extraLabels?: ReactNode
+
+  /** Metadata row content (branch, time, stats) */
+  metadata?: ReactNode
+
+  /** Right-side action buttons */
+  actions?: ReactNode
+
+  className?: string
+}
+
+// ─── Component ───────────────────────────────────────────────────────
+
+export function DashboardListItem({
+  variant = 'overview',
+  gitProvider,
+  onGitProviderClick,
+  repository,
+  repositorySuffix,
+  onRepositoryClick,
+  title,
+  onTitleClick,
+  status,
+  extraLabels,
+  metadata,
+  actions,
+  className,
+}: DashboardListItemProps) {
+  const showRepoRow = variant === 'overview' && gitProvider && repository
+
+  return (
+    <div className={cn('p-4 hover:bg-neutral-960/30 transition-colors', className)}>
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1 min-w-0">
+          {/* Row 1 (overview only): Git provider icon + repository name */}
+          {showRepoRow && (
+            <div className="flex items-center gap-2 mb-1">
+              <Tooltip
+                content={{
+                  title: GIT_PROVIDER_NAMES[gitProvider],
+                  description: `Filter by ${GIT_PROVIDER_NAMES[gitProvider]}`,
+                }}
+                position="top"
+                align="center"
+              >
+                {onGitProviderClick ? (
+                  // toolr-design-ignore-next-line -- composite wraps GitProviderIcon in clickable span
+                  <button
+                    type="button"
+                    onClick={onGitProviderClick}
+                    className="flex items-center cursor-pointer transition-colors hover:opacity-80"
+                  >
+                    <GitProviderIcon provider={gitProvider} size={16} />
+                  </button>
+                ) : (
+                  <span className="flex items-center">
+                    <GitProviderIcon provider={gitProvider} size={16} />
+                  </span>
+                )}
+              </Tooltip>
+
+              {onRepositoryClick ? (
+                // toolr-design-ignore-next-line -- composite repo text is intentionally not a Label
+                <button
+                  type="button"
+                  onClick={onRepositoryClick}
+                  className="text-sm font-medium text-neutral-300 hover:text-white transition-colors cursor-pointer truncate"
+                >
+                  {repository}
+                  {repositorySuffix}
+                </button>
+              ) : (
+                <span className="text-sm font-medium text-neutral-400 truncate">
+                  {repository}
+                  {repositorySuffix}
+                </span>
+              )}
+            </div>
+          )}
+
+          {/* Row 2: Title + status label */}
+          <div className="flex items-center gap-2 mb-1 flex-wrap">
+            <h3
+              className={cn(
+                'font-medium truncate text-white',
+                onTitleClick && 'cursor-pointer hover:text-blue-300 transition-colors',
+              )}
+              title={title}
+              onClick={onTitleClick}
+            >
+              {title}
+            </h3>
+            {status && (
+              <Label
+                text={status.text}
+                accentColor={status.color}
+                icon={status.icon}
+                size="lg"
+                onClick={status.onClick}
+                tooltip={status.tooltip ?? { description: status.text }}
+              />
+            )}
+            {extraLabels}
+          </div>
+
+          {/* Row 3: Metadata */}
+          {metadata && (
+            <div className="flex items-center gap-3 text-sm text-neutral-500 flex-wrap">
+              {metadata}
+            </div>
+          )}
+        </div>
+
+        {/* Right-side action buttons */}
+        {actions && (
+          <div className="flex items-center gap-2 flex-shrink-0">
+            {actions}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/components/composites/dashboard-panel.tsx

@@ -0,0 +1,218 @@
+/**
+ * DashboardPanel — Full dashboard shell with tabbed navigation, filter bar, and list.
+ *
+ * Provides the structural card with:
+ * - Configurable tab header (icon + label + subtitle per tab, with accent color)
+ * - DashboardFilterBar for search + filter controls
+ * - DashboardList for items with dividers and empty state
+ *
+ * Consumer provides all content through slots and children.
+ */
+
+import { type ReactNode } from 'react'
+import { type AccentColor } from '../lib/form-colors.ts'
+import { Tooltip } from '../ui/tooltip.tsx'
+import { cn } from '../lib/cn.ts'
+
+// ─── Color maps for tab active states ────────────────────────────────
+// Stronger intensity than ACCENT_NAV (500/20 bg, 300 text, 500/30 icon box)
+
+const TAB_ACTIVE_BG: Record<AccentColor, string> = {
+  blue: 'bg-blue-500/20', green: 'bg-green-500/20', red: 'bg-red-500/20',
+  orange: 'bg-orange-500/20', cyan: 'bg-cyan-500/20', yellow: 'bg-yellow-500/20',
+  purple: 'bg-purple-500/20', indigo: 'bg-indigo-500/20', emerald: 'bg-emerald-500/20',
+  amber: 'bg-amber-500/20', violet: 'bg-violet-500/20', neutral: 'bg-neutral-500/20',
+  sky: 'bg-sky-500/20', pink: 'bg-pink-500/20', teal: 'bg-teal-500/20',
+}
+
+const TAB_ACTIVE_TEXT: Record<AccentColor, string> = {
+  blue: 'text-blue-300', green: 'text-green-300', red: 'text-red-300',
+  orange: 'text-orange-300', cyan: 'text-cyan-300', yellow: 'text-yellow-300',
+  purple: 'text-purple-300', indigo: 'text-indigo-300', emerald: 'text-emerald-300',
+  amber: 'text-amber-300', violet: 'text-violet-300', neutral: 'text-neutral-300',
+  sky: 'text-sky-300', pink: 'text-pink-300', teal: 'text-teal-300',
+}
+
+const TAB_ACTIVE_ICON_BOX: Record<AccentColor, string> = {
+  blue: 'bg-blue-500/30', green: 'bg-green-500/30', red: 'bg-red-500/30',
+  orange: 'bg-orange-500/30', cyan: 'bg-cyan-500/30', yellow: 'bg-yellow-500/30',
+  purple: 'bg-purple-500/30', indigo: 'bg-indigo-500/30', emerald: 'bg-emerald-500/30',
+  amber: 'bg-amber-500/30', violet: 'bg-violet-500/30', neutral: 'bg-neutral-500/30',
+  sky: 'bg-sky-500/30', pink: 'bg-pink-500/30', teal: 'bg-teal-500/30',
+}
+
+const TAB_ACTIVE_SUBTITLE: Record<AccentColor, string> = {
+  blue: 'text-blue-400/70', green: 'text-green-400/70', red: 'text-red-400/70',
+  orange: 'text-orange-400/70', cyan: 'text-cyan-400/70', yellow: 'text-yellow-400/70',
+  purple: 'text-purple-400/70', indigo: 'text-indigo-400/70', emerald: 'text-emerald-400/70',
+  amber: 'text-amber-400/70', violet: 'text-violet-400/70', neutral: 'text-neutral-400/70',
+  sky: 'text-sky-400/70', pink: 'text-pink-400/70', teal: 'text-teal-400/70',
+}
+
+// ─── Types ───────────────────────────────────────────────────────────
+
+export interface DashboardTab {
+  id: string
+  label: string
+  subtitle: string
+  icon: ReactNode
+  color: AccentColor
+  tooltip?: { title: string; description: string }
+}
+
+export interface DashboardPanelProps {
+  tabs: DashboardTab[]
+  activeTab: string
+  onTabChange: (tabId: string) => void
+  children: ReactNode
+  className?: string
+  /** Content rendered to the right of the tabs, vertically centered */
+  headerRight?: ReactNode
+}
+
+export interface DashboardFilterBarProps {
+  /** Left-side search (typically an Input component) */
+  search: ReactNode
+  /** Right-side filters and action buttons */
+  filters?: ReactNode
+}
+
+export interface DashboardListProps {
+  children?: ReactNode
+  /** When true, renders the empty state instead of children */
+  isEmpty?: boolean
+  /** Icon shown in the empty state */
+  emptyIcon?: ReactNode
+  /** Primary empty state text */
+  emptyTitle?: string
+  /** Secondary empty state text */
+  emptyDescription?: string
+}
+
+// ─── DashboardPanel ──────────────────────────────────────────────────
+
+export function DashboardPanel({
+  tabs,
+  activeTab,
+  onTabChange,
+  children,
+  className,
+  headerRight,
+}: DashboardPanelProps) {
+  return (
+    <div className={cn('bg-neutral-960/50 border border-neutral-700/50 rounded-xl overflow-hidden', className)}>
+      {/* Tab Header */}
+      <div className="bg-neutral-980/80 flex h-[60px]">
+        <div className={cn('flex', headerRight ? '' : 'flex-1')}>
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.id
+
+          const tabButton = (
+            // toolr-design-ignore-next-line -- dashboard tab button has custom styling
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => onTabChange(tab.id)}
+              className={cn(
+                'h-full transition-all cursor-pointer',
+                headerRight ? '' : 'flex-1',
+                isActive
+                  ? `${TAB_ACTIVE_BG[tab.color]} ${TAB_ACTIVE_TEXT[tab.color]}`
+                  : 'text-neutral-400 hover:text-neutral-200 hover:bg-neutral-960/70',
+              )}
+            >
+              <div className="flex items-center gap-3 px-4 h-full">
+                {/* toolr-design-ignore-next-line -- icon box with accent background */}
+                <div
+                  className={cn(
+                    'w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0',
+                    isActive ? TAB_ACTIVE_ICON_BOX[tab.color] : 'bg-neutral-960',
+                  )}
+                >
+                  {tab.icon}
+                </div>
+                <div className="flex flex-col items-start">
+                  <span className="text-md font-semibold">{tab.label}</span>
+                  <span
+                    className={cn(
+                      'text-sm font-medium',
+                      isActive ? TAB_ACTIVE_SUBTITLE[tab.color] : 'text-neutral-500',
+                    )}
+                  >
+                    {tab.subtitle}
+                  </span>
+                </div>
+              </div>
+            </button>
+          )
+
+          if (tab.tooltip) {
+            return (
+              <Tooltip
+                key={tab.id}
+                content={{ title: tab.tooltip.title, description: tab.tooltip.description }}
+                position="bottom"
+                align="center"
+              >
+                {tabButton}
+              </Tooltip>
+            )
+          }
+          return tabButton
+        })}
+        </div>
+        {headerRight && (
+          <div className="flex items-center px-4 ml-auto flex-shrink-0">
+            {headerRight}
+          </div>
+        )}
+      </div>
+
+      {/* Active tab content */}
+      {children}
+    </div>
+  )
+}
+
+// ─── DashboardFilterBar ──────────────────────────────────────────────
+
+export function DashboardFilterBar({ search, filters }: DashboardFilterBarProps) {
+  return (
+    <div className="px-4 py-3 border-t border-neutral-700/50 flex items-center justify-between gap-3 flex-wrap">
+      <div className="flex-shrink-0 w-44">
+        {search}
+      </div>
+      {filters && (
+        <div className="flex items-center gap-2 flex-shrink-0 ml-auto">
+          {filters}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── DashboardList ───────────────────────────────────────────────────
+
+export function DashboardList({
+  children,
+  isEmpty,
+  emptyIcon,
+  emptyTitle,
+  emptyDescription,
+}: DashboardListProps) {
+  if (isEmpty) {
+    return (
+      <div className="p-8 text-center">
+        {emptyIcon && <div className="flex justify-center mb-2 text-neutral-600">{emptyIcon}</div>}
+        {emptyTitle && <p className="text-md text-neutral-500">{emptyTitle}</p>}
+        {emptyDescription && <p className="text-sm text-neutral-600 mt-1">{emptyDescription}</p>}
+      </div>
+    )
+  }
+
+  return (
+    <div className="divide-y divide-neutral-700/50">
+      {children}
+    </div>
+  )
+}

package/components/content/info-panel-primitives.tsx

@@ -38,10 +38,10 @@ export function DLRow({ term, children, even }: { term: ReactNode; children: Rea
   const bg = even ? 'bg-white/[0.015]' : ''
   return (
     <>
-      <div className={`py-2 border-b border-neutral-800/60 ${bg} font-semibold text-md whitespace-nowrap`}>
+      <div className={`py-2 border-b border-neutral-960/60 ${bg} font-semibold text-md whitespace-nowrap`}>
         {term}
       </div>
-      <div className={`py-2 border-b border-neutral-800/60 ${bg} text-md text-neutral-400`}>{children}</div>
+      <div className={`py-2 border-b border-neutral-960/60 ${bg} text-md text-neutral-400`}>{children}</div>
     </>
   )
 }
@@ -114,7 +114,7 @@ export function Callout({ color, children }: { color: string; children: ReactNod
 export function CalloutCode({ color, children }: { color: string; children: ReactNode }) {
   const c = CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue
   return (
-    <code className={`block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-md ${c.codeText}`}>
+    <code className={`block bg-neutral-960/80 px-2 py-1 rounded mt-1.5 text-md ${c.codeText}`}>
       {children}
     </code>
   )
@@ -128,7 +128,7 @@ export function CalloutDim({ children }: { children: ReactNode }) {
 
 export function CodeBlock({ children }: { children: ReactNode }) {
   return (
-    <div className="bg-neutral-900/60 rounded-md p-3 font-mono text-sm text-neutral-400 mb-5 whitespace-pre overflow-x-auto leading-normal">{children}</div>
+    <div className="bg-neutral-980/60 rounded-md p-3 font-mono text-sm text-neutral-400 mb-5 whitespace-pre overflow-x-auto leading-normal">{children}</div>
   )
 }
 
@@ -136,8 +136,9 @@ export function CodeBlock({ children }: { children: ReactNode }) {
 
 export function CK({ color, children }: { color?: string; children: ReactNode }) {
   const textColor = color ? `text-${color}-400` : ''
+  // text-[0.9em]: relative sizing for inline code — scales proportionally to surrounding prose font size
   return (
-    <code className={`bg-neutral-800/80 px-1.5 py-px rounded text-[0.9em] ${textColor}`}>{children}</code>
+    <code className={`bg-neutral-960/80 px-1.5 py-px rounded text-[0.9em] ${textColor}`}>{children}</code>
   )
 }
 
@@ -175,13 +176,13 @@ export function LocationItem({
   const bg = even ? 'bg-white/[0.015]' : ''
   return (
     <>
-      <div className={`py-2 border-b border-neutral-800/60 ${bg} flex items-center gap-1.5`}>
+      <div className={`py-2 border-b border-neutral-960/60 ${bg} flex items-center gap-1.5`}>
         <span
           className={`w-2 h-2 rounded-full bg-${color}-500/50 border border-${color}-500 shrink-0`}
         />
         <span className={`text-${color}-400 text-md font-semibold`}>{label}</span>
       </div>
-      <div className={`py-2 border-b border-neutral-800/60 ${bg} text-md text-neutral-400`}>{children}</div>
+      <div className={`py-2 border-b border-neutral-960/60 ${bg} text-md text-neutral-400`}>{children}</div>
     </>
   )
 }
@@ -204,7 +205,7 @@ export function TitledLI({ color, title, children }: { color: string; title: str
 
 export function CalloutDialog({ color, lines }: { color: string; lines: { speaker: string; text: string }[] }) {
   return (
-    <div className="bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-md">
+    <div className="bg-neutral-960/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-md">
       {lines.map((line, idx) => (
         <div key={idx}>
           <span className={`text-${color}-300 font-semibold mr-1`}>{line.speaker}:</span>

package/components/diagrams/diagram-utils.tsx

@@ -81,7 +81,8 @@ export const stroke = {
   hairline: 0.5,
 } as const
 
-/** Semantic text colors. */
+// SVG elements require raw hex — Tailwind classes and CSS vars are not available in SVG attributes.
+// Maps to: neutral-200, neutral-400, neutral-500, neutral-960, neutral-970, neutral-700
 export const color = {
   textBright: '#e5e7eb',
   textMedium: '#9ca3af',