@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/web/src/screens/base/SessionsTab.tsx

@@ -1,9 +1,13 @@
 import { useEffect, useState } from "react";
-import { RefreshCw, Search, X, Terminal, Bot, FolderOpen, Copy } from "lucide-react";
+import { useSearchParams } from "react-router-dom";
+import { RefreshCw, Search, X, Terminal, Bot, FolderOpen, Copy, History, SearchX, TriangleAlert, MousePointerClick } from "lucide-react";
 import { Sessions, Deck, type SessionRow } from "../../lib/api";
 import { Section } from "../../components/Section";
 import { PagedList, usePagedQuery } from "../../components/Pager";
 import { Badge, Button, Empty, Input, Loading, Tip } from "../../components/ui";
+import { DropdownMenuItem } from "../../components/ui/dropdown-menu";
+import { RowMenu } from "../../components/RowMenu";
+import { SessionDetail } from "../../components/sessions/SessionDetail";
 import { UiSelect } from "../../components/UiSelect";
 import { useToast } from "../../components/Toast";
 import { usePersonaName } from "../../hooks/usePersonaName";
@@ -11,7 +15,7 @@ import { useProject } from "../../hooks/useProjects";
 import { t } from "../../i18n";
 
 const ENGINE_TONE: Record<string, "success" | "info" | "warning" | "muted"> = {
-  apx: "success", claude: "info", codex: "warning",
+  apx: "success", claude: "info", codex: "warning", opencode: "info",
 };
 
 // `pid` present + not base → scope to that project's local folder. Base (or no
@@ -22,6 +26,7 @@ export function SessionsTab({ pid }: { pid?: string } = {}) {
   const isBase = !pid || String(pid) === "0";
   const { project } = useProject(isBase ? "" : pid);
   const cwd = isBase ? undefined : project?.path || undefined;
+  const [params, setParams] = useSearchParams();
   const [engine, setEngine] = useState("");
   const [input, setInput] = useState("");
   const [query, setQuery] = useState("");
@@ -42,11 +47,39 @@ export function SessionsTab({ pid }: { pid?: string } = {}) {
 
   const clear = () => { setInput(""); setQuery(""); setEngine(""); setDeep(false); };
 
+  // Selection lives in the URL (?s), same as Routines (?r_id) and Tasks
+  // (?task), so a session can be linked to and survives a reload. The engine
+  // rides along because two engines can mint the same id.
+  const selectedId = params.get("s");
+  const selectedEngine = params.get("s_engine") || "";
+  const selected =
+    paged.items.find((r) => r.id === selectedId && (!selectedEngine || r.engine === selectedEngine)) || null;
+
+  const selectSession = (s: SessionRow | null) =>
+    setParams((prev) => {
+      const next = new URLSearchParams(prev);
+      if (s) { next.set("s", s.id); next.set("s_engine", s.engine); }
+      else { next.delete("s"); next.delete("s_engine"); }
+      return next;
+    }, { replace: true });
+
+  // Keep one session open by default, and heal a stale ?s left by a filter
+  // change — an empty pane next to a full list reads as a broken screen.
+  useEffect(() => {
+    if (paged.items.length === 0) return;
+    if (selected) return;
+    selectSession(paged.items[0]);
+  }, [paged.items, selected]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // ── per-row actions (all reuse existing system functions) ──────────────────
   const copyCmd = async (s: SessionRow) => {
-    // Same command a user would run in the terminal to resume the session.
+    // The engine's own resume command, asked of the daemon rather than guessed
+    // here: each CLI re-enters a conversation differently, and a wrong command
+    // fails silently by starting a NEW session.
     try {
-      await navigator.clipboard.writeText(`apx session resume ${s.id} --continue`);
+      const d = await Sessions.detail(s.id, s.engine);
+      if (!d.resume_command) { toast.error(t("base.sessions_no_command")); return; }
+      await navigator.clipboard.writeText(d.resume_command);
       toast.success(t("base.sessions_cmd_copied"));
     } catch { toast.error(t("base.sessions_copy_failed")); }
   };
@@ -110,6 +143,7 @@ export function SessionsTab({ pid }: { pid?: string } = {}) {
               { value: "apx", label: "apx" },
               { value: "claude", label: "claude" },
               { value: "codex", label: "codex" },
+              { value: "opencode", label: "opencode" },
             ]}
           />
         </div>
@@ -119,42 +153,70 @@ export function SessionsTab({ pid }: { pid?: string } = {}) {
       </div>
 
       {paged.isLoading && <Loading />}
-      {paged.error && <Empty>{t("base.sessions_error", { msg: (paged.error as Error).message })}</Empty>}
+      {paged.error && (
+        <Empty icon={TriangleAlert}>{t("base.sessions_error", { msg: (paged.error as Error).message })}</Empty>
+      )}
       {!paged.isLoading && !paged.error && paged.total === 0 && (
-        <Empty>{query ? t("base.sessions_no_match", { q: query }) : t("base.sessions_empty")}</Empty>
+        query
+          ? <Empty icon={SearchX}>{t("base.sessions_no_match", { q: query })}</Empty>
+          : <Empty icon={History}>{t("base.sessions_empty")}</Empty>
       )}
 
-      <PagedList paged={paged} fullHeight>
-        <ul className="space-y-1 text-sm">
-          {paged.items.map((s, i) => (
-            <li key={`${s.engine}-${s.id}-${i}`} className="group flex items-center gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
-              <Badge tone={ENGINE_TONE[s.engine] || "muted"}>{s.engine}</Badge>
-              <div className="min-w-0 flex-1">
-                <div className="truncate">{s.title || s.id}</div>
-                <div className="flex items-center gap-2 font-mono text-[10px] text-muted-fg">
-                  <span className="shrink-0">{s.id}</span>
-                  {s.cwd && <span className="truncate">· {s.cwd}</span>}
-                </div>
-              </div>
-              {s.mtime > 0 && <span className="shrink-0 text-[11px] text-muted-fg">{new Date(s.mtime).toLocaleString()}</span>}
-              <div className="flex shrink-0 items-center gap-0.5 opacity-60 transition-opacity group-hover:opacity-100">
-                <Tip content={t("base.sessions_act_cmd")}>
-                  <Button size="sm" variant="ghost" aria-label={t("base.sessions_act_cmd")} onClick={() => copyCmd(s)}><Terminal size={13} /></Button>
-                </Tip>
-                <Tip content={t("base.sessions_act_ask", { name: persona })}>
-                  <Button size="sm" variant="ghost" aria-label={t("base.sessions_act_ask", { name: persona })} onClick={() => askPersona(s)}><Bot size={13} /></Button>
-                </Tip>
-                <Tip content={t("base.sessions_act_folder")}>
-                  <Button size="sm" variant="ghost" aria-label={t("base.sessions_act_folder")} onClick={() => openFolder(s)}><FolderOpen size={13} /></Button>
-                </Tip>
-                <Tip content={t("base.sessions_act_path")}>
-                  <Button size="sm" variant="ghost" aria-label={t("base.sessions_act_path")} onClick={() => copyPath(s)}><Copy size={13} /></Button>
-                </Tip>
-              </div>
-            </li>
-          ))}
-        </ul>
-      </PagedList>
+      {/* Master-detail, like Routines and Tasks: the list picks, the pane on
+          the right is where the session is read and continued. Hidden while
+          there is nothing to pick — an empty list next to an empty pane, under
+          a message that already said "no sessions", is three empty states for
+          one fact. */}
+      {paged.items.length > 0 && (
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-border lg:flex-row">
+          <div className="flex min-h-0 min-w-0 flex-col border-border lg:w-[380px] lg:shrink-0 lg:border-r">
+            <PagedList paged={paged} fullHeight>
+              <ul className="space-y-1 p-1 text-sm">
+                {paged.items.map((s, i) => {
+                  const active = selected?.id === s.id && selected?.engine === s.engine;
+                  return (
+                    <li
+                      key={`${s.engine}-${s.id}-${i}`}
+                      onClick={() => selectSession(s)}
+                      className={
+                        "group flex cursor-pointer items-center gap-2 rounded-md border px-2 py-2 " +
+                        (active ? "border-primary/40 bg-primary/10" : "border-transparent hover:bg-muted/50")
+                      }
+                    >
+                      <Badge tone={ENGINE_TONE[s.engine] || "muted"}>{s.engine}</Badge>
+                      <div className="min-w-0 flex-1">
+                        <div className="truncate">{s.title || s.id}</div>
+                        <div className="truncate font-mono text-[10px] text-muted-fg">
+                          {s.mtime > 0 ? new Date(s.mtime).toLocaleString() : s.id}
+                        </div>
+                      </div>
+                      <RowMenu label={t("base.sessions_act_menu")}>
+                        <DropdownMenuItem onClick={() => copyCmd(s)}>
+                          <Terminal size={13} /> {t("base.sessions_act_cmd")}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => askPersona(s)}>
+                          <Bot size={13} /> {t("base.sessions_act_ask", { name: persona })}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => openFolder(s)}>
+                          <FolderOpen size={13} /> {t("base.sessions_act_folder")}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => copyPath(s)}>
+                          <Copy size={13} /> {t("base.sessions_act_path")}
+                        </DropdownMenuItem>
+                      </RowMenu>
+                    </li>
+                  );
+                })}
+              </ul>
+            </PagedList>
+          </div>
+          <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
+            {selected
+              ? <SessionDetail row={selected} onAskPersona={askPersona} />
+              : <Empty fill icon={MousePointerClick}>{t("base.sessions_pick")}</Empty>}
+          </div>
+        </div>
+      )}
     </Section>
   );
 }

package/src/interfaces/web/src/screens/base/WorkspacesTab.tsx

@@ -21,7 +21,7 @@ export function WorkspacesTab() {
       }
     >
       {isLoading && <Loading />}
-      {!isLoading && projects.length === 0 && <Empty>{t("base.workspaces_empty")}</Empty>}
+      {!isLoading && projects.length === 0 && <Empty icon={FolderKanban}>{t("base.workspaces_empty")}</Empty>}
 
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
         {projects.map((p) => {

package/src/interfaces/web/src/screens/mobile/MobileChat.tsx

@@ -0,0 +1,85 @@
+import { useRef } from "react";
+import { ChatTab } from "../project/ChatTab";
+import type { ChatKey } from "../../components/chat/ChatList";
+import { selectionFromParam, agentCardUrl } from "./routes";
+import type { InboxRow } from "../../lib/api/inbox";
+
+/**
+ * The selection this URL asks for, resolved ONCE per URL — not on every render.
+ *
+ * With no `:session` segment the fallback is the row's own default, which is
+ * the INBOX's idea of this agent's latest thread. The inbox moves on its own:
+ * it polls every 15s and revalidates on any message anywhere. So Roby answering
+ * on Telegram while you were reading the web thread flipped `row.channel`,
+ * which changed the selection, which changed the key on the chat below — and
+ * remounted the whole thing under you. The thread you were reading swapped for
+ * one you never opened, your scroll position and your draft went with it, and a
+ * voice note playing at that moment became impossible to stop: a detached
+ * <audio> keeps playing, while the play button still on screen belongs to the
+ * element that replaced it.
+ *
+ * A row that moves is news for the LIST. It is not a navigation instruction for
+ * the chat you are already inside. Only the URL may move you — which is what
+ * picking a session does.
+ */
+function useResolvedSelection(param: string | undefined, row: InboxRow): ChatKey {
+  // Keyed on the chat's identity as well as the param: React reuses this
+  // component instance when you go from one agent to another, and a cache keyed
+  // on the (absent) session alone would hand the new chat the old one's thread.
+  const id = `${row.project_id ?? ""}/${row.agent_slug}/${param ?? ""}`;
+  const resolved = useRef<{ id: string; key: ChatKey } | null>(null);
+  if (!resolved.current || resolved.current.id !== id) {
+    resolved.current = { id, key: selectionFromParam(param, row) };
+  }
+  return resolved.current.key;
+}
+
+/**
+ * One chat, full screen.
+ *
+ * There is nothing here but the chat: the header — back arrow, the agent's
+ * face, the session dropdown, the ⋯ menu — is the chat's own, drawn by ChatTab
+ * in its compact shape. This screen used to draw a second one beside it, which
+ * is how the phone ended up with a session switcher the desktop did not have
+ * and with none of the actions the desktop did.
+ */
+export function MobileChat({
+  row,
+  sessionParamValue,
+  onBack,
+  onPickSession,
+}: {
+  row: InboxRow;
+  /** The `:session` segment of the URL, if any. */
+  sessionParamValue?: string;
+  onBack: () => void;
+  onPickSession: (key: ChatKey) => void;
+}) {
+  const pid = String(row.project_id ?? 0);
+  // The URL is the state. Picking a session navigates, and this reads it back
+  // — so a reload, or the phone discarding the tab while you were in another
+  // app, reopens the thread you were actually reading.
+  const selection = useResolvedSelection(sessionParamValue, row);
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col overflow-hidden">
+      {/* The real chat surface, not a read-only rendering of it: if you can see
+          what an agent said here, you can answer it here. */}
+      <ChatTab
+        key={JSON.stringify(selection)}
+        pid={pid}
+        bare
+        compact
+        hideSidebar
+        /* No channel scope: the list this chat was opened from shows every
+           channel, so scoping the session picker to `web` meant the thread you
+           are actually reading — a WhatsApp one, say — was missing from its own
+           switcher. */
+        onOpenInProject={() => window.open(agentCardUrl(row), "_blank", "noopener")}
+        onBack={onBack}
+        onSelectionChange={onPickSession}
+        initialSelection={selection}
+      />
+    </div>
+  );
+}

package/src/interfaces/web/src/screens/mobile/MobileChatList.tsx

@@ -0,0 +1,244 @@
+import { useEffect, useMemo, useState } from "react";
+import { Ellipsis, Search, Settings, Share, ShieldAlert, Smartphone, SquarePen, Users, X } from "lucide-react";
+import { installStance, onInstallStateChange, promptInstall } from "../../lib/pwa";
+import { NotifyNudge, PrefsDialog } from "../../components/settings/PanelPrefs";
+import { InboxRowItem } from "../../components/inbox/InboxRowItem";
+import { rowKey } from "../../components/inbox/InboxList";
+import { ChannelFilter } from "../../components/inbox/ChannelFilter";
+import { channelEnabledIn, channelsOf } from "../../lib/channels";
+import { useChannelPrefs } from "../../hooks/useChannelPrefs";
+import { cn } from "../../lib/cn";
+import { isNativeShell } from "../../lib/net";
+import { t } from "../../i18n";
+import type { InboxRow } from "../../lib/api/inbox";
+
+/**
+ * The chat list — one row per agent, most recent first. Agents are loose: there
+ * is no per-project grouping here (the project rail is where structure lives).
+ * The only group rows are a2a threads, which InboxRowItem draws with a clustered
+ * avatar of their participants.
+ *
+ * The shell stays phone-specific: no module rail or two-pane split, and tapping
+ * drills in. Conversation rows share the desktop renderer with touch density.
+ */
+export function MobileChatList({
+  rows, onOpenChat, onNew,
+}: {
+  rows: InboxRow[];
+  onOpenChat: (row: InboxRow) => void;
+  /** "New" — open the agent picker to start a chat with anyone, including agents
+   *  not in this (web-only) list yet. */
+  onNew: () => void;
+}) {
+  const [query, setQuery] = useState("");
+  const [prefsOpen, setPrefsOpen] = useState(false);
+  // Inside the app the WebView is already laid out below the system bars, so
+  // this header must not pay for them again (see lib/net.ts).
+  const androidOptions = isNativeShell();
+  const view = useChannelPrefs("view");
+
+  // Off the unfiltered rows, so a channel switched off keeps its own chip to
+  // come back through — and its count while it is off.
+  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 q = query.trim().toLowerCase();
+  const match = (s: string | null | undefined) => !q || String(s || "").toLowerCase().includes(q);
+  const shownRows = rows
+    .filter((r) => channelEnabledIn(view.prefs, "view", r.channel))
+    .filter((r) => match(r.agent_name) || match(r.agent_slug) || match(r.project_name));
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col overflow-hidden">
+      <header className={cn(
+        "shrink-0 border-b border-border px-4 pb-3",
+        androidOptions ? "pt-1.5" : "pt-[max(0.75rem,env(safe-area-inset-top))]",
+      )}>
+        {/* Theme and language are reachable from the screen the phone lands on.
+            They used to live only in the desktop panel's Web module, which on a
+            phone means leaving the app to change how the app looks. */}
+        <div className="mb-2 flex items-center justify-between gap-2">
+          <h1 className="text-xl font-semibold">{t("inbox.title")}</h1>
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={onNew}
+              aria-label={t("mobile.new_chat")}
+              data-testid="mobile-new-chat"
+              className="flex size-9 shrink-0 items-center justify-center rounded-full text-muted-fg active:bg-accent/60"
+            >
+              <SquarePen size={19} />
+            </button>
+            <button
+              type="button"
+              onClick={() => setPrefsOpen(true)}
+              aria-label={t("mobile.prefs")}
+              className="flex size-9 shrink-0 items-center justify-center rounded-full text-muted-fg active:bg-accent/60"
+            >
+              <Settings size={19} />
+            </button>
+            {androidOptions && (
+              <button
+                type="button"
+                onClick={() => window.APXAndroid?.openOptions()}
+                aria-label={t("mobile.app_options")}
+                className="flex size-9 shrink-0 items-center justify-center rounded-full text-muted-fg active:bg-accent/60"
+              >
+                <Ellipsis size={21} />
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="relative">
+          <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-fg" />
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t("inbox.search")}
+            className="h-10 w-full rounded-full border border-border bg-muted/30 pl-9 pr-3 text-[15px] outline-none placeholder:text-muted-fg focus:border-primary/50"
+          />
+        </div>
+        {/* Which channels this phone wants to see. Telegram starts off here —
+            the app is on this very device — and the picker says so ("6 of 11")
+            without needing a strip of chips wider than the screen. */}
+        {channels.length > 1 && (
+          <div className="mt-2 flex items-center gap-2">
+            <ChannelFilter
+              channels={channels}
+              counts={counts}
+              enabled={view.enabled}
+              onToggle={view.toggle}
+              onSetAll={(on) => view.setAll(channels, on)}
+              testIdPrefix="mobile-channel"
+            />
+          </div>
+        )}
+      </header>
+
+      {/* Both offers live at the top of the screen the phone lands on, for the
+          same reason: neither can announce itself. A permission prompt needs a
+          real tap to be accepted at all, so the app has to ask first. */}
+      <NotifyNudge />
+      <InstallRow />
+
+      <div className="min-h-0 flex-1 divide-y divide-border/60 overflow-y-auto pb-[env(safe-area-inset-bottom)]">
+        {shownRows.map((row) => (
+          <InboxRowItem
+            /* The CHANNEL is part of a row's identity, and leaving it out of the
+               key is what made this list unusable: the super-agent has one row
+               per channel and they share a day id, so telegram / whatsapp / web
+               all keyed as `null:super_agent:2026-08-30`. React reuses a DOM
+               node per key, so rows appeared twice, rows that had been filtered
+               out stayed on screen, and turning a channel off looked like a
+               filter that did not apply. Same key the desktop rail uses. */
+            key={rowKey(row)}
+            row={row}
+            variant="touch"
+            onSelect={onOpenChat}
+          />
+        ))}
+        {!shownRows.length && (
+          <p className={cn("px-4 py-10 text-center text-sm text-muted-fg")}>
+            <Users size={20} className="mx-auto mb-2 opacity-50" />
+            {/* An empty list because every channel is off is not an empty
+                inbox, and saying so sends someone hunting for a bug. */}
+            {rows.length && !q ? t("channels.all_hidden") : t("mobile.empty")}
+          </p>
+        )}
+      </div>
+
+      <PrefsDialog open={prefsOpen} onClose={() => setPrefsOpen(false)} />
+    </div>
+  );
+}
+
+
+/**
+ * "Put this on your home screen" — offered here because this is the screen a
+ * phone actually lands on, not buried in the desktop settings.
+ *
+ * Shown once and dismissible: an install banner that comes back every session
+ * is an ad. Nothing is shown at all when the browser cannot install (no secure
+ * context) or already has — the row would be a promise we cannot keep.
+ */
+const INSTALL_DISMISSED = "apx.install.dismissed";
+
+function InstallRow() {
+  const [, bump] = useState(0);
+  const [hidden, setHidden] = useState(() => {
+    try {
+      return localStorage.getItem(INSTALL_DISMISSED) === "1";
+    } catch {
+      return false;
+    }
+  });
+  // Chrome fires beforeinstallprompt whenever it likes — usually after this
+  // screen has already painted.
+  useEffect(() => onInstallStateChange(() => bump((n) => n + 1)), []);
+
+  const stance = installStance();
+  if (hidden) return null;
+  // `insecure` is shown too, and that is the important one: over plain http on
+  // a LAN address Chrome does not expose the service worker API at all, so
+  // nothing fires, nothing appears, and the panel looked like it had simply
+  // forgotten to offer the install. Silence is the worst possible answer to
+  // "why can't I install this" — say what the browser is doing and why.
+  if (stance.kind !== "prompt" && stance.kind !== "ios" && stance.kind !== "insecure") return null;
+
+  const dismiss = () => {
+    setHidden(true);
+    try {
+      localStorage.setItem(INSTALL_DISMISSED, "1");
+    } catch {
+      /* private mode: it stays gone for this session, which is enough */
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-start gap-3 border-b border-border px-4 py-3 text-sm",
+        stance.kind === "insecure" ? "bg-amber-500/10" : "bg-primary/5",
+      )}
+    >
+      {stance.kind === "prompt" ? (
+        <Smartphone size={16} className="shrink-0 text-primary" />
+      ) : stance.kind === "ios" ? (
+        <Share size={16} className="shrink-0 text-primary" />
+      ) : (
+        <ShieldAlert size={16} className="shrink-0 text-amber-500" />
+      )}
+      <span className="min-w-0 flex-1 [overflow-wrap:anywhere]">
+        {stance.kind === "prompt"
+          ? t("access.install_sub")
+          : stance.kind === "ios"
+            ? t("access.install_ios")
+            : t("access.install_insecure")}
+      </span>
+      {stance.kind === "prompt" && (
+        <button
+          type="button"
+          onClick={() => void promptInstall()}
+          className="shrink-0 rounded-full bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground"
+        >
+          {t("access.install_now")}
+        </button>
+      )}
+      <button
+        type="button"
+        onClick={dismiss}
+        aria-label={t("common.close")}
+        className="shrink-0 rounded p-1 text-muted-fg hover:text-foreground"
+      >
+        <X size={14} />
+      </button>
+    </div>
+  );
+}