clementine-agent 1.18.31 → 1.18.32

package/dist/cli/dashboard.js

@@ -3363,6 +3363,8 @@ export async function cmdDashboard(opts) {
             const folderFilter = typeof req.query.folder === 'string' ? req.query.folder : '';
             const search = typeof req.query.q === 'string' ? req.query.q.toLowerCase() : '';
             const includeAuto = req.query.includeAuto === '1';
+            const typeFilter = typeof req.query.type === 'string' ? req.query.type : '';
+            const tagFilter = typeof req.query.tag === 'string' ? req.query.tag : '';
             const cutoffMs = Date.now() - sinceDays * 24 * 60 * 60 * 1000;
             const vaultRoot = path.join(BASE_DIR, 'vault');
             const matter = (await import('gray-matter')).default;
@@ -3413,6 +3415,8 @@ export async function cmdDashboard(opts) {
                     // Skip system housekeeping files (their author will surface via mtime in agent's own dir)
                     let title = path.basename(rel, '.md');
                     let typeTag = null;
+                    let categoryTag = null;
+                    let tags = [];
                     try {
                         const head = readFileSync(full, 'utf-8').slice(0, 4000);
                         const parsed = matter(head);
@@ -3428,6 +3432,14 @@ export async function cmdDashboard(opts) {
                         }
                         if (typeof data.type === 'string')
                             typeTag = data.type;
+                        if (typeof data.category === 'string')
+                            categoryTag = data.category;
+                        if (Array.isArray(data.tags)) {
+                            tags = data.tags.filter((t) => typeof t === 'string');
+                        }
+                        else if (typeof data.tags === 'string') {
+                            tags = data.tags.split(/[,\s]+/).map(s => s.trim()).filter(Boolean);
+                        }
                     }
                     catch { /* */ }
                     files.push({
@@ -3439,6 +3451,8 @@ export async function cmdDashboard(opts) {
                         mtime: new Date(stat.mtimeMs).toISOString(),
                         sizeBytes: stat.size,
                         type: typeTag,
+                        category: categoryTag,
+                        tags,
                     });
                 }
             }
@@ -3452,19 +3466,33 @@ export async function cmdDashboard(opts) {
                     return false;
                 if (folderFilter && f.folder !== folderFilter)
                     return false;
+                if (typeFilter && f.type !== typeFilter)
+                    return false;
+                if (tagFilter && !f.tags.includes(tagFilter))
+                    return false;
                 if (search) {
-                    const hay = (f.title + ' ' + f.relPath).toLowerCase();
+                    const hay = (f.title + ' ' + f.relPath + ' ' +
+                        (f.type || '') + ' ' + (f.category || '') + ' ' +
+                        f.tags.join(' ')).toLowerCase();
                     if (!hay.includes(search))
                         return false;
                 }
                 return true;
             })
                 .slice(0, limit);
-            // Compute folder counts for filter chips
+            // Facet counts reflect the unfiltered set so the rail keeps the full
+            // vocabulary visible after a filter is applied.
             const folderCounts = {};
-            for (const f of files)
+            const typeCounts = {};
+            const tagCounts = {};
+            for (const f of files) {
                 folderCounts[f.folder] = (folderCounts[f.folder] || 0) + 1;
-            res.json({ files: filtered, total: files.length, folderCounts });
+                if (f.type)
+                    typeCounts[f.type] = (typeCounts[f.type] || 0) + 1;
+                for (const t of f.tags)
+                    tagCounts[t] = (tagCounts[t] || 0) + 1;
+            }
+            res.json({ files: filtered, total: files.length, folderCounts, typeCounts, tagCounts });
         }
         catch (err) {
             res.status(500).json({ error: String(err) });
@@ -3482,6 +3510,22 @@ export async function cmdDashboard(opts) {
                 res.status(404).json({ error: 'Not found' });
                 return;
             }
+            const headOnly = req.query.head === '1';
+            if (headOnly) {
+                const stat = statSync(full);
+                const head = readFileSync(full, 'utf-8').slice(0, 4000);
+                const matter = (await import('gray-matter')).default;
+                const parsed = matter(head);
+                const snippet = (parsed.content || '').replace(/^#+\s.*$/m, '').trim().slice(0, 400);
+                res.json({
+                    path: relPath,
+                    frontmatter: parsed.data,
+                    snippet,
+                    sizeBytes: stat.size,
+                    mtime: new Date(stat.mtimeMs).toISOString(),
+                });
+                return;
+            }
             const content = readFileSync(full, 'utf-8');
             res.json({ path: relPath, content });
         }
@@ -4071,27 +4115,60 @@ export async function cmdDashboard(opts) {
                 res.status(400).json({ error: 'name required' });
                 return;
             }
-            const [{ saveWorkflow, workflowId: makeId }, { emitBuilderEvent }] = await Promise.all([
+            const [{ saveWorkflow, workflowId: makeId }, { emitBuilderEvent }, yamlMod] = await Promise.all([
                 import('../dashboard/builder/serializer.js'),
                 import('../dashboard/builder/events.js'),
+                import('js-yaml'),
             ]);
             const slug = body.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 64) || 'routine';
             const agentSlug = body.agent ? (String(body.agent).trim() || undefined) : undefined;
+            // Parse the agent's draft if present; on any parse error fall back to the
+            // single-step stub so the user lands in the editor with something usable.
+            let steps = null;
+            if (body.draftYaml && typeof body.draftYaml === 'string') {
+                try {
+                    const parsed = yamlMod.load(body.draftYaml);
+                    if (parsed && typeof parsed === 'object') {
+                        steps = Object.entries(parsed).map(([id, raw]) => {
+                            const r = (raw && typeof raw === 'object') ? raw : {};
+                            const dependsOn = Array.isArray(r.dependsOn)
+                                ? r.dependsOn.map(String)
+                                : (typeof r.dependsOn === 'string' ? r.dependsOn.split(',').map(s => s.trim()).filter(Boolean) : []);
+                            return {
+                                id: String(id),
+                                prompt: String(r.prompt ?? ''),
+                                dependsOn,
+                                tier: typeof r.tier === 'number' ? r.tier : 1,
+                                maxTurns: typeof r.maxTurns === 'number' ? r.maxTurns : 15,
+                                ...(typeof r.model === 'string' ? { model: r.model } : {}),
+                                ...(typeof r.workDir === 'string' ? { workDir: r.workDir } : {}),
+                                ...(typeof r.kind === 'string' && r.kind !== 'prompt' ? { kind: r.kind } : {}),
+                            };
+                        }).filter(s => s.id);
+                        if (steps.length === 0)
+                            steps = null;
+                    }
+                }
+                catch {
+                    steps = null;
+                }
+            }
             const wf = {
                 name: body.name,
                 description: body.description ?? '',
                 enabled: true,
                 trigger: body.schedule ? { schedule: body.schedule, manual: false } : { manual: true },
                 inputs: {},
-                steps: [{
+                steps: (steps ?? [{
                         id: 's1',
-                        prompt: body.initialPrompt ?? 'Describe what this routine should do.',
+                        prompt: body.initialPrompt ?? 'Describe what this trick should do.',
                         dependsOn: [],
                         tier: 1,
                         maxTurns: 15,
-                    }],
+                    }]),
                 sourceFile: '',
                 agentSlug,
+                ...(body.model ? { model: body.model } : {}),
             };
             const id = makeId(slug, agentSlug);
             const result = saveWorkflow(id, wf);
@@ -4156,7 +4233,7 @@ export async function cmdDashboard(opts) {
                 return;
             }
             if (parsed.origin === 'cron') {
-                res.status(400).json({ error: 'This routine came from a legacy cron entry — disable it instead, or edit CRON.md directly.' });
+                res.status(400).json({ error: 'This trick came from a legacy cron entry — disable it instead, or edit CRON.md directly.' });
                 return;
             }
             const wf = readWorkflow(id);
@@ -4219,7 +4296,7 @@ export async function cmdDashboard(opts) {
                 });
                 child.unref();
                 broadcastEvent({ type: 'cron_triggered', data: { job: wf.name } });
-                res.json({ ok: true, message: `Triggered routine: ${wf.name}` });
+                res.json({ ok: true, message: `Triggered trick: ${wf.name}` });
                 return;
             }
             // Workflow-origin routines: side-effect approval gate, then route through gateway.handleWorkflow.
@@ -4245,12 +4322,12 @@ export async function cmdDashboard(opts) {
                 res.status(409).json({
                     ok: false,
                     error: 'approval_required',
-                    message: 'This routine may send, write, post, or call external tools. Approve side effects before running it.',
+                    message: 'This trick may send, write, post, or call external tools. Approve side effects before running it.',
                     sideEffects,
                 });
                 return;
             }
-            res.json({ ok: true, message: `Routine "${wf.name}" triggered` });
+            res.json({ ok: true, message: `Trick "${wf.name}" triggered` });
             broadcastEvent({ type: 'workflow_triggered', data: { id, name: wf.name } });
             getGateway().then(gw => gw.handleWorkflow(wf, body.inputs || {})).then(result => {
                 broadcastEvent({ type: 'workflow_complete', data: { id, name: wf.name, status: 'ok', preview: (result || '').slice(0, 300) } });
@@ -7942,10 +8019,14 @@ If the tool returns nothing or errors, return an empty array \`[]\`.`,
                             `Help the user think about what makes a good agent: clear role, specific tools, focused personality. Keep it conversational — one question at a time.\n` +
                             `When the user says "save" or approves, output the final artifact block.]\n\n`
                         : type === 'workflow'
-                            ? `[BUILDER MODE: You are helping build a multi-step workflow pipeline. As you develop the workflow, output the current state as a JSON block:\n` +
-                                '```json-artifact\n{"type":"workflow","name":"...","description":"...","schedule":"","steps":"step1:\\n  prompt: ...\\nstep2:\\n  prompt: ...\\n  dependsOn: step1"}\n```\n' +
-                                `Update this block in EVERY response as the workflow evolves. Ask about: what the workflow should accomplish, what steps are needed, which agents should run each step, dependencies between steps, and whether it should be triggered on a schedule or manually.\n` +
-                                `Workflows are defined as markdown files with YAML frontmatter. Each step has an id, prompt, optional agent, and optional dependsOn array.\n` +
+                            ? `[BUILDER MODE: You are helping the user build a "trick" — a (possibly multi-step) thing Clementine can do on a schedule or on demand. As you develop it, output the current state as a JSON block:\n` +
+                                '```json-artifact\n{"type":"workflow","name":"...","description":"...","schedule":"","model":"","steps":"step1:\\n  prompt: ...\\nstep2:\\n  prompt: ...\\n  dependsOn: step1"}\n```\n' +
+                                `Update this block in EVERY response. Keep it conversational — one question at a time. Ask about (in roughly this order):\n` +
+                                `  1. The goal (one sentence is fine).\n` +
+                                `  2. When it should run — natural language is fine ("every weekday at 9"); convert to a cron expression in the schedule field. Empty schedule = manual.\n` +
+                                `  3. Which tools, projects, or channels she'll need (MCP servers, local CLIs like sf/gh/gcloud, Slack/Discord targets).\n` +
+                                `  4. Which model — claude-opus-4-7 (most capable), claude-sonnet-4-6 (balanced), or claude-haiku-4-5-20251001 (fastest). Leave model empty if the user doesn't care.\n` +
+                                `Most tricks need only one prompt step. Add steps only when the user explicitly wants a multi-step pipeline.\n` +
                                 `When the user says "save" or approves, output the final artifact block.]\n\n`
                             : `[BUILDER MODE: You are helping configure an artifact. Output structured JSON blocks as you build.]\n\n`;
             enrichedMessage = builderPrefix + fileContext + toolContext + artifactContext + message;
@@ -14156,6 +14237,75 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
     font-weight: 500;
   }
 
+  /* Unified Memory tab — facet rail */
+  .vault-facet-list { display: flex; flex-direction: column; gap: 3px; }
+  .vault-facet-row {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 5px 8px; border-radius: 6px; cursor: pointer;
+    color: var(--text-secondary); font-size: 12px;
+    user-select: none; transition: background var(--motion);
+  }
+  .vault-facet-row:hover { background: var(--bg-hover); color: var(--text-primary); }
+  .vault-facet-row.active { background: var(--clementine-bg); color: var(--clementine); font-weight: 500; }
+  .vault-facet-row .vault-facet-count { font-size: 11px; opacity: 0.6; margin-left: 8px; }
+  .vault-facet-row.active .vault-facet-count { opacity: 0.85; }
+
+  /* Unified Memory tab — file list rows */
+  .vault-mem-row {
+    display: flex; flex-direction: column; gap: 3px;
+    padding: 10px 14px; border-bottom: 1px solid var(--border-light);
+    cursor: pointer; transition: background var(--motion);
+  }
+  .vault-mem-row:hover { background: var(--bg-hover); }
+  .vault-mem-row.active { background: var(--clementine-bg); }
+  .vault-mem-row.active .vault-mem-row-title { color: var(--clementine); }
+  .vault-mem-row-title {
+    font-weight: 500; color: var(--text-primary); font-size: 13px;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .vault-mem-row-meta {
+    font-size: 11px; color: var(--text-muted);
+    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+  }
+  .vault-mem-row-path {
+    font-family: 'JetBrains Mono', monospace; font-size: 10px;
+    color: var(--text-muted); opacity: 0.75;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .vault-pill {
+    display: inline-block; padding: 1px 7px; border-radius: 10px;
+    font-size: 10px; line-height: 1.5; background: var(--bg-tertiary); color: var(--text-secondary);
+  }
+  .vault-pill.type { background: var(--clementine-bg); color: var(--clementine); }
+  .vault-pill.tag { background: var(--bg-tertiary); color: var(--text-secondary); }
+  .vault-pill.match { background: rgba(245,158,11,0.15); color: #d97706; }
+
+  /* Unified Memory tab — reader */
+  .vault-reader-fm {
+    background: var(--bg-secondary); border: 1px solid var(--border-light);
+    border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px;
+    font-size: 12px; display: grid; grid-template-columns: max-content 1fr;
+    gap: 4px 12px; align-items: baseline;
+  }
+  .vault-reader-fm .k { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
+  .vault-reader-fm .v { color: var(--text-primary); word-break: break-word; }
+  .vault-reader-body { max-width: 760px; }
+  .vault-reader-body h1 { font-size: 22px; margin: 0 0 12px; }
+  .vault-reader-body h2 { font-size: 17px; margin: 22px 0 8px; padding-top: 8px; border-top: 1px solid var(--border-light); }
+  .vault-reader-body h3 { font-size: 14px; margin: 16px 0 6px; color: var(--text-secondary); }
+  .vault-reader-body p, .vault-reader-body li { font-size: 14px; line-height: 1.65; }
+  .vault-reader-body code { background: var(--bg-tertiary); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
+  .vault-reader-body pre { background: var(--bg-tertiary); padding: 10px 12px; border-radius: 6px; overflow-x: auto; font-size: 12px; }
+  .vault-reader-toc {
+    margin-top: 18px; padding: 10px 14px;
+    background: var(--bg-secondary); border: 1px solid var(--border-light);
+    border-radius: var(--radius-sm); font-size: 12px;
+  }
+  .vault-reader-toc-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; }
+  .vault-reader-toc a { display: block; color: var(--text-secondary); text-decoration: none; padding: 2px 0; }
+  .vault-reader-toc a:hover { color: var(--clementine); }
+  .vault-reader-toc a.lvl-3 { padding-left: 14px; font-size: 11px; }
+
   /* ── Task Cards ─────────────────────────── */
   .task-grid {
     display: grid;
@@ -14882,7 +15032,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
       <div class="nav-item active" data-page="home" data-icon="home" title="Chat, today, activity">
         <span class="nav-icon"></span> Home
       </div>
-      <div class="nav-item" data-page="build" data-icon="workflow" title="Workflows, crons, skills">
+      <div class="nav-item" data-page="build" data-icon="workflow" title="Tricks Clementine knows">
         <span class="nav-icon"></span> Build
         <span class="nav-badge" id="nav-cron-count" style="display:none">0</span>
       </div>
@@ -15088,7 +15238,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
     <div class="page" id="page-build">
       <!-- Toolbar -->
       <div id="routines-toolbar" style="display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg-secondary);flex-wrap:wrap">
-        <h2 style="margin:0;font-size:18px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px"><span data-icon="workflow" class="icon-slot"></span> Routines</h2>
+        <h2 style="margin:0;font-size:18px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px"><span data-icon="workflow" class="icon-slot"></span> Tricks</h2>
         <span id="routines-count" style="font-size:11px;color:var(--text-muted)"></span>
         <span id="routines-editor-breadcrumb" style="display:none;font-size:12px;color:var(--text-muted)"> &rsaquo; <span id="routines-editor-name" style="color:var(--text-primary);font-weight:500"></span></span>
         <span style="flex:1"></span>
@@ -15098,18 +15248,18 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
           <option value="__global__">Clementine (global)</option>
         </select>
         <button id="routines-back-btn" style="display:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary)" onclick="window.RoutinesUI && RoutinesUI.closeEditor()">&larr; Back to list</button>
-        <button id="routines-assist-btn" class="btn-sm" onclick="window.RoutinesUI && RoutinesUI.openAssist()" title="Describe a routine in natural language" style="padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary)">Generate from prompt</button>
-        <button id="routines-create-btn" class="btn-sm btn-primary" onclick="window.RoutinesUI && RoutinesUI.openCreate()" style="padding:6px 14px;border-radius:6px;cursor:pointer;font-size:12px">+ New Routine</button>
+        <button id="routines-assist-btn" class="btn-sm" onclick="window.RoutinesUI && RoutinesUI.openCreate()" title="Skip the chat and fill out a form yourself" style="padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary)">Build manually</button>
+        <button id="routines-create-btn" class="btn-sm btn-primary" onclick="window.RoutinesUI && RoutinesUI.openChat()" style="padding:6px 14px;border-radius:6px;cursor:pointer;font-size:12px">+ New Trick</button>
       </div>
       <!-- List view (default) -->
       <div id="routines-list-pane" style="flex:1;min-height:0;overflow-y:auto;padding:18px;background:var(--bg-primary)">
         <div id="routines-list-empty" class="empty-state" style="display:none;padding:64px 18px;text-align:center;color:var(--text-muted)">
           <div style="font-size:38px;opacity:0.4;margin-bottom:14px">&#9881;</div>
-          <div style="font-size:15px;font-weight:500;color:var(--text-secondary);margin-bottom:6px">No routines yet</div>
-          <div style="font-size:12px;line-height:1.5;max-width:380px;margin:0 auto 16px">A Routine is a sequence of steps &mdash; call MCP tools, run local CLIs, prompt the agent, branch on results &mdash; that runs on a schedule or on demand. Example: &ldquo;at 8am check email; if anything urgent, summarize and Slack me.&rdquo;</div>
+          <div style="font-size:15px;font-weight:500;color:var(--text-secondary);margin-bottom:6px">No tricks yet</div>
+          <div style="font-size:12px;line-height:1.5;max-width:380px;margin:0 auto 16px">A Trick is a sequence of steps Clementine performs on cue &mdash; call MCP tools, run local CLIs, prompt the agent, branch on results &mdash; that runs on a schedule or on demand. Example: &ldquo;at 8am check email; if anything urgent, summarize and Slack me.&rdquo;</div>
           <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap">
-            <button class="btn-sm btn-primary" onclick="window.RoutinesUI && RoutinesUI.openCreate()" style="padding:6px 14px">+ New Routine</button>
-            <button class="btn-sm" onclick="window.RoutinesUI && RoutinesUI.openAssist()" style="padding:6px 14px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary)">Generate from prompt</button>
+            <button class="btn-sm btn-primary" onclick="window.RoutinesUI && RoutinesUI.openChat()" style="padding:6px 14px">+ New Trick</button>
+            <button class="btn-sm" onclick="window.RoutinesUI && RoutinesUI.openCreate()" style="padding:6px 14px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary)">Build manually</button>
           </div>
         </div>
         <div id="routines-list-wrap" style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden">
@@ -15136,7 +15286,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
       <!-- Create modal -->
       <div id="routines-create-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;align-items:center;justify-content:center">
         <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:22px;width:480px;max-width:92vw;display:flex;flex-direction:column;gap:12px">
-          <h3 style="margin:0;font-size:16px;font-weight:600;color:var(--text-primary)">New routine</h3>
+          <h3 style="margin:0;font-size:16px;font-weight:600;color:var(--text-primary)">New trick</h3>
           <label style="font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.04em">Name</label>
           <input type="text" id="routines-create-name" placeholder="e.g. 8am Email Triage" style="padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text-primary);font-size:13px">
           <label style="font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.04em">Description (optional)</label>
@@ -15153,16 +15303,29 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
           </div>
         </div>
       </div>
-      <!-- Assist modal (Generate from prompt) -->
-      <div id="routines-assist-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;align-items:center;justify-content:center">
-        <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:22px;width:560px;max-width:92vw;max-height:80vh;display:flex;flex-direction:column;gap:14px">
-          <h3 style="margin:0;font-size:16px;font-weight:600;color:var(--text-primary)">Generate routine from prompt</h3>
-          <p style="margin:0;font-size:12px;color:var(--text-muted);line-height:1.5">Describe what the routine should do. The assistant will draft a starter sequence you can edit. Example: &ldquo;Every morning at 8am, check unread Gmail; if anything looks urgent, summarize and send to Slack #me.&rdquo;</p>
-          <textarea id="routines-assist-input" rows="6" placeholder="Describe the routine&hellip;" style="width:100%;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text-primary);font-size:13px;font-family:inherit;resize:vertical;box-sizing:border-box"></textarea>
-          <div id="routines-assist-status" style="font-size:11px;color:var(--text-muted);min-height:14px"></div>
-          <div style="display:flex;gap:8px;justify-content:flex-end">
-            <button class="btn-sm" onclick="window.RoutinesUI && RoutinesUI.closeAssist()" style="padding:6px 14px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary)">Cancel</button>
-            <button id="routines-assist-submit" class="btn-sm btn-primary" onclick="window.RoutinesUI && RoutinesUI.submitAssist()" style="padding:6px 14px">Generate</button>
+      <!-- Chat-first builder modal — multi-turn conversation that drafts a trick spec live -->
+      <div id="routines-chat-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;align-items:center;justify-content:center">
+        <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);width:760px;max-width:96vw;max-height:88vh;display:flex;flex-direction:column;overflow:hidden">
+          <div style="padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px">
+            <h3 style="margin:0;font-size:15px;font-weight:600;color:var(--text-primary)">Build a trick with Clementine</h3>
+            <span style="flex:1"></span>
+            <button class="btn-sm" onclick="window.RoutinesUI && RoutinesUI.closeChat()" style="padding:4px 10px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary)">&times;</button>
+          </div>
+          <!-- Live spec preview -->
+          <div id="routines-chat-preview" style="display:none;padding:10px 18px;border-bottom:1px solid var(--border);background:var(--bg-tertiary);font-size:12px;color:var(--text-secondary)"></div>
+          <!-- Messages -->
+          <div id="routines-chat-messages" style="flex:1;min-height:240px;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:10px"></div>
+          <!-- Composer -->
+          <div style="padding:12px 18px;border-top:1px solid var(--border);background:var(--bg-secondary)">
+            <div style="display:flex;gap:8px;align-items:flex-end">
+              <textarea id="routines-chat-input" rows="2" placeholder="Tell Clementine what you want her to do…" style="flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text-primary);font-size:13px;font-family:inherit;resize:vertical;box-sizing:border-box" onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();window.RoutinesUI&&RoutinesUI.sendChat();}"></textarea>
+              <button id="routines-chat-send" class="btn-sm btn-primary" onclick="window.RoutinesUI && RoutinesUI.sendChat()" style="padding:8px 16px;align-self:flex-end">Send</button>
+            </div>
+            <div style="display:flex;align-items:center;gap:10px;margin-top:8px;font-size:11px">
+              <span id="routines-chat-status" style="color:var(--text-muted);flex:1;min-height:14px"></span>
+              <button id="routines-chat-save" class="btn-sm btn-primary" onclick="window.RoutinesUI && RoutinesUI.saveChatDraft()" style="display:none;padding:5px 12px;font-size:11px">Save trick</button>
+              <button class="btn-sm" onclick="window.RoutinesUI && RoutinesUI.closeChat(true);RoutinesUI.openCreate();" style="padding:4px 10px;background:transparent;border:none;color:var(--text-muted);font-size:11px;cursor:pointer;text-decoration:underline">Build manually instead</button>
+            </div>
           </div>
         </div>
       </div>
@@ -15203,7 +15366,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
           // ── data ────────────────────────────────────────────────────
           loadOwners: function() {
             // Reuse the agent registry the rest of the dashboard uses.
-            fetch('/api/agents').then(function(r){ return r.json(); }).then(function(data){
+            apiFetch('/api/agents').then(function(r){ return r.json(); }).then(function(data){
               R.state.owners = (data.agents || []).map(function(a){ return { slug: a.slug, name: a.name || a.slug }; });
               R.populateOwnerSelects();
             }).catch(function(){ /* non-fatal */ });
@@ -15223,17 +15386,17 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
             }
           },
           loadMcpTools: function() {
-            fetch('/api/routines/mcp-tools').then(function(r){ return r.json(); }).then(function(data){
+            apiFetch('/api/routines/mcp-tools').then(function(r){ return r.json(); }).then(function(data){
               R.state.mcpTools = data && data.servers ? data : { servers: [] };
             }).catch(function(){ R.state.mcpTools = { servers: [] }; });
           },
           loadCliTools: function() {
-            fetch('/api/routines/cli-tools').then(function(r){ return r.json(); }).then(function(data){
+            apiFetch('/api/routines/cli-tools').then(function(r){ return r.json(); }).then(function(data){
               R.state.cliTools = (data && data.tools) || [];
             }).catch(function(){ R.state.cliTools = []; });
           },
           refreshList: function() {
-            fetch('/api/routines').then(function(r){ return r.json(); }).then(function(data){
+            apiFetch('/api/routines').then(function(r){ return r.json(); }).then(function(data){
               R.state.list = (data && data.routines) || [];
               R.renderList();
             }).catch(function(){ R.state.list = []; R.renderList(); });
@@ -15251,7 +15414,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
               if (filter === '__global__') return r.scope === 'global';
               return r.scope === 'agent' && r.agentSlug === filter;
             });
-            if (count) count.textContent = rows.length === 0 ? '' : rows.length + (rows.length === 1 ? ' routine' : ' routines');
+            if (count) count.textContent = rows.length === 0 ? '' : rows.length + (rows.length === 1 ? ' trick' : ' tricks');
             if (rows.length === 0) {
               empty.style.display = 'block';
               wrap.style.display = 'none';
@@ -15278,13 +15441,13 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
             }).join('');
           },
           toggle: function(id) {
-            fetch('/api/routines/' + encodeURIComponent(id) + '/toggle', { method: 'POST' })
+            apiFetch('/api/routines/' + encodeURIComponent(id) + '/toggle', { method: 'POST' })
               .then(function(r){ return r.json(); })
               .then(function(){ R.refreshList(); })
               .catch(function(err){ alert('Toggle failed: ' + err); });
           },
           run: function(id, approvedSideEffects) {
-            fetch('/api/routines/' + encodeURIComponent(id) + '/run', {
+            apiFetch('/api/routines/' + encodeURIComponent(id) + '/run', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify({ approvedSideEffects: approvedSideEffects === true })
@@ -15292,7 +15455,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
               if (r.status === 409) {
                 return r.json().then(function(j){
                   var lines = (j.sideEffects || []).map(function(s){ return '  • ' + s.kind + ': ' + s.label; }).join('\\n');
-                  if (confirm('This routine has side effects:\\n\\n' + lines + '\\n\\nProceed?')) R.run(id, true);
+                  if (confirm('This trick has side effects:\\n\\n' + lines + '\\n\\nProceed?')) R.run(id, true);
                 });
               }
               return r.json().then(function(j){
@@ -15303,10 +15466,10 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
           },
           // ── editor ──────────────────────────────────────────────────
           openEditor: function(id) {
-            fetch('/api/routines/' + encodeURIComponent(id))
+            apiFetch('/api/routines/' + encodeURIComponent(id))
               .then(function(r){ return r.json(); })
               .then(function(data){
-                if (!data || !data.routine) { alert('Failed to load routine'); return; }
+                if (!data || !data.routine) { alert('Failed to load trick'); return; }
                 R.state.editing = { id: data.id, routine: data.routine, dirty: false, validation: data.validation };
                 R.showEditor();
               }).catch(function(err){ alert('Open failed: ' + err); });
@@ -15347,8 +15510,11 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
               + '<label style="display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)"><input type="checkbox" id="re-enabled" ' + (wf.enabled ? 'checked' : '') + ' onchange="window.RoutinesUI&&RoutinesUI.markDirty()"> Enabled</label>'
               + '</div>'
               + '<input type="text" id="re-description" value="' + R.esc(wf.description || '') + '" placeholder="Description (optional)" oninput="window.RoutinesUI&&RoutinesUI.markDirty()" style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text-primary);font-size:13px;margin-bottom:10px;box-sizing:border-box">'
-              + '<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><label style="font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.04em">Schedule</label>'
+              + '<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px"><label style="font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.04em;min-width:62px">Schedule</label>'
               + '<input type="text" id="re-schedule" value="' + R.esc(wf.trigger && wf.trigger.schedule || '') + '" placeholder="cron e.g. 0 8 * * * (blank = manual)" oninput="window.RoutinesUI&&RoutinesUI.markDirty()" style="flex:1;min-width:240px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text-primary);font-size:12px;font-family:\\x27JetBrains Mono\\x27,monospace">'
+              + '</div>'
+              + '<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><label style="font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.04em;min-width:62px">Model</label>'
+              + R.modelSelect('re-model', wf.model || '', 'Default for prompt steps that don\\x27t override')
               + '</div></div>';
             // Steps
             html += '<div style="font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;margin:18px 0 8px">Steps</div>';
@@ -15373,10 +15539,15 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
             var kind = step.kind || 'prompt';
             var kindColor = { prompt: '#5e72e4', mcp: '#2dce89', cli: '#fb6340', conditional: '#f5365c', channel: '#11cdef', transform: '#ffd600', loop: '#8965e0' }[kind] || '#888';
             var badge = '<span style="display:inline-block;background:' + kindColor + '22;color:' + kindColor + ';padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em">' + kind + '</span>';
+            // Model picker is only meaningful for prompt steps (other kinds don't call the LLM directly).
+            var modelCtl = (kind === 'prompt')
+              ? R.modelSelect('', step.model || '', 'Use trick default', { idx: idx, small: true })
+              : '';
             var head = '<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">'
               + '<span style="font-size:11px;color:var(--text-muted);font-weight:600;min-width:24px">#' + (idx + 1) + '</span>'
               + badge
               + '<input type="text" value="' + R.esc(step.id) + '" onchange="window.RoutinesUI&&RoutinesUI.updateStep(' + idx + ',\\x27id\\x27,this.value)" style="font-family:\\x27JetBrains Mono\\x27,monospace;padding:3px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:11px;min-width:120px">'
+              + modelCtl
               + '<span style="flex:1"></span>'
               + (idx > 0 ? '<button title="Move up" onclick="window.RoutinesUI&&RoutinesUI.moveStep(' + idx + ',-1)" style="background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px">&uarr;</button>' : '')
               + (idx < (R.state.editing.routine.steps.length - 1) ? '<button title="Move down" onclick="window.RoutinesUI&&RoutinesUI.moveStep(' + idx + ',1)" style="background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px">&darr;</button>' : '')
@@ -15463,6 +15634,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
               R.state.editing.routine.trigger = v ? { schedule: v, manual: false } : { manual: true };
             }
             var en = document.getElementById('re-enabled'); if (en) R.state.editing.routine.enabled = en.checked;
+            var md = document.getElementById('re-model'); if (md) R.state.editing.routine.model = md.value || undefined;
             R.setStatus('Unsaved changes');
           },
           updateStep: function(idx, field, value) {
@@ -15552,7 +15724,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
           },
           removeStep: function(idx) {
             if (!R.state.editing) return;
-            if (R.state.editing.routine.steps.length <= 1) { alert('A routine must have at least one step.'); return; }
+            if (R.state.editing.routine.steps.length <= 1) { alert('A trick must have at least one step.'); return; }
             if (!confirm('Remove this step?')) return;
             var removed = R.state.editing.routine.steps.splice(idx, 1)[0];
             // Strip lingering dependsOn references.
@@ -15609,7 +15781,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
             R.markDirty();  // capture latest header values
             var btn = document.getElementById('re-save-btn');
             if (btn) btn.textContent = 'Saving…';
-            fetch('/api/routines/' + encodeURIComponent(R.state.editing.id), {
+            apiFetch('/api/routines/' + encodeURIComponent(R.state.editing.id), {
               method: 'PUT',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify({ routine: R.state.editing.routine })
@@ -15620,7 +15792,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
                   if (res.body.error === 'validation') {
                     var msg = (res.body.validation.issues || []).map(function(i){ return '• ' + i.severity + ': ' + i.message; }).join('\\n');
                     if (confirm('Validation issues:\\n\\n' + msg + '\\n\\nSave anyway?')) {
-                      fetch('/api/routines/' + encodeURIComponent(R.state.editing.id), {
+                      apiFetch('/api/routines/' + encodeURIComponent(R.state.editing.id), {
                         method: 'PUT',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({ routine: R.state.editing.routine, force: true })
@@ -15646,7 +15818,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
           },
           dryRunCurrent: function() {
             if (!R.state.editing) return;
-            fetch('/api/routines/' + encodeURIComponent(R.state.editing.id) + '/dry-run', { method: 'POST' })
+            apiFetch('/api/routines/' + encodeURIComponent(R.state.editing.id) + '/dry-run', { method: 'POST' })
               .then(function(r){ return r.json(); })
               .then(function(d){
                 var lines = ['Dry-run for ' + R.state.editing.routine.name + ':\\n'];
@@ -15657,7 +15829,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
           },
           testCurrent: function() {
             if (!R.state.editing) return;
-            fetch('/api/routines/' + encodeURIComponent(R.state.editing.id) + '/test', {
+            apiFetch('/api/routines/' + encodeURIComponent(R.state.editing.id) + '/test', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify({ mode: 'mock' })
@@ -15669,7 +15841,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
           deleteCurrent: function() {
             if (!R.state.editing) return;
             if (!confirm('Delete routine "' + R.state.editing.routine.name + '"? This is permanent.')) return;
-            fetch('/api/routines/' + encodeURIComponent(R.state.editing.id), { method: 'DELETE' })
+            apiFetch('/api/routines/' + encodeURIComponent(R.state.editing.id), { method: 'DELETE' })
               .then(function(r){ return r.json(); })
               .then(function(j){
                 if (j.ok) { R.state.editing = null; R.closeEditor(); R.refreshList(); }
@@ -15692,7 +15864,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
             if (!drawer) return;
             drawer.innerHTML = '<div style="padding:18px"><div style="display:flex;align-items:center;gap:8px;margin-bottom:10px"><h3 style="margin:0;font-size:15px;font-weight:600;color:var(--text-primary)">Run history</h3><span style="flex:1"></span><button onclick="window.RoutinesUI&&RoutinesUI.closeRuns()" style="background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer">&times;</button></div><div style="font-size:12px;color:var(--text-muted)">Loading…</div></div>';
             drawer.style.display = 'block';
-            fetch('/api/routines/' + encodeURIComponent(id) + '/runs').then(function(r){ return r.json(); }).then(function(d){
+            apiFetch('/api/routines/' + encodeURIComponent(id) + '/runs').then(function(r){ return r.json(); }).then(function(d){
               var runs = d.runs || [];
               var html = '<div style="padding:18px"><div style="display:flex;align-items:center;gap:8px;margin-bottom:14px"><h3 style="margin:0;font-size:15px;font-weight:600;color:var(--text-primary)">Run history</h3><span style="flex:1"></span><button onclick="window.RoutinesUI&&RoutinesUI.closeRuns()" style="background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer">&times;</button></div>';
               if (runs.length === 0) {
@@ -15736,7 +15908,7 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
               schedule: document.getElementById('routines-create-schedule').value.trim() || undefined,
               agent: document.getElementById('routines-create-owner').value || undefined,
             };
-            fetch('/api/routines', {
+            apiFetch('/api/routines', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify(body)
@@ -15748,50 +15920,172 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
                 R.openEditor(res.body.id);
               }).catch(function(err){ alert('Create error: ' + err); });
           },
-          // ── assist (generate from prompt) ───────────────────────────
-          openAssist: function() {
-            var m = document.getElementById('routines-assist-modal'); if (!m) return;
-            document.getElementById('routines-assist-input').value = '';
-            document.getElementById('routines-assist-status').textContent = '';
+          // ── chat-first builder ──────────────────────────────────────
+          // Multi-turn conversation that asks clarifying questions and
+          // drafts a trick spec. The agent emits a fenced json-artifact
+          // block; we parse it for the live preview + Save button.
+          openChat: function() {
+            var m = document.getElementById('routines-chat-modal'); if (!m) return;
+            R.state.chatMessages = [];
+            R.state.chatArtifact = null;
+            R.state.chatBusy = false;
+            document.getElementById('routines-chat-input').value = '';
+            document.getElementById('routines-chat-status').textContent = '';
+            document.getElementById('routines-chat-save').style.display = 'none';
+            // Reset the builder session so the prior conversation doesn't leak in.
+            apiFetch('/api/builder/reset', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ artifactType: 'workflow' })
+            }).catch(function(){ /* non-fatal */ });
+            R.renderChatMessages();
+            R.renderChatPreview();
+            // Seed with a greeting from the assistant so the panel isn't empty.
+            R.appendChatMessage('assistant', 'Hi! Tell me what you want Clementine to do — a sentence is fine. I\\x27ll ask a couple of follow-ups (when it should run, which tools she needs, which model) and draft a trick you can save.');
             m.style.display = 'flex';
-            setTimeout(function(){ document.getElementById('routines-assist-input').focus(); }, 50);
+            setTimeout(function(){ document.getElementById('routines-chat-input').focus(); }, 50);
+          },
+          closeChat: function(silent) {
+            var m = document.getElementById('routines-chat-modal'); if (m) m.style.display = 'none';
+            if (!silent) R.refreshList();
+          },
+          appendChatMessage: function(role, text) {
+            R.state.chatMessages.push({ role: role, text: text });
+            R.renderChatMessages();
           },
-          closeAssist: function() {
-            var m = document.getElementById('routines-assist-modal'); if (m) m.style.display = 'none';
+          renderChatMessages: function() {
+            var box = document.getElementById('routines-chat-messages'); if (!box) return;
+            box.innerHTML = (R.state.chatMessages || []).map(function(m){
+              var isUser = m.role === 'user';
+              var bg = isUser ? 'var(--clementine,#ff8c21)' : 'var(--bg-tertiary)';
+              var color = isUser ? '#fff' : 'var(--text-primary)';
+              var align = isUser ? 'flex-end' : 'flex-start';
+              return '<div style="display:flex;justify-content:' + align + '"><div style="max-width:78%;padding:8px 12px;border-radius:10px;background:' + bg + ';color:' + color + ';font-size:13px;line-height:1.5;white-space:pre-wrap">' + R.esc(m.text) + '</div></div>';
+            }).join('');
+            box.scrollTop = box.scrollHeight;
+          },
+          renderChatPreview: function() {
+            var pv = document.getElementById('routines-chat-preview'); if (!pv) return;
+            var a = R.state.chatArtifact;
+            if (!a || !a.name) { pv.style.display = 'none'; return; }
+            pv.style.display = 'block';
+            var schedule = a.schedule ? '<code style="font-family:\\x27JetBrains Mono\\x27,monospace;font-size:11px">' + R.esc(a.schedule) + '</code>' : '<em style="color:var(--text-muted)">manual</em>';
+            var stepCount = (a.steps && typeof a.steps === 'string')
+              ? (a.steps.match(/^[a-zA-Z0-9_-]+:/gm) || []).length
+              : (Array.isArray(a.steps) ? a.steps.length : 0);
+            pv.innerHTML = '<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><strong style="color:var(--text-primary)">' + R.esc(a.name) + '</strong>'
+              + '<span style="color:var(--text-muted)">·</span><span>schedule ' + schedule + '</span>'
+              + '<span style="color:var(--text-muted)">·</span><span>' + stepCount + ' step' + (stepCount === 1 ? '' : 's') + '</span>'
+              + (a.model ? '<span style="color:var(--text-muted)">·</span><span>model <code>' + R.esc(a.model) + '</code></span>' : '')
+              + '</div>'
+              + (a.description ? '<div style="margin-top:4px;color:var(--text-muted);font-size:11px">' + R.esc(a.description) + '</div>' : '');
+            // Save button shows once we have a name + at least one step.
+            var saveBtn = document.getElementById('routines-chat-save');
+            if (saveBtn) saveBtn.style.display = (a.name && stepCount > 0) ? '' : 'none';
           },
-          submitAssist: function() {
-            if (R.state.assistBusy) return;
-            var prompt = document.getElementById('routines-assist-input').value.trim();
-            if (!prompt) return;
-            R.state.assistBusy = true;
-            var btn = document.getElementById('routines-assist-submit');
-            var status = document.getElementById('routines-assist-status');
-            if (btn) { btn.textContent = 'Generating…'; btn.disabled = true; }
-            if (status) status.textContent = 'Asking the assistant to draft a routine…';
-            // Reuse the existing /api/builder/chat which is already wired and
-            // produces workflow drafts. We also pass mode hint so the agent
-            // knows to focus on building one routine.
-            fetch('/api/builder/chat', {
+          sendChat: function() {
+            if (R.state.chatBusy) return;
+            var input = document.getElementById('routines-chat-input');
+            var text = input.value.trim();
+            if (!text) return;
+            input.value = '';
+            R.appendChatMessage('user', text);
+            R.state.chatBusy = true;
+            var sendBtn = document.getElementById('routines-chat-send');
+            var status = document.getElementById('routines-chat-status');
+            if (sendBtn) { sendBtn.textContent = 'Thinking…'; sendBtn.disabled = true; }
+            if (status) status.textContent = 'Clementine is drafting…';
+            apiFetch('/api/builder/chat', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ message: prompt, mode: 'workflow' })
-            }).then(function(r){ return r.json(); }).then(function(d){
-              R.state.assistBusy = false;
-              if (btn) { btn.textContent = 'Generate'; btn.disabled = false; }
-              if (status) status.textContent = d && d.message ? 'Draft created. Refreshing list…' : 'Draft response received.';
-              R.refreshList();
-              setTimeout(function(){ R.closeAssist(); }, 800);
-            }).catch(function(err){
-              R.state.assistBusy = false;
-              if (btn) { btn.textContent = 'Generate'; btn.disabled = false; }
-              if (status) status.textContent = 'Assist failed: ' + err;
-            });
+              body: JSON.stringify({
+                message: text,
+                artifactType: 'workflow',
+                currentArtifact: R.state.chatArtifact || undefined,
+              })
+            }).then(function(r){ return r.json().then(function(j){ return { ok: r.ok, body: j }; }); })
+              .then(function(res){
+                R.state.chatBusy = false;
+                if (sendBtn) { sendBtn.textContent = 'Send'; sendBtn.disabled = false; }
+                if (!res.ok) {
+                  if (status) status.textContent = 'Error: ' + (res.body && res.body.error || 'unknown');
+                  return;
+                }
+                // Endpoint returns { ok, response, artifact } — server already
+                // strips the json-artifact fence and parses the JSON for us.
+                var reply = (res.body && res.body.response) || '(no reply)';
+                if (res.body && res.body.artifact) R.state.chatArtifact = res.body.artifact;
+                R.appendChatMessage('assistant', reply);
+                R.renderChatPreview();
+                if (status) status.textContent = (res.body && res.body.artifact) ? 'Draft updated.' : '';
+              })
+              .catch(function(err){
+                R.state.chatBusy = false;
+                if (sendBtn) { sendBtn.textContent = 'Send'; sendBtn.disabled = false; }
+                if (status) status.textContent = 'Chat error: ' + err;
+              });
+          },
+          // Persist the current draft as a real trick. The artifact's steps
+          // field can come back as a YAML-ish string (per the agent's prompt
+          // template); we hand it off to /api/routines which parses it.
+          saveChatDraft: function() {
+            var a = R.state.chatArtifact;
+            if (!a || !a.name) return;
+            var btn = document.getElementById('routines-chat-save');
+            if (btn) { btn.textContent = 'Saving…'; btn.disabled = true; }
+            apiFetch('/api/routines', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                name: a.name,
+                description: a.description || '',
+                schedule: a.schedule || '',
+                model: a.model || undefined,
+                draftYaml: a.steps,
+              })
+            }).then(function(r){ return r.json().then(function(j){ return { ok: r.ok, body: j }; }); })
+              .then(function(res){
+                if (btn) { btn.textContent = 'Save trick'; btn.disabled = false; }
+                if (!res.ok) {
+                  alert('Save failed: ' + (res.body && res.body.error || 'unknown'));
+                  return;
+                }
+                R.closeChat();
+                if (res.body && res.body.id) R.openEditor(res.body.id);
+              }).catch(function(err){
+                if (btn) { btn.textContent = 'Save trick'; btn.disabled = false; }
+                alert('Save failed: ' + err);
+              });
           },
           // ── helpers ─────────────────────────────────────────────────
           esc: function(s) {
             if (s == null) return '';
             return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
           },
+          // Available Claude models for trick + step model pickers.
+          MODEL_OPTS: [
+            { id: 'claude-opus-4-7',           label: 'Opus 4.7 — most capable' },
+            { id: 'claude-sonnet-4-6',         label: 'Sonnet 4.6 — balanced' },
+            { id: 'claude-haiku-4-5-20251001', label: 'Haiku 4.5 — fastest' },
+          ],
+          // Render a model select. If opts.idx is set, this is a per-step
+          // picker and changes route through updateStep(idx, 'model', value);
+          // otherwise it's the trick-level picker (id=re-model) that
+          // markDirty reads.
+          modelSelect: function(id, current, defaultLabel, opts) {
+            var size = (opts && opts.small) ? 'padding:3px 6px;font-size:11px;min-width:140px' : 'padding:6px 10px;font-size:12px;min-width:200px';
+            var idAttr = id ? ' id="' + id + '"' : '';
+            var onchange = (opts && typeof opts.idx === 'number')
+              ? ' onchange="window.RoutinesUI&&RoutinesUI.updateStep(' + opts.idx + ',\\x27model\\x27,this.value)"'
+              : ' onchange="window.RoutinesUI&&RoutinesUI.markDirty()"';
+            var html = '<select' + idAttr + onchange + ' style="' + size + ';border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text-primary)" title="' + R.esc(defaultLabel || '') + '">';
+            html += '<option value=""' + (current ? '' : ' selected') + '>' + R.esc(defaultLabel || 'inherit') + '</option>';
+            R.MODEL_OPTS.forEach(function(m){
+              html += '<option value="' + R.esc(m.id) + '"' + (current === m.id ? ' selected' : '') + '>' + R.esc(m.label) + '</option>';
+            });
+            html += '</select>';
+            return html;
+          },
         };
         window.RoutinesUI = R;
         // Compatibility shims for legacy callers in other parts of the dashboard.
@@ -15911,12 +16205,12 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
       </div>
       <div class="tab-bar" id="intelligence-tabs" style="margin:0 0 0 18px">
         <button class="active" data-icon="layoutDashboard" onclick="switchTab('intelligence','overview')"><span class="icon-slot"></span> Overview</button>
-        <button data-icon="database" onclick="switchTab('intelligence','search')"><span class="icon-slot"></span> Memory</button>
+        <button data-icon="database" onclick="switchTab('intelligence','search')"><span class="icon-slot"></span> Chunks</button>
         <button data-icon="upload" onclick="switchTab('intelligence','seed')"><span class="icon-slot"></span> Seed</button>
         <button data-icon="repeat" onclick="switchTab('intelligence','sources')"><span class="icon-slot"></span> Automate</button>
         <button data-icon="listChecks" onclick="switchTab('intelligence','runs')"><span class="icon-slot"></span> Runs</button>
         <button data-icon="sparkles" onclick="switchTab('intelligence','graph')"><span class="icon-slot"></span> Knowledge</button>
-        <button data-icon="fileText" onclick="switchTab('intelligence','files')"><span class="icon-slot"></span> Files</button>
+        <button data-icon="fileText" onclick="switchTab('intelligence','files')"><span class="icon-slot"></span> Memory</button>
         <button data-icon="zap" onclick="switchTab('intelligence','health')"><span class="icon-slot"></span> Health <span class="tab-badge" id="brain-health-badge" style="display:none;background:#ef4444;color:#fff">0</span></button>
         <button data-icon="users" onclick="switchTab('intelligence','user-model')"><span class="icon-slot"></span> User Model</button>
         <button data-icon="brain" onclick="switchTab('intelligence','learning')"><span class="icon-slot"></span> Learning <span class="tab-badge" id="brain-learning-badge" style="display:none;background:#f59e0b;color:#000">0</span></button>
@@ -16294,24 +16588,55 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
           <div id="brain-runs-list"></div>
         </div>
         <div class="tab-pane" id="tab-intelligence-files">
-          <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap">
-            <input type="text" id="vault-files-search" placeholder="Search title or path..." style="flex:1;min-width:200px;padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-primary);font-size:13px" oninput="refreshVaultFiles()">
+          <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap">
+            <input type="text" id="vault-files-search" placeholder="Search title, frontmatter, or content..." style="flex:1;min-width:220px;padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-primary);font-size:13px" oninput="refreshVaultFiles()">
             <select id="vault-files-agent-filter" onchange="refreshVaultFiles()" style="padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:12px">
               <option value="">All authors</option>
               <option value="__shared__">Shared (vault root)</option>
             </select>
             <select id="vault-files-since" onchange="refreshVaultFiles()" style="padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:12px">
               <option value="7">Past 7 days</option>
-              <option value="30" selected>Past 30 days</option>
+              <option value="30">Past 30 days</option>
               <option value="90">Past 90 days</option>
               <option value="365">Past year</option>
+              <option value="9999" selected>All time</option>
             </select>
-            <button class="btn-sm" onclick="refreshVaultFiles()">Refresh</button>
+            <button class="btn-sm" onclick="refreshVaultFiles()" title="Refresh"><span class="icon-slot" data-icon="refreshCw"></span></button>
           </div>
-          <div id="vault-files-folder-chips" style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px"></div>
-          <div id="vault-files-list">
-            <div class="skel-block"><div class="skel-row med"></div><div class="skel-row"></div><div class="skel-row short"></div></div>
+          <div class="vault-mem-grid" style="display:grid;grid-template-columns:240px minmax(280px,1fr) minmax(360px,1.4fr);gap:12px;align-items:stretch;height:calc(100vh - 240px);min-height:520px">
+
+            <!-- Left rail: facet chips (folder / type / tag) -->
+            <div class="vault-mem-rail" style="overflow-y:auto;padding:10px 8px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);font-size:12px">
+              <div style="font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin:2px 4px 6px">Folders</div>
+              <div id="vault-files-folder-chips" class="vault-facet-list"></div>
+              <div style="font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin:14px 4px 6px">Type</div>
+              <div id="vault-files-type-chips" class="vault-facet-list"></div>
+              <div style="font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin:14px 4px 6px">Tags</div>
+              <div id="vault-files-tag-chips" class="vault-facet-list"></div>
+            </div>
+
+            <!-- Middle: file list -->
+            <div class="vault-mem-list" style="overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);display:flex;flex-direction:column;min-height:0">
+              <div id="vault-files-list-meta" style="font-size:11px;color:var(--text-muted);padding:10px 14px;border-bottom:1px solid var(--border-light);flex-shrink:0">Loading…</div>
+              <div id="vault-files-list" style="flex:1;overflow-y:auto;min-height:0">
+                <div class="skel-block" style="padding:14px"><div class="skel-row med"></div><div class="skel-row"></div><div class="skel-row short"></div></div>
+              </div>
+            </div>
+
+            <!-- Right: inline reader -->
+            <div class="vault-mem-reader" style="overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);display:flex;flex-direction:column;min-height:0">
+              <div id="vault-reader-header" style="padding:14px 18px;border-bottom:1px solid var(--border-light);flex-shrink:0">
+                <div style="font-weight:600;font-size:15px;color:var(--text-primary)">No file selected</div>
+                <div style="font-size:11px;color:var(--text-muted);margin-top:2px">Pick a file from the list to read it here.</div>
+              </div>
+              <div id="vault-reader-body" style="flex:1;overflow-y:auto;padding:18px 22px;font-size:14px;line-height:1.6;min-height:0">
+                <div style="color:var(--text-muted);font-size:13px">Tip: hover a row for a peek, click to open.</div>
+              </div>
+            </div>
           </div>
+
+          <!-- Hover preview popover (shared, repositioned per row) -->
+          <div id="vault-hover-popover" style="display:none;position:fixed;z-index:300;width:340px;max-width:90vw;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 10px 30px rgba(0,0,0,0.25);padding:12px 14px;font-size:12px;line-height:1.5;pointer-events:none"></div>
         </div>
         <div class="tab-pane" id="tab-intelligence-health">
           <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap">
@@ -19597,7 +19922,10 @@ function switchTab(group, tab) {
       if (typeof refreshSupersedes === 'function') refreshSupersedes();
       if (typeof refreshCoverageStrip === 'function') refreshCoverageStrip();
     }
-    if (tab === 'files' && typeof refreshVaultFiles === 'function') refreshVaultFiles();
+    if (tab === 'files' && typeof refreshVaultFiles === 'function') {
+      if (typeof vaultRestoreFromHash === 'function') vaultRestoreFromHash();
+      refreshVaultFiles();
+    }
     if (tab === 'sources') {
       if (typeof brainLoadSources === 'function') brainLoadSources();
       if (typeof brainLoadFeedConnectors === 'function') brainLoadFeedConnectors();
@@ -21025,7 +21353,7 @@ let scheduledWorkflowData = [];
 let buildUsageByTask = {};
 
 function jsStr(s) {
-  return String(s ?? '').replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\r/g, '\\r').replace(/\n/g, '\\n');
+  return String(s ?? '').replace(/\\\\/g, '\\\\\\\\').replace(/'/g, "\\\\'").replace(/\\r/g, '\\\\r').replace(/\\n/g, '\\\\n');
 }
 
 function durationLabel(ms) {
@@ -26333,28 +26661,118 @@ async function memoryHealthAction(action, extra) {
   }
 }
 
-// ── Vault Files (Brain → Files tab) ──────────────────────────────
-var _vaultFilesCache = null;
-var _vaultFilesFolder = '';   // current folder filter
+// ── Memory tab (Brain → Memory): unified file browser + reader ────
+// 3-pane layout (rail / list / reader). Search merges title+frontmatter
+// matches from /api/vault-files with content matches from /api/memory/search,
+// keyed by source_file. Filters and selected file persist in URL hash.
+var _vaultFilesCache = [];
+var _vaultFilesFolder = '';
+var _vaultFilesType = '';
+var _vaultFilesTag = '';
+var _vaultFilesActive = '';   // currently open relPath
+var _vaultContentMatches = {}; // relPath -> [chunkSnippets]
+var _vaultHoverTimer = null;
+var _vaultHoverCache = {};
+var _vaultSnippetCache = {};  // relPath -> snippet (from head=1)
+
+function vaultParseHash() {
+  var h = (location.hash || '').replace(/^#/, '');
+  var p = h.startsWith('mem/') ? h.slice(4) : '';
+  if (!p) return {};
+  var out = {};
+  p.split('&').forEach(function(kv) {
+    var i = kv.indexOf('=');
+    if (i < 0) return;
+    out[decodeURIComponent(kv.slice(0, i))] = decodeURIComponent(kv.slice(i + 1));
+  });
+  return out;
+}
+
+function vaultWriteHash() {
+  var parts = [];
+  if (_vaultFilesFolder) parts.push('folder=' + encodeURIComponent(_vaultFilesFolder));
+  if (_vaultFilesType) parts.push('type=' + encodeURIComponent(_vaultFilesType));
+  if (_vaultFilesTag) parts.push('tag=' + encodeURIComponent(_vaultFilesTag));
+  if (_vaultFilesActive) parts.push('file=' + encodeURIComponent(_vaultFilesActive));
+  var newHash = parts.length ? '#mem/' + parts.join('&') : '';
+  if (location.hash !== newHash) {
+    history.replaceState(null, '', location.pathname + location.search + newHash);
+  }
+}
+
+function vaultRestoreFromHash() {
+  var p = vaultParseHash();
+  if (!p || (!p.folder && !p.type && !p.tag && !p.file)) return false;
+  _vaultFilesFolder = p.folder || '';
+  _vaultFilesType = p.type || '';
+  _vaultFilesTag = p.tag || '';
+  _vaultFilesActive = p.file || '';
+  return true;
+}
 
 async function refreshVaultFiles() {
   var listEl = document.getElementById('vault-files-list');
   if (!listEl) return;
-  var q = document.getElementById('vault-files-search')?.value || '';
-  var agent = document.getElementById('vault-files-agent-filter')?.value || '';
-  var since = document.getElementById('vault-files-since')?.value || '30';
-  // Show skeleton while loading
-  listEl.innerHTML = '<div class="skel-block"><div class="skel-row med"></div><div class="skel-row"></div><div class="skel-row short"></div></div>';
+  var q = (document.getElementById('vault-files-search') || {}).value || '';
+  var agent = (document.getElementById('vault-files-agent-filter') || {}).value || '';
+  var since = (document.getElementById('vault-files-since') || {}).value || '9999';
+  listEl.innerHTML = '<div class="skel-block" style="padding:14px"><div class="skel-row med"></div><div class="skel-row"></div><div class="skel-row short"></div></div>';
   try {
     var url = '/api/vault-files?sinceDays=' + encodeURIComponent(since)
       + (q ? '&q=' + encodeURIComponent(q) : '')
       + (agent ? '&agent=' + encodeURIComponent(agent) : '')
-      + (_vaultFilesFolder ? '&folder=' + encodeURIComponent(_vaultFilesFolder) : '');
-    var r = await apiFetch(url);
-    var d = await r.json();
+      + (_vaultFilesFolder ? '&folder=' + encodeURIComponent(_vaultFilesFolder) : '')
+      + (_vaultFilesType ? '&type=' + encodeURIComponent(_vaultFilesType) : '')
+      + (_vaultFilesTag ? '&tag=' + encodeURIComponent(_vaultFilesTag) : '')
+      + '&limit=300';
+
+    // Run vault-files and content search in parallel when there is a query.
+    var promises = [apiFetch(url).then(function(r) { return r.json(); })];
+    if (q && q.length >= 2) {
+      promises.push(apiFetch('/api/memory/search?q=' + encodeURIComponent(q) + '&limit=40')
+        .then(function(r) { return r.json(); })
+        .catch(function() { return null; }));
+    }
+    var results = await Promise.all(promises);
+    var d = results[0];
+    var contentHits = results[1];
+
     var files = d.files || [];
     _vaultFilesCache = files;
-    // Populate agent filter from ALL files response (use server's full set, not filtered)
+    _vaultContentMatches = {};
+
+    // Bucket content-search hits by source_file. Keep up to 2 snippets per file.
+    if (contentHits && Array.isArray(contentHits.results)) {
+      contentHits.results.forEach(function(row) {
+        var sf = row.source_file || row.path || '';
+        if (!sf) return;
+        // source_file values often look like 'vault/02-People/Jordan.md' OR
+        // a bare relPath. Normalize to relPath.
+        var rel = sf.indexOf('vault/') === 0 ? sf.slice('vault/'.length) : sf;
+        if (!_vaultContentMatches[rel]) _vaultContentMatches[rel] = [];
+        if (_vaultContentMatches[rel].length < 2) {
+          var txt = (row.content || '').replace(/\\s+/g, ' ').slice(0, 200);
+          _vaultContentMatches[rel].push({ snippet: txt, section: row.section || '' });
+        }
+      });
+      // Inject any content-only matches (file did not surface via title/path)
+      // into the file list so the user can still open them.
+      var existing = {};
+      files.forEach(function(f) { existing[f.relPath] = true; });
+      Object.keys(_vaultContentMatches).forEach(function(rel) {
+        if (existing[rel]) return;
+        files.push({
+          path: '', relPath: rel,
+          title: rel.split('/').pop().replace(/\\.md$/, ''),
+          folder: rel.split('/')[0] || '',
+          agentSlug: null, mtime: '', sizeBytes: 0,
+          type: null, category: null, tags: [],
+          _contentOnly: true,
+        });
+      });
+    }
+
+    // Populate agent dropdown from cache (only first time)
     var agentSel = document.getElementById('vault-files-agent-filter');
     if (agentSel && agentSel.options.length <= 2) {
       var slugs = [...new Set(files.map(function(f) { return f.agentSlug; }).filter(Boolean))].sort();
@@ -26365,100 +26783,226 @@ async function refreshVaultFiles() {
         agentSel.appendChild(opt);
       });
     }
-    // Render folder filter chips (using folderCounts from server)
-    var chipsEl = document.getElementById('vault-files-folder-chips');
-    if (chipsEl && d.folderCounts) {
-      var folders = Object.entries(d.folderCounts).sort(function(a, b) { return b[1] - a[1]; });
-      var totalCount = folders.reduce(function(s, p) { return s + p[1]; }, 0);
-      var chipHtml = '<div class="vault-folder-chip' + (_vaultFilesFolder === '' ? ' active' : '') + '" data-folder="" onclick="setVaultFolderFilter(\\x27\\x27)">All <span style="opacity:0.6">' + totalCount + '</span></div>';
-      folders.forEach(function(p) {
-        var folder = p[0]; var count = p[1];
-        if (!folder) return;
-        chipHtml += '<div class="vault-folder-chip' + (_vaultFilesFolder === folder ? ' active' : '') + '" data-folder="' + esc(folder) + '" onclick="setVaultFolderFilter(\\x27' + esc(folder) + '\\x27)">' + esc(folder) + ' <span style="opacity:0.6">' + count + '</span></div>';
-      });
-      chipsEl.innerHTML = chipHtml;
+
+    // Render facet rails
+    renderFacetChips('vault-files-folder-chips', d.folderCounts || {}, _vaultFilesFolder, vaultSetFolder, 30);
+    renderFacetChips('vault-files-type-chips', d.typeCounts || {}, _vaultFilesType, vaultSetType, 20);
+    renderFacetChips('vault-files-tag-chips', d.tagCounts || {}, _vaultFilesTag, vaultSetTag, 20);
+
+    // Meta line
+    var metaEl = document.getElementById('vault-files-list-meta');
+    if (metaEl) {
+      var totalLabel = files.length === d.total ? files.length + ' files' : files.length + ' of ' + d.total + ' files';
+      metaEl.textContent = totalLabel + (q ? ' matching "' + q + '"' : '') + (since !== '9999' ? ' (last ' + since + 'd)' : '');
     }
+
     if (files.length === 0) {
-      listEl.innerHTML = '<div class="empty-cta"><div class="label">No recent files</div><div class="hint">Try a wider time window or different filter.</div></div>';
+      listEl.innerHTML = '<div class="empty-cta" style="padding:30px 14px"><div class="label">No matches</div><div class="hint">Try a wider time window, fewer filters, or a different search.</div></div>';
       return;
     }
-    var html = '<div style="font-size:11px;color:var(--text-muted);margin-bottom:10px">Showing ' + files.length + ' of ' + d.total + ' files modified in the last ' + since + ' days.</div>';
-    html += '<div style="display:flex;flex-direction:column;gap:1px;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card)">';
+
+    var html = '';
     for (var i = 0; i < files.length; i++) {
       var f = files[i];
-      var agentBadge = f.agentSlug
-        ? '<span style="font-size:10px;background:var(--clementine-bg);color:var(--clementine);padding:2px 7px;border-radius:var(--radius-xs);font-weight:500">' + esc(f.agentSlug) + '</span>'
-        : '<span style="font-size:10px;background:var(--bg-tertiary);color:var(--text-muted);padding:2px 7px;border-radius:var(--radius-xs)">shared</span>';
-      var typeBadge = f.type ? '<span style="font-size:10px;color:var(--text-muted);margin-right:6px">' + esc(f.type) + '</span>' : '';
-      html += '<div class="vault-file-row clickable-row" data-path="' + esc(f.relPath) + '" style="display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-secondary);border-bottom:1px solid var(--border-light);font-size:13px">'
-        + '<div style="flex:1;min-width:0">'
-          + '<div style="font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">' + esc(f.title) + '</div>'
-          + '<div style="font-size:11px;color:var(--text-muted);font-family:\\x27JetBrains Mono\\x27,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px">' + esc(f.relPath) + '</div>'
-        + '</div>'
-        + '<div style="display:flex;align-items:center;gap:8px;flex-shrink:0">'
-          + typeBadge + agentBadge
-          + '<span style="font-size:11px;color:var(--text-muted);min-width:60px;text-align:right">' + esc(timeAgo(f.mtime)) + '</span>'
-        + '</div>'
+      var matches = _vaultContentMatches[f.relPath];
+      var pills = '';
+      if (f.type) pills += '<span class="vault-pill type">' + esc(f.type) + '</span>';
+      (f.tags || []).slice(0, 3).forEach(function(t) {
+        pills += '<span class="vault-pill tag">' + esc(t) + '</span>';
+      });
+      if (matches && matches.length) pills += '<span class="vault-pill match">' + matches.length + ' match' + (matches.length > 1 ? 'es' : '') + '</span>';
+      var when = f.mtime ? esc(timeAgo(f.mtime)) : '';
+      var snippetHtml = '';
+      if (matches && matches.length) {
+        snippetHtml = '<div style="font-size:11px;color:var(--text-secondary);margin-top:4px;border-left:2px solid var(--clementine);padding-left:8px;line-height:1.5">' + esc(matches[0].snippet) + '…</div>';
+      }
+      html += '<div class="vault-mem-row' + (_vaultFilesActive === f.relPath ? ' active' : '') + '" data-path="' + esc(f.relPath) + '">'
+        + '<div class="vault-mem-row-title">' + esc(f.title) + '</div>'
+        + '<div class="vault-mem-row-meta">' + pills + (pills && when ? '<span style="opacity:0.5">·</span>' : '') + (when ? '<span>' + when + '</span>' : '') + '</div>'
+        + '<div class="vault-mem-row-path">' + esc(f.relPath) + '</div>'
+        + snippetHtml
         + '</div>';
     }
-    html += '</div>';
     listEl.innerHTML = html;
-    // Wire row clicks
-    listEl.querySelectorAll('.vault-file-row').forEach(function(row) {
-      row.onclick = function() { openVaultFile(row.getAttribute('data-path')); };
+    listEl.querySelectorAll('.vault-mem-row').forEach(function(row) {
+      row.addEventListener('click', function() { openVaultFile(row.getAttribute('data-path')); });
+      row.addEventListener('mouseenter', function(ev) { vaultStartHover(row.getAttribute('data-path'), ev); });
+      row.addEventListener('mouseleave', vaultEndHover);
     });
+
+    // Re-open the previously active file (or any file from hash on first load)
+    if (_vaultFilesActive && files.some(function(f) { return f.relPath === _vaultFilesActive; })) {
+      openVaultFile(_vaultFilesActive, true);
+    }
   } catch (err) {
     listEl.innerHTML = '<div style="padding:24px;color:var(--red);font-size:13px">Failed to load: ' + esc(String(err)) + '</div>';
   }
 }
 
-async function openVaultFile(relPath) {
+function renderFacetChips(elId, counts, current, onPick, maxItems) {
+  var el = document.getElementById(elId);
+  if (!el) return;
+  var entries = Object.entries(counts).sort(function(a, b) { return b[1] - a[1]; });
+  if (entries.length === 0) { el.innerHTML = '<div style="font-size:11px;color:var(--text-muted);padding:4px 8px">(none)</div>'; return; }
+  var totalCount = entries.reduce(function(s, p) { return s + p[1]; }, 0);
+  var html = '<div class="vault-facet-row' + (current === '' ? ' active' : '') + '" data-val="">All <span class="vault-facet-count">' + totalCount + '</span></div>';
+  entries.slice(0, maxItems).forEach(function(p) {
+    var k = p[0]; var c = p[1];
+    if (!k) return;
+    html += '<div class="vault-facet-row' + (current === k ? ' active' : '') + '" data-val="' + esc(k) + '">'
+      + '<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc(k) + '</span>'
+      + '<span class="vault-facet-count">' + c + '</span>'
+      + '</div>';
+  });
+  el.innerHTML = html;
+  el.querySelectorAll('.vault-facet-row').forEach(function(row) {
+    row.addEventListener('click', function() { onPick(row.getAttribute('data-val')); });
+  });
+}
+
+function vaultSetFolder(v) { _vaultFilesFolder = v || ''; vaultWriteHash(); refreshVaultFiles(); }
+function vaultSetType(v)   { _vaultFilesType   = v || ''; vaultWriteHash(); refreshVaultFiles(); }
+function vaultSetTag(v)    { _vaultFilesTag    = v || ''; vaultWriteHash(); refreshVaultFiles(); }
+// Backwards-compat name used elsewhere.
+function setVaultFolderFilter(folder) { vaultSetFolder(folder); }
+
+async function openVaultFile(relPath, skipHashUpdate) {
   if (!relPath) return;
-  // Build/reuse a slide-out drawer for content preview
-  var drawer = document.getElementById('vault-file-drawer');
-  if (!drawer) {
-    drawer = document.createElement('div');
-    drawer.id = 'vault-file-drawer';
-    drawer.style.cssText = 'position:fixed;right:0;top:0;bottom:0;width:560px;max-width:92vw;background:var(--bg-secondary);border-left:1px solid var(--border);box-shadow:-8px 0 32px rgba(0,0,0,0.18);z-index:200;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 200ms ease';
-    drawer.innerHTML =
-      '<div style="display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0">'
-        + '<div style="flex:1;min-width:0">'
-          + '<div id="vault-file-drawer-title" style="font-weight:600;font-size:15px;letter-spacing:-0.01em"></div>'
-          + '<div id="vault-file-drawer-path" style="font-size:11px;color:var(--text-muted);font-family:\\x27JetBrains Mono\\x27,monospace;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"></div>'
-        + '</div>'
-        + '<button class="btn-icon btn-sm" onclick="closeVaultFileDrawer()" title="Close">' + lucide('x', 'icn-sm') + '</button>'
-      + '</div>'
-      + '<div id="vault-file-drawer-body" style="flex:1;overflow-y:auto;padding:18px 22px;font-size:13px;line-height:1.55"></div>';
-    document.body.appendChild(drawer);
-  }
-  var titleEl = document.getElementById('vault-file-drawer-title');
-  var pathEl = document.getElementById('vault-file-drawer-path');
-  var body = document.getElementById('vault-file-drawer-body');
-  if (titleEl) titleEl.textContent = relPath.split('/').pop().replace(/\\.md$/, '');
-  if (pathEl) pathEl.textContent = relPath;
-  if (body) body.innerHTML = '<div class="skel-block"><div class="skel-row"></div><div class="skel-row med"></div><div class="skel-row short"></div></div>';
-  drawer.style.transform = 'translateX(0)';
+  _vaultFilesActive = relPath;
+  if (!skipHashUpdate) vaultWriteHash();
+  // Visually mark active row
+  document.querySelectorAll('#vault-files-list .vault-mem-row').forEach(function(r) {
+    r.classList.toggle('active', r.getAttribute('data-path') === relPath);
+  });
+  var headerEl = document.getElementById('vault-reader-header');
+  var bodyEl = document.getElementById('vault-reader-body');
+  if (!headerEl || !bodyEl) return;
+  headerEl.innerHTML = '<div style="font-weight:600;font-size:15px">' + esc(relPath.split('/').pop().replace(/\\.md$/, '')) + '</div>'
+    + '<div style="font-size:11px;color:var(--text-muted);font-family:\\x27JetBrains Mono\\x27,monospace;margin-top:2px">' + esc(relPath) + '</div>';
+  bodyEl.innerHTML = '<div class="skel-block"><div class="skel-row"></div><div class="skel-row med"></div><div class="skel-row short"></div></div>';
   try {
     var r = await apiFetch('/api/vault-file?path=' + encodeURIComponent(relPath));
     var d = await r.json();
-    if (d.error) {
-      body.innerHTML = '<div style="color:var(--red)">' + esc(d.error) + '</div>';
-      return;
-    }
-    body.innerHTML = renderMd(d.content);
+    if (d.error) { bodyEl.innerHTML = '<div style="color:var(--red)">' + esc(d.error) + '</div>'; return; }
+    var raw = d.content || '';
+    var fm = vaultExtractFrontmatter(raw);
+    var bodyMd = fm.body;
+    var fmCard = vaultRenderFmCard(fm.data);
+    var rendered = renderMd(bodyMd);
+    var toc = vaultBuildToc(bodyMd);
+    bodyEl.innerHTML = fmCard + '<div class="vault-reader-body">' + rendered + '</div>' + toc;
   } catch (err) {
-    body.innerHTML = '<div style="color:var(--red)">Failed: ' + esc(String(err)) + '</div>';
+    bodyEl.innerHTML = '<div style="color:var(--red)">Failed: ' + esc(String(err)) + '</div>';
   }
 }
 
+// Back-compat (legacy drawer-style call sites). The drawer is gone, but the
+// inline reader covers the same job.
 function closeVaultFileDrawer() {
-  var drawer = document.getElementById('vault-file-drawer');
-  if (drawer) drawer.style.transform = 'translateX(100%)';
-}
-
-function setVaultFolderFilter(folder) {
-  _vaultFilesFolder = folder || '';
-  refreshVaultFiles();
+  _vaultFilesActive = '';
+  vaultWriteHash();
+  var headerEl = document.getElementById('vault-reader-header');
+  var bodyEl = document.getElementById('vault-reader-body');
+  if (headerEl) headerEl.innerHTML = '<div style="font-weight:600;font-size:15px">No file selected</div><div style="font-size:11px;color:var(--text-muted);margin-top:2px">Pick a file from the list to read it here.</div>';
+  if (bodyEl) bodyEl.innerHTML = '<div style="color:var(--text-muted);font-size:13px">Tip: hover a row for a peek, click to open.</div>';
+  document.querySelectorAll('#vault-files-list .vault-mem-row.active').forEach(function(r) { r.classList.remove('active'); });
+}
+
+function vaultExtractFrontmatter(raw) {
+  // Lightweight client-side YAML frontmatter parse — enough for display.
+  if (!raw || raw.indexOf('---') !== 0) return { data: {}, body: raw || '' };
+  var end = raw.indexOf('\\n---', 3);
+  if (end < 0) return { data: {}, body: raw };
+  var fmText = raw.slice(3, end).replace(/^\\n/, '');
+  var body = raw.slice(end + 4).replace(/^\\n/, '');
+  var data = {};
+  fmText.split(/\\n/).forEach(function(line) {
+    var m = line.match(/^([A-Za-z0-9_\\-]+)\\s*:\\s*(.*)$/);
+    if (!m) return;
+    var k = m[1]; var v = m[2].trim();
+    if (v.startsWith('[') && v.endsWith(']')) {
+      v = v.slice(1, -1).split(',').map(function(s) { return s.trim().replace(/^["\\x27]|["\\x27]$/g, ''); }).filter(Boolean);
+    } else {
+      v = v.replace(/^["\\x27]|["\\x27]$/g, '');
+    }
+    data[k] = v;
+  });
+  return { data: data, body: body };
+}
+
+function vaultRenderFmCard(data) {
+  var keys = Object.keys(data || {});
+  if (keys.length === 0) return '';
+  var html = '<div class="vault-reader-fm">';
+  keys.forEach(function(k) {
+    var v = data[k];
+    var display = Array.isArray(v)
+      ? v.map(function(x) { return '<span class="vault-pill tag" style="margin-right:4px">' + esc(String(x)) + '</span>'; }).join('')
+      : esc(String(v));
+    html += '<div class="k">' + esc(k) + '</div><div class="v">' + display + '</div>';
+  });
+  html += '</div>';
+  return html;
+}
+
+function vaultBuildToc(md) {
+  var lines = (md || '').split('\\n');
+  var headings = [];
+  for (var i = 0; i < lines.length; i++) {
+    var m = lines[i].match(/^(#{2,3})\\s+(.+?)\\s*$/);
+    if (!m) continue;
+    var lvl = m[1].length;
+    var txt = m[2];
+    var slug = txt.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+    headings.push({ lvl: lvl, txt: txt, slug: slug });
+  }
+  if (headings.length < 2) return '';
+  var html = '<div class="vault-reader-toc"><div class="vault-reader-toc-title">On this page</div>';
+  headings.forEach(function(h) {
+    html += '<a class="lvl-' + h.lvl + '" href="#' + esc(h.slug) + '">' + esc(h.txt) + '</a>';
+  });
+  html += '</div>';
+  return html;
+}
+
+function vaultStartHover(relPath, ev) {
+  if (!relPath || relPath === _vaultFilesActive) return;
+  clearTimeout(_vaultHoverTimer);
+  var x = ev.clientX, y = ev.clientY;
+  _vaultHoverTimer = setTimeout(async function() {
+    var pop = document.getElementById('vault-hover-popover');
+    if (!pop) return;
+    var data = _vaultHoverCache[relPath];
+    if (!data) {
+      try {
+        var r = await apiFetch('/api/vault-file?head=1&path=' + encodeURIComponent(relPath));
+        data = await r.json();
+        _vaultHoverCache[relPath] = data;
+      } catch { return; }
+    }
+    if (!data || data.error) return;
+    var fm = data.frontmatter || {};
+    var fmHtml = '';
+    Object.keys(fm).slice(0, 5).forEach(function(k) {
+      var v = fm[k];
+      var dv = Array.isArray(v) ? v.join(', ') : String(v);
+      fmHtml += '<div style="display:flex;gap:6px"><span style="color:var(--text-muted);min-width:60px">' + esc(k) + '</span><span>' + esc(dv) + '</span></div>';
+    });
+    pop.innerHTML = '<div style="font-weight:600;font-size:13px;margin-bottom:4px">' + esc(relPath.split('/').pop().replace(/\\.md$/, '')) + '</div>'
+      + (fmHtml ? '<div style="margin-bottom:6px">' + fmHtml + '</div>' : '')
+      + '<div style="color:var(--text-secondary)">' + esc(data.snippet || '(empty)') + '</div>';
+    var px = Math.min(window.innerWidth - 360, x + 16);
+    var py = Math.min(window.innerHeight - 200, y + 16);
+    pop.style.left = px + 'px';
+    pop.style.top = py + 'px';
+    pop.style.display = 'block';
+  }, 250);
+}
+
+function vaultEndHover() {
+  clearTimeout(_vaultHoverTimer);
+  var pop = document.getElementById('vault-hover-popover');
+  if (pop) pop.style.display = 'none';
 }
 
 // ── Goals: inline create form ────────────────────────────────────