@vnl-works/agentjoy-react 0.1.2

package/README.md

@@ -0,0 +1,42 @@
+# @vnl-works/agentjoy-react
+
+AgentJoy の「待ち時間が楽しくなる」埋め込みWidget（React）です。  
+FastAPI backend（`backend/`）と組み合わせると、Runの進行をライブ表示できます。
+
+## インストール（例）
+
+```bash
+npm i @vnl-works/agentjoy-react
+# or pnpm add @vnl-works/agentjoy-react
+```
+
+## 使い方
+
+```tsx
+import React from "react";
+import { AgentJoyRun } from "@vnl-works/agentjoy-react";
+import "@vnl-works/agentjoy-react/styles.css";
+
+export function MyPage() {
+  return (
+    <AgentJoyRun
+      runId="run_..."
+      token="pub_..."        // publish token か share token
+      apiBaseUrl="http://127.0.0.1:8000"
+      sound={true}
+    />
+  );
+}
+```
+
+## Props（抜粋）
+- `runId` / `token`: 必須
+- `apiBaseUrl`: バックエンドのURL（同一オリジンなら省略可）
+- `sound`: 進捗に合わせた簡易SE（デフォルトfalse）
+- `mute`: 強制ミュート（brandのmute_defaultより優先）
+- `showPersona`: `system.comment` を表示（人格パック）
+- `showXp`: XP/レベル表示
+
+## イベント仕様
+backend は `POST /v1/runs/{runId}/events` へ AgentJoy event schema を受け取ります。  
+OpenAPI は backend の `/docs` を参照してください。

package/dist/index.css

@@ -0,0 +1,171 @@
+/* src/styles.css */
+.ajw-root {
+  --ajw-primary: var(--aj-primary, #4F46E5);
+  --ajw-border: #E5E7EB;
+  --ajw-text: #111827;
+  --ajw-muted: #6B7280;
+  --ajw-bg: #ffffff;
+  --ajw-card: #ffffff;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Helvetica,
+    Arial,
+    "Apple Color Emoji",
+    "Segoe UI Emoji";
+  color: var(--ajw-text);
+}
+.ajw-card {
+  border: 1px solid var(--ajw-border);
+  border-radius: 14px;
+  background: var(--ajw-card);
+  overflow: hidden;
+}
+.ajw-header {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--ajw-border);
+  background: #fafafa;
+}
+.ajw-logo {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: var(--ajw-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 700;
+  overflow: hidden;
+  flex: none;
+}
+.ajw-title {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1.1;
+}
+.ajw-sub {
+  font-size: 12px;
+  color: var(--ajw-muted);
+  margin-top: 2px;
+}
+.ajw-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.ajw-btn {
+  border: 1px solid var(--ajw-border);
+  border-radius: 10px;
+  background: white;
+  padding: 6px 10px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.ajw-btnPrimary {
+  border-color: var(--ajw-primary);
+  background: var(--ajw-primary);
+  color: white;
+}
+.ajw-body {
+  padding: 12px 14px;
+}
+.ajw-progressRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.ajw-progressBar {
+  height: 8px;
+  background: #F3F4F6;
+  border-radius: 999px;
+  overflow: hidden;
+  flex: 1;
+}
+.ajw-progressBar > div {
+  height: 100%;
+  width: 0%;
+  background: var(--ajw-primary);
+}
+.ajw-xp {
+  font-size: 12px;
+  color: var(--ajw-muted);
+  white-space: nowrap;
+}
+.ajw-events {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 360px;
+  overflow: auto;
+  padding-right: 4px;
+}
+.ajw-event {
+  border-left: 3px solid var(--ajw-border);
+  background: #FAFAFA;
+  border-radius: 10px;
+  padding: 10px 10px 10px 12px;
+}
+.ajw-eventWarning {
+  border-left-color: rgba(180, 83, 9, 0.8);
+}
+.ajw-eventError {
+  border-left-color: rgba(185, 28, 28, 0.8);
+}
+.ajw-eventSystem {
+  border-left-color: rgba(79, 70, 229, 0.7);
+}
+.ajw-eventMsg {
+  font-size: 13px;
+  font-weight: 600;
+}
+.ajw-eventMeta {
+  font-size: 12px;
+  color: var(--ajw-muted);
+  margin-top: 4px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.ajw-mono {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Liberation Mono",
+    "Courier New",
+    monospace;
+}
+.ajw-persona {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+.ajw-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: 10px;
+  background: rgba(79, 70, 229, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+.ajw-bubble {
+  background: white;
+  border: 1px solid var(--ajw-border);
+  border-radius: 12px;
+  padding: 9px 10px;
+  font-size: 13px;
+  font-weight: 600;
+}

package/dist/index.d.mts

@@ -0,0 +1,90 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type AgentJoyPhase = "prepare" | "research" | "execute" | "format" | "verify" | "finalize";
+type AgentJoyEventType = "run.created" | "phase.started" | "phase.progress" | "tool.called" | "tool.completed" | "artifact.ready" | "warning" | "error" | "run.completed" | "run.failed" | "system.comment";
+type WorkspaceBrand = {
+    product_name: string;
+    logo_url?: string | null;
+    primary_color: string;
+    tone: "polite" | "formal" | "casual";
+    mute_default: boolean;
+    show_xp: boolean;
+    show_persona: boolean;
+};
+type ToolInfo = {
+    name: string;
+    input_summary?: string;
+    output_summary?: string;
+    latency_ms?: number;
+};
+type Artifact = {
+    kind: "url" | "file" | "text";
+    label: string;
+    value: string;
+};
+type AgentJoyEvent = {
+    id: number;
+    run_id: string;
+    ts: string;
+    type: AgentJoyEventType;
+    phase?: AgentJoyPhase | null;
+    message: string;
+    detail?: string | null;
+    progress?: number | null;
+    severity?: "info" | "warning" | "error";
+    actor?: "agent" | "tool" | "system" | "user";
+    tool?: ToolInfo | null;
+    artifacts?: Artifact[] | null;
+    meta?: Record<string, unknown> | null;
+    tags?: string[] | null;
+};
+type RunPublic = {
+    id: string;
+    workspace_id: string;
+    status: "running" | "completed" | "failed";
+    created_at: string;
+    started_at?: string | null;
+    ended_at?: string | null;
+    last_event_at?: string | null;
+    title?: string | null;
+    external_user_id?: string | null;
+    mode: "professional" | "playful";
+    pack: string;
+    share_token?: string | null;
+    share_expires_at?: string | null;
+    metadata?: Record<string, unknown> | null;
+};
+type RunDetailResponse = {
+    run: RunPublic;
+    events: AgentJoyEvent[];
+    workspace_brand: WorkspaceBrand;
+};
+
+type AgentJoyRunProps = {
+    runId: string;
+    /** publish token (server side) or share token (viewer) */
+    token: string;
+    /** default: "" (same origin) */
+    apiBaseUrl?: string;
+    /** default: "ja" */
+    locale?: "ja" | "en";
+    /** number of events rendered (default 200) */
+    limit?: number;
+    /** sound effects (default false) */
+    sound?: boolean;
+    /** force mute state (overrides brand mute_default). if omitted, uses brand default */
+    mute?: boolean;
+    /** override brand (optional) */
+    brandOverride?: Partial<WorkspaceBrand>;
+    /** show XP/level (default: brand.show_xp) */
+    showXp?: boolean;
+    /** show persona comment events (default: brand.show_persona) */
+    showPersona?: boolean;
+    /** called when run status becomes completed */
+    onComplete?: (run: RunPublic) => void;
+    /** called when run status becomes failed */
+    onError?: (run: RunPublic) => void;
+};
+declare function AgentJoyRun(props: AgentJoyRunProps): react_jsx_runtime.JSX.Element;
+
+export { type AgentJoyEvent, type AgentJoyEventType, type AgentJoyPhase, AgentJoyRun, type AgentJoyRunProps, type Artifact, type RunDetailResponse, type RunPublic, type ToolInfo, type WorkspaceBrand };

package/dist/index.d.ts

@@ -0,0 +1,90 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type AgentJoyPhase = "prepare" | "research" | "execute" | "format" | "verify" | "finalize";
+type AgentJoyEventType = "run.created" | "phase.started" | "phase.progress" | "tool.called" | "tool.completed" | "artifact.ready" | "warning" | "error" | "run.completed" | "run.failed" | "system.comment";
+type WorkspaceBrand = {
+    product_name: string;
+    logo_url?: string | null;
+    primary_color: string;
+    tone: "polite" | "formal" | "casual";
+    mute_default: boolean;
+    show_xp: boolean;
+    show_persona: boolean;
+};
+type ToolInfo = {
+    name: string;
+    input_summary?: string;
+    output_summary?: string;
+    latency_ms?: number;
+};
+type Artifact = {
+    kind: "url" | "file" | "text";
+    label: string;
+    value: string;
+};
+type AgentJoyEvent = {
+    id: number;
+    run_id: string;
+    ts: string;
+    type: AgentJoyEventType;
+    phase?: AgentJoyPhase | null;
+    message: string;
+    detail?: string | null;
+    progress?: number | null;
+    severity?: "info" | "warning" | "error";
+    actor?: "agent" | "tool" | "system" | "user";
+    tool?: ToolInfo | null;
+    artifacts?: Artifact[] | null;
+    meta?: Record<string, unknown> | null;
+    tags?: string[] | null;
+};
+type RunPublic = {
+    id: string;
+    workspace_id: string;
+    status: "running" | "completed" | "failed";
+    created_at: string;
+    started_at?: string | null;
+    ended_at?: string | null;
+    last_event_at?: string | null;
+    title?: string | null;
+    external_user_id?: string | null;
+    mode: "professional" | "playful";
+    pack: string;
+    share_token?: string | null;
+    share_expires_at?: string | null;
+    metadata?: Record<string, unknown> | null;
+};
+type RunDetailResponse = {
+    run: RunPublic;
+    events: AgentJoyEvent[];
+    workspace_brand: WorkspaceBrand;
+};
+
+type AgentJoyRunProps = {
+    runId: string;
+    /** publish token (server side) or share token (viewer) */
+    token: string;
+    /** default: "" (same origin) */
+    apiBaseUrl?: string;
+    /** default: "ja" */
+    locale?: "ja" | "en";
+    /** number of events rendered (default 200) */
+    limit?: number;
+    /** sound effects (default false) */
+    sound?: boolean;
+    /** force mute state (overrides brand mute_default). if omitted, uses brand default */
+    mute?: boolean;
+    /** override brand (optional) */
+    brandOverride?: Partial<WorkspaceBrand>;
+    /** show XP/level (default: brand.show_xp) */
+    showXp?: boolean;
+    /** show persona comment events (default: brand.show_persona) */
+    showPersona?: boolean;
+    /** called when run status becomes completed */
+    onComplete?: (run: RunPublic) => void;
+    /** called when run status becomes failed */
+    onError?: (run: RunPublic) => void;
+};
+declare function AgentJoyRun(props: AgentJoyRunProps): react_jsx_runtime.JSX.Element;
+
+export { type AgentJoyEvent, type AgentJoyEventType, type AgentJoyPhase, AgentJoyRun, type AgentJoyRunProps, type Artifact, type RunDetailResponse, type RunPublic, type ToolInfo, type WorkspaceBrand };

package/dist/index.js

@@ -0,0 +1,328 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AgentJoyRun: () => AgentJoyRun
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AgentJoyRun.tsx
+var import_react = require("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}",
+    buddy: "\u{1F91D}",
+    senpai: "\u{1F393}",
+    robot: "\u{1F916}"
+  };
+  return m[packId] || "\u{1F3AD}";
+}
+function clamp01(x) {
+  if (typeof x !== "number" || Number.isNaN(x)) return null;
+  if (x < 0) return 0;
+  if (x > 1) return 1;
+  return x;
+}
+
+// src/AgentJoyRun.tsx
+var import_jsx_runtime = require("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;
+  }
+}
+function useBeep() {
+  const ctxRef = (0, import_react.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);
+  }
+  return { tick, success, error };
+}
+function AgentJoyRun(props) {
+  const apiBaseUrl = props.apiBaseUrl ?? "";
+  const locale = props.locale ?? "ja";
+  const limit = props.limit ?? 200;
+  const { tick, success, error } = useBeep();
+  const [run, setRun] = (0, import_react.useState)(null);
+  const [events, setEvents] = (0, import_react.useState)([]);
+  const [brand, setBrand] = (0, import_react.useState)(null);
+  const [muted, setMuted] = (0, import_react.useState)(props.mute ?? true);
+  const esRef = (0, import_react.useRef)(null);
+  (0, import_react.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);
+    }
+    load().catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiBaseUrl, props.runId, props.token]);
+  (0, import_react.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) => {
+      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);
+        }
+        if (e.type === "run.failed") {
+          setRun((r) => r ? { ...r, status: "failed", ended_at: e.ts } : r);
+        }
+        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();
+        }
+      } catch {
+      }
+    };
+    es.onerror = () => {
+    };
+    return () => {
+      es.close();
+      esRef.current = null;
+    };
+  }, [apiBaseUrl, props.runId, props.token, props.sound, muted]);
+  (0, import_react.useEffect)(() => {
+    if (!run) return;
+    if (run.status === "completed") props.onComplete?.(run);
+    if (run.status === "failed") props.onError?.(run);
+  }, [run?.status]);
+  const resolvedBrand = (0, import_react.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 = (0, import_react.useMemo)(() => {
+    const arr = showPersona ? events : events.filter((e) => e.type !== "system.comment");
+    return arr.slice(-limit);
+  }, [events, limit, showPersona]);
+  const currentPhase = (0, import_react.useMemo)(() => {
+    for (let i = events.length - 1; i >= 0; i--) {
+      const p = events[i].phase;
+      if (p) return p;
+    }
+    return "prepare";
+  }, [events]);
+  const lastProgress = (0, import_react.useMemo)(() => {
+    for (let i = events.length - 1; i >= 0; i--) {
+      const p = clamp01(events[i].progress ?? null);
+      if (typeof p === "number") return p;
+    }
+    return null;
+  }, [events]);
+  const progressPct = (0, import_react.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 = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-root", style: rootStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ajw-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ajw-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-logo", children: "AJ" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-sub", children: "loading\u2026" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-body", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ajw-event ajw-eventSystem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-eventMsg", children: "Loading run\u2026" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-eventMeta", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ajw-mono", children: [
+          "runId=",
+          props.runId
+        ] }) })
+      ] }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-root", style: rootStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ajw-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ajw-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-logo", children: resolvedBrand?.logo_url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: resolvedBrand.logo_url, style: { width: 28, height: 28, objectFit: "cover" } }) : "AJ" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ajw-sub", children: [
+          statusLabel(status, tone, locale),
+          " \xB7 ",
+          phaseLabel(currentPhase, tone, locale),
+          " \xB7 ",
+          progressPct,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-actions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "ajw-btn", onClick: () => setMuted((m) => !m), title: "mute/unmute", children: muted ? "\u{1F507}" : "\u{1F50A}" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ajw-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ajw-progressRow", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-progressBar", "aria-label": "progress", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: `${progressPct}%` } }) }),
+        showXp ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ajw-xp", children: [
+          "Lv.",
+          level,
+          " \xB7 XP ",
+          xp
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-events", children: filtered.map((e) => {
+        if (e.type === "system.comment") {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ajw-persona", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-avatar", "aria-hidden": true, children: avatarForPack(run.pack) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-bubble", children: e.message })
+          ] }, e.id);
+        }
+        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__ */ (0, import_jsx_runtime.jsxs)("div", { className: cls, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-eventMsg", children: e.message }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ajw-eventMeta", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ajw-mono", children: [
+              e.type,
+              e.phase ? ` \xB7 ${e.phase}` : "",
+              e.tool?.name ? ` \xB7 tool=${e.tool.name}` : ""
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatTs(e.ts, locale) }),
+            typeof e.progress === "number" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+              "progress=",
+              Math.round(e.progress * 100),
+              "%"
+            ] }) : null
+          ] }),
+          e.detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ajw-eventMeta", style: { whiteSpace: "pre-wrap" }, children: e.detail }) : null
+        ] }, e.id);
+      }) })
+    ] })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AgentJoyRun
+});

package/dist/index.mjs

@@ -0,0 +1,301 @@
+// src/AgentJoyRun.tsx
+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}",
+    buddy: "\u{1F91D}",
+    senpai: "\u{1F393}",
+    robot: "\u{1F916}"
+  };
+  return m[packId] || "\u{1F3AD}";
+}
+function clamp01(x) {
+  if (typeof x !== "number" || Number.isNaN(x)) return null;
+  if (x < 0) return 0;
+  if (x > 1) return 1;
+  return x;
+}
+
+// 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;
+  }
+}
+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);
+  }
+  return { tick, success, error };
+}
+function AgentJoyRun(props) {
+  const apiBaseUrl = props.apiBaseUrl ?? "";
+  const locale = props.locale ?? "ja";
+  const limit = props.limit ?? 200;
+  const { tick, success, error } = useBeep();
+  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);
+  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);
+    }
+    load().catch(() => {
+    });
+    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) => {
+      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);
+        }
+        if (e.type === "run.failed") {
+          setRun((r) => r ? { ...r, status: "failed", ended_at: e.ts } : r);
+        }
+        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();
+        }
+      } catch {
+      }
+    };
+    es.onerror = () => {
+    };
+    return () => {
+      es.close();
+      esRef.current = null;
+    };
+  }, [apiBaseUrl, props.runId, props.token, props.sound, muted]);
+  useEffect(() => {
+    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;
+    }
+    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;
+    }
+    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
+        ] }) })
+      ] }) })
+    ] }) });
+  }
+  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: [
+        /* @__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("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-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
+      ] }),
+      /* @__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);
+        }
+        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
+          ] }),
+          e.detail ? /* @__PURE__ */ jsx("div", { className: "ajw-eventMeta", style: { whiteSpace: "pre-wrap" }, children: e.detail }) : null
+        ] }, e.id);
+      }) })
+    ] })
+  ] }) });
+}
+export {
+  AgentJoyRun
+};

package/dist/styles.css

@@ -0,0 +1,137 @@
+.ajw-root {
+  --ajw-primary: var(--aj-primary, #4F46E5);
+  --ajw-border: #E5E7EB;
+  --ajw-text: #111827;
+  --ajw-muted: #6B7280;
+  --ajw-bg: #ffffff;
+  --ajw-card: #ffffff;
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
+  color: var(--ajw-text);
+}
+
+.ajw-card {
+  border: 1px solid var(--ajw-border);
+  border-radius: 14px;
+  background: var(--ajw-card);
+  overflow: hidden;
+}
+
+.ajw-header {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--ajw-border);
+  background: #fafafa;
+}
+
+.ajw-logo {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: var(--ajw-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 700;
+  overflow: hidden;
+  flex: none;
+}
+
+.ajw-title {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1.1;
+}
+.ajw-sub {
+  font-size: 12px;
+  color: var(--ajw-muted);
+  margin-top: 2px;
+}
+
+.ajw-actions { margin-left: auto; display:flex; gap: 8px; align-items:center; }
+.ajw-btn {
+  border: 1px solid var(--ajw-border);
+  border-radius: 10px;
+  background: white;
+  padding: 6px 10px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.ajw-btnPrimary {
+  border-color: var(--ajw-primary);
+  background: var(--ajw-primary);
+  color: white;
+}
+
+.ajw-body { padding: 12px 14px; }
+
+.ajw-progressRow { display:flex; align-items:center; gap: 10px; }
+
+.ajw-progressBar {
+  height: 8px;
+  background: #F3F4F6;
+  border-radius: 999px;
+  overflow: hidden;
+  flex: 1;
+}
+.ajw-progressBar > div {
+  height: 100%;
+  width: 0%;
+  background: var(--ajw-primary);
+}
+
+.ajw-xp {
+  font-size: 12px;
+  color: var(--ajw-muted);
+  white-space: nowrap;
+}
+
+.ajw-events {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 360px;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.ajw-event {
+  border-left: 3px solid var(--ajw-border);
+  background: #FAFAFA;
+  border-radius: 10px;
+  padding: 10px 10px 10px 12px;
+}
+.ajw-eventWarning { border-left-color: rgba(180,83,9,0.8); }
+.ajw-eventError { border-left-color: rgba(185,28,28,0.8); }
+.ajw-eventSystem { border-left-color: rgba(79,70,229,0.7); }
+
+.ajw-eventMsg { font-size: 13px; font-weight: 600; }
+.ajw-eventMeta { font-size: 12px; color: var(--ajw-muted); margin-top: 4px; display:flex; gap:10px; flex-wrap: wrap; }
+.ajw-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+
+.ajw-persona {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+.ajw-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: 10px;
+  background: rgba(79,70,229,0.12);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  flex: none;
+}
+.ajw-bubble {
+  background: white;
+  border: 1px solid var(--ajw-border);
+  border-radius: 12px;
+  padding: 9px 10px;
+  font-size: 13px;
+  font-weight: 600;
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@vnl-works/agentjoy-react",
+  "version": "0.1.2",
+  "description": "AgentJoy embedded widget SDK (React)",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --dts --format cjs,esm --external react --external react-dom && node -e \"require('fs').copyFileSync('src/styles.css','dist/styles.css')\"",
+    "dev": "tsup src/index.ts --dts --format cjs,esm --watch --external react --external react-dom",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vnl-works/agentjoy.git"
+  },
+  "homepage": "https://github.com/vnl-works/agentjoy#readme",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "bugs": {
+    "url": "https://github.com/vnl-works/agentjoy/issues"
+  }
+}