wip: context-meter + model-label UI and provider/inference tweaks

Checkpoint of in-flight work so the orchestrator branch can rebase onto a
clean main: ContextBar → ContextMeter, model-label helper, model/agent picker
+ provider-snapshot/registry changes, inference payload + message-columns.

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

apps/web/src/components/ChatInput.tsx

@@ -16,7 +16,7 @@ import { AttachmentPreviewModal } from '@/components/AttachmentPreviewModal';
 import { FileMentionPopover } from '@/components/FileMentionPopover';
 import { DropOverlay } from '@/components/DropOverlay';
 import { AgentPicker } from '@/components/AgentPicker';
-import { ContextBar } from '@/components/ContextBar';
+import { ContextMeter } from '@/components/ContextMeter';
 import { SlashCommandPicker, type SlashCommandGroup } from '@/components/SlashCommandPicker';
 import { isSlashCommandToken, parseSlashInput, slashQuery } from '@/lib/slash-command';
 import { api } from '@/api/client';
@@ -600,31 +600,6 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
           ))}
         </div>
       )}
-      {/* Batch 9 toolbar — agent picker + quick-toggle menu. v1.11.5.1
-          inlines ContextBar in the same row so the bar lives next to the
-          picker rather than as a separate header above it. The row renders
-          when ANY of {picker, quick-toggle, ContextBar} is wanted. */}
-      {(onAgentChange || sessionId || messages !== undefined) && (
-        <div className="px-4 pt-2 flex items-center gap-1.5">
-          {onAgentChange && (
-            <AgentPicker
-              projectId={projectId}
-              value={agentId ?? null}
-              onChange={onAgentChange}
-            />
-          )}
-          {/* BooCode 2.0: the web-search toggle moved out of this top toolbar
-              into the composer box's bottom controls row (the Web pill below),
-              leaving the top row as just the agent picker + context bar. */}
-          {/* v1.11.5.1: ContextBar fills the remaining horizontal space.
-              `flex-1 min-w-0` is set inside the component. Mounts only when
-              the caller passes `messages` so older call sites (without the
-              prop) keep their original layout. */}
-          {messages !== undefined && (
-            <ContextBar messages={messages} modelContextLimit={modelContextLimit} />
-          )}
-        </div>
-      )}
       {/* BooCode 2.0 composer: textarea + a bottom controls row live INSIDE one
           bordered, focus-ringed message box (Refreshed direction). */}
       <div className="px-4 py-3">
@@ -647,6 +622,13 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
           {/* bottom controls row: attach + slash chip + Web on the left, Send/Stop on the right */}
           <div className="flex items-center gap-1.5 px-2 pb-2 pt-0.5">
             <input ref={fileInputRef} type="file" multiple className="hidden" onChange={onPickFiles} />
+            {onAgentChange && (
+              <AgentPicker
+                projectId={projectId}
+                value={agentId ?? null}
+                onChange={onAgentChange}
+              />
+            )}
             <button
               type="button"
               onClick={() => fileInputRef.current?.click()}
@@ -686,17 +668,21 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
                 }}
                 aria-pressed={webSearchEnabled === true}
                 title="Web search & fetch"
-                className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs transition-colors max-md:min-h-[36px] ${
+                className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs transition-colors max-md:min-h-[36px] max-md:min-w-[36px] ${
                   webSearchEnabled === true
                     ? 'border-primary/40 bg-primary/10 text-primary'
                     : 'border-border text-muted-foreground hover:bg-muted hover:text-foreground'
                 }`}
               >
                 <Globe className="size-3.5" />
-                Web
+                {/* Mobile = icon only; desktop keeps the "Web" label. */}
+                <span className="max-md:hidden">Web</span>
               </button>
             )}
             <div className="flex-1" />
+            {messages !== undefined && (
+              <ContextMeter messages={messages} modelContextLimit={modelContextLimit} />
+            )}
             {(() => {
               const hasContent = value.trim().length > 0 || attachments.length > 0;
               // While generating with an empty draft, the button stops generation.