From 3fe8599a22897b51fda3b049bd28589ba2896e4d Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 3 Jul 2026 03:12:26 -0700
Subject: [PATCH] [eric] chat: restore the model-picker trigger (was inside the
 removed mode pill)

---
 .../ChatInput/toolbar/ChatInputToolbar.tsx    |  8 ++++
 .../ChatInput/toolbar/ModelControl.tsx        | 44 +++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx

diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
index bbc491e5..045e199f 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
 import { useElementSelection } from '@/app/components/editor/ElementSelectionContext';
 import { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { ContextRing } from './ContextRing';
+import { ModelControl } from './ModelControl';
 import { ModelPickerMenu } from '../model-picker/ModelPickerMenu';
 import { ThinkingLevelControl } from './ThinkingLevelControl';
 import { ToolbarActions } from './ToolbarActions';
@@ -93,6 +94,13 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
         pt: 0,
       }}
     >
+      <ModelControl
+        c={c}
+        setModelAnchor={setModelAnchor}
+        allModelFlat={allModelFlat}
+        model={model}
+      />
+
       <ModelPickerMenu
         c={c}
         menuPaperProps={menuPaperProps}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx
new file mode 100644
index 00000000..b1e1201b
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { ClaudeTokens } from '@/shared/styles/claudeTokens';
+import { useAppSelector } from '@/shared/hooks';
+import { hasFreeTrialActive, hasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
+
+interface Props {
+  c: ClaudeTokens;
+  setModelAnchor: (el: HTMLElement | null) => void;
+  allModelFlat: Array<any>;
+  model: string;
+}
+
+// The model-name trigger that opens ModelPickerMenu. Lived inside ModeControl until modes were hidden from the UI; the picker needs its button regardless of modes.
+export const ModelControl: React.FC<Props> = ({ c, setModelAnchor, allModelFlat, model }) => {
+  // On the free trial the model is fixed server-side, so there's nothing to pick: hide the control. The moment a real model is connected we show it again, even if trial state lingers (gate on !hasModelConnected, not just the trial flag).
+  const hideModelPicker = useAppSelector((s) => hasFreeTrialActive(s) && !hasModelConnected(s));
+  if (hideModelPicker) return null;
+  return (
+    <Box
+      onClick={(e) => setModelAnchor(e.currentTarget)}
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 0.25,
+        px: 0.75,
+        py: 0.25,
+        borderRadius: '6px',
+        cursor: 'pointer',
+        userSelect: 'none',
+        color: c.text.muted,
+        '&:hover': { bgcolor: 'rgba(0,0,0,0.04)' },
+        transition: 'background 0.15s',
+      }}
+    >
+      <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
+        {(() => { const m = allModelFlat.find((m) => m.value === model); return m ? m.label : model; })()}
+      </Typography>
+      <KeyboardArrowDownIcon sx={{ fontSize: 14, color: 'inherit', opacity: 0.7 }} />
+    </Box>
+  );
+};