kiro-memory 1.2.2 → 1.4.0

package/plugin/dist/viewer.js

@@ -1083,7 +1083,7 @@ var require_react_development = __commonJS({
           }
           return dispatcher.useContext(Context);
         }
-        function useState5(initialState) {
+        function useState8(initialState) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useState(initialState);
         }
@@ -1091,11 +1091,11 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useReducer(reducer, initialArg, init);
         }
-        function useRef3(initialValue) {
+        function useRef4(initialValue) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useRef(initialValue);
         }
-        function useEffect5(create, deps) {
+        function useEffect7(create, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useEffect(create, deps);
         }
@@ -1107,7 +1107,7 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useLayoutEffect(create, deps);
         }
-        function useCallback3(callback, deps) {
+        function useCallback4(callback, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useCallback(callback, deps);
         }
@@ -1874,19 +1874,19 @@ var require_react_development = __commonJS({
         exports.memo = memo;
         exports.startTransition = startTransition;
         exports.unstable_act = act;
-        exports.useCallback = useCallback3;
+        exports.useCallback = useCallback4;
         exports.useContext = useContext;
         exports.useDebugValue = useDebugValue;
         exports.useDeferredValue = useDeferredValue;
-        exports.useEffect = useEffect5;
+        exports.useEffect = useEffect7;
         exports.useId = useId;
         exports.useImperativeHandle = useImperativeHandle;
         exports.useInsertionEffect = useInsertionEffect;
         exports.useLayoutEffect = useLayoutEffect;
         exports.useMemo = useMemo2;
         exports.useReducer = useReducer;
-        exports.useRef = useRef3;
-        exports.useState = useState5;
+        exports.useRef = useRef4;
+        exports.useState = useState8;
         exports.useSyncExternalStore = useSyncExternalStore;
         exports.useTransition = useTransition;
         exports.version = ReactVersion;
@@ -23581,11 +23581,11 @@ var require_client = __commonJS({
 });
 
 // src/ui/viewer/index.tsx
-var import_react8 = __toESM(require_react(), 1);
+var import_react9 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 
 // src/ui/viewer/App.tsx
-var import_react7 = __toESM(require_react(), 1);
+var import_react8 = __toESM(require_react(), 1);
 
 // src/ui/viewer/components/Header.tsx
 var import_react2 = __toESM(require_react(), 1);
@@ -23594,40 +23594,40 @@ var import_react2 = __toESM(require_react(), 1);
 var import_react = __toESM(require_react(), 1);
 
 // src/ui/viewer/utils/format.ts
-function getBadgeClass(type) {
+function getTypeBadgeClasses(type) {
   const map = {
-    "file-write": "badge--file-write",
-    "file-read": "badge--file-read",
-    "command": "badge--command",
-    "research": "badge--research",
-    "delegation": "badge--delegation",
-    "tool-use": "badge--tool-use"
+    "file-write": { bg: "bg-emerald-500/10 dark:bg-emerald-500/10", text: "text-emerald-600 dark:text-emerald-400", dot: "bg-emerald-500" },
+    "file-read": { bg: "bg-cyan-500/10 dark:bg-cyan-500/10", text: "text-cyan-600 dark:text-cyan-400", dot: "bg-cyan-500" },
+    "command": { bg: "bg-amber-500/10 dark:bg-amber-500/10", text: "text-amber-600 dark:text-amber-400", dot: "bg-amber-500" },
+    "research": { bg: "bg-blue-500/10 dark:bg-blue-500/10", text: "text-blue-600 dark:text-blue-400", dot: "bg-blue-500" },
+    "delegation": { bg: "bg-violet-500/10 dark:bg-violet-500/10", text: "text-violet-600 dark:text-violet-400", dot: "bg-violet-500" },
+    "tool-use": { bg: "bg-zinc-500/10 dark:bg-zinc-500/10", text: "text-zinc-600 dark:text-zinc-400", dot: "bg-zinc-500" }
   };
-  return map[type] || "badge--default";
+  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);
-  if (diff < 60) return "ora";
+  if (diff < 60) return "just now";
   if (diff < 3600) {
     const m = Math.floor(diff / 60);
-    return `${m} min fa`;
+    return `${m}m ago`;
   }
   if (diff < 86400) {
     const h = Math.floor(diff / 3600);
-    return `${h}h fa`;
+    return `${h}h ago`;
   }
-  if (diff < 172800) return "ieri";
+  if (diff < 172800) return "yesterday";
   if (diff < 604800) {
     const d = Math.floor(diff / 86400);
-    return `${d} giorni fa`;
+    return `${d}d ago`;
   }
   if (diff < 2592e3) {
     const w = Math.floor(diff / 604800);
-    return `${w} sett. fa`;
+    return `${w}w ago`;
   }
   const date = new Date(epochSeconds * 1e3);
-  return date.toLocaleDateString("it-IT", { day: "numeric", month: "short" });
+  return date.toLocaleDateString("en-US", { day: "numeric", month: "short" });
 }
 
 // src/ui/viewer/components/SearchBar.tsx
@@ -23636,25 +23636,23 @@ function SearchBar() {
   const [results, setResults] = (0, import_react.useState)(null);
   const [isOpen, setIsOpen] = (0, import_react.useState)(false);
   const [isSearching, setIsSearching] = (0, import_react.useState)(false);
+  const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
   const inputRef = (0, import_react.useRef)(null);
-  const containerRef = (0, import_react.useRef)(null);
   const debounceRef = (0, import_react.useRef)();
   const doSearch = (0, import_react.useCallback)(async (q) => {
     if (!q.trim()) {
       setResults(null);
-      setIsOpen(false);
       return;
     }
     setIsSearching(true);
     try {
-      const res = await fetch(`/api/search?q=${encodeURIComponent(q)}&limit=10`);
+      const res = await fetch(`/api/search?q=${encodeURIComponent(q)}&limit=8`);
       if (res.ok) {
-        const data = await res.json();
-        setResults(data);
-        setIsOpen(true);
+        setResults(await res.json());
+        setSelectedIndex(0);
       }
-    } catch (error) {
-      console.error("Ricerca fallita:", error);
+    } catch (err) {
+      console.error("Search failed:", err);
     } finally {
       setIsSearching(false);
     }
@@ -23663,136 +23661,257 @@ function SearchBar() {
     const value = e.target.value;
     setQuery(value);
     if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => doSearch(value), 300);
+    debounceRef.current = setTimeout(() => doSearch(value), 250);
   }, [doSearch]);
+  const close = (0, import_react.useCallback)(() => {
+    setIsOpen(false);
+    setQuery("");
+    setResults(null);
+    setSelectedIndex(0);
+  }, []);
   (0, import_react.useEffect)(() => {
     const handler = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
         e.preventDefault();
-        inputRef.current?.focus();
-      }
-      if (e.key === "Escape") {
-        setIsOpen(false);
-        inputRef.current?.blur();
+        setIsOpen(true);
+        setTimeout(() => inputRef.current?.focus(), 50);
       }
+      if (e.key === "Escape") close();
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, []);
-  (0, import_react.useEffect)(() => {
-    const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, []);
-  const totalResults = results ? results.observations.length + results.summaries.length : 0;
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "search-container", ref: containerRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: "search-input-wrapper" }, /* @__PURE__ */ import_react.default.createElement("svg", { className: "search-icon", viewBox: "0 0 16 16", fill: "currentColor" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" })), /* @__PURE__ */ import_react.default.createElement(
+  }, [close]);
+  const total = results ? results.observations.length + results.summaries.length : 0;
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      onClick: () => {
+        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"
+    },
+    /* @__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(
     "input",
     {
       ref: inputRef,
       type: "text",
-      className: "search-input",
-      placeholder: "Search observations, summaries...",
+      className: "flex-1 bg-transparent border-none outline-none text-sm text-zinc-100 cmd-input",
+      placeholder: "Search observations, summaries, concepts...",
       value: query,
       onChange: handleChange,
-      onFocus: () => {
-        if (results && totalResults > 0) setIsOpen(true);
-      }
+      autoFocus: true
     }
-  ), /* @__PURE__ */ import_react.default.createElement("span", { className: "search-shortcut" }, navigator.platform.includes("Mac") ? "\u2318K" : "Ctrl+K")), isOpen && results && /* @__PURE__ */ import_react.default.createElement("div", { className: "search-results" }, totalResults === 0 && !isSearching && /* @__PURE__ */ import_react.default.createElement("div", { className: "search-empty" }, "No results for \u201C", query, "\u201D"), results.observations.map((obs) => /* @__PURE__ */ import_react.default.createElement("div", { key: `obs-${obs.id}`, className: "search-result-item" }, /* @__PURE__ */ import_react.default.createElement("span", { className: `badge ${getBadgeClass(obs.type)}` }, obs.type), /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "search-result-title" }, obs.title), obs.text && /* @__PURE__ */ import_react.default.createElement("div", { className: "search-result-snippet" }, obs.text.substring(0, 120)), /* @__PURE__ */ import_react.default.createElement("div", { className: "search-result-meta" }, obs.project, " \xB7 ", timeAgo(obs.created_at_epoch))))), results.summaries.map((sum) => /* @__PURE__ */ import_react.default.createElement("div", { key: `sum-${sum.id}`, className: "search-result-item" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "badge badge--summary" }, "summary"), /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "search-result-title" }, sum.request || "Session Summary"), sum.completed && /* @__PURE__ */ import_react.default.createElement("div", { className: "search-result-snippet" }, sum.completed.substring(0, 120)), /* @__PURE__ */ import_react.default.createElement("div", { className: "search-result-meta" }, sum.project, " \xB7 ", timeAgo(sum.created_at_epoch)))))));
+  ), 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"))))));
 }
 
 // src/ui/viewer/components/Header.tsx
 function Header({ isConnected, resolvedTheme, onThemeToggle }) {
-  return /* @__PURE__ */ import_react2.default.createElement("header", { className: "header" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "header-brand" }, /* @__PURE__ */ import_react2.default.createElement("span", { className: `status-dot ${isConnected ? "connected" : "disconnected"}` }), /* @__PURE__ */ import_react2.default.createElement("h1", null, "Kiro Memory")), /* @__PURE__ */ import_react2.default.createElement(SearchBar, null), /* @__PURE__ */ import_react2.default.createElement("div", { className: "header-controls" }, /* @__PURE__ */ import_react2.default.createElement(
+  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" }, "ContextKit"), /* @__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(
     "button",
     {
-      className: "theme-btn",
       onClick: onThemeToggle,
-      title: resolvedTheme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+      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"
     },
-    resolvedTheme === "dark" ? "\u2600" : "\u263E"
-  )));
+    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_COLORS = {
-  "file-write": "var(--green)",
-  "command": "var(--amber)",
-  "research": "var(--blue)",
-  "delegation": "var(--accent)",
-  "tool-use": "var(--text-muted)"
+var TYPE_CONFIG = {
+  "file-write": { color: "bg-accent-green", label: "File writes" },
+  "file-read": { color: "bg-accent-cyan", label: "File 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" }
 };
+var PROJECT_COLORS = [
+  { bg: "bg-accent-violet/15", text: "text-accent-violet", ring: "ring-accent-violet/30" },
+  { bg: "bg-accent-blue/15", text: "text-accent-blue", ring: "ring-accent-blue/30" },
+  { bg: "bg-accent-green/15", text: "text-accent-green", ring: "ring-accent-green/30" },
+  { bg: "bg-accent-amber/15", text: "text-accent-amber", ring: "ring-accent-amber/30" },
+  { bg: "bg-accent-rose/15", text: "text-accent-rose", ring: "ring-accent-rose/30" },
+  { bg: "bg-accent-cyan/15", text: "text-accent-cyan", ring: "ring-accent-cyan/30" },
+  { bg: "bg-accent-orange/15", text: "text-accent-orange", ring: "ring-accent-orange/30" }
+];
+function getProjectColorByName(name) {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = (hash << 5) - hash + name.charCodeAt(i) | 0;
+  return PROJECT_COLORS[Math.abs(hash) % PROJECT_COLORS.length];
+}
 function Sidebar({
   projects,
   currentFilter,
   onFilterChange,
   activeTypes,
   onToggleType,
-  stats
+  stats,
+  getDisplayName,
+  onRenameProject
 }) {
-  return /* @__PURE__ */ import_react3.default.createElement("aside", { className: "sidebar" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "sidebar-section" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "sidebar-title" }, "Projects"), /* @__PURE__ */ import_react3.default.createElement(
-    "div",
-    {
-      className: `sidebar-item ${currentFilter === "" ? "active" : ""}`,
-      onClick: () => onFilterChange("")
-    },
-    "All Projects"
-  ), projects.map((project) => /* @__PURE__ */ import_react3.default.createElement(
-    "div",
+  const [editingProject, setEditingProject] = (0, import_react3.useState)(null);
+  const [editValue, setEditValue] = (0, import_react3.useState)("");
+  const editInputRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (editingProject && editInputRef.current) {
+      editInputRef.current.focus();
+      editInputRef.current.select();
+    }
+  }, [editingProject]);
+  const startEditing = (project, e) => {
+    e.stopPropagation();
+    setEditingProject(project);
+    setEditValue(getDisplayName(project));
+  };
+  const confirmEdit = async () => {
+    if (editingProject && editValue.trim()) {
+      await onRenameProject(editingProject, editValue.trim());
+    }
+    setEditingProject(null);
+  };
+  const cancelEdit = () => {
+    setEditingProject(null);
+    setEditValue("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") confirmEdit();
+    if (e.key === "Escape") cancelEdit();
+  };
+  return /* @__PURE__ */ import_react3.default.createElement("aside", { className: "h-full overflow-y-auto bg-surface-1 border-r border-border flex flex-col" }, /* @__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" }, "Projects"), /* @__PURE__ */ import_react3.default.createElement(
+    "button",
     {
-      key: project,
-      className: `sidebar-item ${currentFilter === project ? "active" : ""}`,
-      onClick: () => onFilterChange(project)
+      onClick: () => onFilterChange(""),
+      className: `w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all text-left mb-0.5 ${currentFilter === "" ? "bg-accent-violet/10 text-accent-violet font-semibold" : "text-zinc-400 hover:text-zinc-200 hover:bg-surface-2"}`
     },
-    project
-  ))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "sidebar-section" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "sidebar-title" }, "Type Filters"), Object.entries(TYPE_COLORS).map(([type, color]) => /* @__PURE__ */ import_react3.default.createElement("label", { key: type, className: "filter-checkbox" }, /* @__PURE__ */ import_react3.default.createElement(
-    "input",
-    {
-      type: "checkbox",
-      checked: activeTypes.has(type),
-      onChange: () => onToggleType(type)
-    }
-  ), /* @__PURE__ */ import_react3.default.createElement("span", { className: "filter-dot", style: { background: color } }), type))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "sidebar-section" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "sidebar-title" }, "Stats"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "stats-grid" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "stat-card" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "stat-value" }, stats.observations), /* @__PURE__ */ import_react3.default.createElement("div", { className: "stat-label" }, "Observations")), /* @__PURE__ */ import_react3.default.createElement("div", { className: "stat-card" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "stat-value" }, stats.summaries), /* @__PURE__ */ import_react3.default.createElement("div", { className: "stat-label" }, "Summaries")), /* @__PURE__ */ import_react3.default.createElement("div", { className: "stat-card" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "stat-value" }, stats.prompts), /* @__PURE__ */ import_react3.default.createElement("div", { className: "stat-label" }, "Prompts")), /* @__PURE__ */ import_react3.default.createElement("div", { className: "stat-card" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "stat-value" }, projects.length), /* @__PURE__ */ import_react3.default.createElement("div", { className: "stat-label" }, "Projects")))));
+    /* @__PURE__ */ import_react3.default.createElement("div", { className: "w-7 h-7 rounded-md bg-accent-violet/15 flex items-center justify-center flex-shrink-0" }, /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-3.5 h-3.5 text-accent-violet", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("rect", { x: "3", y: "3", width: "7", height: "7" }), /* @__PURE__ */ import_react3.default.createElement("rect", { x: "14", y: "3", width: "7", height: "7" }), /* @__PURE__ */ import_react3.default.createElement("rect", { x: "3", y: "14", width: "7", height: "7" }), /* @__PURE__ */ import_react3.default.createElement("rect", { x: "14", y: "14", width: "7", height: "7" }))),
+    /* @__PURE__ */ import_react3.default.createElement("span", { className: "flex-1" }, "All projects"),
+    /* @__PURE__ */ import_react3.default.createElement("span", { className: "text-xs text-zinc-600 font-mono tabular-nums" }, projects.length)
+  ), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex flex-col gap-0.5 mt-1" }, projects.map((project) => {
+    const pc = getProjectColorByName(project);
+    const isEditing = editingProject === project;
+    const isActive = currentFilter === project;
+    const initials = getDisplayName(project).substring(0, 2).toUpperCase();
+    return /* @__PURE__ */ import_react3.default.createElement("div", { key: project, className: "group" }, isEditing ? /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-center gap-2 px-3 py-1.5 rounded-lg bg-surface-3 border border-border" }, /* @__PURE__ */ import_react3.default.createElement(
+      "input",
+      {
+        ref: editInputRef,
+        type: "text",
+        value: editValue,
+        onChange: (e) => setEditValue(e.target.value),
+        onKeyDown: handleKeyDown,
+        onBlur: confirmEdit,
+        className: "flex-1 min-w-0 bg-transparent border-none outline-none text-sm text-zinc-200"
+      }
+    ), /* @__PURE__ */ import_react3.default.createElement("button", { onClick: confirmEdit, className: "text-accent-green hover:text-accent-green/80 p-0.5" }, /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5" }, /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "20 6 9 17 4 12" }))), /* @__PURE__ */ import_react3.default.createElement("button", { onClick: cancelEdit, className: "text-zinc-500 hover:text-zinc-300 p-0.5" }, /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5" }, /* @__PURE__ */ import_react3.default.createElement("path", { d: "M18 6 6 18M6 6l12 12" })))) : /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        onClick: () => onFilterChange(project),
+        className: `w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all text-left ${isActive ? "bg-surface-3 text-zinc-100 font-medium" : "text-zinc-400 hover:text-zinc-200 hover:bg-surface-2"}`
+      },
+      /* @__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)),
+      /* @__PURE__ */ import_react3.default.createElement(
+        "span",
+        {
+          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"
+        },
+        /* @__PURE__ */ import_react3.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_react3.default.createElement("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }))
+      )
+    ));
+  }))), /* @__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" }, "Filters"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex flex-col gap-0.5" }, Object.entries(TYPE_CONFIG).map(([type, config]) => {
+    const isActive = activeTypes.has(type);
+    return /* @__PURE__ */ import_react3.default.createElement(
+      "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"}`
+      },
+      /* @__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("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" }, [
+    { label: "Observations", value: stats.observations, color: "text-accent-violet" },
+    { 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" }, "ContextKit v1.4.0")));
 }
 
 // src/ui/viewer/components/Feed.tsx
 var import_react4 = __toESM(require_react(), 1);
-function Feed({ observations, summaries, prompts, onLoadMore, isLoading, hasMore }) {
+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" },
+  "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" }
+};
+function getTypeStyle(type) {
+  return TYPE_STYLES[type] || TYPE_STYLES["tool-use"];
+}
+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
   );
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "feed" }, items.map((item) => {
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "space-y-3" }, items.map((item, index) => {
+    const stagger = index < 8 ? `stagger-${index + 1}` : "";
     if ("type" in item && "title" in item) {
-      return /* @__PURE__ */ import_react4.default.createElement(ObservationCard, { key: `obs-${item.id}`, obs: 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 }));
     } else if ("request" in item) {
-      return /* @__PURE__ */ import_react4.default.createElement(SummaryCard, { key: `sum-${item.id}`, summary: 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 }));
     } else {
-      return /* @__PURE__ */ import_react4.default.createElement(PromptCard, { key: `prompt-${item.id}`, prompt: item });
+      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 }));
     }
-  }), hasMore && /* @__PURE__ */ import_react4.default.createElement(
+  }), hasMore && items.length > 0 && /* @__PURE__ */ import_react4.default.createElement("div", { className: "pt-2" }, /* @__PURE__ */ import_react4.default.createElement(
     "button",
     {
-      className: "load-more-btn",
       onClick: onLoadMore,
-      disabled: isLoading
+      disabled: isLoading,
+      className: "flex items-center justify-center gap-2 w-full py-3 rounded-lg transition-all text-sm font-medium bg-surface-2 border border-border text-zinc-400 hover:bg-surface-3 hover:text-zinc-200 hover:border-border-hover disabled:opacity-40 disabled:cursor-not-allowed"
     },
-    isLoading ? "Caricamento..." : "Carica altri"
-  ), items.length === 0 && !isLoading && /* @__PURE__ */ import_react4.default.createElement("div", { className: "empty-state" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "empty-state-icon" }, /* @__PURE__ */ import_react4.default.createElement("svg", { viewBox: "0 0 24 24", width: "48", height: "48", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }, /* @__PURE__ */ import_react4.default.createElement("path", { d: "M12 6v6l4 2", strokeLinecap: "round" }), /* @__PURE__ */ import_react4.default.createElement("circle", { cx: "12", cy: "12", r: "10" }))), /* @__PURE__ */ import_react4.default.createElement("p", null, "Nessun dato disponibile."), /* @__PURE__ */ import_react4.default.createElement("p", { className: "empty-state-hint" }, "Avvia una sessione con Kiro per iniziare a raccogliere contesto.")));
+    isLoading ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-4 h-4 border-2 border-accent-violet/30 border-t-accent-violet rounded-full animate-spin" }), "Loading...") : /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.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_react4.default.createElement("path", { d: "m6 9 6 6 6-6" })), "Load more")
+  )), items.length === 0 && !isLoading && /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex flex-col items-center justify-center py-20 text-center" }, /* @__PURE__ */ import_react4.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_react4.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_react4.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_react4.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_react4.default.createElement("path", { d: "M9 18h6" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M10 22h4" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M12 13v5" }))), /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-base font-semibold text-zinc-300 mb-2" }, "No memories yet"), /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-sm text-zinc-500 max-w-xs leading-relaxed" }, "Start a coding session to begin capturing context automatically.")), items.length === 0 && isLoading && /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex flex-col items-center justify-center py-20" }, /* @__PURE__ */ import_react4.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_react4.default.createElement("p", { className: "text-sm text-zinc-500" }, "Loading memories...")));
 }
-function ObservationCard({ obs }) {
-  const cardClass = `card card--${obs.type.replace(/\s+/g, "-")}`;
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: cardClass }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-header" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: `badge ${getBadgeClass(obs.type)}` }, obs.type), /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-project" }, obs.project), /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-time" }, timeAgo(obs.created_at_epoch))), /* @__PURE__ */ import_react4.default.createElement("h3", { className: "card-title" }, obs.title), obs.subtitle && /* @__PURE__ */ import_react4.default.createElement("p", { className: "card-subtitle" }, obs.subtitle), obs.text && /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-content" }, /* @__PURE__ */ import_react4.default.createElement("p", null, obs.text)), obs.narrative && /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-section" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-section-label" }, "Narrativa"), /* @__PURE__ */ import_react4.default.createElement("p", null, obs.narrative)), obs.facts && /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-section" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-section-label" }, "Fatti"), /* @__PURE__ */ import_react4.default.createElement("p", null, obs.facts)), (obs.files_modified || obs.files_read) && /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-files" }, obs.files_modified && /* @__PURE__ */ import_react4.default.createElement("span", { className: "file-pill file-pill--modified", title: "File modificati" }, "\u270E ", obs.files_modified.split(",").length, " file"), obs.files_read && /* @__PURE__ */ import_react4.default.createElement("span", { className: "file-pill file-pill--read", title: "File letti" }, "\u25C9 ", obs.files_read.split(",").length, " file")), obs.concepts && /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-tags" }, obs.concepts.split(", ").map((concept, i) => /* @__PURE__ */ import_react4.default.createElement("span", { key: i, className: "tag" }, concept))));
+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))));
 }
-function SummaryCard({ summary }) {
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "card card--summary" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-header" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "badge badge--summary" }, "summary"), /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-project" }, summary.project), /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-time" }, timeAgo(summary.created_at_epoch))), summary.request && /* @__PURE__ */ import_react4.default.createElement("h3", { className: "card-title" }, summary.request), summary.investigated && /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-section" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-section-label" }, "Indagato"), /* @__PURE__ */ import_react4.default.createElement("p", null, summary.investigated)), summary.learned && /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-section" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-section-label" }, "Appreso"), /* @__PURE__ */ import_react4.default.createElement("p", null, summary.learned)), summary.completed && /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-section" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-section-label" }, "Completato"), /* @__PURE__ */ import_react4.default.createElement("p", null, summary.completed)), summary.next_steps && /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-section" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-section-label" }, "Prossimi passi"), /* @__PURE__ */ import_react4.default.createElement("p", null, summary.next_steps)), summary.notes && /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-section" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-section-label" }, "Note"), /* @__PURE__ */ import_react4.default.createElement("p", null, summary.notes)));
+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: "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)))));
 }
-function PromptCard({ prompt }) {
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "card card--prompt" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-header" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "badge badge--prompt" }, "prompt #", prompt.prompt_number), /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-project" }, prompt.project), /* @__PURE__ */ import_react4.default.createElement("span", { className: "card-time" }, timeAgo(prompt.created_at_epoch))), /* @__PURE__ */ import_react4.default.createElement("div", { className: "card-content card-content--mono" }, /* @__PURE__ */ import_react4.default.createElement("p", null, prompt.prompt_text)));
+function PromptCard({ prompt, getDisplayName }) {
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "bg-surface-1 border border-border rounded-lg border-l-[3px] border-l-rose-500 shadow-card hover:shadow-card-hover hover:border-border-hover transition-all" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "px-4 pt-4 pb-2" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-center gap-2 mb-2" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide px-2 py-0.5 rounded-md bg-rose-500/10 text-rose-400" }, /* @__PURE__ */ import_react4.default.createElement("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react4.default.createElement("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })), "Prompt #", prompt.prompt_number), /* @__PURE__ */ import_react4.default.createElement("span", { className: "inline-flex items-center text-[11px] font-medium px-2 py-0.5 rounded-md bg-accent-violet/10 text-accent-violet" }, getDisplayName(prompt.project)), /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-xs text-zinc-600 font-mono ml-auto" }, timeAgo(prompt.created_at_epoch)))), /* @__PURE__ */ import_react4.default.createElement("div", { className: "px-4 pb-4" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "p-3 rounded-md bg-surface-0 border border-border font-mono text-sm text-zinc-300 leading-relaxed whitespace-pre-wrap break-words" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-rose-400 select-none mr-2" }, "$"), prompt.prompt_text)));
 }
 
 // src/ui/viewer/hooks/useSSE.ts
@@ -23820,7 +23939,7 @@ function useSSE() {
           setState((prev) => ({ ...prev, observations }));
         }
       } catch (err) {
-        console.error("Fetch observations fallito:", err);
+        console.error("Failed to fetch observations:", err);
       }
     };
     const fetchSummaries = async () => {
@@ -23831,7 +23950,7 @@ function useSSE() {
           setState((prev) => ({ ...prev, summaries }));
         }
       } catch (err) {
-        console.error("Fetch summaries fallito:", err);
+        console.error("Failed to fetch summaries:", err);
       }
     };
     const fetchPrompts = async () => {
@@ -23842,7 +23961,7 @@ function useSSE() {
           setState((prev) => ({ ...prev, prompts }));
         }
       } catch (err) {
-        console.error("Fetch prompts fallito:", err);
+        console.error("Failed to fetch prompts:", err);
       }
     };
     const fetchProjects = async () => {
@@ -23853,7 +23972,7 @@ function useSSE() {
           setState((prev) => ({ ...prev, projects }));
         }
       } catch (err) {
-        console.error("Fetch projects fallito:", err);
+        console.error("Failed to fetch projects:", err);
       }
     };
     const connect = () => {
@@ -23901,8 +24020,8 @@ function useSSE() {
 // src/ui/viewer/hooks/useTheme.ts
 var import_react6 = __toESM(require_react(), 1);
 function useTheme() {
-  const [preference, setPreference] = (0, import_react6.useState)("system");
-  const [resolvedTheme, setResolvedTheme] = (0, import_react6.useState)("light");
+  const [preference, setPreference] = (0, import_react6.useState)("dark");
+  const [resolvedTheme, setResolvedTheme] = (0, import_react6.useState)("dark");
   (0, import_react6.useEffect)(() => {
     const saved = localStorage.getItem("kiro-memory-theme");
     if (saved) {
@@ -23910,19 +24029,31 @@ function useTheme() {
     }
   }, []);
   (0, import_react6.useEffect)(() => {
-    const resolveTheme = () => {
-      if (preference === "system") {
-        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-        setResolvedTheme(prefersDark ? "dark" : "light");
-      } else {
-        setResolvedTheme(preference);
-      }
-    };
-    resolveTheme();
+    let resolved;
+    if (preference === "system") {
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      resolved = prefersDark ? "dark" : "light";
+    } else {
+      resolved = preference;
+    }
+    setResolvedTheme(resolved);
+    if (resolved === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [preference]);
+  (0, import_react6.useEffect)(() => {
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => {
       if (preference === "system") {
-        setResolvedTheme(e.matches ? "dark" : "light");
+        const resolved = e.matches ? "dark" : "light";
+        setResolvedTheme(resolved);
+        if (resolved === "dark") {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
+        }
       }
     };
     mediaQuery.addEventListener("change", handler);
@@ -23935,6 +24066,48 @@ function useTheme() {
   return { preference, resolvedTheme, setThemePreference };
 }
 
+// src/ui/viewer/hooks/useProjectAliases.ts
+var import_react7 = __toESM(require_react(), 1);
+function useProjectAliases() {
+  const [aliases, setAliases] = (0, import_react7.useState)({});
+  const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
+    const fetchAliases = async () => {
+      try {
+        const res = await fetch("/api/project-aliases");
+        if (res.ok) {
+          const data = await res.json();
+          setAliases(data);
+        }
+      } catch (err) {
+        console.error("Failed to fetch project aliases:", err);
+      }
+    };
+    fetchAliases();
+  }, []);
+  const getDisplayName = (0, import_react7.useCallback)((project) => {
+    return aliases[project] || project;
+  }, [aliases]);
+  const updateAlias = (0, import_react7.useCallback)(async (project, displayName) => {
+    setIsLoading(true);
+    try {
+      const res = await fetch(`/api/project-aliases/${encodeURIComponent(project)}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ displayName })
+      });
+      if (res.ok) {
+        setAliases((prev) => ({ ...prev, [project]: displayName }));
+      }
+    } catch (err) {
+      console.error("Failed to update project alias:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  return { aliases, getDisplayName, updateAlias, isLoading };
+}
+
 // src/ui/viewer/utils/data.ts
 function mergeAndDeduplicateByProject(liveData, paginatedData) {
   const seen = /* @__PURE__ */ new Set();
@@ -23959,39 +24132,40 @@ function mergeAndDeduplicateByProject(liveData, paginatedData) {
 }
 
 // src/ui/viewer/App.tsx
-var TYPE_FILTERS = ["file-write", "command", "research", "delegation", "tool-use"];
+var TYPE_FILTERS = ["file-write", "file-read", "command", "research", "delegation", "tool-use"];
 function App() {
-  const [currentFilter, setCurrentFilter] = (0, import_react7.useState)("");
-  const [activeTypes, setActiveTypes] = (0, import_react7.useState)(new Set(TYPE_FILTERS));
-  const [paginatedObservations, setPaginatedObservations] = (0, import_react7.useState)([]);
-  const [paginatedSummaries, setPaginatedSummaries] = (0, import_react7.useState)([]);
-  const [paginatedPrompts, setPaginatedPrompts] = (0, import_react7.useState)([]);
-  const [isLoadingMore, setIsLoadingMore] = (0, import_react7.useState)(false);
-  const [hasMore, setHasMore] = (0, import_react7.useState)(true);
+  const [currentFilter, setCurrentFilter] = (0, import_react8.useState)("");
+  const [activeTypes, setActiveTypes] = (0, import_react8.useState)(new Set(TYPE_FILTERS));
+  const [paginatedObservations, setPaginatedObservations] = (0, import_react8.useState)([]);
+  const [paginatedSummaries, setPaginatedSummaries] = (0, import_react8.useState)([]);
+  const [paginatedPrompts, setPaginatedPrompts] = (0, import_react8.useState)([]);
+  const [isLoadingMore, setIsLoadingMore] = (0, import_react8.useState)(false);
+  const [hasMore, setHasMore] = (0, import_react8.useState)(true);
   const { observations, summaries, prompts, projects, isConnected } = useSSE();
   const { resolvedTheme, setThemePreference } = useTheme();
-  const allObservations = (0, import_react7.useMemo)(() => {
+  const { getDisplayName, updateAlias } = useProjectAliases();
+  const allObservations = (0, import_react8.useMemo)(() => {
     if (currentFilter) return paginatedObservations;
     return mergeAndDeduplicateByProject(observations, paginatedObservations);
   }, [observations, paginatedObservations, currentFilter]);
-  const allSummaries = (0, import_react7.useMemo)(() => {
+  const allSummaries = (0, import_react8.useMemo)(() => {
     if (currentFilter) return paginatedSummaries;
     return mergeAndDeduplicateByProject(summaries, paginatedSummaries);
   }, [summaries, paginatedSummaries, currentFilter]);
-  const allPrompts = (0, import_react7.useMemo)(() => {
+  const allPrompts = (0, import_react8.useMemo)(() => {
     if (currentFilter) return paginatedPrompts;
     return mergeAndDeduplicateByProject(prompts, paginatedPrompts);
   }, [prompts, paginatedPrompts, currentFilter]);
-  const filteredObservations = (0, import_react7.useMemo)(
+  const filteredObservations = (0, import_react8.useMemo)(
     () => allObservations.filter((o) => activeTypes.has(o.type)),
     [allObservations, activeTypes]
   );
-  const stats = (0, import_react7.useMemo)(() => ({
+  const stats = (0, import_react8.useMemo)(() => ({
     observations: allObservations.length,
     summaries: allSummaries.length,
     prompts: allPrompts.length
   }), [allObservations, allSummaries, allPrompts]);
-  const toggleType = (0, import_react7.useCallback)((type) => {
+  const toggleType = (0, import_react8.useCallback)((type) => {
     setActiveTypes((prev) => {
       const next = new Set(prev);
       if (next.has(type)) next.delete(type);
@@ -23999,15 +24173,36 @@ function App() {
       return next;
     });
   }, []);
-  const handleLoadMore = (0, import_react7.useCallback)(async () => {
+  const fetchForProject = (0, import_react8.useCallback)(async (project) => {
+    setIsLoadingMore(true);
+    try {
+      const params = new URLSearchParams({
+        offset: "0",
+        limit: "30",
+        ...project && { project }
+      });
+      const [obsRes, sumRes, promptRes] = await Promise.all([
+        fetch(`/api/observations?${params}`),
+        fetch(`/api/summaries?${params}`),
+        fetch(`/api/prompts?${params}`)
+      ]);
+      if (obsRes.ok) setPaginatedObservations(await obsRes.json());
+      if (sumRes.ok) setPaginatedSummaries(await sumRes.json());
+      if (promptRes.ok) setPaginatedPrompts(await promptRes.json());
+    } catch (error) {
+      console.error("Failed to load data:", error);
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, []);
+  const handleLoadMore = (0, import_react8.useCallback)(async () => {
     if (isLoadingMore) return;
     setIsLoadingMore(true);
     try {
       const offset = paginatedObservations.length;
-      const limit = 20;
       const params = new URLSearchParams({
         offset: String(offset),
-        limit: String(limit),
+        limit: "20",
         ...currentFilter && { project: currentFilter }
       });
       const [obsRes, sumRes, promptRes] = await Promise.all([
@@ -24033,25 +24228,28 @@ function App() {
       }
       if (newItems === 0) setHasMore(false);
     } catch (error) {
-      console.error("Errore caricamento dati:", error);
+      console.error("Failed to load more data:", error);
     } finally {
       setIsLoadingMore(false);
     }
   }, [currentFilter, paginatedObservations.length, isLoadingMore]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setPaginatedObservations([]);
     setPaginatedSummaries([]);
     setPaginatedPrompts([]);
     setHasMore(true);
-  }, [currentFilter]);
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "app", "data-theme": resolvedTheme }, /* @__PURE__ */ import_react7.default.createElement(
+    if (currentFilter) {
+      fetchForProject(currentFilter);
+    }
+  }, [currentFilter, fetchForProject]);
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "h-screen overflow-hidden flex flex-col bg-surface-0" }, /* @__PURE__ */ import_react8.default.createElement(
     Header,
     {
       isConnected,
       resolvedTheme,
       onThemeToggle: () => setThemePreference(resolvedTheme === "dark" ? "light" : "dark")
     }
-  ), /* @__PURE__ */ import_react7.default.createElement(
+  ), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex flex-1 overflow-hidden" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "hidden md:flex w-[260px] flex-shrink-0" }, /* @__PURE__ */ import_react8.default.createElement(
     Sidebar,
     {
       projects,
@@ -24059,9 +24257,19 @@ function App() {
       onFilterChange: setCurrentFilter,
       activeTypes,
       onToggleType: toggleType,
-      stats
+      stats,
+      getDisplayName,
+      onRenameProject: updateAlias
     }
-  ), /* @__PURE__ */ import_react7.default.createElement("div", { className: "main" }, /* @__PURE__ */ import_react7.default.createElement(
+  )), /* @__PURE__ */ import_react8.default.createElement("main", { className: "flex-1 overflow-y-auto bg-surface-0" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "max-w-3xl mx-auto px-6 py-6" }, currentFilter && /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-3 mb-6 animate-fade-in" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-9 h-9 rounded-lg bg-accent-violet/15 flex items-center justify-center" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-xs font-bold text-accent-violet" }, getDisplayName(currentFilter).substring(0, 2).toUpperCase())), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("h2", { className: "text-lg font-bold text-zinc-100" }, getDisplayName(currentFilter)), currentFilter !== getDisplayName(currentFilter) && /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[11px] font-mono text-zinc-600" }, currentFilter))), /* @__PURE__ */ import_react8.default.createElement(
+    "button",
+    {
+      onClick: () => setCurrentFilter(""),
+      className: "ml-auto flex items-center gap-1.5 text-xs text-zinc-500 hover:text-zinc-300 transition-colors px-3 py-1.5 rounded-lg hover:bg-surface-2 border border-transparent hover:border-border"
+    },
+    /* @__PURE__ */ import_react8.default.createElement("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ import_react8.default.createElement("path", { d: "M18 6 6 18M6 6l12 12" })),
+    "Clear filter"
+  )), /* @__PURE__ */ import_react8.default.createElement(
     Feed,
     {
       observations: filteredObservations,
@@ -24069,15 +24277,16 @@ function App() {
       prompts: allPrompts,
       onLoadMore: handleLoadMore,
       isLoading: isLoadingMore,
-      hasMore
+      hasMore,
+      getDisplayName
     }
-  )));
+  )))));
 }
 
 // src/ui/viewer/index.tsx
 var root = import_client.default.createRoot(document.getElementById("root"));
 root.render(
-  /* @__PURE__ */ import_react8.default.createElement(import_react8.default.StrictMode, null, /* @__PURE__ */ import_react8.default.createElement(App, null))
+  /* @__PURE__ */ import_react9.default.createElement(import_react9.default.StrictMode, null, /* @__PURE__ */ import_react9.default.createElement(App, null))
 );
 /*! Bundled license information: