@toolr/ui-design 0.1.7 → 0.1.9

package/components/ui/registry-browser.tsx

@@ -4,6 +4,8 @@ import { DebounceBorderOverlay } from './debounce-border-overlay.tsx'
 import { IconButton } from './icon-button.tsx'
 import { Input } from './input.tsx'
 import { RegistryCard, type RegistryCardProps } from './registry-card.tsx'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
 
 const PAGE_SIZE = 60
 
@@ -50,6 +52,8 @@ export interface RegistryBrowserProps {
 
   // Grid items
   items: RegistryCardProps[]
+  /** Accent color for themed sub-components */
+  accentColor?: FormColor
 }
 
 export function RegistryBrowser({
@@ -76,7 +80,10 @@ export function RegistryBrowser({
   onScrollChange,
   maxWidth = 'max-w-[1440px]',
   items,
+  accentColor: accentColorProp,
 }: RegistryBrowserProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColorProp ?? contextAccent ?? 'blue'
   // Incremental rendering: render a page at a time, load more on scroll
   const totalCount = items.length
   const needsPaging = totalCount > PAGE_SIZE
@@ -152,6 +159,7 @@ export function RegistryBrowser({
   const hasMore = visibleCount < totalCount
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <div ref={scrollRef} className="h-full overflow-y-auto p-4 pb-8" onScroll={handleScroll}>
       {/* Toolbar */}
       <div className="sticky top-0 flex items-center gap-2 pb-4">
@@ -184,7 +192,7 @@ export function RegistryBrowser({
             icon={<ArrowRight className="w-3.5 h-3.5" />}
             onClick={onSearchSubmit}
             size="sm"
-            color="blue"
+            accentColor="neutral"
             tooltip={{ description: 'Search' }}
           />
         )}
@@ -199,6 +207,7 @@ export function RegistryBrowser({
             icon={<RefreshCw className="w-3.5 h-3.5" />}
             onClick={onRefresh}
             size="sm"
+            accentColor="neutral"
             tooltip={refreshTooltip ?? { description: 'Refresh registry data' }}
           />
         )}
@@ -210,6 +219,7 @@ export function RegistryBrowser({
       {/* Content */}
       <div className={`${maxWidth} mx-auto relative z-10`}>
         {isLoading ? (
+          /* py-12: empty/loading/error states need extra vertical breathing room beyond the p-6 scale max */
           <div className="flex items-center justify-center py-12 text-neutral-500">
             <Loader2 className="w-5 h-5 animate-spin mr-2" />
             {loadingMessage}
@@ -243,5 +253,6 @@ export function RegistryBrowser({
         )}
       </div>
     </div>
+    </AccentColorProvider>
   )
 }

package/components/ui/registry-card.tsx

@@ -5,14 +5,16 @@ import {
 } from 'lucide-react'
 import { Tooltip } from './tooltip.tsx'
 import { IconButton, type IconName } from './icon-button.tsx'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
 import { Label, type LabelColor, smartCapitalize } from './label.tsx'
-import { AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from '../lib/ai-tools.tsx'
-export { AiToolIcon, AI_TOOL_NAMES, type AiToolKey }
+import { CodingAgentIcon, CODING_AGENT_NAMES, type CodingAgentKey } from '../lib/coding-agents.tsx'
+export { CodingAgentIcon, CODING_AGENT_NAMES, type CodingAgentKey }
 
 // ── Constants ─────────────────────────────────────────────────────────────────
 
 export type RegistryItemType = 'skill' | 'hook' | 'agent' | 'command' | 'plugin' | 'mcp' | 'settings'
-export type ExtensionSource = 'project' | 'plugin' | 'user' | 'local'
+export type CapabilitySource = 'project' | 'plugin' | 'user' | 'local'
 
 const TYPE_ICONS: Record<string, typeof Sparkles> = {
   skill: Sparkles,
@@ -98,7 +100,7 @@ function formatCount(n?: number): string {
 // ── Scope helpers ─────────────────────────────────────────────────────────────
 
 function computeSeedrScopes(
-  installedScopes: ReadonlySet<ExtensionSource> | undefined,
+  installedScopes: ReadonlySet<CapabilitySource> | undefined,
   isUserScope: boolean,
 ) {
   const isInstalledInViewScope = (() => {
@@ -107,7 +109,7 @@ function computeSeedrScopes(
     return installedScopes.has('project') || installedScopes.has('local')
   })()
 
-  const removeScope: ExtensionSource | null = (() => {
+  const removeScope: CapabilitySource | null = (() => {
     if (!installedScopes || installedScopes.size === 0) return null
     if (isUserScope && installedScopes.has('user')) return 'user'
     if (!isUserScope) {
@@ -150,7 +152,7 @@ function CategoryBadge({ category, onFilter }: { category: string; onFilter?: (c
   return (
     <Label
       text={smartCapitalize(category)}
-      color={getCategoryLabelColor(category)}
+      accentColor={getCategoryLabelColor(category)}
       icon="tag"
       tooltip={{ description: onFilter ? `${smartCapitalize(category)} \u00b7 Click to filter` : smartCapitalize(category) }}
       size="sm"
@@ -198,7 +200,7 @@ function RegistryCardBadgeRow({ sourceType, pluginType, category, onFilterCatego
       {sourceType && SOURCE_TYPE_BADGES[sourceType] && (
         <Label
           text={sourceType}
-          color={SOURCE_TYPE_BADGES[sourceType].color}
+          accentColor={SOURCE_TYPE_BADGES[sourceType].color}
           icon={SOURCE_TYPE_BADGES[sourceType].icon}
           tooltip={{ description: `Source: ${sourceType}` }}
           size="sm"
@@ -208,7 +210,7 @@ function RegistryCardBadgeRow({ sourceType, pluginType, category, onFilterCatego
       {pluginType && PLUGIN_TYPE_BADGES[pluginType] && (
         <Label
           text={pluginType}
-          color={PLUGIN_TYPE_BADGES[pluginType].color}
+          accentColor={PLUGIN_TYPE_BADGES[pluginType].color}
           icon={PLUGIN_TYPE_BADGES[pluginType].icon}
           tooltip={{ description: `Plugin type: ${pluginType}` }}
           size="sm"
@@ -219,20 +221,20 @@ function RegistryCardBadgeRow({ sourceType, pluginType, category, onFilterCatego
       {isInstalled && !isDisabled && (
         <Label
           text="Added"
-          color="green"
+          accentColor="green"
           icon={scopeIcons.length > 0 ? scopeIcons : 'check'}
           tooltip={{ description: `Installed in: ${scopes.join(', ')}` }}
           size="sm"
         />
       )}
       {isDisabled && (
-        <Label text="Disabled" color="red" icon="x" tooltip={{ description: 'Installed but disabled' }} size="sm" />
+        <Label text="Disabled" accentColor="red" icon="x" tooltip={{ description: 'Installed but disabled' }} size="sm" />
       )}
       {status?.updateAvailable && (
-        <Label text="Update" color="amber" icon="download" tooltip={{ description: 'Update available' }} size="sm" />
+        <Label text="Update" accentColor="amber" icon="download" tooltip={{ description: 'Update available' }} size="sm" />
       )}
       {status?.modified && (
-        <Label text="Modified" color="violet" icon="pencil" tooltip={{ description: 'Locally modified' }} size="sm" />
+        <Label text="Modified" accentColor="violet" icon="pencil" tooltip={{ description: 'Locally modified' }} size="sm" />
       )}
     </div>
   )
@@ -256,6 +258,7 @@ interface RegistryCardBase {
   isInstalling?: boolean
   updatedAt?: string
   onDateClick?: () => void
+  accentColor?: FormColor
 }
 
 interface SeedrVariant extends RegistryCardBase {
@@ -264,14 +267,14 @@ interface SeedrVariant extends RegistryCardBase {
   sourceType: string
   pluginType?: string
   wrapper?: string
-  installedScopes?: ReadonlySet<ExtensionSource>
+  installedScopes?: ReadonlySet<CapabilitySource>
   viewScope?: 'user' | 'project'
   status?: SeedrItemStatus
   compatibility: string[]
   packageCounts?: Record<string, number>
   isDisabled?: boolean
   onActivate?: () => void
-  onRemove?: (scope: ExtensionSource) => void
+  onRemove?: (scope: CapabilitySource) => void
   onFilterSource?: () => void
   onFilterPluginType?: (pluginType: string) => void
   /** Render scope confirmation modal */
@@ -284,7 +287,7 @@ interface ClaudePluginsVariant extends RegistryCardBase {
   category?: string
   stars?: number
   downloads?: number
-  installedScopes?: ReadonlySet<ExtensionSource>
+  installedScopes?: ReadonlySet<CapabilitySource>
   viewScope?: 'user' | 'project'
   onRemove?: () => void
   onSortBy?: (field: string) => void
@@ -298,7 +301,7 @@ interface ClaudePluginsVariant extends RegistryCardBase {
 interface AitmplVariant extends RegistryCardBase {
   variant: 'aitmpl'
   category: string
-  installedScopes?: ReadonlySet<ExtensionSource>
+  installedScopes?: ReadonlySet<CapabilitySource>
   viewScope?: 'user' | 'project'
   onRemove?: () => void
   onFilterCategory?: (category: string) => void
@@ -310,7 +313,7 @@ interface SkillsShVariant extends RegistryCardBase {
   variant: 'skills-sh'
   author: string
   installs?: number
-  installedScopes?: ReadonlySet<ExtensionSource>
+  installedScopes?: ReadonlySet<CapabilitySource>
   viewScope?: 'user' | 'project'
   onRemove?: () => void
   /** All tool keys to show in bottom row */
@@ -324,7 +327,9 @@ export type RegistryCardProps = SeedrVariant | ClaudePluginsVariant | AitmplVari
 // ── Main Component ────────────────────────────────────────────────────────────
 
 export function RegistryCard(props: RegistryCardProps) {
-  const { onClick, flash, name, type, description, errorMessage, isInstalling, updatedAt, onDateClick } = props
+  const { onClick, flash, name, type, description, errorMessage, isInstalling, updatedAt, onDateClick, accentColor: accentColorProp } = props
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColorProp ?? contextAccent ?? 'blue'
   const [showScopeConfirm, setShowScopeConfirm] = useState(false)
 
   const TypeIcon = TYPE_ICONS[type] || TYPE_ICONS.extension
@@ -363,7 +368,7 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<Power className="w-3.5 h-3.5" />}
         onClick={() => props.onActivate?.()}
         size="sm"
-        color="green"
+        accentColor="green"
         tooltip={{ description: `Activate ${name}` }}
       />
     ) : isInstalledInViewScope && removeScope ? (
@@ -371,7 +376,7 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<Trash2 className="w-3.5 h-3.5" />}
         onClick={() => props.onRemove?.(removeScope)}
         size="sm"
-        color="red"
+        accentColor="red"
         tooltip={{ description: `Remove ${name} from ${removeScope}` }}
       />
     ) : installedElsewhere ? (
@@ -379,7 +384,7 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<FolderPlus className="w-3.5 h-3.5" />}
         onClick={() => setShowScopeConfirm(true)}
         size="sm"
-        color="blue"
+        accentColor="blue"
         tooltip={{ description: ALREADY_AT_USER }}
       />
     ) : (
@@ -387,14 +392,14 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<Plus className="w-3.5 h-3.5" />}
         onClick={props.onInstall}
         size="sm"
-        color="green"
+        accentColor="green"
         tooltip={{ description: `Add ${name}` }}
       />
     )
 
-    bottomLogos = props.compatibility.filter((t) => t in AI_TOOL_NAMES).map((tool) => (
-      <Tooltip key={tool} content={{ description: `Compatible with ${AI_TOOL_NAMES[tool as AiToolKey] ?? tool}` }} position="top">
-        <AiToolIcon tool={tool} size={16} />
+    bottomLogos = props.compatibility.filter((t) => t in CODING_AGENT_NAMES).map((tool) => (
+      <Tooltip key={tool} content={{ description: `Compatible with ${CODING_AGENT_NAMES[tool as CodingAgentKey] ?? tool}` }} position="top">
+        <CodingAgentIcon agent={tool} size={16} />
       </Tooltip>
     ))
 
@@ -434,7 +439,7 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<Trash2 className="w-3.5 h-3.5" />}
         onClick={() => props.onRemove?.()}
         size="sm"
-        color="red"
+        accentColor="red"
         tooltip={{ description: `Remove ${name} from ${removeScope}` }}
       />
     ) : installedElsewhere ? (
@@ -442,7 +447,7 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<FolderPlus className="w-3.5 h-3.5" />}
         onClick={() => setShowScopeConfirm(true)}
         size="sm"
-        color="blue"
+        accentColor="blue"
         tooltip={{ description: ALREADY_AT_USER }}
       />
     ) : (
@@ -450,15 +455,15 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<Plus className="w-3.5 h-3.5" />}
         onClick={props.onInstall}
         size="sm"
-        color="green"
+        accentColor="green"
         tooltip={{ description: `Add ${name}` }}
       />
     )
 
     const compatibleTools = props.compatibleTools ?? []
     bottomLogos = compatibleTools.map((tool) => (
-      <Tooltip key={tool} content={{ description: `Compatible with ${AI_TOOL_NAMES[tool as AiToolKey] ?? tool}` }} position="top">
-        <AiToolIcon tool={tool} size={16} />
+      <Tooltip key={tool} content={{ description: `Compatible with ${CODING_AGENT_NAMES[tool as CodingAgentKey] ?? tool}` }} position="top">
+        <CodingAgentIcon agent={tool} size={16} />
       </Tooltip>
     ))
     bottomStats = [
@@ -502,7 +507,7 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<Trash2 className="w-3.5 h-3.5" />}
         onClick={() => props.onRemove?.()}
         size="sm"
-        color="red"
+        accentColor="red"
         tooltip={{ description: `Remove ${name} from ${removeScope}` }}
       />
     ) : installedElsewhere ? (
@@ -510,7 +515,7 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<FolderPlus className="w-3.5 h-3.5" />}
         onClick={() => setShowScopeConfirm(true)}
         size="sm"
-        color="blue"
+        accentColor="blue"
         tooltip={{ description: ALREADY_AT_USER }}
       />
     ) : (
@@ -518,14 +523,14 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<Plus className="w-3.5 h-3.5" />}
         onClick={props.onInstall}
         size="sm"
-        color="green"
+        accentColor="green"
         tooltip={{ description: `Add ${name}` }}
       />
     )
 
     bottomLogos = [(
       <Tooltip key="claude" content={{ description: 'Compatible with Claude Code' }} position="top">
-        <AiToolIcon tool="claude" size={16} />
+        <CodingAgentIcon agent="claude" size={16} />
       </Tooltip>
     )]
   } else if (props.variant === 'skills-sh') {
@@ -547,7 +552,7 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<Trash2 className="w-3.5 h-3.5" />}
         onClick={() => props.onRemove?.()}
         size="sm"
-        color="red"
+        accentColor="red"
         tooltip={{ description: `Remove ${name} from ${removeScope}` }}
       />
     ) : installedElsewhere ? (
@@ -555,7 +560,7 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<FolderPlus className="w-3.5 h-3.5" />}
         onClick={() => setShowScopeConfirm(true)}
         size="sm"
-        color="blue"
+        accentColor="blue"
         tooltip={{ description: ALREADY_AT_USER }}
       />
     ) : (
@@ -563,15 +568,15 @@ export function RegistryCard(props: RegistryCardProps) {
         icon={<Plus className="w-3.5 h-3.5" />}
         onClick={props.onInstall}
         size="sm"
-        color="green"
+        accentColor="green"
         tooltip={{ description: `Add ${name}` }}
       />
     )
 
     const allTools = props.allToolKeys ?? []
     bottomLogos = allTools.map((tool) => (
-      <Tooltip key={tool} content={{ description: `Compatible with ${AI_TOOL_NAMES[tool as AiToolKey] ?? tool}` }} position="top">
-        <AiToolIcon tool={tool} size={14} />
+      <Tooltip key={tool} content={{ description: `Compatible with ${CODING_AGENT_NAMES[tool as CodingAgentKey] ?? tool}` }} position="top">
+        <CodingAgentIcon agent={tool} size={14} />
       </Tooltip>
     ))
     if (props.installs != null && props.installs > 0) {
@@ -597,10 +602,11 @@ export function RegistryCard(props: RegistryCardProps) {
         : 'border-neutral-700'
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <div
       role="button"
       tabIndex={0}
-      className={`group text-left w-full cursor-pointer border rounded-lg p-3 transition-all duration-500 hover:border-neutral-600 flex flex-col bg-neutral-800/50 hover:bg-neutral-800 ${borderClass}`}
+      className={`group text-left w-full cursor-pointer border rounded-lg p-3 transition-all duration-500 hover:border-neutral-600 flex flex-col bg-neutral-960/50 hover:bg-neutral-960 ${borderClass}`}
       onClick={onClick}
       onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick() } }}
     >
@@ -614,7 +620,7 @@ export function RegistryCard(props: RegistryCardProps) {
             <Loader2 className="w-4 h-4 text-blue-400 animate-spin" />
           ) : (
             <>
-              <Tooltip content={{ description: `${typeLabel} extension` }} position="top">
+              <Tooltip content={{ description: `${typeLabel} capability` }} position="top">
                 <TypeIcon className={`w-4 h-4 group-hover:opacity-0 transition-opacity ${typeIconColor}`} />
               </Tooltip>
               {installButton && (
@@ -687,7 +693,7 @@ export function RegistryCard(props: RegistryCardProps) {
         return (
           <div onClick={(e) => e.stopPropagation()}>
             <div className="fixed inset-0 bg-[var(--background)]/50 z-50 flex items-center justify-center" onClick={() => setShowScopeConfirm(false)}>
-              <div className="bg-neutral-800 border border-neutral-700 rounded-lg p-4 max-w-sm" onClick={(e) => e.stopPropagation()}>
+              <div className="bg-neutral-960 border border-neutral-700 rounded-lg p-4 max-w-sm" onClick={(e) => e.stopPropagation()}>
                 <h3 className="text-md font-medium text-neutral-200 mb-2">{ALREADY_AT_USER}</h3>
                 <p className="text-sm text-neutral-400 mb-4">
                   <strong className="text-neutral-300">{name}</strong> is already installed at user level and available to all projects. Do you also want to install it at project level?
@@ -702,5 +708,6 @@ export function RegistryCard(props: RegistryCardProps) {
         )
       })()}
     </div>
+    </AccentColorProvider>
   )
 }

package/components/ui/registry-detail.tsx

@@ -2,8 +2,10 @@ import { type ReactNode, useState, useRef, useEffect, useCallback } from 'react'
 import { ChevronsUpDown, ChevronsDownUp } from 'lucide-react'
 import { IconButton } from './icon-button.tsx'
 import { Label, type LabelProps } from './label.tsx'
-import { AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from '../lib/ai-tools.tsx'
+import { CodingAgentIcon, CODING_AGENT_NAMES, type CodingAgentKey } from '../lib/coding-agents.tsx'
 import { FileStructureSection, type FileStructureSectionProps } from './file-structure-section.tsx'
+import { type AccentColor } from '../lib/form-colors.ts'
+import { AccentColorProvider, useAccentColor } from '../lib/accent-context.ts'
 import type { LucideIcon } from 'lucide-react'
 
 export interface RegistryDetailProps {
@@ -35,6 +37,12 @@ export interface RegistryDetailProps {
   // Above header (e.g. badge row)
   aboveHeader?: ReactNode
 
+  // Below header (e.g. status messages)
+  belowHeader?: ReactNode
+
+  // Accent color for internal buttons and file structure
+  accentColor?: AccentColor
+
   // Max width class
   maxWidth?: string
 
@@ -42,7 +50,7 @@ export interface RegistryDetailProps {
   children?: ReactNode
 }
 
-const MARKDOWN_CLASSES = 'text-md text-neutral-400 leading-relaxed [&_strong]:text-neutral-200 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:bg-neutral-700/40 [&_code]:border [&_code]:border-neutral-500/40 [&_code]:text-neutral-200 [&_code]:font-mono [&_code]:text-sm [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-neutral-200 [&_h1]:mb-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-neutral-200 [&_h2]:mb-2 [&_h3]:text-md [&_h3]:font-medium [&_h3]:text-neutral-200 [&_h3]:mb-1 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:mb-1 [&_p]:mb-2 [&_pre]:bg-neutral-900 [&_pre]:rounded [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:text-sm'
+const MARKDOWN_CLASSES = 'text-md text-neutral-400 leading-relaxed [&_strong]:text-neutral-200 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:bg-neutral-700/40 [&_code]:border [&_code]:border-neutral-500/40 [&_code]:text-neutral-200 [&_code]:font-mono [&_code]:text-sm [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-neutral-200 [&_h1]:mb-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-neutral-200 [&_h2]:mb-2 [&_h3]:text-md [&_h3]:font-medium [&_h3]:text-neutral-200 [&_h3]:mb-1 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:mb-1 [&_p]:mb-2 [&_pre]:bg-neutral-980 [&_pre]:rounded [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:text-sm'
 
 // ── CollapsibleSection ────────────────────────────────────────────────────────
 
@@ -103,7 +111,7 @@ function CollapsibleTextSection({ children, header }: { children: string; header
         </div>
 
         {showCollapsed && (
-          <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-neutral-800 to-transparent pointer-events-none" />
+          <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-neutral-960 to-transparent pointer-events-none" />
         )}
       </div>
     </div>
@@ -112,17 +120,17 @@ function CollapsibleTextSection({ children, header }: { children: string; header
 
 // ── CompatibleWithSection ─────────────────────────────────────────────────────
 
-function CompatibleWithSection({ tools }: { tools: string[] }) {
-  if (tools.length === 0) return null
+function CompatibleWithSection({ agents }: { agents: string[] }) {
+  if (agents.length === 0) return null
 
   return (
     <div>
       <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider mb-3">Compatible with</h3>
       <div className="flex items-start gap-3">
-        {tools.map((tool) => (
-          <div key={tool} className="flex flex-col items-center gap-1">
-            <AiToolIcon tool={tool} size={18} />
-            <span className="text-xs text-neutral-400">{AI_TOOL_NAMES[tool as AiToolKey] ?? tool}</span>
+        {agents.map((agent) => (
+          <div key={agent} className="flex flex-col items-center gap-1">
+            <CodingAgentIcon agent={agent} size={18} />
+            <span className="text-xs text-neutral-400">{CODING_AGENT_NAMES[agent as CodingAgentKey] ?? agent}</span>
           </div>
         ))}
       </div>
@@ -149,10 +157,15 @@ export function RegistryDetail({
   fileStructureVariant,
   onFetchContent,
   aboveHeader,
+  belowHeader,
+  accentColor,
   maxWidth = 'max-w-[1440px]',
   children,
 }: RegistryDetailProps) {
-  return (
+  const contextAccent = useAccentColor()
+  const resolvedAccent = accentColor ?? contextAccent
+
+  const content = (
     <div className="h-full overflow-y-auto p-6">
       <div className={`${maxWidth} mx-auto space-y-6`}>
         {/* Above header badges */}
@@ -178,6 +191,9 @@ export function RegistryDetail({
           )}
         </div>
 
+        {/* Below header (status messages, etc.) */}
+        {belowHeader}
+
         {/* Description */}
         {description && (
           <div>
@@ -206,7 +222,7 @@ export function RegistryDetail({
 
         {/* Compatible with */}
         {compatibleTools && compatibleTools.length > 0 && (
-          <CompatibleWithSection tools={compatibleTools} />
+          <CompatibleWithSection agents={compatibleTools} />
         )}
 
         {/* File structure */}
@@ -216,6 +232,7 @@ export function RegistryDetail({
             files={files}
             rootName={rootName}
             onFetchContent={onFetchContent}
+            accentColor={resolvedAccent}
           />
         )}
 
@@ -224,4 +241,10 @@ export function RegistryDetail({
       </div>
     </div>
   )
+
+  if (resolvedAccent) {
+    return <AccentColorProvider value={resolvedAccent}>{content}</AccentColorProvider>
+  }
+
+  return content
 }

package/components/ui/resizable-textarea.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useRef, useState } from 'react'
 import Editor from '@monaco-editor/react'
 import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 const variantClasses = {
-  filled: 'bg-neutral-800 border text-neutral-200 placeholder-neutral-500',
+  filled: 'bg-neutral-960 border text-neutral-200 placeholder-neutral-500',
   outline: 'bg-transparent border text-neutral-200 placeholder-neutral-500',
 }
 
@@ -11,7 +12,7 @@ interface ResizableTextareaBaseProps {
   wrapperClassName?: string
   resizable?: boolean
   variant?: 'filled' | 'outline'
-  color?: FormColor
+  accentColor?: FormColor
 }
 
 interface ResizableTextareaFieldProps
@@ -72,8 +73,8 @@ export function ResizableTextarea(props: ResizableTextareaProps) {
     return <ResizableChildren {...props} />
   }
 
-  const { wrapperClassName, resizable = true, variant, color, ...rest } = props
-  return <ResizableField wrapperClassName={wrapperClassName} resizable={resizable} variant={variant} color={color} {...rest} />
+  const { wrapperClassName, resizable = true, variant, accentColor, ...rest } = props
+  return <ResizableField wrapperClassName={wrapperClassName} resizable={resizable} variant={variant} accentColor={accentColor} {...rest} />
 }
 
 // ---------------------------------------------------------------------------
@@ -119,7 +120,7 @@ const MONACO_THEME_PREFIX = 'resizable-textarea'
 const registeredThemes = new Set<string>()
 
 const wrapperVariantClasses = {
-  filled: 'bg-neutral-800 border rounded-lg overflow-hidden',
+  filled: 'bg-neutral-960 border rounded-lg overflow-hidden',
   outline: 'bg-transparent border rounded-lg overflow-hidden',
 }
 
@@ -129,17 +130,19 @@ function ResizableCode({
   language = 'plaintext',
   readOnly = false,
   variant = 'outline',
-  color = 'blue',
+  accentColor,
   resizable = true,
   wrapperClassName,
   minHeight = 80,
   onHeightChange,
 }: ResizableTextareaCodeProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const { height, onResizeStart } = useResize(minHeight, onHeightChange)
 
   return (
     <div
-      className={`relative ${wrapperVariantClasses[variant]} ${FORM_COLORS[color].border} ${wrapperClassName ?? ''}`}
+      className={`relative ${wrapperVariantClasses[variant]} ${FORM_COLORS[effectiveColor].border} ${wrapperClassName ?? ''}`}
       data-resizable-wrapper
       style={{ height: height ?? minHeight }}
     >
@@ -208,10 +211,12 @@ function ResizableChildren({
   wrapperClassName,
   resizable = true,
   variant = 'outline',
-  color = 'blue',
+  accentColor,
   minHeight = 40,
   onHeightChange,
 }: ResizableTextareaChildrenProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const { height, onResizeStart } = useResize(minHeight, onHeightChange)
 
   if (!resizable) {
@@ -220,7 +225,7 @@ function ResizableChildren({
 
   return (
     <div
-      className={`relative ${wrapperVariantClasses[variant]} ${FORM_COLORS[color].border} ${wrapperClassName ?? ''}`}
+      className={`relative ${wrapperVariantClasses[variant]} ${FORM_COLORS[effectiveColor].border} ${wrapperClassName ?? ''}`}
       data-resizable-wrapper
       style={height != null ? { height } : undefined}
     >
@@ -243,12 +248,14 @@ function ResizableField({
   wrapperClassName,
   resizable = true,
   variant = 'outline',
-  color = 'blue',
+  accentColor,
   ...props
 }: ResizableTextareaBaseProps & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'color'>) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const { height, onResizeStart } = useResize(40)
 
-  const className = `w-full rounded-lg focus:outline-none transition-colors ${variantClasses[variant]} ${FORM_COLORS[color].border} ${FORM_COLORS[color].focus} ${props.className ?? ''}`
+  const className = `w-full rounded-lg focus:outline-none transition-colors ${variantClasses[variant]} ${FORM_COLORS[effectiveColor].border} ${FORM_COLORS[effectiveColor].focus} ${props.className ?? ''}`
 
   if (!resizable) {
     return <textarea {...props} className={className} style={{ resize: 'none', ...props.style }} />