hzl-web 2.2.0 → 2.4.0

package/dist/server.test.js

@@ -8,8 +8,11 @@ import { TasksCurrentProjector } from 'hzl-core/projections/tasks-current';
 import { DependenciesProjector } from 'hzl-core/projections/dependencies';
 import { CommentsCheckpointsProjector } from 'hzl-core/projections/comments-checkpoints';
 import { ProjectsProjector } from 'hzl-core/projections/projects';
+import { SearchProjector } from 'hzl-core/projections/search';
+import { TagsProjector } from 'hzl-core/projections/tags';
 import { TaskService } from 'hzl-core/services/task-service';
 import { ProjectService } from 'hzl-core/services/project-service';
+import { SearchService } from 'hzl-core/services/search-service';
 import { TaskStatus } from 'hzl-core/events/types';
 describe('hzl-web server', () => {
     let db;
@@ -17,6 +20,7 @@ describe('hzl-web server', () => {
     let projectionEngine;
     let taskService;
     let projectService;
+    let searchService;
     let server;
     beforeEach(() => {
         db = createTestDb();
@@ -26,10 +30,13 @@ describe('hzl-web server', () => {
         projectionEngine.register(new DependenciesProjector());
         projectionEngine.register(new CommentsCheckpointsProjector());
         projectionEngine.register(new ProjectsProjector());
+        projectionEngine.register(new SearchProjector());
+        projectionEngine.register(new TagsProjector());
         projectService = new ProjectService(db, eventStore, projectionEngine);
         projectService.ensureInboxExists();
         projectService.createProject('test-project');
         taskService = new TaskService(db, eventStore, projectionEngine, projectService);
+        searchService = new SearchService(db);
     });
     afterEach(async () => {
         if (server) {
@@ -38,7 +45,7 @@ describe('hzl-web server', () => {
         db.close();
     });
     function createServer(port, host = '127.0.0.1', allowFraming = false) {
-        server = createWebServer({ port, host, allowFraming, taskService, eventStore });
+        server = createWebServer({ port, host, allowFraming, taskService, eventStore, searchService });
         return server;
     }
     async function fetchJson(path) {
@@ -414,6 +421,25 @@ describe('hzl-web server', () => {
             expect(status).toBe(404);
             expect(data.error).toContain('not found');
         });
+        it('returns blocked_by as objects with task_id and title', async () => {
+            const blocker = taskService.createTask({
+                title: 'Blocker Task',
+                project: 'test-project',
+            });
+            const blocked = taskService.createTask({
+                title: 'Blocked Task',
+                project: 'test-project',
+                depends_on: [blocker.task_id],
+            });
+            taskService.setStatus(blocked.task_id, TaskStatus.Ready);
+            createServer(4623);
+            const { status, data } = await fetchJson(`/api/tasks/${blocked.task_id}`);
+            expect(status).toBe(200);
+            const task = data.task;
+            expect(task.blocked_by).toEqual([
+                { task_id: blocker.task_id, title: 'Blocker Task' },
+            ]);
+        });
     });
     describe('GET /api/tasks/:id/comments', () => {
         it('returns task comments', async () => {
@@ -571,38 +597,46 @@ describe('hzl-web server', () => {
             expect(res.headers.get('content-type') ?? '').toMatch(/text\/event-stream/i);
             await res.body?.cancel();
         });
-        it('includes EventSource usage and wiring in dashboard HTML', async () => {
-            server = createServer(4556);
-            const { body } = await fetchText('/');
-            const eventSourceInit = body.match(/(?:const|let|var)\s+([a-zA-Z_$][\w$]*)\s*=\s*new\s+EventSource\s*\([\s\S]*?\)/i);
-            expect(eventSourceInit).toBeTruthy();
-            expect(body).toMatch(/SSE_ENDPOINT\s*=\s*['"]\/api\/events\/stream['"]/i);
-            const eventSourceVar = eventSourceInit?.[1];
-            expect(eventSourceVar).toBeTruthy();
-            const eventSourceWiring = new RegExp(`${eventSourceVar}\\s*\\.\\s*(?:onopen|onmessage|onerror|addEventListener\\s*\\()`, 'i');
-            expect(body).toMatch(eventSourceWiring);
-        });
-        it('does not rely on setInterval(poll, ...) as the primary update loop', async () => {
-            server = createServer(4557);
-            const { body } = await fetchText('/');
-            expect(body).not.toMatch(/setInterval\s*\(\s*poll\s*,/i);
-        });
-        it('checks both visibility and focus before opening SSE connections', async () => {
-            server = createServer(4558);
-            const { body } = await fetchText('/');
-            const connectSetup = body.match(/function\s+connectEventStream\s*\([^)]*\)\s*\{[\s\S]*?if\s*\(\s*!\s*([a-zA-Z_$][\w$]*)\s*\(\s*\)\s*\)\s*\{[\s\S]{0,260}?pauseLiveUpdates\s*\(\s*\)[\s\S]{0,260}?return[\s\S]*?new\s+EventSource\s*\(/i);
-            expect(connectSetup).toBeTruthy();
-            const liveUpdateGate = connectSetup?.[1];
-            expect(liveUpdateGate).toBeTruthy();
-            const gateFunctionPattern = new RegExp(`function\\s+${liveUpdateGate}\\s*\\([^)]*\\)\\s*\\{[\\s\\S]*?(?:document\\.(?:hidden|visibilityState)[\\s\\S]*?document\\.hasFocus\\s*\\(\\s*\\)|document\\.hasFocus\\s*\\(\\s*\\)[\\s\\S]*?document\\.(?:hidden|visibilityState))`, 'i');
-            expect(body).toMatch(gateFunctionPattern);
-        });
-        it('wires blur/focus/visibilitychange handlers to pause and resume live updates', async () => {
-            server = createServer(4559);
-            const { body } = await fetchText('/');
-            expect(body).toMatch(/(?:window|document)\s*\.\s*addEventListener\s*\(\s*['"]blur['"]\s*,[\s\S]{0,240}?pauseLiveUpdates\s*\(/i);
-            expect(body).toMatch(/(?:window|document)\s*\.\s*addEventListener\s*\(\s*['"]focus['"]\s*,[\s\S]{0,240}?resumeLiveUpdates\s*\(/i);
-            expect(body).toMatch(/document\s*\.\s*addEventListener\s*\(\s*['"]visibilitychange['"]\s*,[\s\S]{0,500}?pauseLiveUpdates\s*\([\s\S]{0,500}?resumeLiveUpdates\s*\(/i);
+        describe('(legacy dashboard)', () => {
+            beforeEach(() => { process.env.HZL_LEGACY_DASHBOARD = '1'; });
+            afterEach(() => { delete process.env.HZL_LEGACY_DASHBOARD; });
+            it('includes EventSource usage and wiring in dashboard HTML', async () => {
+                server = createServer(4556);
+                const { body } = await fetchText('/');
+                const eventSourceInit = body.match(/(?:const|let|var)\s+([a-zA-Z_$][\w$]*)\s*=\s*new\s+EventSource\s*\([\s\S]*?\)/i);
+                expect(eventSourceInit).toBeTruthy();
+                expect(body).toMatch(/SSE_ENDPOINT\s*=\s*['"]\/api\/events\/stream['"]/i);
+                const eventSourceVar = eventSourceInit?.[1];
+                expect(eventSourceVar).toBeTruthy();
+                const eventSourceWiring = new RegExp(`${eventSourceVar}\\s*\\.\\s*(?:onopen|onmessage|onerror|addEventListener\\s*\\()`, 'i');
+                expect(body).toMatch(eventSourceWiring);
+            });
+            it('checks both visibility and focus before opening SSE connections', async () => {
+                server = createServer(4558);
+                const { body } = await fetchText('/');
+                const connectSetup = body.match(/function\s+connectEventStream\s*\([^)]*\)\s*\{[\s\S]*?if\s*\(\s*!\s*([a-zA-Z_$][\w$]*)\s*\(\s*\)\s*\)\s*\{[\s\S]{0,260}?pauseLiveUpdates\s*\(\s*\)[\s\S]{0,260}?return[\s\S]*?new\s+EventSource\s*\(/i);
+                expect(connectSetup).toBeTruthy();
+                const liveUpdateGate = connectSetup?.[1];
+                expect(liveUpdateGate).toBeTruthy();
+                const gateFunctionPattern = new RegExp(`function\\s+${liveUpdateGate}\\s*\\([^)]*\\)\\s*\\{[\\s\\S]*?(?:document\\.(?:hidden|visibilityState)[\\s\\S]*?document\\.hasFocus\\s*\\(\\s*\\)|document\\.hasFocus\\s*\\(\\s*\\)[\\s\\S]*?document\\.(?:hidden|visibilityState))`, 'i');
+                expect(body).toMatch(gateFunctionPattern);
+            });
+            it('wires blur/focus/visibilitychange handlers to pause and resume live updates', async () => {
+                server = createServer(4559);
+                const { body } = await fetchText('/');
+                expect(body).toMatch(/(?:window|document)\s*\.\s*addEventListener\s*\(\s*['"]blur['"]\s*,[\s\S]{0,240}?pauseLiveUpdates\s*\(/i);
+                expect(body).toMatch(/(?:window|document)\s*\.\s*addEventListener\s*\(\s*['"]focus['"]\s*,[\s\S]{0,240}?resumeLiveUpdates\s*\(/i);
+                expect(body).toMatch(/document\s*\.\s*addEventListener\s*\(\s*['"]visibilitychange['"]\s*,[\s\S]{0,500}?pauseLiveUpdates\s*\([\s\S]{0,500}?resumeLiveUpdates\s*\(/i);
+            });
+        });
+        describe('(legacy dashboard polling check)', () => {
+            beforeEach(() => { process.env.HZL_LEGACY_DASHBOARD = '1'; });
+            afterEach(() => { delete process.env.HZL_LEGACY_DASHBOARD; });
+            it('does not rely on setInterval(poll, ...) as the primary update loop', async () => {
+                server = createServer(4557);
+                const { body } = await fetchText('/');
+                expect(body).not.toMatch(/setInterval\s*\(\s*poll\s*,/i);
+            });
         });
     });
     describe('GET / (dashboard HTML)', () => {
@@ -629,15 +663,167 @@ describe('hzl-web server', () => {
             expect(res.headers.get('x-content-type-options')).toBe('nosniff');
             expect(res.headers.get('referrer-policy')).toBe('no-referrer');
         });
-        it('includes favicon and manifest markups in the root HTML', async () => {
-            server = createServer(4610);
-            const { body } = await fetchText('/');
-            expect(body).toMatch(/<link[^>]*rel=["']icon["'][^>]*href=["']\/favicon-96x96\.png["'][^>]*>/i);
-            expect(body).not.toMatch(/<link[^>]*rel=["']icon["'][^>]*href=["']\/favicon\.svg["'][^>]*>/i);
-            expect(body).toMatch(/<link[^>]*rel=["']shortcut icon["'][^>]*href=["']\/favicon\.ico["'][^>]*>/i);
-            expect(body).toMatch(/<link[^>]*rel=["']apple-touch-icon["'][^>]*href=["']\/apple-touch-icon\.png["'][^>]*>/i);
-            expect(body).toMatch(/<meta[^>]*name=["']apple-mobile-web-app-title["'][^>]*content=["']HZL["'][^>]*>/i);
-            expect(body).toMatch(/<link[^>]*rel=["']manifest["'][^>]*href=["']\/site\.webmanifest["'][^>]*>/i);
+        describe('(legacy dashboard)', () => {
+            beforeEach(() => { process.env.HZL_LEGACY_DASHBOARD = '1'; });
+            afterEach(() => { delete process.env.HZL_LEGACY_DASHBOARD; });
+            it('includes favicon and manifest markups in the root HTML', async () => {
+                server = createServer(4610);
+                const { body } = await fetchText('/');
+                expect(body).toMatch(/<link[^>]*rel=["']icon["'][^>]*href=["']\/favicon-96x96\.png["'][^>]*>/i);
+                expect(body).not.toMatch(/<link[^>]*rel=["']icon["'][^>]*href=["']\/favicon\.svg["'][^>]*>/i);
+                expect(body).toMatch(/<link[^>]*rel=["']shortcut icon["'][^>]*href=["']\/favicon\.ico["'][^>]*>/i);
+                expect(body).toMatch(/<link[^>]*rel=["']apple-touch-icon["'][^>]*href=["']\/apple-touch-icon\.png["'][^>]*>/i);
+                expect(body).toMatch(/<meta[^>]*name=["']apple-mobile-web-app-title["'][^>]*content=["']HZL["'][^>]*>/i);
+                expect(body).toMatch(/<link[^>]*rel=["']manifest["'][^>]*href=["']\/site\.webmanifest["'][^>]*>/i);
+            });
+            it('renders project metadata in the top-right header and assignee metadata in card footer', async () => {
+                server = createServer(4590);
+                const { body } = await fetchText('/');
+                const renderCardBlock = body.match(/function\s+renderCard\s*\([^)]*\)\s*\{[\s\S]*?return\s*`[\s\S]*?`;\s*}/i);
+                expect(renderCardBlock).toBeTruthy();
+                expect(renderCardBlock?.[0]).toMatch(/const\s+projectHtml\s*=\s*`[\s\S]*class=["']card-project["'][\s\S]*`;/i);
+                expect(renderCardBlock?.[0]).toMatch(/const\s+assigneeClass\s*=\s*hasAssignee\s*\?\s*['"][^'"]*\bcard-assignee\b[^'"]*['"]\s*:\s*['"][^'"]*\bcard-assignee\b[^'"]*['"]/i);
+                expect(renderCardBlock?.[0]).toMatch(/const\s+assigneeHtml\s*=\s*`[\s\S]*class=["']\$\{assigneeClass\}["'][\s\S]*`;/i);
+                expect(renderCardBlock?.[0]).toMatch(/<div[^>]*class=["']card-header-right["'][^>]*>[\s\S]*\$\{projectHtml\}[\s\S]*<\/div>/i);
+                expect(renderCardBlock?.[0]).toMatch(/<div[^>]*class=["']card-meta["'][^>]*>[\s\S]*\$\{assigneeHtml\}[\s\S]*<\/div>/i);
+            });
+            it('truncates card assignee labels to 10 characters plus ellipsis', async () => {
+                server = createServer(4598);
+                const { body } = await fetchText('/');
+                const renderCardBlock = body.match(/function\s+renderCard\s*\([^)]*\)\s*\{[\s\S]*?return\s*`[\s\S]*?`;\s*}/i);
+                expect(renderCardBlock).toBeTruthy();
+                expect(body).toMatch(/function\s+truncateCardLabel\s*\(value,\s*maxChars\s*=\s*10\)\s*\{/i);
+                expect(renderCardBlock?.[0]).toMatch(/const\s+assigneeCardText\s*=\s*truncateCardLabel\(assigneeText,\s*10\)/i);
+                expect(renderCardBlock?.[0]).toMatch(/title="\$\{escapeHtml\(assigneeText\)\}"[^>]*>\$\{escapeHtml\(assigneeCardText\)\}<\/span>/i);
+            });
+            it('binds modal assignee metadata with an Unassigned fallback value', async () => {
+                server = createServer(4591);
+                const { body } = await fetchText('/');
+                const openTaskModalBlock = body.match(/async\s+function\s+openTaskModal\s*\([^)]*\)\s*\{[\s\S]*?let\s+html\s*=\s*`[\s\S]*?`;/i);
+                expect(openTaskModalBlock).toBeTruthy();
+                expect(openTaskModalBlock?.[0]).toMatch(/const\s+assigneeValue\s*=\s*hasAssignee[\s\S]*<span[^>]*class=["']modal-meta-fallback["'][^>]*>\s*Unassigned\s*<\/span>/i);
+                expect(openTaskModalBlock?.[0]).toMatch(/<div[^>]*class=["']modal-meta-label["'][^>]*>\s*Assignee\s*<\/div>[\s\S]*?<div[^>]*class=["']modal-meta-value["'][^>]*>\s*\$\{assigneeValue\}\s*<\/div>/i);
+            });
+            it('binds modal task id display to task.task_id', async () => {
+                server = createServer(4592);
+                const { body } = await fetchText('/');
+                const hasTaskIdSourceBinding = /data\.task\.task_id/i.test(body);
+                const hasModalTaskIdDisplayBinding = /modalTaskIdValue\s*\.\s*textContent\s*=\s*(?:data\.task\.task_id|[a-zA-Z0-9_$]*taskId[a-zA-Z0-9_$]*)/i.test(body);
+                expect(hasTaskIdSourceBinding).toBe(true);
+                expect(hasModalTaskIdDisplayBinding).toBe(true);
+            });
+            it('includes a modal copy control for task id', async () => {
+                server = createServer(4593);
+                const { body } = await fetchText('/');
+                expect(body).toMatch(/<div[^>]*class=["']modal-task-id-row["'][^>]*>[\s\S]*id=["']modalTaskIdValue["'][\s\S]*<button[^>]*id=["']modalTaskIdCopy["'][^>]*>[\s\S]*\bcopy\b[\s\S]*<\/button>/i);
+            });
+            it('includes a copy handler that uses clipboard API and/or execCommand fallback', async () => {
+                server = createServer(4594);
+                const { body } = await fetchText('/');
+                const hasCopyHandlerFunction = /(?:async\s+)?function\s+[a-zA-Z0-9_$]*copy[a-zA-Z0-9_$]*\s*\(/i.test(body) ||
+                    /(?:const|let)\s+[a-zA-Z0-9_$]*copy[a-zA-Z0-9_$]*\s*=\s*(?:async\s*)?\([^)]*\)\s*=>/i.test(body);
+                const hasClipboardOrExecCommand = /navigator\.clipboard\s*\.\s*writeText\s*\(|document\.execCommand\(\s*["']copy["']\s*\)/i.test(body);
+                expect(hasCopyHandlerFunction).toBe(true);
+                expect(hasClipboardOrExecCommand).toBe(true);
+            });
+            it('includes assignee filter select with id assigneeFilter', async () => {
+                server = createServer(4563);
+                const { body } = await fetchText('/');
+                expect(body).toMatch(/<select[^>]*id=["']assigneeFilter["'][^>]*>/i);
+            });
+            it('includes a default assignee option containing Any Agent', async () => {
+                server = createServer(4564);
+                const { body } = await fetchText('/');
+                const assigneeSelect = body.match(/<select[^>]*id=["']assigneeFilter["'][^>]*>([\s\S]*?)<\/select>/i);
+                expect(assigneeSelect).toBeTruthy();
+                expect(assigneeSelect?.[1]).toMatch(/<option[^>]*>[\s\S]*?Any Agent[\s\S]*?<\/option>/i);
+            });
+            it('includes script wiring for assignee filter change handling', async () => {
+                server = createServer(4565);
+                const { body } = await fetchText('/');
+                const hasAssigneeReference = /getElementById\(\s*['"]assigneeFilter['"]\s*\)/.test(body) ||
+                    /querySelector\(\s*['"]#assigneeFilter['"]\s*\)/.test(body) ||
+                    /assigneeFilter/.test(body);
+                const hasAssigneeChangeListener = /assigneeFilter\s*\.\s*addEventListener\(\s*['"]change['"]/.test(body) ||
+                    /getElementById\(\s*['"]assigneeFilter['"]\s*\)\s*\.\s*addEventListener\(\s*['"]change['"]/.test(body) ||
+                    /querySelector\(\s*['"]#assigneeFilter['"]\s*\)\s*\.\s*addEventListener\(\s*['"]change['"]/.test(body);
+                expect(hasAssigneeReference).toBe(true);
+                expect(hasAssigneeChangeListener).toBe(true);
+            });
+            it('preserves full assignee strings in board and activity filter wiring', async () => {
+                server = createServer(4600);
+                const { body } = await fetchText('/');
+                expect(body).toMatch(/function\s+getAssigneeValue\s*\(value\)\s*\{[\s\S]*value\.trim\(\)\.length\s*>\s*0[\s\S]*\?\s*value\s*:\s*['"]{2}/i);
+                expect(body).toMatch(/filtered\s*=\s*filtered\.filter\(\s*task\s*=>\s*getAssigneeValue\(task\.assignee\)\s*===\s*assigneeFilter\.value\s*\)/i);
+                expect(body).toMatch(/const\s+assignee\s*=\s*getAssigneeValue\(task\.assignee\);\s*if\s*\(!assignee\)\s*continue;[\s\S]*option\.value\s*=\s*assignee/i);
+                expect(body).toMatch(/const\s+taskAssignee\s*=\s*getAssigneeValue\(event\.task_assignee\);\s*if\s*\(taskAssignee\)\s*return\s+taskAssignee;[\s\S]*return\s+getAssigneeValue\(event\.data\?\.assignee\)/i);
+            });
+            it('includes activity assignee and keyword filter controls', async () => {
+                server = createServer(4566);
+                const { body } = await fetchText('/');
+                expect(body).toMatch(/<select[^>]*id=["']activityAssigneeFilter["'][^>]*>/i);
+                expect(body).toMatch(/<input[^>]*id=["']activityKeywordFilter["'][^>]*>/i);
+            });
+            it('applies activity keyword filtering only at 3+ characters', async () => {
+                server = createServer(4567);
+                const { body } = await fetchText('/');
+                expect(body).toMatch(/keyword\.length\s*>=\s*3/);
+            });
+            it('includes activity item markup with task id binding attribute', async () => {
+                server = createServer(4568);
+                const { body } = await fetchText('/');
+                expect(body).toMatch(/<div(?=[^>]*\bclass=["'][^"']*\bactivity-item\b[^"']*["'])(?=[^>]*\bdata-task-id\s*=\s*["'][^"']*event\.task_id[^"']*["'])[^>]*>/i);
+            });
+            it('includes activity list click delegation wired to openTaskModal', async () => {
+                server = createServer(4569);
+                const { body } = await fetchText('/');
+                expect(body).toMatch(/(?:activityList|getElementById\(\s*["']activityList["']\s*\)|querySelector\(\s*["']#activityList["']\s*\))\s*\.\s*addEventListener\(\s*["']click["']\s*,[\s\S]*?closest\(\s*["']\.activity-item["']\s*\)[\s\S]*?openTaskModal\b/i);
+            });
+            it('shows static Live text with green connection-dot live state when stream is healthy', async () => {
+                server = createServer(4598);
+                const { body } = await fetchText('/');
+                expect(body).toMatch(/\.connection-dot\.live\s*\{[\s\S]*--status-done/i);
+                expect(body).toMatch(/connectionText\.textContent\s*=\s*['"]Live['"]/);
+                expect(body).not.toMatch(/Live\s*\$\{ago\}s/);
+            });
+            it('uses hidden-by-default column scrollbars with scroll/touch reveal behavior', async () => {
+                server = createServer(4599);
+                const { body } = await fetchText('/');
+                expect(body).toMatch(/\.column-cards\s*\{[\s\S]*scrollbar-width:\s*none[\s\S]*-ms-overflow-style:\s*none/i);
+                expect(body).toMatch(/\.column-cards\.is-scrolling[\s\S]*::\-webkit-scrollbar/i);
+                expect(body).toMatch(/function\s+bindColumnScrollIndicators\s*\(/i);
+                expect(body).toMatch(/classList\.add\(\s*['"]is-scrolling['"]\s*\)/i);
+            });
+            it('renders an explicit activity actor/author element in task modal activity entries', async () => {
+                server = createServer(4595);
+                const { body } = await fetchText('/');
+                const activityMarkupBlock = body.match(/displayTaskActivity\.map\([\s\S]*?\)\.join\(\s*['"]{2}\s*\)/i);
+                expect(activityMarkupBlock).toBeTruthy();
+                expect(activityMarkupBlock?.[0]).toMatch(/class=["'][^"']*(?:activity|event)[^"']*(?:actor|author)[^"']*["']/i);
+                expect(activityMarkupBlock?.[0]).toMatch(/\$\{escapeHtml\(\s*actor\s*\)\}/i);
+            });
+            it('uses dedicated modal classes for checkpoint and activity author fields (not just .comment-author)', async () => {
+                server = createServer(4596);
+                const { body } = await fetchText('/');
+                const modalMarkupBlock = body.match(/async\s+function\s+openTaskModal\s*\([^)]*\)\s*\{[\s\S]*?modalBody\.innerHTML\s*=\s*html\s*;/i);
+                const checkpointMarkupBlock = modalMarkupBlock?.[0].match(/visibleCheckpoints\.map\([\s\S]*?\)\.join\(\s*['"]{2}\s*\)/i);
+                const activityMarkupBlock = modalMarkupBlock?.[0].match(/displayTaskActivity\.map\([\s\S]*?\)\.join\(\s*['"]{2}\s*\)/i);
+                expect(modalMarkupBlock).toBeTruthy();
+                expect(checkpointMarkupBlock).toBeTruthy();
+                expect(activityMarkupBlock).toBeTruthy();
+                expect(checkpointMarkupBlock?.[0]).toMatch(/class=["'][^"']*\b(?:modal-|task-)?(?:checkpoint|cp)-[^"']*["']/i);
+                expect(activityMarkupBlock?.[0]).toMatch(/class=["'][^"']*\b(?:modal-|task-)?(?:activity|event)-[^"']*["']/i);
+                expect(checkpointMarkupBlock?.[0]).not.toMatch(/\bcomment-author\b/i);
+                expect(activityMarkupBlock?.[0]).not.toMatch(/\bcomment-author\b/i);
+            });
+            it('styles modal checkpoint author/name with dedicated non-accent class rules', async () => {
+                server = createServer(4597);
+                const { body } = await fetchText('/');
+                const checkpointStyleRule = body.match(/\.(?:modal-|task-)?(?:checkpoint|cp)-[\w-]*(?:entry|item|author|name|title|meta)?[\w-]*\s*\{[\s\S]*?\}/i);
+                expect(checkpointStyleRule).toBeTruthy();
+                expect(checkpointStyleRule?.[0]).toMatch(/(?:color|border(?:-left|-color)?)\s*:/i);
+                expect(checkpointStyleRule?.[0]).not.toMatch(/--accent|--status-in-progress|orange/i);
+            });
         });
         it('serves site.webmanifest with HZL metadata', async () => {
             server = createServer(4611);
@@ -685,153 +871,49 @@ describe('hzl-web server', () => {
             const res = await globalThis.fetch(`${server.url}/favicon.svg`);
             expect(res.status).toBe(404);
         });
-        it('renders project metadata in the top-right header and assignee metadata in card footer', async () => {
-            server = createServer(4590);
-            const { body } = await fetchText('/');
-            const renderCardBlock = body.match(/function\s+renderCard\s*\([^)]*\)\s*\{[\s\S]*?return\s*`[\s\S]*?`;\s*}/i);
-            expect(renderCardBlock).toBeTruthy();
-            expect(renderCardBlock?.[0]).toMatch(/const\s+projectHtml\s*=\s*`[\s\S]*class=["']card-project["'][\s\S]*`;/i);
-            expect(renderCardBlock?.[0]).toMatch(/const\s+assigneeClass\s*=\s*hasAssignee\s*\?\s*['"][^'"]*\bcard-assignee\b[^'"]*['"]\s*:\s*['"][^'"]*\bcard-assignee\b[^'"]*['"]/i);
-            expect(renderCardBlock?.[0]).toMatch(/const\s+assigneeHtml\s*=\s*`[\s\S]*class=["']\$\{assigneeClass\}["'][\s\S]*`;/i);
-            expect(renderCardBlock?.[0]).toMatch(/<div[^>]*class=["']card-header-right["'][^>]*>[\s\S]*\$\{projectHtml\}[\s\S]*<\/div>/i);
-            expect(renderCardBlock?.[0]).toMatch(/<div[^>]*class=["']card-meta["'][^>]*>[\s\S]*\$\{assigneeHtml\}[\s\S]*<\/div>/i);
-        });
-        it('truncates card assignee labels to 10 characters plus ellipsis', async () => {
-            server = createServer(4598);
-            const { body } = await fetchText('/');
-            const renderCardBlock = body.match(/function\s+renderCard\s*\([^)]*\)\s*\{[\s\S]*?return\s*`[\s\S]*?`;\s*}/i);
-            expect(renderCardBlock).toBeTruthy();
-            expect(body).toMatch(/function\s+truncateCardLabel\s*\(value,\s*maxChars\s*=\s*10\)\s*\{/i);
-            expect(renderCardBlock?.[0]).toMatch(/const\s+assigneeCardText\s*=\s*truncateCardLabel\(assigneeText,\s*10\)/i);
-            expect(renderCardBlock?.[0]).toMatch(/title="\$\{escapeHtml\(assigneeText\)\}"[^>]*>\$\{escapeHtml\(assigneeCardText\)\}<\/span>/i);
-        });
-        it('binds modal assignee metadata with an Unassigned fallback value', async () => {
-            server = createServer(4591);
-            const { body } = await fetchText('/');
-            const openTaskModalBlock = body.match(/async\s+function\s+openTaskModal\s*\([^)]*\)\s*\{[\s\S]*?let\s+html\s*=\s*`[\s\S]*?`;/i);
-            expect(openTaskModalBlock).toBeTruthy();
-            expect(openTaskModalBlock?.[0]).toMatch(/const\s+assigneeValue\s*=\s*hasAssignee[\s\S]*<span[^>]*class=["']modal-meta-fallback["'][^>]*>\s*Unassigned\s*<\/span>/i);
-            expect(openTaskModalBlock?.[0]).toMatch(/<div[^>]*class=["']modal-meta-label["'][^>]*>\s*Assignee\s*<\/div>[\s\S]*?<div[^>]*class=["']modal-meta-value["'][^>]*>\s*\$\{assigneeValue\}\s*<\/div>/i);
-        });
-        it('binds modal task id display to task.task_id', async () => {
-            server = createServer(4592);
-            const { body } = await fetchText('/');
-            const hasTaskIdSourceBinding = /data\.task\.task_id/i.test(body);
-            const hasModalTaskIdDisplayBinding = /modalTaskIdValue\s*\.\s*textContent\s*=\s*(?:data\.task\.task_id|[a-zA-Z0-9_$]*taskId[a-zA-Z0-9_$]*)/i.test(body);
-            expect(hasTaskIdSourceBinding).toBe(true);
-            expect(hasModalTaskIdDisplayBinding).toBe(true);
-        });
-        it('includes a modal copy control for task id', async () => {
-            server = createServer(4593);
-            const { body } = await fetchText('/');
-            expect(body).toMatch(/<div[^>]*class=["']modal-task-id-row["'][^>]*>[\s\S]*id=["']modalTaskIdValue["'][\s\S]*<button[^>]*id=["']modalTaskIdCopy["'][^>]*>[\s\S]*\bcopy\b[\s\S]*<\/button>/i);
-        });
-        it('includes a copy handler that uses clipboard API and/or execCommand fallback', async () => {
-            server = createServer(4594);
-            const { body } = await fetchText('/');
-            const hasCopyHandlerFunction = /(?:async\s+)?function\s+[a-zA-Z0-9_$]*copy[a-zA-Z0-9_$]*\s*\(/i.test(body) ||
-                /(?:const|let)\s+[a-zA-Z0-9_$]*copy[a-zA-Z0-9_$]*\s*=\s*(?:async\s*)?\([^)]*\)\s*=>/i.test(body);
-            const hasClipboardOrExecCommand = /navigator\.clipboard\s*\.\s*writeText\s*\(|document\.execCommand\(\s*["']copy["']\s*\)/i.test(body);
-            expect(hasCopyHandlerFunction).toBe(true);
-            expect(hasClipboardOrExecCommand).toBe(true);
-        });
-        it('includes assignee filter select with id assigneeFilter', async () => {
-            server = createServer(4563);
-            const { body } = await fetchText('/');
-            expect(body).toMatch(/<select[^>]*id=["']assigneeFilter["'][^>]*>/i);
-        });
-        it('includes a default assignee option containing Any Agent', async () => {
-            server = createServer(4564);
-            const { body } = await fetchText('/');
-            const assigneeSelect = body.match(/<select[^>]*id=["']assigneeFilter["'][^>]*>([\s\S]*?)<\/select>/i);
-            expect(assigneeSelect).toBeTruthy();
-            expect(assigneeSelect?.[1]).toMatch(/<option[^>]*>[\s\S]*?Any Agent[\s\S]*?<\/option>/i);
-        });
-        it('includes script wiring for assignee filter change handling', async () => {
-            server = createServer(4565);
-            const { body } = await fetchText('/');
-            const hasAssigneeReference = /getElementById\(\s*['"]assigneeFilter['"]\s*\)/.test(body) ||
-                /querySelector\(\s*['"]#assigneeFilter['"]\s*\)/.test(body) ||
-                /assigneeFilter/.test(body);
-            const hasAssigneeChangeListener = /assigneeFilter\s*\.\s*addEventListener\(\s*['"]change['"]/.test(body) ||
-                /getElementById\(\s*['"]assigneeFilter['"]\s*\)\s*\.\s*addEventListener\(\s*['"]change['"]/.test(body) ||
-                /querySelector\(\s*['"]#assigneeFilter['"]\s*\)\s*\.\s*addEventListener\(\s*['"]change['"]/.test(body);
-            expect(hasAssigneeReference).toBe(true);
-            expect(hasAssigneeChangeListener).toBe(true);
-        });
-        it('preserves full assignee strings in board and activity filter wiring', async () => {
-            server = createServer(4600);
-            const { body } = await fetchText('/');
-            expect(body).toMatch(/function\s+getAssigneeValue\s*\(value\)\s*\{[\s\S]*value\.trim\(\)\.length\s*>\s*0[\s\S]*\?\s*value\s*:\s*['"]{2}/i);
-            expect(body).toMatch(/filtered\s*=\s*filtered\.filter\(\s*task\s*=>\s*getAssigneeValue\(task\.assignee\)\s*===\s*assigneeFilter\.value\s*\)/i);
-            expect(body).toMatch(/const\s+assignee\s*=\s*getAssigneeValue\(task\.assignee\);\s*if\s*\(!assignee\)\s*continue;[\s\S]*option\.value\s*=\s*assignee/i);
-            expect(body).toMatch(/const\s+taskAssignee\s*=\s*getAssigneeValue\(event\.task_assignee\);\s*if\s*\(taskAssignee\)\s*return\s+taskAssignee;[\s\S]*return\s+getAssigneeValue\(event\.data\?\.assignee\)/i);
-        });
-        it('includes activity assignee and keyword filter controls', async () => {
-            server = createServer(4566);
-            const { body } = await fetchText('/');
-            expect(body).toMatch(/<select[^>]*id=["']activityAssigneeFilter["'][^>]*>/i);
-            expect(body).toMatch(/<input[^>]*id=["']activityKeywordFilter["'][^>]*>/i);
-        });
-        it('applies activity keyword filtering only at 3+ characters', async () => {
-            server = createServer(4567);
-            const { body } = await fetchText('/');
-            expect(body).toMatch(/keyword\.length\s*>=\s*3/);
-        });
-        it('includes activity item markup with task id binding attribute', async () => {
-            server = createServer(4568);
-            const { body } = await fetchText('/');
-            expect(body).toMatch(/<div(?=[^>]*\bclass=["'][^"']*\bactivity-item\b[^"']*["'])(?=[^>]*\bdata-task-id\s*=\s*["'][^"']*event\.task_id[^"']*["'])[^>]*>/i);
-        });
-        it('includes activity list click delegation wired to openTaskModal', async () => {
-            server = createServer(4569);
-            const { body } = await fetchText('/');
-            expect(body).toMatch(/(?:activityList|getElementById\(\s*["']activityList["']\s*\)|querySelector\(\s*["']#activityList["']\s*\))\s*\.\s*addEventListener\(\s*["']click["']\s*,[\s\S]*?closest\(\s*["']\.activity-item["']\s*\)[\s\S]*?openTaskModal\b/i);
-        });
-        it('shows static Live text with green connection-dot live state when stream is healthy', async () => {
-            server = createServer(4598);
-            const { body } = await fetchText('/');
-            expect(body).toMatch(/\.connection-dot\.live\s*\{[\s\S]*--status-done/i);
-            expect(body).toMatch(/connectionText\.textContent\s*=\s*['"]Live['"]/);
-            expect(body).not.toMatch(/Live\s*\$\{ago\}s/);
-        });
-        it('uses hidden-by-default column scrollbars with scroll/touch reveal behavior', async () => {
-            server = createServer(4599);
-            const { body } = await fetchText('/');
-            expect(body).toMatch(/\.column-cards\s*\{[\s\S]*scrollbar-width:\s*none[\s\S]*-ms-overflow-style:\s*none/i);
-            expect(body).toMatch(/\.column-cards\.is-scrolling[\s\S]*::\-webkit-scrollbar/i);
-            expect(body).toMatch(/function\s+bindColumnScrollIndicators\s*\(/i);
-            expect(body).toMatch(/classList\.add\(\s*['"]is-scrolling['"]\s*\)/i);
-        });
-        it('renders an explicit activity actor/author element in task modal activity entries', async () => {
-            server = createServer(4595);
-            const { body } = await fetchText('/');
-            const activityMarkupBlock = body.match(/displayTaskActivity\.map\([\s\S]*?\)\.join\(\s*['"]{2}\s*\)/i);
-            expect(activityMarkupBlock).toBeTruthy();
-            expect(activityMarkupBlock?.[0]).toMatch(/class=["'][^"']*(?:activity|event)[^"']*(?:actor|author)[^"']*["']/i);
-            expect(activityMarkupBlock?.[0]).toMatch(/\$\{escapeHtml\(\s*actor\s*\)\}/i);
-        });
-        it('uses dedicated modal classes for checkpoint and activity author fields (not just .comment-author)', async () => {
-            server = createServer(4596);
-            const { body } = await fetchText('/');
-            const modalMarkupBlock = body.match(/async\s+function\s+openTaskModal\s*\([^)]*\)\s*\{[\s\S]*?modalBody\.innerHTML\s*=\s*html\s*;/i);
-            const checkpointMarkupBlock = modalMarkupBlock?.[0].match(/visibleCheckpoints\.map\([\s\S]*?\)\.join\(\s*['"]{2}\s*\)/i);
-            const activityMarkupBlock = modalMarkupBlock?.[0].match(/displayTaskActivity\.map\([\s\S]*?\)\.join\(\s*['"]{2}\s*\)/i);
-            expect(modalMarkupBlock).toBeTruthy();
-            expect(checkpointMarkupBlock).toBeTruthy();
-            expect(activityMarkupBlock).toBeTruthy();
-            expect(checkpointMarkupBlock?.[0]).toMatch(/class=["'][^"']*\b(?:modal-|task-)?(?:checkpoint|cp)-[^"']*["']/i);
-            expect(activityMarkupBlock?.[0]).toMatch(/class=["'][^"']*\b(?:modal-|task-)?(?:activity|event)-[^"']*["']/i);
-            expect(checkpointMarkupBlock?.[0]).not.toMatch(/\bcomment-author\b/i);
-            expect(activityMarkupBlock?.[0]).not.toMatch(/\bcomment-author\b/i);
-        });
-        it('styles modal checkpoint author/name with dedicated non-accent class rules', async () => {
-            server = createServer(4597);
-            const { body } = await fetchText('/');
-            const checkpointStyleRule = body.match(/\.(?:modal-|task-)?(?:checkpoint|cp)-[\w-]*(?:entry|item|author|name|title|meta)?[\w-]*\s*\{[\s\S]*?\}/i);
-            expect(checkpointStyleRule).toBeTruthy();
-            expect(checkpointStyleRule?.[0]).toMatch(/(?:color|border(?:-left|-color)?)\s*:/i);
-            expect(checkpointStyleRule?.[0]).not.toMatch(/--accent|--status-in-progress|orange/i);
+    });
+    describe('GET /api/search', () => {
+        it('returns matching tasks', async () => {
+            taskService.createTask({ title: 'Implement authentication', project: 'test-project' });
+            taskService.createTask({ title: 'Write documentation', project: 'test-project' });
+            createServer(4620);
+            await new Promise((r) => setTimeout(r, 20));
+            const { status, data } = await fetchJson('/api/search?q=authentication');
+            expect(status).toBe(200);
+            const body = data;
+            expect(body.tasks).toHaveLength(1);
+            expect(body.tasks[0].title).toBe('Implement authentication');
+            expect(body.total).toBe(1);
+        });
+        it('returns empty results for missing q param', async () => {
+            createServer(4621);
+            await new Promise((r) => setTimeout(r, 20));
+            const { status, data } = await fetchJson('/api/search');
+            expect(status).toBe(200);
+            const body = data;
+            expect(body.tasks).toHaveLength(0);
+            expect(body.total).toBe(0);
+        });
+        it('supports project filter', async () => {
+            taskService.createTask({ title: 'Auth for A', project: 'test-project' });
+            projectService.createProject('other-project');
+            taskService.createTask({ title: 'Auth for B', project: 'other-project' });
+            createServer(4622);
+            await new Promise((r) => setTimeout(r, 20));
+            const { status, data } = await fetchJson('/api/search?q=Auth&project=test-project');
+            expect(status).toBe(200);
+            const body = data;
+            expect(body.tasks).toHaveLength(1);
+            expect(body.tasks[0].project).toBe('test-project');
+        });
+        it('finds tasks by tag', async () => {
+            taskService.createTask({ title: 'Backend work', project: 'test-project', tags: ['api', 'urgent'] });
+            createServer(4623);
+            await new Promise((r) => setTimeout(r, 20));
+            const { status, data } = await fetchJson('/api/search?q=urgent');
+            expect(status).toBe(200);
+            const body = data;
+            expect(body.tasks).toHaveLength(1);
         });
     });
     describe('404 handling', () => {
@@ -846,6 +928,34 @@ describe('hzl-web server', () => {
             expect(data.error).toBe('Not Found');
         });
     });
+    describe('tags API', () => {
+        it('GET /api/tasks includes tags in response', async () => {
+            taskService.createTask({ title: 'Tagged', project: 'test-project', tags: ['bug', 'urgent'] });
+            const s = createServer(4620);
+            await new Promise((r) => setTimeout(r, 20));
+            const { data } = await fetchJson('/api/tasks?since=30d');
+            const tasks = data.tasks;
+            const found = tasks.find((t) => t.title === 'Tagged');
+            expect(found?.tags).toEqual(['bug', 'urgent']);
+        });
+        it('GET /api/tasks filters by tag', async () => {
+            taskService.createTask({ title: 'Bug', project: 'test-project', tags: ['bug'] });
+            taskService.createTask({ title: 'Feature', project: 'test-project', tags: ['feature'] });
+            const s = createServer(4621);
+            await new Promise((r) => setTimeout(r, 20));
+            const { data } = await fetchJson('/api/tasks?since=30d&tag=bug');
+            const tasks = data.tasks;
+            expect(tasks.map((t) => t.title)).toEqual(['Bug']);
+        });
+        it('GET /api/tags returns tag counts', async () => {
+            taskService.createTask({ title: 'A', project: 'test-project', tags: ['bug', 'urgent'] });
+            taskService.createTask({ title: 'B', project: 'test-project', tags: ['bug'] });
+            const s = createServer(4622);
+            await new Promise((r) => setTimeout(r, 20));
+            const { data } = await fetchJson('/api/tags');
+            expect(data).toEqual({ tags: [{ tag: 'bug', count: 2 }, { tag: 'urgent', count: 1 }] });
+        });
+    });
     describe('JSON API response format', () => {
         it('does not include CORS headers', async () => {
             createServer(4580);