@tomismeta/paperclip-aperture 0.1.0

package/dist/ui/index.js

@@ -0,0 +1,1133 @@
+// src/ui/index.tsx
+import {
+  usePluginAction,
+  usePluginData
+} from "@paperclipai/plugin-sdk/ui";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+// src/aperture/types.ts
+function createEmptySnapshot(companyId) {
+  return {
+    companyId,
+    updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    active: null,
+    queued: [],
+    ambient: [],
+    counts: {
+      active: 0,
+      queued: 0,
+      ambient: 0,
+      total: 0
+    }
+  };
+}
+
+// src/ui/index.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ACCENT_COLOR = "#19A1FF";
+var ACCENT_BG_STYLE = { backgroundColor: ACCENT_COLOR };
+function currentSurfaceBrand() {
+  return {
+    key: "focus",
+    wordmark: "Focus",
+    supportCopy: "Powered by Aperture",
+    headingEmptyState: "No focus state yet.",
+    loadingLabel: "Loading Focus\u2026"
+  };
+}
+function useAccentColor() {
+  const ref = useRef(null);
+  useEffect(() => {
+    ref.current?.style.setProperty("color", ACCENT_COLOR, "important");
+  });
+  return ref;
+}
+function Accent({ children, className }) {
+  const ref = useAccentColor();
+  return /* @__PURE__ */ jsx("span", { ref, className, children });
+}
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function humanizeToken(value) {
+  return value.split(/[_\-.]/g).filter(Boolean).map((part) => part.slice(0, 1).toUpperCase() + part.slice(1)).join(" ");
+}
+function pluginPagePath(companyPrefix) {
+  return companyPrefix ? `/${companyPrefix}/aperture` : "/aperture";
+}
+function formatRelativeTime(value) {
+  const timestamp = new Date(value).getTime();
+  if (Number.isNaN(timestamp)) return "recently";
+  const elapsedMs = timestamp - Date.now();
+  const elapsedMinutes = Math.round(elapsedMs / 6e4);
+  const formatter = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+  if (Math.abs(elapsedMinutes) < 60) return formatter.format(elapsedMinutes, "minute");
+  const elapsedHours = Math.round(elapsedMinutes / 60);
+  if (Math.abs(elapsedHours) < 24) return formatter.format(elapsedHours, "hour");
+  const elapsedDays = Math.round(elapsedHours / 24);
+  return formatter.format(elapsedDays, "day");
+}
+function sourceLabel(frame) {
+  return frame.source?.label ?? "Paperclip";
+}
+function contextValue(frame, id) {
+  const item = frame.context?.items?.find((entry) => entry.id === id);
+  return typeof item?.value === "string" && item.value.trim().length > 0 ? item.value : void 0;
+}
+function isBudgetOverride(frame) {
+  return frame.provenance?.factors?.includes("budget stop") ?? false;
+}
+function requestedAmount(frame) {
+  return contextValue(frame, "requested-amount");
+}
+function budgetReason(frame) {
+  return contextValue(frame, "budget-reason");
+}
+function modeLabel(frame) {
+  switch (frame.mode) {
+    case "approval":
+      return "approval";
+    case "choice":
+      return "choice";
+    case "form":
+      return "form";
+    default:
+      return "status";
+  }
+}
+function urgencyLabel(frame) {
+  switch (frame.tone) {
+    case "critical":
+      return "urgent";
+    case "focused":
+      return "needs attention";
+    case "ambient":
+      return "low urgency";
+  }
+}
+function riskLabel(frame) {
+  return `${frame.consequence} risk`;
+}
+function toneBadgeStyle(frame) {
+  switch (frame.tone) {
+    case "critical":
+      return {
+        className: "border-transparent",
+        style: { color: ACCENT_COLOR, backgroundColor: `${ACCENT_COLOR}1a`, borderColor: `${ACCENT_COLOR}4d` }
+      };
+    case "focused":
+      return {
+        className: "border-transparent",
+        style: { color: ACCENT_COLOR, opacity: 0.8, backgroundColor: `${ACCENT_COLOR}0d`, borderColor: `${ACCENT_COLOR}33` }
+      };
+    case "ambient":
+      return { className: "border-border bg-secondary text-muted-foreground" };
+  }
+}
+function postureForSnapshot(snapshot) {
+  const current = snapshot.active;
+  if (current?.tone === "critical" || current?.consequence === "high" || snapshot.counts.active + snapshot.counts.queued >= 3) {
+    return { glyph: "\u25CF", label: "busy" };
+  }
+  if (snapshot.counts.active > 0 || snapshot.counts.queued > 0 || snapshot.counts.ambient > 0) {
+    return { glyph: "\u25D0", label: "elevated" };
+  }
+  return { glyph: "\u25CB", label: "calm" };
+}
+function actionableCount(snapshot) {
+  return (snapshot.active ? 1 : 0) + snapshot.queued.length;
+}
+function judgmentLine(frame, lane) {
+  if (frame.provenance?.whyNow) return frame.provenance.whyNow;
+  if (lane === "active") {
+    if (isBudgetOverride(frame)) return "Budget controls are blocking work until a board decision lands.";
+    if (frame.mode === "approval") return "A human decision is blocking work right now.";
+    if (frame.tone === "critical") return "This surfaced because it can displace the operator now.";
+    return "This is the clearest current operator focus.";
+  }
+  if (isBudgetOverride(frame)) return "Budget review is staged behind the current focus.";
+  if (lane === "queued") return "Important enough to keep visible, but not enough to displace now.";
+  return "Useful for awareness, but not interrupting.";
+}
+function frameUpdatedAt(frame, snapshotUpdatedAt) {
+  return frame.timing.updatedAt || snapshotUpdatedAt;
+}
+function approvalIdForFrame(frame) {
+  const [kind, id] = frame.taskId.split(":");
+  return kind === "approval" && id ? id : null;
+}
+function entityIdFromFrame(frame) {
+  const parts = frame.taskId.split(":");
+  return parts.length >= 2 ? parts.slice(1).join(":") : null;
+}
+function entityTypeFromFrame(frame) {
+  const parts = frame.taskId.split(":");
+  return parts.length >= 2 ? parts[0] : null;
+}
+function itemHref(frame, companyPrefix) {
+  const entityType = entityTypeFromFrame(frame);
+  const entityId = entityIdFromFrame(frame);
+  if (!entityType || !entityId || !companyPrefix) return null;
+  const pluralType = entityType === "run" ? "runs" : entityType === "approval" ? "approvals" : entityType === "issue" ? "issues" : entityType === "agent" ? "agents" : null;
+  if (!pluralType) return null;
+  return `/${companyPrefix}/${pluralType}/${entityId}`;
+}
+function costsHref(companyPrefix) {
+  return companyPrefix ? `/${companyPrefix}/costs` : null;
+}
+function responseKind(frame, lane) {
+  if (approvalIdForFrame(frame) && (frame.responseSpec?.kind === "approval" || frame.mode === "approval")) {
+    return "approval";
+  }
+  if (lane !== "ambient" && (frame.responseSpec?.kind === "acknowledge" || frame.mode === "status")) {
+    return "acknowledge";
+  }
+  return "none";
+}
+function compactTitle(frame) {
+  return frame.title.trim().length > 0 ? frame.title : "Untitled frame";
+}
+function approvalTitle(record) {
+  const payload = record.payload ?? {};
+  const explicitTitle = typeof payload.title === "string" ? payload.title : typeof payload.plan === "string" ? payload.plan : typeof payload.name === "string" ? payload.name : null;
+  if (explicitTitle) return explicitTitle;
+  return `${humanizeToken(record.type)} approval`;
+}
+function isBudgetOverrideRecord(record) {
+  return record.type === "budget_override_required";
+}
+function actionableApprovalRecords(records) {
+  if (!records) return [];
+  return records.filter((record) => record.status === "pending" || record.status === "revision_requested").sort((left, right) => {
+    const leftScore = isBudgetOverrideRecord(left) ? 1 : 0;
+    const rightScore = isBudgetOverrideRecord(right) ? 1 : 0;
+    if (leftScore !== rightScore) return rightScore - leftScore;
+    return (right.updatedAt ?? right.createdAt).localeCompare(left.updatedAt ?? left.createdAt);
+  });
+}
+function approvalRecordToFrame(record) {
+  const payload = record.payload ?? {};
+  const budgetOverride = isBudgetOverrideRecord(record);
+  const requestedAmount2 = typeof payload.requestedAmount === "string" ? payload.requestedAmount : void 0;
+  const reason = typeof payload.reason === "string" ? payload.reason : void 0;
+  const decisionContext = typeof payload.decisionContext === "string" ? payload.decisionContext : void 0;
+  const summary = typeof payload.summary === "string" ? payload.summary : budgetOverride ? "Budget controls are blocking work until a board decision lands." : "A board decision is blocking work in Paperclip.";
+  const updatedAt = record.updatedAt ?? record.createdAt;
+  return {
+    id: `approval-bootstrap:${record.id}`,
+    taskId: `approval:${record.id}`,
+    interactionId: `approval:${record.id}:approval`,
+    source: {
+      id: "paperclip:approval",
+      kind: "paperclip",
+      label: "Paperclip approval"
+    },
+    version: 1,
+    mode: "approval",
+    tone: "focused",
+    consequence: budgetOverride ? "high" : "medium",
+    title: approvalTitle(record),
+    summary,
+    context: {
+      items: [
+        {
+          id: "approval-type",
+          label: "Type",
+          value: humanizeToken(record.type)
+        },
+        ...requestedAmount2 ? [{
+          id: "requested-amount",
+          label: "Requested amount",
+          value: requestedAmount2
+        }] : [],
+        ...reason ? [{
+          id: "budget-reason",
+          label: "Reason",
+          value: reason
+        }] : [],
+        ...decisionContext ? [{
+          id: "decision-context",
+          label: "Decision context",
+          value: decisionContext
+        }] : []
+      ]
+    },
+    responseSpec: {
+      kind: "approval",
+      actions: [
+        { id: "approve", label: "Approve", kind: "approve", emphasis: "primary" },
+        { id: "reject", label: "Reject", kind: "reject", emphasis: "danger" },
+        ...budgetOverride ? [{ id: "request-revision", label: "Request revision", kind: "cancel", emphasis: "secondary" }] : []
+      ]
+    },
+    provenance: {
+      whyNow: budgetOverride ? "Budget controls are blocking work until a board decision lands." : "Paperclip is waiting on a human approval before work can continue.",
+      factors: budgetOverride ? ["budget stop", "approval", "operator decision"] : ["approval", "operator decision"]
+    },
+    timing: {
+      createdAt: record.createdAt,
+      updatedAt
+    },
+    metadata: {
+      approvalStatus: record.status,
+      approvalType: record.type
+    }
+  };
+}
+function frameSortScore(frame, lane) {
+  const toneWeight = frame.tone === "critical" ? 40 : frame.tone === "focused" ? 25 : 5;
+  const consequenceWeight = frame.consequence === "high" ? 30 : frame.consequence === "medium" ? 15 : 0;
+  const modeWeight = frame.mode === "approval" ? 12 : frame.mode === "choice" ? 8 : 0;
+  const laneWeight = lane === "active" ? 20 : lane === "queued" ? 10 : 0;
+  const budgetWeight = isBudgetOverride(frame) ? 10 : 0;
+  return toneWeight + consequenceWeight + modeWeight + laneWeight + budgetWeight;
+}
+function mergeSnapshotWithApprovals(snapshot, companyId, approvals) {
+  const base = snapshot ?? createEmptySnapshot(companyId);
+  const approvalFrames = actionableApprovalRecords(approvals).map(approvalRecordToFrame);
+  const baseNonApprovalActive = base.active && !approvalIdForFrame(base.active) ? base.active : null;
+  const baseNonApprovalQueued = base.queued.filter((frame) => !approvalIdForFrame(frame));
+  const baseAmbient = base.ambient.filter((frame) => !approvalIdForFrame(frame));
+  if (approvalFrames.length === 0) {
+    return {
+      ...base,
+      active: baseNonApprovalActive,
+      queued: baseNonApprovalQueued,
+      ambient: baseAmbient,
+      counts: {
+        active: baseNonApprovalActive ? 1 : 0,
+        queued: baseNonApprovalQueued.length,
+        ambient: baseAmbient.length,
+        total: (baseNonApprovalActive ? 1 : 0) + baseNonApprovalQueued.length + baseAmbient.length
+      }
+    };
+  }
+  const candidates = [
+    ...baseNonApprovalActive ? [{ frame: baseNonApprovalActive, lane: "active" }] : [],
+    ...baseNonApprovalQueued.map((frame) => ({ frame, lane: "queued" })),
+    ...approvalFrames.map((frame, index) => ({ frame, lane: index === 0 ? "active" : "queued" }))
+  ].sort((left, right) => {
+    const byScore = frameSortScore(right.frame, right.lane) - frameSortScore(left.frame, left.lane);
+    if (byScore !== 0) return byScore;
+    return frameUpdatedAt(right.frame, base.updatedAt).localeCompare(frameUpdatedAt(left.frame, base.updatedAt));
+  });
+  const active = candidates[0]?.frame ?? null;
+  const queued = candidates.slice(1).map((entry) => entry.frame);
+  return {
+    ...base,
+    active,
+    queued,
+    ambient: baseAmbient,
+    counts: {
+      active: active ? 1 : 0,
+      queued: queued.length,
+      ambient: baseAmbient.length,
+      total: (active ? 1 : 0) + queued.length + baseAmbient.length
+    }
+  };
+}
+function usePendingApprovals(companyId) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [refreshVersion, setRefreshVersion] = useState(0);
+  useEffect(() => {
+    if (!companyId) {
+      setData(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    async function loadApprovals() {
+      try {
+        setError(null);
+        const response = await window.fetch(`/api/companies/${companyId}/approvals?status=pending`, {
+          method: "GET",
+          credentials: "same-origin"
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to load approvals (${response.status})`);
+        }
+        const approvals = await response.json();
+        if (!cancelled) {
+          setData(approvals);
+          setLoading(false);
+        }
+      } catch (fetchError) {
+        if (!cancelled) {
+          setError(fetchError instanceof Error ? fetchError : new Error(String(fetchError)));
+          setLoading(false);
+        }
+      }
+    }
+    setLoading(true);
+    void loadApprovals();
+    return () => {
+      cancelled = true;
+    };
+  }, [companyId, refreshVersion]);
+  return {
+    data,
+    loading,
+    error,
+    refresh: () => {
+      setRefreshVersion((value) => value + 1);
+    }
+  };
+}
+var ENTITY_PATTERN = /\b([A-Z][A-Z0-9]+-\d+)\b|"([^"]+)"/g;
+function HighlightedTitle({ text }) {
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+  const re = new RegExp(ENTITY_PATTERN.source, "g");
+  while ((match = re.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+    const token = match[1] ?? match[2] ?? match[0];
+    parts.push(
+      /* @__PURE__ */ jsx(Accent, { children: match[1] ? token : `"${token}"` }, match.index)
+    );
+    lastIndex = re.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+  return parts.length > 1 ? /* @__PURE__ */ jsx(Fragment, { children: parts }) : null;
+}
+function renderTitle(frame) {
+  const text = compactTitle(frame);
+  const highlighted = HighlightedTitle({ text });
+  return highlighted ?? text;
+}
+function useAttentionPolling(companyId, refreshers, intervalMs = 5e3) {
+  const refreshersRef = useRef(refreshers);
+  refreshersRef.current = refreshers;
+  useEffect(() => {
+    if (!companyId) return;
+    const timer = window.setInterval(() => {
+      for (const refresh of refreshersRef.current) refresh();
+    }, intervalMs);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [companyId, intervalMs]);
+}
+function Badge(props) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap shrink-0",
+        props.className
+      ),
+      style: props.style,
+      children: props.children
+    }
+  );
+}
+function ActionButton(props) {
+  const toneClass = props.tone === "primary" ? "bg-green-700 text-white hover:bg-green-600" : props.tone === "danger" ? "bg-destructive text-white hover:bg-destructive/90 dark:bg-destructive/60" : "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: props.onClick,
+      disabled: props.disabled,
+      className: cn(
+        "inline-flex h-8 items-center justify-center gap-2 rounded-md px-3 text-sm font-medium",
+        "transition-[color,background-color,border-color,box-shadow,opacity]",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "disabled:pointer-events-none disabled:opacity-50",
+        toneClass
+      ),
+      children: props.label
+    }
+  );
+}
+function FrameActions(props) {
+  const actionMode = responseKind(props.frame, props.lane);
+  const isPending = props.pendingId === props.frame.id;
+  if (actionMode === "none") return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", props.compact && "justify-end"), children: actionMode === "approval" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    isBudgetOverride(props.frame) ? /* @__PURE__ */ jsx(
+      ActionButton,
+      {
+        label: "Request revision",
+        tone: "secondary",
+        disabled: isPending,
+        onClick: () => void props.onRequestRevision(props.frame)
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      ActionButton,
+      {
+        label: isPending ? "Submitting\u2026" : "Approve",
+        tone: "primary",
+        disabled: isPending,
+        onClick: () => void props.onApprove(props.frame)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActionButton,
+      {
+        label: "Reject",
+        tone: "danger",
+        disabled: isPending,
+        onClick: () => void props.onReject(props.frame)
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ActionButton,
+      {
+        label: isPending ? "Saving\u2026" : "Acknowledge",
+        tone: "primary",
+        disabled: isPending,
+        onClick: () => void props.onAcknowledge(props.frame)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActionButton,
+      {
+        label: "Dismiss",
+        tone: "secondary",
+        disabled: isPending,
+        onClick: () => void props.onDismiss(props.frame)
+      }
+    )
+  ] }) });
+}
+function ContextItems({ frame }) {
+  const items = frame.context?.items ?? [];
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: "border border-border bg-secondary/50 px-3 py-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: item.label }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-foreground", children: item.value ?? "Available" })
+  ] }, item.id)) });
+}
+function NowDetails(props) {
+  const { frame, snapshotUpdatedAt } = props;
+  const href = itemHref(frame, props.companyPrefix);
+  const budgetHref = isBudgetOverride(frame) ? costsHref(props.companyPrefix) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-border pt-4", children: [
+    frame.summary ? /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: frame.summary }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "border border-border bg-secondary/50 px-3 py-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Judgment" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-foreground/90", children: judgmentLine(frame, "active") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border border-border bg-secondary/50 px-3 py-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Request" }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 space-y-0.5 text-sm", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-foreground/90", children: [
+            sourceLabel(frame),
+            " \xB7 ",
+            modeLabel(frame)
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
+            riskLabel(frame),
+            " \xB7 ",
+            formatRelativeTime(frameUpdatedAt(frame, snapshotUpdatedAt))
+          ] }),
+          requestedAmount(frame) ? /* @__PURE__ */ jsxs("div", { className: "text-foreground/90", children: [
+            "Amount requested: ",
+            requestedAmount(frame)
+          ] }) : null,
+          budgetReason(frame) ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: budgetReason(frame) }) : null
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ContextItems, { frame }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      href ? /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground underline underline-offset-2 hover:text-foreground",
+          children: [
+            "Open in Paperclip",
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", className: "h-3 w-3", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+              /* @__PURE__ */ jsx("path", { d: "M6.5 3.5h-3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-3" }),
+              /* @__PURE__ */ jsx("path", { d: "M8.5 1.5h6v6" }),
+              /* @__PURE__ */ jsx("path", { d: "M14.5 1.5l-7 7" })
+            ] })
+          ]
+        }
+      ) : null,
+      budgetHref ? /* @__PURE__ */ jsx(Accent, { children: /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: budgetHref,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-1 text-xs font-medium underline underline-offset-2 hover:opacity-80",
+          style: { color: "inherit" },
+          children: [
+            "Review in Costs",
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", className: "h-3 w-3", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+              /* @__PURE__ */ jsx("path", { d: "M6.5 3.5h-3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-3" }),
+              /* @__PURE__ */ jsx("path", { d: "M8.5 1.5h6v6" }),
+              /* @__PURE__ */ jsx("path", { d: "M14.5 1.5l-7 7" })
+            ] })
+          ]
+        }
+      ) }) : null
+    ] })
+  ] });
+}
+function QuietNow() {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-16 items-center", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Nothing active right now." }) });
+}
+function NowPane(props) {
+  const frame = props.snapshot.active;
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const activeFrameId = frame?.id ?? null;
+  useEffect(() => {
+    setDetailsOpen(false);
+  }, [activeFrameId]);
+  return /* @__PURE__ */ jsxs("section", { className: "border border-border bg-card shadow-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border bg-accent px-4 py-2.5 sm:px-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Accent, { className: "text-base leading-none", children: props.posture.glyph }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+            /* @__PURE__ */ jsx(Accent, { className: "text-[18px] leading-none font-bold tracking-[0.04em]", children: props.brand.wordmark }),
+            /* @__PURE__ */ jsx(Accent, { className: "text-xs leading-none", children: props.posture.label })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "text-[10px] leading-none text-muted-foreground/60", children: props.brand.supportCopy })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs tabular-nums text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("span", { className: props.counts.active > 0 ? "font-semibold" : "", children: [
+          "now ",
+          props.counts.active > 0 ? /* @__PURE__ */ jsx(Accent, { children: props.counts.active }) : props.counts.active
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: props.counts.queued > 0 ? "font-semibold" : "", children: [
+          "next ",
+          props.counts.queued > 0 ? /* @__PURE__ */ jsx(Accent, { children: props.counts.queued }) : props.counts.queued
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: props.counts.ambient > 0 ? "font-semibold" : "", children: [
+          "ambient ",
+          props.counts.ambient > 0 ? /* @__PURE__ */ jsx(Accent, { children: props.counts.ambient }) : props.counts.ambient
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { height: "1.25rem" }, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("div", { className: "px-4 pb-5 sm:px-6", children: !frame ? /* @__PURE__ */ jsx(QuietNow, {}) : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: "Now" }),
+        /* @__PURE__ */ jsx("span", { className: "normal-case tracking-normal", style: { opacity: 0.6 }, children: sourceLabel(frame) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold leading-snug text-foreground", children: renderTitle(frame) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Badge, { className: toneBadgeStyle(frame).className, style: toneBadgeStyle(frame).style, children: urgencyLabel(frame) }),
+        /* @__PURE__ */ jsx(Badge, { className: "border-border bg-secondary text-foreground/80", children: riskLabel(frame) }),
+        /* @__PURE__ */ jsx(Badge, { className: "border-border bg-secondary text-muted-foreground", children: modeLabel(frame) }),
+        isBudgetOverride(frame) ? /* @__PURE__ */ jsx(Badge, { className: "border-transparent text-white", style: ACCENT_BG_STYLE, children: "budget stop" }) : null,
+        /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsx(
+          FrameActions,
+          {
+            frame,
+            lane: "active",
+            pendingId: props.pendingId,
+            onApprove: props.onApprove,
+            onReject: props.onReject,
+            onRequestRevision: props.onRequestRevision,
+            onAcknowledge: props.onAcknowledge,
+            onDismiss: props.onDismiss
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pb-1", children: [
+        /* @__PURE__ */ jsx(Accent, { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setDetailsOpen(!detailsOpen),
+            className: "flex items-center gap-1.5 text-xs font-medium transition-opacity hover:opacity-100",
+            style: { color: "inherit" },
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 16 16",
+                  className: cn("h-3 w-3 transition-transform", detailsOpen && "rotate-90"),
+                  fill: "currentColor",
+                  children: /* @__PURE__ */ jsx("path", { d: "M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" })
+                }
+              ),
+              detailsOpen ? "Hide details" : "Show details"
+            ]
+          }
+        ) }),
+        itemHref(frame, props.companyPrefix) ? /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: itemHref(frame, props.companyPrefix),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "flex items-center gap-1 text-xs font-medium text-muted-foreground transition-opacity hover:text-foreground",
+            children: [
+              "Open in Paperclip",
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", className: "h-3 w-3", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+                /* @__PURE__ */ jsx("path", { d: "M6.5 3.5h-3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-3" }),
+                /* @__PURE__ */ jsx("path", { d: "M8.5 1.5h6v6" }),
+                /* @__PURE__ */ jsx("path", { d: "M14.5 1.5l-7 7" })
+              ] })
+            ]
+          }
+        ) : null
+      ] }),
+      detailsOpen ? /* @__PURE__ */ jsx(NowDetails, { frame, snapshotUpdatedAt: props.snapshot.updatedAt, companyPrefix: props.companyPrefix }) : null
+    ] }) })
+  ] });
+}
+function NextRow(props) {
+  const { frame } = props;
+  const [expanded, setExpanded] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-border/80 last:border-b-0", style: expanded ? { borderLeftWidth: 2, borderLeftColor: ACCENT_COLOR } : void 0, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(!expanded),
+        className: "flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent/50 sm:px-6",
+        children: [
+          /* @__PURE__ */ jsx(Accent, { className: "w-5 shrink-0 text-xs font-medium tabular-nums", children: String(props.rank).padStart(2, "0") }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: renderTitle(frame) }),
+          isBudgetOverride(frame) ? /* @__PURE__ */ jsx(Badge, { className: "border-transparent shrink-0 text-white", style: ACCENT_BG_STYLE, children: "budget" }) : null,
+          /* @__PURE__ */ jsx(Badge, { className: cn("shrink-0", toneBadgeStyle(frame).className), style: toneBadgeStyle(frame).style, children: urgencyLabel(frame) }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", style: { opacity: 0.7 }, children: formatRelativeTime(frameUpdatedAt(frame, props.snapshotUpdatedAt)) }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: "0 0 16 16",
+              className: cn("h-3 w-3 shrink-0 text-muted-foreground transition-transform", expanded && "rotate-90"),
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx("path", { d: "M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" })
+            }
+          )
+        ]
+      }
+    ),
+    expanded ? /* @__PURE__ */ jsxs("div", { className: "space-y-3 px-4 pb-3 pl-12 sm:px-6 sm:pl-14", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: frame.summary ?? judgmentLine(frame, "queued") }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: riskLabel(frame) }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "updated ",
+          formatRelativeTime(frameUpdatedAt(frame, props.snapshotUpdatedAt))
+        ] }),
+        itemHref(frame, props.companyPrefix) ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: itemHref(frame, props.companyPrefix),
+            className: "font-medium underline underline-offset-2 hover:text-foreground",
+            children: "View in Paperclip"
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx(
+        FrameActions,
+        {
+          frame,
+          lane: "queued",
+          pendingId: props.pendingId,
+          onApprove: props.onApprove,
+          onReject: props.onReject,
+          onRequestRevision: props.onRequestRevision,
+          onAcknowledge: props.onAcknowledge,
+          onDismiss: props.onDismiss
+        }
+      )
+    ] }) : null
+  ] });
+}
+function NextLane(props) {
+  return /* @__PURE__ */ jsxs("section", { className: "border border-border/80 bg-card", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-border/80 px-4 py-2.5 sm:px-6", children: /* @__PURE__ */ jsx("h2", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Next" }) }),
+    props.rows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-4 text-sm text-muted-foreground sm:px-6", style: { opacity: 0.7 }, children: "Nothing is staged behind the current focus." }) : props.rows.map((row, i) => /* @__PURE__ */ jsx(
+      NextRow,
+      {
+        rank: i + 1,
+        frame: row.frame,
+        snapshotUpdatedAt: props.snapshotUpdatedAt,
+        companyPrefix: props.companyPrefix,
+        pendingId: props.pendingId,
+        onApprove: props.onApprove,
+        onReject: props.onReject,
+        onRequestRevision: props.onRequestRevision,
+        onAcknowledge: props.onAcknowledge,
+        onDismiss: props.onDismiss
+      },
+      row.frame.id
+    ))
+  ] });
+}
+function AmbientRow(props) {
+  const { frame, snapshotUpdatedAt } = props;
+  const [expanded, setExpanded] = useState(false);
+  const href = itemHref(frame, props.companyPrefix);
+  return /* @__PURE__ */ jsxs("div", { style: { borderBottomWidth: 1, borderBottomColor: "var(--border)", opacity: 0.7 }, className: "last:border-b-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(!expanded),
+        className: "flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-accent/50 sm:px-6",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-muted-foreground", children: renderTitle(frame) }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", style: { opacity: 0.6 }, children: sourceLabel(frame) }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", style: { opacity: 0.5 }, children: formatRelativeTime(frameUpdatedAt(frame, snapshotUpdatedAt)) }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: "0 0 16 16",
+              className: cn("h-3 w-3 shrink-0 text-muted-foreground transition-transform", expanded && "rotate-90"),
+              fill: "currentColor",
+              style: { opacity: 0.4 },
+              children: /* @__PURE__ */ jsx("path", { d: "M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" })
+            }
+          )
+        ]
+      }
+    ),
+    expanded ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 pb-3 sm:px-6", children: [
+      href ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          className: "text-xs font-medium underline underline-offset-2 text-muted-foreground hover:text-foreground",
+          children: "View in Paperclip"
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            label: props.pendingId === frame.id ? "Saving\u2026" : "Acknowledge",
+            tone: "secondary",
+            disabled: props.pendingId === frame.id,
+            onClick: () => void props.onAcknowledge(frame)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            label: "Dismiss",
+            tone: "secondary",
+            disabled: props.pendingId === frame.id,
+            onClick: () => void props.onDismiss(frame)
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+}
+function AmbientLane(props) {
+  return /* @__PURE__ */ jsxs("section", { style: { borderWidth: 1, borderColor: "var(--border)", opacity: 0.85 }, className: "bg-card", children: [
+    /* @__PURE__ */ jsx("div", { style: { borderBottomWidth: 1, borderBottomColor: "var(--border)" }, className: "px-4 py-2.5 sm:px-6", children: /* @__PURE__ */ jsx("h2", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", style: { opacity: 0.6 }, children: "Ambient" }) }),
+    props.rows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-4 text-sm text-muted-foreground sm:px-6", style: { opacity: 0.4 }, children: "Nothing in peripheral view." }) : props.rows.map((row) => /* @__PURE__ */ jsx(
+      AmbientRow,
+      {
+        frame: row.frame,
+        snapshotUpdatedAt: props.snapshotUpdatedAt,
+        companyPrefix: props.companyPrefix,
+        pendingId: props.pendingId,
+        onAcknowledge: props.onAcknowledge,
+        onDismiss: props.onDismiss
+      },
+      row.frame.id
+    ))
+  ] });
+}
+function DashboardWidget(props) {
+  const companyId = props.context.companyId;
+  const brand = currentSurfaceBrand();
+  const summaryQuery = usePluginData("attention-summary", { companyId });
+  const approvalsQuery = usePendingApprovals(companyId);
+  useAttentionPolling(companyId, [summaryQuery.refresh, approvalsQuery.refresh]);
+  const merged = useMemo(
+    () => companyId ? mergeSnapshotWithApprovals(summaryQuery.data, companyId, approvalsQuery.data) : null,
+    [summaryQuery.data, approvalsQuery.data, companyId]
+  );
+  const loading = summaryQuery.loading || approvalsQuery.loading;
+  const error = summaryQuery.error ?? approvalsQuery.error;
+  const data = merged;
+  if (!companyId) return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card p-4 shadow-sm text-sm text-muted-foreground", children: [
+    "Open a company to see ",
+    brand.wordmark,
+    "."
+  ] });
+  if (loading) return /* @__PURE__ */ jsx("div", { className: "border border-border bg-card p-4 shadow-sm text-sm text-muted-foreground", children: brand.loadingLabel });
+  if (error) return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card p-4 shadow-sm text-sm text-muted-foreground", children: [
+    "Plugin error: ",
+    error.message
+  ] });
+  if (!data) return /* @__PURE__ */ jsx("div", { className: "border border-border bg-card p-4 shadow-sm text-sm text-muted-foreground", children: brand.headingEmptyState });
+  const posture = postureForSnapshot(data);
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card px-4 py-2.5 shadow-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx(Accent, { className: "pt-0.5 text-sm", children: posture.glyph }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+          /* @__PURE__ */ jsx(Accent, { className: "font-semibold tracking-[0.04em]", children: brand.wordmark }),
+          /* @__PURE__ */ jsx(Accent, { className: "text-[11px]", children: posture.label })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[10px] leading-none text-muted-foreground/60", children: brand.supportCopy })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "ml-auto tabular-nums text-muted-foreground", children: [
+        "now ",
+        data.counts.active,
+        " \xB7 next ",
+        data.counts.queued,
+        " \xB7 ambient ",
+        data.counts.ambient
+      ] })
+    ] }),
+    data.active ? /* @__PURE__ */ jsx("div", { className: "mt-2 truncate text-sm font-medium text-foreground", children: data.active.title }) : /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm text-muted-foreground", children: "No active interruption right now." })
+  ] });
+}
+function AttentionSidebarLink({ context }) {
+  const companyId = context.companyId;
+  const brand = currentSurfaceBrand();
+  const href = pluginPagePath(context.companyPrefix);
+  const isActive = typeof window !== "undefined" && window.location.pathname === href;
+  const summaryQuery = usePluginData("attention-summary", { companyId });
+  const approvalsQuery = usePendingApprovals(companyId);
+  useAttentionPolling(companyId, [summaryQuery.refresh, approvalsQuery.refresh]);
+  const merged = useMemo(
+    () => companyId ? mergeSnapshotWithApprovals(summaryQuery.data, companyId, approvalsQuery.data) : null,
+    [summaryQuery.data, approvalsQuery.data, companyId]
+  );
+  const actionable = merged ? actionableCount(merged) : 0;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      "aria-current": isActive ? "page" : void 0,
+      className: cn(
+        "flex items-center gap-2.5 px-3 py-2 text-[13px] font-medium transition-colors",
+        isActive ? "bg-accent text-foreground" : "text-foreground/80 hover:bg-accent/50 hover:text-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "relative shrink-0", "aria-hidden": "true", children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            className: "h-4 w-4",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.9",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+              /* @__PURE__ */ jsx("path", { d: "m14.3 8 5.2 9" }),
+              /* @__PURE__ */ jsx("path", { d: "M9.7 8h10.4" }),
+              /* @__PURE__ */ jsx("path", { d: "m7.4 12 5.2-9" }),
+              /* @__PURE__ */ jsx("path", { d: "m9.7 16-5.2-9" }),
+              /* @__PURE__ */ jsx("path", { d: "M14.3 16H3.9" }),
+              /* @__PURE__ */ jsx("path", { d: "m16.6 12-5.2 9" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: brand.wordmark }),
+        actionable > 0 ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center rounded-full px-1.5 py-0.5 text-xs leading-none font-medium text-white", style: ACCENT_BG_STYLE, children: actionable }) : null
+      ]
+    }
+  );
+}
+function AttentionPage(props) {
+  const companyId = props.context.companyId;
+  const brand = currentSurfaceBrand();
+  const summaryQuery = usePluginData("attention-summary", { companyId });
+  const approvalsQuery = usePendingApprovals(companyId);
+  useAttentionPolling(companyId, [summaryQuery.refresh, approvalsQuery.refresh]);
+  const snapshot = useMemo(
+    () => companyId ? mergeSnapshotWithApprovals(summaryQuery.data, companyId, approvalsQuery.data) : null,
+    [summaryQuery.data, approvalsQuery.data, companyId]
+  );
+  const loading = summaryQuery.loading || approvalsQuery.loading;
+  const error = summaryQuery.error ?? approvalsQuery.error;
+  const refresh = summaryQuery.refresh;
+  const acknowledge = usePluginAction("acknowledge-frame");
+  const dismiss = usePluginAction("dismiss-frame");
+  const [pendingId, setPendingId] = useState(null);
+  const [statusOverride, setStatusOverride] = useState(null);
+  useEffect(() => {
+    if (!statusOverride) return;
+    const timer = window.setTimeout(() => {
+      setStatusOverride(null);
+    }, 4e3);
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [statusOverride]);
+  const posture = useMemo(() => snapshot ? postureForSnapshot(snapshot) : null, [snapshot]);
+  const nextRows = useMemo(
+    () => snapshot ? snapshot.queued.map((frame) => ({ frame, lane: "queued" })) : [],
+    [snapshot]
+  );
+  const ambientRows = useMemo(
+    () => snapshot ? snapshot.ambient.map((frame) => ({ frame, lane: "ambient" })) : [],
+    [snapshot]
+  );
+  function nudgeRefresh() {
+    refresh();
+    approvalsQuery.refresh();
+    window.setTimeout(() => refresh(), 500);
+    window.setTimeout(() => approvalsQuery.refresh(), 500);
+  }
+  async function acknowledgeFrame(frame) {
+    setPendingId(frame.id);
+    try {
+      await acknowledge({ companyId, taskId: frame.taskId, interactionId: frame.interactionId });
+      setStatusOverride(`Acknowledged ${compactTitle(frame)}.`);
+      nudgeRefresh();
+    } catch (actionError) {
+      setStatusOverride(actionError instanceof Error ? actionError.message : "Failed to acknowledge frame.");
+    } finally {
+      setPendingId(null);
+    }
+  }
+  async function dismissFrame(frame) {
+    setPendingId(frame.id);
+    try {
+      await dismiss({ companyId, taskId: frame.taskId, interactionId: frame.interactionId });
+      setStatusOverride(`Dismissed ${compactTitle(frame)}.`);
+      nudgeRefresh();
+    } catch (actionError) {
+      setStatusOverride(actionError instanceof Error ? actionError.message : "Failed to dismiss frame.");
+    } finally {
+      setPendingId(null);
+    }
+  }
+  async function submitApprovalDecision(frame, decision) {
+    const approvalId = approvalIdForFrame(frame);
+    if (!approvalId) {
+      setStatusOverride("This frame is not backed by a Paperclip approval.");
+      return;
+    }
+    setPendingId(frame.id);
+    try {
+      const actionPath = decision === "approve" ? "approve" : "reject";
+      const response = await window.fetch(`/api/approvals/${approvalId}/${actionPath}`, {
+        method: "POST",
+        credentials: "same-origin",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({})
+      });
+      if (!response.ok) {
+        throw new Error(`Approval ${actionPath} failed (${response.status}).`);
+      }
+      setStatusOverride(`${decision === "approve" ? "Approved" : "Rejected"} ${compactTitle(frame)}.`);
+      nudgeRefresh();
+    } catch (actionError) {
+      setStatusOverride(actionError instanceof Error ? actionError.message : "Failed to submit approval decision.");
+    } finally {
+      setPendingId(null);
+    }
+  }
+  async function requestApprovalRevision(frame) {
+    const approvalId = approvalIdForFrame(frame);
+    if (!approvalId) {
+      setStatusOverride("This frame is not backed by a Paperclip approval.");
+      return;
+    }
+    setPendingId(frame.id);
+    try {
+      const response = await window.fetch(`/api/approvals/${approvalId}/request-revision`, {
+        method: "POST",
+        credentials: "same-origin",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({})
+      });
+      if (!response.ok) {
+        throw new Error(`Approval request-revision failed (${response.status}).`);
+      }
+      setStatusOverride(`Requested revision for ${compactTitle(frame)}.`);
+      nudgeRefresh();
+    } catch (actionError) {
+      setStatusOverride(actionError instanceof Error ? actionError.message : "Failed to request approval revision.");
+    } finally {
+      setPendingId(null);
+    }
+  }
+  if (!companyId) return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card p-4 shadow-sm text-sm text-muted-foreground", children: [
+    "Select a company to open ",
+    brand.wordmark,
+    "."
+  ] });
+  if (!snapshot && loading) return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card p-4 shadow-sm text-sm text-muted-foreground", children: [
+    "Loading attention center",
+    "\u2026"
+  ] });
+  if (!snapshot && error) return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card p-4 shadow-sm text-sm text-muted-foreground", children: [
+    "Plugin error: ",
+    error.message
+  ] });
+  if (!snapshot || !posture) return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card p-4 shadow-sm text-sm text-muted-foreground", children: [
+    "No ",
+    brand.key === "focus" ? "focus" : "attention",
+    " state has been captured for this company yet."
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+    /* @__PURE__ */ jsx(
+      NowPane,
+      {
+        snapshot,
+        posture,
+        brand,
+        companyPrefix: props.context.companyPrefix,
+        counts: snapshot.counts,
+        pendingId,
+        onApprove: (frame) => submitApprovalDecision(frame, "approve"),
+        onReject: (frame) => submitApprovalDecision(frame, "reject"),
+        onRequestRevision: requestApprovalRevision,
+        onAcknowledge: acknowledgeFrame,
+        onDismiss: dismissFrame
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NextLane,
+      {
+        rows: nextRows,
+        snapshotUpdatedAt: snapshot.updatedAt,
+        companyPrefix: props.context.companyPrefix,
+        pendingId,
+        onApprove: (frame) => submitApprovalDecision(frame, "approve"),
+        onReject: (frame) => submitApprovalDecision(frame, "reject"),
+        onRequestRevision: requestApprovalRevision,
+        onAcknowledge: acknowledgeFrame,
+        onDismiss: dismissFrame
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AmbientLane,
+      {
+        rows: ambientRows,
+        snapshotUpdatedAt: snapshot.updatedAt,
+        companyPrefix: props.context.companyPrefix,
+        pendingId,
+        onAcknowledge: acknowledgeFrame,
+        onDismiss: dismissFrame
+      }
+    )
+  ] });
+}
+export {
+  AttentionPage,
+  AttentionSidebarLink,
+  DashboardWidget
+};
+//# sourceMappingURL=index.js.map