@tomismeta/paperclip-aperture 0.4.1 → 0.4.2

package/dist/ui/index.js

@@ -1,10 +1,5 @@
 // src/ui/index.tsx
-import {
-  usePluginAction,
-  usePluginData,
-  usePluginStream
-} from "@paperclipai/plugin-sdk/ui";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef5, useState as useState5 } from "react";
 
 // src/aperture/frame-model.ts
 var AMBIENT_MAX_AGE_MS = 5 * 60 * 1e3;
@@ -14,227 +9,6 @@ function isBudgetOverride(frame) {
 function frameUpdatedAt(frame, snapshotUpdatedAt) {
   return frame.timing.updatedAt || snapshotUpdatedAt;
 }
-function parseIsoMillis(value) {
-  if (!value) return null;
-  const parsed = Date.parse(value);
-  return Number.isFinite(parsed) ? parsed : null;
-}
-function isAmbientExpired(frame, snapshotUpdatedAt, nowIso) {
-  const updatedAt = parseIsoMillis(frameUpdatedAt(frame, snapshotUpdatedAt));
-  const now = parseIsoMillis(nowIso);
-  if (updatedAt === null || now === null) return false;
-  return now - updatedAt > AMBIENT_MAX_AGE_MS;
-}
-function frameSemanticWeight(frame) {
-  const factors = new Set(frame.provenance?.factors ?? []);
-  let weight = 0;
-  if (factors.has("run failed")) weight += 20;
-  if (factors.has("waiting on human")) weight += 16;
-  if (factors.has("needs clarification")) weight += 16;
-  if (factors.has("blocked")) weight += 12;
-  if (factors.has("pending approval")) weight += 12;
-  if (factors.has("paused work")) weight += 6;
-  if (factors.has("comment follow-up")) weight += 4;
-  return weight;
-}
-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 === "now" ? 20 : lane === "next" ? 10 : 0;
-  const budgetWeight = isBudgetOverride(frame) ? 10 : 0;
-  return toneWeight + consequenceWeight + modeWeight + laneWeight + budgetWeight + frameSemanticWeight(frame);
-}
-function emptyLaneCounts() {
-  return {
-    now: 0,
-    next: 0,
-    ambient: 0,
-    total: 0
-  };
-}
-function compareCandidates(left, right, snapshotUpdatedAt) {
-  const byScore = frameSortScore(right.frame, right.lane) - frameSortScore(left.frame, left.lane);
-  if (byScore !== 0) return byScore;
-  return frameUpdatedAt(right.frame, snapshotUpdatedAt).localeCompare(frameUpdatedAt(left.frame, snapshotUpdatedAt));
-}
-function frameReviewState(review, taskId) {
-  return review?.frames[taskId];
-}
-function isFrameSuppressed(frame, snapshotUpdatedAt, review) {
-  const suppressedAt = frameReviewState(review, frame.taskId)?.suppressedAt;
-  if (!suppressedAt) return false;
-  return frameUpdatedAt(frame, snapshotUpdatedAt).localeCompare(suppressedAt) <= 0;
-}
-function isFrameUnread(frame, snapshotUpdatedAt, review) {
-  const updatedAt = frameUpdatedAt(frame, snapshotUpdatedAt);
-  const seenAt = frameReviewState(review, frame.taskId)?.lastSeenAt ?? review?.lastSeenAt;
-  if (!seenAt) return true;
-  return updatedAt.localeCompare(seenAt) > 0;
-}
-function calculateUnreadCounts(snapshot, review) {
-  const unread = emptyLaneCounts();
-  if (snapshot.now && isFrameUnread(snapshot.now, snapshot.updatedAt, review)) unread.now += 1;
-  unread.next = snapshot.next.filter((frame) => isFrameUnread(frame, snapshot.updatedAt, review)).length;
-  unread.ambient = snapshot.ambient.filter((frame) => isFrameUnread(frame, snapshot.updatedAt, review)).length;
-  unread.total = unread.now + unread.next + unread.ambient;
-  return unread;
-}
-function attachReviewState(snapshot, review) {
-  return {
-    ...snapshot,
-    review: {
-      lastSeenAt: review?.lastSeenAt,
-      unread: calculateUnreadCounts(snapshot, review)
-    }
-  };
-}
-function mergeStoredFrames(snapshot, companyId, candidates, review, nowIso = (/* @__PURE__ */ new Date()).toISOString()) {
-  const base = snapshot ?? {
-    companyId,
-    updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
-    now: null,
-    next: [],
-    ambient: [],
-    counts: emptyLaneCounts()
-  };
-  const candidateTaskIds = new Set(candidates.map((candidate) => candidate.frame.taskId));
-  const baseEntries = [
-    ...base.now ? [{ frame: base.now, lane: "now" }] : [],
-    ...base.next.map((frame) => ({ frame, lane: "next" })),
-    ...base.ambient.map((frame) => ({ frame, lane: "ambient" }))
-  ].filter((candidate) => !candidateTaskIds.has(candidate.frame.taskId));
-  const filtered = [...baseEntries, ...candidates].filter((candidate) => !isFrameSuppressed(candidate.frame, base.updatedAt, review));
-  const actionable = filtered.filter((candidate) => candidate.lane !== "ambient").sort((left, right) => compareCandidates(left, right, base.updatedAt));
-  const ambient = filtered.filter((candidate) => candidate.lane === "ambient").filter((candidate) => !isAmbientExpired(candidate.frame, base.updatedAt, nowIso)).sort((left, right) => compareCandidates(left, right, base.updatedAt));
-  const now = actionable.shift()?.frame ?? null;
-  const next = actionable.map((candidate) => candidate.frame);
-  const ambientFrames = ambient.map((candidate) => candidate.frame);
-  return attachReviewState({
-    ...base,
-    now,
-    next,
-    ambient: ambientFrames,
-    counts: {
-      now: now ? 1 : 0,
-      next: next.length,
-      ambient: ambientFrames.length,
-      total: (now ? 1 : 0) + next.length + ambientFrames.length
-    }
-  }, review);
-}
-
-// src/aperture/explainability.ts
-function asRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value) ? value : null;
-}
-function readStringArray(value) {
-  if (!Array.isArray(value)) return [];
-  return value.filter((entry) => typeof entry === "string" && entry.trim().length > 0);
-}
-function readSemanticConfidence(frame) {
-  const semantic = asRecord(frame.metadata?.semantic);
-  const confidence = semantic?.confidence;
-  return confidence === "low" || confidence === "medium" || confidence === "high" ? confidence : null;
-}
-function readSemanticRelationHints(frame) {
-  const semantic = asRecord(frame.metadata?.semantic);
-  const relationHints = semantic?.relationHints;
-  if (!Array.isArray(relationHints)) return [];
-  return relationHints.filter((entry) => {
-    if (typeof entry !== "object" || entry === null) return false;
-    const hint = entry;
-    return hint.kind === "same_issue" || hint.kind === "resolves" || hint.kind === "supersedes" || hint.kind === "repeats" || hint.kind === "escalates";
-  });
-}
-function relationHintLabel(hint) {
-  switch (hint.kind) {
-    case "same_issue":
-      return "Part of the same thread";
-    case "resolves":
-      return "Resolves an earlier blocker";
-    case "supersedes":
-      return "Moves the request forward";
-    case "repeats":
-      return "Repeats an earlier ask";
-    case "escalates":
-      return "Raises the urgency";
-  }
-}
-function laneReason(lane) {
-  switch (lane) {
-    case "now":
-      return "This is the most urgent item in the queue right now.";
-    case "next":
-      return "This is staged behind the current top item.";
-    case "ambient":
-      return "This is visible for awareness without needing action yet.";
-  }
-}
-function continuitySummary(frame) {
-  const episode = asRecord(frame.metadata?.episode);
-  const size = typeof episode?.size === "number" ? episode.size : null;
-  const state = typeof episode?.state === "string" ? episode.state.replace(/_/g, " ") : null;
-  if (!size || size <= 1) return null;
-  if (state) return `Part of a ${state} thread with ${size} related interactions.`;
-  return `Part of a thread with ${size} related interactions.`;
-}
-function frameSignals(frame) {
-  const attention = asRecord(frame.metadata?.attention);
-  const rationale = readStringArray(attention?.rationale);
-  const factors = readStringArray(frame.provenance?.factors);
-  return [.../* @__PURE__ */ new Set([...rationale.length > 0 ? rationale : factors, ...factors])];
-}
-function signalStrengthLabel(confidence) {
-  return `${confidence} confidence`;
-}
-function explainFrame(frame, lane) {
-  const relationLabels = [...new Set(readSemanticRelationHints(frame).map(relationHintLabel))];
-  return {
-    whyNow: frame.provenance?.whyNow ?? frame.summary ?? null,
-    laneReason: laneReason(lane),
-    signalStrength: readSemanticConfidence(frame),
-    signals: frameSignals(frame),
-    relationLabels,
-    continuity: continuitySummary(frame)
-  };
-}
-
-// src/aperture/attention-context.ts
-var ATTENTION_CONTEXT_IDS = {
-  approvalType: "approval-type",
-  requestedAmount: "requested-amount",
-  budgetReason: "budget-reason",
-  decisionContext: "decision-context",
-  linkedIssues: "linked-issues",
-  needsActionFrom: "needs-action-from",
-  blocksTarget: "blocks-target",
-  recommendedMove: "recommended-move",
-  issueStatus: "issue-status",
-  issuePriority: "issue-priority",
-  latestComment: "latest-comment",
-  agentStatus: "agent-status",
-  pauseReason: "pause-reason",
-  agentTitle: "agent-title"
-};
-function item(id, label, value) {
-  return { id, label, value };
-}
-function humanizeToken(value) {
-  return value.split(/[_\-.]/g).filter(Boolean).map((part) => part.slice(0, 1).toUpperCase() + part.slice(1)).join(" ");
-}
-function approvalTypeItem(value) {
-  return item(ATTENTION_CONTEXT_IDS.approvalType, "Type", value);
-}
-function requestedAmountItem(value) {
-  return item(ATTENTION_CONTEXT_IDS.requestedAmount, "Requested amount", value);
-}
-function budgetReasonItem(value) {
-  return item(ATTENTION_CONTEXT_IDS.budgetReason, "Reason", value);
-}
-function decisionContextItem(value) {
-  return item(ATTENTION_CONTEXT_IDS.decisionContext, "Decision context", value);
-}
 
 // src/aperture/attention-language.ts
 var GENERIC_QUEUED_JUDGMENT = "Important enough to keep visible, but not enough to displace now.";
@@ -242,9 +16,6 @@ var GENERIC_NEXT_JUDGMENT = GENERIC_QUEUED_JUDGMENT;
 function approvalBlockingSummary(budgetOverride) {
   return budgetOverride ? "Budget controls are blocking work until a board decision lands." : "A board decision is blocking work in Paperclip.";
 }
-function approvalBlockingWhyNow(budgetOverride) {
-  return budgetOverride ? "Budget controls are blocking work until a board decision lands." : "Paperclip is waiting on a human approval before work can continue.";
-}
 function genericJudgmentLine(frame, lane) {
   if (lane === "now") {
     if (isBudgetOverride(frame)) return approvalBlockingSummary(true);
@@ -257,170 +28,15 @@ function genericJudgmentLine(frame, lane) {
   return "Useful for awareness, but not interrupting.";
 }
 
-// src/aperture/types.ts
-function createEmptySnapshot(companyId) {
-  return {
-    companyId,
-    updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
-    now: null,
-    next: [],
-    ambient: [],
-    counts: {
-      now: 0,
-      next: 0,
-      ambient: 0,
-      total: 0
-    }
-  };
-}
-
-// src/aperture/approval-frames.ts
-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 : approvalBlockingSummary(budgetOverride);
-  const updatedAt = record.updatedAt ?? record.createdAt;
-  const provenance = {
-    whyNow: approvalBlockingWhyNow(budgetOverride),
-    factors: budgetOverride ? ["budget stop", "approval", "operator decision"] : ["approval", "operator decision"]
-  };
-  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: [
-        {
-          ...approvalTypeItem(humanizeToken(record.type))
-        },
-        ...requestedAmount2 ? [requestedAmountItem(requestedAmount2)] : [],
-        ...reason ? [budgetReasonItem(reason)] : [],
-        ...decisionContext ? [decisionContextItem(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,
-    timing: {
-      createdAt: record.createdAt,
-      updatedAt
-    },
-    metadata: {
-      approvalStatus: record.status,
-      approvalType: record.type,
-      attention: {
-        rationale: provenance.factors
-      },
-      semantic: {
-        confidence: "high"
-      }
-    }
-  };
-}
-function mergeSnapshotWithApprovals(snapshot, companyId, approvals, review) {
-  const approvalFrames = actionableApprovalRecords(approvals).map(approvalRecordToFrame);
-  const base = snapshot ?? createEmptySnapshot(companyId);
-  const merged = mergeStoredFrames(base, companyId, [
-    ...approvalFrames.map((frame, index) => ({ frame, lane: index === 0 ? "now" : "next" }))
-  ], review);
-  return merged;
-}
-
-// src/aperture/issue-intelligence.ts
-function issueBlocksTargetLine(target) {
-  return `Blocks ${target} until the review lands.`;
-}
-function issueNeedsActionFromLine(owner) {
-  return `Needs action from ${owner}.`;
-}
-
-// src/ui/interaction-copy.ts
-function actionErrorMessage(error, fallback) {
-  return error instanceof Error ? error.message : fallback;
-}
-function acknowledgeSuccessMessage(title) {
-  return `Acknowledged ${title}.`;
-}
-function acknowledgeFailureMessage(error) {
-  return actionErrorMessage(error, "Failed to acknowledge frame.");
-}
-function issueFrameUnsupportedMessage() {
-  return "This frame is not backed by a Paperclip issue.";
-}
-function commentSuccessMessage(title) {
-  return `Posted a comment on ${title}.`;
-}
-function commentFailureMessage(error) {
-  return actionErrorMessage(error, "Failed to post comment.");
-}
-function approvalFrameUnsupportedMessage() {
-  return "This frame is not backed by a Paperclip approval.";
-}
-function approvalDecisionSuccessMessage(title, decision) {
-  return `${decision === "approve" ? "Approved" : "Rejected"} ${title}.`;
-}
-function approvalDecisionFailureMessage(error) {
-  return actionErrorMessage(error, "Failed to submit approval decision.");
-}
-function approvalRevisionSuccessMessage(title) {
-  return `Requested revision for ${title}.`;
-}
-function approvalRevisionFailureMessage(error) {
-  return actionErrorMessage(error, "Failed to request approval revision.");
-}
-
-// src/ui/index.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/ui/chrome.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ACCENT_COLOR = "#007ACC";
 var ACCENT_BG = `${ACCENT_COLOR}14`;
 var ACCENT_BORDER = `${ACCENT_COLOR}33`;
 var ACCENT_BG_STYLE = { backgroundColor: ACCENT_COLOR };
-var ATTENTION_UPDATES_STREAM = "attention-updates";
-function currentSurfaceBrand() {
-  return {
-    key: "focus",
-    wordmark: "Focus",
-    headingEmptyState: "No focus state yet.",
-    loadingLabel: "Loading Focus\u2026"
-  };
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
 }
 function useAccentColor() {
   const ref = useRef(null);
@@ -456,259 +72,40 @@ function useWideLayout(minWidth = 1024) {
   }, [minWidth]);
   return matches;
 }
-function cn(...parts) {
-  return parts.filter(Boolean).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 item2 = frame.context?.items?.find((entry) => entry.id === id);
-  return typeof item2?.value === "string" && item2.value.trim().length > 0 ? item2.value : void 0;
-}
-function requestedAmount(frame) {
-  return contextValue(frame, ATTENTION_CONTEXT_IDS.requestedAmount);
-}
-function budgetReason(frame) {
-  return contextValue(frame, ATTENTION_CONTEXT_IDS.budgetReason);
+function UnreadDot(props) {
+  const tone = props.tone ?? "default";
+  if (!props.visible && !props.reserveSpace) return null;
+  const style = props.visible ? tone === "muted" ? { backgroundColor: ACCENT_BORDER } : ACCENT_BG_STYLE : { backgroundColor: "transparent" };
+  return /* @__PURE__ */ jsx("span", { className: "inline-block h-2 w-2 rounded-full shrink-0", style, "aria-label": props.visible ? "Unread attention item" : void 0 });
 }
-function recommendedMoveValue(frame) {
-  return contextValue(frame, ATTENTION_CONTEXT_IDS.recommendedMove);
+function ExternalLinkIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", className: "h-3 w-3", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", 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" })
+  ] });
 }
-function actionOwnerValue(frame) {
-  return contextValue(frame, ATTENTION_CONTEXT_IDS.needsActionFrom);
+function SkeletonLine(props) {
+  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded bg-secondary/80", props.className), "aria-hidden": "true" });
 }
-function blockingTargetValue(frame) {
-  return contextValue(frame, ATTENTION_CONTEXT_IDS.blocksTarget);
+function MessageCard(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card p-4 shadow-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("text-sm font-medium", props.accent && "text-foreground"), children: props.title }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: props.body })
+  ] });
 }
-function impactLabel(frame) {
-  return `${frame.consequence} impact`;
-}
-function operatorDriverLabel(value) {
-  switch (value) {
-    case "in_review":
-      return "review required";
-    case "pending_approval":
-      return "approval required";
-    default:
-      return value.replace(/_/g, " ");
-  }
-}
-function driverLabel(frame) {
-  if (isBudgetOverride(frame)) return "budget stop";
-  const issueStatus = frame.metadata?.issueStatus;
-  if (typeof issueStatus === "string" && issueStatus.trim().length > 0) {
-    return operatorDriverLabel(issueStatus);
-  }
-  const pauseReason = frame.metadata?.pauseReason;
-  if (typeof pauseReason === "string" && pauseReason.trim().length > 0) {
-    return operatorDriverLabel(pauseReason);
-  }
-  const agentStatus = frame.metadata?.agentStatus;
-  if (typeof agentStatus === "string" && agentStatus.trim().length > 0) {
-    return operatorDriverLabel(agentStatus);
-  }
-  return null;
-}
-function driverBadgeStyle() {
-  return {
-    className: "border-transparent",
-    style: { color: ACCENT_COLOR, backgroundColor: ACCENT_BG, borderColor: ACCENT_BORDER }
-  };
-}
-function requestDescriptor(frame) {
-  const driver = driverLabel(frame);
-  return driver ? `${sourceLabel(frame)} \xB7 ${driver}` : sourceLabel(frame);
-}
-function postureForSnapshot(snapshot) {
-  const current = snapshot.now;
-  if (current?.tone === "critical" || current?.consequence === "high" || snapshot.counts.now + snapshot.counts.next >= 3) {
-    return { glyph: "\u25CF", label: "busy" };
-  }
-  if (snapshot.counts.now > 0 || snapshot.counts.next > 0 || snapshot.counts.ambient > 0) {
-    return { glyph: "\u25D0", label: "elevated" };
-  }
-  return { glyph: "\u25CB", label: "calm" };
-}
-function actionableCount(snapshot) {
-  return (snapshot.now ? 1 : 0) + snapshot.next.length;
-}
-function actionableLabel(snapshot) {
-  const actionable = actionableCount(snapshot);
-  return actionable > 0 ? `${actionable} action${actionable === 1 ? "" : "s"}` : null;
-}
-function judgmentLine(frame, lane) {
-  if (frame.provenance?.whyNow) return frame.provenance.whyNow;
-  return genericJudgmentLine(frame, lane);
-}
-function nextPrimaryText(frame) {
-  const recommendedMove = recommendedMoveValue(frame);
-  if (recommendedMove) return recommendedMove;
-  const summary = frame.summary?.trim();
-  if (summary) return summary;
-  const fallback = judgmentLine(frame, "next");
-  return fallback === GENERIC_QUEUED_JUDGMENT ? null : fallback;
-}
-function supportingLine(frame, lane) {
-  const owner = actionOwnerValue(frame);
-  const target = blockingTargetValue(frame);
-  if (target && lane === "now" && entityTypeFromFrame(frame) === "issue" && driverLabel(frame) === "review required") {
-    return issueBlocksTargetLine(target);
-  }
-  if (owner && lane === "now" && entityTypeFromFrame(frame) === "issue") {
-    return issueNeedsActionFromLine(owner);
-  }
-  if (lane === "now") {
-    const recommendedMove = recommendedMoveValue(frame)?.trim();
-    const summary = frame.summary?.trim();
-    const judgment2 = judgmentLine(frame, lane).trim();
-    if (recommendedMove && summary && summary !== recommendedMove && summary !== judgment2) {
-      return summary;
-    }
-    return null;
-  }
-  const judgment = judgmentLine(frame, lane);
-  return judgment.trim().length > 0 ? judgment : null;
-}
-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 activityHref(frame, companyPrefix) {
-  if (!companyPrefix) return null;
-  return frame.metadata?.activityPath ? `/${companyPrefix}/${frame.metadata.activityPath}` : null;
-}
-function primaryLinkLabel(frame) {
-  const entityType = entityTypeFromFrame(frame);
-  switch (entityType) {
-    case "approval":
-      return "Open approval";
-    case "issue":
-      return "Open issue";
-    case "run":
-      return "Open run";
-    case "agent":
-      return "Open agent";
-    default:
-      return "Open in Paperclip";
-  }
-}
-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 unreadCount(snapshot) {
-  return snapshot?.review?.unread.total ?? 0;
-}
-function applyLocalSuppressions(snapshot, suppressedAtByTaskId) {
-  if (!snapshot || Object.keys(suppressedAtByTaskId).length === 0) return snapshot;
-  const keepFrame = (frame) => {
-    const suppressedAt = suppressedAtByTaskId[frame.taskId];
-    if (!suppressedAt) return true;
-    return frameUpdatedAt(frame, snapshot.updatedAt).localeCompare(suppressedAt) > 0;
-  };
-  const next = snapshot.next.filter(keepFrame);
-  const ambient = snapshot.ambient.filter(keepFrame);
-  const nowCandidate = snapshot.now && keepFrame(snapshot.now) ? snapshot.now : null;
-  const now = nowCandidate ?? next[0] ?? null;
-  const nextFrames = nowCandidate ? next : next.slice(1);
-  return {
-    ...snapshot,
-    now,
-    next: nextFrames,
-    ambient,
-    counts: {
-      now: now ? 1 : 0,
-      next: nextFrames.length,
-      ambient: ambient.length,
-      total: (now ? 1 : 0) + nextFrames.length + ambient.length
-    }
-  };
-}
-function suppressionMapFromReview(review) {
-  if (!review) return {};
-  return Object.fromEntries(
-    Object.entries(review.frames).filter(([, state]) => typeof state?.suppressedAt === "string" && state.suppressedAt.length > 0).map(([taskId, state]) => [taskId, state.suppressedAt])
-  );
-}
-function isFrameUnreadInSnapshot(frame, snapshot) {
-  const seenAt = snapshot.review?.lastSeenAt;
-  if (!seenAt) return true;
-  return frameUpdatedAt(frame, snapshot.updatedAt).localeCompare(seenAt) > 0;
-}
-function UnreadDot(props) {
-  const tone = props.tone ?? "default";
-  if (!props.visible && !props.reserveSpace) return null;
-  const style = props.visible ? tone === "muted" ? { backgroundColor: ACCENT_BORDER } : ACCENT_BG_STYLE : { backgroundColor: "transparent" };
-  return /* @__PURE__ */ jsx("span", { className: "inline-block h-2 w-2 rounded-full shrink-0", style, "aria-label": props.visible ? "Unread attention item" : void 0 });
-}
-function ExternalLinkIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", className: "h-3 w-3", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", 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" })
-  ] });
-}
-function SkeletonLine(props) {
-  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded bg-secondary/80", props.className), "aria-hidden": "true" });
-}
-function MessageCard(props) {
-  return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card p-4 shadow-sm", children: [
-    /* @__PURE__ */ jsx("div", { className: cn("text-sm font-medium", props.accent && "text-foreground"), children: props.title }),
-    /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: props.body })
-  ] });
-}
-function WidgetLoadingState({ label }) {
-  return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card px-4 py-3 shadow-sm", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-0.5 h-3 w-3 rounded-full" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-        /* @__PURE__ */ jsx(SkeletonLine, { className: "h-3 w-20" }),
-        /* @__PURE__ */ jsx(SkeletonLine, { className: "h-4 w-48" })
-      ] }),
-      /* @__PURE__ */ jsx(SkeletonLine, { className: "h-3 w-24" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "sr-only", children: label })
-  ] });
+function WidgetLoadingState({ label }) {
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card px-4 py-3 shadow-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "mt-0.5 h-3 w-3 rounded-full" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+        /* @__PURE__ */ jsx(SkeletonLine, { className: "h-3 w-20" }),
+        /* @__PURE__ */ jsx(SkeletonLine, { className: "h-4 w-48" })
+      ] }),
+      /* @__PURE__ */ jsx(SkeletonLine, { className: "h-3 w-24" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sr-only", children: label })
+  ] });
 }
 function PageLoadingState({ label }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-5", "aria-label": label, children: [
@@ -753,124 +150,117 @@ function StatusToast({ message }) {
     }
   );
 }
-function readCsrfToken() {
-  if (typeof document === "undefined") return null;
-  const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute("content");
-  return token && token.trim().length > 0 ? token : null;
-}
-async function paperclipApiFetch(path, options = {}) {
-  const csrfToken = readCsrfToken();
-  const {
-    retries = 0,
-    expectJson = true,
-    headers,
-    ...init
-  } = options;
-  let lastError = null;
-  for (let attempt = 0; attempt <= retries; attempt += 1) {
-    try {
-      const response = await window.fetch(path, {
-        credentials: "same-origin",
-        ...init,
-        headers: {
-          Accept: "application/json",
-          "X-Requested-With": "XMLHttpRequest",
-          ...csrfToken ? { "X-CSRF-Token": csrfToken } : {},
-          ...headers ?? {}
-        }
-      });
-      if (!response.ok) {
-        const responseBody = await response.text().catch(() => "");
-        const detail = responseBody.trim().length > 0 ? `: ${responseBody.trim()}` : "";
-        throw new Error(`Request failed (${response.status})${detail}`);
-      }
-      if (!expectJson) return void 0;
-      return await response.json();
-    } catch (error) {
-      lastError = error instanceof Error ? error : new Error(String(error));
-      if (attempt >= retries) break;
-      await new Promise((resolve) => window.setTimeout(resolve, 250 * (attempt + 1)));
+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
     }
-  }
-  throw lastError ?? new Error("Request failed.");
-}
-function compactTitle(frame) {
-  return frame.title.trim().length > 0 ? frame.title : "Untitled frame";
+  );
 }
-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;
+function ActionButton(props) {
+  const [hovered, setHovered] = useState(false);
+  const toneClass = props.tone === "primary" ? "bg-green-700 text-white hover:bg-green-600" : props.tone === "accent" ? "text-white" : 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,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      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,filter]",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "disabled:pointer-events-none disabled:opacity-50",
+        props.disabled && /…|\.\.\./.test(props.label) && "animate-pulse",
+        toneClass,
+        props.className
+      ),
+      style: props.tone === "accent" ? { ...ACCENT_BG_STYLE, filter: hovered && !props.disabled ? "brightness(1.08)" : void 0 } : void 0,
+      children: props.label
     }
-    let cancelled = false;
-    async function loadApprovals() {
-      try {
-        setError(null);
-        const approvals = await paperclipApiFetch(`/api/companies/${companyId}/approvals?status=pending`, {
-          method: "GET",
-          retries: 1
-        });
-        if (!cancelled) {
-          setData(approvals);
-          setLoading(false);
-        }
-      } catch (fetchError) {
-        if (!cancelled) {
-          setError({ message: fetchError instanceof Error ? fetchError.message : String(fetchError) });
-          setLoading(false);
-        }
-      }
+  );
+}
+function QueueMovementBadge({ movement }) {
+  if (!movement) return null;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium",
+      style: {
+        color: ACCENT_COLOR,
+        backgroundColor: ACCENT_BG,
+        borderColor: ACCENT_BORDER
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: movement === "up" ? "\u2191" : "\u2193" }),
+        movement === "up" ? "moved up" : "moved down"
+      ]
     }
-    setLoading(true);
-    void loadApprovals();
-    return () => {
-      cancelled = true;
-    };
-  }, [companyId, refreshVersion]);
+  );
+}
+
+// src/ui/focus-model.tsx
+import { usePluginData, usePluginStream } from "@paperclipai/plugin-sdk/ui";
+import { useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+var ATTENTION_UPDATES_STREAM = "attention-updates";
+function currentSurfaceBrand() {
   return {
-    data,
-    loading,
-    error,
-    refresh: () => {
-      setRefreshVersion((value) => value + 1);
-    }
+    key: "focus",
+    wordmark: "Focus",
+    headingEmptyState: "No focus state yet.",
+    loadingLabel: "Loading Focus\u2026"
   };
 }
-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;
+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 postureForSnapshot(snapshot) {
+  const current = snapshot.now;
+  if (current?.tone === "critical" || current?.consequence === "high" || snapshot.counts.now + snapshot.counts.next >= 3) {
+    return { glyph: "\u25CF", label: "busy" };
   }
-  if (lastIndex < text.length) {
-    parts.push(text.slice(lastIndex));
+  if (snapshot.counts.now > 0 || snapshot.counts.next > 0 || snapshot.counts.ambient > 0) {
+    return { glyph: "\u25D0", label: "elevated" };
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: parts });
+  return { glyph: "\u25CB", label: "calm" };
 }
-function renderTitle(frame) {
-  return /* @__PURE__ */ jsx(HighlightedTitle, { text: compactTitle(frame) });
+function actionableCount(snapshot) {
+  return (snapshot.now ? 1 : 0) + snapshot.next.length;
+}
+function actionableLabel(snapshot) {
+  const actionable = actionableCount(snapshot);
+  return actionable > 0 ? `${actionable} action${actionable === 1 ? "" : "s"}` : null;
+}
+function unreadCount(snapshot) {
+  return snapshot?.review?.unread.total ?? 0;
 }
-function useAttentionPolling(companyId, refreshers, intervalMs = 5e3) {
-  const refreshersRef = useRef(refreshers);
+function useAttentionPolling(companyId, refreshers, intervalMs = 15e3) {
+  const refreshersRef = useRef2(refreshers);
   refreshersRef.current = refreshers;
-  useEffect(() => {
+  useEffect2(() => {
     if (!companyId) return;
     function refreshVisible() {
       if (typeof document !== "undefined" && document.visibilityState === "hidden") return;
@@ -892,10 +282,10 @@ function useAttentionPolling(companyId, refreshers, intervalMs = 5e3) {
   }, [companyId, intervalMs]);
 }
 function useQueueMovement(frames, ttlMs = 3500) {
-  const previousPositionsRef = useRef({});
-  const timersRef = useRef({});
-  const [movementById, setMovementById] = useState({});
-  useEffect(() => {
+  const previousPositionsRef = useRef2({});
+  const timersRef = useRef2({});
+  const [movementById, setMovementById] = useState2({});
+  useEffect2(() => {
     const nextPositions = Object.fromEntries(frames.map((frame, index) => [frame.interactionId, index]));
     setMovementById((current) => {
       const updates = {};
@@ -930,94 +320,801 @@ function useQueueMovement(frames, ttlMs = 3500) {
 }
 function useAttentionModel(companyId) {
   const displayQuery = usePluginData("attention-display", companyId ? { companyId } : void 0);
-  const approvalsQuery = usePendingApprovals(companyId);
   const updates = usePluginStream(
     ATTENTION_UPDATES_STREAM,
     companyId ? { companyId } : void 0
   );
-  useAttentionPolling(companyId, [displayQuery.refresh, approvalsQuery.refresh]);
-  useEffect(() => {
+  useAttentionPolling(companyId, [displayQuery.refresh]);
+  useEffect2(() => {
     if (!companyId || !updates.lastEvent) return;
     displayQuery.refresh();
-    approvalsQuery.refresh();
   }, [companyId, updates.lastEvent?.updatedAt, updates.lastEvent?.eventType]);
-  const snapshot = useMemo(
-    () => companyId ? mergeSnapshotWithApprovals(displayQuery.data?.snapshot ?? null, companyId, approvalsQuery.data, displayQuery.data?.reviewState ?? null) : null,
-    [displayQuery.data, approvalsQuery.data, companyId]
-  );
-  return {
-    snapshot,
+  return useMemo(() => ({
+    snapshot: displayQuery.data?.snapshot ?? null,
     review: displayQuery.data?.reviewState ?? null,
-    loading: displayQuery.loading || approvalsQuery.loading,
-    error: displayQuery.error ?? approvalsQuery.error,
+    loading: displayQuery.loading,
+    error: displayQuery.error,
     refresh() {
       displayQuery.refresh();
-      approvalsQuery.refresh();
     }
+  }), [displayQuery]);
+}
+
+// src/aperture/contracts.ts
+function asRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) ? value : null;
+}
+function readString(value) {
+  return typeof value === "string" && value.trim().length > 0 ? value : void 0;
+}
+function readNullableString(value) {
+  if (value === null) return null;
+  return readString(value);
+}
+function readStringArray(value) {
+  if (!Array.isArray(value)) return void 0;
+  const entries = value.filter((entry) => typeof entry === "string" && entry.trim().length > 0);
+  return entries.length > 0 ? entries : void 0;
+}
+function readRelationHints(value) {
+  if (!Array.isArray(value)) return void 0;
+  const hints = value.filter((entry) => {
+    if (typeof entry !== "object" || entry === null) return false;
+    const hint = entry;
+    return hint.kind === "same_issue" || hint.kind === "resolves" || hint.kind === "supersedes" || hint.kind === "repeats" || hint.kind === "escalates";
+  });
+  return hints.length > 0 ? hints : void 0;
+}
+function readFocusMetadata(frame) {
+  const metadata = asRecord(frame.metadata);
+  const attention = asRecord(metadata?.attention);
+  const semantic = asRecord(metadata?.semantic);
+  const episode = asRecord(metadata?.episode);
+  const issueIntelligence = asRecord(metadata?.issueIntelligence);
+  return {
+    entityType: readString(metadata?.entityType),
+    issueStatus: readString(metadata?.issueStatus),
+    issuePriority: readString(metadata?.issuePriority),
+    approvalStatus: readString(metadata?.approvalStatus),
+    approvalType: readString(metadata?.approvalType),
+    agentStatus: readString(metadata?.agentStatus),
+    pauseReason: readNullableString(metadata?.pauseReason),
+    liveReconciled: typeof metadata?.liveReconciled === "boolean" ? metadata.liveReconciled : void 0,
+    activityPath: readString(metadata?.activityPath),
+    attention: attention ? {
+      rationale: readStringArray(attention.rationale)
+    } : void 0,
+    semantic: semantic ? {
+      confidence: semantic.confidence === "low" || semantic.confidence === "medium" || semantic.confidence === "high" ? semantic.confidence : void 0,
+      relationHints: readRelationHints(semantic.relationHints)
+    } : void 0,
+    episode: episode ? {
+      size: typeof episode.size === "number" ? episode.size : void 0,
+      state: readString(episode.state)
+    } : void 0,
+    issueIntelligence: issueIntelligence ? {
+      matchedRuleIds: readStringArray(issueIntelligence.matchedRuleIds),
+      owner: readNullableString(issueIntelligence.owner),
+      ownerKind: issueIntelligence.ownerKind === "agent" || issueIntelligence.ownerKind === "human" ? issueIntelligence.ownerKind : issueIntelligence.ownerKind === null ? null : void 0,
+      blockingTarget: readNullableString(issueIntelligence.blockingTarget)
+    } : void 0
   };
 }
-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
-    }
-  );
+
+// src/aperture/attention-context.ts
+var ATTENTION_CONTEXT_IDS = {
+  approvalType: "approval-type",
+  requestedAmount: "requested-amount",
+  budgetReason: "budget-reason",
+  decisionContext: "decision-context",
+  linkedIssues: "linked-issues",
+  needsActionFrom: "needs-action-from",
+  blocksTarget: "blocks-target",
+  recommendedMove: "recommended-move",
+  issueStatus: "issue-status",
+  issuePriority: "issue-priority",
+  latestComment: "latest-comment",
+  agentStatus: "agent-status",
+  pauseReason: "pause-reason",
+  agentTitle: "agent-title"
+};
+
+// src/aperture/task-ref.ts
+function decodeComponent(value) {
+  try {
+    const decoded = decodeURIComponent(value);
+    return decoded.trim().length > 0 ? decoded : null;
+  } catch {
+    return null;
+  }
 }
-function ActionButton(props) {
-  const [hovered, setHovered] = useState(false);
-  const toneClass = props.tone === "primary" ? "bg-green-700 text-white hover:bg-green-600" : props.tone === "accent" ? "text-white" : 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,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      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,filter]",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "disabled:pointer-events-none disabled:opacity-50",
-        props.disabled && /…|\.\.\./.test(props.label) && "animate-pulse",
-        toneClass,
-        props.className
-      ),
-      style: props.tone === "accent" ? { ...ACCENT_BG_STYLE, filter: hovered && !props.disabled ? "brightness(1.08)" : void 0 } : void 0,
-      children: props.label
+function parseTaskId(taskId) {
+  if (typeof taskId !== "string") return null;
+  const separatorIndex = taskId.indexOf(":");
+  if (separatorIndex <= 0 || separatorIndex >= taskId.length - 1) return null;
+  const kind = decodeComponent(taskId.slice(0, separatorIndex));
+  const id = decodeComponent(taskId.slice(separatorIndex + 1));
+  if (!kind || !id) return null;
+  return { kind, id };
+}
+function taskKind(taskId) {
+  return parseTaskId(taskId)?.kind ?? null;
+}
+function taskEntityId(taskId) {
+  return parseTaskId(taskId)?.id ?? null;
+}
+
+// src/aperture/issue-intelligence.ts
+function issueBlocksTargetLine(target) {
+  return `Blocks ${target} until the review lands.`;
+}
+function issueNeedsActionFromLine(owner) {
+  return `Needs action from ${owner}.`;
+}
+
+// src/ui/frame-helpers.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+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 requestedAmount(frame) {
+  return contextValue(frame, ATTENTION_CONTEXT_IDS.requestedAmount);
+}
+function budgetReason(frame) {
+  return contextValue(frame, ATTENTION_CONTEXT_IDS.budgetReason);
+}
+function recommendedMoveValue(frame) {
+  return contextValue(frame, ATTENTION_CONTEXT_IDS.recommendedMove);
+}
+function actionOwnerValue(frame) {
+  return contextValue(frame, ATTENTION_CONTEXT_IDS.needsActionFrom);
+}
+function blockingTargetValue(frame) {
+  return contextValue(frame, ATTENTION_CONTEXT_IDS.blocksTarget);
+}
+function impactLabel(frame) {
+  return `${frame.consequence} impact`;
+}
+function operatorDriverLabel(value) {
+  switch (value) {
+    case "in_review":
+      return "review required";
+    case "pending_approval":
+      return "approval required";
+    default:
+      return value.replace(/_/g, " ");
+  }
+}
+function driverLabel(frame) {
+  if (isBudgetOverride(frame)) return "budget stop";
+  const metadata = readFocusMetadata(frame);
+  const issueStatus = metadata.issueStatus;
+  if (typeof issueStatus === "string" && issueStatus.trim().length > 0) {
+    return operatorDriverLabel(issueStatus);
+  }
+  const pauseReason = metadata.pauseReason;
+  if (typeof pauseReason === "string" && pauseReason.trim().length > 0) {
+    return operatorDriverLabel(pauseReason);
+  }
+  const agentStatus = metadata.agentStatus;
+  if (typeof agentStatus === "string" && agentStatus.trim().length > 0) {
+    return operatorDriverLabel(agentStatus);
+  }
+  return null;
+}
+function driverBadgeStyle() {
+  return {
+    className: "border-transparent",
+    style: { color: ACCENT_COLOR, backgroundColor: ACCENT_BG, borderColor: ACCENT_BORDER }
+  };
+}
+function requestDescriptor(frame) {
+  const driver = driverLabel(frame);
+  return driver ? `${sourceLabel(frame)} \xB7 ${driver}` : sourceLabel(frame);
+}
+function judgmentLine(frame, lane) {
+  if (frame.provenance?.whyNow) return frame.provenance.whyNow;
+  return genericJudgmentLine(frame, lane);
+}
+function nextPrimaryText(frame) {
+  const recommendedMove = recommendedMoveValue(frame);
+  if (recommendedMove) return recommendedMove;
+  const summary = frame.summary?.trim();
+  if (summary) return summary;
+  const fallback = judgmentLine(frame, "next");
+  return fallback === GENERIC_QUEUED_JUDGMENT ? null : fallback;
+}
+function supportingLine(frame, lane) {
+  const owner = actionOwnerValue(frame);
+  const target = blockingTargetValue(frame);
+  if (target && lane === "now" && entityTypeFromFrame(frame) === "issue" && driverLabel(frame) === "review required") {
+    return issueBlocksTargetLine(target);
+  }
+  if (owner && lane === "now" && entityTypeFromFrame(frame) === "issue") {
+    return issueNeedsActionFromLine(owner);
+  }
+  if (lane === "now") {
+    const recommendedMove = recommendedMoveValue(frame)?.trim();
+    const summary = frame.summary?.trim();
+    const judgment2 = judgmentLine(frame, lane).trim();
+    if (recommendedMove && summary && summary !== recommendedMove && summary !== judgment2) {
+      return summary;
     }
-  );
+    return null;
+  }
+  const judgment = judgmentLine(frame, lane);
+  return judgment.trim().length > 0 ? judgment : null;
 }
-function QueueMovementBadge({ movement }) {
-  if (!movement) return null;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium",
-      style: {
-        color: ACCENT_COLOR,
-        backgroundColor: ACCENT_BG,
-        borderColor: ACCENT_BORDER
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: movement === "up" ? "\u2191" : "\u2193" }),
-        movement === "up" ? "moved up" : "moved down"
-      ]
+function approvalIdForFrame(frame) {
+  const taskRef = parseTaskId(frame.taskId);
+  return taskRef?.kind === "approval" ? taskRef.id : null;
+}
+function entityIdFromFrame(frame) {
+  return taskEntityId(frame.taskId);
+}
+function entityTypeFromFrame(frame) {
+  return taskKind(frame.taskId);
+}
+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 activityHref(frame, companyPrefix) {
+  if (!companyPrefix) return null;
+  const metadata = readFocusMetadata(frame);
+  return metadata.activityPath ? `/${companyPrefix}/${metadata.activityPath}` : null;
+}
+function primaryLinkLabel(frame) {
+  const entityType = entityTypeFromFrame(frame);
+  switch (entityType) {
+    case "approval":
+      return "Open approval";
+    case "issue":
+      return "Open issue";
+    case "run":
+      return "Open run";
+    case "agent":
+      return "Open agent";
+    default:
+      return "Open in Paperclip";
+  }
+}
+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 isFrameUnreadInSnapshot(frame, snapshot) {
+  const seenAt = snapshot.review?.lastSeenAt;
+  if (!seenAt) return true;
+  return frameUpdatedAt(frame, snapshot.updatedAt).localeCompare(seenAt) > 0;
+}
+function compactTitle(frame) {
+  return frame.title.trim().length > 0 ? frame.title : "Untitled frame";
+}
+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__ */ jsx2(Accent, { children: match[1] ? token : `"${token}"` }, match.index)
+    );
+    lastIndex = re.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+  return /* @__PURE__ */ jsx2(Fragment, { children: parts });
+}
+function renderTitle(frame) {
+  return /* @__PURE__ */ jsx2(HighlightedTitle, { text: compactTitle(frame) });
+}
+function visibleContextItems(frame) {
+  return (frame.context?.items ?? []).filter((item) => item.id !== ATTENTION_CONTEXT_IDS.recommendedMove);
+}
+function isIssueFrame(frame) {
+  return entityTypeFromFrame(frame) === "issue";
+}
+
+// src/aperture/explainability.ts
+function readStringArray2(value) {
+  if (!Array.isArray(value)) return [];
+  return value.filter((entry) => typeof entry === "string" && entry.trim().length > 0);
+}
+function readSemanticConfidence(frame) {
+  const confidence = readFocusMetadata(frame).semantic?.confidence;
+  return confidence === "low" || confidence === "medium" || confidence === "high" ? confidence : null;
+}
+function readSemanticRelationHints(frame) {
+  return readFocusMetadata(frame).semantic?.relationHints ?? [];
+}
+function relationHintLabel(hint) {
+  switch (hint.kind) {
+    case "same_issue":
+      return "Part of the same thread";
+    case "resolves":
+      return "Resolves an earlier blocker";
+    case "supersedes":
+      return "Moves the request forward";
+    case "repeats":
+      return "Repeats an earlier ask";
+    case "escalates":
+      return "Raises the urgency";
+  }
+}
+function laneReason(lane) {
+  switch (lane) {
+    case "now":
+      return "This is the most urgent item in the queue right now.";
+    case "next":
+      return "This is staged behind the current top item.";
+    case "ambient":
+      return "This is visible for awareness without needing action yet.";
+  }
+}
+function continuitySummary(frame) {
+  const episode = readFocusMetadata(frame).episode;
+  const size = episode?.size ?? null;
+  const state = episode?.state?.replace(/_/g, " ") ?? null;
+  if (!size || size <= 1) return null;
+  if (state) return `Part of a ${state} thread with ${size} related interactions.`;
+  return `Part of a thread with ${size} related interactions.`;
+}
+function frameSignals(frame) {
+  const rationale = readFocusMetadata(frame).attention?.rationale ?? [];
+  const factors = readStringArray2(frame.provenance?.factors);
+  return [.../* @__PURE__ */ new Set([...rationale.length > 0 ? rationale : factors, ...factors])];
+}
+function signalStrengthLabel(confidence) {
+  return `${confidence} confidence`;
+}
+function explainFrame(frame, lane) {
+  const relationLabels = [...new Set(readSemanticRelationHints(frame).map(relationHintLabel))];
+  return {
+    whyNow: frame.provenance?.whyNow ?? frame.summary ?? null,
+    laneReason: laneReason(lane),
+    signalStrength: readSemanticConfidence(frame),
+    signals: frameSignals(frame),
+    relationLabels,
+    continuity: continuitySummary(frame)
+  };
+}
+
+// src/ui/frame-explainability.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ContextItems({ frame }) {
+  const items = visibleContextItems(frame);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx3("div", { className: "grid gap-2 md:grid-cols-2", children: items.map((item) => /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "border border-border bg-secondary/50 px-3 py-2",
+        item.id === ATTENTION_CONTEXT_IDS.latestComment && "md:col-span-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsx3("div", { className: "text-xs font-medium text-muted-foreground", children: item.label }),
+        /* @__PURE__ */ jsx3("div", { className: "mt-1 text-sm text-foreground", children: item.value ?? "Available" })
+      ]
+    },
+    item.id
+  )) });
+}
+function ExplainabilityBadges(props) {
+  if (props.values.length === 0) return null;
+  return /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap items-center gap-2", children: props.values.map((value) => /* @__PURE__ */ jsx3(
+    Badge,
+    {
+      className: props.accent ? "border-transparent" : "border-border bg-background/70 text-foreground/80",
+      style: props.accent ? { color: ACCENT_COLOR, backgroundColor: ACCENT_BG, borderColor: ACCENT_BORDER } : void 0,
+      children: value
+    },
+    value
+  )) });
+}
+function InlineExplainability(props) {
+  const explanation = explainFrame(props.frame, props.lane);
+  const chips = [
+    ...explanation.signalStrength ? [signalStrengthLabel(explanation.signalStrength)] : [],
+    ...explanation.signals.slice(0, 2),
+    ...explanation.relationLabels.slice(0, 1)
+  ];
+  const label = props.lane === "next" ? "Why next" : props.lane === "ambient" ? "Why ambient" : "Why now";
+  const whyNow = explanation.whyNow ?? judgmentLine(props.frame, props.lane);
+  const primaryLine = props.lane === "now" ? props.preferLaneReason ? explanation.laneReason : whyNow : whyNow;
+  const secondaryLine = props.lane === "now" ? !props.preferLaneReason && whyNow !== explanation.laneReason ? explanation.laneReason : null : explanation.laneReason;
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-2 border-l-2 pl-4", style: { borderColor: ACCENT_COLOR }, children: [
+    /* @__PURE__ */ jsx3("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx3("p", { className: "max-w-3xl text-sm leading-relaxed text-foreground/90", children: primaryLine }),
+    secondaryLine ? /* @__PURE__ */ jsx3("p", { className: "text-xs leading-relaxed text-muted-foreground", children: secondaryLine }) : null,
+    chips.length > 0 ? /* @__PURE__ */ jsx3(ExplainabilityBadges, { values: chips, accent: true }) : null
+  ] });
+}
+function ExplainabilityPanel(props) {
+  const explanation = explainFrame(props.frame, props.lane);
+  const strength = !props.detailOnly && explanation.signalStrength ? signalStrengthLabel(explanation.signalStrength) : null;
+  const signalValues = props.detailOnly ? explanation.signals.slice(2) : explanation.signals;
+  const relationValues = props.detailOnly ? explanation.relationLabels.slice(1) : explanation.relationLabels;
+  const reasoningLabel = props.lane === "now" ? "Reasoning" : props.lane === "next" ? "Why it sits here" : "Why it stays quiet";
+  if (props.detailOnly && signalValues.length === 0 && relationValues.length === 0 && !explanation.continuity) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+    !props.detailOnly ? /* @__PURE__ */ jsxs2("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_16rem]", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx3("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: reasoningLabel }),
+        /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm leading-relaxed text-muted-foreground", children: explanation.laneReason })
+      ] }),
+      strength ? /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx3("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: "Confidence" }),
+        /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-foreground/90", children: strength })
+      ] }) : null
+    ] }) : null,
+    signalValues.length > 0 ? /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx3("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: props.detailOnly ? "More signals" : "Signals" }),
+      /* @__PURE__ */ jsx3(ExplainabilityBadges, { values: signalValues })
+    ] }) : null,
+    relationValues.length > 0 ? /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx3("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: props.detailOnly ? "More thread context" : "Thread context" }),
+      /* @__PURE__ */ jsx3(ExplainabilityBadges, { values: relationValues, accent: true })
+    ] }) : null,
+    explanation.continuity ? /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx3("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: "Related activity" }),
+      /* @__PURE__ */ jsx3("p", { className: "text-sm leading-relaxed text-muted-foreground", children: explanation.continuity })
+    ] }) : null
+  ] });
+}
+function ExplainabilityStrip(props) {
+  return /* @__PURE__ */ jsx3("div", { className: "space-y-2 border-t border-border/60 pt-3", children: /* @__PURE__ */ jsx3(InlineExplainability, { frame: props.frame, lane: props.lane }) });
+}
+
+// src/ui/issue-comment-composer.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function IssueCommentComposer(props) {
+  const [open, setOpen] = useState3(false);
+  const [body, setBody] = useState3("");
+  const textareaRef = useRef3(null);
+  const issueFrame = isIssueFrame(props.frame);
+  const isPending = props.pendingId === props.frame.id;
+  useEffect3(() => {
+    setOpen(false);
+    setBody("");
+  }, [props.frame.id]);
+  useEffect3(() => {
+    if (open && issueFrame) textareaRef.current?.focus();
+  }, [open, issueFrame]);
+  if (!issueFrame) return null;
+  async function submit() {
+    const nextBody = body.trim();
+    if (!nextBody) return;
+    await props.onComment(props.frame, nextBody);
+    setBody("");
+    setOpen(false);
+  }
+  if (!open) {
+    const label = props.triggerLabel ?? "Leave comment";
+    const triggerTone = props.triggerTone ?? "link";
+    if (triggerTone === "link") {
+      return /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "text-xs font-medium text-muted-foreground underline underline-offset-2 hover:text-foreground",
+          onClick: () => setOpen(true),
+          children: label
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx4(
+      ActionButton,
+      {
+        label,
+        tone: triggerTone,
+        className: props.triggerFullWidth ? "w-full" : void 0,
+        disabled: isPending,
+        onClick: () => setOpen(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "w-full space-y-2 rounded-md border border-border bg-secondary/40 p-3", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: [
+      "Commenting on ",
+      compactTitle(props.frame)
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "text-[11px] text-muted-foreground", children: "Posts to the issue thread without leaving Focus." }),
+    /* @__PURE__ */ jsx4(
+      "textarea",
+      {
+        ref: textareaRef,
+        value: body,
+        onChange: (event) => setBody(event.target.value),
+        onKeyDown: (event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            void submit();
+          }
+          if (event.key === "Escape") {
+            event.preventDefault();
+            setOpen(false);
+            setBody("");
+          }
+        },
+        rows: 3,
+        placeholder: "Add a short operator note back to the issue\u2026",
+        className: "w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-xs outline-none transition focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-end gap-2", children: [
+      /* @__PURE__ */ jsx4(
+        ActionButton,
+        {
+          label: "Cancel",
+          tone: "secondary",
+          disabled: isPending,
+          onClick: () => {
+            setOpen(false);
+            setBody("");
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        ActionButton,
+        {
+          label: isPending ? "Posting\u2026" : "Post comment",
+          tone: "accent",
+          disabled: isPending || body.trim().length === 0,
+          onClick: () => void submit()
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/ui/use-focus-page-actions.ts
+import { usePluginAction } from "@paperclipai/plugin-sdk/ui";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+
+// src/ui/interaction-copy.ts
+function actionErrorMessage(error, fallback) {
+  return error instanceof Error ? error.message : fallback;
+}
+function acknowledgeSuccessMessage(title) {
+  return `Acknowledged ${title}.`;
+}
+function acknowledgeFailureMessage(error) {
+  return actionErrorMessage(error, "Failed to acknowledge frame.");
+}
+function issueFrameUnsupportedMessage() {
+  return "This frame is not backed by a Paperclip issue.";
+}
+function commentSuccessMessage(title) {
+  return `Posted a comment on ${title}.`;
+}
+function commentFailureMessage(error) {
+  return actionErrorMessage(error, "Failed to post comment.");
+}
+function approvalFrameUnsupportedMessage() {
+  return "This frame is not backed by a Paperclip approval.";
+}
+function approvalDecisionSuccessMessage(title, decision) {
+  return `${decision === "approve" ? "Approved" : "Rejected"} ${title}.`;
+}
+function approvalDecisionFailureMessage(error) {
+  return actionErrorMessage(error, "Failed to submit approval decision.");
+}
+function approvalRevisionSuccessMessage(title) {
+  return `Requested revision for ${title}.`;
+}
+function approvalRevisionFailureMessage(error) {
+  return actionErrorMessage(error, "Failed to request approval revision.");
+}
+
+// src/ui/use-focus-page-actions.ts
+var FOCUS_HOLD_CONTEXT_MS = 2e4;
+var FOCUS_HOLD_COMPOSE_MS = 45e3;
+function useFocusPageActions(input) {
+  const acknowledge = usePluginAction("acknowledge-frame");
+  const commentOnIssue = usePluginAction("comment-on-issue");
+  const engageFocus = usePluginAction("engage-focus");
+  const markAttentionViewed = usePluginAction("mark-attention-viewed");
+  const recordApprovalResponse = usePluginAction("record-approval-response");
+  const setFocusPresence = usePluginAction("set-focus-presence");
+  const [pendingId, setPendingId] = useState4(null);
+  const [statusOverride, setStatusOverride] = useState4(null);
+  const focusReleaseTimerRef = useRef4(null);
+  const lastViewedInteractionRef = useRef4(null);
+  const markAttentionViewedRef = useRef4(markAttentionViewed);
+  const setFocusPresenceRef = useRef4(setFocusPresence);
+  markAttentionViewedRef.current = markAttentionViewed;
+  setFocusPresenceRef.current = setFocusPresence;
+  useEffect4(() => {
+    if (!statusOverride) return;
+    const timer = window.setTimeout(() => {
+      setStatusOverride(null);
+    }, 4e3);
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [statusOverride]);
+  useEffect4(() => {
+    return () => {
+      if (focusReleaseTimerRef.current) {
+        window.clearTimeout(focusReleaseTimerRef.current);
+      }
+    };
+  }, []);
+  useEffect4(() => {
+    const companyId = input.companyId;
+    if (!companyId) return;
+    void setFocusPresenceRef.current({ companyId, presence: "present" }).catch(() => {
+    });
+    return () => {
+      void setFocusPresenceRef.current({ companyId, presence: "absent" }).catch(() => {
+      });
+    };
+  }, [input.companyId]);
+  useEffect4(() => {
+    const companyId = input.companyId;
+    const frame = input.displaySnapshot?.now;
+    if (!companyId || !frame) {
+      lastViewedInteractionRef.current = null;
+      return;
+    }
+    const viewKey = `${companyId}:${frame.interactionId}`;
+    if (lastViewedInteractionRef.current === viewKey) return;
+    lastViewedInteractionRef.current = viewKey;
+    void markAttentionViewedRef.current({
+      companyId,
+      taskId: frame.taskId,
+      interactionId: frame.interactionId,
+      surface: "focus"
+    }).catch(() => {
+      if (lastViewedInteractionRef.current === viewKey) {
+        lastViewedInteractionRef.current = null;
+      }
+    });
+  }, [input.companyId, input.displaySnapshot?.now?.interactionId]);
+  async function holdNowFrame(frame, reason) {
+    const companyId = input.companyId;
+    if (!companyId) return;
+    if (input.displaySnapshot?.now?.interactionId !== frame.interactionId) return;
+    const durationMs = reason === "comment_compose" ? FOCUS_HOLD_COMPOSE_MS : FOCUS_HOLD_CONTEXT_MS;
+    try {
+      await engageFocus({
+        companyId,
+        taskId: frame.taskId,
+        interactionId: frame.interactionId,
+        reason,
+        durationMs
+      });
+      input.refresh();
+      if (focusReleaseTimerRef.current) {
+        window.clearTimeout(focusReleaseTimerRef.current);
+      }
+      focusReleaseTimerRef.current = window.setTimeout(() => {
+        input.refresh();
+        focusReleaseTimerRef.current = null;
+      }, durationMs + 150);
+    } catch {
+    }
+  }
+  async function acknowledgeFrame(frame) {
+    const companyId = input.companyId;
+    if (!companyId) return;
+    setPendingId(frame.id);
+    try {
+      await acknowledge({ companyId, taskId: frame.taskId, interactionId: frame.interactionId });
+      setStatusOverride(acknowledgeSuccessMessage(compactTitle(frame)));
+      input.refresh();
+    } catch (actionError) {
+      setStatusOverride(acknowledgeFailureMessage(actionError));
+    } finally {
+      setPendingId(null);
+    }
+  }
+  async function commentOnIssueFrame(frame, body) {
+    const companyId = input.companyId;
+    const issueId = entityIdFromFrame(frame);
+    if (!companyId || !issueId || entityTypeFromFrame(frame) !== "issue") {
+      setStatusOverride(issueFrameUnsupportedMessage());
+      return;
+    }
+    setPendingId(frame.id);
+    try {
+      await commentOnIssue({ companyId, taskId: frame.taskId, issueId, body });
+      setStatusOverride(commentSuccessMessage(compactTitle(frame)));
+      input.refresh();
+    } catch (actionError) {
+      setStatusOverride(commentFailureMessage(actionError));
+    } finally {
+      setPendingId(null);
+    }
+  }
+  async function submitApprovalDecision(frame, decision) {
+    const companyId = input.companyId;
+    const approvalId = approvalIdForFrame(frame);
+    if (!companyId || !approvalId) {
+      setStatusOverride(approvalFrameUnsupportedMessage());
+      return;
+    }
+    setPendingId(frame.id);
+    try {
+      await recordApprovalResponse({
+        companyId,
+        taskId: frame.taskId,
+        interactionId: frame.interactionId,
+        decision
+      });
+      setStatusOverride(approvalDecisionSuccessMessage(compactTitle(frame), decision));
+      input.refresh();
+    } catch (actionError) {
+      setStatusOverride(approvalDecisionFailureMessage(actionError));
+    } finally {
+      setPendingId(null);
+    }
+  }
+  async function requestApprovalRevision(frame) {
+    const companyId = input.companyId;
+    const approvalId = approvalIdForFrame(frame);
+    if (!companyId || !approvalId) {
+      setStatusOverride(approvalFrameUnsupportedMessage());
+      return;
+    }
+    setPendingId(frame.id);
+    try {
+      await recordApprovalResponse({
+        companyId,
+        taskId: frame.taskId,
+        interactionId: frame.interactionId,
+        decision: "request-revision"
+      });
+      setStatusOverride(approvalRevisionSuccessMessage(compactTitle(frame)));
+      input.refresh();
+    } catch (actionError) {
+      setStatusOverride(approvalRevisionFailureMessage(actionError));
+    } finally {
+      setPendingId(null);
     }
-  );
+  }
+  return {
+    pendingId,
+    statusOverride,
+    holdNowFrame,
+    acknowledgeFrame,
+    commentOnIssueFrame,
+    submitApprovalDecision,
+    requestApprovalRevision
+  };
 }
+
+// src/ui/index.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 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(
+  return /* @__PURE__ */ jsx5("div", { className: cn("flex items-center gap-2", props.compact && "justify-end"), children: actionMode === "approval" ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    isBudgetOverride(props.frame) ? /* @__PURE__ */ jsx5(
       ActionButton,
       {
         label: "Request revision",
@@ -1026,7 +1123,7 @@ function FrameActions(props) {
         onClick: () => void props.onRequestRevision(props.frame)
       }
     ) : null,
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx5(
       ActionButton,
       {
         label: isPending ? "Submitting\u2026" : "Approve",
@@ -1035,7 +1132,7 @@ function FrameActions(props) {
         onClick: () => void props.onApprove(props.frame)
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx5(
       ActionButton,
       {
         label: "Reject",
@@ -1044,7 +1141,7 @@ function FrameActions(props) {
         onClick: () => void props.onReject(props.frame)
       }
     )
-  ] }) : /* @__PURE__ */ jsx(
+  ] }) : /* @__PURE__ */ jsx5(
     ActionButton,
     {
       label: isPending ? "Saving\u2026" : "Acknowledge",
@@ -1054,216 +1151,30 @@ function FrameActions(props) {
     }
   ) });
 }
-function visibleContextItems(frame) {
-  return (frame.context?.items ?? []).filter((item2) => item2.id !== ATTENTION_CONTEXT_IDS.recommendedMove);
-}
-function ContextItems({ frame }) {
-  const items = visibleContextItems(frame);
-  if (items.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "grid gap-2 md:grid-cols-2", children: items.map((item2) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "border border-border bg-secondary/50 px-3 py-2",
-        item2.id === ATTENTION_CONTEXT_IDS.latestComment && "md:col-span-2"
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: item2.label }),
-        /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-foreground", children: item2.value ?? "Available" })
-      ]
-    },
-    item2.id
-  )) });
-}
-function ExplainabilityBadges(props) {
-  if (props.values.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: props.values.map((value) => /* @__PURE__ */ jsx(
-    Badge,
-    {
-      className: props.accent ? "border-transparent" : "border-border bg-background/70 text-foreground/80",
-      style: props.accent ? { color: ACCENT_COLOR, backgroundColor: ACCENT_BG, borderColor: ACCENT_BORDER } : void 0,
-      children: value
-    },
-    value
-  )) });
-}
-function InlineExplainability(props) {
-  const explanation = explainFrame(props.frame, props.lane);
-  const chips = [
-    ...explanation.signalStrength ? [signalStrengthLabel(explanation.signalStrength)] : [],
-    ...explanation.signals.slice(0, 2),
-    ...explanation.relationLabels.slice(0, 1)
-  ];
-  const label = props.lane === "next" ? "Why next" : props.lane === "ambient" ? "Why ambient" : "Why now";
-  const whyNow = explanation.whyNow ?? judgmentLine(props.frame, props.lane);
-  const primaryLine = props.lane === "now" ? props.preferLaneReason ? explanation.laneReason : whyNow : whyNow;
-  const secondaryLine = props.lane === "now" ? !props.preferLaneReason && whyNow !== explanation.laneReason ? explanation.laneReason : null : explanation.laneReason;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-l-2 pl-4", style: { borderColor: ACCENT_COLOR }, children: [
-    /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx("p", { className: "max-w-3xl text-sm leading-relaxed text-foreground/90", children: primaryLine }),
-    secondaryLine ? /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: secondaryLine }) : null,
-    chips.length > 0 ? /* @__PURE__ */ jsx(ExplainabilityBadges, { values: chips, accent: true }) : null
-  ] });
-}
-function ExplainabilityPanel(props) {
-  const explanation = explainFrame(props.frame, props.lane);
-  const strength = !props.detailOnly && explanation.signalStrength ? signalStrengthLabel(explanation.signalStrength) : null;
-  const signalValues = props.detailOnly ? explanation.signals.slice(2) : explanation.signals;
-  const relationValues = props.detailOnly ? explanation.relationLabels.slice(1) : explanation.relationLabels;
-  const reasoningLabel = props.lane === "now" ? "Reasoning" : props.lane === "next" ? "Why it sits here" : "Why it stays quiet";
-  if (props.detailOnly && signalValues.length === 0 && relationValues.length === 0 && !explanation.continuity) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    !props.detailOnly ? /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_16rem]", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: reasoningLabel }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-relaxed text-muted-foreground", children: explanation.laneReason })
-      ] }),
-      strength ? /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: "Confidence" }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-foreground/90", children: strength })
-      ] }) : null
-    ] }) : null,
-    signalValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: props.detailOnly ? "More signals" : "Signals" }),
-      /* @__PURE__ */ jsx(ExplainabilityBadges, { values: signalValues })
-    ] }) : null,
-    relationValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: props.detailOnly ? "More thread context" : "Thread context" }),
-      /* @__PURE__ */ jsx(ExplainabilityBadges, { values: relationValues, accent: true })
-    ] }) : null,
-    explanation.continuity ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: "Related activity" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: explanation.continuity })
-    ] }) : null
-  ] });
-}
-function ExplainabilityStrip(props) {
-  return /* @__PURE__ */ jsx("div", { className: "space-y-2 border-t border-border/60 pt-3", children: /* @__PURE__ */ jsx(InlineExplainability, { frame: props.frame, lane: props.lane }) });
-}
-function isIssueFrame(frame) {
-  return entityTypeFromFrame(frame) === "issue";
-}
-function IssueCommentComposer(props) {
-  const [open, setOpen] = useState(false);
-  const [body, setBody] = useState("");
-  const textareaRef = useRef(null);
-  const issueFrame = isIssueFrame(props.frame);
-  const isPending = props.pendingId === props.frame.id;
-  useEffect(() => {
-    setOpen(false);
-    setBody("");
-  }, [props.frame.id]);
-  useEffect(() => {
-    if (open && issueFrame) textareaRef.current?.focus();
-  }, [open, issueFrame]);
-  if (!issueFrame) return null;
-  async function submit() {
-    const nextBody = body.trim();
-    if (!nextBody) return;
-    await props.onComment(props.frame, nextBody);
-    setBody("");
-    setOpen(false);
-  }
-  if (!open) {
-    const label = props.triggerLabel ?? "Leave comment";
-    const triggerTone = props.triggerTone ?? "link";
-    if (triggerTone === "link") {
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "text-xs font-medium text-muted-foreground underline underline-offset-2 hover:text-foreground",
-          onClick: () => setOpen(true),
-          children: label
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      ActionButton,
-      {
-        label,
-        tone: triggerTone,
-        className: props.triggerFullWidth ? "w-full" : void 0,
-        disabled: isPending,
-        onClick: () => setOpen(true)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-2 rounded-md border border-border bg-secondary/40 p-3", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: "Posts to the issue thread without leaving Focus." }),
-    /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        ref: textareaRef,
-        value: body,
-        onChange: (event) => setBody(event.target.value),
-        onKeyDown: (event) => {
-          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
-            event.preventDefault();
-            void submit();
-          }
-          if (event.key === "Escape") {
-            event.preventDefault();
-            setOpen(false);
-            setBody("");
-          }
-        },
-        rows: 3,
-        placeholder: "Add a short operator note back to the issue\u2026",
-        className: "w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-xs outline-none transition focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
-      /* @__PURE__ */ jsx(
-        ActionButton,
-        {
-          label: "Cancel",
-          tone: "secondary",
-          disabled: isPending,
-          onClick: () => {
-            setOpen(false);
-            setBody("");
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        ActionButton,
-        {
-          label: isPending ? "Posting\u2026" : "Post comment",
-          tone: "accent",
-          disabled: isPending || body.trim().length === 0,
-          onClick: () => void submit()
-        }
-      )
-    ] })
-  ] });
-}
 function NowDetails(props) {
   const { frame, snapshotUpdatedAt } = props;
   const href = itemHref(frame, props.companyPrefix);
   const budgetHref = isBudgetOverride(frame) ? costsHref(props.companyPrefix) : null;
   const activityLink = activityHref(frame, props.companyPrefix);
   const hasContext = visibleContextItems(frame).length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-border pt-4", children: [
-    /* @__PURE__ */ jsx(ExplainabilityPanel, { frame, lane: "now", detailOnly: true }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { children: requestDescriptor(frame) }),
-      /* @__PURE__ */ jsx("span", { children: impactLabel(frame) }),
-      /* @__PURE__ */ jsx("span", { children: formatRelativeTime(frameUpdatedAt(frame, snapshotUpdatedAt)) }),
-      requestedAmount(frame) ? /* @__PURE__ */ jsxs("span", { children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-3 border-t border-border pt-4", children: [
+    /* @__PURE__ */ jsx5(ExplainabilityPanel, { frame, lane: "now", detailOnly: true }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx5("span", { children: requestDescriptor(frame) }),
+      /* @__PURE__ */ jsx5("span", { children: impactLabel(frame) }),
+      /* @__PURE__ */ jsx5("span", { children: formatRelativeTime(frameUpdatedAt(frame, snapshotUpdatedAt)) }),
+      requestedAmount(frame) ? /* @__PURE__ */ jsxs4("span", { children: [
         "Amount requested: ",
         requestedAmount(frame)
       ] }) : null,
-      budgetReason(frame) ? /* @__PURE__ */ jsx("span", { children: budgetReason(frame) }) : null
+      budgetReason(frame) ? /* @__PURE__ */ jsx5("span", { children: budgetReason(frame) }) : null
     ] }),
-    hasContext ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: "Context" }),
-      /* @__PURE__ */ jsx(ContextItems, { frame })
+    hasContext ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx5("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: "Context" }),
+      /* @__PURE__ */ jsx5(ContextItems, { frame })
     ] }) : null,
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-      href ? /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-3", children: [
+      href ? /* @__PURE__ */ jsxs4(
         "a",
         {
           href,
@@ -1272,11 +1183,11 @@ function NowDetails(props) {
           className: "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground underline underline-offset-2 hover:text-foreground",
           children: [
             primaryLinkLabel(frame),
-            /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+            /* @__PURE__ */ jsx5(ExternalLinkIcon, {})
           ]
         }
       ) : null,
-      activityLink ? /* @__PURE__ */ jsxs(
+      activityLink ? /* @__PURE__ */ jsxs4(
         "a",
         {
           href: activityLink,
@@ -1285,11 +1196,11 @@ function NowDetails(props) {
           className: "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground underline underline-offset-2 hover:text-foreground",
           children: [
             "Open activity",
-            /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+            /* @__PURE__ */ jsx5(ExternalLinkIcon, {})
           ]
         }
       ) : null,
-      budgetHref ? /* @__PURE__ */ jsx(Accent, { children: /* @__PURE__ */ jsxs(
+      budgetHref ? /* @__PURE__ */ jsx5(Accent, { children: /* @__PURE__ */ jsxs4(
         "a",
         {
           href: budgetHref,
@@ -1299,7 +1210,7 @@ function NowDetails(props) {
           style: { color: "inherit" },
           children: [
             "Review in Costs",
-            /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+            /* @__PURE__ */ jsx5(ExternalLinkIcon, {})
           ]
         }
       ) }) : null
@@ -1307,23 +1218,23 @@ function NowDetails(props) {
   ] });
 }
 function QuietNow() {
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-20 items-center gap-3", children: [
-    /* @__PURE__ */ jsx(QuietMark, { size: "md" }),
-    /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Nothing active right now." })
+  return /* @__PURE__ */ jsxs4("div", { className: "flex min-h-20 items-center gap-3", children: [
+    /* @__PURE__ */ jsx5(QuietMark, { size: "md" }),
+    /* @__PURE__ */ jsx5("div", { className: "text-sm text-muted-foreground", children: "Nothing active right now." })
   ] });
 }
 function NowActionRail(props) {
   const actionMode = responseKind(props.frame, props.lane);
   const isPending = props.pendingId === props.frame.id;
   const commentEnabled = actionMode === "acknowledge" && isIssueFrame(props.frame);
-  const [commentOpen, setCommentOpen] = useState(false);
-  const [commentBody, setCommentBody] = useState("");
-  const textareaRef = useRef(null);
-  useEffect(() => {
+  const [commentOpen, setCommentOpen] = useState5(false);
+  const [commentBody, setCommentBody] = useState5("");
+  const textareaRef = useRef5(null);
+  useEffect5(() => {
     setCommentOpen(false);
     setCommentBody("");
   }, [props.frame.id]);
-  useEffect(() => {
+  useEffect5(() => {
     if (commentOpen) textareaRef.current?.focus();
   }, [commentOpen]);
   async function submitComment() {
@@ -1333,16 +1244,16 @@ function NowActionRail(props) {
     setCommentBody("");
     setCommentOpen(false);
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "space-y-3 rounded-md border border-border/60 bg-secondary/20 px-3 py-3",
       style: props.wide ? { width: 320, flexShrink: 0, position: "sticky", top: 16, alignSelf: "flex-start" } : void 0,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: "Actions" }),
-        actionMode === "approval" ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-            /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx5("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: "Actions" }),
+        actionMode === "approval" ? /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ jsx5(
               ActionButton,
               {
                 label: isPending ? "Submitting\u2026" : "Approve",
@@ -1352,7 +1263,7 @@ function NowActionRail(props) {
                 onClick: () => void props.onApprove(props.frame)
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx5(
               ActionButton,
               {
                 label: "Reject",
@@ -1363,7 +1274,7 @@ function NowActionRail(props) {
               }
             )
           ] }),
-          isBudgetOverride(props.frame) ? /* @__PURE__ */ jsx(
+          isBudgetOverride(props.frame) ? /* @__PURE__ */ jsx5(
             ActionButton,
             {
               label: "Request revision",
@@ -1373,17 +1284,20 @@ function NowActionRail(props) {
               onClick: () => void props.onRequestRevision(props.frame)
             }
           ) : null
-        ] }) : actionMode === "acknowledge" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-          commentEnabled ? /* @__PURE__ */ jsx(
+        ] }) : actionMode === "acknowledge" ? /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-2", children: [
+          commentEnabled ? /* @__PURE__ */ jsx5(
             ActionButton,
             {
               label: "Comment",
               tone: "accent",
               disabled: isPending,
-              onClick: () => setCommentOpen(true)
+              onClick: () => {
+                props.onEngageFocus(props.frame, "comment_compose");
+                setCommentOpen(true);
+              }
             }
           ) : null,
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx5(
             ActionButton,
             {
               label: isPending ? "Saving\u2026" : "Acknowledge",
@@ -1393,7 +1307,7 @@ function NowActionRail(props) {
             }
           )
         ] }) : null,
-        props.itemLink ? /* @__PURE__ */ jsxs(
+        props.itemLink ? /* @__PURE__ */ jsxs4(
           "a",
           {
             href: props.itemLink,
@@ -1402,17 +1316,17 @@ function NowActionRail(props) {
             className: "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground underline underline-offset-2 hover:text-foreground",
             children: [
               primaryLinkLabel(props.frame),
-              /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+              /* @__PURE__ */ jsx5(ExternalLinkIcon, {})
             ]
           }
         ) : null,
-        commentOpen ? /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-md border border-border bg-background/80 p-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: [
+        commentOpen ? /* @__PURE__ */ jsxs4("div", { className: "space-y-2 rounded-md border border-border bg-background/80 p-3", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: [
             "Commenting on ",
             compactTitle(props.frame)
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Posts to the issue thread without leaving Focus." }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx5("div", { className: "text-xs text-muted-foreground", children: "Posts to the issue thread without leaving Focus." }),
+          /* @__PURE__ */ jsx5(
             "textarea",
             {
               ref: textareaRef,
@@ -1434,8 +1348,8 @@ function NowActionRail(props) {
               className: "w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-xs outline-none transition focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-end gap-2", children: [
+            /* @__PURE__ */ jsx5(
               ActionButton,
               {
                 label: "Cancel",
@@ -1447,7 +1361,7 @@ function NowActionRail(props) {
                 }
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx5(
               ActionButton,
               {
                 label: isPending ? "Posting\u2026" : "Post comment",
@@ -1464,7 +1378,7 @@ function NowActionRail(props) {
 }
 function NowPane(props) {
   const frame = props.snapshot.now;
-  const [detailsOpen, setDetailsOpen] = useState(false);
+  const [detailsOpen, setDetailsOpen] = useState5(false);
   const wideLayout = useWideLayout(1120);
   const activeFrameId = frame?.id ?? null;
   const activeUnread = !!frame && (props.snapshot.review?.unread.now ?? 0) > 0;
@@ -1472,77 +1386,82 @@ function NowPane(props) {
   const recommendedMove = frame ? recommendedMoveValue(frame) : null;
   const helperLine = frame ? supportingLine(frame, "now") : null;
   const driverBadge = driverBadgeStyle();
-  useEffect(() => {
+  useEffect5(() => {
     setDetailsOpen(false);
   }, [activeFrameId]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs4(
     "section",
     {
       className: "border border-border bg-card shadow-sm",
       style: frame ? { borderLeftWidth: 3, borderLeftColor: ACCENT_COLOR } : void 0,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border bg-accent px-4 py-3 sm:px-6", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx(Accent, { className: "text-sm leading-none", children: props.posture.glyph }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
-              /* @__PURE__ */ jsx(Accent, { className: "text-base leading-none font-semibold tracking-[0.04em]", children: props.brand.wordmark }),
-              /* @__PURE__ */ jsx("span", { className: "text-[11px] leading-none text-muted-foreground", children: props.posture.label })
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-3 border-b border-border bg-accent px-4 py-3 sm:px-6", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx5(Accent, { className: "text-sm leading-none", children: props.posture.glyph }),
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2", children: [
+              /* @__PURE__ */ jsx5(Accent, { className: "text-base leading-none font-semibold tracking-[0.04em]", children: props.brand.wordmark }),
+              /* @__PURE__ */ jsx5("span", { className: "text-[11px] leading-none text-muted-foreground", children: props.posture.label })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs tabular-nums text-muted-foreground", children: [
-            /* @__PURE__ */ jsxs("span", { className: props.counts.now > 0 ? "font-semibold" : "", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3 text-xs tabular-nums text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs4("span", { className: props.counts.now > 0 ? "font-semibold" : "", children: [
               "now ",
-              props.counts.now > 0 ? /* @__PURE__ */ jsx(Accent, { children: props.counts.now }) : props.counts.now
+              props.counts.now > 0 ? /* @__PURE__ */ jsx5(Accent, { children: props.counts.now }) : props.counts.now
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: props.counts.next > 0 ? "font-semibold" : "", children: [
+            /* @__PURE__ */ jsxs4("span", { className: props.counts.next > 0 ? "font-semibold" : "", children: [
               "next ",
-              props.counts.next > 0 ? /* @__PURE__ */ jsx(Accent, { children: props.counts.next }) : props.counts.next
+              props.counts.next > 0 ? /* @__PURE__ */ jsx5(Accent, { children: props.counts.next }) : props.counts.next
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: props.counts.ambient > 0 ? "font-semibold" : "", children: [
+            /* @__PURE__ */ jsxs4("span", { className: props.counts.ambient > 0 ? "font-semibold" : "", children: [
               "ambient ",
-              props.counts.ambient > 0 ? /* @__PURE__ */ jsx(Accent, { children: props.counts.ambient }) : props.counts.ambient
+              props.counts.ambient > 0 ? /* @__PURE__ */ jsx5(Accent, { children: props.counts.ambient }) : props.counts.ambient
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "px-5 py-5 sm:px-6", children: !frame ? /* @__PURE__ */ jsx(QuietNow, {}) : /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
-          /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx5("div", { className: "px-5 py-5 sm:px-6", children: !frame ? /* @__PURE__ */ jsx5(QuietNow, {}) : /* @__PURE__ */ jsxs4("div", { className: "space-y-5", children: [
+          /* @__PURE__ */ jsxs4(
             "div",
             {
               className: wideLayout ? "flex items-start gap-6" : "space-y-4",
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "space-y-4", style: wideLayout ? { minWidth: 0, flex: 1 } : void 0, children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: [
-                    /* @__PURE__ */ jsx("span", { children: "Now" }),
-                    /* @__PURE__ */ jsx("span", { className: "normal-case tracking-normal text-muted-foreground/70", children: sourceLabel(frame) })
+                /* @__PURE__ */ jsxs4("div", { className: "space-y-4", style: wideLayout ? { minWidth: 0, flex: 1 } : void 0, children: [
+                  /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground", children: [
+                    /* @__PURE__ */ jsx5("span", { children: "Now" }),
+                    /* @__PURE__ */ jsx5("span", { className: "normal-case tracking-normal text-muted-foreground/70", children: sourceLabel(frame) })
                   ] }),
-                  recommendedMove ? /* @__PURE__ */ jsx("div", { className: "max-w-4xl text-3xl font-semibold leading-tight text-foreground", children: recommendedMove }) : frame.summary ? /* @__PURE__ */ jsx("div", { className: "max-w-4xl text-3xl font-semibold leading-tight text-foreground", children: frame.summary }) : null,
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xl font-medium leading-snug text-foreground/80", children: [
-                    /* @__PURE__ */ jsx(UnreadDot, { visible: activeUnread }),
-                    /* @__PURE__ */ jsx("span", { children: renderTitle(frame) })
+                  recommendedMove ? /* @__PURE__ */ jsx5("div", { className: "max-w-4xl text-3xl font-semibold leading-tight text-foreground", children: recommendedMove }) : frame.summary ? /* @__PURE__ */ jsx5("div", { className: "max-w-4xl text-3xl font-semibold leading-tight text-foreground", children: frame.summary }) : null,
+                  /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-2 text-xl font-medium leading-snug text-foreground/80", children: [
+                    /* @__PURE__ */ jsx5(UnreadDot, { visible: activeUnread }),
+                    /* @__PURE__ */ jsx5("span", { children: renderTitle(frame) })
                   ] }),
-                  helperLine ? /* @__PURE__ */ jsx("p", { className: "max-w-3xl text-sm leading-relaxed text-muted-foreground", children: helperLine }) : null,
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-                    /* @__PURE__ */ jsx(Badge, { className: "border-border bg-secondary text-foreground/80", children: impactLabel(frame) }),
-                    driverLabel(frame) ? /* @__PURE__ */ jsx(Badge, { className: driverBadge.className, style: driverBadge.style, children: driverLabel(frame) }) : null
+                  helperLine ? /* @__PURE__ */ jsx5("p", { className: "max-w-3xl text-sm leading-relaxed text-muted-foreground", children: helperLine }) : null,
+                  /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-2", children: [
+                    /* @__PURE__ */ jsx5(Badge, { className: "border-border bg-secondary text-foreground/80", children: impactLabel(frame) }),
+                    driverLabel(frame) ? /* @__PURE__ */ jsx5(Badge, { className: driverBadge.className, style: driverBadge.style, children: driverLabel(frame) }) : null
                   ] }),
-                  /* @__PURE__ */ jsx(InlineExplainability, { frame, lane: "now", preferLaneReason: !!helperLine }),
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx(Accent, { children: /* @__PURE__ */ jsxs(
+                  /* @__PURE__ */ jsx5(InlineExplainability, { frame, lane: "now", preferLaneReason: !!helperLine }),
+                  /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx5(Accent, { children: /* @__PURE__ */ jsxs4(
                     "button",
                     {
                       type: "button",
-                      onClick: () => setDetailsOpen(!detailsOpen),
+                      onClick: () => {
+                        if (!detailsOpen) {
+                          props.onEngageFocus(frame, "show_context");
+                        }
+                        setDetailsOpen(!detailsOpen);
+                      },
                       "aria-expanded": detailsOpen,
                       className: "flex items-center gap-1.5 text-xs font-medium transition-opacity hover:opacity-100",
                       style: { color: "inherit" },
                       children: [
-                        /* @__PURE__ */ jsx(
+                        /* @__PURE__ */ jsx5(
                           "svg",
                           {
                             viewBox: "0 0 16 16",
                             className: cn("h-3 w-3 transition-transform", detailsOpen && "rotate-90"),
                             fill: "currentColor",
                             "aria-hidden": "true",
-                            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" })
+                            children: /* @__PURE__ */ jsx5("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 context" : "Show context"
@@ -1550,7 +1469,7 @@ function NowPane(props) {
                     }
                   ) }) })
                 ] }),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx5(
                   NowActionRail,
                   {
                     frame,
@@ -1558,6 +1477,7 @@ function NowPane(props) {
                     wide: wideLayout,
                     pendingId: props.pendingId,
                     itemLink,
+                    onEngageFocus: props.onEngageFocus,
                     onApprove: props.onApprove,
                     onReject: props.onReject,
                     onRequestRevision: props.onRequestRevision,
@@ -1568,7 +1488,7 @@ function NowPane(props) {
               ]
             }
           ),
-          detailsOpen ? /* @__PURE__ */ jsx(
+          detailsOpen ? /* @__PURE__ */ jsx5(
             NowDetails,
             {
               frame,
@@ -1583,7 +1503,7 @@ function NowPane(props) {
 }
 function NextRow(props) {
   const { frame } = props;
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState5(false);
   const unread = isFrameUnreadInSnapshot(frame, props.snapshot);
   const activityLink = activityHref(frame, props.companyPrefix);
   const itemLink = itemHref(frame, props.companyPrefix);
@@ -1593,8 +1513,8 @@ function NextRow(props) {
   const detailText = judgmentLine(frame, "next");
   const showDetailText = detailText.trim().length > 0 && detailText !== secondaryText && detailText !== GENERIC_QUEUED_JUDGMENT;
   const rankOpacity = Math.max(0.4, 1 - (props.rank - 1) * 0.14);
-  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(
+  return /* @__PURE__ */ jsxs4("div", { className: "border-b border-border/80 last:border-b-0", style: expanded ? { borderLeftWidth: 2, borderLeftColor: ACCENT_COLOR } : void 0, children: [
+    /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
@@ -1602,40 +1522,40 @@ function NextRow(props) {
         "aria-expanded": 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(UnreadDot, { visible: unread }),
-          /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0", style: { opacity: rankOpacity }, children: /* @__PURE__ */ jsx(Accent, { className: "text-xs font-medium tabular-nums", children: String(props.rank).padStart(2, "0") }) }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium leading-5 text-foreground", children: renderTitle(frame) }),
-            secondaryText ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 max-w-3xl text-xs leading-5 text-muted-foreground", children: secondaryText }) : null
+          /* @__PURE__ */ jsx5(UnreadDot, { visible: unread }),
+          /* @__PURE__ */ jsx5("span", { className: "w-5 shrink-0", style: { opacity: rankOpacity }, children: /* @__PURE__ */ jsx5(Accent, { className: "text-xs font-medium tabular-nums", children: String(props.rank).padStart(2, "0") }) }),
+          /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx5("div", { className: "text-sm font-medium leading-5 text-foreground", children: renderTitle(frame) }),
+            secondaryText ? /* @__PURE__ */ jsx5("div", { className: "mt-0.5 max-w-3xl text-xs leading-5 text-muted-foreground", children: secondaryText }) : null
           ] }),
-          /* @__PURE__ */ jsx(QueueMovementBadge, { movement: props.movement }),
-          driver ? /* @__PURE__ */ jsx(Badge, { className: cn("shrink-0", driverBadge.className), style: driverBadge.style, children: driver }) : null,
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", style: { opacity: 0.7 }, children: formatRelativeTime(frameUpdatedAt(frame, props.snapshotUpdatedAt)) }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx5(QueueMovementBadge, { movement: props.movement }),
+          driver ? /* @__PURE__ */ jsx5(Badge, { className: cn("shrink-0", driverBadge.className), style: driverBadge.style, children: driver }) : null,
+          /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-xs text-muted-foreground", style: { opacity: 0.7 }, children: formatRelativeTime(frameUpdatedAt(frame, props.snapshotUpdatedAt)) }),
+          /* @__PURE__ */ jsx5(
             "svg",
             {
               viewBox: "0 0 16 16",
               className: cn("h-3 w-3 shrink-0 text-muted-foreground transition-transform", expanded && "rotate-90"),
               fill: "currentColor",
               "aria-hidden": "true",
-              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" })
+              children: /* @__PURE__ */ jsx5("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-4 pl-12 sm:px-6 sm:pl-14", children: [
-      showDetailText ? /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: detailText }) : null,
-      /* @__PURE__ */ jsx(ExplainabilityStrip, { frame, lane: "next" }),
-      /* @__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: impactLabel(frame) }),
-        driver ? /* @__PURE__ */ jsx(Accent, { children: driver }) : null,
-        props.movement ? /* @__PURE__ */ jsx(Accent, { children: props.movement === "up" ? "rising in queue" : "falling in queue" }) : null,
-        /* @__PURE__ */ jsxs("span", { children: [
+    expanded ? /* @__PURE__ */ jsxs4("div", { className: "space-y-3 px-4 pb-4 pl-12 sm:px-6 sm:pl-14", children: [
+      showDetailText ? /* @__PURE__ */ jsx5("p", { className: "text-sm leading-relaxed text-muted-foreground", children: detailText }) : null,
+      /* @__PURE__ */ jsx5(ExplainabilityStrip, { frame, lane: "next" }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx5("span", { children: impactLabel(frame) }),
+        driver ? /* @__PURE__ */ jsx5(Accent, { children: driver }) : null,
+        props.movement ? /* @__PURE__ */ jsx5(Accent, { children: props.movement === "up" ? "rising in queue" : "falling in queue" }) : null,
+        /* @__PURE__ */ jsxs4("span", { children: [
           "updated ",
           formatRelativeTime(frameUpdatedAt(frame, props.snapshotUpdatedAt))
         ] }),
-        itemLink ? /* @__PURE__ */ jsx(
+        itemLink ? /* @__PURE__ */ jsx5(
           "a",
           {
             href: itemLink,
@@ -1643,7 +1563,7 @@ function NextRow(props) {
             children: primaryLinkLabel(frame)
           }
         ) : null,
-        activityLink ? /* @__PURE__ */ jsx(
+        activityLink ? /* @__PURE__ */ jsx5(
           "a",
           {
             href: activityLink,
@@ -1652,9 +1572,9 @@ function NextRow(props) {
           }
         ) : null
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-1", children: [
-        /* @__PURE__ */ jsx(IssueCommentComposer, { frame, pendingId: props.pendingId, onComment: props.onComment }),
-        /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-2 pt-1", children: [
+        /* @__PURE__ */ jsx5(IssueCommentComposer, { frame, pendingId: props.pendingId, onComment: props.onComment }),
+        /* @__PURE__ */ jsx5(
           FrameActions,
           {
             frame,
@@ -1671,9 +1591,9 @@ function NextRow(props) {
   ] });
 }
 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(
+  return /* @__PURE__ */ jsxs4("section", { className: "border border-border/80 bg-card", children: [
+    /* @__PURE__ */ jsx5("div", { className: "border-b border-border/80 px-4 py-2.5 sm:px-6", children: /* @__PURE__ */ jsx5("h2", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Next" }) }),
+    props.rows.length === 0 ? /* @__PURE__ */ jsx5("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__ */ jsx5(
       NextRow,
       {
         rank: i + 1,
@@ -1697,21 +1617,21 @@ function AmbientRow(props) {
   const { frame, snapshotUpdatedAt } = props;
   const href = itemHref(frame, props.companyPrefix);
   const unread = isFrameUnreadInSnapshot(frame, props.snapshot);
-  const content = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-2.5 sm:px-6", children: [
-    /* @__PURE__ */ jsx(UnreadDot, { visible: unread, tone: "muted", reserveSpace: true }),
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] text-muted-foreground", children: renderTitle(frame) }),
-    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground/80", children: sourceLabel(frame) }),
-    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground/70", children: formatRelativeTime(frameUpdatedAt(frame, snapshotUpdatedAt)) })
+  const content = /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3 px-4 py-2.5 sm:px-6", children: [
+    /* @__PURE__ */ jsx5(UnreadDot, { visible: unread, tone: "muted", reserveSpace: true }),
+    /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate text-[13px] text-muted-foreground", children: renderTitle(frame) }),
+    /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-xs text-muted-foreground/80", children: sourceLabel(frame) }),
+    /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-xs text-muted-foreground/70", children: formatRelativeTime(frameUpdatedAt(frame, snapshotUpdatedAt)) })
   ] });
-  return /* @__PURE__ */ jsx("div", { style: { borderBottomWidth: 1, borderBottomColor: "var(--border)" }, className: "last:border-b-0", children: href ? /* @__PURE__ */ jsx("a", { href, className: "block transition-colors hover:bg-accent/40", children: content }) : content });
+  return /* @__PURE__ */ jsx5("div", { style: { borderBottomWidth: 1, borderBottomColor: "var(--border)" }, className: "last:border-b-0", children: href ? /* @__PURE__ */ jsx5("a", { href, className: "block transition-colors hover:bg-accent/40", children: content }) : content });
 }
 function AmbientLane(props) {
-  return /* @__PURE__ */ jsxs("section", { style: { borderWidth: 1, borderColor: "var(--border)" }, className: "mt-2 bg-card", "aria-label": "Ambient attention", 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/80", children: "Ambient" }) }),
-    props.rows.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-4 text-sm text-muted-foreground sm:px-6", children: [
-      /* @__PURE__ */ jsx(QuietMark, {}),
-      /* @__PURE__ */ jsx("span", { children: "Nothing in peripheral view." })
-    ] }) : props.rows.map((row) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs4("section", { style: { borderWidth: 1, borderColor: "var(--border)" }, className: "mt-2 bg-card", "aria-label": "Ambient attention", children: [
+    /* @__PURE__ */ jsx5("div", { style: { borderBottomWidth: 1, borderBottomColor: "var(--border)" }, className: "px-4 py-2.5 sm:px-6", children: /* @__PURE__ */ jsx5("h2", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground/80", children: "Ambient" }) }),
+    props.rows.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3 px-4 py-4 text-sm text-muted-foreground sm:px-6", children: [
+      /* @__PURE__ */ jsx5(QuietMark, {}),
+      /* @__PURE__ */ jsx5("span", { children: "Nothing in peripheral view." })
+    ] }) : props.rows.map((row) => /* @__PURE__ */ jsx5(
       AmbientRow,
       {
         frame: row.frame,
@@ -1731,23 +1651,23 @@ function DashboardWidget(props) {
   const data = model.snapshot;
   const loading = model.loading;
   const error = model.error;
-  if (!companyId) return /* @__PURE__ */ jsx(MessageCard, { title: `Open ${brand.wordmark}`, body: `Open a company to see ${brand.wordmark}.` });
-  if (loading) return /* @__PURE__ */ jsx(WidgetLoadingState, { label: brand.loadingLabel });
-  if (error) return /* @__PURE__ */ jsx(MessageCard, { title: "Plugin error", body: error.message });
-  if (!data) return /* @__PURE__ */ jsx(MessageCard, { title: brand.wordmark, body: brand.headingEmptyState });
+  if (!companyId) return /* @__PURE__ */ jsx5(MessageCard, { title: `Open ${brand.wordmark}`, body: `Open a company to see ${brand.wordmark}.` });
+  if (loading) return /* @__PURE__ */ jsx5(WidgetLoadingState, { label: brand.loadingLabel });
+  if (error) return /* @__PURE__ */ jsx5(MessageCard, { title: "Plugin error", body: error.message });
+  if (!data) return /* @__PURE__ */ jsx5(MessageCard, { title: brand.wordmark, body: brand.headingEmptyState });
   const posture = postureForSnapshot(data);
   const leadingText = data.now ? recommendedMoveValue(data.now) ?? data.now.title : null;
   const actionable = actionableLabel(data);
   const borderStyle = posture.label === "busy" ? { borderLeftWidth: 2, borderLeftColor: ACCENT_COLOR } : posture.label === "elevated" ? { borderLeftWidth: 2, borderLeftColor: ACCENT_BORDER } : void 0;
-  return /* @__PURE__ */ jsxs("a", { href, className: "block border border-border bg-card px-4 py-3 shadow-sm transition-colors hover:bg-accent/40", style: borderStyle, 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__ */ jsx("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 }),
-        actionable ? /* @__PURE__ */ jsx(Accent, { className: "text-[11px]", children: actionable }) : null
+  return /* @__PURE__ */ jsxs4("a", { href, className: "block border border-border bg-card px-4 py-3 shadow-sm transition-colors hover:bg-accent/40", style: borderStyle, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx5(Accent, { className: "pt-0.5 text-sm", children: posture.glyph }),
+      /* @__PURE__ */ jsx5("div", { className: "min-w-0", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2", children: [
+        /* @__PURE__ */ jsx5(Accent, { className: "font-semibold tracking-[0.04em]", children: brand.wordmark }),
+        /* @__PURE__ */ jsx5(Accent, { className: "text-[11px]", children: posture.label }),
+        actionable ? /* @__PURE__ */ jsx5(Accent, { className: "text-[11px]", children: actionable }) : null
       ] }) }),
-      /* @__PURE__ */ jsxs("span", { className: "ml-auto tabular-nums text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "ml-auto tabular-nums text-muted-foreground", children: [
         "now ",
         data.counts.now,
         " \xB7 next ",
@@ -1756,7 +1676,7 @@ function DashboardWidget(props) {
         data.counts.ambient
       ] })
     ] }),
-    leadingText ? /* @__PURE__ */ jsx(
+    leadingText ? /* @__PURE__ */ jsx5(
       "div",
       {
         className: "mt-2 text-sm font-medium leading-5 text-foreground",
@@ -1768,7 +1688,7 @@ function DashboardWidget(props) {
         },
         children: leadingText
       }
-    ) : /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm text-muted-foreground", children: "No active interruption right now." })
+    ) : /* @__PURE__ */ jsx5("div", { className: "mt-2 text-sm text-muted-foreground", children: "No active interruption right now." })
   ] });
 }
 function AttentionSidebarLink({ context }) {
@@ -1780,7 +1700,7 @@ function AttentionSidebarLink({ context }) {
   const merged = model.snapshot;
   const actionable = merged ? actionableCount(merged) : 0;
   const unread = unreadCount(merged);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs4(
     "a",
     {
       href,
@@ -1790,8 +1710,8 @@ function AttentionSidebarLink({ context }) {
         isActive ? "bg-accent text-foreground" : "text-foreground/80 hover:bg-accent/50 hover:text-foreground"
       ),
       children: [
-        /* @__PURE__ */ jsxs("span", { className: "relative shrink-0", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs4("span", { className: "relative shrink-0", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxs4(
             "svg",
             {
               viewBox: "0 0 24 24",
@@ -1802,17 +1722,17 @@ function AttentionSidebarLink({ context }) {
               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__ */ jsx5("circle", { cx: "12", cy: "12", r: "9" }),
+                /* @__PURE__ */ jsx5("path", { d: "m14.3 8 5.2 9" }),
+                /* @__PURE__ */ jsx5("path", { d: "M9.7 8h10.4" }),
+                /* @__PURE__ */ jsx5("path", { d: "m7.4 12 5.2-9" }),
+                /* @__PURE__ */ jsx5("path", { d: "m9.7 16-5.2-9" }),
+                /* @__PURE__ */ jsx5("path", { d: "M14.3 16H3.9" }),
+                /* @__PURE__ */ jsx5("path", { d: "m16.6 12-5.2 9" })
               ]
             }
           ),
-          unread > 0 ? /* @__PURE__ */ jsx(
+          unread > 0 ? /* @__PURE__ */ jsx5(
             "span",
             {
               className: "absolute -right-1 -top-1 h-2 w-2 rounded-full",
@@ -1820,8 +1740,8 @@ function AttentionSidebarLink({ context }) {
             }
           ) : null
         ] }),
-        /* @__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 }) : unread > 0 ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx5("span", { className: "flex-1 truncate", children: brand.wordmark }),
+        actionable > 0 ? /* @__PURE__ */ jsx5("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 }) : unread > 0 ? /* @__PURE__ */ jsx5(
           "span",
           {
             className: "inline-flex items-center justify-center rounded-full border px-1.5 py-0.5 text-xs leading-none font-medium",
@@ -1840,182 +1760,36 @@ function AttentionPage(props) {
   const snapshot = model.snapshot;
   const loading = model.loading;
   const error = model.error;
-  const acknowledge = usePluginAction("acknowledge-frame");
-  const commentOnIssue = usePluginAction("comment-on-issue");
-  const recordApprovalResponse = usePluginAction("record-approval-response");
-  const [pendingId, setPendingId] = useState(null);
-  const [statusOverride, setStatusOverride] = useState(null);
-  const [localSuppressions, setLocalSuppressions] = useState({});
-  useEffect(() => {
-    if (!statusOverride) return;
-    const timer = window.setTimeout(() => {
-      setStatusOverride(null);
-    }, 4e3);
-    return () => {
-      window.clearTimeout(timer);
-    };
-  }, [statusOverride]);
-  const persistedSuppressions = useMemo(
-    () => suppressionMapFromReview(model.review),
-    [model.review]
-  );
-  const effectiveSuppressions = useMemo(
-    () => ({ ...persistedSuppressions, ...localSuppressions }),
-    [persistedSuppressions, localSuppressions]
-  );
-  const displaySnapshot = useMemo(
-    () => applyLocalSuppressions(snapshot, effectiveSuppressions),
-    [snapshot, effectiveSuppressions]
-  );
+  const displaySnapshot = snapshot;
   const backgroundErrorMessage = displaySnapshot && error ? `Sync issue: ${error.message}` : null;
-  const posture = useMemo(() => displaySnapshot ? postureForSnapshot(displaySnapshot) : null, [displaySnapshot]);
-  const nextRows = useMemo(
+  const posture = useMemo2(() => displaySnapshot ? postureForSnapshot(displaySnapshot) : null, [displaySnapshot]);
+  const nextRows = useMemo2(
     () => displaySnapshot ? displaySnapshot.next.map((frame) => ({ frame, lane: "next" })) : [],
     [displaySnapshot]
   );
-  const ambientRows = useMemo(
+  const ambientRows = useMemo2(
     () => displaySnapshot ? displaySnapshot.ambient.map((frame) => ({ frame, lane: "ambient" })) : [],
     [displaySnapshot]
   );
   const nextMovement = useQueueMovement(nextRows.map((row) => row.frame));
-  useEffect(() => {
-    if (!snapshot) return;
-    setLocalSuppressions((current) => {
-      const nextEntries = Object.entries(current).filter(([taskId, suppressedAt]) => {
-        const frames = [
-          ...snapshot.now ? [snapshot.now] : [],
-          ...snapshot.next,
-          ...snapshot.ambient
-        ];
-        const matching = frames.filter((frame) => frame.taskId === taskId);
-        if (matching.length === 0 && persistedSuppressions[taskId]) return false;
-        if (matching.length === 0) return false;
-        return matching.some((frame) => frameUpdatedAt(frame, snapshot.updatedAt).localeCompare(suppressedAt) <= 0);
-      });
-      if (nextEntries.length === Object.keys(current).length) return current;
-      return Object.fromEntries(nextEntries);
-    });
-  }, [snapshot, persistedSuppressions]);
-  function nudgeRefresh() {
-    model.refresh();
-    window.setTimeout(() => model.refresh(), 500);
-  }
-  async function acknowledgeFrame(frame) {
-    setPendingId(frame.id);
-    const suppressedAt = (/* @__PURE__ */ new Date()).toISOString();
-    setLocalSuppressions((current) => ({ ...current, [frame.taskId]: suppressedAt }));
-    try {
-      await acknowledge({ companyId, taskId: frame.taskId, interactionId: frame.interactionId });
-      setStatusOverride(acknowledgeSuccessMessage(compactTitle(frame)));
-      nudgeRefresh();
-    } catch (actionError) {
-      setLocalSuppressions((current) => {
-        const next = { ...current };
-        delete next[frame.taskId];
-        return next;
-      });
-      setStatusOverride(acknowledgeFailureMessage(actionError));
-    } finally {
-      setPendingId(null);
-    }
-  }
-  async function commentOnIssueFrame(frame, body) {
-    const issueId = entityIdFromFrame(frame);
-    if (!companyId || !issueId || entityTypeFromFrame(frame) !== "issue") {
-      setStatusOverride(issueFrameUnsupportedMessage());
-      return;
-    }
-    setPendingId(frame.id);
-    try {
-      await commentOnIssue({ companyId, taskId: frame.taskId, issueId, body });
-      setStatusOverride(commentSuccessMessage(compactTitle(frame)));
-      nudgeRefresh();
-    } catch (actionError) {
-      setStatusOverride(commentFailureMessage(actionError));
-    } finally {
-      setPendingId(null);
-    }
-  }
-  async function submitApprovalDecision(frame, decision) {
-    const approvalId = approvalIdForFrame(frame);
-    if (!approvalId) {
-      setStatusOverride(approvalFrameUnsupportedMessage());
-      return;
-    }
-    setPendingId(frame.id);
-    const suppressedAt = (/* @__PURE__ */ new Date()).toISOString();
-    setLocalSuppressions((current) => ({ ...current, [frame.taskId]: suppressedAt }));
-    try {
-      const actionPath = decision === "approve" ? "approve" : "reject";
-      await paperclipApiFetch(`/api/approvals/${approvalId}/${actionPath}`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({}),
-        expectJson: false
-      });
-      await recordApprovalResponse({
-        companyId,
-        taskId: frame.taskId,
-        interactionId: frame.interactionId,
-        decision
-      });
-      setStatusOverride(approvalDecisionSuccessMessage(compactTitle(frame), decision));
-      nudgeRefresh();
-    } catch (actionError) {
-      setLocalSuppressions((current) => {
-        const next = { ...current };
-        delete next[frame.taskId];
-        return next;
-      });
-      setStatusOverride(approvalDecisionFailureMessage(actionError));
-    } finally {
-      setPendingId(null);
-    }
-  }
-  async function requestApprovalRevision(frame) {
-    const approvalId = approvalIdForFrame(frame);
-    if (!approvalId) {
-      setStatusOverride(approvalFrameUnsupportedMessage());
-      return;
-    }
-    setPendingId(frame.id);
-    const suppressedAt = (/* @__PURE__ */ new Date()).toISOString();
-    setLocalSuppressions((current) => ({ ...current, [frame.taskId]: suppressedAt }));
-    try {
-      await paperclipApiFetch(`/api/approvals/${approvalId}/request-revision`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({}),
-        expectJson: false
-      });
-      await recordApprovalResponse({
-        companyId,
-        taskId: frame.taskId,
-        interactionId: frame.interactionId,
-        decision: "request-revision"
-      });
-      setStatusOverride(approvalRevisionSuccessMessage(compactTitle(frame)));
-      nudgeRefresh();
-    } catch (actionError) {
-      setLocalSuppressions((current) => {
-        const next = { ...current };
-        delete next[frame.taskId];
-        return next;
-      });
-      setStatusOverride(approvalRevisionFailureMessage(actionError));
-    } finally {
-      setPendingId(null);
-    }
-  }
-  if (!companyId) return /* @__PURE__ */ jsx(MessageCard, { title: `Open ${brand.wordmark}`, body: `Select a company to open ${brand.wordmark}.` });
-  if (!displaySnapshot && loading) return /* @__PURE__ */ jsx(PageLoadingState, { label: "Loading attention center" });
-  if (!displaySnapshot && error) return /* @__PURE__ */ jsx(MessageCard, { title: "Plugin error", body: error.message });
+  const {
+    pendingId,
+    statusOverride,
+    holdNowFrame,
+    acknowledgeFrame,
+    commentOnIssueFrame,
+    submitApprovalDecision,
+    requestApprovalRevision
+  } = useFocusPageActions({
+    companyId,
+    displaySnapshot,
+    refresh: model.refresh
+  });
+  if (!companyId) return /* @__PURE__ */ jsx5(MessageCard, { title: `Open ${brand.wordmark}`, body: `Select a company to open ${brand.wordmark}.` });
+  if (!displaySnapshot && loading) return /* @__PURE__ */ jsx5(PageLoadingState, { label: "Loading attention center" });
+  if (!displaySnapshot && error) return /* @__PURE__ */ jsx5(MessageCard, { title: "Plugin error", body: error.message });
   if (!displaySnapshot || !posture) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx5(
       MessageCard,
       {
         title: `No ${brand.wordmark} State Yet`,
@@ -2023,8 +1797,8 @@ function AttentionPage(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx5(
       NowPane,
       {
         snapshot: displaySnapshot,
@@ -2033,6 +1807,7 @@ function AttentionPage(props) {
         companyPrefix: props.context.companyPrefix,
         counts: displaySnapshot.counts,
         pendingId,
+        onEngageFocus: holdNowFrame,
         onApprove: (frame) => submitApprovalDecision(frame, "approve"),
         onReject: (frame) => submitApprovalDecision(frame, "reject"),
         onRequestRevision: requestApprovalRevision,
@@ -2040,7 +1815,7 @@ function AttentionPage(props) {
         onComment: commentOnIssueFrame
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx5(
       NextLane,
       {
         snapshot: displaySnapshot,
@@ -2056,7 +1831,7 @@ function AttentionPage(props) {
         onComment: commentOnIssueFrame
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx5(
       AmbientLane,
       {
         snapshot: displaySnapshot,
@@ -2065,7 +1840,7 @@ function AttentionPage(props) {
         companyPrefix: props.context.companyPrefix
       }
     ),
-    /* @__PURE__ */ jsx(StatusToast, { message: statusOverride ?? backgroundErrorMessage })
+    /* @__PURE__ */ jsx5(StatusToast, { message: statusOverride ?? backgroundErrorMessage })
   ] });
 }
 export {