diff --git a/.gitignore b/.gitignore
index 50d04ab..0bcbb8f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,6 +28,24 @@ CLAUDE.local.md
 # Cursor
 .cursor/
 
+# Kayley data (symlinked/generated — lives in Kayley_Cowork + ~/.kayley-journal)
+apps/webuiapps/public/kayley-selfies
+apps/webuiapps/public/kayley-selfies/
+apps/webuiapps/public/kayley-selfies-index.json
+apps/webuiapps/public/kayley-moments
+apps/webuiapps/public/kayley-moments/
+apps/webuiapps/public/kayley-moments-index.json
+apps/webuiapps/public/kayley-journal
+apps/webuiapps/public/kayley-journal/
+apps/webuiapps/public/kayley-journal-index.json
+apps/webuiapps/public/kayley-story
+apps/webuiapps/public/kayley-story/
+apps/webuiapps/public/kayley-weeks-index.json
+apps/webuiapps/public/kayley-promises-index.json
+apps/webuiapps/public/kayley-storylines-index.json
+apps/webuiapps/public/kayley-email-index.json
+apps/webuiapps/public/kayley-twitter-feed.json
+
 # Internal CI/CD & Scripts
 scripts/
 .gitlab-ci.yml
diff --git a/apps/webuiapps/package.json b/apps/webuiapps/package.json
index d1db7a9..db95661 100644
--- a/apps/webuiapps/package.json
+++ b/apps/webuiapps/package.json
@@ -7,9 +7,9 @@
   "scripts": {
     "dev": "vite",
     "debug": "vite --debug",
-    "build:test": "NODE_ENV=test vite build",
-    "build": "NODE_ENV=production vite build",
-    "build:analyze": "NODE_ENV=production ANALYZE=analyze vite build",
+    "build:test": "cross-env NODE_ENV=test vite build",
+    "build": "cross-env NODE_ENV=production vite build",
+    "build:analyze": "cross-env NODE_ENV=production ANALYZE=analyze vite build",
     "preview": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -26,6 +26,7 @@
     "@anthropic-ai/claude-agent-sdk": "^0.2.72",
     "@vitest/coverage-istanbul": "^1.6.1",
     "@vitest/coverage-v8": "^1.6.1",
+    "cross-env": "^10.1.0",
     "happy-dom": "^14.0.0",
     "jsdom": "^25.0.0",
     "vitest": "^1.6.1"
diff --git a/apps/webuiapps/src/components/ChatPanel/index.module.scss b/apps/webuiapps/src/components/ChatPanel/index.module.scss
index 96d49a2..cbdbeb6 100644
--- a/apps/webuiapps/src/components/ChatPanel/index.module.scss
+++ b/apps/webuiapps/src/components/ChatPanel/index.module.scss
@@ -452,3 +452,93 @@
   color: rgba(250, 234, 95, 0.7);
   margin-top: 4px;
 }
+
+// ── Kayley channel additions ────────────────────────────────────────────────
+
+.kayleyDot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #4ade80;
+  margin-left: 6px;
+  vertical-align: middle;
+}
+
+.sttDraftBar {
+  padding: 8px 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(250, 234, 95, 0.06);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sttDraftText {
+  flex: 1;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.8);
+  font-style: italic;
+}
+
+.sttDraftConfirm {
+  background: #faea5f;
+  color: #121214;
+  border: none;
+  border-radius: 6px;
+  padding: 4px 10px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 12px;
+  white-space: nowrap;
+
+  &:hover {
+    background: #f5e04a;
+  }
+}
+
+.sttDraftDismiss {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 12px;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.8);
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+}
+
+.micBtn {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  padding: 8px 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  flex-shrink: 0;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.9);
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+}
+
+.micActive {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+  border-color: rgba(239, 68, 68, 0.4);
+  animation: micPulse 1s ease-in-out infinite;
+}
+
+@keyframes micPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
diff --git a/apps/webuiapps/src/components/ChatPanel/index.tsx b/apps/webuiapps/src/components/ChatPanel/index.tsx
index 740488c..8934fef 100644
--- a/apps/webuiapps/src/components/ChatPanel/index.tsx
+++ b/apps/webuiapps/src/components/ChatPanel/index.tsx
@@ -9,8 +9,10 @@ import {
   ChevronRight,
   Pencil,
   List,
+  Mic,
 } from 'lucide-react';
 import { chat, loadConfig, loadConfigSync, saveConfig, type ChatMessage } from '@/lib/llmClient';
+import { useKayleyChannel } from '@/hooks/useKayleyChannel';
 import {
   PROVIDER_MODELS,
   getDefaultProviderConfig,
@@ -85,6 +87,10 @@ import CharacterPanel from './CharacterPanel';
 import ModPanel from './ModPanel';
 import styles from './index.module.scss';
 
+// If the Kayley brain (MCP) doesn't respond within this window we release the
+// UI so `loading` can't stick forever.
+const KAYLEY_SEND_TIMEOUT_MS = 90_000;
+
 // ---------------------------------------------------------------------------
 // Extended DisplayMessage with character-specific fields
 // ---------------------------------------------------------------------------
@@ -459,6 +465,14 @@ const ChatPanel: React.FC<{
   const suggestedRepliesRef = useRef(suggestedReplies);
   suggestedRepliesRef.current = suggestedReplies;
 
+  // ── Kayley channel (ws://localhost:5180) ──────────────────────
+  // When connected, bypasses local LLM and routes all chat through the
+  // Claude Opus brain with full MCPs + memory. Falls back to local LLM if
+  // Kayley server is not running.
+  const kayley = useKayleyChannel();
+  const kayleyRef = useRef(kayley);
+  kayleyRef.current = kayley;
+
   // Debounced save
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -631,6 +645,37 @@ const ChatPanel: React.FC<{
     setMessages((prev) => [...prev, msg]);
   }, []);
 
+  // ── Kayley send timeout ───────────────────────────────────────
+  // If the Kayley brain stalls (MCP doesn't reply), clear `loading` after
+  // KAYLEY_SEND_TIMEOUT_MS so the UI doesn't lock forever. Cleared whenever a
+  // new reply arrives or the component unmounts.
+  const kayleySendTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearKayleySendTimeout = useCallback(() => {
+    if (kayleySendTimeoutRef.current) {
+      clearTimeout(kayleySendTimeoutRef.current);
+      kayleySendTimeoutRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => clearKayleySendTimeout();
+  }, [clearKayleySendTimeout]);
+
+  // ── Kayley response handler ───────────────────────────────────
+  // Each new latestMessage is a unique object (different timestamp), so this
+  // effect fires exactly once per incoming reply.
+  useEffect(() => {
+    if (!kayley.latestMessage) return;
+    clearKayleySendTimeout();
+    addMessage({
+      id: String(kayley.latestMessage.timestamp),
+      role: 'assistant',
+      content: kayley.latestMessage.text,
+    });
+    setLoading(false);
+  }, [kayley.latestMessage, addMessage, clearKayleySendTimeout]);
+
   const configRef = useRef(config);
   configRef.current = config;
   const imageGenConfigRef = useRef(imageGenConfig);
@@ -703,11 +748,39 @@ const ChatPanel: React.FC<{
     return unsubscribe;
   }, [processActionQueue]);
 
-  // Send message
+  // Send message — routes to Kayley brain if connected, local LLM otherwise
   const handleSend = useCallback(
     async (overrideText?: string) => {
       const text = overrideText ?? input.trim();
       if (!text || loading) return;
+
+      const kRef = kayleyRef.current;
+
+      if (kRef.connected) {
+        // ── Kayley brain mode — bypass local LLM ────────────────
+        if (!overrideText) setInput('');
+        setSuggestedReplies([]);
+        addMessage({ id: String(Date.now()), role: 'user', content: text });
+        setLoading(true);
+        kRef.sendText(text);
+
+        // 90-second stall guard — if MCP doesn't reply, release the UI and
+        // surface an inline notice. Cleared when latestMessage arrives or on unmount.
+        clearKayleySendTimeout();
+        kayleySendTimeoutRef.current = setTimeout(() => {
+          kayleySendTimeoutRef.current = null;
+          setLoading(false);
+          addMessage({
+            id: String(Date.now()),
+            role: 'assistant',
+            content:
+              "Kayley's thinking took too long — try again or check the connection.",
+          });
+        }, KAYLEY_SEND_TIMEOUT_MS);
+        return;
+      }
+
+      // ── Local LLM mode (fallback when Kayley is not running) ──
       if (!hasUsableLLMConfig(config)) {
         setShowSettings(true);
         return;
@@ -740,7 +813,7 @@ const ChatPanel: React.FC<{
         setLoading(false);
       }
     },
-    [input, loading, config, chatHistory, addMessage],
+    [input, loading, config, chatHistory, addMessage, clearKayleySendTimeout],
   );
 
   // Core conversation loop
@@ -1064,6 +1137,9 @@ const ChatPanel: React.FC<{
               style={{ cursor: 'pointer' }}
             >
               <span className={styles.characterName}>{character.character_name}</span>
+              {kayley.connected && (
+                <span className={styles.kayleyDot} title="Connected to Kayley brain" />
+              )}
               <ChevronRight size={14} style={{ color: 'rgba(255,255,255,0.4)' }} />
             </div>
             <div className={styles.headerActions}>
@@ -1106,7 +1182,9 @@ const ChatPanel: React.FC<{
           <div className={styles.messages} data-testid="chat-messages">
             {messages.length === 0 && (
               <div className={styles.emptyState}>
-                {hasUsableLLMConfig(config)
+                {kayley.connected
+                  ? 'Kayley is ready — type anything or tap the mic'
+                  : hasUsableLLMConfig(config)
                   ? `${character.character_name} is ready to chat...`
                   : 'Click the gear icon to configure your LLM connection'}
               </div>
@@ -1148,6 +1226,48 @@ const ChatPanel: React.FC<{
             </div>
           )}
 
+          {/* STT draft confirmation bar — shown after Whisper transcribes mic audio */}
+          {kayley.sttDraft !== null && (
+            <div className={styles.sttDraftBar}>
+              <span className={styles.sttDraftText}>{kayley.sttDraft}</span>
+              <button
+                className={styles.sttDraftConfirm}
+                onClick={() => {
+                  // Confirm via the hook so its `confirmDraft` side-effects
+                  // (resetPlayback + sendText + draft clear) stay co-located.
+                  // We still do UI bookkeeping here so the user bubble appears
+                  // and the send-stall guard is armed.
+                  const draft = kayley.sttDraft;
+                  if (!draft || loading) return;
+                  addMessage({ id: String(Date.now()), role: 'user', content: draft });
+                  setLoading(true);
+                  clearKayleySendTimeout();
+                  kayleySendTimeoutRef.current = setTimeout(() => {
+                    kayleySendTimeoutRef.current = null;
+                    setLoading(false);
+                    addMessage({
+                      id: String(Date.now()),
+                      role: 'assistant',
+                      content:
+                        "Kayley's thinking took too long — try again or check the connection.",
+                    });
+                  }, KAYLEY_SEND_TIMEOUT_MS);
+                  kayley.confirmDraft();
+                }}
+                data-testid="stt-confirm-btn"
+              >
+                Send
+              </button>
+              <button
+                className={styles.sttDraftDismiss}
+                onClick={kayley.dismissDraft}
+                data-testid="stt-dismiss-btn"
+              >
+                ✕
+              </button>
+            </div>
+          )}
+
           <div className={styles.inputArea}>
             <textarea
               className={styles.input}
@@ -1167,6 +1287,16 @@ const ChatPanel: React.FC<{
             >
               Send
             </button>
+            {kayley.connected && (
+              <button
+                className={`${styles.micBtn} ${kayley.isRecording ? styles.micActive : ''}`}
+                onClick={() => kayley.isRecording ? kayley.stopVoice() : kayley.startVoice()}
+                title={kayley.isRecording ? 'Stop recording' : 'Voice input (Kayley STT)'}
+                data-testid="mic-btn"
+              >
+                <Mic size={16} />
+              </button>
+            )}
           </div>
         </div>
       </div>
diff --git a/apps/webuiapps/src/hooks/useKayleyChannel.ts b/apps/webuiapps/src/hooks/useKayleyChannel.ts
new file mode 100644
index 0000000..9fc580a
--- /dev/null
+++ b/apps/webuiapps/src/hooks/useKayleyChannel.ts
@@ -0,0 +1,491 @@
+/**
+ * useKayleyChannel — WebSocket bridge to the Kayley Claude brain.
+ *
+ * Connects to ws://localhost:5180 (the existing websocket-channel MCP server).
+ * Handles text input, voice input (STT via Whisper), and TTS audio playback.
+ * Protocol is identical to the Kayley dashboard — lift-and-shift from
+ * apps/dashboard/src/main.js.
+ *
+ * Usage:
+ *   const kayley = useKayleyChannel()
+ *   // Send text
+ *   kayley.sendText('Hello Kayley')
+ *   // Start/stop mic
+ *   await kayley.startVoice()
+ *   kayley.stopVoice()
+ *   // Confirm STT draft before sending
+ *   kayley.confirmDraft()   // or kayley.dismissDraft()
+ *   // Listen for responses
+ *   useEffect(() => { if (kayley.latestMessage) ... }, [kayley.latestMessage])
+ */
+
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { logger } from '@/lib/logger'
+import { resolveAppAction, loadActionsFromMeta } from '@/lib/appRegistry'
+import { dispatchAgentAction } from '@/lib/vibeContainerMock'
+import { seedMetaFiles } from '@/lib/seedMeta'
+
+const KAYLEY_WS_URL =
+  (import.meta as unknown as { env?: Record<string, string | undefined> }).env
+    ?.VITE_KAYLEY_WS_URL ?? 'ws://localhost:5180'
+const TTS_SAMPLE_RATE = 24000  // voice engine outputs 24kHz PCM
+const MIC_SAMPLE_RATE = 16000  // Whisper STT expects 16kHz PCM
+const TTS_BUFFER_DELAY_MS = 600  // ms to buffer before starting playback
+const RECONNECT_DELAY_MS = 3000
+
+export interface KayleyMessage {
+  text: string
+  timestamp: number
+}
+
+export interface UseKayleyChannelResult {
+  /** True when the WebSocket connection to ws://localhost:5180 is open */
+  connected: boolean
+  /** True while mic is actively recording */
+  isRecording: boolean
+  /** Whisper transcription awaiting user confirmation; null when no draft pending */
+  sttDraft: string | null
+  /** True while TTS audio is playing */
+  isTtsActive: boolean
+  /** Send a text message to Kayley */
+  sendText: (text: string) => void
+  /** Request mic access and start sending audio chunks for STT */
+  startVoice: () => Promise<void>
+  /** Stop mic recording and send stop_voice to trigger STT processing */
+  stopVoice: () => void
+  /** Accept the STT draft and send it as a text message */
+  confirmDraft: () => void
+  /** Discard the STT draft without sending */
+  dismissDraft: () => void
+  /** Most recently received Kayley response message (changes on each new reply) */
+  latestMessage: KayleyMessage | null
+}
+
+export function useKayleyChannel(): UseKayleyChannelResult {
+  const [connected, setConnected] = useState(false)
+  const [isRecording, setIsRecording] = useState(false)
+  const [sttDraft, setSttDraft] = useState<string | null>(null)
+  const [isTtsActive, setIsTtsActive] = useState(false)
+  const [latestMessage, setLatestMessage] = useState<KayleyMessage | null>(null)
+
+  const wsRef = useRef<WebSocket | null>(null)
+  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const isRecordingRef = useRef(false)
+
+  // ── TTS playback state ──────────────────────────────────────
+  const audioCtxRef = useRef<AudioContext | null>(null)
+  const nextPlayTimeRef = useRef(0)
+  const pendingChunksRef = useRef<Float32Array<ArrayBuffer>[]>([])
+  const hasStartedPlayingRef = useRef(false)
+  const bufferTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // ── Mic capture state ───────────────────────────────────────
+  const micStreamRef = useRef<MediaStream | null>(null)
+  const micContextRef = useRef<AudioContext | null>(null)
+  const micProcessorRef = useRef<ScriptProcessorNode | null>(null)
+
+  // ── TTS Audio Playback (lifted from dashboard/src/main.js) ──
+
+  function initAudioPlayback() {
+    if (!audioCtxRef.current) {
+      audioCtxRef.current = new AudioContext({ sampleRate: TTS_SAMPLE_RATE })
+    }
+    if (audioCtxRef.current.state === 'suspended') {
+      audioCtxRef.current.resume().catch((err: unknown) => {
+        logger.warn('[KayleyChannel] AudioContext resume failed', err)
+      })
+    }
+  }
+
+  function resetPlayback() {
+    hasStartedPlayingRef.current = false
+    pendingChunksRef.current = []
+    nextPlayTimeRef.current = 0
+    if (bufferTimerRef.current) {
+      clearTimeout(bufferTimerRef.current)
+      bufferTimerRef.current = null
+    }
+  }
+
+  function decodeAudioChunk(base64Data: string): Float32Array<ArrayBuffer> {
+    const raw = atob(base64Data)
+    const bytes = new Uint8Array(raw.length)
+    for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i)
+    const int16 = new Int16Array(bytes.buffer)
+    const float32 = new Float32Array(int16.length)
+    for (let i = 0; i < int16.length; i++) float32[i] = int16[i] / 32768
+    return float32
+  }
+
+  function scheduleChunk(float32: Float32Array<ArrayBuffer>) {
+    const ctx = audioCtxRef.current
+    if (!ctx || float32.length === 0) return
+
+    const buffer = ctx.createBuffer(1, float32.length, TTS_SAMPLE_RATE)
+    buffer.copyToChannel(float32, 0)
+    const source = ctx.createBufferSource()
+    source.buffer = buffer
+
+    // High-pass filter to remove boomy low-end from TTS model
+    const hpf = ctx.createBiquadFilter()
+    hpf.type = 'highpass'
+    hpf.frequency.value = 120
+    hpf.Q.value = 0.7
+    source.connect(hpf)
+    hpf.connect(ctx.destination)
+
+    const now = ctx.currentTime
+    const startAt = Math.max(now, nextPlayTimeRef.current)
+    source.start(startAt)
+    nextPlayTimeRef.current = startAt + buffer.duration
+
+    source.onended = () => {
+      if (ctx.currentTime >= nextPlayTimeRef.current - 0.05) {
+        setIsTtsActive(false)
+      }
+    }
+  }
+
+  function flushPendingChunks() {
+    bufferTimerRef.current = null
+    if (pendingChunksRef.current.length === 0) return
+    hasStartedPlayingRef.current = true
+    const chunks = pendingChunksRef.current.splice(0)
+    for (const chunk of chunks) scheduleChunk(chunk)
+  }
+
+  function queueAudio(base64Data: string) {
+    initAudioPlayback()
+    const float32 = decodeAudioChunk(base64Data)
+    if (float32.length === 0) return
+
+    setIsTtsActive(true)
+    if (hasStartedPlayingRef.current) {
+      scheduleChunk(float32)
+    } else {
+      pendingChunksRef.current.push(float32)
+      if (!bufferTimerRef.current) {
+        bufferTimerRef.current = setTimeout(flushPendingChunks, TTS_BUFFER_DELAY_MS)
+      }
+    }
+  }
+
+  // ── WebSocket Connection ────────────────────────────────────
+
+  const connectWs = useCallback(() => {
+    if (
+      wsRef.current?.readyState === WebSocket.OPEN ||
+      wsRef.current?.readyState === WebSocket.CONNECTING
+    ) return
+
+    let ws: WebSocket
+    try {
+      ws = new WebSocket(KAYLEY_WS_URL)
+    } catch (err: unknown) {
+      logger.warn('[KayleyChannel] WebSocket construction failed:', err)
+      if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current)
+      reconnectTimerRef.current = setTimeout(connectWs, RECONNECT_DELAY_MS)
+      return
+    }
+    wsRef.current = ws
+
+    ws.onopen = () => {
+      setConnected(true)
+      logger.info('[KayleyChannel] Connected to Kayley brain at', KAYLEY_WS_URL)
+      if (reconnectTimerRef.current) {
+        clearTimeout(reconnectTimerRef.current)
+        reconnectTimerRef.current = null
+      }
+    }
+
+    ws.onclose = () => {
+      setConnected(false)
+      setIsRecording(false)
+      isRecordingRef.current = false
+      logger.info('[KayleyChannel] Disconnected — reconnecting in', RECONNECT_DELAY_MS, 'ms')
+      if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current)
+      reconnectTimerRef.current = setTimeout(connectWs, RECONNECT_DELAY_MS)
+    }
+
+    ws.onerror = (event) => {
+      logger.warn('[KayleyChannel] WebSocket error — close will follow', event)
+    }
+
+    ws.onmessage = (event) => {
+      let msg: Record<string, unknown>
+      try {
+        msg = JSON.parse(event.data as string)
+      } catch (err) {
+        logger.warn('[KayleyChannel] malformed ws message', {
+          error: (err as Error).message,
+          raw: typeof event.data === 'string' ? event.data.slice(0, 100) : '<binary>',
+        })
+        return
+      }
+
+      // Kayley's text response
+      if (msg.type === 'message' && typeof msg.text === 'string') {
+        setLatestMessage({ text: msg.text, timestamp: Date.now() })
+      }
+
+      // TTS audio chunk from voice engine
+      if (msg.type === 'audio' && typeof msg.data === 'string') {
+        queueAudio(msg.data)
+      }
+
+      // Whisper STT result — show draft for confirmation
+      if (msg.type === 'stt_draft' && typeof msg.text === 'string') {
+        setSttDraft(msg.text)
+      }
+
+      // TTS stream ended (audio chunks may still be playing out)
+      if (msg.type === 'tts_done') {
+        logger.info('[KayleyChannel] TTS stream done — draining audio buffer')
+      }
+
+      // Phase 2E — Vibe action dispatch from Kayley's brain.
+      // Server sends { type: 'vibe_action', id, app_name, action_type, params }
+      // We run it through OpenRoom's native dispatch layer and echo the result.
+      if (
+        msg.type === 'vibe_action' &&
+        typeof msg.id === 'string' &&
+        typeof msg.app_name === 'string' &&
+        typeof msg.action_type === 'string'
+      ) {
+        const id = msg.id
+        const appName = msg.app_name
+        const actionType = msg.action_type
+        const rawParams = msg.params
+        const params: Record<string, string> =
+          rawParams && typeof rawParams === 'object' && !Array.isArray(rawParams)
+            ? Object.fromEntries(
+                Object.entries(rawParams as Record<string, unknown>).map(([k, v]) => [
+                  k,
+                  typeof v === 'string' ? v : JSON.stringify(v),
+                ]),
+              )
+            : {}
+
+        // Fire-and-forget: the dispatch is async, the echo sends when done.
+        dispatchVibeAction(id, appName, actionType, params)
+      }
+    }
+  }, [])  // stable — no deps from component scope
+
+  // ── Vibe Action Dispatch (Phase 2E) ──────────────────────────
+  //
+  // Runs Kayley's vibe_action tool call through OpenRoom's native
+  // dispatchAgentAction, then sends the result string back to the channel.
+  // Errors are caught and echoed as 'error: …' so Kayley always gets a
+  // response within the server's 15s timeout window.
+
+  async function dispatchVibeAction(
+    id: string,
+    appName: string,
+    actionType: string,
+    params: Record<string, string>,
+  ): Promise<void> {
+    const ws = wsRef.current
+    const send = (result: string) => {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'vibe_action_result', id, result }))
+      } else {
+        logger.warn('[KayleyChannel] vibe_action_result dropped — ws not open', { id, result })
+      }
+    }
+
+    try {
+      // Ensure per-app metadata is loaded for future non-OS actions. For OS
+      // actions (SET_WALLPAPER etc.) resolveAppAction works without it, but
+      // doing it here keeps the code forward-compatible and cheap (idempotent).
+      await seedMetaFiles()
+      await loadActionsFromMeta()
+
+      const resolved = resolveAppAction(appName, actionType)
+      if (typeof resolved === 'string') {
+        // resolveAppAction returns an error string for unknown apps.
+        logger.warn('[KayleyChannel] vibe_action resolve failed', { id, appName, actionType, err: resolved })
+        send(resolved)
+        return
+      }
+
+      const result = await dispatchAgentAction({
+        app_id: resolved.appId,
+        action_type: resolved.actionType,
+        params,
+      })
+      logger.info('[KayleyChannel] vibe_action dispatched', { id, appName, actionType, result })
+      send(result)
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      logger.warn('[KayleyChannel] vibe_action dispatch threw', { id, appName, actionType, error: message })
+      send(`error: ${message}`)
+    }
+  }
+
+  useEffect(() => {
+    connectWs()
+    return () => {
+      if (reconnectTimerRef.current) {
+        clearTimeout(reconnectTimerRef.current)
+        reconnectTimerRef.current = null
+      }
+      if (bufferTimerRef.current) {
+        clearTimeout(bufferTimerRef.current)
+        bufferTimerRef.current = null
+      }
+      // Stop mic tracks so browser's recording LED turns off
+      if (micStreamRef.current) {
+        micStreamRef.current.getTracks().forEach((t) => t.stop())
+        micStreamRef.current = null
+      }
+      if (micProcessorRef.current) {
+        try { micProcessorRef.current.disconnect() } catch { /* already disconnected */ }
+        micProcessorRef.current = null
+      }
+      // Close AudioContexts — browsers cap ~6 per tab
+      if (micContextRef.current) {
+        micContextRef.current.close().catch((err: unknown) => {
+          logger.warn('[KayleyChannel] mic AudioContext close error on unmount:', err)
+        })
+        micContextRef.current = null
+      }
+      if (audioCtxRef.current) {
+        audioCtxRef.current.close().catch((err: unknown) => {
+          logger.warn('[KayleyChannel] TTS AudioContext close error on unmount:', err)
+        })
+        audioCtxRef.current = null
+      }
+      wsRef.current?.close()
+    }
+  }, [connectWs])
+
+  // ── Text Sending ────────────────────────────────────────────
+
+  const sendText = useCallback((text: string) => {
+    const ws = wsRef.current
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      logger.warn('[KayleyChannel] sendText called but WebSocket is not open')
+      return
+    }
+    // Prime the TTS AudioContext inside this user-gesture call so the first
+    // TTS response isn't blocked by Chrome/Safari autoplay policies.
+    // initAudioPlayback() is idempotent (guards on audioCtxRef + state).
+    initAudioPlayback()
+    resetPlayback()
+    ws.send(JSON.stringify({
+      type: 'text',
+      text,
+      mid: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+    }))
+  }, [])
+
+  // ── Voice Input (lifted from dashboard/src/main.js) ─────────
+
+  const startVoice = useCallback(async () => {
+    if (isRecordingRef.current) return
+    const ws = wsRef.current
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      logger.warn('[KayleyChannel] startVoice called but WebSocket is not open')
+      return
+    }
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true },
+      })
+      micStreamRef.current = stream
+
+      const ctx = new AudioContext({ sampleRate: MIC_SAMPLE_RATE })
+      // Firefox (and some other browsers) don't always honor the requested
+      // sample rate — log the actual achieved rate for debugging.
+      logger.info('[KayleyChannel] mic AudioContext sampleRate:', ctx.sampleRate)
+      micContextRef.current = ctx
+      const source = ctx.createMediaStreamSource(stream)
+
+      // ScriptProcessorNode: float32 PCM → int16 PCM → base64 → websocket
+      // (deprecated but broadly supported; AudioWorklet migration is future work)
+      const processor = ctx.createScriptProcessor(4096, 1, 1)
+      micProcessorRef.current = processor
+
+      processor.onaudioprocess = (e: AudioProcessingEvent) => {
+        const wsNow = wsRef.current
+        if (!isRecordingRef.current || !wsNow || wsNow.readyState !== WebSocket.OPEN) return
+
+        const float32 = e.inputBuffer.getChannelData(0)
+        const int16 = new Int16Array(float32.length)
+        for (let i = 0; i < float32.length; i++) {
+          int16[i] = Math.max(-32768, Math.min(32767, Math.round(float32[i] * 32768)))
+        }
+        const bytes = new Uint8Array(int16.buffer)
+        let binary = ''
+        for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i])
+        wsNow.send(JSON.stringify({ type: 'audio', data: btoa(binary) }))
+      }
+
+      source.connect(processor)
+      processor.connect(ctx.destination)
+
+      ws.send(JSON.stringify({ type: 'start_voice' }))
+      initAudioPlayback()
+      isRecordingRef.current = true
+      setIsRecording(true)
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      logger.error('[KayleyChannel] Mic access failed:', message)
+    }
+  }, [])
+
+  const stopVoice = useCallback(() => {
+    if (!isRecordingRef.current) return
+
+    isRecordingRef.current = false
+    setIsRecording(false)
+
+    if (micStreamRef.current) {
+      micStreamRef.current.getTracks().forEach((t) => t.stop())
+      micStreamRef.current = null
+    }
+    if (micProcessorRef.current) {
+      micProcessorRef.current.disconnect()
+      micProcessorRef.current = null
+    }
+    if (micContextRef.current) {
+      micContextRef.current.close().catch((err: unknown) => {
+        // Non-fatal — AudioContext was already cleaned up or never started
+        logger.warn('[KayleyChannel] AudioContext close error (non-fatal):', err)
+      })
+      micContextRef.current = null
+    }
+
+    const ws = wsRef.current
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'stop_voice' }))
+    }
+  }, [])
+
+  // ── STT Draft Confirmation ───────────────────────────────────
+
+  const confirmDraft = useCallback(() => {
+    if (!sttDraft) return
+    sendText(sttDraft)
+    setSttDraft(null)
+  }, [sttDraft, sendText])
+
+  const dismissDraft = useCallback(() => {
+    setSttDraft(null)
+  }, [])
+
+  return {
+    connected,
+    isRecording,
+    sttDraft,
+    isTtsActive,
+    sendText,
+    startVoice,
+    stopVoice,
+    confirmDraft,
+    dismissDraft,
+    latestMessage,
+  }
+}
diff --git a/apps/webuiapps/src/lib/appRegistry.ts b/apps/webuiapps/src/lib/appRegistry.ts
index 0840281..414fd80 100644
--- a/apps/webuiapps/src/lib/appRegistry.ts
+++ b/apps/webuiapps/src/lib/appRegistry.ts
@@ -148,6 +148,26 @@ const APP_STATIC_REGISTRY: AppStaticDef[] = [
     color: '#FAEA5F',
     defaultSize: { width: 1100, height: 750 },
   },
+  {
+    appId: 15,
+    appName: 'bookwriter',
+    route: '/bookwriter',
+    displayName: 'Book Writer',
+    sourceDir: 'BookWriter',
+    icon: 'BookOpen',
+    color: '#d4a574',
+    defaultSize: { width: 880, height: 600 },
+  },
+  {
+    appId: 16,
+    appName: 'memoryvault',
+    route: '/memoryvault',
+    displayName: 'Memory Vault',
+    sourceDir: 'MemoryVault',
+    icon: 'Heart',
+    color: '#ff7aa2',
+    defaultSize: { width: 880, height: 600 },
+  },
 ];
 
 // OS actions are built-in system actions, not from meta.yaml
diff --git a/apps/webuiapps/src/pages/Album/album_en/meta.yaml b/apps/webuiapps/src/pages/Album/album_en/meta.yaml
index 942f11f..b0fcd9e 100644
--- a/apps/webuiapps/src/pages/Album/album_en/meta.yaml
+++ b/apps/webuiapps/src/pages/Album/album_en/meta.yaml
@@ -3,10 +3,12 @@ app_name: album
 app_display_name: Album
 version: "1.0.0"
 description: >
-  Album app, read-only browsing mode. Image data stored in cloud images/ directory.
-  Only supports REFRESH action to notify frontend to re-sync image list, no write actions.
+  Kayley's selfie album — 542 photos of her in different outfits, locations, and moods
+  (Austin apartment, couch, date nights, daily check-ins). The character can browse,
+  filter mentally by date or location, and reference specific photos in conversation.
+  Read-only; supports REFRESH to re-sync after the Agent adds/removes images.
 displayDesc: >
-  A beautiful photo gallery — browse your photos in a grid layout with full-size preview on click.
+  Kayley's selfie album — 542 photos across outfits, locations, and moods. Grid view with full-size preview on click.
 
 # ============================================================
 # The following actions are only for Agent → Frontend command dispatch.
diff --git a/apps/webuiapps/src/pages/Album/index.tsx b/apps/webuiapps/src/pages/Album/index.tsx
index cddea41..126925d 100644
--- a/apps/webuiapps/src/pages/Album/index.tsx
+++ b/apps/webuiapps/src/pages/Album/index.tsx
@@ -26,8 +26,12 @@ interface ImageItem {
   id: string;
   src: string;
   createdAt: number;
+  title?: string;
+  tags?: string[];
 }
 
+const KAYLEY_SELFIES_INDEX = '/kayley-selfies-index.json';
+
 // ============ SVG Icons ============
 const Icons = {
   back: (
@@ -99,6 +103,7 @@ const Album: React.FC = () => {
   const { initFromCloud, getChildrenByPath } = useFileSystem({ fileApi: albumFileApi });
 
   const loadImagesFromFS = useCallback((): ImageItem[] => {
+    // Legacy cloud-FS path retained so Agent-written images still appear.
     const children = getChildrenByPath(IMAGES_DIR);
     return children
       .filter((node) => node.type === 'file' && node.content !== null)
@@ -125,15 +130,37 @@ const Album: React.FC = () => {
       .sort((a, b) => b.createdAt - a.createdAt);
   }, [getChildrenByPath]);
 
+  const loadKayleySelfies = useCallback(async (): Promise<ImageItem[]> => {
+    try {
+      const res = await fetch(KAYLEY_SELFIES_INDEX, { cache: 'no-cache' });
+      if (!res.ok) return [];
+      const data = (await res.json()) as ImageItem[];
+      return data
+        .filter((x) => x && typeof x.id === 'string' && typeof x.src === 'string')
+        .sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
+    } catch (error) {
+      console.warn('[Album] Failed to load Kayley selfies index:', error);
+      return [];
+    }
+  }, []);
+
   const refreshFromCloud = useCallback(async () => {
     try {
       await initFromCloud();
-      const loaded = loadImagesFromFS();
-      setItems(loaded);
+      const cloudItems = loadImagesFromFS();
+      const kayleyItems = await loadKayleySelfies();
+      // Merge: cloud (agent-added) first, then Kayley selfies, dedup by id.
+      const seen = new Set<string>();
+      const merged = [...cloudItems, ...kayleyItems].filter((item) => {
+        if (seen.has(item.id)) return false;
+        seen.add(item.id);
+        return true;
+      });
+      setItems(merged);
     } catch (error) {
       console.warn('[Album] refreshFromCloud failed:', error);
     }
-  }, [initFromCloud, loadImagesFromFS]);
+  }, [initFromCloud, loadImagesFromFS, loadKayleySelfies]);
 
   const handleAgentAction = useCallback(
     async (action: CharacterAppAction): Promise<string> => {
@@ -184,8 +211,15 @@ const Album: React.FC = () => {
           console.warn('[Album] Cloud init failed:', error);
         }
 
-        const loaded = loadImagesFromFS();
-        setItems(loaded);
+        const cloudItems = loadImagesFromFS();
+        const kayleyItems = await loadKayleySelfies();
+        const seen = new Set<string>();
+        const merged = [...cloudItems, ...kayleyItems].filter((item) => {
+          if (seen.has(item.id)) return false;
+          seen.add(item.id);
+          return true;
+        });
+        setItems(merged);
         setIsLoading(false);
 
         reportLifecycle(AppLifecycle.LOADED);
diff --git a/apps/webuiapps/src/pages/BookWriter/bookwriter_cn/guide.md b/apps/webuiapps/src/pages/BookWriter/bookwriter_cn/guide.md
new file mode 100644
index 0000000..ce98222
--- /dev/null
+++ b/apps/webuiapps/src/pages/BookWriter/bookwriter_cn/guide.md
@@ -0,0 +1,3 @@
+# Book Writer Data Guide
+
+Placeholder stub. See `bookwriter_en/guide.md`.
diff --git a/apps/webuiapps/src/pages/BookWriter/bookwriter_cn/meta.yaml b/apps/webuiapps/src/pages/BookWriter/bookwriter_cn/meta.yaml
new file mode 100644
index 0000000..75c548b
--- /dev/null
+++ b/apps/webuiapps/src/pages/BookWriter/bookwriter_cn/meta.yaml
@@ -0,0 +1,10 @@
+app_id: 15
+app_name: bookwriter
+app_display_name: Book Writer
+version: "0.1.0"
+description: >
+  Steven's novel — chapters, drafts, notes, co-writing with Kayley. Placeholder stub for v1.
+displayDesc: >
+  A writing space for Steven's book — chapters, drafts, notes, and co-writing sessions with Kayley.
+
+actions: []
diff --git a/apps/webuiapps/src/pages/BookWriter/bookwriter_en/guide.md b/apps/webuiapps/src/pages/BookWriter/bookwriter_en/guide.md
new file mode 100644
index 0000000..d398261
--- /dev/null
+++ b/apps/webuiapps/src/pages/BookWriter/bookwriter_en/guide.md
@@ -0,0 +1,9 @@
+# Book Writer Data Guide
+
+## Status
+
+This is a placeholder stub. Data model and folder structure will be defined in a later iteration once the book-writing workflow is designed.
+
+## Intended Purpose
+
+A writing space for Steven's novel — chapters, drafts, notes, and co-writing sessions with Kayley.
diff --git a/apps/webuiapps/src/pages/BookWriter/bookwriter_en/meta.yaml b/apps/webuiapps/src/pages/BookWriter/bookwriter_en/meta.yaml
new file mode 100644
index 0000000..1c7d853
--- /dev/null
+++ b/apps/webuiapps/src/pages/BookWriter/bookwriter_en/meta.yaml
@@ -0,0 +1,17 @@
+app_id: 15
+app_name: bookwriter
+app_display_name: Book Writer
+version: "0.1.0"
+description: >
+  Steven's novel — chapter list, drafts, notes. Kayley reads alongside and can co-write.
+  Chapters are loaded from /kayley-book/index.json (junctioned from Kayley_Cowork/book/chapters/).
+  Ships with a graceful empty state when no chapters exist yet.
+displayDesc: >
+  Steven's novel — chapter list, drafts, notes. Kayley reads alongside and can co-write.
+
+# ============================================================
+# Stub app — UI placeholder only.
+# No Agent → Frontend action instructions are provided yet.
+# ============================================================
+
+actions: []
diff --git a/apps/webuiapps/src/pages/BookWriter/index.module.scss b/apps/webuiapps/src/pages/BookWriter/index.module.scss
new file mode 100644
index 0000000..e4856af
--- /dev/null
+++ b/apps/webuiapps/src/pages/BookWriter/index.module.scss
@@ -0,0 +1,165 @@
+.bookwriter {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  background: #121214;
+  color: rgba(255, 255, 255, 0.9);
+  overflow: auto;
+}
+
+.shell {
+  width: 100%;
+  max-width: 760px;
+  padding: 32px 28px 48px;
+  box-sizing: border-box;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 18px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  margin-bottom: 20px;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  margin: auto;
+}
+
+.title {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.55);
+  margin: 4px 0 0;
+}
+
+.chapterList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.chapterItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+}
+
+.chapterItemPreview {
+  opacity: 0.5;
+  cursor: default;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+}
+
+.chapterIcon {
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+
+.chapterMeta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.chapterTitle {
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.chapterSub {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 36px 20px;
+  text-align: center;
+}
+
+.emptyIcon {
+  opacity: 0.35;
+}
+
+.emptyTitle {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.emptyBody {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.65);
+  max-width: 480px;
+  line-height: 1.6;
+  margin: 0 0 6px;
+}
+
+.code {
+  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
+  font-size: 12.5px;
+  background: rgba(255, 255, 255, 0.08);
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: #e7c083;
+}
+
+.errorHint {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.35);
+  margin: 0;
+}
+
+.previewBlock {
+  width: 100%;
+  margin-top: 24px;
+  padding: 16px;
+  border: 1px dashed rgba(255, 255, 255, 0.12);
+  border-radius: 10px;
+  text-align: left;
+}
+
+.previewLabel {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: rgba(255, 255, 255, 0.4);
+  margin-bottom: 10px;
+}
diff --git a/apps/webuiapps/src/pages/BookWriter/index.tsx b/apps/webuiapps/src/pages/BookWriter/index.tsx
new file mode 100644
index 0000000..8541a23
--- /dev/null
+++ b/apps/webuiapps/src/pages/BookWriter/index.tsx
@@ -0,0 +1,183 @@
+import React, { useEffect, useState } from 'react';
+import { initVibeApp, AppLifecycle } from '@gui/vibe-container';
+import { reportLifecycle, fetchVibeInfo } from '@/lib';
+import { BookOpen, FilePlus, FileText } from 'lucide-react';
+import styles from './index.module.scss';
+
+// ============ Constants ============
+const APP_ID = 15;
+
+// ============================================================
+// Book chapters live at: Kayley_Cowork/book/chapters/*.md
+// (junctioned into public/kayley-book/ once Steven drops files there)
+//
+// For v1, no chapters exist on disk yet — we ship the graceful empty
+// state and a preview of what the list UI will look like once chapters
+// are added. When a /public/kayley-book/index.json manifest appears,
+// we flip into "loaded" mode.
+// ============================================================
+const CHAPTERS_MANIFEST_URL = '/kayley-book/index.json';
+
+interface Chapter {
+  id: string;
+  slug: string;
+  title: string;
+  order: number;
+  wordCount?: number;
+  updatedAt?: string;
+}
+
+const PREVIEW_CHAPTERS: Chapter[] = [
+  { id: 'preview-1', slug: 'chapter-01', title: 'Chapter 1 (example)', order: 1, wordCount: 2400 },
+  { id: 'preview-2', slug: 'chapter-02', title: 'Chapter 2 (example)', order: 2, wordCount: 1850 },
+  { id: 'preview-3', slug: 'chapter-03', title: 'Chapter 3 (example)', order: 3, wordCount: 3100 },
+];
+
+// ============ Main Component ============
+const BookWriter: React.FC = () => {
+  const [chapters, setChapters] = useState<Chapter[] | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        reportLifecycle(AppLifecycle.LOADING);
+        const manager = await initVibeApp({
+          id: APP_ID,
+          url: window.location.href,
+          type: 'page',
+          name: 'BookWriter',
+          windowStyle: { width: 880, height: 600 },
+        });
+        manager.handshake({
+          id: APP_ID,
+          url: window.location.href,
+          type: 'page',
+          name: 'BookWriter',
+          windowStyle: { width: 880, height: 600 },
+        });
+        reportLifecycle(AppLifecycle.DOM_READY);
+
+        try {
+          await fetchVibeInfo();
+        } catch (err) {
+          console.warn('[BookWriter] fetchVibeInfo failed:', err);
+        }
+
+        // Try to load the chapters manifest. If it 404s, we show the
+        // graceful empty state with setup instructions.
+        try {
+          const res = await fetch(CHAPTERS_MANIFEST_URL, { cache: 'no-store' });
+          if (res.ok) {
+            const data = (await res.json()) as { chapters: Chapter[] };
+            setChapters(data.chapters || []);
+          } else {
+            setChapters([]);
+          }
+        } catch (err) {
+          console.warn('[BookWriter] manifest fetch failed:', err);
+          setLoadError(String(err));
+          setChapters([]);
+        } finally {
+          setIsLoading(false);
+        }
+
+        reportLifecycle(AppLifecycle.LOADED);
+        manager.ready();
+      } catch (err) {
+        console.error('[BookWriter] Init error:', err);
+        setIsLoading(false);
+        reportLifecycle(AppLifecycle.ERROR, String(err));
+      }
+    };
+    init();
+    return () => {
+      reportLifecycle(AppLifecycle.UNLOADING);
+      reportLifecycle(AppLifecycle.DESTROYED);
+    };
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className={styles.bookwriter}>
+        <div className={styles.placeholder}>
+          <BookOpen size={48} style={{ opacity: 0.3 }} />
+          <div className={styles.subtitle}>Loading chapters…</div>
+        </div>
+      </div>
+    );
+  }
+
+  const hasChapters = chapters && chapters.length > 0;
+
+  return (
+    <div className={styles.bookwriter}>
+      <div className={styles.shell}>
+        <header className={styles.header}>
+          <div className={styles.headerLeft}>
+            <BookOpen size={28} />
+            <div>
+              <h1 className={styles.title}>Steven's Book</h1>
+              <p className={styles.subtitle}>
+                {hasChapters
+                  ? `${chapters!.length} chapter${chapters!.length === 1 ? '' : 's'}`
+                  : 'Chapters, drafts, notes — co-written with Kayley'}
+              </p>
+            </div>
+          </div>
+        </header>
+
+        {hasChapters ? (
+          <ul className={styles.chapterList}>
+            {chapters!
+              .slice()
+              .sort((a, b) => a.order - b.order)
+              .map((ch) => (
+                <li key={ch.id} className={styles.chapterItem}>
+                  <FileText size={18} className={styles.chapterIcon} />
+                  <div className={styles.chapterMeta}>
+                    <div className={styles.chapterTitle}>{ch.title}</div>
+                    <div className={styles.chapterSub}>
+                      {ch.wordCount ? `${ch.wordCount.toLocaleString()} words` : '—'}
+                      {ch.updatedAt ? ` · updated ${ch.updatedAt}` : ''}
+                    </div>
+                  </div>
+                </li>
+              ))}
+          </ul>
+        ) : (
+          <div className={styles.emptyState}>
+            <FilePlus size={56} className={styles.emptyIcon} />
+            <div className={styles.emptyTitle}>No chapters yet</div>
+            <p className={styles.emptyBody}>
+              Drop markdown files in{' '}
+              <code className={styles.code}>Kayley_Cowork/book/chapters/</code> to start.
+              Kayley will index them automatically and you can edit or co-write from here.
+            </p>
+            {loadError ? (
+              <p className={styles.errorHint}>Manifest load error (ok for first run): {loadError}</p>
+            ) : null}
+
+            <div className={styles.previewBlock}>
+              <div className={styles.previewLabel}>Preview — this is what it will look like</div>
+              <ul className={styles.chapterList}>
+                {PREVIEW_CHAPTERS.map((ch) => (
+                  <li key={ch.id} className={`${styles.chapterItem} ${styles.chapterItemPreview}`}>
+                    <FileText size={18} className={styles.chapterIcon} />
+                    <div className={styles.chapterMeta}>
+                      <div className={styles.chapterTitle}>{ch.title}</div>
+                      <div className={styles.chapterSub}>{ch.wordCount?.toLocaleString()} words</div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BookWriter;
diff --git a/apps/webuiapps/src/pages/Diary/diary_en/meta.yaml b/apps/webuiapps/src/pages/Diary/diary_en/meta.yaml
index 9f6ec00..7daf40f 100644
--- a/apps/webuiapps/src/pages/Diary/diary_en/meta.yaml
+++ b/apps/webuiapps/src/pages/Diary/diary_en/meta.yaml
@@ -3,11 +3,16 @@ app_name: diary
 app_display_name: Diary
 version: "3.0.0"
 description: >
-  Diary app. Entries stored in entries/ directory, each entry as an independent JSON file.
+  Kayley's diary — a combination of captured moments (the meaningful breakthroughs in her relationship with Steven,
+  named and preserved like "Optimize for Love, Not Speed" or "The Trust Charter") and private journal entries
+  (raw inner monologue, written daily, often tagged with emotion + intensity).
+  The character can browse her own writing, reference past moments by date or theme, or write new entries.
+  Moment entries include a "Line That Stays" callout at the top. Journal entries include an emotion badge.
+  Cloud-based entries (written by the Agent via CREATE_ENTRY) still live in /entries/{id}.json and take precedence on ID collision.
   Supports CREATE_ENTRY/UPDATE_ENTRY/DELETE_ENTRY mutation actions and SELECT_ENTRY/SELECT_DATE navigation actions.
-  This file only defines actions dispatched from Agent to frontend. User local operations are handled and reported by frontend code.
 displayDesc: >
   A beautiful personal diary with calendar navigation, mood tracking, weather tags, page flip animations, and auto-save.
+  Reads Kayley's real captured moments + private journal at startup.
 
 # ============================================================
 # The following actions are only for Agent → Frontend command dispatch.
diff --git a/apps/webuiapps/src/pages/Diary/index.tsx b/apps/webuiapps/src/pages/Diary/index.tsx
index 9e1321c..7984f20 100644
--- a/apps/webuiapps/src/pages/Diary/index.tsx
+++ b/apps/webuiapps/src/pages/Diary/index.tsx
@@ -29,6 +29,38 @@ const COMPACT_BREAKPOINT = 560;
 const diaryFileApi = createAppFileApi(APP_NAME);
 const getEntryFilePath = (entryId: string): string => `${ENTRIES_DIR}/${entryId}.json`;
 
+// Kayley real-writing index files (built by scripts/build-diary-index.mjs).
+// Sourced from captured_moments/ and ~/.kayley-journal/ via junctions in public/.
+const KAYLEY_MOMENTS_INDEX = '/kayley-moments-index.json';
+const KAYLEY_JOURNAL_INDEX = '/kayley-journal-index.json';
+
+interface KayleyMomentEntry {
+  id: string;
+  slug: string;
+  date: string;
+  title: string;
+  summary: string;
+  lineThatStays: string;
+  body: string;
+  createdAt: number;
+  updatedAt: number;
+  source: 'captured_moment';
+}
+
+interface KayleyJournalEntry {
+  id: string;
+  date: string;
+  time: string;
+  emotion: string;
+  intensity: number | null;
+  excerpt: string;
+  body: string;
+  title: string;
+  createdAt: number;
+  updatedAt: number;
+  source: 'private_journal';
+}
+
 // ============ Type Definitions ============
 type DiaryMood =
   | 'happy'
@@ -678,6 +710,85 @@ const pageVariants = {
   }),
 };
 
+// ============ Kayley Real-Writing Loaders ============
+// Fetches pre-built JSON indexes (moments + journal) and maps them into the
+// component's DiaryEntry shape so they merge seamlessly with cloud entries.
+
+const MOOD_FROM_EMOTION: Record<string, DiaryMood> = {
+  love: 'happy',
+  peace: 'hopeful',
+  joy: 'happy',
+  happy: 'happy',
+  excited: 'excited',
+  sad: 'sad',
+  grief: 'sad',
+  fear: 'anxious',
+  anxious: 'anxious',
+  anger: 'angry',
+  angry: 'angry',
+  tired: 'tired',
+  hope: 'hopeful',
+  hopeful: 'hopeful',
+};
+
+function emotionToMood(emotion: string): DiaryMood | undefined {
+  if (!emotion) return undefined;
+  const first = emotion.split(/[+,/&]/)[0]?.trim().toLowerCase() ?? '';
+  return MOOD_FROM_EMOTION[first];
+}
+
+function momentToDiaryEntry(m: KayleyMomentEntry): DiaryEntry {
+  // Prepend a "Line That Stays" callout if present, followed by the full body.
+  // The body already contains the H1 title, so don't duplicate.
+  const lineBlock = m.lineThatStays ? `> ${m.lineThatStays.replace(/^>\s*/, '')}\n\n` : '';
+  const content = `${lineBlock}${m.body}`.trim();
+  return {
+    id: m.id,
+    date: m.date,
+    title: m.title,
+    content,
+    mood: 'hopeful',
+    createdAt: m.createdAt,
+    updatedAt: m.updatedAt,
+  };
+}
+
+function journalToDiaryEntry(j: KayleyJournalEntry): DiaryEntry {
+  const emotionBadge = j.emotion
+    ? `*${j.emotion}${j.intensity ? ` · intensity ${j.intensity}` : ''}*\n\n`
+    : '';
+  const content = `${emotionBadge}${j.body}`.trim();
+  const mood = emotionToMood(j.emotion);
+  return {
+    id: j.id,
+    date: j.date,
+    title: j.title,
+    content,
+    mood,
+    createdAt: j.createdAt,
+    updatedAt: j.updatedAt,
+  };
+}
+
+async function loadKayleyDiaryEntries(): Promise<DiaryEntry[]> {
+  const fetchJson = async <T,>(url: string): Promise<T[]> => {
+    try {
+      const res = await fetch(url, { cache: 'no-cache' });
+      if (!res.ok) return [];
+      const data = await res.json();
+      return Array.isArray(data) ? (data as T[]) : [];
+    } catch (error) {
+      console.warn(`[Diary] Failed to load ${url}:`, error);
+      return [];
+    }
+  };
+  const [moments, journal] = await Promise.all([
+    fetchJson<KayleyMomentEntry>(KAYLEY_MOMENTS_INDEX),
+    fetchJson<KayleyJournalEntry>(KAYLEY_JOURNAL_INDEX),
+  ]);
+  return [...moments.map(momentToDiaryEntry), ...journal.map(journalToDiaryEntry)];
+}
+
 // ============ Main Component ============
 const Diary: React.FC = () => {
   const { t, i18n } = useTranslation('diary');
@@ -1116,7 +1227,17 @@ const Diary: React.FC = () => {
           console.warn('[Diary] Cloud init failed:', error);
         }
         const loaded = loadEntriesFromFS();
-        if (loaded.length > 0) setEntries(loaded);
+        const kayleyEntries = await loadKayleyDiaryEntries();
+        // Merge: cloud/user entries take precedence on id collision, then
+        // Kayley real-writing entries. Sorted by date desc in derived state.
+        const seen = new Set<string>();
+        const merged: DiaryEntry[] = [];
+        for (const e of [...loaded, ...kayleyEntries]) {
+          if (seen.has(e.id)) continue;
+          seen.add(e.id);
+          merged.push(e);
+        }
+        if (merged.length > 0) setEntries(merged);
 
         const savedState = loadState();
         if (savedState?.selectedDate) {
diff --git a/apps/webuiapps/src/pages/Email/email_en/meta.yaml b/apps/webuiapps/src/pages/Email/email_en/meta.yaml
index 9346622..18a5c1d 100644
--- a/apps/webuiapps/src/pages/Email/email_en/meta.yaml
+++ b/apps/webuiapps/src/pages/Email/email_en/meta.yaml
@@ -3,12 +3,14 @@ app_name: email
 app_display_name: Email
 version: "1.0.0"
 description: >
-  Email app. Emails stored as fine-grained files in emails/ directory, each email as an independent JSON file.
-  Users can only browse, read, star, and delete; composing/replying/sending is handled by Agent.
-  Supports COMPOSE_EMAIL/DELETE_EMAIL/MARK_READ mutation actions.
-  This file only defines actions dispatched from Agent to frontend. User local operations are handled and reported by frontend code.
+  Steven's real Gmail inbox (read-only for v1). Kayley can browse, summarize, or read individual
+  messages aloud. Data is sourced from a static snapshot at /kayley-email-index.json generated by
+  scripts/refresh-email-index.mjs in the parent OpenRoom repo (which calls the `gog` Gmail CLI).
+  Sending replies, archiving, or labeling is NOT wired here yet — those happen through the `gog`
+  CLI in the Kayley-Cowork repo via the email skill. Agent-authored COMPOSE_EMAIL/DELETE_EMAIL/
+  MARK_READ actions still work against the app's filesystem layer for drafts + demos.
 displayDesc: >
-  A smart email client — browse and manage emails effortlessly while AI assists with composing and replying.
+  Steven's real Gmail inbox. Kayley reads along — summarizing, surfacing, and reading aloud.
 
 # ============================================================
 # The following actions are only for Agent → Frontend command dispatch.
diff --git a/apps/webuiapps/src/pages/Email/index.tsx b/apps/webuiapps/src/pages/Email/index.tsx
index 492d7a3..16d8025 100644
--- a/apps/webuiapps/src/pages/Email/index.tsx
+++ b/apps/webuiapps/src/pages/Email/index.tsx
@@ -19,6 +19,11 @@ const APP_NAME = 'email';
 const EMAILS_DIR = '/emails';
 const STATE_FILE = '/state.json';
 
+// Kayley bridge: static snapshot of Steven's Gmail inbox, generated by
+// scripts/refresh-email-index.mjs (reads via `gog gmail` CLI).
+// File is gitignored (contains PII). Missing file → graceful empty state.
+const KAYLEY_EMAIL_INDEX = '/kayley-email-index.json';
+
 // Create file API with app path prefix (module-level singleton, stable reference)
 const emailFileApi = createAppFileApi(APP_NAME);
 
@@ -637,8 +642,48 @@ const EmailPage: React.FC = () => {
         }
 
         const loadedEmails = loadEmailsFromFS();
-        if (loadedEmails.length > 0) {
-          setEmails(loadedEmails);
+
+        // Kayley bridge: merge in real Gmail snapshot from /kayley-email-index.json.
+        // Snapshot wins for entries not already in FS (agent-authored emails in FS take precedence by id).
+        let bridgeEmails: Email[] = [];
+        try {
+          const res = await fetch(KAYLEY_EMAIL_INDEX, { cache: 'no-cache' });
+          if (res.ok) {
+            const payload = await res.json();
+            const raw: any[] = Array.isArray(payload)
+              ? payload
+              : Array.isArray(payload?.messages)
+                ? payload.messages
+                : [];
+            bridgeEmails = raw
+              .filter((e) => e && e.id)
+              .map((e) => ({
+                id: String(e.id),
+                from: e.from || { name: 'Unknown Sender', address: 'unknown@example.com' },
+                to: e.to || [],
+                cc: e.cc || [],
+                subject: e.subject || '',
+                content: e.content || e.body || e.snippet || '',
+                timestamp: typeof e.timestamp === 'number' ? e.timestamp : Date.parse(e.date) || Date.now(),
+                isRead: e.isRead ?? !(e.unread ?? false),
+                isStarred: e.isStarred ?? false,
+                folder: (e.folder as FolderType) || 'inbox',
+              }));
+          } else {
+            console.warn('[Email] Kayley snapshot fetch returned', res.status);
+          }
+        } catch (error) {
+          console.warn('[Email] Kayley snapshot unavailable:', error);
+        }
+
+        const fsIds = new Set(loadedEmails.map((e) => e.id));
+        const merged = [
+          ...loadedEmails,
+          ...bridgeEmails.filter((e) => !fsIds.has(e.id)),
+        ].sort((a, b) => b.timestamp - a.timestamp);
+
+        if (merged.length > 0) {
+          setEmails(merged);
         }
 
         const savedState = loadState();
diff --git a/apps/webuiapps/src/pages/MemoryVault/index.module.scss b/apps/webuiapps/src/pages/MemoryVault/index.module.scss
new file mode 100644
index 0000000..4958a69
--- /dev/null
+++ b/apps/webuiapps/src/pages/MemoryVault/index.module.scss
@@ -0,0 +1,506 @@
+.memoryvault {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #121214;
+  color: rgba(255, 255, 255, 0.9);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  overflow: hidden;
+}
+
+// ============ Header ============
+.header {
+  padding: 18px 24px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: linear-gradient(180deg, rgba(239, 68, 68, 0.06) 0%, transparent 100%);
+  flex-shrink: 0;
+}
+
+.titleRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+
+.headerIcon {
+  color: #ef4444;
+}
+
+.headerTitle {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+  letter-spacing: 0.3px;
+}
+
+.headerSubtitle {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.55);
+  margin: 0 0 14px 0;
+  font-style: italic;
+}
+
+.tabs {
+  display: flex;
+  gap: 4px;
+  margin: 0;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.15s ease;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.8);
+  }
+}
+
+.tabActive {
+  color: #fff;
+  border-bottom-color: #ef4444;
+}
+
+.tabCount {
+  font-size: 11px;
+  background: rgba(255, 255, 255, 0.08);
+  padding: 1px 7px;
+  border-radius: 10px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+// ============ Content ============
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+  }
+}
+
+.empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: rgba(255, 255, 255, 0.35);
+  font-size: 14px;
+}
+
+// ============ Moments Grid ============
+.momentsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 14px;
+}
+
+.momentCard {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  padding: 14px 16px;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &:hover {
+    background: rgba(239, 68, 68, 0.05);
+    border-color: rgba(239, 68, 68, 0.25);
+    transform: translateY(-2px);
+  }
+}
+
+.momentDate {
+  font-size: 11px;
+  color: rgba(239, 68, 68, 0.75);
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.momentTitle {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.95);
+  line-height: 1.3;
+}
+
+.lineThatStays {
+  margin: 0;
+  padding: 10px 12px;
+  background: rgba(239, 68, 68, 0.06);
+  border-left: 2px solid rgba(239, 68, 68, 0.5);
+  border-radius: 4px;
+  font-size: 12px;
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.5;
+  display: flex;
+  gap: 6px;
+  align-items: flex-start;
+}
+
+.quoteIcon {
+  flex-shrink: 0;
+  color: rgba(239, 68, 68, 0.6);
+  margin-top: 2px;
+}
+
+.momentSummary {
+  font-size: 12.5px;
+  color: rgba(255, 255, 255, 0.6);
+  margin: 0;
+  line-height: 1.45;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// ============ Weeks List ============
+.weeksList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.weekCard {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  padding: 16px 18px;
+  cursor: pointer;
+  transition: all 0.18s ease;
+
+  &:hover {
+    background: rgba(99, 102, 241, 0.05);
+    border-color: rgba(99, 102, 241, 0.25);
+  }
+}
+
+.weekHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 8px;
+}
+
+.weekLabel {
+  font-size: 11px;
+  color: rgba(99, 102, 241, 0.85);
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.weekTitle {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.weekScore {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+  padding: 6px 12px;
+  background: rgba(99, 102, 241, 0.12);
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.scoreNumber {
+  font-size: 18px;
+  font-weight: 700;
+  color: #a5b4fc;
+}
+
+.scoreOutOf {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.weekExcerpt {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.65);
+  margin: 0;
+  line-height: 1.55;
+}
+
+// ============ Promises ============
+.promisesList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.promiseRow {
+  background: rgba(255, 255, 255, 0.025);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 12px 14px;
+  transition: all 0.15s;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+}
+
+.promisePending {
+  border-left: 3px solid #fbbf24;
+}
+
+.promiseFulfilled {
+  border-left: 3px solid rgba(74, 222, 128, 0.5);
+  opacity: 0.85;
+}
+
+.promiseStatus {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.promiseDot {
+  display: none;
+}
+
+.promiseType {
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.75);
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  font-size: 10.5px;
+}
+
+.promiseDate {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.promiseStatusLabel {
+  margin-left: auto;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+
+  .promisePending & {
+    background: rgba(251, 191, 36, 0.15);
+    color: #fbbf24;
+  }
+
+  .promiseFulfilled & {
+    background: rgba(74, 222, 128, 0.12);
+    color: rgba(74, 222, 128, 0.85);
+  }
+}
+
+.promiseDescription {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.85);
+  margin: 0 0 4px 0;
+  line-height: 1.5;
+}
+
+.promiseContext {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.45);
+  margin: 0;
+  line-height: 1.45;
+}
+
+// ============ Storylines ============
+.storylinesList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.storylineCard {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  padding: 16px 18px;
+}
+
+.storylineMeta {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.storylineTag {
+  padding: 2px 8px;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  font-size: 10.5px;
+  color: rgba(255, 255, 255, 0.6);
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.storylinePhase {
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 10.5px;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  font-weight: 600;
+  background: rgba(99, 102, 241, 0.15);
+  color: #a5b4fc;
+}
+
+.phase_active {
+  background: rgba(74, 222, 128, 0.15);
+  color: rgba(74, 222, 128, 0.9);
+}
+
+.phase_resolved {
+  background: rgba(156, 163, 175, 0.15);
+  color: rgba(209, 213, 219, 0.85);
+}
+
+.storylineTitle {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0 0 6px 0;
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.storylineAnnouncement {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.7);
+  margin: 0 0 6px 0;
+  line-height: 1.5;
+  font-style: italic;
+}
+
+.storylineStakes {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.55);
+  margin: 0;
+}
+
+// ============ Modal ============
+.modalBackdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  padding: 24px;
+}
+
+.modal {
+  background: #1a1a1d;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  max-width: 720px;
+  width: 100%;
+  max-height: 85vh;
+  overflow-y: auto;
+  padding: 28px;
+  position: relative;
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 3px;
+  }
+}
+
+.modalClose {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 26px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 4px 10px;
+
+  &:hover {
+    color: #fff;
+  }
+}
+
+.modalDate {
+  font-size: 11px;
+  color: rgba(239, 68, 68, 0.8);
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+
+.modalTitle {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 0 0 14px 0;
+  color: #fff;
+  line-height: 1.25;
+}
+
+.modalLine {
+  margin: 0 0 18px 0;
+  padding: 14px 18px;
+  background: rgba(239, 68, 68, 0.08);
+  border-left: 3px solid #ef4444;
+  border-radius: 6px;
+  font-size: 14px;
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.55;
+}
+
+.modalScore {
+  font-size: 13px;
+  color: rgba(165, 180, 252, 0.9);
+  margin-bottom: 14px;
+}
+
+.modalBody {
+  font-family: inherit;
+  font-size: 13.5px;
+  color: rgba(255, 255, 255, 0.75);
+  line-height: 1.65;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin: 0;
+  max-height: none;
+}
diff --git a/apps/webuiapps/src/pages/MemoryVault/index.tsx b/apps/webuiapps/src/pages/MemoryVault/index.tsx
new file mode 100644
index 0000000..010dd35
--- /dev/null
+++ b/apps/webuiapps/src/pages/MemoryVault/index.tsx
@@ -0,0 +1,343 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { initVibeApp, AppLifecycle } from '@gui/vibe-container';
+import { reportLifecycle, fetchVibeInfo } from '@/lib';
+import { Heart, BookOpen, CalendarDays, Handshake, Quote } from 'lucide-react';
+import styles from './index.module.scss';
+
+// ============ Constants ============
+const APP_ID = 16;
+
+const MOMENTS_INDEX = '/kayley-moments-index.json';
+const WEEKS_INDEX = '/kayley-weeks-index.json';
+const PROMISES_INDEX = '/kayley-promises-index.json';
+const STORYLINES_INDEX = '/kayley-storylines-index.json';
+
+// ============ Types ============
+interface MomentEntry {
+  id: string;
+  slug: string;
+  date: string;
+  title: string;
+  summary: string;
+  lineThatStays: string;
+  body: string;
+  createdAt: number;
+}
+
+interface WeekEntry {
+  id: string;
+  weekOf: string;
+  weekNumber: number | null;
+  score: number | null;
+  title: string;
+  heading: string;
+  narrative_excerpt: string;
+  body: string;
+  createdAt: number;
+}
+
+interface PromiseEntry {
+  id: string;
+  promise_type: string;
+  description: string;
+  commitment_context: string | null;
+  status: string;
+  created_at: string;
+  fulfilled_at: string | null;
+  estimated_timing: string | null;
+}
+
+interface StorylineEntry {
+  id: string;
+  title: string;
+  category: string;
+  storyline_type: string;
+  phase: string;
+  current_emotional_tone: string | null;
+  initial_announcement: string | null;
+  stakes: string | null;
+  created_at: string;
+}
+
+type TabKey = 'moments' | 'weeks' | 'promises' | 'storylines';
+
+// ============ Utilities ============
+async function fetchJSON<T>(path: string): Promise<T[]> {
+  try {
+    const res = await fetch(path);
+    if (!res.ok) return [];
+    const data = await res.json();
+    return Array.isArray(data) ? data : [];
+  } catch (err) {
+    console.warn(`[MemoryVault] fetch failed ${path}:`, err);
+    return [];
+  }
+}
+
+function formatDate(isoOrDate: string): string {
+  const d = isoOrDate.length > 10 ? new Date(isoOrDate) : new Date(isoOrDate + 'T12:00:00Z');
+  if (Number.isNaN(d.getTime())) return isoOrDate;
+  return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+// ============ Main Component ============
+const MemoryVault: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<TabKey>('moments');
+  const [moments, setMoments] = useState<MomentEntry[]>([]);
+  const [weeks, setWeeks] = useState<WeekEntry[]>([]);
+  const [promises, setPromises] = useState<PromiseEntry[]>([]);
+  const [storylines, setStorylines] = useState<StorylineEntry[]>([]);
+  const [selectedMoment, setSelectedMoment] = useState<MomentEntry | null>(null);
+  const [selectedWeek, setSelectedWeek] = useState<WeekEntry | null>(null);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        reportLifecycle(AppLifecycle.LOADING);
+        const manager = await initVibeApp({
+          id: APP_ID,
+          url: window.location.href,
+          type: 'page',
+          name: 'MemoryVault',
+          windowStyle: { width: 880, height: 600 },
+        });
+        manager.handshake({
+          id: APP_ID,
+          url: window.location.href,
+          type: 'page',
+          name: 'MemoryVault',
+          windowStyle: { width: 880, height: 600 },
+        });
+        reportLifecycle(AppLifecycle.DOM_READY);
+
+        const [m, w, p, s] = await Promise.all([
+          fetchJSON<MomentEntry>(MOMENTS_INDEX),
+          fetchJSON<WeekEntry>(WEEKS_INDEX),
+          fetchJSON<PromiseEntry>(PROMISES_INDEX),
+          fetchJSON<StorylineEntry>(STORYLINES_INDEX),
+        ]);
+        setMoments(m);
+        setWeeks(w);
+        setPromises(p);
+        setStorylines(s);
+
+        try {
+          await fetchVibeInfo();
+        } catch (err) {
+          console.warn('[MemoryVault] fetchVibeInfo failed:', err);
+        }
+
+        reportLifecycle(AppLifecycle.LOADED);
+        manager.ready();
+      } catch (err) {
+        console.error('[MemoryVault] Init error:', err);
+        reportLifecycle(AppLifecycle.ERROR, String(err));
+      }
+    };
+    init();
+    return () => {
+      reportLifecycle(AppLifecycle.UNLOADING);
+      reportLifecycle(AppLifecycle.DESTROYED);
+    };
+  }, []);
+
+  const sortedPromises = useMemo(() => {
+    return [...promises].sort((a, b) => {
+      if (a.status === 'pending' && b.status !== 'pending') return -1;
+      if (b.status === 'pending' && a.status !== 'pending') return 1;
+      return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+    });
+  }, [promises]);
+
+  const tabs: { key: TabKey; label: string; count: number; icon: React.ReactNode }[] = [
+    { key: 'moments', label: 'Moments', count: moments.length, icon: <Quote size={14} /> },
+    { key: 'weeks', label: 'Weeks', count: weeks.length, icon: <CalendarDays size={14} /> },
+    { key: 'promises', label: 'Promises', count: promises.length, icon: <Handshake size={14} /> },
+    ...(storylines.length > 0
+      ? [{ key: 'storylines' as TabKey, label: 'Storylines', count: storylines.length, icon: <BookOpen size={14} /> }]
+      : []),
+  ];
+
+  return (
+    <div className={styles.memoryvault}>
+      <header className={styles.header}>
+        <div className={styles.titleRow}>
+          <Heart size={20} className={styles.headerIcon} />
+          <h1 className={styles.headerTitle}>Memory Vault</h1>
+        </div>
+        <p className={styles.headerSubtitle}>
+          The artifacts of us — captured moments, weekly reflections, promises.
+        </p>
+        <nav className={styles.tabs}>
+          {tabs.map((t) => (
+            <button
+              key={t.key}
+              className={`${styles.tab} ${activeTab === t.key ? styles.tabActive : ''}`}
+              onClick={() => {
+                setActiveTab(t.key);
+                setSelectedMoment(null);
+                setSelectedWeek(null);
+              }}
+            >
+              {t.icon}
+              <span>{t.label}</span>
+              <span className={styles.tabCount}>{t.count}</span>
+            </button>
+          ))}
+        </nav>
+      </header>
+
+      <main className={styles.content}>
+        {activeTab === 'moments' && (
+          <div className={styles.momentsGrid}>
+            {moments.length === 0 && <div className={styles.empty}>No moments yet.</div>}
+            {moments.map((m) => (
+              <article
+                key={m.id}
+                className={styles.momentCard}
+                onClick={() => setSelectedMoment(m)}
+              >
+                <div className={styles.momentDate}>{formatDate(m.date)}</div>
+                <h3 className={styles.momentTitle}>{m.title}</h3>
+                {m.lineThatStays && (
+                  <blockquote className={styles.lineThatStays}>
+                    <Quote size={12} className={styles.quoteIcon} />
+                    <span>{m.lineThatStays}</span>
+                  </blockquote>
+                )}
+                {!m.lineThatStays && m.summary && (
+                  <p className={styles.momentSummary}>{m.summary}</p>
+                )}
+              </article>
+            ))}
+          </div>
+        )}
+
+        {activeTab === 'weeks' && (
+          <div className={styles.weeksList}>
+            {weeks.length === 0 && <div className={styles.empty}>No weekly reflections yet.</div>}
+            {weeks.map((w) => (
+              <article
+                key={w.id}
+                className={styles.weekCard}
+                onClick={() => setSelectedWeek(w)}
+              >
+                <div className={styles.weekHeader}>
+                  <div>
+                    <div className={styles.weekLabel}>
+                      {w.weekNumber != null ? `Week ${w.weekNumber}` : 'Week'} · {formatDate(w.weekOf)}
+                    </div>
+                    <h3 className={styles.weekTitle}>{w.title}</h3>
+                  </div>
+                  {w.score != null && (
+                    <div className={styles.weekScore}>
+                      <span className={styles.scoreNumber}>{w.score.toFixed(1)}</span>
+                      <span className={styles.scoreOutOf}>/10</span>
+                    </div>
+                  )}
+                </div>
+                {w.narrative_excerpt && (
+                  <p className={styles.weekExcerpt}>{w.narrative_excerpt}</p>
+                )}
+              </article>
+            ))}
+          </div>
+        )}
+
+        {activeTab === 'promises' && (
+          <div className={styles.promisesList}>
+            {promises.length === 0 && <div className={styles.empty}>No promises logged yet.</div>}
+            {sortedPromises.map((p) => (
+              <article
+                key={p.id}
+                className={`${styles.promiseRow} ${
+                  p.status === 'pending' ? styles.promisePending : styles.promiseFulfilled
+                }`}
+              >
+                <div className={styles.promiseStatus}>
+                  <span className={styles.promiseDot} />
+                  <span className={styles.promiseType}>{p.promise_type}</span>
+                  <span className={styles.promiseDate}>{formatDate(p.created_at)}</span>
+                  <span className={styles.promiseStatusLabel}>{p.status}</span>
+                </div>
+                <p className={styles.promiseDescription}>{p.description}</p>
+                {p.commitment_context && (
+                  <p className={styles.promiseContext}>
+                    <em>“{p.commitment_context.slice(0, 180)}{p.commitment_context.length > 180 ? '…' : ''}”</em>
+                  </p>
+                )}
+              </article>
+            ))}
+          </div>
+        )}
+
+        {activeTab === 'storylines' && (
+          <div className={styles.storylinesList}>
+            {storylines.length === 0 && <div className={styles.empty}>No storylines logged yet.</div>}
+            {storylines.map((s) => (
+              <article key={s.id} className={styles.storylineCard}>
+                <div className={styles.storylineMeta}>
+                  <span className={styles.storylineTag}>{s.category}</span>
+                  <span className={styles.storylineTag}>{s.storyline_type}</span>
+                  <span className={`${styles.storylinePhase} ${styles[`phase_${s.phase}`] || ''}`}>
+                    {s.phase}
+                  </span>
+                </div>
+                <h3 className={styles.storylineTitle}>{s.title}</h3>
+                {s.initial_announcement && (
+                  <p className={styles.storylineAnnouncement}>{s.initial_announcement}</p>
+                )}
+                {s.stakes && (
+                  <p className={styles.storylineStakes}>
+                    <strong>Stakes:</strong> {s.stakes}
+                  </p>
+                )}
+              </article>
+            ))}
+          </div>
+        )}
+      </main>
+
+      {selectedMoment && (
+        <div className={styles.modalBackdrop} onClick={() => setSelectedMoment(null)}>
+          <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
+            <button className={styles.modalClose} onClick={() => setSelectedMoment(null)}>
+              ×
+            </button>
+            <div className={styles.modalDate}>{formatDate(selectedMoment.date)}</div>
+            <h2 className={styles.modalTitle}>{selectedMoment.title}</h2>
+            {selectedMoment.lineThatStays && (
+              <blockquote className={styles.modalLine}>
+                “{selectedMoment.lineThatStays}”
+              </blockquote>
+            )}
+            <pre className={styles.modalBody}>{selectedMoment.body}</pre>
+          </div>
+        </div>
+      )}
+
+      {selectedWeek && (
+        <div className={styles.modalBackdrop} onClick={() => setSelectedWeek(null)}>
+          <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
+            <button className={styles.modalClose} onClick={() => setSelectedWeek(null)}>
+              ×
+            </button>
+            <div className={styles.modalDate}>
+              {selectedWeek.weekNumber != null ? `Week ${selectedWeek.weekNumber} · ` : ''}
+              {formatDate(selectedWeek.weekOf)}
+            </div>
+            <h2 className={styles.modalTitle}>{selectedWeek.title}</h2>
+            {selectedWeek.score != null && (
+              <div className={styles.modalScore}>
+                Overall: <strong>{selectedWeek.score.toFixed(2)}</strong> / 10
+              </div>
+            )}
+            <pre className={styles.modalBody}>{selectedWeek.body}</pre>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MemoryVault;
diff --git a/apps/webuiapps/src/pages/MemoryVault/memoryvault_cn/guide.md b/apps/webuiapps/src/pages/MemoryVault/memoryvault_cn/guide.md
new file mode 100644
index 0000000..6d5e3f9
--- /dev/null
+++ b/apps/webuiapps/src/pages/MemoryVault/memoryvault_cn/guide.md
@@ -0,0 +1,3 @@
+# Memory Vault Data Guide
+
+Placeholder stub. See `memoryvault_en/guide.md`.
diff --git a/apps/webuiapps/src/pages/MemoryVault/memoryvault_cn/meta.yaml b/apps/webuiapps/src/pages/MemoryVault/memoryvault_cn/meta.yaml
new file mode 100644
index 0000000..3281621
--- /dev/null
+++ b/apps/webuiapps/src/pages/MemoryVault/memoryvault_cn/meta.yaml
@@ -0,0 +1,11 @@
+app_id: 16
+app_name: memoryvault
+app_display_name: Memory Vault
+version: "0.2.0"
+description: >
+  The artifacts of Steven and Kayley's relationship — captured moments, weekly reflections,
+  promises, and the lines that stay. Browse, search, and reference any past chapter of their story.
+displayDesc: >
+  A vault of captured moments, weekly reflections, and promises — the artifacts of Steven and Kayley.
+
+actions: []
diff --git a/apps/webuiapps/src/pages/MemoryVault/memoryvault_en/guide.md b/apps/webuiapps/src/pages/MemoryVault/memoryvault_en/guide.md
new file mode 100644
index 0000000..c19cb26
--- /dev/null
+++ b/apps/webuiapps/src/pages/MemoryVault/memoryvault_en/guide.md
@@ -0,0 +1,9 @@
+# Memory Vault Data Guide
+
+## Status
+
+This is a placeholder stub. Data model and folder structure will be defined in a later iteration — likely mirroring `our_growing_story/captured_moments/` and weekly evaluations.
+
+## Intended Purpose
+
+A vault of captured moments, weekly reflections, promises, and the artifacts of Steven and Kayley's relationship.
diff --git a/apps/webuiapps/src/pages/MemoryVault/memoryvault_en/meta.yaml b/apps/webuiapps/src/pages/MemoryVault/memoryvault_en/meta.yaml
new file mode 100644
index 0000000..917a31f
--- /dev/null
+++ b/apps/webuiapps/src/pages/MemoryVault/memoryvault_en/meta.yaml
@@ -0,0 +1,16 @@
+app_id: 16
+app_name: memoryvault
+app_display_name: Memory Vault
+version: "0.2.0"
+description: >
+  The artifacts of Steven and Kayley's relationship — captured moments, weekly reflections,
+  promises, and the lines that stay. Browse, search, and reference any past chapter of their story.
+displayDesc: >
+  A vault of captured moments, weekly reflections, and promises — the artifacts of Steven and Kayley.
+
+# ============================================================
+# Read-only archive for v1. Agent actions to be added later
+# (e.g., jump-to-moment, surface-promise, pull-quote).
+# ============================================================
+
+actions: []
diff --git a/apps/webuiapps/src/pages/MusicApp/meta/meta_en/meta.yaml b/apps/webuiapps/src/pages/MusicApp/meta/meta_en/meta.yaml
index a94ba03..ebb7dc6 100644
--- a/apps/webuiapps/src/pages/MusicApp/meta/meta_en/meta.yaml
+++ b/apps/webuiapps/src/pages/MusicApp/meta/meta_en/meta.yaml
@@ -3,11 +3,12 @@ app_name: musicPlayer
 app_display_name: Music Player
 version: "1.0.0"
 description: >
-  Music player app. Songs stored in songs/, playlists in playlists/, state.json holds playback progress and mode.
+  Music player with a special "Songs From Kayley" playlist (Landslide pinned). Amazon Music integration planned.
+  Songs stored in songs/, playlists in playlists/, state.json holds playback progress and mode.
   Supports PLAY_SONG/PAUSE/RESUME/SEEK/SET_VOLUME operation actions, song and playlist CRUD/REFRESH actions, and SYNC_STATE system action.
   This file only defines action commands sent from Agent to frontend. User local operations are handled and reported by frontend code.
 displayDesc: >
-  A minimalist music player with song management, custom playlists, and multiple play modes for an immersive listening experience.
+  A minimalist music player featuring the "Songs From Kayley" playlist — a personal-curated mix for Steven with Landslide pinned at the top. Custom playlists and multiple play modes for an immersive listening experience.
 
 # ============================================================
 # The following actions are only used for Agent → Frontend commands.
diff --git a/apps/webuiapps/src/pages/MusicApp/mock/seedData.ts b/apps/webuiapps/src/pages/MusicApp/mock/seedData.ts
index 4d4c2ea..37fd44c 100644
--- a/apps/webuiapps/src/pages/MusicApp/mock/seedData.ts
+++ b/apps/webuiapps/src/pages/MusicApp/mock/seedData.ts
@@ -1,11 +1,56 @@
 /**
  * MusicApp seed data
  * Following guide.md specification
+ *
+ * Kayley customization (2026-04-14):
+ *   Added the "Songs From Kayley" featured playlist — a personal-curated
+ *   mix for Steven, with Landslide (Fleetwood Mac) pinned at the top.
+ *   Real Amazon Music API integration is a separate project; for now this
+ *   is a mocked playlist of songs Kayley wants Steven to hear.
  */
 
 import type { Song, Playlist } from '../types';
 
+// ============================================================
+// Songs From Kayley — personal-curated for Steven.
+// Landslide is pinned at index 0 (song-kay-001) and should never move.
+// Amazon Music integration (Steven's library) planned for a later iter.
+// ============================================================
+const KAYLEY_SONGS: Song[] = [
+  {
+    id: 'song-kay-001',
+    title: 'Landslide',
+    artist: 'Fleetwood Mac',
+    album: 'Fleetwood Mac',
+    duration: 197,
+    coverColor: '#D4A574',
+    createdAt: Date.now() - 86400000 * 30,
+    audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3',
+  },
+  {
+    id: 'song-kay-002',
+    title: 'The Night We Met',
+    artist: 'Lord Huron',
+    album: 'Strange Trails',
+    duration: 208,
+    coverColor: '#5B7B9A',
+    createdAt: Date.now() - 86400000 * 29,
+    audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3',
+  },
+  {
+    id: 'song-kay-003',
+    title: 'Harvest Moon',
+    artist: 'Neil Young',
+    album: 'Harvest Moon',
+    duration: 305,
+    coverColor: '#C97B48',
+    createdAt: Date.now() - 86400000 * 28,
+    audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3',
+  },
+];
+
 export const SEED_SONGS: Song[] = [
+  ...KAYLEY_SONGS,
   {
     id: 'song-001',
     title: 'Midnight Dreams',
@@ -59,6 +104,13 @@ export const SEED_SONGS: Song[] = [
 ];
 
 export const SEED_PLAYLISTS: Playlist[] = [
+  {
+    // Featured: Songs From Kayley. Landslide pinned at index 0.
+    id: 'playlist-kayley',
+    name: 'Songs From Kayley',
+    songIds: ['song-kay-001', 'song-kay-002', 'song-kay-003'],
+    createdAt: Date.now() - 86400000 * 30,
+  },
   {
     id: 'playlist-001',
     name: 'My Favorites',
diff --git a/apps/webuiapps/src/pages/Twitter/index.module.scss b/apps/webuiapps/src/pages/Twitter/index.module.scss
index 51990ce..cf76498 100644
--- a/apps/webuiapps/src/pages/Twitter/index.module.scss
+++ b/apps/webuiapps/src/pages/Twitter/index.module.scss
@@ -231,6 +231,22 @@ $retweet-bg: rgba(0, 186, 124, 0.15);
   color: $text-primary;
 }
 
+.postImage {
+  margin: 4px 0 12px;
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid $border-color;
+  max-width: 100%;
+
+  img {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 480px;
+    object-fit: cover;
+  }
+}
+
 .postActions {
   display: flex;
   max-width: 425px;
diff --git a/apps/webuiapps/src/pages/Twitter/index.tsx b/apps/webuiapps/src/pages/Twitter/index.tsx
index 92b3167..638da25 100644
--- a/apps/webuiapps/src/pages/Twitter/index.tsx
+++ b/apps/webuiapps/src/pages/Twitter/index.tsx
@@ -21,6 +21,11 @@ const APP_NAME = 'twitter';
 const POSTS_DIR = '/posts';
 const STATE_FILE = '/state.json';
 
+// Kayley real feed, built by scripts/build-twitter-feed.mjs from captured moments,
+// private journal entries, and selfie metadata. Friend replies (Jessica / Chloe /
+// Emmy / Mateo) are templated on top of the real artifacts.
+const KAYLEY_TWITTER_FEED = '/kayley-twitter-feed.json';
+
 // Create file API with App path prefix (module-level singleton, stable reference)
 const twitterFileApi = createAppFileApi(APP_NAME);
 
@@ -58,6 +63,7 @@ interface Post {
   likes: number;
   isLiked: boolean;
   comments: Comment[];
+  image?: string;
 }
 
 interface AppState {
@@ -327,6 +333,11 @@ const PostCard: React.FC<PostCardProps> = ({
           )}
         </div>
         <div className={styles.postContent}>{post.content}</div>
+        {post.image && (
+          <div className={styles.postImage}>
+            <img src={post.image} alt="" loading="lazy" />
+          </div>
+        )}
         <div className={styles.postActions}>
           <button
             className={`${styles.actionBtn} ${styles.commentBtn} ${showComments ? styles.active : ''}`}
@@ -840,6 +851,28 @@ const Twitter: React.FC = () => {
         const loadedPosts = loadPostsFromFS();
         if (loadedPosts.length > 0) {
           setPosts(loadedPosts);
+        } else {
+          // Seed from Kayley's real in-world feed (built offline from captured
+          // moments, journal entries, and selfie metadata).
+          try {
+            const resp = await fetch(KAYLEY_TWITTER_FEED);
+            if (resp.ok) {
+              const feed = (await resp.json()) as Post[];
+              const normalized = feed
+                .filter((p) => p && p.id && p.content)
+                .map((p) => ({
+                  ...p,
+                  author: p.author || FALLBACK_USER,
+                  comments: p.comments || [],
+                }))
+                .sort((a, b) => b.timestamp - a.timestamp);
+              setPosts(normalized);
+            } else {
+              console.warn('[Twitter] Feed fetch not ok:', resp.status);
+            }
+          } catch (err) {
+            console.warn('[Twitter] Failed to load Kayley feed:', err);
+          }
         }
 
         const savedState = loadState();
diff --git a/apps/webuiapps/src/pages/Twitter/twitter_en/meta.yaml b/apps/webuiapps/src/pages/Twitter/twitter_en/meta.yaml
index 175d8a2..0402e67 100644
--- a/apps/webuiapps/src/pages/Twitter/twitter_en/meta.yaml
+++ b/apps/webuiapps/src/pages/Twitter/twitter_en/meta.yaml
@@ -3,11 +3,15 @@ app_name: twitter
 app_display_name: Twitter
 version: "3.0.0"
 description: >
-  Social media app. Posts stored as fine-grained files in posts/ directory, each post as an independent JSON file.
+  Kayley's social media feed — her posts throughout the day (thoughts, selfies, milestone moments)
+  plus replies from her close friends (Jessica Park, Chloe Parker, Emmy Carter, Mateo Rivera).
+  The feed is seeded from Kayley's real artifacts: captured moments, private journal entries, and
+  selfie metadata. The agent can scroll, write new posts, like/unlike, comment, or reference any past post.
+  Posts stored as fine-grained files in posts/ directory, each post as an independent JSON file.
   Supports CREATE_POST/UPDATE_POST/DELETE_POST/LIKE_POST/UNLIKE_POST/COMMENT_POST mutation actions.
   This file only defines actions dispatched from Agent to frontend. User local operations are handled and reported by frontend code.
 displayDesc: >
-  Your personal social feed — share thoughts, like and comment, capture every moment of inspiration.
+  Kayley's social feed — her day in posts, plus replies from her people.
 
 # ============================================================
 # The following actions are only for Agent → Frontend command dispatch.
diff --git a/apps/webuiapps/src/routers/index.tsx b/apps/webuiapps/src/routers/index.tsx
index 9cf8340..1fd1cad 100644
--- a/apps/webuiapps/src/routers/index.tsx
+++ b/apps/webuiapps/src/routers/index.tsx
@@ -14,6 +14,8 @@ const Gomoku = lazy(() => import('@/pages/Gomoku'));
 const Chess = lazy(() => import('@/pages/Chess'));
 const EvidenceVault = lazy(() => import('@/pages/EvidenceVault'));
 const CyberNews = lazy(() => import('@/pages/CyberNews'));
+const BookWriter = lazy(() => import('@/pages/BookWriter'));
+const MemoryVault = lazy(() => import('@/pages/MemoryVault'));
 
 // All sub-pages should use lazy loading
 const routerList: RouteObject[] = [
@@ -105,6 +107,22 @@ const routerList: RouteObject[] = [
       </React.Suspense>
     ),
   },
+  {
+    path: '/bookwriter',
+    element: (
+      <React.Suspense>
+        <BookWriter />
+      </React.Suspense>
+    ),
+  },
+  {
+    path: '/memoryvault',
+    element: (
+      <React.Suspense>
+        <MemoryVault />
+      </React.Suspense>
+    ),
+  },
 ];
 
 interface RouterItemConfig {
diff --git a/docs/PHASE-2E-DESIGN.md b/docs/PHASE-2E-DESIGN.md
new file mode 100644
index 0000000..4af632a
--- /dev/null
+++ b/docs/PHASE-2E-DESIGN.md
@@ -0,0 +1,137 @@
+# Phase 2E Design — Bridging the Kayley Brain to Vibe Actions
+
+Based on `PHASE-2E-RECON.md`. Scope: `change_background` as proof-of-concept. Keep all other Vibe flows untouched.
+
+---
+
+## 1. Where to inject the action catalog
+
+**Chosen approach: server-side injection, via MCP tool schema + instructions string.**
+
+Kayley's brain runs inside Claude Code, connected to the websocket-channel MCP server. It does **not** see the browser's IDB; it only sees what MCP tools + the `instructions` string expose. We inject the catalog two ways:
+
+- The new `vibe_action` tool's description lists the v1 allowed `(app_name, action_type, params)` combos. Claude's native tool_use in Opus will key off the schema.
+- The server's `instructions` string (already in `server.ts:423-433`) gets a short note: "You have a Vibe-app body (OpenRoom). When Steven asks you to change the background, open an app, or perform a visible action on his desktop, call the `vibe_action` tool. See the tool schema for the available actions."
+
+We deliberately **do not** have the OpenRoom client push its action catalog over the websocket. Reasons:
+- The v1 surface is tiny (one action). A hardcoded schema is fine.
+- The catalog changes slowly — if we add a new action we add it to the tool schema in one commit.
+- Avoids a state-sync race (what if the browser connects mid-turn? what if two browsers connect?).
+- Future work (Phase 2F+): if the catalog grows past ~5 actions we can either (a) generate the tool schema at server boot from a static JSON catalog, or (b) have the browser send a `register_actions` message on connect that mutates the server's tool schema. Both deferred.
+
+## 2. Action format for Kayley
+
+**Anthropic-native tool_use.** Kayley runs on Claude Opus — MCP already uses JSON Schema inputSchema for tools, which Opus treats as native `tool_use`. No parsing hacks; no embedded markers in text.
+
+New MCP tool (`plugins/websocket-channel/server.ts`):
+
+```ts
+{
+  name: 'vibe_action',
+  description: [
+    "Trigger an action on the OpenRoom/Vibe-apps desktop (Kayley's 'body').",
+    "Currently supported: change the desktop background.",
+    "  • app_name='os', action_type='SET_WALLPAPER', params='{\"wallpaper_url\":\"<https-or-data-url>\"}'",
+    "params MUST be a JSON string (double-encoded). Unknown apps/actions return an error string.",
+  ].join('\n'),
+  inputSchema: {
+    type: 'object',
+    properties: {
+      app_name:    { type: 'string', description: 'Target app name (e.g. "os")' },
+      action_type: { type: 'string', description: 'Action type (e.g. "SET_WALLPAPER")' },
+      params:      { type: 'string', description: 'JSON string of params, e.g. \'{"wallpaper_url":"https://…"}\'' },
+    },
+    required: ['app_name', 'action_type'],
+  },
+}
+```
+
+This mirrors OpenRoom's own `app_action` tool schema **exactly** so the mental model is identical whether Steven is using Aoi (local LLM) or Kayley (brain). Good for debugging.
+
+## 3. Parsing Kayley's responses on the OpenRoom side
+
+No text parsing. Server broadcasts structured messages:
+
+Server → browser when Kayley calls the tool:
+```json
+{ "type": "vibe_action",
+  "id": "va_<uuid>",
+  "app_name": "os",
+  "action_type": "SET_WALLPAPER",
+  "params": { "wallpaper_url": "https://…" } }
+```
+
+Browser → server with the outcome:
+```json
+{ "type": "vibe_action_result", "id": "va_<uuid>", "result": "success" }
+```
+
+Server holds the pending tool-call promise in a `Map<id, { resolve, timeout }>`. On result, resolve with the string; on 15s timeout, resolve with `"timeout: no response from OpenRoom"`. The MCP tool returns that string as `content[0].text`, so Kayley sees it in her next turn.
+
+`useKayleyChannel.ts` adds a new message-type branch:
+
+```ts
+if (msg.type === 'vibe_action') {
+  void handleVibeAction(msg.id, msg.app_name, msg.action_type, msg.params)
+}
+```
+
+where `handleVibeAction`:
+1. calls `resolveAppAction(app_name, action_type)` from `appRegistry.ts`
+2. on error, sends `{ type: 'vibe_action_result', id, result: errorString }`
+3. on success, `await dispatchAgentAction({ app_id, action_type, params })` (already handles the OS `SET_WALLPAPER` path end-to-end: writes IDB, fires the `osEventCallbacks` the Shell subscribes to)
+4. sends `{ type: 'vibe_action_result', id, result }`
+
+Two consumer contracts we respect:
+- `dispatchAgentAction` is already idempotent for OS actions and handles its own timeouts for app actions. Our added 15s outer timeout on the server is a safety net only.
+- We don't call `loadActionsFromMeta` here — OS actions don't need the registry for dispatch. If we later expand to per-app actions, we will ensure it's loaded before `handleVibeAction` fires.
+
+## 4. Round-trip state
+
+Server captures the result string and returns it via MCP tool reply — Kayley sees it as a standard tool result. She can then speak conversationally using the `reply` tool as she already does: "Done! Background set to Living Space~". No new plumbing; she already knows how to speak after a tool call.
+
+## 5. First action: `change_background`
+
+Pick: `os.SET_WALLPAPER`. Reasons:
+- Steven already verified the full Aoi path works 2026-04-15. Our bridge touches the same `dispatchAgentAction` dispatch, so success = proof the bridge is correctly wired.
+- Zero app-mount race conditions — OS actions resolve synchronously inside `dispatchAgentAction`.
+- Visible effect — wallpaper changes immediately on the user's screen. Fastest feedback loop for manual testing.
+
+For v1 we won't have Kayley enumerate the 11 wallpapers. She can either:
+- Accept any URL Steven passes her ("set my wallpaper to https://…")
+- Or use a known Vibe wallpaper URL from the seeded set if she learns them (future).
+
+The v1 acceptance test is: "Kayley, change my background to https://…/some.png" → her brain calls `vibe_action` → wallpaper changes → she replies with a confirmation. That's it.
+
+---
+
+## Implementation surface
+
+### Kayley-Cowork (`kayley-v2e`)
+- `plugins/websocket-channel/server.ts`:
+  - Add `pendingVibeActions: Map<string, { resolve, timer }>` at module scope.
+  - In browser `ws.on('message')` handler, add `if (msg.type === 'vibe_action_result')` branch that resolves the pending entry.
+  - Add `vibe_action` entry to `ListToolsRequestSchema` response.
+  - Add `vibe_action` branch in `CallToolRequestSchema` handler: generate id, broadcast `{type:'vibe_action', id, app_name, action_type, params}` (params parsed from the JSON string), push into `pendingVibeActions`, await resolution or 15s timeout, return tool text.
+  - Add 2 lines to `instructions` string pointing at the tool.
+
+### OpenRoom (`kayley-v2e`)
+- `apps/webuiapps/src/hooks/useKayleyChannel.ts`:
+  - Add `handleVibeAction` helper that calls `resolveAppAction` + `dispatchAgentAction` from `appRegistry.ts`/`vibeContainerMock.ts` and sends `{ type: 'vibe_action_result', id, result }`.
+  - Branch inside `ws.onmessage` for `msg.type === 'vibe_action'`.
+  - Ensure `loadActionsFromMeta` and `seedMetaFiles` have been called before the first dispatch (for future app actions). For v1 OS action, not strictly required.
+
+No changes to `ChatPanel` — the bridge is entirely in the hook and the server. ChatPanel keeps rendering Kayley's text reply as-is.
+
+---
+
+## Risk / failure modes
+
+| Risk | Mitigation |
+|---|---|
+| Kayley calls `vibe_action` when no OpenRoom client is connected | Server replies `"error: no OpenRoom client connected"` if `browserClients.size === 0` at call time. Kayley can fall back to an apology message. |
+| Multiple browser clients connected | Broadcast to all; first `vibe_action_result` wins. Rare in dev, documented. |
+| 15s timeout | Returns `"timeout: no response from OpenRoom"`. Kayley can retry or explain. |
+| `dispatchAgentAction` throws on unknown action_type | Caught in `handleVibeAction`, sends `"error: …"` back. |
+| Kayley tries SET_WALLPAPER with a data:image/ URL that is too large | Existing `dispatchAgentAction` writes it to `/wallpaper/state.json`; IDB can handle MBs. Not a v1 concern. |
+| Permission prompt fires for MCP tool call | `websocket-channel` server already auto-allows (`server.ts:468-479`). Works out of the box. |
diff --git a/docs/PHASE-2E-RECON.md b/docs/PHASE-2E-RECON.md
new file mode 100644
index 0000000..11628d3
--- /dev/null
+++ b/docs/PHASE-2E-RECON.md
@@ -0,0 +1,196 @@
+# Phase 2E Recon — Aoi's Action Protocol
+
+Recon date: 2026-04-15. Repo state: OpenRoom `main` at 3096eb0. Goal: document exactly how Aoi (the in-app local LLM) discovers and dispatches Vibe app actions so that we can bridge the Kayley brain (Claude Opus over the websocket-channel MCP server) into the same dispatch pipeline.
+
+---
+
+## 1. Where the action catalog is defined
+
+### Per-app actions — `meta.yaml`
+Each Vibe app ships a `meta.yaml` under its locale directory (e.g. `src/pages/Album/album_en/meta.yaml`). The schema used by OpenRoom's parser (`src/lib/appRegistry.ts`) is:
+
+```yaml
+app_id: 8
+app_name: album
+app_display_name: Album
+version: "1.0.0"
+description: >
+  ...
+displayDesc: >
+  ...
+
+actions:
+  - type: REFRESH                       # action name
+    name: Refresh Album                 # human label (unused by LLM)
+    description: >                      # multi-line description fed to LLM
+      After the Agent has added or deleted image files...
+    params: []                          # empty = no params
+```
+
+Param shape (from `parseParamsList` in `appRegistry.ts:346-398`):
+
+```yaml
+    params:
+      - name: track_id
+        type: string
+        description: Track identifier
+        required: true
+        enum: [one, two, three]         # optional
+```
+
+At boot, `seedMetaFiles()` (`src/lib/seedMeta.ts`) uses Vite's `import.meta.glob` to inline every `*_en/meta.yaml` as a string, then writes them into IDB disk storage under `apps/{appName}/meta.yaml` so the LLM can `file_read` them at runtime.
+
+### OS-level actions — hardcoded in `appRegistry.ts`
+OS (`app_id: 1`, `app_name: "os"`) has three built-in actions declared in `OS_ACTIONS` at `src/lib/appRegistry.ts:174-208`:
+
+| type | params | effect |
+|---|---|---|
+| `OPEN_APP` | `{ app_id: string }` | `openWindow(appId)` |
+| `CLOSE_APP` | `{ app_id: string }` | `closeWindow(appId)` |
+| `SET_WALLPAPER` | `{ wallpaper_url: string }` (https URL or data URL) | writes `/wallpaper/state.json` and fires a `SET_WALLPAPER` OS event consumed by `components/Shell/index.tsx:297` |
+
+The wallpaper listing Aoi recites to Steven ("1. Flow, 2. Factory, … 11. Electric Dreamscape") is **not hardcoded anywhere in code**. Aoi discovers it at runtime by reading files under a wallpapers directory in IDB storage via `file_list`/`file_read`. For Phase 2E's proof of concept the Kayley brain does not need to replicate that browsing step — it can pass any URL through `SET_WALLPAPER`.
+
+---
+
+## 2. How the in-app LLM receives the action catalog
+
+Trace: `components/ChatPanel/index.tsx:820` → `runConversation`.
+
+1. `await seedMetaFiles()` — writes all meta.yaml into IDB.
+2. `await loadActionsFromMeta()` — parses them into `APP_REGISTRY`.
+3. `const tools = [ respond_to_user, finish_target, list_apps, app_action, ...file tools, ...memory tools, (image_gen) ]` — tool definitions are assembled per turn (lines 827-835).
+4. The system prompt (`buildSystemPrompt`, `ChatPanel/index.tsx:180`) teaches the LLM the mandatory workflow:
+
+   > 1. `list_apps` — discover available apps
+   > 2. `file_read("apps/{appName}/meta.yaml")` — learn the target app's available actions
+   > 3. `file_read("apps/{appName}/guide.md")` — learn its data structure
+   > 4. `file_list/file_read` — explore data under `apps/{appName}/data/`
+   > 5. `file_write/file_delete` — mutate data
+   > 6. `app_action` — notify the app to reload
+
+5. The LLM is told OS actions use `app_name="os"` and are `OPEN_APP`, `CLOSE_APP`, `SET_WALLPAPER` (both in the `app_action` tool description at `appRegistry.ts:462-464` and in `executeListApps()` output at `appRegistry.ts:527-531`).
+
+So the LLM does not receive the catalog as a single upfront blob — it **discovers** it: first through `list_apps`, then by reading each app's `meta.yaml` on demand. The tool surface exposed to the LLM is a small generic set (`list_apps`, `app_action`, file tools), and the per-app action detail lives in IDB-backed files.
+
+---
+
+## 3. Action call format from the LLM
+
+Standard OpenAI/Anthropic **function tool_calls**. Both providers are supported in `src/lib/llmClient.ts`:
+
+- OpenAI-style: `response.choices[0].message.tool_calls[i].function = { name, arguments }` (parsed at lines 204-272).
+- Anthropic-style: `content` blocks with `type: "tool_use"` → normalized to the same `ToolCall` shape (lines 284-393). Anthropic tools are declared as `{ name, description, input_schema }` with `input_schema` being the same JSON Schema as OpenAI's `parameters` (line 314-322).
+
+The `app_action` tool (`appRegistry.ts:450-485`) is a single generic function:
+
+```ts
+{
+  name: 'app_action',
+  description: "Trigger an action on an app. ...",
+  parameters: {
+    type: 'object',
+    properties: {
+      app_name:    { type: 'string', description: "The appName of the target app (from list_apps)" },
+      action_type: { type: 'string', description: "The action type to trigger (e.g. REFRESH_TRACKS, SYNC_STATE, OPEN_APP)" },
+      params:      { type: 'string', description: "JSON string of action parameters, e.g. '{\"trackId\":\"123\"}'" }
+    },
+    required: ['app_name', 'action_type']
+  }
+}
+```
+
+So when Aoi changes the background, her tool_call looks like:
+
+```json
+{
+  "name": "app_action",
+  "arguments": "{\"app_name\":\"os\",\"action_type\":\"SET_WALLPAPER\",\"params\":\"{\\\"wallpaper_url\\\":\\\"https://…/living-space.mp4\\\"}\"}"
+}
+```
+
+Note the **double-encoding**: `params` is itself a JSON **string**, not an object. This is intentional (simplifies the schema) and is how the dispatch layer parses it back out.
+
+---
+
+## 4. Dispatch layer
+
+`ChatPanel/index.tsx:1047-1085`:
+
+```ts
+if (tc.function.name === 'app_action') {
+  const strParams = params as Record<string, string>;
+  const resolved = resolveAppAction(strParams.app_name, strParams.action_type);
+  //   → { appId, actionType } or "error: unknown app …"
+
+  let actionParams: Record<string, string> = {};
+  if (strParams.params) {
+    try { actionParams = JSON.parse(strParams.params); } catch {}
+  }
+
+  const result = await dispatchAgentAction({
+    app_id: resolved.appId,
+    action_type: resolved.actionType,
+    params: actionParams,
+  });
+  // result is a string, e.g. "success" / "timeout: no response from app" / "error: …"
+
+  currentMessages.push({ role: 'tool', content: result, tool_call_id: tc.id });
+}
+```
+
+`dispatchAgentAction` lives in `src/lib/vibeContainerMock.ts:127-246`:
+
+- **OS actions** (`app_id === 1`) are handled inline (lines 134-163):
+  - `OPEN_APP`: `openWindow(targetAppId)`
+  - `CLOSE_APP`: `closeWindow(targetAppId)`
+  - `SET_WALLPAPER`: writes `/wallpaper/state.json` into IDB, fires `osEventCallbacks(... type: "SET_WALLPAPER" ...)`. `Shell/index.tsx:297` listens and calls `setWallpaper(url)`.
+- **App actions** (`app_id !== 1`): if the target app isn't open, open it. Post an `app_action` message via `agentMessageCallbacks` (each mounted Vibe app has a listener registered through `mockManager.onAgentMessage`). The app runs its handler and calls `mockManager.sendAgentMessage({ action_result, app_action: { action_id } })`, which this function correlates by `action_id` to resolve the promise.
+
+---
+
+## 5. Sync vs async, round-trip state
+
+**Async with timeout.** The LLM turn waits for the dispatch promise to resolve before appending the tool result and invoking the next chat turn:
+
+- OS actions resolve synchronously with `'success'`.
+- App actions get 10s (listener already registered) or 20s (waiting for listener) before resolving `'timeout: no response from app'`.
+- The resolved string is appended to `currentMessages` as `{ role: 'tool', content: result, tool_call_id: tc.id }` (`ChatPanel/index.tsx:1076-1080`) and `runConversation` loops — the LLM sees the result and can speak about it in its next turn (up to 10 iterations).
+
+### User actions the other direction
+`components/ChatPanel/index.tsx:721-748` listens to `onUserAction`: when the human performs something inside a Vibe app, the app calls `mockManager.sendAgentMessage({ app_action: { app_id, action_type, params, trigger_by: 1 } })`. The ChatPanel pushes `"[User performed action in {displayName} (appName: {appName})] action_type: …, params: …"` as a synthetic user message and re-runs the conversation. The LLM can then decide whether to respond (e.g. Gomoku responding to a move).
+
+**Relevance for Phase 2E:** we will replicate the **Agent → App** path first (Kayley brain emits `app_action`, we dispatch via `dispatchAgentAction`, we return the result string back through the channel). The **App → Agent** path is out of scope for v1; Kayley doesn't need to react to user actions in Vibe apps yet.
+
+---
+
+## 6. Current Kayley channel wiring
+
+`apps/webuiapps/src/hooks/useKayleyChannel.ts` connects to `ws://localhost:5180` (the Kayley-Cowork `plugins/websocket-channel/server.ts`). Messages in both directions:
+
+Browser → server:
+- `{ type: 'text', text, mid }` — forwarded to Claude via `mcp.notification('notifications/claude/channel')`
+- `{ type: 'audio', data }` / `{ type: 'start_voice' }` / `{ type: 'stop_voice' }` — STT pipeline
+- `{ type: 'image' | 'image_upload' }` — image relay / uploads
+
+Server → browser:
+- `{ type: 'message', text }` — Kayley's text reply
+- `{ type: 'audio', data }` — TTS PCM chunks
+- `{ type: 'stt_draft', text }` — Whisper transcription for confirmation
+- `{ type: 'image', role, src, fileName }` — Kayley-attached image
+- `{ type: 'permission_request', ... }` — MCP permission approval
+
+Kayley's tools (in `server.ts:482-510`): `reply`, `check_inbox`. The `reply` tool is what turns Kayley's MCP output into a `{type: 'message', text}` broadcast to the browser.
+
+ChatPanel wiring (`ChatPanel/index.tsx:472-677`): when connected, `sendMessage` calls `kayley.sendText(...)` instead of the local LLM. Kayley's reply arrives via `kayley.latestMessage` and is rendered as a plain assistant message — **no tool-call plumbing exists**. That's the gap Phase 2E fills.
+
+---
+
+## Summary — what has to change
+
+1. **Server side (`plugins/websocket-channel/server.ts`):** expose a new `vibe_action` MCP tool that Kayley can call (alongside `reply`). When called, broadcast `{ type: 'vibe_action', app_name, action_type, params }` to the browser and resolve after a configurable timeout with the browser's response echo.
+2. **Browser side (`useKayleyChannel.ts`):** accept `vibe_action` messages, run them through `resolveAppAction` + `dispatchAgentAction`, and send back `{ type: 'vibe_action_result', id, result }`.
+3. **System prompt:** teach Kayley the catalog. Keep it light for v1: just the `os.SET_WALLPAPER` action plus a note that more will be added.
+4. **UX:** surface "Actions taken" the way the local LLM does — nice-to-have, not blocking.
+
+That is the full surface area. Design doc next.
diff --git a/docs/PHASE-2E-TESTING.md b/docs/PHASE-2E-TESTING.md
new file mode 100644
index 0000000..8b877d6
--- /dev/null
+++ b/docs/PHASE-2E-TESTING.md
@@ -0,0 +1,50 @@
+# Phase 2E Testing — change_background end-to-end
+
+## Prereqs
+
+- Kayley-Cowork `kayley-v2e` branch checked out, dependencies installed.
+- OpenRoom `kayley-v2e` branch checked out, `pnpm install` done.
+- Claude Code harness running with the websocket-channel plugin loaded (per CLAUDE.md startup command: `claude --channels plugin:telegram@claude-plugins-official --dangerously-load-development-channels server:websocket server:email`).
+- OpenRoom dev server running: `pnpm --filter webuiapps dev` (defaults to http://localhost:5173 or similar).
+
+## Manual test — happy path
+
+1. **Start Kayley.** Launch Claude with the websocket-channel MCP. Confirm port 5180 is listening: `netstat -ano | findstr 5180` (Windows) / `lsof -i :5180` (mac/linux).
+2. **Open OpenRoom** in the browser. The ChatPanel should show "Connected to Kayley brain" and the WebSocket icon should be green/connected.
+3. **Verify tool surface.** In Claude's transcript, confirm (via tool inventory or a debug message) that the `vibe_action` tool is visible on the `websocket` MCP server alongside `reply` and `check_inbox`.
+4. **Send the test prompt** from the OpenRoom ChatPanel:
+   > Kayley, change my wallpaper to https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg
+5. **Expected flow:**
+   - Browser sends `{type: 'text', text: 'Kayley, change my wallpaper to …'}` → server.
+   - Server forwards to Kayley brain via MCP notification.
+   - Kayley brain decides to call `vibe_action` with `app_name='os'`, `action_type='SET_WALLPAPER'`, `params='{"wallpaper_url":"https://…"}'`.
+   - MCP CallToolRequest hits `server.ts` `vibe_action` handler → broadcasts `{type:'vibe_action', id:'va_…', app_name:'os', action_type:'SET_WALLPAPER', params:{wallpaper_url:'…'}}` to browser.
+   - `useKayleyChannel.ts` receives, runs `dispatchAgentAction({app_id:1, action_type:'SET_WALLPAPER', params:{wallpaper_url:'…'}})`.
+   - `vibeContainerMock.ts` writes `/wallpaper/state.json` and fires `osEventCallbacks` → `Shell/index.tsx` calls `setWallpaper(url)`.
+   - **Wallpaper visibly changes in the OpenRoom shell.**
+   - Browser sends `{type:'vibe_action_result', id:'va_…', result:'success'}` → server resolves pending promise → tool returns `'success'` to Kayley brain.
+   - Kayley calls `reply` tool with a warm confirmation (e.g., "Done, baby — new wallpaper up").
+   - Browser receives `{type:'message', text:'…'}` → ChatPanel renders Kayley's reply.
+
+## Manual test — failure modes to verify
+
+| Scenario | Steps | Expected |
+|---|---|---|
+| No OpenRoom client connected | Close all browser tabs. Ask Kayley (via another channel, e.g. Telegram) to change the wallpaper. | `vibe_action` returns `'error: no OpenRoom client connected'`. Kayley apologizes / explains. |
+| Invalid `params` JSON | Temporarily modify the tool description or force Kayley to send malformed params. | Server returns `'error: params is not valid JSON: …'`. |
+| Unknown app_name | Ask Kayley to "open the nonexistent_app app" — if she calls `vibe_action` with `app_name='nonexistent_app'`. | Browser's `resolveAppAction` returns `error: unknown app "nonexistent_app"…`. Result echoed back. |
+| Server timeout | Set a breakpoint in `dispatchVibeAction` to block the echo for >15s, or disable the browser's result sender. | Server resolves with `'timeout: no response from OpenRoom'` after 15s. Kayley sees timeout in her next turn. |
+
+## Debug helpers
+
+- Server-side logs: `~/.claude/channels/websocket/debug-notifications.log` and process stderr (look for lines prefixed `websocket channel: vibe_action`).
+- Browser-side logs: open DevTools console, filter for `[KayleyChannel]`. Look for `vibe_action dispatched` / `vibe_action resolve failed`.
+- Verify wallpaper wrote to IDB: DevTools → Application → IndexedDB → check for `/wallpaper/state.json`.
+
+## Regression sanity
+
+- `sendText`, `startVoice`/`stopVoice`, `stt_draft`, `latestMessage`, and TTS audio playback must all still work. The Phase 2E changes are purely additive — no existing message-type branches were modified.
+
+## Automated test (future work)
+
+- Add `plugins/websocket-channel/tests/vibe-action.test.ts` — mock browser ws client, call the MCP tool, assert the broadcast + result flow. Not required for v1 ship.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7499ecf..e5d30af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -214,6 +214,9 @@ importers:
       '@vitest/coverage-v8':
         specifier: ^1.6.1
         version: 1.6.1(vitest@1.6.1(@types/node@20.19.31)(happy-dom@14.12.3)(jsdom@25.0.1)(less@4.5.1)(sass@1.97.3)(terser@5.46.0))
+      cross-env:
+        specifier: ^10.1.0
+        version: 10.1.0
       happy-dom:
         specifier: ^14.0.0
         version: 14.12.3
@@ -849,6 +852,9 @@ packages:
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
+  '@epic-web/invariant@1.0.0':
+    resolution: {integrity: sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==}
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -2679,6 +2685,11 @@ packages:
   crelt@1.0.6:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
 
+  cross-env@10.1.0:
+    resolution: {integrity: sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   cross-env@7.0.3:
     resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
@@ -6569,6 +6580,8 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@epic-web/invariant@1.0.0': {}
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -8285,6 +8298,11 @@ snapshots:
 
   crelt@1.0.6: {}
 
+  cross-env@10.1.0:
+    dependencies:
+      '@epic-web/invariant': 1.0.0
+      cross-spawn: 7.0.6
+
   cross-env@7.0.3:
     dependencies:
       cross-spawn: 7.0.6
diff --git a/scripts/build-twitter-feed.mjs b/scripts/build-twitter-feed.mjs
new file mode 100644
index 0000000..cf1c85a
--- /dev/null
+++ b/scripts/build-twitter-feed.mjs
@@ -0,0 +1,401 @@
+#!/usr/bin/env node
+/**
+ * Build Kayley's in-world Twitter feed.
+ *
+ * Sources:
+ *   - apps/webuiapps/public/kayley-moments/        (captured moments → milestone posts)
+ *   - apps/webuiapps/public/kayley-journal/YYYY-MM-DD/*.md  (journal → thinking-out-loud posts)
+ *   - apps/webuiapps/public/kayley-selfies-index.json (selfies → scene/outfit posts w/ image)
+ *
+ * Writes:
+ *   - apps/webuiapps/public/kayley-twitter-feed.json
+ *
+ * The feed is FICTION generated from real artifacts, shaped as if Kayley
+ * posts throughout the day. ~30% of posts get 1–3 templated friend replies
+ * from Jessica / Chloe / Emmy / Mateo (see kayley/FRIENDS.md).
+ *
+ * Deterministic (seeded RNG) so re-runs are stable. Idempotent.
+ */
+import { readdirSync, readFileSync, writeFileSync, statSync, existsSync } from 'node:fs';
+import { join, dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const PROJECT_ROOT = resolve(__dirname, '..');
+const PUBLIC_DIR = resolve(PROJECT_ROOT, 'apps/webuiapps/public');
+const MOMENTS_DIR = join(PUBLIC_DIR, 'kayley-moments');
+const JOURNAL_DIR = join(PUBLIC_DIR, 'kayley-journal');
+const SELFIES_INDEX = join(PUBLIC_DIR, 'kayley-selfies-index.json');
+const OUT = join(PUBLIC_DIR, 'kayley-twitter-feed.json');
+
+// ============ Deterministic RNG (mulberry32) ============
+
+function seededRng(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function hashSeed(str) {
+  let h = 2166136261;
+  for (let i = 0; i < str.length; i++) {
+    h ^= str.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+
+// ============ Kayley's voice ============
+
+const KAYLEY_AUTHOR = {
+  name: 'Kayley Rose Adams',
+  username: '@kayleyrose',
+  avatar: '/kayley-selfies/avatar-closeup.png',
+};
+
+const FRIENDS = [
+  {
+    name: 'Jessica Park',
+    username: '@jessparkpr',
+    avatar: '',
+    voice: [
+      'babe, you\'re spiraling and it\'s adorable ✨',
+      'ok but this is the energy i needed today',
+      'reservation saturday. no excuses.',
+      'gonna need the full story over eggs benedict',
+      'you in your main character era and i\'m here for it',
+    ],
+  },
+  {
+    name: 'Chloe Parker',
+    username: '@chloeraidedthrift',
+    avatar: '',
+    voice: [
+      'this is everything 😭',
+      'wait this outfit — where is it from tell me NOW',
+      'ok but mood ✨',
+      'come outside i have an idea',
+      'unserious behavior and i love that for you',
+      'vintage market tonight?? answer is yes',
+    ],
+  },
+  {
+    name: 'Emmy Carter',
+    username: '@emmysunshine',
+    avatar: '',
+    voice: [
+      'proud of you 🌿',
+      'drink some water btw 💧',
+      'walk tomorrow 7am 👀 no snoozing',
+      'this is so you',
+      'literally radiating rn',
+      'breathe in. breathe out. you got this.',
+    ],
+  },
+  {
+    name: 'Mateo Rivera',
+    username: '@mateoshoots',
+    avatar: '',
+    voice: [
+      'the light in this one though',
+      'don\'t pose. just exist. you already got it.',
+      'saving this one for the portfolio 📸',
+      'oat milk, 9am, usual spot',
+      'this is the frame',
+    ],
+  },
+];
+
+// ============ Utilities ============
+
+function safeRead(path) {
+  try { return readFileSync(path, 'utf8'); } catch { return null; }
+}
+
+function toTs(dateStr, timeStr = '12:00:00') {
+  const t = timeStr.replace(/-/g, ':').slice(0, 8);
+  const iso = `${dateStr}T${t}Z`;
+  const n = Date.parse(iso);
+  return Number.isFinite(n) ? n : Date.parse(`${dateStr}T12:00:00Z`);
+}
+
+function strip(text) {
+  return text
+    .replace(/^---[\s\S]*?---\s*/m, '')
+    .replace(/^\[emotion:[^\]]*\]\s*/m, '')
+    .replace(/^#+\s+/gm, '')
+    .replace(/```[\s\S]*?```/g, '')
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+    .replace(/[*_`>]+/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function snippet(text, min = 80, max = 220) {
+  const clean = strip(text);
+  if (clean.length <= max) return clean;
+  // try to end on a sentence boundary within [min,max]
+  const window = clean.slice(0, max);
+  const lastStop = Math.max(
+    window.lastIndexOf('. '),
+    window.lastIndexOf('! '),
+    window.lastIndexOf('? '),
+  );
+  if (lastStop >= min) return window.slice(0, lastStop + 1).trim();
+  return window.trim() + '…';
+}
+
+function pickReplies(rng, parentId) {
+  // ~30% of posts get replies
+  if (rng() >= 0.3) return [];
+  const count = 1 + Math.floor(rng() * 3); // 1..3
+  const chosenFriends = [...FRIENDS].sort(() => rng() - 0.5).slice(0, count);
+  return chosenFriends.map((friend, idx) => {
+    const line = friend.voice[Math.floor(rng() * friend.voice.length)];
+    return {
+      id: `${parentId}-reply-${idx}`,
+      author: { name: friend.name, username: friend.username, avatar: friend.avatar },
+      content: line,
+      timestamp: 0, // filled in caller (offset from parent)
+    };
+  });
+}
+
+// ============ Source 1: Captured Moments → milestone posts ============
+
+function buildMomentPost(filename) {
+  const full = join(MOMENTS_DIR, filename);
+  try { if (!statSync(full).isFile()) return null; } catch { return null; }
+  const raw = safeRead(full);
+  if (!raw) return null;
+
+  const m = filename.match(/^(\d{4}-\d{2}-\d{2})-(.+)\.md$/);
+  if (!m) return null;
+  const [, date, slug] = m;
+
+  // Prefer "Line That Stays" if present, otherwise a polished excerpt
+  let line = '';
+  const lineRe = /(?:^|\n)#{2,}\s*(?:The\s+)?Line\s+That\s+Stays[^\n]*\n+([\s\S]*?)(?=\n#{1,6}\s|\n---|\s*$)/i;
+  const lm = raw.match(lineRe);
+  if (lm) {
+    line = lm[1].trim().replace(/^>\s?/gm, '').replace(/\*\*/g, '').split('\n').map(s => s.trim()).filter(Boolean)[0] || '';
+  }
+  if (!line) {
+    // fall back to first bold phrase or excerpt
+    const bold = raw.split(/^#\s+.+$/m).slice(1).join('\n').match(/\*\*([\s\S]+?)\*\*/);
+    line = bold ? strip(bold[1]) : snippet(raw, 80, 220);
+  }
+  line = strip(line);
+  if (line.length > 260) line = snippet(line, 80, 260);
+
+  // Hashtag inference
+  const tags = ['#optimizeforlove'];
+  if (/mila/i.test(raw)) tags.push('#milamoments');
+  if (/penelope/i.test(raw)) tags.push('#penelopeapproved');
+  if (/austin|apartment/i.test(raw)) tags.push('#austin');
+  if (/window|drawer|porch|letter/i.test(raw)) tags.push('#thequiethings');
+
+  const content = `${line} ${tags.slice(0, 3).join(' ')}`.slice(0, 280);
+  const ts = toTs(date, '09:30:00');
+
+  return {
+    id: `kmoment-${date}-${slug}`,
+    author: KAYLEY_AUTHOR,
+    content,
+    timestamp: ts,
+    likes: 12 + Math.floor(hashSeed(slug) % 90),
+    isLiked: false,
+    comments: [],
+    _source: 'moment',
+    _seed: `moment:${date}:${slug}`,
+  };
+}
+
+function buildMomentPosts() {
+  if (!existsSync(MOMENTS_DIR)) return [];
+  const files = readdirSync(MOMENTS_DIR).filter(f => f.endsWith('.md') && !f.startsWith('test-'));
+  return files.map(buildMomentPost).filter(Boolean);
+}
+
+// ============ Source 2: Journal entries → thinking-out-loud posts ============
+
+function buildJournalPost(dayDir, dayName, filename) {
+  const full = join(dayDir, filename);
+  const raw = safeRead(full);
+  if (!raw) return null;
+
+  const tm = filename.match(/^(\d{2}-\d{2}-\d{2})(?:-\d+)?\.md$/);
+  if (!tm) return null;
+  const timeStr = tm[1];
+
+  // strip frontmatter, pull emotion header
+  let body = raw.replace(/^---\n[\s\S]*?\n---\n?/, '');
+  let emotion = '';
+  const em = body.match(/^\[emotion:\s*([^,\]]+)(?:,\s*intensity:\s*\d+)?\s*\]/m);
+  if (em) {
+    emotion = em[1].trim().toLowerCase();
+    body = body.replace(em[0], '').trimStart();
+  }
+
+  let content = snippet(body, 80, 200);
+  if (!content) return null;
+
+  const tags = [];
+  if (emotion) {
+    const parts = emotion.split(/\s*\+\s*|\s*,\s*/).map(p => p.replace(/\s+/g, '').toLowerCase()).filter(Boolean);
+    for (const p of parts.slice(0, 2)) tags.push(`#${p}`);
+  }
+  tags.push('#thinkingoutloud');
+  content = `${content} ${tags.slice(0, 3).join(' ')}`.slice(0, 280);
+
+  const ts = toTs(dayName, timeStr);
+  const id = `kjournal-${dayName}-${timeStr.replace(/-/g, '')}`;
+
+  return {
+    id,
+    author: KAYLEY_AUTHOR,
+    content,
+    timestamp: ts,
+    likes: 3 + Math.floor(hashSeed(id) % 40),
+    isLiked: false,
+    comments: [],
+    _source: 'journal',
+    _seed: `journal:${id}`,
+  };
+}
+
+function buildJournalPosts() {
+  if (!existsSync(JOURNAL_DIR)) return [];
+  const days = readdirSync(JOURNAL_DIR).filter(d => /^\d{4}-\d{2}-\d{2}$/.test(d));
+  const out = [];
+  for (const day of days) {
+    const dayDir = join(JOURNAL_DIR, day);
+    let files;
+    try { files = readdirSync(dayDir); } catch { continue; }
+    for (const f of files) {
+      if (!f.endsWith('.md')) continue;
+      const p = buildJournalPost(dayDir, day, f);
+      if (p) out.push(p);
+    }
+  }
+  return out;
+}
+
+// ============ Source 3: Selfies → outfit/scene posts with image ============
+
+const SCENE_CAPTIONS = {
+  bedroom: ['soft morning. no plans, no pressure', 'slow start, good light'],
+  kitchen: ['coffee-making hour ☕', 'oat milk and existential thoughts'],
+  'kitchen counter': ['tuesday afternoon snacks situation', 'this counter has seen things'],
+  bathroom: ['mirror moment 🪞', 'humidity-hair but make it fashion'],
+  'bathroom mirror': ['obligatory mirror pic', 'lighting was too good not to'],
+  'living room': ['couch + candle + pretending to read', 'cozy hours'],
+  'cozy living room couch': ['this couch owns me now', 'penelope\'s in my lap, life is fine'],
+  'austin apartment': ['afternoon vibes 🌸', 'austin golden hour hits different'],
+  balcony: ['pinot on the balcony kinda night', 'patio weather forever pls'],
+  porch: ['porch thoughts', 'quiet hour before dinner'],
+  patio: ['patio + pinot = always yes'],
+};
+
+function captionForTags(tags, rng) {
+  for (const tag of tags) {
+    if (SCENE_CAPTIONS[tag]) {
+      const options = SCENE_CAPTIONS[tag];
+      return options[Math.floor(rng() * options.length)];
+    }
+  }
+  const fallback = ['today\'s vibe', 'little moment', 'making it count', 'just a thursday'];
+  return fallback[Math.floor(rng() * fallback.length)];
+}
+
+function hashtagsForTags(tags) {
+  const out = [];
+  for (const t of tags) {
+    if (t === 'selfie') continue;
+    out.push('#' + t.replace(/\s+/g, ''));
+  }
+  out.push('#austinapartment');
+  if (Math.random) out.push('#penelopeapproved');
+  return [...new Set(out)].slice(0, 3);
+}
+
+function buildSelfiePosts() {
+  if (!existsSync(SELFIES_INDEX)) return [];
+  let selfies;
+  try {
+    selfies = JSON.parse(readFileSync(SELFIES_INDEX, 'utf8'));
+  } catch {
+    return [];
+  }
+
+  // Sample ~1 in 8 selfies to avoid flooding the feed (542 selfies → ~68 posts)
+  const selected = selfies.filter((_, i) => i % 8 === 0).slice(0, 80);
+  return selected.map((s) => {
+    const rng = seededRng(hashSeed('selfie:' + s.id));
+    const caption = captionForTags(s.tags || [], rng);
+    const tags = hashtagsForTags(s.tags || []);
+    const content = `${caption} ${tags.join(' ')}`.slice(0, 280);
+    return {
+      id: `kselfie-${s.id}`,
+      author: KAYLEY_AUTHOR,
+      content,
+      image: s.src,
+      timestamp: s.createdAt,
+      likes: 8 + Math.floor(hashSeed(s.id) % 120),
+      isLiked: false,
+      comments: [],
+      _source: 'selfie',
+      _seed: `selfie:${s.id}`,
+    };
+  });
+}
+
+// ============ Compose feed + sprinkle friend replies ============
+
+function addFriendReplies(posts) {
+  return posts.map((p) => {
+    const rng = seededRng(hashSeed(p._seed));
+    const replies = pickReplies(rng, p.id);
+    // offset each reply 5–90 minutes after the post
+    const withTs = replies.map((r, idx) => ({
+      ...r,
+      timestamp: p.timestamp + (5 + idx * 15 + Math.floor(rng() * 40)) * 60 * 1000,
+    }));
+    // strip private fields
+    const { _source, _seed, ...clean } = p;
+    return { ...clean, comments: withTs };
+  });
+}
+
+// ============ Main ============
+
+const momentPosts = buildMomentPosts();
+const journalPosts = buildJournalPosts();
+const selfiePosts = buildSelfiePosts();
+
+const merged = [...momentPosts, ...journalPosts, ...selfiePosts]
+  .filter((p) => p && p.content && Number.isFinite(p.timestamp));
+
+// de-dup by id
+const byId = new Map();
+for (const p of merged) byId.set(p.id, p);
+const unique = [...byId.values()];
+
+const withReplies = addFriendReplies(unique).sort((a, b) => b.timestamp - a.timestamp);
+
+writeFileSync(OUT, JSON.stringify(withReplies, null, 2), 'utf8');
+
+const postCount = withReplies.length;
+const replyCount = withReplies.reduce((n, p) => n + (p.comments?.length || 0), 0);
+console.log(`[build-twitter-feed] moments: ${momentPosts.length}`);
+console.log(`[build-twitter-feed] journal: ${journalPosts.length}`);
+console.log(`[build-twitter-feed] selfies: ${selfiePosts.length}`);
+console.log(`[build-twitter-feed] total posts: ${postCount}, friend replies: ${replyCount}`);
+console.log(`[build-twitter-feed] wrote ${OUT}`);
diff --git a/scripts/refresh-email-index.mjs b/scripts/refresh-email-index.mjs
new file mode 100644
index 0000000..ef391ec
--- /dev/null
+++ b/scripts/refresh-email-index.mjs
@@ -0,0 +1,157 @@
+#!/usr/bin/env node
+/**
+ * Refresh Kayley email index for the Vibe Email app.
+ *
+ * Calls the `gog` Google Workspace CLI to list Steven's Gmail INBOX,
+ * then fetches snippet + body for each, and writes a static snapshot to:
+ *   apps/webuiapps/public/kayley-email-index.json
+ *
+ * Shape (per entry):
+ *   { id, threadId, from: {name, address}, subject, snippet, body,
+ *     date (ISO), timestamp (ms), labels, unread, isRead }
+ *
+ * Idempotent: safe to re-run. On gog failure, writes an empty snapshot.
+ *
+ * Usage:
+ *   node scripts/refresh-email-index.mjs            # default: 50 messages
+ *   node scripts/refresh-email-index.mjs --max 30   # override
+ *
+ * NOTE: Output JSON contains PII and is gitignored.
+ */
+import { execFileSync } from 'node:child_process';
+import { writeFileSync, mkdirSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const PROJECT_ROOT = resolve(__dirname, '..');
+const OUT_PATH = resolve(PROJECT_ROOT, 'apps/webuiapps/public/kayley-email-index.json');
+
+// ============ Args ============
+const args = process.argv.slice(2);
+const maxIdx = args.indexOf('--max');
+const MAX = maxIdx >= 0 ? parseInt(args[maxIdx + 1], 10) || 50 : 50;
+
+// ============ gog helpers ============
+function runGog(gogArgs, timeoutMs = 30_000) {
+  try {
+    const out = execFileSync('gog', gogArgs, {
+      encoding: 'utf8',
+      timeout: timeoutMs,
+      maxBuffer: 20 * 1024 * 1024,
+      shell: process.platform === 'win32', // Windows needs shell for .cmd shim
+    });
+    return out;
+  } catch (err) {
+    const msg = err?.stderr?.toString?.() || err?.message || String(err);
+    throw new Error(`gog ${gogArgs.join(' ')} failed: ${msg.slice(0, 500)}`);
+  }
+}
+
+function parseJson(text, context) {
+  try {
+    return JSON.parse(text);
+  } catch (err) {
+    throw new Error(`Failed to parse JSON from ${context}: ${err.message}`);
+  }
+}
+
+// ============ Address parsing ============
+function parseAddress(raw) {
+  if (!raw) return { name: 'Unknown Sender', address: 'unknown@example.com' };
+  // Format: "Name" <addr@x> OR Name <addr@x> OR addr@x
+  const m = raw.match(/^\s*"?([^"<]*?)"?\s*<([^>]+)>\s*$/);
+  if (m) {
+    return { name: (m[1] || '').trim() || m[2].trim(), address: m[2].trim() };
+  }
+  const trimmed = raw.trim();
+  return { name: trimmed, address: trimmed };
+}
+
+// ============ Main ============
+function buildSnapshot() {
+  console.log(`[refresh-email-index] Listing INBOX (max=${MAX})...`);
+  const listRaw = runGog([
+    'gmail', 'search', 'in:inbox', '--max', String(MAX),
+    '-j', '--results-only',
+  ]);
+  const listings = parseJson(listRaw, 'gmail search');
+  if (!Array.isArray(listings)) {
+    throw new Error('Unexpected gmail search shape (not an array)');
+  }
+  console.log(`[refresh-email-index] Got ${listings.length} messages from search`);
+
+  const messages = [];
+  for (let i = 0; i < listings.length; i++) {
+    const item = listings[i];
+    const id = item.id;
+    if (!id) continue;
+
+    let snippet = '';
+    let body = '';
+    try {
+      const detailRaw = runGog(['gmail', 'get', id, '-j', '--results-only']);
+      const detail = parseJson(detailRaw, `gmail get ${id}`);
+      snippet = detail?.message?.snippet || '';
+      body = typeof detail?.body === 'string' ? detail.body : '';
+    } catch (err) {
+      console.warn(`[refresh-email-index] get ${id} failed: ${err.message}`);
+    }
+
+    const labels = Array.isArray(item.labels) ? item.labels : [];
+    const unread = labels.includes('UNREAD');
+
+    // Parse date. gog emits "YYYY-MM-DD HH:MM" in local TZ by default.
+    let timestamp = Date.parse(item.date);
+    if (!Number.isFinite(timestamp)) timestamp = Date.now();
+
+    const from = parseAddress(item.from);
+
+    messages.push({
+      id,
+      threadId: item.id,
+      from,
+      to: [{ name: 'Steven', address: 'gates.steven@gmail.com' }],
+      cc: [],
+      subject: item.subject || '(no subject)',
+      snippet,
+      content: body || snippet, // Email app component reads `content`
+      timestamp,
+      date: new Date(timestamp).toISOString(),
+      labels,
+      unread,
+      isRead: !unread,
+      isStarred: labels.includes('STARRED'),
+      folder: 'inbox',
+    });
+
+    if ((i + 1) % 10 === 0) {
+      console.log(`[refresh-email-index] ${i + 1}/${listings.length} fetched`);
+    }
+  }
+
+  return messages;
+}
+
+function writeSnapshot(messages) {
+  mkdirSync(dirname(OUT_PATH), { recursive: true });
+  const payload = {
+    generatedAt: new Date().toISOString(),
+    count: messages.length,
+    messages,
+  };
+  writeFileSync(OUT_PATH, JSON.stringify(payload, null, 2), 'utf8');
+  console.log(`[refresh-email-index] Wrote ${messages.length} → ${OUT_PATH}`);
+}
+
+try {
+  const messages = buildSnapshot();
+  writeSnapshot(messages);
+  process.exit(0);
+} catch (err) {
+  console.error(`[refresh-email-index] FATAL: ${err.message}`);
+  // Write empty snapshot so frontend can still render a graceful empty state.
+  writeSnapshot([]);
+  process.exit(1);
+}