@rickydata/react 0.1.0

package/dist/index.js

@@ -0,0 +1,917 @@
+// src/providers/RickyDataProvider.tsx
+import { createContext, useContext, useMemo } from "react";
+import { AgentClient } from "rickydata/agent";
+import { jsx } from "react/jsx-runtime";
+var RickyDataContext = createContext(null);
+function RickyDataProvider({ config, client, children }) {
+  const agentClient = useMemo(() => {
+    if (client) return client;
+    if (!config) throw new Error("RickyDataProvider requires either `config` or `client`");
+    return new AgentClient({
+      tokenGetter: config.getAuthToken,
+      gatewayUrl: config.gatewayUrl
+    });
+  }, [client, config?.getAuthToken, config?.gatewayUrl]);
+  return /* @__PURE__ */ jsx(RickyDataContext.Provider, { value: agentClient, children });
+}
+function useRickyData() {
+  const ctx = useContext(RickyDataContext);
+  if (!ctx) {
+    throw new Error("useRickyData must be used within a <RickyDataProvider>");
+  }
+  return ctx;
+}
+
+// src/hooks/agents.ts
+import { useQuery } from "@tanstack/react-query";
+var agentKeys = {
+  all: ["agents"],
+  lists: () => [...agentKeys.all, "list"],
+  details: () => [...agentKeys.all, "detail"],
+  detail: (id) => [...agentKeys.details(), id]
+};
+function useAgents() {
+  const client = useRickyData();
+  return useQuery({
+    queryKey: agentKeys.lists(),
+    queryFn: () => client.listAgents(),
+    staleTime: 5 * 60 * 1e3
+    // 5 min
+  });
+}
+function useAgent(agentId) {
+  const client = useRickyData();
+  return useQuery({
+    queryKey: agentKeys.detail(agentId),
+    queryFn: () => client.getAgent(agentId),
+    enabled: !!agentId
+  });
+}
+
+// src/hooks/apikey.ts
+import { useQuery as useQuery2, useMutation, useQueryClient } from "@tanstack/react-query";
+var apiKeyKeys = {
+  all: ["apikey"],
+  status: () => [...apiKeyKeys.all, "status"],
+  openai: () => [...apiKeyKeys.all, "openai"]
+};
+function useApiKeyStatus() {
+  const client = useRickyData();
+  return useQuery2({
+    queryKey: apiKeyKeys.status(),
+    queryFn: () => client.getApiKeyStatus(),
+    staleTime: 3e4
+  });
+}
+function useSetApiKey() {
+  const client = useRickyData();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (apiKey) => client.setApiKey(apiKey),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: apiKeyKeys.status() });
+    }
+  });
+}
+function useDeleteApiKey() {
+  const client = useRickyData();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: () => client.deleteApiKey(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: apiKeyKeys.status() });
+    }
+  });
+}
+function useOpenAIApiKeyStatus() {
+  const client = useRickyData();
+  return useQuery2({
+    queryKey: apiKeyKeys.openai(),
+    queryFn: () => client.getOpenAIApiKeyStatus(),
+    staleTime: 3e4
+  });
+}
+function useSetOpenAIApiKey() {
+  const client = useRickyData();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (apiKey) => client.storeOpenAIApiKey(apiKey),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: apiKeyKeys.openai() });
+    }
+  });
+}
+
+// src/hooks/balance.ts
+import { useQuery as useQuery3 } from "@tanstack/react-query";
+var balanceKeys = {
+  all: ["wallet-balance"],
+  balance: () => [...balanceKeys.all, "balance"],
+  transactions: (limit, offset) => [...balanceKeys.all, "transactions", { limit, offset }]
+};
+function useWalletBalance(opts) {
+  const client = useRickyData();
+  const query = useQuery3({
+    queryKey: balanceKeys.balance(),
+    queryFn: () => client.getWalletBalance(),
+    staleTime: opts?.staleTime ?? 6e4,
+    enabled: opts?.enabled !== false
+  });
+  const balance = query.data?.availableBalance ?? "0";
+  const num = parseFloat(balance);
+  const balanceDisplay = isNaN(num) ? "$0.00" : num >= 0.01 ? `$${num.toFixed(2)}` : num > 0 ? `$${num.toFixed(4)}` : "$0.00";
+  return {
+    ...query,
+    balance,
+    balanceDisplay,
+    depositAddress: query.data?.unifiedDepositAddress,
+    agentSpends: query.data?.agentSpends,
+    refresh: () => query.refetch()
+  };
+}
+function useWalletTransactions(limit, offset) {
+  const client = useRickyData();
+  return useQuery3({
+    queryKey: balanceKeys.transactions(limit, offset),
+    queryFn: () => client.getWalletTransactions(limit, offset),
+    staleTime: 3e4
+  });
+}
+
+// src/hooks/sessions.ts
+import { useQuery as useQuery4, useMutation as useMutation2, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+var sessionKeys = {
+  all: ["sessions"],
+  lists: (agentId) => [...sessionKeys.all, "list", agentId],
+  details: () => [...sessionKeys.all, "detail"],
+  detail: (agentId, sessionId) => [...sessionKeys.details(), agentId, sessionId]
+};
+function useSessions(agentId) {
+  const client = useRickyData();
+  return useQuery4({
+    queryKey: sessionKeys.lists(agentId),
+    queryFn: () => client.listSessions(agentId),
+    enabled: !!agentId,
+    staleTime: 3e4
+  });
+}
+function useSession(agentId, sessionId) {
+  const client = useRickyData();
+  return useQuery4({
+    queryKey: sessionKeys.detail(agentId, sessionId),
+    queryFn: () => client.getSession(agentId, sessionId),
+    enabled: !!agentId && !!sessionId
+  });
+}
+function useDeleteSession() {
+  const client = useRickyData();
+  const queryClient = useQueryClient2();
+  return useMutation2({
+    mutationFn: ({ agentId, sessionId }) => client.deleteSession(agentId, sessionId),
+    onSuccess: (_data, { agentId }) => {
+      queryClient.invalidateQueries({ queryKey: sessionKeys.lists(agentId) });
+    }
+  });
+}
+
+// src/hooks/wallet-settings.ts
+import { useQuery as useQuery5, useMutation as useMutation3, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
+var walletSettingsKeys = {
+  all: ["wallet-settings"],
+  settings: () => [...walletSettingsKeys.all, "current"]
+};
+function useWalletSettings() {
+  const client = useRickyData();
+  const queryClient = useQueryClient3();
+  const query = useQuery5({
+    queryKey: walletSettingsKeys.settings(),
+    queryFn: () => client.getWalletSettings(),
+    staleTime: 6e4
+  });
+  const mutation = useMutation3({
+    mutationFn: (settings) => client.updateWalletSettings(settings),
+    onSuccess: (data) => {
+      queryClient.setQueryData(walletSettingsKeys.settings(), data);
+    }
+  });
+  return {
+    ...query,
+    settings: query.data,
+    updateSettings: mutation.mutateAsync,
+    isUpdating: mutation.isPending
+  };
+}
+
+// src/hooks/secrets.ts
+import { useState, useEffect, useCallback } from "react";
+function useSecrets({ agentId, mcpServers = [] }) {
+  const client = useRickyData();
+  const [sections, setSections] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const fetchRequirements = useCallback(async () => {
+    setLoading(true);
+    const result = [];
+    try {
+      const { configured } = await client.getApiKeyStatus();
+      if (!configured) {
+        result.push({
+          id: "anthropic",
+          label: "Anthropic API Key",
+          keys: ["ANTHROPIC_API_KEY"],
+          configuredKeys: [],
+          save: async (secrets) => {
+            const key = secrets["ANTHROPIC_API_KEY"];
+            if (key) await client.setApiKey(key);
+          }
+        });
+      }
+    } catch {
+    }
+    try {
+      const status = await client.getAgentSecretStatus(agentId);
+      if (status.missingRequired.length > 0) {
+        result.push({
+          id: `agent-${agentId}`,
+          label: "Agent Secrets",
+          keys: status.missingRequired,
+          configuredKeys: status.configuredSecrets,
+          save: async (secrets) => {
+            await client.storeAgentSecrets(agentId, secrets);
+          }
+        });
+      }
+    } catch {
+    }
+    if (mcpServers.length > 0) {
+      try {
+        const reqs = await client.getMcpRequirements(agentId);
+        for (const server of reqs.servers) {
+          const missing = server.missing || server.required.filter((k) => !server.configured?.includes(k));
+          if (missing.length > 0) {
+            result.push({
+              id: `mcp-${server.serverId}`,
+              label: `MCP: ${server.name || server.serverId}`,
+              keys: missing,
+              configuredKeys: server.configured || [],
+              save: async (secrets) => {
+                await client.storeMcpSecrets(server.serverId, secrets);
+              }
+            });
+          }
+        }
+      } catch {
+      }
+    }
+    setSections(result);
+    setLoading(false);
+  }, [client, agentId, mcpServers.join(",")]);
+  useEffect(() => {
+    fetchRequirements();
+  }, [fetchRequirements]);
+  return {
+    sections,
+    loading,
+    allConfigured: !loading && sections.length === 0,
+    refresh: fetchRequirements
+  };
+}
+
+// src/hooks/chat.ts
+import { useState as useState2, useCallback as useCallback2, useRef, useEffect as useEffect2 } from "react";
+import { streamSSEEvents } from "rickydata/agent";
+function useAgentChat({
+  agentId,
+  model = "haiku",
+  resumeSessionId
+}) {
+  const client = useRickyData();
+  const [messages, setMessages] = useState2([]);
+  const [messagesLoading, setMessagesLoading] = useState2(!!resumeSessionId);
+  const [sending, setSending] = useState2(false);
+  const [sessionId, setSessionId] = useState2(resumeSessionId || null);
+  const [streamingPhase, setStreamingPhase] = useState2("idle");
+  const [activeTools, setActiveTools] = useState2([]);
+  const [apiKeyConfigured, setApiKeyConfigured] = useState2(null);
+  const modelRef = useRef(model);
+  modelRef.current = model;
+  useEffect2(() => {
+    let cancelled = false;
+    client.getApiKeyStatus().then(({ configured }) => {
+      if (!cancelled) setApiKeyConfigured(configured);
+    }).catch(() => {
+      if (!cancelled) setApiKeyConfigured(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client]);
+  useEffect2(() => {
+    if (!resumeSessionId) return;
+    let cancelled = false;
+    client.getSession(agentId, resumeSessionId).then((session) => {
+      if (cancelled) return;
+      const msgs = session.messages.map((m, i) => ({
+        id: `restored-${i}`,
+        role: m.role === "user" ? "user" : "agent",
+        content: m.content,
+        timestamp: m.timestamp || session.createdAt
+      }));
+      setMessages(msgs);
+      setMessagesLoading(false);
+    }).catch(() => {
+      if (!cancelled) setMessagesLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, agentId, resumeSessionId]);
+  const sendMessage = useCallback2(async (text) => {
+    if (!text.trim() || sending) return;
+    if (apiKeyConfigured === false) {
+      setMessages((prev) => [...prev, {
+        id: `msg-${Date.now()}-error`,
+        role: "agent",
+        content: "Anthropic API key required. Configure ANTHROPIC_API_KEY before chatting.",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      }]);
+      return;
+    }
+    const userMessage = {
+      id: `msg-${Date.now()}`,
+      role: "user",
+      content: text.trim(),
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    setMessages((prev) => [...prev, userMessage]);
+    setSending(true);
+    try {
+      let sid = sessionId;
+      if (!sid) {
+        const session = await client.createSession(agentId, modelRef.current);
+        sid = session.id;
+        setSessionId(sid);
+      }
+      const response = await client.chatRaw(agentId, sid, text.trim(), modelRef.current);
+      let textAccum = "";
+      const toolExecutions = [];
+      let messageCost = "";
+      let toolIdCounter = 0;
+      const streamingMsgId = `agent-streaming-${Date.now()}`;
+      setActiveTools([]);
+      setStreamingPhase("idle");
+      await streamSSEEvents(response, (event) => {
+        switch (event.type) {
+          case "text":
+            setStreamingPhase("streaming");
+            setActiveTools([]);
+            textAccum += event.data;
+            setMessages((prev) => {
+              const existing = prev.find((m) => m.id === streamingMsgId);
+              if (!existing) {
+                return [...prev, {
+                  id: streamingMsgId,
+                  role: "agent",
+                  content: textAccum,
+                  toolExecutions: toolExecutions.length > 0 ? [...toolExecutions] : void 0,
+                  timestamp: (/* @__PURE__ */ new Date()).toISOString()
+                }];
+              }
+              return prev.map(
+                (m) => m.id === streamingMsgId ? { ...m, content: textAccum, toolExecutions: toolExecutions.length > 0 ? [...toolExecutions] : void 0 } : m
+              );
+            });
+            break;
+          case "tool_call": {
+            const data = event.data;
+            const displayName = data.displayName || data.name.split("__").pop() || data.name;
+            toolExecutions.push({
+              id: data.id || `tool-${++toolIdCounter}`,
+              name: data.name,
+              displayName,
+              args: data.args
+            });
+            setActiveTools((prev) => [...prev, displayName]);
+            setStreamingPhase("tools");
+            break;
+          }
+          case "tool_result": {
+            const resultData = event.data;
+            const resultContent = resultData.result ?? resultData.content;
+            let matched = false;
+            if (resultData.id) {
+              const idx = toolExecutions.findIndex((t) => t.id === resultData.id);
+              if (idx !== -1) {
+                toolExecutions[idx].result = { content: resultContent, isError: resultData.isError };
+                matched = true;
+              }
+            }
+            if (!matched) {
+              for (let i = toolExecutions.length - 1; i >= 0; i--) {
+                if (toolExecutions[i].name === resultData.name && !toolExecutions[i].result) {
+                  toolExecutions[i].result = { content: resultContent, isError: resultData.isError };
+                  break;
+                }
+              }
+            }
+            break;
+          }
+          case "done":
+            if (event.data.cost) messageCost = event.data.cost;
+            break;
+          case "error":
+            textAccum += `
+
+Error: ${event.data.message}`;
+            break;
+        }
+      });
+      setMessages((prev) => {
+        const withoutStreaming = prev.filter((m) => m.id !== streamingMsgId);
+        return [...withoutStreaming, {
+          id: `msg-${Date.now()}-agent`,
+          role: "agent",
+          content: textAccum || "(No response)",
+          toolExecutions: toolExecutions.length > 0 ? [...toolExecutions] : void 0,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          costUSD: messageCost || void 0
+        }];
+      });
+    } catch (err) {
+      const errStatus = typeof err === "object" && err !== null && "status" in err ? err.status : 0;
+      const errMessage = err instanceof Error ? err.message : String(err);
+      if (errStatus === 402) {
+        setMessages((prev) => [...prev, {
+          id: `msg-${Date.now()}-error`,
+          role: "agent",
+          content: "Insufficient balance. Please deposit funds to continue.",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        }]);
+      } else if (errStatus === 404 || /session not found|not found/i.test(errMessage)) {
+        setSessionId(null);
+        setMessages((prev) => [...prev, {
+          id: `msg-${Date.now()}-error`,
+          role: "agent",
+          content: "Session expired. Starting a new conversation...",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        }]);
+      } else if (errStatus === 401 || /unauthorized|authentication|invalid.*token|expired.*token/i.test(errMessage)) {
+        setSessionId(null);
+        setMessages((prev) => [...prev, {
+          id: `msg-${Date.now()}-error`,
+          role: "agent",
+          content: "Re-authenticating... please send again.",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        }]);
+      } else if (errStatus === 400 && /anthropic api key|required/i.test(errMessage)) {
+        setApiKeyConfigured(false);
+        setMessages((prev) => [...prev, {
+          id: `msg-${Date.now()}-error`,
+          role: "agent",
+          content: errMessage,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        }]);
+      } else {
+        setMessages((prev) => [...prev, {
+          id: `msg-${Date.now()}-error`,
+          role: "agent",
+          content: `Error: ${errMessage}`,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        }]);
+      }
+    } finally {
+      setSending(false);
+      setStreamingPhase("idle");
+      setActiveTools([]);
+    }
+  }, [client, agentId, sending, sessionId, apiKeyConfigured]);
+  const refreshApiKeyStatus = useCallback2(() => {
+    client.getApiKeyStatus().then(({ configured }) => setApiKeyConfigured(configured)).catch(() => {
+    });
+  }, [client]);
+  const prevApiKeyRef = useRef(apiKeyConfigured);
+  useEffect2(() => {
+    if (prevApiKeyRef.current === false && apiKeyConfigured === true) {
+      setMessages((prev) => [...prev, {
+        id: `msg-${Date.now()}-system`,
+        role: "agent",
+        content: "API key configured successfully! You can start chatting now.",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      }]);
+    }
+    prevApiKeyRef.current = apiKeyConfigured;
+  }, [apiKeyConfigured]);
+  const clearChat = useCallback2(() => {
+    setMessages([]);
+    setSessionId(null);
+    setStreamingPhase("idle");
+    setActiveTools([]);
+  }, []);
+  return {
+    messages,
+    messagesLoading,
+    sending,
+    sessionId,
+    streamingPhase,
+    activeTools,
+    apiKeyConfigured,
+    sendMessage,
+    clearChat,
+    refreshApiKeyStatus
+  };
+}
+
+// src/components/SecretForm.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var container = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "12px"
+};
+var labelStyle = {
+  display: "block",
+  fontSize: "12px",
+  fontWeight: 500,
+  fontFamily: "monospace",
+  color: "#9ca3af",
+  marginBottom: "4px"
+};
+var configuredBadge = {
+  marginLeft: "6px",
+  color: "#10b981",
+  fontFamily: "sans-serif"
+};
+var inputWrapper = {
+  position: "relative"
+};
+var inputStyle = {
+  width: "100%",
+  padding: "8px 36px 8px 12px",
+  fontSize: "14px",
+  fontFamily: "monospace",
+  borderRadius: "8px",
+  border: "1px solid rgba(255,255,255,0.1)",
+  backgroundColor: "#1f2937",
+  color: "#fff",
+  outline: "none",
+  boxSizing: "border-box"
+};
+var toggleBtn = {
+  position: "absolute",
+  right: "8px",
+  top: "50%",
+  transform: "translateY(-50%)",
+  padding: "4px",
+  background: "none",
+  border: "none",
+  color: "#9ca3af",
+  cursor: "pointer",
+  fontSize: "14px"
+};
+var feedbackBase = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  padding: "8px",
+  borderRadius: "8px",
+  fontSize: "12px"
+};
+var feedbackSuccess = {
+  ...feedbackBase,
+  backgroundColor: "rgba(16,185,129,0.1)",
+  border: "1px solid rgba(16,185,129,0.2)",
+  color: "#34d399"
+};
+var feedbackError = {
+  ...feedbackBase,
+  backgroundColor: "rgba(239,68,68,0.1)",
+  border: "1px solid rgba(239,68,68,0.2)",
+  color: "#f87171"
+};
+var btnRow = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between"
+};
+var saveBtn = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "6px",
+  padding: "6px 12px",
+  fontSize: "12px",
+  fontWeight: 500,
+  borderRadius: "6px",
+  border: "none",
+  backgroundColor: "#6366f1",
+  color: "#fff",
+  cursor: "pointer",
+  transition: "opacity 0.15s"
+};
+var cancelBtn = {
+  padding: "6px 12px",
+  fontSize: "12px",
+  fontWeight: 500,
+  borderRadius: "6px",
+  border: "none",
+  background: "none",
+  color: "#9ca3af",
+  cursor: "pointer"
+};
+var deleteBtn = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "4px",
+  padding: "6px 10px",
+  fontSize: "12px",
+  fontWeight: 500,
+  borderRadius: "6px",
+  border: "none",
+  background: "none",
+  color: "#f87171",
+  cursor: "pointer"
+};
+function SecretForm({ secretKeys, configuredKeys, onSave, onDelete, onClose, className }) {
+  const [values, setValues] = useState3(() => {
+    const init = {};
+    for (const key of secretKeys) init[key] = "";
+    return init;
+  });
+  const [showValues, setShowValues] = useState3({});
+  const [saving, setSaving] = useState3(false);
+  const [deleting, setDeleting] = useState3(false);
+  const [feedback, setFeedback] = useState3(null);
+  const hasAnyValue = Object.values(values).some((v) => v.trim().length > 0);
+  const handleSave = async () => {
+    const secrets = {};
+    for (const [key, val] of Object.entries(values)) {
+      if (val.trim()) secrets[key] = val.trim();
+    }
+    if (Object.keys(secrets).length === 0) return;
+    setSaving(true);
+    setFeedback(null);
+    try {
+      await onSave(secrets);
+      setFeedback({ type: "success", message: "Secrets saved successfully." });
+      setValues((prev) => {
+        const next = { ...prev };
+        for (const k of Object.keys(next)) next[k] = "";
+        return next;
+      });
+      if (onClose) setTimeout(onClose, 800);
+    } catch (err) {
+      setFeedback({ type: "error", message: err instanceof Error ? err.message : "Failed to save." });
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleDelete = async () => {
+    if (!onDelete) return;
+    setDeleting(true);
+    setFeedback(null);
+    try {
+      await onDelete();
+      setFeedback({ type: "success", message: "Secrets removed." });
+      if (onClose) setTimeout(onClose, 800);
+    } catch (err) {
+      setFeedback({ type: "error", message: err instanceof Error ? err.message : "Failed to remove." });
+    } finally {
+      setDeleting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: container, className, children: [
+    secretKeys.map((key) => {
+      const isVisible = showValues[key] ?? false;
+      const isConfigured = configuredKeys.includes(key);
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("label", { style: labelStyle, children: [
+          key,
+          isConfigured && /* @__PURE__ */ jsx2("span", { style: configuredBadge, children: "(configured)" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: inputWrapper, children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: isVisible ? "text" : "password",
+              value: values[key],
+              onChange: (e) => setValues((prev) => ({ ...prev, [key]: e.target.value })),
+              placeholder: isConfigured ? "Enter new value to update" : "Enter value",
+              style: inputStyle
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowValues((prev) => ({ ...prev, [key]: !isVisible })),
+              style: toggleBtn,
+              "aria-label": isVisible ? "Hide" : "Show",
+              children: isVisible ? "\u{1F441}\uFE0F\u200D\u{1F5E8}\uFE0F" : "\u{1F441}\uFE0F"
+            }
+          )
+        ] })
+      ] }, key);
+    }),
+    feedback && /* @__PURE__ */ jsxs("div", { style: feedback.type === "success" ? feedbackSuccess : feedbackError, children: [
+      feedback.type === "success" ? "\u2713" : "\u26A0",
+      " ",
+      feedback.message
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: btnRow, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: handleSave,
+            disabled: saving || !hasAnyValue,
+            style: { ...saveBtn, opacity: saving || !hasAnyValue ? 0.4 : 1 },
+            children: saving ? "Saving..." : "Save Keys"
+          }
+        ),
+        onClose && /* @__PURE__ */ jsx2("button", { onClick: onClose, style: cancelBtn, children: "Cancel" })
+      ] }),
+      onDelete && configuredKeys.length > 0 && /* @__PURE__ */ jsx2("button", { onClick: handleDelete, disabled: deleting, style: deleteBtn, children: deleting ? "..." : "\u{1F5D1} Remove" })
+    ] })
+  ] });
+}
+
+// src/components/SecretOrchestrator.tsx
+import { useState as useState4, useEffect as useEffect3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var wrapper = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px"
+};
+var loadingBox = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  padding: "12px",
+  borderRadius: "12px",
+  border: "1px solid rgba(245,158,11,0.2)",
+  backgroundColor: "rgba(31,41,55,0.8)",
+  fontSize: "12px",
+  color: "#fcd34d"
+};
+var sectionBox = {
+  borderRadius: "12px",
+  border: "1px solid rgba(245,158,11,0.2)",
+  backgroundColor: "rgba(31,41,55,0.8)",
+  overflow: "hidden"
+};
+var headerBtn = {
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  padding: "12px 16px",
+  textAlign: "left",
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  color: "inherit"
+};
+var headerLabel = {
+  flex: 1,
+  fontSize: "12px",
+  fontWeight: 500,
+  color: "#fcd34d"
+};
+var bodyBox = {
+  padding: "0 16px 16px"
+};
+function SecretOrchestrator({
+  agentId,
+  mcpServers,
+  onAllConfigured,
+  className,
+  compact
+}) {
+  const { sections, loading, allConfigured, refresh } = useSecrets({ agentId, mcpServers });
+  const [expandedId, setExpandedId] = useState4(null);
+  useEffect3(() => {
+    if (sections.length > 0 && expandedId === null) {
+      setExpandedId(sections[0].id);
+    }
+  }, [sections, expandedId]);
+  useEffect3(() => {
+    if (allConfigured) onAllConfigured?.();
+  }, [allConfigured, onAllConfigured]);
+  if (loading) {
+    return /* @__PURE__ */ jsxs2("div", { style: loadingBox, className, children: [
+      /* @__PURE__ */ jsx3("span", { style: { animation: "spin 1s linear infinite" }, children: "\u21BB" }),
+      "Checking configuration requirements..."
+    ] });
+  }
+  if (sections.length === 0) return null;
+  return /* @__PURE__ */ jsx3("div", { style: wrapper, className, children: sections.map((section) => {
+    const isExpanded = expandedId === section.id;
+    return /* @__PURE__ */ jsxs2("div", { style: sectionBox, children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          onClick: () => setExpandedId(isExpanded ? null : section.id),
+          style: headerBtn,
+          children: [
+            /* @__PURE__ */ jsx3("span", { style: { color: "#f59e0b" }, children: "\u26A0" }),
+            /* @__PURE__ */ jsxs2("span", { style: headerLabel, children: [
+              section.label,
+              " required"
+            ] }),
+            /* @__PURE__ */ jsx3("span", { style: { color: "#6b7280", fontSize: "12px" }, children: isExpanded ? "\u25BC" : "\u25B6" })
+          ]
+        }
+      ),
+      isExpanded && /* @__PURE__ */ jsx3("div", { style: bodyBox, children: /* @__PURE__ */ jsx3(
+        SecretForm,
+        {
+          secretKeys: section.keys,
+          configuredKeys: section.configuredKeys,
+          onSave: async (secrets) => {
+            await section.save(secrets);
+            refresh();
+          },
+          onClose: compact ? void 0 : () => setExpandedId(null)
+        }
+      ) })
+    ] }, section.id);
+  }) });
+}
+
+// src/components/WalletChip.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var chipStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "6px",
+  padding: "4px 10px",
+  borderRadius: "9999px",
+  backgroundColor: "rgba(255,255,255,0.08)",
+  border: "1px solid rgba(255,255,255,0.1)",
+  fontSize: "12px",
+  fontFamily: "monospace",
+  color: "#d1d5db",
+  cursor: "default",
+  transition: "background-color 0.15s"
+};
+var chipClickable = {
+  ...chipStyle,
+  cursor: "pointer"
+};
+var balanceBadge = {
+  padding: "1px 6px",
+  borderRadius: "9999px",
+  backgroundColor: "rgba(99,102,241,0.2)",
+  color: "#a5b4fc",
+  fontSize: "11px",
+  fontFamily: "sans-serif",
+  fontWeight: 500
+};
+function truncateAddress(address) {
+  if (address.length <= 10) return address;
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+function WalletChip({ address, balanceDisplay, displayName, onPress, className }) {
+  const Tag = onPress ? "button" : "div";
+  const style = onPress ? chipClickable : chipStyle;
+  return /* @__PURE__ */ jsxs3(
+    Tag,
+    {
+      onClick: onPress,
+      style: { ...style, ...onPress ? { border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.08)" } : {} },
+      className,
+      ...Tag === "button" ? { type: "button" } : {},
+      children: [
+        /* @__PURE__ */ jsx4("span", { children: displayName || truncateAddress(address) }),
+        balanceDisplay && /* @__PURE__ */ jsx4("span", { style: balanceBadge, children: balanceDisplay })
+      ]
+    }
+  );
+}
+export {
+  RickyDataProvider,
+  SecretForm,
+  SecretOrchestrator,
+  WalletChip,
+  agentKeys,
+  apiKeyKeys,
+  balanceKeys,
+  sessionKeys,
+  useAgent,
+  useAgentChat,
+  useAgents,
+  useApiKeyStatus,
+  useDeleteApiKey,
+  useDeleteSession,
+  useOpenAIApiKeyStatus,
+  useRickyData,
+  useSecrets,
+  useSession,
+  useSessions,
+  useSetApiKey,
+  useSetOpenAIApiKey,
+  useWalletBalance,
+  useWalletSettings,
+  useWalletTransactions,
+  walletSettingsKeys
+};