bingocode 1.0.3 → 1.0.4

package/desktop/src/components/shared/DirectoryPicker.tsx

@@ -1,316 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
-import { createPortal } from 'react-dom'
-import { sessionsApi, type RecentProject } from '../../api/sessions'
-import { filesystemApi } from '../../api/filesystem'
-import { useTranslation } from '../../i18n'
-
-type Props = {
-  value: string
-  onChange: (path: string) => void
-}
-
-type DirEntry = { name: string; path: string; isDirectory: boolean }
-
-// Module-level cache for recent projects (shared across instances, survives re-renders)
-let cachedProjects: RecentProject[] | null = null
-let cacheTimestamp = 0
-const CACHE_TTL = 30_000 // 30s
-
-function isTauriRuntime() {
-  return typeof window !== 'undefined' && ('__TAURI_INTERNALS__' in window || '__TAURI__' in window)
-}
-
-export function DirectoryPicker({ value, onChange }: Props) {
-  const t = useTranslation()
-  const [isOpen, setIsOpen] = useState(false)
-  const [mode, setMode] = useState<'recent' | 'browse'>('recent')
-  const [projects, setProjects] = useState<RecentProject[]>([])
-  const [browseEntries, setBrowseEntries] = useState<DirEntry[]>([])
-  const [browsePath, setBrowsePath] = useState('')
-  const [browseParent, setBrowseParent] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number; direction: 'up' | 'down' } | null>(null)
-  const ref = useRef<HTMLDivElement>(null)
-  const triggerRef = useRef<HTMLButtonElement>(null)
-
-  const dropdownRef = useRef<HTMLDivElement>(null)
-
-  const updateDropdownPos = useCallback(() => {
-    if (!triggerRef.current) return
-    const rect = triggerRef.current.getBoundingClientRect()
-    const DROPDOWN_HEIGHT = 380 // approximate max height
-    const spaceAbove = rect.top
-    const spaceBelow = window.innerHeight - rect.bottom
-    const direction = spaceBelow >= DROPDOWN_HEIGHT || spaceBelow >= spaceAbove ? 'down' : 'up'
-    setDropdownPos({
-      top: direction === 'down' ? rect.bottom + 4 : rect.top - 4,
-      left: rect.left,
-      direction,
-    })
-  }, [])
-
-  // Close on outside click (checks both trigger and portal dropdown)
-  useEffect(() => {
-    if (!isOpen) return
-    const handleClick = (e: MouseEvent) => {
-      const target = e.target as Node
-      if (ref.current?.contains(target)) return
-      if (dropdownRef.current?.contains(target)) return
-      setIsOpen(false)
-    }
-    document.addEventListener('mousedown', handleClick)
-    return () => document.removeEventListener('mousedown', handleClick)
-  }, [isOpen])
-
-  // Recalculate position on scroll/resize while open
-  useEffect(() => {
-    if (!isOpen) return
-    updateDropdownPos()
-    window.addEventListener('scroll', updateDropdownPos, true)
-    window.addEventListener('resize', updateDropdownPos)
-    return () => {
-      window.removeEventListener('scroll', updateDropdownPos, true)
-      window.removeEventListener('resize', updateDropdownPos)
-    }
-  }, [isOpen, updateDropdownPos])
-
-  // Load recent projects when opened (with client-side cache)
-  useEffect(() => {
-    if (!isOpen || mode !== 'recent') return
-    // Use cache if fresh
-    if (cachedProjects && Date.now() - cacheTimestamp < CACHE_TTL) {
-      setProjects(cachedProjects)
-      return
-    }
-    setLoading(true)
-    sessionsApi.getRecentProjects()
-      .then(({ projects: p }) => {
-        cachedProjects = p
-        cacheTimestamp = Date.now()
-        setProjects(p)
-      })
-      .catch(() => setProjects([]))
-      .finally(() => setLoading(false))
-  }, [isOpen, mode])
-
-  const loadBrowseDir = async (path?: string) => {
-    setLoading(true)
-    try {
-      const result = await filesystemApi.browse(path)
-      setBrowsePath(result.currentPath)
-      setBrowseParent(result.parentPath)
-      setBrowseEntries(result.entries)
-    } catch { /* API not available */ }
-    setLoading(false)
-  }
-
-  const handleSelect = (path: string) => {
-    onChange(path)
-    setIsOpen(false)
-    setMode('recent')
-    // Invalidate cache so next open reflects the new selection
-    cachedProjects = null
-  }
-
-  const handleChooseFolder = async () => {
-    if (isTauriRuntime()) {
-      // Desktop: native OS folder dialog
-      setIsOpen(false)
-      try {
-        const { open } = await import('@tauri-apps/plugin-dialog')
-        const selected = await open({
-          directory: true,
-          multiple: false,
-          title: t('dirPicker.chooseProjectFolder'),
-        })
-        if (selected) onChange(selected)
-      } catch (err) {
-        console.error('[DirectoryPicker] Failed to open folder dialog:', err)
-      }
-    } else {
-      // Web browser: directory tree via backend API
-      setMode('browse')
-      loadBrowseDir(value || undefined)
-    }
-  }
-
-  // Find selected project info
-  const selectedProject = projects.find((p) => p.realPath === value)
-
-  return (
-    <div ref={ref} className="relative">
-      {/* Trigger — shows selected project chip or placeholder */}
-      {value ? (
-        <button
-          ref={triggerRef}
-          onClick={() => { setIsOpen(!isOpen); setMode('recent') }}
-          className="flex items-center gap-2 px-3 py-1.5 bg-[var(--color-surface-container-low)] hover:bg-[var(--color-surface-hover)] rounded-full text-xs transition-colors border border-[var(--color-border)]"
-        >
-          {selectedProject?.isGit ? (
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" className="text-[var(--color-text-secondary)]">
-              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-            </svg>
-          ) : (
-            <span className="material-symbols-outlined text-[14px] text-[var(--color-text-secondary)]">folder</span>
-          )}
-          <span className="font-medium text-[var(--color-text-primary)]">
-            {selectedProject?.repoName || selectedProject?.projectName || value.split('/').pop()}
-          </span>
-          {selectedProject?.branch && (
-            <>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-[var(--color-text-tertiary)]">
-                <circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" />
-                <path d="M13 6h3a2 2 0 0 1 2 2v7" /><line x1="6" y1="9" x2="6" y2="21" />
-              </svg>
-              <span className="text-[var(--color-text-tertiary)]">{selectedProject.branch}</span>
-            </>
-          )}
-          <span className="material-symbols-outlined text-[12px] text-[var(--color-text-tertiary)]">expand_more</span>
-        </button>
-      ) : (
-        <button
-          ref={triggerRef}
-          onClick={() => { setIsOpen(!isOpen); setMode('recent') }}
-          className="flex items-center gap-2 text-xs text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors"
-        >
-          <span className="material-symbols-outlined text-[14px]">folder_open</span>
-          {t('dirPicker.selectProject')}
-        </button>
-      )}
-
-      {/* Dropdown — rendered via portal to escape overflow clipping */}
-      {isOpen && dropdownPos && createPortal(
-        <div
-          ref={dropdownRef}
-          className="w-[400px] bg-[var(--color-surface-container-lowest)] border border-[var(--color-border)] rounded-xl shadow-[var(--shadow-dropdown)] overflow-hidden"
-          style={{
-            position: 'fixed',
-            left: dropdownPos.left,
-            ...(dropdownPos.direction === 'down'
-              ? { top: dropdownPos.top }
-              : { bottom: window.innerHeight - dropdownPos.top }),
-            zIndex: 9999,
-          }}
-        >
-          {mode === 'recent' ? (
-            <>
-              <div className="px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-[var(--color-outline)]">
-                {t('dirPicker.recent')}
-              </div>
-              <div className="max-h-[300px] overflow-y-auto">
-                {loading ? (
-                  <div className="px-4 py-6 text-center text-xs text-[var(--color-text-tertiary)]">{t('common.loading')}</div>
-                ) : projects.length === 0 ? (
-                  <div className="px-4 py-6 text-center text-xs text-[var(--color-text-tertiary)]">{t('dirPicker.noRecent')}</div>
-                ) : (
-                  projects.map((project) => {
-                    const isSelected = project.realPath === value
-                    return (
-                      <button
-                        key={project.projectPath}
-                        onClick={() => handleSelect(project.realPath)}
-                        className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-[var(--color-surface-hover)] ${
-                          isSelected ? 'bg-[var(--color-surface-selected)]' : ''
-                        }`}
-                      >
-                        {project.isGit ? (
-                          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-secondary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="flex-shrink-0">
-                            <circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" />
-                            <path d="M13 6h3a2 2 0 0 1 2 2v7" /><line x1="6" y1="9" x2="6" y2="21" />
-                          </svg>
-                        ) : (
-                          <span className="material-symbols-outlined text-[20px] text-[var(--color-text-secondary)] flex-shrink-0">folder</span>
-                        )}
-                        <div className="flex-1 min-w-0">
-                          <div className="text-sm font-semibold text-[var(--color-text-primary)] truncate">
-                            {project.repoName || project.projectName}
-                          </div>
-                          <div className="text-[11px] text-[var(--color-text-tertiary)] truncate font-[var(--font-mono)]">
-                            {project.realPath}
-                          </div>
-                        </div>
-                        {isSelected && (
-                          <span className="material-symbols-outlined text-[18px] text-[var(--color-brand)] flex-shrink-0" style={{ fontVariationSettings: "'FILL' 1" }}>
-                            check
-                          </span>
-                        )}
-                      </button>
-                    )
-                  })
-                )}
-              </div>
-
-              {/* Divider + Choose different folder */}
-              <div className="border-t border-[var(--color-border)]">
-                <button
-                  onClick={handleChooseFolder}
-                  className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-[var(--color-surface-hover)] transition-colors"
-                >
-                  <span className="material-symbols-outlined text-[20px] text-[var(--color-text-tertiary)]">create_new_folder</span>
-                  <span className="text-sm text-[var(--color-text-secondary)]">{t('dirPicker.chooseFolder')}</span>
-                </button>
-              </div>
-            </>
-          ) : (
-            /* Directory tree browser (web only) */
-            <>
-              <div className="px-3 py-2 border-b border-[var(--color-border)] flex items-center gap-1 flex-wrap">
-                <button onClick={() => setMode('recent')} className="text-xs text-[var(--color-text-accent)] hover:underline mr-2">
-                  {'← ' + t('dirPicker.recent')}
-                </button>
-                <button onClick={() => loadBrowseDir('/')} className="text-[10px] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]">/</button>
-                {browsePath.split('/').filter(Boolean).map((seg, i, arr) => (
-                  <span key={i} className="flex items-center gap-1">
-                    <span className="text-[10px] text-[var(--color-text-tertiary)]">/</span>
-                    <button
-                      onClick={() => loadBrowseDir('/' + arr.slice(0, i + 1).join('/'))}
-                      className="text-[10px] text-[var(--color-text-accent)] hover:underline"
-                    >{seg}</button>
-                  </span>
-                ))}
-              </div>
-
-              <div className="max-h-[240px] overflow-y-auto">
-                {loading ? (
-                  <div className="px-3 py-4 text-center text-xs text-[var(--color-text-tertiary)]">{t('common.loading')}</div>
-                ) : (
-                  <>
-                    {browseParent && browseParent !== browsePath && (
-                      <button onClick={() => loadBrowseDir(browseParent)} className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-[var(--color-surface-hover)]">
-                        <span className="material-symbols-outlined text-[16px] text-[var(--color-text-tertiary)]">arrow_upward</span>
-                        <span className="text-xs text-[var(--color-text-secondary)]">..</span>
-                      </button>
-                    )}
-                    {browseEntries.length === 0 ? (
-                      <div className="px-3 py-4 text-center text-xs text-[var(--color-text-tertiary)]">{t('dirPicker.noSubdirs')}</div>
-                    ) : browseEntries.map((entry) => (
-                      <button
-                        key={entry.path}
-                        className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-[var(--color-surface-hover)]"
-                      >
-                        <span className="material-symbols-outlined text-[16px] text-[var(--color-text-tertiary)]" onClick={() => loadBrowseDir(entry.path)}>folder</span>
-                        <span className="text-xs text-[var(--color-text-primary)] flex-1" onClick={() => loadBrowseDir(entry.path)}>{entry.name}</span>
-                        <button onClick={() => handleSelect(entry.path)} className="px-2 py-0.5 text-[10px] font-semibold text-[var(--color-brand)] hover:bg-[var(--color-primary-fixed)] rounded transition-colors">
-                          {t('common.select')}
-                        </button>
-                      </button>
-                    ))}
-                  </>
-                )}
-              </div>
-
-              {/* Use current folder */}
-              <div className="px-3 py-2 border-t border-[var(--color-border)] flex justify-between items-center">
-                <span className="text-[10px] text-[var(--color-text-tertiary)] font-[var(--font-mono)] truncate">{browsePath}</span>
-                <button onClick={() => handleSelect(browsePath)} className="px-3 py-1.5 bg-[var(--color-brand)] text-white text-xs font-semibold rounded-lg hover:opacity-90">
-                  {t('dirPicker.useThisFolder')}
-                </button>
-              </div>
-            </>
-          )}
-        </div>,
-        document.body
-      )}
-    </div>
-  )
-}

package/desktop/src/components/shared/Dropdown.tsx

@@ -1,91 +0,0 @@
-import { useState, useRef, useEffect, type ReactNode } from 'react'
-
-type DropdownItem<T extends string> = {
-  value: T
-  label: string
-  description?: string
-  icon?: ReactNode
-}
-
-type DropdownProps<T extends string> = {
-  items: DropdownItem<T>[]
-  value: T
-  onChange: (value: T) => void
-  trigger: ReactNode
-  width?: number
-  align?: 'left' | 'right'
-}
-
-export function Dropdown<T extends string>({
-  items,
-  value,
-  onChange,
-  trigger,
-  width = 320,
-  align = 'left',
-}: DropdownProps<T>) {
-  const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!open) return
-    const handleClick = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false)
-      }
-    }
-    const handleEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setOpen(false)
-    }
-    document.addEventListener('mousedown', handleClick)
-    document.addEventListener('keydown', handleEsc)
-    return () => {
-      document.removeEventListener('mousedown', handleClick)
-      document.removeEventListener('keydown', handleEsc)
-    }
-  }, [open])
-
-  return (
-    <div ref={ref} className="relative inline-block">
-      <div onClick={() => setOpen(!open)} className="cursor-pointer">
-        {trigger}
-      </div>
-
-      {open && (
-        <div
-          className={`
-            absolute z-50 mt-1 py-1 rounded-[var(--radius-lg)]
-            bg-[var(--color-surface)] border border-[var(--color-border)]
-            shadow-[var(--shadow-dropdown)]
-            animate-in fade-in slide-in-from-top-1
-            ${align === 'right' ? 'right-0' : 'left-0'}
-          `}
-          style={{ width }}
-        >
-          {items.map((item, i) => (
-            <button
-              key={item.value}
-              onClick={() => { onChange(item.value); setOpen(false) }}
-              className={`
-                w-full flex items-center gap-3 px-4 py-3 text-left transition-colors
-                hover:bg-[var(--color-surface-hover)]
-                ${i > 0 ? 'border-t border-[var(--color-border-separator)]' : ''}
-              `}
-            >
-              {item.icon && <span className="text-lg flex-shrink-0">{item.icon}</span>}
-              <div className="flex-1 min-w-0">
-                <div className="text-sm font-medium text-[var(--color-text-primary)]">{item.label}</div>
-                {item.description && (
-                  <div className="text-xs text-[var(--color-text-secondary)] mt-0.5">{item.description}</div>
-                )}
-              </div>
-              {item.value === value && (
-                <span className="text-[var(--color-text-primary)] text-sm flex-shrink-0">✓</span>
-              )}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

package/desktop/src/components/shared/Input.tsx

@@ -1,38 +0,0 @@
-import type { InputHTMLAttributes } from 'react'
-
-type InputProps = InputHTMLAttributes<HTMLInputElement> & {
-  label?: string
-  error?: string
-  required?: boolean
-}
-
-export function Input({ label, error, required, className = '', id, ...props }: InputProps) {
-  const inputId = id || label?.toLowerCase().replace(/\s+/g, '-')
-  return (
-    <div className="flex flex-col gap-1">
-      {label && (
-        <label htmlFor={inputId} className="text-sm font-medium text-[var(--color-text-primary)]">
-          {label}
-          {required && <span className="text-[var(--color-error)] ml-0.5">*</span>}
-        </label>
-      )}
-      <input
-        id={inputId}
-        className={`
-          h-10 px-3 rounded-[var(--radius-md)] border text-sm
-          bg-[var(--color-surface)] text-[var(--color-text-primary)]
-          placeholder:text-[var(--color-text-tertiary)]
-          transition-colors duration-150
-          ${error
-            ? 'border-[var(--color-error)] focus:shadow-[var(--shadow-error-ring)]'
-            : 'border-[var(--color-border)] focus:border-[var(--color-border-focus)] focus:shadow-[var(--shadow-focus-ring)]'
-          }
-          outline-none
-          ${className}
-        `}
-        {...props}
-      />
-      {error && <p className="text-xs text-[var(--color-error)]">{error}</p>}
-    </div>
-  )
-}

package/desktop/src/components/shared/Modal.tsx

@@ -1,65 +0,0 @@
-import { useEffect, type ReactNode } from 'react'
-
-type ModalProps = {
-  open: boolean
-  onClose: () => void
-  title?: string
-  children: ReactNode
-  width?: number
-  footer?: ReactNode
-}
-
-export function Modal({ open, onClose, title, children, width = 560, footer }: ModalProps) {
-  useEffect(() => {
-    if (!open) return
-    const handleEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
-    }
-    document.addEventListener('keydown', handleEsc)
-    return () => document.removeEventListener('keydown', handleEsc)
-  }, [open, onClose])
-
-  if (!open) return null
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-[var(--color-overlay-scrim)] transition-opacity duration-200"
-        onClick={onClose}
-      />
-
-      {/* Modal content */}
-      <div
-        className="glass-panel relative rounded-[var(--radius-xl)] max-h-[85vh] flex flex-col"
-        style={{ width, maxWidth: 'calc(100vw - 48px)' }}
-        role="dialog"
-        aria-modal="true"
-      >
-        {title && (
-          <div className="flex items-start justify-between gap-4 px-6 pt-6 pb-0">
-            <h2 className="text-xl font-bold text-[var(--color-text-primary)]">{title}</h2>
-            <button
-              type="button"
-              onClick={onClose}
-              aria-label="Close dialog"
-              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
-            >
-              <span className="material-symbols-outlined text-[18px]">close</span>
-            </button>
-          </div>
-        )}
-
-        <div className="px-6 py-4 overflow-y-auto flex-1">
-          {children}
-        </div>
-
-        {footer && (
-          <div className="px-6 pb-6 pt-0 flex justify-end gap-2">
-            {footer}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/desktop/src/components/shared/ProjectContextChip.tsx

@@ -1,30 +0,0 @@
-type Props = {
-  workDir?: string | null
-  repoName?: string | null
-  branch?: string | null
-}
-
-export function ProjectContextChip({ workDir, repoName, branch }: Props) {
-  const label = branch ? (repoName || workDir?.split('/').pop() || '') : (workDir?.split('/').pop() || repoName || '')
-
-  if (!label) return null
-
-  return (
-    <div className="inline-flex max-w-full items-center gap-2 rounded-full border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] px-4 py-2 text-sm text-[var(--color-text-secondary)]">
-      {branch ? (
-        <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" className="shrink-0 text-[var(--color-text-secondary)]">
-          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-        </svg>
-      ) : (
-        <span className="material-symbols-outlined text-[18px] text-[var(--color-text-secondary)]">folder</span>
-      )}
-      <span className="truncate font-medium text-[var(--color-text-primary)]">{label}</span>
-      {branch ? (
-        <>
-          <span className="text-[var(--color-text-tertiary)]">|</span>
-          <span className="truncate">{branch}</span>
-        </>
-      ) : null}
-    </div>
-  )
-}

package/desktop/src/components/shared/Spinner.tsx

@@ -1,30 +0,0 @@
-type SpinnerProps = {
-  size?: number
-  className?: string
-}
-
-export function Spinner({ size = 20, className = '' }: SpinnerProps) {
-  return (
-    <svg
-      className={`animate-spin ${className}`}
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"
-      />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-      />
-    </svg>
-  )
-}

package/desktop/src/components/shared/Textarea.tsx

@@ -1,38 +0,0 @@
-import type { TextareaHTMLAttributes } from 'react'
-
-type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
-  label?: string
-  error?: string
-  required?: boolean
-}
-
-export function Textarea({ label, error, required, className = '', id, ...props }: TextareaProps) {
-  const inputId = id || label?.toLowerCase().replace(/\s+/g, '-')
-  return (
-    <div className="flex flex-col gap-1">
-      {label && (
-        <label htmlFor={inputId} className="text-sm font-medium text-[var(--color-text-primary)]">
-          {label}
-          {required && <span className="text-[var(--color-error)] ml-0.5">*</span>}
-        </label>
-      )}
-      <textarea
-        id={inputId}
-        className={`
-          min-h-[120px] px-3 py-2 rounded-[var(--radius-lg)] border text-sm resize-y
-          bg-[var(--color-surface)] text-[var(--color-text-primary)]
-          placeholder:text-[var(--color-text-tertiary)]
-          transition-colors duration-150
-          ${error
-            ? 'border-[var(--color-error)]'
-            : 'border-[var(--color-border)] focus:border-[var(--color-border-focus)] focus:shadow-[var(--shadow-focus-ring)]'
-          }
-          outline-none
-          ${className}
-        `}
-        {...props}
-      />
-      {error && <p className="text-xs text-[var(--color-error)]">{error}</p>}
-    </div>
-  )
-}

package/desktop/src/components/shared/Toast.tsx

@@ -1,47 +0,0 @@
-import { useUIStore, type Toast as ToastType } from '../../stores/uiStore'
-
-const typeStyles: Record<ToastType['type'], string> = {
-  success: 'border-l-4 border-l-[var(--color-success)]',
-  error: 'border-l-4 border-l-[var(--color-error)]',
-  warning: 'border-l-4 border-l-[var(--color-warning)]',
-  info: 'border-l-4 border-l-[var(--color-text-accent)]',
-}
-
-function ToastItem({ toast }: { toast: ToastType }) {
-  const removeToast = useUIStore((s) => s.removeToast)
-
-  return (
-    <div
-      className={`
-        bg-[var(--color-surface)] rounded-[var(--radius-md)] shadow-[var(--shadow-dropdown)]
-        px-4 py-3 text-sm text-[var(--color-text-primary)]
-        ${typeStyles[toast.type]}
-        animate-in slide-in-from-right fade-in duration-200
-      `}
-    >
-      <div className="flex items-center justify-between gap-2">
-        <span>{toast.message}</span>
-        <button
-          onClick={() => removeToast(toast.id)}
-          className="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] text-lg leading-none"
-        >
-          ×
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export function ToastContainer() {
-  const toasts = useUIStore((s) => s.toasts)
-
-  if (toasts.length === 0) return null
-
-  return (
-    <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm">
-      {toasts.map((toast) => (
-        <ToastItem key={toast.id} toast={toast} />
-      ))}
-    </div>
-  )
-}