aether-react 0.1.0

package/dist/index.js

@@ -0,0 +1,2056 @@
+// src/context/AetherProvider.tsx
+import { createContext, useContext, useState, useEffect, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+var AetherContext = createContext(null);
+function AetherProvider({
+  aether,
+  children,
+  initialActor,
+  autoSubscribe = true
+}) {
+  const [events, setEvents] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (initialActor) {
+      setLoading(true);
+      aether.getHistory(initialActor).then(setEvents).catch(setError).finally(() => setLoading(false));
+    }
+  }, [aether, initialActor]);
+  useEffect(() => {
+    if (!autoSubscribe) return;
+    const unsubscribe = aether.subscribe((event) => {
+      setEvents((prev) => [event, ...prev]);
+    });
+    return unsubscribe;
+  }, [aether, autoSubscribe]);
+  const add = useCallback(
+    async (content, context) => {
+      try {
+        setLoading(true);
+        const event = await aether.add(content, context);
+        if (!autoSubscribe) {
+          setEvents((prev) => [event, ...prev]);
+        }
+        return event;
+      } catch (err) {
+        setError(err);
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [aether, autoSubscribe]
+  );
+  const retrieve = useCallback(
+    async (query, options) => {
+      try {
+        setLoading(true);
+        const results = await aether.retrieve(query, options);
+        return results;
+      } catch (err) {
+        setError(err);
+        return [];
+      } finally {
+        setLoading(false);
+      }
+    },
+    [aether]
+  );
+  const refresh = useCallback(async () => {
+    if (initialActor) {
+      setLoading(true);
+      try {
+        const history = await aether.getHistory(initialActor);
+        setEvents(history);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    }
+  }, [aether, initialActor]);
+  const clearEvents = useCallback(() => {
+    setEvents([]);
+  }, []);
+  const value = {
+    aether,
+    events,
+    loading,
+    error,
+    add,
+    retrieve,
+    refresh,
+    clearEvents
+  };
+  return /* @__PURE__ */ jsx(AetherContext.Provider, { value, children });
+}
+function useAether() {
+  const context = useContext(AetherContext);
+  if (!context) {
+    throw new Error("useAether must be used within an AetherProvider");
+  }
+  return context;
+}
+
+// src/hooks/useMemoryStream.ts
+import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2, useRef } from "react";
+function useMemoryStream(serverUrl, options = {}) {
+  const {
+    autoConnect = true,
+    autoReconnect = true,
+    maxReconnectAttempts = 5,
+    reconnectDelay = 1e3
+  } = options;
+  const [events, setEvents] = useState2([]);
+  const [connected, setConnected] = useState2(false);
+  const [error, setError] = useState2(null);
+  const wsRef = useRef(null);
+  const reconnectAttemptsRef = useRef(0);
+  const reconnectTimeoutRef = useRef(null);
+  const connect = useCallback2(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      return;
+    }
+    try {
+      const ws = new WebSocket(serverUrl);
+      wsRef.current = ws;
+      ws.onopen = () => {
+        setConnected(true);
+        setError(null);
+        reconnectAttemptsRef.current = 0;
+      };
+      ws.onclose = () => {
+        setConnected(false);
+        wsRef.current = null;
+        if (autoReconnect && reconnectAttemptsRef.current < maxReconnectAttempts) {
+          reconnectAttemptsRef.current++;
+          reconnectTimeoutRef.current = setTimeout(() => {
+            connect();
+          }, reconnectDelay * reconnectAttemptsRef.current);
+        }
+      };
+      ws.onerror = (event) => {
+        setError(new Error("WebSocket error"));
+        console.error("WebSocket error:", event);
+      };
+      ws.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data);
+          if (message.type === "memory:added" && message.data) {
+            const memoryEvent = message.data;
+            setEvents((prev) => [memoryEvent, ...prev]);
+          }
+        } catch (err) {
+          console.error("Failed to parse WebSocket message:", err);
+        }
+      };
+    } catch (err) {
+      setError(err);
+    }
+  }, [serverUrl, autoReconnect, maxReconnectAttempts, reconnectDelay]);
+  const disconnect = useCallback2(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setConnected(false);
+  }, []);
+  const send = useCallback2((message) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify(message));
+    } else {
+      console.warn("WebSocket is not connected");
+    }
+  }, []);
+  const clearEvents = useCallback2(() => {
+    setEvents([]);
+  }, []);
+  useEffect2(() => {
+    if (autoConnect) {
+      connect();
+    }
+    return () => {
+      disconnect();
+    };
+  }, [autoConnect, connect, disconnect]);
+  return {
+    events,
+    connected,
+    error,
+    connect,
+    disconnect,
+    send,
+    clearEvents
+  };
+}
+
+// src/components/MemoryGraphView/index.tsx
+import { useEffect as useEffect3, useRef as useRef2, useMemo } from "react";
+import * as d3 from "d3";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function MemoryGraphView({
+  events,
+  width = 800,
+  height = 600,
+  onNodeClick,
+  highlightActor,
+  showRelations = true,
+  className = ""
+}) {
+  const svgRef = useRef2(null);
+  const { nodes, links } = useMemo(() => {
+    const nodeMap = /* @__PURE__ */ new Map();
+    const linkList = [];
+    const actors = new Set(events.map((e) => e.actor));
+    for (const actor of actors) {
+      nodeMap.set(`actor:${actor}`, {
+        id: `actor:${actor}`,
+        type: "actor",
+        label: actor
+      });
+    }
+    const sortedEvents = [...events].sort(
+      (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+    );
+    let prevEventByActor = /* @__PURE__ */ new Map();
+    for (const event of sortedEvents) {
+      const eventId = `event:${event.id}`;
+      nodeMap.set(eventId, {
+        id: eventId,
+        type: "event",
+        label: event.action,
+        event
+      });
+      linkList.push({
+        source: `actor:${event.actor}`,
+        target: eventId,
+        type: "actor"
+      });
+      const prevId = prevEventByActor.get(event.actor);
+      if (prevId) {
+        linkList.push({
+          source: prevId,
+          target: eventId,
+          type: "temporal"
+        });
+      }
+      prevEventByActor.set(event.actor, eventId);
+      if (showRelations && event.relations) {
+        for (const relation of event.relations) {
+          const targetId = `event:${relation.targetEventId}`;
+          if (nodeMap.has(targetId)) {
+            linkList.push({
+              source: eventId,
+              target: targetId,
+              type: "relation"
+            });
+          }
+        }
+      }
+    }
+    return {
+      nodes: Array.from(nodeMap.values()),
+      links: linkList
+    };
+  }, [events, showRelations]);
+  useEffect3(() => {
+    if (!svgRef.current || nodes.length === 0) return;
+    const svg = d3.select(svgRef.current);
+    svg.selectAll("*").remove();
+    const container = svg.append("g");
+    const zoom2 = d3.zoom().scaleExtent([0.1, 4]).on("zoom", (event) => {
+      container.attr("transform", event.transform);
+    });
+    svg.call(zoom2);
+    const simulation = d3.forceSimulation(nodes).force(
+      "link",
+      d3.forceLink(links).id((d) => d.id).distance((d) => d.type === "actor" ? 100 : 50)
+    ).force("charge", d3.forceManyBody().strength(-200)).force("center", d3.forceCenter(width / 2, height / 2)).force("collision", d3.forceCollide().radius(30));
+    const link = container.append("g").selectAll("line").data(links).join("line").attr("stroke", (d) => {
+      switch (d.type) {
+        case "actor":
+          return "#94a3b8";
+        case "temporal":
+          return "#3b82f6";
+        case "relation":
+          return "#f59e0b";
+        default:
+          return "#d1d5db";
+      }
+    }).attr("stroke-width", (d) => d.type === "temporal" ? 2 : 1).attr("stroke-dasharray", (d) => d.type === "relation" ? "4,4" : "none");
+    const node = container.append("g").selectAll("g").data(nodes).join("g").attr("cursor", "pointer").call(
+      d3.drag().on("start", (event, d) => {
+        if (!event.active) simulation.alphaTarget(0.3).restart();
+        d.fx = d.x;
+        d.fy = d.y;
+      }).on("drag", (event, d) => {
+        d.fx = event.x;
+        d.fy = event.y;
+      }).on("end", (event, d) => {
+        if (!event.active) simulation.alphaTarget(0);
+        d.fx = null;
+        d.fy = null;
+      })
+    );
+    node.append("circle").attr("r", (d) => d.type === "actor" ? 20 : 12).attr("fill", (d) => {
+      if (d.type === "actor") {
+        return highlightActor === d.label ? "#3b82f6" : "#6366f1";
+      }
+      return "#10b981";
+    }).attr("stroke", "#ffffff").attr("stroke-width", 2);
+    node.append("text").text((d) => d.label).attr("font-size", (d) => d.type === "actor" ? 12 : 10).attr("dx", (d) => d.type === "actor" ? 25 : 16).attr("dy", 4).attr("fill", "#374151");
+    node.on("click", (event, d) => {
+      if (d.event && onNodeClick) {
+        onNodeClick(d.event);
+      }
+    });
+    simulation.on("tick", () => {
+      link.attr("x1", (d) => d.source.x).attr("y1", (d) => d.source.y).attr("x2", (d) => d.target.x).attr("y2", (d) => d.target.y);
+      node.attr("transform", (d) => `translate(${d.x},${d.y})`);
+    });
+    return () => {
+      simulation.stop();
+    };
+  }, [nodes, links, width, height, highlightActor, onNodeClick]);
+  if (events.length === 0) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: `aether-graph-empty ${className}`,
+        style: {
+          width,
+          height,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#9ca3af",
+          backgroundColor: "#f9fafb",
+          borderRadius: "8px"
+        },
+        children: "No events to display"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      ref: svgRef,
+      width,
+      height,
+      className: `aether-graph ${className}`,
+      style: {
+        backgroundColor: "#f9fafb",
+        borderRadius: "8px"
+      }
+    }
+  );
+}
+
+// src/components/TimelineView/index.tsx
+import { useMemo as useMemo2 } from "react";
+
+// src/components/MemoryCard/index.tsx
+import "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function MemoryCard({
+  event,
+  onClick,
+  selected = false,
+  showContext = false,
+  className = ""
+}) {
+  const formatTimestamp = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleString();
+  };
+  const handleClick = () => {
+    onClick?.(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `aether-memory-card ${selected ? "selected" : ""} ${className}`,
+      onClick: handleClick,
+      style: {
+        padding: "12px",
+        borderRadius: "8px",
+        border: `1px solid ${selected ? "#3b82f6" : "#e5e7eb"}`,
+        backgroundColor: selected ? "#eff6ff" : "#ffffff",
+        cursor: onClick ? "pointer" : "default",
+        marginBottom: "8px",
+        transition: "all 0.2s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    style: {
+                      fontWeight: 600,
+                      color: "#1f2937"
+                    },
+                    children: event.actor
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      padding: "2px 6px",
+                      borderRadius: "4px",
+                      backgroundColor: "#f3f4f6",
+                      color: "#6b7280"
+                    },
+                    children: event.action
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  style: {
+                    fontSize: "12px",
+                    color: "#9ca3af"
+                  },
+                  children: formatTimestamp(event.timestamp)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "p",
+          {
+            style: {
+              margin: 0,
+              color: "#374151",
+              lineHeight: 1.5
+            },
+            children: event.content
+          }
+        ),
+        showContext && Object.keys(event.context).length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "8px",
+              padding: "8px",
+              borderRadius: "4px",
+              backgroundColor: "#f9fafb",
+              fontSize: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsx3("span", { style: { color: "#6b7280", fontWeight: 500 }, children: "Context:" }),
+              /* @__PURE__ */ jsx3(
+                "pre",
+                {
+                  style: {
+                    margin: "4px 0 0 0",
+                    fontSize: "11px",
+                    color: "#4b5563",
+                    overflow: "auto"
+                  },
+                  children: JSON.stringify(event.context, null, 2)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "8px",
+              fontSize: "10px",
+              color: "#9ca3af",
+              fontFamily: "monospace"
+            },
+            children: [
+              event.id.slice(0, 12),
+              "..."
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/TimelineView/index.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function TimelineView({
+  events,
+  onEventClick,
+  selectedEventId,
+  showContext = false,
+  groupBy = "none",
+  maxHeight = "600px",
+  className = ""
+}) {
+  const sortedEvents = useMemo2(() => {
+    return [...events].sort(
+      (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+    );
+  }, [events]);
+  const groupedEvents = useMemo2(() => {
+    if (groupBy === "none") {
+      return [{ label: "", events: sortedEvents }];
+    }
+    const groups = /* @__PURE__ */ new Map();
+    for (const event of sortedEvents) {
+      let key;
+      if (groupBy === "day") {
+        key = new Date(event.timestamp).toLocaleDateString();
+      } else {
+        key = event.actor;
+      }
+      if (!groups.has(key)) {
+        groups.set(key, []);
+      }
+      groups.get(key).push(event);
+    }
+    return Array.from(groups.entries()).map(([label, events2]) => ({
+      label,
+      events: events2
+    }));
+  }, [sortedEvents, groupBy]);
+  if (events.length === 0) {
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: `aether-timeline-empty ${className}`,
+        style: {
+          padding: "40px",
+          textAlign: "center",
+          color: "#9ca3af"
+        },
+        children: "No events to display"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: `aether-timeline ${className}`,
+      style: {
+        maxHeight,
+        overflowY: "auto",
+        padding: "16px"
+      },
+      children: groupedEvents.map((group, groupIndex) => /* @__PURE__ */ jsxs2("div", { className: "aether-timeline-group", children: [
+        group.label && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              padding: "8px 0",
+              marginBottom: "8px",
+              borderBottom: "1px solid #e5e7eb",
+              fontWeight: 600,
+              color: "#374151",
+              position: "sticky",
+              top: 0,
+              backgroundColor: "#ffffff",
+              zIndex: 1
+            },
+            children: group.label
+          }
+        ),
+        /* @__PURE__ */ jsx4("div", { className: "aether-timeline-events", children: group.events.map((event) => /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    width: "20px",
+                    flexShrink: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      "div",
+                      {
+                        style: {
+                          width: "10px",
+                          height: "10px",
+                          borderRadius: "50%",
+                          backgroundColor: event.id === selectedEventId ? "#3b82f6" : "#d1d5db",
+                          border: "2px solid #ffffff",
+                          boxShadow: "0 0 0 2px " + (event.id === selectedEventId ? "#3b82f6" : "#d1d5db")
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          width: "2px",
+                          backgroundColor: "#e5e7eb",
+                          minHeight: "20px"
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx4("div", { style: { flex: 1, paddingBottom: "8px" }, children: /* @__PURE__ */ jsx4(
+                MemoryCard,
+                {
+                  event,
+                  onClick: onEventClick,
+                  selected: event.id === selectedEventId,
+                  showContext
+                }
+              ) })
+            ]
+          },
+          event.id
+        )) })
+      ] }, group.label || groupIndex))
+    }
+  );
+}
+
+// src/components/ClusterMap/index.tsx
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function ClusterMap({
+  events,
+  width = 600,
+  height = 400,
+  onEventClick,
+  colorBy = "actor",
+  className = ""
+}) {
+  const colorPalette = [
+    "#3b82f6",
+    "#10b981",
+    "#f59e0b",
+    "#ef4444",
+    "#8b5cf6",
+    "#ec4899",
+    "#06b6d4",
+    "#84cc16",
+    "#f97316",
+    "#6366f1"
+  ];
+  const { points, colorMap } = useMemo3(() => {
+    const colorKey = colorBy === "actor" ? "actor" : "action";
+    const uniqueValues = [...new Set(events.map((e) => e[colorKey]))];
+    const colorMap2 = /* @__PURE__ */ new Map();
+    uniqueValues.forEach((value, i) => {
+      colorMap2.set(value, colorPalette[i % colorPalette.length]);
+    });
+    const cols = Math.ceil(Math.sqrt(events.length));
+    const padding = 60;
+    const cellWidth = (width - padding * 2) / cols;
+    const cellHeight = (height - padding * 2) / cols;
+    const points2 = events.map((event, i) => {
+      const col = i % cols;
+      const row = Math.floor(i / cols);
+      const jitterX = (Math.random() - 0.5) * cellWidth * 0.5;
+      const jitterY = (Math.random() - 0.5) * cellHeight * 0.5;
+      return {
+        event,
+        x: padding + col * cellWidth + cellWidth / 2 + jitterX,
+        y: padding + row * cellHeight + cellHeight / 2 + jitterY,
+        color: colorMap2.get(event[colorKey]) ?? "#9ca3af"
+      };
+    });
+    return { points: points2, colorMap: colorMap2 };
+  }, [events, colorBy, width, height]);
+  if (events.length === 0) {
+    return /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: `aether-cluster-empty ${className}`,
+        style: {
+          width,
+          height,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#9ca3af",
+          backgroundColor: "#f9fafb",
+          borderRadius: "8px"
+        },
+        children: "No events to display"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `aether-cluster ${className}`,
+      style: {
+        width,
+        height,
+        position: "relative",
+        backgroundColor: "#f9fafb",
+        borderRadius: "8px",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx5("svg", { width, height, children: points.map((point, i) => /* @__PURE__ */ jsx5("g", { children: /* @__PURE__ */ jsx5(
+          "circle",
+          {
+            cx: point.x,
+            cy: point.y,
+            r: 8,
+            fill: point.color,
+            stroke: "#ffffff",
+            strokeWidth: 2,
+            style: { cursor: "pointer" },
+            onClick: () => onEventClick?.(point.event),
+            children: /* @__PURE__ */ jsx5("title", { children: point.event.content })
+          }
+        ) }, point.event.id)) }),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: 10,
+              left: 10,
+              backgroundColor: "rgba(255, 255, 255, 0.9)",
+              padding: "8px",
+              borderRadius: "4px",
+              fontSize: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsx5("div", { style: { fontWeight: 600, marginBottom: "4px" }, children: colorBy === "actor" ? "Actors" : "Actions" }),
+              Array.from(colorMap.entries()).slice(0, 5).map(([label, color]) => /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    marginBottom: "2px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(
+                      "div",
+                      {
+                        style: {
+                          width: 10,
+                          height: 10,
+                          borderRadius: "50%",
+                          backgroundColor: color
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx5("span", { children: label })
+                  ]
+                },
+                label
+              )),
+              colorMap.size > 5 && /* @__PURE__ */ jsxs3("div", { style: { color: "#9ca3af" }, children: [
+                "+",
+                colorMap.size - 5,
+                " more"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/MemoryExplorer/index.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function MemoryExplorer({
+  events,
+  onEventClick,
+  defaultView = "timeline",
+  showViewSwitcher = true,
+  className = ""
+}) {
+  const [currentView, setCurrentView] = useState3(defaultView);
+  const [selectedEvent, setSelectedEvent] = useState3(null);
+  const handleEventClick = (event) => {
+    setSelectedEvent(event);
+    onEventClick?.(event);
+  };
+  const renderView = () => {
+    switch (currentView) {
+      case "timeline":
+        return /* @__PURE__ */ jsx6(
+          TimelineView,
+          {
+            events,
+            onEventClick: handleEventClick,
+            selectedEventId: selectedEvent?.id,
+            showContext: true,
+            maxHeight: "500px"
+          }
+        );
+      case "graph":
+        return /* @__PURE__ */ jsx6(
+          MemoryGraphView,
+          {
+            events,
+            onNodeClick: handleEventClick,
+            width: 700,
+            height: 500
+          }
+        );
+      case "cluster":
+        return /* @__PURE__ */ jsx6(
+          ClusterMap,
+          {
+            events,
+            onEventClick: handleEventClick,
+            width: 700,
+            height: 500,
+            colorBy: "actor"
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `aether-explorer ${className}`,
+      style: {
+        display: "flex",
+        gap: "16px",
+        padding: "16px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs4("div", { style: { flex: 1 }, children: [
+          showViewSwitcher && /* @__PURE__ */ jsx6(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: "8px",
+                marginBottom: "16px"
+              },
+              children: ["timeline", "graph", "cluster"].map((view) => /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  onClick: () => setCurrentView(view),
+                  style: {
+                    padding: "8px 16px",
+                    borderRadius: "6px",
+                    border: "none",
+                    backgroundColor: currentView === view ? "#3b82f6" : "#e5e7eb",
+                    color: currentView === view ? "#ffffff" : "#374151",
+                    cursor: "pointer",
+                    fontWeight: 500,
+                    textTransform: "capitalize",
+                    transition: "all 0.2s ease"
+                  },
+                  children: view
+                },
+                view
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "div",
+            {
+              style: {
+                backgroundColor: "#ffffff",
+                borderRadius: "8px",
+                border: "1px solid #e5e7eb",
+                overflow: "hidden"
+              },
+              children: renderView()
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              style: {
+                marginTop: "12px",
+                padding: "8px 12px",
+                backgroundColor: "#f9fafb",
+                borderRadius: "6px",
+                fontSize: "12px",
+                color: "#6b7280"
+              },
+              children: [
+                events.length,
+                " events \u2022 ",
+                new Set(events.map((e) => e.actor)).size,
+                " actors"
+              ]
+            }
+          )
+        ] }),
+        selectedEvent && /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            style: {
+              width: "300px",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx6(
+                "div",
+                {
+                  style: {
+                    fontWeight: 600,
+                    marginBottom: "8px",
+                    color: "#374151"
+                  },
+                  children: "Selected Event"
+                }
+              ),
+              /* @__PURE__ */ jsx6(MemoryCard, { event: selectedEvent, showContext: true })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/AddMemoryForm/index.tsx
+import { useState as useState4, useCallback as useCallback3 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function AddMemoryForm({
+  onAdd,
+  loading = false,
+  defaultActor = "user",
+  placeholder = 'What happened? (e.g., "User clicked the buy button")',
+  className = ""
+}) {
+  const [content, setContent] = useState4("");
+  const [actor, setActor] = useState4(defaultActor);
+  const [contextJson, setContextJson] = useState4("");
+  const [showAdvanced, setShowAdvanced] = useState4(false);
+  const [error, setError] = useState4(null);
+  const handleSubmit = useCallback3(
+    async (e) => {
+      e.preventDefault();
+      setError(null);
+      if (!content.trim()) {
+        setError("Content is required");
+        return;
+      }
+      let context;
+      if (contextJson.trim()) {
+        try {
+          context = JSON.parse(contextJson);
+        } catch {
+          setError("Invalid JSON in context field");
+          return;
+        }
+      }
+      try {
+        await onAdd(content.trim(), actor.trim() || "user", context);
+        setContent("");
+        setContextJson("");
+      } catch (err) {
+        setError(String(err));
+      }
+    },
+    [content, actor, contextJson, onAdd]
+  );
+  return /* @__PURE__ */ jsxs5(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: `aether-add-memory-form ${className}`,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+        padding: "16px",
+        backgroundColor: "#ffffff",
+        borderRadius: "8px",
+        border: "1px solid #e5e7eb"
+      },
+      children: [
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx7(
+            "input",
+            {
+              type: "text",
+              value: content,
+              onChange: (e) => setContent(e.target.value),
+              placeholder,
+              disabled: loading,
+              style: {
+                flex: 1,
+                padding: "10px 14px",
+                fontSize: "14px",
+                border: "1px solid #d1d5db",
+                borderRadius: "6px",
+                outline: "none",
+                transition: "border-color 0.2s"
+              },
+              onFocus: (e) => e.target.style.borderColor = "#3b82f6",
+              onBlur: (e) => e.target.style.borderColor = "#d1d5db"
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "submit",
+              disabled: loading || !content.trim(),
+              style: {
+                padding: "10px 20px",
+                fontSize: "14px",
+                fontWeight: 500,
+                color: "#ffffff",
+                backgroundColor: loading || !content.trim() ? "#9ca3af" : "#3b82f6",
+                border: "none",
+                borderRadius: "6px",
+                cursor: loading || !content.trim() ? "not-allowed" : "pointer",
+                transition: "background-color 0.2s"
+              },
+              children: loading ? "Adding..." : "Add Memory"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowAdvanced(!showAdvanced),
+            style: {
+              alignSelf: "flex-start",
+              padding: "4px 8px",
+              fontSize: "12px",
+              color: "#6b7280",
+              backgroundColor: "transparent",
+              border: "none",
+              cursor: "pointer",
+              textDecoration: "underline"
+            },
+            children: showAdvanced ? "Hide options" : "Show options"
+          }
+        ),
+        showAdvanced && /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+          /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx7("label", { style: { fontSize: "13px", color: "#6b7280", minWidth: "50px" }, children: "Actor:" }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                type: "text",
+                value: actor,
+                onChange: (e) => setActor(e.target.value),
+                placeholder: "user",
+                style: {
+                  flex: 1,
+                  padding: "8px 12px",
+                  fontSize: "13px",
+                  border: "1px solid #d1d5db",
+                  borderRadius: "4px",
+                  outline: "none"
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: "8px", alignItems: "flex-start" }, children: [
+            /* @__PURE__ */ jsx7("label", { style: { fontSize: "13px", color: "#6b7280", minWidth: "50px", paddingTop: "8px" }, children: "Context:" }),
+            /* @__PURE__ */ jsx7(
+              "textarea",
+              {
+                value: contextJson,
+                onChange: (e) => setContextJson(e.target.value),
+                placeholder: '{"key": "value"}',
+                rows: 2,
+                style: {
+                  flex: 1,
+                  padding: "8px 12px",
+                  fontSize: "13px",
+                  fontFamily: "monospace",
+                  border: "1px solid #d1d5db",
+                  borderRadius: "4px",
+                  outline: "none",
+                  resize: "vertical"
+                }
+              }
+            )
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              padding: "8px 12px",
+              fontSize: "13px",
+              color: "#dc2626",
+              backgroundColor: "#fef2f2",
+              borderRadius: "4px"
+            },
+            children: error
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/SearchBar/index.tsx
+import { useState as useState5, useCallback as useCallback4 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var RETRIEVAL_TYPES = [
+  { value: "hybrid", label: "Hybrid", description: "Combines all strategies" },
+  { value: "semantic", label: "Semantic", description: "Vector similarity search" },
+  { value: "temporal", label: "Temporal", description: "Recent events first" },
+  { value: "relational", label: "Relational", description: "Entity-based search" }
+];
+function SearchBar({
+  onSearch,
+  loading = false,
+  placeholder = "Search memories...",
+  className = ""
+}) {
+  const [query, setQuery] = useState5("");
+  const [retrievalType, setRetrievalType] = useState5("hybrid");
+  const [limit, setLimit] = useState5(10);
+  const [actor, setActor] = useState5("");
+  const [showFilters, setShowFilters] = useState5(false);
+  const handleSubmit = useCallback4(
+    async (e) => {
+      e.preventDefault();
+      if (!query.trim()) return;
+      await onSearch(query.trim(), {
+        retrievalType,
+        limit,
+        actor: actor.trim() || void 0
+      });
+    },
+    [query, retrievalType, limit, actor, onSearch]
+  );
+  return /* @__PURE__ */ jsxs6(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: `aether-search-bar ${className}`,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ jsxs6("div", { style: { flex: 1, position: "relative" }, children: [
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                type: "text",
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                placeholder,
+                disabled: loading,
+                style: {
+                  width: "100%",
+                  padding: "12px 16px",
+                  paddingLeft: "40px",
+                  fontSize: "14px",
+                  border: "1px solid #d1d5db",
+                  borderRadius: "8px",
+                  outline: "none",
+                  transition: "border-color 0.2s, box-shadow 0.2s"
+                },
+                onFocus: (e) => {
+                  e.target.style.borderColor = "#3b82f6";
+                  e.target.style.boxShadow = "0 0 0 3px rgba(59, 130, 246, 0.1)";
+                },
+                onBlur: (e) => {
+                  e.target.style.borderColor = "#d1d5db";
+                  e.target.style.boxShadow = "none";
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              "svg",
+              {
+                style: {
+                  position: "absolute",
+                  left: "12px",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  width: "20px",
+                  height: "20px",
+                  color: "#9ca3af"
+                },
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx8(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowFilters(!showFilters),
+              style: {
+                padding: "12px",
+                backgroundColor: showFilters ? "#eff6ff" : "#f9fafb",
+                border: `1px solid ${showFilters ? "#3b82f6" : "#d1d5db"}`,
+                borderRadius: "8px",
+                cursor: "pointer",
+                transition: "all 0.2s"
+              },
+              title: "Toggle filters",
+              children: /* @__PURE__ */ jsx8(
+                "svg",
+                {
+                  style: { width: "20px", height: "20px", color: showFilters ? "#3b82f6" : "#6b7280" },
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx8(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "submit",
+              disabled: loading || !query.trim(),
+              style: {
+                padding: "12px 24px",
+                fontSize: "14px",
+                fontWeight: 500,
+                color: "#ffffff",
+                backgroundColor: loading || !query.trim() ? "#9ca3af" : "#3b82f6",
+                border: "none",
+                borderRadius: "8px",
+                cursor: loading || !query.trim() ? "not-allowed" : "pointer",
+                transition: "background-color 0.2s"
+              },
+              children: loading ? "Searching..." : "Search"
+            }
+          )
+        ] }),
+        showFilters && /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "16px",
+              padding: "16px",
+              backgroundColor: "#f9fafb",
+              borderRadius: "8px",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx8("label", { style: { fontSize: "12px", fontWeight: 500, color: "#374151" }, children: "Retrieval Type" }),
+                /* @__PURE__ */ jsx8(
+                  "select",
+                  {
+                    value: retrievalType,
+                    onChange: (e) => setRetrievalType(e.target.value),
+                    style: {
+                      padding: "8px 12px",
+                      fontSize: "13px",
+                      border: "1px solid #d1d5db",
+                      borderRadius: "6px",
+                      backgroundColor: "#ffffff",
+                      cursor: "pointer"
+                    },
+                    children: RETRIEVAL_TYPES.map((type) => /* @__PURE__ */ jsx8("option", { value: type.value, children: type.label }, type.value))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx8("label", { style: { fontSize: "12px", fontWeight: 500, color: "#374151" }, children: "Max Results" }),
+                /* @__PURE__ */ jsx8(
+                  "select",
+                  {
+                    value: limit,
+                    onChange: (e) => setLimit(parseInt(e.target.value, 10)),
+                    style: {
+                      padding: "8px 12px",
+                      fontSize: "13px",
+                      border: "1px solid #d1d5db",
+                      borderRadius: "6px",
+                      backgroundColor: "#ffffff",
+                      cursor: "pointer"
+                    },
+                    children: [5, 10, 20, 50, 100].map((n) => /* @__PURE__ */ jsx8("option", { value: n, children: n }, n))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx8("label", { style: { fontSize: "12px", fontWeight: 500, color: "#374151" }, children: "Actor (optional)" }),
+                /* @__PURE__ */ jsx8(
+                  "input",
+                  {
+                    type: "text",
+                    value: actor,
+                    onChange: (e) => setActor(e.target.value),
+                    placeholder: "Filter by actor",
+                    style: {
+                      padding: "8px 12px",
+                      fontSize: "13px",
+                      border: "1px solid #d1d5db",
+                      borderRadius: "6px",
+                      width: "150px"
+                    }
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/StatsPanel/index.tsx
+import "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function StatItem({ label, value, icon, color }) {
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        padding: "16px",
+        backgroundColor: "#ffffff",
+        borderRadius: "8px",
+        border: "1px solid #e5e7eb"
+      },
+      children: [
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "40px",
+              height: "40px",
+              borderRadius: "8px",
+              backgroundColor: color
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { children: [
+          /* @__PURE__ */ jsx9("div", { style: { fontSize: "24px", fontWeight: 600, color: "#1f2937" }, children: value }),
+          /* @__PURE__ */ jsx9("div", { style: { fontSize: "13px", color: "#6b7280" }, children: label })
+        ] })
+      ]
+    }
+  );
+}
+function StatsPanel({ stats, loading = false, className = "" }) {
+  if (loading) {
+    return /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: `aether-stats-panel ${className}`,
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+          gap: "12px"
+        },
+        children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx9(
+          "div",
+          {
+            style: {
+              height: "88px",
+              backgroundColor: "#f3f4f6",
+              borderRadius: "8px",
+              animation: "pulse 2s infinite"
+            }
+          },
+          i
+        ))
+      }
+    );
+  }
+  if (!stats) {
+    return /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: `aether-stats-panel ${className}`,
+        style: {
+          padding: "24px",
+          textAlign: "center",
+          color: "#9ca3af",
+          backgroundColor: "#f9fafb",
+          borderRadius: "8px"
+        },
+        children: "No statistics available"
+      }
+    );
+  }
+  const formatDate = (dateStr) => {
+    if (!dateStr) return "N/A";
+    return new Date(dateStr).toLocaleDateString();
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: `aether-stats-panel ${className}`,
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+        gap: "12px"
+      },
+      children: [
+        /* @__PURE__ */ jsx9(
+          StatItem,
+          {
+            label: "Total Memories",
+            value: stats.totalEvents.toLocaleString(),
+            color: "#dbeafe",
+            icon: /* @__PURE__ */ jsx9(
+              "svg",
+              {
+                style: { width: "20px", height: "20px", color: "#3b82f6" },
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx9(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          StatItem,
+          {
+            label: "Unique Actors",
+            value: stats.uniqueActors,
+            color: "#dcfce7",
+            icon: /* @__PURE__ */ jsx9(
+              "svg",
+              {
+                style: { width: "20px", height: "20px", color: "#22c55e" },
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx9(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          StatItem,
+          {
+            label: "First Event",
+            value: formatDate(stats.oldestEvent),
+            color: "#fef3c7",
+            icon: /* @__PURE__ */ jsx9(
+              "svg",
+              {
+                style: { width: "20px", height: "20px", color: "#f59e0b" },
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx9(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          StatItem,
+          {
+            label: "Latest Event",
+            value: formatDate(stats.newestEvent),
+            color: "#fce7f3",
+            icon: /* @__PURE__ */ jsx9(
+              "svg",
+              {
+                style: { width: "20px", height: "20px", color: "#ec4899" },
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx9(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ActorSelector/index.tsx
+import "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function ActorSelector({
+  actors,
+  selectedActor,
+  onSelect,
+  loading = false,
+  className = ""
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: `aether-actor-selector ${className}`,
+        style: {
+          display: "flex",
+          gap: "8px",
+          flexWrap: "wrap"
+        },
+        children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx10(
+          "div",
+          {
+            style: {
+              width: "80px",
+              height: "32px",
+              backgroundColor: "#f3f4f6",
+              borderRadius: "9999px",
+              animation: "pulse 2s infinite"
+            }
+          },
+          i
+        ))
+      }
+    );
+  }
+  if (actors.length === 0) {
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: `aether-actor-selector ${className}`,
+        style: {
+          padding: "12px",
+          fontSize: "13px",
+          color: "#9ca3af",
+          textAlign: "center"
+        },
+        children: "No actors found"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: `aether-actor-selector ${className}`,
+      style: {
+        display: "flex",
+        gap: "8px",
+        flexWrap: "wrap",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx10("span", { style: { fontSize: "13px", color: "#6b7280", marginRight: "4px" }, children: "Filter by actor:" }),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            onClick: () => onSelect(null),
+            style: {
+              padding: "6px 14px",
+              fontSize: "13px",
+              fontWeight: 500,
+              color: selectedActor === null ? "#ffffff" : "#374151",
+              backgroundColor: selectedActor === null ? "#3b82f6" : "#f3f4f6",
+              border: "none",
+              borderRadius: "9999px",
+              cursor: "pointer",
+              transition: "all 0.2s"
+            },
+            children: "All"
+          }
+        ),
+        actors.map((actor) => /* @__PURE__ */ jsx10(
+          "button",
+          {
+            onClick: () => onSelect(actor),
+            style: {
+              padding: "6px 14px",
+              fontSize: "13px",
+              fontWeight: 500,
+              color: selectedActor === actor ? "#ffffff" : "#374151",
+              backgroundColor: selectedActor === actor ? "#3b82f6" : "#f3f4f6",
+              border: "none",
+              borderRadius: "9999px",
+              cursor: "pointer",
+              transition: "all 0.2s"
+            },
+            children: actor
+          },
+          actor
+        ))
+      ]
+    }
+  );
+}
+
+// src/components/ConnectionStatus/index.tsx
+import "react";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function ConnectionStatus({
+  connected,
+  error,
+  onReconnect,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: `aether-connection-status ${className}`,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "6px 12px",
+        borderRadius: "9999px",
+        fontSize: "12px",
+        fontWeight: 500,
+        backgroundColor: connected ? "#dcfce7" : error ? "#fef2f2" : "#fef3c7",
+        color: connected ? "#166534" : error ? "#991b1b" : "#92400e"
+      },
+      children: [
+        /* @__PURE__ */ jsx11(
+          "span",
+          {
+            style: {
+              width: "8px",
+              height: "8px",
+              borderRadius: "50%",
+              backgroundColor: connected ? "#22c55e" : error ? "#ef4444" : "#f59e0b",
+              animation: connected ? "none" : "pulse 2s infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx11("span", { children: connected ? "Connected" : error ? "Connection Error" : "Connecting..." }),
+        !connected && onReconnect && /* @__PURE__ */ jsx11(
+          "button",
+          {
+            onClick: onReconnect,
+            style: {
+              marginLeft: "4px",
+              padding: "2px 8px",
+              fontSize: "11px",
+              color: "#374151",
+              backgroundColor: "#ffffff",
+              border: "1px solid #d1d5db",
+              borderRadius: "4px",
+              cursor: "pointer"
+            },
+            children: "Retry"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Dashboard/index.tsx
+import { useState as useState6, useEffect as useEffect4, useCallback as useCallback5, useMemo as useMemo4 } from "react";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function Dashboard({ aether, title = "Aether Memory Explorer", className = "" }) {
+  const [events, setEvents] = useState6([]);
+  const [searchResults, setSearchResults] = useState6(null);
+  const [stats, setStats] = useState6(null);
+  const [actors, setActors] = useState6([]);
+  const [selectedActor, setSelectedActor] = useState6(null);
+  const [selectedEvent, setSelectedEvent] = useState6(null);
+  const [viewMode, setViewMode] = useState6("timeline");
+  const [loading, setLoading] = useState6(false);
+  const [searchQuery, setSearchQuery] = useState6("");
+  useEffect4(() => {
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        const [statsData] = await Promise.all([
+          aether.stats()
+        ]);
+        setStats(statsData);
+        const actorsList = [];
+        setActors(actorsList);
+      } catch (err) {
+        console.error("Failed to load data:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadData();
+  }, [aether]);
+  useEffect4(() => {
+    const unsubscribe = aether.subscribe((event) => {
+      setEvents((prev) => [event, ...prev]);
+      setActors((prev) => {
+        if (!prev.includes(event.actor)) {
+          return [...prev, event.actor];
+        }
+        return prev;
+      });
+      setStats((prev) => prev ? {
+        ...prev,
+        totalEvents: prev.totalEvents + 1,
+        newestEvent: event.timestamp
+      } : null);
+    });
+    return unsubscribe;
+  }, [aether]);
+  const handleAddMemory = useCallback5(
+    async (content, actor, context) => {
+      await aether.add({ content, actor, context });
+    },
+    [aether]
+  );
+  const handleSearch = useCallback5(
+    async (query, options) => {
+      setLoading(true);
+      setSearchQuery(query);
+      try {
+        const results = await aether.retrieve(query, {
+          retrievalType: options.retrievalType,
+          limit: options.limit,
+          actor: options.actor
+        });
+        setSearchResults(results);
+      } catch (err) {
+        console.error("Search failed:", err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [aether]
+  );
+  const handleActorChange = useCallback5(
+    async (actor) => {
+      setSelectedActor(actor);
+      setLoading(true);
+      try {
+        if (actor) {
+          const history = await aether.getHistory(actor, 50);
+          setEvents(history);
+        } else {
+          setEvents([]);
+        }
+        setSearchResults(null);
+        setSearchQuery("");
+      } catch (err) {
+        console.error("Failed to load actor history:", err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [aether]
+  );
+  const handleClearSearch = useCallback5(() => {
+    setSearchResults(null);
+    setSearchQuery("");
+  }, []);
+  const displayedEvents = searchResults ?? events;
+  const filteredEvents = useMemo4(() => {
+    if (searchResults) return searchResults;
+    if (!selectedActor) return events;
+    return events.filter((e) => e.actor === selectedActor);
+  }, [events, searchResults, selectedActor]);
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: `aether-dashboard ${className}`,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        backgroundColor: "#f9fafb",
+        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsx12(
+          "header",
+          {
+            style: {
+              padding: "16px 24px",
+              backgroundColor: "#ffffff",
+              borderBottom: "1px solid #e5e7eb"
+            },
+            children: /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsx12("h1", { style: { margin: 0, fontSize: "20px", fontWeight: 600, color: "#1f2937" }, children: title }),
+              /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx12(
+                  "button",
+                  {
+                    onClick: () => setViewMode("timeline"),
+                    style: {
+                      padding: "8px 16px",
+                      fontSize: "13px",
+                      fontWeight: 500,
+                      color: viewMode === "timeline" ? "#3b82f6" : "#6b7280",
+                      backgroundColor: viewMode === "timeline" ? "#eff6ff" : "transparent",
+                      border: `1px solid ${viewMode === "timeline" ? "#3b82f6" : "#d1d5db"}`,
+                      borderRadius: "6px",
+                      cursor: "pointer"
+                    },
+                    children: "Timeline"
+                  }
+                ),
+                /* @__PURE__ */ jsx12(
+                  "button",
+                  {
+                    onClick: () => setViewMode("graph"),
+                    style: {
+                      padding: "8px 16px",
+                      fontSize: "13px",
+                      fontWeight: 500,
+                      color: viewMode === "graph" ? "#3b82f6" : "#6b7280",
+                      backgroundColor: viewMode === "graph" ? "#eff6ff" : "transparent",
+                      border: `1px solid ${viewMode === "graph" ? "#3b82f6" : "#d1d5db"}`,
+                      borderRadius: "6px",
+                      cursor: "pointer"
+                    },
+                    children: "Graph"
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs10("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsxs10(
+            "aside",
+            {
+              style: {
+                width: "320px",
+                padding: "16px",
+                borderRight: "1px solid #e5e7eb",
+                backgroundColor: "#ffffff",
+                overflowY: "auto",
+                display: "flex",
+                flexDirection: "column",
+                gap: "16px"
+              },
+              children: [
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsx12("h2", { style: { margin: "0 0 12px 0", fontSize: "14px", fontWeight: 600, color: "#374151" }, children: "Add Memory" }),
+                  /* @__PURE__ */ jsx12(AddMemoryForm, { onAdd: handleAddMemory, loading })
+                ] }),
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsx12("h2", { style: { margin: "0 0 12px 0", fontSize: "14px", fontWeight: 600, color: "#374151" }, children: "Statistics" }),
+                  /* @__PURE__ */ jsx12(StatsPanel, { stats, loading })
+                ] }),
+                actors.length > 0 && /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsx12("h2", { style: { margin: "0 0 12px 0", fontSize: "14px", fontWeight: 600, color: "#374151" }, children: "Actors" }),
+                  /* @__PURE__ */ jsx12(
+                    ActorSelector,
+                    {
+                      actors,
+                      selectedActor,
+                      onSelect: handleActorChange
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs10("main", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+            /* @__PURE__ */ jsxs10("div", { style: { padding: "16px", backgroundColor: "#ffffff", borderBottom: "1px solid #e5e7eb" }, children: [
+              /* @__PURE__ */ jsx12(SearchBar, { onSearch: handleSearch, loading }),
+              searchQuery && /* @__PURE__ */ jsxs10("div", { style: { marginTop: "8px", display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ jsxs10("span", { style: { fontSize: "13px", color: "#6b7280" }, children: [
+                  'Showing results for "',
+                  searchQuery,
+                  '"'
+                ] }),
+                /* @__PURE__ */ jsx12(
+                  "button",
+                  {
+                    onClick: handleClearSearch,
+                    style: {
+                      padding: "4px 8px",
+                      fontSize: "12px",
+                      color: "#3b82f6",
+                      backgroundColor: "transparent",
+                      border: "none",
+                      cursor: "pointer",
+                      textDecoration: "underline"
+                    },
+                    children: "Clear"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs10("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+              /* @__PURE__ */ jsx12("div", { style: { flex: 1, overflowY: "auto", padding: "16px" }, children: filteredEvents.length === 0 ? /* @__PURE__ */ jsxs10(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "100%",
+                    color: "#9ca3af"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx12(
+                      "svg",
+                      {
+                        style: { width: "48px", height: "48px", marginBottom: "12px" },
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: /* @__PURE__ */ jsx12(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 1.5,
+                            d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx12("p", { style: { margin: 0, fontSize: "14px" }, children: "No memories yet" }),
+                    /* @__PURE__ */ jsx12("p", { style: { margin: "4px 0 0 0", fontSize: "13px" }, children: "Add your first memory using the form on the left" })
+                  ]
+                }
+              ) : viewMode === "timeline" ? /* @__PURE__ */ jsx12(
+                TimelineView,
+                {
+                  events: filteredEvents,
+                  onEventClick: setSelectedEvent,
+                  selectedEventId: selectedEvent?.id,
+                  showContext: true
+                }
+              ) : /* @__PURE__ */ jsx12(
+                MemoryGraphView,
+                {
+                  events: filteredEvents,
+                  onNodeClick: setSelectedEvent,
+                  highlightActor: selectedActor ?? void 0,
+                  width: 600,
+                  height: 500
+                }
+              ) }),
+              selectedEvent && /* @__PURE__ */ jsxs10(
+                "aside",
+                {
+                  style: {
+                    width: "300px",
+                    padding: "16px",
+                    borderLeft: "1px solid #e5e7eb",
+                    backgroundColor: "#ffffff",
+                    overflowY: "auto"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "12px" }, children: [
+                      /* @__PURE__ */ jsx12("h3", { style: { margin: 0, fontSize: "14px", fontWeight: 600, color: "#374151" }, children: "Event Details" }),
+                      /* @__PURE__ */ jsx12(
+                        "button",
+                        {
+                          onClick: () => setSelectedEvent(null),
+                          style: {
+                            padding: "4px",
+                            backgroundColor: "transparent",
+                            border: "none",
+                            cursor: "pointer",
+                            color: "#9ca3af"
+                          },
+                          children: /* @__PURE__ */ jsx12("svg", { style: { width: "20px", height: "20px" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx12(MemoryCard, { event: selectedEvent, showContext: true })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ActorSelector,
+  AddMemoryForm,
+  AetherProvider,
+  ClusterMap,
+  ConnectionStatus,
+  Dashboard,
+  MemoryCard,
+  MemoryExplorer,
+  MemoryGraphView,
+  SearchBar,
+  StatsPanel,
+  TimelineView,
+  useAether,
+  useMemoryStream
+};
+//# sourceMappingURL=index.js.map