@toolr/ui-design 0.1.7 → 0.1.9

package/components/hooks/use-dropdown-portal.ts

@@ -0,0 +1,39 @@
+import { useLayoutEffect, useRef, useState } from 'react'
+
+interface PortalPosition {
+  top: number
+  left: number
+  minWidth: number
+}
+
+/**
+ * Positions a portal-based dropdown menu below its trigger element.
+ * Returns a ref for the trigger container and computed position for the portal.
+ */
+export function useDropdownPortal(isOpen: boolean, margin = 16) {
+  const triggerRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const [position, setPosition] = useState<PortalPosition>({ top: 0, left: 0, minWidth: 0 })
+
+  useLayoutEffect(() => {
+    if (!isOpen || !triggerRef.current) return
+
+    const rect = triggerRef.current.getBoundingClientRect()
+    setPosition({
+      top: rect.bottom + 4,
+      left: rect.left,
+      minWidth: rect.width,
+    })
+  }, [isOpen])
+
+  // Constrain max-height to viewport
+  useLayoutEffect(() => {
+    if (!isOpen || !menuRef.current) return
+    const rect = menuRef.current.getBoundingClientRect()
+    menuRef.current.style.maxHeight = `${window.innerHeight - rect.top - margin}px`
+    menuRef.current.style.overflowY = 'auto'
+    menuRef.current.style.overscrollBehavior = 'contain'
+  }, [isOpen, margin, position])
+
+  return { triggerRef, menuRef, position }
+}

package/components/hooks/use-modal-behavior.ts

@@ -1,9 +1,9 @@
-import { useEffect } from 'react'
+import { useEffect, type RefObject } from 'react'
 
 /**
- * Shared modal behavior: Escape key to close + body overflow lock.
+ * Shared modal behavior: Escape key to close + body overflow lock + focus trap.
  */
-export function useModalBehavior(isOpen: boolean, onClose: () => void): void {
+export function useModalBehavior(isOpen: boolean, onClose: () => void, containerRef?: RefObject<HTMLElement | null>): void {
   // Escape key handler
   useEffect(() => {
     if (!isOpen) return
@@ -21,4 +21,33 @@ export function useModalBehavior(isOpen: boolean, onClose: () => void): void {
     document.body.style.overflow = 'hidden'
     return () => { document.body.style.overflow = prev }
   }, [isOpen])
+
+  // Focus trap: keep Tab/Shift+Tab within the modal
+  useEffect(() => {
+    if (!isOpen || !containerRef?.current) return
+    const container = containerRef.current
+
+    // Auto-focus first focusable element
+    const focusable = container.querySelectorAll<HTMLElement>(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )
+    if (focusable.length > 0) focusable[0].focus()
+
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+      const nodes = container.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+      if (nodes.length === 0) return
+      const first = nodes[0]
+      const last = nodes[nodes.length - 1]
+      if (e.shiftKey) {
+        if (document.activeElement === first) { e.preventDefault(); last.focus() }
+      } else {
+        if (document.activeElement === last) { e.preventDefault(); first.focus() }
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [isOpen, containerRef])
 }

package/components/lib/accent-context.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react'
+import type { FormColor } from './form-colors.ts'
+
+const AccentColorContext = createContext<FormColor | undefined>(undefined)
+
+export const AccentColorProvider = AccentColorContext.Provider
+
+export function useAccentColor(): FormColor | undefined {
+  return useContext(AccentColorContext)
+}

package/components/lib/{ai-tools.tsx → coding-agents.tsx}

@@ -1,4 +1,8 @@
-export const AI_TOOL_LOGOS = {
+import { useAccentColor } from './accent-context.ts'
+import { cn } from './cn.ts'
+import { FORM_COLORS, type FormColor } from './form-colors.ts'
+
+export const CODING_AGENT_LOGOS = {
   claude: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAJFBMVEVHcEzZd1fZd1fZd1fZd1fad1jZd1fZd1fZd1fZd1fZd1fZd1deZDooAAAADHRSTlMA//F3mhLfyjpWsiMDGU5mAAABH0lEQVQokXVSWXbEIAzDuw33v28FJCnpTP3BA6+yRGvbLK39a0F9RUvHZ5CIazZwkm+VpCi1nZP1GpJEnq2NdabzU594N0XpzInRhq/7jvm8wsOjFfVmcQG4guTWZKYL8HSiA1XFHDjgHMqCpKfpNPgIXiZVVvSJ9yazOJARxBiYf/ZMoIUxrYGjRHs/di2nbdzDZxIb1maPriold3QlyFJCAonMd08A7/WhkN19PWDolSeiXU7URWPm8S3ewMCuvGpB+kigVXvWZKlgIVycF0Hjl6DIoVRCGKz9pE8W0QKXkgkIEmjzUDuh11TSuVkn348DLHs1Y7/kzTi+ksX8GLn0wBRrdvCQS949C43fstj6FhfM8Unfqqwv3gf3+/kDMJgHC0kwnjEAAAAASUVORK5CYII=',
   copilot: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHJ4PSI2IiBmaWxsPSIjMWYxZjFmIi8+PHBhdGggZD0iTTE0IDVjLTQuOTcgMC05IDQuMDMtOSA5IDAgMy45NyAyLjU2IDcuMzQgNi4xMiA4LjUzLjQ1LjA4LjYxLS4xOS42MS0uNDN2LTEuNjdjLTIuNDkuNTQtMy4wMS0xLjA2LTMuMDEtMS4wNi0uNDEtMS4wNC0uOTktMS4zMS0uOTktMS4zMS0uODEtLjU2LjA2LS41NC4wNi0uNTQuOS4wNiAxLjM3LjkyIDEuMzcuOTIuOCAxLjM3IDIuMDkuOTggMi42Ljc0LjA4LS41OC4zMS0uOTguNTctMS4yLTEuOTktLjIzLTQuMDgtLjk5LTQuMDgtNC40MiAwLS45OC4zNS0xLjc4LjkyLTIuNDEtLjA5LS4yMy0uNC0xLjE0LjA5LTIuMzcgMCAwIC43NS0uMjQgMi40Ni45Mi43MS0uMiAxLjQ4LS4zIDIuMjQtLjNzMS41My4xIDIuMjQuMzFjMS43MS0xLjE2IDIuNDYtLjkyIDIuNDYtLjkyLjQ5IDEuMjMuMTggMi4xNC4wOSAyLjM3LjU3LjYzLjkyIDEuNDMuOTIgMi40MSAwIDMuNDQtMi4xIDQuMTktNC4wOSA0LjQxLjMyLjI4LjYxLjgyLjYxIDEuNjZ2Mi40NmMwIC4yNC4xNi41MS42MS40M0MxOS40NCAyMS4zNCAyMiAxOC4wMyAyMiAxNGMwLTQuOTctNC4wMy05LTktOVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=',
   codex: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAP1BMVEVHcEwAgPgAgPgAgPcAgPcAgPcAgPcAgPcAgPcAgPcAd/dzsvq+2/2Kvvtfpvru+P/Z6/77/v83lvmnzfwbjPhuMd/TAAAACnRSTlMAF0adyun/9k+LLZxzywAAAXZJREFUeAFkUlmWwyAMC03qZITxAtz/rPNiaLpEvwhJCC1vpMe6PYn2bT3Sckf6e9KF55pux/SDvy9K2uiG7YNx7BQAgDdjP677r/PMXOhN2tOXPkSN2byUkis+XV75vBFA7mqugpE0BKY+M0DNuQIoXgbjlFinv1Zk0wxUAppeEin66ebe4Q2o7J6pq4zG0nLEfTPRDhUUNSlu3fKQeAwH0V5PQlPV1kHFfcZcl20GPAnuuWe1DIjx7HPZw+EkEOJ1cDcBtCBCLBGhGVVlimTQ3FxQbHgEgaoLuoVx6FiG+CQ8h4RWUFYVdHYhy8iDsEfI6IEjvTlrEJgxQq7DQ8W0kbgKgiAu85mPQYiiPZo+LdRnUcesGsZAzxVozp2MBa+q5293bx2gs2kgK2hgvb4b4mpsWgggbS9C+hgMcmtFrRT2ck37e9IAajHjjJ9hz9FO0n201+wn7rP/H76MQzjrIZQwI2deTqz5m4OZhR0oycLMhCQNACpMHlEZrAKTAAAAAElFTkSuQmCC',
@@ -6,9 +10,9 @@ export const AI_TOOL_LOGOS = {
   opencode: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAABl0lEQVRYCe1XS2rDMBAd/70xBJoubJqVF83Sm+YooVcIPUDJTUpOUHIa71Ov0ht4Y/yJ6zEYHFnyZBKKNx4IkTSjNw/pzQhrT4tFDROaPmHuNvVMYPITMCkNVFVFhYz6DcMY9SsJ1HUNmqbB1+EAYRiOgqicSZLAx24HHZYsTkmgC46iCF7X627K+vc8j4wnNVAUBQmiCrhlL3kCIjilCerORTwWgTzP4X27hd/zGcRESOxltYLv4xFs2xbzKOcsAiimn9MJUFymeb21LEvIsqwVnDKbxHGNIgkQl8ymrDC5SADj0Mc1NgGjSW5Z1oAAliz6uMbaoes6vG027V3LNOD7PmAMx1gEENhxHHBdVypC9HGNTQCF2P36yWRrfb9qzDsvFcoD6zMBtgaw48nasWqduh0WAaz1IAjAalqtIZRbdbnA83LZPuFU0r6fRQC73+d+398/GP97H+AmGDAUFsgqwLZ7r92yl7yCOI4hTdO7OOCrSZlGfRnJFE+B9v3im9H34Zg8AQpABOTOSQ1wAbnxM4HJT+APfgFr0DSNhC0AAAAASUVORK5CYII=',
 } as const
 
-export type AiToolKey = 'claude' | 'gemini' | 'codex' | 'copilot' | 'opencode'
+export type CodingAgentKey = 'claude' | 'gemini' | 'codex' | 'copilot' | 'opencode'
 
-export const AI_TOOL_NAMES: Record<AiToolKey, string> = {
+export const CODING_AGENT_NAMES: Record<CodingAgentKey, string> = {
   claude: 'Claude Code',
   gemini: 'Gemini CLI',
   codex: 'Codex CLI',
@@ -16,21 +20,32 @@ export const AI_TOOL_NAMES: Record<AiToolKey, string> = {
   opencode: 'Opencode',
 }
 
-export function AiToolIcon({ tool, size, showName, className, style }: {
-  tool: string
+export function CodingAgentIcon({ agent, size, showName, selected, accentColor, className, style }: {
+  agent: string
   size?: number
   showName?: boolean
+  selected?: boolean
+  accentColor?: FormColor
   className?: string
   style?: React.CSSProperties
 }) {
-  const src = AI_TOOL_LOGOS[tool as keyof typeof AI_TOOL_LOGOS]
+  const contextAccent = useAccentColor()
+  const src = CODING_AGENT_LOGOS[agent as keyof typeof CODING_AGENT_LOGOS]
   if (!src) return null
+
+  const effectiveAccent = accentColor ?? contextAccent ?? 'blue'
+  const accentStyles = selected ? FORM_COLORS[effectiveAccent] : undefined
+
   const img = (
     <img
       src={src}
       alt=""
       {...(size ? { width: size, height: size } : {})}
-      className={className}
+      className={cn(
+        selected && 'rounded-md border-2 p-0.5',
+        selected && accentStyles?.border,
+        className,
+      )}
       style={{ objectFit: 'contain', ...style }}
     />
   )
@@ -38,7 +53,7 @@ export function AiToolIcon({ tool, size, showName, className, style }: {
   return (
     <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
       {img}
-      <span className="text-xs text-neutral-400">{AI_TOOL_NAMES[tool as AiToolKey] ?? tool}</span>
+      <span className="text-xs text-neutral-400">{CODING_AGENT_NAMES[agent as CodingAgentKey] ?? agent}</span>
     </span>
   )
 }

package/components/lib/custom-icons.tsx

@@ -0,0 +1,37 @@
+import { cn } from './cn.ts'
+
+export type CustomIconKey = 'gerrit'
+
+export const CUSTOM_ICON_NAMES: Record<CustomIconKey, string> = {
+  gerrit: 'Gerrit',
+}
+
+const GERRIT_PATH = 'M12.648 2.678l-.245-.266c.004-.004.29-.268.413-.41.121-.146.342-.484.346-.486l.301.195c-.014.016-.234.359-.375.522-.137.165-.428.432-.44.445zm1.577 10.597c-.012-.004-.24-.154-.365-.221-.117-.059-.32-.146-.422-.191l.213-.612-.898-.444-.286.871c-.174.004-.713.053-1.51.389-.959.4-1.688 1.025-1.695 1.029l-.143.125.641.025.02-.016c.006-.006.721-.535 1.119-.705.088-.037.207-.074.33-.105-.209.105-.439.227-.6.32-.199.119-.57.381-.586.393l-.186.129.682.016.018-.01c.012-.008 1.164-.623 1.789-.76l.196-.047c.145-.037.246-.064.422-.064.156 0 .369.021.688.07.398.059.66.158.664.16l.24.094-.322-.436-.012-.008.003-.002zm-8.98-7.298h-.029l-1.006.916v.03c-.016.266.078.52.258.716.182.196.42.309.686.319h.043c.531 0 .965-.413.992-.94.023-.545-.399-1.01-.944-1.041zM5.2 7.808h-.041c-.117-.005-.23-.032-.33-.085.045.008.098.01.148.002.284-.035.481-.291.448-.575-.035-.279-.293-.48-.576-.442-.264.034-.457.267-.446.531-.031-.09-.045-.183-.045-.28l.912-.833c.446.042.79.431.768.882s-.391.8-.842.8H5.2zm9.329-3.725l-.293-.195-.41.265-.395-.285-.301.18.404.291-.416.27.297.18.4-.254.387.28.309-.169-.407-.296M24 19.525c-.213-.209-.418-.416-.629-.627-.48-.488-.957-.984-1.418-1.486-.547-.598-1.082-1.207-1.582-1.844-.225-.283-.441-.58-.646-.881-.254-.387-.469-.795-.668-1.215-.211-.445-.398-.9-.576-1.356.24.21.463.444.664.692.021-.215.041-.43.059-.648l.023-.322c0-.033.012-.066-.008-.096-.016-.029-.033-.051-.053-.075-.121-.149-.264-.282-.406-.413-.189-.181-.387-.36-.584-.533l-.18-.156c-.027-.027-.057-.051-.086-.074-.031-.03-.041-.096-.055-.136l-.154-.479c.607.285 1.109.741 1.578 1.215.004-.219.004-.436 0-.652 0-.114-.002-.229-.008-.346 0-.029.006-.1-.016-.127-.012-.02-.031-.036-.043-.055-.109-.117-.234-.217-.357-.314-.172-.143-.35-.277-.527-.408-.156-.117-.318-.232-.477-.345-.018-.016-.076-.039-.064-.06l.039-.08c.02-.035.014-.045.053-.029l.17.059c.406.156.779.368 1.143.608-.123-.45-.311-.885-.525-1.296-.389-.762-.893-1.468-1.463-2.105-.379-.426-.785-.824-1.219-1.193-.223-.19-.457-.369-.699-.533-.113-.074-.225-.149-.346-.217-.049-.03-.105-.056-.15-.094-.18-.144-.365-.284-.549-.429.238.098.469.21.689.338-.127-.194-.342-.331-.545-.436-.307-.159-.637-.276-.967-.378.113-.12.234-.228.346-.348.113-.12.223-.246.33-.372.127-.15.252-.3.375-.455l-1.156-.726-.48-.303c-.123.246-.277.476-.458.68-.18.203-.391.369-.6.539-.191.156-.379.316-.566.472-.047.04-.092.085-.145.12-.025.021-.096.004-.127.004H10.7c-.297.006-.596.029-.891.068-.058.007-.113.013-.175.008l-.178-.01c-.137-.008-.271-.016-.408-.016-.289-.004-.58 0-.871.025-.244.022-.489.055-.729.112-.238.056-.461.172-.66.312-.193.141-.387.32-.504.53s-.17.456-.213.689c-.135.013-.268.01-.4.016-.141.008-.277.021-.416.039-.27.037-.535.096-.795.18-.496.154-.945.405-1.336.75-.195.181-.377.38-.539.596-.02.025-.037.051-.063.068-.01.009-.027.016-.033.027-.015.027-.033.052-.051.076l-.134.212c-.168.285-.276.595-.383.906l-.045.123.033-.021c-.01.067-.02.135-.025.202l-.008.105v.053l-.066.013c-.135.026-.271.06-.4.101-.12.039-.233.086-.337.15-.105.066-.195.153-.285.239-.318.31-.562.698-.687 1.128-.1.348-.137.735-.059 1.092.021.09.049.188.107.262.074.09.199.126.313.095.131-.036.248-.124.371-.187l.314-.157c.455-.226.93-.446 1.438-.525.035-.005.1.067.131.091.049.037.1.074.148.104.109.069.221.129.334.181.262.114.541.174.818.231.502.105 1.014.171 1.529.18.207.004.416 0 .625-.018.225-.02.451-.049.678-.051.25-.005.496.025.74.055.254.031.51.068.764.105.518.079 1.031.169 1.543.279-.115.18-.227.362-.338.545-.008.013-.072 0-.088 0-.041-.002-.086-.002-.127 0-.074 0-.15.008-.225.019-.211.03-.416.083-.615.156-.49.181-.938.483-1.326.833-.221.195-.43.408-.609.641-.049.064-.094.129-.139.193.105-.023.211-.045.318-.07.061-.016.117-.027.176-.039.021-.008.029-.016.049-.027.219-.203.451-.393.695-.563.111-.08.225-.154.348-.215.166-.083.354-.131.533-.174-.33.18-.678.35-.977.584-.172.139-.328.291-.49.439l.654-.104c.01 0 .014-.004.023-.01l.17-.094c.113-.064.23-.125.346-.186.24-.123.482-.24.732-.34.236-.094.48-.178.732-.225.221-.046.428-.052.648 0 .342.074.67.232.969.414.021.014.035.033.055.014.016-.014.098-.074.09-.092l-.18-.334c-.016-.029-.023-.049-.051-.066l-.131-.077c-.176-.104-.348-.21-.51-.331-.037-.023-.078-.039-.082-.089-.004-.046.014-.093.029-.136.033-.09.08-.169.131-.248.033-.058.072-.111.109-.166.014-.018.01-.021.031-.014l.119.034c.236.077.469.159.711.22.27.068.545.123.82.176l.048.01c-.056-.03-.091-.09-.132-.136-.023-.03-.035-.05-.074-.06l-.105-.02c-.074-.016-.148-.03-.225-.049-.262-.057-.525-.119-.777-.209-.375-.13-.758-.232-1.145-.322-.486-.107-.977-.194-1.465-.275-.25-.041-.498-.074-.75-.109-.246-.034-.496-.07-.746-.087-.539-.034-1.074.087-1.615.081-.365-.004-.734-.055-1.096-.105l-.068-.009c.252-.093.5-.188.75-.285.236-.095.471-.192.705-.289.127-.052.25-.105.373-.157.113-.051.225-.1.328-.17.408-.279.676-.727.975-1.109.273-.361.586-.7.99-.908.129-.066.262-.117.4-.156-.283-.439-.549-.93-.623-1.455.029.012.061.025.094.037.035.012.064.016.072.045l.029.135c.026.091.053.176.086.262.072.191.16.375.26.551.219.396.484.766.766 1.12.539.686 1.145 1.305 1.736 1.941.145.158.275.324.41.492.15.187.303.375.457.561.121.141.234.285.356.426l.094.112c.016.018.037.026.061.036.604.3 1.213.6 1.822.895.434.209.869.42 1.309.623.236.109.471.219.711.32.029.014.066.029.098.039.016.01.029.016.047.023l.016.049c.027.072.051.145.076.217.049.141.098.279.148.416.33.912.695 1.814 1.145 2.676.346.656.715 1.301 1.09 1.939.4.68.811 1.354 1.225 2.025.332.535.666 1.072 1.008 1.605.146.227.289.459.439.688l.063.094.775-1.141.191-.283c.008-.006.082-.102.076-.109l-.156-.24c-.291-.451-.584-.898-.871-1.35l-.828-1.283-.105-.166.656.799 1.115 1.35c.121.146.236.289.354.438.219-.402.439-.801.662-1.201.086-.164.176-.33.266-.492M12.13 1.915c.309-.246.563-.563.757-.906l1.178.743.18.112c-.246.3-.496.604-.775.873-.035.034-.074.069-.107.104-.021.025-.047.051-.07.075l-.033.038c-.023-.007-.045-.016-.068-.02-.146-.041-.289-.08-.436-.111-.292-.066-.589-.117-.886-.152-.191-.021-.385-.04-.578-.058.275-.234.557-.467.838-.698m-1.754 1.37c.232-.096.482-.15.73-.191.49-.082.994-.094 1.489-.04.354.038.701.108 1.041.21l-.141.115-.225-.061c-.141-.029-.281-.06-.422-.082-.246-.037-.497-.06-.749-.065-.461-.008-.926.042-1.371.159-.301.078-.604.188-.879.332-.286.154-.555.346-.78.582-.134.137-.257.289-.359.455-.057.09-.105.18-.15.275-.024.047-.043.096-.061.144l-.029.075c-.004.015-.008.026-.012.038L8.39 5.22l-.082-.011c.234-.719.763-1.286 1.418-1.649.207-.114.426-.218.65-.279m-3.93.374c.266-.381.686-.649 1.139-.743.502-.101 1.016-.119 1.525-.107-.525.131-1.05.326-1.488.652-.34.075-.664.24-.934.459-.09.071-.17.15-.246.236-.035.037-.066.075-.097.116-.014.015-.027.03-.037.049h-.084c.023-.135.055-.27.098-.4.029-.09.064-.18.119-.26m.882.056c-.145.143-.27.303-.391.469-.047.069-.098.153-.18.191-.085.039-.194-.005-.28-.031.224-.279.521-.494.851-.629M2.308 6.585c.08-.16.182-.315.275-.465.016-.027.053-.046.074-.063.049-.034.096-.069.143-.106.309-.225.621-.446.939-.656.166-.107.33-.213.502-.307.182-.101.369-.18.565-.244.347-.112.707-.189 1.068-.244.174-.025.361-.057.531-.015-.33.188-.658.375-.99.558-.342.191-.689.367-1.035.552-.332.18-.66.375-.981.577-.336.206-.67.419-1.002.629-.08.051-.16.105-.24.155.045-.125.09-.251.151-.371m1.009 3.056c-.029.056-.134.042-.187.042-.094 0-.186 0-.279.006-.258.015-.51.06-.758.138-.475.147-.922.375-1.365.604-.1.055-.203.135-.316.162-.061.015-.131-.008-.166-.063-.035-.061-.053-.131-.064-.198-.027-.12-.035-.245-.033-.368 0-.33.076-.66.215-.96.096-.21.221-.401.371-.574.15-.175.326-.351.539-.45.355-.162.775-.213 1.164-.235.072-.005.145-.007.217-.007.1 0 .217-.016.311.019.074.027.121.105.15.173.045.105.074.225.1.336.061.26.123.525.145.791.01.119.016.239.004.359-.009.073-.014.156-.05.223m2.829-1.973c-.194.123-.403.218-.616.298-.215.077-.436.144-.66.181-.097.013-.195.025-.293.021-.101-.003-.193-.036-.293-.067-.195-.063-.393-.13-.57-.233-.064-.039-.135-.084-.174-.15-.029-.052-.029-.116-.023-.174.012-.231.094-.458.203-.66.187-.343.482-.612.84-.775.879-.396 1.865-.029 2.611.49l.08.061c-.154.165-.311.321-.473.477-.199.189-.404.381-.634.531M8.31 5.739c-.475-.203-.926-.458-1.356-.738.449.188.934.3 1.414.37.258.037.521.072.781.08.281.008.564-.021.84-.075.545-.103 1.068-.305 1.566-.551.494-.245.964-.537 1.413-.859.217-.155.43-.315.633-.487.021-.016.174-.161.184-.154l.041.031.537.416c.328.254.658.51.988.762-.906.326-1.826.629-2.752.904-.519.156-1.038.301-1.565.42-.412.098-.834.189-1.256.21-.507.022-1.006-.135-1.47-.33m8.85 3.942c.076.021.145.045.215.067l.094.033c.016.006.031.015.045.02l.021.06c.045.146.09.289.139.432-.15-.127-.301-.254-.451-.379l-.09-.074c-.021-.016-.045-.021-.029-.046l.059-.114m-.671 1.444l.035-.063.027-.046c.012-.018.008-.022.029-.012.129.054.258.111.385.17.24.11.475.23.703.364.107.065.217.135.322.205l.15.105.074.057c.033.027.041.063.057.102.104.282.219.564.338.844.078.189.162.379.248.566-.293-.371-.621-.715-.957-1.045-.346-.346-.705-.671-1.078-.981l-.323-.264m3.746 6.42l-.121.09.008.016.063.094.271.42.904 1.402c.311.48.621.963.932 1.445l.309.48.084.133c.004.004.029.041.029.045-.26.385-.523.77-.783 1.154-.027.037-.051.076-.074.111-.24-.373-.479-.744-.715-1.117-.4-.635-.795-1.277-1.184-1.916-.434-.709-.855-1.418-1.264-2.141-.383-.674-.75-1.361-1.059-2.076-.301-.697-.563-1.408-.811-2.121.486.193.98.367 1.48.521.145.045.289.09.436.127l.063.018c.008 0 .014-.039.018-.049.018-.064.031-.129.045-.195.031-.125.051-.254.074-.381.205.428.436.844.701 1.236.215.314.445.621.686.92.521.656 1.074 1.283 1.643 1.898.463.494.934.984 1.408 1.465l.389.389c.006.006.039.031.037.041l-.031.053-.148.275-.588 1.068c-.18-.219-.361-.436-.541-.658l-1.125-1.361c-.314-.387-.637-.773-.953-1.16l-.186-.225'
+
+const CUSTOM_ICON_SVGS: Record<CustomIconKey, { path: string; fill: boolean }> = {
+  gerrit: { path: GERRIT_PATH, fill: true },
+}
+
+export function CustomIcon({ icon, size = 16, className }: {
+  icon: string
+  size?: number
+  className?: string
+}) {
+  const key = icon as CustomIconKey
+  const svg = CUSTOM_ICON_SVGS[key]
+  if (!svg) return null
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={svg.fill ? 'currentColor' : 'none'}
+      stroke={svg.fill ? 'none' : 'currentColor'}
+      className={cn(className)}
+    >
+      <path d={svg.path} />
+    </svg>
+  )
+}

package/components/lib/git-providers.tsx

@@ -0,0 +1,39 @@
+import { iconMap } from '../ui/icon-button.tsx'
+import { CustomIcon } from './custom-icons.tsx'
+import { cn } from './cn.ts'
+
+export type GitProviderKey = 'github' | 'gitlab' | 'gerrit'
+
+export const GIT_PROVIDER_NAMES: Record<GitProviderKey, string> = {
+  github: 'GitHub',
+  gitlab: 'GitLab',
+  gerrit: 'Gerrit',
+}
+
+const GIT_PROVIDER_COLORS: Record<GitProviderKey, string> = {
+  github: 'text-neutral-300',
+  gitlab: 'text-orange-400',
+  gerrit: 'text-green-400',
+}
+
+const GithubIcon = iconMap['github']
+const GitlabIcon = iconMap['gitlab']
+
+export function GitProviderIcon({ provider, size = 16, className }: {
+  provider: string
+  size?: number
+  className?: string
+}) {
+  const key = provider as GitProviderKey
+  const color = GIT_PROVIDER_COLORS[key]
+  if (!color) return null
+
+  if (key === 'gerrit') {
+    return <CustomIcon icon="gerrit" size={size} className={cn(color, className)} />
+  }
+
+  const Icon = key === 'github' ? GithubIcon : key === 'gitlab' ? GitlabIcon : null
+  if (!Icon) return null
+
+  return <Icon className={cn(color, className)} style={{ width: size, height: size }} />
+}

package/components/lib/theme-engine.ts

@@ -2,7 +2,7 @@ import type { FormColor } from './form-colors.ts'
 
 /* ── Neutral scale types ──────────────────────────────────── */
 
-export const SCALE_KEYS = ['black', '950', '900', '850', '800', '750', '700', '600', '500', '400', '300', '200'] as const
+export const SCALE_KEYS = ['black', '990', '980', '970', '960', '950', '940', '930', '920', '910', '900', '850', '800', '750', '700', '650', '600', '550', '500', '450', '400', '350', '300', '250', '200', '150', '100', '090', '080', '070', '060', '050', '040', '030', '020', '010'] as const
 export type ScaleKey = (typeof SCALE_KEYS)[number]
 
 /* ── Theme definitions ────────────────────────────────────── */
@@ -13,8 +13,8 @@ export const DARK_THEMES: ThemeId[] = ['dark']
 export const LIGHT_THEMES: ThemeId[] = ['light']
 
 export const BASE_THEMES: Record<ThemeId, { label: string; maxSat: number; lightness: Record<ScaleKey, number> }> = {
-  dark:  { label: 'Dark',  maxSat: 22, lightness: { black: 0,  '950': 5,  '900': 10, '850': 12, '800': 15, '750': 18, '700': 22, '600': 30, '500': 46, '400': 64, '300': 83, '200': 90 } },
-  light: { label: 'Light', maxSat: 15, lightness: { black: 98, '950': 96, '900': 93, '850': 91, '800': 88, '750': 85, '700': 82, '600': 65, '500': 50, '400': 38, '300': 22, '200': 12 } },
+  dark:  { label: 'Dark',  maxSat: 22, lightness: { black: 0, '990': 2, '980': 4, '970': 6, '960': 8, '950': 10, '940': 10.5, '930': 11, '920': 11.5, '910': 12, '900': 13, '850': 15, '800': 18, '750': 20, '700': 22, '650': 20, '600': 28, '550': 36, '500': 46, '450': 55, '400': 64, '350': 74, '300': 83, '250': 87, '200': 90, '150': 93, '100': 94, '090': 95, '080': 96, '070': 97, '060': 97.5, '050': 98, '040': 98.5, '030': 99, '020': 99.3, '010': 99.6 } },
+  light: { label: 'Light', maxSat: 15, lightness: { black: 98, '990': 97, '980': 96, '970': 95, '960': 94, '950': 93, '940': 92.5, '930': 92, '920': 91.5, '910': 91, '900': 90, '850': 88, '800': 85, '750': 83, '700': 82, '650': 74, '600': 65, '550': 56, '500': 50, '450': 44, '400': 38, '350': 30, '300': 22, '250': 17, '200': 12, '150': 10, '100': 8, '090': 7, '080': 6, '070': 5, '060': 4, '050': 3, '040': 2.5, '030': 2, '020': 1.5, '010': 1 } },
 }
 
 /* ── Accent definitions ───────────────────────────────────── */
@@ -44,7 +44,9 @@ export const ACCENT_DEFS: AccentDef[] = [
 /* ── Color utilities ──────────────────────────────────────── */
 
 export function satCurve(l: number): number {
-  return Math.min(l / 10, 1) * Math.max(0, 1 - l / 115)
+  const ramp = Math.min(l / 10, 1)
+  if (l <= 50) return ramp
+  return ramp * Math.max(0.5, 1 - (l - 50) / 130)
 }
 
 export function hslToHex(h: number, s: number, l: number): string {
@@ -63,10 +65,10 @@ function alphaToHex(alpha: number): string {
 
 /* ── Dim (glass surfaces) ────────────────────────────────── */
 
-export const SURFACE_KEYS = ['950', '900', '850', '800', '750'] as const
+export const SURFACE_KEYS = ['990', '980', '970', '960', '950', '940', '930', '920', '910', '900', '850', '800', '750'] as const
 export type SurfaceKey = (typeof SURFACE_KEYS)[number]
 
-export const DEFAULT_DIMS: Record<SurfaceKey, number> = { '950': 1, '900': 2, '850': 3, '800': 4, '750': 5 }
+export const DEFAULT_DIMS: Record<SurfaceKey, number> = { '990': 1, '980': 2, '970': 3, '960': 4, '950': 5, '940': 6, '930': 7, '920': 8, '910': 9, '900': 10, '850': 15, '800': 20, '750': 25 }
 export const DEFAULT_OUTLINE = 30
 
 /* ── Scale generation ─────────────────────────────────────── */
@@ -74,6 +76,12 @@ export const DEFAULT_OUTLINE = 30
 export function generateScale(theme: ThemeId, hue: number | null, maxSat: number, dims: Record<SurfaceKey, number> = DEFAULT_DIMS, outline: number = DEFAULT_OUTLINE): Record<ScaleKey, string> {
   const lightness = BASE_THEMES[theme].lightness
   const glassBase = hue !== null ? hslToHex(hue, 80, 50) : null
+  const accentRgb = glassBase ? [parseInt(glassBase.slice(1, 3), 16), parseInt(glassBase.slice(3, 5), 16), parseInt(glassBase.slice(5, 7), 16)] : null
+  // Steps from white (end of scale) — used for alpha stepping
+  const stepsFromWhite: Partial<Record<ScaleKey, number>> = {}
+  for (let i = SCALE_KEYS.length - 1, step = 1; i >= 0; i--, step++) {
+    stepsFromWhite[SCALE_KEYS[i]] = step
+  }
   const result = {} as Record<ScaleKey, string>
 
   for (const key of SCALE_KEYS) {
@@ -92,12 +100,32 @@ export function generateScale(theme: ThemeId, hue: number | null, maxSat: number
       continue
     }
 
-    // Solid color (text, black, fallbacks)
+    // Neutral/achromatic: solid grayscale
     if (hue === null || maxSat === 0) {
       const g = Math.round(255 * l / 100).toString(16).padStart(2, '0')
       result[key] = `#${g}${g}${g}`
+    } else if (key === 'black') {
+      result[key] = '#000000'
+    } else if (l <= 50) {
+      // Dark-to-mid: accent at increasing opacity
+      result[key] = `${glassBase}${alphaToHex(l / 50)}`
     } else {
-      result[key] = hslToHex(hue, maxSat * satCurve(l), l)
+      // Light half: cross-fade — accent fades out, white fades in
+      const t = (l - 50) / 50
+      const aa = 1 - t // accent alpha: 1→0
+      const wa = t     // white alpha: 0→1
+      const ta = wa + aa * (1 - wa) // composite alpha
+      const [ar, ag, ab] = accentRgb!
+      const r = Math.round((255 * wa + ar * aa * (1 - wa)) / ta)
+      const g = Math.round((255 * wa + ag * aa * (1 - wa)) / ta)
+      const b = Math.round((255 * wa + ab * aa * (1 - wa)) / ta)
+      const hex = (c: number) => Math.min(255, c).toString(16).padStart(2, '0')
+
+      // White variants (010–090): 5% opacity step per position
+      // 100–500: natural cross-fade alpha for smooth transition
+      const keyNum = parseInt(key)
+      const alpha = (keyNum > 0 && keyNum <= 90) ? 1 - stepsFromWhite[key]! * 0.05 : ta
+      result[key] = `#${hex(r)}${hex(g)}${hex(b)}${alphaToHex(alpha)}`
     }
   }
   return result
@@ -128,8 +156,29 @@ export function applyTheme(themeId: ThemeId, accentHue: number | null, dims: Rec
     root.style.setProperty(prop, scale[key])
   }
   root.style.setProperty('--color-white', light ? '#0a0a0a' : '#ffffff')
-  root.style.setProperty('--color-neutral-100', light ? '#1a1a1a' : '#f0f0f0')
-  root.style.setProperty('--color-neutral-50', light ? '#0f0f0f' : '#fafafa')
+
+  // Text-range neutrals (600→010): white+alpha for dark, black+alpha for light
+  // Surfaces/borders (990→650, 700) keep their accent tint from the scale
+  const lightness = BASE_THEMES[themeId].lightness
+  const TEXT_KEYS: ScaleKey[] = ['600', '550', '500', '450', '400', '350', '300', '250', '200', '150', '100', '090', '080', '070', '060', '050', '040', '030', '020', '010']
+  for (const key of TEXT_KEYS) {
+    const l = lightness[key]
+    const a = light ? (100 - l) / 100 : l / 100
+    root.style.setProperty(`--color-neutral-${key}`, `rgba(${light ? '0, 0, 0' : '255, 255, 255'}, ${a.toFixed(2)})`)
+  }
+
+  // Semantic text tokens: white+alpha for dark, black+alpha for light
+  const tb = light ? '0, 0, 0' : '255, 255, 255'
+  root.style.setProperty('--foreground', `rgba(${tb}, 0.83)`)
+  root.style.setProperty('--surface-foreground', `rgba(${tb}, 0.83)`)
+  root.style.setProperty('--popover-foreground', `rgba(${tb}, 0.83)`)
+  root.style.setProperty('--muted-foreground', `rgba(${tb}, 0.46)`)
+  root.style.setProperty('--text-primary', `rgba(${tb}, 0.83)`)
+  root.style.setProperty('--text-secondary', `rgba(${tb}, 0.46)`)
+  root.style.setProperty('--text-tertiary', `rgba(${tb}, 0.64)`)
+  root.style.setProperty('--text-emphasis', light ? '#0a0a0a' : '#ffffff')
+  root.style.setProperty('--primary-foreground', light ? '#0a0a0a' : '#ffffff')
+  root.style.setProperty('--destructive-foreground', light ? '#0a0a0a' : '#ffffff')
 
   // Surface hover: accent glass at 10% for visible hover states
   const glassBase = accentHue !== null ? hslToHex(accentHue, 80, 50) : null

package/components/lib/toolr-brand.tsx

@@ -1,17 +1,31 @@
+import { ACCENT_DEFS } from './theme-engine.ts'
+import { useAccentColor } from './accent-context.ts'
+
 export type ToolrAppId = 'toolr' | 'configr' | 'reviewr' | 'vibr' | 'learnr' | 'planr' | 'seedr'
 
-export const TOOLR_APPS: Record<ToolrAppId, { name: string; color: string }> = {
-  toolr: { name: 'Toolr', color: '#60a5fa' },
-  configr: { name: 'Configr', color: '#a78bfa' },
-  reviewr: { name: 'Reviewr', color: '#fb923c' },
-  learnr: { name: 'Learnr', color: '#facc15' },
-  seedr: { name: 'Seedr', color: '#2dd4bf' },
-  planr: { name: 'Planr', color: '#f472b6' },
-  vibr: { name: 'Vibr', color: '#f87171' },
+// Accent color ID per app — resolved to hex via ACCENT_DEFS at render time
+export const TOOLR_APPS: Record<ToolrAppId, { name: string; accent: string }> = {
+  toolr:   { name: 'Toolr',   accent: 'blue' },    // #3b82f6
+  configr: { name: 'Configr', accent: 'violet' },   // #8b5cf6
+  reviewr: { name: 'Reviewr', accent: 'orange' },   // #f97316
+  learnr:  { name: 'Learnr',  accent: 'yellow' },   // #eab308
+  seedr:   { name: 'Seedr',   accent: 'cyan' },     // #06b6d4
+  planr:   { name: 'Planr',   accent: 'pink' },     // #ec4899 (not in ACCENT_DEFS, fallback hex)
+  vibr:    { name: 'Vibr',    accent: 'red' },      // #ef4444
+}
+
+const ACCENT_HEX_MAP: Record<string, string> = Object.fromEntries(ACCENT_DEFS.map((a) => [a.id, a.dotColor]))
+// Fallback hex for accents not in ACCENT_DEFS
+ACCENT_HEX_MAP['pink'] = '#ec4899'
+
+/** Resolve an accent ID to its hex color */
+export function resolveAccentHex(accent: string): string {
+  return ACCENT_HEX_MAP[accent] ?? ACCENT_HEX_MAP['blue']
 }
 
 export function ToolrAppLogo({ app, color: colorOverride, size, className }: { app?: ToolrAppId; color?: string; size?: number; className?: string }) {
-  const color = colorOverride ?? (app ? TOOLR_APPS[app]?.color : undefined) ?? '#60a5fa'
+  const accentColor = useAccentColor()
+  const color = colorOverride ?? (app ? resolveAccentHex(TOOLR_APPS[app]?.accent) : undefined) ?? (accentColor ? resolveAccentHex(accentColor) : undefined) ?? ACCENT_HEX_MAP['blue']
   return (
     <svg
       {...(size ? { width: size, height: size } : {})}

package/components/sections/captured-issues/captured-issues-panel.tsx

@@ -28,6 +28,8 @@ import { cn } from '../../lib/cn.ts'
 import { Input } from '../../ui/input.tsx'
 import { ResizableTextarea } from '../../ui/resizable-textarea.tsx'
 import { IconButton } from '../../ui/icon-button.tsx'
+import { useAccentColor, AccentColorProvider } from '../../lib/accent-context.ts'
+import type { FormColor } from '../../lib/form-colors.ts'
 import { useCapturedIssues } from './use-captured-issues.ts'
 import type { CapturedError, CapturedIssuesApi } from './types.ts'
 
@@ -40,6 +42,7 @@ export interface CapturedIssuesPanelProps {
   onDismiss?: () => void
   /** Called after successful submission */
   onSubmitSuccess?: (issueId?: string) => void
+  accentColor?: FormColor
   className?: string
 }
 
@@ -48,8 +51,11 @@ export function CapturedIssuesPanel({
   errors,
   onDismiss,
   onSubmitSuccess,
+  accentColor,
   className,
 }: CapturedIssuesPanelProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const {
     errorCount,
     warnCount,
@@ -68,9 +74,10 @@ export function CapturedIssuesPanel({
   const hasErrors = errorCount > 0 || warnCount > 0
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <div className={cn('space-y-6', className)}>
       {hasErrors ? (
-        <div className="bg-neutral-900 border border-neutral-700 rounded-lg p-4 space-y-4">
+        <div className="bg-neutral-980 border border-neutral-700 rounded-lg p-4 space-y-4">
           {/* Error Summary */}
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
@@ -94,7 +101,7 @@ export function CapturedIssuesPanel({
           {/* Error List */}
           <div className="space-y-2">
             <p className="text-md text-neutral-400">Captured Errors</p>
-            <div className="max-h-48 overflow-y-auto bg-neutral-950 border border-neutral-700 rounded-lg p-3 space-y-1">
+            <div className="max-h-48 overflow-y-auto bg-neutral-990 border border-neutral-700 rounded-lg p-3 space-y-1">
               {errors.map((error) => (
                 <div key={error.fingerprint} className="text-sm font-mono break-words">
                   <span className={cn('mr-2 shrink-0', error.level === 'warning' ? 'text-yellow-400' : 'text-red-400')}>
@@ -119,7 +126,7 @@ export function CapturedIssuesPanel({
               onChange={(e) => setDescription(e.target.value)}
               placeholder="What were you doing when this happened?"
               rows={3}
-              className="w-full px-3 py-1.5 bg-neutral-800 border border-neutral-600 rounded-lg text-neutral-300 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none text-md"
+              className="w-full px-3 py-1.5 bg-neutral-960 border border-neutral-600 rounded-lg text-neutral-300 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none text-md"
             />
             <Input
               type="text"
@@ -136,6 +143,7 @@ export function CapturedIssuesPanel({
               onClick={handleDismiss}
               disabled={isSubmitting}
               size="sm"
+              accentColor="red"
               tooltip={{ title: 'Dismiss', description: 'Ignore these errors' }}
               tooltipPosition="top"
             />
@@ -150,14 +158,14 @@ export function CapturedIssuesPanel({
               onClick={handleSubmit}
               disabled={isSubmitting}
               size="sm"
-              color="red"
+              accentColor="cyan"
               tooltip={{ title: 'Send Report', description: 'Submit error report to developers' }}
               tooltipPosition="top"
             />
           </div>
         </div>
       ) : (
-        <div className="bg-neutral-900 border border-neutral-700 rounded-lg p-6">
+        <div className="bg-neutral-980 border border-neutral-700 rounded-lg p-6">
           <div className="flex items-center gap-4">
             <div className="w-10 h-10 bg-green-500/10 rounded-lg flex items-center justify-center">
               <Check className="w-5 h-5 text-green-400" />
@@ -172,9 +180,9 @@ export function CapturedIssuesPanel({
 
       {/* Previously Reported */}
       {submittedErrors.length > 0 && (
-        <div className="bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden">
+        <div className="bg-neutral-980 border border-neutral-700 rounded-lg overflow-hidden">
           <details className="group">
-            <summary className="flex items-center justify-between p-4 cursor-pointer hover:bg-neutral-800 transition-colors">
+            <summary className="flex items-center justify-between p-4 cursor-pointer hover:bg-neutral-960 transition-colors">
               <div className="flex items-center gap-2">
                 <Check className="w-4 h-4 text-green-400" />
                 <span className="text-md text-neutral-300">Previously Reported</span>
@@ -186,7 +194,7 @@ export function CapturedIssuesPanel({
               {submittedErrors.map((error) => (
                 <div
                   key={error.fingerprint}
-                  className="flex items-start gap-3 p-3 bg-neutral-950 border border-neutral-700 rounded-lg"
+                  className="flex items-start gap-3 p-3 bg-neutral-990 border border-neutral-700 rounded-lg"
                 >
                   <Check className="w-4 h-4 text-green-400 mt-0.5 shrink-0" />
                   <div className="flex-1 min-w-0">
@@ -210,5 +218,6 @@ export function CapturedIssuesPanel({
         </div>
       )}
     </div>
+    </AccentColorProvider>
   )
 }