kiro-memory 1.0.4 → 1.1.0

package/plugin/dist/viewer.js

@@ -1091,7 +1091,7 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useReducer(reducer, initialArg, init);
         }
-        function useRef(initialValue) {
+        function useRef3(initialValue) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useRef(initialValue);
         }
@@ -1885,7 +1885,7 @@ var require_react_development = __commonJS({
         exports.useLayoutEffect = useLayoutEffect;
         exports.useMemo = useMemo2;
         exports.useReducer = useReducer;
-        exports.useRef = useRef;
+        exports.useRef = useRef3;
         exports.useState = useState5;
         exports.useSyncExternalStore = useSyncExternalStore;
         exports.useTransition = useTransition;
@@ -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 React5 = require_react();
+        var React7 = require_react();
         var Scheduler = require_scheduler();
-        var ReactSharedInternals = React5.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+        var ReactSharedInternals = React7.__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) {
-                React5.Children.forEach(props.children, function(child) {
+                React7.Children.forEach(props.children, function(child) {
                   if (child == null) {
                     return;
                   }
@@ -23581,196 +23581,334 @@ var require_client = __commonJS({
 });
 
 // src/ui/viewer/index.tsx
-var import_react7 = __toESM(require_react(), 1);
+var import_react8 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 
 // src/ui/viewer/App.tsx
-var import_react6 = __toESM(require_react(), 1);
+var import_react7 = __toESM(require_react(), 1);
 
 // src/ui/viewer/components/Header.tsx
+var import_react2 = __toESM(require_react(), 1);
+
+// src/ui/viewer/components/SearchBar.tsx
 var import_react = __toESM(require_react(), 1);
-function Header({
-  isConnected,
+
+// src/ui/viewer/utils/format.ts
+function getBadgeClass(type) {
+  const map = {
+    "file-write": "badge--file-write",
+    "command": "badge--command",
+    "research": "badge--research",
+    "delegation": "badge--delegation",
+    "tool-use": "badge--tool-use"
+  };
+  return map[type] || "badge--default";
+}
+function timeAgo(epochSeconds) {
+  const now = Date.now() / 1e3;
+  const diff = Math.max(0, now - epochSeconds);
+  if (diff < 60) return "ora";
+  if (diff < 3600) {
+    const m = Math.floor(diff / 60);
+    return `${m} min fa`;
+  }
+  if (diff < 86400) {
+    const h = Math.floor(diff / 3600);
+    return `${h}h fa`;
+  }
+  if (diff < 172800) return "ieri";
+  if (diff < 604800) {
+    const d = Math.floor(diff / 86400);
+    return `${d} giorni fa`;
+  }
+  if (diff < 2592e3) {
+    const w = Math.floor(diff / 604800);
+    return `${w} sett. fa`;
+  }
+  const date = new Date(epochSeconds * 1e3);
+  return date.toLocaleDateString("it-IT", { day: "numeric", month: "short" });
+}
+
+// src/ui/viewer/components/SearchBar.tsx
+function SearchBar() {
+  const [query, setQuery] = (0, import_react.useState)("");
+  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 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`);
+      if (res.ok) {
+        const data = await res.json();
+        setResults(data);
+        setIsOpen(true);
+      }
+    } catch (error) {
+      console.error("Ricerca fallita:", error);
+    } finally {
+      setIsSearching(false);
+    }
+  }, []);
+  const handleChange = (0, import_react.useCallback)((e) => {
+    const value = e.target.value;
+    setQuery(value);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => doSearch(value), 300);
+  }, [doSearch]);
+  (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();
+      }
+    };
+    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(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      className: "search-input",
+      placeholder: "Search observations, summaries...",
+      value: query,
+      onChange: handleChange,
+      onFocus: () => {
+        if (results && totalResults > 0) setIsOpen(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)))))));
+}
+
+// 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(
+    "button",
+    {
+      className: "theme-btn",
+      onClick: onThemeToggle,
+      title: resolvedTheme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+    },
+    resolvedTheme === "dark" ? "\u2600" : "\u263E"
+  )));
+}
+
+// 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)"
+};
+function Sidebar({
   projects,
   currentFilter,
   onFilterChange,
-  themePreference,
-  onThemeChange
+  activeTypes,
+  onToggleType,
+  stats
 }) {
-  return /* @__PURE__ */ import_react.default.createElement("header", { className: "header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "header-left" }, /* @__PURE__ */ import_react.default.createElement("h1", null, "ContextKit"), /* @__PURE__ */ import_react.default.createElement("span", { className: `connection-status ${isConnected ? "connected" : "disconnected"}` }, isConnected ? "Connected" : "Disconnected")), /* @__PURE__ */ import_react.default.createElement("div", { className: "header-center" }, /* @__PURE__ */ import_react.default.createElement(
-    "select",
+  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",
     {
-      value: currentFilter,
-      onChange: (e) => onFilterChange(e.target.value),
-      className: "project-filter"
+      className: `sidebar-item ${currentFilter === "" ? "active" : ""}`,
+      onClick: () => onFilterChange("")
     },
-    /* @__PURE__ */ import_react.default.createElement("option", { value: "" }, "All Projects"),
-    projects.map((project) => /* @__PURE__ */ import_react.default.createElement("option", { key: project, value: project }, project))
-  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "header-right" }, /* @__PURE__ */ import_react.default.createElement(
-    "select",
+    "All Projects"
+  ), projects.map((project) => /* @__PURE__ */ import_react3.default.createElement(
+    "div",
     {
-      value: themePreference,
-      onChange: (e) => onThemeChange(e.target.value),
-      className: "theme-selector"
+      key: project,
+      className: `sidebar-item ${currentFilter === project ? "active" : ""}`,
+      onClick: () => onFilterChange(project)
     },
-    /* @__PURE__ */ import_react.default.createElement("option", { value: "system" }, "System"),
-    /* @__PURE__ */ import_react.default.createElement("option", { value: "light" }, "Light"),
-    /* @__PURE__ */ import_react.default.createElement("option", { value: "dark" }, "Dark")
-  )));
+    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")))));
 }
 
 // src/ui/viewer/components/Feed.tsx
-var import_react2 = __toESM(require_react(), 1);
+var import_react4 = __toESM(require_react(), 1);
 function Feed({ observations, summaries, prompts, onLoadMore, isLoading, hasMore }) {
   const items = [...observations, ...summaries, ...prompts].sort(
     (a, b) => b.created_at_epoch - a.created_at_epoch
   );
-  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "feed" }, items.map((item) => {
-    if ("type" in item) {
-      return /* @__PURE__ */ import_react2.default.createElement(ObservationCard, { key: `obs-${item.id}`, observation: item });
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "feed" }, items.map((item) => {
+    if ("type" in item && "title" in item) {
+      return /* @__PURE__ */ import_react4.default.createElement(ObservationCard, { key: `obs-${item.id}`, obs: item });
     } else if ("request" in item) {
-      return /* @__PURE__ */ import_react2.default.createElement(SummaryCard, { key: `sum-${item.id}`, summary: item });
+      return /* @__PURE__ */ import_react4.default.createElement(SummaryCard, { key: `sum-${item.id}`, summary: item });
     } else {
-      return /* @__PURE__ */ import_react2.default.createElement(PromptCard, { key: `prompt-${item.id}`, prompt: item });
+      return /* @__PURE__ */ import_react4.default.createElement(PromptCard, { key: `prompt-${item.id}`, prompt: item });
     }
-  }), hasMore && /* @__PURE__ */ import_react2.default.createElement(
+  }), hasMore && /* @__PURE__ */ import_react4.default.createElement(
     "button",
     {
       className: "load-more-btn",
       onClick: onLoadMore,
       disabled: isLoading
     },
-    isLoading ? "Loading..." : "Load More"
-  ), items.length === 0 && !isLoading && /* @__PURE__ */ import_react2.default.createElement("div", { className: "empty-state" }, /* @__PURE__ */ import_react2.default.createElement("p", null, "No data available. Start using ContextKit to see your context here.")));
+    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.")));
 }
-function ObservationCard({ observation }) {
-  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "card observation-card" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "card-header" }, /* @__PURE__ */ import_react2.default.createElement("span", { className: "card-type" }, observation.type), /* @__PURE__ */ import_react2.default.createElement("span", { className: "card-project" }, observation.project), /* @__PURE__ */ import_react2.default.createElement("span", { className: "card-date" }, new Date(observation.created_at).toLocaleString())), /* @__PURE__ */ import_react2.default.createElement("h3", { className: "card-title" }, observation.title), observation.subtitle && /* @__PURE__ */ import_react2.default.createElement("p", { className: "card-subtitle" }, observation.subtitle), observation.text && /* @__PURE__ */ import_react2.default.createElement("p", { className: "card-content" }, observation.text), observation.concepts && /* @__PURE__ */ import_react2.default.createElement("div", { className: "card-tags" }, observation.concepts.split(", ").map((concept, i) => /* @__PURE__ */ import_react2.default.createElement("span", { key: i, className: "tag" }, concept))));
+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 SummaryCard({ summary }) {
-  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "card summary-card" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "card-header" }, /* @__PURE__ */ import_react2.default.createElement("span", { className: "card-type" }, "Summary"), /* @__PURE__ */ import_react2.default.createElement("span", { className: "card-project" }, summary.project), /* @__PURE__ */ import_react2.default.createElement("span", { className: "card-date" }, new Date(summary.created_at).toLocaleString())), summary.request && /* @__PURE__ */ import_react2.default.createElement("h3", { className: "card-title" }, summary.request), summary.learned && /* @__PURE__ */ import_react2.default.createElement("div", { className: "summary-section" }, /* @__PURE__ */ import_react2.default.createElement("strong", null, "Learned:"), /* @__PURE__ */ import_react2.default.createElement("p", null, summary.learned)), summary.completed && /* @__PURE__ */ import_react2.default.createElement("div", { className: "summary-section" }, /* @__PURE__ */ import_react2.default.createElement("strong", null, "Completed:"), /* @__PURE__ */ import_react2.default.createElement("p", null, summary.completed)), summary.next_steps && /* @__PURE__ */ import_react2.default.createElement("div", { className: "summary-section" }, /* @__PURE__ */ import_react2.default.createElement("strong", null, "Next Steps:"), /* @__PURE__ */ import_react2.default.createElement("p", null, summary.next_steps)));
+  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 PromptCard({ prompt }) {
-  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "card prompt-card" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "card-header" }, /* @__PURE__ */ import_react2.default.createElement("span", { className: "card-type" }, "Prompt #", prompt.prompt_number), /* @__PURE__ */ import_react2.default.createElement("span", { className: "card-project" }, prompt.project), /* @__PURE__ */ import_react2.default.createElement("span", { className: "card-date" }, new Date(prompt.created_at).toLocaleString())), /* @__PURE__ */ import_react2.default.createElement("p", { className: "card-content" }, prompt.prompt_text));
+  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)));
 }
 
 // src/ui/viewer/hooks/useSSE.ts
-var import_react3 = __toESM(require_react(), 1);
+var import_react5 = __toESM(require_react(), 1);
 function useSSE() {
-  const [state, setState] = (0, import_react3.useState)({
+  const [state, setState] = (0, import_react5.useState)({
     observations: [],
     summaries: [],
     prompts: [],
     projects: [],
     isConnected: false
   });
-  (0, import_react3.useEffect)(() => {
-    const eventSource = new EventSource("/events");
-    eventSource.onopen = () => {
-      setState((prev) => ({ ...prev, isConnected: true }));
-    };
-    eventSource.onerror = () => {
-      setState((prev) => ({ ...prev, isConnected: false }));
-    };
-    eventSource.addEventListener("observation-created", (event) => {
-      const data = JSON.parse(event.data);
-      fetchObservations();
-    });
-    eventSource.addEventListener("summary-created", (event) => {
-      const data = JSON.parse(event.data);
-      fetchSummaries();
-    });
+  const mountedRef = (0, import_react5.useRef)(true);
+  (0, import_react5.useEffect)(() => {
+    mountedRef.current = true;
+    let eventSource = null;
+    let retryTimeout = null;
+    let retryCount = 0;
+    const MAX_RETRY_DELAY = 3e4;
     const fetchObservations = async () => {
       try {
         const res = await fetch("/api/observations?limit=50");
-        if (res.ok) {
+        if (res.ok && mountedRef.current) {
           const observations = await res.json();
           setState((prev) => ({ ...prev, observations }));
         }
-      } catch (error) {
-        console.error("Failed to fetch observations:", error);
+      } catch (err) {
+        console.error("Fetch observations fallito:", err);
       }
     };
     const fetchSummaries = async () => {
       try {
         const res = await fetch("/api/summaries?limit=20");
-        if (res.ok) {
+        if (res.ok && mountedRef.current) {
           const summaries = await res.json();
           setState((prev) => ({ ...prev, summaries }));
         }
-      } catch (error) {
-        console.error("Failed to fetch summaries:", error);
+      } catch (err) {
+        console.error("Fetch summaries fallito:", err);
+      }
+    };
+    const fetchPrompts = async () => {
+      try {
+        const res = await fetch("/api/prompts?limit=50");
+        if (res.ok && mountedRef.current) {
+          const prompts = await res.json();
+          setState((prev) => ({ ...prev, prompts }));
+        }
+      } catch (err) {
+        console.error("Fetch prompts fallito:", err);
       }
     };
     const fetchProjects = async () => {
       try {
         const res = await fetch("/api/projects");
-        if (res.ok) {
+        if (res.ok && mountedRef.current) {
           const projects = await res.json();
           setState((prev) => ({ ...prev, projects }));
         }
-      } catch (error) {
-        console.error("Failed to fetch projects:", error);
+      } catch (err) {
+        console.error("Fetch projects fallito:", err);
       }
     };
+    const connect = () => {
+      if (!mountedRef.current) return;
+      eventSource = new EventSource("/events");
+      eventSource.onopen = () => {
+        if (!mountedRef.current) return;
+        retryCount = 0;
+        setState((prev) => ({ ...prev, isConnected: true }));
+      };
+      eventSource.onerror = () => {
+        if (!mountedRef.current) return;
+        setState((prev) => ({ ...prev, isConnected: false }));
+        eventSource?.close();
+        eventSource = null;
+        const delay = Math.min(1e3 * Math.pow(2, retryCount), MAX_RETRY_DELAY);
+        retryCount++;
+        retryTimeout = setTimeout(connect, delay);
+      };
+      eventSource.addEventListener("observation-created", () => {
+        fetchObservations();
+        fetchProjects();
+      });
+      eventSource.addEventListener("summary-created", () => {
+        fetchSummaries();
+      });
+      eventSource.addEventListener("prompt-created", () => {
+        fetchPrompts();
+      });
+    };
     fetchObservations();
     fetchSummaries();
+    fetchPrompts();
     fetchProjects();
+    connect();
     return () => {
-      eventSource.close();
+      mountedRef.current = false;
+      eventSource?.close();
+      if (retryTimeout) clearTimeout(retryTimeout);
     };
   }, []);
   return state;
 }
 
-// src/ui/viewer/hooks/useSettings.ts
-var import_react4 = __toESM(require_react(), 1);
-function useSettings() {
-  const [settings, setSettings] = (0, import_react4.useState)({
-    sidebarOpen: true,
-    selectedProject: null,
-    theme: "system"
-  });
-  const [isSaving, setIsSaving] = (0, import_react4.useState)(false);
-  const [saveStatus, setSaveStatus] = (0, import_react4.useState)("idle");
-  (0, import_react4.useEffect)(() => {
-    const saved = localStorage.getItem("contextkit-settings");
-    if (saved) {
-      try {
-        setSettings(JSON.parse(saved));
-      } catch (error) {
-        console.error("Failed to parse settings:", error);
-      }
-    }
-  }, []);
-  const saveSettings = async (newSettings) => {
-    setIsSaving(true);
-    try {
-      localStorage.setItem("contextkit-settings", JSON.stringify(newSettings));
-      setSettings(newSettings);
-      setSaveStatus("success");
-      setTimeout(() => setSaveStatus("idle"), 2e3);
-    } catch (error) {
-      console.error("Failed to save settings:", error);
-      setSaveStatus("error");
-    } finally {
-      setIsSaving(false);
-    }
-  };
-  return { settings, saveSettings, isSaving, saveStatus };
-}
-
 // src/ui/viewer/hooks/useTheme.ts
-var import_react5 = __toESM(require_react(), 1);
+var import_react6 = __toESM(require_react(), 1);
 function useTheme() {
-  const [preference, setPreference] = (0, import_react5.useState)("system");
-  const [resolvedTheme, setResolvedTheme] = (0, import_react5.useState)("light");
-  (0, import_react5.useEffect)(() => {
-    const saved = localStorage.getItem("contextkit-theme");
+  const [preference, setPreference] = (0, import_react6.useState)("system");
+  const [resolvedTheme, setResolvedTheme] = (0, import_react6.useState)("light");
+  (0, import_react6.useEffect)(() => {
+    const saved = localStorage.getItem("kiro-memory-theme");
     if (saved) {
       setPreference(saved);
     }
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const resolveTheme = () => {
       if (preference === "system") {
         const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -23791,7 +23929,7 @@ function useTheme() {
   }, [preference]);
   const setThemePreference = (theme) => {
     setPreference(theme);
-    localStorage.setItem("contextkit-theme", theme);
+    localStorage.setItem("kiro-memory-theme", theme);
   };
   return { preference, resolvedTheme, setThemePreference };
 }
@@ -23820,34 +23958,47 @@ function mergeAndDeduplicateByProject(liveData, paginatedData) {
 }
 
 // src/ui/viewer/App.tsx
+var TYPE_FILTERS = ["file-write", "command", "research", "delegation", "tool-use"];
 function App() {
-  const [currentFilter, setCurrentFilter] = (0, import_react6.useState)("");
-  const [paginatedObservations, setPaginatedObservations] = (0, import_react6.useState)([]);
-  const [paginatedSummaries, setPaginatedSummaries] = (0, import_react6.useState)([]);
-  const [paginatedPrompts, setPaginatedPrompts] = (0, import_react6.useState)([]);
-  const [isLoadingMore, setIsLoadingMore] = (0, import_react6.useState)(false);
+  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 { observations, summaries, prompts, projects, isConnected } = useSSE();
-  const { settings, saveSettings } = useSettings();
-  const { preference, resolvedTheme, setThemePreference } = useTheme();
-  const allObservations = (0, import_react6.useMemo)(() => {
-    if (currentFilter) {
-      return paginatedObservations;
-    }
+  const { resolvedTheme, setThemePreference } = useTheme();
+  const allObservations = (0, import_react7.useMemo)(() => {
+    if (currentFilter) return paginatedObservations;
     return mergeAndDeduplicateByProject(observations, paginatedObservations);
   }, [observations, paginatedObservations, currentFilter]);
-  const allSummaries = (0, import_react6.useMemo)(() => {
-    if (currentFilter) {
-      return paginatedSummaries;
-    }
+  const allSummaries = (0, import_react7.useMemo)(() => {
+    if (currentFilter) return paginatedSummaries;
     return mergeAndDeduplicateByProject(summaries, paginatedSummaries);
   }, [summaries, paginatedSummaries, currentFilter]);
-  const allPrompts = (0, import_react6.useMemo)(() => {
-    if (currentFilter) {
-      return paginatedPrompts;
-    }
+  const allPrompts = (0, import_react7.useMemo)(() => {
+    if (currentFilter) return paginatedPrompts;
     return mergeAndDeduplicateByProject(prompts, paginatedPrompts);
   }, [prompts, paginatedPrompts, currentFilter]);
-  const handleLoadMore = (0, import_react6.useCallback)(async () => {
+  const filteredObservations = (0, import_react7.useMemo)(
+    () => allObservations.filter((o) => activeTypes.has(o.type)),
+    [allObservations, activeTypes]
+  );
+  const stats = (0, import_react7.useMemo)(() => ({
+    observations: allObservations.length,
+    summaries: allSummaries.length,
+    prompts: allPrompts.length
+  }), [allObservations, allSummaries, allPrompts]);
+  const toggleType = (0, import_react7.useCallback)((type) => {
+    setActiveTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(type)) next.delete(type);
+      else next.add(type);
+      return next;
+    });
+  }, []);
+  const handleLoadMore = (0, import_react7.useCallback)(async () => {
     if (isLoadingMore) return;
     setIsLoadingMore(true);
     try {
@@ -23863,57 +24014,69 @@ function App() {
         fetch(`/api/summaries?${params}`),
         fetch(`/api/prompts?${params}`)
       ]);
+      let newItems = 0;
       if (obsRes.ok) {
         const newObs = await obsRes.json();
+        newItems += newObs.length;
         setPaginatedObservations((prev) => [...prev, ...newObs]);
       }
       if (sumRes.ok) {
         const newSum = await sumRes.json();
+        newItems += newSum.length;
         setPaginatedSummaries((prev) => [...prev, ...newSum]);
       }
       if (promptRes.ok) {
         const newPrompts = await promptRes.json();
+        newItems += newPrompts.length;
         setPaginatedPrompts((prev) => [...prev, ...newPrompts]);
       }
+      if (newItems === 0) setHasMore(false);
     } catch (error) {
-      console.error("Failed to load more data:", error);
+      console.error("Errore caricamento dati:", error);
     } finally {
       setIsLoadingMore(false);
     }
   }, [currentFilter, paginatedObservations.length, isLoadingMore]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     setPaginatedObservations([]);
     setPaginatedSummaries([]);
     setPaginatedPrompts([]);
-    handleLoadMore();
+    setHasMore(true);
   }, [currentFilter]);
-  return /* @__PURE__ */ import_react6.default.createElement("div", { className: "app", "data-theme": resolvedTheme }, /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "app", "data-theme": resolvedTheme }, /* @__PURE__ */ import_react7.default.createElement(
     Header,
     {
       isConnected,
+      resolvedTheme,
+      onThemeToggle: () => setThemePreference(resolvedTheme === "dark" ? "light" : "dark")
+    }
+  ), /* @__PURE__ */ import_react7.default.createElement(
+    Sidebar,
+    {
       projects,
       currentFilter,
       onFilterChange: setCurrentFilter,
-      themePreference: preference,
-      onThemeChange: setThemePreference
+      activeTypes,
+      onToggleType: toggleType,
+      stats
     }
-  ), /* @__PURE__ */ import_react6.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement("div", { className: "main" }, /* @__PURE__ */ import_react7.default.createElement(
     Feed,
     {
-      observations: allObservations,
+      observations: filteredObservations,
       summaries: allSummaries,
       prompts: allPrompts,
       onLoadMore: handleLoadMore,
       isLoading: isLoadingMore,
-      hasMore: true
+      hasMore
     }
-  ));
+  )));
 }
 
 // src/ui/viewer/index.tsx
 var root = import_client.default.createRoot(document.getElementById("root"));
 root.render(
-  /* @__PURE__ */ import_react7.default.createElement(import_react7.default.StrictMode, null, /* @__PURE__ */ import_react7.default.createElement(App, null))
+  /* @__PURE__ */ import_react8.default.createElement(import_react8.default.StrictMode, null, /* @__PURE__ */ import_react8.default.createElement(App, null))
 );
 /*! Bundled license information: