kiro-memory 1.7.1 → 1.8.0

package/plugin/dist/viewer.js

@@ -1083,7 +1083,7 @@ var require_react_development = __commonJS({
           }
           return dispatcher.useContext(Context);
         }
-        function useState10(initialState) {
+        function useState11(initialState) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useState(initialState);
         }
@@ -1095,7 +1095,7 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useRef(initialValue);
         }
-        function useEffect8(create, deps) {
+        function useEffect10(create, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useEffect(create, deps);
         }
@@ -1107,11 +1107,11 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useLayoutEffect(create, deps);
         }
-        function useCallback5(callback, deps) {
+        function useCallback6(callback, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useCallback(callback, deps);
         }
-        function useMemo2(create, deps) {
+        function useMemo3(create, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useMemo(create, deps);
         }
@@ -1874,19 +1874,19 @@ var require_react_development = __commonJS({
         exports.memo = memo;
         exports.startTransition = startTransition;
         exports.unstable_act = act;
-        exports.useCallback = useCallback5;
+        exports.useCallback = useCallback6;
         exports.useContext = useContext;
         exports.useDebugValue = useDebugValue;
         exports.useDeferredValue = useDeferredValue;
-        exports.useEffect = useEffect8;
+        exports.useEffect = useEffect10;
         exports.useId = useId;
         exports.useImperativeHandle = useImperativeHandle;
         exports.useInsertionEffect = useInsertionEffect;
         exports.useLayoutEffect = useLayoutEffect;
-        exports.useMemo = useMemo2;
+        exports.useMemo = useMemo3;
         exports.useReducer = useReducer;
         exports.useRef = useRef5;
-        exports.useState = useState10;
+        exports.useState = useState11;
         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 React8 = require_react();
+        var React9 = require_react();
         var Scheduler = require_scheduler();
-        var ReactSharedInternals = React8.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+        var ReactSharedInternals = React9.__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) {
-                React8.Children.forEach(props.children, function(child) {
+                React9.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_react11 = __toESM(require_react(), 1);
+var import_react12 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 
 // src/ui/viewer/App.tsx
-var import_react10 = __toESM(require_react(), 1);
+var import_react11 = __toESM(require_react(), 1);
 
 // src/ui/viewer/components/Header.tsx
 var import_react2 = __toESM(require_react(), 1);
@@ -23609,9 +23609,9 @@ function getTypeBadgeClasses(type) {
   };
   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" };
 }
-function timeAgo(epochSeconds) {
-  const now = Date.now() / 1e3;
-  const diff = Math.max(0, now - epochSeconds);
+function timeAgo(epoch) {
+  const epochMs = epoch > 1e12 ? epoch : epoch * 1e3;
+  const diff = Math.max(0, (Date.now() - epochMs) / 1e3);
   if (diff < 60) return "just now";
   if (diff < 3600) {
     const m = Math.floor(diff / 60);
@@ -23630,14 +23630,31 @@ function timeAgo(epochSeconds) {
     const w = Math.floor(diff / 604800);
     return `${w}w ago`;
   }
-  const date = new Date(epochSeconds * 1e3);
+  const date = new Date(epochMs);
   return date.toLocaleDateString("en-US", { day: "numeric", month: "short" });
 }
+function formatTokenCount(tokens) {
+  if (tokens >= 1e6) return `${(tokens / 1e6).toFixed(1)}M`;
+  if (tokens >= 1e3) return `${(tokens / 1e3).toFixed(1)}k`;
+  return String(tokens);
+}
+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/components/SearchBar.tsx
+var SOURCE_BADGE = {
+  vector: { bg: "bg-violet-500/15", text: "text-violet-400", label: "semantic" },
+  keyword: { bg: "bg-amber-500/15", text: "text-amber-400", label: "keyword" },
+  hybrid: { bg: "bg-cyan-500/15", text: "text-cyan-400", label: "hybrid" }
+};
 function SearchBar() {
   const [query, setQuery] = (0, import_react.useState)("");
-  const [results, setResults] = (0, import_react.useState)(null);
+  const [results, setResults] = (0, import_react.useState)([]);
   const [isOpen, setIsOpen] = (0, import_react.useState)(false);
   const [isSearching, setIsSearching] = (0, import_react.useState)(false);
   const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
@@ -23645,14 +23662,15 @@ function SearchBar() {
   const debounceRef = (0, import_react.useRef)();
   const doSearch = (0, import_react.useCallback)(async (q) => {
     if (!q.trim()) {
-      setResults(null);
+      setResults([]);
       return;
     }
     setIsSearching(true);
     try {
-      const res = await fetch(`/api/search?q=${encodeURIComponent(q)}&limit=8`);
+      const res = await fetch(`/api/hybrid-search?q=${encodeURIComponent(q)}&limit=10`);
       if (res.ok) {
-        setResults(await res.json());
+        const data = await res.json();
+        setResults(data.results || []);
         setSelectedIndex(0);
       }
     } catch (err) {
@@ -23670,9 +23688,21 @@ function SearchBar() {
   const close = (0, import_react.useCallback)(() => {
     setIsOpen(false);
     setQuery("");
-    setResults(null);
+    setResults([]);
     setSelectedIndex(0);
   }, []);
+  const total = results.length;
+  const openSelected = (0, import_react.useCallback)(() => {
+    if (total === 0) return;
+    const item = results[selectedIndex];
+    if (!item) return;
+    const targetId = `obs-${item.id}`;
+    close();
+    setTimeout(() => {
+      const el = document.querySelector(`[data-id="${targetId}"]`);
+      if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 100);
+  }, [results, selectedIndex, total, close]);
   (0, import_react.useEffect)(() => {
     const handler = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
@@ -23681,11 +23711,23 @@ function SearchBar() {
         setTimeout(() => inputRef.current?.focus(), 50);
       }
       if (e.key === "Escape") close();
+      if (!isOpen) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((prev) => Math.min(prev + 1, total - 1));
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((prev) => Math.max(prev - 1, 0));
+      }
+      if (e.key === "Enter" && total > 0) {
+        e.preventDefault();
+        openSelected();
+      }
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [close]);
-  const total = results ? results.observations.length + results.summaries.length : 0;
+  }, [close, isOpen, total, openSelected]);
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
@@ -23693,12 +23735,13 @@ function SearchBar() {
         setIsOpen(true);
         setTimeout(() => inputRef.current?.focus(), 50);
       },
-      className: "flex items-center gap-2.5 flex-1 max-w-md px-3 py-2 rounded-lg bg-surface-2 border border-border text-zinc-500 hover:text-zinc-300 hover:border-border-hover transition-all cursor-text"
+      className: "flex items-center gap-2.5 flex-1 max-w-md px-3 py-2 rounded-lg bg-surface-2 border border-border text-zinc-500 hover:text-zinc-300 hover:border-border-hover transition-all cursor-text",
+      "aria-label": "Search memories"
     },
     /* @__PURE__ */ import_react.default.createElement("svg", { className: "w-4 h-4 flex-shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react.default.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "m21 21-4.3-4.3" })),
     /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm" }, "Search memories..."),
     /* @__PURE__ */ import_react.default.createElement("kbd", { className: "ml-auto hidden sm:inline text-[11px] text-zinc-600 bg-surface-3 px-1.5 py-0.5 rounded font-mono border border-border" }, typeof navigator !== "undefined" && navigator.platform?.includes("Mac") ? "\u2318K" : "Ctrl+K")
-  ), isOpen && /* @__PURE__ */ import_react.default.createElement("div", { className: "fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm animate-fade-in", onClick: close }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mx-auto mt-[12vh] w-full max-w-xl animate-scale-in px-4", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-surface-1 border border-border rounded-xl shadow-2xl overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-3 px-4 py-3.5 border-b border-border" }, /* @__PURE__ */ import_react.default.createElement("svg", { className: "w-5 h-5 text-accent-violet flex-shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react.default.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "m21 21-4.3-4.3" })), /* @__PURE__ */ import_react.default.createElement(
+  ), isOpen && /* @__PURE__ */ import_react.default.createElement("div", { className: "fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm animate-fade-in", onClick: close, role: "dialog", "aria-modal": "true", "aria-label": "Search" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mx-auto mt-[12vh] w-full max-w-xl animate-scale-in px-4", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-surface-1 border border-border rounded-xl shadow-2xl overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-3 px-4 py-3.5 border-b border-border" }, /* @__PURE__ */ import_react.default.createElement("svg", { className: "w-5 h-5 text-accent-violet flex-shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react.default.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "m21 21-4.3-4.3" })), /* @__PURE__ */ import_react.default.createElement(
     "input",
     {
       ref: inputRef,
@@ -23707,22 +23750,73 @@ function SearchBar() {
       placeholder: "Search observations, summaries, concepts...",
       value: query,
       onChange: handleChange,
+      role: "combobox",
+      "aria-expanded": total > 0,
+      "aria-controls": "search-results",
+      "aria-activedescendant": total > 0 ? `search-item-${selectedIndex}` : void 0,
       autoFocus: true
     }
-  ), isSearching && /* @__PURE__ */ import_react.default.createElement("div", { className: "w-4 h-4 border-2 border-accent-violet/30 border-t-accent-violet rounded-full animate-spin" }), /* @__PURE__ */ import_react.default.createElement("kbd", { className: "text-[10px] text-zinc-500 bg-surface-3 px-1.5 py-0.5 rounded font-mono border border-border cursor-pointer", onClick: close }, "ESC")), results && /* @__PURE__ */ import_react.default.createElement("div", { className: "max-h-[360px] overflow-y-auto" }, total === 0 && !isSearching && query.trim() && /* @__PURE__ */ import_react.default.createElement("div", { className: "px-4 py-10 text-center" }, /* @__PURE__ */ import_react.default.createElement("p", { className: "text-sm text-zinc-500" }, 'No results for "', query, '"')), results.observations.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "px-4 py-2 text-[11px] font-semibold uppercase tracking-wider text-zinc-500" }, "Observations"), results.observations.map((obs, idx) => {
-    const badge = getTypeBadgeClasses(obs.type);
-    return /* @__PURE__ */ import_react.default.createElement("div", { key: `obs-${obs.id}`, className: `flex items-start gap-3 px-4 py-2.5 transition-colors ${idx === selectedIndex ? "bg-surface-2" : "hover:bg-surface-2/50"}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${badge.dot}` }), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm text-zinc-200 truncate" }, obs.title), obs.text && /* @__PURE__ */ import_react.default.createElement("div", { className: "text-xs text-zinc-500 truncate mt-0.5" }, obs.text.substring(0, 100)), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ import_react.default.createElement("span", { className: `text-[10px] font-medium px-1.5 py-0.5 rounded ${badge.bg} ${badge.text}` }, obs.type), /* @__PURE__ */ import_react.default.createElement("span", { className: "text-[10px] text-zinc-600 font-mono" }, timeAgo(obs.created_at_epoch)))));
-  })), results.summaries.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "px-4 py-2 text-[11px] font-semibold uppercase tracking-wider text-zinc-500 border-t border-border" }, "Summaries"), results.summaries.map((sum) => /* @__PURE__ */ import_react.default.createElement("div", { key: `sum-${sum.id}`, className: "flex items-start gap-3 px-4 py-2.5 hover:bg-surface-2/50 transition-colors" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "w-2 h-2 rounded-full mt-1.5 flex-shrink-0 bg-accent-cyan" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm text-zinc-200 truncate" }, sum.request || "Session Summary"), sum.completed && /* @__PURE__ */ import_react.default.createElement("div", { className: "text-xs text-zinc-500 truncate mt-0.5" }, sum.completed.substring(0, 100)), /* @__PURE__ */ import_react.default.createElement("span", { className: "text-[10px] text-zinc-600 font-mono" }, timeAgo(sum.created_at_epoch))))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-4 px-4 py-2.5 border-t border-border text-[11px] text-zinc-600" }, /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("kbd", { className: "px-1 py-0.5 rounded bg-surface-3 border border-border font-mono mr-1" }, "\u2191\u2193"), "navigate"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("kbd", { className: "px-1 py-0.5 rounded bg-surface-3 border border-border font-mono mr-1" }, "\u21B5"), "open"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("kbd", { className: "px-1 py-0.5 rounded bg-surface-3 border border-border font-mono mr-1" }, "esc"), "close"))))));
+  ), isSearching && /* @__PURE__ */ import_react.default.createElement("div", { className: "w-4 h-4 border-2 border-accent-violet/30 border-t-accent-violet rounded-full animate-spin" }), /* @__PURE__ */ import_react.default.createElement("kbd", { className: "text-[10px] text-zinc-500 bg-surface-3 px-1.5 py-0.5 rounded font-mono border border-border cursor-pointer", onClick: close }, "ESC")), /* @__PURE__ */ import_react.default.createElement("div", { id: "search-results", className: "max-h-[360px] overflow-y-auto", role: "listbox" }, total === 0 && !isSearching && query.trim() && /* @__PURE__ */ import_react.default.createElement("div", { className: "px-4 py-10 text-center" }, /* @__PURE__ */ import_react.default.createElement("p", { className: "text-sm text-zinc-500" }, 'No results for "', query, '"')), results.map((item, idx) => {
+    const badge = getTypeBadgeClasses(item.type);
+    const srcBadge = SOURCE_BADGE[item.source] || SOURCE_BADGE.keyword;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: item.id,
+        id: `search-item-${idx}`,
+        role: "option",
+        "aria-selected": idx === selectedIndex,
+        className: `flex items-start gap-3 px-4 py-2.5 cursor-pointer transition-colors ${idx === selectedIndex ? "bg-surface-2" : "hover:bg-surface-2/50"}`,
+        onClick: () => {
+          setSelectedIndex(idx);
+          openSelected();
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${badge.dot}` }),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm text-zinc-200 truncate" }, item.title), item.content && /* @__PURE__ */ import_react.default.createElement("div", { className: "text-xs text-zinc-500 truncate mt-0.5" }, item.content.substring(0, 120)), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ import_react.default.createElement("span", { className: `text-[10px] font-medium px-1.5 py-0.5 rounded ${badge.bg} ${badge.text}` }, item.type), /* @__PURE__ */ import_react.default.createElement("span", { className: `text-[10px] font-medium px-1.5 py-0.5 rounded ${srcBadge.bg} ${srcBadge.text}` }, srcBadge.label), /* @__PURE__ */ import_react.default.createElement("span", { className: "text-[10px] text-zinc-600 font-mono" }, timeAgo(item.created_at_epoch)), item.score > 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "text-[10px] text-zinc-700 font-mono" }, (item.score * 100).toFixed(0), "%")))
+    );
+  })), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-4 px-4 py-2.5 border-t border-border text-[11px] text-zinc-600" }, /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("kbd", { className: "px-1 py-0.5 rounded bg-surface-3 border border-border font-mono mr-1" }, "\u2191\u2193"), "navigate"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("kbd", { className: "px-1 py-0.5 rounded bg-surface-3 border border-border font-mono mr-1" }, "\u21B5"), "open"), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("kbd", { className: "px-1 py-0.5 rounded bg-surface-3 border border-border font-mono mr-1" }, "esc"), "close"))))));
 }
 
 // src/ui/viewer/components/Header.tsx
-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(
+function formatAgo(ms) {
+  if (ms <= 0) return "";
+  const sec = Math.floor(ms / 1e3);
+  if (sec < 5) return "just now";
+  if (sec < 60) return `${sec}s ago`;
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  return `${Math.floor(min / 60)}h ago`;
+}
+function Header({ isConnected, lastEventTime, resolvedTheme, themePreference, onThemeChange, currentView, onViewChange, onMenuToggle }) {
+  const cycleTheme = () => {
+    const order = ["dark", "light", "system"];
+    const current = order.indexOf(themePreference);
+    onThemeChange(order[(current + 1) % order.length]);
+  };
+  const [now, setNow] = (0, import_react2.useState)(Date.now());
+  (0, import_react2.useEffect)(() => {
+    const t = setInterval(() => setNow(Date.now()), 5e3);
+    return () => clearInterval(t);
+  }, []);
+  const agoText = lastEventTime > 0 ? formatAgo(now - lastEventTime) : "";
+  const isFresh = lastEventTime > 0 && now - lastEventTime < 3e3;
+  return /* @__PURE__ */ import_react2.default.createElement("header", { className: "flex items-center gap-4 px-4 md:px-6 h-14 bg-surface-1 border-b border-border z-50" }, onMenuToggle && /* @__PURE__ */ import_react2.default.createElement(
+    "button",
+    {
+      onClick: onMenuToggle,
+      className: "md:hidden w-8 h-8 rounded-lg bg-surface-2 border border-border text-zinc-400 hover:text-zinc-100 hover:bg-surface-3 transition-all flex items-center justify-center flex-shrink-0",
+      "aria-label": "Apri menu laterale"
+    },
+    /* @__PURE__ */ import_react2.default.createElement("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("line", { x1: "4", y1: "6", x2: "20", y2: "6" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "4", y1: "12", x2: "20", y2: "12" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "4", y1: "18", x2: "20", y2: "18" }))
+  ), /* @__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: "hidden sm: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 transition-all ${isFresh ? "bg-accent-green scale-125" : 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"), agoText && /* @__PURE__ */ import_react2.default.createElement("span", { className: "text-[10px] text-zinc-600 ml-1" }, agoText)), /* @__PURE__ */ import_react2.default.createElement("div", { className: "hidden sm:flex items-center rounded-lg bg-surface-2 border border-border p-0.5", role: "tablist", "aria-label": "View mode" }, /* @__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"
+      role: "tab",
+      "aria-selected": currentView === "feed",
+      "aria-label": "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"
@@ -23731,34 +23825,44 @@ function Header({ isConnected, resolvedTheme, onThemeToggle, currentView, onView
     {
       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"
+      role: "tab",
+      "aria-selected": currentView === "analytics",
+      "aria-label": "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: () => onViewChange("sessions"),
+      className: `flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all ${currentView === "sessions" ? "bg-surface-3 text-zinc-100 shadow-sm" : "text-zinc-500 hover:text-zinc-300"}`,
+      role: "tab",
+      "aria-selected": currentView === "sessions",
+      "aria-label": "Sessions"
+    },
+    /* @__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("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ import_react2.default.createElement("polyline", { points: "12 6 12 12 16 14" })),
+    "Sessions"
   )), /* @__PURE__ */ import_react2.default.createElement(
     "button",
     {
-      onClick: onThemeToggle,
+      onClick: cycleTheme,
       className: "w-8 h-8 rounded-lg bg-surface-2 border border-border text-zinc-400 hover:text-zinc-100 hover:bg-surface-3 hover:border-border-hover transition-all flex items-center justify-center",
-      title: resolvedTheme === "dark" ? "Light mode" : "Dark mode"
+      title: `Theme: ${themePreference}`,
+      "aria-label": `Theme: ${themePreference}. Click to change`
     },
-    resolvedTheme === "dark" ? /* @__PURE__ */ import_react2.default.createElement("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "12", cy: "12", r: "4" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" })) : /* @__PURE__ */ import_react2.default.createElement("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }))
+    themePreference === "system" ? /* @__PURE__ */ import_react2.default.createElement("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "8", y1: "21", x2: "16", y2: "21" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "12", y1: "17", x2: "12", y2: "21" })) : resolvedTheme === "dark" ? /* @__PURE__ */ import_react2.default.createElement("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "12", cy: "12", r: "4" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" })) : /* @__PURE__ */ import_react2.default.createElement("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }))
   ));
 }
 
 // src/ui/viewer/components/Sidebar.tsx
 var import_react3 = __toESM(require_react(), 1);
 var TYPE_CONFIG = {
-  "file-write": { color: "bg-accent-green", label: "File writes" },
-  "file-read": { color: "bg-accent-cyan", label: "File reads" },
+  "file-write": { color: "bg-accent-green", label: "Changes" },
+  "file-read": { color: "bg-accent-cyan", label: "Reads" },
   "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" },
-  "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" }
+  "tool-use": { color: "bg-zinc-400", label: "Tools" }
 };
 var PROJECT_COLORS = [
   { bg: "bg-accent-violet/15", text: "text-accent-violet", ring: "ring-accent-violet/30" },
@@ -23786,6 +23890,7 @@ function Sidebar({
 }) {
   const [editingProject, setEditingProject] = (0, import_react3.useState)(null);
   const [editValue, setEditValue] = (0, import_react3.useState)("");
+  const [renameFeedback, setRenameFeedback] = (0, import_react3.useState)(null);
   const editInputRef = (0, import_react3.useRef)(null);
   (0, import_react3.useEffect)(() => {
     if (editingProject && editInputRef.current) {
@@ -23800,7 +23905,13 @@ function Sidebar({
   };
   const confirmEdit = async () => {
     if (editingProject && editValue.trim()) {
-      await onRenameProject(editingProject, editValue.trim());
+      try {
+        await onRenameProject(editingProject, editValue.trim());
+        setRenameFeedback({ project: editingProject, success: true });
+      } catch {
+        setRenameFeedback({ project: editingProject, success: false });
+      }
+      setTimeout(() => setRenameFeedback(null), 2e3);
     }
     setEditingProject(null);
   };
@@ -23845,9 +23956,11 @@ function Sidebar({
       },
       /* @__PURE__ */ import_react3.default.createElement("div", { className: `w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 text-[11px] font-bold ${pc.bg} ${pc.text}` }, initials),
       /* @__PURE__ */ import_react3.default.createElement("span", { className: "flex-1 truncate" }, getDisplayName(project)),
+      renameFeedback?.project === project && /* @__PURE__ */ import_react3.default.createElement("span", { className: `text-[10px] font-medium animate-fade-in ${renameFeedback.success ? "text-accent-green" : "text-accent-rose"}` }, renameFeedback.success ? "Saved" : "Error"),
       /* @__PURE__ */ import_react3.default.createElement(
-        "span",
+        "button",
         {
+          type: "button",
           onClick: (e) => startEditing(project, e),
           className: "opacity-0 group-hover:opacity-100 text-zinc-600 hover:text-zinc-300 transition-all p-0.5",
           title: "Rename"
@@ -23861,11 +23974,11 @@ function Sidebar({
       "label",
       {
         key: type,
-        className: `flex items-center gap-3 px-3 py-2 rounded-lg text-sm cursor-pointer transition-all ${isActive ? "text-zinc-300 hover:text-zinc-100" : "text-zinc-600 hover:text-zinc-400"}`
+        className: `flex items-center gap-3 px-3 py-2 rounded-lg text-sm cursor-pointer transition-all ${isActive ? "text-zinc-300 hover:text-zinc-100" : "text-zinc-500 hover:text-zinc-400"}`
       },
-      /* @__PURE__ */ import_react3.default.createElement("div", { className: `w-4 h-4 rounded border flex items-center justify-center flex-shrink-0 transition-all ${isActive ? "bg-accent-violet border-accent-violet" : "bg-transparent border-zinc-600"}` }, isActive && /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-2.5 h-2.5 text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "20 6 9 17 4 12" }))),
-      /* @__PURE__ */ import_react3.default.createElement("input", { type: "checkbox", checked: isActive, onChange: () => onToggleType(type), className: "sr-only" }),
-      /* @__PURE__ */ import_react3.default.createElement("div", { className: `w-2.5 h-2.5 rounded-full flex-shrink-0 ${config.color} ${isActive ? "opacity-100" : "opacity-30"}` }),
+      /* @__PURE__ */ import_react3.default.createElement("input", { type: "checkbox", checked: isActive, onChange: () => onToggleType(type), className: "sr-only", "aria-label": `Filter ${config.label}` }),
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: `w-4 h-4 rounded border flex items-center justify-center flex-shrink-0 transition-all ${isActive ? "bg-accent-violet border-accent-violet" : "bg-transparent border-zinc-600"}`, "aria-hidden": "true" }, isActive && /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-2.5 h-2.5 text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "20 6 9 17 4 12" }))),
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: `w-2.5 h-2.5 rounded-full flex-shrink-0 ${config.color} ${isActive ? "opacity-100" : "opacity-30"}`, "aria-hidden": "true" }),
       /* @__PURE__ */ import_react3.default.createElement("span", { className: "flex-1" }, config.label)
     );
   }))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mx-4 h-px bg-border" }), /* @__PURE__ */ import_react3.default.createElement("div", { className: "p-4" }, /* @__PURE__ */ import_react3.default.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-zinc-500 mb-3 px-2" }, "Statistics"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, [
@@ -23873,38 +23986,134 @@ function Sidebar({
     { label: "Summaries", value: stats.summaries, color: "text-accent-cyan" },
     { label: "Prompts", value: stats.prompts, color: "text-accent-amber" },
     { label: "Projects", value: projects.length, color: "text-accent-green" }
-  ].map((item) => /* @__PURE__ */ import_react3.default.createElement("div", { key: item.label, className: "rounded-lg bg-surface-2 border border-border px-3 py-3 text-center" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: `text-xl font-bold tabular-nums ${item.color}` }, item.value), /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-[10px] uppercase tracking-wider text-zinc-600 mt-1" }, item.label))))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mt-auto px-4 py-4" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-[10px] text-zinc-700 font-mono text-center" }, "Kiro Memory v1.5.0")));
+  ].map((item) => /* @__PURE__ */ import_react3.default.createElement("div", { key: item.label, className: "rounded-lg bg-surface-2 border border-border px-3 py-3 text-center" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: `text-xl font-bold tabular-nums ${item.color}` }, item.value), /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-[10px] uppercase tracking-wider text-zinc-600 mt-1" }, item.label))))), (stats.tokenEconomics.discoveryTokens > 0 || stats.tokenEconomics.readTokens > 0) && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("div", { className: "mx-4 h-px bg-border" }), /* @__PURE__ */ import_react3.default.createElement("div", { className: "p-4" }, /* @__PURE__ */ import_react3.default.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-zinc-500 mb-3 px-2" }, "Token Economics"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "rounded-lg bg-surface-2 border border-border px-3 py-2.5" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-center justify-between mb-1.5" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "text-[10px] uppercase tracking-wider text-zinc-600" }, "Discovery"), /* @__PURE__ */ import_react3.default.createElement("span", { className: "text-xs font-bold text-amber-400 tabular-nums" }, formatTokenCount(stats.tokenEconomics.discoveryTokens))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-center justify-between mb-1.5" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "text-[10px] uppercase tracking-wider text-zinc-600" }, "Read cost"), /* @__PURE__ */ import_react3.default.createElement("span", { className: "text-xs font-bold text-cyan-400 tabular-nums" }, formatTokenCount(stats.tokenEconomics.readTokens))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "h-px bg-border my-1.5" }), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "text-[10px] uppercase tracking-wider text-zinc-600" }, "Savings"), /* @__PURE__ */ import_react3.default.createElement("span", { className: "text-xs font-bold text-emerald-400 tabular-nums" }, formatTokenCount(stats.tokenEconomics.savings)))), stats.tokenEconomics.discoveryTokens > 0 && /* @__PURE__ */ import_react3.default.createElement("div", { className: "rounded-md overflow-hidden h-2 bg-surface-3" }, /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      className: "h-full bg-gradient-to-r from-emerald-500 to-emerald-400 transition-all",
+      style: { width: `${Math.min(100, Math.round(stats.tokenEconomics.readTokens / stats.tokenEconomics.discoveryTokens * 100))}%` }
+    }
+  )), stats.tokenEconomics.discoveryTokens > 0 && /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-[10px] text-zinc-600 text-center" }, Math.round((1 - stats.tokenEconomics.readTokens / stats.tokenEconomics.discoveryTokens) * 100), "% token reduction")))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mt-auto px-4 py-4 space-y-2" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-center justify-center gap-3" }, /* @__PURE__ */ import_react3.default.createElement("a", { href: "https://github.com/auriti-web-design/kiro-memory", target: "_blank", rel: "noopener noreferrer", className: "text-zinc-600 hover:text-zinc-400 transition-colors", title: "GitHub" }, /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react3.default.createElement("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" }))), /* @__PURE__ */ import_react3.default.createElement("a", { href: "https://auritidesign.it/docs/kiro-memory/", target: "_blank", rel: "noopener noreferrer", className: "text-zinc-600 hover:text-zinc-400 transition-colors", title: "Documentazione" }, /* @__PURE__ */ import_react3.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_react3.default.createElement("path", { d: "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" }), /* @__PURE__ */ import_react3.default.createElement("path", { d: "M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" })))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-[10px] text-zinc-700 font-mono text-center" }, "Kiro Memory v1.8.0")));
 }
 
 // src/ui/viewer/components/Feed.tsx
 var import_react4 = __toESM(require_react(), 1);
 var TYPE_STYLES = {
-  "file-write": { border: "border-l-emerald-500", bg: "bg-emerald-500/10", text: "text-emerald-400", dot: "bg-emerald-500", label: "file-write" },
-  "file-read": { border: "border-l-cyan-500", bg: "bg-cyan-500/10", text: "text-cyan-400", dot: "bg-cyan-500", label: "file-read" },
+  "file-write": { border: "border-l-emerald-500", bg: "bg-emerald-500/10", text: "text-emerald-400", dot: "bg-emerald-500", label: "change" },
+  "file-read": { border: "border-l-cyan-500", bg: "bg-cyan-500/10", text: "text-cyan-400", dot: "bg-cyan-500", label: "read" },
   "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" },
-  "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" }
+  "tool-use": { border: "border-l-zinc-500", bg: "bg-zinc-500/10", text: "text-zinc-400", dot: "bg-zinc-500", label: "tool" }
 };
 function getTypeStyle(type) {
   return TYPE_STYLES[type] || TYPE_STYLES["tool-use"];
 }
+var CONCEPT_COLORS = {
+  "testing": "bg-emerald-500/15 text-emerald-400 ring-emerald-500/25",
+  "ui-component": "bg-violet-500/15 text-violet-400 ring-violet-500/25",
+  "hooks": "bg-violet-500/15 text-violet-400 ring-violet-500/25",
+  "database": "bg-amber-500/15 text-amber-400 ring-amber-500/25",
+  "api": "bg-blue-500/15 text-blue-400 ring-blue-500/25",
+  "configuration": "bg-zinc-500/15 text-zinc-400 ring-zinc-500/25",
+  "styling": "bg-pink-500/15 text-pink-400 ring-pink-500/25",
+  "types": "bg-cyan-500/15 text-cyan-400 ring-cyan-500/25",
+  "sdk": "bg-indigo-500/15 text-indigo-400 ring-indigo-500/25",
+  "build": "bg-orange-500/15 text-orange-400 ring-orange-500/25",
+  "devops": "bg-rose-500/15 text-rose-400 ring-rose-500/25",
+  "documentation": "bg-teal-500/15 text-teal-400 ring-teal-500/25",
+  "search": "bg-sky-500/15 text-sky-400 ring-sky-500/25",
+  "backend": "bg-lime-500/15 text-lime-400 ring-lime-500/25",
+  "git": "bg-orange-500/15 text-orange-400 ring-orange-500/25",
+  "dependencies": "bg-yellow-500/15 text-yellow-400 ring-yellow-500/25",
+  "debugging": "bg-red-500/15 text-red-400 ring-red-500/25",
+  "code-quality": "bg-emerald-500/15 text-emerald-400 ring-emerald-500/25",
+  "networking": "bg-blue-500/15 text-blue-400 ring-blue-500/25",
+  "module-system": "bg-indigo-500/15 text-indigo-400 ring-indigo-500/25",
+  "tech-debt": "bg-red-500/15 text-red-400 ring-red-500/25",
+  "security": "bg-red-500/15 text-red-400 ring-red-500/25",
+  "performance": "bg-amber-500/15 text-amber-400 ring-amber-500/25",
+  "error-handling": "bg-rose-500/15 text-rose-400 ring-rose-500/25"
+};
+function basename(filePath) {
+  return filePath.split("/").pop() || filePath;
+}
+function stripProjectRoot(path) {
+  return path.replace(/^\/home\/[^/]+\/[^/]+\//, "");
+}
+function generateNarrative(obs) {
+  if (obs.narrative) return obs.narrative;
+  const title = obs.title || "";
+  switch (obs.type) {
+    case "file-write": {
+      if (title.startsWith("Written: ") || title.startsWith("Modified ") || title.startsWith("Created ")) {
+        const path = title.replace(/^(Written|Modified|Created):?\s*/, "");
+        const fileName = basename(path);
+        const isEdit = obs.text ? obs.text.includes('"old_string"') : true;
+        return `${isEdit ? "Modified" : "Created"} **${fileName}**`;
+      }
+      return title || "File changed";
+    }
+    case "file-read": {
+      if (title.startsWith("Searched for ") || title.startsWith("Searched codebase")) return title;
+      if (title.startsWith("Read: ")) return `Read **${basename(title.replace("Read: ", ""))}**`;
+      return title ? `Read **${basename(title)}**` : "File read";
+    }
+    case "command": {
+      if (title.startsWith("Executed: ")) {
+        const cmd = title.replace("Executed: ", "").split("|")[0].split("2>&1")[0].split("&&")[0].trim();
+        const shortCmd = cmd.length > 70 ? cmd.substring(0, 67) + "..." : cmd;
+        return `Ran \`${shortCmd}\``;
+      }
+      return title || "Command executed";
+    }
+    case "research": {
+      if (title.startsWith("Searched: ")) return `Web search: "${title.replace("Searched: ", "")}"`;
+      if (title.startsWith("Fetched ")) return `Fetched content from ${title.replace("Fetched ", "")}`;
+      return title || "Research performed";
+    }
+    case "delegation": {
+      const shortTitle = title.length > 100 ? title.substring(0, 97) + "..." : title;
+      return `Delegated: ${shortTitle || "sub-task"}`;
+    }
+    default:
+      return title || `Tool executed (${obs.type})`;
+  }
+}
+function getDetailLine(obs) {
+  const parts = [];
+  if (obs.files_modified) {
+    const files = obs.files_modified.split(", ").map(stripProjectRoot);
+    parts.push(`${files.length} file${files.length > 1 ? "s" : ""} modified`);
+  }
+  if (obs.files_read) {
+    const files = obs.files_read.split(", ").map(stripProjectRoot);
+    if (files.length > 1) parts.push(`${files.length} files read`);
+  }
+  return parts.length > 0 ? parts.join(" \xB7 ") : null;
+}
+function renderMarkdown(text) {
+  return text.split("**").map((segment, i) => {
+    if (i % 2 === 1) return /* @__PURE__ */ import_react4.default.createElement("strong", { key: i, className: "text-zinc-100 font-semibold" }, segment);
+    return segment.split("`").map(
+      (part, j) => j % 2 === 1 ? /* @__PURE__ */ import_react4.default.createElement("code", { key: `${i}-${j}`, className: "text-amber-400/80 bg-amber-500/10 px-1 py-0.5 rounded text-[12px]" }, part) : /* @__PURE__ */ import_react4.default.createElement("span", { key: `${i}-${j}` }, part)
+    );
+  });
+}
 function Feed({ observations, summaries, prompts, onLoadMore, isLoading, hasMore, getDisplayName }) {
-  const items = [...observations, ...summaries, ...prompts].sort(
-    (a, b) => b.created_at_epoch - a.created_at_epoch
+  const items = (0, import_react4.useMemo)(
+    () => [...observations, ...summaries, ...prompts].sort(
+      (a, b) => b.created_at_epoch - a.created_at_epoch
+    ),
+    [observations, summaries, prompts]
   );
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "space-y-3" }, items.map((item, index) => {
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "space-y-3", "aria-live": "polite", "aria-label": "Memory feed" }, items.map((item, index) => {
     const stagger = index < 8 ? `stagger-${index + 1}` : "";
     if ("type" in item && "title" in item) {
-      return /* @__PURE__ */ import_react4.default.createElement("div", { key: `obs-${item.id}`, className: `opacity-0 animate-slide-up ${stagger}` }, /* @__PURE__ */ import_react4.default.createElement(ObservationCard, { obs: item, getDisplayName }));
+      return /* @__PURE__ */ import_react4.default.createElement("div", { key: `obs-${item.id}`, "data-id": `obs-${item.id}`, className: `animate-slide-up ${stagger}` }, /* @__PURE__ */ import_react4.default.createElement(ObservationCard, { obs: item, getDisplayName }));
     } else if ("request" in item) {
-      return /* @__PURE__ */ import_react4.default.createElement("div", { key: `sum-${item.id}`, className: `opacity-0 animate-slide-up ${stagger}` }, /* @__PURE__ */ import_react4.default.createElement(SummaryCard, { summary: item, getDisplayName }));
+      return /* @__PURE__ */ import_react4.default.createElement("div", { key: `sum-${item.id}`, "data-id": `sum-${item.id}`, className: `animate-slide-up ${stagger}` }, /* @__PURE__ */ import_react4.default.createElement(SummaryCard, { summary: item, getDisplayName }));
     } else {
-      return /* @__PURE__ */ import_react4.default.createElement("div", { key: `prompt-${item.id}`, className: `opacity-0 animate-slide-up ${stagger}` }, /* @__PURE__ */ import_react4.default.createElement(PromptCard, { prompt: item, getDisplayName }));
+      return /* @__PURE__ */ import_react4.default.createElement("div", { key: `prompt-${item.id}`, "data-id": `prompt-${item.id}`, className: `animate-slide-up ${stagger}` }, /* @__PURE__ */ import_react4.default.createElement(PromptCard, { prompt: item, getDisplayName }));
     }
   }), hasMore && items.length > 0 && /* @__PURE__ */ import_react4.default.createElement("div", { className: "pt-2" }, /* @__PURE__ */ import_react4.default.createElement(
     "button",
@@ -23918,30 +24127,25 @@ function Feed({ observations, summaries, prompts, onLoadMore, isLoading, hasMore
 }
 function ObservationCard({ obs, getDisplayName }) {
   const style = getTypeStyle(obs.type);
-  const [expanded, setExpanded] = (0, import_react4.useState)(false);
-  const longContent = obs.text && obs.text.length > 300;
-  const displayText = longContent && !expanded ? obs.text.substring(0, 280) + "..." : obs.text;
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: `bg-surface-1 border border-border rounded-lg border-l-[3px] ${style.border} 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 ${style.bg} ${style.text}` }, /* @__PURE__ */ import_react4.default.createElement("span", { className: `w-1.5 h-1.5 rounded-full ${style.dot}` }), style.label), /* @__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(obs.project)), /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-xs text-zinc-600 font-mono ml-auto" }, timeAgo(obs.created_at_epoch))), /* @__PURE__ */ import_react4.default.createElement("h3", { className: "text-[15px] font-semibold text-zinc-100 leading-snug" }, obs.title)), obs.subtitle && /* @__PURE__ */ import_react4.default.createElement("div", { className: "px-4 pb-1" }, /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-xs italic text-zinc-500" }, obs.subtitle)), obs.text && /* @__PURE__ */ import_react4.default.createElement("div", { className: "px-4 pb-3" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "text-sm text-zinc-400 leading-relaxed whitespace-pre-wrap break-words" }, displayText), longContent && /* @__PURE__ */ import_react4.default.createElement(
-    "button",
-    {
-      onClick: () => setExpanded(!expanded),
-      className: "text-xs text-accent-violet hover:text-accent-violet/80 mt-1.5 font-medium transition-colors"
-    },
-    expanded ? "Show less" : "Show more"
-  )), obs.narrative && /* @__PURE__ */ import_react4.default.createElement("div", { className: "mx-4 mb-3 p-3 rounded-md bg-surface-2 border border-border" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "block text-[10px] font-semibold uppercase tracking-wider text-blue-400 mb-1" }, "Narrative"), /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-xs text-zinc-400 leading-relaxed" }, obs.narrative)), obs.facts && /* @__PURE__ */ import_react4.default.createElement("div", { className: "mx-4 mb-3 p-3 rounded-md bg-surface-2 border border-border" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "block text-[10px] font-semibold uppercase tracking-wider text-cyan-400 mb-1" }, "Facts"), /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-xs text-zinc-400 leading-relaxed" }, obs.facts)), (obs.files_modified || obs.files_read) && /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex flex-wrap gap-2 px-4 pb-3" }, obs.files_modified && /* @__PURE__ */ import_react4.default.createElement("span", { className: "inline-flex items-center gap-1.5 text-[11px] font-medium text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-md" }, /* @__PURE__ */ import_react4.default.createElement("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ import_react4.default.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M14 2v6h6" })), obs.files_modified.split(",").length, " modified"), obs.files_read && /* @__PURE__ */ import_react4.default.createElement("span", { className: "inline-flex items-center gap-1.5 text-[11px] font-medium text-blue-400 bg-blue-500/10 px-2 py-0.5 rounded-md" }, /* @__PURE__ */ import_react4.default.createElement("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ import_react4.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7Z" })), obs.files_read.split(",").length, " read")), obs.concepts && /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex flex-wrap gap-1.5 px-4 pb-4" }, obs.concepts.split(", ").map((concept, i) => /* @__PURE__ */ import_react4.default.createElement("span", { key: i, className: "text-[11px] text-zinc-500 bg-surface-3 px-2 py-0.5 rounded-md border border-border" }, concept))));
+  const narrative = generateNarrative(obs);
+  const detail = getDetailLine(obs);
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: `bg-surface-1 border border-border rounded-lg border-l-[3px] ${style.border} shadow-card hover:shadow-card-hover hover:border-border-hover transition-all` }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "px-4 py-3.5" }, /* @__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 ${style.bg} ${style.text}` }, /* @__PURE__ */ import_react4.default.createElement("span", { className: `w-1.5 h-1.5 rounded-full ${style.dot}` }), style.label), /* @__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(obs.project)), obs.is_stale === 1 && /* @__PURE__ */ import_react4.default.createElement("span", { className: "inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/25", title: "File modificato dopo l'osservazione" }, "stale"), /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-[11px] text-zinc-500 font-mono ml-auto tabular-nums" }, timeAgo(obs.created_at_epoch))), /* @__PURE__ */ import_react4.default.createElement("h4", { className: "text-sm text-zinc-200 leading-snug" }, renderMarkdown(narrative)), obs.subtitle && obs.subtitle !== obs.title && /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-[12px] text-zinc-500 mt-1 font-mono truncate" }, stripProjectRoot(obs.subtitle)), detail && /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-[11px] text-zinc-600 mt-1.5" }, detail), /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-center gap-2 mt-2.5" }, obs.concepts && /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex flex-wrap gap-1" }, obs.concepts.split(", ").map((concept, i) => {
+    const colorClass = CONCEPT_COLORS[concept.trim()] || "bg-zinc-500/15 text-zinc-400 ring-zinc-500/25";
+    return /* @__PURE__ */ import_react4.default.createElement("span", { key: i, className: `text-[10px] font-medium px-1.5 py-0.5 rounded ring-1 ${colorClass}` }, concept.trim());
+  })), /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-[10px] text-zinc-700 font-mono ml-auto tabular-nums" }, "#", obs.id))));
 }
 function SummaryCard({ summary, getDisplayName }) {
   const sections = [
     { label: "Investigated", value: summary.investigated, color: "text-blue-400" },
     { label: "Learned", value: summary.learned, color: "text-emerald-400" },
     { label: "Completed", value: summary.completed, color: "text-violet-400" },
-    { label: "Next steps", value: summary.next_steps, color: "text-amber-400" },
+    { label: "Next Steps", value: summary.next_steps, color: "text-amber-400" },
     { label: "Notes", value: summary.notes, color: "text-zinc-400" }
   ].filter((s) => s.value);
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "bg-surface-1 border border-border rounded-lg border-l-[3px] border-l-cyan-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-cyan-500/10 text-cyan-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: "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" })), "Summary"), /* @__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(summary.project)), /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-xs text-zinc-600 font-mono ml-auto" }, timeAgo(summary.created_at_epoch))), summary.request && /* @__PURE__ */ import_react4.default.createElement("h3", { className: "text-[15px] font-semibold text-zinc-100 leading-snug" }, summary.request)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "px-4 pb-4 space-y-2" }, sections.map(({ label, value, color }) => /* @__PURE__ */ import_react4.default.createElement("div", { key: label, className: "p-3 rounded-md bg-surface-2 border border-border" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: `block text-[10px] font-semibold uppercase tracking-wider mb-1 ${color}` }, label), /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-xs text-zinc-400 leading-relaxed" }, value)))));
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "bg-surface-1 border border-border rounded-lg border-l-[3px] border-l-cyan-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-cyan-500/10 text-cyan-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: "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" })), "Session Summary"), /* @__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(summary.project)), /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-[11px] text-zinc-500 font-mono ml-auto" }, timeAgo(summary.created_at_epoch))), summary.request && /* @__PURE__ */ import_react4.default.createElement("h3", { className: "text-[15px] font-semibold text-zinc-100 leading-snug" }, summary.request)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "px-4 pb-4 space-y-2" }, sections.map(({ label, value, color }) => /* @__PURE__ */ import_react4.default.createElement("div", { key: label, className: "p-3 rounded-md bg-surface-2 border border-border" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: `block text-[10px] font-semibold uppercase tracking-wider mb-1 ${color}` }, label), /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-xs text-zinc-400 leading-relaxed" }, value)))));
 }
 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)));
+  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-[11px] text-zinc-500 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 text-sm text-zinc-300 leading-relaxed whitespace-pre-wrap break-words" }, prompt.prompt_text)));
 }
 
 // src/ui/viewer/components/Analytics.tsx
@@ -23949,6 +24153,7 @@ var import_react6 = __toESM(require_react(), 1);
 
 // src/ui/viewer/hooks/useAnalytics.ts
 var import_react5 = __toESM(require_react(), 1);
+var POLL_INTERVAL = 3e4;
 function useAnalytics(project) {
   const [data, setData] = (0, import_react5.useState)({
     overview: null,
@@ -23958,7 +24163,6 @@ function useAnalytics(project) {
     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)}` : "";
@@ -23982,30 +24186,18 @@ function useAnalytics(project) {
       }
     }
   }, [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);
+    const interval = setInterval(() => {
+      if (mountedRef.current) fetchAnalytics();
+    }, POLL_INTERVAL);
     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();
+      clearInterval(interval);
     };
-  }, [fetchAnalytics, debouncedRefresh]);
+  }, [fetchAnalytics]);
   return data;
 }
 
@@ -24072,7 +24264,7 @@ function Analytics({ currentFilter, getDisplayName }) {
       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 })));
+  )), overview.tokenEconomics && overview.tokenEconomics.discoveryTokens > 0 && /* @__PURE__ */ import_react6.default.createElement(TokenEconomicsPanel, { economics: overview.tokenEconomics }), 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));
@@ -24083,80 +24275,31 @@ function MiniStat({ label, value, color }) {
 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",
+  const labelInterval = Math.max(1, Math.floor(entries.length / 6));
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "h-5 text-center" }, hoveredIndex !== null && entries[hoveredIndex] && /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-[11px] font-mono text-zinc-300 bg-surface-3 px-2.5 py-1 rounded" }, entries[hoveredIndex].day.slice(5), " \u2014 ", /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-accent-violet font-semibold" }, entries[hoveredIndex].count), " observations")), /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex items-end gap-[2px]", style: { height: chartHeight } }, entries.map((entry, i) => {
+    const heightPct = Math.max(1.5, entry.count / maxCount * 100);
+    const isHovered = hoveredIndex === i;
+    return /* @__PURE__ */ import_react6.default.createElement(
+      "div",
+      {
+        key: entry.day,
+        className: "flex-1 min-w-0 cursor-pointer transition-all duration-150",
+        style: { height: `${heightPct}%` },
+        onMouseEnter: () => setHoveredIndex(i),
+        onMouseLeave: () => setHoveredIndex(null)
+      },
+      /* @__PURE__ */ import_react6.default.createElement(
+        "div",
         {
-          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)
-      );
-    })
-  ));
+          className: `w-full h-full rounded-t transition-colors ${isHovered ? "bg-accent-violet" : "bg-accent-violet/50"}`
+        }
+      )
+    );
+  })), /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex" }, entries.map((entry, i) => {
+    const showLabel = i % labelInterval === 0 || i === entries.length - 1;
+    return /* @__PURE__ */ import_react6.default.createElement("div", { key: `label-${i}`, className: "flex-1 min-w-0 text-center" }, showLabel && /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-[10px] font-mono text-zinc-600" }, entry.day.slice(5)));
+  })));
 }
 function TypeDistributionChart({ entries }) {
   const total = entries.reduce((sum, e) => sum + e.count, 0);
@@ -24184,29 +24327,112 @@ function SessionStatsPanel({ stats }) {
     }
   )), /* @__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`;
+function TokenEconomicsPanel({ economics }) {
+  const { discoveryTokens, readTokens, savings, reductionPct } = economics;
+  return /* @__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" }, "Token Economics"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "grid grid-cols-3 gap-3 mb-4" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "rounded-lg bg-surface-2 border border-border px-4 py-3 text-center" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-lg font-bold text-amber-400 tabular-nums" }, formatTokenCount(discoveryTokens)), /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-[10px] uppercase tracking-wider text-zinc-600 mt-0.5" }, "Discovery"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-[9px] text-zinc-700 mt-0.5" }, "tokens spent")), /* @__PURE__ */ import_react6.default.createElement("div", { className: "rounded-lg bg-surface-2 border border-border px-4 py-3 text-center" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-lg font-bold text-cyan-400 tabular-nums" }, formatTokenCount(readTokens)), /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-[10px] uppercase tracking-wider text-zinc-600 mt-0.5" }, "Read Cost"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-[9px] text-zinc-700 mt-0.5" }, "to reuse context")), /* @__PURE__ */ import_react6.default.createElement("div", { className: "rounded-lg bg-surface-2 border border-border px-4 py-3 text-center" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-lg font-bold text-emerald-400 tabular-nums" }, formatTokenCount(savings)), /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-[10px] uppercase tracking-wider text-zinc-600 mt-0.5" }, "Savings"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-[9px] text-zinc-700 mt-0.5" }, "tokens saved"))), /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex items-center justify-between text-[10px] text-zinc-500" }, /* @__PURE__ */ import_react6.default.createElement("span", null, "Read cost vs Discovery cost"), /* @__PURE__ */ import_react6.default.createElement("span", { className: "font-bold text-emerald-400" }, reductionPct, "% reduction")), /* @__PURE__ */ import_react6.default.createElement("div", { className: "h-3 bg-surface-3 rounded-full overflow-hidden flex" }, /* @__PURE__ */ import_react6.default.createElement(
+    "div",
+    {
+      className: "h-full bg-gradient-to-r from-cyan-500 to-cyan-400 rounded-l-full transition-all",
+      style: { width: `${Math.min(100, discoveryTokens > 0 ? Math.round(readTokens / discoveryTokens * 100) : 0)}%` }
+    }
+  ), /* @__PURE__ */ import_react6.default.createElement(
+    "div",
+    {
+      className: "h-full bg-gradient-to-r from-emerald-500/40 to-emerald-400/40 rounded-r-full transition-all flex-1"
+    }
+  )), /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex items-center justify-between text-[9px] text-zinc-700" }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "w-2 h-2 rounded-full bg-cyan-500 inline-block" }), "Read: ", formatTokenCount(readTokens)), /* @__PURE__ */ import_react6.default.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react6.default.createElement("span", { className: "w-2 h-2 rounded-full bg-emerald-500/40 inline-block" }), "Saved: ", formatTokenCount(savings)))));
 }
 
-// src/ui/viewer/hooks/useSSE.ts
+// src/ui/viewer/components/Sessions.tsx
 var import_react7 = __toESM(require_react(), 1);
+var STATUS_STYLES = {
+  active: { dot: "bg-accent-green animate-pulse-dot", text: "text-accent-green", label: "Active" },
+  completed: { dot: "bg-accent-blue", text: "text-accent-blue", label: "Completed" },
+  failed: { dot: "bg-accent-rose", text: "text-accent-rose", label: "Failed" }
+};
+function Sessions({ currentFilter, getDisplayName }) {
+  const [sessions, setSessions] = (0, import_react7.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react7.useState)(true);
+  const [expandedId, setExpandedId] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    setIsLoading(true);
+    const params = currentFilter ? `?project=${encodeURIComponent(currentFilter)}` : "";
+    fetch(`/api/sessions${params}`).then((r) => r.ok ? r.json() : []).then((data) => setSessions(Array.isArray(data) ? data : [])).catch(() => setSessions([])).finally(() => setIsLoading(false));
+  }, [currentFilter]);
+  if (isLoading) {
+    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col items-center justify-center py-20" }, /* @__PURE__ */ import_react7.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_react7.default.createElement("p", { className: "text-sm text-zinc-500" }, "Loading sessions..."));
+  }
+  if (sessions.length === 0) {
+    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col items-center justify-center py-20 text-center" }, /* @__PURE__ */ import_react7.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_react7.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_react7.default.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ import_react7.default.createElement("polyline", { points: "12 6 12 12 16 14" }))), /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-base font-semibold text-zinc-300 mb-2" }, "No sessions found"), /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-sm text-zinc-500 max-w-xs leading-relaxed" }, "Start a coding session to see it tracked here."));
+  }
+  const total = sessions.length;
+  const completed = sessions.filter((s) => s.status === "completed").length;
+  const active = sessions.filter((s) => s.status === "active").length;
+  const avgDuration = (() => {
+    const completedSessions = sessions.filter((s) => s.completed_at_epoch && s.started_at_epoch);
+    if (completedSessions.length === 0) return 0;
+    const totalMs = completedSessions.reduce((sum, s) => sum + ((s.completed_at_epoch || 0) - s.started_at_epoch), 0);
+    return totalMs / completedSessions.length / 6e4;
+  })();
+  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "rounded-lg bg-surface-1 border border-border px-4 py-4" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-2xl font-bold tabular-nums text-accent-violet" }, total), /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-[11px] font-semibold uppercase tracking-wider text-zinc-500 mt-1" }, "Total")), /* @__PURE__ */ import_react7.default.createElement("div", { className: "rounded-lg bg-surface-1 border border-border px-4 py-4" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-2xl font-bold tabular-nums text-accent-green" }, active), /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-[11px] font-semibold uppercase tracking-wider text-zinc-500 mt-1" }, "Active")), /* @__PURE__ */ import_react7.default.createElement("div", { className: "rounded-lg bg-surface-1 border border-border px-4 py-4" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-2xl font-bold tabular-nums text-accent-blue" }, completed), /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-[11px] font-semibold uppercase tracking-wider text-zinc-500 mt-1" }, "Completed")), /* @__PURE__ */ import_react7.default.createElement("div", { className: "rounded-lg bg-surface-1 border border-border px-4 py-4" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-2xl font-bold tabular-nums text-accent-cyan" }, formatDuration(avgDuration)), /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-[11px] font-semibold uppercase tracking-wider text-zinc-500 mt-1" }, "Avg Duration"))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-2" }, sessions.map((session) => {
+    const style = STATUS_STYLES[session.status] || STATUS_STYLES.active;
+    const isExpanded = expandedId === session.id;
+    const duration = session.completed_at_epoch ? (session.completed_at_epoch - session.started_at_epoch) / 6e4 : (Date.now() - session.started_at_epoch) / 6e4;
+    return /* @__PURE__ */ import_react7.default.createElement(
+      "div",
+      {
+        key: session.id,
+        className: "bg-surface-1 border border-border rounded-lg overflow-hidden transition-all hover:border-border-hover"
+      },
+      /* @__PURE__ */ import_react7.default.createElement(
+        "button",
+        {
+          onClick: () => setExpandedId(isExpanded ? null : session.id),
+          className: "w-full flex items-center gap-3 px-4 py-3 text-left",
+          "aria-expanded": isExpanded
+        },
+        /* @__PURE__ */ import_react7.default.createElement("div", { className: `w-2.5 h-2.5 rounded-full flex-shrink-0 ${style.dot}` }),
+        /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-sm font-medium text-zinc-200 truncate" }, session.user_prompt || "Session"), /* @__PURE__ */ import_react7.default.createElement("span", { className: `text-[10px] font-medium px-1.5 py-0.5 rounded ${style.text} bg-surface-3` }, style.label)), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-3 mt-1" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-[11px] text-zinc-500" }, getDisplayName(session.project)), /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-[10px] text-zinc-600 font-mono" }, timeAgo(session.started_at_epoch)), /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-[10px] text-zinc-600 font-mono" }, formatDuration(duration)))),
+        /* @__PURE__ */ import_react7.default.createElement(
+          "svg",
+          {
+            className: `w-4 h-4 text-zinc-600 transition-transform ${isExpanded ? "rotate-180" : ""}`,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          },
+          /* @__PURE__ */ import_react7.default.createElement("path", { d: "m6 9 6 6 6-6" })
+        )
+      ),
+      isExpanded && /* @__PURE__ */ import_react7.default.createElement("div", { className: "px-4 pb-3 pt-0 border-t border-border space-y-2 animate-fade-in" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "grid grid-cols-2 gap-3 text-xs" }, /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-zinc-600" }, "Session ID"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-zinc-400 font-mono text-[11px] truncate" }, session.content_session_id)), /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-zinc-600" }, "Memory ID"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-zinc-400 font-mono text-[11px] truncate" }, session.memory_session_id || "\u2014")), /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-zinc-600" }, "Started"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-zinc-400 font-mono text-[11px]" }, new Date(session.started_at_epoch).toLocaleString())), /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-zinc-600" }, "Completed"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-zinc-400 font-mono text-[11px]" }, session.completed_at_epoch ? new Date(session.completed_at_epoch).toLocaleString() : "\u2014"))), session.user_prompt && /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-[11px] text-zinc-600" }, "Prompt"), /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-xs text-zinc-400 mt-0.5 leading-relaxed" }, session.user_prompt)))
+    );
+  })));
+}
+
+// src/ui/viewer/hooks/useSSE.ts
+var import_react8 = __toESM(require_react(), 1);
+var POLL_INTERVAL2 = 3e4;
 function useSSE() {
-  const [state, setState] = (0, import_react7.useState)({
+  const [state, setState] = (0, import_react8.useState)({
     observations: [],
     summaries: [],
     prompts: [],
     projects: [],
-    isConnected: false
+    isConnected: false,
+    lastEventTime: 0
   });
-  const mountedRef = (0, import_react7.useRef)(true);
-  (0, import_react7.useEffect)(() => {
+  const mountedRef = (0, import_react8.useRef)(true);
+  const touchLastEvent = (0, import_react8.useCallback)(() => {
+    if (mountedRef.current) {
+      setState((prev) => ({ ...prev, lastEventTime: Date.now() }));
+    }
+  }, []);
+  (0, import_react8.useEffect)(() => {
     mountedRef.current = true;
     let eventSource = null;
     let retryTimeout = null;
+    let pollInterval = null;
     let retryCount = 0;
     const MAX_RETRY_DELAY = 3e4;
     const fetchObservations = async () => {
@@ -24214,7 +24440,7 @@ function useSSE() {
         const res = await fetch("/api/observations?limit=50");
         if (res.ok && mountedRef.current) {
           const observations = await res.json();
-          setState((prev) => ({ ...prev, observations }));
+          setState((prev) => ({ ...prev, observations, lastEventTime: Date.now() }));
         }
       } catch (err) {
         console.error("Failed to fetch observations:", err);
@@ -24269,6 +24495,15 @@ function useSSE() {
     const onPrompt = () => {
       fetchPrompts();
     };
+    const onSession = () => {
+      fetchProjects();
+    };
+    const startPolling = () => {
+      if (pollInterval) clearInterval(pollInterval);
+      pollInterval = setInterval(() => {
+        if (mountedRef.current) fetchAll();
+      }, POLL_INTERVAL2);
+    };
     let wasConnected = false;
     const connect = () => {
       if (!mountedRef.current) return;
@@ -24280,7 +24515,7 @@ function useSSE() {
         }
         wasConnected = true;
         retryCount = 0;
-        setState((prev) => ({ ...prev, isConnected: true }));
+        setState((prev) => ({ ...prev, isConnected: true, lastEventTime: Date.now() }));
       };
       eventSource.onerror = () => {
         if (!mountedRef.current) return;
@@ -24289,6 +24524,7 @@ function useSSE() {
           eventSource.removeEventListener("observation-created", onObservation);
           eventSource.removeEventListener("summary-created", onSummary);
           eventSource.removeEventListener("prompt-created", onPrompt);
+          eventSource.removeEventListener("session-created", onSession);
           eventSource.close();
         }
         eventSource = null;
@@ -24299,35 +24535,39 @@ function useSSE() {
       eventSource.addEventListener("observation-created", onObservation);
       eventSource.addEventListener("summary-created", onSummary);
       eventSource.addEventListener("prompt-created", onPrompt);
+      eventSource.addEventListener("session-created", onSession);
     };
     fetchAll();
     connect();
+    startPolling();
     return () => {
       mountedRef.current = false;
       if (eventSource) {
         eventSource.removeEventListener("observation-created", onObservation);
         eventSource.removeEventListener("summary-created", onSummary);
         eventSource.removeEventListener("prompt-created", onPrompt);
+        eventSource.removeEventListener("session-created", onSession);
         eventSource.close();
       }
       if (retryTimeout) clearTimeout(retryTimeout);
+      if (pollInterval) clearInterval(pollInterval);
     };
   }, []);
   return state;
 }
 
 // src/ui/viewer/hooks/useTheme.ts
-var import_react8 = __toESM(require_react(), 1);
+var import_react9 = __toESM(require_react(), 1);
 function useTheme() {
-  const [preference, setPreference] = (0, import_react8.useState)("dark");
-  const [resolvedTheme, setResolvedTheme] = (0, import_react8.useState)("dark");
-  (0, import_react8.useEffect)(() => {
+  const [preference, setPreference] = (0, import_react9.useState)("dark");
+  const [resolvedTheme, setResolvedTheme] = (0, import_react9.useState)("dark");
+  (0, import_react9.useEffect)(() => {
     const saved = localStorage.getItem("kiro-memory-theme");
     if (saved) {
       setPreference(saved);
     }
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     let resolved;
     if (preference === "system") {
       const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -24342,7 +24582,7 @@ function useTheme() {
       document.documentElement.classList.remove("dark");
     }
   }, [preference]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => {
       if (preference === "system") {
@@ -24366,11 +24606,11 @@ function useTheme() {
 }
 
 // src/ui/viewer/hooks/useProjectAliases.ts
-var import_react9 = __toESM(require_react(), 1);
+var import_react10 = __toESM(require_react(), 1);
 function useProjectAliases() {
-  const [aliases, setAliases] = (0, import_react9.useState)({});
-  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [aliases, setAliases] = (0, import_react10.useState)({});
+  const [isLoading, setIsLoading] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     const fetchAliases = async () => {
       try {
         const res = await fetch("/api/project-aliases");
@@ -24384,10 +24624,10 @@ function useProjectAliases() {
     };
     fetchAliases();
   }, []);
-  const getDisplayName = (0, import_react9.useCallback)((project) => {
+  const getDisplayName = (0, import_react10.useCallback)((project) => {
     return aliases[project] || project;
   }, [aliases]);
-  const updateAlias = (0, import_react9.useCallback)(async (project, displayName) => {
+  const updateAlias = (0, import_react10.useCallback)(async (project, displayName) => {
     setIsLoading(true);
     try {
       const res = await fetch(`/api/project-aliases/${encodeURIComponent(project)}`, {
@@ -24433,39 +24673,50 @@ 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_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 [currentFilter, setCurrentFilter] = (0, import_react11.useState)("");
+  const [currentView, setCurrentView] = (0, import_react11.useState)("feed");
+  const [activeTypes, setActiveTypes] = (0, import_react11.useState)(new Set(TYPE_FILTERS));
+  const [paginatedObservations, setPaginatedObservations] = (0, import_react11.useState)([]);
+  const [paginatedSummaries, setPaginatedSummaries] = (0, import_react11.useState)([]);
+  const [paginatedPrompts, setPaginatedPrompts] = (0, import_react11.useState)([]);
+  const [isLoadingMore, setIsLoadingMore] = (0, import_react11.useState)(false);
+  const [hasMore, setHasMore] = (0, import_react11.useState)({ observations: true, summaries: true, prompts: true });
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = (0, import_react11.useState)(false);
+  const { observations, summaries, prompts, projects, isConnected, lastEventTime } = useSSE();
+  const { preference: themePreference, resolvedTheme, setThemePreference } = useTheme();
   const { getDisplayName, updateAlias } = useProjectAliases();
-  const allObservations = (0, import_react10.useMemo)(() => {
+  const allObservations = (0, import_react11.useMemo)(() => {
     if (currentFilter) return paginatedObservations;
     return mergeAndDeduplicateByProject(observations, paginatedObservations);
   }, [observations, paginatedObservations, currentFilter]);
-  const allSummaries = (0, import_react10.useMemo)(() => {
+  const allSummaries = (0, import_react11.useMemo)(() => {
     if (currentFilter) return paginatedSummaries;
     return mergeAndDeduplicateByProject(summaries, paginatedSummaries);
   }, [summaries, paginatedSummaries, currentFilter]);
-  const allPrompts = (0, import_react10.useMemo)(() => {
+  const allPrompts = (0, import_react11.useMemo)(() => {
     if (currentFilter) return paginatedPrompts;
     return mergeAndDeduplicateByProject(prompts, paginatedPrompts);
   }, [prompts, paginatedPrompts, currentFilter]);
-  const filteredObservations = (0, import_react10.useMemo)(
+  const filteredObservations = (0, import_react11.useMemo)(
     () => allObservations.filter((o) => activeTypes.has(o.type)),
     [allObservations, activeTypes]
   );
-  const stats = (0, import_react10.useMemo)(() => ({
-    observations: allObservations.length,
-    summaries: allSummaries.length,
-    prompts: allPrompts.length
-  }), [allObservations, allSummaries, allPrompts]);
-  const toggleType = (0, import_react10.useCallback)((type) => {
+  const [stats, setStats] = (0, import_react11.useState)({ observations: 0, summaries: 0, prompts: 0, tokenEconomics: { discoveryTokens: 0, readTokens: 0, savings: 0 } });
+  (0, import_react11.useEffect)(() => {
+    const params = currentFilter ? `?project=${encodeURIComponent(currentFilter)}` : "";
+    fetch(`/api/analytics/overview${params}`).then((r) => r.ok ? r.json() : null).then((data) => {
+      if (data) {
+        setStats({
+          observations: data.observations || 0,
+          summaries: data.summaries || 0,
+          prompts: data.prompts || 0,
+          tokenEconomics: data.tokenEconomics || { discoveryTokens: 0, readTokens: 0, savings: 0 }
+        });
+      }
+    }).catch(() => {
+    });
+  }, [currentFilter, allObservations.length]);
+  const toggleType = (0, import_react11.useCallback)((type) => {
     setActiveTypes((prev) => {
       const next = new Set(prev);
       if (next.has(type)) next.delete(type);
@@ -24473,7 +24724,7 @@ function App() {
       return next;
     });
   }, []);
-  const fetchForProject = (0, import_react10.useCallback)(async (project) => {
+  const fetchForProject = (0, import_react11.useCallback)(async (project) => {
     setIsLoadingMore(true);
     try {
       const params = new URLSearchParams({
@@ -24495,63 +24746,64 @@ function App() {
       setIsLoadingMore(false);
     }
   }, []);
-  const handleLoadMore = (0, import_react10.useCallback)(async () => {
+  const handleLoadMore = (0, import_react11.useCallback)(async () => {
     if (isLoadingMore) return;
+    if (!hasMore.observations && !hasMore.summaries && !hasMore.prompts) return;
     setIsLoadingMore(true);
     try {
-      const offset = paginatedObservations.length;
-      const params = new URLSearchParams({
-        offset: String(offset),
-        limit: "20",
-        ...currentFilter && { project: currentFilter }
-      });
-      const [obsRes, sumRes, promptRes] = await Promise.all([
-        fetch(`/api/observations?${params}`),
-        fetch(`/api/summaries?${params}`),
-        fetch(`/api/prompts?${params}`)
+      const limit = "20";
+      const projectParam = currentFilter ? `&project=${encodeURIComponent(currentFilter)}` : "";
+      const fetches = await Promise.all([
+        hasMore.observations ? fetch(`/api/observations?offset=${paginatedObservations.length}&limit=${limit}${projectParam}`) : null,
+        hasMore.summaries ? fetch(`/api/summaries?offset=${paginatedSummaries.length}&limit=${limit}${projectParam}`) : null,
+        hasMore.prompts ? fetch(`/api/prompts?offset=${paginatedPrompts.length}&limit=${limit}${projectParam}`) : null
       ]);
-      let newItems = 0;
-      if (obsRes.ok) {
+      const [obsRes, sumRes, promptRes] = fetches;
+      const nextHasMore = { ...hasMore };
+      if (obsRes?.ok) {
         const newObs = await obsRes.json();
-        newItems += newObs.length;
-        setPaginatedObservations((prev) => [...prev, ...newObs]);
+        if (newObs.length === 0) nextHasMore.observations = false;
+        else setPaginatedObservations((prev) => [...prev, ...newObs]);
       }
-      if (sumRes.ok) {
+      if (sumRes?.ok) {
         const newSum = await sumRes.json();
-        newItems += newSum.length;
-        setPaginatedSummaries((prev) => [...prev, ...newSum]);
+        if (newSum.length === 0) nextHasMore.summaries = false;
+        else setPaginatedSummaries((prev) => [...prev, ...newSum]);
       }
-      if (promptRes.ok) {
+      if (promptRes?.ok) {
         const newPrompts = await promptRes.json();
-        newItems += newPrompts.length;
-        setPaginatedPrompts((prev) => [...prev, ...newPrompts]);
+        if (newPrompts.length === 0) nextHasMore.prompts = false;
+        else setPaginatedPrompts((prev) => [...prev, ...newPrompts]);
       }
-      if (newItems === 0) setHasMore(false);
+      setHasMore(nextHasMore);
     } catch (error) {
       console.error("Failed to load more data:", error);
     } finally {
       setIsLoadingMore(false);
     }
-  }, [currentFilter, paginatedObservations.length, isLoadingMore]);
-  (0, import_react10.useEffect)(() => {
+  }, [currentFilter, paginatedObservations.length, paginatedSummaries.length, paginatedPrompts.length, isLoadingMore, hasMore]);
+  (0, import_react11.useEffect)(() => {
     setPaginatedObservations([]);
     setPaginatedSummaries([]);
     setPaginatedPrompts([]);
-    setHasMore(true);
+    setHasMore({ observations: true, summaries: true, prompts: true });
     if (currentFilter) {
       fetchForProject(currentFilter);
     }
   }, [currentFilter, fetchForProject]);
-  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "h-screen overflow-hidden flex flex-col bg-surface-0" }, /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement("div", { className: "h-screen overflow-hidden flex flex-col bg-surface-0" }, /* @__PURE__ */ import_react11.default.createElement(
     Header,
     {
       isConnected,
+      lastEventTime,
       resolvedTheme,
-      onThemeToggle: () => setThemePreference(resolvedTheme === "dark" ? "light" : "dark"),
+      themePreference,
+      onThemeChange: setThemePreference,
       currentView,
-      onViewChange: setCurrentView
+      onViewChange: setCurrentView,
+      onMenuToggle: () => setIsMobileMenuOpen((prev) => !prev)
     }
-  ), /* @__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(
+  ), /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex flex-1 overflow-hidden" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "hidden md:flex w-[260px] flex-shrink-0" }, /* @__PURE__ */ import_react11.default.createElement(
     Sidebar,
     {
       projects,
@@ -24563,15 +24815,36 @@ function App() {
       getDisplayName,
       onRenameProject: updateAlias
     }
-  )), /* @__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(
+  )), isMobileMenuOpen && /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(
+    "div",
+    {
+      className: "fixed inset-0 bg-black/50 z-40 md:hidden",
+      onClick: () => setIsMobileMenuOpen(false)
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement("div", { className: "fixed inset-y-0 left-0 w-[280px] z-50 md:hidden animate-slide-in-left" }, /* @__PURE__ */ import_react11.default.createElement(
+    Sidebar,
+    {
+      projects,
+      currentFilter,
+      onFilterChange: (p) => {
+        setCurrentFilter(p);
+        setIsMobileMenuOpen(false);
+      },
+      activeTypes,
+      onToggleType: toggleType,
+      stats,
+      getDisplayName,
+      onRenameProject: updateAlias
+    }
+  ))), /* @__PURE__ */ import_react11.default.createElement("main", { className: "flex-1 overflow-y-auto bg-surface-0" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "max-w-3xl mx-auto px-6 py-6" }, currentFilter && /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center gap-3 mb-6 animate-fade-in" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "w-9 h-9 rounded-lg bg-accent-violet/15 flex items-center justify-center" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "text-xs font-bold text-accent-violet" }, getDisplayName(currentFilter).substring(0, 2).toUpperCase())), /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("h2", { className: "text-lg font-bold text-zinc-100" }, getDisplayName(currentFilter)), currentFilter !== getDisplayName(currentFilter) && /* @__PURE__ */ import_react11.default.createElement("span", { className: "text-[11px] font-mono text-zinc-600" }, currentFilter))), /* @__PURE__ */ import_react11.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_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" })),
+    /* @__PURE__ */ import_react11.default.createElement("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ import_react11.default.createElement("path", { d: "M18 6 6 18M6 6l12 12" })),
     "Clear filter"
-  )), currentView === "feed" ? /* @__PURE__ */ import_react10.default.createElement(
+  )), currentView === "feed" ? /* @__PURE__ */ import_react11.default.createElement(
     Feed,
     {
       observations: filteredObservations,
@@ -24579,10 +24852,16 @@ function App() {
       prompts: allPrompts,
       onLoadMore: handleLoadMore,
       isLoading: isLoadingMore,
-      hasMore,
+      hasMore: hasMore.observations || hasMore.summaries || hasMore.prompts,
+      getDisplayName
+    }
+  ) : currentView === "sessions" ? /* @__PURE__ */ import_react11.default.createElement(
+    Sessions,
+    {
+      currentFilter,
       getDisplayName
     }
-  ) : /* @__PURE__ */ import_react10.default.createElement(
+  ) : /* @__PURE__ */ import_react11.default.createElement(
     Analytics,
     {
       currentFilter,
@@ -24594,7 +24873,7 @@ function App() {
 // src/ui/viewer/index.tsx
 var root = import_client.default.createRoot(document.getElementById("root"));
 root.render(
-  /* @__PURE__ */ import_react11.default.createElement(import_react11.default.StrictMode, null, /* @__PURE__ */ import_react11.default.createElement(App, null))
+  /* @__PURE__ */ import_react12.default.createElement(import_react12.default.StrictMode, null, /* @__PURE__ */ import_react12.default.createElement(App, null))
 );
 /*! Bundled license information: