@toolr/ui-design 0.1.8 → 0.1.10

package/components/sections/golden-snapshots/golden-sync-panel.tsx

@@ -3,6 +3,8 @@ import { useState, useEffect } from 'react'
 import { RefreshCw, AlertCircle, Check, Activity, GitCompareArrows, Archive, Tag } from 'lucide-react'
 import { IconButton } from '../../ui/icon-button.tsx'
 import { ConfirmModal } from '../../ui/modal.tsx'
+import { useAccentColor, AccentColorProvider } from '../../lib/accent-context.ts'
+import type { FormColor } from '../../lib/form-colors.ts'
 import type { GoldenSnapshotsApi } from './types.ts'
 import { useGoldenSync, type UseGoldenSyncReturn } from './use-golden-sync.ts'
 import { StatusOverview } from './status-overview.tsx'
@@ -20,6 +22,7 @@ export interface GoldenSyncPanelProps {
   monacoTheme?: string
   renderFileIcon?: (filename: string, component: string) => ReactNode
   onTabChange?: (tab: TabId) => void
+  accentColor?: FormColor
 }
 
 export function GoldenSyncPanel({
@@ -30,7 +33,10 @@ export function GoldenSyncPanel({
   monacoTheme,
   renderFileIcon,
   onTabChange,
+  accentColor,
 }: GoldenSyncPanelProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const sync = useGoldenSync({ api, devtools })
   const [activeTab, setActiveTab] = useState<TabId>('status')
 
@@ -110,6 +116,7 @@ export function GoldenSyncPanel({
   const visibleTabs = tabs.filter((t) => !t.devtoolsOnly || devtools)
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <div className={`flex-1 flex flex-col ${activeTab === 'diff' ? 'overflow-hidden' : 'overflow-y-auto'}`}>
       {/* Header */}
       <div className="flex-shrink-0">
@@ -126,7 +133,7 @@ export function GoldenSyncPanel({
             icon={<RefreshCw className={isLoading ? 'animate-spin' : ''} />}
             onClick={handleRefresh}
             disabled={isLoading}
-            color="neutral"
+            accentColor="neutral"
             size="sm"
             tooltip={{ title: 'Reload', description: 'Refresh data' }}
           />
@@ -140,8 +147,8 @@ export function GoldenSyncPanel({
               onClick={() => handleTabChange(tab.id)}
               className={`h-[41px] flex items-center gap-2 px-4 text-md border-b-2 transition-colors cursor-pointer ${
                 activeTab === tab.id
-                  ? `${tab.color} border-current bg-neutral-800/50`
-                  : 'border-transparent text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/30'
+                  ? `${tab.color} border-current bg-neutral-960/50`
+                  : 'border-transparent text-neutral-500 hover:text-neutral-300 hover:bg-neutral-960/30'
               }`}
             >
               {tab.icon}
@@ -174,6 +181,7 @@ export function GoldenSyncPanel({
       {/* Content */}
       <div className={activeTab === 'diff' ? 'flex-1 min-h-0 mt-4' : 'space-y-6 mt-4'}>
         {loading && activeTab === 'status' ? (
+          /* py-8: loading state needs extra vertical breathing room beyond the p-6 scale max */
           <div className="text-md text-neutral-500 text-center py-8">Loading...</div>
         ) : activeTab === 'status' ? (
           <StatusOverview
@@ -217,6 +225,7 @@ export function GoldenSyncPanel({
         isLoading={resettingAll}
       />
     </div>
+    </AccentColorProvider>
   )
 }
 

package/components/sections/golden-snapshots/snapshot-manager.tsx

@@ -45,13 +45,14 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
   }
 
   if (manifestLoading && !manifest) {
+    // py-8: empty/loading states need extra vertical breathing room beyond the p-6 scale max
     return <div className="text-md text-neutral-500 text-center py-8">Loading snapshots...</div>
   }
 
   return (
     <div className="space-y-4">
       {/* Create Snapshot */}
-      <div className="bg-neutral-900 rounded-lg p-4 border border-neutral-700">
+      <div className="bg-neutral-980 rounded-lg p-4 border border-neutral-700">
         <div className="flex items-center gap-3 mb-3">
           <Plus className="w-5 h-5 text-green-400" />
           <h4 className="text-md text-neutral-300 font-medium">Create Snapshot</h4>
@@ -74,14 +75,14 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
             onClick={onCreate}
             disabled={snapshotBusy}
             size="sm"
-            color="green"
+            accentColor="cyan"
             tooltip={{ title: 'Create snapshot', description: 'Archive current live state' }}
           />
         </div>
       </div>
 
       {/* Snapshots List */}
-      <div className="bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden">
+      <div className="bg-neutral-980 rounded-lg border border-neutral-700 overflow-hidden">
         <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-700">
           <div className="flex items-center gap-2">
             <Archive className="w-4 h-4 text-neutral-500" />
@@ -93,12 +94,13 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
             onClick={loadManifest}
             disabled={manifestLoading}
             size="xs"
-            color="neutral"
+            accentColor="orange"
             tooltip={{ title: 'Refresh', description: 'Reload snapshot list' }}
           />
         </div>
 
         {!manifest || manifest.snapshots.length === 0 ? (
+          /* py-8: empty state needs extra vertical breathing room beyond the p-6 scale max */
           <div className="text-md text-neutral-500 text-center py-8">No snapshots yet</div>
         ) : (
           <div className="divide-y divide-neutral-700">
@@ -140,7 +142,7 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
                     onClick={() => handlePinSnapshot(snap.version, !snap.pinned)}
                     disabled={snapshotBusy}
                     size="xs"
-                    color={snap.pinned ? 'amber' : 'neutral'}
+                    accentColor="neutral"
                     tooltip={{
                       title: snap.pinned ? 'Unpin' : 'Pin',
                       description: snap.pinned ? 'Allow auto-pruning' : 'Protect from auto-pruning',
@@ -151,7 +153,7 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
                     onClick={() => { setRestoreTarget(snap); setRestoreResetLive(true) }}
                     disabled={snapshotBusy}
                     size="xs"
-                    color="blue"
+                    accentColor="orange"
                     tooltip={{ title: 'Restore', description: 'Restore golden from this snapshot' }}
                   />
                   <IconButton
@@ -159,7 +161,7 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
                     onClick={() => setDeleteTarget(snap)}
                     disabled={snapshotBusy || snap.pinned}
                     size="xs"
-                    color="red"
+                    accentColor="red"
                     tooltip={{
                       title: 'Delete',
                       description: snap.pinned ? 'Unpin first to delete' : 'Delete this snapshot',

package/components/sections/golden-snapshots/status-overview.tsx

@@ -81,7 +81,7 @@ export function StatusOverview({
   return (
     <div className="space-y-4">
       {/* Bundled Seed Info */}
-      <div className="bg-neutral-900 rounded-lg p-4 border border-amber-500/30">
+      <div className="bg-neutral-980 rounded-lg p-4 border border-amber-500/30">
         <div className="flex items-center gap-3 mb-3">
           <Archive className="w-5 h-5 text-amber-400" />
           <h3 className="text-md text-neutral-300 font-medium">Bundled Seed (App Distribution)</h3>
@@ -118,7 +118,7 @@ export function StatusOverview({
       {/* Local Directories */}
       <div className="grid grid-cols-2 gap-4">
         {/* Golden */}
-        <div className="bg-neutral-900 rounded-lg p-4 border border-blue-500/30">
+        <div className="bg-neutral-980 rounded-lg p-4 border border-blue-500/30">
           <div className="flex items-center gap-2 mb-3">
             <div className="w-3 h-3 rounded-full bg-blue-400" />
             <h4 className="text-md text-neutral-300 font-medium">Golden (Reference)</h4>
@@ -150,7 +150,7 @@ export function StatusOverview({
         </div>
 
         {/* Live */}
-        <div className="bg-neutral-900 rounded-lg p-4 border border-green-500/30">
+        <div className="bg-neutral-980 rounded-lg p-4 border border-green-500/30">
           <div className="flex items-center gap-2 mb-3">
             <div className="w-3 h-3 rounded-full bg-green-400" />
             <h4 className="text-md text-neutral-300 font-medium">Live (Working Copy)</h4>
@@ -161,11 +161,11 @@ export function StatusOverview({
                 onClick={() => setShowResetMenu((prev) => !prev)}
                 disabled={anyResetting}
                 size="xs"
-                color="orange"
+                accentColor="orange"
                 tooltip={{ title: 'Reset options', description: 'Reset live files to golden' }}
               />
               {showResetMenu && (
-                <div ref={resetMenuDropdownRef} className="absolute right-0 top-full mt-1 w-56 bg-neutral-850 border border-neutral-700 rounded-lg shadow-lg z-50 py-1 overflow-hidden">
+                <div ref={resetMenuDropdownRef} className="absolute right-0 top-full mt-1 w-56 bg-neutral-970 border border-neutral-700 rounded-lg shadow-lg z-50 py-1 overflow-hidden">
                   <button
                     onClick={() => { onResetAll(); setShowResetMenu(false) }}
                     className="w-full text-left px-3 py-2 text-md text-neutral-300 hover:bg-neutral-700 transition-colors"
@@ -203,7 +203,7 @@ export function StatusOverview({
                       onClick={() => onResetComponent(comp)}
                       disabled={anyResetting}
                       size="xss"
-                      color="orange"
+                      accentColor="orange"
                       tooltip={{ title: `Reset ${getLabel(comp)}`, description: `Reset ${getLabel(comp).toLowerCase()} to golden version` }}
                     />
                   </span>
@@ -221,7 +221,7 @@ export function StatusOverview({
 
       {/* Update Flow — settings only */}
       {!devtools && (
-        <div className="bg-neutral-900/50 border border-neutral-700 rounded-lg p-4">
+        <div className="bg-neutral-980/50 border border-neutral-700 rounded-lg p-4">
           <p className="text-sm font-medium text-neutral-400 mb-4">
             How updates work <span className="font-normal text-neutral-600">— checked per component ({components.map(getLabel).join(', ')})</span>
           </p>
@@ -287,7 +287,7 @@ export function StatusOverview({
 
       {/* Local Snapshots - devtools only */}
       {devtools && manifest && (
-        <div className="bg-neutral-900 rounded-lg p-4 border border-neutral-700">
+        <div className="bg-neutral-980 rounded-lg p-4 border border-neutral-700">
           <div className="flex items-center gap-2 mb-3">
             <Archive className="w-4 h-4 text-neutral-500" />
             <h4 className="text-md text-neutral-300 font-medium">Local Snapshots</h4>

package/components/sections/golden-snapshots/version-manager.tsx

@@ -53,7 +53,7 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
   return (
     <div className="space-y-4">
       {/* Global Version Bump */}
-      <div className="bg-neutral-900 rounded-lg p-4 border border-teal-500/30">
+      <div className="bg-neutral-980 rounded-lg p-4 border border-teal-500/30">
         <div className="flex items-center gap-3 mb-3">
           <Tag className="w-5 h-5 text-teal-400" />
           <h4 className="text-md text-neutral-300 font-medium">Golden Version</h4>
@@ -91,14 +91,14 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
             onClick={onBumpGlobal}
             disabled={bumpingGlobal || !globalVersion.trim()}
             size="sm"
-            color="cyan"
+            accentColor="neutral"
             tooltip={{ title: 'Bump version', description: 'Update the golden version' }}
           />
         </div>
       </div>
 
       {/* Component Versions */}
-      <div className="bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden">
+      <div className="bg-neutral-980 rounded-lg border border-neutral-700 overflow-hidden">
         <div className="px-4 py-3 border-b border-neutral-700">
           <h4 className="text-md text-neutral-300 font-medium">Component Versions</h4>
           <p className="text-sm text-neutral-600 mt-1">
@@ -132,7 +132,7 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
                       icon={<Tag />}
                       onClick={() => startEditComponent(comp)}
                       size="xs"
-                      color="neutral"
+                      accentColor="neutral"
                       tooltip={{ title: 'Edit version', description: `Change ${getLabel(comp)} version` }}
                     />
                   )}
@@ -164,14 +164,14 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
                       onClick={onBumpComponent}
                       disabled={bumpingComponent || !componentVersion.trim()}
                       size="sm"
-                      color="green"
+                      accentColor="neutral"
                       tooltip={{ title: 'Update', description: 'Save new version' }}
                     />
                     <IconButton
                       icon="close"
                       onClick={() => setEditingComponent(null)}
                       size="sm"
-                      color="neutral"
+                      accentColor="neutral"
                       tooltip={{ title: 'Cancel', description: 'Cancel editing' }}
                     />
                   </div>

package/components/sections/prompt-editor/file-type-tabbed-prompt-editor.tsx

@@ -98,10 +98,10 @@ export function FileTypeTabbedPromptEditor({
     : undefined
 
   return (
-    <div className={`flex w-full max-w-full bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${className}`}>
+    <div className={`flex w-full max-w-full bg-neutral-980 border border-neutral-700 rounded-lg overflow-hidden ${className}`}>
       {/* Left Sidebar — File Type Selector */}
       <div
-        className="relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col"
+        className="relative shrink-0 bg-neutral-990 overflow-hidden flex flex-col"
         style={{ width: sidebarWidth, minWidth: 160, maxWidth: 320 }}
       >
         {/* Header */}
@@ -126,7 +126,7 @@ export function FileTypeTabbedPromptEditor({
                 className={`w-full min-h-[44px] py-2 flex items-center gap-2.5 px-3 text-left transition-colors ${
                   isSelected
                     ? 'bg-neutral-700/50 border-l-2 border-blue-400'
-                    : 'hover:bg-neutral-850 border-l-2 border-transparent'
+                    : 'hover:bg-neutral-970 border-l-2 border-transparent'
                 }`}
               >
                 <div className={`flex-shrink-0 ${isSelected ? 'text-blue-400' : 'text-neutral-500'}`}>

package/components/sections/prompt-editor/index.ts

@@ -88,7 +88,7 @@
 
 // Types
 export type {
-  AiToolKey,
+  CodingAgentKey,
   ToolTab,
   PromptPlaceholder,
   PromptSnapshot,

package/components/sections/prompt-editor/simulator-prompt-editor.tsx

@@ -22,6 +22,8 @@
 import { useState, useCallback, useMemo } from 'react'
 import { useResizableSidebar } from '../../hooks/use-resizable-sidebar.ts'
 import { ChevronDown, ChevronRight, GripVertical, Crosshair } from 'lucide-react'
+import { useAccentColor, AccentColorProvider } from '../../lib/accent-context.ts'
+import type { FormColor } from '../../lib/form-colors.ts'
 import { TabbedPromptEditor } from './tabbed-prompt-editor.tsx'
 import type { ToolTab, PromptPlaceholder, ScenarioOption } from './types.ts'
 
@@ -48,6 +50,7 @@ export interface SimulatorPromptEditorProps {
   onSave?: (scenario: string, step: string, tool: string, content: string) => void
   /** When true, validates "## Verification Checklist" section */
   validateChecklist?: boolean
+  accentColor?: FormColor
   className?: string
 }
 
@@ -65,8 +68,11 @@ export function SimulatorPromptEditor({
   onReset,
   onSave,
   validateChecklist = false,
+  accentColor,
   className = '',
 }: SimulatorPromptEditorProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const defaultScenarioId = scenarios[0]?.id ?? ''
   const defaultStepId = scenarios[0]?.steps[0]?.id ?? ''
 
@@ -131,10 +137,11 @@ export function SimulatorPromptEditor({
   }
 
   return (
-    <div className={`flex w-full max-w-full bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${className}`}>
+    <AccentColorProvider value={effectiveColor}>
+    <div className={`flex w-full max-w-full bg-neutral-980 border border-neutral-700 rounded-lg overflow-hidden ${className}`}>
       {/* Left Sidebar — Tree Selector */}
       <div
-        className="relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col"
+        className="relative shrink-0 bg-neutral-990 overflow-hidden flex flex-col"
         style={{ width: sidebarWidth, minWidth: 180, maxWidth: 360 }}
       >
         {/* Header */}
@@ -159,8 +166,8 @@ export function SimulatorPromptEditor({
                 {/* Scenario Header */}
                 <button
                   onClick={() => toggleScenario(scenario.id)}
-                  className={`w-full min-h-[44px] py-2 flex items-start gap-2 px-3 text-left transition-colors hover:bg-neutral-850 ${
-                    isScenarioActive ? 'bg-neutral-850/50' : ''
+                  className={`w-full min-h-[44px] py-2 flex items-start gap-2 px-3 text-left transition-colors hover:bg-neutral-970 ${
+                    isScenarioActive ? 'bg-neutral-970/50' : ''
                   }`}
                 >
                   <div className="flex-shrink-0 mt-0.5 text-neutral-500">
@@ -194,7 +201,7 @@ export function SimulatorPromptEditor({
                           className={`w-full h-[32px] flex items-center gap-2 pl-9 pr-3 text-left transition-colors ${
                             isStepSelected
                               ? 'bg-neutral-700/50 border-l-2 border-blue-400'
-                              : 'hover:bg-neutral-850 border-l-2 border-transparent'
+                              : 'hover:bg-neutral-970 border-l-2 border-transparent'
                           }`}
                         >
                           <div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
@@ -236,5 +243,6 @@ export function SimulatorPromptEditor({
         />
       </div>
     </div>
+    </AccentColorProvider>
   )
 }

package/components/sections/prompt-editor/tabbed-prompt-editor.tsx

@@ -14,7 +14,7 @@
  *   <TabbedPromptEditor
  *     prompts={{ claude: '...', gemini: '...' }}
  *     onPromptChange={(tool, value) => save(tool, value)}
- *     tools={[{ id: 'claude', name: 'Claude Code', icon: <AiToolIcon tool="claude" /> }]}
+ *     tools={[{ id: 'claude', name: 'Claude Code', icon: <CodingAgentIcon agent="claude" /> }]}
  *     variables={[{ name: 'FILE_PATH', description: 'Path to the file' }]}
  *   />
  */
@@ -28,8 +28,10 @@ import { IconButton } from '../../ui/icon-button.tsx'
 import { Input } from '../../ui/input.tsx'
 import { EditorToolbar } from '../../ui/editor-toolbar.tsx'
 import { EditorPlaceholderCard } from '../../ui/editor-placeholder-card.tsx'
+import { useAccentColor, AccentColorProvider } from '../../lib/accent-context.ts'
+import type { FormColor } from '../../lib/form-colors.ts'
 import type { ToolTab, PromptPlaceholder } from './types.ts'
-import { AiToolIcon } from '../../lib/ai-tools.tsx'
+import { CodingAgentIcon } from '../../lib/coding-agents.tsx'
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -63,6 +65,7 @@ export interface TabbedPromptEditorProps {
   validateChecklist?: boolean
   /** When true, adds border and rounding for standalone usage */
   standalone?: boolean
+  accentColor?: FormColor
   className?: string
 }
 
@@ -80,8 +83,11 @@ export function TabbedPromptEditor({
   onSave,
   validateChecklist = false,
   standalone = false,
+  accentColor,
   className = '',
 }: TabbedPromptEditorProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const [activeTab, setActiveTab] = useState(tools[0]?.id ?? '')
   const { width: sidebarWidth, onPointerDown: handleSidebarPointerDown } = useResizableSidebar({ min: 220, max: 400, defaultWidth: 280, direction: 'left' })
   const [variableSearch, setVariableSearch] = useState('')
@@ -305,11 +311,12 @@ export function TabbedPromptEditor({
   }, [variables, variableSearch])
 
   return (
-    <div className={`flex w-full h-full bg-neutral-900 overflow-hidden ${standalone ? 'border border-neutral-700 rounded-lg' : ''} ${className}`}>
+    <AccentColorProvider value={effectiveColor}>
+    <div className={`flex w-full h-full bg-neutral-980 overflow-hidden ${standalone ? 'border border-neutral-700 rounded-lg' : ''} ${className}`}>
       {/* Main content area */}
       <div className="flex-1 min-w-0 w-0 flex flex-col overflow-hidden">
         {/* Tool Tabs */}
-        <div className="relative flex h-[26px] bg-neutral-950 shrink-0">
+        <div className="relative flex h-[26px] bg-neutral-990 shrink-0">
           {tools.map((tool) => {
             const isActive = activeTab === tool.id
             const activeColor = tool.activeColor ?? 'text-blue-400'
@@ -320,12 +327,12 @@ export function TabbedPromptEditor({
                 onClick={() => setActiveTab(tool.id)}
                 className={`flex-1 flex items-center justify-center gap-1.5 px-2 text-sm font-medium border-b-2 transition-colors ${
                   isActive
-                    ? `border-current ${activeColor} bg-neutral-850`
-                    : 'border-neutral-700 text-neutral-500 hover:text-neutral-400 hover:bg-neutral-850/50'
+                    ? `border-current ${activeColor} bg-neutral-970`
+                    : 'border-neutral-700 text-neutral-500 hover:text-neutral-400 hover:bg-neutral-970/50'
                 }`}
                 title={tool.name}
               >
-                {tool.icon ?? <AiToolIcon tool={tool.id} size={14} />}
+                {tool.icon ?? <CodingAgentIcon agent={tool.id} size={14} />}
                 <span className="hidden sm:inline">{tool.shortName ?? tool.name}</span>
               </button>
             )
@@ -398,7 +405,7 @@ export function TabbedPromptEditor({
       {/* Variables Sidebar */}
       {hasVariables && (
         <div
-          className="relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col border-l border-neutral-700"
+          className="relative shrink-0 bg-neutral-990 overflow-hidden flex flex-col border-l border-neutral-700"
           style={{ width: sidebarWidth, minWidth: 220, maxWidth: 400 }}
         >
           {/* Resize handle on left edge */}
@@ -436,7 +443,7 @@ export function TabbedPromptEditor({
                 <IconButton
                   icon={<X className="w-3 h-3" />}
                   onClick={() => setVariableSearch('')}
-                  color="neutral"
+                  accentColor="neutral"
                   size="xss"
                   className="absolute right-2 top-1/2 -translate-y-1/2"
                   tooltip={{ title: 'Clear', description: 'Clear search' }}
@@ -457,7 +464,7 @@ export function TabbedPromptEditor({
           <div className="flex-1 overflow-y-auto p-2.5 space-y-2">
             {filteredVariables.length > 0 ? (
               filteredVariables.map((variable: PromptPlaceholder) => (
-                <div key={variable.name} className="bg-neutral-850 border border-neutral-700 rounded-lg">
+                <div key={variable.name} className="bg-neutral-970 border border-neutral-700 rounded-lg">
                   <EditorPlaceholderCard
                     name={variable.name}
                     description={variable.description}
@@ -478,5 +485,6 @@ export function TabbedPromptEditor({
         </div>
       )}
     </div>
+    </AccentColorProvider>
   )
 }

package/components/sections/prompt-editor/types.ts

@@ -9,8 +9,8 @@
 
 import type { ReactNode } from 'react'
 
-// Re-export the AI tool key type from the shared lib
-export type { AiToolKey } from '../../lib/ai-tools.tsx'
+// Re-export the coding agent key type from the shared lib
+export type { CodingAgentKey } from '../../lib/coding-agents.tsx'
 
 // ---------------------------------------------------------------------------
 // Tool definition (generic — not tied to specific AI tools)

package/components/sections/report-bug/report-bug-form.tsx

@@ -32,6 +32,8 @@ import { cn } from '../../lib/cn.ts'
 import { Input } from '../../ui/input.tsx'
 import { ResizableTextarea } from '../../ui/resizable-textarea.tsx'
 import { Checkbox } from '../../ui/checkbox.tsx'
+import { useAccentColor, AccentColorProvider } from '../../lib/accent-context.ts'
+import type { FormColor } from '../../lib/form-colors.ts'
 import { ScreenshotUploader } from './screenshot-uploader.tsx'
 import { useReportBug, type UseReportBugOptions } from './use-report-bug.ts'
 import { ISSUE_TYPES, type IssueType, type IssueReport, type IssueReportResult, type SystemInfo } from './issue-reporter-api.ts'
@@ -66,6 +68,7 @@ export interface ReportBugFormProps {
   onErrorsSubmitted?: () => void
   /** Override default API submission (for testing/mocking) */
   submitFn?: (report: IssueReport) => Promise<IssueReportResult>
+  accentColor?: FormColor
   className?: string
 }
 
@@ -84,8 +87,11 @@ export function ReportBugForm({
   onCancel,
   onErrorsSubmitted,
   submitFn,
+  accentColor,
   className,
 }: ReportBugFormProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const hookOptions: UseReportBugOptions = {
     workerUrl,
     getSystemInfo,
@@ -122,7 +128,8 @@ export function ReportBugForm({
   const hasErrors = (errorCount ?? 0) > 0 || (warnCount ?? 0) > 0
 
   return (
-    <div className={cn('rounded-lg border border-neutral-700 bg-neutral-800', className)}>
+    <AccentColorProvider value={effectiveColor}>
+    <div className={cn('rounded-lg border border-neutral-700 bg-neutral-960', className)}>
       <div className="border-b border-neutral-700 px-4 py-3">
         <h3 className="text-md font-medium text-neutral-200">Report a Bug</h3>
       </div>
@@ -173,7 +180,7 @@ export function ReportBugForm({
             onChange={(e) => setDescription(e.target.value)}
             placeholder="Describe the issue in detail. Include steps to reproduce if applicable."
             rows={6}
-            className="w-full px-3 py-1.5 bg-neutral-800 border border-neutral-700 rounded-lg text-md text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none min-h-[120px]"
+            className="w-full px-3 py-1.5 bg-neutral-960 border border-neutral-700 rounded-lg text-md text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none min-h-[120px]"
           />
         </div>
 
@@ -222,11 +229,11 @@ export function ReportBugForm({
 
             {/* Captured errors list */}
             {includeLogs && capturedErrors && capturedErrors.length > 0 && (
-              <div className="rounded-md border border-neutral-700 bg-neutral-900/50">
+              <div className="rounded-md border border-neutral-700 bg-neutral-980/50">
                 <div className="px-3 py-2 border-b border-neutral-700">
                   <span className="text-sm font-medium text-neutral-400">Captured Errors</span>
                 </div>
-                <div className="max-h-[200px] overflow-y-auto divide-y divide-neutral-800">
+                <div className="max-h-[200px] overflow-y-auto divide-y divide-neutral-960">
                   {capturedErrors.map((error) => (
                     <div key={error.fingerprint} className="px-3 py-2 text-sm">
                       <div className="flex items-start gap-2">
@@ -278,5 +285,6 @@ export function ReportBugForm({
         </button>
       </div>
     </div>
+    </AccentColorProvider>
   )
 }

package/components/sections/report-bug/screenshot-uploader.tsx

@@ -22,6 +22,8 @@
 import { useCallback, useRef, useState } from 'react'
 import { ImagePlus, X, AlertCircle } from 'lucide-react'
 import { cn } from '../../lib/cn.ts'
+import { useAccentColor, AccentColorProvider } from '../../lib/accent-context.ts'
+import type { FormColor } from '../../lib/form-colors.ts'
 
 export interface Screenshot {
   id: string
@@ -36,6 +38,7 @@ export interface ScreenshotUploaderProps {
   onChange: (screenshots: Screenshot[]) => void
   maxTotalSize?: number
   disabled?: boolean
+  accentColor?: FormColor
   className?: string
 }
 
@@ -52,8 +55,11 @@ export function ScreenshotUploader({
   onChange,
   maxTotalSize = DEFAULT_MAX_SIZE,
   disabled = false,
+  accentColor,
   className,
 }: ScreenshotUploaderProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [isDragging, setIsDragging] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -141,6 +147,7 @@ export function ScreenshotUploader({
   )
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <div className={cn('space-y-3', className)}>
       <div
         onClick={() => !disabled && fileInputRef.current?.click()}
@@ -152,8 +159,8 @@ export function ScreenshotUploader({
           isDragging
             ? 'border-blue-500 bg-blue-500/10'
             : disabled
-              ? 'border-neutral-700 bg-neutral-900/50 cursor-not-allowed opacity-50'
-              : 'border-neutral-600 hover:border-neutral-500 hover:bg-neutral-800/30',
+              ? 'border-neutral-700 bg-neutral-980/50 cursor-not-allowed opacity-50'
+              : 'border-neutral-600 hover:border-neutral-500 hover:bg-neutral-960/30',
         )}
       >
         <ImagePlus className={cn('w-6 h-6', isDragging ? 'text-blue-400' : 'text-neutral-500')} />
@@ -188,7 +195,7 @@ export function ScreenshotUploader({
           {screenshots.map((s) => (
             <div
               key={s.id}
-              className="relative group aspect-video bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden"
+              className="relative group aspect-video bg-neutral-980 border border-neutral-700 rounded-lg overflow-hidden"
             >
               <img
                 src={`data:${s.contentType};base64,${s.data}`}
@@ -224,5 +231,6 @@ export function ScreenshotUploader({
         </div>
       )}
     </div>
+    </AccentColorProvider>
   )
 }