@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/lib/tone.ts

@@ -0,0 +1,150 @@
+// Accent tones that read in BOTH themes.
+//
+// A bare `text-emerald-400` is a *dark-mode* colour: it was picked against a
+// near-black ground. On a white card the same class is a pale smear — which is
+// exactly how every engine badge, status chip and toggle looked in light mode.
+//
+// Every tone below ships as a light/dark pair: the light value is the ink-weight
+// shade (600-800, measured to clear 4.5:1 on its own tint — the lightest hues
+// need one step more), the dark value is the shade the app already used. Dark
+// mode is therefore unchanged by construction — the old class is still there,
+// just behind `dark:`.
+//
+// Use these instead of writing a colour class by hand. If a hue is missing, add
+// it here rather than inlining a one-off.
+
+export type Tone =
+  | "emerald" | "green" | "lime" | "teal" | "cyan" | "sky" | "blue" | "indigo"
+  | "violet" | "purple" | "pink" | "rose" | "red" | "orange" | "amber" | "slate";
+
+/** Accent ink for text and icons on a plain surface. No background. */
+export const toneText: Record<Tone, string> = {
+  emerald: "text-emerald-700 dark:text-emerald-400",
+  green:   "text-green-700 dark:text-green-400",
+  lime:    "text-lime-700 dark:text-lime-400",
+  teal:    "text-teal-700 dark:text-teal-400",
+  cyan:    "text-cyan-700 dark:text-cyan-400",
+  sky:     "text-sky-700 dark:text-sky-400",
+  blue:    "text-blue-700 dark:text-blue-400",
+  indigo:  "text-indigo-700 dark:text-indigo-400",
+  violet:  "text-violet-700 dark:text-violet-400",
+  purple:  "text-purple-700 dark:text-purple-400",
+  pink:    "text-pink-700 dark:text-pink-400",
+  rose:    "text-rose-700 dark:text-rose-400",
+  red:     "text-red-700 dark:text-red-400",
+  orange:  "text-orange-700 dark:text-orange-400",
+  amber:   "text-amber-700 dark:text-amber-400",
+  slate:   "text-slate-600 dark:text-slate-400",
+};
+
+/** Same ink, one step brighter — for hover targets and links. */
+export const toneTextHover: Record<Tone, string> = {
+  emerald: "hover:text-emerald-800 dark:hover:text-emerald-300",
+  green:   "hover:text-green-800 dark:hover:text-green-300",
+  lime:    "hover:text-lime-800 dark:hover:text-lime-300",
+  teal:    "hover:text-teal-800 dark:hover:text-teal-300",
+  cyan:    "hover:text-cyan-800 dark:hover:text-cyan-300",
+  sky:     "hover:text-sky-800 dark:hover:text-sky-300",
+  blue:    "hover:text-blue-800 dark:hover:text-blue-300",
+  indigo:  "hover:text-indigo-800 dark:hover:text-indigo-300",
+  violet:  "hover:text-violet-800 dark:hover:text-violet-300",
+  purple:  "hover:text-purple-800 dark:hover:text-purple-300",
+  pink:    "hover:text-pink-800 dark:hover:text-pink-300",
+  rose:    "hover:text-rose-800 dark:hover:text-rose-300",
+  red:     "hover:text-red-800 dark:hover:text-red-300",
+  orange:  "hover:text-orange-800 dark:hover:text-orange-300",
+  amber:   "hover:text-amber-800 dark:hover:text-amber-300",
+  slate:   "hover:text-slate-700 dark:hover:text-slate-300",
+};
+
+/**
+ * Filled chip / badge: tinted ground, visible edge, readable label. Carries its
+ * own `border` width, so a call site only needs shape + padding classes.
+ *
+ * The light tint stays low (12%) on purpose: a white card is already bright, so
+ * definition comes from the border and the ink, not from a louder fill. The ink
+ * is one step darker than `toneText` for the same reason: it is measured against
+ * the tint, not against the card, and chips carry the smallest type in the app.
+ */
+export const toneChip: Record<Tone, string> = {
+  emerald: "border border-emerald-600/25 bg-emerald-500/12 text-emerald-800 dark:border-emerald-500/40 dark:bg-emerald-500/20 dark:text-emerald-300",
+  green:   "border border-green-600/25 bg-green-500/12 text-green-800 dark:border-green-500/40 dark:bg-green-500/20 dark:text-green-300",
+  lime:    "border border-lime-600/25 bg-lime-500/12 text-lime-800 dark:border-lime-500/40 dark:bg-lime-500/20 dark:text-lime-300",
+  teal:    "border border-teal-600/25 bg-teal-500/12 text-teal-800 dark:border-teal-500/40 dark:bg-teal-500/20 dark:text-teal-300",
+  cyan:    "border border-cyan-600/25 bg-cyan-500/12 text-cyan-800 dark:border-cyan-500/40 dark:bg-cyan-500/20 dark:text-cyan-300",
+  sky:     "border border-sky-600/25 bg-sky-500/12 text-sky-800 dark:border-sky-500/40 dark:bg-sky-500/20 dark:text-sky-300",
+  blue:    "border border-blue-600/25 bg-blue-500/12 text-blue-800 dark:border-blue-500/40 dark:bg-blue-500/20 dark:text-blue-300",
+  indigo:  "border border-indigo-600/25 bg-indigo-500/12 text-indigo-800 dark:border-indigo-500/40 dark:bg-indigo-500/20 dark:text-indigo-300",
+  violet:  "border border-violet-600/25 bg-violet-500/12 text-violet-800 dark:border-violet-500/40 dark:bg-violet-500/20 dark:text-violet-300",
+  purple:  "border border-purple-600/25 bg-purple-500/12 text-purple-800 dark:border-purple-500/40 dark:bg-purple-500/20 dark:text-purple-300",
+  pink:    "border border-pink-600/25 bg-pink-500/12 text-pink-800 dark:border-pink-500/40 dark:bg-pink-500/20 dark:text-pink-300",
+  rose:    "border border-rose-600/25 bg-rose-500/12 text-rose-800 dark:border-rose-500/40 dark:bg-rose-500/20 dark:text-rose-300",
+  red:     "border border-red-600/25 bg-red-500/12 text-red-800 dark:border-red-500/40 dark:bg-red-500/20 dark:text-red-300",
+  orange:  "border border-orange-600/25 bg-orange-500/12 text-orange-800 dark:border-orange-500/40 dark:bg-orange-500/20 dark:text-orange-300",
+  amber:   "border border-amber-600/25 bg-amber-500/12 text-amber-800 dark:border-amber-500/40 dark:bg-amber-500/20 dark:text-amber-300",
+  slate:   "border border-slate-500/25 bg-slate-500/12 text-slate-800 dark:border-slate-500/40 dark:bg-slate-500/20 dark:text-slate-300",
+};
+
+/**
+ * "This one is picked" outline: accent edge, barely-there fill, accent ink.
+ * Used by the toggle pills (active provider, schedule presets, skill chips).
+ * Carries its own `border` width.
+ */
+export const toneOutline: Record<Tone, string> = {
+  emerald: "border border-emerald-600/40 bg-emerald-500/8 text-emerald-700 dark:border-emerald-500/50 dark:bg-emerald-500/10 dark:text-emerald-400",
+  green:   "border border-green-600/40 bg-green-500/8 text-green-700 dark:border-green-500/50 dark:bg-green-500/10 dark:text-green-400",
+  lime:    "border border-lime-600/40 bg-lime-500/8 text-lime-700 dark:border-lime-500/50 dark:bg-lime-500/10 dark:text-lime-400",
+  teal:    "border border-teal-600/40 bg-teal-500/8 text-teal-700 dark:border-teal-500/50 dark:bg-teal-500/10 dark:text-teal-400",
+  cyan:    "border border-cyan-600/40 bg-cyan-500/8 text-cyan-700 dark:border-cyan-500/50 dark:bg-cyan-500/10 dark:text-cyan-400",
+  sky:     "border border-sky-600/40 bg-sky-500/8 text-sky-700 dark:border-sky-500/50 dark:bg-sky-500/10 dark:text-sky-400",
+  blue:    "border border-blue-600/40 bg-blue-500/8 text-blue-700 dark:border-blue-500/50 dark:bg-blue-500/10 dark:text-blue-400",
+  indigo:  "border border-indigo-600/40 bg-indigo-500/8 text-indigo-700 dark:border-indigo-500/50 dark:bg-indigo-500/10 dark:text-indigo-400",
+  violet:  "border border-violet-600/40 bg-violet-500/8 text-violet-700 dark:border-violet-500/50 dark:bg-violet-500/10 dark:text-violet-400",
+  purple:  "border border-purple-600/40 bg-purple-500/8 text-purple-700 dark:border-purple-500/50 dark:bg-purple-500/10 dark:text-purple-400",
+  pink:    "border border-pink-600/40 bg-pink-500/8 text-pink-700 dark:border-pink-500/50 dark:bg-pink-500/10 dark:text-pink-400",
+  rose:    "border border-rose-600/40 bg-rose-500/8 text-rose-700 dark:border-rose-500/50 dark:bg-rose-500/10 dark:text-rose-400",
+  red:     "border border-red-600/40 bg-red-500/8 text-red-700 dark:border-red-500/50 dark:bg-red-500/10 dark:text-red-400",
+  orange:  "border border-orange-600/40 bg-orange-500/8 text-orange-700 dark:border-orange-500/50 dark:bg-orange-500/10 dark:text-orange-400",
+  amber:   "border border-amber-600/40 bg-amber-500/8 text-amber-700 dark:border-amber-500/50 dark:bg-amber-500/10 dark:text-amber-400",
+  slate:   "border border-slate-500/40 bg-slate-500/8 text-slate-700 dark:border-slate-500/50 dark:bg-slate-500/10 dark:text-slate-400",
+};
+
+/** Square icon-holder behind a status glyph: soft tint + accent ink, no edge. */
+export const toneTint: Record<Tone, string> = {
+  emerald: "bg-emerald-500/12 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400",
+  green:   "bg-green-500/12 text-green-700 dark:bg-green-500/15 dark:text-green-400",
+  lime:    "bg-lime-500/12 text-lime-700 dark:bg-lime-500/15 dark:text-lime-400",
+  teal:    "bg-teal-500/12 text-teal-700 dark:bg-teal-500/15 dark:text-teal-400",
+  cyan:    "bg-cyan-500/12 text-cyan-700 dark:bg-cyan-500/15 dark:text-cyan-400",
+  sky:     "bg-sky-500/12 text-sky-700 dark:bg-sky-500/15 dark:text-sky-400",
+  blue:    "bg-blue-500/12 text-blue-700 dark:bg-blue-500/15 dark:text-blue-400",
+  indigo:  "bg-indigo-500/12 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-400",
+  violet:  "bg-violet-500/12 text-violet-700 dark:bg-violet-500/15 dark:text-violet-400",
+  purple:  "bg-purple-500/12 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400",
+  pink:    "bg-pink-500/12 text-pink-700 dark:bg-pink-500/15 dark:text-pink-400",
+  rose:    "bg-rose-500/12 text-rose-700 dark:bg-rose-500/15 dark:text-rose-400",
+  red:     "bg-red-500/12 text-red-700 dark:bg-red-500/15 dark:text-red-400",
+  orange:  "bg-orange-500/12 text-orange-700 dark:bg-orange-500/15 dark:text-orange-400",
+  amber:   "bg-amber-500/12 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400",
+  slate:   "bg-slate-500/12 text-slate-700 dark:bg-slate-500/15 dark:text-slate-400",
+};
+
+/** Solid dot / bullet fill. Small and opaque, so it needs weight in light. */
+export const toneDot: Record<Tone, string> = {
+  emerald: "bg-emerald-600 dark:bg-emerald-400",
+  green:   "bg-green-600 dark:bg-green-400",
+  lime:    "bg-lime-600 dark:bg-lime-400",
+  teal:    "bg-teal-600 dark:bg-teal-400",
+  cyan:    "bg-cyan-600 dark:bg-cyan-400",
+  sky:     "bg-sky-600 dark:bg-sky-400",
+  blue:    "bg-blue-600 dark:bg-blue-400",
+  indigo:  "bg-indigo-600 dark:bg-indigo-400",
+  violet:  "bg-violet-600 dark:bg-violet-400",
+  purple:  "bg-purple-600 dark:bg-purple-400",
+  pink:    "bg-pink-600 dark:bg-pink-400",
+  rose:    "bg-rose-600 dark:bg-rose-400",
+  red:     "bg-red-600 dark:bg-red-400",
+  orange:  "bg-orange-600 dark:bg-orange-400",
+  amber:   "bg-amber-600 dark:bg-amber-400",
+  slate:   "bg-slate-500 dark:bg-slate-400",
+};

package/src/interfaces/web/src/main.tsx

@@ -4,11 +4,22 @@ import { BrowserRouter } from "react-router-dom";
 import "./styles.css";
 import { App } from "./App";
 import { ThemeProvider } from "./hooks/useTheme";
-import { loadEnginePresets } from "./components/settings/providers/typeStyles";
+import { registerServiceWorker } from "./lib/pwa";
+import { startAgentNotifications } from "./lib/notify";
 
-// Hydrate the shared model catalog (GET /engines/presets) in the background so
-// provider forms show up-to-date model lists. Non-blocking: app renders anyway.
-void loadEnginePresets();
+// The shared model catalog (GET /engines/presets) is hydrated by
+// useTokenBootstrap once the bearer token is known good — it is an
+// authenticated endpoint, so it cannot be fetched this early.
+
+// Installing the panel to a phone's home screen needs a service worker that
+// handles fetch — that is Chrome's rule, not ours. It also needs a secure
+// context, which http:// on a LAN address is not; see lib/pwa.
+registerServiceWorker();
+
+// Agent notifications resume on their own if they were ever switched on: the
+// permission belongs to the browser and the preference to this device, so a
+// reload should not be a second decision. No-op when either says no.
+startAgentNotifications();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>

package/src/interfaces/web/src/screens/ApxAdminScreen.tsx

@@ -13,6 +13,7 @@ import { useTelegramStatus, useTelegramChannels } from "../hooks/useTelegram";
 import { TelegramChannelDialog } from "../components/TelegramChannelDialog";
 import { TelegramSendDialog } from "../components/TelegramSendDialog";
 import { TelegramContactsPanel } from "../components/settings/TelegramContactsPanel";
+import { ConfirmDialog } from "../components/common/ConfirmDialog";
 import { t } from "../i18n";
 import type { TelegramChannel } from "../types/daemon";
 
@@ -28,6 +29,12 @@ export function ApxAdminScreen() {
 
   const [editing, setEditing] = useState<TelegramChannel | null>(null);
   const [sendTarget, setSendTarget] = useState<TelegramChannel | null>(null);
+  // One state drives both destructive confirms (channel delete vs project unregister).
+  const [confirm, setConfirm] = useState<
+    | { kind: "channel"; name: string }
+    | { kind: "unregister"; id: string; label: string }
+    | null
+  >(null);
 
   const reload = async () => {
     try { await Admin.reload(); toast.success(t("admin.reload_success")); }
@@ -40,15 +47,15 @@ export function ApxAdminScreen() {
       mutateTgStatus();
     } catch (e) { toast.error((e as Error).message); }
   };
-  const removeChannel = async (name: string) => {
-    if (!confirm(t("telegram_channels.delete_confirm", { name }))) return;
-    try { await Telegram.channels.remove(name); toast.success(t("admin.telegram_channel_removed")); mutateChannels(); }
-    catch (e) { toast.error((e as Error).message); }
-  };
-  const removeProject = async (id: string, label: string) => {
-    if (!confirm(t("admin.unregister_confirm", { label }))) return;
-    try { await Projects.remove(id); toast.success(t("project.unregistered")); mutateProjects(); }
-    catch (e) { toast.error((e as Error).message); }
+  const doConfirm = async () => {
+    if (!confirm) return;
+    if (confirm.kind === "channel") {
+      try { await Telegram.channels.remove(confirm.name); toast.success(t("admin.telegram_channel_removed")); mutateChannels(); }
+      catch (e) { toast.error((e as Error).message); }
+    } else {
+      try { await Projects.remove(confirm.id); toast.success(t("project.unregistered")); mutateProjects(); }
+      catch (e) { toast.error((e as Error).message); }
+    }
   };
 
   return (
@@ -116,7 +123,7 @@ export function ApxAdminScreen() {
                     <Send size={13} /> {t("admin.telegram_send_test")}
                   </Button>
                   <Button size="sm" variant="secondary" onClick={() => setEditing(c)}>{t("common.edit")}</Button>
-                  <Button size="sm" variant="destructive" onClick={() => removeChannel(c.name)}>{t("common.delete")}</Button>
+                  <Button size="sm" variant="destructive" onClick={() => setConfirm({ kind: "channel", name: c.name })}>{t("common.delete")}</Button>
                 </div>
               </div>
               <div className="mt-1 grid grid-cols-3 gap-2 text-xs text-muted-fg">
@@ -147,7 +154,7 @@ export function ApxAdminScreen() {
               </button>
               <Badge>{(p.agents ?? 0)} {t("admin.agents_badge")}</Badge>
               {Number(p.id) !== 0 && (
-                <Button size="sm" variant="destructive" onClick={() => removeProject(String(p.id), p.name || p.path)}>
+                <Button size="sm" variant="destructive" onClick={() => setConfirm({ kind: "unregister", id: String(p.id), label: p.name || p.path })}>
                   {t("admin.unregister")}
                 </Button>
               )}
@@ -165,6 +172,21 @@ export function ApxAdminScreen() {
         channel={sendTarget}
         onClose={() => setSendTarget(null)}
       />
+
+      <ConfirmDialog
+        open={!!confirm}
+        onClose={() => setConfirm(null)}
+        onConfirm={doConfirm}
+        title={
+          confirm?.kind === "channel"
+            ? t("telegram_channels.delete_confirm", { name: confirm.name })
+            : confirm?.kind === "unregister"
+              ? t("admin.unregister_confirm", { label: confirm.label })
+              : ""
+        }
+        confirmLabel={confirm?.kind === "unregister" ? t("admin.unregister") : t("common.delete")}
+        testId="admin-confirm"
+      />
     </div>
   );
 }

package/src/interfaces/web/src/screens/InboxScreen.tsx

@@ -1,11 +1,14 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { ArrowUpRight, EyeOff, Eye } from "lucide-react";
-import { Button, Loading } from "../components/ui";
+import { EyeOff, Eye, Inbox } from "lucide-react";
+import { Button, Empty, Loading } from "../components/ui";
 import { Tip } from "../components/ui/tip";
 import { InboxList, rowKey } from "../components/inbox/InboxList";
+import { agentCardUrl } from "./mobile/routes";
+import { NewChatSheet } from "./mobile/NewChatSheet";
 import { ChatTab } from "./project/ChatTab";
 import { useInbox } from "../hooks/useInbox";
+import { threadMoved } from "../lib/inbox-selection";
 import type { InboxRow } from "../lib/api/inbox";
 import type { ChatKey } from "../components/chat/ChatList";
 import { t } from "../i18n";
@@ -22,12 +25,19 @@ import { t } from "../i18n";
  * having an inbox at all. The right pane embeds the real chat surface rather
  * than a read-only rendering of it: if you can see what an agent said, you can
  * answer it there and then.
+ *
+ * The screen draws NO chrome of its own: no page heading (the breadcrumb
+ * already names it), no card (the shell is the card), and no per-selection
+ * header (the thread's own header says who you picked). Every one of those was
+ * a second frame around something already framed — a title stuck to the top
+ * edge, and a card inside a card inside a card.
  */
 export function InboxScreen() {
   const navigate = useNavigate();
   const [includeEmpty, setIncludeEmpty] = useState(false);
-  const { rows, isLoading } = useInbox(includeEmpty);
+  const { rows, isLoading, mutate } = useInbox(includeEmpty);
   const [selected, setSelected] = useState<InboxRow | null>(null);
+  const [newOpen, setNewOpen] = useState(false);
 
   // Open the most recent conversation on arrival. An inbox that lands on an
   // empty pane makes you click twice to see the thing you came for.
@@ -35,10 +45,25 @@ export function InboxScreen() {
     if (!selected && rows.length) setSelected(rows[0]);
   }, [rows, selected]);
 
-  if (isLoading) return <Loading />;
+  // Follow the row, not the snapshot of it. The list refreshes underneath as
+  // messages arrive, and the same agent can point at a DIFFERENT thread than it
+  // did a minute ago — the ledger is a file per day, so the first message after
+  // midnight starts a new one. A selection frozen at click time would leave you
+  // reading yesterday while today filled up.
+  useEffect(() => {
+    if (!selected) return;
+    const fresh = rows.find((r) => rowKey(r) === rowKey(selected));
+    if (!fresh) return;
+    // What counts as "moved" is in lib/inbox-selection — channel AND id, for a
+    // reason worth reading before touching this.
+    if (threadMoved(selected, fresh)) setSelected(fresh);
+  }, [rows, selected]);
+
+  // Padded: the screen itself is flush to the shell's edges, so a bare
+  // spinner would sit in the very corner.
+  if (isLoading) return <div className="p-4"><Loading /></div>;
 
   const pid = selected ? String(selected.project_id ?? 0) : null;
-  const title = selected ? (selected.agent_name || selected.agent_slug) : "";
 
   /**
    * Which conversation the chat pane should open.
@@ -54,80 +79,110 @@ export function InboxScreen() {
         ? { kind: "thread", channel: row.channel, threadId: row.conversation_id }
         : undefined;
     }
+    // An a2a or group chat opens its thread, not any single agent's conversation.
+    if ((row.kind === "a2a" || row.kind === "group") && row.conversation_id) {
+      return { kind: "thread", channel: row.kind, threadId: row.conversation_id };
+    }
     return row.conversation_id
       ? { kind: "conv", agentSlug: row.agent_slug, convId: row.conversation_id }
       : { kind: "live", agentSlug: row.agent_slug };
   };
 
-  return (
-    <div className="flex h-full min-h-0 flex-col gap-3" data-testid="inbox-screen">
-      <div className="flex shrink-0 items-baseline justify-between gap-3">
-        <div>
-          <h1 className="text-lg font-semibold">{t("inbox.title")}</h1>
-          <p className="text-xs text-muted-fg">{t("inbox.subtitle")}</p>
-        </div>
-        <Tip content={includeEmpty ? t("inbox.hide_quiet") : t("inbox.show_quiet")}>
-          <Button size="sm" variant={includeEmpty ? "primary" : "ghost"} onClick={() => setIncludeEmpty((v) => !v)}>
-            {includeEmpty ? <EyeOff size={14} /> : <Eye size={14} />}
-            <span className="hidden sm:inline">{t("inbox.show_quiet")}</span>
-          </Button>
-        </Tip>
-      </div>
+  const openLive = (row: InboxRow) => {
+    setSelected({
+      ...row,
+      conversation_id: null,
+      channel: "web",
+      messages: 0,
+      preview: null,
+      last_activity_at: new Date().toISOString(),
+    });
+  };
 
-      <div className="flex min-h-0 flex-1 overflow-hidden rounded-xl border border-border bg-card/40">
-        <InboxList
-          rows={rows}
-          selectedKey={selected ? rowKey(selected) : null}
-          onSelect={setSelected}
-        />
+  const openGroup = async (info: {
+    id: string;
+    title: string;
+    participants: string[];
+    project_id: number | string;
+  }) => {
+    const fresh = await mutate();
+    const hit = (fresh || []).find(
+      (r) => r.kind === "group" && r.conversation_id === info.id,
+    );
+    setSelected(
+      hit || {
+        project_id: info.project_id,
+        project_name: null,
+        project_path: null,
+        agent_slug: `group:${info.id}`,
+        agent_name: info.title,
+        agent_emoji: null,
+        agent_icon: null,
+        kind: "group",
+        participants: info.participants,
+        pinned: false,
+        conversation_id: info.id,
+        channel: "group",
+        messages: 0,
+        preview: null,
+        last_activity_at: new Date().toISOString(),
+      },
+    );
+  };
+
+  return (
+    <div className="flex h-full min-h-0 overflow-hidden" data-testid="inbox-screen">
+      <InboxList
+        rows={rows}
+        selectedKey={selected ? rowKey(selected) : null}
+        onSelect={setSelected}
+        onNew={() => setNewOpen(true)}
+        action={
+          <Tip content={includeEmpty ? t("inbox.hide_quiet") : t("inbox.show_quiet")}>
+            <Button
+              size="sm"
+              variant={includeEmpty ? "primary" : "ghost"}
+              aria-label={includeEmpty ? t("inbox.hide_quiet") : t("inbox.show_quiet")}
+              onClick={() => setIncludeEmpty((v) => !v)}
+            >
+              {includeEmpty ? <EyeOff size={14} /> : <Eye size={14} />}
+            </Button>
+          </Tip>
+        }
+      />
 
-        <section className="flex min-w-0 flex-1 flex-col">
-          {!selected ? (
-            <div className="flex h-full items-center justify-center p-8">
-              <p className="text-sm text-muted-fg">{t("inbox.empty")}</p>
-            </div>
-          ) : (
-            <>
-              <header className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-2.5">
-                <div className="min-w-0">
-                  <h2 className="truncate text-sm font-semibold">{title}</h2>
-                  <p className="truncate text-[11px] text-muted-fg">
-                    {selected.project_name || t("inbox.super_agent_scope")}
-                    {selected.channel ? ` · ${selected.channel}` : ""}
-                  </p>
-                </div>
-                {/* The structural way out. The inbox is a second axis over the
-                    same data, so getting from a conversation to its project
-                    must always be one click. */}
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  onClick={() =>
-                    navigate(
-                      selected.kind === "super_agent"
-                        ? "/p/0/chat"
-                        : `/p/${selected.project_id}/agents/${encodeURIComponent(selected.agent_slug)}`,
-                    )}
-                >
-                  {t("inbox.open_in_project")} <ArrowUpRight size={13} />
-                </Button>
-              </header>
+      <NewChatSheet
+        open={newOpen}
+        onClose={() => setNewOpen(false)}
+        onPick={openLive}
+        onGroupCreated={(info) => void openGroup(info)}
+      />
 
-              <div className="min-h-0 flex-1">
-                {/* Remounted per selection: the chat surface holds its own
-                    session state, and carrying one agent's stream into another
-                    agent's pane would be worse than a moment's reload. */}
-                <ChatTab
-                  key={rowKey(selected)}
-                  pid={pid as string}
-                  hideSidebar
-                  initialSelection={selectionFor(selected)}
-                />
-              </div>
-            </>
-          )}
-        </section>
-      </div>
+      <section className="flex min-w-0 flex-1 flex-col">
+        {!selected ? (
+          <Empty fill icon={Inbox}>{t("inbox.empty")}</Empty>
+        ) : (
+          /* Remounted per selection: the chat surface holds its own session
+             state, and carrying one agent's stream into another agent's pane
+             would be worse than a moment's reload. */
+          <ChatTab
+            /* The thread is part of the identity: when the selected agent moves
+               to a new day's thread the pane must reopen on it, and ChatTab
+               reads its initial selection once, at mount. */
+            key={`${rowKey(selected)}::${selected.channel ?? ""}::${selected.conversation_id ?? ""}`}
+            pid={pid as string}
+            hideSidebar
+            bare
+            channelScope="web"
+            initialSelection={selectionFor(selected)}
+            /* The structural way out. The inbox is a second axis over the same
+               data, so getting from a conversation to its project must always
+               be one click — it just lives in the thread's own button row now
+               instead of a header duplicating the agent's name above it. */
+            onOpenInProject={() => navigate(agentCardUrl(selected))}
+          />
+        )}
+      </section>
     </div>
   );
 }

package/src/interfaces/web/src/screens/ProjectScreen.tsx

@@ -15,6 +15,7 @@ import { RobyEmpty } from "../components/Roby";
 import { Button } from "../components/ui/button";
 import { useProject } from "../hooks/useProjects";
 import { STORAGE } from "../constants";
+import { toneText } from "../lib/tone";
 import { t } from "../i18n";
 import { Overview } from "./project/Overview";
 import { WorkspacesTab } from "./base/WorkspacesTab";
@@ -22,7 +23,6 @@ import { LogsTab } from "./base/LogsTab";
 import { ModelsTab } from "./base/ModelsTab";
 import { AgentDefaultsTab } from "./base/AgentDefaultsTab";
 import { SessionsTab } from "./base/SessionsTab";
-import { GlobalTasksTab } from "./base/GlobalTasksTab";
 import { CommitmentsTab } from "./base/CommitmentsTab";
 import { ConfigTab } from "./project/ConfigTab";
 import { AgentsTab } from "./project/AgentsTab";
@@ -61,7 +61,7 @@ export function ProjectScreen() {
   const obsidianActive = obsidianEntry?.status?.status === "active" && !!obsidianEntry?.status?.is_enabled;
 
   const sections: TabSection[] = useMemo(() => {
-    const memoriesMark = obsidianActive ? <ObsidianLogo className="size-3 text-purple-400" /> : undefined;
+    const memoriesMark = obsidianActive ? <ObsidianLogo className={`size-3 ${toneText.purple}`} /> : undefined;
     // One shared taxonomy for both Base and projects, in the same order, so the
     // two menus mirror each other. Base additionally gets a "General" admin
     // section (workspaces / engines / agent defaults) and drops "Content"
@@ -185,14 +185,18 @@ export function ProjectScreen() {
         <Route path="memories"     element={<MemoriesTab pid={pid} />} />
         <Route path="skills"       element={<SkillsTab pid={pid} />} />
         <Route path="routines"     element={<RoutinesTab pid={pid} />} />
-        <Route path="tasks"        element={isBase ? <GlobalTasksTab /> : <TasksTab pid={pid} />} />
+        <Route path="tasks"        element={<TasksTab pid={isBase ? undefined : pid} />} />
         <Route path="commitments"  element={<CommitmentsTab pid={isBase ? undefined : pid} />} />
         <Route path="mcps"         element={<McpsTab pid={pid} />} />
         <Route path="integrations" element={<IntegrationsTab pid={pid} />} />
         <Route path="artifacts"    element={<ArtifactsTab pid={pid} />} />
         <Route path="vars"         element={<VarsTab pid={pid} />} />
         <Route path="threads"      element={<Navigate to={`/p/${pid}/chat`} replace />} />
-        <Route path="chat"         element={<ChatTab pid={pid} />} />
+        {/* Keyed by pid: React Router keeps this screen mounted across a project
+            switch, and the chat pane owns real state (which conversation is
+            open, the loaded messages). Without the key you land on the new
+            project still reading the old one's chat. */}
+        <Route path="chat"         element={<ChatTab key={pid} pid={pid} />} />
         <Route path="*"            element={<Overview pid={pid} />} />
       </Routes>
     </TabLayout>

package/src/interfaces/web/src/screens/SettingsScreen.tsx

@@ -1,7 +1,7 @@
 import { type ReactElement } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import {
-  BellRing, Bot, Cpu, Database, Globe, IdCard, KeyRound, LayoutGrid, MessageCircle, Mic, Monitor, ScrollText, Send, Smartphone, Sparkles, User,
+  BellRing, Bot, Cpu, Database, Globe, IdCard, Image as ImageIcon, KeyRound, LayoutGrid, MessageCircle, Mic, Monitor, ScrollText, Send, Smartphone, Sparkles, User,
 } from "lucide-react";
 import { useNavCollapse, type TabSection } from "../components/common/TabNav";
 import { TabLayout } from "../components/common/TabLayout";
@@ -18,13 +18,14 @@ import { AdvancedPanel } from "../components/settings/AdvancedPanel";
 import { WebPanel } from "../components/settings/WebPanel";
 import { DesktopSettingsPanel } from "../components/settings/DesktopSettingsPanel";
 import { VoiceScreen } from "./modules/VoiceScreen";
+import { ImagesScreen } from "./modules/ImagesScreen";
 import { DeckScreen } from "./modules/DeckScreen";
 import { STORAGE } from "../constants";
 import { t } from "../i18n";
 
 type TabKey =
   | "identity" | "super_agent" | "profile" | "nudge" | "engines" | "memory" | "skills" | "telegram" | "devices"
-  | "voice" | "deck" | "desktop" | "web" | "advanced";
+  | "voice" | "images" | "deck" | "desktop" | "web" | "advanced";
 
 const SECTIONS: TabSection[] = [
   {
@@ -65,6 +66,7 @@ const SECTIONS: TabSection[] = [
     title: t("settings.modules_section"),
     items: [
       { key: "voice",       label: t("nav.modules.voice"),         icon: Mic },
+      { key: "images",      label: t("nav.modules.images"),        icon: ImageIcon },
       { key: "desktop",     label: t("nav.modules.desktop"),       icon: Monitor },
       { key: "deck",        label: t("nav.modules.deck"),          icon: LayoutGrid },
       { key: "web",         label: t("nav.modules.web"),           icon: Globe },
@@ -82,7 +84,7 @@ const SECTIONS: TabSection[] = [
 // on xl (and so wants full available width). Single-section panels (identity,
 // super agent, devices, advanced) keep a cosier reading width so wide displays
 // don't blow form fields up to absurd widths.
-const WIDE_TABS = new Set<TabKey>(["engines", "telegram", "memory", "skills", "web", "voice", "profile"]);
+const WIDE_TABS = new Set<TabKey>(["engines", "telegram", "memory", "skills", "web", "voice", "images", "profile"]);
 
 const PANELS: Record<TabKey, () => ReactElement> = {
   identity:    () => <IdentityPanel />,
@@ -95,6 +97,7 @@ const PANELS: Record<TabKey, () => ReactElement> = {
   telegram:    () => <TelegramSettingsTabs />,
   devices:     () => <DevicesPanel />,
   voice:       () => <VoiceScreen />,
+  images:      () => <ImagesScreen />,
   deck:        () => <DeckScreen />,
   desktop:     () => <DesktopSettingsPanel />,
   web:         () => <WebPanel />,
@@ -137,10 +140,10 @@ function tabFromPath(pathname: string): TabKey {
     case "telegram": return "telegram";
     case "devices": return "devices";
     case "voice": return "voice";
+    case "images": return "images";
     case "deck": return "deck";
     case "desktop": return "desktop";
     case "web": return "web";
-    case "appearance": return "web"; // legacy route → Web module
     case "config":
     case "advanced": return "advanced";
     default: return "identity";