@toolr/ui-design 0.1.0

package/components/sections/golden-snapshots/use-golden-sync.ts

@@ -0,0 +1,477 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import type { GoldenSnapshotsApi, GoldenStatus, GoldenLiveDiff, FileDiffInfo, FileDiffStatus, SnapshotsManifest } from './types.ts'
+
+export interface DiffTreeNode {
+  files: FileDiffInfo[]
+  children: Record<string, DiffTreeNode>
+}
+
+export interface UseGoldenSyncOptions {
+  api: GoldenSnapshotsApi
+  devtools: boolean
+}
+
+function insertIntoTree(node: DiffTreeNode, pathParts: string[], file: FileDiffInfo) {
+  if (pathParts.length === 1) {
+    node.files.push(file)
+  } else {
+    const folder = pathParts[0]
+    if (!node.children[folder]) {
+      node.children[folder] = { files: [], children: {} }
+    }
+    insertIntoTree(node.children[folder], pathParts.slice(1), file)
+  }
+}
+
+function sortTreeFiles(node: DiffTreeNode) {
+  node.files.sort((a, b) => {
+    const statusOrder = { modified: 0, added: 1, removed: 2, unchanged: 3 }
+    return statusOrder[a.status] - statusOrder[b.status] || a.path.localeCompare(b.path)
+  })
+  const sortedEntries = Object.entries(node.children).sort(([a], [b]) => a.localeCompare(b))
+  node.children = Object.fromEntries(sortedEntries)
+  for (const child of Object.values(node.children)) {
+    sortTreeFiles(child)
+  }
+}
+
+function collectCategoryKeys(node: DiffTreeNode, categoryKey: string): string[] {
+  const keys: string[] = []
+  const hasContent = node.files.length > 0 || Object.keys(node.children).length > 0
+  if (hasContent) {
+    keys.push(categoryKey)
+    for (const [childName, childNode] of Object.entries(node.children)) {
+      keys.push(...collectCategoryKeys(childNode, `${categoryKey}-${childName}`))
+    }
+  }
+  return keys
+}
+
+export function useGoldenSync({ api, devtools }: UseGoldenSyncOptions) {
+  // Status
+  const [status, setStatus] = useState<GoldenStatus | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [lastAction, setLastAction] = useState<string | null>(null)
+
+  // Diff state
+  const [diff, setDiff] = useState<GoldenLiveDiff | null>(null)
+  const [diffLoading, setDiffLoading] = useState(false)
+  const [selectedDiffFile, setSelectedDiffFile] = useState<FileDiffInfo | null>(null)
+  const [goldenContent, setGoldenContent] = useState<string | null>(null)
+  const [liveContent, setLiveContent] = useState<string | null>(null)
+  const [editedLiveContent, setEditedLiveContent] = useState<string | null>(null)
+  const [diffFilter, setDiffFilter] = useState<FileDiffStatus | 'all'>('all')
+  const [diffSideBySide, setDiffSideBySide] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(new Set())
+
+  // Reset state
+  const [resettingFile, setResettingFile] = useState<string | null>(null)
+  const [resettingComponent, setResettingComponent] = useState<string | null>(null)
+  const [showResetAllDialog, setShowResetAllDialog] = useState(false)
+  const [resettingAll, setResettingAll] = useState(false)
+
+  // Snapshot state
+  const [manifest, setManifest] = useState<SnapshotsManifest | null>(null)
+  const [manifestLoading, setManifestLoading] = useState(false)
+  const [snapshotBusy, setSnapshotBusy] = useState(false)
+
+  const hasUnsavedChanges = editedLiveContent !== null && editedLiveContent !== liveContent
+
+  // --- Data loading ---
+
+  const loadStatus = useCallback(async () => {
+    try {
+      setError(null)
+      const statusData = await api.getStatus()
+      setStatus(statusData)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load status')
+    } finally {
+      setLoading(false)
+    }
+  }, [api])
+
+  useEffect(() => {
+    loadStatus()
+  }, [loadStatus])
+
+  // Auto-clear success message after 3 seconds
+  useEffect(() => {
+    if (!lastAction) return
+    const timer = setTimeout(() => setLastAction(null), 3000)
+    return () => clearTimeout(timer)
+  }, [lastAction])
+
+  const loadDiff = useCallback(async () => {
+    setDiffLoading(true)
+    setError(null)
+    try {
+      const diffData = await api.getDiff()
+      setDiff(diffData)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load diff')
+    } finally {
+      setDiffLoading(false)
+    }
+  }, [api])
+
+  const refresh = useCallback(async () => {
+    await Promise.all([loadStatus(), diff ? loadDiff() : Promise.resolve()])
+  }, [loadStatus, loadDiff, diff])
+
+  // --- File selection ---
+
+  const handleSelectDiffFile = async (file: FileDiffInfo) => {
+    if (hasUnsavedChanges) {
+      const confirm = window.confirm('You have unsaved changes. Discard them?')
+      if (!confirm) return
+    }
+
+    setSelectedDiffFile(file)
+    setGoldenContent(null)
+    setLiveContent(null)
+    setEditedLiveContent(null)
+
+    try {
+      const [golden, live] = await Promise.all([
+        api.getFileContent(file.component, file.path, 'golden'),
+        api.getFileContent(file.component, file.path, 'live'),
+      ])
+      setGoldenContent(golden)
+      setLiveContent(live)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load file content')
+    }
+  }
+
+  // --- Save (devtools only) ---
+
+  const handleSaveLiveFile = async () => {
+    if (!devtools || !selectedDiffFile || editedLiveContent === null) return
+
+    setSaving(true)
+    setError(null)
+    try {
+      await api.saveFile(selectedDiffFile.component, selectedDiffFile.path, editedLiveContent)
+      setLiveContent(editedLiveContent)
+      setEditedLiveContent(null)
+      setLastAction(`Saved ${selectedDiffFile.path}`)
+      await loadDiff()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save file')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  // --- Reset operations (golden → live) ---
+
+  const handleResetFile = async (file: FileDiffInfo) => {
+    const key = `${file.component}:${file.path}`
+    setResettingFile(key)
+    setError(null)
+    try {
+      await api.resetFile(file.component, file.path)
+      setLastAction(`Reset ${file.path} to golden`)
+      if (selectedDiffFile?.path === file.path && selectedDiffFile?.component === file.component) {
+        const [golden, live] = await Promise.all([
+          api.getFileContent(file.component, file.path, 'golden'),
+          api.getFileContent(file.component, file.path, 'live'),
+        ])
+        setGoldenContent(golden)
+        setLiveContent(live)
+        setEditedLiveContent(null)
+      }
+      await Promise.all([loadDiff(), loadStatus()])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to reset file')
+    } finally {
+      setResettingFile(null)
+    }
+  }
+
+  const handleResetComponent = async (component: string) => {
+    setResettingComponent(component)
+    setError(null)
+    try {
+      const result = await api.resetComponent(component)
+      setLastAction(`Reset ${component} to golden (${result.filesReset} files)`)
+      setSelectedDiffFile(null)
+      setGoldenContent(null)
+      setLiveContent(null)
+      setEditedLiveContent(null)
+      await Promise.all([loadDiff(), loadStatus()])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : `Failed to reset ${component}`)
+    } finally {
+      setResettingComponent(null)
+    }
+  }
+
+  const handleResetAll = async () => {
+    setResettingAll(true)
+    setError(null)
+    try {
+      const result = await api.resetComponent('all')
+      setLastAction(`Reset all components to golden (${result.filesReset} files)`)
+      setSelectedDiffFile(null)
+      setGoldenContent(null)
+      setLiveContent(null)
+      setEditedLiveContent(null)
+      setShowResetAllDialog(false)
+      await Promise.all([loadDiff(), loadStatus()])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to reset all components')
+    } finally {
+      setResettingAll(false)
+    }
+  }
+
+  // --- Snapshot management (devtools only) ---
+
+  const loadManifest = useCallback(async () => {
+    setManifestLoading(true)
+    try {
+      const data = await api.listSnapshots()
+      setManifest(data)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load snapshots')
+    } finally {
+      setManifestLoading(false)
+    }
+  }, [api])
+
+  const handleCreateSnapshot = async (description?: string) => {
+    setSnapshotBusy(true)
+    setError(null)
+    try {
+      const result = await api.createSnapshot(description)
+      setLastAction(`Created snapshot v${result.version}`)
+      await Promise.all([loadManifest(), loadStatus()])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create snapshot')
+    } finally {
+      setSnapshotBusy(false)
+    }
+  }
+
+  const handleRestoreSnapshot = async (version: number, resetLive: boolean) => {
+    setSnapshotBusy(true)
+    setError(null)
+    try {
+      await api.restoreSnapshot(version, resetLive)
+      setLastAction(`Restored snapshot v${version}${resetLive ? ' (live reset)' : ''}`)
+      await Promise.all([loadStatus(), loadManifest()])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to restore snapshot')
+    } finally {
+      setSnapshotBusy(false)
+    }
+  }
+
+  const handlePinSnapshot = async (version: number, pinned: boolean) => {
+    try {
+      await api.pinSnapshot(version, pinned)
+      setLastAction(`${pinned ? 'Pinned' : 'Unpinned'} snapshot v${version}`)
+      await loadManifest()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to pin snapshot')
+    }
+  }
+
+  const handleDeleteSnapshot = async (version: number) => {
+    setSnapshotBusy(true)
+    setError(null)
+    try {
+      await api.deleteSnapshot(version)
+      setLastAction(`Deleted snapshot v${version}`)
+      await loadManifest()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to delete snapshot')
+    } finally {
+      setSnapshotBusy(false)
+    }
+  }
+
+  // --- Version management (devtools only) ---
+
+  const handleUpdateComponentVersion = async (component: string, version: string, description?: string) => {
+    setError(null)
+    try {
+      await api.updateComponentVersion(component, version, description)
+      setLastAction(`Updated ${component} to v${version}`)
+      await loadStatus()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update component version')
+    }
+  }
+
+  const handleBumpVersion = async (newVersion: string, description?: string) => {
+    setError(null)
+    try {
+      await api.bumpVersion(newVersion, description)
+      setLastAction(`Bumped golden version to ${newVersion}`)
+      await loadStatus()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to bump version')
+    }
+  }
+
+  // --- Tree helpers ---
+
+  const toggleCategory = (category: string) => {
+    setCollapsedCategories((prev) => {
+      const next = new Set(prev)
+      if (next.has(category)) {
+        next.delete(category)
+      } else {
+        next.add(category)
+      }
+      return next
+    })
+  }
+
+  const groupedFiles = useMemo(() => {
+    if (!diff) return new Map<string, DiffTreeNode>()
+
+    const filtered = diff.files.filter((f) => diffFilter === 'all' || f.status === diffFilter)
+    const groups = new Map<string, DiffTreeNode>()
+
+    for (const file of filtered) {
+      if (!groups.has(file.component)) {
+        groups.set(file.component, { files: [], children: {} })
+      }
+      const pathParts = file.path.split('/')
+      insertIntoTree(groups.get(file.component)!, pathParts, file)
+    }
+
+    for (const node of groups.values()) {
+      sortTreeFiles(node)
+    }
+
+    return groups
+  }, [diff, diffFilter])
+
+  const countFiles = (node: DiffTreeNode): number => {
+    let count = node.files.length
+    for (const child of Object.values(node.children)) {
+      count += countFiles(child)
+    }
+    return count
+  }
+
+  const allCategoryKeys = useMemo(() => {
+    const keys: string[] = []
+    for (const [component, node] of groupedFiles) {
+      keys.push(...collectCategoryKeys(node, component))
+    }
+    return keys
+  }, [groupedFiles])
+
+  const allExpanded = allCategoryKeys.length > 0 && !allCategoryKeys.some((key) => collapsedCategories.has(key))
+
+  const handleExpandAll = () => {
+    setCollapsedCategories(new Set())
+  }
+
+  const handleCollapseAll = () => {
+    setCollapsedCategories(new Set(allCategoryKeys))
+  }
+
+  return {
+    // Status
+    status,
+    loading,
+    error,
+    lastAction,
+    loadStatus,
+
+    // Diff
+    diff,
+    diffLoading,
+    loadDiff,
+    selectedDiffFile,
+    goldenContent,
+    liveContent,
+    editedLiveContent,
+    setEditedLiveContent,
+    diffFilter,
+    setDiffFilter,
+    diffSideBySide,
+    setDiffSideBySide,
+    saving,
+    hasUnsavedChanges,
+
+    // File operations
+    handleSelectDiffFile,
+    handleSaveLiveFile,
+
+    // Reset operations
+    resettingFile,
+    resettingComponent,
+    resettingAll,
+    showResetAllDialog,
+    setShowResetAllDialog,
+    handleResetFile,
+    handleResetComponent,
+    handleResetAll,
+
+    // Tree
+    groupedFiles,
+    collapsedCategories,
+    toggleCategory,
+    countFiles,
+    allCategoryKeys,
+    allExpanded,
+    handleExpandAll,
+    handleCollapseAll,
+
+    // Snapshots
+    manifest,
+    manifestLoading,
+    snapshotBusy,
+    loadManifest,
+    handleCreateSnapshot,
+    handleRestoreSnapshot,
+    handlePinSnapshot,
+    handleDeleteSnapshot,
+
+    // Versions
+    handleUpdateComponentVersion,
+    handleBumpVersion,
+
+    // General
+    refresh,
+    devtools,
+  }
+}
+
+export type UseGoldenSyncReturn = ReturnType<typeof useGoldenSync>
+
+export function formatDate(isoString: string) {
+  const date = new Date(isoString)
+  return date.toLocaleString()
+}
+
+export function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+export function getLanguage(path: string): string {
+  const ext = path.split('.').pop()?.toLowerCase()
+  switch (ext) {
+    case 'json': return 'json'
+    case 'md': return 'markdown'
+    case 'ts':
+    case 'tsx': return 'typescript'
+    case 'js':
+    case 'jsx': return 'javascript'
+    case 'yaml':
+    case 'yml': return 'yaml'
+    default: return 'plaintext'
+  }
+}

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

@@ -0,0 +1,186 @@
+import { useState } from 'react'
+import { Tag, ArrowUp, Loader2 } from 'lucide-react'
+import { IconButton } from '../../ui/icon-button.tsx'
+import { Input } from '../../ui/input.tsx'
+import type { UseGoldenSyncReturn } from './use-golden-sync.ts'
+
+export interface VersionManagerProps {
+  sync: UseGoldenSyncReturn
+  components: string[]
+  componentLabels?: Record<string, string>
+}
+
+export function VersionManager({ sync, components, componentLabels }: VersionManagerProps) {
+  const { status, handleUpdateComponentVersion, handleBumpVersion } = sync
+
+  const [globalVersion, setGlobalVersion] = useState('')
+  const [globalDescription, setGlobalDescription] = useState('')
+  const [bumpingGlobal, setBumpingGlobal] = useState(false)
+
+  const [editingComponent, setEditingComponent] = useState<string | null>(null)
+  const [componentVersion, setComponentVersion] = useState('')
+  const [componentDescription, setComponentDescription] = useState('')
+  const [bumpingComponent, setBumpingComponent] = useState(false)
+
+  const getLabel = (comp: string) => componentLabels?.[comp] ?? comp.charAt(0).toUpperCase() + comp.slice(1)
+
+  const onBumpGlobal = async () => {
+    if (!globalVersion.trim()) return
+    setBumpingGlobal(true)
+    await handleBumpVersion(globalVersion.trim(), globalDescription.trim() || undefined)
+    setBumpingGlobal(false)
+    setGlobalVersion('')
+    setGlobalDescription('')
+  }
+
+  const onBumpComponent = async () => {
+    if (!editingComponent || !componentVersion.trim()) return
+    setBumpingComponent(true)
+    await handleUpdateComponentVersion(editingComponent, componentVersion.trim(), componentDescription.trim() || undefined)
+    setBumpingComponent(false)
+    setEditingComponent(null)
+    setComponentVersion('')
+    setComponentDescription('')
+  }
+
+  const startEditComponent = (comp: string) => {
+    const current = status?.goldenMeta?.components[comp]?.version ?? ''
+    setEditingComponent(comp)
+    setComponentVersion(current)
+    setComponentDescription('')
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Global Version Bump */}
+      <div className="bg-[#181825] 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-[#cdd6f4] font-medium">Golden Version</h4>
+          {status?.goldenMeta && (
+            <span className="px-2 py-0.5 bg-teal-500/20 text-teal-400 text-xs rounded font-mono">
+              {status.goldenMeta.version}
+            </span>
+          )}
+        </div>
+        <p className="text-xs text-[#585b70] mb-3">
+          Bump the overall golden version number. This updates the top-level version in meta.json.
+        </p>
+        <div className="flex gap-2">
+          <div className="w-32">
+            <Input
+              value={globalVersion}
+              onChange={setGlobalVersion}
+              placeholder="e.g. 1.3.0"
+              size="sm"
+              variant="outline"
+              mono
+            />
+          </div>
+          <div className="flex-1">
+            <Input
+              value={globalDescription}
+              onChange={setGlobalDescription}
+              placeholder="Optional description..."
+              size="sm"
+              variant="outline"
+            />
+          </div>
+          <IconButton
+            icon={bumpingGlobal ? <Loader2 className="animate-spin" /> : <ArrowUp />}
+            onClick={onBumpGlobal}
+            disabled={bumpingGlobal || !globalVersion.trim()}
+            size="sm"
+            color="cyan"
+            tooltip={{ title: 'Bump version', description: 'Update the golden version' }}
+          />
+        </div>
+      </div>
+
+      {/* Component Versions */}
+      <div className="bg-[#181825] rounded-lg border border-[#313244] overflow-hidden">
+        <div className="px-4 py-3 border-b border-[#313244]">
+          <h4 className="text-[#cdd6f4] font-medium">Component Versions</h4>
+          <p className="text-xs text-[#585b70] mt-1">
+            Update individual component versions. Click a component to edit.
+          </p>
+        </div>
+
+        <div className="divide-y divide-[#313244]">
+          {components.map((comp) => {
+            const currentVersion = status?.goldenMeta?.components[comp]?.version
+            const liveVersion = status?.liveMeta?.components[comp]?.version
+            const isEditing = editingComponent === comp
+            const mismatch = currentVersion && liveVersion && currentVersion !== liveVersion
+
+            return (
+              <div key={comp} className="px-4 py-3">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-[#cdd6f4]">{getLabel(comp)}</span>
+                    {currentVersion && (
+                      <span className="text-xs font-mono text-[#6c7086]">v{currentVersion}</span>
+                    )}
+                    {mismatch && (
+                      <span className="text-[10px] text-yellow-400">
+                        (live: v{liveVersion})
+                      </span>
+                    )}
+                  </div>
+                  {!isEditing && (
+                    <IconButton
+                      icon={<Tag />}
+                      onClick={() => startEditComponent(comp)}
+                      size="xs"
+                      color="neutral"
+                      tooltip={{ title: 'Edit version', description: `Change ${getLabel(comp)} version` }}
+                    />
+                  )}
+                </div>
+
+                {isEditing && (
+                  <div className="flex gap-2 mt-2">
+                    <div className="w-28">
+                      <Input
+                        value={componentVersion}
+                        onChange={setComponentVersion}
+                        placeholder="Version"
+                        size="sm"
+                        variant="outline"
+                        mono
+                      />
+                    </div>
+                    <div className="flex-1">
+                      <Input
+                        value={componentDescription}
+                        onChange={setComponentDescription}
+                        placeholder="Description..."
+                        size="sm"
+                        variant="outline"
+                      />
+                    </div>
+                    <IconButton
+                      icon={bumpingComponent ? <Loader2 className="animate-spin" /> : <ArrowUp />}
+                      onClick={onBumpComponent}
+                      disabled={bumpingComponent || !componentVersion.trim()}
+                      size="sm"
+                      color="green"
+                      tooltip={{ title: 'Update', description: 'Save new version' }}
+                    />
+                    <IconButton
+                      icon="close"
+                      onClick={() => setEditingComponent(null)}
+                      size="sm"
+                      color="neutral"
+                      tooltip={{ title: 'Cancel', description: 'Cancel editing' }}
+                    />
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}