clementine-agent 1.18.30 → 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 });
         }
@@ -3989,6 +4033,395 @@ export async function cmdDashboard(opts) {
             res.status(500).json({ error: 'Create failed', detail: String(err) });
         }
     });
+    // ── Routines API (canonical surface for the Build tab) ─────────
+    // The "Routines" UI uses this surface exclusively. Workflows + cron
+    // jobs both flow through here as a single Routine concept; legacy
+    // /api/builder/* and /api/cron/* endpoints remain for one minor
+    // version, then are removed.
+    app.get('/api/routines', async (_req, res) => {
+        try {
+            const { listAllForBuilder } = await import('../dashboard/builder/serializer.js');
+            res.json({ routines: listAllForBuilder() });
+        }
+        catch (err) {
+            res.status(500).json({ error: 'list failed', detail: String(err) });
+        }
+    });
+    app.get('/api/routines/mcp-tools', async (_req, res) => {
+        try {
+            const { discoverMcpServers, loadToolInventory } = await import('../agent/mcp-bridge.js');
+            const servers = discoverMcpServers();
+            const inv = loadToolInventory();
+            const allTools = inv?.tools ?? [];
+            // Group flat tool names of shape `mcp__<server>__<tool>` (server may
+            // contain underscores — split on the first `__` after the prefix).
+            const grouped = {};
+            for (const s of servers) {
+                grouped[s.name] = { name: s.name, enabled: s.enabled !== false, tools: [] };
+            }
+            for (const t of allTools) {
+                if (!t.startsWith('mcp__'))
+                    continue;
+                const rest = t.slice(5);
+                const idx = rest.indexOf('__');
+                if (idx < 0)
+                    continue;
+                const server = rest.slice(0, idx);
+                const tool = rest.slice(idx + 2);
+                if (!grouped[server])
+                    grouped[server] = { name: server, enabled: true, tools: [] };
+                if (!grouped[server].tools.includes(tool))
+                    grouped[server].tools.push(tool);
+            }
+            const out = Object.values(grouped)
+                .filter(s => s.tools.length > 0 || s.enabled)
+                .sort((a, b) => a.name.localeCompare(b.name));
+            res.json({ servers: out });
+        }
+        catch (err) {
+            res.status(500).json({ error: 'mcp-tools failed', detail: String(err) });
+        }
+    });
+    app.get('/api/routines/cli-tools', async (_req, res) => {
+        try {
+            // Reuse discoverCliTools() defined elsewhere in this file.
+            const tools = discoverCliTools().filter(t => t.installed && !t.blocked);
+            res.json({ tools: tools.map(t => ({ cmd: t.name, description: t.description, userDefined: !!t.userDefined })) });
+        }
+        catch (err) {
+            res.status(500).json({ error: 'cli-tools failed', detail: String(err) });
+        }
+    });
+    app.get('/api/routines/:id', async (req, res) => {
+        try {
+            const id = decodeURIComponent(req.params.id);
+            const { readWorkflow } = await import('../dashboard/builder/serializer.js');
+            const { validateWorkflow } = await import('../dashboard/builder/validation.js');
+            const wf = readWorkflow(id);
+            if (!wf) {
+                res.status(404).json({ error: 'Not found' });
+                return;
+            }
+            res.json({ id, routine: wf, validation: validateWorkflow(wf) });
+        }
+        catch (err) {
+            res.status(500).json({ error: 'read failed', detail: String(err) });
+        }
+    });
+    app.post('/api/routines', async (req, res) => {
+        try {
+            const body = req.body;
+            if (!body || !body.name) {
+                res.status(400).json({ error: 'name required' });
+                return;
+            }
+            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 ?? [{
+                        id: 's1',
+                        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);
+            if (!result.ok) {
+                res.status(400).json({ error: result.error });
+                return;
+            }
+            emitBuilderEvent({ type: 'workflow:created', workflowId: id, payload: { workflow: wf } });
+            res.json({ ok: true, id });
+        }
+        catch (err) {
+            res.status(500).json({ error: 'create failed', detail: String(err) });
+        }
+    });
+    app.put('/api/routines/:id', async (req, res) => {
+        try {
+            const id = decodeURIComponent(req.params.id);
+            const body = req.body;
+            if (!body || typeof body.routine !== 'object') {
+                res.status(400).json({ error: 'Missing routine body' });
+                return;
+            }
+            const [{ readWorkflow, saveWorkflow }, { validateWorkflow }, { emitBuilderEvent }] = await Promise.all([
+                import('../dashboard/builder/serializer.js'),
+                import('../dashboard/builder/validation.js'),
+                import('../dashboard/builder/events.js'),
+            ]);
+            const existing = readWorkflow(id);
+            if (!existing) {
+                res.status(404).json({ error: 'Not found' });
+                return;
+            }
+            const incoming = body.routine;
+            const next = { ...incoming, sourceFile: existing.sourceFile };
+            const v = validateWorkflow(next);
+            if (!v.ok && !body.force) {
+                res.status(400).json({ error: 'validation', validation: v });
+                return;
+            }
+            const result = saveWorkflow(id, next);
+            if (!result.ok) {
+                res.status(400).json({ error: result.error });
+                return;
+            }
+            emitBuilderEvent({ type: 'workflow:patched', workflowId: id, payload: { workflow: next } });
+            res.json({ ok: true, validation: v });
+        }
+        catch (err) {
+            res.status(500).json({ error: 'save failed', detail: String(err) });
+        }
+    });
+    app.delete('/api/routines/:id', async (req, res) => {
+        try {
+            const id = decodeURIComponent(req.params.id);
+            const [{ readWorkflow, parseBuilderId }, { emitBuilderEvent }] = await Promise.all([
+                import('../dashboard/builder/serializer.js'),
+                import('../dashboard/builder/events.js'),
+            ]);
+            const parsed = parseBuilderId(id);
+            if (!parsed) {
+                res.status(400).json({ error: 'Bad id' });
+                return;
+            }
+            if (parsed.origin === 'cron') {
+                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);
+            if (!wf) {
+                res.status(404).json({ error: 'Not found' });
+                return;
+            }
+            if (wf.sourceFile && existsSync(wf.sourceFile))
+                unlinkSync(wf.sourceFile);
+            emitBuilderEvent({ type: 'workflow:deleted', workflowId: id });
+            res.json({ ok: true });
+        }
+        catch (err) {
+            res.status(500).json({ error: String(err) });
+        }
+    });
+    app.post('/api/routines/:id/toggle', async (req, res) => {
+        try {
+            const id = decodeURIComponent(req.params.id);
+            const { readWorkflow, saveWorkflow } = await import('../dashboard/builder/serializer.js');
+            const wf = readWorkflow(id);
+            if (!wf) {
+                res.status(404).json({ error: 'Not found' });
+                return;
+            }
+            wf.enabled = !wf.enabled;
+            const result = saveWorkflow(id, wf);
+            if (!result.ok) {
+                res.status(400).json({ error: result.error });
+                return;
+            }
+            res.json({ ok: true, enabled: wf.enabled });
+        }
+        catch (err) {
+            res.status(500).json({ error: 'toggle failed', detail: String(err) });
+        }
+    });
+    app.post('/api/routines/:id/run', async (req, res) => {
+        try {
+            const id = decodeURIComponent(req.params.id);
+            const { readWorkflow, parseBuilderId } = await import('../dashboard/builder/serializer.js');
+            const wf = readWorkflow(id);
+            if (!wf) {
+                res.status(404).json({ error: 'Not found' });
+                return;
+            }
+            const parsed = parseBuilderId(id);
+            const body = (req.body ?? {});
+            // Cron-origin routines: spawn the cli `cron run <name>` (single-step prompt path).
+            if (parsed?.origin === 'cron') {
+                const child = spawn('node', [DIST_ENTRY, 'cron', 'run', wf.name], {
+                    detached: true,
+                    stdio: ['ignore', 'pipe', 'pipe'],
+                    cwd: BASE_DIR,
+                    env: { ...process.env, CLEMENTINE_HOME: BASE_DIR },
+                });
+                child.on('exit', (code) => {
+                    broadcastEvent({ type: 'cron_complete', data: { job: wf.name, code } });
+                    responseCache.delete('activity:');
+                });
+                child.unref();
+                broadcastEvent({ type: 'cron_triggered', data: { job: wf.name } });
+                res.json({ ok: true, message: `Triggered trick: ${wf.name}` });
+                return;
+            }
+            // Workflow-origin routines: side-effect approval gate, then route through gateway.handleWorkflow.
+            const sideEffects = wf.steps
+                .filter(step => {
+                const kind = step.kind ?? 'prompt';
+                if (kind === 'channel' || kind === 'mcp' || kind === 'cli')
+                    return true;
+                return /\b(send|post|publish|email|webhook|delete|write|update|create)\b/i.test(step.prompt || '');
+            })
+                .map(step => ({
+                id: step.id,
+                kind: step.kind ?? 'prompt',
+                label: step.channel
+                    ? `${step.channel.channel}:${step.channel.target}`
+                    : step.mcp
+                        ? `${step.mcp.server}.${step.mcp.tool}`
+                        : step.cli
+                            ? `${step.cli.cmd}${step.cli.args?.length ? ' ' + step.cli.args.join(' ') : ''}`
+                            : step.prompt.slice(0, 80),
+            }));
+            if (sideEffects.length > 0 && body.approvedSideEffects !== true) {
+                res.status(409).json({
+                    ok: false,
+                    error: 'approval_required',
+                    message: 'This trick may send, write, post, or call external tools. Approve side effects before running it.',
+                    sideEffects,
+                });
+                return;
+            }
+            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) } });
+            }).catch(err => {
+                broadcastEvent({ type: 'workflow_complete', data: { id, name: wf.name, status: 'error', error: String(err) } });
+            });
+        }
+        catch (err) {
+            res.status(500).json({ error: 'run failed', detail: String(err) });
+        }
+    });
+    app.post('/api/routines/:id/dry-run', async (req, res) => {
+        try {
+            const id = decodeURIComponent(req.params.id);
+            const [{ readWorkflow }, { dryRunWorkflow }] = await Promise.all([
+                import('../dashboard/builder/serializer.js'),
+                import('../dashboard/builder/dry-run.js'),
+            ]);
+            const wf = readWorkflow(id);
+            if (!wf) {
+                res.status(404).json({ error: 'Not found' });
+                return;
+            }
+            res.json(dryRunWorkflow(wf));
+        }
+        catch (err) {
+            res.status(500).json({ error: 'dry-run failed', detail: String(err) });
+        }
+    });
+    app.post('/api/routines/:id/test', async (req, res) => {
+        try {
+            const id = decodeURIComponent(req.params.id);
+            const body = (req.body ?? {});
+            const [{ readWorkflow }, { runWorkflowTest }] = await Promise.all([
+                import('../dashboard/builder/serializer.js'),
+                import('../dashboard/builder/runner.js'),
+            ]);
+            const wf = readWorkflow(id);
+            if (!wf) {
+                res.status(404).json({ error: 'Not found' });
+                return;
+            }
+            const runId = (await import('node:crypto')).randomUUID();
+            res.json({ ok: true, runId });
+            runWorkflowTest(wf, {
+                workflowId: id,
+                runId,
+                mode: body.mode ?? 'mock',
+                perStepTimeoutMs: body.perStepTimeoutMs,
+                totalBudgetMs: body.totalBudgetMs,
+            }).catch(() => { });
+        }
+        catch (err) {
+            res.status(500).json({ error: 'test failed to start', detail: String(err) });
+        }
+    });
+    app.get('/api/routines/:id/runs', async (req, res) => {
+        try {
+            const id = decodeURIComponent(req.params.id);
+            const { readWorkflow } = await import('../dashboard/builder/serializer.js');
+            const wf = readWorkflow(id);
+            if (!wf) {
+                res.status(404).json({ error: 'Not found' });
+                return;
+            }
+            const safe = wf.name.replace(/[^a-zA-Z0-9_-]/g, '_');
+            const cronLogPath = path.join(BASE_DIR, 'cron-logs', `${safe}.jsonl`);
+            const workflowLogPath = path.join(BASE_DIR, 'workflows', 'runs', `${safe}.jsonl`);
+            const runs = [];
+            for (const file of [cronLogPath, workflowLogPath]) {
+                if (!existsSync(file))
+                    continue;
+                try {
+                    const lines = readFileSync(file, 'utf-8').split('\n').filter(l => l.trim());
+                    for (const line of lines.slice(-50)) {
+                        try {
+                            runs.push(JSON.parse(line));
+                        }
+                        catch { /* skip malformed */ }
+                    }
+                }
+                catch { /* skip unreadable */ }
+            }
+            runs.sort((a, b) => {
+                const at = String(a.startedAt || a.timestamp || '');
+                const bt = String(b.startedAt || b.timestamp || '');
+                return bt.localeCompare(at);
+            });
+            res.json({ runs: runs.slice(0, 50) });
+        }
+        catch (err) {
+            res.status(500).json({ error: 'runs read failed', detail: String(err) });
+        }
+    });
     // SSE events handler moved before auth middleware (see above)
     // ── POST routes (actions) ──────────────────────────────────────
     app.post('/api/cron/run/:job', (req, res) => {
@@ -7044,6 +7477,55 @@ If the tool returns nothing or errors, return an empty array \`[]\`.`,
             res.status(500).json({ error: String(err) });
         }
     });
+    // Learned facts — durable cross-session beliefs with supersession lineage.
+    app.get('/api/memory/learnings', async (req, res) => {
+        try {
+            const gateway = await getGateway();
+            const store = gateway.assistant?.memoryStore;
+            if (!store || typeof store.listAllLearnedFacts !== 'function') {
+                res.status(503).json({ error: 'Learnings store not available' });
+                return;
+            }
+            const limit = Math.min(parseInt(String(req.query.limit ?? '100'), 10) || 100, 1000);
+            const showAll = String(req.query.all ?? '') === '1';
+            const facts = showAll
+                ? store.listAllLearnedFacts({ limit })
+                : store.listActiveLearnedFacts({ limit });
+            res.json({ ok: true, facts });
+        }
+        catch (err) {
+            res.status(500).json({ error: String(err) });
+        }
+    });
+    app.post('/api/memory/learnings/action', async (req, res) => {
+        try {
+            const gateway = await getGateway();
+            const store = gateway.assistant?.memoryStore;
+            if (!store || typeof store.setLearnedFactStatus !== 'function') {
+                res.status(503).json({ error: 'Learnings store not available' });
+                return;
+            }
+            const id = Number(req.body?.id);
+            const action = String(req.body?.action ?? '');
+            if (!Number.isInteger(id) || id <= 0) {
+                res.status(400).json({ error: 'id required' });
+                return;
+            }
+            let updated = false;
+            if (action === 'cancel')
+                updated = store.setLearnedFactStatus(id, 'cancelled');
+            else if (action === 'reinstate')
+                updated = store.setLearnedFactStatus(id, 'active');
+            else {
+                res.status(400).json({ error: 'invalid action' });
+                return;
+            }
+            res.json({ ok: updated });
+        }
+        catch (err) {
+            res.status(500).json({ error: String(err) });
+        }
+    });
     // Commitments — durable promises tracked across sessions.
     app.get('/api/memory/commitments', async (req, res) => {
         try {
@@ -7537,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;
@@ -13751,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;
@@ -14477,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>
@@ -14679,189 +15234,876 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
       </div>
     </div>
 
-    <!-- ═══ Builder Page — Conversational Artifact Creation ═══ -->
+    <!-- ═══ Build Page — Routines (single unified surface) ═══ -->
     <div class="page" id="page-build">
-      <div class="tab-bar" id="build-tabs" style="margin:0;padding:0 18px;background:var(--bg-secondary);border-bottom:1px solid var(--border)">
-        <button class="active" data-build-tab="crons" data-icon="clock" onclick="switchBuildTab('crons')"><span class="icon-slot"></span> Operations <span class="tab-badge" id="build-tab-cron-count" style="display:none">0</span></button>
-        <button data-build-tab="workflows" data-icon="workflow" onclick="switchBuildTab('workflows')"><span class="icon-slot"></span> Workflow Builder</button>
-        <button data-build-tab="skills" data-icon="shield" onclick="switchBuildTab('skills')"><span class="icon-slot"></span> Skills <span class="tab-badge" id="build-tab-skill-count" style="display:none">0</span></button>
-        <button data-build-tab="templates" data-icon="fileText" onclick="switchBuildTab('templates')"><span class="icon-slot"></span> Templates</button>
-      </div>
-      <!-- Builder header strip — persists across tabs (except Templates) -->
-      <div id="build-header-strip" style="display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--border)">
-        <select id="builder-type" onchange="resetBuilder();updateBuilderMode()" style="display:none">
-          <option value="skill">skill</option>
-          <option value="cron">cron</option>
-          <option value="agent">agent</option>
-          <option value="workflow">workflow</option>
-        </select>
-        <label style="font-size:11px;color:var(--text-muted);font-weight:500;letter-spacing:0.04em;text-transform:uppercase">Owner</label>
-        <select id="builder-owner" onchange="onBuilderOwnerChange()" title="Filter and create scoped to this owner" style="padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:12px;min-width:160px">
-          <option value="__all__">All agents</option>
-          <option value="">Clementine (global)</option>
-        </select>
-        <span id="builder-agent-label" style="padding:0;font-size:13px;color:var(--text-secondary);font-weight:500"></span>
-        <input type="hidden" id="builder-agent" value="">
+      <!-- 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> 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>
-        <button class="btn-sm btn-primary" id="builder-new-btn" onclick="newFromBuildHeader()" title="Create a new artifact for this tab" style="padding:4px 14px;border-radius:6px;cursor:pointer;font-size:12px">New Workflow</button>
-        <button class="btn-sm" id="builder-test-btn" onclick="testBuilderSkill()" style="background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12px;display:none">Test</button>
-        <button class="btn-sm btn-primary" id="builder-save-btn" onclick="saveBuilderArtifact()" style="padding:4px 16px;font-size:12px;display:none">Save</button>
-      </div>
-      <div id="build-usage-panel" style="padding:12px 18px;border-bottom:1px solid var(--border);background:var(--bg-primary)">
-        <div class="skel-block"><div class="skel-row med"></div><div class="skel-row short"></div></div>
+        <label id="routines-owner-label" style="font-size:11px;color:var(--text-muted);font-weight:500;letter-spacing:0.04em;text-transform:uppercase">Owner</label>
+        <select id="routines-owner-filter" onchange="window.RoutinesUI && RoutinesUI.renderList()" style="padding:5px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:12px;min-width:160px">
+          <option value="__all__">All</option>
+          <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.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>
-      <!-- Build tab content area: canvas DOMINATES, chat is a sidebar -->
-      <div id="build-tab-workflows" data-build-tabpane="workflows" style="display:none;flex:1;min-height:0;overflow:hidden">
-        <!-- Left: Chat sidebar (compact) -->
-        <div id="builder-chat-sidebar" style="width:360px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--bg-secondary)">
-          <div id="builder-messages" style="flex:1;overflow-y:auto;padding:16px">
-            <div class="empty-state" id="builder-empty-state" style="margin-top:40px">
-              <p style="color:var(--text-muted);margin-bottom:12px">Describe what you want to build.</p>
-              <div style="display:flex;flex-wrap:wrap;gap:8px;justify-content:center">
-                <button class="btn btn-sm quick-pill" onclick="builderQuick('Create a workflow that researches a topic, writes a draft, and sends it for review')">Research workflow</button>
-                <button class="btn btn-sm quick-pill" onclick="builderQuick('Create a workflow that reviews open PRs, summarizes risk, and sends a digest')">PR review digest</button>
-                <button class="btn btn-sm quick-pill" onclick="builderQuick('Create a workflow that collects leads, scores them against my ICP, and prepares outreach drafts')">Lead research flow</button>
-                <button class="btn btn-sm quick-pill" onclick="builderQuick('Create a workflow that reviews recent notes, extracts open items, and drafts next priorities')">Weekly review workflow</button>
-              </div>
-            </div>
-          </div>
-          <div id="builder-file-area" style="padding:8px 16px;border-top:1px solid var(--border);background:var(--bg-secondary)">
-            <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
-              <span style="font-size:11px;font-weight:600;color:var(--text-secondary)">Reference Files</span>
-              <label style="cursor:pointer;display:inline-flex;align-items:center;gap:4px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;padding:2px 8px;font-size:11px;color:var(--text-primary)">
-                + Add
-                <input type="file" multiple accept=".csv,.md,.txt,.json,.docx,.xlsx,.yaml,.yml,.xml,.html,.py,.js,.ts" style="display:none" onchange="handleBuilderFileUpload(event)">
-              </label>
-              <span style="font-size:10px;color:var(--text-muted)">Sent with each message so the AI can reference them</span>
-            </div>
-            <div id="builder-attachments-list"></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 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.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 style="display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);align-items:center">
-            <label style="cursor:pointer;display:flex;align-items:center;color:var(--text-muted);font-size:18px" title="Attach file">
-              <input type="file" multiple accept=".csv,.md,.txt,.json,.docx,.xlsx,.yaml,.yml,.xml,.html,.py,.js,.ts" style="display:none" onchange="handleBuilderFileUpload(event)">&#x1F4CE;
-            </label>
-            <input type="text" id="builder-input" placeholder="Describe what you want to build..." onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendBuilderChat()}" style="flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);color:var(--text-primary);font-size:13px">
-            <button class="btn-primary" onclick="sendBuilderChat()" style="padding:10px 18px;border-radius:8px">Send</button>
+        </div>
+        <div id="routines-list-wrap" style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden">
+          <table style="width:100%;border-collapse:collapse;font-size:13px">
+            <thead style="text-align:left;color:var(--text-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;background:var(--bg-tertiary)">
+              <tr>
+                <th style="padding:11px 14px">Name</th>
+                <th style="padding:11px 14px">Owner</th>
+                <th style="padding:11px 14px">Schedule</th>
+                <th style="padding:11px 14px">Steps</th>
+                <th style="padding:11px 14px">Last run</th>
+                <th style="padding:11px 14px;text-align:center">Enabled</th>
+                <th style="padding:11px 14px;text-align:right">Actions</th>
+              </tr>
+            </thead>
+            <tbody id="routines-list-body"></tbody>
+          </table>
+        </div>
+      </div>
+      <!-- Editor pane (hidden by default; replaces list when a routine is opened) -->
+      <div id="routines-editor-pane" style="display:none;flex:1;min-height:0;overflow-y:auto;background:var(--bg-primary);padding:18px"></div>
+      <!-- Run history drawer (slide-out from right) -->
+      <div id="routines-runs-drawer" style="display:none;position:fixed;top:var(--header-h, 56px);right:0;bottom:0;width:520px;max-width:100vw;background:var(--bg-secondary);border-left:1px solid var(--border);box-shadow:-4px 0 24px rgba(0,0,0,0.18);z-index:120;overflow-y:auto"></div>
+      <!-- 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 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>
+          <input type="text" id="routines-create-description" placeholder="What does it do?" 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">Schedule (optional cron expression)</label>
+          <input type="text" id="routines-create-schedule" placeholder="e.g. 0 8 * * *  (leave blank for manual)" style="padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text-primary);font-size:13px;font-family:'JetBrains Mono',monospace">
+          <label style="font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.04em">Owner</label>
+          <select id="routines-create-owner" style="padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text-primary);font-size:13px">
+            <option value="">Clementine (global)</option>
+          </select>
+          <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:6px">
+            <button class="btn-sm" onclick="window.RoutinesUI && RoutinesUI.closeCreate()" style="padding:6px 14px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary)">Cancel</button>
+            <button class="btn-sm btn-primary" onclick="window.RoutinesUI && RoutinesUI.submitCreate()" style="padding:6px 14px">Create</button>
           </div>
         </div>
-        <!-- Right: Canvas (dominant) + Existing Skills drawer -->
-        <div id="builder-right-pane" style="flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-primary)">
-          <div style="padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:10px;flex-wrap:wrap">
-            <span id="builder-right-pane-title">Workflow Builder</span>
-            <span id="builder-preview-status" style="font-size:11px;color:var(--text-muted)"></span>
+      </div>
+      <!-- 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>
-            <select id="builder-canvas-picker" onchange="openBuilderWorkflow(this.value)" style="display:none;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:12px;max-width:240px">
-              <option value="">— pick a workflow —</option>
-            </select>
-            <button id="builder-canvas-validate-btn" onclick="validateBuilderCanvas()" title="Static checks (cycles, missing fields, deps)" style="display:none;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);padding:3px 8px;border-radius:4px;cursor:pointer;font-size:11px">Validate</button>
-            <button id="builder-canvas-dryrun-btn" onclick="dryRunBuilderCanvas()" title="Describe what each step would do (no execution)" style="display:none;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);padding:3px 8px;border-radius:4px;cursor:pointer;font-size:11px">Dry-run</button>
-            <button id="builder-canvas-test-btn" onclick="testBuilderCanvas()" title="Mock-safe validation run; prompt steps are stubbed" style="display:none;background:var(--clementine);border:none;color:#fff;padding:3px 10px;border-radius:4px;cursor:pointer;font-size:11px">Mock Test</button>
-            <button id="builder-canvas-real-run-btn" onclick="runBuilderCanvasReal()" title="Run through the real workflow engine; side effects require approval" style="display:none;background:var(--green);border:none;color:#fff;padding:3px 10px;border-radius:4px;cursor:pointer;font-size:11px">Run Real</button>
-            <button id="builder-canvas-cancel-btn" onclick="cancelBuilderTest()" title="Cancel test run" style="display:none;background:var(--red);border:none;color:#fff;padding:3px 10px;border-radius:4px;cursor:pointer;font-size:11px">Cancel</button>
+            <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>
-          <div id="builder-preview" style="flex:1;overflow-y:auto;padding:16px">
-            <div class="empty-state" style="font-size:13px;color:var(--text-muted)">The artifact will appear here as you build it</div>
-          </div>
-          <div id="builder-canvas-host" style="display:none;flex:1;flex-direction:column;min-height:0;position:relative">
-            <div id="builder-canvas-banner" style="padding:8px 14px;background:var(--bg-tertiary);border-bottom:1px solid var(--border);font-size:11px;color:var(--text-muted);display:none"></div>
-            <div id="builder-canvas" style="flex:1;background:var(--bg-tertiary);position:relative;overflow:hidden"></div>
-            <!-- Floating add-node FAB + palette popover -->
-            <button id="builder-palette-btn" onclick="toggleBuilderPalette()" title="Add a step" style="position:absolute;left:14px;bottom:48px;width:40px;height:40px;border-radius:50%;background:var(--clementine);color:#fff;border:none;font-size:20px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.25);z-index:10">+</button>
-            <div id="builder-palette-pop" style="display:none;position:absolute;left:60px;bottom:48px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.2);z-index:11;min-width:160px">
-              <div onclick="_builderAddNodeOfKind('prompt')" class="builder-palette-item" data-kind="prompt">prompt</div>
-              <div onclick="_builderAddNodeOfKind('mcp')" class="builder-palette-item" data-kind="mcp">mcp tool</div>
-              <div onclick="_builderAddNodeOfKind('channel')" class="builder-palette-item" data-kind="channel">channel</div>
-              <div onclick="_builderAddNodeOfKind('transform')" class="builder-palette-item" data-kind="transform">transform</div>
-            </div>
-            <!-- Slide-out config panel -->
-            <div id="builder-config-panel" style="display:none;position:absolute;right:0;top:0;bottom:0;width:340px;background:var(--bg-secondary);border-left:1px solid var(--border);box-shadow:-4px 0 16px rgba(0,0,0,0.15);z-index:12;flex-direction:column"></div>
-            <!-- Empty-state CTA — visible when no workflow is open on the canvas -->
-            <div id="builder-canvas-empty" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:var(--text-muted);text-align:center;padding:32px;pointer-events:none">
-              <div style="font-size:38px;opacity:0.4">&#128279;</div>
-              <div style="font-size:14px;font-weight:500;color:var(--text-secondary)">No workflow open</div>
-              <div style="font-size:12px;line-height:1.5;max-width:280px">
-                Pick one from the dropdown above &mdash; or click <strong>New</strong> in the header to create one from scratch, or open the <strong>Templates</strong> tab for starter patterns.
-              </div>
-            </div>
-            <div id="builder-canvas-footer" style="padding:6px 14px;border-top:1px solid var(--border);font-size:11px;color:var(--text-muted);display:flex;gap:14px;align-items:center">
-              <span id="builder-canvas-status"></span>
-              <span style="flex:1"></span>
-              <button id="builder-delete-btn" onclick="deleteCurrentBuilderWorkflow()" title="Delete this workflow" style="display:none;background:none;border:1px solid transparent;color:var(--red);font-size:11px;cursor:pointer;padding:2px 8px;border-radius:var(--radius-xs)">Delete</button>
-              <span id="builder-canvas-id" style="font-family:'JetBrains Mono',monospace;opacity:0.6"></span>
+          <!-- 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>
-          <!-- Existing skills drawer (visible in skill mode) -->
-          <div id="builder-skills-drawer" style="display:none;border-top:2px solid var(--border);max-height:260px;overflow-y:auto">
-            <div style="padding:10px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg-secondary);z-index:1">
-              <span style="font-size:12px;font-weight:600;color:var(--text-secondary)">Existing Skills</span>
-              <span id="builder-skills-count" style="font-size:10px;color:var(--text-muted)"></span>
+            <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 id="builder-skills-list" style="padding:0 12px 12px"></div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Scheduled Tasks tab — simple recurring-task management. The visual canvas is for workflows. -->
-      <div id="build-tab-crons" data-build-tabpane="crons" style="display:block;flex:1;min-height:0;overflow-y:auto;padding:18px;background:var(--bg-primary)">
-        <div style="display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;flex-wrap:wrap">
-          <div style="flex:1;min-width:260px">
-            <h2 style="font-size:18px;font-weight:600;margin:0 0 4px;color:var(--text-primary)">Build Operations</h2>
-            <p style="font-size:13px;color:var(--text-muted);margin:0;line-height:1.45">Scheduled tasks, scheduled workflows, and live runtime work. Cards here are the turn-on, turn-off, run-now surface.</p>
-          </div>
-          <div style="display:flex;gap:8px;flex-wrap:wrap">
-            <button class="btn-sm btn-primary" onclick="openCreateCronModal(getBuildCreateOwner())" style="padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12px">New Scheduled Task</button>
-            <button class="btn-sm" onclick="createScheduledWorkflowFromBuild()" style="padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12px">New Scheduled Workflow</button>
           </div>
         </div>
-        <div id="panel-cron"></div>
       </div>
-
-      <!-- Templates tab — starter patterns -->
-      <div id="build-tab-templates" data-build-tabpane="templates" style="display:none;padding:24px;overflow-y:auto">
-        <div style="max-width:920px;margin:0 auto">
-          <h2 style="font-size:18px;font-weight:600;margin:0 0 6px;color:var(--text-primary)">Start from a template</h2>
-          <p style="font-size:13px;color:var(--text-muted);margin:0 0 18px">Pick a pre-built pattern to fork into a new editable workflow.</p>
-          <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px">
-            <div class="card clickable-row" onclick="forkBuildTemplate('daily-news-digest')" style="padding:18px">
-              <div style="font-size:24px;margin-bottom:8px">&#128240;</div>
-              <div style="font-weight:600;font-size:14px;margin-bottom:4px">Daily news digest</div>
-              <div style="font-size:12px;color:var(--text-muted);line-height:1.4">Scheduled 7am: pull RSS sources, summarize, send to Slack/email.</div>
-              <div style="margin-top:10px;font-size:11px;color:var(--clementine);font-weight:500">scheduled workflow · 4 steps</div>
-            </div>
-            <div class="card clickable-row" onclick="forkBuildTemplate('lead-picker')" style="padding:18px">
-              <div style="font-size:24px;margin-bottom:8px">&#128202;</div>
-              <div style="font-weight:600;font-size:14px;margin-bottom:4px">Lead picker → Salesforce</div>
-              <div style="font-size:12px;color:var(--text-muted);line-height:1.4">Manual workflow: search leads by ICP, review, push selected to SF.</div>
-              <div style="margin-top:10px;font-size:11px;color:var(--clementine);font-weight:500">manual · 3 steps</div>
-            </div>
-            <div class="card clickable-row" onclick="forkBuildTemplate('pr-review-queue')" style="padding:18px">
-              <div style="font-size:24px;margin-bottom:8px">&#128221;</div>
-              <div style="font-weight:600;font-size:14px;margin-bottom:4px">PR review queue</div>
-              <div style="font-size:12px;color:var(--text-muted);line-height:1.4">Scheduled 9am M-F: list open PRs, summarize risk, message to Slack.</div>
-              <div style="margin-top:10px;font-size:11px;color:var(--clementine);font-weight:500">scheduled workflow · 3 steps</div>
-            </div>
-            <div class="card clickable-row" onclick="forkBuildTemplate('email-triage')" style="padding:18px">
-              <div style="font-size:24px;margin-bottom:8px">&#128231;</div>
-              <div style="font-weight:600;font-size:14px;margin-bottom:4px">Email triage</div>
-              <div style="font-size:12px;color:var(--text-muted);line-height:1.4">Scheduled 8am: list unread emails, classify by intent, draft replies for review.</div>
-              <div style="margin-top:10px;font-size:11px;color:var(--clementine);font-weight:500">scheduled workflow · 4 steps</div>
-            </div>
-            <div class="card clickable-row" onclick="forkBuildTemplate('weekly-review')" style="padding:18px">
-              <div style="font-size:24px;margin-bottom:8px">&#128197;</div>
-              <div style="font-weight:600;font-size:14px;margin-bottom:4px">Weekly review</div>
-              <div style="font-size:12px;color:var(--text-muted);line-height:1.4">Scheduled Fri 6pm: review the week's daily notes, generate review note.</div>
-              <div style="margin-top:10px;font-size:11px;color:var(--clementine);font-weight:500">scheduled workflow · 3 steps</div>
-            </div>
-            <div class="card clickable-row" onclick="forkBuildTemplate('blank-workflow')" style="padding:18px;border-style:dashed">
-              <div style="font-size:24px;margin-bottom:8px">&#10133;</div>
-              <div style="font-weight:600;font-size:14px;margin-bottom:4px">Blank workflow</div>
-              <div style="font-size:12px;color:var(--text-muted);line-height:1.4">Start from scratch with a single prompt step.</div>
-              <div style="margin-top:10px;font-size:11px;color:var(--clementine);font-weight:500">manual · 1 step</div>
-            </div>
+      <!-- Step picker modal -->
+      <div id="routines-step-picker" 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:0;width:640px;max-width:94vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden">
+          <div style="padding:16px 20px;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)">Add step</h3>
+            <span style="flex:1"></span>
+            <button class="btn-sm" onclick="window.RoutinesUI && RoutinesUI.closeStepPicker()" style="padding:4px 10px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary)">&times;</button>
           </div>
+          <div id="routines-step-picker-body" style="padding:16px 20px;overflow-y:auto;flex:1"></div>
         </div>
       </div>
     </div>
+    <script>
+      // ── Routines UI ─────────────────────────────────────────────────
+      // Vanilla JS module that drives the new Routines surface. State-light,
+      // re-fetches from /api/routines on most actions to stay correct without
+      // a client-side data store. Renders linear step lists; no canvas.
+      (function() {
+        var R = {
+          state: {
+            list: [],
+            owners: [],
+            mcpTools: null,        // { servers: [{name,enabled,tools:[]}, ...] }
+            cliTools: null,        // [{cmd,description,userDefined}, ...]
+            editing: null,         // { id, routine, dirty }
+            assistBusy: false,
+          },
+          init: function() {
+            // Load reference data lazily; trigger list render immediately.
+            this.loadOwners();
+            this.refreshList();
+            this.loadMcpTools();
+            this.loadCliTools();
+          },
+          // ── data ────────────────────────────────────────────────────
+          loadOwners: function() {
+            // Reuse the agent registry the rest of the dashboard uses.
+            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 */ });
+          },
+          populateOwnerSelects: function() {
+            var filter = document.getElementById('routines-owner-filter');
+            var creator = document.getElementById('routines-create-owner');
+            var keepFilter = filter && filter.value;
+            if (filter) {
+              filter.innerHTML = '<option value="__all__">All</option><option value="__global__">Clementine (global)</option>'
+                + R.state.owners.map(function(o){ return '<option value="' + R.esc(o.slug) + '">@' + R.esc(o.name) + '</option>'; }).join('');
+              if (keepFilter) filter.value = keepFilter;
+            }
+            if (creator) {
+              creator.innerHTML = '<option value="">Clementine (global)</option>'
+                + R.state.owners.map(function(o){ return '<option value="' + R.esc(o.slug) + '">@' + R.esc(o.name) + '</option>'; }).join('');
+            }
+          },
+          loadMcpTools: function() {
+            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() {
+            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() {
+            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(); });
+          },
+          // ── list view ───────────────────────────────────────────────
+          renderList: function() {
+            var body = document.getElementById('routines-list-body');
+            var empty = document.getElementById('routines-list-empty');
+            var wrap = document.getElementById('routines-list-wrap');
+            var count = document.getElementById('routines-count');
+            if (!body || !empty || !wrap) return;
+            var filter = (document.getElementById('routines-owner-filter') || {}).value || '__all__';
+            var rows = R.state.list.filter(function(r){
+              if (filter === '__all__') return true;
+              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 ? ' trick' : ' tricks');
+            if (rows.length === 0) {
+              empty.style.display = 'block';
+              wrap.style.display = 'none';
+              return;
+            }
+            empty.style.display = 'none';
+            wrap.style.display = 'block';
+            body.innerHTML = rows.map(function(r){
+              var owner = r.scope === 'agent' ? '@' + R.esc(r.agentSlug || '?') : 'Clementine';
+              var schedule = r.schedule ? '<code style="font-family:\\x27JetBrains Mono\\x27,monospace;font-size:11px">' + R.esc(r.schedule) + '</code>' : '<span style="color:var(--text-muted)">manual</span>';
+              var enabledBadge = '<input type="checkbox" ' + (r.enabled ? 'checked' : '') + ' onchange="event.stopPropagation();window.RoutinesUI&&RoutinesUI.toggle(\\x27' + R.esc(r.id) + '\\x27)" style="cursor:pointer">';
+              var origin = r.origin === 'cron' ? '<span title="Legacy cron entry — single prompt step" style="font-size:10px;color:var(--text-muted);margin-left:6px">[cron]</span>' : '';
+              return '<tr style="border-top:1px solid var(--border);cursor:pointer" onclick="window.RoutinesUI&&RoutinesUI.openEditor(\\x27' + R.esc(r.id) + '\\x27)">'
+                + '<td style="padding:11px 14px;color:var(--text-primary);font-weight:500">' + R.esc(r.name) + origin + '</td>'
+                + '<td style="padding:11px 14px;color:var(--text-secondary);font-size:12px">' + R.esc(owner) + '</td>'
+                + '<td style="padding:11px 14px">' + schedule + '</td>'
+                + '<td style="padding:11px 14px;color:var(--text-secondary);font-size:12px">' + r.stepCount + '</td>'
+                + '<td style="padding:11px 14px;color:var(--text-muted);font-size:12px">&mdash;</td>'
+                + '<td style="padding:11px 14px;text-align:center" onclick="event.stopPropagation()">' + enabledBadge + '</td>'
+                + '<td style="padding:11px 14px;text-align:right;white-space:nowrap" onclick="event.stopPropagation()">'
+                + '<button class="btn-sm" title="Run now" onclick="window.RoutinesUI&&RoutinesUI.run(\\x27' + R.esc(r.id) + '\\x27)" style="padding:4px 10px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-primary);border-radius:4px;cursor:pointer;font-size:11px;margin-right:4px">&#9654; Run</button>'
+                + '<button class="btn-sm" title="Run history" onclick="window.RoutinesUI&&RoutinesUI.openRuns(\\x27' + R.esc(r.id) + '\\x27)" style="padding:4px 10px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-secondary);border-radius:4px;cursor:pointer;font-size:11px">History</button>'
+                + '</td></tr>';
+            }).join('');
+          },
+          toggle: function(id) {
+            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) {
+            apiFetch('/api/routines/' + encodeURIComponent(id) + '/run', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ approvedSideEffects: approvedSideEffects === true })
+            }).then(function(r){
+              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 trick has side effects:\\n\\n' + lines + '\\n\\nProceed?')) R.run(id, true);
+                });
+              }
+              return r.json().then(function(j){
+                if (j.ok) R.flash('Triggered.');
+                else alert('Run failed: ' + (j.error || 'unknown'));
+              });
+            }).catch(function(err){ alert('Run failed: ' + err); });
+          },
+          // ── editor ──────────────────────────────────────────────────
+          openEditor: function(id) {
+            apiFetch('/api/routines/' + encodeURIComponent(id))
+              .then(function(r){ return r.json(); })
+              .then(function(data){
+                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); });
+          },
+          showEditor: function() {
+            document.getElementById('routines-list-pane').style.display = 'none';
+            document.getElementById('routines-editor-pane').style.display = 'block';
+            document.getElementById('routines-back-btn').style.display = 'inline-block';
+            document.getElementById('routines-create-btn').style.display = 'none';
+            document.getElementById('routines-assist-btn').style.display = 'none';
+            document.getElementById('routines-owner-filter').style.display = 'none';
+            document.getElementById('routines-owner-label').style.display = 'none';
+            document.getElementById('routines-editor-breadcrumb').style.display = 'inline';
+            document.getElementById('routines-editor-name').textContent = R.state.editing.routine.name;
+            R.renderEditor();
+          },
+          closeEditor: function() {
+            if (R.state.editing && R.state.editing.dirty && !confirm('Discard unsaved changes?')) return;
+            R.state.editing = null;
+            document.getElementById('routines-list-pane').style.display = 'block';
+            document.getElementById('routines-editor-pane').style.display = 'none';
+            document.getElementById('routines-back-btn').style.display = 'none';
+            document.getElementById('routines-create-btn').style.display = 'inline-block';
+            document.getElementById('routines-assist-btn').style.display = 'inline-block';
+            document.getElementById('routines-owner-filter').style.display = 'inline-block';
+            document.getElementById('routines-owner-label').style.display = 'inline';
+            document.getElementById('routines-editor-breadcrumb').style.display = 'none';
+            R.refreshList();
+          },
+          renderEditor: function() {
+            var pane = document.getElementById('routines-editor-pane');
+            if (!pane || !R.state.editing) return;
+            var wf = R.state.editing.routine;
+            var html = '<div style="max-width:920px;margin:0 auto">';
+            html += '<div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px">'
+              + '<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px">'
+              + '<input type="text" id="re-name" value="' + R.esc(wf.name) + '" oninput="window.RoutinesUI&&RoutinesUI.markDirty()" style="flex:1;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text-primary);font-size:14px;font-weight:600">'
+              + '<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;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>';
+            html += '<div id="re-steps-list">' + (wf.steps || []).map(function(s, i){ return R.renderStepCard(s, i); }).join('') + '</div>';
+            html += '<button class="btn-sm" onclick="window.RoutinesUI&&RoutinesUI.openStepPicker()" style="margin-top:8px;padding:8px 14px;border:1px dashed var(--border);background:transparent;color:var(--text-secondary);border-radius:6px;cursor:pointer;font-size:12px;width:100%">+ Add step</button>';
+            // Action bar
+            html += '<div id="re-action-bar" style="position:sticky;bottom:0;background:var(--bg-primary);border-top:1px solid var(--border);padding:14px 0;margin-top:24px;display:flex;gap:8px;align-items:center">'
+              + '<button class="btn-sm" onclick="window.RoutinesUI&&RoutinesUI.dryRunCurrent()" style="padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);border-radius:6px;cursor:pointer;font-size:12px">Dry-run</button>'
+              + '<button class="btn-sm" onclick="window.RoutinesUI&&RoutinesUI.testCurrent()" style="padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);border-radius:6px;cursor:pointer;font-size:12px">Mock test</button>'
+              + '<button class="btn-sm" onclick="window.RoutinesUI&&RoutinesUI.openRuns(R.state && R.state.editing && R.state.editing.id)" style="padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);border-radius:6px;cursor:pointer;font-size:12px">History</button>'
+              + '<span style="flex:1"></span>'
+              + (R.state.editing.routine.sourceFile && R.state.editing.id.indexOf("cron:") !== 0 ? '<button class="btn-sm" onclick="window.RoutinesUI&&RoutinesUI.deleteCurrent()" style="padding:6px 12px;background:transparent;border:1px solid var(--red);color:var(--red);border-radius:6px;cursor:pointer;font-size:12px">Delete</button>' : '')
+              + '<button class="btn-sm" onclick="window.RoutinesUI&&RoutinesUI.runCurrent()" style="padding:6px 14px;background:var(--green);border:none;color:#fff;border-radius:6px;cursor:pointer;font-size:12px">&#9654; Run now</button>'
+              + '<button class="btn-sm btn-primary" id="re-save-btn" onclick="window.RoutinesUI&&RoutinesUI.saveCurrent()" style="padding:6px 16px">Save</button>'
+              + '</div>';
+            html += '<div id="re-status" style="font-size:11px;color:var(--text-muted);min-height:14px;padding:6px 0"></div>';
+            html += '</div>';
+            pane.innerHTML = html;
+            if (window.hydrateLucideIcons) window.hydrateLucideIcons();
+          },
+          renderStepCard: function(step, idx) {
+            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>' : '')
+              + '<button title="Remove" onclick="window.RoutinesUI&&RoutinesUI.removeStep(' + idx + ')" style="background:none;border:none;color:var(--red);cursor:pointer;font-size:14px">&times;</button>'
+              + '</div>';
+            var body = R.renderStepBody(step, idx);
+            var depsList = (step.dependsOn || []).join(', ');
+            var depsRow = '<div style="display:flex;align-items:center;gap:8px;margin-top:8px"><label style="font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;min-width:60px">After</label>'
+              + '<input type="text" value="' + R.esc(depsList) + '" placeholder="step ids, comma-separated (blank = independent)" onchange="window.RoutinesUI&&RoutinesUI.updateStepDeps(' + idx + ',this.value)" style="flex:1;padding:4px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:11px;font-family:\\x27JetBrains Mono\\x27,monospace"></div>';
+            return '<div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px;border-left:3px solid ' + kindColor + '">' + head + body + depsRow + '</div>';
+          },
+          renderStepBody: function(step, idx) {
+            var kind = step.kind || 'prompt';
+            switch (kind) {
+              case 'prompt':
+                return '<textarea rows="3" placeholder="Prompt to send to the agent" oninput="window.RoutinesUI&&RoutinesUI.updateStep(' + idx + ',\\x27prompt\\x27,this.value)" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:12px;font-family:inherit;resize:vertical;box-sizing:border-box">' + R.esc(step.prompt || '') + '</textarea>';
+              case 'mcp':
+                var mcp = step.mcp || { server: '', tool: '', inputs: {} };
+                var serverOptions = '<option value="">— pick server —</option>' + (R.state.mcpTools && R.state.mcpTools.servers || []).map(function(s){ return '<option value="' + R.esc(s.name) + '" ' + (mcp.server === s.name ? 'selected' : '') + '>' + R.esc(s.name) + ' (' + s.tools.length + ')</option>'; }).join('');
+                var server = (R.state.mcpTools && R.state.mcpTools.servers || []).find(function(s){ return s.name === mcp.server; });
+                var toolOptions = '<option value="">— pick tool —</option>' + (server ? server.tools.map(function(t){ return '<option value="' + R.esc(t) + '" ' + (mcp.tool === t ? 'selected' : '') + '>' + R.esc(t) + '</option>'; }).join('') : '');
+                var inputsJson = JSON.stringify(mcp.inputs || {}, null, 2);
+                return '<div style="display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap">'
+                  + '<select onchange="window.RoutinesUI&&RoutinesUI.updateMcp(' + idx + ',\\x27server\\x27,this.value)" style="flex:1;min-width:160px;padding:6px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:12px">' + serverOptions + '</select>'
+                  + '<select onchange="window.RoutinesUI&&RoutinesUI.updateMcp(' + idx + ',\\x27tool\\x27,this.value)" style="flex:1;min-width:160px;padding:6px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:12px">' + toolOptions + '</select>'
+                  + '</div>'
+                  + '<label style="display:block;font-size:10px;color:var(--text-muted);margin-bottom:4px">Inputs (JSON; values may use {{steps.x}} or {{input.name}})</label>'
+                  + '<textarea rows="3" oninput="window.RoutinesUI&&RoutinesUI.updateMcpInputs(' + idx + ',this.value)" style="width:100%;padding:6px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:11px;font-family:\\x27JetBrains Mono\\x27,monospace;resize:vertical;box-sizing:border-box">' + R.esc(inputsJson) + '</textarea>';
+              case 'cli':
+                var cli = step.cli || { cmd: '', args: [] };
+                var cliOptions = '<option value="">— pick CLI —</option>' + (R.state.cliTools || []).map(function(c){ return '<option value="' + R.esc(c.cmd) + '" ' + (cli.cmd === c.cmd ? 'selected' : '') + '>' + R.esc(c.cmd) + ' &mdash; ' + R.esc(c.description) + '</option>'; }).join('');
+                if (cli.cmd && !(R.state.cliTools || []).some(function(c){ return c.cmd === cli.cmd; })) {
+                  cliOptions += '<option value="' + R.esc(cli.cmd) + '" selected>' + R.esc(cli.cmd) + ' (custom)</option>';
+                }
+                return '<div style="display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap">'
+                  + '<select onchange="window.RoutinesUI&&RoutinesUI.updateCli(' + idx + ',\\x27cmd\\x27,this.value)" style="flex:1;min-width:200px;padding:6px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:12px">' + cliOptions + '</select>'
+                  + '<input type="number" value="' + (cli.timeoutMs || 60000) + '" onchange="window.RoutinesUI&&RoutinesUI.updateCli(' + idx + ',\\x27timeoutMs\\x27,parseInt(this.value,10))" placeholder="timeout ms" style="width:120px;padding:6px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:12px" title="Timeout in milliseconds">'
+                  + '</div>'
+                  + '<label style="display:block;font-size:10px;color:var(--text-muted);margin-bottom:4px">Args (one per line; supports {{steps.x}} templates)</label>'
+                  + '<textarea rows="3" oninput="window.RoutinesUI&&RoutinesUI.updateCliArgs(' + idx + ',this.value)" placeholder="--json\\norg list" style="width:100%;padding:6px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:11px;font-family:\\x27JetBrains Mono\\x27,monospace;resize:vertical;box-sizing:border-box">' + R.esc((cli.args || []).join('\\n')) + '</textarea>'
+                  + '<label style="display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--text-secondary)"><input type="checkbox" ' + (cli.captureStderr ? 'checked' : '') + ' onchange="window.RoutinesUI&&RoutinesUI.updateCli(' + idx + ',\\x27captureStderr\\x27,this.checked)"> Include stderr in output</label>';
+              case 'conditional':
+                var cond = step.conditional || { condition: '', trueNext: [], falseNext: [] };
+                return '<label style="display:block;font-size:10px;color:var(--text-muted);margin-bottom:4px">Condition (JS expression — has access to <code>steps.&lt;id&gt;</code>)</label>'
+                  + '<input type="text" value="' + R.esc(cond.condition || '') + '" placeholder="e.g. steps.s1.messages.length > 0" oninput="window.RoutinesUI&&RoutinesUI.updateConditional(' + idx + ',\\x27condition\\x27,this.value)" style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:12px;font-family:\\x27JetBrains Mono\\x27,monospace;margin-bottom:6px;box-sizing:border-box">'
+                  + '<div style="display:flex;gap:8px"><div style="flex:1">'
+                  + '<label style="display:block;font-size:10px;color:var(--text-muted);margin-bottom:4px">If true → run these step ids (comma)</label>'
+                  + '<input type="text" value="' + R.esc((cond.trueNext || []).join(', ')) + '" oninput="window.RoutinesUI&&RoutinesUI.updateConditional(' + idx + ',\\x27trueNext\\x27,this.value)" style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:11px;font-family:\\x27JetBrains Mono\\x27,monospace;box-sizing:border-box">'
+                  + '</div><div style="flex:1">'
+                  + '<label style="display:block;font-size:10px;color:var(--text-muted);margin-bottom:4px">If false → run these step ids</label>'
+                  + '<input type="text" value="' + R.esc((cond.falseNext || []).join(', ')) + '" oninput="window.RoutinesUI&&RoutinesUI.updateConditional(' + idx + ',\\x27falseNext\\x27,this.value)" style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:11px;font-family:\\x27JetBrains Mono\\x27,monospace;box-sizing:border-box">'
+                  + '</div></div>';
+              case 'channel':
+                var ch = step.channel || { channel: 'discord', target: '', content: '' };
+                return '<div style="display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap">'
+                  + '<select onchange="window.RoutinesUI&&RoutinesUI.updateChannel(' + idx + ',\\x27channel\\x27,this.value)" style="padding:6px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:12px">'
+                  + ['discord','slack','telegram','whatsapp','email','webhook'].map(function(c){ return '<option value="' + c + '"' + (ch.channel === c ? ' selected' : '') + '>' + c + '</option>'; }).join('')
+                  + '</select>'
+                  + '<input type="text" value="' + R.esc(ch.target || '') + '" placeholder="channel id, #channel, email, URL…" oninput="window.RoutinesUI&&RoutinesUI.updateChannel(' + idx + ',\\x27target\\x27,this.value)" style="flex:1;min-width:200px;padding:6px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:12px">'
+                  + '</div>'
+                  + '<textarea rows="3" placeholder="Message content (supports {{steps.x}})" oninput="window.RoutinesUI&&RoutinesUI.updateChannel(' + idx + ',\\x27content\\x27,this.value)" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:12px;font-family:inherit;resize:vertical;box-sizing:border-box">' + R.esc(ch.content || '') + '</textarea>';
+              case 'transform':
+                var tr = step.transform || { expression: '' };
+                return '<label style="display:block;font-size:10px;color:var(--text-muted);margin-bottom:4px">Expression (sandboxed JS; returns the step output)</label>'
+                  + '<textarea rows="3" oninput="window.RoutinesUI&&RoutinesUI.updateTransform(' + idx + ',this.value)" placeholder="e.g. steps.s1.items.filter(x =&gt; x.urgent)" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:12px;font-family:\\x27JetBrains Mono\\x27,monospace;resize:vertical;box-sizing:border-box">' + R.esc(tr.expression || '') + '</textarea>';
+              case 'loop':
+                var lp = step.loop || { items: '', bodyStepIds: [] };
+                return '<label style="display:block;font-size:10px;color:var(--text-muted);margin-bottom:4px">Items expression (yields an array)</label>'
+                  + '<input type="text" value="' + R.esc(lp.items || '') + '" placeholder="e.g. steps.s1.results" oninput="window.RoutinesUI&&RoutinesUI.updateLoop(' + idx + ',\\x27items\\x27,this.value)" style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:12px;font-family:\\x27JetBrains Mono\\x27,monospace;margin-bottom:6px;box-sizing:border-box">'
+                  + '<label style="display:block;font-size:10px;color:var(--text-muted);margin-bottom:4px">Body step ids (comma-separated)</label>'
+                  + '<input type="text" value="' + R.esc((lp.bodyStepIds || []).join(', ')) + '" oninput="window.RoutinesUI&&RoutinesUI.updateLoop(' + idx + ',\\x27bodyStepIds\\x27,this.value)" style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:11px;font-family:\\x27JetBrains Mono\\x27,monospace;box-sizing:border-box">';
+              default:
+                return '<em style="font-size:11px;color:var(--text-muted)">Unknown step kind: ' + R.esc(kind) + '</em>';
+            }
+          },
+          markDirty: function() {
+            if (!R.state.editing) return;
+            R.state.editing.dirty = true;
+            // Sync header inputs back to the routine.
+            var nm = document.getElementById('re-name'); if (nm) R.state.editing.routine.name = nm.value;
+            var de = document.getElementById('re-description'); if (de) R.state.editing.routine.description = de.value;
+            var sc = document.getElementById('re-schedule'); if (sc) {
+              var v = sc.value.trim();
+              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) {
+            if (!R.state.editing) return;
+            R.state.editing.routine.steps[idx][field] = value;
+            R.markDirty();
+          },
+          updateStepDeps: function(idx, csv) {
+            if (!R.state.editing) return;
+            R.state.editing.routine.steps[idx].dependsOn = csv.split(',').map(function(s){ return s.trim(); }).filter(function(s){ return s; });
+            R.markDirty();
+          },
+          updateMcp: function(idx, field, value) {
+            if (!R.state.editing) return;
+            var s = R.state.editing.routine.steps[idx];
+            s.mcp = s.mcp || { server: '', tool: '', inputs: {} };
+            s.mcp[field] = value;
+            if (field === 'server') s.mcp.tool = '';  // reset tool when server changes
+            R.markDirty();
+            R.renderEditor();  // re-render so tool dropdown updates
+          },
+          updateMcpInputs: function(idx, json) {
+            if (!R.state.editing) return;
+            var s = R.state.editing.routine.steps[idx];
+            s.mcp = s.mcp || { server: '', tool: '', inputs: {} };
+            try { s.mcp.inputs = JSON.parse(json); R.setStatus(''); }
+            catch (e) { R.setStatus('Invalid JSON in step ' + s.id + ' inputs (will not save until fixed)'); return; }
+            R.markDirty();
+          },
+          updateCli: function(idx, field, value) {
+            if (!R.state.editing) return;
+            var s = R.state.editing.routine.steps[idx];
+            s.cli = s.cli || { cmd: '', args: [] };
+            s.cli[field] = value;
+            R.markDirty();
+          },
+          updateCliArgs: function(idx, txt) {
+            if (!R.state.editing) return;
+            var s = R.state.editing.routine.steps[idx];
+            s.cli = s.cli || { cmd: '', args: [] };
+            s.cli.args = txt.split('\\n').map(function(l){ return l.trim(); }).filter(function(l){ return l; });
+            R.markDirty();
+          },
+          updateConditional: function(idx, field, value) {
+            if (!R.state.editing) return;
+            var s = R.state.editing.routine.steps[idx];
+            s.conditional = s.conditional || { condition: '', trueNext: [], falseNext: [] };
+            if (field === 'trueNext' || field === 'falseNext') {
+              s.conditional[field] = String(value).split(',').map(function(x){ return x.trim(); }).filter(function(x){ return x; });
+            } else {
+              s.conditional[field] = value;
+            }
+            R.markDirty();
+          },
+          updateChannel: function(idx, field, value) {
+            if (!R.state.editing) return;
+            var s = R.state.editing.routine.steps[idx];
+            s.channel = s.channel || { channel: 'discord', target: '', content: '' };
+            s.channel[field] = value;
+            R.markDirty();
+          },
+          updateTransform: function(idx, value) {
+            if (!R.state.editing) return;
+            var s = R.state.editing.routine.steps[idx];
+            s.transform = { expression: value };
+            R.markDirty();
+          },
+          updateLoop: function(idx, field, value) {
+            if (!R.state.editing) return;
+            var s = R.state.editing.routine.steps[idx];
+            s.loop = s.loop || { items: '', bodyStepIds: [] };
+            if (field === 'bodyStepIds') {
+              s.loop.bodyStepIds = String(value).split(',').map(function(x){ return x.trim(); }).filter(function(x){ return x; });
+            } else {
+              s.loop.items = value;
+            }
+            R.markDirty();
+          },
+          moveStep: function(idx, dir) {
+            if (!R.state.editing) return;
+            var steps = R.state.editing.routine.steps;
+            var j = idx + dir;
+            if (j < 0 || j >= steps.length) return;
+            var t = steps[idx]; steps[idx] = steps[j]; steps[j] = t;
+            R.markDirty();
+            R.renderEditor();
+          },
+          removeStep: function(idx) {
+            if (!R.state.editing) 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.
+            for (var i = 0; i < R.state.editing.routine.steps.length; i++) {
+              R.state.editing.routine.steps[i].dependsOn = (R.state.editing.routine.steps[i].dependsOn || []).filter(function(d){ return d !== removed.id; });
+            }
+            R.markDirty();
+            R.renderEditor();
+          },
+          // ── step picker ─────────────────────────────────────────────
+          openStepPicker: function() {
+            var modal = document.getElementById('routines-step-picker');
+            var body = document.getElementById('routines-step-picker-body');
+            if (!modal || !body) return;
+            var kinds = [
+              { kind: 'prompt', label: 'Prompt', desc: 'Send a prompt to the agent. Use this when the work needs reasoning or freeform tools.' },
+              { kind: 'mcp', label: 'MCP tool', desc: 'Call a specific MCP server tool (Composio, Claude integrations, local MCP).' },
+              { kind: 'cli', label: 'Local CLI', desc: 'Run an installed CLI (sf, gh, gcloud, …) and capture stdout.' },
+              { kind: 'conditional', label: 'If / Else', desc: 'Branch on a JS expression evaluated against prior step outputs.' },
+              { kind: 'channel', label: 'Channel send', desc: 'Send a message to Discord, Slack, Telegram, email, or webhook.' },
+              { kind: 'transform', label: 'Transform', desc: 'Sandboxed JS expression that reshapes prior step output.' },
+              { kind: 'loop', label: 'Loop', desc: 'Iterate over an array; runs the listed body steps for each item.' },
+            ];
+            body.innerHTML = kinds.map(function(k){
+              return '<div onclick="window.RoutinesUI&&RoutinesUI.addStep(\\x27' + k.kind + '\\x27)" style="padding:12px 14px;border:1px solid var(--border);border-radius:6px;margin-bottom:8px;cursor:pointer;background:var(--bg-tertiary)"><div style="font-weight:600;font-size:13px;color:var(--text-primary);margin-bottom:3px">' + k.label + '</div><div style="font-size:11px;color:var(--text-muted)">' + k.desc + '</div></div>';
+            }).join('');
+            modal.style.display = 'flex';
+          },
+          closeStepPicker: function() {
+            var m = document.getElementById('routines-step-picker'); if (m) m.style.display = 'none';
+          },
+          addStep: function(kind) {
+            if (!R.state.editing) return;
+            var steps = R.state.editing.routine.steps;
+            var n = steps.length + 1;
+            var nextId = 's' + n;
+            while (steps.some(function(s){ return s.id === nextId; })) { n++; nextId = 's' + n; }
+            var step = { id: nextId, prompt: '', dependsOn: steps.length ? [steps[steps.length - 1].id] : [], tier: 1, maxTurns: 15 };
+            if (kind !== 'prompt') step.kind = kind;
+            if (kind === 'mcp') step.mcp = { server: '', tool: '', inputs: {} };
+            if (kind === 'cli') step.cli = { cmd: '', args: [], timeoutMs: 60000 };
+            if (kind === 'conditional') step.conditional = { condition: '', trueNext: [], falseNext: [] };
+            if (kind === 'channel') step.channel = { channel: 'discord', target: '', content: '' };
+            if (kind === 'transform') step.transform = { expression: '' };
+            if (kind === 'loop') step.loop = { items: '', bodyStepIds: [] };
+            steps.push(step);
+            R.markDirty();
+            R.closeStepPicker();
+            R.renderEditor();
+          },
+          // ── editor actions ──────────────────────────────────────────
+          saveCurrent: function() {
+            if (!R.state.editing) return;
+            R.markDirty();  // capture latest header values
+            var btn = document.getElementById('re-save-btn');
+            if (btn) btn.textContent = 'Saving…';
+            apiFetch('/api/routines/' + encodeURIComponent(R.state.editing.id), {
+              method: 'PUT',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ routine: R.state.editing.routine })
+            }).then(function(r){ return r.json().then(function(j){ return { ok: r.ok, status: r.status, body: j }; }); })
+              .then(function(res){
+                if (btn) btn.textContent = 'Save';
+                if (!res.ok) {
+                  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?')) {
+                      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 })
+                      }).then(function(){ R.state.editing.dirty = false; R.setStatus('Saved (with warnings)'); R.refreshList(); });
+                    }
+                    return;
+                  }
+                  R.setStatus('Save failed: ' + (res.body.error || res.body.detail || 'unknown'));
+                  return;
+                }
+                R.state.editing.dirty = false;
+                R.setStatus('Saved.');
+                R.refreshList();
+              }).catch(function(err){
+                if (btn) btn.textContent = 'Save';
+                R.setStatus('Save error: ' + err);
+              });
+          },
+          runCurrent: function() {
+            if (!R.state.editing) return;
+            if (R.state.editing.dirty && !confirm('You have unsaved changes. Run anyway (using last saved version)?')) return;
+            R.run(R.state.editing.id);
+          },
+          dryRunCurrent: function() {
+            if (!R.state.editing) return;
+            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'];
+                (d.steps || []).forEach(function(s){ lines.push('• ' + s.description + (s.warnings.length ? '\\n   ⚠ ' + s.warnings.join('; ') : '')); });
+                if (d.notes && d.notes.length) lines.push('\\n' + d.notes.join('\\n'));
+                alert(lines.join('\\n'));
+              }).catch(function(err){ alert('Dry-run failed: ' + err); });
+          },
+          testCurrent: function() {
+            if (!R.state.editing) return;
+            apiFetch('/api/routines/' + encodeURIComponent(R.state.editing.id) + '/test', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ mode: 'mock' })
+            }).then(function(r){ return r.json(); }).then(function(d){
+              if (d.ok) R.setStatus('Mock test started (runId: ' + d.runId + '). See run history for output.');
+              else R.setStatus('Test failed to start: ' + (d.error || 'unknown'));
+            }).catch(function(err){ R.setStatus('Test error: ' + err); });
+          },
+          deleteCurrent: function() {
+            if (!R.state.editing) return;
+            if (!confirm('Delete routine "' + R.state.editing.routine.name + '"? This is permanent.')) return;
+            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(); }
+                else alert('Delete failed: ' + (j.error || 'unknown'));
+              }).catch(function(err){ alert('Delete error: ' + err); });
+          },
+          setStatus: function(msg) {
+            var el = document.getElementById('re-status');
+            if (el) el.textContent = msg || '';
+          },
+          flash: function(msg) {
+            // Lightweight toast — reuse existing flash if available, else log.
+            if (window.flashMessage) window.flashMessage(msg);
+            else if (window.console) console.log('[routines]', msg);
+          },
+          // ── runs drawer ─────────────────────────────────────────────
+          openRuns: function(id) {
+            if (!id) return;
+            var drawer = document.getElementById('routines-runs-drawer');
+            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';
+            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) {
+                html += '<div style="font-size:12px;color:var(--text-muted);padding:24px 0;text-align:center">No runs yet.</div>';
+              } else {
+                html += runs.map(function(run){
+                  var when = run.startedAt || run.timestamp || '';
+                  var status = run.status || 'unknown';
+                  var color = { ok: 'var(--green)', error: 'var(--red)', partial: '#f5a623', skipped: 'var(--text-muted)', retried: '#f5a623' }[status] || 'var(--text-muted)';
+                  var dur = run.durationMs ? Math.round(run.durationMs / 100) / 10 + 's' : '';
+                  var preview = run.outputPreview || run.output_preview || run.outputPreview || '';
+                  return '<div style="background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;padding:10px 14px;margin-bottom:8px"><div style="display:flex;align-items:center;gap:10px;font-size:12px"><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + color + '"></span><span style="color:var(--text-primary);font-weight:500">' + R.esc(status) + '</span><span style="color:var(--text-muted)">' + R.esc(when) + '</span><span style="flex:1"></span><span style="color:var(--text-muted);font-size:11px">' + dur + '</span></div>' + (preview ? '<div style="margin-top:8px;font-size:11px;color:var(--text-secondary);font-family:\\x27JetBrains Mono\\x27,monospace;white-space:pre-wrap;max-height:120px;overflow:auto">' + R.esc(String(preview).slice(0, 800)) + '</div>' : '') + '</div>';
+                }).join('');
+              }
+              html += '</div>';
+              drawer.innerHTML = html;
+            }).catch(function(err){
+              drawer.innerHTML = '<div style="padding:18px"><div style="display:flex;align-items:center;gap:8px"><h3 style="margin:0;font-size:15px;font-weight:600">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="margin-top:14px;font-size:12px;color:var(--red)">Failed to load: ' + R.esc(String(err)) + '</div></div>';
+            });
+          },
+          closeRuns: function() {
+            var d = document.getElementById('routines-runs-drawer'); if (d) d.style.display = 'none';
+          },
+          // ── create modal ────────────────────────────────────────────
+          openCreate: function() {
+            var m = document.getElementById('routines-create-modal'); if (!m) return;
+            document.getElementById('routines-create-name').value = '';
+            document.getElementById('routines-create-description').value = '';
+            document.getElementById('routines-create-schedule').value = '';
+            m.style.display = 'flex';
+          },
+          closeCreate: function() {
+            var m = document.getElementById('routines-create-modal'); if (m) m.style.display = 'none';
+          },
+          submitCreate: function() {
+            var name = document.getElementById('routines-create-name').value.trim();
+            if (!name) { alert('Name is required'); return; }
+            var body = {
+              name: name,
+              description: document.getElementById('routines-create-description').value.trim(),
+              schedule: document.getElementById('routines-create-schedule').value.trim() || undefined,
+              agent: document.getElementById('routines-create-owner').value || undefined,
+            };
+            apiFetch('/api/routines', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(body)
+            }).then(function(r){ return r.json().then(function(j){ return { ok: r.ok, body: j }; }); })
+              .then(function(res){
+                if (!res.ok) { alert('Create failed: ' + (res.body.error || 'unknown')); return; }
+                R.closeCreate();
+                R.refreshList();
+                R.openEditor(res.body.id);
+              }).catch(function(err){ alert('Create error: ' + err); });
+          },
+          // ── 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-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();
+          },
+          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';
+          },
+          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: 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.
+        // The old switchBuildTab(tab) is referenced from KPI tiles, getting-started cards,
+        // and the navigateTo dispatcher. Map them all to the unified Routines view.
+        if (typeof window.switchBuildTab !== 'function' || true) {
+          window.switchBuildTab = function() { try { R.init(); } catch (e) { /* */ } };
+        }
+        // Auto-init when the user lands on the build page.
+        document.addEventListener('DOMContentLoaded', function() {
+          var nav = document.querySelector('[data-page="build"]');
+          if (nav) nav.addEventListener('click', function() { setTimeout(function() { R.init(); }, 50); });
+          // If page-build is already active on load (deep-link), init now.
+          var page = document.getElementById('page-build');
+          if (page && page.classList.contains('active')) R.init();
+        });
+      })();
+    </script>
 
     <!-- page-agent-detail merged into Team page; click an agent in Roster to drill down. -->
 
@@ -14963,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>
@@ -15085,6 +16327,21 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
                 <div class="skel-block" style="padding:14px"><div class="skel-row med"></div><div class="skel-row short"></div></div>
               </div>
             </div>
+            <div class="card" style="margin-bottom:14px">
+              <div class="card-header" style="display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap">
+                <span>Persistent learnings</span>
+                <div style="display:flex;align-items:center;gap:8px">
+                  <select id="learnings-filter-scope" onchange="refreshLearnings()" style="font-size:12px;padding:4px 6px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input);color:var(--text)">
+                    <option value="active" selected>Active</option>
+                    <option value="all">Active + superseded + cancelled</option>
+                  </select>
+                  <span style="font-size:11px;color:var(--text-muted)">Distilled durable beliefs from past sessions</span>
+                </div>
+              </div>
+              <div class="card-body" id="panel-learnings" style="padding:0">
+                <div class="skel-block" style="padding:14px"><div class="skel-row med"></div><div class="skel-row short"></div></div>
+              </div>
+            </div>
             <div class="card" style="margin-bottom:14px">
               <div class="card-header" style="display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap">
                 <span>Open commitments</span>
@@ -15331,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">
@@ -18630,10 +19918,14 @@ function switchTab(group, tab) {
       if (typeof refreshRecentWrites === 'function') refreshRecentWrites();
       if (typeof refreshRecentEpisodes === 'function') refreshRecentEpisodes();
       if (typeof refreshCommitments === 'function') refreshCommitments();
+      if (typeof refreshLearnings === 'function') refreshLearnings();
       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();
@@ -20061,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) {
@@ -24989,6 +26281,7 @@ async function submitQuickAddMemory() {
       if (typeof refreshRecentWrites === 'function') refreshRecentWrites();
       if (typeof refreshRecentEpisodes === 'function') refreshRecentEpisodes();
       if (typeof refreshCommitments === 'function') refreshCommitments();
+      if (typeof refreshLearnings === 'function') refreshLearnings();
       if (typeof refreshMemory === 'function') refreshMemory();
     }, 600);
   } catch (err) {
@@ -25142,6 +26435,71 @@ async function refreshRecentWrites() {
   }
 }
 
+async function refreshLearnings() {
+  var el = document.getElementById('panel-learnings');
+  if (!el) return;
+  try {
+    var sel = document.getElementById('learnings-filter-scope');
+    var scope = sel ? sel.value : 'active';
+    var url = '/api/memory/learnings?limit=100' + (scope === 'all' ? '&all=1' : '');
+    var r = await apiFetch(url);
+    var d = await r.json();
+    if (!d.ok || !Array.isArray(d.facts)) {
+      el.innerHTML = '<div class="empty-state" style="padding:14px">' + esc(d.error || 'No data') + '</div>';
+      return;
+    }
+    if (d.facts.length === 0) {
+      el.innerHTML = '<div class="empty-state" style="padding:14px">No persistent learnings yet. They land automatically when episode consolidation extracts a durable user preference, fact, goal, or workflow pattern.</div>';
+      return;
+    }
+    var html = '<table class="data-table" style="width:100%">';
+    html += '<thead><tr>'
+      + '<th style="width:90px">Kind</th>'
+      + '<th>Belief</th>'
+      + '<th style="width:120px">Status</th>'
+      + '<th style="width:140px">Captured</th>'
+      + '<th style="width:140px">Actions</th>'
+      + '</tr></thead><tbody>';
+    var kindColors = { preference: '#a78bfa', fact: '#10b981', goal: '#f59e0b', workflow: '#06b6d4' };
+    for (var i = 0; i < d.facts.length; i++) {
+      var f = d.facts[i];
+      var color = kindColors[f.kind] || 'var(--text-muted)';
+      var statusBadge = '';
+      if (f.status === 'active') statusBadge = '<span style="color:#10b981">active</span>';
+      else if (f.status === 'superseded') statusBadge = '<span style="color:var(--text-muted)">superseded → #' + (f.supersededById || '?') + '</span>';
+      else if (f.status === 'cancelled') statusBadge = '<span style="color:#ef4444">cancelled</span>';
+      else statusBadge = esc(f.status || '');
+      var when = '';
+      try { when = new Date(f.createdAt + 'Z').toLocaleString(); } catch { when = f.createdAt; }
+      var actions = '';
+      if (f.status === 'active') actions = '<button class="btn-sm" onclick="learningAction(' + f.id + ', \\'cancel\\')">Cancel</button>';
+      else if (f.status === 'cancelled') actions = '<button class="btn-sm" onclick="learningAction(' + f.id + ', \\'reinstate\\')">Reinstate</button>';
+      html += '<tr>'
+        + '<td style="font-size:11px;color:' + color + ';font-weight:600">' + esc(f.kind) + '</td>'
+        + '<td style="font-size:12px">' + esc(f.text) + '</td>'
+        + '<td style="font-size:11px">' + statusBadge + '</td>'
+        + '<td style="font-size:11px;color:var(--text-muted)">' + esc(when) + '</td>'
+        + '<td>' + actions + '</td>'
+        + '</tr>';
+    }
+    html += '</tbody></table>';
+    el.innerHTML = html;
+  } catch (err) {
+    el.innerHTML = '<div class="empty-state" style="padding:14px">Failed to load: ' + esc(String(err)) + '</div>';
+  }
+}
+
+async function learningAction(id, action) {
+  try {
+    var r = await apiJson('POST', '/api/memory/learnings/action', { id: id, action: action });
+    if (r.error) { toast('Action failed: ' + r.error, 'error'); return; }
+    toast('Learning ' + action, 'success');
+    refreshLearnings();
+  } catch (err) {
+    toast('Failed: ' + String(err), 'error');
+  }
+}
+
 async function refreshCommitments() {
   var el = document.getElementById('panel-commitments');
   if (!el) return;
@@ -25303,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();
@@ -25335,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 ────────────────────────────────────