@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/web/src/screens/mobile/routes.ts

@@ -0,0 +1,239 @@
+import type { ChatKey } from "../../components/chat/ChatList";
+import type { InboxRow } from "../../lib/api/inbox";
+
+/**
+ * The phone surface in the URL.
+ *
+ *   /m                                       → /m/chat
+ *   /m/chat                                  the chat list
+ *   /m/chat/:pid/:slug                       a chat, on whatever it last used
+ *   /m/chat/:pid/:slug/:session              a chat, on one specific session
+ *   /m/tasks                                 every project's tasks
+ *   /m/commitments                           every project's promises
+ *   /m/team/:pid                             one project's team
+ *
+ * `/m` and not `/mobile`, and each surface named after WHAT IT SHOWS rather
+ * than what device is holding it. The phone stopped being a single screen the
+ * day it grew a tab bar: "/mobile" could only ever mean the one thing, and the
+ * second thing had to be `/mobile/tasks` — a path that says the device twice
+ * and the subject once.
+ *
+ * Old links still land: `/mobile/*` redirects here (App.tsx). They are not
+ * historical — the Android shell hardcodes `/mobile`, QR codes are printed and
+ * scanned, and an installed PWA keeps whatever start_url it was installed with.
+ *
+ * Navigation used to be `useState`, which meant a reload — or the phone
+ * discarding the tab in the background, which it does constantly — dropped you
+ * back on the list and lost the thread you were reading. Anything you can be
+ * looking at has to be somewhere you can be sent back to.
+ *
+ * `~` separates a channel from a thread id because it is one of the handful of
+ * characters a URL never has to escape (RFC 3986 unreserved), so the path stays
+ * readable: /m/chat/0/roby/telegram~2026-08-19.
+ */
+
+/** The phone surface's namespace. Every screen below hangs off it. */
+export const MOBILE_ROOT = "/m";
+
+/** The three tabs, in the order the bottom bar shows them. */
+export const CHAT_ROOT = `${MOBILE_ROOT}/chat`;
+export const TASKS_ROOT = `${MOBILE_ROOT}/tasks`;
+export const COMMITMENTS_ROOT = `${MOBILE_ROOT}/commitments`;
+
+/**
+ * The pre-`/m` spelling, kept alive by a redirect rather than by a second set
+ * of routes — one place to translate, and nothing downstream has to know two
+ * shapes. `/mobile` alone is the list, which is now `/m/chat`.
+ */
+export const LEGACY_MOBILE_ROOT = "/mobile";
+
+export function fromLegacyMobilePath(pathname: string): string {
+  const rest = pathname.slice(LEGACY_MOBILE_ROOT.length).replace(/^\/+/, "");
+  return rest ? `${MOBILE_ROOT}/${rest}` : CHAT_ROOT;
+}
+
+/**
+ * The daemon-level super-agent belongs to no project: its inbox row carries
+ * `project_id: null`. Left as an empty string that becomes `/m/chat//roby`
+ * — a path with an empty segment, which matches no route at all, so opening
+ * Roby bounced straight back to the list.
+ *
+ * `-` and not `0`: zero is a REAL project id here, and a sentinel that collides
+ * with live data is a bug waiting for the one user who has that project.
+ */
+const NO_PROJECT = "-";
+
+/** The `:pid` segment for a row. */
+export function pidOf(row: Pick<InboxRow, "project_id">): string {
+  return row.project_id === null || row.project_id === undefined ? NO_PROJECT : String(row.project_id);
+}
+
+/** The project id a `:pid` segment stands for — null for the super-agent. */
+export function projectOf(pid: string): number | string | null {
+  return pid === NO_PROJECT ? null : pid;
+}
+
+/** The session segment for a selection, or null when it is just "the latest". */
+export function sessionParam(key: ChatKey): string | null {
+  if (key.kind === "thread") return `${key.channel}~${key.threadId}`;
+  if (key.kind === "conv") return key.convId;
+  return null;
+}
+
+/** Query string ChatTab writes for a selection (`/p/:pid/chat` and `/inbox`). */
+export function queryForChat(key: ChatKey): URLSearchParams {
+  const next = new URLSearchParams();
+  if (key.kind === "conv") {
+    next.set("agent", key.agentSlug);
+    next.set("conv", key.convId);
+  } else if (key.kind === "thread") {
+    next.set("channel", key.channel);
+    next.set("thread", key.threadId);
+  } else {
+    next.set("agent", key.agentSlug);
+  }
+  return next;
+}
+
+export function chatPath(pid: string, slug: string, key?: ChatKey): string {
+  const base = `${CHAT_ROOT}/${encodeURIComponent(pid)}/${encodeURIComponent(slug)}`;
+  const session = key ? sessionParam(key) : null;
+  return session ? `${base}/${encodeURIComponent(session)}` : base;
+}
+
+export function teamPath(pid: string): string {
+  return `${MOBILE_ROOT}/team/${encodeURIComponent(pid)}`;
+}
+
+/**
+ * Where an agent's card / project view lives — the ficha (`AgentDetailScreen`)
+ * for a project agent, the workspace chat for the super-agent (it has no project
+ * ficha), and the pair thread for an a2a row. Shared so the inbox (self) and the
+ * phone (new tab) send you to the same place.
+ */
+export function agentCardUrl(row: InboxRow): string {
+  if (row.kind === "super_agent") return "/p/0/chat";
+  const pid = row.project_id ?? 0;
+  if (row.kind === "a2a" || row.kind === "group") {
+    return `/p/${pid}/chat?channel=${row.kind}&thread=${encodeURIComponent(row.conversation_id || "")}`;
+  }
+  return `/p/${pid}/agents/${encodeURIComponent(row.agent_slug)}`;
+}
+
+/**
+ * Where a row opens by default: the super-agent has channel threads, a project
+ * agent has conversation files, and either can have neither yet.
+ */
+export function keyFor(row: InboxRow, sessionId?: string, channel?: string): ChatKey {
+  // An a2a row is a conversation BETWEEN two agents, addressed as a thread on the
+  // "a2a" channel — never one agent's conversation file (its agent_slug is the
+  // synthetic "a2a:<pair>", which owns no file). Missing this made the phone open
+  // a blank pane with the raw pair id in the header.
+  if (row.kind === "a2a" || row.kind === "group") {
+    const id = sessionId || row.conversation_id || "";
+    return id ? { kind: "thread", channel: row.kind, threadId: id } : { kind: "live", agentSlug: row.agent_slug };
+  }
+  if (row.kind === "super_agent") {
+    const ch = channel || row.channel || "web";
+    const id = sessionId || row.conversation_id || "";
+    return id ? { kind: "thread", channel: ch, threadId: id } : { kind: "live", agentSlug: row.agent_slug };
+  }
+  const id = sessionId || row.conversation_id || "";
+  return id ? { kind: "conv", agentSlug: row.agent_slug, convId: id } : { kind: "live", agentSlug: row.agent_slug };
+}
+
+/**
+ * Does this URL mean the person is already reading this inbox row?
+ *
+ * ChatTab addresses a session two ways: query (`?channel=&thread=` or
+ * `?agent=&conv=`) on `/p/:pid/chat` and `/inbox`, and a path on the phone
+ * (`/m/chat/:pid/:slug/:session`). Matching only `?agent=` missed groups
+ * and the inbox — both write `channel`+`thread` and have no agent param.
+ */
+export function urlLooksAt(href: string, row: InboxRow): boolean {
+  const url = new URL(href, "http://localhost");
+  const key = keyFor(row);
+
+  // Both spellings: a notification raised before this rename still carries
+  // `/mobile/chat/...`, and "am I already reading this?" must not answer no
+  // just because the tab has not been redirected yet.
+  const mobile = url.pathname.match(/^\/(?:m|mobile)\/chat\/[^/]+\/([^/]+)(?:\/([^/]+))?/);
+  if (mobile) {
+    if (decodeURIComponent(mobile[1]) !== row.agent_slug) return false;
+    if (!mobile[2]) return true;
+    return decodeURIComponent(mobile[2]) === (sessionParam(key) ?? "");
+  }
+
+  const want = queryForChat(key);
+  if (want.has("thread")) {
+    return url.searchParams.get("channel") === want.get("channel")
+      && url.searchParams.get("thread") === want.get("thread");
+  }
+  if (want.has("conv")) {
+    return url.searchParams.get("agent") === want.get("agent")
+      && url.searchParams.get("conv") === want.get("conv");
+  }
+  if (want.has("agent")) return url.searchParams.get("agent") === want.get("agent");
+  return false;
+}
+
+/** The selection a URL asks for, falling back to the row's own default. */
+export function selectionFromParam(param: string | undefined, row: InboxRow): ChatKey {
+  // An a2a row has exactly one thread; there are no alternate sessions to pick,
+  // so the pair thread is the selection regardless of any URL session segment.
+  if (row.kind === "a2a" || row.kind === "group") return keyFor(row);
+  if (!param) return keyFor(row);
+  const raw = decodeURIComponent(param);
+  if (row.kind === "super_agent") {
+    const cut = raw.indexOf("~");
+    // A thread with no channel in it is a URL from somewhere else (or hand
+    // typed); fall back rather than building a selection that loads nothing.
+    if (cut <= 0) return keyFor(row);
+    return { kind: "thread", channel: raw.slice(0, cut), threadId: raw.slice(cut + 1) };
+  }
+  return { kind: "conv", agentSlug: row.agent_slug, convId: raw };
+}
+
+/**
+ * A row for an agent the inbox does not list.
+ *
+ * Deep links outlive the inbox: it only carries agents that have been talked
+ * to, and it is filtered and paged. Landing on a chat that is not in the list
+ * should open the chat with the slug as its name, not bounce to the list —
+ * being sent somewhere else is worse than a missing avatar.
+ */
+export function placeholderRow(pid: string, slug: string, known: InboxRow[]): InboxRow {
+  // Whether this is the super-agent is decided by the inbox's own answer for
+  // that slug when it has one, so this file never hardcodes its spelling.
+  const sameSlug = known.find((r) => r.agent_slug === slug);
+  const isGroup = slug.startsWith("group:");
+  const isA2a = slug.startsWith("a2a:");
+  const kind = sameSlug?.kind ?? (isGroup ? "group" : isA2a ? "a2a" : "agent");
+  const conversation_id = isGroup
+    ? slug.slice("group:".length)
+    : isA2a
+      ? slug.slice("a2a:".length)
+      : null;
+  return {
+    project_id: projectOf(pid),
+    project_name: null,
+    project_path: null,
+    agent_slug: slug,
+    agent_name: sameSlug?.agent_name ?? null,
+    agent_emoji: sameSlug?.agent_emoji ?? null,
+    agent_icon: sameSlug?.agent_icon ?? null,
+    kind,
+    pinned: false,
+    conversation_id: sameSlug?.conversation_id ?? conversation_id,
+    channel: kind === "group" || kind === "a2a" ? kind : null,
+    messages: 0,
+    preview: null,
+    last_activity_at: "",
+  };
+}
+
+/** The row a /m/chat/:pid/:slug URL points at. */
+export function findRow(rows: InboxRow[], pid: string, slug: string): InboxRow {
+  const hit = rows.find((r) => pidOf(r) === pid && r.agent_slug === slug);
+  return hit || placeholderRow(pid, slug, rows);
+}

package/src/interfaces/web/src/screens/modules/CodeScreen.tsx

@@ -5,30 +5,33 @@ import { Bot, FolderTree, MessageSquare, PanelLeft, PanelRight, Terminal, X } fr
 import { Group as PanelGroup, Panel, Separator as PanelResizeHandle } from "react-resizable-panels";
 import { Code, Projects, Agents } from "../../lib/api";
 import { Artifacts } from "../../lib/api/artifacts";
-import { http } from "../../lib/http";
+import { ProjectFiles } from "../../lib/api/projectFiles";
 import { Empty, Loading } from "../../components/ui";
 import { Tip } from "../../components/ui/tip";
-import { UiSelect } from "../../components/UiSelect";
 import { useSetPageLabel, useSetPageActions } from "../../hooks/useNavCollapseCtx";
 import { MessageList } from "../../components/chat/MessageList";
-import { CodeProjectPicker } from "../../components/code/CodeProjectPicker";
+import { CodeProjectPicker, ALL_PROJECTS } from "../../components/code/CodeProjectPicker";
 import { CodeSessionList } from "../../components/code/CodeSessionList";
+import {
+  NewCodeSessionDialog,
+  SUPER_AGENT_VALUE,
+  type NewSessionValues,
+} from "../../components/code/NewCodeSessionDialog";
 import { CodeComposer } from "../../components/code/CodeComposer";
 import { CodeSidePanel } from "../../components/code/CodeSidePanel";
 import { CodeFileTree } from "../../components/code/CodeFileTree";
 import { CodeFileViewer } from "../../components/code/CodeFileViewer";
 import { CodeTerminal } from "../../components/code/CodeTerminal";
 import { InlineAskPanel, pendingAskQuestions } from "../../components/chat/InlineAskPanel";
+import { ConfirmDialog } from "../../components/common/ConfirmDialog";
 import { useToast } from "../../components/Toast";
 import { t } from "../../i18n";
 import { applyStreamEvent, textOf, type ChatMsg } from "../../hooks/useChat";
-import type { CodeMode, CodeStreamEvent, CodeTurn } from "../../lib/api/code";
+import type { CodeMode, CodeSessionRow, CodeStreamEvent, CodeTurn } from "../../lib/api/code";
 
 // Suppress unused import warning for textOf (kept for consumers)
 void textOf;
 
-const SUPER_AGENT_VALUE = "super-agent";
-
 // Hit area is wider than the visible line so the handle is comfortable to
 // grab — the inner ::before line is what the user sees.
 function ResizeHandle() {
@@ -53,9 +56,16 @@ export function CodeScreen() {
   const projects = useSWR("/api/projects", () => Projects.list());
   const projectList = useMemo(() => projects.data || [], [projects.data]);
 
+  // Two different projects live here, and conflating them was the bug.
+  //   filterPid — what the session LIST shows. "" = every project (the default).
+  //   pid       — the project the OPEN session belongs to. Everything else in
+  //               the module (files, terminal, artifacts, diff, agents) is
+  //               scoped to this one, and it follows the session, not the filter.
+  const [filterPid, setFilterPid] = useState<string>(ALL_PROJECTS);
   const [pid, setPid] = useState<string>("");
   const [sid, setSid] = useState<string | null>(null);
-  const [agentSlug, setAgentSlug] = useState<string>(SUPER_AGENT_VALUE);
+  const [newOpen, setNewOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
   const [msgs, setMsgs] = useState<ChatMsg[]>([]);
   const [draft, setDraft] = useState("");
   const [busy, setBusy] = useState(false);
@@ -64,6 +74,9 @@ export function CodeScreen() {
   const [termOpen, setTermOpen] = useState(false);
   const [termInitCmd, setTermInitCmd] = useState("");
   const [worktreeOpen, setWorktreeOpen] = useState(false);
+  // Session pending delete confirmation — id AND project, since the list can
+  // span projects and an id alone does not address a session.
+  const [confirmDelete, setConfirmDelete] = useState<{ id: string; pid: string } | null>(null);
   const abortRef = useRef<AbortController | null>(null);
   const [searchParams, setSearchParams] = useSearchParams();
   const deepLinkDone = useRef(false);
@@ -85,14 +98,25 @@ export function CodeScreen() {
     setTermInitCmd(cmd);
   }, []);
 
-  // Default to the first registered project once the list loads.
+  // Default to the first registered project once the list loads — only as the
+  // fallback scope for a screen with no session open yet.
   useEffect(() => {
     if (!pid && projectList.length) setPid(String(projectList[0].id));
   }, [pid, projectList]);
 
-  // Sessions for the active project.
-  const sessions = useSWR(pid ? ["code-sessions", pid] : null, () =>
-    Code.sessions.list(pid),
+  // The session list. Unfiltered by default: a session started by
+  // `apx exec --code` belongs to whatever project that cwd resolved to, and
+  // scoping the list to the project in view made those invisible.
+  const sessions = useSWR(
+    filterPid ? ["code-sessions", filterPid] : ["code-sessions", "all"],
+    () => (filterPid ? Code.sessions.list(filterPid) : Code.sessions.listAll()),
+  );
+
+  // Rows carry their own pid only in the cross-project list; when the list is
+  // already scoped, the filter IS the pid.
+  const rowPid = useCallback(
+    (row: CodeSessionRow) => String(row.pid ?? filterPid ?? pid),
+    [filterPid, pid],
   );
 
   // Agents for the active project.
@@ -108,17 +132,16 @@ export function CodeScreen() {
     Code.changes(pid, sid!),
   );
 
-  // Auto-select the newest session when the list loads / project changes.
+  // Auto-select the newest session when the list loads or the filter changes.
+  // Selecting also moves `pid`: the row's project is what makes it openable.
   useEffect(() => {
     const list = sessions.data || [];
-    if (!sid && list.length) setSid(list[0].id);
-    if (sid && list.length && !list.some((s) => s.id === sid)) setSid(list[0]?.id ?? null);
-  }, [sessions.data, sid]);
-
-  // Sync agentSlug from the active session when it loads.
-  useEffect(() => {
-    if (session.data) setAgentSlug(session.data.agentSlug || SUPER_AGENT_VALUE);
-  }, [session.data]);
+    if (!list.length) return;
+    if (sid && list.some((s) => s.id === sid)) return;
+    const next = list[0];
+    setSid(next.id);
+    setPid(rowPid(next));
+  }, [sessions.data, sid, rowPid]);
 
   // Hydrate the message list whenever the active session's transcript loads.
   // (Not while streaming — we own the array then.)
@@ -135,52 +158,71 @@ export function CodeScreen() {
   const mode: CodeMode = active?.mode === "plan" ? "plan" : "build";
   const model = active?.model || "";
 
-  const onPickProject = (next: string) => {
-    if (next === pid || busy) return;
-    setPid(next);
+  // Narrowing the LIST. It deliberately does not touch the open session's
+  // project — the auto-select effect moves to whatever the new list holds.
+  const onFilterProject = (next: string) => {
+    if (next === filterPid || busy) return;
+    setFilterPid(next);
     setSid(null);
     setMsgs([]);
   };
 
-  const onSelectSession = (id: string) => {
-    if (busy || id === sid) return;
-    setSid(id);
+  const onSelectSession = (row: CodeSessionRow) => {
+    if (busy || row.id === sid) return;
+    setPid(rowPid(row));
+    setSid(row.id);
     setMsgs([]);
   };
 
-  const onCreateSession = async () => {
-    if (!pid || busy) return;
+  const onCreateSession = async (values: NewSessionValues) => {
+    if (busy) return;
+    setCreating(true);
     try {
-      const created = await Code.sessions.create(pid, {
-        title: t("code_module.untitled"),
-        agentSlug: agentSlug !== SUPER_AGENT_VALUE ? agentSlug : null,
+      const created = await Code.sessions.create(values.pid, {
+        title: values.title,
+        agentSlug: values.agentSlug,
+        mode: values.mode,
       });
-      await sessions.mutate();
+      // The new session may live outside the current filter — show it rather
+      // than creating something the list then hides.
+      if (filterPid && filterPid !== values.pid) setFilterPid(values.pid);
+      setPid(values.pid);
       setSid(created.id);
       setMsgs([]);
+      setNewOpen(false);
+      await sessions.mutate();
     } catch (e) {
       toast.error((e as Error).message);
+    } finally {
+      setCreating(false);
     }
   };
 
-  const onRenameSession = async (id: string, current: string) => {
+  const onRenameSession = async (row: CodeSessionRow, current: string) => {
     const title = window.prompt(t("code_module.rename"), current);
     if (!title || title === current) return;
     try {
-      await Code.sessions.update(pid, id, { title });
+      await Code.sessions.update(rowPid(row), row.id, { title });
       await sessions.mutate();
-      if (id === sid) await session.mutate();
+      if (row.id === sid) await session.mutate();
     } catch (e) {
       toast.error((e as Error).message);
     }
   };
 
-  const onDeleteSession = async (id: string) => {
+  const onDeleteSession = (row: CodeSessionRow) => {
     if (busy) return;
-    if (!window.confirm(t("code_module.delete_confirm"))) return;
+    // Keep the row's project: deleting by the project in view would 404 (or,
+    // worse, hit a same-id session elsewhere).
+    setConfirmDelete({ id: row.id, pid: rowPid(row) });
+  };
+
+  const doDeleteSession = async () => {
+    const target = confirmDelete;
+    if (!target) return;
     try {
-      await Code.sessions.remove(pid, id);
-      if (id === sid) {
+      await Code.sessions.remove(target.pid, target.id);
+      if (target.id === sid) {
         setSid(null);
         setMsgs([]);
       }
@@ -190,9 +232,12 @@ export function CodeScreen() {
     }
   };
 
-  // Persist mode / model changes to the session (PATCH) + keep SWR in sync.
+  // Re-point THIS session at another agent. The choice is made when the session
+  // is created (see NewCodeSessionDialog); this is the correction, and it lives
+  // in the session's own properties panel so it cannot be mistaken for a global
+  // "who am I talking to" switch — which is exactly how the old rail dropdown
+  // read.
   const onAgentChange = async (slug: string) => {
-    setAgentSlug(slug);
     if (!sid) return;
     try {
       await Code.sessions.update(pid, sid, {
@@ -204,6 +249,7 @@ export function CodeScreen() {
     }
   };
 
+  // Persist mode / model changes to the session (PATCH) + keep SWR in sync.
   const patchSession = useCallback(
     async (patch: { mode?: CodeMode; model?: string | null }) => {
       if (!sid) return;
@@ -292,14 +338,14 @@ export function CodeScreen() {
         if (prev.some((f) => f.path === path)) return prev; // already open
         return [...prev, { path, content: "", loading: true }];
       });
-      // Fetch content async
-      http
-        .post<{ ok: boolean; stdout: string; stderr: string }>("/run", {
-          cmd: `cat "${path}"`,
-          project: pid,
-        })
+      // Fetch content through the sandboxed project-files API — the path is
+      // user-controlled, so it must never reach a shell.
+      ProjectFiles.read(pid, path)
         .then((r) => {
-          const content = r.stdout || r.stderr || t("modules_ui.code_file_empty");
+          const content =
+            r.encoding === "utf8" && typeof r.content === "string"
+              ? r.content || t("modules_ui.code_file_empty")
+              : t(r.too_large ? "files.too_large" : "files.no_preview");
           setOpenFiles((prev) =>
             prev.map((f) => (f.path === path ? { ...f, content, loading: false } : f)),
           );
@@ -349,7 +395,7 @@ export function CodeScreen() {
     [pid],
   );
 
-  // Deep-link from the project Artifacts tab (/m/code?pid=..&cmd=.. or &edit=..).
+  // Deep-link from the project Artifacts tab (/code?pid=..&cmd=.. or &edit=..).
   // Select the requested project, then prefill the terminal with the artifact
   // command (so args like a URL can be typed) or open the file for editing.
   useEffect(() => {
@@ -389,13 +435,15 @@ export function CodeScreen() {
 
   const hasProjects = !projects.isLoading && projectList.length > 0;
 
+  // Roster of the OPEN session's project — the Context panel edits this
+  // session, so a slug from another project would be dropped on save.
   const agentOptions = useMemo(() => {
     const base = [{ value: SUPER_AGENT_VALUE, label: t("modules_ui.code_super_agent"), icon: Bot, description: t("modules_ui.code_super_agent_desc") }];
     const project = (agentsData.data || []).map((a) => ({
       value: a.slug,
-      label: a.slug,
+      label: a.name || a.slug,
       icon: Bot,
-      description: a.description || a.role || undefined,
+      description: a.description || a.role || a.slug,
     }));
     return [...base, ...project];
   }, [agentsData.data]);
@@ -408,6 +456,9 @@ export function CodeScreen() {
   const activeProject = useMemo(() => projectList.find((p) => String(p.id) === pid), [projectList, pid]);
   useSetPageLabel(activeTitle);
 
+  // The list spans projects unless narrowed, so rows must say which one.
+  const showProject = !filterPid;
+
   // Detect unanswered ask_questions in the last assistant turn. Local "dismissed"
   // ref keys off the turn id so the panel re-appears for a fresh batch.
   const [dismissedKey, setDismissedKey] = useState<string | null>(null);
@@ -469,7 +520,12 @@ export function CodeScreen() {
           {/* TOP: horizontal split across [left | tree | main | right] */}
           <Panel id="top" defaultSize={termOpen ? "55%" : "100%"} minSize="20%">
             <PanelGroup orientation="horizontal" id="code-layout" className="h-full">
-              {/* Left panel: session list + agent selector */}
+              {/* Left panel: project FILTER over the session list.
+                  The agent selector that used to sit at the bottom of this rail
+                  is gone: it read as "who am I talking to" while silently
+                  re-pointing whichever session was open. It now lives where the
+                  choice is actually made (the New session dialog) and where it
+                  is corrected (the session's Context panel). */}
               {leftOpen && (
                 <>
                   <Panel id="left" defaultSize="14%" minSize="8%">
@@ -477,8 +533,8 @@ export function CodeScreen() {
                       <div className="shrink-0 border-b border-border p-2">
                         <CodeProjectPicker
                           projects={projectList}
-                          value={pid}
-                          onChange={onPickProject}
+                          value={filterPid}
+                          onChange={onFilterProject}
                           disabled={busy}
                         />
                       </div>
@@ -487,21 +543,14 @@ export function CodeScreen() {
                           sessions={sessions.data || []}
                           activeId={sid}
                           busy={busy}
+                          showProject={showProject}
+                          filtered={!!filterPid}
                           onSelect={onSelectSession}
-                          onCreate={onCreateSession}
+                          onCreate={() => setNewOpen(true)}
                           onRename={onRenameSession}
                           onDelete={onDeleteSession}
                         />
                       </div>
-                      <div className="shrink-0 border-t border-border p-2">
-                        <UiSelect
-                          value={agentSlug}
-                          onChange={onAgentChange}
-                          options={agentOptions}
-                          disabled={busy}
-                          showIcon={true}
-                        />
-                      </div>
                     </aside>
                   </Panel>
                   <ResizeHandle />
@@ -655,9 +704,13 @@ export function CodeScreen() {
                                 createdAt: session.data.createdAt,
                                 updatedAt: session.data.updatedAt,
                                 agentSlug: session.data.agentSlug ?? null,
+                                projectName: activeProject?.name ?? null,
                               }
                             : null
                         }
+                        agentOptions={agentOptions}
+                        onAgentChange={onAgentChange}
+                        busy={busy}
                         onRunInTerminal={runInTerminal}
                         onEditArtifact={openArtifact}
                       />
@@ -679,6 +732,24 @@ export function CodeScreen() {
           )}
         </PanelGroup>
       )}
+
+      <NewCodeSessionDialog
+        open={newOpen}
+        projects={projectList}
+        defaultPid={pid || String(projectList[0]?.id ?? "")}
+        busy={creating}
+        onClose={() => setNewOpen(false)}
+        onCreate={(values) => void onCreateSession(values)}
+      />
+
+      <ConfirmDialog
+        open={!!confirmDelete}
+        onClose={() => setConfirmDelete(null)}
+        onConfirm={doDeleteSession}
+        title={t("code_module.delete_confirm")}
+        confirmLabel={t("common.delete")}
+        testId="code-delete-session-confirm"
+      />
     </div>
   );
 }

package/src/interfaces/web/src/screens/modules/DeckScreen.tsx

@@ -31,7 +31,6 @@ export function DeckScreen() {
   //    release. The original implementation is kept intact, just unreachable.
   const handleToggle = async (widgetId: string, enabled: boolean) => {
     return; // no-op while Deck is pre-release — see note above.
-    // eslint-disable-next-line no-unreachable
     try {
       await Deck.setWidget(widgetId, { enabled });
       // Optimistically update local data so the switch flips immediately.