fix: support slash-containing model IDs (#1074)

* fix: support slash-containing model IDs

* fix: parse worktree default model identifiers

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/ui/src/components/sections/agents/AgentsPage.tsx

@@ -16,6 +16,7 @@ import { ModelSelector } from './ModelSelector';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { useI18n } from '@/lib/i18n';
+import { parseModelIdentifier } from '@/lib/modelIdentifier';
 import {
   Select,
   SelectContent,
@@ -761,8 +762,8 @@ export const AgentsPage: React.FC = () => {
               </div>
               <div className="flex min-w-0 flex-1 items-center gap-2 sm:w-fit sm:flex-initial">
                 <ModelSelector
-                  providerId={model ? model.split('/')[0] : ''}
-                  modelId={model ? model.split('/')[1] : ''}
+                  providerId={parseModelIdentifier(model)?.providerId ?? ''}
+                  modelId={parseModelIdentifier(model)?.modelId ?? ''}
                   onChange={(providerId: string, modelId: string) => {
                     if (providerId && modelId) {
                       setModel(`${providerId}/${modelId}`);

packages/ui/src/components/sections/commands/CommandsPage.tsx

@@ -17,6 +17,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { useI18n } from '@/lib/i18n';
+import { parseModelIdentifier } from '@/lib/modelIdentifier';
 
 export const CommandsPage: React.FC = () => {
   const { t } = useI18n();
@@ -295,8 +296,8 @@ export const CommandsPage: React.FC = () => {
               </div>
               <div className="flex min-w-0 flex-1 items-center gap-2 sm:w-fit sm:flex-initial">
                 <ModelSelector
-                  providerId={model ? model.split('/')[0] : ''}
-                  modelId={model ? model.split('/')[1] : ''}
+                  providerId={parseModelIdentifier(model)?.providerId ?? ''}
+                  modelId={parseModelIdentifier(model)?.modelId ?? ''}
                   onChange={(providerId: string, modelId: string) => {
                     if (providerId && modelId) {
                       setModel(`${providerId}/${modelId}`);

packages/ui/src/components/sections/openchamber/DefaultsSettings.tsx

@@ -9,15 +9,14 @@ import { useUIStore } from '@/stores/useUIStore';
 import { getRegisteredRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
 import { cn } from '@/lib/utils';
 import { useI18n } from '@/lib/i18n';
+import { parseModelIdentifier } from '@/lib/modelIdentifier';
 
 const getDisplayModel = (
   storedModel: string | undefined
 ): { providerId: string; modelId: string } => {
-  if (storedModel) {
-    const parts = storedModel.split('/');
-    if (parts.length === 2 && parts[0] && parts[1]) {
-      return { providerId: parts[0], modelId: parts[1] };
-    }
+  const parsed = parseModelIdentifier(storedModel);
+  if (parsed) {
+    return parsed;
   }
 
   return { providerId: '', modelId: '' };

packages/ui/src/components/session/GitHubIssuePickerDialog.tsx

@@ -31,6 +31,7 @@ import { useUIStore } from '@/stores/useUIStore';
 import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
 import { opencodeClient } from '@/lib/opencode/client';
 import { renderMagicPrompt } from '@/lib/magicPrompts';
+import { parseModelIdentifier } from '@/lib/modelIdentifier';
 import { createWorktreeSessionForNewBranch } from '@/lib/worktreeSessionCreator';
 import { generateBranchSlug } from '@/lib/git/branchNameGenerator';
 import type { GitHubIssue, GitHubIssueComment, GitHubIssuesListResult, GitHubIssueSummary, GitHubRepoSelector } from '@/lib/api/types';
@@ -234,14 +235,11 @@ export function GitHubIssuePickerDialog({
       return null;
     }
 
-    const parts = settingsDefaultModel.split('/');
-    if (parts.length !== 2) {
-      return null;
-    }
-    const [providerID, modelID] = parts;
-    if (!providerID || !modelID) {
+    const parsed = parseModelIdentifier(settingsDefaultModel);
+    if (!parsed) {
       return null;
     }
+    const { providerId: providerID, modelId: modelID } = parsed;
 
     const modelMetadata = configState.getModelMetadata(providerID, modelID);
     if (!modelMetadata) {

packages/ui/src/components/session/NewWorktreeDialog.tsx

@@ -51,6 +51,7 @@ import { getRootBranch } from '@/lib/worktrees/worktreeStatus';
 import { generateBranchSlug } from '@/lib/git/branchNameGenerator';
 import { opencodeClient } from '@/lib/opencode/client';
 import { renderMagicPrompt } from '@/lib/magicPrompts';
+import { parseModelIdentifier } from '@/lib/modelIdentifier';
 import { rankBranchesForQuery } from '@/lib/worktrees/branchSearch';
 import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
 import { useGitBranches, useGitStore, useGitLoadingBranches } from '@/stores/useGitStore';
@@ -428,10 +429,9 @@ export function NewWorktreeDialog({
     const settingsDefaultModel = configState.settingsDefaultModel;
     if (!settingsDefaultModel) return null;
 
-    const parts = settingsDefaultModel.split('/');
-    if (parts.length !== 2) return null;
-    const [providerID, modelID] = parts;
-    if (!providerID || !modelID) return null;
+    const parsed = parseModelIdentifier(settingsDefaultModel);
+    if (!parsed) return null;
+    const { providerId: providerID, modelId: modelID } = parsed;
 
     const modelMetadata = configState.getModelMetadata(providerID, modelID);
     if (!modelMetadata) return null;

packages/ui/src/lib/modelIdentifier.ts

@@ -0,0 +1,20 @@
+export interface ParsedModelIdentifier {
+  providerId: string;
+  modelId: string;
+}
+
+export const parseModelIdentifier = (value: string | undefined): ParsedModelIdentifier | null => {
+  if (!value) {
+    return null;
+  }
+
+  const separatorIndex = value.indexOf('/');
+  if (separatorIndex <= 0 || separatorIndex >= value.length - 1) {
+    return null;
+  }
+
+  return {
+    providerId: value.slice(0, separatorIndex),
+    modelId: value.slice(separatorIndex + 1),
+  };
+};

packages/ui/src/lib/worktreeSessionCreator.ts

@@ -12,6 +12,7 @@ import { useContextStore } from '@/stores/contextStore';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { checkIsGitRepository, previewGitWorktree } from '@/lib/gitApi';
 import { generateBranchName } from '@/lib/git/branchNameGenerator';
+import { parseModelIdentifier } from '@/lib/modelIdentifier';
 import { getRootBranch } from '@/lib/worktrees/worktreeStatus';
 import { getWorktreeSetupCommands } from '@/lib/openchamberConfig';
 import {
@@ -87,12 +88,12 @@ const applyDefaultAgentAndModelSelection = (sessionId: string, configState = use
       return;
     }
 
-    const parts = settingsDefaultModel.split('/');
-    if (parts.length !== 2) {
+    const parsed = parseModelIdentifier(settingsDefaultModel);
+    if (!parsed) {
       return;
     }
 
-    const [providerId, modelId] = parts;
+    const { providerId, modelId } = parsed;
     const modelMetadata = configState.getModelMetadata(providerId, modelId);
     if (!modelMetadata) {
       return;

packages/ui/src/stores/useConfigStore.ts

@@ -13,6 +13,7 @@ import { getRegisteredRuntimeAPIs } from "@/contexts/runtimeAPIRegistry";
 import { updateDesktopSettings } from "@/lib/persistence";
 import { useDirectoryStore } from "@/stores/useDirectoryStore";
 import { streamDebugEnabled } from "@/stores/utils/streamDebug";
+import { parseModelIdentifier } from "@/lib/modelIdentifier";
 
 const MODELS_DEV_API_URL = "https://models.dev/api.json";
 const MODELS_DEV_PROXY_URL = "/api/openchamber/models-metadata";
@@ -105,14 +106,7 @@ const fetchOpenChamberDefaults = async (): Promise<OpenChamberDefaults> => {
 };
 
 const parseModelString = (modelString: string): { providerId: string; modelId: string } | null => {
-    if (!modelString || typeof modelString !== 'string') {
-        return null;
-    }
-    const parts = modelString.split('/');
-    if (parts.length !== 2 || !parts[0] || !parts[1]) {
-        return null;
-    }
-    return { providerId: parts[0], modelId: parts[1] };
+    return parseModelIdentifier(modelString);
 };
 
 const normalizeProviderId = (value: string) => value?.toLowerCase?.() ?? '';