@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/web/src/components/chat/MessageList.tsx

@@ -1,22 +1,139 @@
 import { useEffect, useRef } from "react";
 import { MessageBubble } from "./MessageBubble";
+import { pendingAskIndex } from "./InlineAskPanel";
 import { Empty } from "../ui";
 import { t } from "../../i18n";
-import type { ChatMsg } from "../../hooks/useChat";
+import type { AgentFace } from "../agents/AgentAvatar";
+import type { ChatMsg, QueuedTurn } from "../../hooks/useChat";
 
 interface Props {
   msgs: ChatMsg[];
+  /** Written while the current turn is still running, waiting behind it. They
+   *  are drawn at the foot of the thread, where they will land. */
+  queued?: QueuedTurn[];
+  onUnqueue?: (id: string) => void;
   onCopy: (text: string) => void;
+  /** Re-run the answer at this index (drop it and everything after). Absent →
+   *  no regenerate affordance (super-agent threads, a2a, previews). */
+  onRegenerate?: (index: number) => void;
+  /** Edit the user message at this index and re-send (drop everything after). */
+  onEdit?: (index: number, text: string) => void;
+  /** Who to draw next to an assistant turn. Screens that know the cast (chat,
+   *  inbox) pass it; the rest fall back to a neutral glyph. */
+  faceFor?: (msg: ChatMsg) => AgentFace;
+  /** Group style: name each speaker above their bubble, with a "traído por X"
+   *  tag. Off in a 1:1. */
+  showSpeaker?: boolean;
+  /** Resolve an agent slug to a display name (for the "traído por X" tag). */
+  nameOf?: (slug: string) => string;
+  /** Full vs simple (pelado) transcript layout. Default on = show tool groups. */
+  showTools?: boolean;
+  /** Smooth-scroll to the latest turn. Nested previews turn this off. */
+  autoscroll?: boolean;
+  /** Height of whatever floats over the bottom of the thread (the composer
+   *  dock). Rendered as trailing space so the last line of the conversation can
+   *  always be scrolled clear of it. */
+  bottomInset?: number;
+  /** Phone shaping: no per-bubble avatar, wider bubbles. On 390px the face is
+   *  36px of width spent repeating something the header already says. */
+  compact?: boolean;
+  /** Told when the reader arrives at, or leaves, the bottom of the thread — so
+   *  the host can offer a way back down while they are away from it. */
+  onAtBottomChange?: (atBottom: boolean) => void;
 }
 
-export function MessageList({ msgs, onCopy }: Props) {
+/** How close to the end still counts as being at it. A couple of lines of
+ *  slack: a sub-pixel scroll position or a rounding here and there should not
+ *  be what decides whether the next turn follows you. */
+const AT_BOTTOM_SLACK = 24;
+
+export function MessageList({
+  msgs,
+  queued = [],
+  onUnqueue,
+  onCopy,
+  onRegenerate,
+  onEdit,
+  faceFor,
+  showSpeaker,
+  nameOf,
+  showTools = true,
+  autoscroll = true,
+  bottomInset = 0,
+  compact,
+  onAtBottomChange,
+}: Props) {
   const bottomRef = useRef<HTMLDivElement | null>(null);
+  // Whether the reader is at the end. Read synchronously by the effect below,
+  // so it has to be a ref rather than state.
+  const pinned = useRef(true);
+  // What the host has been told, separately from what is true. Comparing
+  // against `pinned` alone swallowed the FIRST measurement whenever it happened
+  // to agree with the initial guess — and on a remount that left a host still
+  // showing "you are away from the bottom" for a list sitting at the bottom,
+  // with nothing that would ever correct it.
+  const reported = useRef<boolean | undefined>(undefined);
+  // Held in a ref so a host that hands over a fresh closure on every render
+  // does not tear down and rebuild the scroll listener underneath it.
+  const notify = useRef(onAtBottomChange);
+  notify.current = onAtBottomChange;
+
+  // Who owns "am I at the bottom", and the two things that follow from it.
+  //
+  // The dock over the bottom changes height while you use it — a draft wraps to
+  // a second line, the context panel opens, an attachment appears. Growing the
+  // trailing space alone would slide the last message underneath it, so a
+  // reader who was AT the bottom is carried back down. A reader who had
+  // scrolled up to re-read something is not.
+  useEffect(() => {
+    const el = bottomRef.current;
+    if (!el || !autoscroll) return;
+    const scroller = scrollParentOf(el);
+    if (!scroller) return;
+    const measure = () => {
+      const at = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight < AT_BOTTOM_SLACK;
+      pinned.current = at;
+      if (at === reported.current) return;
+      reported.current = at;
+      notify.current?.(at);
+    };
+    // Deliberately NOT measured here. At mount the list has not landed yet, so
+    // the honest answer is "miles from the bottom" — which would both flash the
+    // way-back button and, worse, tell the effect below not to land at all.
+    scroller.addEventListener("scroll", measure, { passive: true });
+    const ro = new ResizeObserver(() => {
+      if (pinned.current) el.scrollIntoView({ block: "end" });
+    });
+    ro.observe(el);
+    return () => {
+      scroller.removeEventListener("scroll", measure);
+      ro.disconnect();
+    };
+  }, [autoscroll]);
 
+  // A new turn follows the reader ONLY if the reader was already following it.
+  //
+  // This used to fire on every change to `msgs`, full stop: you scrolled up to
+  // re-read something, one more word arrived, and you were thrown back to the
+  // bottom mid-sentence. Leaving the end is a decision, and a message arriving
+  // is not a reason to overrule it — the way back down is offered instead, by
+  // whoever is hosting this list.
+  const landed = useRef(false);
   useEffect(() => {
+    if (!autoscroll) return;
+    // Opening a thread lands at the latest. That is where a conversation is
+    // read from — not a preference to be inferred from a scroll position that
+    // does not exist yet.
+    if (!landed.current) {
+      landed.current = true;
+      bottomRef.current?.scrollIntoView({ block: "end" });
+      return;
+    }
+    if (!pinned.current) return;
     bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
-  }, [msgs]);
+  }, [msgs, queued, autoscroll]);
 
-  if (msgs.length === 0) {
+  if (msgs.length === 0 && queued.length === 0) {
     return (
       <div className="grid h-full place-items-center p-6">
         <Empty>{t("project.chat.empty")}</Empty>
@@ -24,35 +141,65 @@ export function MessageList({ msgs, onCopy }: Props) {
     );
   }
 
-  const lastIdx = msgs.length - 1;
+  // Which turn's questions are still open — the one the composer is offering to
+  // answer. Everything else with an ask_questions call in it has been settled.
+  const askAt = pendingAskIndex(msgs);
   return (
     <div className="space-y-4 px-3 py-4">
       {msgs.map((m, i) => (
         <MessageBubble
           key={i}
           msg={m}
-          isLast={i === lastIdx}
+          askPending={i === askAt}
           isAskAnswer={isAnswerToAsk(msgs, i)}
           onCopy={onCopy}
+          onRegenerate={onRegenerate && m.role === "assistant" ? () => onRegenerate(i) : undefined}
+          onEdit={onEdit && m.role === "user" ? (text) => onEdit(i, text) : undefined}
+          compact={compact}
+          face={m.role === "assistant" ? faceFor?.(m) : undefined}
+          showSpeaker={showSpeaker}
+          nameOf={nameOf}
+          showTools={showTools}
         />
       ))}
-      <div ref={bottomRef} />
+      {/* Waiting their turn, under the answer they will follow. Same bubble as
+          any other — what you wrote is in the conversation the moment you send
+          it, whether or not the agent has got to it yet. */}
+      {queued.map((q) => (
+        <MessageBubble
+          key={q.id}
+          msg={q.msg}
+          onCopy={onCopy}
+          compact={compact}
+          queued
+          onUnqueue={onUnqueue ? () => onUnqueue(q.id) : undefined}
+          showTools={showTools}
+        />
+      ))}
+      <div ref={bottomRef} style={bottomInset ? { height: bottomInset } : undefined} />
     </div>
   );
 }
 
-// A user message is an "ask answer" when the preceding assistant turn ended on
-// an ask_questions tool call (its last tool part). The InlineAskPanel compiles
-// the user's picks into a single text reply, which we then render as a centered
-// full-width card instead of the standard right-aligned user bubble.
+/** The nearest ancestor that actually scrolls. */
+function scrollParentOf(el: HTMLElement): HTMLElement | null {
+  let p = el.parentElement;
+  while (p) {
+    const oy = getComputedStyle(p).overflowY;
+    if (oy === "auto" || oy === "scroll") return p;
+    p = p.parentElement;
+  }
+  return null;
+}
+
+// A user message is an "ask answer" when an unanswered ask_questions call stood
+// immediately before it — allowing for the line the agent says alongside its
+// questions, which is a turn of its own and used to break the match. The
+// InlineAskPanel compiles the user's picks into a single text reply, which we
+// then render as a centered full-width card instead of the standard
+// right-aligned user bubble.
 function isAnswerToAsk(msgs: ChatMsg[], i: number): boolean {
   const m = msgs[i];
   if (!m || m.role !== "user") return false;
-  const prev = msgs[i - 1];
-  if (!prev || prev.role !== "assistant") return false;
-  for (let j = prev.parts.length - 1; j >= 0; j--) {
-    const p = prev.parts[j];
-    if (p.kind === "tool") return p.tool === "ask_questions";
-  }
-  return false;
+  return pendingAskIndex(msgs.slice(0, i)) >= 0;
 }

package/src/interfaces/web/src/components/chat/ReasoningBlock.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { Brain, ChevronRight, Loader2 } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+
+// The model thinking out loud, shown on purpose.
+//
+// It used to arrive spliced into the answer as `<think>…</think>` and render as
+// part of the reply — the reader got the model's notes where the reply should
+// be. The adapters now keep the two apart, which left the thinking with nowhere
+// to go: correct, and invisible. This is where it goes.
+//
+// Open while it streams (that is the only moment it is worth watching, and it
+// fills the wait before the first word of the answer), collapsed once the
+// answer starts — unless the reader says otherwise, whose click wins from then
+// on. Never a bubble: this is not something the agent said to you.
+
+interface Props {
+  text: string;
+  /** Still being written. */
+  streaming?: boolean;
+}
+
+export function ReasoningBlock({ text, streaming }: Props) {
+  const [manual, setManual] = useState<boolean | null>(null);
+  const open = manual ?? !!streaming;
+
+  if (!text.trim()) return null;
+
+  return (
+    <div className="w-full overflow-hidden rounded-lg border border-border/60 bg-muted/10">
+      <button
+        type="button"
+        onClick={() => setManual(!open)}
+        aria-expanded={open}
+        className="flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-[12px] text-muted-foreground"
+      >
+        <ChevronRight
+          className={cn("size-3 shrink-0 transition-transform", open && "rotate-90")}
+        />
+        {streaming ? (
+          <Loader2 className="size-3.5 shrink-0 animate-spin text-violet-600 dark:text-violet-400" />
+        ) : (
+          <Brain className="size-3.5 shrink-0" />
+        )}
+        <span className="font-medium">
+          {streaming ? t("chat_ui.thinking_running") : t("chat_ui.thinking_label")}
+        </span>
+      </button>
+
+      {open && (
+        <p className="whitespace-pre-wrap border-t border-border/50 px-2.5 py-2 text-[12px] leading-relaxed text-muted-foreground italic">
+          {text}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/chat/SessionPicker.tsx

@@ -0,0 +1,182 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { ChevronDown } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { Conversations } from "../../lib/api";
+import { relativeWhen } from "../../lib/when";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import type { ChatKey, ChatSelectionMeta } from "./ChatList";
+
+/** Where a chat's sessions come from depends on who you are talking to: the
+ *  super-agent has channel threads, a project agent has conversation files. */
+export interface SessionRow {
+  key: ChatKey;
+  id: string;
+  label: string;
+  when: string;
+  channel?: string;
+  archived?: boolean;
+}
+
+/**
+ * Every session of one chat, fetched only when someone asks to see them — the
+ * list is navigation, not something the chat needs in order to render.
+ */
+export function useSessionRows(
+  pid: string,
+  agentSlug: string,
+  isSuper: boolean,
+  enabled: boolean,
+  channelScope?: string,
+) {
+  return useSWR<SessionRow[]>(
+    enabled ? `sessions:${pid}:${agentSlug}:${isSuper}:${channelScope ?? ""}` : null,
+    async () => {
+      // `channelScope` keeps this switcher in step with the surface it lives on:
+      // the inbox and the phone are web-only, so their session list must not
+      // offer a Telegram thread you'd never reach from there. Project-first
+      // navigation passes nothing and sees every channel.
+      const onScope = (ch?: string) => !channelScope || ch === channelScope;
+      // Archived ones are asked for HERE and nowhere else: this is the one
+      // list whose job is to offer every session back, including the ones put
+      // away. The sidebar and the inbox stay clear of them.
+      if (isSuper) {
+        const threads = await Conversations.threads(pid, true);
+        return threads
+          .filter((th) => onScope(th.channel))
+          .map((th) => ({
+            key: { kind: "thread", channel: th.channel, threadId: th.id } as ChatKey,
+            id: `${th.channel}:${th.id}`,
+            label: th.title || th.id,
+            when: th.last_ts || th.started_at || th.id,
+            channel: th.channel,
+            archived: th.archived,
+          }));
+      }
+      const convs = await Conversations.list(pid, agentSlug, true);
+      return convs
+        .filter((c) => onScope(c.channel))
+        .map((c) => ({
+          key: { kind: "conv", agentSlug, convId: c.id } as ChatKey,
+          id: c.id,
+          label: c.title || c.id,
+          when: c.ended_at || c.started_at || c.id,
+          channel: c.channel,
+          archived: c.archived,
+        }));
+    },
+  );
+}
+
+/** The id of the session currently open, in the same spelling `SessionRow.id`
+ *  uses — so the open one can be marked in the list. */
+export function currentSessionId(selected: ChatKey): string {
+  if (selected.kind === "conv") return selected.convId;
+  if (selected.kind === "thread") return `${selected.channel}:${selected.threadId}`;
+  return "";
+}
+
+/**
+ * Which thread you are reading, and the way to any of the others.
+ *
+ * This is the line under the agent's name on every surface. It used to be flat
+ * text on the desktop — the date of the thread you were in, with no way to
+ * reach the rest without leaving for the sidebar, which the inbox does not
+ * have. One control, two frames: the phone shows it as the header's second
+ * line, the desktop as the header's subtitle.
+ */
+export function SessionPicker({
+  pid,
+  agentSlug,
+  isSuper,
+  selected,
+  label,
+  onPick,
+  className,
+  channelScope,
+}: {
+  pid: string;
+  agentSlug: string;
+  isSuper: boolean;
+  selected: ChatKey;
+  /** What to show when closed — the thread's title, or "new session". */
+  label: string;
+  onPick: (key: ChatKey, meta?: ChatSelectionMeta) => void;
+  className?: string;
+  /** Limit the list to one channel (the inbox and the phone pass "web"). */
+  channelScope?: string;
+}) {
+  const current = currentSessionId(selected);
+  // `useSWR(null)` is the off switch: the list is fetched the moment someone
+  // reaches for it, not on every chat that gets opened. Armed on hover/focus so
+  // it is already there by the time the menu paints.
+  const [armed, setArmed] = useState(false);
+  const sessions = useSessionRows(pid, agentSlug, isSuper, armed, channelScope);
+  const rows = sessions.data || [];
+  const live = rows.filter((s) => !s.archived);
+  const archivedRows = rows.filter((s) => s.archived);
+
+  const renderRow = (s: SessionRow) => (
+    <DropdownMenuItem
+      key={s.id}
+      onClick={() => onPick(s.key, { archived: s.archived, title: s.label, channel: s.channel })}
+      className={cn("items-start gap-2", s.id === current && "bg-primary/10", s.archived && "opacity-70")}
+    >
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-[13px]">{s.label}</span>
+        {s.channel && <span className="text-[10px] text-muted-fg">{s.channel}</span>}
+      </span>
+      <span className="shrink-0 text-[10px] text-muted-fg">{relativeWhen(s.when, t as never)}</span>
+    </DropdownMenuItem>
+  );
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className={cn(
+          "flex min-w-0 max-w-full items-center gap-1 text-[11px] text-muted-fg hover:text-foreground",
+          className,
+        )}
+        aria-label={t("mobile.sessions")}
+        onPointerEnter={() => setArmed(true)}
+        onFocus={() => setArmed(true)}
+        onClick={() => setArmed(true)}
+      >
+        <span className="truncate">{label}</span>
+        <ChevronDown size={12} className="shrink-0 transition-transform data-[popup-open]:rotate-180" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" sideOffset={6} className="max-h-[60vh] w-72 overflow-y-auto">
+        {sessions.isLoading && (
+          <p className="px-2 py-2 text-sm text-muted-fg">{t("common.loading")}</p>
+        )}
+        {live.map(renderRow)}
+        {/* Put away, not gone. They sit under their own heading at the bottom so
+            the list stays about what you are likely to resume, while the way
+            back to an archived thread is still one scroll away. */}
+        {archivedRows.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="text-[10px] uppercase tracking-wide text-muted-fg">
+                {t("project.chat.archived_group")}
+              </DropdownMenuLabel>
+            </DropdownMenuGroup>
+            {archivedRows.map(renderRow)}
+          </>
+        )}
+        {sessions.data && !sessions.data.length && (
+          <p className="px-2 py-2 text-sm text-muted-fg">{t("mobile.no_sessions")}</p>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/interfaces/web/src/components/chat/SkillTrace.tsx

@@ -0,0 +1,183 @@
+import useSWR from "swr";
+import { ArrowUpRight, Sparkles } from "lucide-react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Tip } from "../ui/tip";
+import { Badge } from "../ui";
+import { Skills } from "../../lib/api";
+import { useProject } from "../../hooks/useProjects";
+import { t } from "../../i18n";
+
+export type InspectorTrace = {
+  embedder?: string;
+  /** Bodies inlined into this turn's system prompt. */
+  loaded?: string[];
+  /** Only the slug + one-line description made it in. */
+  hinted?: string[];
+  /** Top matches with their cosine similarity, when the stream carried them. */
+  scored?: { slug: string; sim: number }[];
+};
+
+/**
+ * The row of skill badges under an assistant turn: what the per-turn RAG put
+ * in the prompt. Each badge opens a card explaining what it cost the context
+ * (whole body vs. one line) and links to the skill itself — the badge names a
+ * thing you own, so it has to be reachable from where it is named.
+ */
+// How much of a near-miss is worth showing as "considered". The offline `tf`
+// fallback embedder scores everything low and compressed — an on-topic postbean
+// query lands around 0.18-0.28 — so the calibrated 0.40 hint bar hides even a
+// clearly relevant match. This low floor keeps those visible; it can't fully
+// separate signal from noise on `tf` (that needs a real embedder — ollama/
+// gemini), but it makes each round's top matches legible instead of silent.
+const CONSIDERED_MIN_SIM = 0.15;
+const MAX_CONSIDERED = 3;
+
+type BadgeVariant = "loaded" | "hint" | "considered";
+
+export function SkillTrace({ inspector }: { inspector: InspectorTrace }) {
+  const loaded = inspector.loaded || [];
+  const hinted = inspector.hinted || [];
+  // Near-misses: top scored matches that were neither loaded nor hinted. Shown
+  // dimmer so the per-turn RAG is legible every round — you can see what it
+  // weighed, not only what it injected.
+  const injected = new Set([...loaded, ...hinted]);
+  const considered = (inspector.scored || [])
+    .filter((s) => !injected.has(s.slug) && s.sim >= CONSIDERED_MIN_SIM)
+    .slice(0, MAX_CONSIDERED)
+    .map((s) => s.slug);
+
+  if (loaded.length === 0 && hinted.length === 0 && considered.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-1 text-[10px] text-sky-700 dark:text-sky-400/90">
+      <Tip content={t("shared_ui.skill_inspector_title", { embedder: inspector.embedder || "RAG" })}>
+        <span className="grid size-3.5 place-items-center">
+          <Sparkles size={10} />
+        </span>
+      </Tip>
+      {loaded.map((slug) => (
+        <SkillBadge key={`l-${slug}`} slug={slug} variant="loaded" inspector={inspector} />
+      ))}
+      {hinted.map((slug) => (
+        <SkillBadge key={`h-${slug}`} slug={slug} variant="hint" inspector={inspector} />
+      ))}
+      {considered.map((slug) => (
+        <SkillBadge key={`c-${slug}`} slug={slug} variant="considered" inspector={inspector} />
+      ))}
+    </div>
+  );
+}
+
+const BADGE_CLASS: Record<BadgeVariant, string> = {
+  loaded: "cursor-pointer rounded bg-sky-500/15 px-1 py-0.5 font-mono hover:bg-sky-500/25",
+  hint: "cursor-pointer rounded border border-sky-500/30 px-1 py-0.5 font-mono opacity-70 hover:opacity-100",
+  considered:
+    "cursor-pointer rounded border border-dashed border-sky-500/25 px-1 py-0.5 font-mono opacity-50 hover:opacity-90",
+};
+
+function SkillBadge({
+  slug,
+  variant,
+  inspector,
+}: {
+  slug: string;
+  variant: BadgeVariant;
+  inspector: InspectorTrace;
+}) {
+  const label = variant === "loaded" ? slug : variant === "hint" ? `${slug}?` : `~${slug}`;
+  return (
+    <Popover>
+      <PopoverTrigger className={BADGE_CLASS[variant]}>{label}</PopoverTrigger>
+      <PopoverContent>
+        <SkillCard slug={slug} variant={variant} inspector={inspector} />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// Rendered only once the popover opens (Base UI mounts the portal on demand),
+// so the catalog is fetched on the first click, not on every message painted.
+function SkillCard({
+  slug,
+  variant,
+  inspector,
+}: {
+  slug: string;
+  variant: BadgeVariant;
+  inspector: InspectorTrace;
+}) {
+  const navigate = useNavigate();
+  const pid = usePidFromRoute();
+  const { project } = useProject(pid);
+  const projectPath = pid === "0" ? undefined : project?.path;
+  const ready = pid === "0" || !!projectPath;
+
+  // Same SWR key the composer's `/slug` picker uses — usually a cache hit.
+  const { data } = useSWR(ready ? ["/api/skills", projectPath || ""] : null, () =>
+    Skills.list(projectPath),
+  );
+  const entry = data?.skills.find((s) => s.slug === slug);
+  const sim = inspector.scored?.find((s) => s.slug === slug)?.sim;
+
+  const open = () => {
+    // Inside the Roby sheet the chat sits on top of the router: navigating
+    // alone would land behind it. The sheet closes itself on this event.
+    window.dispatchEvent(new CustomEvent("apx:roby-close"));
+    navigate(`/p/${pid}/skills?skill=${encodeURIComponent(slug)}`);
+  };
+
+  return (
+    <div className="flex flex-col gap-2 text-foreground">
+      <div className="flex items-start justify-between gap-2">
+        <code className="font-mono text-xs font-semibold">{slug}</code>
+        {entry && <Badge tone={sourceTone(entry.source)}>{sourceLabel(entry.source)}</Badge>}
+      </div>
+
+      <p className="text-[11px] text-muted-foreground">
+        {variant === "loaded"
+          ? t("shared_ui.skill_trace_loaded")
+          : variant === "hint"
+            ? t("shared_ui.skill_trace_hinted")
+            : t("shared_ui.skill_trace_considered")}
+        {typeof sim === "number" && ` · ${t("shared_ui.skill_trace_sim", { sim: sim.toFixed(2) })}`}
+      </p>
+
+      <p className="text-xs leading-relaxed">
+        {entry?.description || t("shared_ui.skill_trace_no_desc")}
+      </p>
+
+      <button
+        type="button"
+        onClick={open}
+        className="flex items-center gap-1 self-start text-xs font-medium text-sky-700 hover:underline dark:text-sky-400"
+      >
+        {t("shared_ui.skill_trace_open")} <ArrowUpRight size={12} />
+      </button>
+    </div>
+  );
+}
+
+/** Which project's skills screen the badge should open: the one you are in,
+ *  the base project (the super-agent's own scope) anywhere else. */
+function usePidFromRoute(): string {
+  const { pathname } = useLocation();
+  return pathname.match(/^\/p\/([^/]+)/)?.[1] ?? "0";
+}
+
+function sourceLabel(source: string, origin?: string | null): string {
+  const host = origin || source;
+  if (source === "builtin" || host === "apx" || host === "builtin") return t("skills_page.source_builtin");
+  if (source === "project" || host === "project") return t("skills_page.source_project");
+  if (host === "claude") return t("skills_page.origin_claude");
+  if (host === "cursor") return t("skills_page.origin_cursor");
+  if (host === "codex") return t("skills_page.origin_codex");
+  if (host === "agents") return t("skills_page.origin_agents");
+  return t("skills_page.source_global");
+}
+
+function sourceTone(source: string): "info" | "success" | "muted" {
+  if (source === "builtin") return "info";
+  if (source === "project") return "success";
+  return "muted";
+}