v2.3.0-sampling-params-ask-user: agent sampling params, ask_user_input in CoderPane, UX polish

Add top_p/top_k/min_p/presence_penalty to AGENTS.md frontmatter and thread
through inference (agents.ts parser → Agent type → stream-phase → sentinel
summaries). Null means omit from request body, preserving provider defaults.

Wire ask_user_input interactive card into both BooCoder frontends: the
CoderPane in BooChat's SPA (CoderMessageList now renders AskUserInputCard
instead of ToolCallLine for ask_user_input tool calls) and the standalone
coder SPA (MessageBubble + new AskUserInputCard + shadcn ui primitives).

Additional fixes: SessionLandingPage uses ChatInput with slash-command
support and lazy chat creation; Session.tsx hydrate-race fix for empty pane
promotion; AgentPicker wider dropdown with line-clamp; ModelPicker min-width;
Textarea converted to forwardRef; Recon agent added to AGENTS.md; codecontext
host port exposed in docker-compose.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/coder/web/src/components/MessageBubble.tsx

@@ -1,13 +1,16 @@
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import type { Message } from '@/api/types';
+import type { Message, ToolResult } from '@/api/types';
 import { Wrench, AlertCircle, Loader2 } from 'lucide-react';
+import { AskUserInputCard } from './AskUserInputCard';
 
 interface Props {
   message: Message;
+  chatId: string;
+  toolResultsMap: Record<string, ToolResult>;
 }
 
-export function MessageBubble({ message }: Props) {
+export function MessageBubble({ message, chatId }: Props) {
   if (message.role === 'tool') {
     return <ToolResultBubble message={message} />;
   }
@@ -34,18 +37,31 @@ export function MessageBubble({ message }: Props) {
 
         {message.tool_calls && message.tool_calls.length > 0 && (
           <div className="mb-2 space-y-1">
-            {message.tool_calls.map((tc) => (
-              <div
-                key={tc.id}
-                className="flex items-center gap-1.5 text-xs text-zinc-400 bg-zinc-900/50 rounded px-2 py-1"
-              >
-                <Wrench size={11} />
-                <span className="font-mono">{tc.name}</span>
-                <span className="text-zinc-500 truncate max-w-[200px]">
-                  {truncateArgs(tc.arguments)}
-                </span>
-              </div>
-            ))}
+            {message.tool_calls.map((tc) => {
+              if (tc.name === 'ask_user_input') {
+                const result = message.tool_results ?? null;
+                return (
+                  <AskUserInputCard
+                    key={tc.id}
+                    toolCall={tc}
+                    toolResult={result}
+                    chatId={chatId}
+                  />
+                );
+              }
+              return (
+                <div
+                  key={tc.id}
+                  className="flex items-center gap-1.5 text-xs text-zinc-400 bg-zinc-900/50 rounded px-2 py-1"
+                >
+                  <Wrench size={11} />
+                  <span className="font-mono">{tc.name}</span>
+                  <span className="text-zinc-500 truncate max-w-[200px]">
+                    {truncateArgs(tc.args)}
+                  </span>
+                </div>
+              );
+            })}
           </div>
         )}
 
@@ -70,12 +86,12 @@ export function MessageBubble({ message }: Props) {
   );
 }
 
-function ToolResultBubble({ message }: Props) {
+function ToolResultBubble({ message }: { message: Message }) {
   const result = message.tool_results;
   if (!result) return null;
 
   const isError = result.error;
-  const output = result.output || '';
+  const output = result.output != null ? String(result.output) : '';
   const displayOutput =
     output.length > 300 ? output.slice(0, 300) + '...' : output;
 
@@ -99,17 +115,21 @@ function ToolResultBubble({ message }: Props) {
   );
 }
 
-function truncateArgs(args: string): string {
+function truncateArgs(args: unknown): string {
   if (!args) return '';
   try {
-    const parsed = JSON.parse(args);
-    const keys = Object.keys(parsed);
-    if (keys.length === 0) return '';
-    const first = keys[0]!;
-    const val = String(parsed[first]);
-    const display = val.length > 40 ? val.slice(0, 40) + '...' : val;
-    return `${first}: ${display}`;
+    if (typeof args === 'object' && args !== null) {
+      const obj = args as Record<string, unknown>;
+      const keys = Object.keys(obj);
+      if (keys.length === 0) return '';
+      const first = keys[0]!;
+      const val = String(obj[first] ?? '');
+      const display = val.length > 40 ? val.slice(0, 40) + '...' : val;
+      return `${first}: ${display}`;
+    }
+    const str = String(args);
+    return str.length > 50 ? str.slice(0, 50) + '...' : str;
   } catch {
-    return args.length > 50 ? args.slice(0, 50) + '...' : args;
+    return String(args).length > 50 ? String(args).slice(0, 50) + '...' : String(args);
   }
 }