Spaces:

ruslanmv
/

HomePilot

Running

App Files Files Community

HomePilot Deploy Bot commited on 8 days ago

Commit

ad48a43

1 Parent(s): d85b299

chore(hf): sync HomePilot to HF Space

Browse files

Files changed (32) hide show

.gitattributes +4 -4
frontend/.cache-bust +1 -1
frontend/index.html +34 -2
frontend/src/main.tsx +9 -0
frontend/src/test/mobileShell.test.tsx +146 -0
frontend/src/test/motionSystem.test.tsx +178 -0
frontend/src/ui/AboutDialog.tsx +4 -0
frontend/src/ui/App.tsx +268 -101
frontend/src/ui/Models.tsx +47 -20
frontend/src/ui/ProfileSettingsModal.tsx +109 -64
frontend/src/ui/SettingsPanel.tsx +16 -0
frontend/src/ui/SystemStatusDialog.tsx +4 -0
frontend/src/ui/VoiceModeGrok.tsx +14 -4
frontend/src/ui/avatar/AvatarLandingPage.tsx +1 -1
frontend/src/ui/components/AppErrorBoundary.tsx +88 -0
frontend/src/ui/components/AuthGate.tsx +57 -16
frontend/src/ui/components/ComposerPlusMenu.tsx +1 -1
frontend/src/ui/components/MessageMarkdown.tsx +2 -1
frontend/src/ui/components/ModalSheet.tsx +140 -0
frontend/src/ui/lib/backendUrl.test.ts +14 -0
frontend/src/ui/lib/backendUrl.ts +5 -1
frontend/src/ui/lib/useBackToClose.ts +64 -0
frontend/src/ui/motion/Motion.tsx +248 -0
frontend/src/ui/motion/MotionGallery.tsx +250 -0
frontend/src/ui/motion/StreamReveal.tsx +147 -0
frontend/src/ui/motion/index.ts +4 -0
frontend/src/ui/motion/motion.css +353 -0
frontend/src/ui/motion/prefs.ts +115 -0
frontend/src/ui/routines/RoutinesView.tsx +1 -1
frontend/src/ui/routines/api.ts +9 -0
frontend/src/ui/styles.css +289 -0
frontend/tailwind.config.js +3 -0

.gitattributes CHANGED Viewed

@@ -1,9 +1,9 @@
-*.jpg filter=lfs diff=lfs merge=lfs -text
 *.jpeg filter=lfs diff=lfs merge=lfs -text
 *.webp filter=lfs diff=lfs merge=lfs -text
 *.svg filter=lfs diff=lfs merge=lfs -text
 *.woff filter=lfs diff=lfs merge=lfs -text
-*.png filter=lfs diff=lfs merge=lfs -text
-*.woff2 filter=lfs diff=lfs merge=lfs -text
-*.ico filter=lfs diff=lfs merge=lfs -text
 *.hpersona filter=lfs diff=lfs merge=lfs -text

+*.ico filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
 *.jpeg filter=lfs diff=lfs merge=lfs -text
 *.webp filter=lfs diff=lfs merge=lfs -text
 *.svg filter=lfs diff=lfs merge=lfs -text
 *.woff filter=lfs diff=lfs merge=lfs -text
 *.hpersona filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.woff2 filter=lfs diff=lfs merge=lfs -text

frontend/.cache-bust CHANGED Viewed

	@@ -1 +1 @@
1	- ~~1791530700~~


1	+ 1791564573

frontend/index.html CHANGED Viewed

@@ -4,12 +4,44 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HomePilot</title>
   </head>
   <body class="bg-black text-white" data-new-gr-c-s-check-loaded="14.1217.0" data-gr-ext-installed="">
-    <div id="root" data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false"></div>
     <script src="/js/speech-service.js"></script>
     <!-- ScreenSense: additive screen-awareness addon (desktop native / cloud share-or-upload). Defines window.hpScreenSense; inert until invoked. -->
     <!-- Screen sharing is reached from the composer's `+` menu, so ScreenSense must not also

 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <!-- No maximum-scale: people must be able to pinch-zoom (inputs are 16px on touch, so iOS does not auto-zoom).
+         interactive-widget: the layout shrinks above the on-screen keyboard, keeping the composer and sticky actions visible. -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HomePilot</title>
+    <!-- Boot screen: visible from the first paint until the app mounts (React
+         replaces #root's contents). On a slow connection the app's script can
+         take many seconds to arrive; without this the page is plain black. -->
+    <style>
+      html, body { background: #090909; }
+      .hp-boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: #f5f5f5; font: 500 16px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
+      .hp-boot__ring { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: rgba(255, 255, 255, 0.85); animation: hp-boot-spin 0.9s linear infinite; }
+      .hp-boot__hint { max-width: 22rem; color: #b0b0b0; font-size: 14px; font-weight: 400; opacity: 0; animation: hp-boot-show 0.3s ease-out 6s forwards; }
+      .hp-boot__reload { display: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #303030; background: #171717; color: #f5f5f5; font: inherit; font-weight: 600; cursor: pointer; }
+      .hp-boot[data-slow] .hp-boot__reload { display: inline-block; }
+      @keyframes hp-boot-spin { to { transform: rotate(360deg); } }
+      @keyframes hp-boot-show { to { opacity: 1; } }
+      @media (prefers-reduced-motion: reduce) { .hp-boot__ring { animation: none; } .hp-boot__hint { animation: none; opacity: 1; } }
+    </style>
   </head>
   <body class="bg-black text-white" data-new-gr-c-s-check-loaded="14.1217.0" data-gr-ext-installed="">
+    <div id="root" data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false"><div class="hp-boot" role="status" aria-live="polite">
+      <div class="hp-boot__ring" aria-hidden="true"></div>
+      <div>Starting HomePilot…</div>
+      <div class="hp-boot__hint">Loading the app. On a slow connection this can take a moment.</div>
+      <button type="button" class="hp-boot__reload" onclick="location.reload()">Reload</button>
+    </div></div>
+    <noscript><p style="color:#f5f5f5;font-family:system-ui,sans-serif;text-align:center;padding:24px">HomePilot needs JavaScript to run. Please enable it and reload.</p></noscript>
+    <script>
+      // Still not started after 40 s (script blocked or failed to load): say so and offer Reload.
+      setTimeout(function () {
+        var boot = document.querySelector('.hp-boot');
+        if (!boot) return;
+        boot.setAttribute('data-slow', '');
+        var hint = boot.querySelector('.hp-boot__hint');
+        if (hint) hint.textContent = 'This is taking longer than usual. Check your connection, then reload.';
+      }, 40000);
+    </script>
     <script src="/js/speech-service.js"></script>
     <!-- ScreenSense: additive screen-awareness addon (desktop native / cloud share-or-upload). Defines window.hpScreenSense; inert until invoked. -->
     <!-- Screen sharing is reached from the composer's `+` menu, so ScreenSense must not also

frontend/src/main.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './ui/App'
 import AuthGate from './ui/components/AuthGate'
 import LegalPage from './ui/components/LegalPage'
 // Account & Computers spine (Batch 2) — ADDITIVE. The providers render children
 // unchanged and do NO network unless the feature flag is on; the dev panel
@@ -11,6 +12,11 @@ import { ComputerProvider } from './ui/account/ComputerContext'
 import { MirrorDevPanel } from './ui/account/MirrorDevPanel'
 import { RemoteOfflineBanner } from './ui/account/RemoteOfflineBanner'
 import './ui/styles.css'
 // Public, pre-auth legal pages. These are reached by full navigation (the login
 // footer links, and direct URLs); on the SPA host the server returns index.html
@@ -21,6 +27,8 @@ const legalKind =
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     {legalKind ? (
       <LegalPage kind={legalKind} />
     ) : (
@@ -34,5 +42,6 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
         </HomePilotAccountProvider>
       </AuthGate>
     )}
   </React.StrictMode>,
 )

 import ReactDOM from 'react-dom/client'
 import App from './ui/App'
 import AuthGate from './ui/components/AuthGate'
+import { AppErrorBoundary } from './ui/components/AppErrorBoundary'
 import LegalPage from './ui/components/LegalPage'
 // Account & Computers spine (Batch 2) — ADDITIVE. The providers render children
 // unchanged and do NO network unless the feature flag is on; the dev panel
 import { MirrorDevPanel } from './ui/account/MirrorDevPanel'
 import { RemoteOfflineBanner } from './ui/account/RemoteOfflineBanner'
 import './ui/styles.css'
+import './ui/motion/motion.css'
+import { applyMotionPrefs } from './ui/motion/prefs'
+// Mirror the device's motion preference onto <html> before the first paint.
+applyMotionPrefs()
 // Public, pre-auth legal pages. These are reached by full navigation (the login
 // footer links, and direct URLs); on the SPA host the server returns index.html
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
+    {/* Never fail to a blank screen: a render error shows what happened and how to recover. */}
+    <AppErrorBoundary label="root">
     {legalKind ? (
       <LegalPage kind={legalKind} />
     ) : (
         </HomePilotAccountProvider>
       </AuthGate>
     )}
+    </AppErrorBoundary>
   </React.StrictMode>,
 )

frontend/src/test/mobileShell.test.tsx ADDED Viewed

	@@ -0,0 +1,146 @@

+/**
+ * Mobile shell regressions: dialogs escape transformed ancestors, Account
+ * Settings is one sheet with a single-line Save All and protects unsaved edits,
+ * startup never sits on a silent blank screen, and render errors are recoverable.
+ */
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ModalSheet } from '../ui/components/ModalSheet'
+import { AppErrorBoundary } from '../ui/components/AppErrorBoundary'
+import AuthGate, { AUTH_CHECK_TIMEOUT_MS, SLOW_START_HINT_MS } from '../ui/components/AuthGate'
+import ProfileSettingsModal from '../ui/ProfileSettingsModal'
+function json(body: unknown, status = 200) {
+  return Promise.resolve(new Response(JSON.stringify(body), { status, headers: { 'content-type': 'application/json' } }))
+}
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.useRealTimers()
+  localStorage.clear()
+  document.body.style.overflow = ''
+})
+describe('ModalSheet', () => {
+  it('renders at <body>, outside a transformed drawer, as a labelled modal dialog', () => {
+    render(
+      <div data-testid="drawer" style={{ transform: 'translateX(0)' }}>
+        <ModalSheet labelledBy="t" onRequestClose={() => {}} header={<h2 id="t">Title</h2>} footer={<button>Save</button>}>
+          <input aria-label="field" />
+        </ModalSheet>
+      </div>,
+    )
+    const dialog = screen.getByRole('dialog', { name: 'Title' })
+    expect(dialog).toHaveAttribute('aria-modal', 'true')
+    expect(screen.getByTestId('drawer')).not.toContainElement(dialog)
+    expect(dialog.closest('.hp-sheet-backdrop')?.parentElement).toBe(document.body)
+    expect(document.body.style.overflow).toBe('hidden')
+  })
+  it('closes on Escape and on a backdrop press, and keeps Tab inside', () => {
+    const onClose = vi.fn()
+    render(
+      <ModalSheet labelledBy="t" onRequestClose={onClose} header={<button>First</button>} footer={<button>Last</button>}>
+        <span id="t">x</span>
+      </ModalSheet>,
+    )
+    expect(screen.getByText('First')).toHaveFocus()
+    fireEvent.keyDown(document, { key: 'Tab', shiftKey: true })
+    expect(screen.getByText('Last')).toHaveFocus()
+    fireEvent.keyDown(document, { key: 'Escape' })
+    fireEvent.mouseDown(document.querySelector('.hp-sheet-backdrop')!)
+    expect(onClose).toHaveBeenCalledTimes(2)
+  })
+})
+describe('Account Settings', () => {
+  beforeEach(() => {
+    localStorage.setItem('homepilot_auth_token', 't0k')
+    vi.spyOn(globalThis, 'fetch').mockImplementation((input: RequestInfo | URL) => {
+      const url = String(input)
+      if (url.endsWith('/v1/user-profile')) return json({ ok: true, profile: { display_name: 'Alex', timezone: 'UTC' } })
+      if (url.endsWith('/v1/user-profile/secrets')) return json({ ok: true, secrets: [] })
+      if (url.endsWith('/v1/user-memory')) return json({ ok: true, memory: { items: [] } })
+      return json({ ok: true })
+    })
+  })
+  it('is one sheet: scrollable tabs, a single-line Save All, and a labelled close button', async () => {
+    render(<ProfileSettingsModal backendUrl="http://hp" apiKey="" nsfwMode={false} onClose={() => {}} />)
+    expect(await screen.findByRole('dialog', { name: 'Account Settings' })).toBeInTheDocument()
+    expect(screen.getByRole('tablist', { name: 'Settings sections' })).toHaveClass('hp-tabs')
+    expect(screen.getByRole('tab', { name: 'Profile' })).toHaveAttribute('aria-selected', 'true')
+    const save = screen.getByRole('button', { name: 'Save All' })
+    expect(save.className).toContain('whitespace-nowrap')
+    expect(save.closest('.hp-sheet__footer')).not.toBeNull()
+    expect(screen.getByRole('button', { name: 'Close settings' })).toBeInTheDocument()
+  })
+  it('asks before discarding unsaved edits, and closes freely when nothing changed', async () => {
+    const onClose = vi.fn()
+    const confirm = vi.spyOn(window, 'confirm').mockReturnValue(false)
+    render(<ProfileSettingsModal backendUrl="http://hp" apiKey="" nsfwMode={false} onClose={onClose} />)
+    await waitFor(() => expect(screen.queryByLabelText('Loading your settings')).not.toBeInTheDocument())
+    fireEvent.click(screen.getByRole('button', { name: 'Close settings' }))
+    expect(confirm).not.toHaveBeenCalled()
+    expect(onClose).toHaveBeenCalledTimes(1)
+    fireEvent.change(screen.getByDisplayValue('Alex'), { target: { value: 'Alexandra' } })
+    expect(screen.getByText('Unsaved changes')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Close settings' }))
+    expect(confirm).toHaveBeenCalledTimes(1)
+    expect(onClose).toHaveBeenCalledTimes(1) // kept open: the person chose not to discard
+  })
+})
+describe('Startup', () => {
+  it('shows a visible startup screen, explains a slow start, then offers Retry instead of a blank screen', async () => {
+    vi.useFakeTimers()
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation((_input, init) =>
+      new Promise((_resolve, reject) => {
+        init?.signal?.addEventListener('abort', () => reject(Object.assign(new Error('aborted'), { name: 'AbortError' })))
+      }),
+    )
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+    render(<AuthGate><div>app</div></AuthGate>)
+    expect(screen.getByRole('status')).toHaveTextContent('Starting HomePilot…')
+    await act(async () => { vi.advanceTimersByTime(SLOW_START_HINT_MS + 10) })
+    expect(screen.getByRole('status')).toHaveTextContent('waking up')
+    await act(async () => { vi.advanceTimersByTime(AUTH_CHECK_TIMEOUT_MS) })
+    expect(screen.getByRole('alert')).toHaveTextContent('Can’t reach HomePilot')
+    expect(screen.queryByText('app')).not.toBeInTheDocument()
+    fetchMock.mockImplementation(() => json({ user: null }))
+    await act(async () => { fireEvent.click(screen.getByRole('button', { name: 'Retry' })) })
+    expect(fetchMock).toHaveBeenCalledTimes(2)
+    expect(screen.getByText('app')).toBeInTheDocument()
+  })
+  it('Continue anyway keeps the old pre-auth path available', async () => {
+    vi.spyOn(globalThis, 'fetch').mockRejectedValue(new TypeError('Failed to fetch'))
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+    render(<AuthGate><div>app</div></AuthGate>)
+    fireEvent.click(await screen.findByRole('button', { name: 'Continue anyway' }))
+    expect(screen.getByText('app')).toBeInTheDocument()
+  })
+})
+describe('AppErrorBoundary', () => {
+  it('turns a render error into a recoverable screen instead of a blank page', () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+    let explode = true
+    function Fragile() {
+      if (explode) throw new Error('kaboom')
+      return <div>recovered</div>
+    }
+    render(<AppErrorBoundary><Fragile /></AppErrorBoundary>)
+    expect(screen.getByRole('alert')).toHaveTextContent('Something went wrong')
+    expect(screen.getByText('Error: kaboom')).toBeInTheDocument()
+    explode = false
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }))
+    expect(screen.getByText('recovered')).toBeInTheDocument()
+  })
+})

frontend/src/test/motionSystem.test.tsx ADDED Viewed

	@@ -0,0 +1,178 @@

+/**
+ * Motion system: preferences, the progressive reveal's pacing, the primitives'
+ * accessible output, and the Back gesture closing layers in order.
+ */
+import React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+  AudioWaveform,
+  Collapsible,
+  DEFAULT_MOTION_PREFS,
+  LoadingDots,
+  MOTION_EVENT,
+  ProgressBar,
+  StatusText,
+  StreamReveal,
+  VoiceOrb,
+  partialMarkdown,
+  readMotionPrefs,
+  revealDuration,
+  revealStops,
+  waveformWeights,
+  writeMotionPrefs,
+  MotionGallery,
+} from '../ui/motion'
+import { useBackToClose } from '../ui/lib/useBackToClose'
+afterEach(() => {
+  localStorage.clear()
+  delete document.documentElement.dataset.hpMotion
+  delete document.documentElement.dataset.hpReveal
+  vi.useRealTimers()
+})
+describe('motion preferences', () => {
+  it('default to the enterprise level with streamed answers, and ignore unknown values', () => {
+    expect(readMotionPrefs()).toEqual(DEFAULT_MOTION_PREFS)
+    localStorage.setItem('homepilot_motion', JSON.stringify({ level: 'wild', reveal: 'fade' }))
+    expect(readMotionPrefs()).toEqual({ level: 'enterprise', reveal: 'fade' })
+    localStorage.setItem('homepilot_motion', '{not json')
+    expect(readMotionPrefs()).toEqual(DEFAULT_MOTION_PREFS)
+  })
+  it('are saved on this device, mirrored onto <html>, and announced', () => {
+    const heard = vi.fn()
+    window.addEventListener(MOTION_EVENT, heard)
+    writeMotionPrefs({ level: 'minimal' })
+    window.removeEventListener(MOTION_EVENT, heard)
+    expect(readMotionPrefs()).toEqual({ level: 'minimal', reveal: 'stream' })
+    expect(document.documentElement.dataset.hpMotion).toBe('minimal')
+    expect(document.documentElement.dataset.hpReveal).toBe('stream')
+    expect(heard).toHaveBeenCalledTimes(1)
+  })
+})
+describe('progressive reveal', () => {
+  it('stops only after whole words and always ends at the full text', () => {
+    const text = 'Hello there,  world'
+    const stops = revealStops(text)
+    expect(stops).toEqual([6, 14, 19])
+    expect(stops.map((i) => text.slice(0, i))).toEqual(['Hello ', 'Hello there,  ', 'Hello there,  world'])
+    expect(revealStops('')).toEqual([0])
+  })
+  it('is paced by length but never slow', () => {
+    expect(revealDuration(3)).toBe(450)
+    expect(revealDuration(60)).toBe(840)
+    expect(revealDuration(5000)).toBe(1600)
+  })
+  it('closes an unfinished code fence so a partial answer still renders as code', () => {
+    const text = 'Run this:\n\n```bash\nls -la\n```\n\nDone.'
+    expect(partialMarkdown(text, 'Run this:\n\n```bash\nls'.length)).toBe('Run this:\n\n```bash\nls\n```')
+    expect(partialMarkdown(text, text.length)).toBe(text)
+  })
+  it('renders the final answer at once where motion cannot run (tests, reduced motion)', () => {
+    render(<StreamReveal text="All of it" active render={(t) => <p>{t}</p>} />)
+    expect(screen.getByText('All of it')).toBeInTheDocument()
+  })
+})
+describe('motion primitives', () => {
+  it('give every animation a readable, accessible equivalent', () => {
+    render(
+      <>
+        <LoadingDots label="Waiting for a reply" />
+        <ProgressBar value={0.42} label="Upload" />
+        <ProgressBar label="Refreshing" />
+        <StatusText text="Searching the web" />
+        <VoiceOrb state="listening" level={2} />
+        <AudioWaveform level={0.5} bars={9} />
+      </>,
+    )
+    expect(screen.getByRole('img', { name: 'Waiting for a reply' })).toBeInTheDocument()
+    expect(screen.getByRole('progressbar', { name: 'Upload' })).toHaveAttribute('aria-valuenow', '42')
+    expect(screen.getByRole('progressbar', { name: 'Refreshing' })).not.toHaveAttribute('aria-valuenow')
+    expect(screen.getByRole('status')).toHaveTextContent('Searching the web')
+    const orb = document.querySelector('.hp-orb') as HTMLElement
+    expect(orb.style.getPropertyValue('--hp-level')).toBe('1.000') // clamped
+    expect(document.querySelectorAll('.hp-wave > span')).toHaveLength(9)
+  })
+  it('announce a changed status once, with the new label', () => {
+    const { rerender } = render(<StatusText text="Searching" />)
+    rerender(<StatusText text="Reading 3 sources" />)
+    expect(screen.getByRole('status')).toHaveTextContent('Reading 3 sources')
+    expect(screen.getByRole('status')).not.toHaveTextContent('Searching')
+  })
+  it('hide collapsed content from everyone', () => {
+    const { rerender } = render(<Collapsible open={false}><span>Details</span></Collapsible>)
+    expect(document.querySelector('.hp-collapsible')).toHaveAttribute('aria-hidden', 'true')
+    rerender(<Collapsible open><span>Details</span></Collapsible>)
+    expect(document.querySelector('.hp-collapsible')).not.toHaveAttribute('aria-hidden')
+  })
+  it('shape the waveform like a voice: tallest in the middle', () => {
+    const w = waveformWeights(7)
+    expect(w[3]).toBeCloseTo(1)
+    expect(w[0]).toBeCloseTo(w[6])
+    expect(w[0]).toBeLessThan(w[3])
+  })
+})
+describe('Settings → Motion', () => {
+  it('lists all 22 animations and applies a choice immediately', () => {
+    render(<MotionGallery />)
+    const list = screen.getByRole('list', { name: 'Animations in HomePilot' })
+    expect(list.textContent).toContain('Text shimmer')
+    expect(list.textContent).toContain('Progress indicator')
+    expect(list.querySelectorAll('[data-motion-demo]')).toHaveLength(22)
+    fireEvent.click(screen.getByRole('radio', { name: /Off/ }))
+    expect(readMotionPrefs().level).toBe('off')
+    expect(screen.getByRole('radio', { name: /Off/ })).toHaveAttribute('aria-checked', 'true')
+    fireEvent.click(screen.getByRole('radio', { name: /Instant/ }))
+    expect(readMotionPrefs().reveal).toBe('instant')
+  })
+})
+function Layer({ name, onClose }: { name: string; onClose: () => void }) {
+  useBackToClose(true, onClose)
+  return <div>{name}</div>
+}
+describe('Back gesture', () => {
+  it('closes only the top layer, and gives its history entry back when closed another way', async () => {
+    vi.useFakeTimers()
+    const start = window.history.length
+    const closeDrawer = vi.fn()
+    const closeSettings = vi.fn()
+    const { rerender } = render(<Layer name="drawer" onClose={closeDrawer} />)
+    await act(async () => { vi.advanceTimersByTime(1) })
+    rerender(<><Layer name="drawer" onClose={closeDrawer} /><Layer name="settings" onClose={closeSettings} /></>)
+    await act(async () => { vi.advanceTimersByTime(1) })
+    expect(window.history.length).toBe(start + 2)
+    expect(window.history.state.hpLayer).toBe(2)
+    // Back from settings: lands on the drawer's entry.
+    await act(async () => {
+      window.dispatchEvent(new PopStateEvent('popstate', { state: { hpLayer: 1 } }))
+    })
+    expect(closeSettings).toHaveBeenCalledTimes(1)
+    expect(closeDrawer).not.toHaveBeenCalled()
+  })
+})
+describe('StatusText under rapid changes', () => {
+  it('never shows two labels when the status flips faster than it can animate', () => {
+    const { rerender } = render(<StatusText text="Listening for voice..." working={false} />)
+    for (let i = 0; i < 6; i++) {
+      rerender(<StatusText text={i % 2 ? 'Listening for voice...' : 'Listening...'} working={false} />)
+    }
+    expect(document.querySelectorAll('.hp-status-swap__out')).toHaveLength(0)
+    expect(screen.getByRole('status').textContent).toBe('Listening for voice...')
+  })
+})

frontend/src/ui/AboutDialog.tsx CHANGED Viewed

@@ -3,6 +3,7 @@
  *
  * Displays version, author, and project links in a centered modal overlay.
  */
 import React, { useEffect, useRef } from 'react'
 import { X, ExternalLink, Github, Globe, Heart, Activity } from 'lucide-react'
@@ -23,6 +24,9 @@ export default function AboutDialog({ onClose, onOpenSystemStatus }: AboutDialog
     return () => document.removeEventListener('keydown', handler)
   }, [onClose])
   // Close on backdrop click
   const handleBackdropClick = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget) onClose()

  *
  * Displays version, author, and project links in a centered modal overlay.
  */
+import { useBackToClose } from './lib/useBackToClose'
 import React, { useEffect, useRef } from 'react'
 import { X, ExternalLink, Github, Globe, Heart, Activity } from 'lucide-react'
     return () => document.removeEventListener('keydown', handler)
   }, [onClose])
+  // The phone's Back gesture closes the dialog instead of leaving HomePilot.
+  useBackToClose(true, onClose)
   // Close on backdrop click
   const handleBackdropClick = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget) onClose()

frontend/src/ui/App.tsx CHANGED Viewed

@@ -59,6 +59,8 @@ import { isDeafTurn, planSttRecovery } from './media/sttTurnHealth'
 import { getDefaultBackendUrl, resolveBackendUrl } from './lib/backendUrl'
 import { visionErrorMessage } from './lib/visionError'
 import { modeGroup, resetsConversation } from './lib/modeGroups'
 // Account & Computers header pill (Batch 4) — ADDITIVE; renders null when the
 // Account & Computers flag is off, so the header is unchanged by default.
 import { ComputerStatusPill } from './account/ComputerStatusPill'
@@ -513,6 +515,9 @@ function NavItem({
     <button
       onClick={disabled ? undefined : onClick}
       aria-disabled={disabled || undefined}
       className={[
         // hp-nav-item: min 44px tall on coarse pointers (see styles.css) —
         // WCAG touch target — while desktop keeps the dense 36px rows.
@@ -534,7 +539,7 @@ function NavItem({
       </span>
       {!collapsed && <span className="truncate">{label}</span>}
       {!collapsed && shortcut ? (
-        <span className="absolute top-1/2 right-2 -translate-y-1/2 text-xs text-white/40 opacity-0 group-hover/menu-item:opacity-100 transition-opacity duration-100">
           {shortcut}
         </span>
       ) : null}
@@ -1080,6 +1085,16 @@ function cleanConversationTitle(raw: string): string {
       // Not valid JSON — use the raw string.
     }
   }
   return text.replace(/\s+/g, ' ').trim() || 'Conversation'
 }
@@ -1133,8 +1148,9 @@ function SidebarRecents({
       <button
         key={c.conversation_id}
         type="button"
         className={[
-          'block w-full text-left px-3 py-1.5 text-[13px] rounded-lg transition-colors whitespace-nowrap overflow-hidden text-ellipsis',
           isActive
             ? 'bg-white/10 text-white'
             : 'text-white/70 hover:bg-white/5 hover:text-white',
@@ -1188,7 +1204,7 @@ function SidebarRecents({
       <div className="px-3 pt-1">
         <button
           type="button"
-          className="text-[12px] text-white/40 hover:text-white transition-colors"
           onClick={onViewAll}
         >
           View all history →
@@ -1218,6 +1234,7 @@ function Sidebar({
   onToggleCollapse,
   chatReasoningMode,
   showMeetingsNav = false,
 }: {
   mode: Mode
   setMode: (m: Mode) => void
@@ -1241,6 +1258,8 @@ function Sidebar({
   chatReasoningMode: ChatReasoningMode
   /** MS28 `_CATALOG`, default off. Absent renders the sidebar unchanged. */
   showMeetingsNav?: boolean
 }) {
   const [showAccountMenu, setShowAccountMenu] = useState(false)
   const [showProfileModal, setShowProfileModal] = useState(false)
@@ -1343,8 +1362,19 @@ function Sidebar({
             </span>
           )}
         </div>
-        {/* Collapse toggle */}
-        {!collapsed && (
           <button
             type="button"
             onClick={onToggleCollapse}
@@ -1388,7 +1418,7 @@ function Sidebar({
           >
             <Search size={16} className="group-hover:text-white/80 transition-colors" />
             <span className="group-hover:text-white/80 transition-colors">Search chats</span>
-            <span className="ml-auto text-xs opacity-40 bg-white/5 px-1.5 py-0.5 rounded border border-white/10">
               Ctrl+K
             </span>
           </button>
@@ -1459,7 +1489,7 @@ function Sidebar({
         <div className="px-1.5 pt-1">
           <button
             type="button"
-            className="w-full text-left px-3 py-2 text-[13px] text-white/70 hover:bg-white/5 hover:text-white rounded-xl truncate transition-colors"
             onClick={onNewConversation}
           >
             New conversation
@@ -1530,40 +1560,50 @@ function Sidebar({
         />
       )}
-      {/* Profile & Personalization modal (opened from account menu) */}
-      {showProfileModal && (
-        <ProfileSettingsModal
-          backendUrl={settingsDraft.backendUrl}
-          apiKey={settingsDraft.apiKey}
-          nsfwMode={!!settingsDraft.nsfwMode}
-          onClose={() => setShowProfileModal(false)}
-        />
-      )}
-      {showSettings ? (
-        <SettingsPanel
-          value={settingsDraft}
-          onChangeDraft={(next) => setSettingsDraft(next)}
-          onSave={onSaveSettings}
-          onClose={() => setShowSettings(false)}
-        />
-      ) : null}
-      {/* About HomePilot dialog */}
-      {showAboutDialog && (
-        <AboutDialog
-          onClose={() => setShowAboutDialog(false)}
-          onOpenSystemStatus={() => setShowSystemStatus(true)}
-        />
-      )}
-      {/* System Status dashboard */}
-      {showSystemStatus && (
-        <SystemStatusDialog
-          backendUrl={settingsDraft.backendUrl}
-          apiKey={settingsDraft.apiKey}
-          onClose={() => setShowSystemStatus(false)}
-        />
       )}
     </aside>
   )
@@ -1623,6 +1663,30 @@ function QueryBar({
   // ---- Drag-and-drop image support ----
   const [isDragging, setIsDragging] = useState(false)
   const dragCounterRef = useRef(0)
   const handleDragEnter = useCallback((e: React.DragEvent) => {
     e.preventDefault()
@@ -2150,9 +2214,10 @@ function QueryBar({
                 ref={modeButtonRef}
                 type="button"
                 onClick={() => setModeMenuOpen((v) => !v)}
-                className="h-10 px-3 rounded-full bg-white/5 border border-white/10 text-white/90 text-sm font-medium inline-flex items-center gap-1.5 hover:bg-white/10 transition-colors"
                 aria-haspopup="menu"
                 aria-expanded={modeMenuOpen}
                 title="Expert mode selector"
               >
                 <span className="hidden sm:inline">{CHAT_REASONING_OPTIONS.find((m) => m.id === chatReasoningMode)?.label ?? 'Persona'}</span>
@@ -2226,7 +2291,7 @@ function QueryBar({
               type="button"
               disabled
               data-testid="composer-mic"
-              className="h-10 w-10 rounded-full grid place-items-center bg-white/10 text-white/60 cursor-wait"
               aria-label="Transcribing"
               title="Transcribing…"
             >
@@ -2238,8 +2303,8 @@ function QueryBar({
               data-testid="composer-mic"
               className={
                 isListening
-                  ? 'h-10 w-10 rounded-full grid place-items-center bg-red-500/20 text-red-400 ring-2 ring-red-500/60 animate-pulse transition-colors'
-                  : 'h-10 w-10 rounded-full bg-white/5 text-white/60 grid place-items-center hover:bg-white/10 hover:text-white transition-colors'
               }
               aria-label={isListening ? 'Stop recording' : 'Voice input'}
               title={isListening ? 'Stop recording' : 'Voice input'}
@@ -2252,7 +2317,7 @@ function QueryBar({
             <button
               type="button"
               onClick={onSend}
-              className="h-10 w-10 rounded-full bg-white text-black grid place-items-center hover:opacity-90 transition-opacity"
               aria-label="Submit"
               title="Submit"
             >
@@ -2311,6 +2376,7 @@ function QueryBar({
             screens and the full amount from `sm:` up. */}
         <div className="ps-12 pe-24 sm:pe-72">
           <textarea
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onPaste={handlePaste}
@@ -2329,9 +2395,9 @@ function QueryBar({
               }
             }}
             rows={1}
-            placeholder={pendingPreviewUrl ? 'Describe what you want to do with this image…' : (placeholderOverride ?? modeHint(mode))}
             className={[
-              'w-full bg-transparent text-white placeholder:text-white/55',
               'focus:outline-none resize-none',
               'min-h-14 py-4 px-2',
               'max-h-[400px] overflow-y-auto',
@@ -2413,26 +2479,14 @@ function EmptyState({
 }
 function AssistantSkeleton({ label }: { label?: string }) {
-  // Grok-style "thinking" indicator: three dots that bounce in sequence.
-  // Used for every pending assistant turn (legacy chat, Expert, Agent).
-  // Staggered animationDelay gives the wave effect without custom keyframes.
   return (
-    <div className="flex items-center gap-3">
-      <div className="flex items-end gap-1.5 h-4" aria-label="Thinking">
-        <span
-          className="w-1.5 h-1.5 rounded-full bg-white/70 animate-bounce"
-          style={{ animationDelay: '0ms', animationDuration: '1.2s' }}
-        />
-        <span
-          className="w-1.5 h-1.5 rounded-full bg-white/70 animate-bounce"
-          style={{ animationDelay: '150ms', animationDuration: '1.2s' }}
-        />
-        <span
-          className="w-1.5 h-1.5 rounded-full bg-white/70 animate-bounce"
-          style={{ animationDelay: '300ms', animationDuration: '1.2s' }}
-        />
-      </div>
-      <span className="text-sm text-white/60">{label ?? 'Thinking'}</span>
     </div>
   )
 }
@@ -2506,7 +2560,27 @@ function ChatState({
   allowPersonaMode: boolean
 }) {
   const { copied, copy } = useCopyMessage()
   const displayMessages = useMemo(() => collapseCallTurns(messages), [messages])
   const enterpriseCallRow = useEnterpriseCallRow()
   const [chatSettingsOpen, setChatSettingsOpen] = useState(false)
   const handleStartCall = useCallback(() => {
@@ -2554,7 +2628,10 @@ function ChatState({
           with the other utility icons and only opens a dedicated call
           overlay (see CallOverlay). Call mode is a distinct session,
           not a styling of the header. */}
-      <div className="fixed top-3 right-5 z-50">
         <div className="relative flex items-center gap-2">
           {/* Live computer/presence pill (Batch 4). Null unless the Account &
               Computers flag is on and a computer exists. */}
@@ -2565,7 +2642,7 @@ function ChatState({
                 type="button"
                 onClick={handleStartCall}
                 className={[
-                  'w-9 h-9 flex items-center justify-center rounded-full border',
                   'bg-white/5 border-white/10 text-white/60 hover:bg-white/10 hover:text-white transition-colors',
                 ].join(' ')}
                 title="Start call"
@@ -2583,7 +2660,7 @@ function ChatState({
           <button
             type="button"
             onClick={() => setChatSettingsOpen((v) => !v)}
-            className="w-9 h-9 flex items-center justify-center rounded-full bg-white/5 border border-white/10 text-white/60 hover:bg-white/10 hover:text-white transition-colors"
             title="Chat settings"
             aria-label="Chat settings"
           >
@@ -2592,7 +2669,7 @@ function ChatState({
           <button
             type="button"
             onClick={onNewConversation}
-            className="w-9 h-9 flex items-center justify-center rounded-full bg-white/5 border border-white/10 text-white/60 hover:bg-white/10 hover:text-white transition-colors"
             title="New Chat"
             aria-label="New Chat"
           >
@@ -2622,11 +2699,11 @@ function ChatState({
         </div>
       )}
-      <div className={`flex-1 overflow-y-auto px-4 ${chatSettings.incognito ? 'pt-3' : 'pt-14'} pb-8 space-y-8`}>
         {displayMessages.map((m) => (
           <div
             key={m.id}
-            className={`flex gap-5 ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}
           >
             {/* Inline call-event render. Enterprise mode (default)
                 uses the thin CallEventRow — a centered timeline
@@ -2670,14 +2747,14 @@ function ChatState({
               )
             ) : (<>
             {m.role === 'assistant' ? (
-              <div className="w-8 h-8 rounded-full bg-white text-black flex items-center justify-center flex-shrink-0 font-bold text-sm mt-1">
                 /
               </div>
             ) : null}
             {/* User: bubble | Assistant: bare text on background (Grok style) */}
             {m.role === 'user' ? (
-              <div className="max-w-[85%] bg-white/10 border border-white/10 rounded-3xl px-5 py-4">
                 {m.media?.images?.length ? (
                   <div className="flex gap-2 mb-2">
                     {m.media.images.map((src: string, i: number) => {
@@ -2699,18 +2776,28 @@ function ChatState({
                 </div>
               </div>
             ) : (
-              <div className="max-w-[85%]">
                 <div className="text-[16px] leading-relaxed text-[#EEE] font-normal tracking-wide">
                   {m.pending ? (
                     <AssistantSkeleton label={m.text?.trim() ? m.text : undefined} />
                   ) : (
-                    <div className="animate-fadeIn">
-                      <MessageMarkdown
                         text={m.media?.images?.length
                           ? (m.text || '').replace(/!\[[^\]]*\]\(media:\/\/[^)]+\)\s*/g, '').trim()
                           : m.text}
-                        onImageClick={setLightbox}
-                        backendUrl={backendUrl}
                       />
                     </div>
                   )}
@@ -2718,22 +2805,24 @@ function ChatState({
                 {/* Grok-style icon action row */}
                 {!m.pending ? (
-                  <div className="mt-2 flex items-center gap-1 text-white/40">
                     <button
                       type="button"
-                      onClick={() => copy(m.text || '')}
-                      className="p-1.5 rounded-full hover:bg-white/10 hover:text-white transition-colors"
-                      title={copied ? 'Copied!' : 'Copy'}
                     >
-                      <Copy size={16} />
                     </button>
                     {m.error && m.retry ? (
                       <button
                         type="button"
                         onClick={() => onRetryMessage(m.id)}
-                        className="p-1.5 rounded-full hover:bg-white/10 hover:text-white transition-colors"
                         title="Retry"
                       >
                         <RotateCw size={16} />
                       </button>
@@ -2835,7 +2924,7 @@ function ChatState({
         <div ref={endRef} className="h-6" />
       </div>
-      <div className="bg-black/95 backdrop-blur-sm pb-4">
         <div className="px-4">
           <QueryBar
             centered={false}
@@ -2857,7 +2946,7 @@ function ChatState({
         {/* MS32. Nothing but the disclaimer lives under the composer. The meeting control
             moved to the header cluster above; its setup copy is contextual now and its
             configuration lives in Settings → Voice Assistant. Chat first. */}
-        <div className="text-center text-[11px] text-white/25 pt-4 pb-0.5">
           HomePilot can make mistakes. Verify important information.
         </div>
       </div>
@@ -2871,18 +2960,20 @@ function uuid() {
   return crypto.randomUUID()
 }
-function modeHint(mode: Mode) {
   switch (mode) {
     case 'chat':
-      return 'What do you want to know?'
     case 'imagine':
-      return 'Describe an image to generate...'
     case 'edit':
-      return 'Upload an image or describe edits...'
     case 'animate':
-      return 'Upload an image or describe motion...'
     default:
-      return 'What do you want to know?'
   }
 }
@@ -3204,7 +3295,8 @@ export default function App() {
   })
   // ── Mobile sidebar: auto-hide on small screens, show as overlay ──
-  const [isMobile, setIsMobile] = useState(false)
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
   useEffect(() => {
@@ -3219,6 +3311,67 @@ export default function App() {
     if (isMobile) setMobileSidebarOpen(false)
   }, [mode, isMobile])
   const toggleSidebar = useCallback(() => {
     if (isMobile) {
@@ -5843,20 +5996,31 @@ ${personalityPrompt || 'You are a friendly voice assistant. Be helpful and warm.
       onOpenConversation={(cid) => { void loadConversation(cid); setMode('chat') }}
     >
     <div className="hp-app-shell flex bg-black text-white font-sans selection:bg-white/20 overflow-hidden relative">
-      {/* ── Mobile sidebar overlay ── */}
-      {isMobile && mobileSidebarOpen && (
         <div
-          className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm"
           onClick={() => setMobileSidebarOpen(false)}
           aria-hidden
         />
       )}
       <div
         className={
           isMobile
-            ? `fixed inset-y-0 left-0 z-50 transition-transform duration-200 pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] ${mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`
             : ''
         }
       >
         <Sidebar
           mode={mode}
@@ -5864,8 +6028,8 @@ ${personalityPrompt || 'You are a friendly voice assistant. Be helpful and warm.
           messages={messages}
           conversations={conversations}
           activeConversationId={conversationId}
-          onLoadConversation={loadConversation}
-          onNewConversation={onNewConversation}
           onScrollToBottom={onScrollToBottom}
           showSettings={showSettings}
           setShowSettings={setShowSettings}
@@ -5873,11 +6037,12 @@ ${personalityPrompt || 'You are a friendly voice assistant. Be helpful and warm.
           setSettingsDraft={setSettingsDraft}
           onSaveSettings={onSaveSettings}
           showHistory={showHistory}
-          setShowHistory={setShowHistory}
           collapsed={isMobile ? false : sidebarCollapsed}
           onToggleCollapse={toggleSidebar}
           chatReasoningMode={chatReasoningMode}
           showMeetingsNav={meetingsNavEnabled}
         />
       </div>
@@ -5889,10 +6054,12 @@ ${personalityPrompt || 'You are a friendly voice assistant. Be helpful and warm.
           the top-right gear/pencil actions. */}
       {isMobile && !mobileSidebarOpen && (
         <button
           type="button"
           onClick={() => setMobileSidebarOpen(true)}
-          className="fixed top-[max(0.6rem,env(safe-area-inset-top))] left-[max(0.6rem,env(safe-area-inset-left))] z-40 flex h-10 w-10 items-center justify-center rounded-xl bg-black/45 backdrop-blur-md border border-white/15 text-white/85 shadow-lg shadow-black/40 hover:bg-black/60 active:scale-95 transition-all"
           aria-label="Open menu"
         >
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
             <line x1="3" y1="6" x2="21" y2="6" />
@@ -5902,7 +6069,7 @@ ${personalityPrompt || 'You are a friendly voice assistant. Be helpful and warm.
         </button>
       )}
-      <main className="flex-1 flex flex-col relative min-w-0">
         {/* History Panel */}
         {showHistory && (
           <HistoryPanel

 import { getDefaultBackendUrl, resolveBackendUrl } from './lib/backendUrl'
 import { visionErrorMessage } from './lib/visionError'
 import { modeGroup, resetsConversation } from './lib/modeGroups'
+import { useBackToClose } from './lib/useBackToClose'
+import { LoadingDots, StatusText, StreamReveal, motionAllowed, useMotionPrefs } from './motion'
 // Account & Computers header pill (Batch 4) — ADDITIVE; renders null when the
 // Account & Computers flag is off, so the header is unchanged by default.
 import { ComputerStatusPill } from './account/ComputerStatusPill'
     <button
       onClick={disabled ? undefined : onClick}
       aria-disabled={disabled || undefined}
+      aria-current={active ? 'page' : undefined}
+      aria-label={collapsed ? label : undefined}
+      aria-keyshortcuts={shortcut ? shortcut.replace('Ctrl', 'Control') : undefined}
       className={[
         // hp-nav-item: min 44px tall on coarse pointers (see styles.css) —
         // WCAG touch target — while desktop keeps the dense 36px rows.
       </span>
       {!collapsed && <span className="truncate">{label}</span>}
       {!collapsed && shortcut ? (
+        <span aria-hidden className="hp-kbd-hint absolute top-1/2 right-2 -translate-y-1/2 text-xs text-white/40 opacity-0 group-hover/menu-item:opacity-100 transition-opacity duration-100">
           {shortcut}
         </span>
       ) : null}
       // Not valid JSON — use the raw string.
     }
   }
+  // A title is plain text: drop Markdown markers (**bold**, `code`, # headings,
+  // > quotes, list bullets, link targets) that would otherwise show literally.
+  text = text
+    .replace(/```[a-z0-9_-]*\n?/gi, '')
+    .replace(/!?\[([^\]]*)\]\([^)]*\)/g, '$1')
+    // Only paired markers, so snake_case names and arithmetic stay intact.
+    .replace(/\*\*(.+?)\*\*/g, '$1')
+    .replace(/\*(\S(?:[^*]*\S)?)\*/g, '$1')
+    .replace(/`([^`]+)`/g, '$1')
+    .replace(/^\s*(#{1,6}|>|[-*+]|\d+\.)\s+/gm, '')
   return text.replace(/\s+/g, ' ').trim() || 'Conversation'
 }
       <button
         key={c.conversation_id}
         type="button"
+        aria-current={isActive ? 'true' : undefined}
         className={[
+          'hp-touch-row block w-full text-left px-3 py-1.5 text-[13px] rounded-lg transition-colors whitespace-nowrap overflow-hidden text-ellipsis',
           isActive
             ? 'bg-white/10 text-white'
             : 'text-white/70 hover:bg-white/5 hover:text-white',
       <div className="px-3 pt-1">
         <button
           type="button"
+          className="hp-touch-row text-[12px] text-white/55 hover:text-white transition-colors"
           onClick={onViewAll}
         >
           View all history →
   onToggleCollapse,
   chatReasoningMode,
   showMeetingsNav = false,
+  drawer = false,
 }: {
   mode: Mode
   setMode: (m: Mode) => void
   chatReasoningMode: ChatReasoningMode
   /** MS28 `_CATALOG`, default off. Absent renders the sidebar unchanged. */
   showMeetingsNav?: boolean
+  /** Rendered as the phone's off-canvas drawer: the collapse control closes it. */
+  drawer?: boolean
 }) {
   const [showAccountMenu, setShowAccountMenu] = useState(false)
   const [showProfileModal, setShowProfileModal] = useState(false)
             </span>
           )}
         </div>
+        {/* Collapse toggle — on phones it closes the drawer */}
+        {!collapsed && drawer && (
+          <button
+            type="button"
+            onClick={onToggleCollapse}
+            aria-label="Close menu"
+            title="Close menu"
+            className="-mr-1.5 h-11 w-11 rounded-xl grid place-items-center text-white/60 hover:text-white hover:bg-white/[0.06]"
+          >
+            <X size={20} strokeWidth={1.8} />
+          </button>
+        )}
+        {!collapsed && !drawer && (
           <button
             type="button"
             onClick={onToggleCollapse}
           >
             <Search size={16} className="group-hover:text-white/80 transition-colors" />
             <span className="group-hover:text-white/80 transition-colors">Search chats</span>
+            <span aria-hidden className="hp-kbd-hint ml-auto text-xs opacity-40 bg-white/5 px-1.5 py-0.5 rounded border border-white/10">
               Ctrl+K
             </span>
           </button>
         <div className="px-1.5 pt-1">
           <button
             type="button"
+            className="hp-touch-row w-full text-left px-3 py-2 text-[13px] text-white/70 hover:bg-white/5 hover:text-white rounded-xl truncate transition-colors"
             onClick={onNewConversation}
           >
             New conversation
         />
       )}
+      {/* Dialogs opened from the sidebar render at <body>. On phones the sidebar
+          is a drawer that slides in with a CSS transform, and a transformed
+          ancestor becomes the containing block for `position: fixed` — so a
+          "full-screen" dialog rendered here was squeezed into the drawer's
+          width. Portalling makes the drawer irrelevant to their layout. */}
+      {createPortal(
+        <>
+          {/* Profile & Personalization modal (opened from account menu) */}
+          {showProfileModal && (
+            <ProfileSettingsModal
+              backendUrl={settingsDraft.backendUrl}
+              apiKey={settingsDraft.apiKey}
+              nsfwMode={!!settingsDraft.nsfwMode}
+              onClose={() => setShowProfileModal(false)}
+            />
+          )}
+          {showSettings ? (
+            <SettingsPanel
+              value={settingsDraft}
+              onChangeDraft={(next) => setSettingsDraft(next)}
+              onSave={onSaveSettings}
+              onClose={() => setShowSettings(false)}
+            />
+          ) : null}
+          {/* About HomePilot dialog */}
+          {showAboutDialog && (
+            <AboutDialog
+              onClose={() => setShowAboutDialog(false)}
+              onOpenSystemStatus={() => setShowSystemStatus(true)}
+            />
+          )}
+          {/* System Status dashboard */}
+          {showSystemStatus && (
+            <SystemStatusDialog
+              backendUrl={settingsDraft.backendUrl}
+              apiKey={settingsDraft.apiKey}
+              onClose={() => setShowSystemStatus(false)}
+            />
+          )}
+        </>,
+        document.body,
       )}
     </aside>
   )
   // ---- Drag-and-drop image support ----
   const [isDragging, setIsDragging] = useState(false)
   const dragCounterRef = useRef(0)
+  // Composer grows with what is typed (up to the 400px cap) instead of
+  // scrolling inside a one-line box; resets when the message is sent.
+  const composerRef = useRef<HTMLTextAreaElement>(null)
+  // The short hint is chosen by the field's own width, not the window's: in a
+  // landscape phone frame the sidebar is showing and the field is narrow even
+  // though the window is wide. Window width is the fallback without ResizeObserver.
+  const [compactHint, setCompactHint] = useState(() => typeof window !== 'undefined' && window.innerWidth < 480)
+  useEffect(() => {
+    const el = composerRef.current
+    if (el && typeof ResizeObserver !== 'undefined') {
+      const ro = new ResizeObserver(() => setCompactHint(el.clientWidth > 0 && el.clientWidth < 280))
+      ro.observe(el)
+      return () => ro.disconnect()
+    }
+    const onResize = () => setCompactHint(window.innerWidth < 480)
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+  React.useLayoutEffect(() => {
+    const el = composerRef.current
+    if (!el) return
+    el.style.height = 'auto'
+    el.style.height = `${Math.min(el.scrollHeight, 400)}px`
+  }, [input])
   const handleDragEnter = useCallback((e: React.DragEvent) => {
     e.preventDefault()
                 ref={modeButtonRef}
                 type="button"
                 onClick={() => setModeMenuOpen((v) => !v)}
+                className="hp-icon-btn h-10 px-3 rounded-full bg-white/5 border border-white/10 text-white/90 text-sm font-medium inline-flex items-center gap-1.5 hover:bg-white/10 transition-colors"
                 aria-haspopup="menu"
                 aria-expanded={modeMenuOpen}
+                aria-label={`Response mode: ${CHAT_REASONING_OPTIONS.find((m) => m.id === chatReasoningMode)?.label ?? 'Persona'}`}
                 title="Expert mode selector"
               >
                 <span className="hidden sm:inline">{CHAT_REASONING_OPTIONS.find((m) => m.id === chatReasoningMode)?.label ?? 'Persona'}</span>
               type="button"
               disabled
               data-testid="composer-mic"
+              className="hp-icon-btn h-10 w-10 rounded-full grid place-items-center bg-white/10 text-white/60 cursor-wait"
               aria-label="Transcribing"
               title="Transcribing…"
             >
               data-testid="composer-mic"
               className={
                 isListening
+                  ? 'hp-icon-btn h-10 w-10 rounded-full grid place-items-center bg-red-500/20 text-red-400 ring-2 ring-red-500/60 animate-pulse transition-colors'
+                  : 'hp-icon-btn h-10 w-10 rounded-full bg-white/5 text-white/60 grid place-items-center hover:bg-white/10 hover:text-white transition-colors'
               }
               aria-label={isListening ? 'Stop recording' : 'Voice input'}
               title={isListening ? 'Stop recording' : 'Voice input'}
             <button
               type="button"
               onClick={onSend}
+              className="hp-icon-btn h-10 w-10 rounded-full bg-white text-black grid place-items-center hover:opacity-90 transition-opacity"
               aria-label="Submit"
               title="Submit"
             >
             screens and the full amount from `sm:` up. */}
         <div className="ps-12 pe-24 sm:pe-72">
           <textarea
+            ref={composerRef}
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onPaste={handlePaste}
               }
             }}
             rows={1}
+            placeholder={pendingPreviewUrl ? (compactHint ? 'What should I do with it?' : 'Describe what you want to do with this image…') : (placeholderOverride ?? modeHint(mode, compactHint))}
             className={[
+              'hp-composer-input w-full bg-transparent text-white placeholder:text-white/55',
               'focus:outline-none resize-none',
               'min-h-14 py-4 px-2',
               'max-h-[400px] overflow-y-auto',
 }
 function AssistantSkeleton({ label }: { label?: string }) {
+  // "Thinking" indicator for every pending assistant turn (legacy chat, Expert,
+  // Agent): rippling dots beside a working label that shimmers, and changes
+  // ("Thinking…" → "Searching…" → "Retrying…") slide over each other instead
+  // of jumping (motion system, animations 1, 5 and 17).
   return (
+    <div className="flex items-center gap-3" aria-label="Thinking">
+      <LoadingDots label="Thinking" className="text-white/70" />
+      <StatusText text={label ?? 'Thinking'} className="text-sm" />
     </div>
   )
 }
   allowPersonaMode: boolean
 }) {
   const { copied, copy } = useCopyMessage()
+  const [copiedId, setCopiedId] = useState<string | null>(null)
   const displayMessages = useMemo(() => collapseCallTurns(messages), [messages])
+  // New answers are revealed progressively (Settings → Motion). Only a turn that
+  // was seen waiting in this view, or that the send flow marked `animate`, is
+  // revealed; history loads as it is.
+  const motionPrefs = useMotionPrefs()
+  const canAnimate = motionAllowed(motionPrefs)
+  const seenPendingRef = useRef<Set<string>>(new Set())
+  const revealedRef = useRef<Set<string>>(new Set())
+  useEffect(() => {
+    for (const m of messages) if (m.pending) seenPendingRef.current.add(m.id)
+  }, [messages])
+  const scrollerRef = useRef<HTMLDivElement>(null)
+  const keepPinned = useCallback(() => {
+    const el = scrollerRef.current
+    if (el && el.scrollHeight - el.scrollTop - el.clientHeight < 160) el.scrollTop = el.scrollHeight
+  }, [])
+  const markRevealed = useCallback((id: string) => {
+    revealedRef.current.add(id)
+    window.dispatchEvent(new CustomEvent('hp:messageAnimated', { detail: { id } }))
+  }, [])
   const enterpriseCallRow = useEnterpriseCallRow()
   const [chatSettingsOpen, setChatSettingsOpen] = useState(false)
   const handleStartCall = useCallback(() => {
           with the other utility icons and only opens a dedicated call
           overlay (see CallOverlay). Call mode is a distinct session,
           not a styling of the header. */}
+      {/* Phones: a soft scrim under the menu button and header icons so text
+          scrolling past never runs underneath them. */}
+      <div className="md:hidden pointer-events-none fixed inset-x-0 top-0 z-30 h-16 hp-top-scrim" aria-hidden />
+      <div className="fixed top-3 right-3 sm:right-5 z-50">
         <div className="relative flex items-center gap-2">
           {/* Live computer/presence pill (Batch 4). Null unless the Account &
               Computers flag is on and a computer exists. */}
                 type="button"
                 onClick={handleStartCall}
                 className={[
+                  'hp-icon-btn w-9 h-9 flex items-center justify-center rounded-full border',
                   'bg-white/5 border-white/10 text-white/60 hover:bg-white/10 hover:text-white transition-colors',
                 ].join(' ')}
                 title="Start call"
           <button
             type="button"
             onClick={() => setChatSettingsOpen((v) => !v)}
+            className="hp-icon-btn w-9 h-9 flex items-center justify-center rounded-full bg-white/5 border border-white/10 text-white/60 hover:bg-white/10 hover:text-white transition-colors"
             title="Chat settings"
             aria-label="Chat settings"
           >
           <button
             type="button"
             onClick={onNewConversation}
+            className="hp-icon-btn w-9 h-9 flex items-center justify-center rounded-full bg-white/5 border border-white/10 text-white/60 hover:bg-white/10 hover:text-white transition-colors"
             title="New Chat"
             aria-label="New Chat"
           >
         </div>
       )}
+      <div ref={scrollerRef} className={`flex-1 overflow-y-auto px-4 ${chatSettings.incognito ? 'pt-3' : 'pt-14'} pb-8 space-y-8`}>
         {displayMessages.map((m) => (
           <div
             key={m.id}
+            className={`flex gap-3 sm:gap-5 hp-msg-in ${m.role === 'user' ? 'hp-msg-in--user justify-end' : 'justify-start'}`}
           >
             {/* Inline call-event render. Enterprise mode (default)
                 uses the thin CallEventRow — a centered timeline
               )
             ) : (<>
             {m.role === 'assistant' ? (
+              <div className="hidden sm:flex w-8 h-8 rounded-full bg-white text-black items-center justify-center flex-shrink-0 font-bold text-sm mt-1" aria-hidden>
                 /
               </div>
             ) : null}
             {/* User: bubble | Assistant: bare text on background (Grok style) */}
             {m.role === 'user' ? (
+              <div className="max-w-[85%] min-w-0 bg-white/10 border border-white/10 rounded-3xl px-4 py-3 sm:px-5 sm:py-4">
                 {m.media?.images?.length ? (
                   <div className="flex gap-2 mb-2">
                     {m.media.images.map((src: string, i: number) => {
                 </div>
               </div>
             ) : (
+              <div className="min-w-0 max-w-full sm:max-w-[85%]">
                 <div className="text-[16px] leading-relaxed text-[#EEE] font-normal tracking-wide">
                   {m.pending ? (
                     <AssistantSkeleton label={m.text?.trim() ? m.text : undefined} />
                   ) : (
+                    <div className={motionPrefs.reveal === 'instant' ? undefined : 'animate-fadeIn'}>
+                      <StreamReveal
                         text={m.media?.images?.length
                           ? (m.text || '').replace(/!\[[^\]]*\]\(media:\/\/[^)]+\)\s*/g, '').trim()
                           : m.text}
+                        active={
+                          canAnimate &&
+                          motionPrefs.reveal === 'stream' &&
+                          !m.error &&
+                          (m.animate === true || seenPendingRef.current.has(m.id)) &&
+                          !revealedRef.current.has(m.id)
+                        }
+                        onProgress={keepPinned}
+                        onDone={() => markRevealed(m.id)}
+                        render={(visible) => (
+                          <MessageMarkdown text={visible} onImageClick={setLightbox} backendUrl={backendUrl} />
+                        )}
                       />
                     </div>
                   )}
                 {/* Grok-style icon action row */}
                 {!m.pending ? (
+                  <div className="mt-2 flex items-center gap-1 text-white/55">
                     <button
                       type="button"
+                      onClick={() => { void copy(m.text || ''); setCopiedId(m.id) }}
+                      className="hp-icon-btn p-1.5 rounded-full hover:bg-white/10 hover:text-white transition-colors"
+                      title={copied && copiedId === m.id ? 'Copied!' : 'Copy'}
+                      aria-label={copied && copiedId === m.id ? 'Copied' : 'Copy message'}
                     >
+                      {copied && copiedId === m.id ? <Check size={16} className="hp-enter-fade" /> : <Copy size={16} />}
                     </button>
                     {m.error && m.retry ? (
                       <button
                         type="button"
                         onClick={() => onRetryMessage(m.id)}
+                        className="hp-icon-btn p-1.5 rounded-full hover:bg-white/10 hover:text-white transition-colors"
                         title="Retry"
+                        aria-label="Retry"
                       >
                         <RotateCw size={16} />
                       </button>
         <div ref={endRef} className="h-6" />
       </div>
+      <div className="hp-composer-dock pb-4">
         <div className="px-4">
           <QueryBar
             centered={false}
         {/* MS32. Nothing but the disclaimer lives under the composer. The meeting control
             moved to the header cluster above; its setup copy is contextual now and its
             configuration lives in Settings → Voice Assistant. Chat first. */}
+        <div className="text-center text-[11px] text-white/50 pt-3 pb-[max(0.125rem,env(safe-area-inset-bottom))]">
           HomePilot can make mistakes. Verify important information.
         </div>
       </div>
   return crypto.randomUUID()
 }
+/** Composer placeholder. `compact` is for narrow phones, where the full hint
+ * would be cut off mid-word inside the one-line field. */
+function modeHint(mode: Mode, compact = false) {
   switch (mode) {
     case 'chat':
+      return compact ? 'Ask anything' : 'What do you want to know?'
     case 'imagine':
+      return compact ? 'Describe an image…' : 'Describe an image to generate...'
     case 'edit':
+      return compact ? 'Describe an edit…' : 'Upload an image or describe edits...'
     case 'animate':
+      return compact ? 'Describe motion…' : 'Upload an image or describe motion...'
     default:
+      return compact ? 'Ask anything' : 'What do you want to know?'
   }
 }
   })
   // ── Mobile sidebar: auto-hide on small screens, show as overlay ──
+  // Start from the real width so phones never render one desktop frame first.
+  const [isMobile, setIsMobile] = useState(() => typeof window !== 'undefined' && window.innerWidth < 768)
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
   useEffect(() => {
     if (isMobile) setMobileSidebarOpen(false)
   }, [mode, isMobile])
+  // The open drawer is a modal: Escape closes it, Tab stays inside it, the page
+  // behind is inert, and focus returns to the menu button when it closes.
+  const drawerRef = useRef<HTMLDivElement>(null)
+  const mainRef = useRef<HTMLElement>(null)
+  const menuButtonRef = useRef<HTMLButtonElement>(null)
+  const drawerWasOpen = useRef(false)
+  const drawerOpen = isMobile && mobileSidebarOpen
+  useEffect(() => {
+    const main = mainRef.current
+    if (!drawerOpen) {
+      main?.removeAttribute('inert')
+      if (drawerWasOpen.current) {
+        drawerWasOpen.current = false
+        // The menu button re-mounts when the drawer closes; focus it next frame
+        // unless something else (a dialog opened from the drawer) took focus.
+        requestAnimationFrame(() => {
+          const active = document.activeElement
+          if (!active || active === document.body || drawerRef.current?.contains(active)) menuButtonRef.current?.focus({ preventScroll: true })
+        })
+      }
+      return
+    }
+    drawerWasOpen.current = true
+    main?.setAttribute('inert', '')
+    const focusables = () =>
+      Array.from(
+        drawerRef.current?.querySelectorAll<HTMLElement>('a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])') ?? [],
+      ).filter((el) => el.offsetParent !== null || el === document.activeElement)
+    requestAnimationFrame(() => focusables()[0]?.focus({ preventScroll: true }))
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        // A dialog opened from the drawer handles its own Escape first.
+        if (document.querySelector('[role="dialog"][aria-modal="true"]:not(.hp-drawer)') && !drawerRef.current?.contains(document.activeElement)) return
+        setMobileSidebarOpen(false)
+        return
+      }
+      if (e.key !== 'Tab' || !drawerRef.current?.contains(document.activeElement)) return
+      const items = focusables()
+      if (!items.length) return
+      const first = items[0]
+      const last = items[items.length - 1]
+      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus() }
+      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus() }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('keydown', onKey)
+      main?.removeAttribute('inert')
+    }
+  }, [drawerOpen])
+  // The phone's Back gesture closes the drawer instead of leaving HomePilot.
+  useBackToClose(drawerOpen, () => setMobileSidebarOpen(false))
+  // Wraps a drawer action so it also closes the drawer (phones).
+  const closeDrawerAnd = useCallback(
+    <T,>(fn: (v: T) => void) => (v: T) => {
+      setMobileSidebarOpen(false)
+      fn(v)
+    },
+    [],
+  )
   const toggleSidebar = useCallback(() => {
     if (isMobile) {
       onOpenConversation={(cid) => { void loadConversation(cid); setMode('chat') }}
     >
     <div className="hp-app-shell flex bg-black text-white font-sans selection:bg-white/20 overflow-hidden relative">
+      {/* ── Mobile drawer ──
+          On phones the sidebar is an off-canvas drawer over a fading backdrop
+          (motion system, animation 21). While open it is a modal: focus moves
+          in and stays in, the page behind is inert, Escape / the backdrop /
+          the close button / the phone's Back gesture close it, and focus goes
+          back to the menu button. Picking anything in it closes it. */}
+      {isMobile && (
         <div
+          className="hp-drawer-backdrop fixed inset-0 z-[55] bg-black/60 backdrop-blur-sm"
+          data-open={mobileSidebarOpen ? 'true' : 'false'}
           onClick={() => setMobileSidebarOpen(false)}
           aria-hidden
         />
       )}
       <div
+        ref={drawerRef}
         className={
           isMobile
+            ? `hp-drawer fixed inset-y-0 left-0 z-[60] max-w-[88vw] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] ${mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`
             : ''
         }
+        data-open={isMobile ? (mobileSidebarOpen ? 'true' : 'false') : undefined}
+        role={isMobile ? 'dialog' : undefined}
+        aria-modal={isMobile && mobileSidebarOpen ? true : undefined}
+        aria-label={isMobile ? 'Menu' : undefined}
       >
         <Sidebar
           mode={mode}
           messages={messages}
           conversations={conversations}
           activeConversationId={conversationId}
+          onLoadConversation={isMobile ? (id) => { setMobileSidebarOpen(false); loadConversation(id) } : loadConversation}
+          onNewConversation={isMobile ? () => { setMobileSidebarOpen(false); onNewConversation() } : onNewConversation}
           onScrollToBottom={onScrollToBottom}
           showSettings={showSettings}
           setShowSettings={setShowSettings}
           setSettingsDraft={setSettingsDraft}
           onSaveSettings={onSaveSettings}
           showHistory={showHistory}
+          setShowHistory={isMobile ? closeDrawerAnd(setShowHistory) : setShowHistory}
           collapsed={isMobile ? false : sidebarCollapsed}
           onToggleCollapse={toggleSidebar}
           chatReasoningMode={chatReasoningMode}
           showMeetingsNav={meetingsNavEnabled}
+          drawer={isMobile}
         />
       </div>
           the top-right gear/pencil actions. */}
       {isMobile && !mobileSidebarOpen && (
         <button
+          ref={menuButtonRef}
           type="button"
           onClick={() => setMobileSidebarOpen(true)}
+          className="fixed top-[max(0.6rem,env(safe-area-inset-top))] left-[max(0.6rem,env(safe-area-inset-left))] z-40 flex h-11 w-11 items-center justify-center rounded-xl bg-black/45 backdrop-blur-md border border-white/15 text-white/85 shadow-lg shadow-black/40 hover:bg-black/60 active:scale-95 transition-all"
           aria-label="Open menu"
+          aria-expanded={false}
         >
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
             <line x1="3" y1="6" x2="21" y2="6" />
         </button>
       )}
+      <main ref={mainRef} className="flex-1 flex flex-col relative min-w-0">
         {/* History Panel */}
         {showHistory && (
           <HistoryPanel

frontend/src/ui/Models.tsx CHANGED Viewed

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState, useCallback } from 'react'
 import { Download, RefreshCw, Copy, CheckCircle2, AlertTriangle, XCircle, Settings2, Key, X, Trash2, Shield, ExternalLink } from 'lucide-react'
 import OllaBridgeModels from './components/OllaBridgeModels'
 import { isAccountsUxEnabled } from './account/featureFlags'
@@ -1235,20 +1236,23 @@ export default function ModelsView(props: ModelsParams) {
   }, [toast])
   return (
-    <div className="h-full w-full bg-black text-white overflow-hidden flex flex-col">
       {/* Header */}
-      <div className="px-8 py-6 border-b border-white/10 flex items-center justify-between bg-gradient-to-b from-white/[0.02] to-transparent">
-        <div>
-          <div className="text-2xl font-bold text-white tracking-tight">Model Management</div>
-          <div className="text-sm text-white/40 mt-1">Configure and deploy AI models across providers</div>
         </div>
-        <div className="flex items-center gap-3">
           <button
             type="button"
             onClick={() => refreshCatalog()}
             disabled={catalogLoading}
-            className="px-4 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 text-xs font-semibold flex items-center gap-2.5 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <RefreshCw size={15} className={catalogLoading ? 'animate-spin' : ''} />
             Refresh Catalog
@@ -1258,7 +1262,8 @@ export default function ModelsView(props: ModelsParams) {
             type="button"
             onClick={() => refreshInstalled()}
             disabled={installedLoading}
-            className="px-4 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 text-xs font-semibold flex items-center gap-2.5 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <RefreshCw size={15} className={installedLoading ? 'animate-spin' : ''} />
             Refresh Installed
@@ -1268,12 +1273,20 @@ export default function ModelsView(props: ModelsParams) {
           <button
             type="button"
             onClick={() => setApiKeysExpanded(true)}
-            className="p-2.5 rounded-xl bg-transparent hover:bg-white/5 border border-transparent hover:border-white/10 text-white/40 hover:text-white/70 transition-all"
             title="API Keys (for gated models)"
           >
             <Key size={16} />
           </button>
         </div>
       </div>
       {/* API Keys Modal */}
@@ -1477,17 +1490,19 @@ export default function ModelsView(props: ModelsParams) {
       )}
       {/* Controls */}
-      <div className="px-8 py-5 border-b border-white/10 bg-white/[0.01]">
         <div className="grid grid-cols-1 lg:grid-cols-[200px_1fr_1fr] gap-4 max-w-7xl">
-          <div>
-            <label className="text-[10px] text-white/40 font-bold uppercase tracking-wider block mb-2.5">Model Type</label>
-            <div className="flex flex-col gap-1.5">
               {(['chat', 'multimodal', 'image', 'edit', 'video', 'enhance', 'lora', 'addons'] as const).map((t) => (
                 <button
                   key={t}
                   type="button"
                   onClick={() => setModelType(t)}
-                  className={`px-4 py-2.5 rounded-lg border text-xs font-bold uppercase tracking-wide transition-all ${
                     modelType === t
                       ? 'bg-white text-black border-white shadow-lg shadow-white/20'
                       : 'bg-transparent border-white/10 text-white/60 hover:bg-white/5 hover:border-white/20 hover:text-white/80'
@@ -1500,8 +1515,9 @@ export default function ModelsView(props: ModelsParams) {
           </div>
           <div>
-            <label className="text-[10px] text-white/40 font-bold uppercase tracking-wider block mb-2.5">Provider</label>
             <select
               value={provider}
               onChange={(e) => setProvider(e.target.value)}
               className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm font-medium outline-none focus:border-white/30 focus:bg-white/10 transition-all"
@@ -1531,8 +1547,9 @@ export default function ModelsView(props: ModelsParams) {
           </div>
           <div>
-            <label className="text-[10px] text-white/40 font-bold uppercase tracking-wider block mb-2.5">Base URL Override</label>
             <input
               value={baseUrl}
               onChange={(e) => setBaseUrl(e.target.value)}
               placeholder={modelType === 'chat' ? 'http://localhost:11434' : 'http://localhost:8188'}
@@ -1547,7 +1564,7 @@ export default function ModelsView(props: ModelsParams) {
       {/* Civitai Input Section (only when provider is civitai) */}
       {provider === 'civitai' && (
-        <div className="px-8 py-4 border-b border-white/10 bg-gradient-to-br from-blue-500/5 to-blue-500/0">
           <div className="max-w-7xl">
             {/* Search Bar */}
             <div className="mb-6">
@@ -1805,7 +1822,7 @@ export default function ModelsView(props: ModelsParams) {
       )}
       {/* Body */}
-      <div className="flex-1 overflow-y-auto px-4 sm:px-8 py-6 scrollbar-hide">
         <div className="flex flex-col gap-4 max-w-7xl mx-auto">
           {/* OllaBridge provider class — a special provider whose models are
               synced from the user's linked HomePilot / GPU nodes (relay), shown
@@ -1852,7 +1869,7 @@ export default function ModelsView(props: ModelsParams) {
           {/* Models table */}
           <div className="rounded-2xl border border-white/10 overflow-hidden bg-gradient-to-b from-white/[0.02] to-transparent">
-            <div className="bg-white/5 px-6 py-4 flex items-center justify-between border-b border-white/10">
               <div className="text-xs font-bold text-white uppercase tracking-wider">Available Models</div>
               <div className="text-xs text-white/50 font-semibold">
                 {(() => {
@@ -1870,7 +1887,17 @@ export default function ModelsView(props: ModelsParams) {
             </div>
             <div className="divide-y divide-white/5">
-              {merged.length === 0 ? (
                 <div className="p-12 text-white/50 text-sm text-center font-medium">
                   {provider === 'civitai' ? (
                     <div className="space-y-2">

 import React, { useEffect, useMemo, useState, useCallback } from 'react'
+import { ProgressBar, Skeleton } from './motion'
 import { Download, RefreshCw, Copy, CheckCircle2, AlertTriangle, XCircle, Settings2, Key, X, Trash2, Shield, ExternalLink } from 'lucide-react'
 import OllaBridgeModels from './components/OllaBridgeModels'
 import { isAccountsUxEnabled } from './account/featureFlags'
   }, [toast])
   return (
+    // Phones: the whole page is one scroller (controls + list). Tablet/desktop
+    // keep the fixed controls with the list scrolling under them.
+    <div className="h-full w-full bg-black text-white overflow-y-auto overscroll-contain md:overflow-hidden flex flex-col">
       {/* Header */}
+      <div className="hp-page-header relative px-8 py-6 border-b border-white/10 bg-gradient-to-b from-white/[0.02] to-transparent">
+        <div className="hp-page-header__titles">
+          <h1 className="text-xl md:text-2xl font-bold text-white tracking-tight leading-tight">Model Management</h1>
+          <div className="text-sm text-white/55 mt-1">Configure and deploy AI models across providers</div>
         </div>
+        <div className="hp-page-header__actions items-center md:gap-3">
           <button
             type="button"
             onClick={() => refreshCatalog()}
             disabled={catalogLoading}
+            aria-busy={catalogLoading || undefined}
+            className="hp-grow-action px-3 md:px-4 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 text-xs font-semibold flex items-center justify-center gap-2 md:gap-2.5 whitespace-nowrap transition-all disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <RefreshCw size={15} className={catalogLoading ? 'animate-spin' : ''} />
             Refresh Catalog
             type="button"
             onClick={() => refreshInstalled()}
             disabled={installedLoading}
+            aria-busy={installedLoading || undefined}
+            className="hp-grow-action px-3 md:px-4 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 text-xs font-semibold flex items-center justify-center gap-2 md:gap-2.5 whitespace-nowrap transition-all disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <RefreshCw size={15} className={installedLoading ? 'animate-spin' : ''} />
             Refresh Installed
           <button
             type="button"
             onClick={() => setApiKeysExpanded(true)}
+            className="hp-header-corner p-2.5 rounded-xl bg-transparent hover:bg-white/5 border border-transparent hover:border-white/10 text-white/55 hover:text-white/80 transition-all"
             title="API Keys (for gated models)"
+            aria-label="API keys for gated models"
           >
             <Key size={16} />
           </button>
         </div>
+        {/* While either refresh runs, a thin sweep along the header's lower edge (motion system, animation 22). */}
+        {catalogLoading || installedLoading ? (
+          <ProgressBar
+            label={catalogLoading ? 'Refreshing the model catalog' : 'Refreshing installed models'}
+            className="!absolute left-0 right-0 bottom-0 !h-[2px] !rounded-none"
+          />
+        ) : null}
       </div>
       {/* API Keys Modal */}
       )}
       {/* Controls */}
+      <div className="px-4 md:px-8 py-4 md:py-5 border-b border-white/10 bg-white/[0.01]">
         <div className="grid grid-cols-1 lg:grid-cols-[200px_1fr_1fr] gap-4 max-w-7xl">
+          <div className="hp-cq min-w-0">
+            <div id="hp-model-type-label" className="text-[11px] text-white/55 font-bold uppercase tracking-wider block mb-2.5">Model Type</div>
+            <div className="hp-choice-grid lg:!flex lg:flex-col lg:!gap-1.5" role="radiogroup" aria-labelledby="hp-model-type-label">
               {(['chat', 'multimodal', 'image', 'edit', 'video', 'enhance', 'lora', 'addons'] as const).map((t) => (
                 <button
                   key={t}
                   type="button"
+                  role="radio"
+                  aria-checked={modelType === t}
                   onClick={() => setModelType(t)}
+                  className={`px-3 md:px-4 py-2.5 rounded-xl lg:rounded-lg border text-xs font-bold uppercase tracking-wide transition-all truncate ${
                     modelType === t
                       ? 'bg-white text-black border-white shadow-lg shadow-white/20'
                       : 'bg-transparent border-white/10 text-white/60 hover:bg-white/5 hover:border-white/20 hover:text-white/80'
           </div>
           <div>
+            <label htmlFor="hp-models-provider" className="text-[11px] text-white/55 font-bold uppercase tracking-wider block mb-2.5">Provider</label>
             <select
+              id="hp-models-provider"
               value={provider}
               onChange={(e) => setProvider(e.target.value)}
               className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm font-medium outline-none focus:border-white/30 focus:bg-white/10 transition-all"
           </div>
           <div>
+            <label htmlFor="hp-models-base-url" className="text-[11px] text-white/55 font-bold uppercase tracking-wider block mb-2.5">Base URL Override</label>
             <input
+              id="hp-models-base-url"
               value={baseUrl}
               onChange={(e) => setBaseUrl(e.target.value)}
               placeholder={modelType === 'chat' ? 'http://localhost:11434' : 'http://localhost:8188'}
       {/* Civitai Input Section (only when provider is civitai) */}
       {provider === 'civitai' && (
+        <div className="px-4 md:px-8 py-4 border-b border-white/10 bg-gradient-to-br from-blue-500/5 to-blue-500/0">
           <div className="max-w-7xl">
             {/* Search Bar */}
             <div className="mb-6">
       )}
       {/* Body */}
+      <div className="shrink-0 md:shrink md:flex-1 md:min-h-0 md:overflow-y-auto px-4 sm:px-8 py-6 scrollbar-hide">
         <div className="flex flex-col gap-4 max-w-7xl mx-auto">
           {/* OllaBridge provider class — a special provider whose models are
               synced from the user's linked HomePilot / GPU nodes (relay), shown
           {/* Models table */}
           <div className="rounded-2xl border border-white/10 overflow-hidden bg-gradient-to-b from-white/[0.02] to-transparent">
+            <div className="bg-white/5 px-4 md:px-6 py-4 flex items-center justify-between gap-3 border-b border-white/10">
               <div className="text-xs font-bold text-white uppercase tracking-wider">Available Models</div>
               <div className="text-xs text-white/50 font-semibold">
                 {(() => {
             </div>
             <div className="divide-y divide-white/5">
+              {merged.length === 0 && installedLoading ? (
+                // Loading, not empty: placeholder rows instead of "No models found".
+                <div className="p-4 md:p-6 space-y-4" role="status" aria-label="Loading models">
+                  {[0, 1, 2].map((i) => (
+                    <div key={i} className="flex items-center gap-4">
+                      <Skeleton lines={2} height={10} className="flex-1" />
+                      <span className="hp-skeleton h-8 w-20 shrink-0" style={{ borderRadius: 10 }} />
+                    </div>
+                  ))}
+                </div>
+              ) : merged.length === 0 ? (
                 <div className="p-12 text-white/50 text-sm text-center font-medium">
                   {provider === 'civitai' ? (
                     <div className="space-y-2">

frontend/src/ui/ProfileSettingsModal.tsx CHANGED Viewed

@@ -6,8 +6,11 @@
  *   2. Preferences — personalization, companion, content prefs, memory
  *   3. Integrations — secrets vault
  */
-import React, { useEffect, useMemo, useState } from 'react'
 import { useAuth } from './components/AuthGate'
 import type {
   UserProfile,
   SecretListItem,
@@ -205,6 +208,23 @@ export default function ProfileSettingsModal({
   const canUseBackend = useMemo(() => !!backendUrl, [backendUrl])
   async function refreshAll() {
     if (!canUseBackend) return
     setLoading(true)
@@ -232,6 +252,7 @@ export default function ProfileSettingsModal({
         ? await fetchUserMemory(backendUrl, authToken)
         : await fetchMemory(backendUrl, apiKey)
       setMemory(m)
       // Load avatar from stored user data (if available)
       try {
@@ -271,6 +292,7 @@ export default function ProfileSettingsModal({
         display_name: profile.display_name,
         email: profile.email,
       })
       setSavedMsg(true)
       setTimeout(() => setSavedMsg(false), 2500)
     } catch (e: any) {
@@ -348,59 +370,100 @@ export default function ProfileSettingsModal({
     }
   }
   return (
-    <div className="fixed inset-0 z-[200] bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
-      <div className="w-full max-w-3xl rounded-3xl border border-white/10 bg-[#0b0b0b] shadow-2xl shadow-black/40 overflow-hidden">
-        {/* Header */}
-        <div className="px-6 py-4 border-b border-white/10 flex items-center justify-between">
-          <div>
-            <div className="text-white/90 font-semibold">Account Settings</div>
-            <div className="text-xs text-white/40">
-              Profile, preferences, integrations, and security for your account.
             </div>
           </div>
           <button
             type="button"
-            onClick={onClose}
-            className="px-3 py-2 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 text-white/70"
           >
-            Close
           </button>
         </div>
-        {/* Tabs */}
-        <div className="px-6 pt-4">
-          <div className="inline-flex rounded-2xl bg-white/5 border border-white/10 p-1">
-            {[
-              { key: 'profile', label: 'Profile' },
-              { key: 'prefs', label: 'Preferences' },
-              { key: 'communication', label: 'Communication' },
-              { key: 'integrations', label: 'Integrations' },
-              { key: 'security', label: 'Security' },
-            ].map((t) => (
-              <button
-                key={t.key}
-                type="button"
-                onClick={() => setTab(t.key as TabKey)}
-                className={[
-                  'px-4 py-2 rounded-2xl text-sm transition-all',
-                  tab === t.key ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white/80',
-                ].join(' ')}
-              >
-                {t.label}
               </button>
-            ))}
-          </div>
-          {/* Mode hint (helpful for enterprise debugging) */}
-          <div className="ml-auto text-[10px] text-white/40 self-center pr-1">
-            {usePerUser ? 'Per-user (Bearer)' : 'Instance-wide (API key)'}
-          </div>
-        </div>
-        {/* Content */}
-        <div className="px-6 py-5 max-h-[70vh] overflow-y-auto">
-          {loading ? <div className="text-sm text-white/50">Loading...</div> : null}
-          {err ? <div className="mb-4 text-sm text-red-400/80">{err}</div> : null}
           {savedMsg ? <div className="mb-4 text-sm text-green-400/80">Saved successfully.</div> : null}
           {/* ================================================================ */}
@@ -925,25 +988,7 @@ export default function ProfileSettingsModal({
             )
           ) : null}
         </div>
-        {/* Footer */}
-        <div className="px-6 py-4 border-t border-white/10 flex items-center justify-between">
-          <div className="text-xs text-white/35">
-            {usePerUser
-              ? 'Profile, memory & secrets are scoped to your account.'
-              : 'Profile stores preferences, memory, and integrations (instance-wide).'}
-          </div>
-          <button
-            type="button"
-            onClick={onSaveAll}
-            disabled={saving}
-            className="px-4 py-2 rounded-2xl bg-blue-600 hover:bg-blue-500 border border-white/10 text-sm text-white font-semibold disabled:opacity-50"
-          >
-            {saving ? 'Saving...' : 'Save All'}
-          </button>
-        </div>
-      </div>
-    </div>
   )
 }

  *   2. Preferences — personalization, companion, content prefs, memory
  *   3. Integrations — secrets vault
  */
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { X } from 'lucide-react'
 import { useAuth } from './components/AuthGate'
+import { ModalSheet } from './components/ModalSheet'
+import { PulseText, Spinner } from './motion'
 import type {
   UserProfile,
   SecretListItem,
   const canUseBackend = useMemo(() => !!backendUrl, [backendUrl])
+  // What was last loaded or saved, to tell whether closing would lose edits.
+  const [baseline, setBaseline] = useState<string | null>(null)
+  const snapshot = JSON.stringify({ profile, memory })
+  const dirty = !loading && baseline !== null && snapshot !== baseline
+  const tabsRef = useRef<HTMLDivElement>(null)
+  function requestClose() {
+    if (dirty && !window.confirm('Discard your unsaved changes?')) return
+    onClose()
+  }
+  // Keep the active tab visible when the tab row scrolls sideways on phones.
+  useEffect(() => {
+    const el = tabsRef.current?.querySelector<HTMLElement>('[aria-selected="true"]')
+    el?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })
+  }, [tab])
   async function refreshAll() {
     if (!canUseBackend) return
     setLoading(true)
         ? await fetchUserMemory(backendUrl, authToken)
         : await fetchMemory(backendUrl, apiKey)
       setMemory(m)
+      setBaseline(JSON.stringify({ profile: merged, memory: m }))
       // Load avatar from stored user data (if available)
       try {
         display_name: profile.display_name,
         email: profile.email,
       })
+      setBaseline(JSON.stringify({ profile, memory }))
       setSavedMsg(true)
       setTimeout(() => setSavedMsg(false), 2500)
     } catch (e: any) {
     }
   }
+  const TABS: { key: TabKey; label: string }[] = [
+    { key: 'profile', label: 'Profile' },
+    { key: 'prefs', label: 'Preferences' },
+    { key: 'communication', label: 'Communication' },
+    { key: 'integrations', label: 'Integrations' },
+    { key: 'security', label: 'Security' },
+  ]
   return (
+    <ModalSheet
+      labelledBy="hp-account-settings-title"
+      onRequestClose={requestClose}
+      header={
+        <>
+          <div className="flex items-center gap-3 px-4 sm:px-6 py-2 sm:py-3 border-b border-white/10">
+            <div className="min-w-0 flex-1">
+              <h2 id="hp-account-settings-title" className="text-[17px] sm:text-base text-white/90 font-semibold leading-6">
+                Account Settings
+              </h2>
+              <p className="hidden sm:block text-xs text-white/50">
+                Profile, preferences, integrations, and security for your account.
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={requestClose}
+              aria-label="Close settings"
+              className="shrink-0 -mr-1 h-11 w-11 inline-flex items-center justify-center rounded-full text-white/70 hover:text-white hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/60"
+            >
+              <X size={20} aria-hidden />
+            </button>
+          </div>
+          <div className="px-4 sm:px-6 pt-3 pb-2 border-b border-white/5">
+            <div ref={tabsRef} className="hp-tabs rounded-2xl bg-white/5 border border-white/10 p-1" role="tablist" aria-label="Settings sections">
+              {TABS.map((t) => (
+                <button
+                  key={t.key}
+                  type="button"
+                  role="tab"
+                  aria-selected={tab === t.key}
+                  onClick={() => setTab(t.key)}
+                  className={[
+                    'px-4 rounded-xl text-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/60',
+                    tab === t.key ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white/80',
+                  ].join(' ')}
+                >
+                  {t.label}
+                </button>
+              ))}
+            </div>
+            {/* Mode hint (helpful for enterprise debugging) */}
+            <div className="mt-1.5 text-[11px] text-white/45">
+              {usePerUser ? 'Per-user (Bearer)' : 'Instance-wide (API key)'}
             </div>
           </div>
+        </>
+      }
+      footer={
+        <div className="px-4 sm:px-6 pt-3 border-t border-white/10 bg-[#0b0b0b] flex items-center gap-3">
+          <div className="min-w-0 flex-1 text-xs text-white/50" aria-live="polite">
+            {saving ? <PulseText>Saving…</PulseText>
+              : savedMsg ? <span className="text-green-400/90 hp-enter-fade">Saved</span>
+              : dirty ? <span className="text-amber-300/90">Unsaved changes</span>
+              : <span className="hidden sm:inline">{usePerUser
+                  ? 'Profile, memory & secrets are scoped to your account.'
+                  : 'Profile stores preferences, memory, and integrations (instance-wide).'}</span>}
+          </div>
           <button
             type="button"
+            onClick={onSaveAll}
+            disabled={saving || loading}
+            className="shrink-0 whitespace-nowrap min-h-[44px] px-5 rounded-full bg-blue-600 hover:bg-blue-500 text-sm text-white font-semibold disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/70"
           >
+            {saving ? <span className="inline-flex items-center gap-2"><Spinner size={14} />Saving…</span> : 'Save All'}
           </button>
         </div>
+      }
+    >
+        <div className="px-4 sm:px-6 py-5">
+          {loading ? (
+            <div role="status" className="space-y-3" aria-label="Loading your settings">
+              <span className="hp-skeleton h-16 w-16" style={{ borderRadius: 999 }} />
+              {[0, 1, 2, 3].map((i) => <span key={i} className="hp-skeleton h-12" style={{ borderRadius: 16 }} />)}
+              <span className="text-sm text-white/50">Loading your settings…</span>
+            </div>
+          ) : null}
+          {err ? (
+            <div role="alert" className="mb-4 rounded-2xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200 flex items-start gap-3">
+              <span className="flex-1 min-w-0 break-words">{err}</span>
+              <button type="button" onClick={() => refreshAll()} className="shrink-0 min-h-[36px] px-3 rounded-full bg-white/10 hover:bg-white/15 text-white text-xs font-semibold">
+                Retry
               </button>
+            </div>
+          ) : null}
           {savedMsg ? <div className="mb-4 text-sm text-green-400/80">Saved successfully.</div> : null}
           {/* ================================================================ */}
             )
           ) : null}
         </div>
+    </ModalSheet>
   )
 }

frontend/src/ui/SettingsPanel.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
   Settings as SettingsIcon,
@@ -21,6 +22,7 @@ import {
   Loader2,
   Cloud,
   Cpu,
 } from "lucide-react";
 import OllamaHealthBanner from "./OllamaHealthBanner";
 import OllaBridgeLink from "./components/OllaBridgeLink";
@@ -34,6 +36,7 @@ import OllaBridgeModels from "./components/OllaBridgeModels";
 import ComputeSettingsTabs from "./components/compute/ComputeSettingsTabs";
 import ModelExecutionSelector from "./components/compute/ModelExecutionSelector";
 import ProfileSettingsModal from "./ProfileSettingsModal";
 import TtsEngineSection from "./components/TtsEngineSection";
 import VoiceAssistantSelfTest from "./components/VoiceAssistantSelfTest";
 import SpeechRecognitionSettings from "./components/SpeechRecognitionSettings";
@@ -331,6 +334,7 @@ const SECTIONS = [
   { id: "tools", label: "Tools & Agents", Icon: Wrench },
   { id: "matrixhub", label: "MatrixHub", Icon: Grid3x3 },
   { id: "ollabridge", label: "OllaBridge API", Icon: Code2 },
   { id: "advanced", label: "Advanced", Icon: FlaskConical },
 ] as const;
@@ -687,6 +691,9 @@ export default function SettingsPanel({
     if (!dirty) baselineRef.current = JSON.stringify(value);
   }, [value, dirty]);
   // ESC closes the modal (respecting the unsaved-changes guard).
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -1589,6 +1596,15 @@ export default function SettingsPanel({
       case "tools": return renderTools();
       case "matrixhub": return renderMatrixHub();
       case "ollabridge": return renderOllaBridge();
       case "advanced": return renderAdvanced();
       default: return null;
     }

+import { useBackToClose } from "./lib/useBackToClose";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
   Settings as SettingsIcon,
   Loader2,
   Cloud,
   Cpu,
+  Sparkles,
 } from "lucide-react";
 import OllamaHealthBanner from "./OllamaHealthBanner";
 import OllaBridgeLink from "./components/OllaBridgeLink";
 import ComputeSettingsTabs from "./components/compute/ComputeSettingsTabs";
 import ModelExecutionSelector from "./components/compute/ModelExecutionSelector";
 import ProfileSettingsModal from "./ProfileSettingsModal";
+import { MotionGallery } from "./motion/MotionGallery";
 import TtsEngineSection from "./components/TtsEngineSection";
 import VoiceAssistantSelfTest from "./components/VoiceAssistantSelfTest";
 import SpeechRecognitionSettings from "./components/SpeechRecognitionSettings";
   { id: "tools", label: "Tools & Agents", Icon: Wrench },
   { id: "matrixhub", label: "MatrixHub", Icon: Grid3x3 },
   { id: "ollabridge", label: "OllaBridge API", Icon: Code2 },
+  { id: "motion", label: "Motion", Icon: Sparkles },
   { id: "advanced", label: "Advanced", Icon: FlaskConical },
 ] as const;
     if (!dirty) baselineRef.current = JSON.stringify(value);
   }, [value, dirty]);
+  // The phone's Back gesture closes Settings (also respecting the guard).
+  useBackToClose(true, requestClose);
   // ESC closes the modal (respecting the unsaved-changes guard).
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       case "tools": return renderTools();
       case "matrixhub": return renderMatrixHub();
       case "ollabridge": return renderOllaBridge();
+      case "motion": return (
+        <SettingsCard
+          title="Motion & animations"
+          description="How much HomePilot animates on this device. Applies right away — no need to Save."
+          icon={<Sparkles size={16} />}
+        >
+          <MotionGallery />
+        </SettingsCard>
+      );
       case "advanced": return renderAdvanced();
       default: return null;
     }

frontend/src/ui/SystemStatusDialog.tsx CHANGED Viewed

@@ -4,6 +4,7 @@
  * Shows a donut chart (pure CSS conic-gradient), service health cards,
  * and architecture overview.  No chart library needed.
  */
 import React, { useEffect, useMemo, useState } from 'react'
 import { X, Activity, Database, Cpu, Server, Bot, PlugZap } from 'lucide-react'
 import { fetchSystemOverview, type SystemOverviewResponse } from './systemApi'
@@ -53,6 +54,9 @@ export default function SystemStatusDialog({
     return () => document.removeEventListener('keydown', onEsc)
   }, [onClose])
   /* Fetch data */
   useEffect(() => {
     let mounted = true

  * Shows a donut chart (pure CSS conic-gradient), service health cards,
  * and architecture overview.  No chart library needed.
  */
+import { useBackToClose } from './lib/useBackToClose'
 import React, { useEffect, useMemo, useState } from 'react'
 import { X, Activity, Database, Cpu, Server, Bot, PlugZap } from 'lucide-react'
 import { fetchSystemOverview, type SystemOverviewResponse } from './systemApi'
     return () => document.removeEventListener('keydown', onEsc)
   }, [onClose])
+  /* The phone's Back gesture closes the dialog instead of leaving HomePilot. */
+  useBackToClose(true, onClose)
   /* Fetch data */
   useEffect(() => {
     let mounted = true

frontend/src/ui/VoiceModeGrok.tsx CHANGED Viewed

@@ -1197,14 +1197,16 @@ export default function VoiceModeGrok({
       <header className="absolute top-0 right-0 z-30 p-4 flex items-center gap-2 hp-fade-in">
         <button
           onClick={() => setShowSystemSettings(true)}
-          className="w-9 h-9 flex items-center justify-center rounded-full bg-white/5 border border-white/10 text-white/60 hover:bg-white/10 hover:text-white transition-colors"
           title="System Settings"
         >
           <Settings size={18} />
         </button>
         <button
           onClick={clearConversation}
-          className="w-9 h-9 flex items-center justify-center rounded-full bg-white/5 border border-white/10 text-white/60 hover:bg-white/10 hover:text-white transition-colors"
           title="New Chat"
         >
           <PenLine size={16} />
@@ -1514,6 +1516,8 @@ export default function VoiceModeGrok({
                   {/* Mic Button with Mini Level Meter */}
                   <button
                     onClick={toggleMic}
                     className={`h-10 px-4 rounded-full border flex items-center gap-2.5 transition-all ${
                       isListening
                         ? 'bg-[#97C4FF]/20 border-[#97C4FF]/40 text-white'
@@ -1531,7 +1535,9 @@ export default function VoiceModeGrok({
                   {/* Volume Toggle */}
                   <button
                     onClick={() => setIsMuted(!isMuted)}
-                    className="w-10 h-10 rounded-full border border-white/10 bg-white/5 flex items-center justify-center text-white/70 hover:bg-white/10 transition-colors"
                   >
                     {isMuted ? (
                       <VolumeX size={18} className="opacity-50" />
@@ -1543,6 +1549,8 @@ export default function VoiceModeGrok({
                   {/* Voice Settings Trigger */}
                   <button
                     onClick={() => setShowVoiceSettings(!showVoiceSettings)}
                     className={`h-10 px-3.5 rounded-full border flex items-center gap-2 transition-all text-sm ${
                       showVoiceSettings
                         ? 'bg-white/10 border-white/20'
@@ -1578,7 +1586,9 @@ export default function VoiceModeGrok({
                 {/* Hands-Free Toggle (Auto/Manual) - Replaces close button */}
                 <button
                   onClick={() => voice.setHandsFree(!voice.isHandsFree)}
-                  className={`w-10 h-10 rounded-full flex items-center justify-center transition-all shadow-lg ${
                     voice.isHandsFree
                       ? 'bg-white text-black hover:bg-gray-200'
                       : 'bg-white/10 border border-white/20 text-white/80 hover:bg-white/20'

       <header className="absolute top-0 right-0 z-30 p-4 flex items-center gap-2 hp-fade-in">
         <button
           onClick={() => setShowSystemSettings(true)}
+          className="hp-icon-btn w-9 h-9 flex items-center justify-center rounded-full bg-white/5 border border-white/10 text-white/60 hover:bg-white/10 hover:text-white transition-colors"
           title="System Settings"
+          aria-label="Voice settings"
         >
           <Settings size={18} />
         </button>
         <button
           onClick={clearConversation}
+          aria-label="New voice chat"
+          className="hp-icon-btn w-9 h-9 flex items-center justify-center rounded-full bg-white/5 border border-white/10 text-white/60 hover:bg-white/10 hover:text-white transition-colors"
           title="New Chat"
         >
           <PenLine size={16} />
                   {/* Mic Button with Mini Level Meter */}
                   <button
                     onClick={toggleMic}
+                    aria-label={isListening ? 'Stop listening' : isSpeaking ? 'Stop speaking' : 'Start listening'}
+                    aria-pressed={isListening}
                     className={`h-10 px-4 rounded-full border flex items-center gap-2.5 transition-all ${
                       isListening
                         ? 'bg-[#97C4FF]/20 border-[#97C4FF]/40 text-white'
                   {/* Volume Toggle */}
                   <button
                     onClick={() => setIsMuted(!isMuted)}
+                    aria-label={isMuted ? 'Unmute replies' : 'Mute replies'}
+                    aria-pressed={isMuted}
+                    className="hp-icon-btn w-10 h-10 rounded-full border border-white/10 bg-white/5 flex items-center justify-center text-white/70 hover:bg-white/10 transition-colors"
                   >
                     {isMuted ? (
                       <VolumeX size={18} className="opacity-50" />
                   {/* Voice Settings Trigger */}
                   <button
                     onClick={() => setShowVoiceSettings(!showVoiceSettings)}
+                    aria-expanded={showVoiceSettings}
+                    aria-label={`Voice: ${activeVoice.name}, ${activePersonality.label}`}
                     className={`h-10 px-3.5 rounded-full border flex items-center gap-2 transition-all text-sm ${
                       showVoiceSettings
                         ? 'bg-white/10 border-white/20'
                 {/* Hands-Free Toggle (Auto/Manual) - Replaces close button */}
                 <button
                   onClick={() => voice.setHandsFree(!voice.isHandsFree)}
+                  aria-label={voice.isHandsFree ? 'Hands-free on — switch to manual' : 'Manual — switch to hands-free'}
+                  aria-pressed={voice.isHandsFree}
+                  className={`hp-icon-btn w-10 h-10 rounded-full flex items-center justify-center transition-all shadow-lg ${
                     voice.isHandsFree
                       ? 'bg-white text-black hover:bg-gray-200'
                       : 'bg-white/10 border border-white/20 text-white/80 hover:bg-white/20'

frontend/src/ui/avatar/AvatarLandingPage.tsx CHANGED Viewed

@@ -129,7 +129,7 @@ export function AvatarLandingPage({
     <div className="h-full w-full bg-black text-white font-sans overflow-hidden flex flex-col relative">
       {/* ═══════════════ HEADER ═══════════════ */}
-      <div className="absolute top-0 left-0 right-0 z-20 flex justify-between items-center px-6 py-4 bg-gradient-to-b from-black/90 via-black/60 to-transparent pointer-events-none">
         <div className="pointer-events-auto flex items-center gap-3">
           <div className="flex items-center gap-2.5">
             <Sparkles size={18} className="text-purple-400" />

     <div className="h-full w-full bg-black text-white font-sans overflow-hidden flex flex-col relative">
       {/* ═══════════════ HEADER ═══════════════ */}
+      <div className="hp-clear-nav absolute top-0 left-0 right-0 z-20 flex justify-between items-center px-6 py-4 bg-gradient-to-b from-black/90 via-black/60 to-transparent pointer-events-none">
         <div className="pointer-events-auto flex items-center gap-3">
           <div className="flex items-center gap-2.5">
             <Sparkles size={18} className="text-purple-400" />

frontend/src/ui/components/AppErrorBoundary.tsx ADDED Viewed

	@@ -0,0 +1,88 @@

+/**
+ * AppErrorBoundary — the app never fails to an unexplained black screen.
+ *
+ * Without a boundary, any exception thrown while rendering unmounts the whole
+ * React tree and leaves only the page background: on a phone that is a black
+ * screen with nothing to tap. This shows what happened, offers Try again /
+ * Reload / Copy details, and logs the failure with enough context to diagnose.
+ */
+import React from 'react'
+type State = { error: Error | null; componentStack: string; copied: boolean }
+export function describeFailure(error: Error, componentStack: string): string {
+  return [
+    `HomePilot UI error: ${error.name}: ${error.message}`,
+    `When: ${new Date().toISOString()}`,
+    `Where: ${typeof window !== 'undefined' ? window.location.pathname + window.location.hash : ''}`,
+    `Viewport: ${typeof window !== 'undefined' ? `${window.innerWidth}x${window.innerHeight}` : ''}`,
+    `Agent: ${typeof navigator !== 'undefined' ? navigator.userAgent : ''}`,
+    '',
+    (error.stack || '').split('\n').slice(0, 8).join('\n'),
+    componentStack ? `\nComponents:${componentStack.split('\n').slice(0, 8).join('\n')}` : '',
+  ].join('\n')
+}
+export class AppErrorBoundary extends React.Component<{ children: React.ReactNode; label?: string }, State> {
+  state: State = { error: null, componentStack: '', copied: false }
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { error }
+  }
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    const componentStack = info?.componentStack || ''
+    this.setState({ componentStack })
+    // One structured line that is easy to find in browser and Space logs.
+    console.error('[HomePilot] UI crashed', {
+      area: this.props.label || 'app',
+      name: error?.name,
+      message: error?.message,
+      path: typeof window !== 'undefined' ? window.location.pathname + window.location.hash : '',
+      componentStack,
+    })
+  }
+  private copy = async () => {
+    const { error, componentStack } = this.state
+    if (!error) return
+    try {
+      await navigator.clipboard.writeText(describeFailure(error, componentStack))
+      this.setState({ copied: true })
+    } catch {
+      /* clipboard unavailable (e.g. insecure context) — the details stay on screen */
+    }
+  }
+  render() {
+    const { error, copied } = this.state
+    if (!error) return this.props.children
+    return (
+      <div className="hp-status-screen" role="alert">
+        <div className="hp-status-card">
+          <div aria-hidden style={{ fontSize: 28 }}>⚠️</div>
+          <h1>Something went wrong</h1>
+          <p>
+            HomePilot hit an unexpected error while showing this screen. Your conversations and settings are saved on
+            the server. Try again, or reload the page.
+          </p>
+          <div className="hp-status-actions">
+            <button type="button" className="hp-primary" onClick={() => this.setState({ error: null, componentStack: '', copied: false })}>
+              Try again
+            </button>
+            <button type="button" onClick={() => window.location.reload()}>Reload</button>
+            <button type="button" onClick={this.copy}>{copied ? 'Copied' : 'Copy details'}</button>
+          </div>
+          <details className="hp-accordion" style={{ marginTop: 16, textAlign: 'left', color: 'var(--hp-color-text-2)', fontSize: 12 }}>
+            <summary style={{ cursor: 'pointer', minHeight: 32 }}>Technical details</summary>
+            <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', marginTop: 8 }}>
+              {`${error.name}: ${error.message}`}
+            </pre>
+          </details>
+        </div>
+      </div>
+    )
+  }
+}
+export default AppErrorBoundary

frontend/src/ui/components/AuthGate.tsx CHANGED Viewed

@@ -93,8 +93,16 @@ interface AuthGateProps {
   children: React.ReactNode
 }
 export default function AuthGate({ children }: AuthGateProps) {
-  const [state, setState] = useState<'loading' | 'login' | 'onboarding' | 'ready'>('loading')
   const [user, setUser] = useState<AuthUser | null>(null)
   const [token, setToken] = useState<string>('')
   const [loggedOutMessage, setLoggedOutMessage] = useState<string>('')
@@ -107,11 +115,18 @@ export default function AuthGate({ children }: AuthGateProps) {
   async function checkAuth() {
     const savedToken = localStorage.getItem(LS_TOKEN_KEY) || ''
     try {
       const res = await fetch(`${backendUrl}/v1/auth/me`, {
         headers: savedToken ? { 'Authorization': `Bearer ${savedToken}` } : {},
         credentials: 'include',
       })
       if (!res.ok) {
@@ -155,9 +170,20 @@ export default function AuthGate({ children }: AuthGateProps) {
       // Fallback: let through
       setState('ready')
-    } catch {
-      // Backend unreachable — skip auth (backward compatible with pre-auth setups)
-      setState('ready')
     }
   }
@@ -229,20 +255,35 @@ export default function AuthGate({ children }: AuthGateProps) {
     setState('login')
   }, [user, backendUrl])
-  // Loading spinner — uses same neutral bg as login page
   if (state === 'loading') {
     return (
-      <div style={{
-        minHeight: '100vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        background: '#050506',
-        color: 'rgba(255, 255, 255, 0.30)',
-        fontFamily: 'Inter, system-ui, sans-serif',
-        fontSize: 14,
-      }}>
-        Loading...
       </div>
     )
   }

   children: React.ReactNode
 }
+/** How long the first auth check may take before we stop waiting silently. A
+ * sleeping Hugging Face Space can take tens of seconds to answer. */
+export const AUTH_CHECK_TIMEOUT_MS = 25000
+/** After this long, the startup screen explains the wait. */
+export const SLOW_START_HINT_MS = 5000
 export default function AuthGate({ children }: AuthGateProps) {
+  const [state, setState] = useState<'loading' | 'login' | 'onboarding' | 'ready' | 'unreachable'>('loading')
+  const [slowStart, setSlowStart] = useState(false)
+  const [failure, setFailure] = useState<string>('')
   const [user, setUser] = useState<AuthUser | null>(null)
   const [token, setToken] = useState<string>('')
   const [loggedOutMessage, setLoggedOutMessage] = useState<string>('')
   async function checkAuth() {
     const savedToken = localStorage.getItem(LS_TOKEN_KEY) || ''
+    setState('loading')
+    setSlowStart(false)
+    setFailure('')
+    const slowTimer = setTimeout(() => setSlowStart(true), SLOW_START_HINT_MS)
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), AUTH_CHECK_TIMEOUT_MS)
     try {
       const res = await fetch(`${backendUrl}/v1/auth/me`, {
         headers: savedToken ? { 'Authorization': `Bearer ${savedToken}` } : {},
         credentials: 'include',
+        signal: controller.signal,
       })
       if (!res.ok) {
       // Fallback: let through
       setState('ready')
+    } catch (e) {
+      // The server didn't answer (still waking up, offline, or blocked). Say so
+      // and offer Retry, instead of mounting an app that can't load anything —
+      // which is how a phone ended up showing a blank black screen. "Continue
+      // anyway" keeps the old pre-auth behaviour available.
+      const aborted = (e as { name?: string } | null)?.name === 'AbortError'
+      setFailure(aborted
+        ? `The server didn't answer within ${Math.round(AUTH_CHECK_TIMEOUT_MS / 1000)} seconds.`
+        : 'The server could not be reached.')
+      console.error('[HomePilot] startup check failed', { backendUrl, aborted, error: String(e) })
+      setState('unreachable')
+    } finally {
+      clearTimeout(slowTimer)
+      clearTimeout(timeout)
     }
   }
     setState('login')
   }, [user, backendUrl])
+  // Startup screen — clearly visible (the old one was 30%-opacity text on
+  // near-black, which read as a blank black screen on phones), and honest
+  // about a slow start.
   if (state === 'loading') {
     return (
+      <div className="hp-status-screen" role="status" aria-live="polite">
+        <div className="hp-status-card">
+          <div className="hp-spinner" aria-hidden />
+          <h1>Starting HomePilot…</h1>
+          <p>{slowStart
+            ? 'The server is waking up. On a sleeping Hugging Face Space this can take up to a minute.'
+            : 'Connecting to your HomePilot server.'}</p>
+        </div>
+      </div>
+    )
+  }
+  if (state === 'unreachable') {
+    return (
+      <div className="hp-status-screen" role="alert">
+        <div className="hp-status-card">
+          <div aria-hidden style={{ fontSize: 28 }}>📡</div>
+          <h1>Can’t reach HomePilot</h1>
+          <p>{failure} Check your connection, or wait a moment if the Space is starting, then try again.</p>
+          <div className="hp-status-actions">
+            <button type="button" className="hp-primary" onClick={() => { void checkAuth() }}>Retry</button>
+            <button type="button" onClick={() => setState('ready')}>Continue anyway</button>
+          </div>
+        </div>
       </div>
     )
   }

frontend/src/ui/components/ComposerPlusMenu.tsx CHANGED Viewed

@@ -229,7 +229,7 @@ export function ComposerPlusMenu({ onAddFile, onScreenshot }: ComposerPlusMenuPr
                 title="Add files, screen or a meeting"
                 data-testid="composer-plus-button"
                 className={[
-                    'h-10 w-10 rounded-full grid place-items-center transition-colors',
                     open ? 'bg-white/10 text-white' : 'text-white/50 hover:text-white hover:bg-white/5',
                     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/25',
                 ].join(' ')}

                 title="Add files, screen or a meeting"
                 data-testid="composer-plus-button"
                 className={[
+                    'hp-icon-btn h-10 w-10 rounded-full grid place-items-center transition-colors',
                     open ? 'bg-white/10 text-white' : 'text-white/50 hover:text-white hover:bg-white/5',
                     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/25',
                 ].join(' ')}

frontend/src/ui/components/MessageMarkdown.tsx CHANGED Viewed

@@ -36,8 +36,9 @@ function CodeBlock({ lang, raw }: { lang: string; raw: string }) {
         <button
           type="button"
           onClick={() => copy(raw)}
-          className="inline-flex items-center gap-1.5 text-[11px] px-2 py-1 rounded-full bg-white/10 hover:bg-white/15 border border-white/10 hover:border-white/20 text-white/75 hover:text-white transition"
           title="Copy code"
         >
           {copied ? <Check size={13} /> : <Copy size={13} />}
           {copied ? 'Copied' : 'Copy'}

         <button
           type="button"
           onClick={() => copy(raw)}
+          className="hp-icon-btn inline-flex items-center gap-1.5 text-[11px] px-2 py-1 rounded-full bg-white/10 hover:bg-white/15 border border-white/10 hover:border-white/20 text-white/75 hover:text-white transition"
           title="Copy code"
+          aria-label={copied ? 'Code copied' : 'Copy code'}
         >
           {copied ? <Check size={13} /> : <Copy size={13} />}
           {copied ? 'Copied' : 'Copy'}

frontend/src/ui/components/ModalSheet.tsx ADDED Viewed

	@@ -0,0 +1,140 @@

+/**
+ * ModalSheet — a dialog that is full-screen on phones and a centred card on
+ * larger screens.
+ *
+ * Why it exists: dialogs used to be rendered wherever they were opened. When
+ * that place was the mobile nav drawer (which slides in with a CSS transform),
+ * the dialog's `position: fixed` was resolved against the drawer instead of the
+ * screen — a transformed ancestor becomes the containing block for fixed
+ * descendants — so "full-screen" settings came out as a 280px column pinned to
+ * the left. The sheet is portalled to <body>, so where it is opened from can
+ * never change how it is laid out.
+ *
+ * It also owns the behaviour every dialog needs: one scrolling body between a
+ * fixed header and a sticky footer (above the home indicator), Escape or the
+ * phone's Back gesture to close, focus moved in on open and back on close, Tab
+ * kept inside, no background scrolling while open, and a short enter/leave
+ * transition (motion system, animation 20).
+ */
+import React, { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { useBackToClose } from '../lib/useBackToClose'
+import { motionAllowed } from '../motion/prefs'
+/**
+ * Plays the leave transition on a copy of the sheet after React has removed
+ * it, so owners can keep rendering `{open && <Sheet/>}` and still get an exit.
+ * The copy is inert and hidden from assistive technology.
+ */
+function playLeave(node: HTMLElement | null) {
+  if (!node || !motionAllowed()) return
+  const ghost = node.cloneNode(true) as HTMLElement
+  ghost.setAttribute('data-leaving', '')
+  ghost.setAttribute('aria-hidden', 'true')
+  ghost.setAttribute('inert', '')
+  ghost.removeAttribute('id')
+  ghost.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'))
+  document.body.appendChild(ghost)
+  const remove = () => ghost.remove()
+  ghost.addEventListener('animationend', (e) => { if (e.target === ghost) remove() })
+  window.setTimeout(remove, 400)
+}
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+export function ModalSheet({
+  labelledBy,
+  onRequestClose,
+  header,
+  footer,
+  children,
+  zIndex = 200,
+  bodyRef,
+}: {
+  /** id of the element that names the dialog */
+  labelledBy: string
+  /** Escape or a backdrop click; the owner decides (e.g. confirm unsaved changes). */
+  onRequestClose: () => void
+  header: React.ReactNode
+  footer?: React.ReactNode
+  children: React.ReactNode
+  zIndex?: number
+  bodyRef?: React.Ref<HTMLDivElement>
+}) {
+  const sheetRef = useRef<HTMLDivElement>(null)
+  const backdropRef = useRef<HTMLDivElement>(null)
+  const closeRef = useRef(onRequestClose)
+  closeRef.current = onRequestClose
+  useBackToClose(true, () => closeRef.current())
+  useEffect(() => {
+    const previouslyFocused = document.activeElement as HTMLElement | null
+    const { overflow } = document.body.style
+    document.body.style.overflow = 'hidden'
+    // Focus the first control (usually the close button) so keyboard and
+    // screen-reader users start inside the dialog.
+    const first = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE)
+    ;(first || sheetRef.current)?.focus({ preventScroll: true })
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        closeRef.current()
+        return
+      }
+      if (e.key !== 'Tab' || !sheetRef.current) return
+      const items = Array.from(sheetRef.current.querySelectorAll<HTMLElement>(FOCUSABLE)).filter((el) => {
+        if (el.hidden || el.closest('[hidden], [aria-hidden="true"]')) return false
+        const style = getComputedStyle(el)
+        return style.display !== 'none' && style.visibility !== 'hidden'
+      })
+      if (!items.length) return
+      const firstItem = items[0]
+      const lastItem = items[items.length - 1]
+      if (e.shiftKey && document.activeElement === firstItem) {
+        e.preventDefault()
+        lastItem.focus()
+      } else if (!e.shiftKey && document.activeElement === lastItem) {
+        e.preventDefault()
+        firstItem.focus()
+      }
+    }
+    document.addEventListener('keydown', onKey, true)
+    const backdrop = backdropRef.current
+    return () => {
+      // Only a real close removes the node; StrictMode's dev-only effect re-run keeps it.
+      window.setTimeout(() => { if (backdrop && !backdrop.isConnected) playLeave(backdrop) }, 0)
+      document.removeEventListener('keydown', onKey, true)
+      document.body.style.overflow = overflow
+      previouslyFocused?.focus?.({ preventScroll: true })
+    }
+  }, [])
+  return createPortal(
+    <div
+      ref={backdropRef}
+      className="hp-sheet-backdrop"
+      style={{ zIndex }}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) closeRef.current()
+      }}
+    >
+      <div
+        ref={sheetRef}
+        className="hp-sheet"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={labelledBy}
+        tabIndex={-1}
+      >
+        <div className="hp-sheet__header">{header}</div>
+        <div className="hp-sheet__body" ref={bodyRef}>{children}</div>
+        {footer ? <div className="hp-sheet__footer">{footer}</div> : null}
+      </div>
+    </div>,
+    document.body,
+  )
+}
+export default ModalSheet

frontend/src/ui/lib/backendUrl.test.ts CHANGED Viewed

@@ -32,4 +32,18 @@ describe('resolveBackendUrl', () => {
     expect(resolveBackendUrl()).toBe('http://localhost:8010')
   })
 })

     expect(resolveBackendUrl()).toBe('http://localhost:8010')
   })
+  it('keeps a stored Vite dev address when the build is configured to use it (proxying dev server)', () => {
+    vi.stubGlobal('location', {
+      hostname: '127.0.0.1',
+      origin: 'http://127.0.0.1:3000',
+      port: '3000',
+      protocol: 'http:',
+    })
+    vi.stubEnv('VITE_API_URL', 'http://127.0.0.1:3000/')
+    window.localStorage.setItem('homepilot_backend_url', 'http://127.0.0.1:3000')
+    expect(resolveBackendUrl()).toBe('http://127.0.0.1:3000')
+    vi.unstubAllEnvs()
+  })
 })

frontend/src/ui/lib/backendUrl.ts CHANGED Viewed

@@ -91,7 +91,11 @@ export function resolveBackendUrl(override?: string | null): string {
         // chat-REST fallback. Redirect to :8000 (the default backend port)
         // so the stored preference doesn't silently break voice-call
         // session creation.
-        if (storedIsLocal && DEV_VITE_PORTS.has(storedPort)) {
           return "http://localhost:8000";
         }
         return clean;

         // chat-REST fallback. Redirect to :8000 (the default backend port)
         // so the stored preference doesn't silently break voice-call
         // session creation.
+        // …unless the build itself names that address (VITE_API_URL pointing
+        // at a Vite dev server that proxies the API): a configured value is
+        // not stale, and rewriting it made every reload unreachable.
+        const configured = (import.meta.env?.VITE_API_URL as string | undefined)?.trim();
+        if (storedIsLocal && DEV_VITE_PORTS.has(storedPort) && clean !== stripTrailingSlash(configured || "")) {
           return "http://localhost:8000";
         }
         return clean;

frontend/src/ui/lib/useBackToClose.ts ADDED Viewed

	@@ -0,0 +1,64 @@

+/**
+ * useBackToClose — the phone's Back gesture closes the open layer (drawer,
+ * full-screen settings) instead of leaving HomePilot.
+ *
+ * While `open`, one history entry is added for the layer. Back pops it and
+ * `onClose` runs; closing the layer any other way removes the entry again.
+ * Layers stack: each records its depth, and Back only closes layers above the
+ * entry it lands on — so Back from Settings opened over the drawer closes
+ * Settings and leaves the drawer open.
+ *
+ * If the owner declines to close (e.g. "Discard unsaved changes?" → Cancel),
+ * the entry is restored so the next Back is caught again.
+ */
+import { useEffect, useRef } from 'react'
+type LayerState = { hpLayer?: number }
+function depthOf(state: unknown): number {
+  const d = (state as LayerState | null)?.hpLayer
+  return typeof d === 'number' ? d : 0
+}
+export function useBackToClose(open: boolean, onClose: () => void): void {
+  const closeRef = useRef(onClose)
+  closeRef.current = onClose
+  useEffect(() => {
+    if (!open || typeof window === 'undefined' || !window.history?.pushState) return
+    let alive = true
+    let pushed = false
+    let depth = 0
+    const push = () => {
+      depth = depthOf(window.history.state) + 1
+      window.history.pushState({ ...(window.history.state || {}), hpLayer: depth }, '')
+      pushed = true
+    }
+    // Deferred one tick so React StrictMode's mount → unmount → mount in
+    // development doesn't leave a stray entry behind.
+    const startTimer = window.setTimeout(() => {
+      if (alive) push()
+    }, 0)
+    const onPop = (e: PopStateEvent) => {
+      if (!pushed || depthOf(e.state) >= depth) return
+      pushed = false
+      closeRef.current()
+      // Still open after asking to close → the owner kept it; catch the next Back too.
+      window.setTimeout(() => {
+        if (alive && !pushed) push()
+      }, 0)
+    }
+    window.addEventListener('popstate', onPop)
+    return () => {
+      alive = false
+      window.clearTimeout(startTimer)
+      window.removeEventListener('popstate', onPop)
+      if (pushed && depthOf(window.history.state) === depth) window.history.back()
+    }
+  }, [open])
+}
+export default useBackToClose

frontend/src/ui/motion/Motion.tsx ADDED Viewed

	@@ -0,0 +1,248 @@

+/**
+ * Motion primitives — small, dependency-free components over motion.css.
+ *
+ * Each renders something meaningful with motion switched off (a readable label,
+ * a static bar, the final content), so an animation is never the only signal.
+ */
+import React, { useEffect, useRef, useState } from 'react'
+import { motionAllowed, useMotionPrefs } from './prefs'
+type Tag = 'span' | 'div' | 'p'
+/** 1 — A working label with a moving band of light ("Searching the web…"). */
+export function ShimmerText({ children, className = '', as: As = 'span' }: { children: React.ReactNode; className?: string; as?: Tag }) {
+  return <As className={`hp-shimmer-text ${className}`}>{children}</As>
+}
+/** 2 — A label that gently brightens and dims ("Saving…"). */
+export function PulseText({ children, className = '', as: As = 'span' }: { children: React.ReactNode; className?: string; as?: Tag }) {
+  return <As className={`hp-pulse-text ${className}`}>{children}</As>
+}
+/** 4 — The cursor shown while text is still arriving. Decorative. */
+export function TypingCursor({ className = '' }: { className?: string }) {
+  return <span className={`hp-caret ${className}`} aria-hidden="true" />
+}
+/** 5 — Three dots that ripple. Announced once as `label`. */
+export function LoadingDots({ label = 'Loading', className = '' }: { label?: string; className?: string }) {
+  return (
+    <span className={`hp-dots ${className}`} role="img" aria-label={label}>
+      <span />
+      <span />
+      <span />
+    </span>
+  )
+}
+/** 6 — An inline spinner sized to the text around it. */
+export function Spinner({ size = 16, label, className = '' }: { size?: number; label?: string; className?: string }) {
+  return (
+    <span
+      className={`hp-spin ${className}`}
+      style={{ ['--hp-spin-size' as string]: `${size}px` }}
+      role={label ? 'img' : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+    />
+  )
+}
+/** 7 — Placeholder blocks with a light sweep while content loads. */
+export function Skeleton({
+  lines = 1,
+  width = '100%',
+  height = 12,
+  gap = 8,
+  radius = 8,
+  className = '',
+}: {
+  lines?: number
+  width?: number | string
+  height?: number
+  gap?: number
+  radius?: number
+  className?: string
+}) {
+  return (
+    <span className={`flex flex-col ${className}`} style={{ gap }} aria-hidden="true">
+      {Array.from({ length: lines }, (_, i) => (
+        <span
+          key={i}
+          className="hp-skeleton"
+          // The last line of a paragraph is shorter, as real text would be.
+          style={{ width: lines > 1 && i === lines - 1 ? '62%' : width, height, borderRadius: radius }}
+        />
+      ))}
+    </span>
+  )
+}
+/** 22 — Progress: determinate when `value` (0..1) is known, otherwise a sweep. */
+export function ProgressBar({ value, label, className = '' }: { value?: number | null; label: string; className?: string }) {
+  const known = typeof value === 'number' && Number.isFinite(value)
+  const pct = known ? Math.round(Math.max(0, Math.min(1, value as number)) * 100) : undefined
+  return (
+    <span
+      className={`hp-progress ${className}`}
+      role="progressbar"
+      aria-label={label}
+      aria-valuemin={known ? 0 : undefined}
+      aria-valuemax={known ? 100 : undefined}
+      aria-valuenow={pct}
+      data-indeterminate={known ? 'false' : 'true'}
+    >
+      <span style={known ? { width: `${pct}%` } : undefined} />
+    </span>
+  )
+}
+/** 12/13 — Content that opens and closes smoothly. Closed content is hidden from everyone. */
+export function Collapsible({ open, children, id, className = '' }: { open: boolean; children: React.ReactNode; id?: string; className?: string }) {
+  return (
+    <div id={id} className={`hp-collapsible ${className}`} data-open={open ? 'true' : 'false'} aria-hidden={open ? undefined : true}>
+      <div>{children}</div>
+    </div>
+  )
+}
+/**
+ * 17 — A status line that changes ("Searching" → "Reading 3 sources" → "Writing").
+ * The previous label leaves upward while the new one arrives; while work is
+ * under way the label shimmers. Screen readers hear each new label once.
+ */
+export function StatusText({ text, working = true, className = '' }: { text: string; working?: boolean; className?: string }) {
+  const prefs = useMotionPrefs()
+  const [current, setCurrent] = useState(text)
+  const [leaving, setLeaving] = useState<string | null>(null)
+  const timer = useRef<number | null>(null)
+  const lastChange = useRef(0)
+  useEffect(() => {
+    if (text === current) return
+    // Animate only calm changes. A status that flips several times a second
+    // (a voice detector toggling between two states) swaps instantly — two
+    // labels sliding past each other all the time read as overlapping text.
+    const now = Date.now()
+    const calm = now - lastChange.current > 700
+    lastChange.current = now
+    if (timer.current) window.clearTimeout(timer.current)
+    if (calm && motionAllowed(prefs)) {
+      setLeaving(current)
+      timer.current = window.setTimeout(() => setLeaving(null), 260)
+    } else {
+      setLeaving(null)
+    }
+    setCurrent(text)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text])
+  useEffect(() => () => { if (timer.current) window.clearTimeout(timer.current) }, [])
+  const label = working ? <ShimmerText>{current}</ShimmerText> : <span>{current}</span>
+  return (
+    <span className={`hp-status-swap ${className}`} role="status" aria-live="polite">
+      {leaving ? (
+        <span key={`out-${leaving}`} className="hp-status-swap__out" aria-hidden="true">
+          {leaving}
+        </span>
+      ) : null}
+      <span key={current} className={leaving ? 'hp-status-swap__in' : undefined}>
+        {label}
+      </span>
+    </span>
+  )
+}
+/**
+ * 8–11 — Keeps content mounted long enough to animate out.
+ * `variant` picks fade, slide from the left (panels) or slide up (sheets).
+ */
+export function Presence({
+  show,
+  children,
+  variant = 'fade',
+  className = '',
+}: {
+  show: boolean
+  children: React.ReactNode
+  variant?: 'fade' | 'slide-left' | 'slide-up'
+  className?: string
+}) {
+  const prefs = useMotionPrefs()
+  const [mounted, setMounted] = useState(show)
+  const [leaving, setLeaving] = useState(false)
+  useEffect(() => {
+    if (show) {
+      setMounted(true)
+      setLeaving(false)
+      return
+    }
+    if (!mounted) return
+    if (!motionAllowed(prefs)) {
+      setMounted(false)
+      return
+    }
+    setLeaving(true)
+    const t = window.setTimeout(() => {
+      setMounted(false)
+      setLeaving(false)
+    }, 180)
+    return () => window.clearTimeout(t)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [show])
+  if (!mounted) return null
+  const enter = variant === 'slide-left' ? 'hp-enter-slide-left' : variant === 'slide-up' ? 'hp-enter-slide-up' : 'hp-enter-fade'
+  const exit = variant === 'slide-left' ? 'hp-exit-slide-left' : variant === 'slide-up' ? 'hp-exit-slide-down' : 'hp-exit-fade'
+  return <div className={`${leaving ? exit : enter} ${className}`} aria-hidden={leaving || undefined}>{children}</div>
+}
+export type OrbState = 'idle' | 'listening' | 'thinking' | 'speaking' | 'off'
+/** 18 — The voice orb: breathes when idle, follows your voice, orbits while thinking, rings while speaking. */
+export function VoiceOrb({ state, level = 0, size = 128, className = '' }: { state: OrbState; level?: number; size?: number; className?: string }) {
+  const lvl = Math.max(0, Math.min(1, Number.isFinite(level) ? level : 0))
+  return (
+    <div
+      className={`hp-orb ${className}`}
+      data-state={state}
+      style={{ ['--hp-level' as string]: state === 'listening' || state === 'speaking' ? lvl.toFixed(3) : '0', ['--hp-orb-size' as string]: `${size}px` }}
+      aria-hidden="true"
+    />
+  )
+}
+/** Bar weights: tallest in the middle, like a voice envelope. */
+export function waveformWeights(count: number): number[] {
+  const n = Math.max(1, Math.floor(count))
+  return Array.from({ length: n }, (_, i) => {
+    const x = n === 1 ? 0 : (i / (n - 1)) * 2 - 1 // -1..1
+    return 0.35 + 0.65 * Math.cos((x * Math.PI) / 2) ** 2
+  })
+}
+/** 19 — An audio waveform whose bars follow the live level. */
+export function AudioWaveform({
+  level = 0,
+  active = true,
+  bars = 24,
+  height = 28,
+  className = '',
+}: {
+  level?: number
+  active?: boolean
+  bars?: number
+  height?: number
+  className?: string
+}) {
+  const lvl = Math.max(0, Math.min(1, Number.isFinite(level) ? level : 0))
+  const weights = React.useMemo(() => waveformWeights(bars), [bars])
+  return (
+    <span className={`hp-wave ${className}`} data-active={active ? 'true' : 'false'} style={{ ['--hp-wave-h' as string]: `${height}px` }} aria-hidden="true">
+      {weights.map((w, i) => {
+        // A floor keeps the shape visible at silence; the level lifts every bar by its weight.
+        const s = active ? 0.14 + (0.18 + lvl * 0.82) * w * 0.86 : 0.12 + w * 0.08
+        return <span key={i} style={{ transform: `scaleY(${s.toFixed(3)})`, animationDelay: `${(i % 6) * -0.17}s` }} />
+      })}
+    </span>
+  )
+}

frontend/src/ui/motion/MotionGallery.tsx ADDED Viewed

	@@ -0,0 +1,250 @@

+/**
+ * Settings → Motion: choose how much HomePilot animates, and see every
+ * animation in the motion system running live.
+ *
+ * Applies immediately and is remembered on this device; it does not touch the
+ * Save/Reset draft of the settings around it.
+ */
+import React, { useEffect, useState } from 'react'
+import { MotionLevel, RevealStyle, prefersReducedMotion, useMotionPrefs, writeMotionPrefs } from './prefs'
+import {
+  AudioWaveform,
+  Collapsible,
+  LoadingDots,
+  PulseText,
+  ProgressBar,
+  ShimmerText,
+  Skeleton,
+  Spinner,
+  StatusText,
+  TypingCursor,
+  VoiceOrb,
+  type OrbState,
+} from './Motion'
+import { StreamReveal } from './StreamReveal'
+const LEVELS: { id: MotionLevel; label: string; note: string }[] = [
+  { id: 'enterprise', label: 'Enterprise', note: 'Every animation, quick and restrained.' },
+  { id: 'minimal', label: 'Minimal', note: 'Fades and pulses only — no sweeps or slides.' },
+  { id: 'off', label: 'Off', note: 'Nothing moves.' },
+]
+const REVEALS: { id: RevealStyle; label: string; note: string }[] = [
+  { id: 'stream', label: 'Stream', note: 'New answers appear word by word with a cursor. Tap to show all.' },
+  { id: 'fade', label: 'Fade in', note: 'New answers fade in whole.' },
+  { id: 'instant', label: 'Instant', note: 'New answers appear at once.' },
+]
+const SAMPLE = 'HomePilot reveals a new answer **progressively**, so you can start reading while the rest settles in.'
+const TOOL_STEPS = ['Searching the web', 'Reading 3 sources', 'Comparing results', 'Writing the answer']
+const ORB_STATES: OrbState[] = ['idle', 'listening', 'thinking', 'speaking']
+/** Just enough Markdown for the sample: **bold** runs (an unclosed run is bold too). */
+function renderBold(text: string): React.ReactNode {
+  return text.split('**').map((part, i) => (i % 2 ? <strong key={i}>{part}</strong> : <React.Fragment key={i}>{part}</React.Fragment>))
+}
+function useTicker(ms: number) {
+  const [n, setN] = useState(0)
+  useEffect(() => {
+    const t = window.setInterval(() => setN((v) => v + 1), ms)
+    return () => window.clearInterval(t)
+  }, [ms])
+  return n
+}
+function Choice<T extends string>({
+  name,
+  value,
+  options,
+  onChange,
+}: {
+  name: string
+  value: T
+  options: { id: T; label: string; note: string }[]
+  onChange: (v: T) => void
+}) {
+  return (
+    <div role="radiogroup" aria-label={name} className="grid gap-2 sm:grid-cols-3">
+      {options.map((o) => {
+        const on = o.id === value
+        return (
+          <button
+            key={o.id}
+            type="button"
+            role="radio"
+            aria-checked={on}
+            onClick={() => onChange(o.id)}
+            className={[
+              'min-h-[44px] rounded-xl border px-3 py-2.5 text-left',
+              on ? 'border-white/40 bg-white/[0.08] text-white' : 'border-white/10 bg-white/[0.02] text-white/70 hover:bg-white/[0.05]',
+            ].join(' ')}
+          >
+            <span className="block text-sm font-semibold">{o.label}</span>
+            <span className="block text-xs text-white/55 mt-0.5 leading-snug">{o.note}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+function Demo({ n, name, where, children }: { n: number; name: string; where: string; children: React.ReactNode }) {
+  return (
+    <li data-motion-demo={n} className="flex items-center gap-3 py-3 border-t border-white/[0.06] first:border-t-0 min-w-0">
+      <span className="w-6 shrink-0 text-right text-xs tabular-nums text-white/45">{n}</span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-sm text-white/90">{name}</span>
+        <span className="block text-xs text-white/50 leading-snug">{where}</span>
+      </span>
+      <span className="shrink-0 flex items-center justify-end w-[42%] max-w-[13rem] min-h-[28px] text-sm text-white/80">{children}</span>
+    </li>
+  )
+}
+export function MotionGallery() {
+  const prefs = useMotionPrefs()
+  const tick = useTicker(1600)
+  const [replay, setReplay] = useState(0)
+  const [open, setOpen] = useState(true)
+  const [shown, setShown] = useState(true)
+  const reduced = prefersReducedMotion()
+  // Cycle the stateful demos.
+  const step = TOOL_STEPS[tick % TOOL_STEPS.length]
+  const orb = ORB_STATES[Math.floor(tick / 2) % ORB_STATES.length]
+  const level = orb === 'listening' || orb === 'speaking' ? 0.25 + 0.5 * Math.abs(Math.sin(tick * 1.7)) : 0
+  const progress = ((tick % 6) + 1) / 6
+  return (
+    <div className="space-y-5">
+      {reduced ? (
+        <p className="text-xs text-amber-200/90 bg-amber-500/10 border border-amber-500/25 rounded-lg px-3 py-2">
+          Your device asks for reduced motion, so animations stay off whatever you choose here.
+        </p>
+      ) : null}
+      <div className="space-y-2">
+        <div className="text-xs font-semibold uppercase tracking-wider text-white/55">Animation level</div>
+        <Choice name="Animation level" value={prefs.level} options={LEVELS} onChange={(level) => writeMotionPrefs({ level })} />
+      </div>
+      <div className="space-y-2">
+        <div className="text-xs font-semibold uppercase tracking-wider text-white/55">New answers</div>
+        <Choice name="How new answers appear" value={prefs.reveal} options={REVEALS} onChange={(reveal) => writeMotionPrefs({ reveal })} />
+      </div>
+      <div className="rounded-xl border border-white/10 bg-black/30 p-4 space-y-2">
+        <div className="flex items-center justify-between gap-3">
+          <div className="text-xs font-semibold uppercase tracking-wider text-white/55">Preview</div>
+          <button
+            type="button"
+            onClick={() => setReplay((r) => r + 1)}
+            className="min-h-[36px] px-3 rounded-lg border border-white/10 bg-white/[0.04] text-xs text-white/80 hover:bg-white/[0.08]"
+          >
+            Replay
+          </button>
+        </div>
+        <div className="text-[15px] leading-relaxed text-white/90" key={`${replay}-${prefs.reveal}-${prefs.level}`}>
+          <div className={prefs.reveal === 'fade' ? 'hp-msg-in' : undefined}>
+            <StreamReveal
+              text={SAMPLE}
+              active={prefs.reveal === 'stream' && prefs.level !== 'off' && !reduced}
+              render={renderBold}
+            />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div className="text-xs font-semibold uppercase tracking-wider text-white/55 mb-1">All animations</div>
+        <ol className="list-none p-0 m-0" aria-label="Animations in HomePilot">
+          <Demo n={1} name="Text shimmer" where="Working labels while HomePilot thinks or searches">
+            <ShimmerText>Thinking</ShimmerText>
+          </Demo>
+          <Demo n={2} name="Text opacity pulse" where="Saving and syncing labels">
+            <PulseText>Saving…</PulseText>
+          </Demo>
+          <Demo n={3} name="Streaming text" where="A new answer appears progressively">
+            <span key={replay} className="truncate">
+              <StreamReveal text="Words arrive one after another." active={prefs.level !== 'off' && !reduced} render={(t) => t} />
+            </span>
+          </Demo>
+          <Demo n={4} name="Typing cursor" where="Rides the end of the text being revealed">
+            <span>Writing<TypingCursor /></span>
+          </Demo>
+          <Demo n={5} name="Loading dots" where="Waiting for a reply">
+            <LoadingDots label="Waiting" />
+          </Demo>
+          <Demo n={6} name="Loading spinner" where="Buttons while an action runs">
+            <Spinner size={18} label="Working" />
+          </Demo>
+          <Demo n={7} name="Skeleton shimmer" where="Placeholders while settings and lists load">
+            <Skeleton lines={2} height={8} className="w-full" />
+          </Demo>
+          <Demo n={8} name="Fade in" where="New content arriving">
+            <span key={`fi-${tick}`} className="hp-enter-fade">Hello</span>
+          </Demo>
+          <Demo n={9} name="Fade out" where="Content being dismissed">
+            <span key={`fo-${tick}`} className={tick % 2 ? 'hp-exit-fade' : undefined}>Goodbye</span>
+          </Demo>
+          <Demo n={10} name="Slide in" where="Panels entering from the side">
+            <span key={`si-${tick}`} className="hp-enter-slide-left">Panel</span>
+          </Demo>
+          <Demo n={11} name="Slide out" where="Panels leaving the screen">
+            <span key={`so-${tick}`} className={tick % 2 ? 'hp-exit-slide-left' : undefined}>Panel</span>
+          </Demo>
+          <Demo n={12} name="Accordion expand" where="Sections opening (details, transcripts)">
+            <button type="button" onClick={() => setOpen((v) => !v)} className="text-xs text-white/80 underline underline-offset-2 min-h-[28px]" aria-expanded={open}>
+              {open ? 'Collapse' : 'Expand'}
+            </button>
+          </Demo>
+          <li className="pl-9 -mt-1 pb-2">
+            <Collapsible open={open}>
+              <p className="text-xs text-white/60 py-1">Sections open and close smoothly instead of jumping.</p>
+            </Collapsible>
+          </li>
+          <Demo n={13} name="Accordion collapse" where="Sections closing">
+            <span className="text-xs text-white/55">Same control, reversed</span>
+          </Demo>
+          <Demo n={14} name="Button hover transition" where="Every button's hover state eases in">
+            <button type="button" className="min-h-[32px] px-3 rounded-lg border border-white/10 bg-white/[0.04] hover:bg-white/[0.12] text-xs">Hover me</button>
+          </Demo>
+          <Demo n={15} name="Button press feedback" where="Buttons dip slightly when pressed">
+            <button type="button" className="min-h-[32px] px-3 rounded-lg border border-white/10 bg-white/[0.04] text-xs">Press me</button>
+          </Demo>
+          <Demo n={16} name="Message reveal" where="Each new turn rises into place">
+            <span key={`mr-${tick}`} className="hp-msg-in rounded-full bg-white/10 px-3 py-1 text-xs">New message</span>
+          </Demo>
+          <Demo n={17} name="Tool status transition" where="Searching → reading → writing">
+            <StatusText text={step} />
+          </Demo>
+          <Demo n={18} name="Voice orb" where={`Available for voice visuals — now: ${orb}`}>
+            <VoiceOrb state={orb} level={level} size={40} />
+          </Demo>
+          <Demo n={19} name="Audio waveform" where="Available for live audio levels">
+            <AudioWaveform level={level || 0.2} bars={14} height={24} />
+          </Demo>
+          <Demo n={20} name="Modal transition" where="Dialogs rise in and fade out">
+            <span key={`mt-${tick}`} className="hp-enter-slide-up rounded-lg border border-white/15 bg-white/[0.06] px-3 py-1 text-xs">Dialog</span>
+          </Demo>
+          <Demo n={21} name="Sidebar transition" where="The phone menu slides in over a fading backdrop">
+            <button type="button" onClick={() => setShown((v) => !v)} className="text-xs text-white/80 underline underline-offset-2 min-h-[28px]">
+              {shown ? 'Hide' : 'Show'}
+            </button>
+          </Demo>
+          <li className="pl-9 -mt-1 pb-2 h-8">
+            {shown ? <span className="hp-enter-slide-left inline-block rounded-md bg-white/10 px-2 py-1 text-xs text-white/70">Menu</span> : null}
+          </li>
+          <Demo n={22} name="Progress indicator" where="Uploads, refreshes and long tasks">
+            <span className="w-full space-y-1.5">
+              <ProgressBar value={progress} label="Upload progress" />
+              <ProgressBar label="Refreshing" />
+            </span>
+          </Demo>
+        </ol>
+      </div>
+    </div>
+  )
+}
+export default MotionGallery

frontend/src/ui/motion/StreamReveal.tsx ADDED Viewed

	@@ -0,0 +1,147 @@

+/**
+ * StreamReveal — reveals a newly arrived answer progressively, with a typing
+ * cursor riding the end of the last line (animations 3, 4 and 16).
+ *
+ * HomePilot receives an answer whole, so this is presentation only: the full
+ * text is already in state, copy works on all of it, and a tap shows the rest
+ * at once. The reveal is paced by length — short replies settle in about half
+ * a second, long ones never take more than ~1.6 s — so it reads as lively
+ * rather than slow.
+ *
+ * With `active` false (history, the "fade"/"instant" preference, motion off,
+ * reduced motion) it renders the final content in the same element, so
+ * switching between the two never remounts what is on screen.
+ */
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { motionAllowed } from './prefs'
+const MIN_MS = 450
+const MAX_MS = 1600
+const MS_PER_WORD = 14
+const FRAME_MS = 33 // ~30 fps is plenty for text and keeps Markdown re-renders cheap
+/** Character offsets at which the visible text may end: after each word. */
+export function revealStops(text: string): number[] {
+  const stops: number[] = []
+  const re = /\S+\s*/g
+  let m: RegExpExecArray | null
+  while ((m = re.exec(text))) stops.push(m.index + m[0].length)
+  if (!stops.length || stops[stops.length - 1] !== text.length) stops.push(text.length)
+  return stops
+}
+export function revealDuration(words: number): number {
+  return Math.max(MIN_MS, Math.min(MAX_MS, words * MS_PER_WORD))
+}
+/**
+ * The text to render for a partial reveal. An unfinished code fence is closed
+ * so the partial answer still renders as code rather than as a paragraph of
+ * backticks.
+ */
+export function partialMarkdown(text: string, end: number): string {
+  const head = text.slice(0, end)
+  const fences = head.match(/^\s*(```|~~~)/gm)?.length ?? 0
+  return fences % 2 === 1 ? `${head}\n\`\`\`` : head
+}
+/** The element that should carry the cursor: the deepest last text block. */
+function caretHost(root: HTMLElement): HTMLElement | null {
+  let el: Element | null = root
+  let host: HTMLElement | null = null
+  while (el && el.lastElementChild) {
+    el = el.lastElementChild
+    if (el.matches('p, li, h1, h2, h3, h4, h5, h6, td, th, blockquote, code')) host = el as HTMLElement
+  }
+  return host
+}
+export function StreamReveal({
+  text,
+  active: requested,
+  render,
+  onProgress,
+  onDone,
+  className = '',
+}: {
+  text: string
+  active: boolean
+  render: (visibleText: string) => React.ReactNode
+  onProgress?: () => void
+  onDone?: () => void
+  className?: string
+}) {
+  // Never animate where motion can't or shouldn't run (Settings → Motion off,
+  // the OS reduce-motion setting, unit tests): show the answer whole.
+  const active = requested && motionAllowed()
+  const [end, setEnd] = useState<number>(() => (active ? 0 : text.length))
+  const [running, setRunning] = useState(active)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const rafRef = useRef(0)
+  const doneRef = useRef(onDone)
+  const progressRef = useRef(onProgress)
+  doneRef.current = onDone
+  progressRef.current = onProgress
+  useEffect(() => {
+    if (!active) {
+      setEnd(text.length)
+      setRunning(false)
+      return
+    }
+    const stops = revealStops(text)
+    const total = revealDuration(stops.length)
+    const started = performance.now()
+    let last = 0
+    setRunning(true)
+    const tick = (now: number) => {
+      const t = Math.min(1, (now - started) / total)
+      if (t >= 1) {
+        setEnd(text.length)
+        setRunning(false)
+        doneRef.current?.()
+        return
+      }
+      if (now - last >= FRAME_MS) {
+        last = now
+        // Ease out: quick start, gentle finish.
+        const eased = 1 - (1 - t) ** 2
+        setEnd(stops[Math.min(stops.length - 1, Math.floor(eased * stops.length))])
+        progressRef.current?.()
+      }
+      rafRef.current = requestAnimationFrame(tick)
+    }
+    rafRef.current = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(rafRef.current)
+  }, [active, text])
+  // Put the cursor at the end of the last line that is showing.
+  useLayoutEffect(() => {
+    const root = rootRef.current
+    if (!root) return
+    root.querySelectorAll('[data-hp-caret]').forEach((el) => el.removeAttribute('data-hp-caret'))
+    if (running) caretHost(root)?.setAttribute('data-hp-caret', '')
+  })
+  const finish = () => {
+    if (!running) return
+    cancelAnimationFrame(rafRef.current)
+    setEnd(text.length)
+    setRunning(false)
+    doneRef.current?.()
+  }
+  return (
+    <div
+      ref={rootRef}
+      className={`${running ? 'hp-stream' : ''} ${className}`}
+      aria-busy={running || undefined}
+      onClick={running ? finish : undefined}
+      title={running ? 'Show the whole answer' : undefined}
+    >
+      {render(running ? partialMarkdown(text, end) : text)}
+    </div>
+  )
+}
+export default StreamReveal

frontend/src/ui/motion/index.ts ADDED Viewed

	@@ -0,0 +1,4 @@

+export * from './prefs'
+export * from './Motion'
+export { StreamReveal, revealStops, revealDuration, partialMarkdown } from './StreamReveal'
+export { MotionGallery } from './MotionGallery'

frontend/src/ui/motion/motion.css ADDED Viewed

	@@ -0,0 +1,353 @@

+/* ══════════════════════════════════════════════════════════════════════════
+   HomePilot motion system
+   ──────────────────────────────────────────────────────────────────────────
+   One restrained vocabulary of animations used by chat, voice, dialogs and
+   navigation. Everything here is additive: a class does nothing until a
+   component opts in, and the existing animations elsewhere are untouched.
+   <html data-hp-motion="enterprise|minimal|off"> (set from Settings → Motion)
+   chooses how much plays; the OS "reduce motion" setting always wins.
+   Numbers follow the catalogue in docs/chat-motion.md (1–22).
+   ══════════════════════════════════════════════════════════════════════════ */
+:root {
+  --hp-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --hp-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --hp-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --hp-dur-fast: 140ms;
+  --hp-dur: 220ms;
+  --hp-dur-slow: 320ms;
+  --hp-motion-ink: rgba(255, 255, 255, 0.5);      /* 5.3:1 on the app background */
+  --hp-motion-ink-peak: rgba(255, 255, 255, 0.95);
+}
+/* 1 — Text shimmer: a band of light sweeps across a working label. */
+.hp-shimmer-text {
+  color: var(--hp-motion-ink);
+  background-image: linear-gradient(
+    100deg,
+    var(--hp-motion-ink) 0%,
+    var(--hp-motion-ink) 42%,
+    var(--hp-motion-ink-peak) 50%,
+    var(--hp-motion-ink) 58%,
+    var(--hp-motion-ink) 100%
+  );
+  background-size: 250% 100%;
+  background-position: 100% 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: hp-shimmer 2.2s linear infinite;
+}
+@keyframes hp-shimmer {
+  from { background-position: 100% 0; }
+  to { background-position: 0% 0; }
+}
+/* 2 — Text opacity pulse: a label gently brightens and dims. */
+.hp-pulse-text { animation: hp-opacity-pulse 1.8s ease-in-out infinite; }
+@keyframes hp-opacity-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+/* 3 + 16 — Streaming text / message reveal: the cursor rides the end of the
+   last line while an answer is revealed (see StreamReveal.tsx). */
+[data-hp-caret]::after,
+.hp-caret {
+  content: '';
+  display: inline-block;
+  width: 0.55em;
+  height: 0.55em;
+  margin-left: 0.3em;
+  vertical-align: 0.05em;
+  border-radius: 50%;
+  background: currentColor;
+  animation: hp-caret 1s ease-in-out infinite;
+}
+/* 4 — Typing cursor */
+@keyframes hp-caret {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.35; transform: scale(0.8); }
+}
+.hp-stream { cursor: default; }
+/* 5 — Loading dots */
+.hp-dots { display: inline-flex; align-items: center; gap: 4px; height: 1em; }
+.hp-dots > span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.3;
+  animation: hp-dot 1.2s var(--hp-ease-out) infinite;
+}
+.hp-dots > span:nth-child(2) { animation-delay: 0.15s; }
+.hp-dots > span:nth-child(3) { animation-delay: 0.3s; }
+@keyframes hp-dot {
+  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
+  40% { opacity: 1; transform: translateY(-3px); }
+}
+/* 6 — Loading spinner (inline size; the large one is .hp-spinner) */
+.hp-spin {
+  display: inline-block;
+  flex: 0 0 auto;
+  width: var(--hp-spin-size, 16px);
+  height: var(--hp-spin-size, 16px);
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.18);
+  border-top-color: currentColor;
+  animation: hp-spin 0.8s linear infinite;
+}
+/* 7 — Skeleton shimmer */
+.hp-skeleton {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+}
+.hp-skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
+  animation: hp-skeleton 1.4s ease-in-out infinite;
+}
+@keyframes hp-skeleton { to { transform: translateX(100%); } }
+/* 8 + 9 — Fade in / fade out */
+.hp-enter-fade { animation: hp-fade-in var(--hp-dur) var(--hp-ease-out) backwards; }
+.hp-exit-fade { animation: hp-fade-out var(--hp-dur-fast) var(--hp-ease-in) forwards; }
+@keyframes hp-fade-in { from { opacity: 0; } }
+@keyframes hp-fade-out { to { opacity: 0; } }
+/* 10 + 11 — Slide in / slide out */
+.hp-enter-slide-left { animation: hp-slide-from-left var(--hp-dur) var(--hp-ease-out) backwards; }
+.hp-exit-slide-left { animation: hp-slide-to-left var(--hp-dur-fast) var(--hp-ease-in) forwards; }
+.hp-enter-slide-up { animation: hp-slide-from-below var(--hp-dur) var(--hp-ease-out) backwards; }
+.hp-exit-slide-down { animation: hp-slide-to-below var(--hp-dur-fast) var(--hp-ease-in) forwards; }
+@keyframes hp-slide-from-left { from { opacity: 0; transform: translateX(-16px); } }
+@keyframes hp-slide-to-left { to { opacity: 0; transform: translateX(-16px); } }
+@keyframes hp-slide-from-below { from { opacity: 0; transform: translateY(16px); } }
+@keyframes hp-slide-to-below { to { opacity: 0; transform: translateY(16px); } }
+/* 12 + 13 — Accordion expand / collapse (Collapsible, and <details class="hp-accordion">) */
+.hp-collapsible {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
+  transition: grid-template-rows var(--hp-dur) var(--hp-ease-out), opacity var(--hp-dur) var(--hp-ease-out), visibility 0s linear var(--hp-dur);
+}
+.hp-collapsible[data-open='true'] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  visibility: visible;
+  transition: grid-template-rows var(--hp-dur) var(--hp-ease-out), opacity var(--hp-dur) var(--hp-ease-out), visibility 0s;
+}
+.hp-collapsible > * { min-height: 0; overflow: hidden; }
+details.hp-accordion > summary { cursor: pointer; list-style: none; }
+details.hp-accordion > summary::-webkit-details-marker { display: none; }
+details.hp-accordion > summary::before {
+  content: '';
+  display: inline-block;
+  width: 0.45em;
+  height: 0.45em;
+  margin-right: 0.5em;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform var(--hp-dur) var(--hp-ease-out);
+}
+details.hp-accordion[open] > summary::before { transform: rotate(45deg); }
+@supports selector(::details-content) {
+  details.hp-accordion { interpolate-size: allow-keywords; }
+  details.hp-accordion::details-content {
+    block-size: 0;
+    overflow-y: clip;
+    opacity: 0;
+    transition: block-size var(--hp-dur) var(--hp-ease-out), opacity var(--hp-dur) var(--hp-ease-out),
+      content-visibility var(--hp-dur) allow-discrete;
+  }
+  details.hp-accordion[open]::details-content { block-size: auto; opacity: 1; }
+}
+/* 14 + 15 — Button hover transition and press feedback, for every button that
+   does not already declare its own. `scale` composes with any transform a
+   button already has, and :where() keeps this weaker than any utility class. */
+:where(button, [role='button'], a, summary) {
+  transition-property: background-color, border-color, color, box-shadow, opacity, scale;
+  transition-duration: var(--hp-dur-fast);
+  transition-timing-function: ease-out;
+}
+:where(button, [role='button']):not(:disabled, [aria-disabled='true'], [data-hp-press='off']):active { scale: 0.97; }
+/* 16 — Message reveal: new turns rise into place. */
+.hp-msg-in { animation: hp-msg-in var(--hp-dur-slow) var(--hp-ease-out) backwards; }
+.hp-msg-in--user { animation-name: hp-msg-in-user; transform-origin: 100% 100%; }
+@keyframes hp-msg-in { from { opacity: 0; transform: translateY(8px); } }
+@keyframes hp-msg-in-user { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
+/* 17 — Tool status transition: the old label leaves upward as the new one arrives. */
+.hp-status-swap { display: inline-grid; vertical-align: bottom; overflow: hidden; }
+.hp-status-swap > * { grid-area: 1 / 1; white-space: nowrap; }
+.hp-status-swap__in { animation: hp-status-in var(--hp-dur) var(--hp-ease-out) backwards; }
+.hp-status-swap__out { animation: hp-status-out var(--hp-dur) var(--hp-ease-in) forwards; }
+@keyframes hp-status-in { from { opacity: 0; transform: translateY(60%); } }
+@keyframes hp-status-out { to { opacity: 0; transform: translateY(-60%); } }
+/* 18 — Voice orb. --hp-level (0..1) is the live audio level. */
+.hp-orb {
+  --hp-level: 0;
+  position: relative;
+  width: var(--hp-orb-size, 128px);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  isolation: isolate;
+  background:
+    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(232, 236, 248, 0.75) 18%, rgba(160, 172, 205, 0.45) 46%, rgba(70, 78, 102, 0.35) 72%, rgba(30, 32, 40, 0.6) 100%);
+  box-shadow:
+    inset 0 -10px 24px rgba(0, 0, 0, 0.35),
+    0 0 calc(18px + var(--hp-level) * 46px) rgba(200, 210, 240, calc(0.12 + var(--hp-level) * 0.28));
+  transform: scale(calc(1 + var(--hp-level) * 0.14));
+  transition: transform 90ms linear, box-shadow 120ms linear;
+}
+.hp-orb::before,
+.hp-orb::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  pointer-events: none;
+}
+.hp-orb[data-state='idle'] { animation: hp-orb-breathe 4.5s ease-in-out infinite; }
+.hp-orb[data-state='thinking']::before {
+  background: conic-gradient(from 0deg, transparent 0 60%, rgba(255, 255, 255, 0.45) 75%, transparent 90%);
+  mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%);
+  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%);
+  animation: hp-orb-orbit 1.6s linear infinite;
+}
+.hp-orb[data-state='speaking']::after {
+  border: 1.5px solid rgba(220, 228, 248, 0.5);
+  animation: hp-orb-ring 1.8s var(--hp-ease-out) infinite;
+}
+.hp-orb[data-state='listening']::after {
+  border: 1px solid rgba(220, 228, 248, calc(0.15 + var(--hp-level) * 0.6));
+  transform: scale(calc(1.08 + var(--hp-level) * 0.2));
+  transition: transform 90ms linear;
+}
+@keyframes hp-orb-breathe {
+  0%, 100% { scale: 1; }
+  50% { scale: 1.035; }
+}
+@keyframes hp-orb-orbit { to { transform: rotate(360deg); } }
+@keyframes hp-orb-ring {
+  from { opacity: 0.8; transform: scale(1); }
+  to { opacity: 0; transform: scale(1.45); }
+}
+/* 19 — Audio waveform. Each bar's height follows the level; a slow ripple
+   (on `scale`, which composes with the level transform) keeps it alive. */
+.hp-wave { display: inline-flex; align-items: center; gap: 3px; height: var(--hp-wave-h, 28px); }
+.hp-wave > span {
+  width: 3px;
+  height: 100%;
+  border-radius: 999px;
+  background: currentColor;
+  transform-origin: 50% 50%;
+  transition: transform 90ms linear;
+}
+.hp-wave[data-active='true'] > span { animation: hp-wave-ripple 1.1s ease-in-out infinite; }
+.hp-wave[data-active='false'] > span { opacity: 0.45; }
+@keyframes hp-wave-ripple {
+  0%, 100% { scale: 1 0.82; }
+  50% { scale: 1 1; }
+}
+/* 20 — Modal transition (ModalSheet): rises in; leaves as a fading copy. */
+.hp-sheet-backdrop { animation: hp-fade-in var(--hp-dur) var(--hp-ease-out) backwards; }
+.hp-sheet { animation: hp-sheet-in var(--hp-dur) var(--hp-ease-out) backwards; }
+.hp-sheet-backdrop[data-leaving] { animation: hp-fade-out 180ms var(--hp-ease-in) forwards; pointer-events: none; }
+.hp-sheet-backdrop[data-leaving] .hp-sheet { animation: hp-sheet-out 180ms var(--hp-ease-in) forwards; }
+@keyframes hp-sheet-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
+@keyframes hp-sheet-out { to { opacity: 0; transform: translateY(6px) scale(0.985); } }
+@media (max-width: 639.98px) {
+  .hp-sheet { animation-name: hp-sheet-up; }
+  .hp-sheet-backdrop[data-leaving] .hp-sheet { animation-name: hp-sheet-down; }
+  @keyframes hp-sheet-up { from { transform: translateY(24px); opacity: 0; } }
+  @keyframes hp-sheet-down { to { transform: translateY(24px); opacity: 0; } }
+}
+/* 21 — Sidebar transition (mobile drawer and its backdrop) */
+.hp-drawer { transition: transform var(--hp-dur-slow) var(--hp-ease-drawer), visibility 0s linear var(--hp-dur-slow); }
+.hp-drawer[data-open='true'] { transition: transform var(--hp-dur-slow) var(--hp-ease-drawer), visibility 0s; }
+.hp-drawer[data-open='false'] { visibility: hidden; }
+.hp-drawer-backdrop {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--hp-dur-slow) var(--hp-ease-drawer);
+}
+.hp-drawer-backdrop[data-open='true'] { opacity: 1; pointer-events: auto; }
+/* 22 — Progress indicator */
+.hp-progress {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 3px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.1);
+}
+.hp-progress > span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--hp-color-text, #f5f5f5);
+  transition: width var(--hp-dur-slow) var(--hp-ease-out);
+}
+.hp-progress[data-indeterminate='true'] > span {
+  width: 38%;
+  animation: hp-progress-sweep 1.3s var(--hp-ease-out) infinite;
+}
+@keyframes hp-progress-sweep {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(265%); }
+}
+/* ── Levels ───────────────────────────────────────────────────────────────
+   minimal: no sweeps, slides, orbits or press scaling — fades and pulses only. */
+html[data-hp-motion='minimal'] .hp-shimmer-text {
+  background: none;
+  -webkit-text-fill-color: currentColor;
+  animation: hp-opacity-pulse 1.8s ease-in-out infinite;
+}
+html[data-hp-motion='minimal'] :is(.hp-enter-slide-left, .hp-enter-slide-up, .hp-msg-in, .hp-sheet) { animation-name: hp-fade-in; }
+html[data-hp-motion='minimal'] :is(.hp-exit-slide-left, .hp-exit-slide-down) { animation-name: hp-fade-out; }
+html[data-hp-motion='minimal'] .hp-sheet-backdrop[data-leaving] .hp-sheet { animation-name: hp-fade-out; }
+html[data-hp-motion='minimal'] :is(.hp-skeleton::after, .hp-orb::before, .hp-orb::after) { animation: none; }
+html[data-hp-motion='minimal'] :where(button, [role='button']):active { scale: none; }
+/* off (and the OS reduce-motion setting): nothing moves; working labels stay readable. */
+html[data-hp-motion='off'] *,
+html[data-hp-motion='off'] *::before,
+html[data-hp-motion='off'] *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+  scroll-behavior: auto !important;
+}
+html[data-hp-motion='off'] :where(button, [role='button']):active { scale: none; }
+html[data-hp-motion='off'] .hp-shimmer-text { background: none; -webkit-text-fill-color: currentColor; }
+@media (prefers-reduced-motion: reduce) {
+  .hp-shimmer-text { background: none; -webkit-text-fill-color: currentColor; }
+  :where(button, [role='button']):active { scale: none; }
+}
+/* The orb at rest when voice is off: present, but clearly asleep. */
+.hp-orb[data-state='off'] { opacity: 0.55; filter: saturate(0.5); }

frontend/src/ui/motion/prefs.ts ADDED Viewed

	@@ -0,0 +1,115 @@

+/**
+ * Motion preferences — how much HomePilot animates, kept per device.
+ *
+ * Two independent choices:
+ *   level   enterprise  every animation in the motion system (the default)
+ *           minimal     quiet: fades and pulses only, no sweeps, slides or press scaling
+ *           off         no animation at all (same effect as the OS "reduce motion")
+ *   reveal  stream      a new answer is revealed progressively with a typing cursor
+ *           fade        a new answer fades in whole (HomePilot's previous behaviour)
+ *           instant     a new answer appears at once
+ *
+ * The choice lives in localStorage (it describes this screen, not the account),
+ * is mirrored onto <html data-hp-motion data-hp-reveal> so CSS can follow it,
+ * and is announced with a `hp:motion-change` event so open views update live.
+ * The operating system's "reduce motion" setting always wins.
+ */
+import { useEffect, useReducer, useState } from 'react'
+export type MotionLevel = 'enterprise' | 'minimal' | 'off'
+export type RevealStyle = 'stream' | 'fade' | 'instant'
+export type MotionPrefs = { level: MotionLevel; reveal: RevealStyle }
+export const MOTION_STORAGE_KEY = 'homepilot_motion'
+export const MOTION_EVENT = 'hp:motion-change'
+export const DEFAULT_MOTION_PREFS: MotionPrefs = { level: 'enterprise', reveal: 'stream' }
+const LEVELS: readonly MotionLevel[] = ['enterprise', 'minimal', 'off']
+const REVEALS: readonly RevealStyle[] = ['stream', 'fade', 'instant']
+const REDUCED_QUERY = '(prefers-reduced-motion: reduce)'
+export function readMotionPrefs(): MotionPrefs {
+  try {
+    const raw = localStorage.getItem(MOTION_STORAGE_KEY)
+    if (!raw) return { ...DEFAULT_MOTION_PREFS }
+    const parsed = JSON.parse(raw) ?? {}
+    return {
+      level: LEVELS.includes(parsed.level) ? parsed.level : DEFAULT_MOTION_PREFS.level,
+      reveal: REVEALS.includes(parsed.reveal) ? parsed.reveal : DEFAULT_MOTION_PREFS.reveal,
+    }
+  } catch {
+    return { ...DEFAULT_MOTION_PREFS }
+  }
+}
+/** Mirror the preference onto <html> so stylesheets can follow it. */
+export function applyMotionPrefs(prefs: MotionPrefs = readMotionPrefs()): void {
+  if (typeof document === 'undefined') return
+  const root = document.documentElement
+  root.dataset.hpMotion = prefs.level
+  root.dataset.hpReveal = prefs.reveal
+}
+export function writeMotionPrefs(next: Partial<MotionPrefs>): MotionPrefs {
+  const merged: MotionPrefs = { ...readMotionPrefs(), ...next }
+  try {
+    localStorage.setItem(MOTION_STORAGE_KEY, JSON.stringify(merged))
+  } catch {
+    /* private mode / storage full — the choice still applies to this page */
+  }
+  applyMotionPrefs(merged)
+  if (typeof window !== 'undefined') window.dispatchEvent(new CustomEvent(MOTION_EVENT, { detail: merged }))
+  return merged
+}
+export function prefersReducedMotion(): boolean {
+  try {
+    return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(REDUCED_QUERY).matches
+  } catch {
+    return false
+  }
+}
+/**
+ * Unit tests run in jsdom, which has no layout and no real animation frames.
+ * Components render their final state there, so tests see what a person sees
+ * once an animation has finished.
+ */
+function isTestDom(): boolean {
+  return typeof navigator !== 'undefined' && /jsdom/i.test(navigator.userAgent || '')
+}
+/** Whether time-based animation (progressive reveal, exit transitions) should run. */
+export function motionAllowed(prefs: MotionPrefs = readMotionPrefs()): boolean {
+  return prefs.level !== 'off' && !prefersReducedMotion() && !isTestDom()
+}
+/** The current preference, kept up to date when it changes here, in another tab, or in the OS. */
+export function useMotionPrefs(): MotionPrefs {
+  const [prefs, setPrefs] = useState<MotionPrefs>(readMotionPrefs)
+  const [, rerender] = useReducer((n: number) => n + 1, 0)
+  useEffect(() => {
+    const sync = () => setPrefs(readMotionPrefs())
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === MOTION_STORAGE_KEY) {
+        applyMotionPrefs()
+        sync()
+      }
+    }
+    window.addEventListener(MOTION_EVENT, sync)
+    window.addEventListener('storage', onStorage)
+    let mq: MediaQueryList | null = null
+    try {
+      mq = typeof window.matchMedia === 'function' ? window.matchMedia(REDUCED_QUERY) : null
+      mq?.addEventListener?.('change', rerender)
+    } catch {
+      mq = null
+    }
+    return () => {
+      window.removeEventListener(MOTION_EVENT, sync)
+      window.removeEventListener('storage', onStorage)
+      mq?.removeEventListener?.('change', rerender)
+    }
+  }, [])
+  return prefs
+}

frontend/src/ui/routines/RoutinesView.tsx CHANGED Viewed

@@ -583,7 +583,7 @@ export default function RoutinesView({
       <div className="mx-auto max-w-6xl px-5 py-8 sm:px-8 sm:py-10">
         <header className="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
           <div>
-            <div className="flex items-center gap-2.5 text-white/40 text-sm">
               <CalendarClock size={17} />
               Personal automation
             </div>

       <div className="mx-auto max-w-6xl px-5 py-8 sm:px-8 sm:py-10">
         <header className="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
           <div>
+            <div className="hp-clear-nav -mt-4 sm:mt-0 flex items-center gap-2.5 text-white/55 text-sm">
               <CalendarClock size={17} />
               Personal automation
             </div>

frontend/src/ui/routines/api.ts CHANGED Viewed

@@ -23,6 +23,15 @@ export type RoutineTargetProject = {
 function headers(apiKey?: string): HeadersInit {
   const out: Record<string, string> = { 'Content-Type': 'application/json' }
   if (apiKey) out['X-API-Key'] = apiKey
   return out
 }

 function headers(apiKey?: string): HeadersInit {
   const out: Record<string, string> = { 'Content-Type': 'application/json' }
   if (apiKey) out['X-API-Key'] = apiKey
+  // Routines belong to the signed-in user. Without the session token a
+  // multi-user install answers "Authentication required" even when signed in
+  // (the same Bearer convention as personaApi / profileApi).
+  try {
+    const token = localStorage.getItem('homepilot_auth_token')
+    if (token) out['Authorization'] = `Bearer ${token}`
+  } catch {
+    /* storage unavailable — the session cookie still applies same-origin */
+  }
   return out
 }

frontend/src/ui/styles.css CHANGED Viewed

@@ -462,3 +462,292 @@ select option:hover {
 .ms-cap__mode-name { font-weight: 500; }
 .ms-cap__mode-note { font-size: 11px; color: rgba(255, 255, 255, 0.4); line-height: 1.45; }
 .ms-cap__done { justify-content: center; margin-top: 2px; }

 .ms-cap__mode-name { font-weight: 500; }
 .ms-cap__mode-note { font-size: 11px; color: rgba(255, 255, 255, 0.4); line-height: 1.45; }
 .ms-cap__done { justify-content: center; margin-top: 2px; }
+/* ══════════════════════════════════════════════════════════════════════════
+   Mobile design system — tokens and layout primitives
+   ──────────────────────────────────────────────────────────────────────────
+   A restrained, near-black palette with lighter surfaces and quiet borders.
+   These are HomePilot's own tokens (not copied from any other product).
+   Primitives here fix layout at the root so individual screens don't need
+   one-off overrides:
+     .hp-page-header   — a page header that always clears the floating mobile
+                         menu button, with title, description and actions rows
+     .hp-sheet         — a dialog that is full-screen on phones and a centred
+                         card on larger screens, with ONE scrolling body and a
+                         sticky footer above the home indicator
+     .hp-tabs          — tab row that scrolls sideways instead of clipping
+     .hp-choice-grid   — compact category grid (2 columns on phones)
+   ══════════════════════════════════════════════════════════════════════════ */
+:root {
+  --hp-color-bg: #090909;
+  --hp-color-surface: #171717;
+  --hp-color-input: #202020;
+  --hp-color-text: #f5f5f5;
+  --hp-color-text-2: #b0b0b0;      /* 9.1:1 on --hp-color-bg */
+  --hp-color-border: #303030;
+  --hp-space: 4px;
+  --hp-pad-x: 16px;
+  --hp-control-h: 44px;
+  --hp-radius-card: 14px;
+  --hp-radius-sheet: 20px;
+  /* The floating menu button (40px at a 0.6rem inset) needs this much room. */
+  --hp-nav-clear: 3.75rem;
+}
+/* Page header: on phones the title row starts after the menu button and is
+   vertically aligned with it; actions wrap onto their own row. */
+.hp-page-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 1rem;
+  min-width: 0;
+}
+.hp-page-header__titles { min-width: 0; flex: 1 1 16rem; }
+.hp-page-header__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
+@media (max-width: 767.98px) {
+  .hp-page-header {
+    padding-left: max(var(--hp-pad-x), calc(env(safe-area-inset-left) + var(--hp-nav-clear))) !important;
+    padding-right: var(--hp-pad-x) !important;
+    padding-top: max(0.6rem, env(safe-area-inset-top)) !important;
+    padding-bottom: 0.875rem !important;
+  }
+  .hp-page-header__titles { flex-basis: 100%; min-height: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
+  /* Actions get the full width (no longer squeezed beside the title). */
+  .hp-page-header__actions {
+    flex-basis: 100%;
+    margin-left: calc(-1 * (var(--hp-nav-clear) - var(--hp-pad-x)));
+  }
+  .hp-page-header__actions > * { min-height: var(--hp-control-h); }
+}
+/* Sheet: full-screen on phones, centred card above. Exactly one scroller. */
+.hp-sheet-backdrop {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.6);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+}
+.hp-sheet {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 48rem;
+  max-height: min(90vh, 52rem);
+  max-height: min(90dvh, 52rem);
+  min-height: 0;
+  overflow: hidden;
+  background: var(--hp-color-bg);
+  border: 1px solid var(--hp-color-border);
+  border-radius: var(--hp-radius-sheet);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+}
+.hp-sheet__header, .hp-sheet__footer { flex: 0 0 auto; }
+.hp-sheet__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+.hp-sheet__footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
+@media (max-width: 639.98px) {
+  .hp-sheet-backdrop { padding: 0; align-items: stretch; }
+  .hp-sheet {
+    max-width: none;
+    height: 100%;
+    max-height: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding-top: env(safe-area-inset-top);
+  }
+}
+/* Tabs scroll sideways rather than clipping; the active tab is scrolled into view. */
+.hp-tabs {
+  display: flex;
+  gap: 0.25rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x proximity;
+  max-width: 100%;
+}
+.hp-tabs::-webkit-scrollbar { display: none; }
+.hp-tabs > * { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; min-height: 2.5rem; }
+/* Compact category choices: two columns on phones, four on tablets. */
+.hp-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
+.hp-choice-grid > * { min-height: var(--hp-control-h); min-width: 0; }
+@media (min-width: 640px) { .hp-choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+/* Where the grid sits in a measured container (.hp-cq), its own width decides —
+   so a narrow column inside a wide window (or a narrow embedded frame) still
+   gets two columns. The viewport rule above is the fallback. */
+.hp-cq { container-type: inline-size; }
+@container (max-width: 29.99rem) { .hp-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@container (min-width: 30rem) { .hp-choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+/* Startup and error screens share one calm, legible layout. */
+.hp-status-screen {
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: var(--hp-color-bg);
+  color: var(--hp-color-text);
+  font-family: Inter, system-ui, sans-serif;
+}
+.hp-status-card { width: 100%; max-width: 26rem; text-align: center; }
+.hp-status-card h1 { font-size: 1.25rem; font-weight: 600; margin: 0.75rem 0 0.5rem; }
+.hp-status-card p { color: var(--hp-color-text-2); font-size: 0.95rem; line-height: 1.5; margin: 0 0 1rem; }
+.hp-status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
+.hp-status-actions button {
+  min-height: var(--hp-control-h);
+  padding: 0 1.1rem;
+  border-radius: 999px;
+  border: 1px solid var(--hp-color-border);
+  background: var(--hp-color-surface);
+  color: var(--hp-color-text);
+  font-weight: 600;
+}
+.hp-status-actions button.hp-primary { background: var(--hp-color-text); color: #000; border-color: transparent; }
+.hp-spinner {
+  width: 28px;
+  height: 28px;
+  margin: 0 auto;
+  border-radius: 50%;
+  border: 3px solid rgba(255, 255, 255, 0.15);
+  border-top-color: rgba(255, 255, 255, 0.85);
+  animation: hp-spin 0.9s linear infinite;
+}
+@keyframes hp-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* Any header row that sits under the floating mobile menu button. */
+@media (max-width: 767.98px) {
+  .hp-clear-nav {
+    padding-left: max(var(--hp-pad-x), calc(env(safe-area-inset-left) + var(--hp-nav-clear))) !important;
+    min-height: 2.75rem;
+  }
+}
+/* The composer placeholder stays on one line (it used to wrap inside the
+   one-line field on phones and get cut off mid-word). */
+.hp-composer-input::placeholder {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* Header actions share a row when they fit and stack on very narrow phones. */
+@media (max-width: 767.98px) {
+  .hp-grow-action { flex: 1 1 9.5rem; }
+}
+/* A small icon action pinned to the header's top-right corner on phones, so it
+   doesn't wrap onto a row of its own under the main actions. */
+@media (max-width: 767.98px) {
+  .hp-page-header:has(.hp-header-corner) .hp-page-header__titles { padding-right: 2.75rem; }
+  .hp-header-corner {
+    position: absolute;
+    top: max(0.6rem, env(safe-area-inset-top));
+    right: max(0.5rem, env(safe-area-inset-right));
+    min-width: var(--hp-control-h);
+    min-height: var(--hp-control-h) !important;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+/* ── Touch targets ────────────────────────────────────────────────────────
+   Small icon buttons keep their look but get a 44×44 hit area on touch
+   screens: an invisible ::before grows the target to at least 44px each way. */
+.hp-icon-btn:not(.absolute, .fixed, .sticky) { position: relative; }
+@media (pointer: coarse) {
+  .hp-icon-btn::before {
+    content: '';
+    position: absolute;
+    inset: min(0px, calc((100% - 44px) / 2));
+  }
+  /* List rows in the drawer (recent chats, "New conversation", "View all"). */
+  .hp-touch-row { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
+  /* Keyboard shortcut hints mean nothing on a phone. */
+  .hp-kbd-hint { display: none !important; }
+  /* iOS zooms into any focused field under 16px — selects and untyped inputs too. */
+  input:not([type]), input[type="tel"], select { font-size: max(16px, 1em); }
+}
+/* ── Keyboard focus ───────────────────────────────────────────────────────
+   Every control shows a clear ring when reached by keyboard (never on mouse
+   or touch). Stronger than `outline-none` utilities. Text fields keep their
+   own focus styling — they match :focus-visible on every click. */
+:is(a, button, summary, [tabindex]:not(input, textarea, select), [role="button"], [role="tab"], [role="radio"], [role="menuitem"], [role="switch"]):focus-visible {
+  outline: 2px solid rgba(245, 245, 245, 0.85);
+  outline-offset: 2px;
+}
+/* ── Secondary text contrast ──────────────────────────────────────────────
+   Muted labels used to go as low as 25–40 % white (2–3.6:1 on the app
+   background). These floors keep the same hierarchy while meeting the 4.5:1
+   WCAG AA minimum for text; hover variants and decorative 10–20 % tints are
+   untouched. */
+.text-white\/25 { color: rgb(255 255 255 / 0.47); }
+.text-white\/30 { color: rgb(255 255 255 / 0.5); }
+.text-white\/35 { color: rgb(255 255 255 / 0.52); }
+.text-white\/40 { color: rgb(255 255 255 / 0.55); }
+.placeholder\:text-white\/20::placeholder,
+.placeholder\:text-white\/25::placeholder,
+.placeholder\:text-white\/30::placeholder,
+.placeholder\:text-white\/35::placeholder,
+.placeholder\:text-white\/40::placeholder { color: rgb(255 255 255 / 0.5); }
+/* The shell sits on the shared background token. */
+.hp-app-shell { background-color: var(--hp-color-bg); }
+/* Short screens (a phone on its side, or any phone with the keyboard open):
+   the sheet goes full-screen and scrolls as one page — header and tabs move
+   away so the field being edited has room — while Save stays pinned above the
+   keyboard. scroll-padding keeps a focused field clear of the pinned footer. */
+@media (max-height: 500px) {
+  .hp-sheet-backdrop { padding: 0; align-items: stretch; }
+  .hp-sheet {
+    max-width: none;
+    height: 100%;
+    max-height: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-bottom: 5.5rem;
+  }
+  .hp-sheet__body { flex: 0 0 auto; overflow: visible; min-height: auto; }
+  .hp-sheet__footer { position: sticky; bottom: 0; z-index: 1; }
+}
+/* Chat: the composer dock and the phone header scrim blend into the page
+   background instead of drawing a slightly darker box. */
+.hp-composer-dock {
+  background: linear-gradient(to top, var(--hp-color-bg) 78%, rgba(9, 9, 9, 0));
+}
+.hp-top-scrim {
+  background: linear-gradient(to bottom, var(--hp-color-bg) 0%, rgba(9, 9, 9, 0.85) 55%, rgba(9, 9, 9, 0) 100%);
+}

frontend/tailwind.config.js CHANGED Viewed

@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 export default {
 content: ["./index.html", "./src/**/*.{ts,tsx}"],
 theme: {
 extend: {
 boxShadow: { soft: "0 10px 30px rgba(0,0,0,0.35)" },

 /** @type {import('tailwindcss').Config} */
 export default {
 content: ["./index.html", "./src/**/*.{ts,tsx}"],
+// `hover:` styles only where a real hover exists, so a tapped button on a
+// phone doesn't stay highlighted after the finger lifts.
+future: { hoverOnlyWhenSupported: true },
 theme: {
 extend: {
 boxShadow: { soft: "0 10px 30px rgba(0,0,0,0.35)" },