@toolr/ui-design 0.1.0

package/components/sections/snapshot-browser/index.ts

@@ -0,0 +1,53 @@
+/**
+ * Snapshot Browser — Section barrel export
+ *
+ * This section provides a complete, reusable snapshot management feature
+ * with a hierarchical tree browser, search, and delete capabilities.
+ *
+ * File structure:
+ * - snapshot-browser-panel.tsx — Main panel component (drop-in usage)
+ * - snapshot-tree.tsx          — Hierarchical tree sub-component
+ * - use-snapshot-browser.ts    — Tree state & search hook
+ * - types.ts                   — Data types and API interface
+ *
+ * Quick start for consuming apps:
+ *   import { SnapshotBrowserPanel } from '@toolr/ui-design'
+ *
+ *   <SnapshotBrowserPanel
+ *     api={{ deleteSnapshot, clearAllSnapshots }}
+ *     scopes={scopes}
+ *     snapshotLimit={20}
+ *     onSnapshotLimitChange={setLimit}
+ *     onClearAll={handleClearAll}
+ *   />
+ *
+ * Data hierarchy:
+ *   SnapshotScope → SnapshotCategory → SnapshotItem → SnapshotEntry
+ *
+ * Example scope structure:
+ *   { id: 'settings', name: 'Settings (Prompts)', categories: [
+ *     { id: 'verifier', name: 'Verifier Prompts', items: [
+ *       { id: 'system-prompt', name: 'System Prompt', snapshots: [
+ *         { id: 'snap-1', content: '...', savedAt: '2026-02-25T10:00:00Z' }
+ *       ]}
+ *     ]}
+ *   ]}
+ */
+
+// Main panel component
+export { SnapshotBrowserPanel, type SnapshotBrowserPanelProps } from './snapshot-browser-panel.tsx'
+
+// Tree sub-component (standalone usage)
+export { SnapshotTree, type SnapshotTreeProps } from './snapshot-tree.tsx'
+
+// Hook for custom UIs
+export { useSnapshotBrowser, type UseSnapshotBrowserOptions, type UseSnapshotBrowserReturn } from './use-snapshot-browser.ts'
+
+// Data types and API interface
+export type {
+  SnapshotEntry,
+  SnapshotItem,
+  SnapshotCategory,
+  SnapshotScope,
+  SnapshotBrowserApi,
+} from './types.ts'

package/components/sections/snapshot-browser/snapshot-browser-panel.tsx

@@ -0,0 +1,147 @@
+/**
+ * SnapshotBrowserPanel — Self-contained snapshot management panel
+ *
+ * Part of: Sections > Snapshot Browser
+ *
+ * This is the main "drop in and it works" component. Replicate the configr
+ * app's Settings > General > Snapshots page as a reusable panel. Provide
+ * scopes data, an API adapter, and snapshot limit controls.
+ *
+ * Usage:
+ *   <SnapshotBrowserPanel
+ *     api={snapshotApi}
+ *     scopes={scopes}
+ *     snapshotLimit={20}
+ *     onSnapshotLimitChange={setLimit}
+ *     onClearAll={handleClearAll}
+ *   />
+ *
+ * AI agent notes:
+ * - This component manages tree expansion state internally via useSnapshotBrowser hook
+ * - It renders: snapshot limit selector, hierarchical tree browser, help section
+ * - The api prop bridges to the app backend (Tauri commands, REST, etc.)
+ * - Consuming apps provide scopes data and handle persistence
+ * - Uses ui-design components (Select, IconButton, Input) for consistency
+ */
+
+import { Trash2, HelpCircle } from 'lucide-react'
+import { cn } from '../../lib/cn.ts'
+import { Select } from '../../ui/select.tsx'
+import { IconButton } from '../../ui/icon-button.tsx'
+import { SnapshotTree } from './snapshot-tree.tsx'
+import { useSnapshotBrowser } from './use-snapshot-browser.ts'
+import type { SnapshotScope, SnapshotBrowserApi } from './types.ts'
+
+const SNAPSHOT_LIMIT_OPTIONS = [5, 10, 15, 20, 25, 30, 40, 50].map((n) => ({
+  value: n,
+  label: String(n),
+}))
+
+export interface SnapshotBrowserPanelProps {
+  api: SnapshotBrowserApi
+  scopes: SnapshotScope[]
+  snapshotLimit: number
+  onSnapshotLimitChange: (limit: number) => void
+  onClearAll?: () => void
+  className?: string
+}
+
+export function SnapshotBrowserPanel({
+  api,
+  scopes,
+  snapshotLimit,
+  onSnapshotLimitChange,
+  onClearAll,
+  className,
+}: SnapshotBrowserPanelProps) {
+  const {
+    searchQuery,
+    setSearchQuery,
+    expandedPaths,
+    toggleExpand,
+    expandAll,
+    collapseAll,
+    allExpanded,
+    totalSnapshotCount,
+    allExpandablePaths,
+    deleteSnapshot,
+    deletingSnapshotId,
+  } = useSnapshotBrowser({ scopes, api })
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      {/* Snapshot Limit */}
+      <div className="bg-[#181825] border border-[#313244] rounded-lg p-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <label className="text-[#cdd6f4]">Snapshot Limit</label>
+            <p className="text-sm text-[#6c7086]">
+              Maximum number of snapshots to keep per item (1-50)
+            </p>
+          </div>
+          <Select
+            value={snapshotLimit}
+            options={SNAPSHOT_LIMIT_OPTIONS}
+            onChange={(v) => onSnapshotLimitChange(v)}
+          />
+        </div>
+      </div>
+
+      {/* Snapshot Browser */}
+      <div className="bg-[#181825] border border-[#313244] rounded-lg p-4">
+        <div className="flex items-center justify-between mb-3">
+          <div>
+            <label className="text-[#cdd6f4]">Browse Snapshots</label>
+            <p className="text-sm text-[#6c7086]">
+              {totalSnapshotCount === 0
+                ? 'No snapshots saved yet'
+                : `${totalSnapshotCount} snapshot${totalSnapshotCount === 1 ? '' : 's'} stored`}
+            </p>
+          </div>
+          <IconButton
+            icon={<Trash2 className="w-4 h-4" />}
+            onClick={() => onClearAll?.()}
+            disabled={totalSnapshotCount === 0 || !onClearAll}
+            size="sm"
+            color="red"
+            tooltip={{
+              title: 'Clear all snapshots',
+              description: 'Delete all saved snapshots',
+            }}
+          />
+        </div>
+        <SnapshotTree
+          scopes={scopes}
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          expandedPaths={expandedPaths}
+          onToggleExpand={toggleExpand}
+          onExpandAll={expandAll}
+          onCollapseAll={collapseAll}
+          allExpanded={allExpanded}
+          allExpandablePaths={allExpandablePaths}
+          onDeleteSnapshot={deleteSnapshot}
+          deletingSnapshotId={deletingSnapshotId}
+        />
+      </div>
+
+      {/* Help */}
+      <div className="bg-[#181825]/50 border border-[#313244] rounded-lg p-4">
+        <div className="flex items-start gap-3">
+          <HelpCircle className="w-4 h-4 text-[#6c7086] mt-0.5 shrink-0" />
+          <div className="text-sm text-[#6c7086] space-y-2">
+            <p>
+              <strong className="text-[#a6adc8]">How snapshots work:</strong>
+            </p>
+            <ul className="list-disc list-inside space-y-1 ml-1">
+              <li>Click &ldquo;Save Snapshot&rdquo; in any editor to save the current version</li>
+              <li>When resetting content, you can choose from saved snapshots or the file default</li>
+              <li>Snapshots are stored locally and persist across sessions</li>
+              <li>When the limit is reached, the oldest snapshot is removed</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/components/sections/snapshot-browser/snapshot-tree.tsx

@@ -0,0 +1,451 @@
+/**
+ * SnapshotTree — Hierarchical tree browser for viewing and managing snapshots
+ *
+ * Part of: Sections > Snapshot Browser
+ *
+ * Renders a 4-level tree: Scope > Category > Item > Snapshot
+ * with search filtering, expand/collapse all, and delete actions.
+ *
+ * Ported from configr's SnapshotBrowser component, decoupled from Zustand stores.
+ */
+
+import { useMemo } from 'react'
+import {
+  ChevronRight,
+  ChevronDown,
+  Search,
+  X,
+  ChevronsUpDown,
+  ChevronsDownUp,
+  Trash2,
+  History,
+  Clock,
+} from 'lucide-react'
+import { cn } from '../../lib/cn.ts'
+import { Input } from '../../ui/input.tsx'
+import { IconButton } from '../../ui/icon-button.tsx'
+import type { SnapshotScope, SnapshotCategory, SnapshotItem, SnapshotEntry } from './types.ts'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatRelativeTime(isoString: string): string {
+  const date = new Date(isoString)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+  const diffDays = Math.floor(diffMs / 86400000)
+
+  if (diffMins < 1) return 'Just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffHours < 24) return `${diffHours}h ago`
+  if (diffDays < 7) return `${diffDays}d ago`
+
+  return date.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+function formatFullDate(isoString: string): string {
+  const date = new Date(isoString)
+  return date.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+function getContentPreview(content: string, maxLength = 40): string {
+  const firstNonEmptyLine = content.split('\n').find((line) => line.trim()) ?? ''
+  const cleaned = firstNonEmptyLine.replace(/^[#/*\-\s]+/, '').trim()
+  if (cleaned.length <= maxLength) return cleaned
+  return cleaned.slice(0, maxLength - 3) + '...'
+}
+
+function countScopeSnapshots(scope: SnapshotScope): number {
+  let count = 0
+  for (const cat of scope.categories) {
+    for (const item of cat.items) {
+      count += item.snapshots.length
+    }
+  }
+  return count
+}
+
+function countCategorySnapshots(category: SnapshotCategory): number {
+  let count = 0
+  for (const item of category.items) {
+    count += item.snapshots.length
+  }
+  return count
+}
+
+// ---------------------------------------------------------------------------
+// Category icon mapping
+// ---------------------------------------------------------------------------
+
+const CATEGORY_ICON_COLORS: Record<string, string> = {
+  verifier: 'text-teal-400',
+  simulator: 'text-purple-400',
+  console: 'text-blue-400',
+  skills: 'text-yellow-400',
+  hooks: 'text-green-400',
+  agents: 'text-violet-400',
+  'project-memory': 'text-indigo-400',
+}
+
+// ---------------------------------------------------------------------------
+// Search filtering
+// ---------------------------------------------------------------------------
+
+function filterScopes(scopes: SnapshotScope[], query: string): SnapshotScope[] {
+  if (!query.trim()) return scopes
+
+  const lowerQuery = query.toLowerCase()
+
+  return scopes
+    .map((scope) => {
+      if (scope.name.toLowerCase().includes(lowerQuery)) return scope
+
+      const filteredCategories = scope.categories
+        .map((cat) => {
+          if (cat.name.toLowerCase().includes(lowerQuery)) return cat
+
+          const filteredItems = cat.items
+            .map((item) => {
+              if (item.name.toLowerCase().includes(lowerQuery)) return item
+
+              const filteredSnapshots = item.snapshots.filter((snap) => {
+                const label = snap.label || getContentPreview(snap.content)
+                return label.toLowerCase().includes(lowerQuery)
+              })
+
+              if (filteredSnapshots.length > 0) {
+                return { ...item, snapshots: filteredSnapshots }
+              }
+              return null
+            })
+            .filter((item): item is SnapshotItem => item !== null)
+
+          if (filteredItems.length > 0) {
+            return { ...cat, items: filteredItems }
+          }
+          return null
+        })
+        .filter((cat): cat is SnapshotCategory => cat !== null)
+
+      if (filteredCategories.length > 0) {
+        return { ...scope, categories: filteredCategories }
+      }
+      return null
+    })
+    .filter((scope): scope is SnapshotScope => scope !== null)
+}
+
+function highlightMatch(text: string, query: string) {
+  if (!query) return text
+  const lowerText = text.toLowerCase()
+  const lowerQuery = query.toLowerCase()
+  const index = lowerText.indexOf(lowerQuery)
+  if (index === -1) return text
+  return (
+    <>
+      {text.slice(0, index)}
+      <span className="bg-yellow-500/30 text-yellow-200">{text.slice(index, index + query.length)}</span>
+      {text.slice(index + query.length)}
+    </>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Tree node components
+// ---------------------------------------------------------------------------
+
+interface SnapshotEntryRowProps {
+  entry: SnapshotEntry
+  depth: number
+  scopeId: string
+  categoryId: string
+  itemId: string
+  onDelete: (scopeId: string, categoryId: string, itemId: string, snapshotId: string) => void
+  deletingSnapshotId: string | null
+  searchQuery: string
+}
+
+function SnapshotEntryRow({
+  entry,
+  depth,
+  scopeId,
+  categoryId,
+  itemId,
+  onDelete,
+  deletingSnapshotId,
+  searchQuery,
+}: SnapshotEntryRowProps) {
+  const displayName = entry.label || getContentPreview(entry.content) || 'Snapshot'
+  const isDeleting = deletingSnapshotId === entry.id
+
+  return (
+    <div
+      className="flex items-center gap-2 px-2 py-1.5 text-sm rounded-md group transition-colors hover:bg-[#313244]/50 text-[#a6adc8]"
+      style={{ paddingLeft: `${depth * 16 + 8}px` }}
+    >
+      <Clock className="w-3 h-3 shrink-0 text-[#6c7086]" />
+      <span className="text-xs flex-1 truncate">
+        {searchQuery ? highlightMatch(displayName, searchQuery) : displayName}
+      </span>
+      <span className="text-[10px] text-[#6c7086] shrink-0" title={formatFullDate(entry.savedAt)}>
+        {formatRelativeTime(entry.savedAt)}
+      </span>
+      <IconButton
+        icon={<Trash2 className="w-3.5 h-3.5" />}
+        onClick={(e) => {
+          e?.stopPropagation()
+          onDelete(scopeId, categoryId, itemId, entry.id)
+        }}
+        size="sm"
+        color="red"
+        className={cn('transition-opacity', isDeleting ? 'opacity-50' : 'opacity-0 group-hover:opacity-100')}
+        disabled={isDeleting}
+        tooltip={{ title: 'Delete', description: 'Delete this snapshot' }}
+      />
+    </div>
+  )
+}
+
+interface ExpandableNodeProps {
+  id: string
+  path: string
+  label: string
+  icon?: React.ReactNode
+  snapshotCount: number
+  depth: number
+  isExpanded: boolean
+  onToggle: (path: string) => void
+  searchQuery: string
+  children: React.ReactNode
+}
+
+function ExpandableNode({
+  path,
+  label,
+  icon,
+  snapshotCount,
+  depth,
+  isExpanded,
+  onToggle,
+  searchQuery,
+  children,
+}: ExpandableNodeProps) {
+  return (
+    <div>
+      <button
+        onClick={() => onToggle(path)}
+        className="w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer text-[#a6adc8] hover:bg-[#313244]/50 hover:text-[#cdd6f4]"
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+      >
+        <span className="w-4 h-4 flex items-center justify-center shrink-0">
+          {isExpanded ? (
+            <ChevronDown className="w-3.5 h-3.5" />
+          ) : (
+            <ChevronRight className="w-3.5 h-3.5" />
+          )}
+        </span>
+
+        {icon && <span className="shrink-0">{icon}</span>}
+
+        <span className="truncate flex-1 text-left">
+          {searchQuery ? highlightMatch(label, searchQuery) : label}
+        </span>
+
+        {snapshotCount > 0 && (
+          <span className="text-xs text-[#6c7086] bg-[#313244] px-1.5 py-0.5 rounded shrink-0">
+            {snapshotCount}
+          </span>
+        )}
+      </button>
+
+      {isExpanded && children}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Main SnapshotTree component
+// ---------------------------------------------------------------------------
+
+export interface SnapshotTreeProps {
+  scopes: SnapshotScope[]
+  searchQuery: string
+  onSearchChange: (query: string) => void
+  expandedPaths: Set<string>
+  onToggleExpand: (path: string) => void
+  onExpandAll: () => void
+  onCollapseAll: () => void
+  allExpanded: boolean
+  allExpandablePaths: string[]
+  onDeleteSnapshot: (scopeId: string, categoryId: string, itemId: string, snapshotId: string) => void
+  deletingSnapshotId: string | null
+  className?: string
+}
+
+export function SnapshotTree({
+  scopes,
+  searchQuery,
+  onSearchChange,
+  expandedPaths,
+  onToggleExpand,
+  onExpandAll,
+  onCollapseAll,
+  allExpanded,
+  allExpandablePaths,
+  onDeleteSnapshot,
+  deletingSnapshotId,
+  className,
+}: SnapshotTreeProps) {
+  const filteredScopes = useMemo(() => filterScopes(scopes, searchQuery), [scopes, searchQuery])
+
+  const totalCount = useMemo(() => {
+    let count = 0
+    for (const scope of scopes) {
+      count += countScopeSnapshots(scope)
+    }
+    return count
+  }, [scopes])
+
+  if (totalCount === 0) {
+    return (
+      <div className={cn('text-sm text-[#6c7086] py-8 text-center', className)}>
+        No snapshots saved yet.
+        <br />
+        <span className="text-xs">Use the camera button in editors to save snapshots.</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-3', className)}>
+      {/* Search and controls */}
+      <div className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#6c7086] pointer-events-none" />
+          <Input
+            placeholder="Search snapshots..."
+            value={searchQuery}
+            onChange={onSearchChange}
+            variant="outline"
+            size="sm"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck={false}
+            className="pl-8 pr-7"
+          />
+          {searchQuery && (
+            <IconButton
+              icon={<X className="w-3.5 h-3.5" />}
+              onClick={() => onSearchChange('')}
+              color="neutral"
+              size="xss"
+              className="absolute right-2 top-1/2 -translate-y-1/2"
+              tooltip={{ title: 'Clear', description: 'Clear search' }}
+            />
+          )}
+        </div>
+
+        {allExpandablePaths.length > 0 && (
+          <IconButton
+            icon={allExpanded ? <ChevronsDownUp className="w-3.5 h-3.5" /> : <ChevronsUpDown className="w-3.5 h-3.5" />}
+            onClick={allExpanded ? onCollapseAll : onExpandAll}
+            size="sm"
+            color="neutral"
+            tooltip={{
+              title: allExpanded ? 'Collapse All' : 'Expand All',
+              description: allExpanded ? 'Collapse all sections' : 'Expand all sections',
+            }}
+          />
+        )}
+      </div>
+
+      {/* Tree */}
+      <div className="bg-[#181825] border border-[#313244] rounded-lg p-2 min-h-[200px] max-h-[60vh] overflow-y-auto">
+        {filteredScopes.length === 0 && searchQuery ? (
+          <p className="text-xs text-[#6c7086] text-center py-4">
+            No snapshots match &ldquo;{searchQuery}&rdquo;
+          </p>
+        ) : (
+          filteredScopes.map((scope) => (
+            <ExpandableNode
+              key={scope.id}
+              id={scope.id}
+              path={scope.id}
+              label={scope.name}
+              snapshotCount={countScopeSnapshots(scope)}
+              depth={0}
+              isExpanded={expandedPaths.has(scope.id)}
+              onToggle={onToggleExpand}
+              searchQuery={searchQuery}
+            >
+              {scope.categories.map((category) => (
+                <ExpandableNode
+                  key={category.id}
+                  id={category.id}
+                  path={`${scope.id}/${category.id}`}
+                  label={category.name}
+                  icon={
+                    category.icon ? (
+                      <History className={cn('w-3.5 h-3.5', CATEGORY_ICON_COLORS[category.icon] || 'text-[#6c7086]')} />
+                    ) : undefined
+                  }
+                  snapshotCount={countCategorySnapshots(category)}
+                  depth={1}
+                  isExpanded={expandedPaths.has(`${scope.id}/${category.id}`)}
+                  onToggle={onToggleExpand}
+                  searchQuery={searchQuery}
+                >
+                  {category.items.map((item) => (
+                    <ExpandableNode
+                      key={item.id}
+                      id={item.id}
+                      path={`${scope.id}/${category.id}/${item.id}`}
+                      label={item.name}
+                      icon={<History className="w-3.5 h-3.5 text-[#6c7086]" />}
+                      snapshotCount={item.snapshots.length}
+                      depth={2}
+                      isExpanded={expandedPaths.has(`${scope.id}/${category.id}/${item.id}`)}
+                      onToggle={onToggleExpand}
+                      searchQuery={searchQuery}
+                    >
+                      {[...item.snapshots]
+                        .sort((a, b) => new Date(b.savedAt).getTime() - new Date(a.savedAt).getTime())
+                        .map((entry) => (
+                          <SnapshotEntryRow
+                            key={entry.id}
+                            entry={entry}
+                            depth={3}
+                            scopeId={scope.id}
+                            categoryId={category.id}
+                            itemId={item.id}
+                            onDelete={onDeleteSnapshot}
+                            deletingSnapshotId={deletingSnapshotId}
+                            searchQuery={searchQuery}
+                          />
+                        ))}
+                    </ExpandableNode>
+                  ))}
+                </ExpandableNode>
+              ))}
+            </ExpandableNode>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}