kiro-memory 1.5.0 → 1.7.0

package/plugin/dist/viewer.js

@@ -1083,7 +1083,7 @@ var require_react_development = __commonJS({
           }
           return dispatcher.useContext(Context);
         }
-        function useState8(initialState) {
+        function useState10(initialState) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useState(initialState);
         }
@@ -1091,11 +1091,11 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useReducer(reducer, initialArg, init);
         }
-        function useRef4(initialValue) {
+        function useRef5(initialValue) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useRef(initialValue);
         }
-        function useEffect7(create, deps) {
+        function useEffect8(create, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useEffect(create, deps);
         }
@@ -1107,7 +1107,7 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useLayoutEffect(create, deps);
         }
-        function useCallback4(callback, deps) {
+        function useCallback5(callback, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useCallback(callback, deps);
         }
@@ -1874,19 +1874,19 @@ var require_react_development = __commonJS({
         exports.memo = memo;
         exports.startTransition = startTransition;
         exports.unstable_act = act;
-        exports.useCallback = useCallback4;
+        exports.useCallback = useCallback5;
         exports.useContext = useContext;
         exports.useDebugValue = useDebugValue;
         exports.useDeferredValue = useDeferredValue;
-        exports.useEffect = useEffect7;
+        exports.useEffect = useEffect8;
         exports.useId = useId;
         exports.useImperativeHandle = useImperativeHandle;
         exports.useInsertionEffect = useInsertionEffect;
         exports.useLayoutEffect = useLayoutEffect;
         exports.useMemo = useMemo2;
         exports.useReducer = useReducer;
-        exports.useRef = useRef4;
-        exports.useState = useState8;
+        exports.useRef = useRef5;
+        exports.useState = useState10;
         exports.useSyncExternalStore = useSyncExternalStore;
         exports.useTransition = useTransition;
         exports.version = ReactVersion;
@@ -2382,9 +2382,9 @@ var require_react_dom_development = __commonJS({
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React7 = require_react();
+        var React8 = require_react();
         var Scheduler = require_scheduler();
-        var ReactSharedInternals = React7.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+        var ReactSharedInternals = React8.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
         var suppressWarning = false;
         function setSuppressWarning(newSuppressWarning) {
           {
@@ -3991,7 +3991,7 @@ var require_react_dom_development = __commonJS({
           {
             if (props.value == null) {
               if (typeof props.children === "object" && props.children !== null) {
-                React7.Children.forEach(props.children, function(child) {
+                React8.Children.forEach(props.children, function(child) {
                   if (child == null) {
                     return;
                   }
@@ -23581,11 +23581,11 @@ var require_client = __commonJS({
 });
 
 // src/ui/viewer/index.tsx
-var import_react9 = __toESM(require_react(), 1);
+var import_react11 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 
 // src/ui/viewer/App.tsx
-var import_react8 = __toESM(require_react(), 1);
+var import_react10 = __toESM(require_react(), 1);
 
 // src/ui/viewer/components/Header.tsx
 var import_react2 = __toESM(require_react(), 1);
@@ -23601,7 +23601,11 @@ function getTypeBadgeClasses(type) {
     "command": { bg: "bg-amber-500/10 dark:bg-amber-500/10", text: "text-amber-600 dark:text-amber-400", dot: "bg-amber-500" },
     "research": { bg: "bg-blue-500/10 dark:bg-blue-500/10", text: "text-blue-600 dark:text-blue-400", dot: "bg-blue-500" },
     "delegation": { bg: "bg-violet-500/10 dark:bg-violet-500/10", text: "text-violet-600 dark:text-violet-400", dot: "bg-violet-500" },
-    "tool-use": { bg: "bg-zinc-500/10 dark:bg-zinc-500/10", text: "text-zinc-600 dark:text-zinc-400", dot: "bg-zinc-500" }
+    "tool-use": { bg: "bg-zinc-500/10 dark:bg-zinc-500/10", text: "text-zinc-600 dark:text-zinc-400", dot: "bg-zinc-500" },
+    "constraint": { bg: "bg-red-500/10 dark:bg-red-500/10", text: "text-red-600 dark:text-red-400", dot: "bg-red-500" },
+    "decision": { bg: "bg-orange-500/10 dark:bg-orange-500/10", text: "text-orange-600 dark:text-orange-400", dot: "bg-orange-500" },
+    "heuristic": { bg: "bg-indigo-500/10 dark:bg-indigo-500/10", text: "text-indigo-600 dark:text-indigo-400", dot: "bg-indigo-500" },
+    "rejected": { bg: "bg-slate-500/10 dark:bg-slate-500/10", text: "text-slate-600 dark:text-slate-400", dot: "bg-slate-500" }
   };
   return map[type] || { bg: "bg-zinc-500/10 dark:bg-zinc-500/10", text: "text-zinc-600 dark:text-zinc-400", dot: "bg-zinc-500" };
 }
@@ -23712,8 +23716,26 @@ function SearchBar() {
 }
 
 // src/ui/viewer/components/Header.tsx
-function Header({ isConnected, resolvedTheme, onThemeToggle }) {
-  return /* @__PURE__ */ import_react2.default.createElement("header", { className: "flex items-center gap-4 px-6 h-14 bg-surface-1 border-b border-border z-50" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center gap-3 flex-shrink-0" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "w-8 h-8 rounded-lg bg-accent-violet flex items-center justify-center" }, /* @__PURE__ */ import_react2.default.createElement("svg", { className: "w-[18px] h-[18px] text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("path", { d: "M12 2a4 4 0 0 1 4 4c0 1.95-1.4 3.58-3.25 3.93a1 1 0 0 0-.75.97V13" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M12 2a4 4 0 0 0-4 4c0 1.95 1.4 3.58 3.25 3.93a1 1 0 0 1 .75.97V13" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M9 18h6" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M10 22h4" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M12 13v5" }))), /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("h1", { className: "text-[15px] font-bold text-zinc-100 leading-none" }, "Kiro Memory"), /* @__PURE__ */ import_react2.default.createElement("span", { className: "text-[11px] text-zinc-500 mt-0.5 block" }, "Memory Dashboard"))), /* @__PURE__ */ import_react2.default.createElement("div", { className: "hidden md:block w-px h-6 bg-border" }), /* @__PURE__ */ import_react2.default.createElement(SearchBar, null), /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex-1" }), /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center gap-2 px-3 py-1.5 rounded-lg bg-surface-2 border border-border" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: `w-2 h-2 rounded-full ${isConnected ? "bg-accent-green animate-pulse-dot" : "bg-zinc-500"}` }), /* @__PURE__ */ import_react2.default.createElement("span", { className: `text-xs font-medium ${isConnected ? "text-accent-green" : "text-zinc-500"}` }, isConnected ? "Live" : "Offline")), /* @__PURE__ */ import_react2.default.createElement(
+function Header({ isConnected, resolvedTheme, onThemeToggle, currentView, onViewChange }) {
+  return /* @__PURE__ */ import_react2.default.createElement("header", { className: "flex items-center gap-4 px-6 h-14 bg-surface-1 border-b border-border z-50" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center gap-3 flex-shrink-0" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "w-8 h-8 rounded-lg bg-accent-violet flex items-center justify-center" }, /* @__PURE__ */ import_react2.default.createElement("svg", { className: "w-[18px] h-[18px] text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("path", { d: "M12 2a4 4 0 0 1 4 4c0 1.95-1.4 3.58-3.25 3.93a1 1 0 0 0-.75.97V13" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M12 2a4 4 0 0 0-4 4c0 1.95 1.4 3.58 3.25 3.93a1 1 0 0 1 .75.97V13" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M9 18h6" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M10 22h4" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M12 13v5" }))), /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("h1", { className: "text-[15px] font-bold text-zinc-100 leading-none" }, "Kiro Memory"), /* @__PURE__ */ import_react2.default.createElement("span", { className: "text-[11px] text-zinc-500 mt-0.5 block" }, "Memory Dashboard"))), /* @__PURE__ */ import_react2.default.createElement("div", { className: "hidden md:block w-px h-6 bg-border" }), /* @__PURE__ */ import_react2.default.createElement(SearchBar, null), /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex-1" }), /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center gap-2 px-3 py-1.5 rounded-lg bg-surface-2 border border-border" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: `w-2 h-2 rounded-full ${isConnected ? "bg-accent-green animate-pulse-dot" : "bg-zinc-500"}` }), /* @__PURE__ */ import_react2.default.createElement("span", { className: `text-xs font-medium ${isConnected ? "text-accent-green" : "text-zinc-500"}` }, isConnected ? "Live" : "Offline")), /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center rounded-lg bg-surface-2 border border-border p-0.5" }, /* @__PURE__ */ import_react2.default.createElement(
+    "button",
+    {
+      onClick: () => onViewChange("feed"),
+      className: `flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all ${currentView === "feed" ? "bg-surface-3 text-zinc-100 shadow-sm" : "text-zinc-500 hover:text-zinc-300"}`,
+      title: "Memory Feed"
+    },
+    /* @__PURE__ */ import_react2.default.createElement("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("line", { x1: "8", y1: "6", x2: "21", y2: "6" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "8", y1: "12", x2: "21", y2: "12" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "8", y1: "18", x2: "21", y2: "18" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })),
+    "Feed"
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "button",
+    {
+      onClick: () => onViewChange("analytics"),
+      className: `flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all ${currentView === "analytics" ? "bg-surface-3 text-zinc-100 shadow-sm" : "text-zinc-500 hover:text-zinc-300"}`,
+      title: "Analytics Dashboard"
+    },
+    /* @__PURE__ */ import_react2.default.createElement("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("line", { x1: "18", y1: "20", x2: "18", y2: "10" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "12", y1: "20", x2: "12", y2: "4" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "6", y1: "20", x2: "6", y2: "14" })),
+    "Analytics"
+  )), /* @__PURE__ */ import_react2.default.createElement(
     "button",
     {
       onClick: onThemeToggle,
@@ -23732,7 +23754,11 @@ var TYPE_CONFIG = {
   "command": { color: "bg-accent-amber", label: "Commands" },
   "research": { color: "bg-accent-blue", label: "Research" },
   "delegation": { color: "bg-accent-violet", label: "Delegations" },
-  "tool-use": { color: "bg-zinc-400", label: "Tool usage" }
+  "tool-use": { color: "bg-zinc-400", label: "Tool usage" },
+  "constraint": { color: "bg-red-500", label: "Constraints" },
+  "decision": { color: "bg-orange-500", label: "Decisions" },
+  "heuristic": { color: "bg-indigo-500", label: "Heuristics" },
+  "rejected": { color: "bg-slate-500", label: "Rejected" }
 };
 var PROJECT_COLORS = [
   { bg: "bg-accent-violet/15", text: "text-accent-violet", ring: "ring-accent-violet/30" },
@@ -23858,7 +23884,11 @@ var TYPE_STYLES = {
   "command": { border: "border-l-amber-500", bg: "bg-amber-500/10", text: "text-amber-400", dot: "bg-amber-500", label: "command" },
   "research": { border: "border-l-blue-500", bg: "bg-blue-500/10", text: "text-blue-400", dot: "bg-blue-500", label: "research" },
   "delegation": { border: "border-l-violet-500", bg: "bg-violet-500/10", text: "text-violet-400", dot: "bg-violet-500", label: "delegation" },
-  "tool-use": { border: "border-l-zinc-500", bg: "bg-zinc-500/10", text: "text-zinc-400", dot: "bg-zinc-500", label: "tool-use" }
+  "tool-use": { border: "border-l-zinc-500", bg: "bg-zinc-500/10", text: "text-zinc-400", dot: "bg-zinc-500", label: "tool-use" },
+  "constraint": { border: "border-l-red-500", bg: "bg-red-500/10", text: "text-red-400", dot: "bg-red-500", label: "constraint" },
+  "decision": { border: "border-l-orange-500", bg: "bg-orange-500/10", text: "text-orange-400", dot: "bg-orange-500", label: "decision" },
+  "heuristic": { border: "border-l-indigo-500", bg: "bg-indigo-500/10", text: "text-indigo-400", dot: "bg-indigo-500", label: "heuristic" },
+  "rejected": { border: "border-l-slate-500", bg: "bg-slate-500/10", text: "text-slate-400", dot: "bg-slate-500", label: "rejected" }
 };
 function getTypeStyle(type) {
   return TYPE_STYLES[type] || TYPE_STYLES["tool-use"];
@@ -23914,18 +23944,266 @@ function PromptCard({ prompt, getDisplayName }) {
   return /* @__PURE__ */ import_react4.default.createElement("div", { className: "bg-surface-1 border border-border rounded-lg border-l-[3px] border-l-rose-500 shadow-card hover:shadow-card-hover hover:border-border-hover transition-all" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "px-4 pt-4 pb-2" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-center gap-2 mb-2" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide px-2 py-0.5 rounded-md bg-rose-500/10 text-rose-400" }, /* @__PURE__ */ import_react4.default.createElement("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react4.default.createElement("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })), "Prompt #", prompt.prompt_number), /* @__PURE__ */ import_react4.default.createElement("span", { className: "inline-flex items-center text-[11px] font-medium px-2 py-0.5 rounded-md bg-accent-violet/10 text-accent-violet" }, getDisplayName(prompt.project)), /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-xs text-zinc-600 font-mono ml-auto" }, timeAgo(prompt.created_at_epoch)))), /* @__PURE__ */ import_react4.default.createElement("div", { className: "px-4 pb-4" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "p-3 rounded-md bg-surface-0 border border-border font-mono text-sm text-zinc-300 leading-relaxed whitespace-pre-wrap break-words" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-rose-400 select-none mr-2" }, "$"), prompt.prompt_text)));
 }
 
-// src/ui/viewer/hooks/useSSE.ts
+// src/ui/viewer/components/Analytics.tsx
+var import_react6 = __toESM(require_react(), 1);
+
+// src/ui/viewer/hooks/useAnalytics.ts
 var import_react5 = __toESM(require_react(), 1);
+function useAnalytics(project) {
+  const [data, setData] = (0, import_react5.useState)({
+    overview: null,
+    timeline: [],
+    typeDistribution: [],
+    sessionStats: null,
+    isLoading: true
+  });
+  const mountedRef = (0, import_react5.useRef)(true);
+  const debounceRef = (0, import_react5.useRef)(null);
+  const fetchAnalytics = (0, import_react5.useCallback)(async () => {
+    if (!mountedRef.current) return;
+    const params = project ? `?project=${encodeURIComponent(project)}` : "";
+    try {
+      const [overviewRes, timelineRes, typesRes, sessionsRes] = await Promise.all([
+        fetch(`/api/analytics/overview${params}`),
+        fetch(`/api/analytics/timeline${params}`),
+        fetch(`/api/analytics/types${params}`),
+        fetch(`/api/analytics/sessions${params}`)
+      ]);
+      if (!mountedRef.current) return;
+      const overview = overviewRes.ok ? await overviewRes.json() : null;
+      const timeline = timelineRes.ok ? await timelineRes.json() : [];
+      const typeDistribution = typesRes.ok ? await typesRes.json() : [];
+      const sessionStats = sessionsRes.ok ? await sessionsRes.json() : null;
+      setData({ overview, timeline, typeDistribution, sessionStats, isLoading: false });
+    } catch (err) {
+      console.error("Analytics fetch failed:", err);
+      if (mountedRef.current) {
+        setData((prev) => ({ ...prev, isLoading: false }));
+      }
+    }
+  }, [project]);
+  const debouncedRefresh = (0, import_react5.useCallback)(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      fetchAnalytics();
+    }, 2e3);
+  }, [fetchAnalytics]);
+  (0, import_react5.useEffect)(() => {
+    mountedRef.current = true;
+    setData((prev) => ({ ...prev, isLoading: true }));
+    fetchAnalytics();
+    const eventSource = new EventSource("/events");
+    const onUpdate = () => debouncedRefresh();
+    eventSource.addEventListener("observation-created", onUpdate);
+    eventSource.addEventListener("summary-created", onUpdate);
+    eventSource.addEventListener("session-created", onUpdate);
+    return () => {
+      mountedRef.current = false;
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      eventSource.removeEventListener("observation-created", onUpdate);
+      eventSource.removeEventListener("summary-created", onUpdate);
+      eventSource.removeEventListener("session-created", onUpdate);
+      eventSource.close();
+    };
+  }, [fetchAnalytics, debouncedRefresh]);
+  return data;
+}
+
+// src/ui/viewer/components/Analytics.tsx
+var TYPE_COLORS = {
+  "file-write": { bar: "bg-emerald-500", text: "text-emerald-400" },
+  "file-read": { bar: "bg-cyan-500", text: "text-cyan-400" },
+  "command": { bar: "bg-amber-500", text: "text-amber-400" },
+  "research": { bar: "bg-blue-500", text: "text-blue-400" },
+  "delegation": { bar: "bg-violet-500", text: "text-violet-400" },
+  "tool-use": { bar: "bg-zinc-500", text: "text-zinc-400" },
+  "constraint": { bar: "bg-red-500", text: "text-red-400" },
+  "decision": { bar: "bg-orange-500", text: "text-orange-400" },
+  "heuristic": { bar: "bg-indigo-500", text: "text-indigo-400" },
+  "rejected": { bar: "bg-slate-500", text: "text-slate-400" }
+};
+function getTypeColor(type) {
+  return TYPE_COLORS[type] || { bar: "bg-zinc-500", text: "text-zinc-400" };
+}
+function Analytics({ currentFilter, getDisplayName }) {
+  const { overview, timeline, typeDistribution, sessionStats, isLoading } = useAnalytics(currentFilter);
+  if (isLoading) {
+    return /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex flex-col items-center justify-center py-20" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "w-6 h-6 border-2 border-accent-violet/30 border-t-accent-violet rounded-full animate-spin mb-4" }), /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-sm text-zinc-500" }, "Loading analytics..."));
+  }
+  if (!overview) {
+    return /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex flex-col items-center justify-center py-20 text-center" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "w-16 h-16 rounded-2xl bg-surface-2 border border-border flex items-center justify-center mb-5" }, /* @__PURE__ */ import_react6.default.createElement("svg", { className: "w-7 h-7 text-zinc-600", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }, /* @__PURE__ */ import_react6.default.createElement("line", { x1: "18", y1: "20", x2: "18", y2: "10" }), /* @__PURE__ */ import_react6.default.createElement("line", { x1: "12", y1: "20", x2: "12", y2: "4" }), /* @__PURE__ */ import_react6.default.createElement("line", { x1: "6", y1: "20", x2: "6", y2: "14" }))), /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-base font-semibold text-zinc-300 mb-2" }, "No data available"), /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-sm text-zinc-500 max-w-xs leading-relaxed" }, "Start a coding session to begin collecting analytics data."));
+  }
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3" }, /* @__PURE__ */ import_react6.default.createElement(
+    StatCard,
+    {
+      label: "Observations",
+      value: overview.observations,
+      sub: `${overview.observationsToday} today`,
+      color: "text-accent-violet"
+    }
+  ), /* @__PURE__ */ import_react6.default.createElement(
+    StatCard,
+    {
+      label: "This Week",
+      value: overview.observationsThisWeek,
+      sub: "observations",
+      color: "text-accent-blue"
+    }
+  ), /* @__PURE__ */ import_react6.default.createElement(
+    StatCard,
+    {
+      label: "Sessions",
+      value: sessionStats?.total || overview.sessions,
+      sub: sessionStats ? `${sessionStats.avgDurationMinutes}m avg` : "",
+      color: "text-accent-cyan"
+    }
+  ), /* @__PURE__ */ import_react6.default.createElement(
+    StatCard,
+    {
+      label: "Knowledge",
+      value: overview.knowledgeCount,
+      sub: `${overview.staleCount} stale`,
+      color: "text-accent-amber"
+    }
+  )), /* @__PURE__ */ import_react6.default.createElement("div", { className: "grid grid-cols-3 gap-3" }, /* @__PURE__ */ import_react6.default.createElement(MiniStat, { label: "Summaries", value: overview.summaries, color: "text-accent-cyan" }), /* @__PURE__ */ import_react6.default.createElement(MiniStat, { label: "Prompts", value: overview.prompts, color: "text-accent-rose" }), /* @__PURE__ */ import_react6.default.createElement(
+    MiniStat,
+    {
+      label: "Completion",
+      value: sessionStats ? `${sessionStats.total > 0 ? Math.round(sessionStats.completed / sessionStats.total * 100) : 0}%` : "\u2014",
+      color: "text-accent-green"
+    }
+  )), timeline.length > 0 && /* @__PURE__ */ import_react6.default.createElement("div", { className: "bg-surface-1 border border-border rounded-lg p-5" }, /* @__PURE__ */ import_react6.default.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-zinc-500 mb-4" }, "Activity Timeline (30 days)"), /* @__PURE__ */ import_react6.default.createElement(TimelineChart, { entries: timeline })), typeDistribution.length > 0 && /* @__PURE__ */ import_react6.default.createElement("div", { className: "bg-surface-1 border border-border rounded-lg p-5" }, /* @__PURE__ */ import_react6.default.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-zinc-500 mb-4" }, "Observation Types"), /* @__PURE__ */ import_react6.default.createElement(TypeDistributionChart, { entries: typeDistribution })), sessionStats && sessionStats.total > 0 && /* @__PURE__ */ import_react6.default.createElement("div", { className: "bg-surface-1 border border-border rounded-lg p-5" }, /* @__PURE__ */ import_react6.default.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-zinc-500 mb-4" }, "Sessions"), /* @__PURE__ */ import_react6.default.createElement(SessionStatsPanel, { stats: sessionStats })));
+}
+function StatCard({ label, value, sub, color }) {
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className: "rounded-lg bg-surface-1 border border-border px-4 py-4" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: `text-2xl font-bold tabular-nums ${color}` }, value.toLocaleString()), /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-[11px] font-semibold uppercase tracking-wider text-zinc-500 mt-1" }, label), sub && /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-[10px] text-zinc-600 mt-0.5" }, sub));
+}
+function MiniStat({ label, value, color }) {
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className: "rounded-lg bg-surface-1 border border-border px-3 py-3 text-center" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: `text-lg font-bold tabular-nums ${color}` }, typeof value === "number" ? value.toLocaleString() : value), /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-[10px] uppercase tracking-wider text-zinc-600 mt-0.5" }, label));
+}
+function TimelineChart({ entries }) {
+  const [hoveredIndex, setHoveredIndex] = (0, import_react6.useState)(null);
+  const maxCount = Math.max(...entries.map((e) => e.count), 1);
+  const barWidth = Math.max(4, Math.min(16, Math.floor(600 / entries.length) - 2));
+  const chartHeight = 120;
+  const chartWidth = entries.length * (barWidth + 2);
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className: "relative overflow-x-auto" }, /* @__PURE__ */ import_react6.default.createElement(
+    "svg",
+    {
+      width: Math.max(chartWidth, 200),
+      height: chartHeight + 24,
+      className: "w-full",
+      viewBox: `0 0 ${Math.max(chartWidth, 200)} ${chartHeight + 24}`,
+      preserveAspectRatio: "none"
+    },
+    entries.map((entry, i) => {
+      const barHeight = Math.max(2, entry.count / maxCount * chartHeight);
+      const x = i * (barWidth + 2);
+      const y = chartHeight - barHeight;
+      const isHovered = hoveredIndex === i;
+      return /* @__PURE__ */ import_react6.default.createElement(
+        "g",
+        {
+          key: entry.day,
+          onMouseEnter: () => setHoveredIndex(i),
+          onMouseLeave: () => setHoveredIndex(null)
+        },
+        /* @__PURE__ */ import_react6.default.createElement(
+          "rect",
+          {
+            x,
+            y,
+            width: barWidth,
+            height: barHeight,
+            rx: 2,
+            className: `transition-all ${isHovered ? "fill-accent-violet" : "fill-accent-violet/60"}`
+          }
+        ),
+        isHovered && /* @__PURE__ */ import_react6.default.createElement("g", null, /* @__PURE__ */ import_react6.default.createElement(
+          "rect",
+          {
+            x: Math.max(0, x - 30),
+            y: Math.max(0, y - 28),
+            width: 70,
+            height: 22,
+            rx: 4,
+            className: "fill-surface-3"
+          }
+        ), /* @__PURE__ */ import_react6.default.createElement(
+          "text",
+          {
+            x: Math.max(35, x + barWidth / 2),
+            y: Math.max(15, y - 13),
+            textAnchor: "middle",
+            className: "fill-zinc-200 text-[10px] font-mono"
+          },
+          entry.count,
+          " \xB7 ",
+          entry.day.slice(5)
+        ))
+      );
+    }),
+    entries.map((entry, i) => {
+      if (i % Math.max(1, Math.floor(entries.length / 6)) !== 0) return null;
+      return /* @__PURE__ */ import_react6.default.createElement(
+        "text",
+        {
+          key: `label-${i}`,
+          x: i * (barWidth + 2) + barWidth / 2,
+          y: chartHeight + 16,
+          textAnchor: "middle",
+          className: "fill-zinc-600 text-[8px] font-mono"
+        },
+        entry.day.slice(5)
+      );
+    })
+  ));
+}
+function TypeDistributionChart({ entries }) {
+  const total = entries.reduce((sum, e) => sum + e.count, 0);
+  const maxCount = Math.max(...entries.map((e) => e.count), 1);
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-2" }, entries.map((entry) => {
+    const pct = total > 0 ? Math.round(entry.count / total * 100) : 0;
+    const widthPct = Math.max(2, entry.count / maxCount * 100);
+    const colors = getTypeColor(entry.type);
+    return /* @__PURE__ */ import_react6.default.createElement("div", { key: entry.type, className: "flex items-center gap-3" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "w-24 text-right" }, /* @__PURE__ */ import_react6.default.createElement("span", { className: `text-xs font-medium ${colors.text}` }, entry.type)), /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex-1 h-5 bg-surface-2 rounded-md overflow-hidden" }, /* @__PURE__ */ import_react6.default.createElement(
+      "div",
+      {
+        className: `h-full rounded-md ${colors.bar} transition-all duration-500`,
+        style: { width: `${widthPct}%` }
+      }
+    )), /* @__PURE__ */ import_react6.default.createElement("div", { className: "w-16 text-right" }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-xs text-zinc-400 font-mono tabular-nums" }, entry.count), /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-[10px] text-zinc-600 ml-1" }, pct, "%")));
+  }));
+}
+function SessionStatsPanel({ stats }) {
+  const completionRate = stats.total > 0 ? Math.round(stats.completed / stats.total * 100) : 0;
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex items-center justify-between mb-2" }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-xs text-zinc-400" }, "Completion rate"), /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-xs font-bold text-accent-green tabular-nums" }, completionRate, "%")), /* @__PURE__ */ import_react6.default.createElement("div", { className: "h-2.5 bg-surface-2 rounded-full overflow-hidden" }, /* @__PURE__ */ import_react6.default.createElement(
+    "div",
+    {
+      className: "h-full bg-accent-green rounded-full transition-all duration-500",
+      style: { width: `${completionRate}%` }
+    }
+  )), /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex items-center justify-between mt-1" }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-[10px] text-zinc-600" }, stats.completed, " completed"), /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-[10px] text-zinc-600" }, stats.total, " total"))), /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex items-center gap-3 p-3 rounded-lg bg-surface-2 border border-border" }, /* @__PURE__ */ import_react6.default.createElement("svg", { className: "w-4 h-4 text-accent-cyan flex-shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react6.default.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ import_react6.default.createElement("polyline", { points: "12 6 12 12 16 14" })), /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-sm font-semibold text-zinc-200" }, formatDuration(stats.avgDurationMinutes)), /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-xs text-zinc-500 ml-2" }, "avg session duration"))));
+}
+function formatDuration(minutes) {
+  if (minutes < 1) return "<1m";
+  if (minutes < 60) return `${Math.round(minutes)}m`;
+  const h = Math.floor(minutes / 60);
+  const m = Math.round(minutes % 60);
+  return m > 0 ? `${h}h ${m}m` : `${h}h`;
+}
+
+// src/ui/viewer/hooks/useSSE.ts
+var import_react7 = __toESM(require_react(), 1);
 function useSSE() {
-  const [state, setState] = (0, import_react5.useState)({
+  const [state, setState] = (0, import_react7.useState)({
     observations: [],
     summaries: [],
     prompts: [],
     projects: [],
     isConnected: false
   });
-  const mountedRef = (0, import_react5.useRef)(true);
-  (0, import_react5.useEffect)(() => {
+  const mountedRef = (0, import_react7.useRef)(true);
+  (0, import_react7.useEffect)(() => {
     mountedRef.current = true;
     let eventSource = null;
     let retryTimeout = null;
@@ -23975,42 +24253,63 @@ function useSSE() {
         console.error("Failed to fetch projects:", err);
       }
     };
+    const fetchAll = () => {
+      fetchObservations();
+      fetchSummaries();
+      fetchPrompts();
+      fetchProjects();
+    };
+    const onObservation = () => {
+      fetchObservations();
+      fetchProjects();
+    };
+    const onSummary = () => {
+      fetchSummaries();
+    };
+    const onPrompt = () => {
+      fetchPrompts();
+    };
+    let wasConnected = false;
     const connect = () => {
       if (!mountedRef.current) return;
       eventSource = new EventSource("/events");
       eventSource.onopen = () => {
         if (!mountedRef.current) return;
+        if (wasConnected) {
+          fetchAll();
+        }
+        wasConnected = true;
         retryCount = 0;
         setState((prev) => ({ ...prev, isConnected: true }));
       };
       eventSource.onerror = () => {
         if (!mountedRef.current) return;
         setState((prev) => ({ ...prev, isConnected: false }));
-        eventSource?.close();
+        if (eventSource) {
+          eventSource.removeEventListener("observation-created", onObservation);
+          eventSource.removeEventListener("summary-created", onSummary);
+          eventSource.removeEventListener("prompt-created", onPrompt);
+          eventSource.close();
+        }
         eventSource = null;
         const delay = Math.min(1e3 * Math.pow(2, retryCount), MAX_RETRY_DELAY);
         retryCount++;
         retryTimeout = setTimeout(connect, delay);
       };
-      eventSource.addEventListener("observation-created", () => {
-        fetchObservations();
-        fetchProjects();
-      });
-      eventSource.addEventListener("summary-created", () => {
-        fetchSummaries();
-      });
-      eventSource.addEventListener("prompt-created", () => {
-        fetchPrompts();
-      });
+      eventSource.addEventListener("observation-created", onObservation);
+      eventSource.addEventListener("summary-created", onSummary);
+      eventSource.addEventListener("prompt-created", onPrompt);
     };
-    fetchObservations();
-    fetchSummaries();
-    fetchPrompts();
-    fetchProjects();
+    fetchAll();
     connect();
     return () => {
       mountedRef.current = false;
-      eventSource?.close();
+      if (eventSource) {
+        eventSource.removeEventListener("observation-created", onObservation);
+        eventSource.removeEventListener("summary-created", onSummary);
+        eventSource.removeEventListener("prompt-created", onPrompt);
+        eventSource.close();
+      }
       if (retryTimeout) clearTimeout(retryTimeout);
     };
   }, []);
@@ -24018,17 +24317,17 @@ function useSSE() {
 }
 
 // src/ui/viewer/hooks/useTheme.ts
-var import_react6 = __toESM(require_react(), 1);
+var import_react8 = __toESM(require_react(), 1);
 function useTheme() {
-  const [preference, setPreference] = (0, import_react6.useState)("dark");
-  const [resolvedTheme, setResolvedTheme] = (0, import_react6.useState)("dark");
-  (0, import_react6.useEffect)(() => {
+  const [preference, setPreference] = (0, import_react8.useState)("dark");
+  const [resolvedTheme, setResolvedTheme] = (0, import_react8.useState)("dark");
+  (0, import_react8.useEffect)(() => {
     const saved = localStorage.getItem("kiro-memory-theme");
     if (saved) {
       setPreference(saved);
     }
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     let resolved;
     if (preference === "system") {
       const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -24043,7 +24342,7 @@ function useTheme() {
       document.documentElement.classList.remove("dark");
     }
   }, [preference]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => {
       if (preference === "system") {
@@ -24067,11 +24366,11 @@ function useTheme() {
 }
 
 // src/ui/viewer/hooks/useProjectAliases.ts
-var import_react7 = __toESM(require_react(), 1);
+var import_react9 = __toESM(require_react(), 1);
 function useProjectAliases() {
-  const [aliases, setAliases] = (0, import_react7.useState)({});
-  const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
+  const [aliases, setAliases] = (0, import_react9.useState)({});
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
     const fetchAliases = async () => {
       try {
         const res = await fetch("/api/project-aliases");
@@ -24085,10 +24384,10 @@ function useProjectAliases() {
     };
     fetchAliases();
   }, []);
-  const getDisplayName = (0, import_react7.useCallback)((project) => {
+  const getDisplayName = (0, import_react9.useCallback)((project) => {
     return aliases[project] || project;
   }, [aliases]);
-  const updateAlias = (0, import_react7.useCallback)(async (project, displayName) => {
+  const updateAlias = (0, import_react9.useCallback)(async (project, displayName) => {
     setIsLoading(true);
     try {
       const res = await fetch(`/api/project-aliases/${encodeURIComponent(project)}`, {
@@ -24134,38 +24433,39 @@ function mergeAndDeduplicateByProject(liveData, paginatedData) {
 // src/ui/viewer/App.tsx
 var TYPE_FILTERS = ["file-write", "file-read", "command", "research", "delegation", "tool-use"];
 function App() {
-  const [currentFilter, setCurrentFilter] = (0, import_react8.useState)("");
-  const [activeTypes, setActiveTypes] = (0, import_react8.useState)(new Set(TYPE_FILTERS));
-  const [paginatedObservations, setPaginatedObservations] = (0, import_react8.useState)([]);
-  const [paginatedSummaries, setPaginatedSummaries] = (0, import_react8.useState)([]);
-  const [paginatedPrompts, setPaginatedPrompts] = (0, import_react8.useState)([]);
-  const [isLoadingMore, setIsLoadingMore] = (0, import_react8.useState)(false);
-  const [hasMore, setHasMore] = (0, import_react8.useState)(true);
+  const [currentFilter, setCurrentFilter] = (0, import_react10.useState)("");
+  const [currentView, setCurrentView] = (0, import_react10.useState)("feed");
+  const [activeTypes, setActiveTypes] = (0, import_react10.useState)(new Set(TYPE_FILTERS));
+  const [paginatedObservations, setPaginatedObservations] = (0, import_react10.useState)([]);
+  const [paginatedSummaries, setPaginatedSummaries] = (0, import_react10.useState)([]);
+  const [paginatedPrompts, setPaginatedPrompts] = (0, import_react10.useState)([]);
+  const [isLoadingMore, setIsLoadingMore] = (0, import_react10.useState)(false);
+  const [hasMore, setHasMore] = (0, import_react10.useState)(true);
   const { observations, summaries, prompts, projects, isConnected } = useSSE();
   const { resolvedTheme, setThemePreference } = useTheme();
   const { getDisplayName, updateAlias } = useProjectAliases();
-  const allObservations = (0, import_react8.useMemo)(() => {
+  const allObservations = (0, import_react10.useMemo)(() => {
     if (currentFilter) return paginatedObservations;
     return mergeAndDeduplicateByProject(observations, paginatedObservations);
   }, [observations, paginatedObservations, currentFilter]);
-  const allSummaries = (0, import_react8.useMemo)(() => {
+  const allSummaries = (0, import_react10.useMemo)(() => {
     if (currentFilter) return paginatedSummaries;
     return mergeAndDeduplicateByProject(summaries, paginatedSummaries);
   }, [summaries, paginatedSummaries, currentFilter]);
-  const allPrompts = (0, import_react8.useMemo)(() => {
+  const allPrompts = (0, import_react10.useMemo)(() => {
     if (currentFilter) return paginatedPrompts;
     return mergeAndDeduplicateByProject(prompts, paginatedPrompts);
   }, [prompts, paginatedPrompts, currentFilter]);
-  const filteredObservations = (0, import_react8.useMemo)(
+  const filteredObservations = (0, import_react10.useMemo)(
     () => allObservations.filter((o) => activeTypes.has(o.type)),
     [allObservations, activeTypes]
   );
-  const stats = (0, import_react8.useMemo)(() => ({
+  const stats = (0, import_react10.useMemo)(() => ({
     observations: allObservations.length,
     summaries: allSummaries.length,
     prompts: allPrompts.length
   }), [allObservations, allSummaries, allPrompts]);
-  const toggleType = (0, import_react8.useCallback)((type) => {
+  const toggleType = (0, import_react10.useCallback)((type) => {
     setActiveTypes((prev) => {
       const next = new Set(prev);
       if (next.has(type)) next.delete(type);
@@ -24173,7 +24473,7 @@ function App() {
       return next;
     });
   }, []);
-  const fetchForProject = (0, import_react8.useCallback)(async (project) => {
+  const fetchForProject = (0, import_react10.useCallback)(async (project) => {
     setIsLoadingMore(true);
     try {
       const params = new URLSearchParams({
@@ -24195,7 +24495,7 @@ function App() {
       setIsLoadingMore(false);
     }
   }, []);
-  const handleLoadMore = (0, import_react8.useCallback)(async () => {
+  const handleLoadMore = (0, import_react10.useCallback)(async () => {
     if (isLoadingMore) return;
     setIsLoadingMore(true);
     try {
@@ -24233,7 +24533,7 @@ function App() {
       setIsLoadingMore(false);
     }
   }, [currentFilter, paginatedObservations.length, isLoadingMore]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setPaginatedObservations([]);
     setPaginatedSummaries([]);
     setPaginatedPrompts([]);
@@ -24242,14 +24542,16 @@ function App() {
       fetchForProject(currentFilter);
     }
   }, [currentFilter, fetchForProject]);
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "h-screen overflow-hidden flex flex-col bg-surface-0" }, /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "h-screen overflow-hidden flex flex-col bg-surface-0" }, /* @__PURE__ */ import_react10.default.createElement(
     Header,
     {
       isConnected,
       resolvedTheme,
-      onThemeToggle: () => setThemePreference(resolvedTheme === "dark" ? "light" : "dark")
+      onThemeToggle: () => setThemePreference(resolvedTheme === "dark" ? "light" : "dark"),
+      currentView,
+      onViewChange: setCurrentView
     }
-  ), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex flex-1 overflow-hidden" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "hidden md:flex w-[260px] flex-shrink-0" }, /* @__PURE__ */ import_react8.default.createElement(
+  ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex flex-1 overflow-hidden" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "hidden md:flex w-[260px] flex-shrink-0" }, /* @__PURE__ */ import_react10.default.createElement(
     Sidebar,
     {
       projects,
@@ -24261,15 +24563,15 @@ function App() {
       getDisplayName,
       onRenameProject: updateAlias
     }
-  )), /* @__PURE__ */ import_react8.default.createElement("main", { className: "flex-1 overflow-y-auto bg-surface-0" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "max-w-3xl mx-auto px-6 py-6" }, currentFilter && /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-3 mb-6 animate-fade-in" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-9 h-9 rounded-lg bg-accent-violet/15 flex items-center justify-center" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-xs font-bold text-accent-violet" }, getDisplayName(currentFilter).substring(0, 2).toUpperCase())), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("h2", { className: "text-lg font-bold text-zinc-100" }, getDisplayName(currentFilter)), currentFilter !== getDisplayName(currentFilter) && /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[11px] font-mono text-zinc-600" }, currentFilter))), /* @__PURE__ */ import_react8.default.createElement(
+  )), /* @__PURE__ */ import_react10.default.createElement("main", { className: "flex-1 overflow-y-auto bg-surface-0" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "max-w-3xl mx-auto px-6 py-6" }, currentFilter && /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-3 mb-6 animate-fade-in" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "w-9 h-9 rounded-lg bg-accent-violet/15 flex items-center justify-center" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: "text-xs font-bold text-accent-violet" }, getDisplayName(currentFilter).substring(0, 2).toUpperCase())), /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement("h2", { className: "text-lg font-bold text-zinc-100" }, getDisplayName(currentFilter)), currentFilter !== getDisplayName(currentFilter) && /* @__PURE__ */ import_react10.default.createElement("span", { className: "text-[11px] font-mono text-zinc-600" }, currentFilter))), /* @__PURE__ */ import_react10.default.createElement(
     "button",
     {
       onClick: () => setCurrentFilter(""),
       className: "ml-auto flex items-center gap-1.5 text-xs text-zinc-500 hover:text-zinc-300 transition-colors px-3 py-1.5 rounded-lg hover:bg-surface-2 border border-transparent hover:border-border"
     },
-    /* @__PURE__ */ import_react8.default.createElement("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ import_react8.default.createElement("path", { d: "M18 6 6 18M6 6l12 12" })),
+    /* @__PURE__ */ import_react10.default.createElement("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ import_react10.default.createElement("path", { d: "M18 6 6 18M6 6l12 12" })),
     "Clear filter"
-  )), /* @__PURE__ */ import_react8.default.createElement(
+  )), currentView === "feed" ? /* @__PURE__ */ import_react10.default.createElement(
     Feed,
     {
       observations: filteredObservations,
@@ -24280,13 +24582,19 @@ function App() {
       hasMore,
       getDisplayName
     }
+  ) : /* @__PURE__ */ import_react10.default.createElement(
+    Analytics,
+    {
+      currentFilter,
+      getDisplayName
+    }
   )))));
 }
 
 // src/ui/viewer/index.tsx
 var root = import_client.default.createRoot(document.getElementById("root"));
 root.render(
-  /* @__PURE__ */ import_react9.default.createElement(import_react9.default.StrictMode, null, /* @__PURE__ */ import_react9.default.createElement(App, null))
+  /* @__PURE__ */ import_react11.default.createElement(import_react11.default.StrictMode, null, /* @__PURE__ */ import_react11.default.createElement(App, null))
 );
 /*! Bundled license information: