refactor: move session controls from activity panel to chat input

Move interactive tool toggles and auto-approval overrides from the
ActivityPanel side panel into compact pill-style popovers above the
chat composer in ChatPane. This cleanly separates concerns:

- ActivityPanel is now purely read-only (agents + timeline)
- ChatPane owns all session-level interactive controls
- Tools pill: popover with MCP/LSP enable/disable toggles
- Auto-approval pill: popover with grouped tool auto-approval overrides
  including session override state and reset action

Follows the existing InlineModelPill/InlineThinkingPill pattern for
scratchpad sessions, giving non-scratchpad sessions the same kind
of inline configuration experience.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/renderer/App.tsx

@@ -263,35 +263,32 @@ export default function App() {
               reasoningEffort: config.reasoningEffort,
             })
           }
+          onUpdateSessionTooling={(selection) => {
+            void api.updateSessionTooling({
+              sessionId: selectedSession.id,
+              enabledMcpServerIds: selection.enabledMcpServerIds,
+              enabledLspProfileIds: selection.enabledLspProfileIds,
+            });
+          }}
+          onUpdateSessionApprovalSettings={(settings) => {
+            void api.updateSessionApprovalSettings({
+              sessionId: selectedSession.id,
+              autoApprovedToolNames: settings.autoApprovedToolNames,
+            });
+          }}
           availableModels={availableModels}
           pattern={patternForSession}
           project={projectForSession}
+          runtimeTools={sidecarCapabilities?.runtimeTools}
           session={selectedSession}
+          toolingSettings={workspace.settings.tooling}
         />
     );
     detailPanel = (
       <ActivityPanel
         activity={activityForSession}
-        lspProfiles={workspace.settings.tooling.lspProfiles}
-        mcpServers={workspace.settings.tooling.mcpServers}
-        toolingSettings={workspace.settings.tooling}
-        runtimeTools={sidecarCapabilities?.runtimeTools}
         onJumpToMessage={jumpToMessage}
-        onUpdateSessionTooling={(selection) => {
-          void api.updateSessionTooling({
-            sessionId: selectedSession.id,
-            enabledMcpServerIds: selection.enabledMcpServerIds,
-            enabledLspProfileIds: selection.enabledLspProfileIds,
-          });
-        }}
-        onUpdateSessionApprovalSettings={(settings) => {
-          void api.updateSessionApprovalSettings({
-            sessionId: selectedSession.id,
-            autoApprovedToolNames: settings.autoApprovedToolNames,
-          });
-        }}
         pattern={patternForSession}
-        projectIsScratchpad={isScratchpadProject(projectForSession)}
         session={selectedSession}
       />
     );

src/renderer/components/ActivityPanel.tsx

@@ -1,5 +1,5 @@
 import { useMemo, type ReactNode } from 'react';
-import { Activity, Clock, RotateCcw, Server, Code, ShieldAlert, ShieldCheck, Sparkles, Users } from 'lucide-react';
+import { Activity, Clock, ShieldAlert, Sparkles, Users } from 'lucide-react';
 
 import {
   buildAgentActivityRows,
@@ -12,19 +12,7 @@ import {
 import { RunTimeline } from '@renderer/components/RunTimeline';
 import { inferProvider } from '@shared/domain/models';
 import type { OrchestrationMode, PatternAgentDefinition, PatternDefinition } from '@shared/domain/pattern';
-import {
+import type { SessionRecord } from '@shared/domain/session';
-  resolveSessionToolingSelection,
-  type SessionRecord,
-} from '@shared/domain/session';
-import type {
-  LspProfileDefinition,
-  McpServerDefinition,
-  RuntimeToolDefinition,
-  SessionToolingSelection,
-  WorkspaceToolingSettings,
-} from '@shared/domain/tooling';
-import { listApprovalToolDefinitions, type ApprovalToolDefinition, type ApprovalToolKind } from '@shared/domain/tooling';
-import type { SessionApprovalSettings } from '@shared/domain/approval';
 import { ProviderIcon } from './ProviderIcons';
 
 /* ── Mode accent colours ───────────────────────────────────── */
@@ -161,57 +149,27 @@ function AgentRow({
 
 interface ActivityPanelProps {
   activity?: SessionActivityState;
-  lspProfiles: LspProfileDefinition[];
-  mcpServers: McpServerDefinition[];
-  toolingSettings: WorkspaceToolingSettings;
-  runtimeTools?: ReadonlyArray<RuntimeToolDefinition>;
   onJumpToMessage?: (messageId: string) => void;
-  onUpdateSessionTooling: (selection: SessionToolingSelection) => void;
-  onUpdateSessionApprovalSettings: (settings: { autoApprovedToolNames?: string[] }) => void;
   pattern: PatternDefinition;
-  projectIsScratchpad: boolean;
   session: SessionRecord;
 }
 
 export function ActivityPanel({
   activity,
-  lspProfiles,
-  mcpServers,
-  toolingSettings,
-  runtimeTools,
   onJumpToMessage,
-  onUpdateSessionTooling,
-  onUpdateSessionApprovalSettings,
   pattern,
-  projectIsScratchpad,
   session,
 }: ActivityPanelProps) {
   const activityRows = useMemo(
     () => buildAgentActivityRows(activity, pattern.agents),
     [activity, pattern.agents],
   );
-  const selection = useMemo(() => resolveSessionToolingSelection(session), [session]);
-  const approvalTools = useMemo(
-    () => listApprovalToolDefinitions(toolingSettings, runtimeTools),
-    [runtimeTools, toolingSettings],
-  );
-
-  const isOverridden = session.approvalSettings !== undefined;
-  const effectiveAutoApproved = new Set(
-    isOverridden
-      ? session.approvalSettings!.autoApprovedToolNames
-      : pattern.approvalPolicy?.autoApprovedToolNames ?? [],
-  );
 
   const isBusy = session.status === 'running';
   const hasPendingApproval = session.pendingApproval?.status === 'pending';
   const queuedCount = (session.pendingApprovalQueue ?? []).filter((a) => a.status === 'pending').length;
   const totalApprovalCount = (hasPendingApproval ? 1 : 0) + queuedCount;
-  const toolsDisabled = isBusy || projectIsScratchpad;
-  const approvalDisabled = isBusy || projectIsScratchpad;
   const accent = modeAccent[pattern.mode] ?? modeAccent.single;
-  const hasTools = mcpServers.length > 0 || lspProfiles.length > 0;
-  const hasToolCallApproval = pattern.approvalPolicy?.rules.some((r) => r.kind === 'tool-call') ?? false;
 
   return (
     <div className="flex h-full flex-col">
@@ -281,271 +239,10 @@ export function ActivityPanel({
           <RunTimeline onJumpToMessage={onJumpToMessage} runs={session.runs} />
         </div>
 
-        {/* ── Tools section ────────────────────────────────── */}
-        <div className="mb-4">
-          <SectionHeader>
-            <Server className="size-3" />
-            <span>Tools</span>
-            {toolsDisabled && (
-              <span className="ml-auto text-[9px] font-medium normal-case tracking-normal text-zinc-600">
-                {projectIsScratchpad ? 'Scratchpad' : 'Running'}
-              </span>
-            )}
-          </SectionHeader>
 
-          <div className="rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2.5">
-            {projectIsScratchpad ? (
-              <p className="text-[11px] leading-relaxed text-zinc-600">
-                Start a project-backed session to use MCPs or LSPs.
-              </p>
-            ) : !hasTools ? (
-              <p className="text-[11px] leading-relaxed text-zinc-600">
-                Add MCP servers or LSP profiles in Settings to enable them here.
-              </p>
-            ) : (
-              <div className="space-y-0.5">
-                {mcpServers.map((server) => (
-                  <ToolToggleRow
-                    detail={server.transport === 'local' ? server.command : server.url}
-                    disabled={toolsDisabled}
-                    enabled={selection.enabledMcpServerIds.includes(server.id)}
-                    icon={<Server className="size-3 text-zinc-600" />}
-                    key={server.id}
-                    label={server.name}
-                    onToggle={() =>
-                      onUpdateSessionTooling({
-                        ...selection,
-                        enabledMcpServerIds: toggleId(selection.enabledMcpServerIds, server.id),
-                      })
-                    }
-                  />
-                ))}
-                {lspProfiles.map((profile) => (
-                  <ToolToggleRow
-                    detail={profile.command}
-                    disabled={toolsDisabled}
-                    enabled={selection.enabledLspProfileIds.includes(profile.id)}
-                    icon={<Code className="size-3 text-zinc-600" />}
-                    key={profile.id}
-                    label={profile.name}
-                    onToggle={() =>
-                      onUpdateSessionTooling({
-                        ...selection,
-                        enabledLspProfileIds: toggleId(selection.enabledLspProfileIds, profile.id),
-                      })
-                    }
-                  />
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* ── Auto-approval overrides section ──────────────── */}
-        {hasToolCallApproval && !projectIsScratchpad && (
-          <div className="mb-4">
-            <SectionHeader>
-              <ShieldCheck className="size-3" />
-              <span>Auto-Approval</span>
-              <span className="rounded-full bg-zinc-800 px-1.5 py-0.5 text-[9px] tabular-nums text-zinc-500">
-                {effectiveAutoApproved.size}/{approvalTools.length}
-              </span>
-              {approvalDisabled && (
-                <span className="ml-auto text-[9px] font-medium normal-case tracking-normal text-zinc-600">
-                  Running
-                </span>
-              )}
-            </SectionHeader>
-
-            <div className="rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2.5">
-              {approvalTools.length === 0 ? (
-                <p className="text-[11px] leading-relaxed text-zinc-600">
-                  No tools available yet. Connect MCP servers or wait for runtime capabilities to load.
-                </p>
-              ) : (
-                <>
-                  {/* Override state badge + reset action */}
-                  <div className="mb-2 flex items-center gap-2">
-                    <span className={`rounded-full px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider ${
-                      isOverridden
-                        ? 'bg-amber-500/15 text-amber-400'
-                        : 'bg-zinc-800 text-zinc-500'
-                    }`}>
-                      {isOverridden ? 'Session override' : 'Using pattern defaults'}
-                    </span>
-                    {isOverridden && (
-                      <button
-                        className="flex items-center gap-1 rounded-full px-2 py-0.5 text-[9px] font-medium text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300 disabled:cursor-not-allowed disabled:opacity-50"
-                        disabled={approvalDisabled}
-                        onClick={() => onUpdateSessionApprovalSettings({})}
-                        type="button"
-                      >
-                        <RotateCcw className="size-2.5" />
-                        Reset
-                      </button>
-                    )}
-                  </div>
-
-                  <ApprovalOverrideGroupedList
-                    approvalDisabled={approvalDisabled}
-                    effectiveAutoApproved={effectiveAutoApproved}
-                    onToggle={(toolId) => {
-                      const next = new Set(effectiveAutoApproved);
-                      if (next.has(toolId)) {
-                        next.delete(toolId);
-                      } else {
-                        next.add(toolId);
-                      }
-                      onUpdateSessionApprovalSettings({
-                        autoApprovedToolNames: [...next],
-                      });
-                    }}
-                    tools={approvalTools}
-                  />
-                </>
-              )}
-            </div>
-          </div>
-        )}
       </div>
     </div>
   );
 }
 
-function ToolToggleRow({
-  label,
-  detail,
-  icon,
-  enabled,
-  disabled,
-  onToggle,
-}: {
-  label: string;
-  detail?: string;
-  icon: ReactNode;
-  enabled: boolean;
-  disabled: boolean;
-  onToggle: () => void;
-}) {
-  return (
-    <button
-      className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition ${
-        disabled ? 'cursor-not-allowed opacity-50' : 'hover:bg-zinc-800/60'
-      }`}
-      disabled={disabled}
-      onClick={onToggle}
-      type="button"
-    >
-      {icon}
-      <div className="min-w-0 flex-1">
-        <div className="truncate text-[12px] font-medium text-zinc-300">{label}</div>
-        {detail && (
-          <div className="truncate text-[10px] text-zinc-600">{detail}</div>
-        )}
-      </div>
-      <ToggleSwitch enabled={enabled} />
-    </button>
-  );
-}
 
-function ToggleSwitch({ enabled }: { enabled: boolean }) {
-  return (
-    <span
-      className={`relative inline-flex h-[16px] w-[28px] shrink-0 items-center rounded-full transition-colors ${
-        enabled ? 'bg-indigo-500' : 'bg-zinc-700'
-      }`}
-    >
-      <span
-        className={`inline-block size-[12px] rounded-full bg-white shadow-sm transition-transform ${
-          enabled ? 'translate-x-[14px]' : 'translate-x-[2px]'
-        }`}
-      />
-    </span>
-  );
-}
-
-function toggleId(current: string[], id: string): string[] {
-  return current.includes(id)
-    ? current.filter((currentId) => currentId !== id)
-    : [...current, id];
-}
-
-/* ── Approval override grouped list ─────────────────────────── */
-
-const approvalKindOrder: ApprovalToolKind[] = ['builtin', 'mcp', 'lsp', 'mixed'];
-const approvalKindLabels: Record<ApprovalToolKind, string> = {
-  builtin: 'Built-in',
-  mcp: 'MCP Servers',
-  lsp: 'Language Servers',
-  mixed: 'Other',
-};
-
-function ApprovalOverrideGroupedList({
-  tools,
-  effectiveAutoApproved,
-  approvalDisabled,
-  onToggle,
-}: {
-  tools: ApprovalToolDefinition[];
-  effectiveAutoApproved: Set<string>;
-  approvalDisabled: boolean;
-  onToggle: (toolId: string) => void;
-}) {
-  const groups = approvalKindOrder
-    .map((kind) => ({ kind, tools: tools.filter((t) => t.kind === kind) }))
-    .filter((g) => g.tools.length > 0);
-  const showHeaders = groups.length > 1;
-
-  return (
-    <div>
-      {groups.map((group, i) => (
-        <div key={group.kind}>
-          {showHeaders && (
-            <div className={`text-[9px] font-semibold uppercase tracking-wider text-zinc-600 ${i > 0 ? 'mt-2' : ''} mb-1`}>
-              {approvalKindLabels[group.kind]}
-            </div>
-          )}
-          {group.tools.map((tool) => (
-            <ApprovalOverrideRow
-              disabled={approvalDisabled}
-              enabled={effectiveAutoApproved.has(tool.id)}
-              key={tool.id}
-              onToggle={() => onToggle(tool.id)}
-              tool={tool}
-            />
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function ApprovalOverrideRow({
-  tool,
-  enabled,
-  disabled,
-  onToggle,
-}: {
-  tool: ApprovalToolDefinition;
-  enabled: boolean;
-  disabled: boolean;
-  onToggle: () => void;
-}) {
-  const detail = tool.description || (tool.providerNames.length > 0 ? tool.providerNames.join(', ') : undefined);
-  return (
-    <button
-      className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition ${
-        disabled ? 'cursor-not-allowed opacity-50' : 'hover:bg-zinc-800/60'
-      }`}
-      disabled={disabled}
-      onClick={onToggle}
-      type="button"
-    >
-      <div className="min-w-0 flex-1">
-        <span className="truncate text-[12px] font-medium text-zinc-300">{tool.label}</span>
-        {detail && <div className="truncate text-[10px] text-zinc-600">{detail}</div>}
-      </div>
-      <ToggleSwitch enabled={enabled} />
-    </button>
-  );
-}

src/renderer/components/ChatPane.tsx

@@ -1,5 +1,5 @@
-import { type KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';
-import { AlertCircle, ArrowUp, Bot, Check, ChevronDown, Circle, GitBranch, Loader2, ShieldAlert, ShieldCheck, Sparkles, User, X } from 'lucide-react';
+import { AlertCircle, ArrowUp, Bot, Check, ChevronDown, Circle, GitBranch, Loader2, RotateCcw, Server, ShieldAlert, ShieldCheck, Sparkles, User, X } from 'lucide-react';
 
 import { MarkdownContent } from '@renderer/components/MarkdownContent';
 import { getAssistantMessagePhase } from '@renderer/lib/messagePhase';
@@ -15,7 +15,17 @@ import {
 } from '@shared/domain/models';
 import { reasoningEffortOptions, type PatternDefinition, type ReasoningEffort } from '@shared/domain/pattern';
 import { isScratchpadProject, type ProjectRecord } from '@shared/domain/project';
-import type { SessionRecord } from '@shared/domain/session';
+import { resolveSessionToolingSelection, type SessionRecord } from '@shared/domain/session';
+import {
+  listApprovalToolDefinitions,
+  type ApprovalToolDefinition,
+  type ApprovalToolKind,
+  type LspProfileDefinition,
+  type McpServerDefinition,
+  type RuntimeToolDefinition,
+  type SessionToolingSelection,
+  type WorkspaceToolingSettings,
+} from '@shared/domain/tooling';
 
 function ThinkingDots() {
   return (
@@ -222,6 +232,269 @@ function InlineThinkingPill({
   );
 }
 
+/* ── Inline tools pill with popover ─────────────────────────── */
+
+function InlineToolsPill({
+  mcpServers,
+  lspProfiles,
+  selection,
+  disabled,
+  onToggle,
+}: {
+  mcpServers: ReadonlyArray<McpServerDefinition>;
+  lspProfiles: ReadonlyArray<LspProfileDefinition>;
+  selection: SessionToolingSelection;
+  disabled: boolean;
+  onToggle: (selection: SessionToolingSelection) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  const enabledCount = selection.enabledMcpServerIds.length + selection.enabledLspProfileIds.length;
+  const totalCount = mcpServers.length + lspProfiles.length;
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
+          open
+            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
+            : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
+        } disabled:cursor-not-allowed disabled:opacity-50`}
+        disabled={disabled}
+        onClick={() => setOpen(!open)}
+        type="button"
+      >
+        <Server className="size-3" />
+        <span>{enabledCount}/{totalCount} tools</span>
+        <ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && !disabled && (
+        <div className="absolute bottom-full left-0 z-40 mb-1.5 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
+          {mcpServers.length > 0 && (
+            <div>
+              <div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
+                MCP Servers
+              </div>
+              {mcpServers.map((server) => (
+                <PopoverToggleRow
+                  detail={server.transport === 'local' ? server.command : server.url}
+                  enabled={selection.enabledMcpServerIds.includes(server.id)}
+                  key={server.id}
+                  label={server.name}
+                  onToggle={() =>
+                    onToggle({
+                      ...selection,
+                      enabledMcpServerIds: toggleInArray(selection.enabledMcpServerIds, server.id),
+                    })
+                  }
+                />
+              ))}
+            </div>
+          )}
+          {lspProfiles.length > 0 && (
+            <div>
+              <div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
+                Language Servers
+              </div>
+              {lspProfiles.map((profile) => (
+                <PopoverToggleRow
+                  detail={profile.command}
+                  enabled={selection.enabledLspProfileIds.includes(profile.id)}
+                  key={profile.id}
+                  label={profile.name}
+                  onToggle={() =>
+                    onToggle({
+                      ...selection,
+                      enabledLspProfileIds: toggleInArray(selection.enabledLspProfileIds, profile.id),
+                    })
+                  }
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── Inline auto-approval pill with popover ────────────────── */
+
+const approvalKindOrder: ApprovalToolKind[] = ['builtin', 'mcp', 'lsp', 'mixed'];
+const approvalKindLabels: Record<ApprovalToolKind, string> = {
+  builtin: 'Built-in',
+  mcp: 'MCP Servers',
+  lsp: 'Language Servers',
+  mixed: 'Other',
+};
+
+function InlineApprovalPill({
+  approvalTools,
+  effectiveAutoApproved,
+  isOverridden,
+  disabled,
+  onUpdate,
+}: {
+  approvalTools: ApprovalToolDefinition[];
+  effectiveAutoApproved: Set<string>;
+  isOverridden: boolean;
+  disabled: boolean;
+  onUpdate: (settings: { autoApprovedToolNames?: string[] }) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  function toggleTool(toolId: string) {
+    const next = new Set(effectiveAutoApproved);
+    if (next.has(toolId)) {
+      next.delete(toolId);
+    } else {
+      next.add(toolId);
+    }
+    onUpdate({ autoApprovedToolNames: [...next] });
+  }
+
+  const groups = approvalKindOrder
+    .map((kind) => ({ kind, tools: approvalTools.filter((t) => t.kind === kind) }))
+    .filter((g) => g.tools.length > 0);
+  const showHeaders = groups.length > 1;
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
+          open
+            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
+            : isOverridden
+              ? 'border-amber-500/30 bg-amber-500/5 text-amber-400 hover:border-amber-500/50'
+              : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
+        } disabled:cursor-not-allowed disabled:opacity-50`}
+        disabled={disabled}
+        onClick={() => setOpen(!open)}
+        type="button"
+      >
+        <ShieldCheck className="size-3" />
+        <span>{effectiveAutoApproved.size}/{approvalTools.length} auto-approved</span>
+        <ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && !disabled && (
+        <div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-80 w-72 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 shadow-2xl">
+          {/* Override state + reset */}
+          <div className="flex items-center gap-2 border-b border-zinc-800 px-3 py-2">
+            <span className={`rounded-full px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider ${
+              isOverridden
+                ? 'bg-amber-500/15 text-amber-400'
+                : 'bg-zinc-800 text-zinc-500'
+            }`}>
+              {isOverridden ? 'Session override' : 'Pattern defaults'}
+            </span>
+            {isOverridden && (
+              <button
+                className="flex items-center gap-1 rounded-full px-2 py-0.5 text-[9px] font-medium text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+                onClick={() => onUpdate({})}
+                type="button"
+              >
+                <RotateCcw className="size-2.5" />
+                Reset
+              </button>
+            )}
+          </div>
+
+          {/* Tool list grouped by kind */}
+          <div className="py-1">
+            {groups.map((group, i) => (
+              <div key={group.kind}>
+                {showHeaders && (
+                  <div className={`px-3 pb-1 ${i > 0 ? 'pt-2' : 'pt-1'} text-[9px] font-semibold uppercase tracking-wider text-zinc-600`}>
+                    {approvalKindLabels[group.kind]}
+                  </div>
+                )}
+                {group.tools.map((tool) => {
+                  const detail = tool.description || (tool.providerNames.length > 0 ? tool.providerNames.join(', ') : undefined);
+                  return (
+                    <PopoverToggleRow
+                      detail={detail}
+                      enabled={effectiveAutoApproved.has(tool.id)}
+                      key={tool.id}
+                      label={tool.label}
+                      onToggle={() => toggleTool(tool.id)}
+                    />
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── Shared popover toggle row + helpers ───────────────────── */
+
+function PopoverToggleRow({
+  label,
+  detail,
+  enabled,
+  onToggle,
+}: {
+  label: string;
+  detail?: string;
+  enabled: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <button
+      className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition hover:bg-zinc-800"
+      onClick={onToggle}
+      type="button"
+    >
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-[12px] font-medium text-zinc-300">{label}</div>
+        {detail && <div className="truncate text-[10px] text-zinc-600">{detail}</div>}
+      </div>
+      <span
+        className={`relative inline-flex h-[14px] w-[24px] shrink-0 items-center rounded-full transition-colors ${
+          enabled ? 'bg-indigo-500' : 'bg-zinc-700'
+        }`}
+      >
+        <span
+          className={`inline-block size-[10px] rounded-full bg-white shadow-sm transition-transform ${
+            enabled ? 'translate-x-[12px]' : 'translate-x-[2px]'
+          }`}
+        />
+      </span>
+    </button>
+  );
+}
+
+function toggleInArray(current: string[], id: string): string[] {
+  return current.includes(id)
+    ? current.filter((currentId) => currentId !== id)
+    : [...current, id];
+}
+
 /* ── Approval banner ────────────────────────────────────────── */
 
 function ApprovalBanner({
@@ -378,12 +651,16 @@ interface ChatPaneProps {
   pattern: PatternDefinition;
   session: SessionRecord;
   availableModels: ReadonlyArray<ModelDefinition>;
+  toolingSettings: WorkspaceToolingSettings;
+  runtimeTools?: ReadonlyArray<RuntimeToolDefinition>;
   onSend: (content: string) => Promise<void>;
   onResolveApproval?: (approvalId: string, decision: ApprovalDecision) => Promise<unknown>;
   onUpdateScratchpadConfig?: (config: {
     model: string;
     reasoningEffort?: ReasoningEffort;
   }) => Promise<unknown>;
+  onUpdateSessionTooling?: (selection: SessionToolingSelection) => void;
+  onUpdateSessionApprovalSettings?: (settings: { autoApprovedToolNames?: string[] }) => void;
 }
 
 export function ChatPane({
@@ -391,9 +668,13 @@ export function ChatPane({
   pattern,
   session,
   availableModels,
+  toolingSettings,
+  runtimeTools,
   onSend,
   onResolveApproval,
   onUpdateScratchpadConfig,
+  onUpdateSessionTooling,
+  onUpdateSessionApprovalSettings,
 }: ChatPaneProps) {
   const [input, setInput] = useState('');
   const [configError, setConfigError] = useState<string>();
@@ -414,6 +695,25 @@ export function ChatPane({
   const scratchpadReasoningEffort = resolveReasoningEffort(selectedModel, primaryAgent?.reasoningEffort);
   const isComposerDisabled = isSessionBusy || isUpdatingScratchpadConfig;
 
+  const toolSelection = useMemo(() => resolveSessionToolingSelection(session), [session]);
+  const mcpServers = toolingSettings.mcpServers;
+  const lspProfiles = toolingSettings.lspProfiles;
+  const hasConfigurableTools = mcpServers.length > 0 || lspProfiles.length > 0;
+  const hasToolCallApproval = pattern.approvalPolicy?.rules.some((r) => r.kind === 'tool-call') ?? false;
+  const approvalTools = useMemo(
+    () => listApprovalToolDefinitions(toolingSettings, runtimeTools),
+    [runtimeTools, toolingSettings],
+  );
+  const isApprovalOverridden = session.approvalSettings !== undefined;
+  const effectiveAutoApproved = useMemo(
+    () => new Set(
+      isApprovalOverridden
+        ? session.approvalSettings!.autoApprovedToolNames
+        : pattern.approvalPolicy?.autoApprovedToolNames ?? [],
+    ),
+    [isApprovalOverridden, session.approvalSettings, pattern.approvalPolicy],
+  );
+
   useEffect(() => {
     transcriptRef.current?.scrollTo({
       top: transcriptRef.current.scrollHeight,
@@ -697,6 +997,30 @@ export function ChatPane({
             </div>
           )}
 
+          {/* Session config pills — tool & approval controls */}
+          {!isScratchpad && (hasConfigurableTools || hasToolCallApproval) && (
+            <div className="mb-2 flex items-center gap-2">
+              {hasConfigurableTools && onUpdateSessionTooling && (
+                <InlineToolsPill
+                  disabled={isComposerDisabled}
+                  lspProfiles={lspProfiles}
+                  mcpServers={mcpServers}
+                  onToggle={onUpdateSessionTooling}
+                  selection={toolSelection}
+                />
+              )}
+              {hasToolCallApproval && onUpdateSessionApprovalSettings && approvalTools.length > 0 && (
+                <InlineApprovalPill
+                  approvalTools={approvalTools}
+                  disabled={isComposerDisabled}
+                  effectiveAutoApproved={effectiveAutoApproved}
+                  isOverridden={isApprovalOverridden}
+                  onUpdate={onUpdateSessionApprovalSettings}
+                />
+              )}
+            </div>
+          )}
+
           <div className="relative rounded-xl border border-zinc-700 bg-zinc-900 transition-colors focus-within:border-indigo-500/50">
             <textarea
               className="auto-resize-textarea block w-full resize-none bg-transparent px-4 py-3 pr-12 text-[14px] text-zinc-100 placeholder-zinc-600 outline-none"