Commit ff7e084a339d230afd974c1434773312d88f5d68 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-02-27 01:59:32-08:00
committer	Julius Marminge <jmarminge@gmail.com> 2026-03-05 23:00:41-08:00
log	ff7e084a339d230afd974c1434773312d88f5d68
tree	972d6b5f07e0fce00697c2c0c8c97e44d2469c95
parent	c590beb4e3feb7c8bc87cf1307b3d018c73eca62

Enable Claude provider selection in chat composer

Add provider-aware model options and include provider in turn-start dispatch.

Co-authored-by: codex <codex@users.noreply.github.com>

3 files changed, 108 insertions(+), 24 deletions(-)

apps
- web
  - src
    components
    ChatView.tsx
    session-logic.test.ts
    session-logic.ts

apps/web/src/components/ChatView.tsx+95-23

 @@ -6,6 +6,8 @@ import {
   type EditorId,
   type KeybindingCommand,
   type MessageId,
+  getDefaultModel,
+  getModelOptions,
   type ProjectId,
   type ProjectEntry,
   type ProjectScript,
 @@ -16,10 +18,11 @@ import {
   type ResolvedKeybindingsConfig,
   type ProviderApprovalDecision,
   type ServerProviderStatus,
+  type ProviderKind,
   type ThreadId,
   type TurnId,
   normalizeModelSlug,
-  resolveModelSlug,
+  resolveModelSlugForProvider,
   OrchestrationThreadActivity,
 } from "@t3tools/contracts";
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 @@ -49,6 +52,7 @@ import {
   derivePhase,
   deriveTimelineEntries,
   type PendingApproval,
+  PROVIDER_OPTIONS,
   deriveWorkLogEntries,
   hasToolActivityForTurn,
   isLatestTurnSettled,
 @@ -509,6 +513,9 @@ export default function ChatView({ threadId }: ChatViewProps) {
   const [sendPhase, setSendPhase] = useState<SendPhase>("idle");
   const [isConnecting, _setIsConnecting] = useState(false);
   const [isRevertingCheckpoint, setIsRevertingCheckpoint] = useState(false);
+  const [selectedProviderByThread, setSelectedProviderByThread] = useState<
+    Partial<Record<ThreadId, ProviderKind>>
+  >({});
   const [isSwitchingRuntimeMode, setIsSwitchingRuntimeMode] = useState(false);
   const [respondingRequestIds, setRespondingRequestIds] = useState<ApprovalRequestId[]>([]);
   const [expandedWorkGroups, setExpandedWorkGroups] = useState<Record<string, boolean>>({});
 @@ -632,20 +639,45 @@ export default function ChatView({ threadId }: ChatViewProps) {
     markThreadVisited,
   ]);
-  const baseThreadModel = resolveModelSlug(
+  const sessionProvider = activeThread?.session?.provider ?? null;
-    activeThread?.model ?? activeProject?.model ?? DEFAULT_MODEL,
+  const selectedProvider: ProviderKind =
+    (activeThread?.id ? selectedProviderByThread[activeThread.id] : undefined) ??
+    sessionProvider ??
+    "codex";
+  const baseThreadModel = resolveModelSlugForProvider(
+    selectedProvider,
+    activeThread?.model ?? activeProject?.model ?? getDefaultModel(selectedProvider) ?? DEFAULT_MODEL,
   );
-  const selectedModel = resolveModelSlug(composerDraft.model ?? baseThreadModel);
+  const selectedModel = resolveModelSlugForProvider(selectedProvider, composerDraft.model ?? baseThreadModel);
   const selectedEffort = composerDraft.effort ?? DEFAULT_REASONING;
   const modelOptions = useMemo(
-    () => getAppModelOptions(settings.customCodexModels, selectedModel),
-    [selectedModel, settings.customCodexModels],
-  );
-  const slashModelOptions = useMemo(
     () =>
-      getSlashModelOptions(settings.customCodexModels, composerTrigger?.query ?? "", selectedModel),
+      selectedProvider === "codex"
-    [composerTrigger?.query, selectedModel, settings.customCodexModels],
+        ? getAppModelOptions(settings.customCodexModels, selectedModel)
-  );
+        : getModelOptions(selectedProvider),
+    [selectedModel, selectedProvider, settings.customCodexModels],
+  );
+  const slashModelOptions = useMemo(() => {
+    if (selectedProvider === "codex") {
+      return getSlashModelOptions(settings.customCodexModels, composerTrigger?.query ?? "", selectedModel);
+    }
+    const query = (composerTrigger?.query ?? "").trim().toLowerCase();
+    if (!query) {
+      return modelOptions;
+    }
+    return modelOptions.filter(({ slug, name }) => {
+      const searchSlug = slug.toLowerCase();
+      const searchName = name.toLowerCase();
+      return searchSlug.includes(query) || searchName.includes(query);
+    });
+  }, [composerTrigger?.query, modelOptions, selectedModel, selectedProvider, settings.customCodexModels]);
+  useEffect(() => {
+    if (!activeThread?.id || !sessionProvider) return;
+    setSelectedProviderByThread((existing) => {
+      if (existing[activeThread.id]) return existing;
+      return { ...existing, [activeThread.id]: sessionProvider };
+    });
+  }, [activeThread?.id, sessionProvider]);
   const phase = derivePhase(activeThread?.session ?? null);
   const isSendBusy = sendPhase !== "idle";
   const isPreparingWorktree = sendPhase === "preparing-worktree";
 @@ -2127,6 +2159,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
           attachments: turnAttachments,
         },
         model: selectedModel || undefined,
+        provider: selectedProvider,
         effort: selectedEffort || undefined,
         assistantDeliveryMode: settings.enableAssistantStreaming ? "streaming" : "buffered",
         approvalPolicy,
 @@ -2225,19 +2258,23 @@ export default function ChatView({ threadId }: ChatViewProps) {
           type: "thread.meta.update",
           commandId: newCommandId(),
           threadId: activeThread.id,
-          model: resolvedModel,
+          model: resolveModelSlugForProvider(selectedProvider, model),
         });
       }
       scheduleComposerFocus();
     },
-    [
+    [activeThread, scheduleComposerFocus, selectedProvider],
-      activeThread,
+  );
-      baseThreadModel,
+  const onProviderSelect = useCallback(
-      isServerThread,
+    (provider: ProviderKind) => {
-      scheduleComposerFocus,
+      if (!activeThread) return;
-      setComposerDraftModel,
+      setSelectedProviderByThread((existing) => ({
-      threadId,
+        ...existing,
-    ],
+        [activeThread.id]: provider,
+      }));
+      scheduleComposerFocus();
+    },
+    [activeThread, scheduleComposerFocus],
   );
   const onEffortSelect = useCallback(
     (effort: ReasoningEffort) => {
 @@ -2675,6 +2712,12 @@ export default function ChatView({ threadId }: ChatViewProps) {
             {/* Bottom toolbar */}
             <div className="flex flex-wrap items-center justify-between gap-2 px-2.5 pb-2.5 sm:flex-nowrap sm:gap-0 sm:px-3 sm:pb-3">
               <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:min-w-max sm:overflow-visible">
+                {/* Model picker */}
+                <ProviderPicker provider={selectedProvider} onProviderChange={onProviderSelect} />
+                {/* Divider */}
+                <Separator orientation="vertical" className="mx-0.5 hidden h-4 sm:block" />
                 {/* Model picker */}
                 <ModelPicker
                   model={selectedModel}
 @@ -3824,9 +3867,9 @@ const MessagesTimeline = memo(function MessagesTimeline({
 });
 const ModelPicker = memo(function ModelPicker(props: {
-  model: string;
+  model: ModelSlug;
-  options: ReadonlyArray<{ slug: string; name: string }>;
+  options: ReadonlyArray<{ readonly slug: ModelSlug; readonly name: string }>;
-  onModelChange: (model: string) => void;
+  onModelChange: (model: ModelSlug) => void;
 }) {
   return (
     <Select
 @@ -3848,6 +3891,35 @@ const ModelPicker = memo(function ModelPicker(props: {
   );
 });
+const ProviderPicker = memo(function ProviderPicker(props: {
+  provider: ProviderKind;
+  onProviderChange: (provider: ProviderKind) => void;
+}) {
+  return (
+    <Select
+      items={PROVIDER_OPTIONS.filter((option) => option.available).map((option) => ({
+        label: option.label,
+        value: option.value,
+      }))}
+      value={props.provider}
+      onValueChange={(value) =>
+        value === "codex" || value === "claudeCode" ? props.onProviderChange(value) : undefined
+      }
+    >
+      <SelectTrigger size="sm" variant="ghost">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectPopup alignItemWithTrigger={false}>
+        {PROVIDER_OPTIONS.filter((option) => option.available).map(({ value, label }) => (
+          <SelectItem key={value} value={value}>
+            {label}
+          </SelectItem>
+        ))}
+      </SelectPopup>
+    </Select>
+  );
+});
 const ReasoningEffortPicker = memo(function ReasoningEffortPicker(props: {
   effort: ReasoningEffort;
   onEffortChange: (effort: ReasoningEffort) => void;

apps/web/src/session-logic.test.ts+12

...	@@ -2,6 +2,7 @@ import { EventId, TurnId, type OrchestrationThreadActivity } from "@t3tools/cont	...	@@ -2,6 +2,7 @@ import { EventId, TurnId, type OrchestrationThreadActivity } from "@t3tools/cont
2	import { describe, expect, it } from "vitest";	2	import { describe, expect, it } from "vitest";
3		3
4	import {	4	import {
		5	PROVIDER_OPTIONS,
5	derivePendingApprovals,	6	derivePendingApprovals,
6	deriveWorkLogEntries,	7	deriveWorkLogEntries,
7	hasToolActivityForTurn,	8	hasToolActivityForTurn,
...	@@ -200,3 +201,14 @@ describe("isLatestTurnSettled", () => {	...	@@ -200,3 +201,14 @@ describe("isLatestTurnSettled", () => {
200	).toBe(false);	201	).toBe(false);
201	});	202	});
202	});	203	});
		204
		205	describe("PROVIDER_OPTIONS", () => {
		206	it("marks claudeCode as available", () => {
		207	const claude = PROVIDER_OPTIONS.find((option) => option.value === "claudeCode");
		208	expect(claude).toEqual({
		209	value: "claudeCode",
		210	label: "Claude Code",
		211	available: true,
		212	});
		213	});
		214	});

apps/web/src/session-logic.ts+1-1

...	@@ -14,7 +14,7 @@ export const PROVIDER_OPTIONS: Array<{	...	@@ -14,7 +14,7 @@ export const PROVIDER_OPTIONS: Array<{
14	available: boolean;	14	available: boolean;
15	}> = [	15	}> = [
16	{ value: "codex", label: "Codex", available: true },	16	{ value: "codex", label: "Codex", available: true },
17	{ value: "claudeCode", label: "Claude Code (soon)", available: false },	17	{ value: "claudeCode", label: "Claude Code", available: true },
18	];	18	];
19		19
20	export interface WorkLogEntry {	20	export interface WorkLogEntry {