@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-Q3DPEYX4.js

@@ -0,0 +1,848 @@
+"use client";
+import {
+  EmptyQueueStateSurface
+} from "./chunk-YWVI6ZMK.js";
+import {
+  useWorkspaceSessions
+} from "./chunk-J335IP56.js";
+import {
+  NewConversation,
+  SessionConversation,
+  SessionProxyScope
+} from "./chunk-TXLIEOJX.js";
+import {
+  useHostTheme
+} from "./chunk-VNJK7X2B.js";
+import {
+  useClientConfigFlags
+} from "./chunk-XESA3B7W.js";
+import {
+  notifyObserver
+} from "./chunk-MIHN76LX.js";
+import {
+  usePolledValue
+} from "./chunk-RV3O5OCQ.js";
+import {
+  useErrorMessage
+} from "./chunk-CM7LVUKC.js";
+import {
+  formatClockTime,
+  formatRelativeTime
+} from "./chunk-5MOJZORA.js";
+import {
+  useOpenGeni
+} from "./chunk-TVQCDDSZ.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+import {
+  useOpenGeniText
+} from "./chunk-7T2ZE3VT.js";
+
+// src/components/queue-surface.tsx
+import { Loader2Icon } from "lucide-react";
+import { lazy, Suspense } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var loadQueueSurface = () => import("./queue-surface-implementation-4KUZ4PJV.js");
+var QueueSurface = createQueueSurface(loadQueueSurface);
+function createQueueSurface(loadImplementation) {
+  const LazyQueueSurface = lazy(async () => ({
+    default: (await loadImplementation()).QueueSurface
+  }));
+  return function QueueSurfaceBoundary(props) {
+    const { queue } = props;
+    if (queue.queue.length + queue.pendingInputs.length === 0) {
+      if (!queue.stoppingPreviousAttempt && !queue.error && !queue.mutationError) return null;
+      return /* @__PURE__ */ jsx(EmptyQueueStateSurface, { queue });
+    }
+    return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(QueueSurfaceFallback, {}), children: /* @__PURE__ */ jsx(LazyQueueSurface, { ...props }) });
+  };
+}
+function QueueSurfaceFallback() {
+  const t = useOpenGeniText();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-live": "polite",
+      className: "og-root mx-auto mb-2 w-full max-w-3xl shrink-0 px-4 sm:px-6",
+      "data-testid": "queue-surface-loading",
+      role: "status",
+      children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-border bg-surface/80 shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-og-control text-fg-muted pointer-coarse:min-h-[44px]", children: [
+        /* @__PURE__ */ jsx(
+          Loader2Icon,
+          {
+            "aria-hidden": "true",
+            className: "size-3.5 shrink-0 animate-spin motion-reduce:animate-none"
+          }
+        ),
+        t("queueSurface.loadingInputs")
+      ] }) })
+    }
+  );
+}
+
+// src/hooks/use-session-background-commands.ts
+import { useCallback, useEffect, useRef } from "react";
+function useSessionBackgroundCommands(sessionId, options = {}) {
+  const { client, workspaceId } = useOpenGeni(options);
+  const enabled = (options.enabled ?? true) && Boolean(sessionId);
+  const load = useCallback(
+    async (signal) => {
+      if (!sessionId) return { commands: [] };
+      if (!client.listSessionBackgroundCommands) {
+        throw new Error("The configured Opengeni client does not support background commands");
+      }
+      return await client.listSessionBackgroundCommands(workspaceId, sessionId, { signal });
+    },
+    [client, workspaceId, sessionId]
+  );
+  const state = usePolledValue(load, {
+    enabled,
+    pollIntervalMs: options.pollIntervalMs
+  });
+  const refresh = state.refresh;
+  const generation = useRef(0);
+  useEffect(() => {
+    generation.current += 1;
+    return () => {
+      generation.current += 1;
+    };
+  }, [client, workspaceId, sessionId, enabled]);
+  const cancel = useCallback(
+    async (commandId) => {
+      if (!sessionId) return;
+      if (!client.cancelSessionBackgroundCommand) {
+        throw new Error("The configured Opengeni client does not support background commands");
+      }
+      const ticket = generation.current;
+      await client.cancelSessionBackgroundCommand(workspaceId, sessionId, commandId);
+      if (enabled && ticket === generation.current) await refresh();
+    },
+    [client, workspaceId, sessionId, refresh, enabled]
+  );
+  return {
+    commands: state.data?.commands ?? [],
+    loading: state.loading,
+    error: state.error,
+    refresh,
+    cancel
+  };
+}
+
+// src/components/session-list.tsx
+import { deriveSessionDisplayTitle } from "@opengeni/sdk";
+import { ArchiveIcon, PencilIcon, PlusIcon } from "lucide-react";
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_LABELS = (t) => ({
+  heading: t("sessionList.chats"),
+  newChat: t("sessionList.newChat"),
+  empty: t("sessionList.noChatsYet"),
+  loading: t("sessionList.loadingChats"),
+  loadMore: t("sessionList.showMore"),
+  rename: t("sessionList.rename"),
+  archive: t("sessionList.archive"),
+  archived: t("sessionList.archived"),
+  undo: t("sessionList.undo"),
+  save: t("sessionList.save"),
+  cancel: t("sessionList.cancel")
+});
+var ARCHIVE_UNDO_MS = 1e4;
+function SessionList({
+  client,
+  workspaceId,
+  selectedSessionId,
+  onSelect,
+  onNewChat,
+  rename = true,
+  archive = true,
+  mineOnly = false,
+  onArchived,
+  pageSize = 30,
+  refreshKey,
+  labels: labelOverrides,
+  className
+}) {
+  const t = useOpenGeniText();
+  const labels = { ...DEFAULT_LABELS(t), ...labelOverrides };
+  const scope = { client, workspaceId };
+  const context = useOpenGeni(scope);
+  const [limit, setLimit] = useState(pageSize);
+  const list = useWorkspaceSessions({
+    ...scope,
+    parentSessionId: null,
+    archiveStatus: "active",
+    sortBy: "updatedAt",
+    limit,
+    ...mineOnly ? { mineOnly: true } : {}
+  });
+  const refresh = list.refresh;
+  const firstRefreshKey = useRef2(refreshKey);
+  useEffect2(() => {
+    if (Object.is(refreshKey, firstRefreshKey.current)) return;
+    firstRefreshKey.current = refreshKey;
+    void refresh();
+  }, [refresh, refreshKey]);
+  const [editing, setEditing] = useState(null);
+  const [busy, setBusy] = useState(null);
+  const [error, setError] = useState(null);
+  const [undoable, setUndoable] = useState(null);
+  useEffect2(() => {
+    if (!undoable) return;
+    const timer = setTimeout(() => setUndoable(null), ARCHIVE_UNDO_MS);
+    return () => clearTimeout(timer);
+  }, [undoable]);
+  const formatError = useErrorMessage();
+  const archiveClient = context.client;
+  const config = useClientConfigFlags(context.client);
+  const canArchive = archive && config.archive && typeof archiveClient.updateSessionArchive === "function";
+  const run = async (id, action) => {
+    setBusy(id);
+    setError(null);
+    try {
+      await action();
+      await list.refresh();
+    } catch (cause) {
+      setError({ cause });
+    } finally {
+      setBusy(null);
+    }
+  };
+  const saveTitle = (event) => {
+    event.preventDefault();
+    const current = editing;
+    if (!current) return;
+    const title = current.title.trim();
+    setEditing(null);
+    if (!title) return;
+    void run(
+      current.id,
+      () => context.client.updateSession(context.workspaceId, current.id, { title })
+    );
+  };
+  const archiveSession = (session, title) => void run(session.id, async () => {
+    await archiveClient.updateSessionArchive(context.workspaceId, session.id, {
+      archived: true
+    });
+    setUndoable({ id: session.id, title });
+    onArchived?.(session.id);
+  });
+  const undoArchive = (target) => {
+    setUndoable(null);
+    void run(
+      target.id,
+      () => archiveClient.updateSessionArchive(context.workspaceId, target.id, { archived: false })
+    );
+  };
+  const sessions = list.sessions;
+  return /* @__PURE__ */ jsxs2(
+    "nav",
+    {
+      className: cn("flex min-h-0 min-w-0 flex-col gap-1 text-og-fg", className),
+      "aria-label": labels.heading,
+      "data-og-session-list": "",
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-2 pb-1 pt-2", children: [
+          /* @__PURE__ */ jsx2("h2", { className: "text-og-sm font-semibold text-og-fg-muted", children: labels.heading }),
+          onNewChat ? /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              onClick: onNewChat,
+              className: "inline-flex items-center gap-1 rounded-md px-2 py-1 text-og-control text-og-fg hover:bg-og-surface-2",
+              "data-og-new-chat": "",
+              children: [
+                /* @__PURE__ */ jsx2(PlusIcon, { className: "size-3.5", "aria-hidden": true }),
+                labels.newChat
+              ]
+            }
+          ) : null
+        ] }),
+        error || list.error ? /* @__PURE__ */ jsx2("p", { role: "alert", className: "px-2 text-og-xs text-og-status-failed", children: formatError(error ? error.cause : list.error) }) : null,
+        undoable ? /* @__PURE__ */ jsxs2(
+          "p",
+          {
+            role: "status",
+            className: "flex min-w-0 items-center gap-2 px-2 text-og-xs text-og-fg-muted",
+            "data-og-archive-undo": "",
+            children: [
+              /* @__PURE__ */ jsxs2("span", { className: "min-w-0 truncate", children: [
+                labels.archived,
+                " \u201C",
+                undoable.title,
+                "\u201D"
+              ] }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => undoArchive(undoable),
+                  className: "shrink-0 rounded px-1.5 py-0.5 font-medium text-og-fg hover:bg-og-surface-2",
+                  children: labels.undo
+                }
+              )
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs2("ul", { className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-1 pb-2", children: [
+          list.loading && sessions.length === 0 ? /* @__PURE__ */ jsx2("li", { className: "px-2 py-2 text-og-xs text-og-fg-subtle", children: labels.loading }) : null,
+          !list.loading && !list.error && sessions.length === 0 ? /* @__PURE__ */ jsx2("li", { className: "px-2 py-2 text-og-xs text-og-fg-subtle", children: labels.empty }) : null,
+          sessions.map((session) => {
+            const selected = session.id === selectedSessionId;
+            const title = deriveSessionDisplayTitle(session);
+            if (editing?.id === session.id) {
+              return /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2("form", { onSubmit: saveTitle, className: "flex items-center gap-1 px-1 py-1", children: [
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    "aria-label": labels.rename,
+                    value: editing.title,
+                    maxLength: 200,
+                    autoFocus: true,
+                    onChange: (event) => setEditing({ id: session.id, title: event.target.value }),
+                    onKeyDown: (event) => {
+                      if (event.key === "Escape") setEditing(null);
+                    },
+                    className: "min-w-0 flex-1 rounded-md border border-og-border bg-og-bg px-2 py-1 text-og-sm text-og-fg"
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "submit",
+                    className: "rounded-md px-2 py-1 text-og-xs text-og-fg hover:bg-og-surface-2",
+                    children: labels.save
+                  }
+                )
+              ] }) }, session.id);
+            }
+            return /* @__PURE__ */ jsxs2("li", { className: "group relative", children: [
+              /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onSelect(session.id),
+                  "aria-current": selected ? "true" : void 0,
+                  disabled: busy === session.id,
+                  className: cn(
+                    "flex w-full min-w-0 flex-col items-start rounded-md px-2 py-1.5 text-left",
+                    selected ? "bg-og-surface-2" : "hover:bg-og-surface-1"
+                  ),
+                  "data-og-session-row": "",
+                  children: [
+                    /* @__PURE__ */ jsx2("span", { className: "w-full truncate pr-12 text-og-sm text-og-fg", children: title }),
+                    /* @__PURE__ */ jsx2("span", { className: "text-og-xs text-og-fg-subtle", children: formatRelativeTime(t, session.updatedAt) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs2("span", { className: "absolute right-1 top-1.5 hidden gap-0.5 group-focus-within:flex group-hover:flex pointer-coarse:flex", children: [
+                rename ? /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `${labels.rename}: ${title}`,
+                    onClick: () => setEditing({ id: session.id, title: session.title ?? title }),
+                    className: "rounded p-1 text-og-fg-subtle hover:bg-og-surface-3 hover:text-og-fg",
+                    children: /* @__PURE__ */ jsx2(PencilIcon, { className: "size-3.5", "aria-hidden": true })
+                  }
+                ) : null,
+                canArchive ? /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `${labels.archive}: ${title}`,
+                    onClick: () => archiveSession(session, title),
+                    className: "rounded p-1 text-og-fg-subtle hover:bg-og-surface-3 hover:text-og-fg",
+                    children: /* @__PURE__ */ jsx2(ArchiveIcon, { className: "size-3.5", "aria-hidden": true })
+                  }
+                ) : null
+              ] })
+            ] }, session.id);
+          }),
+          list.nextCursor ? /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => setLimit((current) => current + pageSize),
+              className: "w-full rounded-md px-2 py-1.5 text-left text-og-xs text-og-fg-muted hover:bg-og-surface-1",
+              children: labels.loadMore
+            }
+          ) }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/open-geni-chat.tsx
+import { MenuIcon, XIcon } from "lucide-react";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_LABELS2 = (t) => ({
+  openChats: t("openGeniChat.openChats"),
+  closeChats: t("openGeniChat.closeChats"),
+  newChatPlaceholder: t("openGeniChat.askAnything"),
+  newChatTitle: t("openGeniChat.howCanIHelp"),
+  send: t("openGeniChat.send"),
+  newChatUnavailable: t("openGeniChat.newChatsAreNotEnabled")
+});
+function OpenGeniChat({ baseUrl, headers, fetch, ...props }) {
+  if (baseUrl === void 0) return /* @__PURE__ */ jsx3(Chat, { ...props });
+  const { client, workspaceId, ...rest } = props;
+  return /* @__PURE__ */ jsx3(
+    SessionProxyScope,
+    {
+      baseUrl,
+      workspaceId,
+      client,
+      headers,
+      fetch,
+      children: /* @__PURE__ */ jsx3(Chat, { ...rest })
+    }
+  );
+}
+function Chat({
+  client,
+  workspaceId,
+  sessionId: controlledSessionId,
+  defaultSessionId = null,
+  onSessionChange,
+  createSession,
+  newChat = true,
+  conversationProps,
+  listProps,
+  labels: labelOverrides,
+  className,
+  height = "100%",
+  theme,
+  surface
+}) {
+  const t = useOpenGeniText();
+  const labels = { ...DEFAULT_LABELS2(t), ...labelOverrides };
+  const scope = { client, workspaceId };
+  const context = useOpenGeni(scope);
+  const [uncontrolled, setUncontrolled] = useState2(defaultSessionId);
+  const selected = controlledSessionId !== void 0 ? controlledSessionId : uncontrolled;
+  const [drawerOpen, setDrawerOpen] = useState2(false);
+  const [listRevision, setListRevision] = useState2(0);
+  const [handoff, setHandoff] = useState2(null);
+  const root = useRef3(null);
+  const hostTheme = useHostTheme(root, { theme, surface });
+  const config = useClientConfigFlags(context.client);
+  const canCreate = createSession !== void 0 || config.sessionCreation;
+  const select = useCallback2(
+    (next) => {
+      setHandoff(null);
+      if (controlledSessionId === void 0) setUncontrolled(next);
+      notifyObserver(onSessionChange, next);
+      setDrawerOpen(false);
+    },
+    [controlledSessionId, onSessionChange]
+  );
+  useEffect3(() => {
+    if (!handoff) return;
+    if (selected === handoff.sessionId && !handoff.realtimeModel) setHandoff(null);
+    else if (selected !== null && selected !== handoff.sessionId) setHandoff(null);
+  }, [handoff, selected]);
+  const list = /* @__PURE__ */ jsx3(
+    SessionList,
+    {
+      ...scope,
+      ...listProps,
+      labels,
+      selectedSessionId: selected,
+      onSelect: select,
+      onNewChat: newChat && canCreate ? () => select(null) : void 0,
+      onArchived: (archivedId) => {
+        if (archivedId === selected) select(null);
+      },
+      refreshKey: listRevision,
+      className: "h-full"
+    }
+  );
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: root,
+      className: cn(
+        "og-root og-chat relative flex min-h-0 min-w-0 bg-og-bg text-og-base text-og-fg",
+        className
+      ),
+      style: { ...hostTheme.style, height },
+      "data-og-theme": hostTheme.attribute,
+      "data-og-host-theme": "",
+      "data-og-chat": "",
+      children: [
+        /* @__PURE__ */ jsx3(
+          "aside",
+          {
+            className: "og-chat-sidebar min-h-0 w-64 shrink-0 flex-col border-r border-og-border",
+            "data-og-chat-sidebar": "",
+            children: list
+          }
+        ),
+        drawerOpen ? /* @__PURE__ */ jsxs3("div", { className: "og-chat-drawer absolute inset-0 z-30 flex", "data-og-chat-drawer": "", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex h-full w-[min(20rem,85%)] flex-col border-r border-og-border bg-og-bg shadow-og-lg", children: [
+            /* @__PURE__ */ jsx3("div", { className: "flex justify-end p-1", children: /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                "aria-label": labels.closeChats,
+                onClick: () => setDrawerOpen(false),
+                className: "rounded p-1.5 text-og-fg-muted hover:bg-og-surface-2",
+                children: /* @__PURE__ */ jsx3(XIcon, { className: "size-4", "aria-hidden": true })
+              }
+            ) }),
+            /* @__PURE__ */ jsx3("div", { className: "min-h-0 flex-1", children: list })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.closeChats,
+              className: "flex-1 bg-black/25",
+              onClick: () => setDrawerOpen(false)
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxs3("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "og-chat-menu flex items-center gap-2 px-2 py-1", children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                "aria-label": labels.openChats,
+                "aria-expanded": drawerOpen,
+                onClick: () => setDrawerOpen(true),
+                className: "rounded p-1.5 text-og-fg-muted hover:bg-og-surface-2",
+                "data-og-chat-menu": "",
+                children: /* @__PURE__ */ jsx3(MenuIcon, { className: "size-4", "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { className: "text-og-sm font-semibold text-og-fg-muted", children: labels.heading })
+          ] }),
+          /* @__PURE__ */ jsx3("div", { className: "og-chat-main min-h-0 flex-1 px-3 pb-3 pt-1", children: selected ? /* @__PURE__ */ jsx3(
+            SessionConversation,
+            {
+              ...conversationProps,
+              ...handoff?.sessionId === selected && handoff.initialMessage ? { pendingPrompt: { text: handoff.initialMessage, sentAt: handoff.sentAt } } : {},
+              composerOptions: {
+                ...conversationProps?.composerOptions,
+                ...handoff?.sessionId === selected ? { initialDraft: handoff.draft } : {}
+              },
+              realtimeVoiceProps: {
+                ...conversationProps?.realtimeVoiceProps,
+                ...handoff?.sessionId === selected && handoff.realtimeModel ? {
+                  realtimeAutostartModel: handoff.realtimeModel,
+                  onRealtimeAutostartConsumed: () => {
+                    setHandoff(null);
+                    notifyObserver(
+                      conversationProps?.realtimeVoiceProps?.onRealtimeAutostartConsumed
+                    );
+                  }
+                } : {}
+              },
+              onOpenSession: conversationProps?.onOpenSession ?? select,
+              ...scope,
+              sessionId: selected,
+              height: "100%"
+            }
+          ) : /* @__PURE__ */ jsx3(
+            NewConversation,
+            {
+              ...scope,
+              attachments: conversationProps?.attachments,
+              modelPicker: conversationProps?.modelPicker,
+              modelPickerProps: conversationProps?.modelPickerProps,
+              composerProps: conversationProps?.composerProps,
+              voiceInput: conversationProps?.voiceInput,
+              realtimeVoice: conversationProps?.realtimeVoice,
+              realtimeVoiceProps: conversationProps?.realtimeVoiceProps,
+              labels: {
+                ...labels.newChatRetry ? { retry: labels.newChatRetry } : {},
+                ...labels.newChatPending ? { pending: labels.newChatPending } : {},
+                ...labels.newChatFinishingUploads ? { finishingUploads: labels.newChatFinishingUploads } : {},
+                title: labels.newChatTitle,
+                send: labels.send,
+                unavailable: labels.newChatUnavailable,
+                placeholder: labelOverrides?.newChatPlaceholder ?? conversationProps?.composerProps?.placeholder ?? labels.newChatPlaceholder
+              },
+              enabled: canCreate,
+              createSession,
+              onCreated: (created) => {
+                setListRevision((revision) => revision + 1);
+                select(created.sessionId);
+                setHandoff(created);
+              }
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/session-commands-panel.tsx
+import { ChevronRightIcon, Loader2Icon as Loader2Icon2, SquareIcon } from "lucide-react";
+import { useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function SessionCommandsPanel({
+  commands: state,
+  readOnly = false,
+  renderMetadata,
+  compact = true
+}) {
+  const t = useOpenGeniText();
+  const formatError = useErrorMessage();
+  const [pending, setPending] = useState3(null);
+  const [error, setError] = useState3(null);
+  const active = state.commands.filter(
+    (command) => command.state === "running" || command.state === "stopping"
+  );
+  const stop = async (id) => {
+    setPending(id);
+    setError(null);
+    try {
+      await state.cancel(id);
+    } catch (cause) {
+      setError(formatError(cause));
+    } finally {
+      setPending(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `space-y-2 ${compact ? "text-og-xs" : "text-og-sm"}`,
+      "data-og-session-commands": "",
+      children: [
+        state.loading && active.length === 0 ? /* @__PURE__ */ jsx4("p", { role: "status", className: "text-og-fg-muted", children: t("sessionCommandsPanel.loadingCommands") }) : null,
+        state.error ? /* @__PURE__ */ jsxs4("div", { role: "alert", className: "flex items-center justify-between gap-2 text-og-danger", children: [
+          /* @__PURE__ */ jsx4("span", { children: t("sessionCommandsPanel.commandsUnavailable") }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              className: "underline outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40",
+              onClick: () => void state.refresh(),
+              children: t("sessionCommandsPanel.retry")
+            }
+          )
+        ] }) : null,
+        !state.loading && !state.error && active.length === 0 ? /* @__PURE__ */ jsx4("p", { role: "status", className: "text-og-fg-muted", children: t("sessionCommandsPanel.noBackgroundCommandsRunning") }) : null,
+        active.length > 0 ? /* @__PURE__ */ jsx4(
+          "ul",
+          {
+            className: `${compact ? "max-h-64 overflow-y-auto overscroll-contain" : ""} divide-y divide-og-border/40`,
+            children: active.map((command) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start gap-3 py-2 first:pt-0 last:pb-0", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
+                renderMetadata?.(command),
+                /* @__PURE__ */ jsxs4("details", { className: "group/command", children: [
+                  /* @__PURE__ */ jsxs4(
+                    "summary",
+                    {
+                      className: "flex cursor-pointer list-none items-center gap-1.5 rounded-og-sm font-mono text-og-fg outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40",
+                      title: t("sessionCommandsPanel.expandCommand"),
+                      children: [
+                        /* @__PURE__ */ jsx4(ChevronRightIcon, { className: "size-3 shrink-0 text-og-fg-subtle transition-transform group-open/command:rotate-90" }),
+                        /* @__PURE__ */ jsx4(
+                          "span",
+                          {
+                            className: "min-w-0 truncate",
+                            title: command.commandText ?? (command.commandPreview || t("sessionCommandsPanel.backgroundCommand")),
+                            children: command.commandText ?? (command.commandPreview || t("sessionCommandsPanel.backgroundCommand"))
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs4("div", { className: "mt-2 space-y-1", children: [
+                    /* @__PURE__ */ jsx4("p", { className: "whitespace-pre-wrap break-all font-mono text-og-fg-muted", children: command.commandText ?? (command.commandPreview || t("sessionCommandsPanel.backgroundCommand")) }),
+                    /* @__PURE__ */ jsx4(
+                      "time",
+                      {
+                        className: "block text-og-fg-subtle",
+                        dateTime: command.startedAt,
+                        title: new Date(command.startedAt).toLocaleString(t.locale),
+                        children: t("sessionCommandsPanel.startedClocktime", {
+                          clockTime: formatClockTime(t, command.startedAt)
+                        })
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx4("p", { className: "mt-1 text-og-fg-subtle", children: command.observationStatus === "unavailable" ? command.state === "stopping" ? t("sessionCommandsPanel.stopRequestedStatusUnavailable") : t("sessionCommandsPanel.commandStatusUnavailable") : command.state === "stopping" ? t("sessionCommandsPanel.stopping") : t("sessionCommandsPanel.running") })
+              ] }),
+              !readOnly ? /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": t("sessionCommandsPanel.stopCommandpreview", {
+                    commandPreview: command.commandPreview || t("sessionCommandsPanel.backgroundCommand2")
+                  }),
+                  disabled: pending !== null || command.state === "stopping",
+                  onClick: () => void stop(command.id),
+                  className: "inline-flex min-h-7 shrink-0 items-center gap-1 rounded-og-sm px-2 text-og-fg-muted outline-hidden hover:bg-og-surface-3/70 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:opacity-50 pointer-coarse:min-h-11",
+                  children: [
+                    pending === command.id || command.state === "stopping" ? /* @__PURE__ */ jsx4(Loader2Icon2, { className: "size-3 animate-og-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx4(SquareIcon, { className: "size-3" }),
+                    t("sessionCommandsPanel.stop")
+                  ]
+                }
+              ) : null
+            ] }, command.id))
+          }
+        ) : null,
+        error ? /* @__PURE__ */ jsx4("p", { role: "alert", className: "text-og-danger", children: error }) : null
+      ]
+    }
+  );
+}
+
+// src/components/session-commands.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function SessionCommands({
+  sessionId,
+  readOnly = false,
+  ...options
+}) {
+  const commands = useSessionBackgroundCommands(sessionId, {
+    pollIntervalMs: 3e3,
+    ...options
+  });
+  return /* @__PURE__ */ jsx5(SessionCommandsPanel, { commands, readOnly });
+}
+
+// src/timeline/startup-timings.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var LABELS = (t) => ({
+  queue: t("timeline.startupTimings.workerQueue"),
+  sandbox: t("timeline.startupTimings.sandbox"),
+  credential_resolution: t("timeline.startupTimings.credentialResolution"),
+  credential_mint: t("timeline.startupTimings.credentialMint"),
+  credential_materialization: t("timeline.startupTimings.credentialMaterialization"),
+  client_publication: t("timeline.startupTimings.clientPublication"),
+  client_readiness: t("timeline.startupTimings.clientReadiness"),
+  credential_seed: t("timeline.startupTimings.credentialSeed"),
+  credential_hooks: t("timeline.startupTimings.credentialHooks"),
+  artifact_runtime: t("timeline.startupTimings.artifactRuntime"),
+  rig: t("timeline.startupTimings.sandboxEnvironment"),
+  repository: t("timeline.startupTimings.repository"),
+  files: t("timeline.startupTimings.files"),
+  tools: t("timeline.startupTimings.tools"),
+  history: t("timeline.startupTimings.conversationHistory"),
+  model_preparation: t("timeline.startupTimings.runtimeModelRequest"),
+  provider_first_byte: t("timeline.startupTimings.firstModelResponse")
+});
+function StartupTimings({ phases }) {
+  const t = useOpenGeniText();
+  if (!phases.length)
+    return /* @__PURE__ */ jsx6("p", { className: "text-og-sm text-og-fg-subtle", children: t("timeline.startupTimings.noStartupTimingsRecordedYet") });
+  const byTurn = /* @__PURE__ */ new Map();
+  for (const phase of phases) {
+    const group = byTurn.get(phase.turnId) ?? [];
+    group.push(phase);
+    byTurn.set(phase.turnId, group);
+  }
+  const turns = [...byTurn.entries()].map(([turnId, turnPhases]) => ({
+    turnId,
+    // Completion-only receipts may arrive in a batch after later setup work.
+    phases: [...turnPhases].sort((a, b) => a.startedAt.localeCompare(b.startedAt)),
+    startedAt: turnPhases.reduce(
+      (earliest, phase) => phase.startedAt < earliest ? phase.startedAt : earliest,
+      turnPhases[0].startedAt
+    )
+  })).sort((a, b) => b.startedAt.localeCompare(a.startedAt));
+  return /* @__PURE__ */ jsxs5("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx6("p", { className: "text-og-xs text-og-fg-subtle", children: t("timeline.startupTimings.eachTurnHasItsOwn") }),
+    turns.map((turn, index) => /* @__PURE__ */ jsx6(
+      StartupTurn,
+      {
+        ...turn,
+        latest: index === 0 && turn.turnId !== null
+      },
+      turn.turnId ?? "unassigned"
+    ))
+  ] });
+}
+function StartupTurn({
+  turnId,
+  phases,
+  startedAt,
+  latest
+}) {
+  const t = useOpenGeniText();
+  const failed = phases.some((phase) => phase.status === "failed");
+  const status = failed ? t("timeline.startupTimings.failed") : phases.some((phase) => phase.status === "running") ? t("timeline.startupTimings.inProgress") : phases.some((phase) => phase.status === "cancelled") ? t("timeline.startupTimings.interrupted") : t("timeline.startupTimings.ready");
+  return /* @__PURE__ */ jsxs5("details", { open: latest, className: "group border-b border-og-border pb-3", children: [
+    /* @__PURE__ */ jsxs5("summary", { className: "cursor-pointer rounded py-3 text-og-sm text-og-fg-muted focus-visible:outline-2 focus-visible:outline-og-accent", children: [
+      /* @__PURE__ */ jsx6("span", { className: "font-medium", children: turnId === null ? t("timeline.startupTimings.unassignedEvents") : latest ? t("timeline.startupTimings.latestTurn") : t("timeline.startupTimings.earlierTurn") }),
+      /* @__PURE__ */ jsx6("span", { className: "ml-2 text-og-xs text-og-fg-subtle", children: new Date(startedAt).toLocaleTimeString(t.locale, {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit"
+      }) }),
+      /* @__PURE__ */ jsx6(
+        "span",
+        {
+          className: failed ? "ml-2 text-og-xs text-og-status-failed" : "ml-2 text-og-xs text-og-fg-subtle",
+          children: status
+        }
+      ),
+      /* @__PURE__ */ jsx6("span", { className: "mt-1 block break-all pl-4 font-og-mono text-og-xs text-og-fg-subtle", children: turnId ?? t("timeline.startupTimings.noTurnIdRecorded") })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "pb-2", children: [
+      /* @__PURE__ */ jsxs5("p", { className: "text-og-xs text-og-fg-subtle", children: [
+        t("timeline.startupTimings.started"),
+        " ",
+        /* @__PURE__ */ jsx6("time", { dateTime: startedAt, children: new Date(startedAt).toLocaleString(t.locale) })
+      ] }),
+      /* @__PURE__ */ jsx6("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs5("table", { className: "w-full text-left text-og-xs", children: [
+        /* @__PURE__ */ jsxs5("caption", { className: "sr-only", children: [
+          t("timeline.startupTimings.startupPhasesFor"),
+          " ",
+          turnId ?? t("timeline.startupTimings.unassignedEvents2")
+        ] }),
+        /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs5("tr", { className: "border-b border-og-border text-og-fg-subtle", children: [
+          /* @__PURE__ */ jsx6("th", { scope: "col", className: "py-2 font-medium", children: t("timeline.startupTimings.phase") }),
+          /* @__PURE__ */ jsx6("th", { scope: "col", className: "px-3 py-2 font-medium", children: t("timeline.startupTimings.status") }),
+          /* @__PURE__ */ jsx6("th", { scope: "col", className: "py-2 text-right font-medium", children: t("timeline.startupTimings.duration") })
+        ] }) }),
+        /* @__PURE__ */ jsx6("tbody", { children: phases.map((phase) => /* @__PURE__ */ jsxs5(
+          "tr",
+          {
+            className: "border-b border-og-border/40",
+            title: t("timeline.startupTimings.turnTurnidStartedStartedat", {
+              turnId: phase.turnId ?? t("timeline.startupTimings.unknownTurn"),
+              startedAt: phase.startedAt
+            }),
+            children: [
+              /* @__PURE__ */ jsx6("th", { scope: "row", className: "py-2.5 font-normal text-og-fg-muted", children: LABELS(t)[phase.phase] }),
+              /* @__PURE__ */ jsx6(
+                "td",
+                {
+                  className: `px-3 py-2.5 ${phase.status === "failed" ? "text-og-status-failed" : "text-og-fg-subtle"}`,
+                  children: phase.status === "running" ? t("timeline.startupTimings.inProgress") : phase.status
+                }
+              ),
+              /* @__PURE__ */ jsx6("td", { className: "py-2.5 text-right font-og-mono tabular-nums text-og-fg-muted", children: phase.durationMs === null ? "\u2014" : phase.durationMs < 1e3 ? t("timeline.startupTimings.roundMs", {
+                round: Math.round(phase.durationMs)
+              }) : `${(phase.durationMs / 1e3).toFixed(1)} s` })
+            ]
+          },
+          phase.id
+        )) })
+      ] }) })
+    ] })
+  ] });
+}
+
+export {
+  QueueSurface,
+  useSessionBackgroundCommands,
+  SessionList,
+  OpenGeniChat,
+  SessionCommandsPanel,
+  SessionCommands,
+  StartupTimings
+};
+//# sourceMappingURL=chunk-Q3DPEYX4.js.map