@toolr/ui-design 0.1.0

package/components/sections/captured-issues/use-captured-issues.ts

@@ -0,0 +1,111 @@
+/**
+ * useCapturedIssues — State management hook for captured issues panel
+ *
+ * Part of: Sections > Captured Issues
+ *
+ * Manages form state (title, description, email), submission flow,
+ * dismiss functionality, and previously reported errors loading.
+ *
+ * AI agent notes:
+ * - This hook is used internally by CapturedIssuesPanel but can also
+ *   be used standalone for custom UIs
+ * - All backend calls go through the CapturedIssuesApi interface
+ * - The hook resets form fields on successful submission
+ * - Previously reported errors are loaded once on mount
+ */
+
+import { useState, useCallback, useEffect } from 'react'
+import type { CapturedError, CapturedIssuesApi, SubmittedError } from './types.ts'
+
+export interface UseCapturedIssuesOptions {
+  api: CapturedIssuesApi
+  errors: CapturedError[]
+  onDismiss?: () => void
+  onSubmitSuccess?: (issueId?: string) => void
+}
+
+export interface UseCapturedIssuesReturn {
+  errorCount: number
+  warnCount: number
+  title: string
+  setTitle: (title: string) => void
+  description: string
+  setDescription: (desc: string) => void
+  email: string
+  setEmail: (email: string) => void
+  isSubmitting: boolean
+  submitError: string | null
+  submittedErrors: SubmittedError[]
+  handleSubmit: () => Promise<void>
+  handleDismiss: () => Promise<void>
+}
+
+export function useCapturedIssues(options: UseCapturedIssuesOptions): UseCapturedIssuesReturn {
+  const { api, errors, onDismiss, onSubmitSuccess } = options
+
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [email, setEmail] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [submitError, setSubmitError] = useState<string | null>(null)
+  const [submittedErrors, setSubmittedErrors] = useState<SubmittedError[]>([])
+
+  const errorCount = errors.filter((e) => e.level === 'error').length
+  const warnCount = errors.filter((e) => e.level === 'warning').length
+
+  useEffect(() => {
+    api.getSubmittedErrors().then(setSubmittedErrors).catch(() => {})
+  }, [api])
+
+  const handleSubmit = useCallback(async () => {
+    setIsSubmitting(true)
+    setSubmitError(null)
+    try {
+      const result = await api.submitIssue({
+        title: title.trim(),
+        description: description.trim(),
+        email: email.trim(),
+        errors,
+      })
+      if (result.success) {
+        setTitle('')
+        setDescription('')
+        setEmail('')
+        onSubmitSuccess?.(result.issueId)
+        // Refresh submitted errors list
+        api.getSubmittedErrors().then(setSubmittedErrors).catch(() => {})
+      } else {
+        setSubmitError('Failed to submit issue')
+      }
+    } catch (err) {
+      setSubmitError(`An error occurred: ${err}`)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }, [api, title, description, email, errors, onSubmitSuccess])
+
+  const handleDismiss = useCallback(async () => {
+    try {
+      await api.dismissErrors()
+      onDismiss?.()
+    } catch (err) {
+      setSubmitError(`Failed to dismiss: ${err}`)
+    }
+  }, [api, onDismiss])
+
+  return {
+    errorCount,
+    warnCount,
+    title,
+    setTitle,
+    description,
+    setDescription,
+    email,
+    setEmail,
+    isSubmitting,
+    submitError,
+    submittedErrors,
+    handleSubmit,
+    handleDismiss,
+  }
+}

package/components/sections/golden-snapshots/file-diff-viewer.tsx

@@ -0,0 +1,420 @@
+import type { ReactNode } from 'react'
+import {
+  ChevronRight,
+  ChevronDown,
+  Folder,
+  Columns2,
+  Rows2,
+  ChevronsUpDown,
+  ChevronsDownUp,
+  Save,
+  RotateCcw,
+  FileCode,
+} from 'lucide-react'
+import { DiffEditor } from '@monaco-editor/react'
+import { IconButton } from '../../ui/icon-button.tsx'
+import type { FileDiffInfo } from './types.ts'
+import type { DiffTreeNode } from './use-golden-sync.ts'
+import { getLanguage, type UseGoldenSyncReturn } from './use-golden-sync.ts'
+
+// --- Color palette for component tree nodes ---
+
+interface ComponentColorSet {
+  text: string
+  pillBg: string
+  bg: string
+  hoverBg: string
+  border: string
+  line: string
+}
+
+const COMPONENT_COLORS: ComponentColorSet[] = [
+  { text: 'text-blue-400', pillBg: 'bg-blue-500/20', bg: 'bg-blue-500/5', hoverBg: 'hover:bg-blue-500/10', border: 'border-blue-500/40', line: 'border-blue-500/20' },
+  { text: 'text-purple-400', pillBg: 'bg-purple-500/20', bg: 'bg-purple-500/5', hoverBg: 'hover:bg-purple-500/10', border: 'border-purple-500/40', line: 'border-purple-500/20' },
+  { text: 'text-teal-400', pillBg: 'bg-teal-500/20', bg: 'bg-teal-500/5', hoverBg: 'hover:bg-teal-500/10', border: 'border-teal-500/40', line: 'border-teal-500/20' },
+  { text: 'text-red-400', pillBg: 'bg-red-500/20', bg: 'bg-red-500/5', hoverBg: 'hover:bg-red-500/10', border: 'border-red-500/40', line: 'border-red-500/20' },
+  { text: 'text-amber-400', pillBg: 'bg-amber-500/20', bg: 'bg-amber-500/5', hoverBg: 'hover:bg-amber-500/10', border: 'border-amber-500/40', line: 'border-amber-500/20' },
+  { text: 'text-green-400', pillBg: 'bg-green-500/20', bg: 'bg-green-500/5', hoverBg: 'hover:bg-green-500/10', border: 'border-green-500/40', line: 'border-green-500/20' },
+  { text: 'text-pink-400', pillBg: 'bg-pink-500/20', bg: 'bg-pink-500/5', hoverBg: 'hover:bg-pink-500/10', border: 'border-pink-500/40', line: 'border-pink-500/20' },
+  { text: 'text-cyan-400', pillBg: 'bg-cyan-500/20', bg: 'bg-cyan-500/5', hoverBg: 'hover:bg-cyan-500/10', border: 'border-cyan-500/40', line: 'border-cyan-500/20' },
+]
+
+function getComponentColor(index: number): ComponentColorSet {
+  return COMPONENT_COLORS[index % COMPONENT_COLORS.length]
+}
+
+// --- File status helpers ---
+
+const STATUS_COLORS: Record<string, string> = {
+  modified: 'text-yellow-400',
+  added: 'text-green-400',
+  removed: 'text-red-400',
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  modified: 'M',
+  added: 'A',
+  removed: 'D',
+}
+
+// --- File tree item component ---
+
+interface DiffFileItemProps {
+  file: FileDiffInfo
+  isSelected: boolean
+  onSelect: (file: FileDiffInfo) => void
+  onReset: (file: FileDiffInfo) => void
+  resettingFile: string | null
+  anyResetting: boolean
+  renderFileIcon?: (filename: string, component: string) => ReactNode
+}
+
+function DiffFileItem({ file, isSelected, onSelect, onReset, resettingFile, anyResetting, renderFileIcon }: DiffFileItemProps) {
+  const filename = file.path.split('/').pop() ?? file.path
+  const statusColor = STATUS_COLORS[file.status] ?? ''
+  const statusLabel = STATUS_LABELS[file.status] ?? ''
+
+  const icon = renderFileIcon?.(filename, file.component) ?? (
+    <FileCode className="w-3 h-3 flex-shrink-0 text-blue-400/50" />
+  )
+
+  return (
+    <div
+      className={`flex items-center transition-colors ${
+        isSelected ? 'bg-[#313244]' : 'hover:bg-[#1e1e2e]'
+      }`}
+    >
+      <button
+        onClick={() => onSelect(file)}
+        className={`flex-1 flex items-center gap-2 px-3 py-1 text-xs ${
+          isSelected ? 'text-[#cdd6f4]' : 'text-[#a6adc8]'
+        }`}
+      >
+        {icon}
+        <span className="truncate">{filename}</span>
+        {statusLabel && (
+          <span className={`text-[10px] font-medium ml-auto flex-shrink-0 ${statusColor}`}>
+            {statusLabel}
+          </span>
+        )}
+      </button>
+      {file.status === 'modified' && (
+        <div className="pr-2 flex-shrink-0">
+          <IconButton
+            icon={<RotateCcw className={resettingFile === `${file.component}:${file.path}` ? 'animate-spin' : ''} />}
+            onClick={() => onReset(file)}
+            disabled={anyResetting}
+            size="xs"
+            color="orange"
+            tooltip={{ title: 'Reset file', description: 'Reset this file to golden' }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+// --- File Tree Panel ---
+
+interface DiffFileTreePanelProps {
+  sync: UseGoldenSyncReturn
+  componentLabels?: Record<string, string>
+  renderFileIcon?: (filename: string, component: string) => ReactNode
+}
+
+function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTreePanelProps) {
+  const {
+    diff,
+    selectedDiffFile,
+    diffFilter,
+    setDiffFilter,
+    handleSelectDiffFile,
+    handleResetFile,
+    resettingFile,
+    groupedFiles,
+    collapsedCategories,
+    toggleCategory,
+    countFiles,
+    allCategoryKeys,
+    allExpanded,
+    handleExpandAll,
+    handleCollapseAll,
+  } = sync
+
+  const anyResetting = resettingFile !== null
+
+  // Build component index for color assignment
+  const componentOrder: string[] = Array.from(groupedFiles.keys())
+
+  const renderTreeNode = (
+    node: DiffTreeNode,
+    categoryKey: string,
+    label: string,
+    lineClass: string,
+    isRoot: boolean,
+    colorIndex: number,
+  ): ReactNode => {
+    const hasContent = node.files.length > 0 || Object.keys(node.children).length > 0
+    if (!hasContent) return null
+
+    const isCollapsed = collapsedCategories.has(categoryKey)
+    const fileCount = countFiles(node)
+    const color = getComponentColor(colorIndex)
+
+    const displayLabel = isRoot ? (componentLabels?.[label] ?? label.charAt(0).toUpperCase() + label.slice(1)) : label
+
+    // Root-level nodes get colored styling, nested folders get muted styling
+    const headerClasses = isRoot
+      ? `${color.text} ${color.hoverBg} border-l-2 ${color.border} ${color.bg} px-3 py-2 text-sm font-medium`
+      : 'text-[#6c7086] hover:bg-[#1e1e2e] px-3 py-1.5'
+
+    const chevronSize = isRoot ? 'w-4 h-4' : 'w-3 h-3'
+
+    const countElement = isRoot ? (
+      <span className={`ml-auto px-1.5 py-0.5 rounded-full text-[10px] font-medium ${color.pillBg} ${color.text}`}>
+        {fileCount}
+      </span>
+    ) : (
+      <span className="text-[#585b70] ml-auto">{fileCount}</span>
+    )
+
+    const containerLineClass = isRoot ? color.line : lineClass
+
+    return (
+      <div key={categoryKey}>
+        <button
+          onClick={() => toggleCategory(categoryKey)}
+          className={`w-full flex items-center gap-2 ${headerClasses} transition-colors cursor-pointer`}
+        >
+          {isCollapsed ? (
+            <ChevronRight className={chevronSize} />
+          ) : (
+            <ChevronDown className={chevronSize} />
+          )}
+          {isRoot ? null : <Folder className="w-3 h-3 text-[#585b70]" />}
+          {displayLabel}
+          {countElement}
+        </button>
+        {!isCollapsed && (
+          <div className={`${isRoot ? 'ml-2' : 'ml-4'} border-l ${containerLineClass}`}>
+            {node.files.map((file) => (
+              <DiffFileItem
+                key={`${file.component}-${file.path}`}
+                file={file}
+                isSelected={selectedDiffFile?.path === file.path && selectedDiffFile?.component === file.component}
+                onSelect={handleSelectDiffFile}
+                onReset={handleResetFile}
+                resettingFile={resettingFile}
+                anyResetting={anyResetting}
+                renderFileIcon={renderFileIcon}
+              />
+            ))}
+            {Object.entries(node.children).map(([childName, childNode]) =>
+              renderTreeNode(childNode, `${categoryKey}-${childName}`, childName, containerLineClass, false, colorIndex)
+            )}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-72 flex-shrink-0 bg-[#181825] rounded-lg border border-[#313244] overflow-hidden flex flex-col">
+      {/* Summary Header */}
+      <div className="p-3 border-b border-[#313244] flex-shrink-0">
+        <div className="flex gap-3 text-xs">
+          <span className="text-green-400">+{diff!.summary.added}</span>
+          <span className="text-red-400">-{diff!.summary.removed}</span>
+          <span className="text-yellow-400">~{diff!.summary.modified}</span>
+          <span className="text-neutral-400">={diff!.summary.unchanged}</span>
+        </div>
+      </div>
+
+      {/* Filter Tabs */}
+      <div className="flex items-center justify-between p-2 border-b border-[#313244] flex-shrink-0">
+        <div className="flex items-center gap-1">
+          {(['all', 'modified', 'added', 'removed'] as const).map((filter) => (
+            <button
+              key={filter}
+              onClick={() => setDiffFilter(filter)}
+              className={`px-2 py-1 rounded text-xs transition-colors cursor-pointer ${
+                diffFilter === filter
+                  ? 'bg-[#313244] text-[#cdd6f4]'
+                  : 'text-[#6c7086] hover:text-[#a6adc8]'
+              }`}
+            >
+              {filter === 'all' ? 'All' : filter.charAt(0).toUpperCase() + filter.slice(1)}
+            </button>
+          ))}
+        </div>
+        {allCategoryKeys.length > 0 && (
+          <IconButton
+            icon={allExpanded ? <ChevronsDownUp className="w-3.5 h-3.5" /> : <ChevronsUpDown className="w-3.5 h-3.5" />}
+            onClick={allExpanded ? handleCollapseAll : handleExpandAll}
+            size="sm"
+            color="neutral"
+            tooltip={{
+              title: allExpanded ? 'Collapse All' : 'Expand All',
+              description: allExpanded ? 'Collapse all folders' : 'Expand all folders',
+            }}
+          />
+        )}
+      </div>
+
+      {/* File Tree */}
+      <div className="flex-1 overflow-y-auto py-1">
+        {componentOrder.map((component, index) => {
+          const node = groupedFiles.get(component)!
+          return renderTreeNode(node, component, component, '', true, index)
+        })}
+      </div>
+    </div>
+  )
+}
+
+// --- Diff Editor Panel ---
+
+interface DiffEditorPanelProps {
+  sync: UseGoldenSyncReturn
+  componentLabels?: Record<string, string>
+  monacoTheme?: string
+}
+
+function DiffEditorPanel({ sync, componentLabels, monacoTheme }: DiffEditorPanelProps) {
+  const {
+    selectedDiffFile,
+    goldenContent,
+    liveContent,
+    editedLiveContent,
+    setEditedLiveContent,
+    diffSideBySide,
+    hasUnsavedChanges,
+    devtools,
+  } = sync
+
+  if (!selectedDiffFile) {
+    return (
+      <div className="flex-1 min-w-0 bg-[#181825] rounded-lg border border-[#313244] overflow-hidden flex flex-col">
+        <div className="flex items-center justify-center h-full text-sm text-[#6c7086]">
+          Select a file from the tree to view differences
+        </div>
+      </div>
+    )
+  }
+
+  const compLabel = componentLabels?.[selectedDiffFile.component] ?? selectedDiffFile.component
+
+  return (
+    <div className="flex-1 min-w-0 bg-[#181825] rounded-lg border border-[#313244] overflow-hidden flex flex-col">
+      {/* File Header */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-[#313244] flex-shrink-0">
+        <div className="flex items-center gap-2">
+          <FileCode className="w-4 h-4 flex-shrink-0 text-blue-400/50" />
+          <span className="text-sm text-[#cdd6f4] font-medium">
+            {selectedDiffFile.component}/{selectedDiffFile.path}
+          </span>
+          {devtools && hasUnsavedChanges && (
+            <span className="px-2 py-0.5 bg-amber-500/20 text-amber-400 text-xs rounded">
+              Modified
+            </span>
+          )}
+        </div>
+        <span className="text-xs text-[#6c7086]">{compLabel}</span>
+      </div>
+
+      {/* Diff Editor */}
+      <div className="flex-1 min-h-0">
+        {goldenContent !== null || liveContent !== null ? (
+          <DiffEditor
+            key={`diff-${selectedDiffFile.path}-${diffSideBySide}`}
+            height="100%"
+            language={getLanguage(selectedDiffFile.path)}
+            theme={monacoTheme ?? 'vs-dark'}
+            original={goldenContent ?? ''}
+            modified={editedLiveContent ?? liveContent ?? ''}
+            keepCurrentOriginalModel={true}
+            keepCurrentModifiedModel={true}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onMount={devtools ? (diffEditor: any) => {
+              const modifiedEditor = diffEditor.getModifiedEditor()
+              modifiedEditor.onDidChangeModelContent(() => {
+                const newContent = modifiedEditor.getValue()
+                setEditedLiveContent(newContent)
+              })
+            } : undefined}
+            options={{
+              readOnly: !devtools,
+              renderSideBySide: diffSideBySide,
+              originalEditable: false,
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+              fontSize: 12,
+              lineNumbers: 'on',
+              wordWrap: 'on',
+              automaticLayout: true,
+            }}
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full text-sm text-[#6c7086]">
+            Loading file content...
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// --- Main Component ---
+
+export interface FileDiffViewerProps {
+  sync: UseGoldenSyncReturn
+  componentLabels?: Record<string, string>
+  monacoTheme?: string
+  renderFileIcon?: (filename: string, component: string) => ReactNode
+}
+
+export function FileDiffViewer({ sync, componentLabels, monacoTheme, renderFileIcon }: FileDiffViewerProps) {
+  const { diff, diffLoading, selectedDiffFile, diffSideBySide, setDiffSideBySide, saving, hasUnsavedChanges, handleSaveLiveFile, devtools } = sync
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Controls */}
+      <div className="flex items-center justify-end mb-4 flex-shrink-0">
+        <div className="flex items-center gap-2">
+          {selectedDiffFile && (
+            <>
+              <IconButton
+                icon={diffSideBySide ? <Rows2 /> : <Columns2 />}
+                onClick={() => setDiffSideBySide((prev: boolean) => !prev)}
+                color="blue"
+                tooltip={{ title: diffSideBySide ? 'Inline view' : 'Side by side', description: 'Toggle diff display mode' }}
+              />
+              {devtools && hasUnsavedChanges && (
+                <IconButton
+                  icon={<Save className={saving ? 'animate-pulse' : ''} />}
+                  onClick={handleSaveLiveFile}
+                  disabled={saving}
+                  color="amber"
+                  tooltip={{ title: 'Save changes', description: 'Save edited content to live file' }}
+                />
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {diffLoading ? (
+        <div className="text-sm text-[#6c7086] text-center py-8">Loading diff...</div>
+      ) : diff ? (
+        <div className="flex gap-4 flex-1 min-h-[400px]">
+          <DiffFileTreePanel sync={sync} componentLabels={componentLabels} renderFileIcon={renderFileIcon} />
+          <DiffEditorPanel sync={sync} componentLabels={componentLabels} monacoTheme={monacoTheme} />
+        </div>
+      ) : (
+        <div className="text-sm text-[#6c7086] text-center py-8">
+          No diff data available. Click refresh to load.
+        </div>
+      )}
+    </div>
+  )
+}