@pheem49/mint 1.15.0 → 1.16.0

package/src/renderer/shared/components/WorkspacePaneResizer.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { readWorkspacePaneWidth, workspacePaneKeyWidth, workspacePaneLayout, WORKSPACE_PANE_STORAGE_KEY } from '../utils/workspacePane'
+
+export default function WorkspacePaneResizer() {
+  const handle = useRef<HTMLDivElement>(null)
+  const [preferred, setPreferred] = useState(() => readWorkspacePaneWidth(() => localStorage.getItem(WORKSPACE_PANE_STORAGE_KEY)))
+  const preferredRef = useRef(preferred)
+  const [available, setAvailable] = useState(1500)
+  const [dragging, setDragging] = useState(false)
+  const drag = useRef<{ x: number; width: number; preferred: number; pointer: number; element: HTMLDivElement; cursor: string; select: string } | null>(null)
+  const layout = workspacePaneLayout(preferred, available)
+
+  const change = (width: number, persist = false) => {
+    preferredRef.current = width
+    setPreferred(width)
+    if (persist) {
+      try { localStorage.setItem(WORKSPACE_PANE_STORAGE_KEY, String(width)) } catch { /* Storage may be disabled. */ }
+    }
+  }
+  const finish = (cancel = false, unmount = false) => {
+    const current = drag.current
+    if (!current) return
+    drag.current = null
+    document.body.style.cursor = current.cursor
+    document.body.style.userSelect = current.select
+    if (current.element.hasPointerCapture(current.pointer)) current.element.releasePointerCapture(current.pointer)
+    if (!unmount) {
+      setDragging(false)
+      change(cancel ? current.preferred : preferredRef.current, !cancel)
+    }
+  }
+
+  useLayoutEffect(() => {
+    const main = handle.current?.closest<HTMLElement>('.assistant-workspace')
+    if (!main) return
+    const measure = () => setAvailable(main.getBoundingClientRect().width)
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(main)
+    return () => {
+      observer.disconnect()
+      main.style.removeProperty('--workspace-panel-width')
+      delete main.dataset.workspaceStacked
+      main.classList.remove('is-workspace-resizing')
+    }
+  }, [])
+
+  useLayoutEffect(() => {
+    const main = handle.current?.closest<HTMLElement>('.assistant-workspace')
+    if (!main) return
+    main.style.setProperty('--workspace-panel-width', `${layout.width}px`)
+    main.dataset.workspaceStacked = String(layout.stacked)
+    main.classList.toggle('is-workspace-resizing', dragging)
+    if (layout.stacked) finish(true)
+  }, [layout.width, layout.stacked, dragging])
+
+  useEffect(() => {
+    const blur = () => finish(true)
+    window.addEventListener('blur', blur)
+    return () => { window.removeEventListener('blur', blur); finish(true, true) }
+  }, [])
+
+  return <div ref={handle} className="workspace-pane-resizer" role="separator" aria-label="Resize Workspace"
+    aria-orientation="vertical" aria-valuemin={layout.min} aria-valuemax={layout.max} aria-valuenow={layout.width}
+    aria-controls="workspace-file-panel" tabIndex={layout.stacked ? -1 : 0} hidden={layout.stacked}
+    title="Drag to resize Workspace. Double-click or press Enter to reset."
+    onPointerDown={event => {
+      if (event.button !== 0 || drag.current || layout.stacked) return
+      event.preventDefault()
+      event.currentTarget.focus()
+      event.currentTarget.setPointerCapture(event.pointerId)
+      drag.current = { x: event.clientX, width: layout.width, preferred: preferredRef.current, pointer: event.pointerId,
+        element: event.currentTarget, cursor: document.body.style.cursor, select: document.body.style.userSelect }
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+      setDragging(true)
+    }}
+    onPointerMove={event => {
+      const current = drag.current
+      if (current?.pointer === event.pointerId) change(workspacePaneLayout(current.width + event.clientX - current.x, available).width)
+    }}
+    onPointerUp={event => { if (drag.current?.pointer === event.pointerId) finish() }}
+    onPointerCancel={event => { if (drag.current?.pointer === event.pointerId) finish(true) }}
+    onLostPointerCapture={() => finish(true)}
+    onDoubleClick={() => change(workspacePaneLayout(400, available).width, true)}
+    onKeyDown={event => {
+      if (event.key === 'Escape' && drag.current) { event.preventDefault(); finish(true); return }
+      if (drag.current) return
+      const width = workspacePaneKeyWidth(event.key, layout)
+      if (width !== null) { event.preventDefault(); change(width, true) }
+    }} />
+}

package/src/renderer/shared/components/WorkspacePreviewActions.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import WorkspacePreviewActions from './WorkspacePreviewActions'
+import { ArtifactPreviewPanel, detectArtifactType } from './ArtifactPreviewPanel'
+
+function renderActions(name: string, kind: 'file' | 'directory' = 'file', pending = false) {
+  return renderToStaticMarkup(<WorkspacePreviewActions entry={{ name, path: `nested/${name}`, kind, children: [] }} pending={pending} onPreview={() => {}} onOpenHtml={() => {}} />)
+}
+
+describe('workspace preview menu', () => {
+  for (const name of ['README.md', 'notes.MARKDOWN', 'index.html', 'page.HTM', 'photo.PNG', 'cat.jpeg', 'animation.gif', 'icon.svg', 'photo.webp', 'icon.ico', 'photo.jpg']) {
+    it(`offers an in-app preview for ${name}`, () => { expect(renderActions(name)).toContain('Preview in Mint') })
+  }
+  it('offers browser launch only for HTML files', () => {
+    expect(renderActions('index.html')).toContain('Open in Browser')
+    for (const name of ['README.md', 'photo.png']) expect(renderActions(name)).not.toContain('Open in Browser')
+  })
+  it('does not offer previews for directories or unsupported files', () => {
+    expect(renderActions('guide.md', 'directory')).toBe('')
+    expect(renderActions('script.rs')).toBe('')
+  })
+  it('disables preview actions while another operation is pending', () => { expect(renderActions('README.md', 'file', true)).toContain('disabled=""') })
+})
+
+it('uses a served HTML URL in the Preview iframe so relative CSS and scripts can load', () => {
+  const html = renderToStaticMarkup(<ArtifactPreviewPanel artifact={{ path: 'site/index.html', content: '<h1>Hello</h1>', url: 'http://127.0.0.1:12345/site/index.html' }} onClose={() => {}} />)
+  expect(html).toContain('src="http://127.0.0.1:12345/site/index.html"')
+  expect(html).not.toContain('srcDoc=')
+  expect(html).toContain('allow-same-origin')
+})
+
+it('renders images fitted inside Preview without a binary code tab', () => {
+  expect(detectArtifactType('assets/PHOTO.PNG')).toBe('image')
+  const html = renderToStaticMarkup(<ArtifactPreviewPanel artifact={{ path: 'assets/PHOTO.PNG', url: 'http://127.0.0.1:12345/assets/PHOTO.PNG' }} onClose={() => {}} />)
+  expect(html).toContain('src="http://127.0.0.1:12345/assets/PHOTO.PNG"')
+  expect(html).toContain('object-fit:contain')
+  expect(html).not.toMatch(/>Code<\/button>/)
+})
+
+it('identifies the browser action as Mint Browser instead of a generic popup', () => {
+  const html = renderToStaticMarkup(<ArtifactPreviewPanel artifact={{ path: 'site/index.html', url: 'http://127.0.0.1:12345/site/index.html' }} onClose={() => {}} />)
+  expect(html).toContain('aria-label="Open in Mint Browser (Mint Auto)"')
+})

package/src/renderer/shared/components/WorkspacePreviewActions.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { detectArtifactType } from './ArtifactPreviewPanel'
+import type { WorkspaceTreeEntry } from '../types'
+
+interface Props {
+  entry: WorkspaceTreeEntry
+  pending: boolean
+  onPreview?: () => void
+  onOpenHtml?: () => void
+}
+
+export default function WorkspacePreviewActions({ entry, pending, onPreview, onOpenHtml }: Props) {
+  const type = detectArtifactType(entry.name)
+  if (entry.kind !== 'file' || type === 'code') return null
+  return <>
+    {type === 'html' && onOpenHtml && <button type="button" role="menuitem" disabled={pending} onClick={onOpenHtml}>Open in Browser</button>}
+    {onPreview && <button type="button" role="menuitem" disabled={pending} onClick={onPreview}>Preview in Mint</button>}
+  </>
+}

package/src/renderer/shared/components/WorkspaceSelector.tsx

@@ -1,6 +1,10 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
+
+import { normalizeWorkspacePath, workspacePaths } from '../utils/workspaces'
+import './workspace-selector.css'
 
 interface WorkspaceSelectorProps {
+  placement?: 'above' | 'below'
   currentPath: string
   recentPaths: string[]
   onSelectWorkspace: (path?: string) => void
@@ -10,7 +14,8 @@ function workspaceLabel(path: string): string {
   return path.split(/[\\/]/).filter(Boolean).pop() || path
 }
 
-export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWorkspace }: WorkspaceSelectorProps) {
+export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWorkspace, placement = 'above' }: WorkspaceSelectorProps) {
+  const menuId = useId()
   const [open, setOpen] = useState(false)
   const [query, setQuery] = useState('')
   const rootRef = useRef<HTMLDivElement>(null)
@@ -19,12 +24,12 @@ export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWo
 
   const visiblePaths = useMemo(() => {
     const normalizedQuery = query.trim().toLocaleLowerCase()
-    return recentPaths.filter((path) => {
+    return workspacePaths(recentPaths, currentPath).filter((path) => {
       if (!normalizedQuery) return true
       return path.toLocaleLowerCase().includes(normalizedQuery)
         || workspaceLabel(path).toLocaleLowerCase().includes(normalizedQuery)
     })
-  }, [query, recentPaths])
+  }, [query, recentPaths, currentPath])
 
   useEffect(() => {
     if (!open) return
@@ -55,7 +60,7 @@ export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWo
   }
 
   return (
-    <div className={`workspace-selector ${currentPath ? 'has-workspace' : 'needs-workspace'}`} ref={rootRef}>
+    <div className={`workspace-selector ${currentPath ? 'has-workspace' : 'needs-workspace'} opens-${placement}`} ref={rootRef}>
       <button
         ref={triggerRef}
         type="button"
@@ -67,7 +72,7 @@ export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWo
         aria-label={`${currentPath ? 'Change' : 'Choose'} workspace: ${currentPath ? workspaceLabel(currentPath) : 'Select Project'}`}
         aria-haspopup="dialog"
         aria-expanded={open}
-        aria-controls="workspace-select-menu"
+        aria-controls={menuId}
         title={currentPath || 'Choose a workspace folder'}
       >
         <span className="workspace-select-icon" aria-hidden="true">
@@ -84,7 +89,7 @@ export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWo
       </button>
 
       {open && (
-        <div className="workspace-select-menu" id="workspace-select-menu" role="dialog" aria-label="Choose workspace">
+        <div className="workspace-select-menu" id={menuId} role="dialog" aria-label="Choose workspace">
           <label className="workspace-select-search">
             <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
               <circle cx="11" cy="11" r="7" />
@@ -102,7 +107,7 @@ export default function WorkspaceSelector({ currentPath, recentPaths, onSelectWo
 
           <div className="workspace-select-list" role="group" aria-label="Recent workspaces">
             {visiblePaths.length > 0 ? visiblePaths.map((path) => {
-              const isCurrent = path === currentPath
+              const isCurrent = path === normalizeWorkspacePath(currentPath)
               return (
                 <button
                   key={path}

package/src/renderer/shared/components/background-terminals.css

@@ -0,0 +1,292 @@
+.background-terminals {
+  position: relative;
+  min-width: 0;
+}
+
+.background-terminals button,
+.background-terminals a {
+  color: inherit;
+  font: inherit;
+}
+
+.background-terminals button:focus-visible,
+.background-terminals a:focus-visible,
+.background-terminal-log:focus-visible {
+  outline: 2px solid var(--accent, #10b981);
+  outline-offset: 2px;
+}
+
+.background-terminal-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 14px;
+  background: var(--panel-bg, #171719);
+  color: var(--text-main, #eeeeef);
+  font-size: 12px;
+}
+
+.background-task-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+.background-terminal-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border, #343438);
+}
+
+.background-terminal-heading-icon {
+  display: grid;
+  flex: 0 0 36px;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border: 1px solid color-mix(in srgb, var(--accent, #10b981) 28%, transparent);
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--accent, #10b981) 10%, transparent);
+  color: var(--accent, #10b981);
+  font-weight: 700;
+}
+
+.background-terminal-panel-title {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+  gap: 3px;
+}
+
+.background-terminal-panel-title strong {
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.background-terminal-panel-title small {
+  overflow: hidden;
+  color: var(--text-muted, #94a3b8);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.background-terminal-filter {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-height: 38px;
+  padding: 0 10px;
+  border: 1px solid var(--border, #343438);
+  border-radius: 10px;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.03));
+  color: var(--text-main, #eeeeef);
+  cursor: pointer;
+  user-select: none;
+}
+
+.background-terminal-filter input,
+.background-terminal-output header input {
+  accent-color: var(--accent, #10b981);
+}
+
+.background-terminal-panel > p {
+  margin: 0;
+  padding: 9px 10px;
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--status-error, #f18585) 9%, transparent);
+}
+
+.background-terminal-error {
+  color: var(--status-error, #f18585) !important;
+  overflow-wrap: anywhere;
+}
+
+.background-terminal-list {
+  display: grid;
+  gap: 8px;
+  min-height: 0;
+}
+
+.background-terminal-empty {
+  display: grid;
+  justify-items: center;
+  gap: 7px;
+  padding: 22px 14px;
+  border: 1px dashed var(--border, #343438);
+  border-radius: 12px;
+  color: var(--text-muted, #94a3b8);
+  text-align: center;
+}
+
+.background-terminal-empty > span {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border-radius: 10px;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.05));
+  color: var(--accent, #10b981);
+  font-weight: 700;
+}
+
+.background-terminal-empty strong {
+  color: var(--text-main, #eeeeef);
+  font-size: 12px;
+}
+
+.background-terminal-empty small {
+  max-width: 260px;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.background-terminal-job {
+  min-width: 0;
+  padding: 11px;
+  border: 1px solid var(--border, #343438);
+  border-radius: 12px;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.025));
+}
+
+.background-terminal-job-heading,
+.background-terminal-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.background-terminal-job-heading strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.background-terminal-job-heading > span:last-child {
+  margin-left: auto;
+  color: var(--text-muted, #94a3b8);
+  font-variant-numeric: tabular-nums;
+}
+
+.background-terminal-state {
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.06));
+  font-size: 10px;
+  text-transform: capitalize;
+}
+
+.background-terminal-state.running { color: var(--accent, #10b981); }
+.background-terminal-state.stopping { color: var(--status-warning, #e4b95b); }
+.background-terminal-state.failed { color: var(--status-error, #f18585); }
+
+.background-terminal-job code {
+  display: block;
+  margin: 9px 0 7px;
+  padding: 8px 9px;
+  border: 1px solid var(--border, #343438);
+  border-radius: 8px;
+  background: var(--input-bg, #101012);
+  color: var(--text-main, #eeeeef);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.background-terminal-job small {
+  display: block;
+  color: var(--text-muted, #94a3b8);
+  font-size: 10px;
+  overflow-wrap: anywhere;
+}
+
+.background-terminal-actions { margin-top: 9px; }
+
+.background-terminal-actions button,
+.background-terminal-actions a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 30px;
+  padding: 5px 9px;
+  border: 1px solid var(--border, #343438);
+  border-radius: 8px;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.04));
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.background-terminal-actions button:hover,
+.background-terminal-actions a:hover {
+  border-color: var(--accent, #10b981);
+  background: color-mix(in srgb, var(--accent, #10b981) 9%, transparent);
+}
+
+.background-terminal-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
+.background-terminal-actions .background-terminal-stop { color: var(--status-error, #f18585); }
+
+.background-terminal-output {
+  display: grid;
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border, #343438);
+}
+
+.background-terminal-output header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.background-terminal-output header label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-muted, #94a3b8);
+}
+
+.background-terminal-output > small { color: var(--text-muted, #94a3b8); }
+
+.background-terminal-log {
+  max-height: 22vh;
+  overflow: auto;
+  padding: 10px;
+  border: 1px solid var(--border, #343438);
+  border-radius: 9px;
+  background: var(--input-bg, #101012);
+}
+
+.background-terminal-log pre {
+  margin: 5px 0 12px;
+  color: var(--text-main, #eeeeef);
+  font-size: 11px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+
+
+.smart-context-bar { flex-wrap: wrap; }
+
+@media (max-width: 640px) {
+  .background-terminals { margin-left: 0; flex-basis: 100%; }
+  .background-terminal-panel-header { gap: 8px; }
+}
+
+@media (forced-colors: active) {
+  .background-terminal-panel { background: Canvas; color: CanvasText; border-color: CanvasText; }
+  .background-terminal-job, .background-terminal-filter { border-color: CanvasText; }
+}
+
+.background-terminal-actions .background-terminal-delete { color: var(--status-error, #f18585); padding-inline: 8px; }
+.background-terminal-actions .background-terminal-delete:hover { border-color: var(--status-error, #f18585); background: color-mix(in srgb, var(--status-error, #f18585) 10%, transparent); }
+.background-terminal-output > header > button {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px; margin-left: auto; padding: 0;
+  border: 1px solid var(--border, #343438); border-radius: 7px;
+  background: var(--bg-surface-soft, rgba(255,255,255,.04)); color: var(--text-muted, #94a3b8);
+  cursor: pointer;
+}
+.background-terminal-output > header > button:hover { border-color: var(--accent, #10b981); color: var(--text-main, #eeeeef); }

package/src/renderer/shared/components/ui/README.md

@@ -0,0 +1,52 @@
+# Shared UI components
+
+Mint already uses React and TypeScript. Its two Vite applications previously used
+plain CSS and separate `@/` roots. Reusable UI lives in
+`src/renderer/shared/components/ui`, rather than a new top-level application root.
+Keeping this `components/ui` folder gives the shadcn CLI a stable destination and
+prevents Desktop and Web from acquiring different copies of the same primitive.
+
+`components.json` points the CLI at this directory. Both Vite configurations and
+TypeScript resolve `@/components/ui/*` here and `@/lib/utils` to the shared `cn`
+helper. Existing application-specific aliases still work.
+
+Tailwind is installed through `@tailwindcss/vite` in both builds. Styles are in
+`shared/css/ui-tailwind.css`: theme and utility layers, explicit shared UI source
+scanning, and semantic colors mapped to Mint's tokens. Preflight is omitted to
+preserve the application's base styles. New shared primitives belong in this
+folder so their utility classes are included automatically. To add one:
+
+```sh
+npx shadcn@latest add <component-name>
+npm run typecheck
+npm run build:ui
+```
+
+No project reinitialization is needed. Setup references:
+[Tailwind with Vite](https://tailwindcss.com/docs/installation/using-vite) and
+[shadcn manual installation](https://ui.shadcn.com/docs/installation/manual).
+
+## VoicePoweredOrb
+
+The supplied shader and audio-to-motion mapping are retained in
+`voice-powered-orb.tsx`; sizing and graphics fallback are in its CSS.
+`GeminiLiveOverlay` integrates it with Mint's live status, transcripts, voice
+selection, microphone pause/resume and end-call callbacks.
+
+The call supplies `analyserRef` from `useGeminiLiveVoice`. It mixes the existing
+microphone and playback nodes for visualization without acquiring another mic.
+Without this prop, the standalone `demo.tsx` requests its own mic only after Start.
+That mode owns and releases its stream and AudioContext; the live component owns
+neither. No external images or assets are required.
+
+ResizeObserver handles the container, DPR is capped at two and applied once, and
+reduced motion freezes shader time, rotation and distortion. If WebGL is unavailable,
+the CSS ring and all textual call states/controls remain available. Ending a call
+releases capture, playback, the analyser, audio context, WebGL resources and RAF.
+
+Browser regressions can be served with `npm run dev:desktop:ui` and opened at
+`/tests/liveOrb.browser.html` and `/tests/liveVoice.browser.html`. The first checks
+the real shader and call UI; the second injects the external audio/session boundary
+to verify cancellation of pending permission/connection and late events. They do
+not make a real Gemini call. `/tests/liveOrb.browser.html?preview=1` shows a fixture
+conversation with an injected audio level for layout review.

package/src/renderer/shared/components/ui/button.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import '../../css/ui-tailwind.css'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2', sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8', icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  },
+)
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+  },
+)
+Button.displayName = 'Button'
+export { Button, buttonVariants }

package/src/renderer/shared/components/ui/demo.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useState } from 'react'
+import { VoicePoweredOrb } from './voice-powered-orb'
+import { Button } from './button'
+import { Mic, MicOff } from 'lucide-react'
+
+/** Standalone example from the supplied component. The app uses GeminiLiveOverlay. */
+export default function VoicePoweredOrbPage() {
+  const [isRecording, setIsRecording] = useState(false)
+  const [voiceDetected, setVoiceDetected] = useState(false)
+  return (
+    <div className="min-h-screen flex items-center justify-center p-8">
+      <div className="flex flex-col items-center space-y-8">
+        <div className="w-96 h-96 relative" style={{ width: 'min(384px, 80vw)', height: 'min(384px, 80vw)' }}>
+          <VoicePoweredOrb enableVoiceControl={isRecording} className="rounded-xl overflow-hidden shadow-2xl" onVoiceDetected={setVoiceDetected} />
+        </div>
+        <Button onClick={() => setIsRecording(current => !current)} variant={isRecording ? 'destructive' : 'default'} size="lg" className="px-8 py-3">
+          {isRecording ? <><MicOff className="w-5 h-5 mr-3" />Stop Recording</> : <><Mic className="w-5 h-5 mr-3" />Start Recording</>}
+        </Button>
+        <p className="text-muted-foreground text-center max-w-md">Click the button to enable voice control. Speak to see the orb respond to your voice with subtle movements.</p>
+        <span role="status" className="text-muted-foreground">{voiceDetected ? 'Voice detected' : 'No voice detected'}</span>
+      </div>
+    </div>
+  )
+}

package/src/renderer/shared/components/ui/error-recovery.css

@@ -0,0 +1,35 @@
+/* Fixed fallback colors remain readable when the route's theme fails to load. */
+.error-recovery {
+  --flavor-indigo: #6366f1;
+  --flavor-cyan: #06b6d4;
+  display: grid; place-items: center; padding: 28px 24px; box-sizing: border-box;
+  background: #09090b; font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
+}
+.error-recovery-content { width: min(100%, 460px); display: flex; flex-direction: column; align-items: center; gap: 24px; }
+.error-recovery-orb { flex-shrink: 0; }
+.error-recovery-copy { text-align: center; }
+.error-recovery-copy .error-recovery-label { margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: #a1a1aa; }
+.error-recovery-copy h1 { margin: 0 0 12px; color: #f4f4f5; font-size: clamp(24px, 4vw, 32px); font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
+.error-recovery-copy p { margin: 0; color: #a1a1aa; font-size: 14px; line-height: 1.7; }
+.error-recovery-actions { display: flex; justify-content: center; gap: 12px; width: 100%; }
+.error-recovery-actions button {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  min-height: 44px; padding: 10px 16px; border: 1px solid #3f3f46;
+  border-radius: 10px; background: #18181b; color: #f4f4f5;
+  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: none;
+}
+.error-recovery-actions button:last-child { background: #f4f4f5; border-color: #f4f4f5; color: #18181b; }
+.error-recovery-actions button:hover { background: #27272a; }
+.error-recovery-actions button:last-child:hover { background: #d4d4d8; }
+.error-recovery-actions button:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 4px; }
+@media (max-width: 420px) {
+  .error-recovery { padding-inline: 20px; }
+  .error-recovery-actions { flex-direction: column-reverse; }
+}
+@media (max-height: 540px) {
+  .error-recovery { padding-block: 16px; }
+  .error-recovery-content { gap: 16px; }
+}
+@media (forced-colors: active) {
+  .error-recovery-actions button { border: 1px solid ButtonText; }
+}