@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/components/inbox/ChannelFilter.tsx

@@ -0,0 +1,178 @@
+import { ListFilter, Check } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { channelLabel } from "../../lib/channels";
+import {
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
+  DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuSeparator,
+} from "../ui/dropdown-menu";
+import { t } from "../../i18n";
+
+/**
+ * Which channels this device wants to see — as a picker, not a strip.
+ *
+ * It shipped as a row of chips, one per channel, and on a real install that is
+ * eleven of them: the row ran off the edge of both the inbox rail (288px) and
+ * the phone, so the filters were there and could not be found. A strip only
+ * works when the whole set fits, and this set grows with every surface APX
+ * learns to speak on.
+ *
+ * So: one small trigger that says how many are on out of how many exist, and
+ * a menu of switches behind it. `closeOnClick` is false on a checkbox item in
+ * Base UI, which is what makes this a multi-select — tick three, see the list
+ * change under the open menu, then dismiss.
+ *
+ * The count on the trigger is the whole point of the control being collapsed:
+ * "6 of 11" says a filter is on without opening anything, which a chip row
+ * only says if you can see all of it.
+ */
+export function ChannelFilter({
+  channels,
+  counts,
+  enabled,
+  onToggle,
+  onSetAll,
+  className,
+  testIdPrefix = "channel",
+}: {
+  channels: string[];
+  counts?: Record<string, number>;
+  enabled: (channel: string) => boolean;
+  onToggle: (channel: string) => void;
+  /** Turn every channel on (or off) in one go — the way back from a list you
+   *  filtered down to nothing, without eleven taps. */
+  onSetAll?: (on: boolean) => void;
+  className?: string;
+  testIdPrefix?: string;
+}) {
+  if (channels.length < 2) return null; // nothing to choose between
+  const on = channels.filter(enabled).length;
+  const all = on === channels.length;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        data-testid={`${testIdPrefix}-filter`}
+        aria-label={t("channels.filter")}
+        className={cn(
+          "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors",
+          // A filter that is DOING something looks different from one that is
+          // not: all-on is the resting state, anything else is a live filter.
+          all
+            ? "border-border text-muted-fg hover:bg-muted/50 hover:text-foreground"
+            : "border-primary/40 bg-primary/10 text-primary",
+          "data-[popup-open]:bg-muted data-[popup-open]:text-foreground",
+          className,
+        )}
+      >
+        <ListFilter className="size-3.5" />
+        {t("channels.filter")}
+        <span className={cn("tabular-nums", all && "opacity-60")}>
+          {all ? t("channels.all") : t("channels.n_of_m", { n: on, total: channels.length })}
+        </span>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" sideOffset={6} className="max-h-80 w-56 overflow-y-auto">
+        {channels.map((channel) => (
+          <DropdownMenuCheckboxItem
+            key={channel}
+            data-testid={`${testIdPrefix}-option-${channel}`}
+            checked={enabled(channel)}
+            onCheckedChange={() => onToggle(channel)}
+          >
+            <span className="truncate">{channelLabel(channel)}</span>
+            {counts?.[channel] ? (
+              <span className="ml-auto pr-4 text-xs tabular-nums text-muted-fg">{counts[channel]}</span>
+            ) : null}
+          </DropdownMenuCheckboxItem>
+        ))}
+
+        {onSetAll && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              data-testid={`${testIdPrefix}-all`}
+              closeOnClick={false}
+              onClick={() => onSetAll(!all)}
+            >
+              <Check className="size-3.5 opacity-60" />
+              {all ? t("channels.none") : t("channels.select_all")}
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/**
+ * The same switches laid out flat, for a settings panel.
+ *
+ * Kept apart from the picker above on purpose: a filter next to a list should
+ * be out of the way until you want it, while a preference in Settings is worth
+ * seeing all of at once — that IS the answer to "what is this device allowed to
+ * tell me". Same state, same labels, two places with opposite needs.
+ */
+export function ChannelChips({
+  channels,
+  counts,
+  enabled,
+  onToggle,
+  className,
+  testIdPrefix = "channel-chip",
+}: {
+  channels: string[];
+  counts?: Record<string, number>;
+  enabled: (channel: string) => boolean;
+  onToggle: (channel: string) => void;
+  className?: string;
+  testIdPrefix?: string;
+}) {
+  if (channels.length < 2) return null;
+  return (
+    <div className={cn("flex flex-wrap items-center gap-1", className)} role="group" aria-label={t("channels.filter")}>
+      {channels.map((channel) => {
+        const on = enabled(channel);
+        return (
+          <button
+            key={channel}
+            type="button"
+            data-testid={`${testIdPrefix}-${channel}`}
+            aria-pressed={on}
+            onClick={() => onToggle(channel)}
+            className={cn(
+              "shrink-0 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors",
+              on
+                ? "border-transparent bg-accent text-accent-fg"
+                // Off is dimmed, never hidden: the way back is the same chip.
+                : "border-border text-muted-fg opacity-70 hover:opacity-100",
+            )}
+          >
+            {channelLabel(channel)}
+            {counts?.[channel] ? <span className="ml-1 opacity-60">{counts[channel]}</span> : null}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+/** The channel a row happened on, as a tag on the row itself.
+ *
+ *  Both lists — the desktop rail and /m/chat — are flat and sorted by recency,
+ *  so this fact has to travel with the row. Without it a WhatsApp from a
+ *  contact and a web chat with the same agent are two identical-looking
+ *  lines. */
+export function ChannelTag({ channel, className }: { channel: string | null; className?: string }) {
+  if (!channel) return null;
+  return (
+    <span
+      data-testid={`channel-tag-${channel}`}
+      className={cn(
+        "shrink-0 rounded bg-muted px-1.5 py-px text-[10px] font-medium text-muted-fg",
+        className,
+      )}
+    >
+      {channelLabel(channel)}
+    </span>
+  );
+}

package/src/interfaces/web/src/components/inbox/InboxList.tsx

@@ -1,8 +1,11 @@
 import { useMemo, useState } from "react";
-import { Search } from "lucide-react";
+import { Plus, Search } from "lucide-react";
 import type { InboxRow } from "../../lib/api/inbox";
-import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
+import { InboxRowItem } from "./InboxRowItem";
+import { ChannelFilter } from "./ChannelFilter";
+import { channelEnabledIn, channelsOf } from "../../lib/channels";
+import { useChannelPrefs } from "../../hooks/useChannelPrefs";
 
 /**
  * The conversation rail: every agent as a chat, most recent first.
@@ -13,31 +16,11 @@ import { t } from "../../i18n";
  * click, which meant losing the list to read one row.
  */
 
-/** Stable colour per agent, so the same agent is the same dot every time. */
-const DOT_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",
-];
-
-function colourFor(seed: string): string {
-  let h = 0;
-  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
-  return DOT_COLOURS[h % DOT_COLOURS.length];
-}
-
+/** Identity of a row. Channel is part of it: the same agent now appears once
+ *  per channel it was talked to on, so keying by agent alone would collide —
+ *  React would drop rows and selecting one would highlight its twin. */
 export function rowKey(row: InboxRow): string {
-  return `${row.project_id ?? "global"}::${row.agent_slug}`;
-}
-
-/** Today → time of day; older → date. Same idea as a messaging app. */
-function shortTime(iso: string): string {
-  if (!iso) return "";
-  const d = new Date(iso);
-  if (Number.isNaN(d.getTime())) return "";
-  const sameDay = new Date().toDateString() === d.toDateString();
-  return sameDay
-    ? d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
-    : d.toLocaleDateString(undefined, { day: "numeric", month: "short" });
+  return `${row.project_id ?? "global"}::${row.agent_slug}::${row.channel ?? ""}`;
 }
 
 export function InboxList({
@@ -45,26 +28,46 @@ export function InboxList({
   selectedKey,
   onSelect,
   action,
+  onNew,
 }: {
   rows: InboxRow[];
   selectedKey: string | null;
   onSelect: (row: InboxRow) => void;
   action?: React.ReactNode;
+  /** Opens the same + Nuevo picker the phone uses (any agent, any project). */
+  onNew?: () => void;
 }) {
   const [q, setQ] = useState("");
+  const view = useChannelPrefs("view");
+
+  // Every channel this install actually has, and how many rows each holds —
+  // computed BEFORE the filter, or a channel would vanish from its own switch
+  // the moment it was turned off and there would be no way back.
+  const channels = useMemo(() => channelsOf(rows), [rows]);
+  const counts = useMemo(() => {
+    const out: Record<string, number> = {};
+    for (const row of rows) {
+      const key = row.channel || "other";
+      out[key] = (out[key] || 0) + 1;
+    }
+    return out;
+  }, [rows]);
 
   const filtered = useMemo(() => {
     const needle = q.trim().toLowerCase();
-    if (!needle) return rows;
-    return rows.filter((r) =>
-      [r.agent_name, r.agent_slug, r.project_name, r.preview]
+    const shown = rows.filter((r) => channelEnabledIn(view.prefs, "view", r.channel));
+    if (!needle) return shown;
+    return shown.filter((r) =>
+      [r.agent_name, r.agent_slug, r.project_name, r.preview, r.channel]
         .filter(Boolean)
         .some((v) => String(v).toLowerCase().includes(needle)));
-  }, [rows, q]);
+  }, [rows, q, view.prefs]);
 
   return (
     <aside className="flex w-full shrink-0 flex-col border-r border-border sm:w-72" data-testid="inbox-list">
-      <div className="flex shrink-0 items-center gap-2 border-b border-border p-2">
+      {/* Search sits on the same 44px band as the thread header opposite it, so
+          the two panes share one horizon line instead of stepping. */}
+      <div className="flex h-11 shrink-0 items-center gap-2 border-b border-border px-2">
         <div className="relative flex-1">
           <Search size={13} className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-fg" />
           <input
@@ -72,71 +75,64 @@ export function InboxList({
             onChange={(e) => setQ(e.target.value)}
             placeholder={t("inbox.search")}
             aria-label={t("inbox.search")}
-            className="w-full rounded-lg border border-border bg-muted/30 py-1.5 pl-7 pr-2 text-sm outline-none placeholder:text-muted-fg focus:border-primary/60"
+            className="w-full rounded-lg border border-border bg-muted/50 py-1.5 pl-7 pr-2 text-sm outline-none placeholder:text-muted-fg focus:border-primary/60"
           />
         </div>
+        {onNew && (
+          <button
+            type="button"
+            data-testid="inbox-new-chat"
+            onClick={onNew}
+            className="inline-flex shrink-0 items-center gap-1 rounded-md border border-border bg-accent/60 px-2 py-1 text-[11px] font-medium hover:bg-accent"
+          >
+            <Plus className="size-3" /> {t("project.chat.list.new")}
+          </button>
+        )}
         {action}
       </div>
 
+      {/* Which channels this DEVICE wants to see. One picker, not a strip: on a
+          real install there are eleven channels and the rail is 288px wide, so
+          a chip row ran off the edge and the filters could not be found. */}
+      {channels.length > 1 && (
+        <div className="flex shrink-0 items-center gap-2 border-b border-border px-2 py-1.5">
+          <ChannelFilter
+            channels={channels}
+            counts={counts}
+            enabled={view.enabled}
+            onToggle={view.toggle}
+            onSetAll={(on) => view.setAll(channels, on)}
+            testIdPrefix="inbox-channel"
+          />
+        </div>
+      )}
+
       <div className="min-h-0 flex-1 overflow-y-auto p-1.5">
         {!filtered.length ? (
           <p className="px-3 py-6 text-center text-xs text-muted-fg">
-            {q ? t("inbox.no_match") : t("inbox.empty")}
+            {/* Three different silences, and saying the wrong one sends someone
+                looking for a bug: nothing matched the search, every channel is
+                switched off, or there is genuinely nothing here yet. */}
+            {q ? t("inbox.no_match") : rows.length ? t("channels.all_hidden") : t("inbox.empty")}
           </p>
         ) : null}
 
+        {/* One flat list, newest first — the same shape as /m/chat.
+            It used to be grouped by channel under sticky headings, and the
+            grouping was quietly the enemy of the sort: what you want from an
+            inbox is "what happened last", and eleven channel buckets means the
+            newest thing on screen depends on which bucket it fell into. The
+            channel is still on every row (ChannelTag), where it belongs — it
+            says what a conversation IS without deciding where it sits. */}
         {filtered.map((row) => {
           const key = rowKey(row);
-          const isActive = key === selectedKey;
-          const label = row.agent_name || row.agent_slug;
           return (
-            <button
+            <InboxRowItem
               key={key}
-              type="button"
-              data-testid={`inbox-row-${row.agent_slug}`}
-              onClick={() => onSelect(row)}
-              className={cn(
-                "flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-left transition-colors",
-                isActive ? "bg-accent text-accent-fg" : "hover:bg-muted/50",
-              )}
-            >
-              {/* A coloured disc, not an emoji on plain background: at this size
-                  the colour is what the eye picks the row out by. */}
-              <span
-                className={cn(
-                  "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full text-sm",
-                  colourFor(row.agent_slug),
-                )}
-                aria-hidden
-              >
-                {row.agent_emoji || label.slice(0, 1).toUpperCase()}
-              </span>
-
-              <span className="min-w-0 flex-1">
-                <span className="flex items-baseline gap-2">
-                  <span className="truncate text-sm font-medium">{label}</span>
-                  {row.pinned ? (
-                    <span className="shrink-0 rounded bg-primary/15 px-1 text-[9px] font-semibold uppercase tracking-wide text-primary">
-                      {t("inbox.pinned")}
-                    </span>
-                  ) : null}
-                  <span className="ml-auto shrink-0 text-[10px] text-muted-fg">
-                    {shortTime(row.last_activity_at)}
-                  </span>
-                </span>
-
-                <span className="mt-0.5 flex items-center gap-1.5 text-[10px] text-muted-fg">
-                  {row.project_name ? <span className="truncate">{row.project_name}</span> : null}
-                  {row.channel ? <span className="opacity-70">· {row.channel}</span> : null}
-                </span>
-
-                {/* The agent's own last line. Echoing the user's prompt back
-                    tells them nothing they do not already know. */}
-                <span className="mt-0.5 block truncate text-xs text-muted-fg">
-                  {row.preview || t("inbox.no_reply_yet")}
-                </span>
-              </span>
-            </button>
+              row={row}
+              selected={key === selectedKey}
+              onSelect={onSelect}
+            />
           );
         })}
       </div>

package/src/interfaces/web/src/components/inbox/InboxRowItem.tsx

@@ -0,0 +1,140 @@
+import type { InboxRow } from "../../lib/api/inbox";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { ChannelTag } from "./ChannelFilter";
+import { ChatRowActivity } from "../chat/ChatRowActivity";
+import {
+  activityKeyFromActiveTurn,
+  conversationActivityKey,
+  threadActivityKey,
+} from "../../lib/chat-activity";
+import { toneChip } from "../../lib/tone";
+import { AgentAvatar, AgentAvatarGroup, SUPER_AGENT_ICON } from "../agents/AgentAvatar";
+
+export type InboxRowVariant = "compact" | "touch";
+
+/** Today → time of day; older → date. Same idea as a messaging app. */
+export function inboxRowTime(iso: string): string {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  const sameDay = new Date().toDateString() === d.toDateString();
+  return sameDay
+    ? d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+    : d.toLocaleDateString(undefined, { day: "numeric", month: "short" });
+}
+
+function participantFaces(row: InboxRow) {
+  return row.participant_faces?.length
+    ? row.participant_faces
+    : (row.participants || []).map((slug) => ({ name: slug }));
+}
+
+/**
+ * Shared conversation row for the desktop rail and the phone inbox.
+ * The variant changes density only; identity and information hierarchy stay
+ * identical so an a2a thread cannot lose a participant on one surface.
+ */
+export function InboxRowItem({
+  row,
+  selected = false,
+  variant = "compact",
+  onSelect,
+}: {
+  row: InboxRow;
+  selected?: boolean;
+  variant?: InboxRowVariant;
+  onSelect: (row: InboxRow) => void;
+}) {
+  const touch = variant === "touch";
+  const label = row.agent_name || row.agent_slug;
+  const faces = participantFaces(row);
+  const grouped = (row.kind === "a2a" || row.kind === "group") && faces.length > 0;
+  const activityKey = activityKeyFromActiveTurn(row.active_turn) || (
+    row.kind === "agent" && row.project_id != null && row.conversation_id
+      ? conversationActivityKey(row.project_id, row.conversation_id)
+      : row.kind === "super_agent" && row.project_id != null && row.channel && row.conversation_id
+        ? threadActivityKey(row.project_id, row.channel, row.conversation_id)
+        : null
+  );
+
+  return (
+    <button
+      type="button"
+      data-testid={`inbox-row-${row.agent_slug}`}
+      onClick={() => onSelect(row)}
+      className={cn(
+        "relative flex w-full items-start text-left transition-colors",
+        touch
+          ? "gap-3 rounded-none px-4 py-3 active:bg-accent/60"
+          : "gap-2.5 rounded-lg px-2.5 py-2",
+        selected
+          ? "bg-primary/12 ring-1 ring-inset ring-primary/25"
+          : !touch && "hover:bg-accent/60",
+      )}
+    >
+      <span
+        data-testid="inbox-avatar-viewport"
+        className={cn(
+          "shrink-0 overflow-visible pt-0.5",
+          // Grouped rows fan up to three faces plus a "+N" chip, so they need
+          // more room than a single avatar before the name column starts.
+          touch && (grouped ? "w-[84px]" : "w-12"),
+        )}
+      >
+        {grouped ? (
+          <AgentAvatarGroup
+            faces={faces}
+            size={touch ? 34 : 24}
+            max={3}
+            data-testid="a2a-avatar-group"
+          />
+        ) : (
+          <AgentAvatar
+            icon={row.kind === "super_agent" ? row.agent_icon || SUPER_AGENT_ICON : row.agent_icon}
+            emoji={row.agent_emoji}
+            name={label}
+            size={touch ? 48 : 32}
+          />
+        )}
+      </span>
+
+      <span className="min-w-0 flex-1">
+        <span className="flex items-baseline gap-2">
+          <span className={cn("truncate font-medium", touch ? "text-[15px] font-semibold" : "text-sm")}>
+            {label}
+          </span>
+          <span className="ml-auto inline-flex shrink-0 items-center">
+            {row.kind === "super_agent" ? (
+              <span className={cn("rounded px-1 text-[9px] font-semibold uppercase tracking-wide", toneChip.emerald)}>
+                {t("agents_ui.super_agent_badge")}
+              </span>
+            ) : null}
+            <ChatRowActivity activityKey={activityKey} activeTurn={row.active_turn} />
+            <span className={cn("ml-2 text-muted-fg", touch ? "text-[11px]" : "text-[10px]")}>
+              {inboxRowTime(row.last_activity_at)}
+            </span>
+          </span>
+        </span>
+
+        <span className={cn("mt-0.5 flex items-center gap-1.5 text-muted-fg", touch ? "text-[11px]" : "text-[10px]")}>
+          {row.project_name ? <span className="truncate">{row.project_name}</span> : null}
+          {/* Where this conversation happened, as a tag on the row. On every
+              surface: both lists are now flat and sorted by recency, so this is
+              the only thing telling a WhatsApp from a contact apart from a web
+              chat with the same agent — otherwise two identical lines. */}
+          <ChannelTag channel={row.channel} />
+          {row.requested_by ? (
+            <span className="shrink-0 rounded bg-primary/12 px-1 text-primary">
+              for {row.requested_by}
+            </span>
+          ) : null}
+        </span>
+
+        <span className={cn("mt-0.5 block truncate text-muted-fg", touch ? "text-[13px]" : "text-xs")}>
+          {row.preview || t("inbox.no_reply_yet")}
+        </span>
+      </span>
+    </button>
+  );
+}

package/src/interfaces/web/src/components/integrations/ComingSoonPlugin.tsx

@@ -6,9 +6,9 @@ import { PluginCard } from "./PluginCard";
 import { WhatsAppLogo } from "./BrandLogos";
 
 const ICONS: Record<string, { icon: ComponentType<{ className?: string }>; className: string; wrap: string }> = {
-  github: { icon: Github, className: "text-slate-200", wrap: "border-slate-500/30 from-slate-500/20 to-slate-700/20" },
+  github: { icon: Github, className: "text-slate-700 dark:text-slate-200", wrap: "border-slate-500/30 from-slate-500/20 to-slate-700/20" },
   whatsapp: { icon: WhatsAppLogo, className: "text-[#25D366]", wrap: "border-[#25D366]/30 from-[#25D366]/20 to-[#128C7E]/20" },
-  "local-transcription": { icon: Mic, className: "text-orange-400", wrap: "border-orange-500/30 from-orange-500/20 to-amber-500/20" },
+  "local-transcription": { icon: Mic, className: "text-orange-600 dark:text-orange-400", wrap: "border-orange-500/30 from-orange-500/20 to-amber-500/20" },
 };
 
 // Placeholder card for catalog plugins that are declared but not yet wired to a