@tomismeta/paperclip-aperture 0.2.2 → 0.3.1

package/README.md

@@ -64,6 +64,7 @@ and agents                             attention now?    actually sees     to th
 
 - a Focus surface inside Paperclip
 - ranked `now`, `next`, and `ambient` attention lanes
+- embedded explainability in the Focus UI, including `Why now`, `Why next`, confidence, signals, thread context, and related activity
 - approval handling, including budget-specific approval semantics
 - issue-aware operator language such as `review required`, `blocked`, and targeted recommended moves
 - agent-aware routing that distinguishes known company agents from human/operator roles when issue text references them
@@ -75,13 +76,31 @@ and agents                             attention now?    actually sees     to th
 - durable acknowledge/suppression behavior backed by plugin state and ledger replay
 - a sidebar entry, page, and dashboard widget
 
+## Explainability
+
+Focus is meant to be more legible than a smart inbox.
+
+The current `0.3.x` explainability slice keeps reasoning attached to the cards you are already acting on:
+
+- `Why now` on the active card explains why the current item outranks the rest of the queue
+- `Why next` on queued rows explains why something is staged behind the current top item
+- `Confidence` shows how strong the semantic signal is when the plugin has one
+- `Signals` surfaces the specific factors that pushed the item into attention
+- `Thread context` and `Related activity` help explain whether an item is part of a broader episode or continuation
+
+The intent is not to expose every internal scoring detail. It is to help an operator answer:
+
+- why did this surface?
+- why is it in this lane?
+- how much should I trust this judgment?
+
 ## Package Boundary
 
 This plugin treats Paperclip as the host runtime and UI shell, while embedding [Aperture Core](https://github.com/tomismeta/aperture/tree/main/packages/core) through the npm package [`@tomismeta/aperture-core`](https://www.npmjs.com/package/@tomismeta/aperture-core).
 
 It is a pure SDK integration: Aperture Core is used as-is inside a self-contained Paperclip plugin, with no changes to Aperture Core or Paperclip core.
 
-For `0.2.x`, the boundary works like this:
+For `0.3.x`, the boundary works like this:
 
 - the plugin worker owns Aperture ingestion, replay, review state, and display composition
 - Paperclip remains the system of record for issue and approval writes
@@ -129,6 +148,8 @@ Then open `http://127.0.0.1:3100/APE/aperture` and verify:
 - approval actions update Focus correctly
 - resolved blocker comments downgrade stale `Now` items
 - attached issue documents downgrade stale `share the memo/spec` review blockers into monitor-only follow-up
+- the active card exposes `Why now`
+- expanded queued rows expose `Why next`
 
 ## Links
 

package/dist/manifest.js

@@ -1,7 +1,7 @@
 const manifest = {
   id: "tomismeta.paperclip-aperture",
   apiVersion: 1,
-  version: "0.2.2",
+  version: "0.3.1",
   displayName: "Paperclip Aperture",
   description: "The live attention layer for Paperclip, powered by Aperture's deterministic attention engine.",
   author: "@tomismeta",

package/dist/ui/index.js

@@ -123,6 +123,82 @@ function mergeStoredFrames(snapshot, companyId, candidates, review, nowIso = (/*
   }, 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 "active":
+      return "This is the most urgent item in the queue right now.";
+    case "queued":
+      return "This is queued 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",
@@ -223,6 +299,10 @@ function approvalRecordToFrame(record) {
   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}`,
@@ -256,17 +336,20 @@ function approvalRecordToFrame(record) {
         ...budgetOverride ? [{ id: "request-revision", label: "Request revision", kind: "cancel", emphasis: "secondary" }] : []
       ]
     },
-    provenance: {
-      whyNow: approvalBlockingWhyNow(budgetOverride),
-      factors: budgetOverride ? ["budget stop", "approval", "operator decision"] : ["approval", "operator decision"]
-    },
+    provenance,
     timing: {
       createdAt: record.createdAt,
       updatedAt
     },
     metadata: {
       approvalStatus: record.status,
-      approvalType: record.type
+      approvalType: record.type,
+      attention: {
+        rationale: provenance.factors
+      },
+      semantic: {
+        confidence: "high"
+      }
     }
   };
 }
@@ -325,12 +408,13 @@ function approvalRevisionFailureMessage(error) {
 // src/ui/index.tsx
 import { Fragment, 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 };
 function currentSurfaceBrand() {
   return {
     key: "focus",
     wordmark: "Focus",
-    supportCopy: "Powered by Aperture",
     headingEmptyState: "No focus state yet.",
     loadingLabel: "Loading Focus\u2026"
   };
@@ -346,6 +430,29 @@ function Accent({ children, className }) {
   const ref = useAccentColor();
   return /* @__PURE__ */ jsx("span", { ref, className, children });
 }
+function QuietMark({ size = "sm" }) {
+  const dimension = size === "md" ? 10 : 8;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "inline-block shrink-0 rounded-full border",
+      style: { width: dimension, height: dimension, borderColor: ACCENT_BORDER }
+    }
+  );
+}
+function useWideLayout(minWidth = 1024) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia(`(min-width: ${minWidth}px)`);
+    const update = () => setMatches(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, [minWidth]);
+  return matches;
+}
 function cn(...parts) {
   return parts.filter(Boolean).join(" ");
 }
@@ -418,7 +525,7 @@ function driverLabel(frame) {
 function driverBadgeStyle() {
   return {
     className: "border-transparent",
-    style: { color: ACCENT_COLOR, backgroundColor: `${ACCENT_COLOR}14`, borderColor: `${ACCENT_COLOR}40` }
+    style: { color: ACCENT_COLOR, backgroundColor: ACCENT_BG, borderColor: ACCENT_BORDER }
   };
 }
 function requestDescriptor(frame) {
@@ -459,6 +566,15 @@ function supportingLine(frame, lane) {
   if (owner && lane === "active" && entityTypeFromFrame(frame) === "issue") {
     return issueNeedsActionFromLine(owner);
   }
+  if (lane === "active") {
+    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;
 }
@@ -552,9 +668,11 @@ function isFrameUnreadInSnapshot(frame, snapshot) {
   if (!seenAt) return true;
   return frameUpdatedAt(frame, snapshot.updatedAt).localeCompare(seenAt) > 0;
 }
-function UnreadDot({ visible }) {
-  if (!visible) return null;
-  return /* @__PURE__ */ jsx("span", { className: "inline-block h-2 w-2 rounded-full shrink-0", style: ACCENT_BG_STYLE, "aria-label": "Unread attention item" });
+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: [
@@ -619,7 +737,7 @@ function StatusToast({ message }) {
     "div",
     {
       className: cn(
-        "pointer-events-none fixed bottom-6 right-6 z-50 transition-all duration-200",
+        "pointer-events-none fixed bottom-6 left-1/2 z-50 -translate-x-1/2 transition-all duration-200",
         message ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0"
       ),
       "aria-live": "polite",
@@ -836,21 +954,26 @@ function Badge(props) {
   );
 }
 function ActionButton(props) {
-  const toneClass = props.tone === "primary" ? "bg-green-700 text-white hover:bg-green-600" : props.tone === "danger" ? "bg-destructive text-white hover:bg-destructive/90 dark:bg-destructive/60" : "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50";
+  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]",
+        "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
     }
   );
@@ -863,8 +986,8 @@ function QueueMovementBadge({ movement }) {
       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_COLOR}12`,
-        borderColor: `${ACCENT_COLOR}33`
+        backgroundColor: ACCENT_BG,
+        borderColor: ACCENT_BORDER
       },
       children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: movement === "up" ? "\u2191" : "\u2193" }),
@@ -909,21 +1032,24 @@ function FrameActions(props) {
     ActionButton,
     {
       label: isPending ? "Saving\u2026" : "Acknowledge",
-      tone: "primary",
+      tone: "accent",
       disabled: isPending,
       onClick: () => void props.onAcknowledge(props.frame)
     }
   ) });
 }
+function visibleContextItems(frame) {
+  return (frame.context?.items ?? []).filter((item2) => item2.id !== ATTENTION_CONTEXT_IDS.recommendedMove);
+}
 function ContextItems({ frame }) {
-  const items = frame.context?.items ?? [];
+  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 || item2.id === ATTENTION_CONTEXT_IDS.recommendedMove) && "md:col-span-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 }),
@@ -933,14 +1059,90 @@ function ContextItems({ frame }) {
     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 === "queued" ? "Why next" : props.lane === "ambient" ? "Why ambient" : "Why now";
+  const whyNow = explanation.whyNow ?? judgmentLine(props.frame, props.lane);
+  const primaryLine = props.lane === "active" ? props.preferLaneReason ? explanation.laneReason : whyNow : whyNow;
+  const secondaryLine = props.lane === "active" ? !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 === "active" ? "Reasoning" : props.lane === "queued" ? "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("");
-  if (!isIssueFrame(props.frame)) return null;
+  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;
@@ -967,30 +1169,42 @@ function IssueCommentComposer(props) {
       {
         label,
         tone: triggerTone,
-        className: "w-full",
+        className: props.triggerFullWidth ? "w-full" : void 0,
         disabled: isPending,
         onClick: () => setOpen(true)
       }
     );
   }
-  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-2 border border-border bg-secondary/40 p-3", children: [
+  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: "grid grid-cols-2 gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
       /* @__PURE__ */ jsx(
         ActionButton,
         {
           label: "Cancel",
           tone: "secondary",
-          className: "w-full",
           disabled: isPending,
           onClick: () => {
             setOpen(false);
@@ -1002,8 +1216,7 @@ function IssueCommentComposer(props) {
         ActionButton,
         {
           label: isPending ? "Posting\u2026" : "Post comment",
-          tone: "primary",
-          className: "w-full",
+          tone: "accent",
           disabled: isPending || body.trim().length === 0,
           onClick: () => void submit()
         }
@@ -1016,22 +1229,23 @@ function NowDetails(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__ */ jsxs("div", { className: "border border-border bg-secondary/50 px-3 py-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Judgment" }),
-      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-foreground/90", children: judgmentLine(frame, "active") }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-2 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: [
-          "Amount requested: ",
-          requestedAmount(frame)
-        ] }) : null,
-        budgetReason(frame) ? /* @__PURE__ */ jsx("span", { children: budgetReason(frame) }) : null
-      ] })
+    /* @__PURE__ */ jsx(ExplainabilityPanel, { frame, lane: "active", 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: [
+        "Amount requested: ",
+        requestedAmount(frame)
+      ] }) : null,
+      budgetReason(frame) ? /* @__PURE__ */ jsx("span", { children: budgetReason(frame) }) : null
     ] }),
-    /* @__PURE__ */ jsx(ContextItems, { frame }),
+    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 })
+    ] }) : null,
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
       href ? /* @__PURE__ */ jsxs(
         "a",
@@ -1077,41 +1291,41 @@ function NowDetails(props) {
   ] });
 }
 function QuietNow() {
-  return /* @__PURE__ */ jsx("div", { className: "flex min-h-16 items-center", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Nothing active right now." }) });
+  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." })
+  ] });
 }
 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(() => {
+    setCommentOpen(false);
+    setCommentBody("");
+  }, [props.frame.id]);
+  useEffect(() => {
+    if (commentOpen) textareaRef.current?.focus();
+  }, [commentOpen]);
+  async function submitComment() {
+    const nextBody = commentBody.trim();
+    if (!nextBody) return;
+    await props.onComment(props.frame, nextBody);
+    setCommentBody("");
+    setCommentOpen(false);
+  }
   return /* @__PURE__ */ jsxs(
-    "aside",
+    "div",
     {
-      className: "space-y-4 border border-border bg-secondary/20 p-4",
-      style: { flex: "0 1 20rem", minWidth: "18rem" },
+      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-xs font-medium uppercase tracking-[0.16em] text-muted-foreground", children: "Actions" }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          commentEnabled ? /* @__PURE__ */ jsx(
-            IssueCommentComposer,
-            {
-              frame: props.frame,
-              pendingId: props.pendingId,
-              onComment: props.onComment,
-              triggerTone: "primary",
-              triggerLabel: "Comment"
-            }
-          ) : null,
-          actionMode === "approval" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            isBudgetOverride(props.frame) ? /* @__PURE__ */ jsx(
-              ActionButton,
-              {
-                label: "Request revision",
-                tone: "secondary",
-                disabled: isPending,
-                className: "w-full",
-                onClick: () => void props.onRequestRevision(props.frame)
-              }
-            ) : null,
+        /* @__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(
               ActionButton,
               {
@@ -1132,17 +1346,37 @@ function NowActionRail(props) {
                 onClick: () => void props.onReject(props.frame)
               }
             )
-          ] }) : actionMode === "acknowledge" ? /* @__PURE__ */ jsx(
+          ] }),
+          isBudgetOverride(props.frame) ? /* @__PURE__ */ jsx(
             ActionButton,
             {
-              label: isPending ? "Saving\u2026" : "Acknowledge",
-              tone: commentEnabled ? "secondary" : "primary",
+              label: "Request revision",
+              tone: "secondary",
               disabled: isPending,
               className: "w-full",
-              onClick: () => void props.onAcknowledge(props.frame)
+              onClick: () => void props.onRequestRevision(props.frame)
             }
           ) : null
-        ] }),
+        ] }) : actionMode === "acknowledge" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          commentEnabled ? /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              label: "Comment",
+              tone: "accent",
+              disabled: isPending,
+              onClick: () => setCommentOpen(true)
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              label: isPending ? "Saving\u2026" : "Acknowledge",
+              tone: "accent",
+              disabled: isPending,
+              onClick: () => void props.onAcknowledge(props.frame)
+            }
+          )
+        ] }) : null,
         props.itemLink ? /* @__PURE__ */ jsxs(
           "a",
           {
@@ -1155,7 +1389,59 @@ function NowActionRail(props) {
               /* @__PURE__ */ jsx(ExternalLinkIcon, {})
             ]
           }
-        ) : null
+        ) : 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: [
+            "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(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: commentBody,
+              onChange: (event) => setCommentBody(event.target.value),
+              onKeyDown: (event) => {
+                if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                  event.preventDefault();
+                  void submitComment();
+                }
+                if (event.key === "Escape") {
+                  event.preventDefault();
+                  setCommentOpen(false);
+                  setCommentBody("");
+                }
+              },
+              rows: 4,
+              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: () => {
+                  setCommentOpen(false);
+                  setCommentBody("");
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                label: isPending ? "Posting\u2026" : "Post comment",
+                tone: "accent",
+                disabled: isPending || commentBody.trim().length === 0,
+                onClick: () => void submitComment()
+              }
+            )
+          ] })
+        ] }) : null
       ]
     }
   );
@@ -1163,6 +1449,7 @@ function NowActionRail(props) {
 function NowPane(props) {
   const frame = props.snapshot.active;
   const [detailsOpen, setDetailsOpen] = useState(false);
+  const wideLayout = useWideLayout(1120);
   const activeFrameId = frame?.id ?? null;
   const activeUnread = !!frame && (props.snapshot.review?.unread.active ?? 0) > 0;
   const itemLink = frame ? itemHref(frame, props.companyPrefix) : null;
@@ -1172,100 +1459,111 @@ function NowPane(props) {
   useEffect(() => {
     setDetailsOpen(false);
   }, [activeFrameId]);
-  return /* @__PURE__ */ jsxs("section", { className: "border border-border bg-card shadow-sm", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border bg-accent px-4 py-2.5 sm:px-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(Accent, { className: "text-base leading-none", children: props.posture.glyph }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
-            /* @__PURE__ */ jsx(Accent, { className: "text-[18px] leading-none font-bold tracking-[0.04em]", children: props.brand.wordmark }),
-            /* @__PURE__ */ jsx(Accent, { className: "text-xs leading-none", children: props.posture.label })
+  return /* @__PURE__ */ jsxs(
+    "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__ */ jsx("div", { className: "text-[10px] leading-none text-muted-foreground/60", children: props.brand.supportCopy })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs tabular-nums text-muted-foreground", children: [
-        /* @__PURE__ */ jsxs("span", { className: props.counts.active > 0 ? "font-semibold" : "", children: [
-          "now ",
-          props.counts.active > 0 ? /* @__PURE__ */ jsx(Accent, { children: props.counts.active }) : props.counts.active
-        ] }),
-        /* @__PURE__ */ jsxs("span", { className: props.counts.queued > 0 ? "font-semibold" : "", children: [
-          "next ",
-          props.counts.queued > 0 ? /* @__PURE__ */ jsx(Accent, { children: props.counts.queued }) : props.counts.queued
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs tabular-nums text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { className: props.counts.active > 0 ? "font-semibold" : "", children: [
+              "now ",
+              props.counts.active > 0 ? /* @__PURE__ */ jsx(Accent, { children: props.counts.active }) : props.counts.active
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: props.counts.queued > 0 ? "font-semibold" : "", children: [
+              "next ",
+              props.counts.queued > 0 ? /* @__PURE__ */ jsx(Accent, { children: props.counts.queued }) : props.counts.queued
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: props.counts.ambient > 0 ? "font-semibold" : "", children: [
+              "ambient ",
+              props.counts.ambient > 0 ? /* @__PURE__ */ jsx(Accent, { children: props.counts.ambient }) : props.counts.ambient
+            ] })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: props.counts.ambient > 0 ? "font-semibold" : "", children: [
-          "ambient ",
-          props.counts.ambient > 0 ? /* @__PURE__ */ jsx(Accent, { children: props.counts.ambient }) : props.counts.ambient
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: { height: "0.75rem" }, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 sm:px-6", children: !frame ? /* @__PURE__ */ jsx(QuietNow, {}) : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start gap-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-4", style: { flex: "1 1 40rem" }, children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: [
-            /* @__PURE__ */ jsx("span", { children: "Now" }),
-            /* @__PURE__ */ jsx("span", { className: "normal-case tracking-normal", style: { opacity: 0.6 }, children: sourceLabel(frame) })
-          ] }),
-          recommendedMove ? /* @__PURE__ */ jsx("div", { className: "max-w-4xl text-[2rem] font-semibold leading-tight text-foreground", children: recommendedMove }) : frame.summary ? /* @__PURE__ */ jsx("div", { className: "max-w-4xl text-[2rem] font-semibold leading-tight text-foreground", children: frame.summary }) : null,
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[1.75rem] font-medium leading-snug text-foreground/90", children: [
-            /* @__PURE__ */ jsx(UnreadDot, { visible: activeUnread }),
-            /* @__PURE__ */ jsx("span", { children: renderTitle(frame) })
-          ] }),
-          helperLine ? /* @__PURE__ */ jsx("p", { className: "max-w-3xl text-[0.95rem] 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
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 pt-1", children: /* @__PURE__ */ jsx(Accent, { children: /* @__PURE__ */ jsxs(
-            "button",
+        /* @__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(
+            "div",
             {
-              type: "button",
-              onClick: () => setDetailsOpen(!detailsOpen),
-              "aria-expanded": detailsOpen,
-              className: "flex items-center gap-1.5 text-xs font-medium transition-opacity hover:opacity-100",
-              style: { color: "inherit" },
+              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) })
+                  ] }),
+                  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) })
+                  ] }),
+                  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
+                  ] }),
+                  /* @__PURE__ */ jsx(InlineExplainability, { frame, lane: "active", preferLaneReason: !!helperLine }),
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx(Accent, { children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => 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(
+                          "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" })
+                          }
+                        ),
+                        detailsOpen ? "Hide context" : "Show context"
+                      ]
+                    }
+                  ) }) })
+                ] }),
                 /* @__PURE__ */ jsx(
-                  "svg",
+                  NowActionRail,
                   {
-                    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" })
+                    frame,
+                    lane: "active",
+                    wide: wideLayout,
+                    pendingId: props.pendingId,
+                    itemLink,
+                    onApprove: props.onApprove,
+                    onReject: props.onReject,
+                    onRequestRevision: props.onRequestRevision,
+                    onAcknowledge: props.onAcknowledge,
+                    onComment: props.onComment
                   }
-                ),
-                detailsOpen ? "Hide details" : "Show details"
+                )
               ]
             }
-          ) }) })
-        ] }),
-        /* @__PURE__ */ jsx(
-          NowActionRail,
-          {
-            frame,
-            lane: "active",
-            pendingId: props.pendingId,
-            itemLink,
-            onApprove: props.onApprove,
-            onReject: props.onReject,
-            onRequestRevision: props.onRequestRevision,
-            onAcknowledge: props.onAcknowledge,
-            onComment: props.onComment
-          }
-        )
-      ] }),
-      detailsOpen ? /* @__PURE__ */ jsx(
-        NowDetails,
-        {
-          frame,
-          snapshotUpdatedAt: props.snapshot.updatedAt,
-          companyPrefix: props.companyPrefix
-        }
-      ) : null
-    ] }) })
-  ] });
+          ),
+          detailsOpen ? /* @__PURE__ */ jsx(
+            NowDetails,
+            {
+              frame,
+              snapshotUpdatedAt: props.snapshot.updatedAt,
+              companyPrefix: props.companyPrefix
+            }
+          ) : null
+        ] }) })
+      ]
+    }
+  );
 }
 function NextRow(props) {
   const { frame } = props;
@@ -1278,6 +1576,7 @@ function NextRow(props) {
   const driverBadge = driverBadgeStyle();
   const detailText = judgmentLine(frame, "queued");
   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(
       "button",
@@ -1287,11 +1586,11 @@ 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(Accent, { className: "w-5 shrink-0 text-xs font-medium tabular-nums", children: String(props.rank).padStart(2, "0") }),
           /* @__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: "truncate text-sm font-medium text-foreground", children: renderTitle(frame) }),
-            secondaryText ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: secondaryText }) : null
+            /* @__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__ */ jsx(QueueMovementBadge, { movement: props.movement }),
           driver ? /* @__PURE__ */ jsx(Badge, { className: cn("shrink-0", driverBadge.className), style: driverBadge.style, children: driver }) : null,
@@ -1309,8 +1608,9 @@ function NextRow(props) {
         ]
       }
     ),
-    expanded ? /* @__PURE__ */ jsxs("div", { className: "space-y-3 px-4 pb-3 pl-12 sm:px-6 sm:pl-14", children: [
+    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: "queued" }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground", children: [
         /* @__PURE__ */ jsx("span", { children: impactLabel(frame) }),
         driver ? /* @__PURE__ */ jsx(Accent, { children: driver }) : null,
@@ -1336,19 +1636,21 @@ function NextRow(props) {
           }
         ) : null
       ] }),
-      /* @__PURE__ */ jsx(IssueCommentComposer, { frame, pendingId: props.pendingId, onComment: props.onComment }),
-      /* @__PURE__ */ jsx(
-        FrameActions,
-        {
-          frame,
-          lane: "queued",
-          pendingId: props.pendingId,
-          onApprove: props.onApprove,
-          onReject: props.onReject,
-          onRequestRevision: props.onRequestRevision,
-          onAcknowledge: props.onAcknowledge
-        }
-      )
+      /* @__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(
+          FrameActions,
+          {
+            frame,
+            lane: "queued",
+            pendingId: props.pendingId,
+            onApprove: props.onApprove,
+            onReject: props.onReject,
+            onRequestRevision: props.onRequestRevision,
+            onAcknowledge: props.onAcknowledge
+          }
+        )
+      ] })
     ] }) : null
   ] });
 }
@@ -1377,65 +1679,23 @@ function NextLane(props) {
 }
 function AmbientRow(props) {
   const { frame, snapshotUpdatedAt } = props;
-  const [expanded, setExpanded] = useState(false);
   const href = itemHref(frame, props.companyPrefix);
   const unread = isFrameUnreadInSnapshot(frame, props.snapshot);
-  const activityLink = activityHref(frame, props.companyPrefix);
-  return /* @__PURE__ */ jsxs("div", { style: { borderBottomWidth: 1, borderBottomColor: "var(--border)" }, className: "last:border-b-0", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setExpanded(!expanded),
-        "aria-expanded": expanded,
-        className: "flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-accent/50 sm:px-6",
-        children: [
-          /* @__PURE__ */ jsx(UnreadDot, { visible: unread }),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-muted-foreground/80", children: renderTitle(frame) }),
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", style: { opacity: 0.6 }, children: sourceLabel(frame) }),
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", style: { opacity: 0.55 }, children: formatRelativeTime(frameUpdatedAt(frame, snapshotUpdatedAt)) }),
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              viewBox: "0 0 16 16",
-              className: cn("h-3 w-3 shrink-0 text-muted-foreground transition-transform", expanded && "rotate-90"),
-              fill: "currentColor",
-              style: { opacity: 0.75 },
-              "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" })
-            }
-          )
-        ]
-      }
-    ),
-    expanded ? /* @__PURE__ */ jsxs("div", { className: "space-y-3 px-4 pb-3 sm:px-6", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: frame.summary ?? judgmentLine(frame, "ambient") }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        href ? /* @__PURE__ */ jsx(
-          "a",
-          {
-            href,
-            className: "text-xs font-medium underline underline-offset-2 text-muted-foreground hover:text-foreground",
-            children: primaryLinkLabel(frame)
-          }
-        ) : null,
-        activityLink ? /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: activityLink,
-            className: "text-xs font-medium underline underline-offset-2 text-muted-foreground hover:text-foreground",
-            children: "Open activity"
-          }
-        ) : null,
-        /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs uppercase tracking-[0.16em] text-muted-foreground/60", children: "Awareness only" })
-      ] })
-    ] }) : null
+  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)) })
   ] });
+  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 });
 }
 function AmbientLane(props) {
-  return /* @__PURE__ */ jsxs("section", { style: { borderWidth: 1, borderColor: "var(--border)" }, className: "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", style: { opacity: 0.6 }, children: "Ambient" }) }),
-    props.rows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-4 text-sm text-muted-foreground sm:px-6", style: { opacity: 0.4 }, children: "Nothing in peripheral view." }) : props.rows.map((row) => /* @__PURE__ */ jsx(
+  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(
       AmbientRow,
       {
         frame: row.frame,
@@ -1450,6 +1710,7 @@ function AmbientLane(props) {
 function DashboardWidget(props) {
   const companyId = props.context.companyId;
   const brand = currentSurfaceBrand();
+  const href = pluginPagePath(props.context.companyPrefix);
   const model = useAttentionModel(companyId);
   const data = model.snapshot;
   const loading = model.loading;
@@ -1459,20 +1720,19 @@ function DashboardWidget(props) {
   if (error) return /* @__PURE__ */ jsx(MessageCard, { title: "Plugin error", body: error.message });
   if (!data) return /* @__PURE__ */ jsx(MessageCard, { title: brand.wordmark, body: brand.headingEmptyState });
   const posture = postureForSnapshot(data);
-  return /* @__PURE__ */ jsxs("div", { className: "border border-border bg-card px-4 py-2.5 shadow-sm", children: [
+  const leadingText = data.active ? recommendedMoveValue(data.active) ?? data.active.title : null;
+  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__ */ jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
-          /* @__PURE__ */ jsx(Accent, { className: "font-semibold tracking-[0.04em]", children: brand.wordmark }),
-          /* @__PURE__ */ jsx(Accent, { className: "text-[11px]", children: posture.label }),
-          unreadCount(data) > 0 ? /* @__PURE__ */ jsxs(Accent, { className: "text-[11px]", children: [
-            "new ",
-            unreadCount(data)
-          ] }) : null
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[10px] leading-none text-muted-foreground/60", children: brand.supportCopy })
-      ] }),
+      /* @__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 }),
+        unreadCount(data) > 0 ? /* @__PURE__ */ jsxs(Accent, { className: "text-[11px]", children: [
+          "new ",
+          unreadCount(data)
+        ] }) : null
+      ] }) }),
       /* @__PURE__ */ jsxs("span", { className: "ml-auto tabular-nums text-muted-foreground", children: [
         "now ",
         data.counts.active,
@@ -1482,7 +1742,19 @@ function DashboardWidget(props) {
         data.counts.ambient
       ] })
     ] }),
-    data.active ? /* @__PURE__ */ jsx("div", { className: "mt-2 truncate text-sm font-medium text-foreground", children: data.active.title }) : /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm text-muted-foreground", children: "No active interruption right now." })
+    leadingText ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mt-2 text-sm font-medium leading-5 text-foreground",
+        style: {
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden"
+        },
+        children: leadingText
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm text-muted-foreground", children: "No active interruption right now." })
   ] });
 }
 function AttentionSidebarLink({ context }) {
@@ -1526,7 +1798,14 @@ function AttentionSidebarLink({ context }) {
           }
         ) }),
         /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: brand.wordmark }),
-        unread > 0 || 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: unread > 0 ? unread : actionable }) : null
+        unread > 0 || actionable > 0 ? unread > 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: unread }) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-flex items-center justify-center rounded-full border px-1.5 py-0.5 text-xs leading-none font-medium",
+            style: { color: ACCENT_COLOR, borderColor: ACCENT_BORDER, backgroundColor: "transparent" },
+            children: actionable
+          }
+        ) : null
       ]
     }
   );
@@ -1721,7 +2000,7 @@ function AttentionPage(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx(
       NowPane,
       {

package/dist/worker.js

@@ -12556,6 +12556,13 @@ function issueWhyNow(issue, analysis, documentSignal) {
 
 // src/aperture/reconciliation.ts
 var COMMENT_LOOKUP_CONCURRENCY = 6;
+function semanticMetadata(confidence, relationHints) {
+  const semantic = {
+    ...confidence ? { confidence } : {},
+    ...relationHints.length > 0 ? { relationHints } : {}
+  };
+  return Object.keys(semantic).length > 0 ? semantic : void 0;
+}
 function toIsoString2(value) {
   if (!value) return void 0;
   if (typeof value === "string") return value;
@@ -12623,6 +12630,7 @@ function issueFrame(issue, comment, documents, directory) {
   const owner = hasIntent(analysis, "resolution") || documentSignal.resolvesArtifactRequest ? null : analysis.owner;
   const move = issueRecommendedMove(issue, analysis, documentSignal);
   const target = analysis.blockingTarget;
+  const semantic = semanticMetadata(analysis.semanticConfidence, analysis.relationHints);
   return {
     lane,
     frame: {
@@ -12661,7 +12669,11 @@ function issueFrame(issue, comment, documents, directory) {
         issueStatus: issue.status,
         issuePriority: issue.priority,
         liveReconciled: true,
-        activityPath: comment ? "activity" : void 0
+        activityPath: comment ? "activity" : void 0,
+        attention: {
+          rationale: provenance.factors ?? []
+        },
+        ...semantic ? { semantic } : {}
       }
     }
   };
@@ -12719,7 +12731,13 @@ function agentFrame(agent) {
         agentStatus: agent.status,
         pauseReason: agent.pauseReason,
         liveReconciled: true,
-        activityPath: agent.status === "error" ? "activity" : void 0
+        activityPath: agent.status === "error" ? "activity" : void 0,
+        attention: {
+          rationale: provenance.factors ?? []
+        },
+        semantic: {
+          confidence: "high"
+        }
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomismeta/paperclip-aperture",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "type": "module",
   "private": false,
   "description": "The live attention layer for Paperclip, powered by Aperture's deterministic attention engine.",