@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/components/chat/ToolCall.tsx

@@ -74,10 +74,10 @@ function pretty(value: unknown): string {
 }
 
 function StatusIcon({ status }: { status: ToolPart["status"] }) {
-  if (status === "running") return <Loader2 className="size-3 shrink-0 animate-spin text-sky-400" />;
-  if (status === "error") return <X className="size-3 shrink-0 text-rose-400" />;
-  if (status === "deduped") return <CornerDownRight className="size-3 shrink-0 text-amber-400" />;
-  return <Check className="size-3 shrink-0 text-emerald-400" />;
+  if (status === "running") return <Loader2 className="size-3 shrink-0 animate-spin text-sky-700 dark:text-sky-400" />;
+  if (status === "error") return <X className="size-3 shrink-0 text-rose-700 dark:text-rose-400" />;
+  if (status === "deduped") return <CornerDownRight className="size-3 shrink-0 text-amber-700 dark:text-amber-400" />;
+  return <Check className="size-3 shrink-0 text-emerald-700 dark:text-emerald-400" />;
 }
 
 export function ToolCall({ part }: { part: ToolPart }) {
@@ -104,11 +104,11 @@ export function ToolCall({ part }: { part: ToolPart }) {
         ) : (
           <span className="size-3 shrink-0" />
         )}
-        <Icon className={cn("size-3.5 shrink-0", isFile ? "text-violet-400" : "text-muted-foreground")} />
+        <Icon className={cn("size-3.5 shrink-0", isFile ? "text-violet-700 dark:text-violet-400" : "text-muted-foreground")} />
         <span className="shrink-0 font-medium">{label}</span>
         {summary && <span className="truncate font-mono text-muted-foreground">{summary}</span>}
         <span className="ml-auto flex items-center gap-1">
-          {part.status === "deduped" && <span className="text-[10px] text-amber-400">{t("shared_ui.dedup")}</span>}
+          {part.status === "deduped" && <span className="text-[10px] text-amber-700 dark:text-amber-400">{t("shared_ui.dedup")}</span>}
           <StatusIcon status={part.status} />
         </span>
       </button>
@@ -117,19 +117,19 @@ export function ToolCall({ part }: { part: ToolPart }) {
         <div className="space-y-2 border-t border-border/60 px-2.5 py-2">
           {part.args && Object.keys(part.args).length > 0 && (
             <div>
-              <div className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">{t("shared_ui.args")}</div>
-              <pre className="max-h-48 overflow-auto rounded-md bg-background/60 p-2 font-mono text-[11px] leading-relaxed text-foreground">
+              <div className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{t("shared_ui.args")}</div>
+              <pre className="max-h-48 overflow-auto whitespace-pre-wrap break-all rounded-md bg-background/60 p-2 font-mono text-[11px] leading-relaxed text-foreground">
                 {pretty(part.args)}
               </pre>
             </div>
           )}
           {part.result !== undefined && (
             <div>
-              <div className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">{t("shared_ui.result")}</div>
+              <div className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{t("shared_ui.result")}</div>
               <pre
                 className={cn(
-                  "max-h-64 overflow-auto rounded-md bg-background/60 p-2 font-mono text-[11px] leading-relaxed",
-                  part.status === "error" ? "text-rose-300" : "text-foreground",
+                  "max-h-64 overflow-auto whitespace-pre-wrap break-all rounded-md bg-background/60 p-2 font-mono text-[11px] leading-relaxed",
+                  part.status === "error" ? "text-rose-700 dark:text-rose-300" : "text-foreground",
                 )}
               >
                 {pretty(part.result)}

package/src/interfaces/web/src/components/code/CodeContextTab.tsx

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { t } from "../../i18n";
 import { Empty } from "../ui";
 import { Tip } from "../ui/tip";
+import { UiSelect, type UiSelectOption } from "../UiSelect";
 import { computeMetrics, computeBreakdown } from "../../lib/code-context";
 import type { CodeTurn } from "../../lib/api/code";
 
@@ -11,11 +12,16 @@ interface SessionInfo {
   createdAt: string;
   updatedAt: string;
   agentSlug: string | null;
+  projectName?: string | null;
 }
 
 interface Props {
   turns: CodeTurn[];
   session?: SessionInfo | null;
+  /** Agent roster of the session's project; omit to render the agent read-only. */
+  agentOptions?: UiSelectOption[];
+  onAgentChange?: (slug: string) => void;
+  busy?: boolean;
 }
 
 const SEG_COLOR: Record<string, string> = {
@@ -40,69 +46,97 @@ function fmtDate(iso: string): string {
   return `${pad(d.getDate())} ${d.toLocaleString("es", { month: "short" })} ${d.getFullYear()}, ${pad(d.getHours())}:${pad(d.getMinutes())}`;
 }
 
-// Context tab: real token totals from the last assistant turn + a char/4
-// estimate of where the conversation's weight sits.
-export function CodeContextTab({ turns, session }: Props) {
+// Context tab: WHO and WHERE this session runs, then real token totals from the
+// last assistant turn plus a char/4 estimate of where the weight sits.
+//
+// The identity block renders before the first turn on purpose — "which project
+// and which agent is this?" is the question you have at the empty chat, and the
+// panel used to answer it only after you had already sent something.
+export function CodeContextTab({ turns, session, agentOptions, onAgentChange, busy }: Props) {
   const m = useMemo(() => computeMetrics(turns), [turns]);
   const breakdown = useMemo(() => computeBreakdown(turns), [turns]);
-
-  if (turns.length === 0) {
-    return (
-      <div className="p-3">
-        <Empty>{t("code_module.ctx_none")}</Empty>
-      </div>
-    );
-  }
+  const editableAgent = agentOptions && onAgentChange;
 
   return (
     <div className="space-y-1 p-3" data-testid="code-context-tab">
-      <Row label={t("code_module.ctx_model")} value={m.model || t("modules_ui.code_ctx_auto")} />
+      {session?.projectName && (
+        <Row label={t("modules_ui.code_ctx_project")} value={session.projectName} />
+      )}
       {session?.mode && <Row label={t("modules_ui.code_ctx_mode")} value={session.mode} />}
-      {session?.agentSlug && <Row label={t("modules_ui.code_ctx_agent")} value={session.agentSlug} />}
-      <Row
-        label={t("code_module.ctx_messages")}
-        value={t("modules_ui.code_ctx_msgs_value", { user: m.userMsgs, assistant: m.assistantMsgs })}
-      />
-      <Row label={t("code_module.ctx_input")} value={m.input.toLocaleString()} />
-      <Row label={t("code_module.ctx_output")} value={m.output.toLocaleString()} />
-      <Row label={t("modules_ui.code_ctx_tokens_total")} value={(m.input + m.output).toLocaleString()} />
-      {session?.createdAt && <Row label={t("modules_ui.code_ctx_created")} value={fmtDate(session.createdAt)} />}
-      {session?.updatedAt && <Row label={t("modules_ui.code_ctx_activity")} value={fmtDate(session.updatedAt)} />}
 
-      <hr className="border-border my-2" />
+      {editableAgent ? (
+        <div className="flex items-center justify-between gap-2 py-1" data-testid="code-session-agent">
+          <span className="shrink-0 text-[10px] uppercase tracking-wide text-muted-foreground">
+            {t("modules_ui.code_ctx_agent")}
+          </span>
+          <div className="min-w-0 flex-1">
+            <UiSelect
+              value={session?.agentSlug || "super-agent"}
+              onChange={onAgentChange}
+              options={agentOptions}
+              disabled={busy}
+              showIcon
+              className="h-7 text-xs"
+            />
+          </div>
+        </div>
+      ) : (
+        session?.agentSlug && <Row label={t("modules_ui.code_ctx_agent")} value={session.agentSlug} />
+      )}
 
-      <div>
-        <div className="mb-1 text-[11px] font-semibold text-muted-foreground">
-          {t("code_module.ctx_breakdown")}
+      {turns.length === 0 ? (
+        <div className="pt-2">
+          <Empty>{t("code_module.ctx_none")}</Empty>
         </div>
-        {breakdown.length > 0 ? (
-          <>
-            <div className="flex h-2.5 w-full overflow-hidden rounded-full bg-muted">
-              {breakdown.map((s) => (
-                <Tip key={s.key} content={`${s.key}: ${s.tokens} (${s.percent}%)`}>
-                  <div
-                    className={SEG_COLOR[s.key]}
-                    style={{ width: `${s.percent}%` }}
-                  />
-                </Tip>
-              ))}
+      ) : (
+        <>
+          <Row label={t("code_module.ctx_model")} value={m.model || t("modules_ui.code_ctx_auto")} />
+          <Row
+            label={t("code_module.ctx_messages")}
+            value={t("modules_ui.code_ctx_msgs_value", { user: m.userMsgs, assistant: m.assistantMsgs })}
+          />
+          <Row label={t("code_module.ctx_input")} value={m.input.toLocaleString()} />
+          <Row label={t("code_module.ctx_output")} value={m.output.toLocaleString()} />
+          <Row label={t("modules_ui.code_ctx_tokens_total")} value={(m.input + m.output).toLocaleString()} />
+          {session?.createdAt && <Row label={t("modules_ui.code_ctx_created")} value={fmtDate(session.createdAt)} />}
+          {session?.updatedAt && <Row label={t("modules_ui.code_ctx_activity")} value={fmtDate(session.updatedAt)} />}
+
+          <hr className="border-border my-2" />
+
+          <div>
+            <div className="mb-1 text-[11px] font-semibold text-muted-foreground">
+              {t("code_module.ctx_breakdown")}
             </div>
-            <ul className="mt-2 space-y-1">
-              {breakdown.map((s) => (
-                <li key={s.key} className="flex items-center gap-2 text-[11px]">
-                  <span className={`size-2 rounded-full ${SEG_COLOR[s.key]}`} />
-                  <span className="flex-1 text-foreground/80">{t(`code_module.seg_${s.key}` as never)}</span>
-                  <span className="font-mono text-muted-foreground">
-                    {s.tokens} · {s.percent}%
-                  </span>
-                </li>
-              ))}
-            </ul>
-          </>
-        ) : (
-          <p className="text-[11px] text-muted-foreground">{t("code_module.ctx_none")}</p>
-        )}
-      </div>
+            {breakdown.length > 0 ? (
+              <>
+                <div className="flex h-2.5 w-full overflow-hidden rounded-full bg-muted">
+                  {breakdown.map((s) => (
+                    <Tip key={s.key} content={`${s.key}: ${s.tokens} (${s.percent}%)`}>
+                      <div
+                        className={SEG_COLOR[s.key]}
+                        style={{ width: `${s.percent}%` }}
+                      />
+                    </Tip>
+                  ))}
+                </div>
+                <ul className="mt-2 space-y-1">
+                  {breakdown.map((s) => (
+                    <li key={s.key} className="flex items-center gap-2 text-[11px]">
+                      <span className={`size-2 rounded-full ${SEG_COLOR[s.key]}`} />
+                      <span className="flex-1 text-foreground/80">{t(`code_module.seg_${s.key}` as never)}</span>
+                      <span className="font-mono text-muted-foreground">
+                        {s.tokens} · {s.percent}%
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </>
+            ) : (
+              <p className="text-[11px] text-muted-foreground">{t("code_module.ctx_none")}</p>
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 }

package/src/interfaces/web/src/components/code/CodeFileTree.tsx

@@ -1,46 +1,13 @@
 import { useState, useCallback, useEffect } from "react";
 import { File, Folder, FolderOpen, ChevronRight, ChevronsUpDown, RefreshCw } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { toneText } from "../../lib/tone";
 import { Empty, Spinner } from "../ui";
 import { Tip } from "../ui/tip";
-import { http } from "../../lib/http";
+import { ProjectFiles } from "../../lib/api/projectFiles";
+import type { FileNode } from "../../types/daemon";
 import { t } from "../../i18n";
 
-interface FileNode {
-  name: string;
-  path: string; // relative path from project root
-  type: "file" | "dir";
-  children?: FileNode[];
-}
-
-function buildTree(paths: string[]): FileNode[] {
-  const root: FileNode[] = [];
-  for (const p of paths) {
-    const parts = p.split("/").filter(Boolean);
-    let level = root;
-    let cumPath = "";
-    for (let i = 0; i < parts.length; i++) {
-      cumPath = cumPath ? `${cumPath}/${parts[i]}` : parts[i];
-      const isLast = i === parts.length - 1;
-      let node = level.find((n) => n.name === parts[i]);
-      if (!node) {
-        node = { name: parts[i], path: cumPath, type: isLast ? "file" : "dir", children: isLast ? undefined : [] };
-        level.push(node);
-      }
-      if (!isLast) level = node.children!;
-    }
-  }
-  // Sort: dirs first, then files, both alphabetically
-  const sort = (nodes: FileNode[]): FileNode[] => {
-    nodes.forEach((n) => { if (n.children) n.children = sort(n.children); });
-    return nodes.sort((a, b) => {
-      if (a.type !== b.type) return a.type === "dir" ? -1 : 1;
-      return a.name.localeCompare(b.name);
-    });
-  };
-  return sort(root);
-}
-
 function TreeNode({
   node,
   depth,
@@ -71,12 +38,12 @@ function TreeNode({
         {isDir ? (
           <>
             <ChevronRight className={cn("size-3 shrink-0 transition-transform", open && "rotate-90")} />
-            {open ? <FolderOpen className="size-3.5 shrink-0 text-amber-400" /> : <Folder className="size-3.5 shrink-0 text-amber-400" />}
+            {open ? <FolderOpen className={cn("size-3.5 shrink-0", toneText.amber)} /> : <Folder className={cn("size-3.5 shrink-0", toneText.amber)} />}
           </>
         ) : (
           <>
             <span className="size-3 shrink-0" />
-            <File className="size-3.5 shrink-0 text-sky-400" />
+            <File className={cn("size-3.5 shrink-0", toneText.sky)} />
           </>
         )}
         <span className="truncate">{node.name}</span>
@@ -101,7 +68,7 @@ function TreeNode({
 
 export function CodeFileTree({
   pid,
-  projectPath,
+  // projectPath is accepted (CodeScreen passes it) but nothing here reads it.
   className,
   onOpenFile,
 }: {
@@ -110,7 +77,7 @@ export function CodeFileTree({
   className?: string;
   onOpenFile?: (path: string) => void;
 }) {
-  const [files, setFiles] = useState<string[]>([]);
+  const [tree, setTree] = useState<FileNode[]>([]);
   const [loading, setLoading] = useState(false);
   const [loaded, setLoaded] = useState(false);
   // Open-dir state lifted out of TreeNode so the parent can collapse all at once.
@@ -119,15 +86,8 @@ export function CodeFileTree({
   const loadFiles = useCallback(async () => {
     setLoading(true);
     try {
-      const r = await http.post<{ ok: boolean; stdout: string; stderr: string }>(
-        "/api/run",
-        {
-          cmd: "find . -type f -not -path '*/node_modules/*' -not -path '*/.git/*' -not -path '*/dist/*' -not -path '*/.claude/*' | sed 's|^\\./||' | sort | head -500",
-          project: pid,
-        },
-      );
-      const paths = r.stdout.split("\n").map((l) => l.trim()).filter(Boolean);
-      setFiles(paths);
+      const r = await ProjectFiles.tree(pid);
+      setTree(r.tree);
       setLoaded(true);
     } catch {
       setLoaded(true);
@@ -156,14 +116,13 @@ export function CodeFileTree({
     setOpenDirs(new Set());
   }, []);
 
-  const tree = buildTree(files);
   const anyOpen = openDirs.size > 0;
 
   return (
     <div className={cn("flex h-full flex-col", className)} data-testid="code-file-tree">
       {/* Header */}
       <div className="flex shrink-0 items-center justify-between border-b border-border px-3 py-2">
-        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Archivos</span>
+        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">{t("code_module.tree_title")}</span>
         <div className="flex items-center gap-0.5">
           <Tip content={t("code_module.tree_collapse_all")}>
             <button
@@ -192,7 +151,7 @@ export function CodeFileTree({
         {!loaded ? (
           <div className="flex justify-center pt-6"><Spinner size={14} /></div>
         ) : tree.length === 0 ? (
-          <div className="p-3"><Empty>Sin archivos</Empty></div>
+          <div className="p-3"><Empty icon={File}>{t("files.empty")}</Empty></div>
         ) : (
           <ul>
             {tree.map((node) => (

package/src/interfaces/web/src/components/code/CodeFileViewer.tsx

@@ -4,6 +4,7 @@ import { cn } from "../../lib/cn";
 import { Spinner } from "../ui";
 import { Tip } from "../ui/tip";
 import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
 
 export function CodeFileViewer({
   path,
@@ -44,7 +45,7 @@ export function CodeFileViewer({
       <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5">
         <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-muted-foreground">
           {path}
-          {dirty && <span className="ml-1 text-amber-400">•</span>}
+          {dirty && <span className={`ml-1 ${toneText.amber}`}>•</span>}
         </span>
         {editable && (
           <>
@@ -56,7 +57,7 @@ export function CodeFileViewer({
                 className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40"
               >
                 <RotateCcw className="size-3" />
-                Descartar
+                {t("code_module.discard_label")}
               </button>
             </Tip>
             <Tip content={t("code_module.save_shortcut_hint")}>
@@ -72,7 +73,7 @@ export function CodeFileViewer({
                 )}
               >
                 {saving ? <Spinner size={10} /> : <Save className="size-3" />}
-                Guardar
+                {t("code_module.save_label")}
               </button>
             </Tip>
           </>
@@ -103,7 +104,7 @@ export function CodeFileViewer({
               {content.split("\n").map((line, i) => (
                 <tr key={i} className="hover:bg-accent/20">
                   <td
-                    className="w-12 select-none border-r border-border/30 px-3 py-0 text-right align-top text-[10px] text-muted-foreground/40"
+                    className="w-12 select-none border-r border-border/30 px-3 py-0 text-right align-top text-[10px] text-muted-foreground"
                     aria-hidden="true"
                   >
                     {i + 1}

package/src/interfaces/web/src/components/code/CodeProjectPicker.tsx

@@ -1,21 +1,35 @@
-import { FolderGit2 } from "lucide-react";
+import { FolderGit2, Layers } from "lucide-react";
 import { UiSelect } from "../UiSelect";
 import { t } from "../../i18n";
 import type { ProjectEntry } from "../../types/daemon";
 
+/** The "no project chosen" value — every project's sessions. */
+export const ALL_PROJECTS = "";
+
 interface Props {
   projects: ProjectEntry[];
   value: string;
   onChange: (pid: string) => void;
   disabled?: boolean;
+  /**
+   * Add the "All projects" entry. On by default: this control FILTERS the
+   * session list, and the unfiltered list is what it opens on. Pass false where
+   * the control has to name one project — creating a session, which has to land
+   * somewhere.
+   */
+  allowAll?: boolean;
 }
 
-// Project picker for the Code module. The selected project scopes the
-// assistant's working context (it rides the project-scoped super-agent
-// stream), mirroring how the `apx code` CLI resolves a project id before the
-// REPL starts. We label projects by name (falling back to the basename of
-// their path) so the dropdown is human-readable.
-export function CodeProjectPicker({ projects, value, onChange, disabled }: Props) {
+// Project picker for the Code module.
+//
+// This is a FILTER over the session list, not the module's mode. A code session
+// belongs to the project whose cwd it was started from, so a panel that only
+// ever showed one project's sessions hid every session started anywhere else —
+// with no hint that there were any. Default to all; narrow on purpose.
+//
+// We label projects by name (falling back to the basename of their path) so the
+// dropdown is human-readable.
+export function CodeProjectPicker({ projects, value, onChange, disabled, allowAll = true }: Props) {
   const options = projects.map((p) => {
     const base = p.path?.split("/").filter(Boolean).pop() || t("modules_ui.code_project_fallback", { id: p.id });
     return {
@@ -26,6 +40,15 @@ export function CodeProjectPicker({ projects, value, onChange, disabled }: Props
     };
   });
 
+  if (allowAll) {
+    options.unshift({
+      value: ALL_PROJECTS,
+      label: t("code_module.all_projects"),
+      icon: Layers,
+      description: t("code_module.all_projects_desc"),
+    });
+  }
+
   return (
     <div className="w-full" data-testid="code-project-select">
       <UiSelect
@@ -34,6 +57,7 @@ export function CodeProjectPicker({ projects, value, onChange, disabled }: Props
         options={options}
         placeholder={t("modules_ui.code_pick_project_ph")}
         disabled={disabled}
+        showIcon
       />
     </div>
   );

package/src/interfaces/web/src/components/code/CodeSessionList.tsx

@@ -1,4 +1,4 @@
-import { Plus, MessageSquare, Trash2, Pencil } from "lucide-react";
+import { Plus, MessageSquare, Trash2, Pencil, Bot } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
 import { Empty } from "../ui";
@@ -9,17 +9,28 @@ interface Props {
   sessions: CodeSessionRow[];
   activeId: string | null;
   busy: boolean;
-  onSelect: (id: string) => void;
+  /** Name each row's project — true while the list spans more than one. */
+  showProject?: boolean;
+  /** Empty-state copy differs between "no sessions at all" and "none here". */
+  filtered?: boolean;
+  onSelect: (row: CodeSessionRow) => void;
   onCreate: () => void;
-  onRename: (id: string, current: string) => void;
-  onDelete: (id: string) => void;
+  onRename: (row: CodeSessionRow, current: string) => void;
+  onDelete: (row: CodeSessionRow) => void;
 }
 
-// Left-rail list of a project's code sessions (OpenCode's session switcher).
+// Left-rail list of code sessions (OpenCode's session switcher).
+//
+// The rows carry their project and their agent on purpose: a session created
+// from `apx exec --code` in some other checkout lands in THAT project, and
+// without those two facts on the row the list is a wall of "New session" you
+// cannot tell apart.
 export function CodeSessionList({
   sessions,
   activeId,
   busy,
+  showProject = false,
+  filtered = false,
   onSelect,
   onCreate,
   onRename,
@@ -47,15 +58,18 @@ export function CodeSessionList({
       <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
         {sessions.length === 0 ? (
           <div className="p-2">
-            <Empty>{t("code_module.no_sessions")}</Empty>
+            <Empty>
+              {t(filtered ? "code_module.no_sessions_here" : "code_module.no_sessions")}
+            </Empty>
           </div>
         ) : (
           <ul className="space-y-0.5">
             {sessions.map((s) => (
-              <li key={s.id} className="group/item relative">
+              <li key={`${s.pid ?? ""}:${s.id}`} className="group/item relative">
                 <button
                   type="button"
-                  onClick={() => onSelect(s.id)}
+                  onClick={() => onSelect(s)}
+                  data-testid="code-session-row"
                   className={cn(
                     "flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
                     s.id === activeId
@@ -67,15 +81,22 @@ export function CodeSessionList({
                   <span className="min-w-0 flex-1">
                     <span className="block truncate font-medium">{s.title}</span>
                     <span className="block truncate text-[10px] text-muted-foreground">
-                      {s.mode} · {s.messageCount} msg{s.model ? ` · ${s.model}` : ""}
+                      {showProject && s.projectName ? `${s.projectName} · ` : ""}
+                      {s.mode} · {t("code_module.msg_count", { n: s.messageCount })}
                     </span>
+                    {s.agentSlug && (
+                      <span className="mt-0.5 flex items-center gap-1 text-[10px] text-muted-foreground">
+                        <Bot className="size-2.5 shrink-0 opacity-70" />
+                        <span className="truncate font-mono">{s.agentSlug}</span>
+                      </span>
+                    )}
                   </span>
                 </button>
                 <div className="absolute right-1 top-1 hidden items-center gap-0.5 group-hover/item:flex">
                   <Tip content={t("code_module.rename")}>
                     <button
                       type="button"
-                      onClick={() => onRename(s.id, s.title)}
+                      onClick={() => onRename(s, s.title)}
                       className="rounded p-1 text-muted-foreground hover:bg-background hover:text-foreground"
                     >
                       <Pencil className="size-3" />
@@ -84,7 +105,7 @@ export function CodeSessionList({
                   <Tip content={t("code_module.delete")}>
                     <button
                       type="button"
-                      onClick={() => onDelete(s.id)}
+                      onClick={() => onDelete(s)}
                       className="rounded p-1 text-muted-foreground hover:bg-background hover:text-rose-500"
                     >
                       <Trash2 className="size-3" />

package/src/interfaces/web/src/components/code/CodeSidePanel.tsx

@@ -6,6 +6,7 @@ import { t } from "../../i18n";
 import { CodeContextTab } from "./CodeContextTab";
 import { CodeChangesTab } from "./CodeChangesTab";
 import { CodeArtifactsTab } from "./CodeArtifactsTab";
+import type { UiSelectOption } from "../UiSelect";
 import type { CodeChanges, CodeTurn } from "../../lib/api/code";
 
 interface Props {
@@ -14,7 +15,18 @@ interface Props {
   changes: CodeChanges | undefined;
   changesLoading: boolean;
   onRefreshChanges: () => void;
-  session?: { title: string; mode: string; createdAt: string; updatedAt: string; agentSlug: string | null } | null;
+  session?: {
+    title: string;
+    mode: string;
+    createdAt: string;
+    updatedAt: string;
+    agentSlug: string | null;
+    projectName?: string | null;
+  } | null;
+  /** Agent roster of the session's project — makes the Context agent editable. */
+  agentOptions?: UiSelectOption[];
+  onAgentChange?: (slug: string) => void;
+  busy?: boolean;
   onRunInTerminal?: (cmd: string) => void;
   onEditArtifact?: (name: string) => void;
 }
@@ -25,7 +37,19 @@ const TABS = [
   { value: "artifacts", icon: Package, label: "tab_artifacts" },
 ] as const;
 
-export function CodeSidePanel({ pid, turns, changes, changesLoading, onRefreshChanges, session, onRunInTerminal, onEditArtifact }: Props) {
+export function CodeSidePanel({
+  pid,
+  turns,
+  changes,
+  changesLoading,
+  onRefreshChanges,
+  session,
+  agentOptions,
+  onAgentChange,
+  busy,
+  onRunInTerminal,
+  onEditArtifact,
+}: Props) {
   const [active, setActive] = useState<string>("context");
   const changeCount = changes?.files.length || 0;
 
@@ -58,7 +82,13 @@ export function CodeSidePanel({ pid, turns, changes, changesLoading, onRefreshCh
         </TabsList>
       </div>
       <TabsContent value="context" className="min-h-0 flex-1 overflow-y-auto">
-        <CodeContextTab turns={turns} session={session} />
+        <CodeContextTab
+          turns={turns}
+          session={session}
+          agentOptions={agentOptions}
+          onAgentChange={onAgentChange}
+          busy={busy}
+        />
       </TabsContent>
       <TabsContent value="changes" className="min-h-0 flex-1 overflow-hidden">
         <CodeChangesTab changes={changes} loading={changesLoading} onRefresh={onRefreshChanges} />