@way_marks/server 0.7.0 → 0.8.0

package/dist/api/server.js

@@ -43,6 +43,52 @@ const path = __importStar(require("path"));
 const database_1 = require("../db/database");
 const engine_1 = require("../policies/engine");
 const handler_1 = require("../approvals/handler");
+// Import registry for Phase 2 hub navigation
+const registryPath = path.join(process.env.HOME || process.env.USERPROFILE || '', '.waymark', 'registry.json');
+function getRegistryProjects() {
+    try {
+        if (!fs.existsSync(registryPath))
+            return [];
+        const registry = JSON.parse(fs.readFileSync(registryPath, 'utf8'));
+        return registry.projects || [];
+    }
+    catch {
+        return [];
+    }
+}
+// Phase 4: Garbage collection for registry
+function garbageCollectRegistryFile() {
+    try {
+        if (!fs.existsSync(registryPath))
+            return 0;
+        const registry = JSON.parse(fs.readFileSync(registryPath, 'utf8'));
+        const cutoffTime = new Date();
+        cutoffTime.setDate(cutoffTime.getDate() - 7);
+        let removed = 0;
+        const projects = registry.projects || {};
+        const idsToRemove = [];
+        for (const [id, entry] of Object.entries(projects)) {
+            if (entry.status === 'stopped' && entry.stoppedAt) {
+                const stoppedTime = new Date(entry.stoppedAt);
+                if (stoppedTime < cutoffTime) {
+                    idsToRemove.push(id);
+                }
+            }
+        }
+        for (const id of idsToRemove) {
+            delete registry.projects[id];
+            removed++;
+        }
+        if (removed > 0) {
+            registry.lastUpdated = new Date().toISOString();
+            fs.writeFileSync(registryPath, JSON.stringify(registry, null, 2) + '\n');
+        }
+        return removed;
+    }
+    catch {
+        return 0;
+    }
+}
 const app = (0, express_1.default)();
 const PORT = parseInt(process.env.WAYMARK_PORT || '3001', 10);
 app.use(express_1.default.json());
@@ -63,6 +109,78 @@ app.get('/api/actions', (req, res) => {
         res.status(500).json({ error: err.message });
     }
 });
+// Phase 3: GET /api/actions/paginated — paginated actions with filtering
+app.get('/api/actions/paginated', (req, res) => {
+    try {
+        const filter = {
+            status: req.query.status,
+            tool_name: req.query.tool_name,
+            search: req.query.search,
+            page: parseInt(req.query.page) || 1,
+            limit: parseInt(req.query.limit) || 50,
+        };
+        const result = (0, database_1.getActionsWithFiltering)(filter);
+        res.json(result);
+    }
+    catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+// Phase 3: GET /api/stats — summary statistics
+app.get('/api/stats', (req, res) => {
+    try {
+        const stats = (0, database_1.getSummaryStats)();
+        res.json(stats);
+    }
+    catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+// Phase 5B: POST /api/cli-action — log GitHub Copilot CLI command
+// Called by copilot-cli-wrapper.sh when user runs: copilot [command]
+app.post('/api/cli-action', (req, res) => {
+    try {
+        const { command, args, cwd, timestamp, shell, user } = req.body;
+        if (!command) {
+            return res.status(400).json({ error: 'Missing command field' });
+        }
+        // Generate action ID and session ID
+        const action_id = `cli-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const session_id = 'cli-session'; // All CLI actions share same session
+        // Log CLI action using insertAction function
+        (0, database_1.insertAction)({
+            action_id,
+            session_id,
+            tool_name: 'copilot',
+            input_payload: JSON.stringify({ command, args, cwd, shell, user }),
+            status: 'executed', // CLI always executes (no approval flow)
+            event_type: 'execution',
+            observation_context: `CLI: ${command} ${args}`,
+            request_source: 'cli',
+            source: 'cli', // Distinguish from MCP
+        });
+        res.json({
+            success: true,
+            action_id,
+            message: `Logged Copilot CLI: ${command} ${args}`
+        });
+    }
+    catch (err) {
+        console.error('Error logging CLI action:', err);
+        res.status(500).json({ error: err.message });
+    }
+});
+// Phase 3: POST /api/maintenance/archive — archive old actions
+app.post('/api/maintenance/archive', (req, res) => {
+    try {
+        const daysOld = parseInt(req.body?.daysOld) || 30;
+        const archived = (0, database_1.archiveOldActions)(daysOld);
+        res.json({ success: true, archived, message: `Archived ${archived} actions older than ${daysOld} days` });
+    }
+    catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
 // POST /api/actions/:action_id/approve
 app.post('/api/actions/:action_id/approve', async (req, res) => {
     try {
@@ -222,6 +340,26 @@ app.get('/api/project', (req, res) => {
         res.status(500).json({ error: err.message });
     }
 });
+// GET /api/hub/projects — Phase 2: returns all registered projects (optional hub feature)
+app.get('/api/hub/projects', (req, res) => {
+    try {
+        const projects = getRegistryProjects();
+        res.json(projects);
+    }
+    catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
+// Phase 4: POST /api/registry/cleanup — garbage collect stale entries
+app.post('/api/registry/cleanup', (req, res) => {
+    try {
+        const removed = garbageCollectRegistryFile();
+        res.json({ success: true, removed, message: `Garbage collected ${removed} stale entries` });
+    }
+    catch (err) {
+        res.status(500).json({ error: err.message });
+    }
+});
 // Fallback: serve UI for any unmatched route
 app.get('*', (req, res) => {
     res.sendFile(path.join(UI_DIR, 'index.html'));

package/dist/db/database.js

@@ -45,6 +45,10 @@ exports.getSessions = getSessions;
 exports.approveAction = approveAction;
 exports.rejectAction = rejectAction;
 exports.getPendingCount = getPendingCount;
+exports.getActionsWithFiltering = getActionsWithFiltering;
+exports.archiveOldActions = archiveOldActions;
+exports.getArchivedActionsWithFiltering = getArchivedActionsWithFiltering;
+exports.getSummaryStats = getSummaryStats;
 const better_sqlite3_1 = __importDefault(require("better-sqlite3"));
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
@@ -116,6 +120,24 @@ try {
     db.exec('ALTER TABLE action_log ADD COLUMN rejected_reason TEXT');
 }
 catch { }
+// Migrate v4: Phase 1 — plan mode logging visibility
+try {
+    db.exec("ALTER TABLE action_log ADD COLUMN event_type TEXT NOT NULL DEFAULT 'execution'");
+}
+catch { }
+try {
+    db.exec('ALTER TABLE action_log ADD COLUMN observation_context TEXT');
+}
+catch { }
+try {
+    db.exec('ALTER TABLE action_log ADD COLUMN request_source TEXT DEFAULT \'direct\'');
+}
+catch { }
+// Migrate v5: Phase 5B — CLI action logging (GitHub Copilot CLI wrapper)
+try {
+    db.exec("ALTER TABLE action_log ADD COLUMN source TEXT DEFAULT 'mcp'");
+}
+catch { }
 // Indexes for query performance
 try {
     db.exec('CREATE INDEX IF NOT EXISTS idx_action_id ON action_log(action_id)');
@@ -129,9 +151,62 @@ try {
     db.exec('CREATE INDEX IF NOT EXISTS idx_session_id ON action_log(session_id)');
 }
 catch { }
+// Phase 3: Add indexes for pagination and filtering
+try {
+    db.exec('CREATE INDEX IF NOT EXISTS idx_tool_name ON action_log(tool_name)');
+}
+catch { }
+try {
+    db.exec('CREATE INDEX IF NOT EXISTS idx_created_at ON action_log(created_at DESC)');
+}
+catch { }
+try {
+    db.exec('CREATE INDEX IF NOT EXISTS idx_status_created ON action_log(status, created_at DESC)');
+}
+catch { }
+// Phase 3: Create archive table (same schema as action_log)
+db.exec(`
+  CREATE TABLE IF NOT EXISTS action_archive (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    action_id TEXT UNIQUE NOT NULL,
+    session_id TEXT NOT NULL,
+    tool_name TEXT NOT NULL,
+    target_path TEXT,
+    input_payload TEXT NOT NULL,
+    before_snapshot TEXT,
+    after_snapshot TEXT,
+    status TEXT NOT NULL DEFAULT 'pending',
+    error_message TEXT,
+    stdout TEXT,
+    stderr TEXT,
+    rolled_back INTEGER NOT NULL DEFAULT 0,
+    rolled_back_at TEXT,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    decision TEXT NOT NULL DEFAULT 'allow',
+    policy_reason TEXT,
+    matched_rule TEXT,
+    approved_at TEXT,
+    approved_by TEXT,
+    rejected_at TEXT,
+    rejected_reason TEXT,
+    event_type TEXT NOT NULL DEFAULT 'execution',
+    observation_context TEXT,
+    request_source TEXT DEFAULT 'direct',
+    source TEXT DEFAULT 'mcp'
+  )
+`);
+// Phase 3: Add indexes on archive table
+try {
+    db.exec('CREATE INDEX IF NOT EXISTS idx_archive_action_id ON action_archive(action_id)');
+}
+catch { }
+try {
+    db.exec('CREATE INDEX IF NOT EXISTS idx_archive_created_at ON action_archive(created_at DESC)');
+}
+catch { }
 const insertStmt = db.prepare(`
-  INSERT INTO action_log (action_id, session_id, tool_name, target_path, input_payload, before_snapshot, status, decision, policy_reason, matched_rule)
-  VALUES (@action_id, @session_id, @tool_name, @target_path, @input_payload, @before_snapshot, @status, @decision, @policy_reason, @matched_rule)
+  INSERT INTO action_log (action_id, session_id, tool_name, target_path, input_payload, before_snapshot, status, decision, policy_reason, matched_rule, event_type, observation_context, request_source, source)
+  VALUES (@action_id, @session_id, @tool_name, @target_path, @input_payload, @before_snapshot, @status, @decision, @policy_reason, @matched_rule, @event_type, @observation_context, @request_source, @source)
 `);
 const updateStmt = db.prepare(`
   UPDATE action_log
@@ -154,6 +229,10 @@ function insertAction(params) {
         decision: params.decision ?? 'pending',
         policy_reason: params.policy_reason ?? null,
         matched_rule: params.matched_rule ?? null,
+        event_type: params.event_type ?? 'execution',
+        observation_context: params.observation_context ?? null,
+        request_source: params.request_source ?? 'direct',
+        source: params.source ?? 'mcp',
     });
 }
 function updateAction(action_id, params) {
@@ -220,4 +299,146 @@ function getPendingCount() {
   `).get();
     return row.count;
 }
+function getActionsWithFiltering(filter = {}) {
+    const page = Math.max(1, filter.page ?? 1);
+    const limit = Math.min(filter.limit ?? 50, 200); // max 200 per page
+    const offset = (page - 1) * limit;
+    let where = '1=1';
+    const params = {};
+    if (filter.status) {
+        where += ' AND status = @status';
+        params.status = filter.status;
+    }
+    if (filter.tool_name) {
+        where += ' AND tool_name = @tool_name';
+        params.tool_name = filter.tool_name;
+    }
+    if (filter.search) {
+        where += ' AND (action_id LIKE @search OR target_path LIKE @search)';
+        params.search = `%${filter.search}%`;
+    }
+    // Get total count
+    const countRow = db.prepare(`
+    SELECT COUNT(*) as count FROM action_log WHERE ${where}
+  `).get(params);
+    const totalCount = countRow.count;
+    // Get paginated results
+    const actions = db.prepare(`
+    SELECT * FROM action_log WHERE ${where}
+    ORDER BY created_at DESC
+    LIMIT @limit OFFSET @offset
+  `).all({ ...params, limit, offset });
+    return {
+        actions,
+        totalCount,
+        page,
+        limit,
+        hasMore: offset + actions.length < totalCount,
+    };
+}
+function archiveOldActions(daysOld = 30) {
+    const cutoffDate = new Date();
+    cutoffDate.setDate(cutoffDate.getDate() - daysOld);
+    const cutoffStr = cutoffDate.toISOString();
+    // Copy old actions to archive
+    const result = db.prepare(`
+    INSERT OR IGNORE INTO action_archive
+    SELECT * FROM action_log WHERE created_at < @cutoff
+  `).run({ cutoff: cutoffStr });
+    // Delete from main table (but keep recent entries)
+    const deleteStmt = db.prepare(`
+    DELETE FROM action_log WHERE created_at < @cutoff
+    AND id NOT IN (
+      SELECT id FROM action_log ORDER BY created_at DESC LIMIT 1000
+    )
+  `);
+    deleteStmt.run({ cutoff: cutoffStr });
+    return result.changes;
+}
+function getArchivedActionsWithFiltering(filter = {}) {
+    const page = Math.max(1, filter.page ?? 1);
+    const limit = Math.min(filter.limit ?? 50, 200);
+    const offset = (page - 1) * limit;
+    let where = '1=1';
+    const params = {};
+    if (filter.status) {
+        where += ' AND status = @status';
+        params.status = filter.status;
+    }
+    if (filter.tool_name) {
+        where += ' AND tool_name = @tool_name';
+        params.tool_name = filter.tool_name;
+    }
+    if (filter.search) {
+        where += ' AND (action_id LIKE @search OR target_path LIKE @search)';
+        params.search = `%${filter.search}%`;
+    }
+    const countRow = db.prepare(`
+    SELECT COUNT(*) as count FROM action_archive WHERE ${where}
+  `).get(params);
+    const totalCount = countRow.count;
+    const actions = db.prepare(`
+    SELECT * FROM action_archive WHERE ${where}
+    ORDER BY created_at DESC
+    LIMIT @limit OFFSET @offset
+  `).all({ ...params, limit, offset });
+    return {
+        actions,
+        totalCount,
+        page,
+        limit,
+        hasMore: offset + actions.length < totalCount,
+    };
+}
+function getSummaryStats() {
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()).toISOString();
+    const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000).toISOString();
+    const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString();
+    const total = db.prepare(`
+    SELECT COUNT(*) as count FROM action_log
+  `).get();
+    const pending = db.prepare(`
+    SELECT COUNT(*) as count FROM action_log WHERE status = 'pending'
+  `).get();
+    const approved = db.prepare(`
+    SELECT COUNT(*) as count FROM action_log WHERE status = 'success' OR decision = 'allow'
+  `).get();
+    const rejected = db.prepare(`
+    SELECT COUNT(*) as count FROM action_log WHERE status = 'rejected' OR decision = 'rejected'
+  `).get();
+    const todayCount = db.prepare(`
+    SELECT COUNT(*) as count FROM action_log WHERE created_at >= @today
+  `).get({ today });
+    const weekCount = db.prepare(`
+    SELECT COUNT(*) as count FROM action_log WHERE created_at >= @weekAgo
+  `).get({ weekAgo });
+    const monthCount = db.prepare(`
+    SELECT COUNT(*) as count FROM action_log WHERE created_at >= @monthAgo
+  `).get({ monthAgo });
+    const topTools = db.prepare(`
+    SELECT tool_name as tool, COUNT(*) as count FROM action_log
+    GROUP BY tool_name
+    ORDER BY count DESC
+    LIMIT 5
+  `).all();
+    const topPaths = db.prepare(`
+    SELECT target_path as path, COUNT(*) as count FROM action_log
+    WHERE target_path IS NOT NULL
+    GROUP BY target_path
+    ORDER BY count DESC
+    LIMIT 5
+  `).all();
+    return {
+        totalActions: total.count,
+        pendingCount: pending.count,
+        approvedCount: approved.count,
+        rejectedCount: rejected.count,
+        todayCount: todayCount.count,
+        thisWeekCount: weekCount.count,
+        thisMonthCount: monthCount.count,
+        topTools,
+        topPaths,
+    };
+}
 exports.default = db;

package/dist/mcp/server.js

@@ -125,6 +125,8 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
     if (name === 'write_file') {
         const { path: filePath, content } = args;
         const resolvedPath = path.resolve(filePath);
+        const requestSource = 'direct';
+        const observationContext = null;
         // Policy check before execution
         const config = (0, engine_1.loadConfig)();
         const policyResult = (0, engine_1.checkFileAction)(resolvedPath, 'write', config);
@@ -133,6 +135,7 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                 action_id, session_id: SESSION_ID, tool_name: 'write_file',
                 target_path: resolvedPath, input_payload, status: 'blocked',
                 decision: 'block', policy_reason: policyResult.reason, matched_rule: policyResult.matchedRule,
+                event_type: 'execution', request_source: requestSource, observation_context: observationContext,
             });
             throw new Error(`Waymark blocked: ${policyResult.reason} [rule: ${policyResult.matchedRule}]`);
         }
@@ -141,6 +144,7 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                 action_id, session_id: SESSION_ID, tool_name: 'write_file',
                 target_path: resolvedPath, input_payload, status: 'pending',
                 decision: 'pending', policy_reason: policyResult.reason, matched_rule: policyResult.matchedRule,
+                event_type: 'execution', request_source: requestSource, observation_context: observationContext,
             });
             // Fire-and-forget Slack notification (no console.log — MCP uses stdio)
             (0, slack_1.notifyPendingAction)({
@@ -152,6 +156,7 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                 created_at: new Date().toISOString(),
                 decision: 'pending', policy_reason: policyResult.reason, matched_rule: policyResult.matchedRule,
                 approved_at: null, approved_by: null, rejected_at: null, rejected_reason: null,
+                event_type: 'execution', observation_context: null, request_source: 'direct',
                 id: 0,
             }).catch(() => { });
             return {
@@ -180,6 +185,9 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
             decision: policyResult.decision,
             policy_reason: policyResult.reason,
             matched_rule: policyResult.matchedRule ?? null,
+            event_type: 'execution',
+            request_source: requestSource,
+            observation_context: observationContext,
         });
         try {
             // Ensure directory exists
@@ -204,6 +212,10 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
     else if (name === 'read_file') {
         const { path: filePath } = args;
         const resolvedPath = path.resolve(filePath);
+        // Determine request source for observability (plan mode vs direct execution)
+        // We track "observation" for planning-phase reads if patterns suggest it
+        const requestSource = 'direct';
+        const observationContext = null;
         // Policy check before execution
         const config = (0, engine_1.loadConfig)();
         const policyResult = (0, engine_1.checkFileAction)(resolvedPath, 'read', config);
@@ -212,6 +224,7 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                 action_id, session_id: SESSION_ID, tool_name: 'read_file',
                 target_path: resolvedPath, input_payload, status: 'blocked',
                 decision: 'block', policy_reason: policyResult.reason, matched_rule: policyResult.matchedRule,
+                event_type: 'execution', request_source: requestSource, observation_context: observationContext,
             });
             throw new Error(`Waymark blocked: ${policyResult.reason} [rule: ${policyResult.matchedRule}]`);
         }
@@ -220,6 +233,7 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                 action_id, session_id: SESSION_ID, tool_name: 'read_file',
                 target_path: resolvedPath, input_payload, status: 'pending',
                 decision: 'pending', policy_reason: policyResult.reason, matched_rule: policyResult.matchedRule,
+                event_type: 'execution', request_source: requestSource, observation_context: observationContext,
             });
             (0, slack_1.notifyPendingAction)({
                 action_id, session_id: SESSION_ID, tool_name: 'read_file',
@@ -230,6 +244,7 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                 created_at: new Date().toISOString(),
                 decision: 'pending', policy_reason: policyResult.reason, matched_rule: policyResult.matchedRule,
                 approved_at: null, approved_by: null, rejected_at: null, rejected_reason: null,
+                event_type: 'execution', observation_context: null, request_source: 'direct',
                 id: 0,
             }).catch(() => { });
             return {
@@ -249,6 +264,9 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
             decision: policyResult.decision,
             policy_reason: policyResult.reason,
             matched_rule: policyResult.matchedRule ?? null,
+            event_type: 'execution',
+            request_source: requestSource,
+            observation_context: observationContext,
         });
         try {
             const content = fs.readFileSync(resolvedPath, 'utf8');
@@ -270,6 +288,8 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
     }
     else if (name === 'bash') {
         const { command } = args;
+        const requestSource = 'direct';
+        const observationContext = null;
         // Policy check before execution
         const config = (0, engine_1.loadConfig)();
         const policyResult = (0, engine_1.checkBashAction)(command, config);
@@ -278,6 +298,7 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
                 action_id, session_id: SESSION_ID, tool_name: 'bash',
                 target_path: null, input_payload, status: 'blocked',
                 decision: 'block', policy_reason: policyResult.reason, matched_rule: policyResult.matchedRule,
+                event_type: 'execution', request_source: requestSource, observation_context: observationContext,
             });
             throw new Error(`Waymark blocked command: ${policyResult.reason} [rule: ${policyResult.matchedRule}]`);
         }
@@ -291,6 +312,9 @@ server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
             decision: policyResult.decision,
             policy_reason: policyResult.reason,
             matched_rule: policyResult.matchedRule ?? null,
+            event_type: 'execution',
+            request_source: requestSource,
+            observation_context: observationContext,
         });
         // Bug 1 + Bug 2: use spawnSync for clean stdout/stderr separation and USER_PATH
         const result = (0, child_process_1.spawnSync)('sh', ['-c', command], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@way_marks/server",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Waymark MCP server and dashboard",
   "author": "Waymark <hello@waymarks.dev>",
   "license": "MIT",

package/src/ui/index.html

@@ -17,6 +17,9 @@
     .badge-write_file { background: #7c3a00; color: #ffb347; }
     .badge-read_file  { background: #002f5c; color: #5ab4ff; }
     .badge-bash       { background: #222; color: #aaa; border: 1px solid #444; }
+     .event-execution  { opacity: 1; }
+     .event-observation { opacity: 0.6; background: #0a0a0a; }
+     .observation-label { display: inline-block; padding: 1px 4px; background: #333; color: #999; font-size: 10px; border-radius: 2px; margin-left: 4px; }
     .decision-block    { background: #5c0000; color: #ff6b6b; }
     .decision-pending  { background: #4a3800; color: #ffd166; }
     .decision-rejected { background: #3a0000; color: #ff9999; }
@@ -81,6 +84,25 @@
       background: #7f0000; color: #ef9a9a; border-radius: 3px;
       padding: 1px 6px; font-size: 13px; margin-left: 8px;
     }
+
+    /* Phase 2: Hub navigation sidebar */
+    #hub-nav { display: none; position: fixed; left: 0; top: 0; width: 200px; height: 100vh; background: #0a0a0a; border-right: 1px solid #222; padding: 12px; overflow-y: auto; }
+    #hub-nav.open { display: block; }
+    #main-content { margin-left: 0; }
+    #main-content.with-nav { margin-left: 200px; }
+    #hub-toggle { position: fixed; left: 8px; top: 8px; background: none; border: 1px solid #333; color: #888; padding: 4px 6px; cursor: pointer; font-size: 12px; border-radius: 3px; z-index: 1000; }
+    #hub-nav h3 { font-size: 11px; color: #666; margin: 12px 0 8px; text-transform: uppercase; letter-spacing: 0.05em; }
+    .project-list { list-style: none; padding: 0; }
+    .project-item { padding: 6px 4px; margin: 2px 0; border-radius: 2px; cursor: pointer; font-size: 12px; border-left: 2px solid transparent; }
+    .project-item.running { color: #81c784; border-left-color: #4caf50; }
+    .project-item.running:hover { background: #1a1a1a; }
+    .project-item.paused { color: #ffd166; border-left-color: #ffa000; }
+    .project-item.paused:hover { background: #1a1a1a; }
+    .project-item.stopped { color: #888; border-left-color: #555; }
+    .project-item.stopped:hover { background: #1a1a1a; }
+    .project-item.current { background: #1a1a1a; border-left-color: #5ab4ff; }
+    .project-port { font-size: 10px; color: #555; margin-left: 4px; }
+
   </style>
 </head>
 <body>
@@ -90,6 +112,47 @@
     <span id="count-display">loading...</span>
     <span id="refresh-display"></span>
   </div>
+  <div style="margin-bottom:16px;font-size:12px">
+    <!-- Phase 1: Event type filters -->
+    <div style="margin-bottom:12px">
+      <span style="color:#888">Event:</span>
+      <label style="margin-left:8px"><input type="checkbox" id="filter-execution" checked> Execution</label>
+      <label style="margin-left:12px"><input type="checkbox" id="filter-observation" checked> Observation</label>
+    </div>
+    
+    <!-- Phase 3: Status and tool filters -->
+    <div style="margin-bottom:12px">
+      <span style="color:#888">Status:</span>
+      <select id="filter-status" style="margin-left:8px;padding:2px;font-family:monospace;font-size:11px;background:#1a1a1a;color:#d0d0d0;border:1px solid #333">
+        <option value="">All Statuses</option>
+        <option value="pending">Pending</option>
+        <option value="success">Success</option>
+        <option value="rejected">Rejected</option>
+      </select>
+    </div>
+
+    <div style="margin-bottom:12px">
+      <span style="color:#888">Tool:</span>
+      <select id="filter-tool" style="margin-left:8px;padding:2px;font-family:monospace;font-size:11px;background:#1a1a1a;color:#d0d0d0;border:1px solid #333">
+        <option value="">All Tools</option>
+        <option value="write_file">write_file</option>
+        <option value="read_file">read_file</option>
+        <option value="bash">bash</option>
+      </select>
+    </div>
+
+    <div style="margin-bottom:12px">
+      <span style="color:#888">Search:</span>
+      <input type="text" id="filter-search" placeholder="action ID or path..." style="margin-left:8px;padding:2px;font-family:monospace;font-size:11px;background:#1a1a1a;color:#d0d0d0;border:1px solid #333;width:200px">
+    </div>
+  </div>
+
+  <button id="hub-toggle">📋</button>
+  <nav id="hub-nav">
+    <h3>Projects</h3>
+    <ul id="project-list" class="project-list"></ul>
+  </nav>
+  <div id="main-content">
   <table>
     <thead>
       <tr>
@@ -117,6 +180,7 @@
 
   <div id="status-bar">auto-refresh every 3s</div>
 
+  </div>
   <script>
     function timeAgo(dateStr) {
       const now = new Date();
@@ -270,7 +334,17 @@
         return;
       }
 
-      const rows = actions.map(row => {
+      // Get filter state
+      const showExecution = document.getElementById('filter-execution').checked;
+      const showObservation = document.getElementById('filter-observation').checked;
+
+      const filteredActions = actions.filter(row => {
+        const eventType = row.event_type || 'execution';
+        if (eventType === 'observation') return showObservation;
+        return showExecution;
+      });
+
+      const rows = filteredActions.map(row => {
         const isWriteFile = row.tool_name === 'write_file';
         const isNewFile = isWriteFile && !row.before_snapshot;
         const isPending = row.decision === 'pending' && row.status === 'pending';
@@ -278,6 +352,8 @@
         const isRejected = row.status === 'rejected';
         const isBlocked = row.decision === 'block';
         const canRollback = isWriteFile && !row.rolled_back && !isBlocked && !isPending && !isApproved && row.status === 'success' && !row.approved_by;
+        const eventType = row.event_type || 'execution';
+        const isObservation = eventType === 'observation';
 
         let actionCell;
         if (isPending) {
@@ -301,9 +377,12 @@
           ? `<span style="color:#666;font-size:11px">${row.stdout.slice(0, 100).replace(/\n/g, '↵')}</span>`
           : `<span style="color:#333">—</span>`;
 
-        return `<tr>
+        const rowClass = `event-${eventType}`;
+        const obsLabel = isObservation ? '<span class="observation-label">plan mode</span>' : '';
+
+        return `<tr class="${rowClass}">
           <td style="white-space:nowrap;color:#555">${timeAgo(row.created_at)}</td>
-          <td>${toolBadge(row.tool_name)}</td>
+          <td>${toolBadge(row.tool_name)}${obsLabel}</td>
           <td>${decisionBadge(row)}</td>
           <td>${getTargetDisplay(row)}</td>
           <td>${statusLabel(row.status)}${row.error_message ? `<br><span style="color:#666;font-size:11px">${row.error_message.slice(0,80)}</span>` : ''}</td>
@@ -312,6 +391,11 @@
         </tr>`;
       });
 
+      if (!rows.length) {
+        tbody.innerHTML = '<tr><td colspan="7" class="empty">No actions match current filter.</td></tr>';
+        return;
+      }
+
       tbody.innerHTML = rows.join('');
 
       tbody.querySelectorAll('button.rollback').forEach(btn => {
@@ -340,15 +424,34 @@
 
     async function refresh() {
       try {
-        const [actionsRes, countRes] = await Promise.all([
-          fetch('/api/actions'),
+        // Build query string from filter values
+        const status = document.getElementById('filter-status').value;
+        const tool = document.getElementById('filter-tool').value;
+        const search = document.getElementById('filter-search').value;
+        
+        const params = new URLSearchParams();
+        if (status) params.append('status', status);
+        if (tool) params.append('tool_name', tool);
+        if (search) params.append('search', search);
+        params.append('page', '1');
+        params.append('limit', '100');
+
+        // Fetch paginated data
+        const [paginationRes, countRes] = await Promise.all([
+          fetch(`/api/actions/paginated?${params}`),
           fetch('/api/actions?count=true'),
         ]);
-        const actions = await actionsRes.json();
+        
+        const pagination = await paginationRes.json();
         const { count } = await countRes.json();
+        
+        const actions = pagination.actions || [];
         renderActions(Array.isArray(actions) ? actions : []);
-        document.getElementById('count-display').textContent = `${actions.length} action(s)`;
+        
+        const display = status || tool ? `${actions.length} filtered` : `${actions.length} action(s)`;
+        document.getElementById('count-display').textContent = display;
         document.getElementById('refresh-display').textContent = 'last refresh: ' + new Date().toLocaleTimeString();
+        
         const badge = document.getElementById('pending-badge');
         badge.style.display = count > 0 ? 'inline' : 'none';
         badge.textContent = `[${count} pending]`;
@@ -424,6 +527,64 @@
     refresh();
     loadProjectName();
     setInterval(refresh, 3000);
+
+    // Filter event listeners
+    document.getElementById('filter-execution').addEventListener('change', refresh);
+    document.getElementById('filter-observation').addEventListener('change', refresh);
+    
+    // Phase 3: New filter listeners
+    document.getElementById('filter-status').addEventListener('change', refresh);
+    document.getElementById('filter-tool').addEventListener('change', refresh);
+    document.getElementById('filter-search').addEventListener('input', () => {
+      clearTimeout(window.filterSearchTimeout);
+      window.filterSearchTimeout = setTimeout(refresh, 500);
+    });
+
+    // Phase 2: Hub navigation sidebar
+    function loadHubNav() {
+      fetch('/api/hub/projects')
+        .then(r => r.json())
+        .then(projects => {
+          const list = document.getElementById('project-list');
+          if (!projects || projects.length === 0) {
+            list.innerHTML = '<li style="color:#555;padding:6px 4px">no projects</li>';
+            return;
+          }
+
+          const current = document.getElementById('project-name').textContent.split('—')[1]?.trim();
+          list.innerHTML = projects.map(p => {
+            const isCurrent = current && p.projectName.includes(current);
+            const statusClass = p.status === 'running' ? 'running' : p.status === 'paused' ? 'paused' : 'stopped';
+            const activeClass = isCurrent ? ' current' : '';
+            const icon = p.status === 'running' ? '🟢' : p.status === 'paused' ? '⏸️ ' : '🔴';
+            return `<li class="project-item ${statusClass}${activeClass}" data-port="${p.port}">${icon} ${p.id}<span class="project-port">${p.port}</span></li>`;
+          }).join('');
+
+          // Add click handlers
+          list.querySelectorAll('.project-item').forEach(item => {
+            item.addEventListener('click', () => {
+              const port = item.dataset.port;
+              window.location.href = `http://localhost:${port}`;
+            });
+          });
+        })
+        .catch(() => {
+          // Hub projects not available — this is Phase 2 feature (optional)
+          document.getElementById('hub-toggle').style.display = 'none';
+        });
+    }
+
+    // Hub toggle button
+    document.getElementById('hub-toggle').addEventListener('click', () => {
+      const nav = document.getElementById('hub-nav');
+      const content = document.getElementById('main-content');
+      nav.classList.toggle('open');
+      content.classList.toggle('with-nav');
+      loadHubNav();
+    });
+
+    // Load hub projects on startup (lazy)
+    setTimeout(loadHubNav, 2000);
   </script>
 </body>
 </html>

package/src/ui/index.html.bak

@@ -0,0 +1,429 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>waymark — agent action viewer</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: monospace; font-size: 13px; background: #0f0f0f; color: #d0d0d0; padding: 16px; }
+    h1 { font-size: 18px; margin-bottom: 4px; color: #fff; }
+    .subtitle { color: #555; margin-bottom: 16px; font-size: 12px; }
+    .meta { display: flex; gap: 16px; margin-bottom: 12px; color: #666; font-size: 11px; }
+    table { width: 100%; border-collapse: collapse; }
+    th { text-align: left; padding: 6px 8px; background: #1a1a1a; color: #888; font-weight: normal; border-bottom: 1px solid #333; }
+    td { padding: 6px 8px; border-bottom: 1px solid #1e1e1e; vertical-align: top; }
+    tr:hover td { background: #161616; }
+    .badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: bold; }
+    .badge-write_file { background: #7c3a00; color: #ffb347; }
+    .badge-read_file  { background: #002f5c; color: #5ab4ff; }
+    .badge-bash       { background: #222; color: #aaa; border: 1px solid #444; }
+    .decision-block    { background: #5c0000; color: #ff6b6b; }
+    .decision-pending  { background: #4a3800; color: #ffd166; }
+    .decision-rejected { background: #3a0000; color: #ff9999; }
+    .status-success { color: #4caf50; }
+    .status-error   { color: #f44336; }
+    .status-pending { color: #ffb347; }
+    .status-blocked { color: #ff6b6b; }
+    .path { color: #888; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+    button.rollback {
+      background: #3a1f00; border: 1px solid #7c3a00; color: #ffb347;
+      padding: 2px 8px; cursor: pointer; font-size: 11px; font-family: monospace;
+      border-radius: 3px;
+    }
+    button.rollback:hover { background: #5c3000; }
+    button.rollback:disabled { opacity: 0.4; cursor: default; }
+    .msg-ok  { color: #4caf50; margin-left: 6px; }
+    .msg-err { color: #f44336; margin-left: 6px; }
+    .rolled-back { color: #555; font-size: 11px; }
+    #status-bar { position: fixed; bottom: 8px; right: 16px; color: #333; font-size: 11px; }
+    .empty { padding: 32px; text-align: center; color: #444; }
+
+    /* Config viewer */
+    #config-section { margin-top: 24px; }
+    #config-toggle {
+      background: none; border: 1px solid #333; color: #888; padding: 4px 10px;
+      cursor: pointer; font-family: monospace; font-size: 12px; border-radius: 3px;
+    }
+    #config-toggle:hover { border-color: #555; color: #aaa; }
+    #config-content { display: none; margin-top: 12px; padding: 12px; background: #141414; border: 1px solid #222; border-radius: 4px; }
+    #config-content h3 { color: #666; font-size: 11px; font-weight: normal; margin-bottom: 10px; }
+    .policy-group { margin-bottom: 12px; }
+    .policy-group h4 { font-size: 11px; color: #555; margin-bottom: 4px; font-weight: normal; text-transform: uppercase; letter-spacing: 0.05em; }
+    .policy-group ul { list-style: none; padding: 0; }
+    .policy-group li { padding: 2px 0; font-size: 12px; }
+    .policy-allow { color: #4caf50; }
+    .policy-block  { color: #ff6b6b; }
+    .policy-pending { color: #ffd166; }
+
+    /* v3: approval flow */
+    .status-rejected { color: #e57373; }
+    .status-approved { color: #4caf50; }
+    .btn-approve {
+      background: #003a1a; border: 1px solid #2e7d32; color: #81c784;
+      padding: 2px 8px; cursor: pointer; font-size: 11px; font-family: monospace;
+      border-radius: 3px; margin-right: 4px;
+    }
+    .btn-approve:hover { background: #1b5e20; }
+    .btn-approve:disabled { opacity: 0.4; cursor: default; }
+    .btn-reject {
+      background: #3a0000; border: 1px solid #7f0000; color: #ef9a9a;
+      padding: 2px 8px; cursor: pointer; font-size: 11px; font-family: monospace;
+      border-radius: 3px;
+    }
+    .btn-reject:hover { background: #5c0000; }
+    .btn-reject:disabled { opacity: 0.4; cursor: default; }
+    .reject-input {
+      background: #1a1a1a; border: 1px solid #444; color: #ccc;
+      padding: 2px 6px; font-family: monospace; font-size: 11px;
+      border-radius: 3px; width: 120px; margin-right: 4px;
+    }
+    #pending-badge {
+      background: #7f0000; color: #ef9a9a; border-radius: 3px;
+      padding: 1px 6px; font-size: 13px; margin-left: 8px;
+    }
+  </style>
+</head>
+<body>
+  <h1>waymark <span id="project-name" style="color:#555"></span><span id="pending-badge" style="display:none"></span></h1>
+  <p class="subtitle">uglybugly agent action viewer — intercepts and logs MCP tool calls</p>
+  <div class="meta">
+    <span id="count-display">loading...</span>
+    <span id="refresh-display"></span>
+  </div>
+  <table>
+    <thead>
+      <tr>
+        <th>Time</th>
+        <th>Tool</th>
+        <th>Decision</th>
+        <th>Target / Command</th>
+        <th>Status</th>
+        <th>Stdout</th>
+        <th>Action</th>
+      </tr>
+    </thead>
+    <tbody id="action-tbody">
+      <tr><td colspan="7" class="empty">loading...</td></tr>
+    </tbody>
+  </table>
+
+  <div id="config-section">
+    <button id="config-toggle">▶ Current Policy</button>
+    <div id="config-content">
+      <h3>waymark.config.json</h3>
+      <div id="config-body">loading...</div>
+    </div>
+  </div>
+
+  <div id="status-bar">auto-refresh every 3s</div>
+
+  <script>
+    function timeAgo(dateStr) {
+      const now = new Date();
+      const then = new Date(dateStr + (dateStr.includes('Z') ? '' : 'Z'));
+      const diff = Math.floor((now - then) / 1000);
+      if (diff < 5)  return 'just now';
+      if (diff < 60) return diff + 's ago';
+      if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
+      if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
+      return Math.floor(diff / 86400) + 'd ago';
+    }
+
+    function toolBadge(name) {
+      return `<span class="badge badge-${name}">${name}</span>`;
+    }
+
+    function statusLabel(status) {
+      return `<span class="status-${status}">${status}</span>`;
+    }
+
+    function decisionBadge(row) {
+      const d = row.decision || 'allow';
+      if (d === 'block') {
+        const tip = row.policy_reason ? row.policy_reason.replace(/"/g, '&quot;') : '';
+        return `<span class="badge decision-block" title="${tip}">blocked</span>`;
+      }
+      if (d === 'pending') {
+        const tip = row.policy_reason ? row.policy_reason.replace(/"/g, '&quot;') : '';
+        return `<span class="badge decision-pending" title="${tip}">pending</span>`;
+      }
+      if (d === 'rejected') {
+        const tip = row.rejected_reason ? row.rejected_reason.replace(/"/g, '&quot;') : '';
+        return `<span class="badge decision-rejected" title="${tip}">rejected</span>`;
+      }
+      return `<span style="color:#333">—</span>`;
+    }
+
+    function truncatePath(p) {
+      if (!p) return '<span style="color:#444">—</span>';
+      const parts = p.replace(/\\/g, '/').split('/');
+      const display = parts.length > 3 ? '…/' + parts.slice(-3).join('/') : p;
+      return `<span class="path" title="${p}">${display}</span>`;
+    }
+
+    function getTargetDisplay(row) {
+      if (row.tool_name === 'bash') {
+        const cmd = JSON.parse(row.input_payload).command || '';
+        const short = cmd.length > 60 ? cmd.slice(0, 57) + '...' : cmd;
+        return `<span class="path" title="${cmd.replace(/"/g, '&quot;')}">${short}</span>`;
+      }
+      return truncatePath(row.target_path);
+    }
+
+    async function doRollback(actionId, btn, msgSpan, isNewFile) {
+      btn.disabled = true;
+      btn.textContent = isNewFile ? 'deleting...' : 'rolling back...';
+      try {
+        const res = await fetch(`/api/actions/${actionId}/rollback`, { method: 'POST' });
+        const data = await res.json();
+        if (res.ok) {
+          msgSpan.className = 'msg-ok';
+          msgSpan.textContent = data.action === 'deleted' ? '✓ deleted' : '✓ restored';
+          btn.textContent = data.action === 'deleted' ? 'deleted' : 'rolled back';
+        } else {
+          msgSpan.className = 'msg-err';
+          msgSpan.textContent = '✗ ' + (data.error || 'failed');
+          btn.disabled = false;
+          btn.textContent = isNewFile ? 'delete (new file)' : 'rollback';
+        }
+      } catch (e) {
+        msgSpan.className = 'msg-err';
+        msgSpan.textContent = '✗ network error';
+        btn.disabled = false;
+        btn.textContent = isNewFile ? 'delete (new file)' : 'rollback';
+      }
+    }
+
+    async function doApprove(actionId, btn, msgSpan) {
+      btn.disabled = true;
+      btn.textContent = 'approving...';
+      try {
+        const res = await fetch(`/api/actions/${actionId}/approve`, { method: 'POST' });
+        const data = await res.json();
+        if (res.ok) {
+          msgSpan.className = 'msg-ok';
+          msgSpan.textContent = '✓ approved';
+          // Full refresh to get updated row
+          setTimeout(refresh, 300);
+        } else {
+          msgSpan.className = 'msg-err';
+          msgSpan.textContent = '✗ ' + (data.error || 'failed');
+          btn.disabled = false;
+          btn.textContent = '✅ Approve';
+        }
+      } catch (e) {
+        msgSpan.className = 'msg-err';
+        msgSpan.textContent = '✗ network error';
+        btn.disabled = false;
+        btn.textContent = '✅ Approve';
+      }
+    }
+
+    async function doReject(actionId, btn, rejectBtn, msgSpan) {
+      // Show inline input for reason
+      rejectBtn.disabled = true;
+      const inputEl = document.createElement('input');
+      inputEl.className = 'reject-input';
+      inputEl.type = 'text';
+      inputEl.value = 'Not approved';
+      inputEl.placeholder = 'reason...';
+      const confirmBtn = document.createElement('button');
+      confirmBtn.className = 'btn-reject';
+      confirmBtn.textContent = 'Confirm';
+      rejectBtn.replaceWith(inputEl);
+      msgSpan.parentNode.insertBefore(confirmBtn, msgSpan);
+
+      confirmBtn.addEventListener('click', async () => {
+        confirmBtn.disabled = true;
+        inputEl.disabled = true;
+        confirmBtn.textContent = 'rejecting...';
+        try {
+          const res = await fetch(`/api/actions/${actionId}/reject`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ reason: inputEl.value || 'Not approved' }),
+          });
+          const data = await res.json();
+          if (res.ok) {
+            msgSpan.className = 'msg-ok';
+            msgSpan.textContent = '✓ rejected';
+            setTimeout(refresh, 300);
+          } else {
+            msgSpan.className = 'msg-err';
+            msgSpan.textContent = '✗ ' + (data.error || 'failed');
+            confirmBtn.disabled = false;
+            confirmBtn.textContent = 'Confirm';
+          }
+        } catch (e) {
+          msgSpan.className = 'msg-err';
+          msgSpan.textContent = '✗ network error';
+          confirmBtn.disabled = false;
+          confirmBtn.textContent = 'Confirm';
+        }
+      });
+    }
+
+    function renderActions(actions) {
+      const tbody = document.getElementById('action-tbody');
+      if (!actions.length) {
+        tbody.innerHTML = '<tr><td colspan="7" class="empty">No actions yet. Connect Claude Code to the waymark MCP server and run some tools.</td></tr>';
+        return;
+      }
+
+      const rows = actions.map(row => {
+        const isWriteFile = row.tool_name === 'write_file';
+        const isNewFile = isWriteFile && !row.before_snapshot;
+        const isPending = row.decision === 'pending' && row.status === 'pending';
+        const isApproved = row.status === 'success' && row.approved_by;
+        const isRejected = row.status === 'rejected';
+        const isBlocked = row.decision === 'block';
+        const canRollback = isWriteFile && !row.rolled_back && !isBlocked && !isPending && !isApproved && row.status === 'success' && !row.approved_by;
+
+        let actionCell;
+        if (isPending) {
+          actionCell = `<button class="btn-approve" data-id="${row.action_id}">✅ Approve</button><button class="btn-reject" data-id="${row.action_id}">❌ Reject</button><span class="action-msg"></span>`;
+        } else if (isApproved) {
+          const tip = `by ${row.approved_by}${row.approved_at ? ' at ' + row.approved_at : ''}`.replace(/"/g, '&quot;');
+          actionCell = `<span class="status-approved" title="${tip}">✅ Approved</span>`;
+        } else if (isRejected) {
+          const tip = (row.rejected_reason || '').replace(/"/g, '&quot;');
+          actionCell = `<span class="status-rejected" title="${tip}">❌ Rejected</span>`;
+        } else if (row.rolled_back) {
+          actionCell = `<span class="rolled-back">↩ ${isNewFile ? 'deleted' : 'rolled back'}</span>`;
+        } else if (canRollback) {
+          const btnLabel = isNewFile ? 'delete (new file)' : 'rollback';
+          actionCell = `<button class="rollback" data-id="${row.action_id}" data-newfile="${isNewFile}">${btnLabel}</button><span class="rollback-msg"></span>`;
+        } else {
+          actionCell = `<span style="color:#333">—</span>`;
+        }
+
+        const stdoutPreview = row.tool_name === 'bash' && row.stdout
+          ? `<span style="color:#666;font-size:11px">${row.stdout.slice(0, 100).replace(/\n/g, '↵')}</span>`
+          : `<span style="color:#333">—</span>`;
+
+        return `<tr>
+          <td style="white-space:nowrap;color:#555">${timeAgo(row.created_at)}</td>
+          <td>${toolBadge(row.tool_name)}</td>
+          <td>${decisionBadge(row)}</td>
+          <td>${getTargetDisplay(row)}</td>
+          <td>${statusLabel(row.status)}${row.error_message ? `<br><span style="color:#666;font-size:11px">${row.error_message.slice(0,80)}</span>` : ''}</td>
+          <td>${stdoutPreview}</td>
+          <td style="white-space:nowrap">${actionCell}</td>
+        </tr>`;
+      });
+
+      tbody.innerHTML = rows.join('');
+
+      tbody.querySelectorAll('button.rollback').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const msgSpan = btn.nextElementSibling;
+          doRollback(btn.dataset.id, btn, msgSpan, btn.dataset.newfile === 'true');
+        });
+      });
+
+      tbody.querySelectorAll('button.btn-approve').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const msgSpan = btn.parentElement.querySelector('.action-msg');
+          doApprove(btn.dataset.id, btn, msgSpan);
+        });
+      });
+
+      tbody.querySelectorAll('button.btn-reject').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const approveBtn = btn.previousElementSibling;
+          const msgSpan = btn.nextElementSibling;
+          approveBtn.disabled = true;
+          doReject(btn.dataset.id, approveBtn, btn, msgSpan);
+        });
+      });
+    }
+
+    async function refresh() {
+      try {
+        const [actionsRes, countRes] = await Promise.all([
+          fetch('/api/actions'),
+          fetch('/api/actions?count=true'),
+        ]);
+        const actions = await actionsRes.json();
+        const { count } = await countRes.json();
+        renderActions(Array.isArray(actions) ? actions : []);
+        document.getElementById('count-display').textContent = `${actions.length} action(s)`;
+        document.getElementById('refresh-display').textContent = 'last refresh: ' + new Date().toLocaleTimeString();
+        const badge = document.getElementById('pending-badge');
+        badge.style.display = count > 0 ? 'inline' : 'none';
+        badge.textContent = `[${count} pending]`;
+      } catch (e) {
+        document.getElementById('count-display').textContent = 'error fetching actions';
+      }
+    }
+
+    // Config viewer toggle
+    const configToggle = document.getElementById('config-toggle');
+    const configContent = document.getElementById('config-content');
+    let configOpen = false;
+
+    configToggle.addEventListener('click', async () => {
+      configOpen = !configOpen;
+      configContent.style.display = configOpen ? 'block' : 'none';
+      configToggle.textContent = (configOpen ? '▼' : '▶') + ' Current Policy';
+      if (configOpen) await loadConfigView();
+    });
+
+    async function loadConfigView() {
+      const body = document.getElementById('config-body');
+      try {
+        const res = await fetch('/api/config');
+        const cfg = await res.json();
+        const p = cfg.policies || {};
+
+        function renderList(items, cls) {
+          if (!items || !items.length) return '<li style="color:#444">none</li>';
+          return items.map(i => {
+            if (i.startsWith('regex:')) {
+              const pat = i.slice(6);
+              return `<li class="${cls}">${pat} <em style="color:#555;font-style:italic">[pattern]</em></li>`;
+            }
+            return `<li class="${cls}">${i}</li>`;
+          }).join('');
+        }
+
+        body.innerHTML = `
+          <div class="policy-group">
+            <h4>Allowed Paths</h4>
+            <ul>${renderList(p.allowedPaths, 'policy-allow')}</ul>
+          </div>
+          <div class="policy-group">
+            <h4>Blocked Paths</h4>
+            <ul>${renderList(p.blockedPaths, 'policy-block')}</ul>
+          </div>
+          <div class="policy-group">
+            <h4>Blocked Commands</h4>
+            <ul>${renderList(p.blockedCommands, 'policy-block')}</ul>
+          </div>
+          <div class="policy-group">
+            <h4>Require Approval</h4>
+            <ul>${renderList(p.requireApproval, 'policy-pending')}</ul>
+          </div>
+        `;
+      } catch (e) {
+        body.textContent = 'Error loading config';
+      }
+    }
+
+    async function loadProjectName() {
+      try {
+        const res = await fetch('/api/project');
+        const data = await res.json();
+        if (data.projectName) {
+          document.getElementById('project-name').textContent = '— ' + data.projectName;
+        }
+      } catch (e) { /* silent — project name is cosmetic */ }
+    }
+
+    // Initial load + interval
+    refresh();
+    loadProjectName();
+    setInterval(refresh, 3000);
+  </script>
+</body>
+</html>