@vnl-works/agentjoy-react 0.1.2 → 0.1.6

package/dist/index.mjs

@@ -2,45 +2,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 
 // src/utils.ts
-function phaseLabel(phase, tone, locale = "ja") {
-  const ja = {
-    prepare: "\u6E96\u5099",
-    research: "\u8ABF\u67FB",
-    execute: "\u5B9F\u884C",
-    format: "\u6574\u5F62",
-    verify: "\u691C\u8A3C",
-    finalize: "\u4ED5\u4E0A\u3052"
-  };
-  const en = {
-    prepare: "Prepare",
-    research: "Research",
-    execute: "Execute",
-    format: "Format",
-    verify: "Verify",
-    finalize: "Finalize"
-  };
-  const base = locale === "ja" ? ja[phase] : en[phase];
-  return base;
-}
-function statusLabel(status, tone, locale = "ja") {
-  if (locale === "en") {
-    if (status === "running") return "Running";
-    if (status === "completed") return "Completed";
-    return "Failed";
-  }
-  const polite = { running: "\u5B9F\u884C\u4E2D", completed: "\u5B8C\u4E86", failed: "\u5931\u6557" };
-  const formal = { running: "\u5B9F\u884C\u4E2D", completed: "\u5B8C\u4E86", failed: "\u5931\u6557" };
-  const casual = { running: "\u5B9F\u884C\u4E2D", completed: "\u5B8C\u4E86", failed: "\u5931\u6557" };
-  const map = tone === "formal" ? formal : tone === "casual" ? casual : polite;
-  return map[status];
-}
-function formatTs(ts, locale = "ja") {
-  try {
-    return new Date(ts).toLocaleString(locale === "ja" ? "ja-JP" : "en-US");
-  } catch {
-    return ts;
-  }
-}
 function avatarForPack(packId) {
   const m = {
     default: "\u{1F9ED}",
@@ -56,245 +17,739 @@ function clamp01(x) {
   if (x > 1) return 1;
   return x;
 }
+function formatRelative(date, now = /* @__PURE__ */ new Date(), locale = "en") {
+  const d = date instanceof Date ? date : new Date(date);
+  const diffMs = now.getTime() - d.getTime();
+  const diffSec = Math.floor(diffMs / 1e3);
+  if (!Number.isFinite(diffSec)) return "";
+  if (diffSec < 0) return locale === "ja" ? "\u672A\u6765" : "in the future";
+  if (diffSec < 10) return locale === "ja" ? "\u305F\u3063\u305F\u4ECA" : "just now";
+  if (diffSec < 60) return locale === "ja" ? `${diffSec}\u79D2\u524D` : `${diffSec}s ago`;
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return locale === "ja" ? `${diffMin}\u5206\u524D` : `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return locale === "ja" ? `${diffHr}\u6642\u9593\u524D` : `${diffHr}h ago`;
+  const diffDay = Math.floor(diffHr / 24);
+  return locale === "ja" ? `${diffDay}\u65E5\u524D` : `${diffDay}d ago`;
+}
+var EVENT_LABELS = {
+  "run.created": "Run created",
+  "phase.started": "Phase started",
+  "phase.progress": "Progress",
+  "tool.called": "Tool called",
+  "tool.completed": "Tool completed",
+  "artifact.ready": "Artifact ready",
+  warning: "Warning",
+  error: "Error",
+  "run.completed": "Completed",
+  "run.failed": "Failed",
+  "system.comment": "Comment"
+};
+function humanizeEventType(t) {
+  const key = String(t);
+  if (EVENT_LABELS[key]) return EVENT_LABELS[key];
+  return key.split(".").map((s) => s ? s[0].toUpperCase() + s.slice(1) : s).join(" ");
+}
+function xpFloorForLevel(level, base = 40, inc = 20) {
+  const l = Math.max(1, Math.floor(level));
+  const n = l - 1;
+  return n * base + inc * n * (n - 1) / 2;
+}
+function levelFromXp(xp) {
+  const safeXp = Math.max(0, Math.floor(Number.isFinite(xp) ? xp : 0));
+  let level = 1;
+  while (level < 999 && safeXp >= xpFloorForLevel(level + 1)) level++;
+  return { level, xpFloor: xpFloorForLevel(level), xpCeil: xpFloorForLevel(level + 1) };
+}
+function hashString(s) {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = h * 31 + s.charCodeAt(i) | 0;
+  return Math.abs(h);
+}
+function pickFrom(list, key) {
+  if (list.length === 0) return "";
+  return list[hashString(key) % list.length];
+}
+function pickComment(mode, pack, eventType) {
+  const p = (pack || "default").toLowerCase();
+  const suffix = p.includes("cat") || p.includes("nyan") ? " \u306B\u3083" : "";
+  const professional = {
+    "tool.called": ["\u51E6\u7406\u3092\u958B\u59CB\u3057\u307E\u3057\u305F\u3002", "\u30C4\u30FC\u30EB\u3092\u547C\u3073\u51FA\u3057\u3066\u3044\u307E\u3059\u3002", "\u4F5C\u696D\u3092\u9032\u3081\u307E\u3059\u3002"],
+    "tool.completed": ["\u51E6\u7406\u304C\u5B8C\u4E86\u3057\u307E\u3057\u305F\u3002", "\u30C4\u30FC\u30EB\u306E\u5B9F\u884C\u304C\u5B8C\u4E86\u3057\u307E\u3057\u305F\u3002", "\u6B21\u306E\u5DE5\u7A0B\u306B\u9032\u307F\u307E\u3059\u3002"],
+    "artifact.ready": ["\u6210\u679C\u7269\u3092\u751F\u6210\u3057\u307E\u3057\u305F\u3002", "\u51FA\u529B\u3092\u6E96\u5099\u3057\u307E\u3057\u305F\u3002", "\u78BA\u8A8D\u3067\u304D\u308B\u72B6\u614B\u306B\u306A\u308A\u307E\u3057\u305F\u3002"],
+    "phase.progress": ["\u9032\u6357\u3092\u66F4\u65B0\u3057\u307E\u3057\u305F\u3002", "\u9806\u8ABF\u306B\u9032\u3093\u3067\u3044\u307E\u3059\u3002", "\u5F15\u304D\u7D9A\u304D\u51E6\u7406\u4E2D\u3067\u3059\u3002"],
+    warning: ["\u6CE8\u610F\u70B9\u304C\u3042\u308A\u307E\u3059\u3002", "\u8EFD\u5FAE\u306A\u554F\u984C\u304C\u691C\u51FA\u3055\u308C\u307E\u3057\u305F\u3002", "\u5FF5\u306E\u305F\u3081\u78BA\u8A8D\u3057\u3066\u304F\u3060\u3055\u3044\u3002"],
+    error: ["\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F\u3002", "\u51E6\u7406\u306B\u5931\u6557\u3057\u307E\u3057\u305F\u3002", "\u539F\u56E0\u3092\u78BA\u8A8D\u3057\u3066\u3044\u307E\u3059\u3002"],
+    "run.completed": ["\u5B8C\u4E86\u3057\u307E\u3057\u305F\u3002\u304A\u75B2\u308C\u3055\u307E\u3067\u3057\u305F\u3002", "\u6B63\u5E38\u306B\u5B8C\u4E86\u3057\u307E\u3057\u305F\u3002", "\u5B9F\u884C\u304C\u5B8C\u4E86\u3057\u307E\u3057\u305F\u3002"],
+    "run.failed": ["\u5931\u6557\u3057\u307E\u3057\u305F\u3002\u539F\u56E0\u3092\u78BA\u8A8D\u3057\u307E\u3059\u3002", "\u51E6\u7406\u304C\u4E2D\u65AD\u3055\u308C\u307E\u3057\u305F\u3002", "\u518D\u5B9F\u884C\u307E\u305F\u306F\u8A2D\u5B9A\u78BA\u8A8D\u3092\u63A8\u5968\u3057\u307E\u3059\u3002"]
+  };
+  const playful = {
+    "tool.called": ["\u3084\u3063\u3066\u307F\u308B\u306D\uFF01", "\u30C4\u30FC\u30EB\u547C\u3076\u3088\u301C", "\u3044\u304F\u3088\u3063\uFF01"],
+    "tool.completed": ["\u3067\u304D\u305F\uFF01", "\u5B8C\u4E86\u301C\uFF01", "\u3046\u307E\u304F\u3044\u3063\u305F\uFF01"],
+    "artifact.ready": ["\u3067\u304D\u3042\u304C\u308A\uFF01", "\u6210\u679C\u7269\u3067\u304D\u305F\u3088\uFF01", "\u307B\u3044\u3063\uFF01"],
+    "phase.progress": ["\u9032\u3093\u3067\u308B\u3088\u301C", "\u3044\u3044\u611F\u3058\uFF01", "\u3082\u3046\u5C11\u3057\uFF01"],
+    warning: ["\u3061\u3087\u3063\u3068\u602A\u3057\u3044\u304B\u3082", "\u6CE8\u610F\u3060\u3088\uFF01", "\u78BA\u8A8D\u3057\u3066\u306D"],
+    error: ["\u3046\u308F\u3063\u3001\u30A8\u30E9\u30FC\uFF01", "\u3084\u3089\u304B\u3057\u305F\u2026", "\u3054\u3081\u3093\u3001\u5931\u6557\uFF01"],
+    "run.completed": ["\u3084\u308A\u5207\u3063\u305F\uFF01\u{1F389}", "\u5B8C\u4E86\u301C\uFF01", "\u304A\u3064\u304B\u308C\u3055\u307E\uFF01"],
+    "run.failed": ["\u3080\u3080\u2026\u3082\u3046\u4E00\u56DE\u3044\u304F\uFF1F", "\u5931\u6557\u3057\u3061\u3083\u3063\u305F\u2026", "\u6B21\u306F\u3046\u307E\u304F\u3084\u308B\uFF01"]
+  };
+  const dict = mode === "playful" ? playful : professional;
+  const candidates = dict[eventType] || dict["phase.progress"] || ["..."];
+  return pickFrom(candidates, `${mode}:${pack}:${eventType}`) + suffix;
+}
 
 // src/AgentJoyRun.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function xpForEvent(e) {
-  switch (e.type) {
-    case "phase.started":
-      return 18;
-    case "phase.progress":
-      return 6;
-    case "tool.called":
-      return 10;
-    case "tool.completed":
-      return 12;
-    case "warning":
-      return 2;
-    case "error":
-    case "run.failed":
-      return 1;
-    case "run.completed":
-      return 25;
-    case "system.comment":
-      return 0;
-    default:
-      return 4;
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function safeOrigin() {
+  try {
+    if (typeof window !== "undefined" && window.location?.origin) return window.location.origin;
+  } catch {
   }
+  return "";
 }
-function useBeep() {
-  const ctxRef = useRef(null);
-  function ensure() {
-    if (!ctxRef.current) {
-      const AC = window.AudioContext || window.webkitAudioContext;
-      if (AC) ctxRef.current = new AC();
-    }
-    return ctxRef.current;
-  }
-  function tone(freq, ms) {
-    const ctx = ensure();
-    if (!ctx) return;
-    const o = ctx.createOscillator();
-    const g = ctx.createGain();
-    o.type = "sine";
-    o.frequency.value = freq;
-    g.gain.value = 0.03;
-    o.connect(g);
-    g.connect(ctx.destination);
-    o.start();
-    setTimeout(() => {
-      o.stop();
-      o.disconnect();
-      g.disconnect();
-    }, ms);
-  }
-  function success() {
-    tone(740, 90);
-    setTimeout(() => tone(880, 120), 110);
-  }
-  function error() {
-    tone(220, 200);
-  }
-  function tick() {
-    tone(520, 55);
+function isImportantEvent(e) {
+  return e.type === "warning" || e.type === "error" || e.type === "run.failed" || e.type === "run.completed" || e.type === "artifact.ready";
+}
+function isToolEvent(e) {
+  return e.type.startsWith("tool.") || !!e.tool;
+}
+function isArtifactEvent(e) {
+  return e.type === "artifact.ready" || !!e.artifacts && e.artifacts.length > 0;
+}
+function eventSearchText(e) {
+  const parts = [];
+  parts.push(e.type || "");
+  parts.push(e.message || "");
+  parts.push(e.detail || "");
+  if (e.tool?.name) parts.push(e.tool.name);
+  if (e.tool?.input_summary) parts.push(e.tool.input_summary);
+  if (e.tool?.output_summary) parts.push(e.tool.output_summary);
+  if (e.artifacts?.length) {
+    for (const a of e.artifacts) parts.push(`${a.label ?? ""} ${a.value ?? ""}`.trim());
   }
-  return { tick, success, error };
+  return parts.join(" ").toLowerCase();
 }
+var DEMO_SCRIPT = [
+  { type: "run.created", message: "AgentJoy demo: watching an AI agent work\u2026", progress: 0.02 },
+  {
+    type: "phase.started",
+    message: "Phase: research",
+    progress: 0.08
+  },
+  {
+    type: "tool.called",
+    message: "Searching docs for pricing benchmarks\u2026",
+    progress: 0.15,
+    tool: { name: "web.search", input_summary: "agent monitoring widget pricing", latency_ms: 320 }
+  },
+  {
+    type: "tool.completed",
+    message: "Summarized 6 sources. Drafting plan\u2026",
+    progress: 0.32,
+    tool: { name: "web.search", output_summary: "key patterns + positioning", latency_ms: 1420 }
+  },
+  {
+    type: "phase.progress",
+    message: "Writing LP copy (hero + CTA + FAQ)\u2026",
+    progress: 0.52
+  },
+  {
+    type: "warning",
+    message: "Minor: rate limited once, retrying gracefully.",
+    progress: 0.62
+  },
+  {
+    type: "artifact.ready",
+    message: "LP copy draft is ready.",
+    progress: 0.82,
+    artifacts: [
+      { label: "Landing page copy", kind: "url", value: "https://example.com/agentjoy-demo-lp" },
+      { label: "Pricing bullets", kind: "text", value: "Starter / Pro / Team tiers" }
+    ]
+  },
+  {
+    type: "phase.progress",
+    message: "Final checks\u2026",
+    progress: 0.94
+  },
+  {
+    type: "run.completed",
+    message: "Done. Ready to ship \u{1F680}",
+    progress: 1
+  }
+];
 function AgentJoyRun(props) {
-  const apiBaseUrl = props.apiBaseUrl ?? "";
-  const locale = props.locale ?? "ja";
-  const limit = props.limit ?? 200;
-  const { tick, success, error } = useBeep();
+  const apiBase = (props.apiBaseUrl ?? "").replace(/\/$/, "");
+  const isDemo = !!props.demo;
   const [run, setRun] = useState(null);
-  const [events, setEvents] = useState([]);
   const [brand, setBrand] = useState(null);
-  const [muted, setMuted] = useState(props.mute ?? true);
-  const esRef = useRef(null);
+  const [events, setEvents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState(null);
+  const [conn, setConn] = useState("idle");
+  const [muted, setMuted] = useState(props.mute ?? false);
+  const [soundEnabled, setSoundEnabled] = useState(props.sound ?? true);
+  const [xp, setXp] = useState(0);
+  const listRef = useRef(null);
+  const [stickToBottom, setStickToBottom] = useState(true);
+  const audioCtxRef = useRef(null);
+  const lastBeepAtRef = useRef(0);
+  const seenIdsRef = useRef(/* @__PURE__ */ new Set());
+  const lastSeenEventIdRef = useRef(null);
+  const maxEvents = props.maxEvents ?? 5e3;
+  const autoScroll = props.autoScroll ?? true;
+  const compact = props.compact ?? false;
+  const showHeader = props.showHeader ?? true;
+  const showControls = props.showControls ?? true;
+  const showToolbar = props.showToolbar ?? true;
+  const pollIntervalMs = props.pollIntervalMs ?? (isDemo ? 0 : 8e3);
+  const showXp = props.showXp ?? (brand?.show_xp ?? true);
+  const showPersona = props.showPersona ?? (brand?.show_persona ?? true);
+  const locale = props.locale ?? (brand?.locale ?? "en");
+  const [filter, setFilter] = useState(props.defaultFilter ?? "all");
+  const [query, setQuery] = useState("");
   useEffect(() => {
-    let cancelled = false;
-    async function load() {
-      const url = `${apiBaseUrl}/v1/runs/${encodeURIComponent(props.runId)}?token=${encodeURIComponent(props.token)}&limit=2000`;
-      const res = await fetch(url);
-      if (!res.ok) throw new Error(await res.text());
-      const data = await res.json();
-      if (cancelled) return;
-      setRun(data.run);
-      setEvents(data.events || []);
-      const mergedBrand = { ...data.workspace_brand, ...props.brandOverride || {} };
-      setBrand(mergedBrand);
-      setMuted(props.mute ?? !!mergedBrand.mute_default);
+    if (props.mute !== void 0) setMuted(props.mute);
+  }, [props.mute]);
+  function resetEvents(next) {
+    const trimmed = next.length > maxEvents ? next.slice(next.length - maxEvents) : next;
+    seenIdsRef.current = new Set(trimmed.map((e) => String(e.id)));
+    let lastId = null;
+    for (let i = trimmed.length - 1; i >= 0; i--) {
+      const idAny = trimmed[i]?.id;
+      if (typeof idAny === "number" && Number.isFinite(idAny)) {
+        lastId = idAny;
+        break;
+      }
     }
-    load().catch(() => {
+    lastSeenEventIdRef.current = lastId;
+    setEvents(trimmed);
+  }
+  function appendEvent(ev) {
+    if (ev == null || ev.id == null) return;
+    const evId = String(ev.id);
+    if (seenIdsRef.current.has(evId)) return;
+    seenIdsRef.current.add(evId);
+    if (typeof ev.id === "number" && Number.isFinite(ev.id)) {
+      lastSeenEventIdRef.current = ev.id;
+    }
+    if (ev.type === "run.completed") {
+      setRun((r) => r ? { ...r, status: "completed", ended_at: r.ended_at ?? ev.ts } : r);
+    } else if (ev.type === "run.failed") {
+      setRun((r) => r ? { ...r, status: "failed", ended_at: r.ended_at ?? ev.ts } : r);
+    }
+    setEvents((prev) => {
+      const next = [...prev, ev];
+      if (next.length <= maxEvents) return next;
+      return next.slice(next.length - maxEvents);
     });
-    return () => {
-      cancelled = true;
-    };
-  }, [apiBaseUrl, props.runId, props.token]);
-  useEffect(() => {
-    const url = `${apiBaseUrl}/v1/runs/${encodeURIComponent(props.runId)}/stream?token=${encodeURIComponent(props.token)}`;
-    const es = new EventSource(url);
-    esRef.current = es;
-    es.onmessage = (msg) => {
+  }
+  async function fetchPublic(opts = {}) {
+    if (!props.runId || !props.token) {
+      setLoadError("Missing runId or token (or use `<AgentJoyRun demo />` to try instantly).");
+      setLoading(false);
+      return;
+    }
+    const limit = Math.max(1, Math.min(5e3, maxEvents));
+    const qs = new URLSearchParams();
+    qs.set("token", props.token);
+    qs.set("limit", String(limit));
+    const id = encodeURIComponent(props.runId);
+    const urls = [
+      `${apiBase}/v1/runs/${id}/public?${qs.toString()}`,
+      `${apiBase}/v1/runs/${id}?${qs.toString()}`
+    ];
+    let lastErr = null;
+    for (const url of urls) {
       try {
-        const e = JSON.parse(msg.data);
-        setEvents((prev) => [...prev, e]);
-        if (e.type === "run.completed") {
-          setRun((r) => r ? { ...r, status: "completed", ended_at: e.ts } : r);
+        const res = await fetch(url);
+        if (!res.ok) {
+          const t = await res.text().catch(() => "");
+          lastErr = new Error(`${res.status} ${res.statusText}${t ? `: ${t}` : ""}`);
+          continue;
         }
-        if (e.type === "run.failed") {
-          setRun((r) => r ? { ...r, status: "failed", ended_at: e.ts } : r);
+        const r = await res.json();
+        if (!r?.run) {
+          lastErr = new Error("Invalid response from AgentJoy API.");
+          continue;
         }
-        if (props.sound && !muted) {
-          if (e.type === "phase.started") tick();
-          if (e.type === "run.completed") success();
-          if (e.type === "run.failed" || e.type === "error") error();
+        setRun(r.run);
+        setBrand(r.workspace_brand);
+        if (opts.reset) {
+          resetEvents(r.events ?? []);
+        } else if (r.events?.length) {
+          for (const e of r.events) appendEvent(e);
         }
-      } catch {
+        if (props.mute === void 0) setMuted(!!r.workspace_brand?.mute_default);
+        return;
+      } catch (e) {
+        lastErr = e;
+      }
+    }
+    throw lastErr ?? new Error("Failed to load run detail.");
+  }
+  async function fetchEventsAfter(afterId) {
+    if (!props.runId || !props.token) return;
+    const safeAfter = typeof afterId === "number" && Number.isFinite(afterId) ? afterId : null;
+    if (safeAfter === null) {
+      await fetchPublic({ reset: false });
+      return;
+    }
+    const qs = new URLSearchParams();
+    qs.set("token", props.token);
+    qs.set("after_id", String(safeAfter));
+    qs.set("limit", "1000");
+    const url = `${apiBase}/v1/runs/${encodeURIComponent(props.runId)}/events?${qs.toString()}`;
+    const res = await fetch(url);
+    if (!res.ok) {
+      if (res.status === 404 || res.status === 405) {
+        await fetchPublic({ reset: false });
+        return;
       }
+      const t = await res.text().catch(() => "");
+      throw new Error(`${res.status} ${res.statusText}${t ? `: ${t}` : ""}`);
+    }
+    const data = await res.json();
+    const evs = Array.isArray(data?.events) ? data.events : [];
+    if (evs.length) {
+      for (const e of evs) appendEvent(e);
+    }
+  }
+  async function load() {
+    if (isDemo) return;
+    setLoading(true);
+    setLoadError(null);
+    try {
+      await fetchPublic({ reset: true });
+    } catch (e) {
+      setLoadError(e?.message ?? String(e));
+    } finally {
+      setLoading(false);
+    }
+  }
+  useEffect(() => {
+    if (!isDemo) return;
+    setLoading(false);
+    setLoadError(null);
+    setConn("open");
+    const demoBrand = {
+      product_name: "AgentJoy",
+      show_xp: true,
+      show_persona: true,
+      mute_default: false,
+      tone: "playful"
     };
-    es.onerror = () => {
+    const demoRun = {
+      id: "demo",
+      title: "Demo: AgentJoy Widget",
+      status: "running",
+      mode: "playful",
+      pack: "nyan",
+      share_token: ""
     };
+    setBrand(demoBrand);
+    setRun(demoRun);
+    resetEvents([]);
+    let i = 0;
+    const speed = Math.max(200, props.demoSpeedMs ?? 700);
+    const timer = window.setInterval(() => {
+      const src = DEMO_SCRIPT[i];
+      if (!src) return;
+      const ev = {
+        id: `demo-${i + 1}`,
+        ts: new Date(Date.now() + i * speed).toISOString(),
+        ...src
+      };
+      appendEvent(ev);
+      if (src.type === "run.completed") {
+        setRun((r) => r ? { ...r, status: "completed" } : r);
+      }
+      i += 1;
+      if (i >= DEMO_SCRIPT.length) window.clearInterval(timer);
+    }, speed);
+    return () => window.clearInterval(timer);
+  }, [props.demo]);
+  useEffect(() => {
+    if (isDemo) return;
+    load();
+  }, [apiBase, props.runId, props.token, isDemo]);
+  useEffect(() => {
+    const total = events.reduce((acc, e) => {
+      if (e.type === "tool.completed") return acc + 8;
+      if (e.type === "artifact.ready") return acc + 12;
+      if (e.type === "warning") return acc + 2;
+      if (e.type === "error" || e.type === "run.failed") return acc + 1;
+      if (e.type === "phase.progress") return acc + 1;
+      return acc;
+    }, 0);
+    setXp(total);
+  }, [events]);
+  const level = useMemo(() => levelFromXp(xp), [xp]);
+  const shareUrl = useMemo(() => {
+    if (props.shareUrl) return props.shareUrl;
+    if (run?.share_token) {
+      const origin = apiBase ? apiBase.replace(/\/$/, "") : safeOrigin();
+      return `${origin}/share/${run.share_token}`;
+    }
+    return null;
+  }, [props.shareUrl, run?.share_token, apiBase]);
+  function onScroll() {
+    const el = listRef.current;
+    if (!el) return;
+    const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 40;
+    setStickToBottom(nearBottom);
+  }
+  function scrollToBottom() {
+    const el = listRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+    setStickToBottom(true);
+  }
+  useEffect(() => {
+    if (!autoScroll) return;
+    if (!stickToBottom) return;
+    const el = listRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, [events.length, stickToBottom, autoScroll]);
+  function ensureAudio() {
+    if (audioCtxRef.current) return audioCtxRef.current;
+    const AC = window?.AudioContext || window?.webkitAudioContext;
+    if (!AC) return null;
+    try {
+      audioCtxRef.current = new AC();
+    } catch {
+      return null;
+    }
+    return audioCtxRef.current;
+  }
+  function beep(freq) {
+    if (!soundEnabled || muted) return;
+    if (typeof window === "undefined") return;
+    const now = Date.now();
+    if (now - lastBeepAtRef.current < 120) return;
+    lastBeepAtRef.current = now;
+    const ac = ensureAudio();
+    if (!ac) return;
+    try {
+      const osc = ac.createOscillator();
+      const gain = ac.createGain();
+      osc.type = "sine";
+      osc.frequency.value = freq;
+      gain.gain.value = 0.02;
+      osc.connect(gain);
+      gain.connect(ac.destination);
+      osc.start();
+      osc.stop(ac.currentTime + 0.08);
+    } catch {
+    }
+  }
+  useEffect(() => {
+    if (isDemo) return;
+    if (!run) return;
+    if (run.status !== "running") return;
+    if (!props.runId || !props.token) return;
+    const runId = props.runId;
+    const token = props.token;
+    const buildUrl = () => {
+      const qs = new URLSearchParams();
+      qs.set("token", token);
+      const afterId = lastSeenEventIdRef.current;
+      if (typeof afterId === "number" && Number.isFinite(afterId)) {
+        qs.set("after_id", String(afterId));
+      }
+      return `${apiBase}/v1/runs/${encodeURIComponent(runId)}/stream?${qs.toString()}`;
+    };
+    let closed = false;
+    let es = null;
+    let retry = 0;
+    let timer = null;
+    const connect = () => {
+      if (closed) return;
+      setConn(retry === 0 ? "connecting" : "reconnecting");
+      try {
+        es = new EventSource(buildUrl());
+      } catch {
+        setConn("error");
+        return;
+      }
+      es.onopen = () => {
+        retry = 0;
+        setConn("open");
+      };
+      es.onerror = () => {
+        if (closed) return;
+        setConn("reconnecting");
+        try {
+          es?.close();
+        } catch {
+        }
+        es = null;
+        retry = Math.min(retry + 1, 8);
+        const base = Math.min(3e4, 500 * Math.pow(2, retry));
+        const jitter = Math.floor(Math.random() * 250);
+        timer = window.setTimeout(connect, base + jitter);
+      };
+      es.onmessage = (msg) => {
+        try {
+          const payload = JSON.parse(msg.data);
+          const ev = payload && payload.event ? payload.event : payload;
+          if (!ev || ev.id == null) return;
+          props.onEvent?.(ev);
+          appendEvent(ev);
+          if (ev.type === "warning") beep(420);
+          else if (ev.type === "error" || ev.type === "run.failed") beep(180);
+          else if (ev.type === "artifact.ready") beep(660);
+          else if (ev.type === "tool.completed") beep(520);
+        } catch {
+        }
+      };
+    };
+    connect();
     return () => {
-      es.close();
-      esRef.current = null;
+      closed = true;
+      if (timer) window.clearTimeout(timer);
+      try {
+        es?.close();
+      } catch {
+      }
     };
-  }, [apiBaseUrl, props.runId, props.token, props.sound, muted]);
+  }, [apiBase, props.runId, props.token, isDemo, run?.status]);
   useEffect(() => {
+    if (isDemo) return;
+    if (!props.runId || !props.token) return;
     if (!run) return;
-    if (run.status === "completed") props.onComplete?.(run);
-    if (run.status === "failed") props.onError?.(run);
-  }, [run?.status]);
-  const resolvedBrand = useMemo(() => {
-    if (!brand) return null;
-    return { ...brand, ...props.brandOverride || {} };
-  }, [brand, props.brandOverride]);
-  const showXp = props.showXp ?? resolvedBrand?.show_xp ?? true;
-  const showPersona = props.showPersona ?? resolvedBrand?.show_persona ?? true;
-  const filtered = useMemo(() => {
-    const arr = showPersona ? events : events.filter((e) => e.type !== "system.comment");
-    return arr.slice(-limit);
-  }, [events, limit, showPersona]);
-  const currentPhase = useMemo(() => {
-    for (let i = events.length - 1; i >= 0; i--) {
-      const p = events[i].phase;
-      if (p) return p;
+    if (pollIntervalMs <= 0) return;
+    let stopped = false;
+    const tick = async () => {
+      if (stopped) return;
+      try {
+        await fetchEventsAfter(lastSeenEventIdRef.current);
+      } catch {
+      }
+    };
+    tick();
+    const id = window.setInterval(tick, pollIntervalMs);
+    return () => {
+      stopped = true;
+      window.clearInterval(id);
+    };
+  }, [apiBase, props.runId, props.token, isDemo, run?.status, pollIntervalMs]);
+  async function copyToClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+      beep(740);
+    } catch {
     }
-    return "prepare";
-  }, [events]);
-  const lastProgress = useMemo(() => {
-    for (let i = events.length - 1; i >= 0; i--) {
-      const p = clamp01(events[i].progress ?? null);
-      if (typeof p === "number") return p;
+  }
+  function downloadJsonl() {
+    try {
+      const lines = events.map((e) => JSON.stringify(e));
+      const blob = new Blob([lines.join("\n") + "\n"], { type: "application/x-ndjson" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `agentjoy-${run?.id ?? "run"}-events.jsonl`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch {
     }
-    return null;
-  }, [events]);
-  const progressPct = useMemo(() => {
-    if (typeof lastProgress === "number") return Math.round(lastProgress * 100);
-    const order = ["prepare", "research", "execute", "format", "verify", "finalize"];
-    const idx = Math.max(0, order.indexOf(currentPhase));
-    return Math.round((idx + 0.4) / order.length * 100);
-  }, [currentPhase, lastProgress]);
-  const xp = useMemo(() => events.reduce((acc, e) => acc + xpForEvent(e), 0), [events]);
-  const level = Math.floor(xp / 250) + 1;
-  const title = resolvedBrand?.product_name || "AgentJoy";
-  const tone = resolvedBrand?.tone || "polite";
-  const status = run?.status || "running";
-  const rootStyle = {
-    // @ts-ignore CSS variable typing
-    ["--aj-primary"]: resolvedBrand?.primary_color || "#4F46E5"
-  };
-  if (!run) {
-    return /* @__PURE__ */ jsx("div", { className: "ajw-root", style: rootStyle, children: /* @__PURE__ */ jsxs("div", { className: "ajw-card", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ajw-header", children: [
-        /* @__PURE__ */ jsx("div", { className: "ajw-logo", children: "AJ" }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { className: "ajw-title", children: title }),
-          /* @__PURE__ */ jsx("div", { className: "ajw-sub", children: "loading\u2026" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "ajw-body", children: /* @__PURE__ */ jsxs("div", { className: "ajw-event ajw-eventSystem", children: [
-        /* @__PURE__ */ jsx("div", { className: "ajw-eventMsg", children: "Loading run\u2026" }),
-        /* @__PURE__ */ jsx("div", { className: "ajw-eventMeta", children: /* @__PURE__ */ jsxs("span", { className: "ajw-mono", children: [
-          "runId=",
-          props.runId
-        ] }) })
-      ] }) })
+  }
+  const title = run?.title || brand?.product_name || "AgentJoy";
+  const progressRaw = clamp01(Math.max(...events.map((e) => e.progress ?? 0), 0));
+  const progressValue = progressRaw ?? 0;
+  const progressPct = Math.round(progressValue * 100);
+  const progressLabel = progressRaw === null ? "\u2014" : `${progressPct}%`;
+  const lastEventAt = (() => {
+    if (!events.length) return null;
+    const ts = events[events.length - 1]?.ts;
+    return ts ? new Date(ts) : null;
+  })();
+  const statusLabel = (() => {
+    if (!run) return "loading";
+    if (run.status === "running") return conn === "open" ? "running" : conn;
+    return run.status;
+  })();
+  const persona = useMemo(() => {
+    const pack = run?.pack || "default";
+    return avatarForPack(pack);
+  }, [run?.pack]);
+  const comment = useMemo(() => {
+    if (!showPersona) return null;
+    const last = events[events.length - 1];
+    if (!last) return null;
+    if (last.type === "system.comment") return last.message;
+    return pickComment(run?.mode || "professional", run?.pack || "default", last.type);
+  }, [events, run?.mode, run?.pack, showPersona]);
+  const listMaxHeight = props.height ?? 360;
+  const normalizedQuery = query.trim().toLowerCase();
+  const visibleEvents = useMemo(() => {
+    let base = events;
+    if (filter === "important") base = base.filter(isImportantEvent);
+    if (filter === "tools") base = base.filter(isToolEvent);
+    if (filter === "artifacts") base = base.filter(isArtifactEvent);
+    if (normalizedQuery) {
+      base = base.filter((e) => eventSearchText(e).includes(normalizedQuery));
+    }
+    return base;
+  }, [events, filter, normalizedQuery]);
+  if (!isDemo && (!props.runId || !props.token)) {
+    return /* @__PURE__ */ jsx("div", { className: "ajw-wrap", children: /* @__PURE__ */ jsxs("div", { className: "ajw-error", children: [
+      /* @__PURE__ */ jsx("div", { className: "ajw-error-title", children: "Missing configuration" }),
+      /* @__PURE__ */ jsxs("div", { className: "ajw-error-detail", children: [
+        "Provide ",
+        /* @__PURE__ */ jsx("code", { children: "runId" }),
+        " and ",
+        /* @__PURE__ */ jsx("code", { children: "token" }),
+        " (live mode), or use ",
+        /* @__PURE__ */ jsx("code", { children: "<AgentJoyRun demo />" }),
+        " ",
+        "to try instantly."
+      ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "ajw-root", style: rootStyle, children: /* @__PURE__ */ jsxs("div", { className: "ajw-card", children: [
-    /* @__PURE__ */ jsxs("div", { className: "ajw-header", children: [
-      /* @__PURE__ */ jsx("div", { className: "ajw-logo", children: resolvedBrand?.logo_url ? /* @__PURE__ */ jsx("img", { src: resolvedBrand.logo_url, style: { width: 28, height: 28, objectFit: "cover" } }) : "AJ" }),
-      /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs("div", { className: `ajw-wrap ${compact ? "ajw-compact" : ""}`, "data-locale": locale, children: [
+    showHeader && /* @__PURE__ */ jsxs("div", { className: "ajw-header", children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
         /* @__PURE__ */ jsx("div", { className: "ajw-title", children: title }),
-        /* @__PURE__ */ jsxs("div", { className: "ajw-sub", children: [
-          statusLabel(status, tone, locale),
-          " \xB7 ",
-          phaseLabel(currentPhase, tone, locale),
-          " \xB7 ",
-          progressPct,
-          "%"
-        ] })
+        /* @__PURE__ */ jsx("span", { className: `ajw-pill ajw-pill-${statusLabel}`, children: statusLabel })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "ajw-actions", children: /* @__PURE__ */ jsx("button", { className: "ajw-btn", onClick: () => setMuted((m) => !m), title: "mute/unmute", children: muted ? "\u{1F507}" : "\u{1F50A}" }) })
+      /* @__PURE__ */ jsxs("div", { className: "ajw-sub", children: [
+        lastEventAt ? `last: ${formatRelative(lastEventAt, /* @__PURE__ */ new Date(), locale)}` : "waiting for events",
+        autoScroll && !stickToBottom ? " \u2022 scroll paused" : ""
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ajw-body", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ajw-progressRow", children: [
-        /* @__PURE__ */ jsx("div", { className: "ajw-progressBar", "aria-label": "progress", children: /* @__PURE__ */ jsx("div", { style: { width: `${progressPct}%` } }) }),
-        showXp ? /* @__PURE__ */ jsxs("div", { className: "ajw-xp", children: [
-          "Lv.",
-          level,
-          " \xB7 XP ",
-          xp
-        ] }) : null
+    showControls && /* @__PURE__ */ jsxs("div", { className: "ajw-actions", children: [
+      shareUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ajw-btn",
+            onClick: () => copyToClipboard(shareUrl),
+            title: "Copy share URL",
+            children: "Copy link"
+          }
+        ),
+        /* @__PURE__ */ jsx("a", { className: "ajw-btn ajw-btn-link", href: shareUrl, target: "_blank", rel: "noreferrer", title: "Open share URL", children: "Open" })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "ajw-events", children: filtered.map((e) => {
-        if (e.type === "system.comment") {
-          return /* @__PURE__ */ jsxs("div", { className: "ajw-persona", children: [
-            /* @__PURE__ */ jsx("div", { className: "ajw-avatar", "aria-hidden": true, children: avatarForPack(run.pack) }),
-            /* @__PURE__ */ jsx("div", { className: "ajw-bubble", children: e.message })
-          ] }, e.id);
+      autoScroll && !stickToBottom && /* @__PURE__ */ jsx("button", { type: "button", className: "ajw-btn", onClick: scrollToBottom, title: "Jump to latest", children: "Jump to latest" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ajw-btn", onClick: downloadJsonl, title: "Download events as JSONL", children: "Download log" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ajw-btn", onClick: () => setMuted((m) => !m), title: "Toggle mute", children: muted ? "Unmute" : "Mute" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ajw-btn", onClick: () => setSoundEnabled((s) => !s), title: "Toggle sound", children: soundEnabled ? "Sound on" : "Sound off" })
+    ] }),
+    showToolbar && /* @__PURE__ */ jsxs("div", { className: "ajw-toolbar", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "ajw-search",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder: locale === "ja" ? "\u691C\u7D22\uFF08\u30E1\u30C3\u30BB\u30FC\u30B8 / \u30C4\u30FC\u30EB / \u7A2E\u5225\uFF09" : "Search (message / tool / type)"
         }
-        const cls = e.type === "warning" ? "ajw-event ajw-eventWarning" : e.type === "error" || e.type === "run.failed" ? "ajw-event ajw-eventError" : e.type === "run.created" ? "ajw-event ajw-eventSystem" : "ajw-event";
-        return /* @__PURE__ */ jsxs("div", { className: cls, children: [
-          /* @__PURE__ */ jsx("div", { className: "ajw-eventMsg", children: e.message }),
-          /* @__PURE__ */ jsxs("div", { className: "ajw-eventMeta", children: [
-            /* @__PURE__ */ jsxs("span", { className: "ajw-mono", children: [
-              e.type,
-              e.phase ? ` \xB7 ${e.phase}` : "",
-              e.tool?.name ? ` \xB7 tool=${e.tool.name}` : ""
-            ] }),
-            /* @__PURE__ */ jsx("span", { children: formatTs(e.ts, locale) }),
-            typeof e.progress === "number" ? /* @__PURE__ */ jsxs("span", { children: [
-              "progress=",
-              Math.round(e.progress * 100),
-              "%"
-            ] }) : null
+      ),
+      /* @__PURE__ */ jsx("div", { className: "ajw-filters", role: "tablist", "aria-label": "Event filters", children: [
+        ["all", locale === "ja" ? "\u3059\u3079\u3066" : "All"],
+        ["important", locale === "ja" ? "\u91CD\u8981" : "Important"],
+        ["tools", locale === "ja" ? "\u30C4\u30FC\u30EB" : "Tools"],
+        ["artifacts", locale === "ja" ? "\u6210\u679C\u7269" : "Artifacts"]
+      ].map(([key, label]) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `ajw-chip ${filter === key ? "ajw-chip-active" : ""}`,
+          onClick: () => setFilter(key),
+          role: "tab",
+          "aria-selected": filter === key,
+          children: label
+        },
+        key
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "ajw-count", title: "Visible / Total", children: [
+        visibleEvents.length,
+        "/",
+        events.length
+      ] })
+    ] }),
+    showXp && /* @__PURE__ */ jsxs("div", { className: "ajw-progress", children: [
+      /* @__PURE__ */ jsx("div", { className: "ajw-bar", "aria-label": "Progress", children: /* @__PURE__ */ jsx("div", { className: "ajw-bar-fill", style: { width: `${progressPct}%` } }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ajw-xp", children: [
+        "Lv ",
+        level.level,
+        " \u2022 XP ",
+        xp,
+        " \u2022 ",
+        progressLabel
+      ] })
+    ] }),
+    showPersona && comment && /* @__PURE__ */ jsxs("div", { className: "ajw-persona", children: [
+      /* @__PURE__ */ jsx("div", { className: "ajw-avatar", "aria-hidden": "true", children: persona }),
+      /* @__PURE__ */ jsx("div", { className: "ajw-bubble", children: comment })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "ajw-events",
+        ref: listRef,
+        onScroll,
+        style: { maxHeight: typeof listMaxHeight === "number" ? `${listMaxHeight}px` : listMaxHeight },
+        children: [
+          loading && /* @__PURE__ */ jsxs("div", { className: "ajw-skeleton", children: [
+            /* @__PURE__ */ jsx("div", { className: "ajw-skeleton-line" }),
+            /* @__PURE__ */ jsx("div", { className: "ajw-skeleton-line" }),
+            /* @__PURE__ */ jsx("div", { className: "ajw-skeleton-line" })
+          ] }),
+          !loading && loadError && /* @__PURE__ */ jsxs("div", { className: "ajw-error", children: [
+            /* @__PURE__ */ jsx("div", { className: "ajw-error-title", children: "Failed to load" }),
+            /* @__PURE__ */ jsx("div", { className: "ajw-error-detail", children: loadError }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "ajw-btn", onClick: () => load(), children: "Retry" })
           ] }),
-          e.detail ? /* @__PURE__ */ jsx("div", { className: "ajw-eventMeta", style: { whiteSpace: "pre-wrap" }, children: e.detail }) : null
-        ] }, e.id);
-      }) })
-    ] })
-  ] }) });
+          !loading && !loadError && visibleEvents.map((e) => /* @__PURE__ */ jsxs("div", { className: `ajw-ev ajw-ev-${e.type.replace(".", "-")}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: "ajw-ev-top", children: [
+              /* @__PURE__ */ jsx("div", { className: "ajw-ev-type", children: humanizeEventType(e.type) }),
+              /* @__PURE__ */ jsxs("div", { className: "ajw-ev-right", children: [
+                /* @__PURE__ */ jsx("div", { className: "ajw-ev-ts", children: e.ts?.slice(11, 19) ?? "" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ajw-iconbtn",
+                    title: locale === "ja" ? "\u30A4\u30D9\u30F3\u30C8\u3092\u30B3\u30D4\u30FC" : "Copy event",
+                    onClick: () => copyToClipboard(JSON.stringify(e)),
+                    children: "\u29C9"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "ajw-ev-msg", children: e.message }),
+            e.tool && /* @__PURE__ */ jsxs("div", { className: "ajw-ev-tool", children: [
+              /* @__PURE__ */ jsx("div", { className: "ajw-ev-tool-name", children: e.tool.name }),
+              e.tool.input_summary && /* @__PURE__ */ jsxs("div", { className: "ajw-ev-tool-io", children: [
+                "in: ",
+                e.tool.input_summary
+              ] }),
+              e.tool.output_summary && /* @__PURE__ */ jsxs("div", { className: "ajw-ev-tool-io", children: [
+                "out: ",
+                e.tool.output_summary
+              ] }),
+              typeof e.tool.latency_ms === "number" && /* @__PURE__ */ jsxs("div", { className: "ajw-ev-tool-io", children: [
+                e.tool.latency_ms,
+                "ms"
+              ] })
+            ] }),
+            e.artifacts && e.artifacts.length > 0 && /* @__PURE__ */ jsx("div", { className: "ajw-ev-artifacts", children: e.artifacts.map((a, i) => /* @__PURE__ */ jsxs("div", { className: "ajw-ev-artifact", children: [
+              /* @__PURE__ */ jsx("span", { className: "ajw-ev-artifact-label", children: a.label }),
+              a.kind === "url" ? /* @__PURE__ */ jsx("a", { href: a.value, target: "_blank", rel: "noreferrer", children: a.value }) : /* @__PURE__ */ jsx("code", { children: a.value })
+            ] }, i)) }),
+            e.detail && /* @__PURE__ */ jsx("div", { className: "ajw-ev-detail", children: e.detail })
+          ] }, e.id))
+        ]
+      }
+    ),
+    autoScroll && !stickToBottom && /* @__PURE__ */ jsx("button", { type: "button", className: "ajw-float", onClick: scrollToBottom, title: "Jump to latest", children: "\u2193 Latest" })
+  ] });
 }
 export {
   AgentJoyRun