From fa4534bfb2c006684e272577ed7279c0302e5da5 Mon Sep 17 00:00:00 2001
From: Henrik Jess Nielsen <lrihni@egmont.com>
Date: Sat, 9 May 2026 16:54:30 +0200
Subject: [PATCH] feat: Projects tab, 4-tab dashboard, full knowledge browser

- Add projects router (Redis projects + workcontexts merged)
- Register projects router in main.py
- Extend knowledge router: howtos, agents, skills via MCP proxy
- Extend mcp_client: list/get howtos, agents, skills
- Rewrite dashboard.html: 4 tabs (Taskz/Worklog/Projects/Knowledge)
  - Taskz: sidebar board list + Kanban columns with task modal
  - Worklog: context/days picker + standup button
  - Projects: context filter sidebar + work context display
  - Knowledge: 6 sub-tabs (docs/howtos/agents/skills/adrs/memories)
    with markdown rendering via marked.js
---
 app/main.py                  |    3 +-
 app/mcp_client.py            |   43 ++
 app/redis_client.py          |   18 +
 app/routers/knowledge.py     |  162 +++--
 app/routers/projects.py      |   61 ++
 app/templates/dashboard.html | 1311 ++++++++++++++++------------------
 6 files changed, 829 insertions(+), 769 deletions(-)
 create mode 100644 app/routers/projects.py

diff --git a/app/main.py b/app/main.py
index 2506da1..5b9d1e4 100644
--- a/app/main.py
+++ b/app/main.py
@@ -10,13 +10,14 @@ from fastapi.responses import HTMLResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
-from app.routers import tasks, worklog, knowledge
+from app.routers import tasks, worklog, knowledge, projects
 
 app = FastAPI(title="DevOpsDash", version="1.0.0", docs_url="/api/docs")
 
 app.include_router(tasks.router)
 app.include_router(worklog.router)
 app.include_router(knowledge.router)
+app.include_router(projects.router)
 
 TEMPLATES_DIR = Path(__file__).parent / "templates"
 templates = Jinja2Templates(directory=str(TEMPLATES_DIR))
diff --git a/app/mcp_client.py b/app/mcp_client.py
index 70a7b25..67fd54a 100644
--- a/app/mcp_client.py
+++ b/app/mcp_client.py
@@ -54,3 +54,46 @@ async def get_worklog(
 
 async def get_standup(days: int = 2, context: str = "egmont") -> Dict[str, Any]:
     return await _call_tool("generate_standup", {"days": days, "context": context})
+
+
+async def list_knowledge(category: Optional[str] = None, tag: Optional[str] = None) -> Dict[str, Any]:
+    args: Dict[str, Any] = {}
+    if category:
+        args["category"] = category
+    if tag:
+        args["tag"] = tag
+    return await _call_tool("list_knowledge", args)
+
+
+async def get_knowledge(storage_filename: str) -> Dict[str, Any]:
+    return await _call_tool("get_knowledge", {"storage_filename": storage_filename, "include_metadata": False})
+
+
+async def list_howtos() -> Dict[str, Any]:
+    return await _call_tool("list_howtos", {})
+
+
+async def get_howto(filename: str) -> Dict[str, Any]:
+    return await _call_tool("get_howto_content", {"filename": filename})
+
+
+async def list_agents(domain: Optional[str] = None) -> Dict[str, Any]:
+    args: Dict[str, Any] = {}
+    if domain:
+        args["domain"] = domain
+    return await _call_tool("get_agent", args)
+
+
+async def get_agent(name: str) -> Dict[str, Any]:
+    return await _call_tool("get_agent", {"name": name})
+
+
+async def list_skills(domain: Optional[str] = None) -> Dict[str, Any]:
+    args: Dict[str, Any] = {}
+    if domain:
+        args["domain"] = domain
+    return await _call_tool("get_skill", args)
+
+
+async def get_skill(name: str) -> Dict[str, Any]:
+    return await _call_tool("get_skill", {"name": name})
diff --git a/app/redis_client.py b/app/redis_client.py
index 3e12068..7ebbaa3 100644
--- a/app/redis_client.py
+++ b/app/redis_client.py
@@ -21,6 +21,8 @@ MEMORY_KEY_PREFIX = "devops-mcp:memory:"
 PROJECT_KEY_PREFIX = "devops-mcp:projects:"
 PROJECT_INDEX_KEY = "devops-mcp:projects:_index"
 
+WORKCONTEXT_KEY_PREFIX = "devops-mcp:workcontext:"
+
 
 def get_redis() -> redis.Redis:
     url = os.environ.get("REDIS_URL", "redis://localhost:6379")
@@ -130,3 +132,19 @@ def list_projects(r: redis.Redis, context: Optional[str] = None) -> List[Dict[st
                 continue
             projects.append(proj)
     return projects
+
+
+def list_workcontexts(r: redis.Redis) -> List[Dict[str, Any]]:
+    keys = r.keys(f"{WORKCONTEXT_KEY_PREFIX}*")
+    contexts = []
+    for key in keys:
+        raw = r.get(key)
+        if raw:
+            try:
+                ctx = json.loads(raw)
+                ctx["path"] = key[len(WORKCONTEXT_KEY_PREFIX):]
+                contexts.append(ctx)
+            except json.JSONDecodeError:
+                pass
+    contexts.sort(key=lambda c: c.get("saved_at", ""), reverse=True)
+    return contexts
diff --git a/app/routers/knowledge.py b/app/routers/knowledge.py
index 0e13dee..90a6ad9 100644
--- a/app/routers/knowledge.py
+++ b/app/routers/knowledge.py
@@ -1,4 +1,4 @@
-"""Knowledge router — ADRs, memories, and file browser for mounted data directory."""
+"""Knowledge router — ADRs, memories, knowledge catalog, HOWTOs, agents, skills via MCP proxy."""
 
 from __future__ import annotations
 
@@ -11,10 +11,10 @@ from fastapi import APIRouter, HTTPException
 from fastapi.responses import PlainTextResponse
 
 from app.redis_client import get_redis, list_adrs, get_adr, list_memories
+import app.mcp_client as mcp
 
 router = APIRouter(prefix="/api/v1", tags=["knowledge"])
 
-# Data dir is mounted from DevOpsMCP at /data (read-only bind mount in production)
 DATA_DIR = Path(os.environ.get("DATA_DIR", "/data"))
 KNOWLEDGE_CATALOG = DATA_DIR / "knowledge" / "catalog.json"
 
@@ -46,89 +46,113 @@ def api_list_memories(entity_type: Optional[str] = None, limit: int = 50):
     return {"memories": memories, "total": len(memories)}
 
 
-# ── Knowledge catalog (file-based, from bind-mounted data dir) ────────────────
+# ── Knowledge catalog — MCP proxy (file-based in DevOpsMCP) ──────────────────
 
 @router.get("/knowledge")
-def api_list_knowledge(category: Optional[str] = None, tag: Optional[str] = None):
-    if not KNOWLEDGE_CATALOG.exists():
-        return {"entries": [], "total": 0, "data_dir_available": False}
+async def api_list_knowledge(category: Optional[str] = None, tag: Optional[str] = None):
     try:
-        catalog: dict = json.loads(KNOWLEDGE_CATALOG.read_text(encoding="utf-8"))
+        return await mcp.list_knowledge(category=category, tag=tag)
     except Exception as exc:
-        raise HTTPException(status_code=500, detail=f"Catalog read error: {exc}") from exc
-
-    entries = list(catalog.values())
-    if category:
-        entries = [e for e in entries if e.get("category", "").lower() == category.lower()]
-    if tag:
-        entries = [e for e in entries if tag.lower() in [t.lower() for t in e.get("tags", [])]]
-
-    summaries = [
-        {
-            "storage_filename": e["storage_filename"],
-            "original_filename": e["original_filename"],
-            "title": e.get("title", e["original_filename"]),
-            "file_type": e.get("file_type", "markdown"),
-            "category": e.get("category", "general"),
-            "tags": e.get("tags", []),
-            "summary": e.get("summary", "")[:200],
-            "char_count": e.get("char_count", 0),
-            "learned_at": e.get("learned_at", ""),
-        }
-        for e in entries
-    ]
-    summaries.sort(key=lambda e: e.get("learned_at", ""), reverse=True)
-    return {"entries": summaries, "total": len(summaries), "data_dir_available": True}
+        # Fallback: try local bind-mount
+        if not KNOWLEDGE_CATALOG.exists():
+            return {"entries": [], "total": 0, "error": str(exc)}
+        try:
+            catalog = json.loads(KNOWLEDGE_CATALOG.read_text(encoding="utf-8"))
+            entries = list(catalog.values())
+            if category:
+                entries = [e for e in entries if e.get("category", "").lower() == category.lower()]
+            if tag:
+                entries = [e for e in entries if tag.lower() in [t.lower() for t in e.get("tags", [])]]
+            entries.sort(key=lambda e: e.get("learned_at", ""), reverse=True)
+            return {"entries": entries, "total": len(entries)}
+        except Exception as e2:
+            raise HTTPException(status_code=500, detail=str(e2)) from e2
 
 
 @router.get("/knowledge/{filename}")
-def api_get_knowledge_file(filename: str):
-    """Return raw markdown content of a knowledge file."""
-    safe_name = Path(filename).name  # prevent path traversal
-    file_path = DATA_DIR / "knowledge" / safe_name
-    if not file_path.exists() or not file_path.is_file():
-        raise HTTPException(status_code=404, detail="File not found")
-    content = file_path.read_text(encoding="utf-8")
-    return PlainTextResponse(content, media_type="text/markdown")
+async def api_get_knowledge_file(filename: str):
+    try:
+        result = await mcp.get_knowledge(filename)
+        content = result.get("content", result.get("raw", ""))
+        return PlainTextResponse(str(content), media_type="text/markdown")
+    except Exception as exc:
+        # Fallback: local bind-mount
+        safe_name = Path(filename).name
+        file_path = DATA_DIR / "knowledge" / safe_name
+        if not file_path.exists():
+            raise HTTPException(status_code=404, detail="File not found") from exc
+        return PlainTextResponse(file_path.read_text(encoding="utf-8"), media_type="text/markdown")
 
 
-# ── Generic file browser for data directory ───────────────────────────────────
+# ── HOWTOs — MCP proxy ────────────────────────────────────────────────────────
+
+@router.get("/howtos")
+async def api_list_howtos():
+    try:
+        return await mcp.list_howtos()
+    except Exception as exc:
+        raise HTTPException(status_code=502, detail=f"MCP proxy error: {exc}") from exc
+
+
+@router.get("/howtos/{filename}")
+async def api_get_howto(filename: str):
+    try:
+        result = await mcp.get_howto(filename)
+        content = result.get("content", result.get("raw", ""))
+        return PlainTextResponse(str(content), media_type="text/markdown")
+    except Exception as exc:
+        raise HTTPException(status_code=502, detail=f"MCP proxy error: {exc}") from exc
+
+
+# ── Agents — MCP proxy ────────────────────────────────────────────────────────
+
+@router.get("/agents")
+async def api_list_agents(domain: Optional[str] = None):
+    try:
+        return await mcp.list_agents(domain=domain)
+    except Exception as exc:
+        raise HTTPException(status_code=502, detail=f"MCP proxy error: {exc}") from exc
+
+
+@router.get("/agents/{name}")
+async def api_get_agent(name: str):
+    try:
+        return await mcp.get_agent(name)
+    except Exception as exc:
+        raise HTTPException(status_code=502, detail=f"MCP proxy error: {exc}") from exc
+
+
+# ── Skills — MCP proxy ────────────────────────────────────────────────────────
+
+@router.get("/skills")
+async def api_list_skills(domain: Optional[str] = None):
+    try:
+        return await mcp.list_skills(domain=domain)
+    except Exception as exc:
+        raise HTTPException(status_code=502, detail=f"MCP proxy error: {exc}") from exc
+
+
+@router.get("/skills/{name}")
+async def api_get_skill(name: str):
+    try:
+        return await mcp.get_skill(name)
+    except Exception as exc:
+        raise HTTPException(status_code=502, detail=f"MCP proxy error: {exc}") from exc
+
+
+# ── Generic file browser (bind-mount fallback) ────────────────────────────────
 
 @router.get("/files")
 def api_list_files(subdir: str = ""):
-    """List files in the bound data directory."""
-    target = DATA_DIR / subdir if subdir else DATA_DIR
-    target = target.resolve()
-    # Safety: must stay within DATA_DIR
+    target = (DATA_DIR / subdir if subdir else DATA_DIR).resolve()
     if not str(target).startswith(str(DATA_DIR.resolve())):
         raise HTTPException(status_code=400, detail="Path traversal not allowed")
     if not target.exists():
-        return {"files": [], "dirs": [], "path": subdir}
-    files = []
-    dirs = []
+        return {"files": [], "dirs": [], "path": subdir, "available": False}
+    files, dirs = [], []
     for item in sorted(target.iterdir()):
         if item.is_file() and item.suffix in {".md", ".yml", ".yaml", ".txt", ".rst", ".json"}:
-            files.append({
-                "name": item.name,
-                "size": item.stat().st_size,
-                "path": str(item.relative_to(DATA_DIR)),
-            })
+            files.append({"name": item.name, "size": item.stat().st_size, "path": str(item.relative_to(DATA_DIR))})
         elif item.is_dir():
             dirs.append(item.name)
-    return {"files": files, "dirs": dirs, "path": subdir}
-
-
-@router.get("/files/{file_path:path}")
-def api_get_file(file_path: str):
-    """Return raw content of a file from the data directory."""
-    target = (DATA_DIR / file_path).resolve()
-    if not str(target).startswith(str(DATA_DIR.resolve())):
-        raise HTTPException(status_code=400, detail="Path traversal not allowed")
-    if not target.exists() or not target.is_file():
-        raise HTTPException(status_code=404, detail="File not found")
-    allowed = {".md", ".yml", ".yaml", ".txt", ".rst"}
-    if target.suffix not in allowed:
-        raise HTTPException(status_code=400, detail="File type not allowed")
-    content = target.read_text(encoding="utf-8")
-    media_type = "text/markdown" if target.suffix == ".md" else "text/plain"
-    return PlainTextResponse(content, media_type=media_type)
+    return {"files": files, "dirs": dirs, "path": subdir, "available": True}
diff --git a/app/routers/projects.py b/app/routers/projects.py
new file mode 100644
index 0000000..9d6a311
--- /dev/null
+++ b/app/routers/projects.py
@@ -0,0 +1,61 @@
+"""Projects router — registered git repos + work contexts from Redis."""
+
+from __future__ import annotations
+
+from typing import Optional
+
+from fastapi import APIRouter
+
+from app.redis_client import get_redis, list_projects, list_workcontexts, PROJECT_KEY_PREFIX, WORKCONTEXT_KEY_PREFIX
+
+router = APIRouter(prefix="/api/v1", tags=["projects"])
+
+
+@router.get("/projects")
+def api_list_projects(context: Optional[str] = None, q: Optional[str] = None):
+    r = get_redis()
+    projects = list_projects(r, context=context)
+
+    # Merge in work contexts (keyed by path)
+    wc_keys = r.keys(f"{WORKCONTEXT_KEY_PREFIX}*")
+    import json
+    work_contexts: dict = {}
+    for key in wc_keys:
+        raw = r.get(key)
+        if raw:
+            try:
+                path = key[len(WORKCONTEXT_KEY_PREFIX):]
+                work_contexts[path] = json.loads(raw)
+            except Exception:
+                pass
+
+    # Attach work context and apply search filter
+    result = []
+    for p in projects:
+        path = p.get("path", "")
+        p["work_context"] = work_contexts.get(path)
+        if q and q.lower() not in (p.get("name", "") + p.get("path", "") + " ".join(p.get("tags", []))).lower():
+            continue
+        result.append(p)
+
+    # Sort: projects with recent work context first
+    result.sort(
+        key=lambda p: (
+            p["work_context"]["saved_at"] if p.get("work_context") else "",
+        ),
+        reverse=True,
+    )
+
+    # Context breakdown
+    contexts = {}
+    for p in result:
+        c = p.get("context", "unknown")
+        contexts[c] = contexts.get(c, 0) + 1
+
+    return {"projects": result, "total": len(result), "contexts": contexts}
+
+
+@router.get("/workcontexts")
+def api_list_workcontexts():
+    r = get_redis()
+    return {"contexts": list_workcontexts(r)}
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 0a4f349..098e159 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -4,756 +4,669 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>DevOpsDash</title>
-
-  <!-- Tailwind v3 CDN with dark-mode support -->
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
     tailwind.config = {
       darkMode: 'class',
-      theme: {
-        extend: {
-          colors: {
-            brand: { DEFAULT: '#6366f1', hover: '#4f46e5' },
-          }
-        }
-      }
+      theme: { extend: { colors: { brand: { DEFAULT: '#6366f1', hover: '#4f46e5' } } } }
     }
   </script>
-
-  <!-- Alpine.js -->
   <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <style>
     [x-cloak] { display: none !important; }
-    .kanban-col { min-height: 200px; }
-    .task-card { transition: box-shadow .15s ease; }
     .task-card:hover { box-shadow: 0 0 0 2px #6366f1; }
-    /* scrollbars */
-    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    .kanban-col { min-height: 180px; }
+    ::-webkit-scrollbar { width: 5px; height: 5px; }
     ::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
+    .prose-dark { color: #d1d5db; }
+    .prose-dark h1,.prose-dark h2,.prose-dark h3 { color: #f9fafb; margin-top:.75rem; margin-bottom:.25rem; font-weight:600; }
+    .prose-dark h1 { font-size:1.25rem; }
+    .prose-dark h2 { font-size:1.1rem; }
+    .prose-dark code { background:#1f2937; border-radius:3px; padding:1px 4px; font-size:.85em; color:#a5b4fc; }
+    .prose-dark pre { background:#111827; border-radius:6px; padding:.75rem; overflow-x:auto; margin:.5rem 0; }
+    .prose-dark pre code { background:none; padding:0; color:#d1fae5; }
+    .prose-dark a { color:#818cf8; }
+    .prose-dark ul { list-style:disc; padding-left:1.25rem; }
+    .prose-dark ol { list-style:decimal; padding-left:1.25rem; }
+    .prose-dark li { margin:.15rem 0; }
+    .prose-dark blockquote { border-left:3px solid #4b5563; padding-left:.75rem; color:#9ca3af; }
+    .prose-dark table { width:100%; border-collapse:collapse; font-size:.85em; }
+    .prose-dark th { background:#1f2937; padding:.4rem .6rem; text-align:left; }
+    .prose-dark td { padding:.35rem .6rem; border-top:1px solid #374151; }
+    .prose-dark hr { border-color:#374151; margin:.75rem 0; }
   </style>
 </head>
 <body class="bg-gray-950 text-gray-100 min-h-screen flex flex-col" x-cloak>
 
-<!-- ═══════════════════════════════════════════════════════ TOPBAR ══ -->
-<header class="flex items-center justify-between px-6 py-3 border-b border-gray-800 bg-gray-900 sticky top-0 z-50">
+<!-- ════════════════ TOPBAR ════════════════ -->
+<header class="flex items-center justify-between px-5 py-2.5 border-b border-gray-800 bg-gray-900 sticky top-0 z-50">
   <div class="flex items-center gap-3">
-    <span class="text-indigo-400 text-xl font-bold tracking-tight">DevOpsDash</span>
-    <span class="text-gray-500 text-xs">i80.dk</span>
+    <span class="text-indigo-400 text-lg font-bold tracking-tight">⚡ DevOpsDash</span>
+    <span class="text-gray-600 text-xs">i80.dk</span>
   </div>
   <nav class="flex gap-1" x-data>
-    <template x-for="tab in ['taskz','worklog','knowledge']" :key="tab">
-      <button
-        @click="$dispatch('switch-tab', tab)"
-        class="px-4 py-1.5 rounded text-sm font-medium transition-colors"
-        :class="$store.ui.tab === tab
-          ? 'bg-indigo-600 text-white'
-          : 'text-gray-400 hover:text-white hover:bg-gray-800'"
-        x-text="tab.charAt(0).toUpperCase() + tab.slice(1)"
-      ></button>
+    <template x-for="t in [{id:'taskz',icon:'🗂️'},{id:'worklog',icon:'📜'},{id:'projects',icon:'📁'},{id:'knowledge',icon:'📚'}]" :key="t.id">
+      <button @click="$dispatch('switch-tab', t.id)"
+        class="px-3 py-1.5 rounded text-sm font-medium transition-colors flex items-center gap-1.5"
+        :class="$store.ui.tab===t.id?'bg-indigo-600 text-white':'text-gray-400 hover:text-white hover:bg-gray-800'">
+        <span x-text="t.icon"></span>
+        <span x-text="t.id.charAt(0).toUpperCase()+t.id.slice(1)"></span>
+      </button>
     </template>
   </nav>
-  <div class="flex items-center gap-3">
-    <span class="text-xs text-gray-500" x-data x-text="$store.ui.tab === 'taskz' ? $store.boards.activeProject || 'All projects' : ''"></span>
-    <div class="w-2 h-2 rounded-full" :class="$store.health.redis ? 'bg-green-400' : 'bg-red-400'" title="Redis status" x-data></div>
+  <div class="flex items-center gap-2">
+    <span class="text-xs text-gray-500" x-data x-text="$store.status.msg"></span>
+    <div class="w-2 h-2 rounded-full" :class="$store.health.ok?'bg-green-400 animate-pulse':'bg-red-500'" title="Redis" x-data></div>
   </div>
 </header>
 
-<!-- ══════════════════════════════════════════════════════ MAIN ══ -->
-<div class="flex flex-1 overflow-hidden" x-data x-on:switch-tab.window="$store.ui.tab = $event.detail">
+<div class="flex flex-1 overflow-hidden" x-data x-on:switch-tab.window="$store.ui.tab=$event.detail">
 
-  <!-- ══════════════════════════════════════ TASKZ TAB ══ -->
-  <div class="flex flex-1 overflow-hidden" x-show="$store.ui.tab === 'taskz'">
+<!-- ═══════════════════════════════════════════════ TASKZ ═══ -->
+<div class="flex flex-1 overflow-hidden" x-show="$store.ui.tab==='taskz'">
 
-    <!-- Sidebar: board list -->
-    <aside class="w-64 bg-gray-900 border-r border-gray-800 flex flex-col shrink-0 overflow-y-auto">
-      <div class="p-4 border-b border-gray-800">
-        <div class="flex items-center justify-between mb-2">
-          <span class="text-sm font-semibold text-gray-200">Boards</span>
-          <button @click="$store.boards.showNewBoard = true" class="text-indigo-400 hover:text-indigo-300 text-xs">+ New</button>
-        </div>
-        <select x-model="$store.boards.activeProject" @change="$store.boards.filterByProject()" class="w-full bg-gray-800 border border-gray-700 text-sm rounded px-2 py-1 text-gray-300">
-          <option value="">All projects</option>
-          <template x-for="proj in $store.boards.projects" :key="proj">
-            <option :value="proj" x-text="proj"></option>
-          </template>
-        </select>
+  <!-- Sidebar -->
+  <aside class="w-60 bg-gray-900 border-r border-gray-800 flex flex-col shrink-0 overflow-y-auto" x-data="taskzSidebar()">
+    <div class="p-3 border-b border-gray-800">
+      <div class="flex items-center justify-between mb-2">
+        <span class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Boards</span>
+        <button @click="$store.boards.openNewBoard()" class="text-indigo-400 hover:text-indigo-300 text-xs">+ New</button>
       </div>
-
-      <div class="flex-1 overflow-y-auto py-2">
-        <template x-for="board in $store.boards.filtered" :key="board.board_id">
-          <button
-            @click="$store.boards.select(board.board_id)"
-            class="w-full text-left px-4 py-2.5 hover:bg-gray-800 transition-colors border-l-2"
-            :class="$store.boards.selectedId === board.board_id ? 'border-indigo-500 bg-gray-800' : 'border-transparent'"
-          >
-            <div class="text-xs font-mono text-indigo-400 mb-0.5" x-text="board.board_code"></div>
-            <div class="text-sm text-gray-200 leading-tight" x-text="board.title"></div>
-            <div class="flex items-center gap-2 mt-1">
-              <span class="text-xs text-gray-500" x-text="board.project"></span>
-              <span class="ml-auto text-xs text-gray-500" x-text="`${board.done_count}/${board.task_count}`"></span>
-            </div>
-            <!-- progress bar -->
-            <div class="mt-1.5 h-1 bg-gray-700 rounded overflow-hidden">
-              <div class="h-full bg-indigo-500 rounded"
-                :style="board.task_count ? `width:${Math.round(board.done_count/board.task_count*100)}%` : 'width:0%'"></div>
-            </div>
-          </button>
+      <input x-model="boardSearch" @input="filter()" placeholder="Search boards…"
+        class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 placeholder-gray-600 outline-none focus:border-indigo-500"/>
+      <div class="mt-2 flex gap-1 flex-wrap">
+        <template x-for="s in ['active','completed','archived']" :key="s">
+          <button @click="statusFilter=s===statusFilter?'':s; filter()"
+            class="px-2 py-0.5 rounded text-xs transition-colors"
+            :class="statusFilter===s?'bg-indigo-600 text-white':'bg-gray-800 text-gray-400 hover:text-white'"
+            x-text="s"></button>
         </template>
-        <div x-show="$store.boards.filtered.length === 0" class="px-4 py-6 text-xs text-gray-500 text-center">No boards found</div>
       </div>
-    </aside>
+    </div>
+    <div class="flex-1 overflow-y-auto p-2 space-y-1">
+      <template x-for="b in filteredBoards" :key="b.board_id">
+        <button @click="$store.boards.select(b.board_id)"
+          class="w-full text-left px-3 py-2 rounded-lg transition-colors text-sm"
+          :class="$store.boards.activeId===b.board_id?'bg-indigo-600/20 border border-indigo-500/40 text-white':'hover:bg-gray-800 text-gray-300'">
+          <div class="font-medium truncate" x-text="b.title"></div>
+          <div class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5">
+            <span x-text="b.project||'—'"></span>
+            <span class="rounded-full px-1.5 text-xs"
+              :class="{
+                'bg-green-900/50 text-green-400': b.status==='active',
+                'bg-gray-800 text-gray-500': b.status==='completed'||b.status==='archived'
+              }"
+              x-text="Math.round(((b.tasks||[]).filter(t=>t.status==='done').length/Math.max(1,(b.tasks||[]).length))*100)+'%'"></span>
+          </div>
+        </button>
+      </template>
+    </div>
+  </aside>
 
-    <!-- Kanban area -->
-    <main class="flex-1 overflow-auto p-6" x-data>
-      <!-- Board header -->
-      <div class="mb-6" x-show="$store.boards.current">
-        <div class="flex items-center gap-3 mb-1">
-          <span class="font-mono text-indigo-400 text-sm" x-text="$store.boards.current?.board_code"></span>
-          <h1 class="text-xl font-bold text-white" x-text="$store.boards.current?.title"></h1>
-          <span class="text-xs px-2 py-0.5 rounded-full bg-gray-800 text-gray-400" x-text="$store.boards.current?.status"></span>
+  <!-- Kanban -->
+  <main class="flex-1 overflow-y-auto p-4" x-data="kanban()">
+    <template x-if="!$store.boards.activeId">
+      <div class="flex items-center justify-center h-full text-gray-600 text-sm">Select a board →</div>
+    </template>
+    <template x-if="$store.boards.activeId && board">
+      <div>
+        <div class="flex items-center gap-3 mb-4">
+          <h2 class="text-lg font-bold" x-text="board.title"></h2>
+          <span class="text-xs text-gray-500" x-text="board.project"></span>
+          <span class="ml-auto text-xs text-gray-500"
+            x-text="(board.tasks||[]).filter(t=>t.status==='done').length+' / '+(board.tasks||[]).length+' done'"></span>
         </div>
-        <p class="text-sm text-gray-400" x-text="$store.boards.current?.description"></p>
-        <!-- Add task button -->
-        <div class="mt-3">
-          <button @click="$store.tasks.showNew = true" class="text-xs px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded font-medium transition-colors">
-            + Add task
-          </button>
-        </div>
-      </div>
-
-      <div x-show="!$store.boards.current" class="flex items-center justify-center h-64 text-gray-500 text-sm">
-        Select a board to view tasks
-      </div>
-
-      <!-- Kanban columns -->
-      <div class="grid grid-cols-4 gap-4" x-show="$store.boards.current">
-        <template x-for="col in ['pending','in_progress','blocked','done']" :key="col">
-          <div class="kanban-col flex flex-col gap-3">
-            <!-- Column header -->
-            <div class="flex items-center gap-2 pb-2 border-b border-gray-800">
-              <span class="w-2 h-2 rounded-full"
-                :class="{
-                  'pending':'bg-gray-500',
-                  'in_progress':'bg-blue-400',
-                  'blocked':'bg-red-400',
-                  'done':'bg-green-400'
-                }[col]"></span>
-              <span class="text-xs font-semibold uppercase tracking-wide text-gray-400"
-                x-text="col.replace('_',' ')"></span>
-              <span class="ml-auto text-xs text-gray-600"
-                x-text="($store.tasks.byStatus[col] || []).length"></span>
-            </div>
-
-            <!-- Task cards -->
-            <template x-for="task in ($store.tasks.byStatus[col] || [])" :key="task.task_id">
-              <div class="task-card bg-gray-900 border border-gray-800 rounded-lg p-3 cursor-pointer"
-                @click="$store.tasks.select(task)">
-                <div class="flex items-start justify-between gap-2 mb-1.5">
-                  <span class="text-xs font-mono text-indigo-400" x-text="task.task_id"></span>
-                  <span class="text-xs px-1.5 py-0.5 rounded font-medium"
-                    :class="{
-                      'critical':'bg-red-900 text-red-300',
-                      'high':'bg-orange-900 text-orange-300',
-                      'medium':'bg-yellow-900 text-yellow-300',
-                      'low':'bg-gray-800 text-gray-400'
-                    }[task.priority]"
-                    x-text="task.priority"></span>
-                </div>
-                <p class="text-sm text-gray-200 leading-snug" x-text="task.title"></p>
-                <div class="mt-2 flex flex-wrap gap-1">
-                  <template x-for="tag in task.tags" :key="tag">
-                    <span class="text-xs px-1.5 py-0.5 bg-gray-800 text-gray-400 rounded" x-text="tag"></span>
-                  </template>
-                </div>
-                <div x-show="task.scope" class="mt-1 text-xs text-gray-500 italic" x-text="task.scope"></div>
+        <div class="grid grid-cols-4 gap-3">
+          <template x-for="col in columns" :key="col.id">
+            <div class="bg-gray-900 rounded-xl p-3 kanban-col">
+              <div class="flex items-center justify-between mb-2">
+                <span class="text-xs font-semibold uppercase tracking-wide" :class="col.color" x-text="col.label"></span>
+                <span class="text-xs text-gray-600" x-text="tasksFor(col.id).length"></span>
               </div>
+              <div class="space-y-2">
+                <template x-for="task in tasksFor(col.id)" :key="task.task_id">
+                  <div class="task-card bg-gray-800 rounded-lg p-2.5 text-xs cursor-pointer transition-shadow"
+                    @click="openTask(task)">
+                    <div class="font-medium text-gray-100 mb-1 leading-snug" x-text="task.title"></div>
+                    <div class="text-gray-500 truncate text-xs" x-text="task.task_id"></div>
+                    <template x-if="(task.tags||[]).length">
+                      <div class="flex flex-wrap gap-1 mt-1.5">
+                        <template x-for="tag in (task.tags||[]).slice(0,3)" :key="tag">
+                          <span class="bg-indigo-900/40 text-indigo-300 rounded px-1.5 py-0.5 text-xs" x-text="tag"></span>
+                        </template>
+                      </div>
+                    </template>
+                  </div>
+                </template>
+                <button @click="$store.boards.openNewTask(col.id)"
+                  class="w-full text-gray-700 hover:text-gray-400 text-xs py-1 rounded hover:bg-gray-800 transition-colors">
+                  + Add task
+                </button>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </template>
+
+    <!-- Task modal -->
+    <template x-if="$store.boards.taskModal">
+      <div class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4" @click.self="$store.boards.taskModal=null">
+        <div class="bg-gray-900 border border-gray-700 rounded-xl w-full max-w-lg p-5 space-y-3">
+          <div class="flex items-start justify-between">
+            <h3 class="font-semibold text-sm" x-text="$store.boards.taskModal.title"></h3>
+            <button @click="$store.boards.taskModal=null" class="text-gray-500 hover:text-white text-lg leading-none">×</button>
+          </div>
+          <div class="text-xs text-gray-500" x-text="$store.boards.taskModal.task_id"></div>
+          <div class="text-sm text-gray-300 leading-relaxed whitespace-pre-wrap"
+            x-text="$store.boards.taskModal.description||'—'"></div>
+          <template x-if="$store.boards.taskModal.findings?.length">
+            <div class="bg-gray-800 rounded p-2 text-xs text-gray-400">
+              <div class="text-gray-500 mb-1 font-semibold">Findings</div>
+              <template x-for="f in $store.boards.taskModal.findings" :key="f">
+                <div class="border-l-2 border-indigo-500 pl-2 mb-1" x-text="f"></div>
+              </template>
+            </div>
+          </template>
+          <div class="flex gap-2 pt-1">
+            <template x-for="s in ['pending','in_progress','done','blocked']" :key="s">
+              <button @click="$store.boards.updateTaskStatus($store.boards.taskModal, s)"
+                class="px-2.5 py-1 rounded text-xs transition-colors"
+                :class="$store.boards.taskModal.status===s?'bg-indigo-600 text-white':'bg-gray-800 text-gray-400 hover:text-white'"
+                x-text="s.replace('_',' ')"></button>
             </template>
           </div>
+        </div>
+      </div>
+    </template>
+  </main>
+</div>
+
+<!-- ═══════════════════════════════════════════════ WORKLOG ═══ -->
+<div class="flex-1 overflow-y-auto p-5" x-show="$store.ui.tab==='worklog'" x-data="worklogTab()">
+  <div class="max-w-3xl mx-auto space-y-4">
+    <div class="flex items-center gap-3 flex-wrap">
+      <div class="flex rounded-lg overflow-hidden border border-gray-700">
+        <template x-for="ctx in ['egmont','personal','all']" :key="ctx">
+          <button @click="context=ctx; load()"
+            class="px-3 py-1.5 text-sm transition-colors"
+            :class="context===ctx?'bg-indigo-600 text-white':'bg-gray-900 text-gray-400 hover:text-white'"
+            x-text="ctx"></button>
         </template>
       </div>
-    </main>
+      <div class="flex items-center gap-2 text-sm text-gray-400">
+        <span>Days:</span>
+        <input type="range" x-model.number="days" min="1" max="30" @change="load()" class="w-24 accent-indigo-500"/>
+        <span x-text="days" class="w-6 text-center text-gray-300"></span>
+      </div>
+      <button @click="loadStandup()" class="ml-auto px-3 py-1.5 text-sm bg-indigo-600/20 border border-indigo-500/40 text-indigo-300 rounded-lg hover:bg-indigo-600/30 transition-colors">
+        📋 Standup
+      </button>
+    </div>
+
+    <template x-if="loading"><div class="text-gray-500 text-sm">Loading…</div></template>
+
+    <template x-if="standup">
+      <div class="bg-gray-900 border border-indigo-500/30 rounded-xl p-4">
+        <div class="flex items-center justify-between mb-2">
+          <span class="text-sm font-semibold text-indigo-400">Standup Summary</span>
+          <button @click="standup=null" class="text-gray-600 hover:text-white text-xs">✕</button>
+        </div>
+        <div class="prose-dark text-xs" x-html="renderMd(standup.summary||standup.text||JSON.stringify(standup,null,2))"></div>
+      </div>
+    </template>
+
+    <template x-if="!loading && data">
+      <div x-html="renderWorklog(data)" class="prose-dark text-sm"></div>
+    </template>
+
+    <template x-if="!loading && !data && !standup">
+      <div class="text-gray-600 text-sm">No worklog data — check DevOpsMCP connectivity.</div>
+    </template>
+  </div>
+</div>
+
+<!-- ═══════════════════════════════════════════════ PROJECTS ═══ -->
+<div class="flex-1 overflow-hidden flex" x-show="$store.ui.tab==='projects'" x-data="projectsTab()">
+  <!-- Sidebar filters -->
+  <aside class="w-52 bg-gray-900 border-r border-gray-800 flex flex-col shrink-0 p-3 gap-2">
+    <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Context</span>
+    <template x-for="c in ['all','egmont','personal','private']" :key="c">
+      <button @click="context=c; filter()"
+        class="text-left px-3 py-1.5 rounded text-sm transition-colors"
+        :class="context===c?'bg-indigo-600 text-white':'text-gray-400 hover:text-white hover:bg-gray-800'">
+        <span x-text="{all:'🌐 All',egmont:'🏢 Egmont',personal:'🏠 Personal',private:'🔒 Private'}[c]"></span>
+        <span class="ml-1 text-xs text-gray-500"
+          x-text="c==='all'?projects.length:(projects.filter(p=>p.context===c).length||'')"></span>
+      </button>
+    </template>
+    <hr class="border-gray-800 my-1"/>
+    <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Filter</span>
+    <label class="flex items-center gap-2 text-xs text-gray-400 cursor-pointer">
+      <input type="checkbox" x-model="withContextOnly" @change="filter()" class="accent-indigo-500"/>
+      With work context
+    </label>
+  </aside>
+
+  <!-- Project list -->
+  <div class="flex flex-1 overflow-hidden">
+    <div class="w-80 overflow-y-auto border-r border-gray-800 p-3 space-y-2 shrink-0">
+      <input x-model="q" @input="filter()" placeholder="Search projects, tags…"
+        class="w-full bg-gray-800 border border-gray-700 rounded px-2.5 py-1.5 text-sm text-gray-300 placeholder-gray-600 outline-none focus:border-indigo-500 mb-1"/>
+      <div class="text-xs text-gray-600 mb-1" x-text="filtered.length+' projects'"></div>
+      <template x-for="p in filtered" :key="p.path">
+        <button @click="selected=p"
+          class="w-full text-left p-2.5 rounded-lg transition-colors border"
+          :class="selected?.path===p.path?'bg-indigo-600/15 border-indigo-500/40':'hover:bg-gray-900 border-transparent'">
+          <div class="flex items-center gap-2 mb-0.5">
+            <span class="font-medium text-sm text-gray-100 truncate" x-text="p.name"></span>
+            <span class="text-xs rounded-full px-1.5 shrink-0"
+              :class="{
+                'bg-blue-900/50 text-blue-400':p.context==='egmont',
+                'bg-green-900/50 text-green-400':p.context==='personal',
+                'bg-gray-800 text-gray-500':p.context==='private'
+              }"
+              x-text="p.context"></span>
+          </div>
+          <template x-if="p.work_context">
+            <div class="text-xs text-gray-500 truncate" x-text="'↳ '+p.work_context.what"></div>
+          </template>
+          <template x-if="(p.tags||[]).length">
+            <div class="flex flex-wrap gap-1 mt-1">
+              <template x-for="tag in (p.tags||[]).slice(0,4)" :key="tag">
+                <span class="bg-gray-800 text-gray-500 rounded px-1.5 text-xs" x-text="tag"></span>
+              </template>
+            </div>
+          </template>
+        </button>
+      </template>
+    </div>
+
+    <!-- Project detail -->
+    <div class="flex-1 overflow-y-auto p-5">
+      <template x-if="!selected">
+        <div class="text-gray-600 text-sm flex items-center justify-center h-full">Select a project</div>
+      </template>
+      <template x-if="selected">
+        <div class="max-w-xl space-y-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <h2 class="text-xl font-bold" x-text="selected.name"></h2>
+              <div class="text-xs text-gray-500 mt-0.5" x-text="selected.path"></div>
+            </div>
+            <span class="text-sm rounded-full px-2.5 py-1"
+              :class="{
+                'bg-blue-900/50 text-blue-400':selected.context==='egmont',
+                'bg-green-900/50 text-green-400':selected.context==='personal',
+                'bg-gray-800 text-gray-400':selected.context==='private'
+              }"
+              x-text="selected.context"></span>
+          </div>
+          <template x-if="selected.remote">
+            <a :href="selected.remote.replace('git@','https://').replace('.com:','.com/').replace('.dk:','.dk/').replace('.git','')"
+              target="_blank" class="text-indigo-400 text-xs hover:underline truncate block"
+              x-text="selected.remote"></a>
+          </template>
+
+          <template x-if="selected.work_context">
+            <div class="bg-gray-900 border border-indigo-500/20 rounded-xl p-4">
+              <div class="flex items-center gap-2 mb-2">
+                <span class="text-indigo-400 text-sm font-semibold">🧠 Last worked on</span>
+                <span class="text-xs text-gray-600"
+                  x-text="new Date(selected.work_context.saved_at).toLocaleDateString('da-DK',{day:'numeric',month:'short'})"></span>
+              </div>
+              <div class="text-sm text-gray-300 leading-relaxed" x-text="selected.work_context.what"></div>
+              <template x-if="selected.work_context.next_steps">
+                <div class="mt-3 pt-3 border-t border-gray-800">
+                  <div class="text-xs text-gray-500 mb-1">Next steps</div>
+                  <div class="text-sm text-gray-400" x-text="selected.work_context.next_steps"></div>
+                </div>
+              </template>
+            </div>
+          </template>
+
+          <template x-if="(selected.tags||[]).length">
+            <div>
+              <div class="text-xs text-gray-500 mb-1">Tags</div>
+              <div class="flex flex-wrap gap-1.5">
+                <template x-for="tag in selected.tags" :key="tag">
+                  <span class="bg-indigo-900/30 text-indigo-400 rounded-full px-2.5 py-0.5 text-xs" x-text="tag"></span>
+                </template>
+              </div>
+            </div>
+          </template>
+          <div class="text-xs text-gray-700"
+            x-text="'Registered '+new Date(selected.registered_at||'').toLocaleDateString('da-DK')"></div>
+        </div>
+      </template>
+    </div>
+  </div>
+</div>
+
+<!-- ═══════════════════════════════════════════════ KNOWLEDGE ═══ -->
+<div class="flex-1 overflow-hidden flex flex-col" x-show="$store.ui.tab==='knowledge'" x-data="knowledgeTab()">
+  <!-- Sub-tabs -->
+  <div class="bg-gray-900 border-b border-gray-800 px-5 flex items-center gap-1 pt-2">
+    <template x-for="t in ['docs','howtos','agents','skills','adrs','memories']" :key="t">
+      <button @click="subTab=t; loadList()"
+        class="px-3 py-1.5 text-sm rounded-t font-medium transition-colors border-b-2"
+        :class="subTab===t?'border-indigo-500 text-white bg-gray-800':'border-transparent text-gray-500 hover:text-gray-300'">
+        <span x-text="{docs:'📄 Docs',howtos:'📖 HOWTOs',agents:'🤖 Agents',skills:'⚡ Skills',adrs:'📋 ADRs',memories:'💾 Memories'}[t]"></span>
+      </button>
+    </template>
+    <input x-model="q" @input="filterList()" placeholder="Search…"
+      class="ml-auto bg-gray-800 border border-gray-700 rounded px-2.5 py-1 text-xs text-gray-300 placeholder-gray-600 outline-none focus:border-indigo-500 w-48 mb-2"/>
   </div>
 
-  <!-- ══════════════════════════════════════ WORKLOG TAB ══ -->
-  <div class="flex-1 overflow-auto p-6" x-show="$store.ui.tab === 'worklog'" x-data="{
-    context: 'egmont',
-    days: 7,
-    loading: false,
-    data: null,
-    standup: null,
-    standupDays: 2,
-    standupLoading: false,
-    standupText: '',
+  <div class="flex flex-1 overflow-hidden">
+    <!-- List -->
+    <div class="w-72 border-r border-gray-800 overflow-y-auto p-2 space-y-1 shrink-0">
+      <div class="text-xs text-gray-600 px-2 py-1" x-text="filteredItems.length+' items'"></div>
+      <template x-for="item in filteredItems" :key="item.id||item.storage_filename||item.title">
+        <button @click="select(item)"
+          class="w-full text-left px-3 py-2 rounded-lg transition-colors text-sm"
+          :class="selectedItem?.id===item.id||selectedItem?.storage_filename===item.storage_filename?'bg-indigo-600/20 border border-indigo-500/40 text-white':'hover:bg-gray-900 text-gray-300 border border-transparent'">
+          <div class="font-medium truncate text-sm" x-text="item.title||item.name||item.storage_filename"></div>
+          <template x-if="item.category||item.entity_type">
+            <div class="text-xs text-gray-600 mt-0.5" x-text="item.category||item.entity_type"></div>
+          </template>
+          <template x-if="(item.tags||[]).length">
+            <div class="flex flex-wrap gap-1 mt-1">
+              <template x-for="tag in (item.tags||[]).slice(0,3)" :key="tag">
+                <span class="bg-gray-800 text-gray-500 rounded px-1.5 text-xs" x-text="tag"></span>
+              </template>
+            </div>
+          </template>
+        </button>
+      </template>
+      <template x-if="loading">
+        <div class="text-gray-600 text-xs text-center py-4">Loading…</div>
+      </template>
+      <template x-if="!loading && filteredItems.length===0">
+        <div class="text-gray-700 text-xs text-center py-4">No items</div>
+      </template>
+    </div>
+
+    <!-- Content viewer -->
+    <div class="flex-1 overflow-y-auto p-5">
+      <template x-if="!selectedItem && !detailLoading">
+        <div class="flex items-center justify-center h-full text-gray-700 text-sm">Select an item to view</div>
+      </template>
+      <template x-if="detailLoading">
+        <div class="text-gray-600 text-sm">Loading content…</div>
+      </template>
+      <template x-if="selectedItem && !detailLoading">
+        <div>
+          <!-- ADR detail -->
+          <template x-if="subTab==='adrs'">
+            <div class="max-w-xl space-y-4">
+              <div class="flex items-start justify-between">
+                <h2 class="text-lg font-bold" x-text="'ADR-'+selectedItem.number+': '+selectedItem.title"></h2>
+                <span class="text-xs px-2 py-0.5 rounded-full"
+                  :class="{'bg-green-900/50 text-green-400':selectedItem.status==='Accepted','bg-yellow-900/50 text-yellow-400':selectedItem.status==='Proposed','bg-gray-800 text-gray-500':true}"
+                  x-text="selectedItem.status"></span>
+              </div>
+              <div class="bg-gray-900 rounded-xl p-4 space-y-3 text-sm">
+                <div><div class="text-xs text-gray-500 mb-1 uppercase tracking-wide">Context</div><div class="text-gray-300" x-text="selectedItem.context"></div></div>
+                <div><div class="text-xs text-gray-500 mb-1 uppercase tracking-wide">Decision</div><div class="text-gray-300" x-text="selectedItem.decision"></div></div>
+                <div><div class="text-xs text-gray-500 mb-1 uppercase tracking-wide">Consequences</div><div class="text-gray-300" x-text="selectedItem.consequences"></div></div>
+              </div>
+              <template x-if="(selectedItem.tags||[]).length">
+                <div class="flex flex-wrap gap-1.5">
+                  <template x-for="tag in selectedItem.tags" :key="tag">
+                    <span class="bg-indigo-900/30 text-indigo-400 rounded-full px-2.5 py-0.5 text-xs" x-text="tag"></span>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </template>
+
+          <!-- Memory detail -->
+          <template x-if="subTab==='memories'">
+            <div class="max-w-xl space-y-3">
+              <h2 class="text-lg font-bold" x-text="selectedItem.name||'Memory'"></h2>
+              <div class="bg-gray-900 rounded-xl p-4 text-sm text-gray-300 leading-relaxed" x-text="selectedItem.content"></div>
+              <div class="text-xs text-gray-600">
+                <span x-text="selectedItem.entity_type"></span>
+                <span class="mx-1">·</span>
+                <span x-text="new Date(selectedItem.created_at||'').toLocaleDateString('da-DK')"></span>
+              </div>
+            </div>
+          </template>
+
+          <!-- Markdown content (docs, howtos, agents, skills) -->
+          <template x-if="['docs','howtos','agents','skills'].includes(subTab) && detail">
+            <div>
+              <h2 class="text-base font-bold mb-3 text-gray-100"
+                x-text="selectedItem.title||selectedItem.name||selectedItem.storage_filename"></h2>
+              <div class="prose-dark text-sm leading-relaxed"
+                x-html="renderMd(extractContent(detail))"></div>
+            </div>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+</div>
+
+</div><!-- /main flex -->
+
+<script>
+// ── Alpine stores ──────────────────────────────────────────────────────────────
+document.addEventListener('alpine:init', () => {
+
+  Alpine.store('ui', { tab: 'taskz' });
+  Alpine.store('health', { ok: false });
+  Alpine.store('status', { msg: '' });
+
+  Alpine.store('boards', {
+    list: [], activeId: null, taskModal: null, showNewBoard: false,
+    projects: [],
+    activeProject: '',
+    async init() {
+      const r = await fetch('/api/v1/boards').then(r=>r.json());
+      this.list = r.boards||[];
+      this.projects = [...new Set(this.list.map(b=>b.project).filter(Boolean))].sort();
+    },
+    async select(id) {
+      this.activeId = id;
+    },
+    openNewBoard() { /* TODO */ },
+    openNewTask(status) { /* TODO */ },
+    async updateTaskStatus(task, status) {
+      await fetch(`/api/v1/tasks/${task.task_id}`,{
+        method:'PATCH',headers:{'Content-Type':'application/json'},
+        body:JSON.stringify({status})
+      });
+      task.status = status;
+      // refresh board
+      const idx = this.list.findIndex(b=>b.board_id===task.board_id);
+      if(idx>=0){
+        const r=await fetch(`/api/v1/boards/${task.board_id}`).then(r=>r.json());
+        this.list[idx]=r.board;
+      }
+    }
+  });
+
+  // Health check
+  fetch('/health').then(r=>r.json()).then(d=>{
+    Alpine.store('health').ok = d.redis==='ok';
+  }).catch(()=>{});
+
+  // Init boards
+  Alpine.store('boards').init();
+});
+
+// ── Taskz sidebar ──────────────────────────────────────────────────────────────
+function taskzSidebar() {
+  return {
+    boardSearch: '',
+    statusFilter: '',
+    filteredBoards: [],
+    init() {
+      this.$watch('$store.boards.list', () => this.filter());
+      this.filter();
+    },
+    filter() {
+      let bs = this.$store.boards.list;
+      if(this.boardSearch) bs = bs.filter(b=>(b.title+b.project).toLowerCase().includes(this.boardSearch.toLowerCase()));
+      if(this.statusFilter) bs = bs.filter(b=>b.status===this.statusFilter);
+      this.filteredBoards = bs;
+    }
+  }
+}
+
+// ── Kanban ────────────────────────────────────────────────────────────────────
+function kanban() {
+  return {
+    columns: [
+      {id:'pending', label:'Pending', color:'text-gray-400'},
+      {id:'in_progress', label:'In Progress', color:'text-yellow-400'},
+      {id:'done', label:'Done', color:'text-green-400'},
+      {id:'blocked', label:'Blocked', color:'text-red-400'},
+    ],
+    get board() {
+      return this.$store.boards.list.find(b=>b.board_id===this.$store.boards.activeId);
+    },
+    tasksFor(status) {
+      return (this.board?.tasks||[]).filter(t=>t.status===status)
+        .sort((a,b)=>a.number-b.number);
+    },
+    openTask(task) { this.$store.boards.taskModal = task; }
+  }
+}
+
+// ── Worklog ───────────────────────────────────────────────────────────────────
+function worklogTab() {
+  return {
+    context: 'egmont', days: 7, data: null, standup: null, loading: false,
+    async init() { await this.load(); },
     async load() {
-      this.loading = true;
+      this.loading = true; this.standup = null;
       try {
-        const r = await fetch(`/api/v1/worklog?context=${this.context}&days=${this.days}`);
-        this.data = await r.json();
-      } catch(e) { console.error(e); }
+        const r = await fetch(`/api/v1/worklog?context=${this.context}&days=${this.days}`).then(r=>r.json());
+        this.data = r;
+      } catch(e) { this.data = null; }
       this.loading = false;
     },
     async loadStandup() {
-      this.standupLoading = true;
+      this.loading = true; this.data = null;
       try {
-        const r = await fetch(`/api/v1/standup?days=${this.standupDays}&context=${this.context}`);
-        const d = await r.json();
-        this.standupText = d.standup_text || d.raw || JSON.stringify(d, null, 2);
-      } catch(e) { this.standupText = 'Error loading standup'; }
-      this.standupLoading = false;
+        const r = await fetch(`/api/v1/standup?days=${this.days}&context=${this.context}`).then(r=>r.json());
+        this.standup = r;
+      } catch(e) { this.standup = null; }
+      this.loading = false;
+    },
+    renderMd(text) { return marked.parse(String(text||'')); },
+    renderWorklog(data) {
+      if(!data) return '';
+      // worklog returns {commits, summary, ...}
+      let html = '';
+      if(data.summary) html += `<div class="mb-4">${marked.parse(data.summary)}</div>`;
+      const byRepo = data.by_repo || data.commits_by_repo || {};
+      for(const [repo, commits] of Object.entries(byRepo)) {
+        html += `<div class="mb-4"><div class="text-indigo-400 font-semibold text-sm mb-1">📦 ${repo}</div><ul class="space-y-0.5">`;
+        for(const c of (commits||[])) {
+          html += `<li class="text-xs text-gray-400"><span class="text-gray-600 mr-2">${(c.sha||'').slice(0,7)}</span>${c.message||c}</li>`;
+        }
+        html += '</ul></div>';
+      }
+      if(!html) html = `<pre class="text-xs text-gray-500 overflow-x-auto">${JSON.stringify(data,null,2)}</pre>`;
+      return html;
     }
-  }" x-init="load()">
+  }
+}
 
-    <div class="max-w-4xl mx-auto">
-      <div class="flex items-center gap-4 mb-6">
-        <h2 class="text-lg font-bold text-white">Worklog</h2>
-        <select x-model="context" @change="load()" class="bg-gray-800 border border-gray-700 text-sm rounded px-2 py-1 text-gray-300">
-          <option value="egmont">Egmont</option>
-          <option value="personal">Personal</option>
-          <option value="all">All</option>
-        </select>
-        <div class="flex items-center gap-2">
-          <input type="range" x-model.number="days" min="1" max="30" @change="load()" class="w-28 accent-indigo-500">
-          <span class="text-sm text-gray-400" x-text="`${days}d`"></span>
-        </div>
-        <button @click="load()" class="text-xs px-3 py-1.5 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded border border-gray-700 transition-colors">↺ Refresh</button>
-      </div>
-
-      <!-- Loading -->
-      <div x-show="loading" class="text-center py-16 text-gray-500">Loading worklog…</div>
-
-      <!-- Commit timeline -->
-      <div x-show="!loading && data">
-        <template x-if="data && data.repos">
-          <div class="space-y-6">
-            <template x-for="(commits, repo) in data.repos" :key="repo">
-              <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
-                <div class="flex items-center gap-2 mb-3">
-                  <span class="font-mono text-indigo-400 text-sm" x-text="repo"></span>
-                  <span class="text-xs text-gray-500" x-text="`${commits.length} commit${commits.length !== 1 ? 's' : ''}`"></span>
-                </div>
-                <div class="space-y-1.5">
-                  <template x-for="commit in commits" :key="commit.sha">
-                    <div class="flex items-start gap-3 text-sm">
-                      <span class="font-mono text-xs text-gray-600 mt-0.5 shrink-0" x-text="commit.sha?.slice(0,7)"></span>
-                      <div class="flex-1 min-w-0">
-                        <span class="text-gray-200" x-text="commit.message?.split('\n')[0]"></span>
-                        <template x-if="commit.message?.includes('AZ-') || commit.message?.includes('az-')">
-                          <span class="ml-2 text-xs text-yellow-400 font-mono" x-text="commit.message?.match(/AZ-\d+/i)?.[0]"></span>
-                        </template>
-                      </div>
-                      <span class="text-xs text-gray-600 shrink-0" x-text="commit.datetime?.slice(0,10)"></span>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </template>
-          </div>
-        </template>
-        <template x-if="data && !data.repos">
-          <pre class="text-xs text-gray-400 bg-gray-900 p-4 rounded-xl overflow-auto" x-text="JSON.stringify(data, null, 2)"></pre>
-        </template>
-      </div>
-
-      <!-- Standup section -->
-      <div class="mt-8 border-t border-gray-800 pt-6">
-        <div class="flex items-center gap-4 mb-4">
-          <h3 class="text-sm font-semibold text-gray-200">Standup summary</h3>
-          <div class="flex items-center gap-2">
-            <input type="range" x-model.number="standupDays" min="1" max="7" class="w-20 accent-indigo-500">
-            <span class="text-xs text-gray-400" x-text="`${standupDays}d`"></span>
-          </div>
-          <button @click="loadStandup()" class="text-xs px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded transition-colors" :disabled="standupLoading">
-            <span x-show="!standupLoading">Generate</span>
-            <span x-show="standupLoading">…</span>
-          </button>
-        </div>
-        <pre x-show="standupText" class="text-xs text-gray-300 bg-gray-900 border border-gray-800 p-4 rounded-xl overflow-auto whitespace-pre-wrap" x-text="standupText"></pre>
-      </div>
-    </div>
-  </div>
-
-  <!-- ══════════════════════════════════════ KNOWLEDGE TAB ══ -->
-  <div class="flex-1 overflow-auto p-6" x-show="$store.ui.tab === 'knowledge'" x-data="{
-    activeKnowledgeTab: 'adrs',
-    adrs: [],
-    memories: [],
-    knowledge: [],
-    query: '',
-    adrStatusFilter: '',
-    adrLoading: false,
-    memLoading: false,
-    knLoading: false,
-    selectedAdr: null,
-    selectedKn: null,
-    selectedKnContent: '',
-    async loadAdrs() {
-      this.adrLoading = true;
-      const url = this.adrStatusFilter ? `/api/v1/adrs?status=${this.adrStatusFilter}` : '/api/v1/adrs';
-      const r = await fetch(url);
-      const d = await r.json();
-      this.adrs = d.adrs || [];
-      this.adrLoading = false;
+// ── Projects ──────────────────────────────────────────────────────────────────
+function projectsTab() {
+  return {
+    projects: [], filtered: [], context: 'all', q: '', selected: null, withContextOnly: false,
+    async init() {
+      const r = await fetch('/api/v1/projects').then(r=>r.json());
+      this.projects = r.projects||[];
+      this.filter();
     },
-    async loadMemories() {
-      this.memLoading = true;
-      const r = await fetch('/api/v1/memories?limit=100');
-      const d = await r.json();
-      this.memories = d.memories || [];
-      this.memLoading = false;
-    },
-    async loadKnowledge() {
-      this.knLoading = true;
-      const r = await fetch('/api/v1/knowledge');
-      const d = await r.json();
-      this.knowledge = d.entries || [];
-      this.knLoading = false;
-    },
-    async openKnFile(filename) {
-      this.selectedKnContent = 'Loading…';
-      const r = await fetch(`/api/v1/knowledge/${filename}`);
-      this.selectedKnContent = await r.text();
-      this.selectedKn = filename;
-    },
-    filteredAdrs() {
-      if (!this.query) return this.adrs;
-      const q = this.query.toLowerCase();
-      return this.adrs.filter(a => a.title?.toLowerCase().includes(q) || a.decision?.toLowerCase().includes(q));
-    },
-    filteredMemories() {
-      if (!this.query) return this.memories;
-      const q = this.query.toLowerCase();
-      return this.memories.filter(m => m.content?.toLowerCase().includes(q) || m.name?.toLowerCase().includes(q));
-    },
-    filteredKnowledge() {
-      if (!this.query) return this.knowledge;
-      const q = this.query.toLowerCase();
-      return this.knowledge.filter(k => k.title?.toLowerCase().includes(q) || k.tags?.some(t => t.toLowerCase().includes(q)));
-    },
-    init() { this.loadAdrs(); this.loadMemories(); this.loadKnowledge(); }
-  }" x-init="init()">
+    filter() {
+      let ps = this.projects;
+      if(this.context!=='all') ps = ps.filter(p=>p.context===this.context);
+      if(this.withContextOnly) ps = ps.filter(p=>p.work_context);
+      if(this.q) {
+        const ql = this.q.toLowerCase();
+        ps = ps.filter(p=>(p.name+p.path+(p.tags||[]).join(' ')).toLowerCase().includes(ql));
+      }
+      this.filtered = ps;
+    }
+  }
+}
 
-    <div class="max-w-5xl mx-auto">
-      <!-- Sub-tabs -->
-      <div class="flex items-center gap-1 mb-6">
-        <template x-for="kt in ['adrs','memories','knowledge']" :key="kt">
-          <button @click="activeKnowledgeTab = kt"
-            class="px-4 py-1.5 rounded text-sm font-medium transition-colors"
-            :class="activeKnowledgeTab === kt ? 'bg-indigo-600 text-white' : 'text-gray-400 hover:bg-gray-800'">
-            <span x-text="kt.charAt(0).toUpperCase() + kt.slice(1)"></span>
-          </button>
-        </template>
-        <!-- search -->
-        <div class="ml-auto relative">
-          <input type="text" x-model="query" placeholder="Search…"
-            class="bg-gray-800 border border-gray-700 rounded px-3 py-1.5 text-sm text-gray-200 placeholder-gray-600 w-56 focus:outline-none focus:border-indigo-500" />
-        </div>
-      </div>
-
-      <!-- ──── ADRs ──── -->
-      <div x-show="activeKnowledgeTab === 'adrs'">
-        <div class="flex items-center gap-2 mb-4">
-          <select x-model="adrStatusFilter" @change="loadAdrs()" class="bg-gray-800 border border-gray-700 text-xs rounded px-2 py-1 text-gray-300">
-            <option value="">All statuses</option>
-            <option>Accepted</option><option>Proposed</option><option>Deprecated</option><option>Superseded</option>
-          </select>
-        </div>
-        <div x-show="adrLoading" class="text-center py-12 text-gray-500">Loading ADRs…</div>
-        <div class="grid gap-3" x-show="!adrLoading">
-          <template x-for="adr in filteredAdrs()" :key="adr.adr_id">
-            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 cursor-pointer hover:border-indigo-700 transition-colors"
-              @click="selectedAdr = (selectedAdr?.adr_id === adr.adr_id ? null : adr)">
-              <div class="flex items-start gap-3">
-                <span class="text-xs px-2 py-0.5 rounded-full font-medium mt-0.5"
-                  :class="{
-                    'Accepted':'bg-green-900 text-green-300',
-                    'Proposed':'bg-yellow-900 text-yellow-300',
-                    'Deprecated':'bg-gray-800 text-gray-500',
-                    'Superseded':'bg-red-900 text-red-400'
-                  }[adr.status] || 'bg-gray-800 text-gray-400'"
-                  x-text="adr.status"></span>
-                <div class="flex-1 min-w-0">
-                  <div class="text-sm font-semibold text-gray-100" x-text="adr.title"></div>
-                  <div class="text-xs text-gray-500 mt-0.5" x-text="adr.created_at?.slice(0,10)"></div>
-                </div>
-                <div class="flex flex-wrap gap-1 justify-end">
-                  <template x-for="tag in (adr.tags || [])" :key="tag">
-                    <span class="text-xs px-1.5 py-0.5 bg-gray-800 text-gray-400 rounded" x-text="tag"></span>
-                  </template>
-                </div>
-              </div>
-              <!-- Expanded detail -->
-              <div x-show="selectedAdr?.adr_id === adr.adr_id" class="mt-4 space-y-3 border-t border-gray-800 pt-4">
-                <div>
-                  <div class="text-xs font-semibold text-gray-400 mb-1 uppercase tracking-wide">Context</div>
-                  <p class="text-sm text-gray-300 leading-relaxed" x-text="adr.context"></p>
-                </div>
-                <div>
-                  <div class="text-xs font-semibold text-gray-400 mb-1 uppercase tracking-wide">Decision</div>
-                  <p class="text-sm text-gray-300 leading-relaxed" x-text="adr.decision"></p>
-                </div>
-                <div>
-                  <div class="text-xs font-semibold text-gray-400 mb-1 uppercase tracking-wide">Consequences</div>
-                  <p class="text-sm text-gray-300 leading-relaxed" x-text="adr.consequences"></p>
-                </div>
-              </div>
-            </div>
-          </template>
-          <div x-show="filteredAdrs().length === 0" class="text-center py-12 text-gray-500 text-sm">No ADRs found</div>
-        </div>
-      </div>
-
-      <!-- ──── Memories ──── -->
-      <div x-show="activeKnowledgeTab === 'memories'">
-        <div x-show="memLoading" class="text-center py-12 text-gray-500">Loading memories…</div>
-        <div class="grid gap-3" x-show="!memLoading">
-          <template x-for="mem in filteredMemories()" :key="mem.memory_id">
-            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
-              <div class="flex items-start gap-3">
-                <div class="flex-1 min-w-0">
-                  <div class="flex items-center gap-2 mb-1">
-                    <span class="text-xs px-2 py-0.5 bg-gray-800 text-gray-400 rounded font-mono" x-text="mem.entity_type || 'fact'"></span>
-                    <span class="text-sm font-medium text-gray-200" x-text="mem.name || '—'"></span>
-                  </div>
-                  <p class="text-sm text-gray-400 leading-snug" x-text="mem.content"></p>
-                  <div class="mt-2 flex flex-wrap gap-1">
-                    <template x-for="tag in (mem.tags || [])" :key="tag">
-                      <span class="text-xs px-1.5 py-0.5 bg-gray-800 text-gray-400 rounded" x-text="tag"></span>
-                    </template>
-                  </div>
-                </div>
-                <span class="text-xs text-gray-600 shrink-0" x-text="mem.created_at?.slice(0,10)"></span>
-              </div>
-            </div>
-          </template>
-          <div x-show="filteredMemories().length === 0" class="text-center py-12 text-gray-500 text-sm">No memories found</div>
-        </div>
-      </div>
-
-      <!-- ──── Knowledge docs ──── -->
-      <div x-show="activeKnowledgeTab === 'knowledge'" class="flex gap-4 h-[70vh]">
-        <!-- File list -->
-        <div class="w-80 shrink-0 overflow-y-auto space-y-2">
-          <div x-show="knLoading" class="text-center py-12 text-gray-500">Loading…</div>
-          <template x-for="kn in filteredKnowledge()" :key="kn.storage_filename">
-            <button @click="openKnFile(kn.storage_filename)"
-              class="w-full text-left bg-gray-900 border border-gray-800 hover:border-indigo-700 rounded-lg p-3 transition-colors"
-              :class="selectedKn === kn.storage_filename ? 'border-indigo-500' : ''">
-              <div class="text-xs font-semibold text-gray-200 leading-tight" x-text="kn.title || kn.original_filename"></div>
-              <div class="text-xs text-gray-500 mt-0.5" x-text="kn.category"></div>
-              <div class="flex flex-wrap gap-1 mt-1.5">
-                <template x-for="tag in (kn.tags || []).slice(0,4)" :key="tag">
-                  <span class="text-xs px-1.5 py-0.5 bg-gray-800 text-gray-500 rounded" x-text="tag"></span>
-                </template>
-              </div>
-            </button>
-          </template>
-          <div x-show="!knLoading && filteredKnowledge().length === 0" class="text-center py-12 text-gray-500 text-sm">
-            No knowledge docs found.<br/><span class="text-xs">(data dir may not be mounted)</span>
-          </div>
-        </div>
-        <!-- Content viewer -->
-        <div class="flex-1 overflow-y-auto bg-gray-900 border border-gray-800 rounded-xl p-5">
-          <div x-show="!selectedKn" class="flex items-center justify-center h-full text-gray-600 text-sm">
-            Select a document to read it
-          </div>
-          <pre x-show="selectedKn" class="text-xs text-gray-300 whitespace-pre-wrap leading-relaxed" x-text="selectedKnContent"></pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- ══════════════════════════════════════ MODALS ══ -->
-
-<!-- New Board Modal -->
-<div x-data x-show="$store.boards.showNewBoard" x-cloak
-  class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
-  <div class="bg-gray-900 border border-gray-700 rounded-2xl p-6 w-96 shadow-2xl"
-    @click.outside="$store.boards.showNewBoard = false">
-    <h2 class="text-base font-bold text-white mb-4">New Board</h2>
-    <form @submit.prevent="$store.boards.createBoard()">
-      <div class="space-y-3">
-        <div>
-          <label class="text-xs text-gray-400">Project</label>
-          <input type="text" x-model="$store.boards.newBoard.project" required
-            class="w-full mt-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-indigo-500" />
-        </div>
-        <div>
-          <label class="text-xs text-gray-400">Title</label>
-          <input type="text" x-model="$store.boards.newBoard.title" required
-            class="w-full mt-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-indigo-500" />
-        </div>
-        <div>
-          <label class="text-xs text-gray-400">Description</label>
-          <textarea x-model="$store.boards.newBoard.description" rows="2"
-            class="w-full mt-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-indigo-500"></textarea>
-        </div>
-      </div>
-      <div class="flex gap-3 mt-5">
-        <button type="button" @click="$store.boards.showNewBoard = false"
-          class="flex-1 px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 text-sm rounded-lg transition-colors">Cancel</button>
-        <button type="submit"
-          class="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded-lg transition-colors">Create</button>
-      </div>
-    </form>
-  </div>
-</div>
-
-<!-- New Task Modal -->
-<div x-data x-show="$store.tasks.showNew" x-cloak
-  class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
-  <div class="bg-gray-900 border border-gray-700 rounded-2xl p-6 w-96 shadow-2xl"
-    @click.outside="$store.tasks.showNew = false">
-    <h2 class="text-base font-bold text-white mb-4">Add Task</h2>
-    <form @submit.prevent="$store.tasks.createTask()">
-      <div class="space-y-3">
-        <div>
-          <label class="text-xs text-gray-400">Title</label>
-          <input type="text" x-model="$store.tasks.newTask.title" required
-            class="w-full mt-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-indigo-500" />
-        </div>
-        <div>
-          <label class="text-xs text-gray-400">Description</label>
-          <textarea x-model="$store.tasks.newTask.description" rows="2"
-            class="w-full mt-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-indigo-500"></textarea>
-        </div>
-        <div>
-          <label class="text-xs text-gray-400">Priority</label>
-          <select x-model="$store.tasks.newTask.priority"
-            class="w-full mt-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-indigo-500">
-            <option>low</option><option selected>medium</option><option>high</option><option>critical</option>
-          </select>
-        </div>
-        <div>
-          <label class="text-xs text-gray-400">Scope (optional)</label>
-          <input type="text" x-model="$store.tasks.newTask.scope"
-            class="w-full mt-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-indigo-500" />
-        </div>
-      </div>
-      <div class="flex gap-3 mt-5">
-        <button type="button" @click="$store.tasks.showNew = false"
-          class="flex-1 px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 text-sm rounded-lg transition-colors">Cancel</button>
-        <button type="submit"
-          class="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded-lg transition-colors">Add</button>
-      </div>
-    </form>
-  </div>
-</div>
-
-<!-- Task Detail Drawer -->
-<div x-data x-show="$store.tasks.selected" x-cloak
-  class="fixed right-0 top-0 bottom-0 w-96 bg-gray-900 border-l border-gray-800 shadow-2xl z-40 overflow-y-auto p-5">
-  <div class="flex items-center justify-between mb-4">
-    <span class="font-mono text-indigo-400 text-sm" x-text="$store.tasks.selected?.task_id"></span>
-    <button @click="$store.tasks.selected = null" class="text-gray-500 hover:text-gray-300 text-lg">✕</button>
-  </div>
-  <h2 class="text-base font-bold text-white mb-2" x-text="$store.tasks.selected?.title"></h2>
-  <p class="text-sm text-gray-400 mb-4" x-text="$store.tasks.selected?.description"></p>
-
-  <!-- Status changer -->
-  <div class="mb-4">
-    <div class="text-xs text-gray-500 mb-1">Status</div>
-    <div class="flex flex-wrap gap-1.5">
-      <template x-for="s in ['pending','in_progress','blocked','done','wont_do']" :key="s">
-        <button @click="$store.tasks.updateStatus(s)"
-          class="text-xs px-2.5 py-1 rounded font-medium transition-colors"
-          :class="$store.tasks.selected?.status === s
-            ? 'bg-indigo-600 text-white'
-            : 'bg-gray-800 text-gray-400 hover:bg-gray-700'"
-          x-text="s.replace('_',' ')"></button>
-      </template>
-    </div>
-  </div>
-
-  <!-- Priority -->
-  <div class="mb-4">
-    <div class="text-xs text-gray-500 mb-1">Priority</div>
-    <div class="flex gap-1.5">
-      <template x-for="p in ['low','medium','high','critical']" :key="p">
-        <button @click="$store.tasks.updatePriority(p)"
-          class="text-xs px-2.5 py-1 rounded font-medium transition-colors"
-          :class="$store.tasks.selected?.priority === p
-            ? 'bg-indigo-600 text-white'
-            : 'bg-gray-800 text-gray-400 hover:bg-gray-700'"
-          x-text="p"></button>
-      </template>
-    </div>
-  </div>
-
-  <!-- Findings -->
-  <div class="mb-4">
-    <div class="text-xs text-gray-500 mb-2">Findings</div>
-    <div class="space-y-1.5 mb-2">
-      <template x-for="f in ($store.tasks.selected?.findings || [])" :key="f.at">
-        <div class="text-xs text-gray-300 bg-gray-800 rounded p-2">
-          <span class="text-gray-500 mr-1" x-text="f.at?.slice(0,10)"></span>
-          <span x-text="f.text"></span>
-        </div>
-      </template>
-    </div>
-    <form @submit.prevent="$store.tasks.addFinding()" class="flex gap-2">
-      <input type="text" x-model="$store.tasks.findingInput" placeholder="Add finding…"
-        class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-indigo-500" />
-      <button type="submit" class="text-xs px-2.5 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded transition-colors">Add</button>
-    </form>
-  </div>
-
-  <div class="text-xs text-gray-600 space-y-0.5">
-    <div>Created: <span x-text="$store.tasks.selected?.created_at?.slice(0,10)"></span></div>
-    <div>Updated: <span x-text="$store.tasks.selected?.updated_at?.slice(0,10)"></span></div>
-  </div>
-</div>
-
-<!-- ══════════════════════════════════════ ALPINE STORES ══ -->
-<script>
-document.addEventListener('alpine:init', () => {
-
-  Alpine.store('health', {
-    redis: false,
-    async check() {
+// ── Knowledge ─────────────────────────────────────────────────────────────────
+function knowledgeTab() {
+  return {
+    subTab: 'docs', items: [], filteredItems: [], q: '',
+    selectedItem: null, detail: null, loading: false, detailLoading: false,
+    async init() { await this.loadList(); },
+    async loadList() {
+      this.loading = true; this.selectedItem = null; this.detail = null;
       try {
-        const r = await fetch('/health');
-        const d = await r.json();
-        this.redis = d.redis === 'ok';
-      } catch(e) {}
-    }
-  });
-
-  Alpine.store('ui', {
-    tab: 'taskz',
-  });
-
-  Alpine.store('boards', {
-    all: [],
-    filtered: [],
-    activeProject: '',
-    projects: [],
-    selectedId: null,
-    current: null,
-    showNewBoard: false,
-    newBoard: { project: '', title: '', description: '' },
-
-    async load() {
-      const r = await fetch('/api/v1/boards');
-      const d = await r.json();
-      this.all = d.boards || [];
-      this.filtered = this.all;
-      const projs = [...new Set(this.all.map(b => b.project))].sort();
-      this.projects = projs;
-      if (this.all.length > 0 && !this.selectedId) {
-        // auto-select first active board
-        const first = this.all.find(b => b.status === 'active') || this.all[0];
-        this.select(first.board_id);
+        let url = {
+          docs: '/api/v1/knowledge',
+          howtos: '/api/v1/howtos',
+          agents: '/api/v1/agents',
+          skills: '/api/v1/skills',
+          adrs: '/api/v1/adrs',
+          memories: '/api/v1/memories',
+        }[this.subTab];
+        const r = await fetch(url).then(r=>r.json());
+        this.items = r.entries||r.adrs||r.memories||r.agents||r.skills||r.howtos||
+                     (r.agents_list ? Object.entries(r.agents_list||{}).map(([n,c])=>({name:n,content:c})) : null)||
+                     this.flattenAgents(r)||[];
+      } catch(e) { this.items = []; }
+      this.loading = false;
+      this.filterList();
+    },
+    flattenAgents(r) {
+      // agents/skills return nested structure
+      if(r.agents) return Array.isArray(r.agents) ? r.agents : Object.entries(r.agents).map(([k,v])=>({name:k,...(typeof v==='string'?{content:v}:v)}));
+      if(r.skills) return Array.isArray(r.skills) ? r.skills : Object.entries(r.skills).map(([k,v])=>({name:k,...(typeof v==='string'?{content:v}:v)}));
+      if(r.files) return r.files;
+      return null;
+    },
+    filterList() {
+      if(!this.q) { this.filteredItems = this.items; return; }
+      const ql = this.q.toLowerCase();
+      this.filteredItems = this.items.filter(i=>
+        ((i.title||i.name||i.storage_filename||'')+' '+(i.category||i.entity_type||'')+(i.tags||[]).join(' ')).toLowerCase().includes(ql)
+      );
+    },
+    async select(item) {
+      this.selectedItem = item; this.detail = null;
+      if(['docs','howtos','agents','skills'].includes(this.subTab)) {
+        this.detailLoading = true;
+        try {
+          let url;
+          if(this.subTab==='docs') url = `/api/v1/knowledge/${item.storage_filename}`;
+          else if(this.subTab==='howtos') url = `/api/v1/howtos/${item.filename||item.name}`;
+          else if(this.subTab==='agents') url = `/api/v1/agents/${item.name}`;
+          else if(this.subTab==='skills') url = `/api/v1/skills/${item.name}`;
+          if(url) {
+            const text = await fetch(url).then(r=>r.text());
+            this.detail = text;
+          }
+        } catch(e) { this.detail = null; }
+        this.detailLoading = false;
       }
     },
-
-    filterByProject() {
-      this.filtered = this.activeProject
-        ? this.all.filter(b => b.project === this.activeProject)
-        : this.all;
-    },
-
-    async select(boardId) {
-      this.selectedId = boardId;
-      const r = await fetch(`/api/v1/boards/${boardId}`);
-      this.current = await r.json();
-      Alpine.store('tasks').loadFromBoard(this.current);
-    },
-
-    async createBoard() {
-      const r = await fetch('/api/v1/boards', {
-        method: 'POST',
-        headers: {'Content-Type':'application/json'},
-        body: JSON.stringify(this.newBoard)
-      });
-      const d = await r.json();
-      this.showNewBoard = false;
-      this.newBoard = { project: '', title: '', description: '' };
-      await this.load();
-      this.select(d.board_id);
+    renderMd(text) { return marked.parse(String(text||'')); },
+    extractContent(raw) {
+      // If it's JSON, pull out content field
+      try {
+        const j = JSON.parse(raw);
+        return j.content||j.raw||j.definition||JSON.stringify(j,null,2);
+      } catch { return raw; }
     }
-  });
-
-  Alpine.store('tasks', {
-    byStatus: { pending: [], in_progress: [], blocked: [], done: [] },
-    selected: null,
-    showNew: false,
-    newTask: { title: '', description: '', priority: 'medium', scope: '' },
-    findingInput: '',
-
-    loadFromBoard(board) {
-      const tasks = board.tasks || [];
-      this.byStatus = {
-        pending: tasks.filter(t => t.status === 'pending'),
-        in_progress: tasks.filter(t => t.status === 'in_progress'),
-        blocked: tasks.filter(t => t.status === 'blocked'),
-        done: tasks.filter(t => t.status === 'done'),
-      };
-    },
-
-    select(task) {
-      this.selected = task;
-    },
-
-    async createTask() {
-      const boardId = Alpine.store('boards').selectedId;
-      if (!boardId) return;
-      await fetch(`/api/v1/boards/${boardId}/tasks`, {
-        method: 'POST',
-        headers: {'Content-Type':'application/json'},
-        body: JSON.stringify(this.newTask)
-      });
-      this.showNew = false;
-      this.newTask = { title: '', description: '', priority: 'medium', scope: '' };
-      await Alpine.store('boards').select(boardId);
-    },
-
-    async updateStatus(status) {
-      if (!this.selected) return;
-      await fetch(`/api/v1/tasks/${this.selected.task_id}`, {
-        method: 'PATCH',
-        headers: {'Content-Type':'application/json'},
-        body: JSON.stringify({ status })
-      });
-      this.selected.status = status;
-      const boardId = Alpine.store('boards').selectedId;
-      await Alpine.store('boards').select(boardId);
-      // re-select the updated task from refreshed board
-      const board = Alpine.store('boards').current;
-      const updatedTask = (board?.tasks || []).find(t => t.task_id === this.selected?.task_id);
-      if (updatedTask) this.selected = updatedTask;
-    },
-
-    async updatePriority(priority) {
-      if (!this.selected) return;
-      await fetch(`/api/v1/tasks/${this.selected.task_id}`, {
-        method: 'PATCH',
-        headers: {'Content-Type':'application/json'},
-        body: JSON.stringify({ priority })
-      });
-      this.selected.priority = priority;
-    },
-
-    async addFinding() {
-      if (!this.selected || !this.findingInput.trim()) return;
-      await fetch(`/api/v1/tasks/${this.selected.task_id}`, {
-        method: 'PATCH',
-        headers: {'Content-Type':'application/json'},
-        body: JSON.stringify({ findings: this.findingInput.trim() })
-      });
-      const findings = this.selected.findings || [];
-      findings.push({ text: this.findingInput.trim(), at: new Date().toISOString() });
-      this.selected.findings = findings;
-      this.findingInput = '';
-    }
-  });
-
-  // Bootstrap
-  Alpine.store('health').check();
-  Alpine.store('boards').load();
-});
+  }
+}
 </script>
-
 </body>
 </html>