@athenaintel/react 0.57.2 → 0.60.0

package/dist/chat/typed-interrupts/form-cards.js

@@ -0,0 +1,289 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { readTypedHitlContext, typedApprovalResume } from "../../agent-runtime/src/typed-interrupt-kinds.js";
+import { SparklesIcon, MailIcon, ShieldIcon, FileTextIcon, OctagonAlertIcon, AlertTriangleIcon, InfoIcon } from "lucide-react";
+import { useState, useMemo } from "react";
+import { ChatMessageBody } from "../../chat-ui/rich-text/chat-message-body.js";
+import { Button } from "../../ui/button.js";
+import { AddFeedbackButton, RejectReasonField, APPROVE_BUTTON_CLASS } from "./approval-cards.js";
+import { InterruptCardShell, WaitForStreamingHint, HoverHint, WAIT_FOR_STREAMING_MESSAGE, formatKeyAsName } from "./interrupt-card-shell.js";
+import { normalizeJsonSchema, schemaDefaults, JsonSchemaForm, readJsonSchemaForm } from "./json-schema-form.js";
+import { parsePendingApprovalContext } from "../../agent-runtime/src/interrupts.js";
+import { cn } from "cnfast";
+function ContextBlock({ context }) {
+  if (Object.keys(context).length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-muted/60 p-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-2 font-medium text-foreground text-sm", children: "Context:" }),
+    /* @__PURE__ */ jsx("pre", { className: "max-h-40 overflow-auto whitespace-pre-wrap break-words text-muted-foreground text-xs", children: JSON.stringify(context, null, 2) })
+  ] });
+}
+function SchemaForm({
+  schema: rawSchema,
+  resume,
+  cancel,
+  engine,
+  className
+}) {
+  const schema = useMemo(() => normalizeJsonSchema(rawSchema), [rawSchema]);
+  const [value, setValue] = useState(() => schemaDefaults(schema));
+  const [drafts, setDrafts] = useState({});
+  const [errors, setErrors] = useState({});
+  const { isLoading, isConversationStreaming } = engine;
+  const actionsDisabled = isLoading || isConversationStreaming;
+  const onSubmit = (event) => {
+    event.preventDefault();
+    const read = readJsonSchemaForm({ schema, value, drafts });
+    if ("errors" in read) {
+      setErrors(read.errors);
+      return;
+    }
+    setErrors({});
+    resume(read.value);
+  };
+  return /* @__PURE__ */ jsxs("form", { className: cn("rounded-md border p-4", className), onSubmit, noValidate: true, children: [
+    /* @__PURE__ */ jsx(
+      JsonSchemaForm,
+      {
+        schema,
+        value,
+        onChange: setValue,
+        drafts,
+        onDraftsChange: setDrafts,
+        errors,
+        disabled: actionsDisabled
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
+      /* @__PURE__ */ jsx(WaitForStreamingHint, { active: isConversationStreaming, children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: actionsDisabled, children: isLoading ? "Submitting..." : "Submit" }) }),
+      /* @__PURE__ */ jsx(WaitForStreamingHint, { active: isConversationStreaming, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: cancel, disabled: actionsDisabled, children: "Cancel" }) })
+    ] })
+  ] });
+}
+function FormInterruptCard({ interrupt, resume, cancel, engine }) {
+  const formId = interrupt.context.form_id;
+  return /* @__PURE__ */ jsx(
+    InterruptCardShell,
+    {
+      title: interrupt.message,
+      description: typeof formId === "string" && formId ? `Form: ${formId}` : void 0,
+      icon: /* @__PURE__ */ jsx(FileTextIcon, {}),
+      hasTimeout: engine.hasTimeout,
+      onInteraction: engine.cancelTimeout,
+      content: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", "data-testid": "typed-interrupt-form", children: [
+        /* @__PURE__ */ jsx(
+          SchemaForm,
+          {
+            schema: interrupt.schema,
+            resume,
+            cancel,
+            engine,
+            className: "border-border bg-background"
+          }
+        ),
+        /* @__PURE__ */ jsx(ContextBlock, { context: interrupt.context })
+      ] })
+    }
+  );
+}
+function CustomInterruptCard({ interrupt, resume, cancel, engine }) {
+  const { isLoading, isConversationStreaming } = engine;
+  const actionsDisabled = isLoading || isConversationStreaming;
+  const hasSchema = typeof interrupt.schema === "object" && interrupt.schema !== null;
+  return /* @__PURE__ */ jsx(
+    InterruptCardShell,
+    {
+      title: interrupt.message,
+      description: interrupt.source ? `Custom workflow: ${interrupt.source}` : void 0,
+      icon: /* @__PURE__ */ jsx(SparklesIcon, {}),
+      hasTimeout: engine.hasTimeout,
+      onInteraction: engine.cancelTimeout,
+      content: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", "data-testid": "typed-interrupt-custom", children: [
+        hasSchema ? /* @__PURE__ */ jsx(
+          SchemaForm,
+          {
+            schema: interrupt.schema,
+            resume,
+            cancel,
+            engine,
+            className: "border-purple-200 bg-purple-50/50"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(ContextBlock, { context: interrupt.context }),
+        hasSchema ? null : /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(WaitForStreamingHint, { active: isConversationStreaming, children: /* @__PURE__ */ jsx(Button, { onClick: () => resume({}), disabled: actionsDisabled, children: isLoading ? "Processing..." : "Continue" }) }),
+          /* @__PURE__ */ jsx(WaitForStreamingHint, { active: isConversationStreaming, children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: cancel, disabled: actionsDisabled, children: "Cancel" }) })
+        ] })
+      ] })
+    }
+  );
+}
+const HIDDEN_ARG_KEYS = /* @__PURE__ */ new Set([
+  "catalog_id",
+  "asset_id",
+  "workspace_id",
+  "user_id",
+  "event_id",
+  "thread_id",
+  "message_id",
+  "draft_id",
+  "reply_to_message_id",
+  "attachment_id"
+]);
+const MAX_NESTING_DEPTH = 3;
+const MAX_LIST_ITEMS = 12;
+function looksLikeInternalId(value) {
+  return typeof value === "string" && /^(asset|catalog|user|workspace)_[a-f0-9-]{8,}$/i.test(value);
+}
+function visibleToolArgEntries(args) {
+  return Object.entries(args).filter(([key, value]) => !HIDDEN_ARG_KEYS.has(key) && !looksLikeInternalId(value));
+}
+function isPrimitive(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+function ArgValue({ value, depth }) {
+  if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" });
+  if (isPrimitive(value)) return /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-foreground", children: String(value) });
+  if (Array.isArray(value)) {
+    if (value.length === 0) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "None" });
+    if (value.every(isPrimitive)) return /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-foreground", children: value.join(", ") });
+    if (depth >= MAX_NESTING_DEPTH) return /* @__PURE__ */ jsx("code", { className: "min-w-0 break-all font-mono text-xs", children: JSON.stringify(value) });
+    const shown = value.slice(0, MAX_LIST_ITEMS);
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+      shown.map((item, index) => (
+        // Position is the only identity a list entry has.
+        /* @__PURE__ */ jsx("div", { className: "rounded border border-border bg-background px-2 py-1", children: /* @__PURE__ */ jsx(ArgValue, { value: item, depth: depth + 1 }) }, index)
+      )),
+      value.length > shown.length ? /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs", children: [
+        "+",
+        value.length - shown.length,
+        " more"
+      ] }) : null
+    ] });
+  }
+  if (typeof value === "object") {
+    if (depth >= MAX_NESTING_DEPTH) return /* @__PURE__ */ jsx("code", { className: "min-w-0 break-all font-mono text-xs", children: JSON.stringify(value) });
+    const entries = visibleToolArgEntries(value);
+    if (entries.length === 0) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" });
+    return /* @__PURE__ */ jsx(ArgRows, { entries, depth: depth + 1 });
+  }
+  return /* @__PURE__ */ jsx("code", { className: "min-w-0 break-all font-mono text-xs", children: JSON.stringify(value) });
+}
+function ArgRows({ entries, depth }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: entries.map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 gap-2 text-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "w-24 shrink-0 font-medium text-muted-foreground", children: formatKeyAsName(key) }),
+    /* @__PURE__ */ jsx(ArgValue, { value, depth })
+  ] }, key)) });
+}
+function textField(args, key) {
+  const value = args[key];
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) return value.filter((each) => typeof each === "string").join(", ");
+  return void 0;
+}
+function EmailPreview({ args }) {
+  const rows = [
+    ["To", textField(args, "to")],
+    ["CC", textField(args, "cc")],
+    ["BCC", textField(args, "bcc")],
+    ["Subject", textField(args, "subject")]
+  ];
+  const body = textField(args, "body");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: rows.map(
+      ([label, value]) => value ? /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "w-16 shrink-0 font-medium text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx("span", { className: cn("text-foreground", label === "Subject" && "font-medium"), children: value })
+      ] }, label) : null
+    ) }),
+    body ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "border-border border-t" }),
+      /* @__PURE__ */ jsx("div", { className: "max-h-64 min-h-16 overflow-auto text-foreground text-sm", children: /* @__PURE__ */ jsx(ChatMessageBody, { text: body }) })
+    ] }) : null
+  ] });
+}
+const WARNING_TONES = {
+  info: "text-muted-foreground",
+  warning: "text-amber-700",
+  critical: "text-red-700"
+};
+function ApprovalContextPanel({ context }) {
+  const parsed = parsePendingApprovalContext(context);
+  if (!parsed) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-border bg-muted/60 p-3", "data-testid": "typed-interrupt-approval-context", children: [
+    parsed.headline ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx(SparklesIcon, { className: "mt-0.5 size-3.5 shrink-0 text-primary" }),
+      /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground text-sm", children: parsed.headline })
+    ] }) : null,
+    parsed.summary ? /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm", children: parsed.summary }) : null,
+    parsed.facts.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: parsed.facts.map((fact) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "w-28 shrink-0 font-medium text-muted-foreground", children: fact.label }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-foreground", children: fact.value })
+    ] }, fact.label)) }) : null,
+    parsed.warnings.map((warning) => {
+      const Icon = warning.severity === "critical" ? OctagonAlertIcon : warning.severity === "warning" ? AlertTriangleIcon : InfoIcon;
+      return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-1.5 text-xs", WARNING_TONES[warning.severity]), children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: warning.message })
+      ] }, warning.message);
+    })
+  ] });
+}
+function isEmailCall(toolId, args) {
+  return Boolean((toolId == null ? void 0 : toolId.toLowerCase().includes("email")) && "to" in args && "subject" in args);
+}
+function HitlInterruptCard({ interrupt, resume, engine }) {
+  const [reason, setReason] = useState("");
+  const [showFeedback, setShowFeedback] = useState(false);
+  const { isLoading, hasTimeout, cancelTimeout, displayMessage, isConversationStreaming } = engine;
+  const { toolId, toolArgs, approvalContext } = readTypedHitlContext(interrupt);
+  const emailMode = isEmailCall(toolId, toolArgs);
+  const visibleArgs = visibleToolArgEntries(toolArgs);
+  const actionsDisabled = isLoading || isConversationStreaming;
+  const feedbackHoldsApprove = reason.trim() !== "";
+  const approveDisabled = actionsDisabled || feedbackHoldsApprove;
+  const approveHint = isConversationStreaming ? WAIT_FOR_STREAMING_MESSAGE : feedbackHoldsApprove ? "Clear the feedback above to approve, or click Reject to send it with the rejection." : null;
+  const approveButton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: () => resume(typedApprovalResume({ action: "approve" })),
+      disabled: approveDisabled,
+      className: APPROVE_BUTTON_CLASS,
+      children: isLoading ? "Processing..." : emailMode ? "Send Email" : "Approve"
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    InterruptCardShell,
+    {
+      title: emailMode ? "Review Email" : "Human Approval Required",
+      description: displayMessage,
+      icon: emailMode ? /* @__PURE__ */ jsx(MailIcon, {}) : /* @__PURE__ */ jsx(ShieldIcon, {}),
+      hasTimeout,
+      onInteraction: cancelTimeout,
+      content: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", "data-testid": "typed-interrupt-hitl", children: [
+        toolId ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: formatKeyAsName(toolId) }) : null,
+        /* @__PURE__ */ jsx(ApprovalContextPanel, { context: approvalContext }),
+        emailMode ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-muted/60 p-3", children: /* @__PURE__ */ jsx(EmailPreview, { args: toolArgs }) }) : visibleArgs.length > 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-muted/60 p-3", children: /* @__PURE__ */ jsx(ArgRows, { entries: visibleArgs, depth: 0 }) }) : null,
+        showFeedback ? /* @__PURE__ */ jsx(RejectReasonField, { label: "Feedback (optional)", value: reason, onChange: setReason, disabled: isLoading }) : null
+      ] }),
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        approveHint ? /* @__PURE__ */ jsx(HoverHint, { label: approveHint, children: approveButton }) : approveButton,
+        /* @__PURE__ */ jsx(WaitForStreamingHint, { active: isConversationStreaming, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            onClick: () => resume(typedApprovalResume({ action: "reject", reason: reason || void 0 })),
+            disabled: actionsDisabled,
+            children: isLoading ? "Processing..." : emailMode ? "Don't Send" : "Reject"
+          }
+        ) }),
+        showFeedback ? null : /* @__PURE__ */ jsx(AddFeedbackButton, { onClick: () => setShowFeedback(true), className: "ml-auto px-2 py-1" })
+      ] })
+    }
+  );
+}
+export {
+  CustomInterruptCard,
+  FormInterruptCard,
+  HitlInterruptCard,
+  visibleToolArgEntries
+};
+//# sourceMappingURL=form-cards.js.map

package/dist/chat/typed-interrupts/form-cards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-cards.js","sources":["../../../src/chat/typed-interrupts/form-cards.tsx"],"sourcesContent":["/**\n * The typed parks answered with what their raiser asks for in a schema or a\n * gated call: a form (`raise_form_interrupt`, Olympus's `FormInterruptUi`), a\n * `custom` park with no card of its own (`CustomInterruptUi`), and a\n * tool-raised approval (`raise_hitl_interrupt`, `HITLInterruptUi`).\n *\n * The tool-raised approval shows the call's arguments as rows (internal ids\n * left out), an email's fields when the tool sends one, and what the backend\n * resolved about the call (`approval_context`); approving is a person's\n * decision, which the engine confirms with the host's passkey check and agora\n * holds to a signed-in person. Olympus's bespoke reviews for that card (its\n * email and calendar composer, the default-account picker, history and browser\n * previews) need Olympus's own data stacks and stay there; no tool raises one\n * of those calls as a typed approval today.\n */\nimport { parsePendingApprovalContext } from '@athenaintel/agent-runtime';\nimport { readTypedHitlContext, typedApprovalResume } from '@athenaintel/agent-runtime/typed-interrupt-kinds';\nimport {\n  AlertTriangleIcon,\n  FileTextIcon,\n  InfoIcon,\n  MailIcon,\n  OctagonAlertIcon,\n  ShieldIcon,\n  SparklesIcon,\n} from 'lucide-react';\nimport { type FormEvent, useMemo, useState } from 'react';\nimport { ChatMessageBody } from '../../chat-ui/rich-text/chat-message-body';\nimport { cn } from '../../lib/utils';\nimport { Button } from '../../ui/button';\nimport { AddFeedbackButton, APPROVE_BUTTON_CLASS, RejectReasonField } from './approval-cards';\nimport {\n  formatKeyAsName,\n  HoverHint,\n  InterruptCardShell,\n  WAIT_FOR_STREAMING_MESSAGE,\n  WaitForStreamingHint,\n} from './interrupt-card-shell';\nimport {\n  JsonSchemaForm,\n  type JsonSchemaDrafts,\n  normalizeJsonSchema,\n  readJsonSchemaForm,\n  schemaDefaults,\n} from './json-schema-form';\nimport type { TypedInterruptCardProps } from './typed-interrupt-types';\n\nfunction ContextBlock({ context }: { context: Readonly<Record<string, unknown>> }) {\n  if (Object.keys(context).length === 0) return null;\n  return (\n    <div className=\"rounded-md bg-muted/60 p-3\">\n      <p className=\"mb-2 font-medium text-foreground text-sm\">Context:</p>\n      <pre className=\"max-h-40 overflow-auto whitespace-pre-wrap break-words text-muted-foreground text-xs\">\n        {JSON.stringify(context, null, 2)}\n      </pre>\n    </div>\n  );\n}\n\n/** A schema's fields with Submit and Cancel; Submit checks the schema first. */\nfunction SchemaForm({\n  schema: rawSchema,\n  resume,\n  cancel,\n  engine,\n  className,\n}: Pick<TypedInterruptCardProps, 'resume' | 'cancel' | 'engine'> & { schema: unknown; className?: string }) {\n  const schema = useMemo(() => normalizeJsonSchema(rawSchema), [rawSchema]);\n  const [value, setValue] = useState<Record<string, unknown>>(() => schemaDefaults(schema));\n  const [drafts, setDrafts] = useState<JsonSchemaDrafts>({});\n  const [errors, setErrors] = useState<Record<string, string>>({});\n  const { isLoading, isConversationStreaming } = engine;\n  const actionsDisabled = isLoading || isConversationStreaming;\n  const onSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const read = readJsonSchemaForm({ schema, value, drafts });\n    if ('errors' in read) {\n      setErrors(read.errors);\n      return;\n    }\n    setErrors({});\n    resume(read.value);\n  };\n  return (\n    <form className={cn('rounded-md border p-4', className)} onSubmit={onSubmit} noValidate>\n      <JsonSchemaForm\n        schema={schema}\n        value={value}\n        onChange={setValue}\n        drafts={drafts}\n        onDraftsChange={setDrafts}\n        errors={errors}\n        disabled={actionsDisabled}\n      />\n      <div className=\"mt-4 flex gap-2\">\n        <WaitForStreamingHint active={isConversationStreaming}>\n          <Button type=\"submit\" disabled={actionsDisabled}>\n            {isLoading ? 'Submitting...' : 'Submit'}\n          </Button>\n        </WaitForStreamingHint>\n        <WaitForStreamingHint active={isConversationStreaming}>\n          <Button type=\"button\" variant=\"outline\" onClick={cancel} disabled={actionsDisabled}>\n            Cancel\n          </Button>\n        </WaitForStreamingHint>\n      </div>\n    </form>\n  );\n}\n\nexport function FormInterruptCard({ interrupt, resume, cancel, engine }: TypedInterruptCardProps) {\n  const formId = interrupt.context.form_id;\n  return (\n    <InterruptCardShell\n      title={interrupt.message}\n      description={typeof formId === 'string' && formId ? `Form: ${formId}` : undefined}\n      icon={<FileTextIcon />}\n      hasTimeout={engine.hasTimeout}\n      onInteraction={engine.cancelTimeout}\n      content={\n        <div className=\"flex flex-col gap-4\" data-testid=\"typed-interrupt-form\">\n          <SchemaForm\n            schema={interrupt.schema}\n            resume={resume}\n            cancel={cancel}\n            engine={engine}\n            className=\"border-border bg-background\"\n          />\n          <ContextBlock context={interrupt.context} />\n        </div>\n      }\n    />\n  );\n}\n\nexport function CustomInterruptCard({ interrupt, resume, cancel, engine }: TypedInterruptCardProps) {\n  const { isLoading, isConversationStreaming } = engine;\n  const actionsDisabled = isLoading || isConversationStreaming;\n  const hasSchema = typeof interrupt.schema === 'object' && interrupt.schema !== null;\n  return (\n    <InterruptCardShell\n      title={interrupt.message}\n      description={interrupt.source ? `Custom workflow: ${interrupt.source}` : undefined}\n      icon={<SparklesIcon />}\n      hasTimeout={engine.hasTimeout}\n      onInteraction={engine.cancelTimeout}\n      content={\n        <div className=\"flex flex-col gap-4\" data-testid=\"typed-interrupt-custom\">\n          {hasSchema ? (\n            <SchemaForm\n              schema={interrupt.schema}\n              resume={resume}\n              cancel={cancel}\n              engine={engine}\n              className=\"border-purple-200 bg-purple-50/50\"\n            />\n          ) : null}\n          <ContextBlock context={interrupt.context} />\n          {hasSchema ? null : (\n            <div className=\"flex gap-2\">\n              <WaitForStreamingHint active={isConversationStreaming}>\n                <Button onClick={() => resume({})} disabled={actionsDisabled}>\n                  {isLoading ? 'Processing...' : 'Continue'}\n                </Button>\n              </WaitForStreamingHint>\n              <WaitForStreamingHint active={isConversationStreaming}>\n                <Button variant=\"outline\" onClick={cancel} disabled={actionsDisabled}>\n                  Cancel\n                </Button>\n              </WaitForStreamingHint>\n            </div>\n          )}\n        </div>\n      }\n    />\n  );\n}\n\n// ── The tool-raised approval ─────────────────────────────────────────────\n\n/** Keys that hold internal ids, never shown (Olympus's `HIDDEN_ARG_KEYS`). */\nconst HIDDEN_ARG_KEYS: ReadonlySet<string> = new Set([\n  'catalog_id',\n  'asset_id',\n  'workspace_id',\n  'user_id',\n  'event_id',\n  'thread_id',\n  'message_id',\n  'draft_id',\n  'reply_to_message_id',\n  'attachment_id',\n]);\nconst MAX_NESTING_DEPTH = 3;\nconst MAX_LIST_ITEMS = 12;\n\nfunction looksLikeInternalId(value: unknown): boolean {\n  return typeof value === 'string' && /^(asset|catalog|user|workspace)_[a-f0-9-]{8,}$/i.test(value);\n}\n\n/** The arguments the preview shows as rows. */\nexport function visibleToolArgEntries(args: Readonly<Record<string, unknown>>): [string, unknown][] {\n  return Object.entries(args).filter(([key, value]) => !HIDDEN_ARG_KEYS.has(key) && !looksLikeInternalId(value));\n}\n\nfunction isPrimitive(value: unknown): value is string | number | boolean {\n  return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';\n}\n\nfunction ArgValue({ value, depth }: { value: unknown; depth: number }) {\n  if (value === null || value === undefined) return <span className=\"text-muted-foreground\">—</span>;\n  if (isPrimitive(value)) return <span className=\"min-w-0 break-words text-foreground\">{String(value)}</span>;\n  if (Array.isArray(value)) {\n    if (value.length === 0) return <span className=\"text-muted-foreground\">None</span>;\n    if (value.every(isPrimitive)) return <span className=\"min-w-0 break-words text-foreground\">{value.join(', ')}</span>;\n    if (depth >= MAX_NESTING_DEPTH) return <code className=\"min-w-0 break-all font-mono text-xs\">{JSON.stringify(value)}</code>;\n    const shown = value.slice(0, MAX_LIST_ITEMS);\n    return (\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        {shown.map((item, index) => (\n          // Position is the only identity a list entry has.\n          <div key={index} className=\"rounded border border-border bg-background px-2 py-1\">\n            <ArgValue value={item} depth={depth + 1} />\n          </div>\n        ))}\n        {value.length > shown.length ? (\n          <p className=\"text-muted-foreground text-xs\">+{value.length - shown.length} more</p>\n        ) : null}\n      </div>\n    );\n  }\n  if (typeof value === 'object') {\n    if (depth >= MAX_NESTING_DEPTH) return <code className=\"min-w-0 break-all font-mono text-xs\">{JSON.stringify(value)}</code>;\n    const entries = visibleToolArgEntries(value as Record<string, unknown>);\n    if (entries.length === 0) return <span className=\"text-muted-foreground\">—</span>;\n    return <ArgRows entries={entries} depth={depth + 1} />;\n  }\n  return <code className=\"min-w-0 break-all font-mono text-xs\">{JSON.stringify(value)}</code>;\n}\n\nfunction ArgRows({ entries, depth }: { entries: [string, unknown][]; depth: number }) {\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n      {entries.map(([key, value]) => (\n        <div key={key} className=\"flex min-w-0 gap-2 text-sm\">\n          <span className=\"w-24 shrink-0 font-medium text-muted-foreground\">{formatKeyAsName(key)}</span>\n          <ArgValue value={value} depth={depth} />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction textField(args: Readonly<Record<string, unknown>>, key: string): string | undefined {\n  const value = args[key];\n  if (typeof value === 'string') return value;\n  if (Array.isArray(value)) return value.filter((each) => typeof each === 'string').join(', ');\n  return undefined;\n}\n\nfunction EmailPreview({ args }: { args: Readonly<Record<string, unknown>> }) {\n  const rows: [string, string | undefined][] = [\n    ['To', textField(args, 'to')],\n    ['CC', textField(args, 'cc')],\n    ['BCC', textField(args, 'bcc')],\n    ['Subject', textField(args, 'subject')],\n  ];\n  const body = textField(args, 'body');\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex flex-col gap-1.5\">\n        {rows.map(([label, value]) =>\n          value ? (\n            <div key={label} className=\"flex gap-2 text-sm\">\n              <span className=\"w-16 shrink-0 font-medium text-muted-foreground\">{label}</span>\n              <span className={cn('text-foreground', label === 'Subject' && 'font-medium')}>{value}</span>\n            </div>\n          ) : null,\n        )}\n      </div>\n      {body ? (\n        <>\n          <div className=\"border-border border-t\" />\n          <div className=\"max-h-64 min-h-16 overflow-auto text-foreground text-sm\">\n            <ChatMessageBody text={body} />\n          </div>\n        </>\n      ) : null}\n    </div>\n  );\n}\n\nconst WARNING_TONES = {\n  info: 'text-muted-foreground',\n  warning: 'text-amber-700',\n  critical: 'text-red-700',\n} as const;\n\nfunction ApprovalContextPanel({ context }: { context: unknown }) {\n  const parsed = parsePendingApprovalContext(context);\n  if (!parsed) return null;\n  return (\n    <div className=\"flex flex-col gap-2 rounded-md border border-border bg-muted/60 p-3\" data-testid=\"typed-interrupt-approval-context\">\n      {parsed.headline ? (\n        <div className=\"flex items-start gap-2\">\n          <SparklesIcon className=\"mt-0.5 size-3.5 shrink-0 text-primary\" />\n          <p className=\"font-medium text-foreground text-sm\">{parsed.headline}</p>\n        </div>\n      ) : null}\n      {parsed.summary ? <p className=\"text-foreground text-sm\">{parsed.summary}</p> : null}\n      {parsed.facts.length > 0 ? (\n        <div className=\"flex flex-col gap-1\">\n          {parsed.facts.map((fact) => (\n            <div key={fact.label} className=\"flex gap-2 text-sm\">\n              <span className=\"w-28 shrink-0 font-medium text-muted-foreground\">{fact.label}</span>\n              <span className=\"min-w-0 break-words text-foreground\">{fact.value}</span>\n            </div>\n          ))}\n        </div>\n      ) : null}\n      {parsed.warnings.map((warning) => {\n        const Icon =\n          warning.severity === 'critical' ? OctagonAlertIcon : warning.severity === 'warning' ? AlertTriangleIcon : InfoIcon;\n        return (\n          <div key={warning.message} className={cn('flex items-start gap-1.5 text-xs', WARNING_TONES[warning.severity])}>\n            <Icon className=\"size-3.5 shrink-0\" />\n            <span>{warning.message}</span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction isEmailCall(toolId: string | null, args: Readonly<Record<string, unknown>>): boolean {\n  return Boolean(toolId?.toLowerCase().includes('email') && 'to' in args && 'subject' in args);\n}\n\nexport function HitlInterruptCard({ interrupt, resume, engine }: TypedInterruptCardProps) {\n  const [reason, setReason] = useState('');\n  const [showFeedback, setShowFeedback] = useState(false);\n  const { isLoading, hasTimeout, cancelTimeout, displayMessage, isConversationStreaming } = engine;\n  const { toolId, toolArgs, approvalContext } = readTypedHitlContext(interrupt);\n  const emailMode = isEmailCall(toolId, toolArgs);\n  const visibleArgs = visibleToolArgEntries(toolArgs);\n  const actionsDisabled = isLoading || isConversationStreaming;\n  const feedbackHoldsApprove = reason.trim() !== '';\n  const approveDisabled = actionsDisabled || feedbackHoldsApprove;\n  const approveHint = isConversationStreaming\n    ? WAIT_FOR_STREAMING_MESSAGE\n    : feedbackHoldsApprove\n      ? 'Clear the feedback above to approve, or click Reject to send it with the rejection.'\n      : null;\n  const approveButton = (\n    <Button\n      onClick={() => resume(typedApprovalResume({ action: 'approve' }))}\n      disabled={approveDisabled}\n      className={APPROVE_BUTTON_CLASS}\n    >\n      {isLoading ? 'Processing...' : emailMode ? 'Send Email' : 'Approve'}\n    </Button>\n  );\n  return (\n    <InterruptCardShell\n      title={emailMode ? 'Review Email' : 'Human Approval Required'}\n      description={displayMessage}\n      icon={emailMode ? <MailIcon /> : <ShieldIcon />}\n      hasTimeout={hasTimeout}\n      onInteraction={cancelTimeout}\n      content={\n        <div className=\"flex flex-col gap-3\" data-testid=\"typed-interrupt-hitl\">\n          {toolId ? <p className=\"text-muted-foreground text-sm\">{formatKeyAsName(toolId)}</p> : null}\n          <ApprovalContextPanel context={approvalContext} />\n          {emailMode ? (\n            <div className=\"rounded-md border border-border bg-muted/60 p-3\">\n              <EmailPreview args={toolArgs} />\n            </div>\n          ) : visibleArgs.length > 0 ? (\n            <div className=\"rounded-md border border-border bg-muted/60 p-3\">\n              <ArgRows entries={visibleArgs} depth={0} />\n            </div>\n          ) : null}\n          {showFeedback ? (\n            <RejectReasonField label=\"Feedback (optional)\" value={reason} onChange={setReason} disabled={isLoading} />\n          ) : null}\n        </div>\n      }\n      actions={\n        <>\n          {approveHint ? <HoverHint label={approveHint}>{approveButton}</HoverHint> : approveButton}\n          <WaitForStreamingHint active={isConversationStreaming}>\n            <Button\n              variant=\"outline\"\n              onClick={() => resume(typedApprovalResume({ action: 'reject', reason: reason || undefined }))}\n              disabled={actionsDisabled}\n            >\n              {isLoading ? 'Processing...' : emailMode ? \"Don't Send\" : 'Reject'}\n            </Button>\n          </WaitForStreamingHint>\n          {showFeedback ? null : <AddFeedbackButton onClick={() => setShowFeedback(true)} className=\"ml-auto px-2 py-1\" />}\n        </>\n      }\n    />\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/chat/typed-interrupts/interrupt-card-shell.cjs

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const lucideReact = require("lucide-react");
+const require$$0 = require("react");
+const cnfast = require("cnfast");
+const WAIT_FOR_STREAMING_MESSAGE = "Please wait for the conversation to finish streaming";
+const INTERACTION_DELAY_MS = 200;
+function StatusDot({ status }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 pt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cnfast.cn(
+        "size-2 rounded-full",
+        status === "processing" && "animate-pulse bg-blue-500",
+        status === "completed" && "bg-green-500",
+        (status === "pending" || status === "awaiting-input") && "animate-pulse bg-yellow-500"
+      )
+    }
+  ) });
+}
+function InteractionWatcher({
+  onInteraction,
+  children
+}) {
+  const ref = require$$0.useRef(null);
+  const onInteractionRef = require$$0.useRef(onInteraction);
+  onInteractionRef.current = onInteraction;
+  require$$0.useEffect(() => {
+    const element = ref.current;
+    if (!element) return void 0;
+    let ready = false;
+    let fired = false;
+    const readyTimer = setTimeout(() => {
+      ready = true;
+    }, INTERACTION_DELAY_MS);
+    const handle = (event) => {
+      if (!ready || fired) return;
+      if (event instanceof MouseEvent && event.type === "click") {
+        const rect = element.getBoundingClientRect();
+        const outside = rect.width > 0 && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom);
+        if (outside) return;
+      }
+      fired = true;
+      onInteractionRef.current();
+    };
+    const kinds = ["click", "keydown", "touchstart", "scroll"];
+    for (const kind of kinds) element.addEventListener(kind, handle, { capture: true, passive: true });
+    return () => {
+      clearTimeout(readyTimer);
+      for (const kind of kinds) element.removeEventListener(kind, handle, { capture: true });
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, children });
+}
+function InterruptCardShell({
+  status = "awaiting-input",
+  title,
+  description,
+  icon,
+  content,
+  actions,
+  hasTimeout = false,
+  onInteraction
+}) {
+  const card = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start gap-3 rounded-lg border border-border bg-card p-3 text-card-foreground shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { status }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 text-foreground [&_svg]:size-5", children: icon }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-foreground text-sm", children: title }),
+          description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-muted-foreground text-sm", children: description }) : null
+        ] })
+      ] }),
+      content ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: content }) : null,
+      actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions }) : null
+    ] })
+  ] });
+  if (hasTimeout && onInteraction) {
+    return /* @__PURE__ */ jsxRuntime.jsx(InteractionWatcher, { onInteraction, children: card });
+  }
+  return card;
+}
+function HoverHint({ label, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "group/typed-hint relative inline-flex", children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute bottom-full left-1/2 z-20 mb-1 w-max max-w-xs -translate-x-1/2 rounded-md bg-foreground px-3 py-1.5 text-background text-xs opacity-0 shadow-md transition-opacity delay-0 group-focus-within/typed-hint:opacity-100 group-hover/typed-hint:opacity-100 group-hover/typed-hint:delay-300",
+        children: label
+      }
+    )
+  ] });
+}
+function WaitForStreamingHint({
+  active,
+  children
+}) {
+  if (!active) return children;
+  return /* @__PURE__ */ jsxRuntime.jsx(HoverHint, { label: WAIT_FOR_STREAMING_MESSAGE, children });
+}
+function formatCountdown(seconds) {
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor(seconds % 86400 / 3600);
+  if (days > 0) return hours > 0 ? `${days}d ${hours}h` : `${days}d`;
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const secs = Math.floor(seconds % 60);
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }
+  if (minutes > 0) return `${minutes}:${secs.toString().padStart(2, "0")}`;
+  return `${secs}s`;
+}
+function formatSecondsForDisplay(seconds) {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const secs = Math.floor(seconds % 60);
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }
+  return `${minutes}:${secs.toString().padStart(2, "0")}`;
+}
+function TimedInterruptCountdown({
+  timeoutRemaining,
+  timeoutSeconds,
+  isTimedOut,
+  isTimeoutCancelled,
+  className
+}) {
+  if (isTimeoutCancelled) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cnfast.cn("flex items-center gap-2 text-green-600", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClockIcon, { className: "size-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm", children: "Timeout cancelled - take your time" })
+    ] });
+  }
+  if (timeoutRemaining === null || timeoutSeconds === null) return null;
+  if (isTimedOut) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cnfast.cn("flex items-center gap-2 text-amber-600", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "size-4 animate-pulse" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm", children: "Timed out - resuming automatically..." })
+    ] });
+  }
+  const progress = timeoutSeconds > 0 ? (timeoutSeconds - timeoutRemaining) / timeoutSeconds * 100 : 100;
+  const urgent = timeoutRemaining <= 10;
+  const critical = timeoutRemaining <= 5;
+  const tone = critical ? "text-red-500" : urgent ? "text-amber-500" : "text-muted-foreground";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cnfast.cn("flex flex-col gap-1", className), "data-testid": "typed-interrupt-countdown", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClockIcon, { className: cnfast.cn("size-4", tone, critical && "animate-pulse") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cnfast.cn("font-medium text-sm", tone), children: [
+        "Auto-continuing in ",
+        formatCountdown(timeoutRemaining)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cnfast.cn(
+          "h-full rounded-full transition-all duration-1000 ease-linear",
+          critical ? "bg-red-500" : urgent ? "bg-amber-500" : "bg-primary"
+        ),
+        style: { width: `${Math.max(0, 100 - progress)}%` }
+      }
+    ) })
+  ] });
+}
+function formatKeyAsName(key) {
+  if (!key) return "";
+  return key.replace(/_/g, " ").split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+exports.HoverHint = HoverHint;
+exports.InterruptCardShell = InterruptCardShell;
+exports.TimedInterruptCountdown = TimedInterruptCountdown;
+exports.WAIT_FOR_STREAMING_MESSAGE = WAIT_FOR_STREAMING_MESSAGE;
+exports.WaitForStreamingHint = WaitForStreamingHint;
+exports.formatKeyAsName = formatKeyAsName;
+exports.formatSecondsForDisplay = formatSecondsForDisplay;
+//# sourceMappingURL=interrupt-card-shell.cjs.map

package/dist/chat/typed-interrupts/interrupt-card-shell.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"interrupt-card-shell.cjs","sources":["../../../src/chat/typed-interrupts/interrupt-card-shell.tsx"],"sourcesContent":["/**\n * The look every typed card shares (Olympus's `InterruptProgressUI`): a\n * status dot, the kind's icon, a title and description, the card's content and\n * its actions. A timed park's card also stops the backend's timer the first\n * time the person clicks, types, touches or scrolls inside it (Olympus's\n * `InterruptInteractionWrapper`), never on a pointer merely passing over it or\n * on the focus moving in.\n */\nimport { AlertCircleIcon, ClockIcon } from 'lucide-react';\nimport { type ReactElement, type ReactNode, useEffect, useRef } from 'react';\nimport { cn } from '../../lib/utils';\n\nexport type InterruptCardStatus = 'pending' | 'awaiting-input' | 'processing' | 'completed';\n\n/** What a disabled control says while the conversation still streams. */\nexport const WAIT_FOR_STREAMING_MESSAGE = 'Please wait for the conversation to finish streaming';\n\n/** Clicks, keys, touches and scrolls inside this long after mount are the auto-focus, not the person. */\nconst INTERACTION_DELAY_MS = 200;\n\nfunction StatusDot({ status }: { status: InterruptCardStatus }) {\n  return (\n    <div className=\"shrink-0 pt-1.5\">\n      <div\n        aria-hidden\n        className={cn(\n          'size-2 rounded-full',\n          status === 'processing' && 'animate-pulse bg-blue-500',\n          status === 'completed' && 'bg-green-500',\n          (status === 'pending' || status === 'awaiting-input') && 'animate-pulse bg-yellow-500',\n        )}\n      />\n    </div>\n  );\n}\n\n/**\n * Calls `onInteraction` once, on the first click, key, touch or scroll inside\n * `children` after the auto-focus window. Listens on the element itself, so\n * the wrapper is no control of its own.\n */\nfunction InteractionWatcher({\n  onInteraction,\n  children,\n}: {\n  onInteraction: () => void;\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const onInteractionRef = useRef(onInteraction);\n  onInteractionRef.current = onInteraction;\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return undefined;\n    let ready = false;\n    let fired = false;\n    const readyTimer = setTimeout(() => {\n      ready = true;\n    }, INTERACTION_DELAY_MS);\n    const handle = (event: Event) => {\n      if (!ready || fired) return;\n      // A click whose point lies outside the card (a portal's) is not the card's.\n      if (event instanceof MouseEvent && event.type === 'click') {\n        const rect = element.getBoundingClientRect();\n        const outside =\n          rect.width > 0 &&\n          (event.clientX < rect.left ||\n            event.clientX > rect.right ||\n            event.clientY < rect.top ||\n            event.clientY > rect.bottom);\n        if (outside) return;\n      }\n      fired = true;\n      onInteractionRef.current();\n    };\n    const kinds = ['click', 'keydown', 'touchstart', 'scroll'] as const;\n    for (const kind of kinds) element.addEventListener(kind, handle, { capture: true, passive: true });\n    return () => {\n      clearTimeout(readyTimer);\n      for (const kind of kinds) element.removeEventListener(kind, handle, { capture: true });\n    };\n  }, []);\n  return <div ref={ref}>{children}</div>;\n}\n\nexport interface InterruptCardShellProps {\n  status?: InterruptCardStatus;\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n  content?: ReactNode;\n  actions?: ReactNode;\n  /** The park has a timer: the first interaction inside calls `onInteraction`. */\n  hasTimeout?: boolean;\n  onInteraction?: () => void;\n}\n\nexport function InterruptCardShell({\n  status = 'awaiting-input',\n  title,\n  description,\n  icon,\n  content,\n  actions,\n  hasTimeout = false,\n  onInteraction,\n}: InterruptCardShellProps) {\n  const card = (\n    <div className=\"flex w-full items-start gap-3 rounded-lg border border-border bg-card p-3 text-card-foreground shadow-sm\">\n      <StatusDot status={status} />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n        <div className=\"flex items-start gap-2\">\n          {icon ? <div className=\"shrink-0 text-foreground [&_svg]:size-5\">{icon}</div> : null}\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"font-medium text-foreground text-sm\">{title}</div>\n            {description ? (\n              <div className=\"mt-1 text-muted-foreground text-sm\">{description}</div>\n            ) : null}\n          </div>\n        </div>\n        {content ? <div className=\"flex flex-col gap-3\">{content}</div> : null}\n        {actions ? <div className=\"flex flex-wrap items-center gap-2\">{actions}</div> : null}\n      </div>\n    </div>\n  );\n  if (hasTimeout && onInteraction) {\n    return <InteractionWatcher onInteraction={onInteraction}>{card}</InteractionWatcher>;\n  }\n  return card;\n}\n\n/**\n * A short hint shown above `children` while the pointer rests on them (or the\n * focus is inside). Plain CSS, not a Radix tooltip: a host whose bundler puts\n * every dependency in its startup chunk (the Office task pane) would otherwise\n * download the tooltip's popper stack on every open for these lazily loaded\n * cards. The hint is visual only; the control's own text names it.\n */\nexport function HoverHint({ label, children }: { label: ReactNode; children: ReactElement }) {\n  return (\n    <span className=\"group/typed-hint relative inline-flex\">\n      {children}\n      <span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute bottom-full left-1/2 z-20 mb-1 w-max max-w-xs -translate-x-1/2 rounded-md bg-foreground px-3 py-1.5 text-background text-xs opacity-0 shadow-md transition-opacity delay-0 group-focus-within/typed-hint:opacity-100 group-hover/typed-hint:opacity-100 group-hover/typed-hint:delay-300\"\n      >\n        {label}\n      </span>\n    </span>\n  );\n}\n\n/**\n * Wraps a control that is off while the conversation streams, saying why on\n * hover; otherwise renders the control as it is.\n */\nexport function WaitForStreamingHint({\n  active,\n  children,\n}: {\n  active: boolean;\n  children: ReactElement;\n}) {\n  if (!active) return children;\n  return <HoverHint label={WAIT_FOR_STREAMING_MESSAGE}>{children}</HoverHint>;\n}\n\nfunction formatCountdown(seconds: number): string {\n  const days = Math.floor(seconds / 86_400);\n  const hours = Math.floor((seconds % 86_400) / 3600);\n  if (days > 0) return hours > 0 ? `${days}d ${hours}h` : `${days}d`;\n  const minutes = Math.floor((seconds % 3600) / 60);\n  const secs = Math.floor(seconds % 60);\n  if (hours > 0) {\n    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n  }\n  if (minutes > 0) return `${minutes}:${secs.toString().padStart(2, '0')}`;\n  return `${secs}s`;\n}\n\n/** `m:ss` (or `h:mm:ss`) of a wait. */\nexport function formatSecondsForDisplay(seconds: number): string {\n  const hours = Math.floor(seconds / 3600);\n  const minutes = Math.floor((seconds % 3600) / 60);\n  const secs = Math.floor(seconds % 60);\n  if (hours > 0) {\n    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n  }\n  return `${minutes}:${secs.toString().padStart(2, '0')}`;\n}\n\n/** The auto-continue countdown of a timed park (Olympus's `TimedInterruptCountdown`). */\nexport function TimedInterruptCountdown({\n  timeoutRemaining,\n  timeoutSeconds,\n  isTimedOut,\n  isTimeoutCancelled,\n  className,\n}: {\n  timeoutRemaining: number | null;\n  timeoutSeconds: number | null;\n  isTimedOut: boolean;\n  isTimeoutCancelled: boolean;\n  className?: string;\n}) {\n  if (isTimeoutCancelled) {\n    return (\n      <div className={cn('flex items-center gap-2 text-green-600', className)}>\n        <ClockIcon className=\"size-4\" />\n        <span className=\"font-medium text-sm\">Timeout cancelled - take your time</span>\n      </div>\n    );\n  }\n  if (timeoutRemaining === null || timeoutSeconds === null) return null;\n  if (isTimedOut) {\n    return (\n      <div className={cn('flex items-center gap-2 text-amber-600', className)}>\n        <AlertCircleIcon className=\"size-4 animate-pulse\" />\n        <span className=\"font-medium text-sm\">Timed out - resuming automatically...</span>\n      </div>\n    );\n  }\n  const progress = timeoutSeconds > 0 ? ((timeoutSeconds - timeoutRemaining) / timeoutSeconds) * 100 : 100;\n  const urgent = timeoutRemaining <= 10;\n  const critical = timeoutRemaining <= 5;\n  const tone = critical ? 'text-red-500' : urgent ? 'text-amber-500' : 'text-muted-foreground';\n  return (\n    <div className={cn('flex flex-col gap-1', className)} data-testid=\"typed-interrupt-countdown\">\n      <div className=\"flex items-center gap-2\">\n        <ClockIcon className={cn('size-4', tone, critical && 'animate-pulse')} />\n        <span className={cn('font-medium text-sm', tone)}>\n          Auto-continuing in {formatCountdown(timeoutRemaining)}\n        </span>\n      </div>\n      <div className=\"h-1 w-full overflow-hidden rounded-full bg-muted\">\n        <div\n          className={cn(\n            'h-full rounded-full transition-all duration-1000 ease-linear',\n            critical ? 'bg-red-500' : urgent ? 'bg-amber-500' : 'bg-primary',\n          )}\n          style={{ width: `${Math.max(0, 100 - progress)}%` }}\n        />\n      </div>\n    </div>\n  );\n}\n\n/** `delete_assets` → `Delete Assets` (Olympus's `formatToolIdAsName`). */\nexport function formatKeyAsName(key: string): string {\n  if (!key) return '';\n  return key\n    .replace(/_/g, ' ')\n    .split(' ')\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\n    .join(' ');\n}\n"],"names":["jsx","cn","useRef","useEffect","jsxs","ClockIcon","AlertCircleIcon"],"mappings":"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"}

package/dist/chat/typed-interrupts/interrupt-card-shell.d.ts

@@ -0,0 +1,47 @@
+import { type ReactElement, type ReactNode } from 'react';
+export type InterruptCardStatus = 'pending' | 'awaiting-input' | 'processing' | 'completed';
+/** What a disabled control says while the conversation still streams. */
+export declare const WAIT_FOR_STREAMING_MESSAGE = "Please wait for the conversation to finish streaming";
+export interface InterruptCardShellProps {
+    status?: InterruptCardStatus;
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    content?: ReactNode;
+    actions?: ReactNode;
+    /** The park has a timer: the first interaction inside calls `onInteraction`. */
+    hasTimeout?: boolean;
+    onInteraction?: () => void;
+}
+export declare function InterruptCardShell({ status, title, description, icon, content, actions, hasTimeout, onInteraction, }: InterruptCardShellProps): import("react").JSX.Element;
+/**
+ * A short hint shown above `children` while the pointer rests on them (or the
+ * focus is inside). Plain CSS, not a Radix tooltip: a host whose bundler puts
+ * every dependency in its startup chunk (the Office task pane) would otherwise
+ * download the tooltip's popper stack on every open for these lazily loaded
+ * cards. The hint is visual only; the control's own text names it.
+ */
+export declare function HoverHint({ label, children }: {
+    label: ReactNode;
+    children: ReactElement;
+}): import("react").JSX.Element;
+/**
+ * Wraps a control that is off while the conversation streams, saying why on
+ * hover; otherwise renders the control as it is.
+ */
+export declare function WaitForStreamingHint({ active, children, }: {
+    active: boolean;
+    children: ReactElement;
+}): import("react").JSX.Element;
+/** `m:ss` (or `h:mm:ss`) of a wait. */
+export declare function formatSecondsForDisplay(seconds: number): string;
+/** The auto-continue countdown of a timed park (Olympus's `TimedInterruptCountdown`). */
+export declare function TimedInterruptCountdown({ timeoutRemaining, timeoutSeconds, isTimedOut, isTimeoutCancelled, className, }: {
+    timeoutRemaining: number | null;
+    timeoutSeconds: number | null;
+    isTimedOut: boolean;
+    isTimeoutCancelled: boolean;
+    className?: string;
+}): import("react").JSX.Element | null;
+/** `delete_assets` → `Delete Assets` (Olympus's `formatToolIdAsName`). */
+export declare function formatKeyAsName(key: string): string;