feat: add info engine MVP pipeline and dashboard page

Introduce a standalone scheduled info-engine worker with SQLite persistence and expose read-only dashboard APIs/UI so curated intelligence items can be collected and viewed with minimal architecture changes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

dashboard/frontend/src/App.svelte

@@ -11,6 +11,7 @@
   import Security from "./routes/Security.svelte";
   import LiteLLM from "./routes/LiteLLM.svelte";
   import CcConnect from "./routes/CcConnect.svelte";
+  import InfoEngine from "./routes/InfoEngine.svelte";
   import Login from "./routes/Login.svelte";
   import { onMount } from "svelte";
   import { getToken, checkAuth, setToken, setRefreshToken, currentUser, setCurrentUser, getPreferences, savePreferences } from "./lib/api.js";
@@ -159,6 +160,8 @@
           <LiteLLM />
         {:else if page === "cc-connect" && hasPageAccess("dashboard")}
           <CcConnect />
+        {:else if page === "info-engine" && hasPageAccess("dashboard")}
+          <InfoEngine />
         {:else}
           <Dashboard />
         {/if}

dashboard/frontend/src/components/Sidebar.svelte

@@ -4,7 +4,9 @@
   function canAccess(id) {
     if (!id) return true;
     if (allowedPages === "*") return true;
-    return Array.isArray(allowedPages) && allowedPages.includes(id);
+    if (!Array.isArray(allowedPages)) return false;
+    if (id === "info-engine") return allowedPages.includes("dashboard");
+    return allowedPages.includes(id);
   }
 
   function canSeeSidebarLink(item) {
@@ -16,6 +18,7 @@
 
   const defaultLinks = [
     { id: "dashboard", label: "Overview", icon: "grid" },
+    { id: "info-engine", label: "Info Engine", icon: "sparkles" },
     { id: "litellm", label: "LiteLLM", icon: "bolt" },
     { id: "docker", label: "Docker", icon: "box" },
     { id: "files", label: "Files", icon: "folder" },
@@ -228,6 +231,8 @@
   <span class="w-5 h-5 flex items-center justify-center">
     {#if icon === "grid"}
       <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
+    {:else if icon === "sparkles"}
+      <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3l1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8L12 3zm6 11l.9 2.1L21 17l-2.1.9L18 20l-.9-2.1L15 17l2.1-.9L18 14zM5 14l.9 2.1L8 17l-2.1.9L5 20l-.9-2.1L2 17l2.1-.9L5 14z" /></svg>
     {:else if icon === "box"}
       <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
     {:else if icon === "bolt"}

dashboard/frontend/src/lib/api.js

@@ -147,6 +147,21 @@ export function getCcConnectHealth() {
   return get("/cc-connect/health");
 }
 
+export function getInfoEngineItems(params = {}) {
+  const query = new URLSearchParams();
+  if (params.limit !== undefined) query.set("limit", String(params.limit));
+  if (params.offset !== undefined) query.set("offset", String(params.offset));
+  if (params.source) query.set("source", params.source);
+  if (params.tag) query.set("tag", params.tag);
+  if (params.since) query.set("since", params.since);
+  const suffix = query.toString() ? `?${query.toString()}` : "";
+  return get(`/info-engine/items${suffix}`);
+}
+
+export function getInfoEngineItem(id) {
+  return get(`/info-engine/items/${id}`);
+}
+
 export function put(path, data) {
   return request(path, { method: "PUT", json: data });
 }

dashboard/frontend/src/routes/InfoEngine.svelte

@@ -0,0 +1,139 @@
+<script>
+  import { onMount } from "svelte";
+  import { getInfoEngineItems, getInfoEngineItem } from "../lib/api.js";
+
+  let loading = $state(true);
+  let loadingDetail = $state(false);
+  let requestError = $state("");
+  let items = $state([]);
+  let total = $state(0);
+  let selectedId = $state(null);
+  let selectedItem = $state(null);
+
+  async function loadItems() {
+    loading = true;
+    requestError = "";
+    try {
+      const res = await getInfoEngineItems({ limit: 50, offset: 0 });
+      items = res.items || [];
+      total = res.total || 0;
+      if (items.length > 0) {
+        await selectItem(items[0].id);
+      } else {
+        selectedId = null;
+        selectedItem = null;
+      }
+    } catch (e) {
+      requestError = e?.body?.detail || e?.message || "Failed to load items";
+      items = [];
+      total = 0;
+      selectedId = null;
+      selectedItem = null;
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function selectItem(id) {
+    selectedId = id;
+    loadingDetail = true;
+    requestError = "";
+    try {
+      selectedItem = await getInfoEngineItem(id);
+    } catch (e) {
+      selectedItem = null;
+      requestError = e?.body?.detail || e?.message || "Failed to load item";
+    } finally {
+      loadingDetail = false;
+    }
+  }
+
+  function formatDate(value) {
+    if (!value) return "—";
+    try {
+      return new Date(value).toLocaleString();
+    } catch {
+      return value;
+    }
+  }
+
+  onMount(loadItems);
+</script>
+
+<div class="space-y-6">
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">Info Engine</h1>
+      <p class="text-sm text-surface-400 mt-1">Context-aware stream of curated signals</p>
+    </div>
+    <button onclick={loadItems} disabled={loading} class="px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors disabled:opacity-50 dark:bg-primary-900/30 dark:text-primary-300">
+      {loading ? "Loading..." : "Refresh"}
+    </button>
+  </div>
+
+  {#if requestError}
+    <div class="bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-700 rounded-xl p-4 shadow-sm">
+      <p class="text-sm font-medium text-rose-700 dark:text-rose-300">{requestError}</p>
+    </div>
+  {/if}
+
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+    <div class="lg:col-span-1 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm">
+      <div class="px-4 py-3 border-b border-surface-200 dark:border-surface-700 text-xs text-surface-400">
+        Latest items ({total})
+      </div>
+      {#if loading}
+        <div class="p-4 space-y-2">
+          {#each Array(6) as _}
+            <div class="h-12 rounded-lg bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
+          {/each}
+        </div>
+      {:else if items.length === 0}
+        <div class="p-4 text-sm text-surface-400">No items yet.</div>
+      {:else}
+        <div class="max-h-[560px] overflow-y-auto p-2">
+          {#each items as item}
+            <button onclick={() => selectItem(item.id)} class="w-full text-left px-3 py-2 rounded-lg mb-1 transition-colors {selectedId === item.id ? 'bg-primary-50 dark:bg-primary-900/30' : 'hover:bg-surface-100 dark:hover:bg-surface-700'}">
+              <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 line-clamp-2">{item.title}</p>
+              <p class="text-xs text-surface-400 mt-1">{item.source}</p>
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+
+    <div class="lg:col-span-2 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
+      {#if loadingDetail}
+        <div class="space-y-3">
+          <div class="h-7 w-3/4 rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
+          <div class="h-4 w-full rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
+          <div class="h-4 w-5/6 rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
+          <div class="h-24 w-full rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
+        </div>
+      {:else if selectedItem}
+        <h2 class="text-xl font-bold text-surface-900 dark:text-white">{selectedItem.title}</h2>
+        <div class="mt-2 text-xs text-surface-400 space-y-1">
+          <p>Source: {selectedItem.source}</p>
+          <p>Published: {formatDate(selectedItem.published_at)}</p>
+          <p>Collected: {formatDate(selectedItem.collected_at)}</p>
+        </div>
+
+        {#if selectedItem.tags?.length}
+          <div class="mt-3 flex flex-wrap gap-2">
+            {#each selectedItem.tags as tag}
+              <span class="px-2 py-0.5 text-xs rounded-full bg-surface-100 text-surface-600 dark:bg-surface-700 dark:text-surface-300">{tag}</span>
+            {/each}
+          </div>
+        {/if}
+
+        <p class="mt-4 text-sm text-surface-700 dark:text-surface-300 whitespace-pre-wrap">{selectedItem.summary || selectedItem.content_text || "No summary available."}</p>
+
+        <a href={selectedItem.url} target="_blank" rel="noopener" class="inline-flex mt-4 px-3 py-1.5 text-xs font-medium rounded-lg bg-primary-600 text-white hover:bg-primary-700">
+          Open source
+        </a>
+      {:else}
+        <p class="text-sm text-surface-400">Select an item to view details.</p>
+      {/if}
+    </div>
+  </div>
+</div>