feat(empathy+hume): add EVI config UI in sidebar; server proxy routes; client helpers; fix Hume connect/session timing; wrap viewer panel

Author: AvatarOS Developer

AGENTS.md

@@ -47,6 +47,7 @@
 ## Recent Changes & Rationale
 - For a concise summary of the latest implementation updates (Markdown rendering, mock persistence, drawer UI, centered layouts, headers), see `docs/IMPLEMENTATION_NOTES.md`.
 - UI primitives and usage are documented in `docs/ui/components.md`; tokens are described in `docs/ui/tokens.md`.
+ - Sidebar improvements: Calendar sidebar now provides a day-actions tooltip (create/see) and integrates with the main view. See `docs/ui/sidebar.md`.
 
 ## Changelog Process (All Agents)
 - Before committing and pushing changes:

CHANGELOG.md

@@ -51,3 +51,16 @@
 2025-10-03: Sidebar tooltip now closes on outside click and Escape; added dialog role and ref containment.
 
 2025-10-03: Sidebar tooltip positioned to the right of day; vertical stack; added caret arrow matching theme.
+2025-10-03: Docs: added sidebar pattern and Storybook Episode 2 plan; linked from README and AGENTS.md.
+2025-10-03: Storybook: added AppSwitcher and UserBar stories using real store/actions (no mocks).
+2025-10-03: Storybook: added small sidebar element stories (MiniCalendarHeader, DayActionsTooltip, SidebarCategoryItem, CalendarConnectionStatus).
+2025-10-03: EmpathyLab: extracted VideoFrame and RecordingIndicator; replaced inline markup; added aria-live to error display; added presentational components + Storybook stories (ConsentItem, UseCaseItem).
+2025-10-03: EmpathyLabSidebar layout: enforce single-column rows (full-width panels), remove nested scrolling for cleaner sidebar behavior.
+2025-10-03: EmpathyLabSidebar restructure: sticky top preset bar, Tracking Permissions panel only, sticky privacy banner; removed Use Cases/About from sidebar.
+2025-10-03: EmpathyLab: wrapped VideoFrame in Panel titled 'Webcam Viewer'; sidebar now shows individual consent mini-cards (no permissions panel wrapper).
+2025-10-03: Fix HumeTest rendering: guard against object children (status, message.role/content); normalize to strings to avoid React object child error).
+2025-10-03: Fix Hume connect(): pass default audioConstraints to avoid destructuring error in VoiceProvider.
+2025-10-03: Docs: added Hume EVI technical guide (server token endpoint, client VoiceProvider, session settings timing, function calling, TTS).
+2025-10-03: Server: added Hume proxy routes (/api/hume/configs|prompts|tools) using server-side API key; kept existing /api/services/hume/token.
+2025-10-03: Client: added src/lib/services/hume.js (token + configs/prompts/tools helpers).
+2025-10-03: EmpathyLab sidebar: added EVI Configuration accordion with form + Saved EVI Configs list; uses /api/hume/configs via client helper; persisted to localStorage.

README.md

@@ -203,7 +203,9 @@ npm run dev
 - Stories live under `src/**/*.stories.jsx` (examples: `src/components/BoothHeader.stories.jsx`, `src/components/ui/*.stories.jsx`, `src/stories/Tokens.stories.jsx`).
 - Use the “Accessibility” panel to scan for WCAG issues; the “Interactions” panel can step through play functions.
 - Tokens: inspect color/typography via `Tokens/Overview` story.
- - Docs: UI tokens (`docs/ui/tokens.md`) and components (`docs/ui/components.md`).
+- Docs: UI tokens (`docs/ui/tokens.md`) and components (`docs/ui/components.md`).
+- Sidebars: see `docs/ui/sidebar.md`; upcoming plan in `docs/ui/storybook-episode-02.md`.
+ - Voice/EVI: Hume integration guide in `docs/integrations/hume-evi.md`.
 
 ## Deployment
 

server.js

@@ -1369,6 +1369,79 @@ app.get('/api/services/hume/token', requireAuth, async (req, res) => {
   }
 });
 
+// Hume API proxy routes (server-side key usage)
+app.post('/api/hume/configs', requireAuth, async (req, res) => {
+  try {
+    const apiKey = process.env.HUME_API_KEY;
+    if (!apiKey) return res.status(500).json({ error: 'HUME_API_KEY not configured' });
+    const r = await fetch('https://api.hume.ai/v0/evi/configs', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Hume-Api-Key': apiKey
+      },
+      body: JSON.stringify(req.body)
+    });
+    const data = await r.json().catch(() => ({}));
+    if (!r.ok) {
+      logger.error('Hume create config failed', { status: r.status, data });
+      return res.status(r.status).json(data);
+    }
+    res.json(data);
+  } catch (err) {
+    logger.error('Hume create config error:', err);
+    res.status(500).json({ error: 'Failed to create Hume config', details: err.message });
+  }
+});
+
+app.post('/api/hume/prompts', requireAuth, async (req, res) => {
+  try {
+    const apiKey = process.env.HUME_API_KEY;
+    if (!apiKey) return res.status(500).json({ error: 'HUME_API_KEY not configured' });
+    const r = await fetch('https://api.hume.ai/v0/evi/prompts', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Hume-Api-Key': apiKey
+      },
+      body: JSON.stringify(req.body)
+    });
+    const data = await r.json().catch(() => ({}));
+    if (!r.ok) {
+      logger.error('Hume create prompt failed', { status: r.status, data });
+      return res.status(r.status).json(data);
+    }
+    res.json(data);
+  } catch (err) {
+    logger.error('Hume create prompt error:', err);
+    res.status(500).json({ error: 'Failed to create Hume prompt', details: err.message });
+  }
+});
+
+app.post('/api/hume/tools', requireAuth, async (req, res) => {
+  try {
+    const apiKey = process.env.HUME_API_KEY;
+    if (!apiKey) return res.status(500).json({ error: 'HUME_API_KEY not configured' });
+    const r = await fetch('https://api.hume.ai/v0/evi/tools', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Hume-Api-Key': apiKey
+      },
+      body: JSON.stringify(req.body)
+    });
+    const data = await r.json().catch(() => ({}));
+    if (!r.ok) {
+      logger.error('Hume create tool failed', { status: r.status, data });
+      return res.status(r.status).json(data);
+    }
+    res.json(data);
+  } catch (err) {
+    logger.error('Hume create tool error:', err);
+    res.status(500).json({ error: 'Failed to create Hume tool', details: err.message });
+  }
+});
+
 // Expose the /metrics endpoint for Prometheus scraping
 app.get('/metrics', async (req, res) => {
   try {

src/components/AppSwitcher.stories.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import AppSwitcher from './AppSwitcher.jsx';
+import useStore from '../lib/store.js';
+import { switchApp } from '../lib/actions.js';
+
+export default {
+  title: 'Layout/AppSwitcher',
+  component: AppSwitcher,
+  parameters: { layout: 'centered' }
+};
+
+export const Default = {
+  render: () => {
+    // Set an initial app; rely on real store/actions (no mocks)
+    useStore.setState((s) => { s.activeApp = 'archiva'; });
+    return (
+      <div style={{ padding: 16 }}>
+        <AppSwitcher />
+        <div style={{ marginTop: 12, fontSize: 12, opacity: 0.8 }}>
+          Active: {useStore.getState().activeApp}
+        </div>
+        <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
+          <button onClick={() => { switchApp('prev'); }}>Prev (action)</button>
+          <button onClick={() => { switchApp('next'); }}>Next (action)</button>
+        </div>
+      </div>
+    );
+  }
+};
+

src/components/CalendarAISidebar.jsx

@@ -367,3 +367,4 @@ const CalendarConnectionStatus = () => {
 };
 
 export default CalendarAISidebar;
+export { CalendarConnectionStatus };

src/components/CalendarConnectionStatus.stories.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { CalendarConnectionStatus } from './CalendarAISidebar.jsx';
+import useStore from '../lib/store.js';
+
+export default {
+  title: 'Sidebar/CalendarConnectionStatus',
+  component: CalendarConnectionStatus,
+  parameters: { layout: 'centered' }
+};
+
+export const Connected = {
+  render: () => {
+    useStore.setState((s) => {
+      s.connectedServices.googleCalendar = { connected: true, status: 'connected', info: { name: 'googleCalendar' } };
+    });
+    return <div style={{ width: 360 }}><CalendarConnectionStatus /></div>;
+  }
+};
+
+export const Disconnected = {
+  render: () => {
+    useStore.setState((s) => {
+      s.connectedServices.googleCalendar = { connected: false, status: 'disconnected', info: null };
+    });
+    return <div style={{ width: 360 }}><CalendarConnectionStatus /></div>;
+  }
+};
+

src/components/EmpathyLab.jsx

@@ -7,6 +7,8 @@ import BoothHeader from './BoothHeader.jsx';
 import Button from './ui/Button.jsx';
 import Panel from './ui/Panel.jsx';
 import FormField from './ui/FormField.jsx';
+import VideoFrame from './empathy/VideoFrame.jsx';
+import RecordingIndicator from './empathy/RecordingIndicator.jsx';
 
 export default function EmpathyLab() {
     const videoRef = useRef(null);
@@ -496,7 +498,7 @@ export default function EmpathyLab() {
 
             <div className="empathy-lab-main">
                 {error && (
-                    <div className="error-display">
+                    <div className="error-display" aria-live="polite" role="status">
                         <span className="icon">error</span>
                         <div>
                             <h4>Error</h4>
@@ -508,30 +510,17 @@ export default function EmpathyLab() {
                     </div>
                 )}
 
-                <div className="video-container">
-                    <video
-                        ref={videoRef}
-                        style={{ display: 'none' }}
-                        playsInline
-                        muted
-                    />
-                    <canvas ref={canvasRef} className="video-canvas" />
-                    <canvas ref={overlayCanvasRef} className="overlay-canvas" />
-
-                    {isTracking && (
-                        <div className="recording-indicator">
-                            <span className="recording-dot"></span>
-                            <span>Tracking Active</span>
-                        </div>
-                    )}
-
-                    {!isTracking && !error && (
-                        <div className="placeholder">
-                            <span className="icon">videocam_off</span>
-                            <p>Configure privacy settings and click "Start Tracking"</p>
-                        </div>
-                    )}
-                </div>
+                <Panel title="Webcam Viewer" info={isTracking ? 'Live' : 'Idle'}>
+                    <VideoFrame
+                        videoRef={videoRef}
+                        canvasRef={canvasRef}
+                        overlayCanvasRef={overlayCanvasRef}
+                        active={isTracking}
+                        error={!!error}
+                    >
+                        <RecordingIndicator active={isTracking} />
+                    </VideoFrame>
+                </Panel>
 
                 {results && (
                     <ResultsPanel