@toolr/ui-design 0.1.0

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

@@ -0,0 +1,223 @@
+import type { ReactNode } from 'react'
+import { useState, useEffect } from 'react'
+import { RefreshCw, AlertCircle, Check, Activity, GitCompareArrows, Archive, Tag } from 'lucide-react'
+import { IconButton } from '../../ui/icon-button.tsx'
+import { ConfirmModal } from '../../ui/modal.tsx'
+import type { GoldenSnapshotsApi } from './types.ts'
+import { useGoldenSync, type UseGoldenSyncReturn } from './use-golden-sync.ts'
+import { StatusOverview } from './status-overview.tsx'
+import { FileDiffViewer } from './file-diff-viewer.tsx'
+import { SnapshotManager } from './snapshot-manager.tsx'
+import { VersionManager } from './version-manager.tsx'
+
+type TabId = 'status' | 'diff' | 'snapshots' | 'versions'
+
+export interface GoldenSyncPanelProps {
+  api: GoldenSnapshotsApi
+  components: string[]
+  devtools?: boolean
+  componentLabels?: Record<string, string>
+  monacoTheme?: string
+  renderFileIcon?: (filename: string, component: string) => ReactNode
+  onTabChange?: (tab: TabId) => void
+}
+
+export function GoldenSyncPanel({
+  api,
+  components,
+  devtools = false,
+  componentLabels,
+  monacoTheme,
+  renderFileIcon,
+  onTabChange,
+}: GoldenSyncPanelProps) {
+  const sync = useGoldenSync({ api, devtools })
+  const [activeTab, setActiveTab] = useState<TabId>('status')
+
+  const handleTabChange = (tab: TabId) => {
+    setActiveTab(tab)
+    onTabChange?.(tab)
+  }
+
+  const {
+    status,
+    loading,
+    error,
+    lastAction,
+    loadStatus,
+    diff,
+    diffLoading,
+    loadDiff,
+    manifest,
+    manifestLoading,
+    loadManifest,
+    resettingComponent,
+    resettingAll,
+    showResetAllDialog,
+    setShowResetAllDialog,
+    handleResetComponent,
+    handleResetAll,
+  } = sync
+
+  // Load diff when switching to diff tab
+  useEffect(() => {
+    if (activeTab === 'diff' && !diff && !diffLoading) {
+      loadDiff()
+    }
+  }, [activeTab, diff, diffLoading, loadDiff])
+
+  // Load manifest when switching to snapshots tab
+  useEffect(() => {
+    if (activeTab === 'snapshots' && !manifest && !manifestLoading) {
+      loadManifest()
+    }
+  }, [activeTab, manifest, manifestLoading, loadManifest])
+
+  const TAB_DESCRIPTIONS: Record<TabId, { title: string; description: string }> = {
+    status: {
+      title: 'Golden / Live Sync',
+      description: 'Version sync status between golden reference and your live working copy.',
+    },
+    diff: {
+      title: 'Golden vs Live Diff',
+      description: 'Compare files between golden (reference) and live (working copy)',
+    },
+    snapshots: {
+      title: 'Snapshot Management',
+      description: 'Create, restore, pin, and manage versioned snapshots of your live files.',
+    },
+    versions: {
+      title: 'Version Management',
+      description: 'Bump the overall golden version or update individual component versions.',
+    },
+  }
+
+  const handleRefresh = () => {
+    if (activeTab === 'diff') loadDiff()
+    else if (activeTab === 'snapshots') loadManifest()
+    else loadStatus()
+  }
+
+  const isLoading = diffLoading || loading || manifestLoading
+
+  const tabs: { id: TabId; label: string; icon: ReactNode; color: string; devtoolsOnly?: boolean }[] = [
+    { id: 'status', label: 'Status', icon: <Activity className="w-4 h-4" />, color: 'text-purple-400' },
+    { id: 'diff', label: 'File Diff', icon: <GitCompareArrows className="w-4 h-4" />, color: 'text-amber-400' },
+    { id: 'snapshots', label: 'Snapshots', icon: <Archive className="w-4 h-4" />, color: 'text-blue-400', devtoolsOnly: true },
+    { id: 'versions', label: 'Versions', icon: <Tag className="w-4 h-4" />, color: 'text-teal-400', devtoolsOnly: true },
+  ]
+
+  const visibleTabs = tabs.filter((t) => !t.devtoolsOnly || devtools)
+
+  return (
+    <div className={`flex-1 flex flex-col ${activeTab === 'diff' ? 'overflow-hidden' : 'overflow-y-auto'}`}>
+      {/* Header */}
+      <div className="flex-shrink-0">
+        <div className="flex items-start justify-between mb-4">
+          <div className="space-y-1">
+            <h3 className="text-base font-semibold text-[#cdd6f4]">
+              {TAB_DESCRIPTIONS[activeTab].title}
+            </h3>
+            <p className="text-sm text-[#a6adc8]">
+              {TAB_DESCRIPTIONS[activeTab].description}
+            </p>
+          </div>
+          <IconButton
+            icon={<RefreshCw className={isLoading ? 'animate-spin' : ''} />}
+            onClick={handleRefresh}
+            disabled={isLoading}
+            color="neutral"
+            size="sm"
+            tooltip={{ title: 'Reload', description: 'Refresh data' }}
+          />
+        </div>
+
+        {/* Tabs */}
+        <div className="flex">
+          {visibleTabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => handleTabChange(tab.id)}
+              className={`h-[41px] flex items-center gap-2 px-4 text-sm border-b-2 transition-colors cursor-pointer ${
+                activeTab === tab.id
+                  ? `${tab.color} border-current bg-neutral-800/50`
+                  : 'border-transparent text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/30'
+              }`}
+            >
+              {tab.icon}
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Error Display */}
+        {error && (
+          <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4 mt-4">
+            <div className="flex items-center gap-3">
+              <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0" />
+              <p className="text-red-400 text-sm">{error}</p>
+            </div>
+          </div>
+        )}
+
+        {/* Success Message */}
+        {lastAction && (
+          <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-4 mt-4">
+            <div className="flex items-center gap-3">
+              <Check className="w-5 h-5 text-green-400 flex-shrink-0" />
+              <p className="text-green-400 text-sm">{lastAction}</p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className={activeTab === 'diff' ? 'flex-1 min-h-0 mt-4' : 'space-y-6 mt-4'}>
+        {loading && activeTab === 'status' ? (
+          <div className="text-sm text-[#6c7086] text-center py-8">Loading...</div>
+        ) : activeTab === 'status' ? (
+          <StatusOverview
+            status={status}
+            components={components}
+            componentLabels={componentLabels}
+            devtools={devtools}
+            manifest={manifest}
+            resettingComponent={resettingComponent}
+            resettingAll={resettingAll}
+            onResetComponent={handleResetComponent}
+            onResetAll={() => setShowResetAllDialog(true)}
+          />
+        ) : activeTab === 'diff' ? (
+          <FileDiffViewer
+            sync={sync}
+            componentLabels={componentLabels}
+            monacoTheme={monacoTheme}
+            renderFileIcon={renderFileIcon}
+          />
+        ) : activeTab === 'snapshots' ? (
+          <SnapshotManager sync={sync} />
+        ) : (
+          <VersionManager
+            sync={sync}
+            components={components}
+            componentLabels={componentLabels}
+          />
+        )}
+      </div>
+
+      {/* Reset All Confirmation Dialog */}
+      <ConfirmModal
+        isOpen={showResetAllDialog}
+        onClose={() => setShowResetAllDialog(false)}
+        title="Reset All to Golden"
+        kind="warning"
+        message="This will overwrite all live files with the golden copies. Any live changes will be lost."
+        confirmColor="orange"
+        onConfirm={handleResetAll}
+        isLoading={resettingAll}
+      />
+    </div>
+  )
+}
+
+export type { UseGoldenSyncReturn }

package/components/sections/golden-snapshots/index.ts

@@ -0,0 +1,145 @@
+/**
+ * Golden Snapshots — Section barrel export
+ *
+ * Part of: Sections > Golden Snapshots
+ *
+ * This section provides a complete golden/live file synchronization and
+ * snapshot management UI that can be reused across Tauri apps.
+ *
+ * ╔═══════════════════════════════════════════════════════════════════════╗
+ * ║  ARCHITECTURE OVERVIEW                                               ║
+ * ╠═══════════════════════════════════════════════════════════════════════╣
+ * ║                                                                       ║
+ * ║  The system manages three tiers of configuration/prompt files:        ║
+ * ║                                                                       ║
+ * ║    Seed (bundled in app) → Golden (reference) → Live (working copy)   ║
+ * ║                                                                       ║
+ * ║  - Seed: Embedded in the app distribution (e.g. configr-seed.zip)     ║
+ * ║  - Golden: Extracted on first launch; updated on app updates          ║
+ * ║  - Live: Working copy that users edit; preserved across updates       ║
+ * ║                                                                       ║
+ * ║  Each app defines its own "components" (named file groups):           ║
+ * ║  - Configr: runtime, verifier, simulator, generator                   ║
+ * ║  - Reviewr: runtime, + others TBD                                     ║
+ * ║                                                                       ║
+ * ║  The UI is generic — it renders whatever components the backend       ║
+ * ║  returns. Component names are strings, not hardcoded enums.           ║
+ * ║                                                                       ║
+ * ╠═══════════════════════════════════════════════════════════════════════╣
+ * ║  FILE STRUCTURE                                                       ║
+ * ╠═══════════════════════════════════════════════════════════════════════╣
+ * ║                                                                       ║
+ * ║  types.ts              — Shared types (GoldenMeta, FileDiffInfo, etc) ║
+ * ║                           Also contains GoldenSnapshotsApi interface  ║
+ * ║                           with full Rust backend implementation guide ║
+ * ║                                                                       ║
+ * ║  golden-sync-panel.tsx — Main tabbed panel (Status + File Diff)       ║
+ * ║  status-overview.tsx   — Component versions, sync badges, resets      ║
+ * ║  file-diff-viewer.tsx  — Monaco diff editor + file tree sidebar       ║
+ * ║  use-golden-sync.ts    — Hook orchestrating all operations            ║
+ * ║                                                                       ║
+ * ╠═══════════════════════════════════════════════════════════════════════╣
+ * ║  INTEGRATION GUIDE FOR NEW APPS                                       ║
+ * ╠═══════════════════════════════════════════════════════════════════════╣
+ * ║                                                                       ║
+ * ║  1. RUST BACKEND: Implement Tauri commands matching GoldenSnapshotsApi║
+ * ║     Reference: configr/development/src-tauri/src/commands/snapshots/  ║
+ * ║     - mod.rs:       Types + helpers (copy these structs)              ║
+ * ║     - lifecycle.rs: All command logic (adapt paths & components)      ║
+ * ║     - runtime_init.rs: Bootstrap flow (seed → golden → live)          ║
+ * ║     - zip_ops.rs:  Zip utilities                                      ║
+ * ║                                                                       ║
+ * ║  2. TS API ADAPTER: Create a file that wraps Tauri invokes:           ║
+ * ║     import { invoke } from '@tauri-apps/api/core'                     ║
+ * ║     import type { GoldenSnapshotsApi } from '@toolr/ui-design'        ║
+ * ║                                                                       ║
+ * ║     export const goldenApi: GoldenSnapshotsApi = {                    ║
+ * ║       getStatus: () => invoke('get_app_status'),                      ║
+ * ║       getDiff: () => invoke('get_golden_live_diff'),                  ║
+ * ║       getFileContent: (c, p, s) =>                                    ║
+ * ║         invoke('get_file_content_for_diff',                           ║
+ * ║           { component: c, path: p, source: s }),                      ║
+ * ║       // ... etc for each method                                      ║
+ * ║     }                                                                 ║
+ * ║                                                                       ║
+ * ║  3. RENDER: Pass the adapter and component list to the panel:         ║
+ * ║     <GoldenSyncPanel                                                  ║
+ * ║       api={goldenApi}                                                 ║
+ * ║       components={['runtime', 'verifier', 'simulator', 'generator']}  ║
+ * ║       isDevtools={isDevMode}                                          ║
+ * ║     />                                                                ║
+ * ║                                                                       ║
+ * ║  4. DIRECTORY LAYOUT the Rust backend must maintain:                  ║
+ * ║     {app_data_dir}/                                                   ║
+ * ║     ├── golden/              — Reference (overwritten on updates)     ║
+ * ║     │   ├── .meta/meta.json  — GoldenMeta JSON                       ║
+ * ║     │   ├── runtime/         — Runtime component files                ║
+ * ║     │   └── prompts/         — Prompt component files (if any)        ║
+ * ║     ├── live/                — Working copy (user edits preserved)    ║
+ * ║     │   ├── .meta/meta.json                                          ║
+ * ║     │   ├── runtime/                                                  ║
+ * ║     │   └── prompts/                                                  ║
+ * ║     └── snapshots/           — Versioned zip archives                 ║
+ * ║         ├── manifest.json    — SnapshotsManifest                     ║
+ * ║         └── snapshot_v001_YYYY-MM-DD.zip                              ║
+ * ║                                                                       ║
+ * ╠═══════════════════════════════════════════════════════════════════════╣
+ * ║  KEY RUST BEHAVIORS (do not skip these):                              ║
+ * ╠═══════════════════════════════════════════════════════════════════════╣
+ * ║                                                                       ║
+ * ║  ● Hash-based change detection:                                       ║
+ * ║    Store SHA256 hashes in .meta/meta.json per component.              ║
+ * ║    Compare hashes (not timestamps) to detect user edits.              ║
+ * ║                                                                       ║
+ * ║  ● Semver auto-bump on snapshot creation:                             ║
+ * ║    When creating a snapshot, detect which components changed           ║
+ * ║    (golden vs live hash mismatch). Auto-bump patch version for        ║
+ * ║    each changed component. Copy live → golden after snapshot.         ║
+ * ║                                                                       ║
+ * ║  ● Selective sync on app updates:                                     ║
+ * ║    When seed is newer than golden, update golden from seed.           ║
+ * ║    For live: only overwrite components where live hash matches        ║
+ * ║    the OLD golden hash (i.e. user hasn't edited them).                ║
+ * ║    If user has edited a component, skip it (preserve their work).     ║
+ * ║                                                                       ║
+ * ║  ● Snapshot pruning:                                                  ║
+ * ║    Keep the N most recent snapshots (default 20) + all pinned ones.   ║
+ * ║    Prune after each snapshot creation.                                ║
+ * ║                                                                       ║
+ * ║  ● Reset operations:                                                  ║
+ * ║    "Reset file" = copy golden/{path} → live/{path}                    ║
+ * ║    "Reset component" = copy golden/{component}/ → live/{component}/   ║
+ * ║    "Reset all" = copy entire golden/ → live/                          ║
+ * ║    Always update live .meta/meta.json after reset.                    ║
+ * ║                                                                       ║
+ * ╚═══════════════════════════════════════════════════════════════════════╝
+ */
+
+// Types (shared between UI and backend)
+export type {
+  ComponentVersion,
+  GoldenMeta,
+  DirectoryStatus,
+  SeedInfo,
+  GoldenStatus,
+  FileDiffStatus,
+  FileDiffInfo,
+  DiffSummary,
+  ChangedComponents,
+  GoldenLiveDiff,
+  SnapshotInfo,
+  SnapshotsManifest,
+  CreateSnapshotResult,
+  ResetResult,
+  GoldenSnapshotsApi,
+} from './types.ts'
+
+// Hook
+export { useGoldenSync, formatDate, formatBytes, getLanguage, type UseGoldenSyncOptions, type UseGoldenSyncReturn, type DiffTreeNode } from './use-golden-sync.ts'
+
+// Components
+export { GoldenSyncPanel, type GoldenSyncPanelProps } from './golden-sync-panel.tsx'
+export { StatusOverview, type StatusOverviewProps } from './status-overview.tsx'
+export { FileDiffViewer, type FileDiffViewerProps } from './file-diff-viewer.tsx'
+export { SnapshotManager, type SnapshotManagerProps } from './snapshot-manager.tsx'
+export { VersionManager, type VersionManagerProps } from './version-manager.tsx'

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

@@ -0,0 +1,200 @@
+import { useState } from 'react'
+import { Archive, Pin, PinOff, Trash2, RotateCcw, Plus, Loader2 } from 'lucide-react'
+import { IconButton } from '../../ui/icon-button.tsx'
+import { Input } from '../../ui/input.tsx'
+import { ConfirmModal } from '../../ui/modal.tsx'
+import type { SnapshotInfo } from './types.ts'
+import { formatDate, type UseGoldenSyncReturn } from './use-golden-sync.ts'
+
+export interface SnapshotManagerProps {
+  sync: UseGoldenSyncReturn
+}
+
+export function SnapshotManager({ sync }: SnapshotManagerProps) {
+  const {
+    manifest,
+    manifestLoading,
+    snapshotBusy,
+    loadManifest,
+    handleCreateSnapshot,
+    handleRestoreSnapshot,
+    handlePinSnapshot,
+    handleDeleteSnapshot,
+  } = sync
+
+  const [newDescription, setNewDescription] = useState('')
+  const [restoreTarget, setRestoreTarget] = useState<SnapshotInfo | null>(null)
+  const [restoreResetLive, setRestoreResetLive] = useState(true)
+  const [deleteTarget, setDeleteTarget] = useState<SnapshotInfo | null>(null)
+
+  const onCreate = async () => {
+    await handleCreateSnapshot(newDescription || undefined)
+    setNewDescription('')
+  }
+
+  const onRestore = async () => {
+    if (!restoreTarget) return
+    await handleRestoreSnapshot(restoreTarget.version, restoreResetLive)
+    setRestoreTarget(null)
+  }
+
+  const onDelete = async () => {
+    if (!deleteTarget) return
+    await handleDeleteSnapshot(deleteTarget.version)
+    setDeleteTarget(null)
+  }
+
+  if (manifestLoading && !manifest) {
+    return <div className="text-sm text-[#6c7086] text-center py-8">Loading snapshots...</div>
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Create Snapshot */}
+      <div className="bg-[#181825] rounded-lg p-4 border border-[#313244]">
+        <div className="flex items-center gap-3 mb-3">
+          <Plus className="w-5 h-5 text-green-400" />
+          <h4 className="text-[#cdd6f4] font-medium">Create Snapshot</h4>
+        </div>
+        <p className="text-xs text-[#585b70] mb-3">
+          Archives the current live state. If components differ from golden, their patch version is auto-bumped.
+        </p>
+        <div className="flex gap-2">
+          <div className="flex-1">
+            <Input
+              value={newDescription}
+              onChange={setNewDescription}
+              placeholder="Optional description..."
+              size="sm"
+              variant="outline"
+            />
+          </div>
+          <IconButton
+            icon={snapshotBusy ? <Loader2 className="animate-spin" /> : <Archive />}
+            onClick={onCreate}
+            disabled={snapshotBusy}
+            size="sm"
+            color="green"
+            tooltip={{ title: 'Create snapshot', description: 'Archive current live state' }}
+          />
+        </div>
+      </div>
+
+      {/* Snapshots List */}
+      <div className="bg-[#181825] rounded-lg border border-[#313244] overflow-hidden">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-[#313244]">
+          <div className="flex items-center gap-2">
+            <Archive className="w-4 h-4 text-[#6c7086]" />
+            <h4 className="text-[#cdd6f4] font-medium">Snapshots</h4>
+            <span className="text-xs text-[#6c7086]">({manifest?.snapshots.length ?? 0})</span>
+          </div>
+          <IconButton
+            icon={manifestLoading ? <Loader2 className="animate-spin" /> : <RotateCcw />}
+            onClick={loadManifest}
+            disabled={manifestLoading}
+            size="xs"
+            color="neutral"
+            tooltip={{ title: 'Refresh', description: 'Reload snapshot list' }}
+          />
+        </div>
+
+        {!manifest || manifest.snapshots.length === 0 ? (
+          <div className="text-sm text-[#6c7086] text-center py-8">No snapshots yet</div>
+        ) : (
+          <div className="divide-y divide-[#313244]">
+            {[...manifest.snapshots].reverse().map((snap) => (
+              <div
+                key={snap.version}
+                className={`flex items-center gap-3 px-4 py-3 ${
+                  snap.version === manifest.activeVersion ? 'bg-green-500/5' : ''
+                }`}
+              >
+                {/* Version + info */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-mono text-[#cdd6f4]">v{snap.version}</span>
+                    {snap.version === manifest.activeVersion && (
+                      <span className="px-1.5 py-0.5 bg-green-500/20 text-green-400 text-[10px] rounded font-medium">
+                        active
+                      </span>
+                    )}
+                    {snap.pinned && (
+                      <Pin className="w-3 h-3 text-amber-400" />
+                    )}
+                    {snap.metaVersion && (
+                      <span className="text-xs text-[#585b70] font-mono">{snap.metaVersion}</span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span className="text-xs text-[#585b70]">{formatDate(snap.createdAt)}</span>
+                    {snap.description && (
+                      <span className="text-xs text-[#6c7086] truncate">{snap.description}</span>
+                    )}
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="flex items-center gap-1 flex-shrink-0">
+                  <IconButton
+                    icon={snap.pinned ? <PinOff /> : <Pin />}
+                    onClick={() => handlePinSnapshot(snap.version, !snap.pinned)}
+                    disabled={snapshotBusy}
+                    size="xs"
+                    color={snap.pinned ? 'amber' : 'neutral'}
+                    tooltip={{
+                      title: snap.pinned ? 'Unpin' : 'Pin',
+                      description: snap.pinned ? 'Allow auto-pruning' : 'Protect from auto-pruning',
+                    }}
+                  />
+                  <IconButton
+                    icon={<RotateCcw />}
+                    onClick={() => { setRestoreTarget(snap); setRestoreResetLive(true) }}
+                    disabled={snapshotBusy}
+                    size="xs"
+                    color="blue"
+                    tooltip={{ title: 'Restore', description: 'Restore golden from this snapshot' }}
+                  />
+                  <IconButton
+                    icon={<Trash2 />}
+                    onClick={() => setDeleteTarget(snap)}
+                    disabled={snapshotBusy || snap.pinned}
+                    size="xs"
+                    color="red"
+                    tooltip={{
+                      title: 'Delete',
+                      description: snap.pinned ? 'Unpin first to delete' : 'Delete this snapshot',
+                    }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Restore Confirmation */}
+      <ConfirmModal
+        isOpen={!!restoreTarget}
+        onClose={() => setRestoreTarget(null)}
+        title={`Restore Snapshot v${restoreTarget?.version}`}
+        kind="warning"
+        message={`This will overwrite golden with snapshot v${restoreTarget?.version}. ${restoreResetLive ? 'Live files will also be reset to match.' : 'Live files will be kept as-is.'}`}
+        confirmColor="blue"
+        onConfirm={onRestore}
+        isLoading={snapshotBusy}
+      />
+
+      {/* Delete Confirmation */}
+      <ConfirmModal
+        isOpen={!!deleteTarget}
+        onClose={() => setDeleteTarget(null)}
+        title={`Delete Snapshot v${deleteTarget?.version}`}
+        kind="error"
+        message={`This will permanently delete snapshot v${deleteTarget?.version}. This action cannot be undone.`}
+        confirmColor="red"
+        onConfirm={onDelete}
+        isLoading={snapshotBusy}
+      />
+    </div>
+  )
+}