@hienlh/ppm 0.9.0-beta.3 → 0.9.0-beta.4

package/src/web/components/settings/ai-settings-section.tsx

@@ -9,12 +9,9 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { getAISettings, updateAISettings, type AISettings } from "@/lib/api-settings";
-
-const MODEL_OPTIONS = [
-  { value: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
-  { value: "claude-opus-4-6", label: "Claude Opus 4.6" },
-  { value: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
-];
+import { api } from "@/lib/api-client";
+import { ProviderBadge } from "@/components/chat/provider-selector";
+import type { ModelOption } from "../../../types/chat";
 
 const EFFORT_OPTIONS = [
   { value: "low", label: "Low" },
@@ -29,19 +26,47 @@ const PERMISSION_MODE_OPTIONS = [
   { value: "plan", label: "Plan mode" },
 ];
 
+const PROVIDER_NAMES: Record<string, string> = {
+  claude: "Claude",
+  cursor: "Cursor",
+  codex: "Codex",
+  gemini: "Gemini",
+};
+
 export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
   const [settings, setSettings] = useState<AISettings | null>(null);
+  const [activeTab, setActiveTab] = useState<string>("");
+  const [models, setModels] = useState<ModelOption[]>([]);
+  const [modelsLoading, setModelsLoading] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  // Revision counter forces number inputs to re-render with fresh defaultValue after save
   const [revision, setRevision] = useState(0);
 
   useEffect(() => {
-    getAISettings().then(setSettings).catch((e) => setError(e.message));
+    getAISettings().then((s) => {
+      setSettings(s);
+      setActiveTab(s.default_provider ?? "claude");
+    }).catch((e) => setError(e.message));
   }, []);
 
-  const providerName = settings?.default_provider ?? "claude";
-  const config = settings?.providers[providerName];
+  // Fetch models when active tab changes — uses global settings endpoint
+  useEffect(() => {
+    if (!activeTab) return;
+    setModelsLoading(true);
+    api.get<ModelOption[]>(`/api/settings/ai/providers/${activeTab}/models`)
+      .then(setModels)
+      .catch(() => setModels([]))
+      .finally(() => setModelsLoading(false));
+  }, [activeTab]);
+
+  const providerTabs = settings
+    ? Object.keys(settings.providers)
+        .filter((k) => k !== "mock")
+        .map((id) => ({ id, name: PROVIDER_NAMES[id] ?? id }))
+    : [];
+
+  const config = settings?.providers[activeTab];
+  const isSdkProvider = config?.type === "agent-sdk" || (!config?.type && activeTab === "claude");
 
   const handleSave = async (field: string, value: unknown) => {
     if (!settings) return;
@@ -49,7 +74,7 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
     setError(null);
     try {
       const updated = await updateAISettings({
-        providers: { [providerName]: { [field]: value } },
+        providers: { [activeTab]: { [field]: value } },
       });
       setSettings(updated);
       setRevision((r) => r + 1);
@@ -69,7 +94,7 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
   if (!settings) {
     return (
       <div className={innerGap}>
-        <h3 className={`${headingSize} font-medium text-text-secondary`}>AI Provider</h3>
+        <h3 className={`${headingSize} font-medium text-text-secondary`}>AI Settings</h3>
         <p className={`${labelSize} text-text-subtle`}>
           {error ? `Error: ${error}` : "Loading..."}
         </p>
@@ -77,139 +102,173 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
     );
   }
 
+  // Model select options: use fetched models, with "auto" option for non-SDK providers
+  const modelOptions = isSdkProvider
+    ? models
+    : [{ value: "__default__", label: "Auto (default)" }, ...models];
+
   return (
     <div className={gapSize}>
-      <h3 className={`${headingSize} font-medium text-text-secondary`}>AI Provider</h3>
+      <h3 className={`${headingSize} font-medium text-text-secondary`}>AI Settings</h3>
 
-      <div className={innerGap}>
-        <div className={fieldGap}>
-          <Label htmlFor="ai-model" className={compact ? labelSize : undefined}>Model</Label>
-          <Select
-            value={config?.model ?? "claude-sonnet-4-6"}
-            onValueChange={(v) => handleSave("model", v)}
-          >
-            <SelectTrigger id="ai-model" className={`w-full ${compact ? "h-7 text-[11px]" : ""}`}>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {MODEL_OPTIONS.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+      {/* Provider tabs */}
+      {providerTabs.length > 1 && (
+        <div className="flex gap-0.5 border-b border-border/50 -mx-1 px-1">
+          {providerTabs.map((p) => (
+            <button
+              key={p.id}
+              onClick={() => setActiveTab(p.id)}
+              className={`flex items-center gap-1 px-2 py-1 text-[11px] rounded-t transition-colors ${
+                activeTab === p.id
+                  ? "text-primary border-b-2 border-primary font-medium"
+                  : "text-text-subtle hover:text-text-secondary"
+              }`}
+            >
+              <ProviderBadge providerId={p.id} />
+              <span className="capitalize">{p.name}</span>
+            </button>
+          ))}
         </div>
+      )}
 
-        <div className={fieldGap}>
-          <Label htmlFor="ai-base-url" className={compact ? labelSize : undefined}>Base URL</Label>
-          <Input
-            key={`baseurl-${revision}`}
-            id="ai-base-url"
-            type="url"
-            defaultValue={config?.base_url ?? ""}
-            placeholder="https://api.anthropic.com (default)"
-            className={compact ? "h-7 text-[11px]" : undefined}
-            onBlur={(e) => {
-              const val = e.target.value.trim();
-              handleSave("base_url", val || undefined);
-            }}
-          />
-        </div>
+      <div className={innerGap}>
+        {/* Model selector — dynamic, works for all providers */}
+        {models.length > 0 && (
+          <div className={fieldGap}>
+            <Label htmlFor="ai-model" className={compact ? labelSize : undefined}>Model</Label>
+            <Select
+              value={isSdkProvider ? (config?.model ?? models[0]?.value) : (config?.model || "__default__")}
+              onValueChange={(v) => handleSave("model", v === "__default__" ? undefined : v)}
+              disabled={modelsLoading}
+            >
+              <SelectTrigger id="ai-model" className={`w-full ${compact ? "h-7 text-[11px]" : ""}`}>
+                <SelectValue placeholder={modelsLoading ? "Loading models..." : "Select model"} />
+              </SelectTrigger>
+              <SelectContent className="max-h-[300px]">
+                {modelOptions.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
 
-        <div className={fieldGap}>
-          <Label htmlFor="ai-api-key" className={compact ? labelSize : undefined}>API Key / Token</Label>
-          <Input
-            key={`apikey-${revision}`}
-            id="ai-api-key"
-            type="password"
-            defaultValue={config?.api_key ?? ""}
-            placeholder="sk-ant-... (optional, overrides accounts)"
-            className={compact ? "h-7 text-[11px] font-mono" : "font-mono"}
-            onBlur={(e) => {
-              const val = e.target.value.trim();
-              // Don't save if it's the masked value
-              if (val.startsWith("••••")) return;
-              handleSave("api_key", val || undefined);
-            }}
-          />
-          <p className={`${compact ? "text-[9px]" : "text-[11px]"} text-muted-foreground`}>
-            Direct API key or OAuth token. Leave empty to use connected accounts.
-          </p>
-        </div>
+        {/* SDK-specific fields */}
+        {isSdkProvider && (
+          <>
+            <div className={fieldGap}>
+              <Label htmlFor="ai-base-url" className={compact ? labelSize : undefined}>Base URL</Label>
+              <Input
+                key={`baseurl-${activeTab}-${revision}`}
+                id="ai-base-url"
+                type="url"
+                defaultValue={config?.base_url ?? ""}
+                placeholder="https://api.anthropic.com (default)"
+                className={compact ? "h-7 text-[11px]" : undefined}
+                onBlur={(e) => {
+                  const val = e.target.value.trim();
+                  handleSave("base_url", val || undefined);
+                }}
+              />
+            </div>
 
-        <div className={fieldGap}>
-          <Label htmlFor="ai-effort" className={compact ? labelSize : undefined}>Effort</Label>
-          <Select
-            value={config?.effort ?? "high"}
-            onValueChange={(v) => handleSave("effort", v)}
-          >
-            <SelectTrigger id="ai-effort" className={`w-full ${compact ? "h-7 text-[11px]" : ""}`}>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {EFFORT_OPTIONS.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+            <div className={fieldGap}>
+              <Label htmlFor="ai-api-key" className={compact ? labelSize : undefined}>API Key / Token</Label>
+              <Input
+                key={`apikey-${activeTab}-${revision}`}
+                id="ai-api-key"
+                type="password"
+                defaultValue={config?.api_key ?? ""}
+                placeholder="sk-ant-... (optional, overrides accounts)"
+                className={compact ? "h-7 text-[11px] font-mono" : "font-mono"}
+                onBlur={(e) => {
+                  const val = e.target.value.trim();
+                  if (val.startsWith("••••")) return;
+                  handleSave("api_key", val || undefined);
+                }}
+              />
+              <p className={`${compact ? "text-[9px]" : "text-[11px]"} text-muted-foreground`}>
+                Direct API key or OAuth token. Leave empty to use connected accounts.
+              </p>
+            </div>
 
-        <div className={fieldGap}>
-          <Label htmlFor="ai-max-turns" className={compact ? labelSize : undefined}>Max Turns (1-500)</Label>
-          <Input
-            key={`turns-${revision}`}
-            id="ai-max-turns"
-            type="number"
-            min={1}
-            max={500}
-            defaultValue={config?.max_turns ?? 100}
-            className={compact ? "h-7 text-[11px]" : undefined}
-            onBlur={(e) => {
-              const val = parseInt(e.target.value);
-              if (!isNaN(val)) handleSave("max_turns", val);
-            }}
-          />
-        </div>
+            <div className={fieldGap}>
+              <Label htmlFor="ai-effort" className={compact ? labelSize : undefined}>Effort</Label>
+              <Select
+                value={config?.effort ?? "high"}
+                onValueChange={(v) => handleSave("effort", v)}
+              >
+                <SelectTrigger id="ai-effort" className={`w-full ${compact ? "h-7 text-[11px]" : ""}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {EFFORT_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
 
-        <div className={fieldGap}>
-          <Label htmlFor="ai-budget" className={compact ? labelSize : undefined}>Max Budget (USD)</Label>
-          <Input
-            key={`budget-${revision}`}
-            id="ai-budget"
-            type="number"
-            step={0.1}
-            min={0.01}
-            max={50}
-            defaultValue={config?.max_budget_usd ?? ""}
-            placeholder="No limit"
-            className={compact ? "h-7 text-[11px]" : undefined}
-            onBlur={(e) => {
-              const val = parseFloat(e.target.value);
-              handleSave("max_budget_usd", isNaN(val) ? undefined : val);
-            }}
-          />
-        </div>
+            <div className={fieldGap}>
+              <Label htmlFor="ai-max-turns" className={compact ? labelSize : undefined}>Max Turns (1-500)</Label>
+              <Input
+                key={`turns-${activeTab}-${revision}`}
+                id="ai-max-turns"
+                type="number"
+                min={1}
+                max={500}
+                defaultValue={config?.max_turns ?? 100}
+                className={compact ? "h-7 text-[11px]" : undefined}
+                onBlur={(e) => {
+                  const val = parseInt(e.target.value);
+                  if (!isNaN(val)) handleSave("max_turns", val);
+                }}
+              />
+            </div>
 
-        <div className={fieldGap}>
-          <Label htmlFor="ai-thinking" className={compact ? labelSize : undefined}>Thinking Budget (tokens)</Label>
-          <Input
-            key={`thinking-${revision}`}
-            id="ai-thinking"
-            type="number"
-            min={0}
-            defaultValue={config?.thinking_budget_tokens ?? ""}
-            placeholder="Disabled"
-            className={compact ? "h-7 text-[11px]" : undefined}
-            onBlur={(e) => {
-              const val = parseInt(e.target.value);
-              handleSave("thinking_budget_tokens", isNaN(val) ? undefined : val);
-            }}
-          />
-        </div>
+            <div className={fieldGap}>
+              <Label htmlFor="ai-budget" className={compact ? labelSize : undefined}>Max Budget (USD)</Label>
+              <Input
+                key={`budget-${activeTab}-${revision}`}
+                id="ai-budget"
+                type="number"
+                step={0.1}
+                min={0.01}
+                max={50}
+                defaultValue={config?.max_budget_usd ?? ""}
+                placeholder="No limit"
+                className={compact ? "h-7 text-[11px]" : undefined}
+                onBlur={(e) => {
+                  const val = parseFloat(e.target.value);
+                  handleSave("max_budget_usd", isNaN(val) ? undefined : val);
+                }}
+              />
+            </div>
+
+            <div className={fieldGap}>
+              <Label htmlFor="ai-thinking" className={compact ? labelSize : undefined}>Thinking Budget (tokens)</Label>
+              <Input
+                key={`thinking-${activeTab}-${revision}`}
+                id="ai-thinking"
+                type="number"
+                min={0}
+                defaultValue={config?.thinking_budget_tokens ?? ""}
+                placeholder="Disabled"
+                className={compact ? "h-7 text-[11px]" : undefined}
+                onBlur={(e) => {
+                  const val = parseInt(e.target.value);
+                  handleSave("thinking_budget_tokens", isNaN(val) ? undefined : val);
+                }}
+              />
+            </div>
+          </>
+        )}
 
+        {/* Common fields: permission mode + system prompt (all providers) */}
         <div className={fieldGap}>
           <Label htmlFor="ai-permission-mode" className={compact ? labelSize : undefined}>Default Permission Mode</Label>
           <Select
@@ -232,11 +291,11 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
         <div className={fieldGap}>
           <Label htmlFor="ai-system-prompt" className={compact ? labelSize : undefined}>Additional Instructions</Label>
           <textarea
-            key={`sysprompt-${revision}`}
+            key={`sysprompt-${activeTab}-${revision}`}
             id="ai-system-prompt"
-            rows={4}
+            rows={compact ? 3 : 4}
             defaultValue={config?.system_prompt ?? ""}
-            placeholder="Enter additional instructions for Claude..."
+            placeholder={`Enter additional instructions for ${activeTab}...`}
             className={`w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${compact ? "text-[11px]" : "text-sm"}`}
             onBlur={(e) => {
               const val = e.target.value.trim();

package/src/web/hooks/use-chat.ts

@@ -23,7 +23,9 @@ interface UseChatReturn {
   pendingApproval: ApprovalRequest | null;
   contextWindowPct: number | null;
   sessionTitle: string | null;
-  sendMessage: (content: string, opts?: { permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }> }) => void;
+  /** When CLI provider assigns a different session ID, this holds the new ID */
+  migratedSessionId: string | null;
+  sendMessage: (content: string, opts?: { permissionMode?: string }) => void;
   respondToApproval: (requestId: string, approved: boolean, data?: unknown) => void;
   cancelStreaming: () => void;
   reconnect: () => void;
@@ -51,6 +53,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   const [contextWindowPct, setContextWindowPct] = useState<number | null>(null);
   const [sessionTitle, setSessionTitle] = useState<string | null>(null);
   const [isConnected, setIsConnected] = useState(false);
+  const [migratedSessionId, setMigratedSessionId] = useState<string | null>(null);
   const streamingContentRef = useRef("");
   const streamingEventsRef = useRef<ChatEvent[]>([]);
   const streamingAccountRef = useRef<{ accountId: string; accountLabel: string } | null>(null);
@@ -243,6 +246,13 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     // Ignore keepalive pings
     if ((data as any).type === "ping") return;
 
+    // Handle session ID migration (CLI provider assigned different ID)
+    if ((data as any).type === "session_migrated") {
+      const newId = (data as any).newSessionId as string;
+      if (newId) setMigratedSessionId(newId);
+      return;
+    }
+
     // Handle title updates from SDK summary
     if ((data as any).type === "title_updated") {
       setSessionTitle((data as any).title ?? null);
@@ -375,13 +385,11 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   }, [sessionId, providerId, projectName]);
 
   const sendMessage = useCallback(
-    (content: string, opts?: { permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }> }) => {
+    (content: string, opts?: { permissionMode?: string }) => {
       if (!content.trim()) return;
 
-      const isFollowUp = phaseRef.current !== "idle";
-
-      if (isFollowUp) {
-        // Streaming follow-up: finalize current assistant message, then send
+      // If streaming, cancel current stream first then send immediately
+      if (phaseRef.current !== "idle") {
         const finalContent = streamingContentRef.current;
         const finalEvents = [...streamingEventsRef.current];
         setMessages((prev) => {
@@ -394,6 +402,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
           }
           return prev;
         });
+        send(JSON.stringify({ type: "cancel" }));
       }
 
       // Add user message
@@ -407,26 +416,15 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         },
       ]);
 
-      // Reset streaming state for new turn
+      // Reset streaming state
       streamingContentRef.current = "";
       streamingEventsRef.current = [];
       pendingMessageRef.current = null;
-      if (!isFollowUp) {
-        setPhase("initializing");
-        phaseRef.current = "initializing";
-      } else {
-        setPhase("thinking");
-        phaseRef.current = "thinking";
-      }
+      setPhase("initializing");
+      phaseRef.current = "initializing";
       setPendingApproval(null);
 
-      send(JSON.stringify({
-        type: "message",
-        content,
-        permissionMode: opts?.permissionMode,
-        priority: opts?.priority,
-        images: opts?.images,
-      }));
+      send(JSON.stringify({ type: "message", content, permissionMode: opts?.permissionMode }));
     },
     [send],
   );
@@ -530,6 +528,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     pendingApproval,
     contextWindowPct,
     sessionTitle,
+    migratedSessionId,
     sendMessage,
     respondToApproval,
     cancelStreaming,

package/src/web/hooks/use-global-keybindings.ts

@@ -124,6 +124,13 @@ export function useGlobalKeybindings() {
         return;
       }
 
+      // Toggle voice input in chat
+      if (match(e, "voice-input")) {
+        e.preventDefault();
+        window.dispatchEvent(new CustomEvent("toggle-voice-input"));
+        return;
+      }
+
       // Open search (sidebar)
       if (match(e, "open-search")) {
         e.preventDefault();

package/src/web/hooks/use-voice-input.ts

@@ -0,0 +1,111 @@
+import { useState, useRef, useCallback } from "react";
+
+// Extend Window for webkit prefix
+interface SpeechRecognitionEvent extends Event {
+  results: SpeechRecognitionResultList;
+  resultIndex: number;
+}
+
+type SpeechRecognitionInstance = {
+  lang: string;
+  continuous: boolean;
+  interimResults: boolean;
+  start(): void;
+  stop(): void;
+  abort(): void;
+  onresult: ((event: SpeechRecognitionEvent) => void) | null;
+  onend: (() => void) | null;
+  onerror: ((event: Event & { error: string }) => void) | null;
+};
+
+type SpeechRecognitionConstructor = new () => SpeechRecognitionInstance;
+
+function getSpeechRecognition(): SpeechRecognitionConstructor | null {
+  const w = window as unknown as {
+    SpeechRecognition?: SpeechRecognitionConstructor;
+    webkitSpeechRecognition?: SpeechRecognitionConstructor;
+  };
+  return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
+}
+
+export function useVoiceInput(options?: { lang?: string }) {
+  const [isListening, setIsListening] = useState(false);
+  const [interimText, setInterimText] = useState("");
+  const recognitionRef = useRef<SpeechRecognitionInstance | null>(null);
+  // Accumulate finalized text across multiple result events
+  const finalizedRef = useRef("");
+
+  const supported = typeof window !== "undefined" && getSpeechRecognition() !== null;
+
+  const start = useCallback(
+    (onResult: (text: string, isFinal: boolean) => void) => {
+      const SR = getSpeechRecognition();
+      if (!SR) return;
+
+      // Stop any existing session
+      recognitionRef.current?.abort();
+
+      const recognition = new SR();
+      recognition.lang = options?.lang ?? "vi-VN";
+      recognition.continuous = true;
+      recognition.interimResults = true;
+
+      finalizedRef.current = "";
+
+      recognition.onresult = (event: SpeechRecognitionEvent) => {
+        let interim = "";
+        let newFinalized = "";
+
+        for (let i = 0; i < event.results.length; i++) {
+          const result = event.results[i]!;
+          if (result.isFinal) {
+            newFinalized += result[0]!.transcript;
+          } else {
+            interim += result[0]!.transcript;
+          }
+        }
+
+        // Update finalized accumulator
+        if (newFinalized) {
+          finalizedRef.current = newFinalized;
+        }
+
+        const fullText = (finalizedRef.current + " " + interim).trim();
+        setInterimText(interim);
+        onResult(fullText, interim.length === 0 && finalizedRef.current.length > 0);
+      };
+
+      recognition.onend = () => {
+        setIsListening(false);
+        setInterimText("");
+        // Deliver final text if any
+        if (finalizedRef.current) {
+          onResult(finalizedRef.current.trim(), true);
+        }
+      };
+
+      recognition.onerror = (event) => {
+        // "no-speech" and "aborted" are expected, not real errors
+        if (event.error !== "no-speech" && event.error !== "aborted") {
+          console.warn("[voice-input] error:", event.error);
+        }
+        setIsListening(false);
+        setInterimText("");
+      };
+
+      recognitionRef.current = recognition;
+      recognition.start();
+      setIsListening(true);
+    },
+    [options?.lang],
+  );
+
+  const stop = useCallback(() => {
+    recognitionRef.current?.stop();
+    recognitionRef.current = null;
+    setIsListening(false);
+    setInterimText("");
+  }, []);
+
+  return { isListening, interimText, start, stop, supported };
+}

package/src/web/stores/keybindings-store.ts

@@ -36,6 +36,7 @@ export const KEY_ACTIONS: KeyAction[] = [
   { id: "open-git-graph", label: "Git Graph", category: "tabs", defaultKey: "Mod+G" },
   { id: "open-git-status", label: "Git Status (sidebar)", category: "tabs", defaultKey: "Mod+Shift+E" },
   { id: "open-search", label: "Search Files (sidebar)", category: "tabs", defaultKey: "Mod+Shift+F" },
+  { id: "voice-input", label: "Voice Input", category: "general", defaultKey: "Mod+Shift+V", note: "Toggle speech-to-text in chat" },
   // Projects — Mod+1..9
   ...Array.from({ length: 9 }, (_, i) => ({
     id: `switch-project-${i + 1}`,