@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/web/src/components/RobyBubble.tsx

@@ -10,13 +10,14 @@
 // inline (collapsible args + results) so you can see exactly what Roby does.
 
 import { useEffect, useRef, useState } from "react";
-import { Bot, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./ui/sheet";
 import { Button } from "./ui/button";
 import { ChatInput } from "./ui/chat-input";
 import { ModelPicker } from "./chat/ModelPicker";
 import { SkillPicker } from "./chat/SkillPicker";
 import { MessageList } from "./chat/MessageList";
+import { AgentAvatar, SUPER_AGENT_ICON } from "./agents/AgentAvatar";
 import { ContextBar } from "./chat/ContextBar";
 import { applyStreamEvent, textOf, type ChatMsg } from "../hooks/useChat";
 import { SuperAgent } from "../lib/api";
@@ -24,6 +25,7 @@ import { STORAGE } from "../constants";
 import { useToast } from "./Toast";
 import { t } from "../i18n";
 import { usePersonaName } from "../hooks/usePersonaName";
+import { useSuperAgentConfig } from "../hooks/useGlobalConfig";
 import type { ChatStreamEvent, ConversationMessage } from "../types/daemon";
 
 // Load any persisted conversation, dropping half-finished (pending) turns.
@@ -47,6 +49,8 @@ export function RobyBubble({
   onOpenChange: (open: boolean) => void;
 }) {
   const persona = usePersonaName();
+  const { superAgent } = useSuperAgentConfig();
+  const avatar = superAgent?.icon || SUPER_AGENT_ICON;
   const toast = useToast();
   const [msgs, setMsgs] = useState<ChatMsg[]>(loadStored);
   const [draft, setDraft] = useState("");
@@ -94,6 +98,14 @@ export function RobyBubble({
     return () => window.removeEventListener("apx:roby-prompt", onPreload);
   }, [onOpenChange]);
 
+  // A link inside the sheet (e.g. a skill badge's "open skill") navigates the
+  // router underneath it — the sheet has to get out of the way to show it.
+  useEffect(() => {
+    const onClose = () => onOpenChange(false);
+    window.addEventListener("apx:roby-close", onClose);
+    return () => window.removeEventListener("apx:roby-close", onClose);
+  }, [onOpenChange]);
+
   const stop = () => {
     abortRef.current?.abort();
     setBusy(false);
@@ -188,7 +200,8 @@ export function RobyBubble({
       >
         <SheetHeader className="pr-12">
           <SheetTitle className="flex items-center gap-2">
-            <Bot size={18} /> {t("superagent.title", { persona })}
+            <AgentAvatar icon={avatar} name={persona} size={22} />
+            {t("superagent.title", { persona })}
             <span className="text-xs font-normal text-muted-fg">{t("superagent.badge")}</span>
           </SheetTitle>
           <SheetDescription>{t("superagent.desc")}</SheetDescription>
@@ -198,12 +211,14 @@ export function RobyBubble({
           {msgs.length === 0 ? (
             <p className="mt-6 text-center text-sm text-muted-fg">{t("superagent.empty", { persona })}</p>
           ) : (
-            <MessageList msgs={msgs} onCopy={copyToClipboard} />
+            <MessageList
+              msgs={msgs}
+              onCopy={copyToClipboard}
+              faceFor={() => ({ icon: avatar, name: persona })}
+            />
           )}
         </div>
 
-        <ContextBar msgs={msgs} />
-
         <div className="border-t border-border p-3">
           <div className="mb-1.5">
             <SkillPicker value={draft} onPick={(slug) => setDraft(`/${slug} `)} />
@@ -215,6 +230,9 @@ export function RobyBubble({
             onStop={stop}
             busy={busy}
             placeholder={t("superagent.placeholder")}
+            // The context summary is the field's own top edge here too, rather
+            // than a strip on its own line above it.
+            header={<ContextBar msgs={msgs} docked />}
             footer={<ModelPicker value={model} onChange={setModel} disabled={busy} />}
           />
           <div className="mt-1.5 flex justify-end">

package/src/interfaces/web/src/components/RowMenu.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import { MoreHorizontal } from "lucide-react";
+import {
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
+} from "./ui/dropdown-menu";
+import { t } from "../i18n";
+
+/**
+ * The per-row action menu: one "⋯" at the end of the line.
+ *
+ * List rows carry three or four verbs (edit, close, discard, reopen) and
+ * painting them all as buttons costs the width the row needs for the things
+ * you actually read — title, who it is assigned to, when it is due. Behind a
+ * kebab they cost 24px and stay in the same place on every list.
+ *
+ * Items are plain <DropdownMenuItem>s supplied by the caller; put the
+ * destructive one last with variant="destructive".
+ */
+export function RowMenu({
+  children,
+  label,
+  testId,
+}: {
+  children: ReactNode;
+  /** Accessible name — defaults to a generic "actions". */
+  label?: string;
+  testId?: string;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        aria-label={label ?? t("common.actions")}
+        data-testid={testId}
+        // stopPropagation: rows are clickable (they open the detail panel) and
+        // opening the menu is not selecting the row.
+        onClick={(e) => e.stopPropagation()}
+        className="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-fg transition-colors hover:bg-muted hover:text-foreground data-[popup-open]:bg-muted data-[popup-open]:text-foreground"
+      >
+        <MoreHorizontal size={16} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" sideOffset={4} className="w-52">
+        {children}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/interfaces/web/src/components/TimezoneSelect.tsx

@@ -28,7 +28,10 @@ export function TimezoneSelect({
   const listRef = useRef<HTMLUListElement | null>(null);
   const [menuRect, setMenuRect] = useState<{ top: number; left: number; width: number } | null>(null);
 
-  useEffect(() => { setQuery(labelFor(value)); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [value, options]);
+  // labelFor is rebuilt every render and only reads `options`, which is already
+  // a dependency — listing it too would re-run this on every render.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => { setQuery(labelFor(value)); }, [value, options]);
 
   useLayoutEffect(() => {
     if (!open) return;

package/src/interfaces/web/src/components/Toast.tsx

@@ -4,17 +4,30 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useState, R
 import { cn } from "../lib/cn";
 
 type ToastKind = "success" | "error" | "info";
+
+/**
+ * An optional verb on the toast. It exists so a reversible action can drop its
+ * confirm dialog: ticking a task off is one click and the undo lives here for
+ * the four seconds you might want it, instead of a modal standing between you
+ * and every single completion.
+ */
+export interface ToastAction {
+  label: string;
+  onClick: () => void;
+}
+
 interface ToastItem {
   id: number;
   kind: ToastKind;
   message: string;
+  action?: ToastAction;
 }
 
 interface ToastCtx {
-  show: (kind: ToastKind, message: string) => void;
-  success: (message: string) => void;
-  error:   (message: string) => void;
-  info:    (message: string) => void;
+  show: (kind: ToastKind, message: string, action?: ToastAction) => void;
+  success: (message: string, action?: ToastAction) => void;
+  error:   (message: string, action?: ToastAction) => void;
+  info:    (message: string, action?: ToastAction) => void;
 }
 
 const Ctx = createContext<ToastCtx | null>(null);
@@ -24,19 +37,21 @@ let nextId = 1;
 export function ToastProvider({ children }: { children: ReactNode }) {
   const [items, setItems] = useState<ToastItem[]>([]);
 
-  const show = useCallback((kind: ToastKind, message: string) => {
-    const id = nextId++;
-    setItems((prev) => [...prev, { id, kind, message }]);
-    setTimeout(() => {
-      setItems((prev) => prev.filter((t) => t.id !== id));
-    }, 4500);
+  const dismiss = useCallback((id: number) => {
+    setItems((prev) => prev.filter((t) => t.id !== id));
   }, []);
 
+  const show = useCallback((kind: ToastKind, message: string, action?: ToastAction) => {
+    const id = nextId++;
+    setItems((prev) => [...prev, { id, kind, message, action }]);
+    setTimeout(() => dismiss(id), 4500);
+  }, [dismiss]);
+
   const api = useMemo<ToastCtx>(() => ({
     show,
-    success: (m) => show("success", m),
-    error:   (m) => show("error", m),
-    info:    (m) => show("info", m),
+    success: (m, a) => show("success", m, a),
+    error:   (m, a) => show("error", m, a),
+    info:    (m, a) => show("info", m, a),
   }), [show]);
 
   // Expose globally so even non-React code (api error handlers) can fire.
@@ -48,7 +63,18 @@ export function ToastProvider({ children }: { children: ReactNode }) {
   return (
     <Ctx.Provider value={api}>
       {children}
-      <div className="pointer-events-none fixed bottom-4 right-4 z-[100] flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2">
+      {/* Bottom-right on the panel, where it has always been. TOP on a phone:
+          down there is the tab bar, and in a chat the send button, so a toast
+          confirming what you just tapped landed exactly on the control you
+          tapped it with — "• Hecha" sitting over the tabs. A toast must never
+          cover the thing that raised it. */}
+      <div
+        className={cn(
+          "pointer-events-none fixed bottom-4 right-4 z-[100] flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2",
+          "max-sm:bottom-auto max-sm:left-4 max-sm:w-auto max-sm:top-[max(0.75rem,env(safe-area-inset-top))]",
+        )}
+        data-testid="toast-stack"
+      >
         {items.map((t) => (
           <div
             key={t.id}
@@ -69,6 +95,16 @@ export function ToastProvider({ children }: { children: ReactNode }) {
                 )}
               />
               <span className="flex-1 break-words">{t.message}</span>
+              {t.action && (
+                <button
+                  type="button"
+                  data-testid="toast-action"
+                  className="shrink-0 rounded px-1.5 py-0.5 text-xs font-semibold text-primary underline-offset-2 hover:underline"
+                  onClick={() => { dismiss(t.id); t.action?.onClick(); }}
+                >
+                  {t.action.label}
+                </button>
+              )}
             </div>
           </div>
         ))}

package/src/interfaces/web/src/components/UiSelect.tsx

@@ -1,4 +1,4 @@
-import type { ElementType } from "react";
+import type { ElementType, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import {
   Select,
@@ -12,6 +12,10 @@ export interface UiSelectOption {
   value: string;
   label: string;
   icon?: ElementType;
+  /** Pre-rendered leading element, for anything that is not a lucide glyph —
+   *  an agent's blob avatar, a channel logo. Rendered as-is, before the label,
+   *  in both the trigger and the list. Wins over `icon` when both are given. */
+  adornment?: ReactNode;
   description?: string;
   disabled?: boolean;
 }
@@ -27,6 +31,7 @@ export function UiSelect({
   disabled,
   className,
   showIcon = false,
+  "data-testid": dataTestId,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -35,17 +40,19 @@ export function UiSelect({
   disabled?: boolean;
   className?: string;
   showIcon?: boolean;
+  /** Put on the trigger, so a test can open the menu. */
+  "data-testid"?: string;
 }) {
   return (
     <Select value={value} onValueChange={(v) => onChange((v as string) ?? "")} disabled={disabled}>
-      <SelectTrigger className={cn("h-9 w-full", className)}>
+      <SelectTrigger className={cn("h-9 w-full", className)} data-testid={dataTestId}>
         <SelectValue placeholder={placeholder}>
           {(val) => {
             const opt = options.find((o) => o.value === val);
-            const Icon = showIcon ? opt?.icon : undefined;
+            const Icon = showIcon && !opt?.adornment ? opt?.icon : undefined;
             return (
               <span className="flex min-w-0 items-center gap-1.5">
-                {Icon && <Icon className="size-3.5 shrink-0" />}
+                {opt?.adornment ?? (Icon ? <Icon className="size-3.5 shrink-0" /> : null)}
                 <span className="truncate">{opt?.label ?? (val as string)}</span>
               </span>
             );
@@ -66,7 +73,7 @@ export function UiSelect({
           return (
             <SelectItem key={o.value} value={o.value} disabled={o.disabled}>
               <span className="flex min-w-0 items-center gap-2">
-                {Icon ? <Icon className="size-4 shrink-0 text-muted-fg" /> : null}
+                {o.adornment ?? (Icon ? <Icon className="size-4 shrink-0 text-muted-fg" /> : null)}
                 {o.description ? (
                   <span className="flex min-w-0 flex-col leading-tight">
                     <span className="truncate font-medium">{o.label}</span>

package/src/interfaces/web/src/components/agents/AgentAvatar.tsx

@@ -0,0 +1,171 @@
+import { BlobAvatar } from "./BlobAvatar";
+import { isBlobKey } from "./blobPresets";
+import { cn } from "../../lib/cn";
+import { Tip } from "../ui/tip";
+import type { AgentFace } from "../../types/daemon";
+import claudeLogo from "../../assets/cli/claude.webp";
+import codexLogo from "../../assets/cli/codex.webp";
+import opencodeLogo from "../../assets/cli/opencode.png";
+import cursorLogo from "../../assets/cli/cursor.svg";
+
+// Coding-CLI identities aren't project agents — they have no blob — but they DO
+// have a brand mark. When an a2a participant (or any face) is one of these
+// engines, wear its logo instead of a bare initial disc.
+const CLI_LOGOS: Record<string, string> = {
+  claude: claudeLogo,
+  "claude-code": claudeLogo,
+  codex: codexLogo,
+  opencode: opencodeLogo,
+  cursor: cursorLogo,
+  "cursor-agent": cursorLogo,
+};
+
+/**
+ * One agent, one face — everywhere.
+ *
+ * The inbox row, the chat header and the message bubbles used to draw three
+ * different things for the same agent (animated blob / coloured disc / a
+ * generic `Bot` glyph), so the same conversation looked like three different
+ * correspondents. This is the single renderer they all call: blob preset when
+ * the agent has one, else its emoji, else a stable coloured initial.
+ */
+
+/** Default blob for surfaces loading before super-agent config arrives. */
+export const SUPER_AGENT_ICON = "noche";
+
+/** Stable colour per agent, so the same agent is the same disc every time. */
+const DISC_COLOURS = [
+  "bg-emerald-500", "bg-orange-500", "bg-violet-500", "bg-sky-500",
+  "bg-rose-500", "bg-amber-500", "bg-teal-500", "bg-fuchsia-500",
+];
+
+export function agentDiscColour(seed: string): string {
+  let h = 0;
+  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
+  return DISC_COLOURS[h % DISC_COLOURS.length];
+}
+
+// A face is whatever the API resolved for one participant — declared with the
+// rest of the daemon payload types, and re-exported here because this is where
+// every caller already imports it from.
+export type { AgentFace };
+
+/**
+ * A cluster of faces for a group chat (a2a). Overlapping discs, each ringed in
+ * the surface colour so they read as separated (Gmail-style). Past `max`,
+ * the rest collapse into a "+N" chip. `ringClass` must match the background the
+ * group sits on — that ring colour is what makes the overlap look clean.
+ *
+ * When `onFaceClick` is set, each openable face is its own control (tooltip +
+ * click) so a group header can send you to agent A or agent B, not "the group".
+ */
+export function AgentAvatarGroup({
+  faces,
+  size = 22,
+  max = 3,
+  className,
+  onFaceClick,
+  faceOpenable,
+  "data-testid": dataTestId,
+}: {
+  faces: AgentFace[];
+  size?: number;
+  max?: number;
+  className?: string;
+  onFaceClick?: (face: AgentFace) => void;
+  /** When set, only faces that return true become buttons; others keep a tip. */
+  faceOpenable?: (face: AgentFace) => boolean;
+  "data-testid"?: string;
+}) {
+  const shown = faces.slice(0, max);
+  const extra = faces.length - shown.length;
+  const overlap = Math.round(size * 0.3);
+  return (
+    <span
+      className={cn("flex shrink-0 items-center", className)}
+      data-testid={dataTestId}
+      data-participant-count={faces.length}
+    >
+      {shown.map((f, i) => {
+        const label = (f.name || f.slug || "").trim();
+        const openable = !!onFaceClick && (faceOpenable ? faceOpenable(f) : true);
+        const face = <AgentAvatar {...f} size={size} />;
+        const body = openable ? (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onFaceClick?.(f);
+            }}
+            aria-label={label || undefined}
+            className="rounded-full transition-opacity hover:opacity-80 active:opacity-70"
+          >
+            {face}
+          </button>
+        ) : (
+          <span className="inline-flex">{face}</span>
+        );
+        return (
+          <span
+            key={f.slug || `${label}-${i}`}
+            className="inline-flex"
+            style={{ marginLeft: i === 0 ? 0 : -overlap, zIndex: i + 1 }}
+          >
+            {label ? <Tip content={label}>{body}</Tip> : body}
+          </span>
+        );
+      })}
+      {extra > 0 && (
+        <span
+          aria-hidden
+          className="inline-flex items-center justify-center rounded-full bg-muted font-semibold text-muted-fg"
+          style={{ marginLeft: -overlap, zIndex: shown.length + 1, width: size, height: size, fontSize: Math.round(size * 0.4) }}
+        >
+          +{extra}
+        </span>
+      )}
+    </span>
+  );
+}
+
+export function AgentAvatar({
+  icon,
+  emoji,
+  name,
+  size = 32,
+  className,
+}: AgentFace & { size?: number; className?: string }) {
+  const label = (name || "").trim();
+  const seed = label || icon || emoji || "?";
+
+  const logo = CLI_LOGOS[label.toLowerCase()] || CLI_LOGOS[(icon || "").toLowerCase()];
+  if (logo) {
+    return (
+      <img
+        src={logo}
+        alt=""
+        aria-hidden
+        className={cn("shrink-0 rounded-full object-cover", className)}
+        style={{ width: size, height: size }}
+      />
+    );
+  }
+
+  if (isBlobKey(icon)) {
+    return <BlobAvatar preset={icon} size={size} seed={seed} className={cn("shrink-0", className)} />;
+  }
+
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full font-semibold text-white",
+        agentDiscColour(seed),
+        className,
+      )}
+      style={{ width: size, height: size, fontSize: Math.round(size * 0.44) }}
+    >
+      {emoji || (label ? label.slice(0, 1).toUpperCase() : "·")}
+    </span>
+  );
+}

package/src/interfaces/web/src/components/agents/AgentFormFields.tsx

@@ -2,23 +2,54 @@ import { useState } from "react";
 import useSWR from "swr";
 import { Plus } from "lucide-react";
 import { cn } from "../../lib/cn";
-import { Field, Input } from "../ui";
+import { Field } from "../ui";
+import { Tip } from "../ui/tip";
 import { UiSelect } from "../UiSelect";
 import { Org } from "../../lib/api/organization";
 import { t } from "../../i18n";
 import type { AgentAutonomy } from "../../types/daemon";
 import { AreaDialog, RoleDialog } from "../structure/StructureDialogs";
+import { BlobAvatar } from "./BlobAvatar";
+import { BLOB_KEYS, BLOB_PRESETS } from "./blobPresets";
 
-// ── Emoji ────────────────────────────────────────────────────────────────────
-export function EmojiInput({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+// ── Agent avatar picker ──────────────────────────────────────────────────────
+// The agent's avatar is a blob preset, full stop. Emoji avatars were dropped:
+// one visual language beats two half-supported ones. Legacy Emoji frontmatter
+// still renders (see the header/card cascade) but is no longer authorable.
+export function AgentIconPicker({
+  icon, onIcon,
+}: {
+  icon: string;
+  onIcon: (v: string) => void;
+}) {
+  // Animate the selected blob always, and whichever one the mouse is over — so
+  // the grid comes alive on hover instead of being a wall of still avatars.
+  const [hover, setHover] = useState<string | null>(null);
   return (
-    <Input
-      value={value}
-      onChange={(e) => onChange([...e.target.value].slice(-2).join(""))}
-      className="text-center text-lg"
-      placeholder="🤖"
-      aria-label={t("agents_form.emoji")}
-    />
+    <div className="space-y-2" data-testid="agent-icon-picker">
+      <div className="flex flex-wrap gap-1.5">
+        {BLOB_KEYS.map((k) => (
+          <Tip key={k} content={BLOB_PRESETS[k].label}>
+            <button
+              type="button"
+              aria-label={BLOB_PRESETS[k].label}
+              aria-pressed={icon === k}
+              onMouseEnter={() => setHover(k)}
+              onMouseLeave={() => setHover((h) => (h === k ? null : h))}
+              onFocus={() => setHover(k)}
+              onBlur={() => setHover((h) => (h === k ? null : h))}
+              onClick={() => onIcon(icon === k ? "" : k)}
+              className={cn(
+                "rounded-lg p-0.5 transition-all",
+                icon === k ? "ring-2 ring-primary" : "opacity-75 hover:opacity-100",
+              )}
+            >
+              <BlobAvatar preset={k} size={40} animated={icon === k || hover === k} seed={k} />
+            </button>
+          </Tip>
+        ))}
+      </div>
+    </div>
   );
 }
 
@@ -31,7 +62,7 @@ const AUTONOMY_OPTIONS: { value: AgentAutonomy; labelKey: "auto_total" | "auto_a
 
 export function AutonomyPicker({ value, onChange }: { value: string; onChange: (v: AgentAutonomy) => void }) {
   return (
-    <div className="inline-flex w-full rounded-lg border border-border p-0.5">
+    <div className="inline-flex w-full rounded-lg border border-border p-0.5" data-testid="agent-autonomy">
       {AUTONOMY_OPTIONS.map((opt) => (
         <button
           key={opt.value}