@toolr/ui-design 0.1.0

package/components/sections/ai-tools-paths/types.ts

@@ -0,0 +1,111 @@
+/**
+ * AI Tools Paths — Shared type definitions
+ *
+ * Part of: Sections > AI Tools Paths
+ *
+ * These types define the CONTRACT between the UI layer (this package) and
+ * the Rust/Tauri backend that each app must implement. Every type here has
+ * a 1:1 mapping to a Rust struct returned by Tauri commands.
+ *
+ * IMPORTANT FOR AI AGENTS:
+ * When adding a new field here, the corresponding Rust struct must also be
+ * updated (and vice versa). The serde rename attributes in Rust use camelCase
+ * to match these TypeScript interfaces.
+ *
+ * Generic design:
+ * - Tools are keyed by string ID (not hardcoded to specific tools)
+ * - Configr uses: "claude", "gemini", "copilot", "codex", "opencode"
+ * - Other apps can define their own tool sets
+ * - The UI renders whatever tools the consumer provides
+ */
+
+// ---------------------------------------------------------------------------
+// Tool configuration
+// ---------------------------------------------------------------------------
+
+/** Per-tool configuration state */
+export interface AiToolConfig {
+  /** Unique identifier for the tool (e.g. "claude", "gemini") */
+  id: string
+  /** Display name (e.g. "Claude Code", "Gemini CLI") */
+  name: string
+  /** Whether the tool is enabled for use */
+  enabled: boolean
+  /** User-configured or auto-detected binary path */
+  binaryPath: string
+  /** Whether the tool was found during detection */
+  detected: boolean
+  /** Path found by auto-detection (may differ from binaryPath if user overrode it) */
+  detectedPath?: string
+}
+
+// ---------------------------------------------------------------------------
+// Detection results
+// ---------------------------------------------------------------------------
+
+/** Result of detecting a single tool's binary */
+export interface ToolDetectionResult {
+  /** Whether the binary was found */
+  detected: boolean
+  /** Resolved path to the binary, if found */
+  path?: string
+}
+
+// ---------------------------------------------------------------------------
+// API adapter interface
+// ---------------------------------------------------------------------------
+
+/**
+ * ToolsPathsApi — The callback interface that each app must implement.
+ *
+ * This is the bridge between the shared UI and the app-specific backend.
+ * Each function maps to a Tauri command (or any other backend).
+ *
+ * ┌─────────────────────────────────────────────────────────────────────┐
+ * │ RUST BACKEND IMPLEMENTATION GUIDE                                   │
+ * │                                                                     │
+ * │ Each method below corresponds to a Tauri #[tauri::command].         │
+ * │ The Rust reference implementation lives in:                         │
+ * │   configr/main/src-tauri/src/commands/tools/                        │
+ * │     ├── mod.rs          — Types + helpers                           │
+ * │     └── detection.rs    — Binary detection logic                    │
+ * │                                                                     │
+ * │ REQUIRED Tauri commands for full functionality:                      │
+ * │                                                                     │
+ * │ DETECTION:                                                          │
+ * │   detect_all_tools() → Record<string, ToolDetectionResult>          │
+ * │     Scans PATH and known install locations for all tool binaries.    │
+ * │     Returns a map of tool ID → detection result.                    │
+ * │                                                                     │
+ * │   detect_tool(toolId) → ToolDetectionResult                         │
+ * │     Scans for a single tool binary. Used for per-tool refresh.      │
+ * │                                                                     │
+ * │ VALIDATION:                                                         │
+ * │   validate_binary_path(path) → bool                                 │
+ * │     Checks if a given path points to a valid executable.            │
+ * │     Typically: fs::metadata(path).is_ok() && is_executable(path)    │
+ * │                                                                     │
+ * │ DETECTION STRATEGY (Rust backend should implement):                 │
+ * │ 1. Check PATH environment variable (which <tool-binary>)            │
+ * │ 2. Check common install locations:                                  │
+ * │    - /usr/local/bin/<binary>                                        │
+ * │    - /opt/homebrew/bin/<binary>                                      │
+ * │    - ~/.local/bin/<binary>                                           │
+ * │    - ~/.cargo/bin/<binary> (for Rust-based tools)                    │
+ * │    - ~/.npm/bin/<binary> (for npm-based tools)                       │
+ * │ 3. Check tool-specific locations:                                   │
+ * │    - Claude: ~/.claude/bin/claude                                    │
+ * │    - Copilot: gh extension path                                     │
+ * │ 4. Return first valid path found, or detected: false                │
+ * └─────────────────────────────────────────────────────────────────────┘
+ */
+export interface ToolsPathsApi {
+  /** Scan all tools and return detection results keyed by tool ID */
+  detectAll: () => Promise<Record<string, ToolDetectionResult>>
+
+  /** Scan a single tool and return its detection result */
+  detectTool: (toolId: string) => Promise<ToolDetectionResult>
+
+  /** Check if a given binary path is valid (exists and is executable) */
+  validatePath: (path: string) => Promise<boolean>
+}

package/components/sections/ai-tools-paths/use-tools-paths.ts

@@ -0,0 +1,159 @@
+/**
+ * useToolsPaths — Tool detection and configuration state hook
+ *
+ * Part of: Sections > AI Tools Paths
+ *
+ * Manages tool detection state, per-tool refresh tracking, and path validation.
+ * Used internally by ToolsPathsPanel but can also be used standalone for
+ * custom UIs.
+ *
+ * AI agent notes:
+ * - This hook does NOT store tool configs — the consumer owns that state.
+ *   It only manages detection/scanning ephemeral state.
+ * - The hook tracks which tools have been scanned, which are currently
+ *   refreshing, and whether a full scan has completed.
+ * - Path validation is debounced by the consumer (typically on blur or
+ *   after typing stops).
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react'
+import type { AiToolConfig, ToolsPathsApi, ToolDetectionResult } from './types.ts'
+
+export interface UseToolsPathsOptions {
+  api: ToolsPathsApi
+  tools: AiToolConfig[]
+  onToolConfigChange: (toolId: string, config: Partial<AiToolConfig>) => void
+}
+
+export interface UseToolsPathsReturn {
+  /** Whether a full scan is in progress */
+  isDetecting: boolean
+  /** Whether a full scan has completed at least once */
+  hasScanned: boolean
+  /** Set of tool IDs currently being individually refreshed */
+  refreshingTools: Set<string>
+  /** Set of tool IDs that were found during the last scan */
+  scannedTools: Set<string>
+  /** Run detection for all tools */
+  detectAll: () => Promise<void>
+  /** Run detection for a single tool */
+  detectTool: (toolId: string) => Promise<void>
+  /** Validate and update a tool's binary path */
+  validateAndUpdatePath: (toolId: string, path: string) => Promise<void>
+  /** Toggle a tool's enabled state */
+  toggleEnabled: (toolId: string) => void
+}
+
+export function useToolsPaths({ api, tools, onToolConfigChange }: UseToolsPathsOptions): UseToolsPathsReturn {
+  const [isDetecting, setIsDetecting] = useState(false)
+  const [hasScanned, setHasScanned] = useState(false)
+  const [refreshingTools, setRefreshingTools] = useState<Set<string>>(new Set())
+  const [scannedTools, setScannedTools] = useState<Set<string>>(new Set())
+  const wasDetectingRef = useRef(false)
+
+  // Track when full detection completes
+  useEffect(() => {
+    if (wasDetectingRef.current && !isDetecting) {
+      setHasScanned(true)
+    }
+    wasDetectingRef.current = isDetecting
+  }, [isDetecting])
+
+  const detectAll = useCallback(async () => {
+    setIsDetecting(true)
+    try {
+      const results = await api.detectAll()
+      const detected = new Set<string>()
+
+      for (const tool of tools) {
+        const result = results[tool.id]
+        if (result) {
+          onToolConfigChange(tool.id, {
+            detected: result.detected,
+            detectedPath: result.path,
+            binaryPath: result.path || tool.binaryPath,
+          })
+          if (result.detected) {
+            detected.add(tool.id)
+          }
+        }
+      }
+
+      setScannedTools(detected)
+    } finally {
+      setIsDetecting(false)
+    }
+  }, [api, tools, onToolConfigChange])
+
+  const detectTool = useCallback(async (toolId: string) => {
+    setRefreshingTools((prev) => new Set(prev).add(toolId))
+    try {
+      const result: ToolDetectionResult = await api.detectTool(toolId)
+      onToolConfigChange(toolId, {
+        detected: result.detected,
+        detectedPath: result.path,
+        binaryPath: result.path || '',
+      })
+      setScannedTools((prev) => {
+        const next = new Set(prev)
+        if (result.detected) {
+          next.add(toolId)
+        } else {
+          next.delete(toolId)
+        }
+        return next
+      })
+    } finally {
+      setRefreshingTools((prev) => {
+        const next = new Set(prev)
+        next.delete(toolId)
+        return next
+      })
+    }
+  }, [api, onToolConfigChange])
+
+  const validateAndUpdatePath = useCallback(async (toolId: string, path: string) => {
+    onToolConfigChange(toolId, { binaryPath: path })
+    setScannedTools((prev) => {
+      const next = new Set(prev)
+      next.delete(toolId)
+      return next
+    })
+    setHasScanned(false)
+
+    if (path.trim()) {
+      try {
+        const isValid = await api.validatePath(path.trim())
+        onToolConfigChange(toolId, {
+          binaryPath: path.trim(),
+          detected: isValid,
+          detectedPath: isValid ? path.trim() : undefined,
+        })
+      } catch {
+        onToolConfigChange(toolId, {
+          binaryPath: path.trim(),
+          detected: false,
+          detectedPath: undefined,
+        })
+      }
+    }
+  }, [api, onToolConfigChange])
+
+  const toggleEnabled = useCallback((toolId: string) => {
+    const tool = tools.find((t) => t.id === toolId)
+    if (tool) {
+      onToolConfigChange(toolId, { enabled: !tool.enabled })
+    }
+  }, [tools, onToolConfigChange])
+
+  return {
+    isDetecting,
+    hasScanned,
+    refreshingTools,
+    scannedTools,
+    detectAll,
+    detectTool,
+    validateAndUpdatePath,
+    toggleEnabled,
+  }
+}

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

@@ -0,0 +1,214 @@
+/**
+ * CapturedIssuesPanel — Self-contained captured issues review and reporting
+ *
+ * Part of: Sections > Captured Issues
+ *
+ * Replicates the configr "Settings > Support > Captured Issues" page as a
+ * reusable component. Shows captured errors/warnings, lets the user add
+ * context and submit a report, or dismiss. Also shows previously reported
+ * errors in a collapsible section.
+ *
+ * Usage:
+ *   <CapturedIssuesPanel
+ *     api={capturedIssuesApi}
+ *     errors={currentErrors}
+ *     onDismiss={() => logger.clearLogs()}
+ *     onSubmitSuccess={(id) => toast(`Reported ${id}`)}
+ *   />
+ *
+ * AI agent notes:
+ * - All backend calls go through the api prop (CapturedIssuesApi interface)
+ * - Errors are passed in as props — the component does not capture them itself
+ * - Uses ui-design components (Input, ResizableTextarea, IconButton) for consistency
+ * - Dark theme with Catppuccin-like colors matching configr
+ */
+
+import { AlertTriangle, Check, X, Send, ChevronDown, Shield, Loader2 } from 'lucide-react'
+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 { useCapturedIssues } from './use-captured-issues.ts'
+import type { CapturedError, CapturedIssuesApi } from './types.ts'
+
+export interface CapturedIssuesPanelProps {
+  /** Backend API implementation */
+  api: CapturedIssuesApi
+  /** Current captured errors to display */
+  errors: CapturedError[]
+  /** Called after errors are dismissed */
+  onDismiss?: () => void
+  /** Called after successful submission */
+  onSubmitSuccess?: (issueId?: string) => void
+  className?: string
+}
+
+export function CapturedIssuesPanel({
+  api,
+  errors,
+  onDismiss,
+  onSubmitSuccess,
+  className,
+}: CapturedIssuesPanelProps) {
+  const {
+    errorCount,
+    warnCount,
+    title,
+    setTitle,
+    description,
+    setDescription,
+    email,
+    setEmail,
+    isSubmitting,
+    submittedErrors,
+    handleSubmit,
+    handleDismiss,
+  } = useCapturedIssues({ api, errors, onDismiss, onSubmitSuccess })
+
+  const hasErrors = errorCount > 0 || warnCount > 0
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      {hasErrors ? (
+        <div className="bg-[#181825] border border-[#313244] rounded-lg p-4 space-y-4">
+          {/* Error Summary */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="w-4 h-4 text-red-400" />
+              <span className="text-sm text-[#cdd6f4]">
+                {errorCount > 0 && (
+                  <span className="text-red-400">
+                    {errorCount} error{errorCount !== 1 ? 's' : ''}
+                  </span>
+                )}
+                {errorCount > 0 && warnCount > 0 && <span className="text-[#6c7086]">, </span>}
+                {warnCount > 0 && (
+                  <span className="text-yellow-400">
+                    {warnCount} warning{warnCount !== 1 ? 's' : ''}
+                  </span>
+                )}
+              </span>
+            </div>
+          </div>
+
+          {/* Error List */}
+          <div className="space-y-2">
+            <p className="text-sm text-[#a6adc8]">Captured Errors</p>
+            <div className="max-h-48 overflow-y-auto bg-[#11111b] border border-[#313244] rounded-lg p-3 space-y-1">
+              {errors.map((error) => (
+                <div key={error.fingerprint} className="text-xs font-mono break-words">
+                  <span className={cn('mr-2 shrink-0', error.level === 'warning' ? 'text-yellow-400' : 'text-red-400')}>
+                    {error.count > 1 ? `\u00d7${error.count}` : '\u2022'}
+                  </span>
+                  <span className="text-[#a6adc8] break-all">{error.message}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Optional Details */}
+          <div className="space-y-3">
+            <p className="text-sm text-[#a6adc8]">Add context (optional)</p>
+            <Input
+              value={title}
+              onChange={setTitle}
+              placeholder="Brief summary of what you were doing"
+            />
+            <ResizableTextarea
+              value={description}
+              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-[#313244] border border-[#45475a] rounded-lg text-[#cdd6f4] placeholder-[#6c7086] focus:outline-none focus:border-blue-500 transition-colors resize-none text-sm"
+            />
+            <Input
+              type="text"
+              value={email}
+              onChange={setEmail}
+              placeholder="Email for follow-up"
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center justify-end gap-2 pt-2">
+            <IconButton
+              icon={<X className="w-3.5 h-3.5" />}
+              onClick={handleDismiss}
+              disabled={isSubmitting}
+              size="sm"
+              tooltip={{ title: 'Dismiss', description: 'Ignore these errors' }}
+              tooltipPosition="top"
+            />
+            <IconButton
+              icon={
+                isSubmitting ? (
+                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                ) : (
+                  <Send className="w-3.5 h-3.5" />
+                )
+              }
+              onClick={handleSubmit}
+              disabled={isSubmitting}
+              size="sm"
+              color="red"
+              tooltip={{ title: 'Send Report', description: 'Submit error report to developers' }}
+              tooltipPosition="top"
+            />
+          </div>
+        </div>
+      ) : (
+        <div className="bg-[#181825] border border-[#313244] 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" />
+            </div>
+            <div>
+              <h3 className="text-[#cdd6f4] font-medium">No Issues Captured</h3>
+              <p className="text-sm text-[#6c7086]">Everything is running smoothly.</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Previously Reported */}
+      {submittedErrors.length > 0 && (
+        <div className="bg-[#181825] border border-[#313244] rounded-lg overflow-hidden">
+          <details className="group">
+            <summary className="flex items-center justify-between p-4 cursor-pointer hover:bg-[#1e1e2e] transition-colors">
+              <div className="flex items-center gap-2">
+                <Check className="w-4 h-4 text-green-400" />
+                <span className="text-sm text-[#cdd6f4]">Previously Reported</span>
+                <span className="text-xs text-[#6c7086]">({submittedErrors.length})</span>
+              </div>
+              <ChevronDown className="w-4 h-4 text-[#6c7086] transition-transform group-open:rotate-180" />
+            </summary>
+            <div className="border-t border-[#313244] p-4 space-y-2">
+              {submittedErrors.map((error) => (
+                <div
+                  key={error.fingerprint}
+                  className="flex items-start gap-3 p-3 bg-[#11111b] border border-[#313244] rounded-lg"
+                >
+                  <Check className="w-4 h-4 text-green-400 mt-0.5 shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <p
+                      className="text-sm text-[#cdd6f4] font-mono truncate"
+                      title={error.message}
+                    >
+                      {error.message}
+                    </p>
+                    <div className="flex items-center gap-3 mt-1 text-xs text-[#6c7086]">
+                      {error.count > 0 && (
+                        <span className="text-yellow-400/80">+{error.count} since</span>
+                      )}
+                      <span>{new Date(error.submittedAt).toLocaleDateString()}</span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </details>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Captured Issues — Section barrel export
+ *
+ * This section provides a complete, reusable captured issues review and
+ * reporting feature. It shows captured errors/warnings, lets the user add
+ * context and submit a report, and tracks previously reported errors.
+ *
+ * File structure:
+ * - captured-issues-panel.tsx — Main panel component (drop-in usage)
+ * - use-captured-issues.ts   — State management hook (used by panel, also standalone)
+ * - types.ts                 — Types and API interface contract
+ *
+ * Quick start for consuming apps:
+ *   import { CapturedIssuesPanel, type CapturedIssuesApi } from '@toolr/ui-design'
+ *
+ *   const api: CapturedIssuesApi = {
+ *     getSystemInfo: () => invoke('get_system_info'),
+ *     submitIssue: (data) => invoke('submit_issue', data),
+ *     dismissErrors: () => invoke('dismiss_errors'),
+ *     getSubmittedErrors: () => invoke('get_submitted_errors'),
+ *   }
+ *
+ *   <CapturedIssuesPanel
+ *     api={api}
+ *     errors={currentErrors}
+ *     onDismiss={() => logger.clearLogs()}
+ *     onSubmitSuccess={(id) => toast(`Reported ${id}`)}
+ *   />
+ */
+
+// Main panel component
+export { CapturedIssuesPanel, type CapturedIssuesPanelProps } from './captured-issues-panel.tsx'
+
+// Hook for custom UIs
+export { useCapturedIssues, type UseCapturedIssuesOptions, type UseCapturedIssuesReturn } from './use-captured-issues.ts'
+
+// Types and API interface
+export type { CapturedError, SubmittedError, CapturedIssuesApi } from './types.ts'

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

@@ -0,0 +1,113 @@
+/**
+ * Captured Issues — Shared type definitions
+ *
+ * Part of: Sections > Captured Issues
+ *
+ * These types define the CONTRACT between the UI layer (this package) and
+ * the backend that each app must implement. Each type maps to a backend
+ * data structure (Rust struct, API response, etc.).
+ *
+ * IMPORTANT FOR AI AGENTS:
+ * When adding a new field here, the corresponding backend type must also be
+ * updated. Rust backends use serde rename with camelCase to match these
+ * TypeScript interfaces.
+ */
+
+// ---------------------------------------------------------------------------
+// Error entries
+// ---------------------------------------------------------------------------
+
+/** A captured error or warning entry from the error logger */
+export interface CapturedError {
+  /** Unique hash identifying this error (djb2 of message + stack) */
+  fingerprint: string
+  /** First occurrence message text */
+  message: string
+  /** Number of times this error has been seen */
+  count: number
+  /** Severity level */
+  level: 'error' | 'warning'
+  /** ISO-8601 timestamp of first occurrence */
+  firstSeen: string
+  /** ISO-8601 timestamp of most recent occurrence */
+  lastSeen: string
+}
+
+/** A previously reported error that was submitted with an issue */
+export interface SubmittedError {
+  /** Unique hash identifying this error */
+  fingerprint: string
+  /** Error message text */
+  message: string
+  /** Number of new occurrences since submission */
+  count: number
+  /** ISO-8601 timestamp of when this error was submitted */
+  submittedAt: string
+}
+
+// ---------------------------------------------------------------------------
+// API adapter interface
+// ---------------------------------------------------------------------------
+
+/**
+ * CapturedIssuesApi — The callback interface that each app must implement.
+ *
+ * This is the bridge between the shared UI and the app-specific backend.
+ * Each function maps to a backend command (Tauri command, API endpoint, etc.).
+ *
+ * ┌─────────────────────────────────────────────────────────────────────┐
+ * │ RUST BACKEND IMPLEMENTATION GUIDE                                   │
+ * │                                                                     │
+ * │ Each method below corresponds to a Tauri #[tauri::command].         │
+ * │ The Rust reference implementation lives in:                         │
+ * │   configr/main/src-tauri/src/commands/support.rs                    │
+ * │                                                                     │
+ * │ REQUIRED Tauri commands:                                            │
+ * │                                                                     │
+ * │   get_system_info() → SystemInfo                                    │
+ * │     Returns { os, osVersion, appVersion, arch }                     │
+ * │     Used to include environment details in issue reports.           │
+ * │                                                                     │
+ * │   submit_issue(title, description, email, errors) → SubmitResult    │
+ * │     Sends the issue to your issue tracker (Linear, GitHub, etc.)    │
+ * │     Returns { success: bool, issue_id: Option<String> }             │
+ * │                                                                     │
+ * │   dismiss_errors() → ()                                             │
+ * │     Clears the current error log without submitting.                │
+ * │     Typically calls error_logger.clear_logs().                      │
+ * │                                                                     │
+ * │   get_submitted_errors() → Vec<SubmittedError>                      │
+ * │     Returns previously reported errors from local storage/DB.       │
+ * │     Used to show the "Previously Reported" section.                 │
+ * │                                                                     │
+ * │ Tauri adapter example:                                              │
+ * │                                                                     │
+ * │   import { invoke } from '@tauri-apps/api/core'                     │
+ * │   import type { CapturedIssuesApi } from '@toolr/ui-design'         │
+ * │                                                                     │
+ * │   const api: CapturedIssuesApi = {                                  │
+ * │     getSystemInfo: () => invoke('get_system_info'),                  │
+ * │     submitIssue: (data) => invoke('submit_issue', data),            │
+ * │     dismissErrors: () => invoke('dismiss_errors'),                  │
+ * │     getSubmittedErrors: () => invoke('get_submitted_errors'),       │
+ * │   }                                                                 │
+ * └─────────────────────────────────────────────────────────────────────┘
+ */
+export interface CapturedIssuesApi {
+  /** Get system environment info to include in issue reports */
+  getSystemInfo: () => Promise<{ os: string; osVersion: string; appVersion: string; arch: string }>
+
+  /** Submit an issue with captured errors to the issue tracker */
+  submitIssue: (data: {
+    title: string
+    description: string
+    email: string
+    errors: CapturedError[]
+  }) => Promise<{ success: boolean; issueId?: string }>
+
+  /** Dismiss/clear current errors without submitting */
+  dismissErrors: () => Promise<void>
+
+  /** Get list of previously submitted errors */
+  getSubmittedErrors: () => Promise<SubmittedError[]>
+}