- {/* Chat Panel */}
-
- {/* SubChatSelector header - absolute when sidebar open (desktop only), regular div otherwise */}
- {!shouldHideChatHeader && (
+
+ {/* File Search Dialog (Cmd+P) */}
+ {worktreePath && (
+
+ {/* Main content */}
+
+ {/* Chat Panel */}
- {/* Gradient background - only when not absolute */}
- {(isMobileFullscreen || subChatsSidebarMode !== "sidebar") && (
-
- )}
-
-
- {/* Mobile header - simplified with chat name as trigger */}
- {isMobileFullscreen ? (
-
- ) : (
- <>
- {/* Header controls - desktop only */}
-
-
setIsDiffSidebarOpen(true) : undefined}
- canOpenDiff={canShowDiffButton}
- isDiffSidebarOpen={isDiffSidebarOpen}
- diffStats={diffStats}
- onOpenTerminal={() => setIsTerminalSidebarOpen(true)}
- canOpenTerminal={!!worktreePath}
- isTerminalOpen={isTerminalSidebarOpen}
- chatId={chatId}
- />
- {/* Open Locally button - desktop only, sandbox mode */}
- {showOpenLocally && (
-
-
-
- {isImporting ? (
-
-
-
- Continue this session on your local machine
-
-
- )}
-
+ {/* SubChatSelector header - absolute when sidebar open (desktop only), regular div otherwise */}
+ {!shouldHideChatHeader && (
+
- {/* Open Preview Button - shows when preview is closed (desktop only, local mode only) */}
- {!isMobileFullscreen &&
- !isPreviewSidebarOpen &&
- sandboxId &&
- chatSourceMode === "local" &&
- (canOpenPreview ? (
-
-
- setIsPreviewSidebarOpen(true)}
- className="h-6 w-6 p-0 hover:bg-foreground/10 transition-colors text-foreground flex-shrink-0 rounded-md ml-2"
- aria-label="Open preview"
- >
-
-
- Open preview
-
- ) : (
-
-
-
-
-
-
- ))}
- {/* Overview/Terminal Button - shows when sidebar is closed and worktree/sandbox exists (desktop only) */}
- {!isMobileFullscreen &&
- (worktreePath || sandboxId) && (
- isUnifiedSidebarEnabled ? (
- // Details button for unified sidebar
- !isDetailsSidebarOpen && (
+ >
+ {/* Gradient background - only when not absolute */}
+ {(isMobileFullscreen ||
+ subChatsSidebarMode !== "sidebar") && (
+
+ )}
+
+
+ {/* Mobile header - simplified with chat name as trigger */}
+ {isMobileFullscreen ? (
+
+ ) : (
+ <>
+ {/* Header controls - desktop only */}
+
+
setIsDiffSidebarOpen(true)
+ : undefined
+ }
+ canOpenDiff={canShowDiffButton}
+ isDiffSidebarOpen={isDiffSidebarOpen}
+ diffStats={diffStats}
+ onOpenTerminal={() =>
+ setIsTerminalSidebarOpen(true)
+ }
+ canOpenTerminal={!!worktreePath}
+ isTerminalOpen={isTerminalSidebarOpen}
+ chatId={chatId}
+ />
+ {/*
+
+
+ {isImporting ? (
+
+
+
+ Continue this session on your local machine
+
+
+ )}
+
+ )}
+
+ {/* Open Preview Button - shows when preview is closed (desktop only, local mode only) */}
+ {!isMobileFullscreen &&
+ !isPreviewSidebarOpen &&
+ sandboxId &&
+ chatSourceMode === "local" &&
+ (canOpenPreview ? (
setIsDetailsSidebarOpen(true)}
+ onClick={() => setIsPreviewSidebarOpen(true)}
className="h-6 w-6 p-0 hover:bg-foreground/10 transition-colors text-foreground flex-shrink-0 rounded-md ml-2"
- aria-label="View details"
+ aria-label="Open preview"
>
-
- View details
- {toggleDetailsHotkey && {toggleDetailsHotkey} }
-
+ Open preview
- )
- ) : (
- // Terminal button for legacy sidebars
- !isTerminalSidebarOpen && (
-
-
+ ) : (
+
+
setIsTerminalSidebarOpen(true)}
- className="h-6 w-6 p-0 hover:bg-foreground/10 transition-colors text-foreground flex-shrink-0 rounded-md ml-2"
- aria-label="Open terminal"
+ disabled
+ className="h-6 w-6 p-0 text-muted-foreground flex-shrink-0 rounded-md cursor-not-allowed pointer-events-none"
+ aria-label="Preview not available"
>
-
-
-
- Open terminal
- {toggleTerminalHotkey && {toggleTerminalHotkey} }
-
-
- )
- )
- )}
- {/* Restore Button - shows when viewing archived workspace (desktop only) */}
- {!isMobileFullscreen && isArchived && (
-
-
-
- Restore
-
-
-
- Restore workspace
- ⇧⌘E
-
-
- )}
-
-
- {/* Loading gate: prevent getOrCreateChat() from caching empty messages before data is ready */}
- {isLocalChatLoading ? (
-
-
- ) : (
- tabsToRender.map(subChatId => {
- const chat = getOrCreateChat(subChatId)
- const isActive = subChatId === activeSubChatId
- const isFirstSubChat = getFirstSubChatId(agentSubChats) === subChatId
-
- // Defense in depth: double-check workspace ownership
- // Use agentSubChats (server data) as primary source, fall back to allSubChats for optimistic updates
- // This fixes the race condition where allSubChats is empty after setChatId but before setAllSubChats
- const belongsToWorkspace = agentSubChats.some(sc => sc.id === subChatId) ||
- allSubChats.some(sc => sc.id === subChatId)
-
- if (!chat || !belongsToWorkspace) return null
-
- return (
-
-
- )
- })
- )}
-
-
- {/* Disabled input while loading */}
-
-
-
-
-
- Plan, @ for context, / for commands
-
-
-
- {/* Mode selector placeholder */}
-
- Agent
-
-
- {/* Model selector placeholder */}
-
-
- {hasCustomClaudeConfig ? (
- "Custom Model"
- ) : (
- <>
- Sonnet{" "}
-
- 4.5
-
-
- )}
-
-
-
- {/* Attach button placeholder */}
+
+
+ ))}
+ {/* Overview/Terminal Button - shows when sidebar is closed and worktree/sandbox exists (desktop only) */}
+ {!isMobileFullscreen &&
+ (worktreePath || sandboxId) &&
+ (isUnifiedSidebarEnabled
+ ? // Details button for unified sidebar
+ !isDetailsSidebarOpen && (
+
+
+ setIsDetailsSidebarOpen(true)}
+ className="h-6 w-6 p-0 hover:bg-foreground/10 transition-colors text-foreground flex-shrink-0 rounded-md ml-2"
+ aria-label="View details"
+ >
+
+
+
+ View details
+ {toggleDetailsHotkey && (
+ {toggleDetailsHotkey}
+ )}
+
+
+ )
+ : // Terminal button for legacy sidebars
+ !isTerminalSidebarOpen && (
+
+
+ setIsTerminalSidebarOpen(true)}
+ className="h-6 w-6 p-0 hover:bg-foreground/10 transition-colors text-foreground flex-shrink-0 rounded-md ml-2"
+ aria-label="Open terminal"
+ >
+
+
+
+ Open terminal
+ {toggleTerminalHotkey && (
+ {toggleTerminalHotkey}
+ )}
+
+
+ ))}
+ {/* Restore Button - shows when viewing archived workspace (desktop only) */}
+ {!isMobileFullscreen && isArchived && (
+
+
- Restore
+
+
+ Restore workspace
+ ⇧⌘E
+
+
+ )}
+
+ )}
- {/* Send button */}
-
+ {/* Chat Content - Keep-alive: render all open tabs, hide inactive with CSS */}
+ {tabsToRender.length > 0 && agentChat ? (
+
+ {/* Loading gate: prevent getOrCreateChat() from caching empty messages before data is ready */}
+ {isLocalChatLoading ? (
+
+
+ ) : (
+ tabsToRender.map((subChatId) => {
+ const chat = getOrCreateChat(subChatId);
+ const isActive = subChatId === activeSubChatId;
+ const isFirstSubChat =
+ getFirstSubChatId(agentSubChats) === subChatId;
+
+ // Defense in depth: double-check workspace ownership
+ // Use agentSubChats (server data) as primary source, fall back to allSubChats for optimistic updates
+ // This fixes the race condition where allSubChats is empty after setChatId but before setAllSubChats
+ const belongsToWorkspace =
+ agentSubChats.some((sc) => sc.id === subChatId) ||
+ allSubChats.some((sc) => sc.id === subChatId);
+
+ if (!chat || !belongsToWorkspace) return null;
+
+ return (
+
+
-
-
-
+ );
+ })
+ )}
-
+ ) : (
+ <>
+ {/* Empty chat area - no loading indicator */}
+
+
+ {/* Disabled input while loading */}
+
+
+
+
+
+ Plan, @ for context, / for commands
+
+
+
+ {/* Mode selector placeholder */}
+
+ Agent
+
+
+ {/* Model selector placeholder */}
+
+
+ {hasCustomClaudeConfig ? (
+ "Custom Model"
+ ) : (
+ <>
+ Sonnet{" "}
+
+ 4.5
+
+
+ )}
+
+
+
+ {/* Attach button placeholder */}
+
+
+
+ {/* Send button */}
+
+
+
+
+
+
+
+ )}
+
- {/* Plan Sidebar - shows plan files on the right (leftmost right sidebar) */}
- {/* Only show when we have an active sub-chat with a plan */}
- {!isMobileFullscreen && activeSubChatIdForPlan && (
-
setIsPlanSidebarOpen(false)}
- widthAtom={agentsPlanSidebarWidthAtom}
- minWidth={400}
- maxWidth={800}
- side="right"
- animationDuration={0}
- initialWidth={0}
- exitWidth={0}
- showResizeTooltip={true}
- className="bg-tl-background border-l"
- style={{ borderLeftWidth: "0.5px" }}
- >
- setIsPlanSidebarOpen(false)}
- onBuildPlan={handleApprovePlanFromSidebar}
- refetchTrigger={planEditRefetchTrigger}
- mode={currentMode}
- />
-
- )}
+ {/* Plan Sidebar - shows plan files on the right (leftmost right sidebar) */}
+ {/* Only show when we have an active sub-chat with a plan */}
+ {!isMobileFullscreen && activeSubChatIdForPlan && (
+
setIsPlanSidebarOpen(false)}
+ widthAtom={agentsPlanSidebarWidthAtom}
+ minWidth={400}
+ maxWidth={800}
+ side="right"
+ animationDuration={0}
+ initialWidth={0}
+ exitWidth={0}
+ showResizeTooltip={true}
+ className="bg-tl-background border-l"
+ style={{ borderLeftWidth: "0.5px" }}
+ >
+ setIsPlanSidebarOpen(false)}
+ onBuildPlan={handleApprovePlanFromSidebar}
+ refetchTrigger={planEditRefetchTrigger}
+ mode={currentMode}
+ />
+
+ )}
- {/* Diff View - hidden on mobile fullscreen and when diff is not available */}
- {/* Supports three display modes: side-peek (sidebar), center-peek (dialog), full-page */}
- {/* Wrapped in DiffStateProvider to isolate diff state and prevent ChatView re-renders */}
- {canOpenDiff && !isMobileFullscreen && (
-
-
- )}
+ {/* Diff View - hidden on mobile fullscreen and when diff is not available */}
+ {/* Supports three display modes: side-peek (sidebar), center-peek (dialog), full-page */}
+ {/* Wrapped in DiffStateProvider to isolate diff state and prevent ChatView re-renders */}
+ {canOpenDiff && !isMobileFullscreen && (
+
+
+ )}
- {/* Preview Sidebar - hidden on mobile fullscreen and when preview is not available */}
- {canOpenPreview && !isMobileFullscreen && (
-
setIsPreviewSidebarOpen(false)}
- widthAtom={agentsPreviewSidebarWidthAtom}
- minWidth={350}
- side="right"
- animationDuration={0}
- initialWidth={0}
- exitWidth={0}
- showResizeTooltip={true}
- className="bg-tl-background border-l"
- style={{ borderLeftWidth: "0.5px" }}
- >
- {isQuickSetup ? (
-
- {/* Header with close button */}
-
- setIsPreviewSidebarOpen(false)}
- >
-
-
- {/* Content */}
-
-
-
-
+ {/* Preview Sidebar - hidden on mobile fullscreen and when preview is not available */}
+ {canOpenPreview && !isMobileFullscreen && (
+
setIsPreviewSidebarOpen(false)}
+ widthAtom={agentsPreviewSidebarWidthAtom}
+ minWidth={350}
+ side="right"
+ animationDuration={0}
+ initialWidth={0}
+ exitWidth={0}
+ showResizeTooltip={true}
+ className="bg-tl-background border-l"
+ style={{ borderLeftWidth: "0.5px" }}
+ >
+ {isQuickSetup ? (
+
+ {/* Header with close button */}
+
+ setIsPreviewSidebarOpen(false)}
+ >
+
+
+ {/* Content */}
+
+
+
+
+
+
+ Preview not available
+
+
+ Set up this repository to enable live preview
+
+
- Preview not available
-
-
- Set up this repository to enable live preview
-
-
-
- ) : (
-
setIsPreviewSidebarOpen(false)}
+ />
+ )}
+
+ )}
+
+ {/* File Viewer - opens when a file is clicked */}
+ {!isMobileFullscreen &&
+ fileViewerPath &&
+ worktreePath &&
+ fileViewerDisplayMode === "side-peek" && (
+ setFileViewerPath(null)}
+ widthAtom={fileViewerSidebarWidthAtom}
+ minWidth={350}
+ maxWidth={900}
+ side="right"
+ animationDuration={0}
+ initialWidth={0}
+ exitWidth={0}
+ showResizeTooltip={true}
+ className="bg-tl-background border-l"
+ style={{ borderLeftWidth: "0.5px" }}
+ >
+ setFileViewerPath(null)}
+ />
+
+ )}
+ {fileViewerPath &&
+ worktreePath &&
+ fileViewerDisplayMode === "center-peek" && (
+ setFileViewerPath(null)}
+ >
+ setFileViewerPath(null)}
+ />
+
+ )}
+ {fileViewerPath &&
+ worktreePath &&
+ fileViewerDisplayMode === "full-page" && (
+ setFileViewerPath(null)}
+ >
+ setFileViewerPath(null)}
+ />
+
+ )}
+
+ {/* Terminal Sidebar - shows when worktree exists (desktop only) */}
+ {worktreePath && (
+ setIsPreviewSidebarOpen(false)}
+ cwd={worktreePath}
+ workspaceId={chatId}
/>
)}
-
- )}
- {/* File Viewer - opens when a file is clicked */}
- {!isMobileFullscreen && fileViewerPath && worktreePath && fileViewerDisplayMode === "side-peek" && (
- setFileViewerPath(null)}
- widthAtom={fileViewerSidebarWidthAtom}
- minWidth={350}
- maxWidth={900}
- side="right"
- animationDuration={0}
- initialWidth={0}
- exitWidth={0}
- showResizeTooltip={true}
- className="bg-tl-background border-l"
- style={{ borderLeftWidth: "0.5px" }}
- >
- setFileViewerPath(null)}
- />
-
- )}
- {fileViewerPath && worktreePath && fileViewerDisplayMode === "center-peek" && (
- setFileViewerPath(null)}
- >
- setFileViewerPath(null)}
- />
-
- )}
- {fileViewerPath && worktreePath && fileViewerDisplayMode === "full-page" && (
- setFileViewerPath(null)}
- >
- setFileViewerPath(null)}
+ {/* Open Locally Dialog - for importing sandbox chats to local */}
+ setOpenLocallyDialogOpen(false)}
+ remoteChat={remoteAgentChat ?? null}
+ matchingProjects={openLocallyMatchingProjects}
+ allProjects={projects ?? []}
+ remoteSubChatId={activeSubChatId}
/>
-
- )}
- {/* Terminal Sidebar - shows when worktree exists (desktop only) */}
- {worktreePath && (
- setOpenLocallyDialogOpen(false)}
- remoteChat={remoteAgentChat ?? null}
- matchingProjects={openLocallyMatchingProjects}
- allProjects={projects ?? []}
- remoteSubChatId={activeSubChatId}
- />
-
- {/* Unified Details Sidebar - combines all right sidebars into one (rightmost) */}
- {/* Show for both local (worktreePath) and remote (sandboxId) chats */}
- {isUnifiedSidebarEnabled && !isMobileFullscreen && (worktreePath || sandboxId) && (
- setIsTerminalSidebarOpen(true)}
- onExpandPlan={() => setIsPlanSidebarOpen(true)}
- onExpandDiff={() => setIsDiffSidebarOpen(true)}
- onFileSelect={(filePath) => {
- // Set the selected file path
- setSelectedFilePath(filePath)
- // Set filtered files to just this file
- setFilteredDiffFiles([filePath])
- // Open the diff sidebar
- setIsDiffSidebarOpen(true)
- }}
- remoteInfo={remoteInfo}
- isRemoteChat={!!remoteInfo}
- />
- )}
- setIsTerminalSidebarOpen(true)}
+ onExpandPlan={() => setIsPlanSidebarOpen(true)}
+ onExpandDiff={() => setIsDiffSidebarOpen(true)}
+ onFileSelect={(filePath) => {
+ // Set the selected file path
+ setSelectedFilePath(filePath);
+ // Set filtered files to just this file
+ setFilteredDiffFiles([filePath]);
+ // Open the diff sidebar
+ setIsDiffSidebarOpen(true);
+ }}
+ remoteInfo={remoteInfo}
+ isRemoteChat={!!remoteInfo}
+ />
+ )}
+
- {/* Terminal Bottom Panel — renders below the main row when displayMode is "bottom" */}
- {terminalDisplayMode === "bottom" && worktreePath && !isMobileFullscreen && (
-
setIsTerminalSidebarOpen(false)}
- heightAtom={terminalBottomHeightAtom}
- minHeight={150}
- maxHeight={500}
- showResizeTooltip={true}
- closeHotkey={toggleTerminalHotkey ?? undefined}
- className="bg-background border-t"
- style={{ borderTopWidth: "0.5px" }}
- >
- setIsTerminalSidebarOpen(false)}
- />
-
- )}
-
-
+ {/* Terminal Bottom Panel — renders below the main row when displayMode is "bottom" */}
+ {terminalDisplayMode === "bottom" &&
+ worktreePath &&
+ !isMobileFullscreen && (
+
setIsTerminalSidebarOpen(false)}
+ heightAtom={terminalBottomHeightAtom}
+ minHeight={150}
+ maxHeight={500}
+ showResizeTooltip={true}
+ closeHotkey={toggleTerminalHotkey ?? undefined}
+ className="bg-background border-t"
+ style={{ borderTopWidth: "0.5px" }}
+ >
+ setIsTerminalSidebarOpen(false)}
+ />
+
+ )}
+
- )
+ );
}
diff --git a/src/renderer/features/agents/main/chat-input-area.tsx b/src/renderer/features/agents/main/chat-input-area.tsx
index 8e98ede18..2671865c4 100644
--- a/src/renderer/features/agents/main/chat-input-area.tsx
+++ b/src/renderer/features/agents/main/chat-input-area.tsx
@@ -1,9 +1,8 @@
"use client"
import { useAtom, useAtomValue, useSetAtom } from "jotai"
-import { ChevronDown, Loader2, RefreshCw, Zap } from "lucide-react"
+import { BrainIcon, ChevronDown, Loader2, NotebookIcon, RefreshCw, RouteIcon, Zap } from "lucide-react"
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { createPortal } from "react-dom"
import { Button } from "../../../components/ui/button"
import {
@@ -86,6 +85,13 @@ import {
} from "../../../lib/hooks/use-voice-recording"
import { getResolvedHotkey } from "../../../lib/hotkeys"
import { customHotkeysAtom } from "../../../lib/atoms"
+import { ProfileSelector, useEffectiveProfile, useEffectiveModel } from "../ui/profile-selector"
+import {
+ modelProfilesAtom,
+ lastUsedProfileIdAtom,
+ selectedProfileModelIdAtom,
+ type ModelMapping,
+} from "../../../lib/atoms"
// Hook to get available models (including offline models if Ollama is available and debug enabled)
function useAvailableModels() {
@@ -178,6 +184,9 @@ export interface ChatInputAreaProps {
onInputContentChange?: (hasContent: boolean) => void
// Callback to send message with question answer (Enter sends immediately, not to queue)
onSubmitWithQuestionAnswer?: () => void
+ // Per-workspace model profile (from chat data)
+ chatModelProfileId?: string | null
+ chatSelectedModelId?: string | null
}
/**
@@ -373,12 +382,95 @@ export const ChatInputArea = memo(function ChatInputArea({
firstQueueItemId,
onInputContentChange,
onSubmitWithQuestionAnswer,
+ chatModelProfileId,
+ chatSelectedModelId,
}: ChatInputAreaProps) {
// Local state - changes here don't re-render parent
const [hasContent, setHasContent] = useState(false)
const [isFocused, setIsFocused] = useState(false)
const [isDragOver, setIsDragOver] = useState(false)
+ // Get effective profile and model from per-workspace settings
+ const effectiveProfile = useEffectiveProfile(chatModelProfileId)
+ const effectiveModel = useEffectiveModel(effectiveProfile, chatSelectedModelId)
+
+ // Derive available models from profile config (like settings do)
+ const profileModels = useMemo((): ModelMapping[] => {
+ if (!effectiveProfile?.config) return []
+ const models: ModelMapping[] = []
+ const config = effectiveProfile.config
+
+ // Add main model
+ if (config.model) {
+ models.push({
+ id: "main",
+ displayName: "Main",
+ modelId: config.model,
+ supportsThinking: true,
+ })
+ }
+
+ // Add Opus model
+ if (config.defaultOpusModel) {
+ models.push({
+ id: "opus",
+ displayName: "Opus",
+ modelId: config.defaultOpusModel,
+ supportsThinking: true,
+ })
+ }
+
+ // Add Sonnet model
+ if (config.defaultSonnetModel) {
+ models.push({
+ id: "sonnet",
+ displayName: "Sonnet",
+ modelId: config.defaultSonnetModel,
+ supportsThinking: true,
+ })
+ }
+
+ // Add Haiku model
+ if (config.defaultHaikuModel) {
+ models.push({
+ id: "haiku",
+ displayName: "Haiku",
+ modelId: config.defaultHaikuModel,
+ supportsThinking: false,
+ })
+ }
+
+ // Add Subagent model
+ if (config.subagentModel) {
+ models.push({
+ id: "subagent",
+ displayName: "Subagent",
+ modelId: config.subagentModel,
+ supportsThinking: false,
+ })
+ }
+
+ return models
+ }, [effectiveProfile?.config])
+
+ // Selected model within profile - use global atom so ipc-chat-transport can read it
+ const [selectedProfileModelId, setSelectedProfileModelId] = useAtom(selectedProfileModelIdAtom)
+
+ // Get selected model from profile models
+ const selectedProfileModel = useMemo((): ModelMapping | null => {
+ if (profileModels.length === 0) return null
+ if (selectedProfileModelId) {
+ const found = profileModels.find((m) => m.id === selectedProfileModelId)
+ if (found) return found
+ }
+ return profileModels[0] ?? null
+ }, [profileModels, selectedProfileModelId])
+
+ // Reset selected model when profile changes
+ useEffect(() => {
+ setSelectedProfileModelId(null)
+ }, [effectiveProfile?.id])
+
// Mention dropdown state
const [showMentionDropdown, setShowMentionDropdown] = useState(false)
const [mentionSearchText, setMentionSearchText] = useState("")
@@ -395,15 +487,7 @@ export const ChatInputArea = memo(function ChatInputArea({
const [slashSearchText, setSlashSearchText] = useState("")
const [slashPosition, setSlashPosition] = useState({ top: 0, left: 0 })
- // Mode dropdown state
- const [modeDropdownOpen, setModeDropdownOpen] = useState(false)
- const [modeTooltip, setModeTooltip] = useState<{
- visible: boolean
- position: { top: number; left: number }
- mode: "agent" | "plan"
- } | null>(null)
- const tooltipTimeoutRef = useRef
| null>(null)
- const hasShownTooltipRef = useRef(false)
+
// Model dropdown state
const [isModelDropdownOpen, setIsModelDropdownOpen] = useState(false)
@@ -442,6 +526,9 @@ export const ChatInputArea = memo(function ChatInputArea({
// Extended thinking (reasoning) toggle
const [thinkingEnabled, setThinkingEnabled] = useAtom(extendedThinkingEnabledAtom)
+ // Check if selected model supports thinking
+ const selectedModelSupportsThinking = selectedModel?.supportsThinking ?? true
+
// MCP status - from getAllMcpConfig query (provides global/local grouping)
const setSettingsOpen = useSetAtom(agentsSettingsDialogOpenAtom)
const setSettingsTab = useSetAtom(agentsSettingsDialogActiveTabAtom)
@@ -941,7 +1028,6 @@ export const ChatInputArea = memo(function ChatInputArea({
// Process other files - for text files, read content and add as file mention
for (const file of otherFiles) {
// Get file path using Electron's webUtils API (more reliable than file.path)
- // @ts-expect-error - Electron's webUtils API
const filePath: string | undefined = window.webUtils?.getPathForFile?.(file) || (file as File & { path?: string }).path
let mentionId: string
@@ -1141,175 +1227,15 @@ export const ChatInputArea = memo(function ChatInputArea({
- {/* Mode toggle (Agent/Plan) */}
-
{
- setModeDropdownOpen(open)
- if (!open) {
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- setModeTooltip(null)
- hasShownTooltipRef.current = false
- }
- }}
- >
-
-
- {subChatMode === "plan" ? (
- {subChatMode === "plan" ? "Plan" : "Agent"}
-
-
- e.preventDefault()}
- >
- {
- // Clear tooltip before closing dropdown (onMouseLeave won't fire)
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- setModeTooltip(null)
- updateMode("agent")
- setModeDropdownOpen(false)
- }}
- className="justify-between gap-2"
- onMouseEnter={(e) => {
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- const rect = e.currentTarget.getBoundingClientRect()
- const showTooltip = () => {
- setModeTooltip({
- visible: true,
- position: {
- top: rect.top,
- left: rect.right + 8,
- },
- mode: "agent",
- })
- hasShownTooltipRef.current = true
- tooltipTimeoutRef.current = null
- }
- if (hasShownTooltipRef.current) {
- showTooltip()
- } else {
- tooltipTimeoutRef.current = setTimeout(
- showTooltip,
- 1000,
- )
- }
- }}
- onMouseLeave={() => {
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- setModeTooltip(null)
- }}
- >
-
- {subChatMode !== "plan" && (
-
- {
- // Clear tooltip before closing dropdown (onMouseLeave won't fire)
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- setModeTooltip(null)
- updateMode("plan")
- setModeDropdownOpen(false)
- }}
- className="justify-between gap-2"
- onMouseEnter={(e) => {
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- const rect = e.currentTarget.getBoundingClientRect()
- const showTooltip = () => {
- setModeTooltip({
- visible: true,
- position: {
- top: rect.top,
- left: rect.right + 8,
- },
- mode: "plan",
- })
- hasShownTooltipRef.current = true
- tooltipTimeoutRef.current = null
- }
- if (hasShownTooltipRef.current) {
- showTooltip()
- } else {
- tooltipTimeoutRef.current = setTimeout(
- showTooltip,
- 1000,
- )
- }
- }}
- onMouseLeave={() => {
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- setModeTooltip(null)
- }}
- >
-
- {subChatMode === "plan" && (
-
-
- {modeTooltip?.visible &&
- createPortal(
-
-
-
- {modeTooltip.mode === "agent"
- ? "Apply changes directly without a plan"
- : "Create a plan before making changes"}
-
-
-
- {/* Model selector - shows Ollama models when offline, Claude models when online */}
+ {/* Profile selector - per-workspace model profile */}
+
+
+ {/* Model selector - shows Ollama models when offline, profile models, or Claude models */}
{availableModels.isOffline && availableModels.hasOllama ? (
// Offline mode: show Ollama model selector
- ) : (
- // Online mode: show Claude model selector
+ ) : profileModels.length > 0 ? (
+ // Profile mode: show models from selected profile config
{
- if (!hasCustomClaudeConfig) {
- setIsModelDropdownOpen(open)
- }
- }}
+ open={isModelDropdownOpen}
+ onOpenChange={setIsModelDropdownOpen}
>
- {hasCustomClaudeConfig ? (
- "Custom Model"
- ) : (
- <>
- {selectedModel?.name}{" "}
- 4.5
-
- )}
+ {selectedProfileModel?.displayName || "Select model"}{" "}
+
+ ({selectedProfileModel?.modelId || ""})
+
+
+ {profileModels.map((model) => {
+ const isSelected = model.id === selectedProfileModel?.id
+ return (
+ setSelectedProfileModelId(model.id)}
+ className="gap-2 justify-between"
+ >
+
+
+ {model.displayName}{" "}
+
+ ({model.modelId})
+
+
+
+ {isSelected && (
+
+ )
+ })}
+
+
+ ) : (
+ // Fallback: show Claude model selector (no profile or empty profile)
+
+
+
+ {selectedModel?.name}
+
+
{availableModels.models.map((model) => {
const isSelected = selectedModel?.id === model.id
@@ -1403,10 +1356,7 @@ export const ChatInputArea = memo(function ChatInputArea({
>
- {model.name}{" "}
- 4.5
-
+ {model.name}
{isSelected && (
e.stopPropagation()}
- >
-
- Thinking
-
-
-
)}
+ {/* Thinking toggle - simple toggle button */}
+
{
+ if (selectedModelSupportsThinking) {
+ setThinkingEnabled(!thinkingEnabled)
+ }
+ }}
+ disabled={!selectedModelSupportsThinking}
+ className={cn(
+ "flex items-center gap-1.5 px-2 py-1 text-sm transition-colors rounded-md outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70",
+ !selectedModelSupportsThinking
+ ? "opacity-40 cursor-not-allowed text-muted-foreground"
+ : thinkingEnabled
+ ? "text-[#D4846C] hover:text-[#E8A08C] hover:bg-[#D4846C]/10"
+ : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+ )}
+ >
+ Thinking
+ )}
+
+
+ {/* Mode toggle (Agent/Plan) - simple toggle button */}
+
+ Plan
+ )}
+
+
diff --git a/src/renderer/features/agents/main/new-chat-form.tsx b/src/renderer/features/agents/main/new-chat-form.tsx
index 4d9dc25b1..21ef03396 100644
--- a/src/renderer/features/agents/main/new-chat-form.tsx
+++ b/src/renderer/features/agents/main/new-chat-form.tsx
@@ -2,25 +2,23 @@
import { useVirtualizer } from "@tanstack/react-virtual"
import { useAtom, useAtomValue, useSetAtom } from "jotai"
-import { AlignJustify, Plus, Zap } from "lucide-react"
+import { AlignJustify, BrainIcon, Plus, RouteIcon, Zap } from "lucide-react"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { createPortal } from "react-dom"
import { Button } from "../../../components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
+ DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../../../components/ui/dropdown-menu"
import {
- AgentIcon,
AttachIcon,
BranchIcon,
CheckIcon,
ClaudeCodeIcon,
CursorIcon,
IconChevronDown,
- PlanIcon,
SearchIcon,
} from "../../../components/ui/icons"
import {
@@ -59,6 +57,12 @@ import {
selectedOllamaModelAtom,
customHotkeysAtom,
chatSourceModeAtom,
+ extendedThinkingEnabledAtom,
+ modelProfilesAtom,
+ lastUsedProfileIdAtom,
+ selectedProfileModelIdAtom,
+ type ModelProfile,
+ type ModelMapping,
} from "../../../lib/atoms"
// Desktop uses real tRPC
import { toast } from "sonner"
@@ -111,6 +115,7 @@ import {
type DraftProject,
} from "../lib/drafts"
import { CLAUDE_MODELS } from "../lib/models"
+import { Settings } from "lucide-react"
// import type { PlanType } from "@/lib/config/subscription-plans"
type PlanType = string
@@ -229,12 +234,119 @@ export function NewChatForm({
const toggleMode = useCallback(() => {
setAgentMode(getNextMode)
}, [])
+ // Extended thinking toggle
+ const [thinkingEnabled, setThinkingEnabled] = useAtom(extendedThinkingEnabledAtom)
const [workMode, setWorkMode] = useAtom(lastSelectedWorkModeAtom)
const debugMode = useAtomValue(agentsDebugModeAtom)
const customClaudeConfig = useAtomValue(customClaudeConfigAtom)
const normalizedCustomClaudeConfig =
normalizeCustomClaudeConfig(customClaudeConfig)
const hasCustomClaudeConfig = Boolean(normalizedCustomClaudeConfig)
+
+ // Model profile state for new chats
+ const profiles = useAtomValue(modelProfilesAtom)
+ const [lastUsedProfileId, setLastUsedProfileId] = useAtom(lastUsedProfileIdAtom)
+
+ // Filter out offline profiles from display
+ const displayProfiles = profiles.filter((p) => !p.isOffline)
+
+ // Get effective profile (lastUsed or first available)
+ const effectiveProfile = useMemo(() => {
+ if (lastUsedProfileId) {
+ const found = profiles.find((p) => p.id === lastUsedProfileId)
+ if (found) return found
+ }
+ return displayProfiles[0] ?? null
+ }, [profiles, displayProfiles, lastUsedProfileId])
+
+ // Selected model within profile - use global atom so ipc-chat-transport can read it
+ const [selectedProfileModelId, setSelectedProfileModelId] = useAtom(selectedProfileModelIdAtom)
+
+ // Get effective model from profile
+ const effectiveProfileModel = useMemo((): ModelMapping | null => {
+ if (!effectiveProfile?.models || effectiveProfile.models.length === 0) {
+ return null
+ }
+ if (selectedProfileModelId) {
+ const found = effectiveProfile.models.find((m) => m.id === selectedProfileModelId)
+ if (found) return found
+ }
+ return effectiveProfile.models[0] ?? null
+ }, [effectiveProfile, selectedProfileModelId])
+
+ // Derive available models from profile config (like settings do)
+ const profileModels = useMemo((): ModelMapping[] => {
+ if (!effectiveProfile?.config) return []
+ const models: ModelMapping[] = []
+ const config = effectiveProfile.config
+
+ // Add main model
+ if (config.model) {
+ models.push({
+ id: "main",
+ displayName: "Main",
+ modelId: config.model,
+ supportsThinking: true,
+ })
+ }
+
+ // Add Opus model
+ if (config.defaultOpusModel) {
+ models.push({
+ id: "opus",
+ displayName: "Opus",
+ modelId: config.defaultOpusModel,
+ supportsThinking: true,
+ })
+ }
+
+ // Add Sonnet model
+ if (config.defaultSonnetModel) {
+ models.push({
+ id: "sonnet",
+ displayName: "Sonnet",
+ modelId: config.defaultSonnetModel,
+ supportsThinking: true,
+ })
+ }
+
+ // Add Haiku model
+ if (config.defaultHaikuModel) {
+ models.push({
+ id: "haiku",
+ displayName: "Haiku",
+ modelId: config.defaultHaikuModel,
+ supportsThinking: false,
+ })
+ }
+
+ // Add Subagent model
+ if (config.subagentModel) {
+ models.push({
+ id: "subagent",
+ displayName: "Subagent",
+ modelId: config.subagentModel,
+ supportsThinking: false,
+ })
+ }
+
+ return models
+ }, [effectiveProfile?.config])
+
+ // Get selected model from profile models
+ const selectedProfileModel = useMemo((): ModelMapping | null => {
+ if (profileModels.length === 0) return null
+ if (selectedProfileModelId) {
+ const found = profileModels.find((m) => m.id === selectedProfileModelId)
+ if (found) return found
+ }
+ return profileModels[0] ?? null
+ }, [profileModels, selectedProfileModelId])
+
+ // Reset selected model when profile changes
+ useEffect(() => {
+ setSelectedProfileModelId(null)
+ }, [effectiveProfile?.id])
const setSettingsDialogOpen = useSetAtom(agentsSettingsDialogOpenAtom)
const setSettingsActiveTab = useSetAtom(agentsSettingsDialogActiveTabAtom)
const setJustCreatedIds = useSetAtom(justCreatedIdsAtom)
@@ -389,15 +501,6 @@ export function NewChatForm({
const [slashSearchText, setSlashSearchText] = useState("")
const [slashPosition, setSlashPosition] = useState({ top: 0, left: 0 })
- // Mode tooltip state (floating tooltip like canvas)
- const [modeTooltip, setModeTooltip] = useState<{
- visible: boolean
- position: { top: number; left: number }
- mode: "agent" | "plan"
- } | null>(null)
- const tooltipTimeoutRef = useRef | null>(null)
- const hasShownTooltipRef = useRef(false)
- const [modeDropdownOpen, setModeDropdownOpen] = useState(false)
const [isModelDropdownOpen, setIsModelDropdownOpen] = useState(false)
// Voice input state
@@ -1410,6 +1513,8 @@ export function NewChatForm({
[validatedProject?.path, handleAddAttachments, trpcUtils],
)
+ const selectedModelSupportsThinking = selectedModel?.supportsThinking ?? false
+
// Context items for images, files, and pasted text files
const contextItems =
images.length > 0 || files.length > 0 || pastedTexts.length > 0 ? (
@@ -1566,174 +1671,49 @@ export function NewChatForm({
- {/* Mode toggle (Agent/Plan) */}
-
{
- setModeDropdownOpen(open)
- if (!open) {
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- setModeTooltip(null)
- hasShownTooltipRef.current = false
- }
- }}
- >
-
- {agentMode === "plan" ? (
- {agentMode === "plan" ? "Plan" : "Agent"}
-
- e.preventDefault()}
- >
- {
- // Clear tooltip before closing dropdown (onMouseLeave won't fire)
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- setModeTooltip(null)
- setAgentMode("agent")
- setModeDropdownOpen(false)
- }}
- className="justify-between gap-2"
- onMouseEnter={(e) => {
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- const rect =
- e.currentTarget.getBoundingClientRect()
- const showTooltip = () => {
- setModeTooltip({
- visible: true,
- position: {
- top: rect.top,
- left: rect.right + 8,
- },
- mode: "agent",
- })
- hasShownTooltipRef.current = true
- tooltipTimeoutRef.current = null
- }
- if (hasShownTooltipRef.current) {
- showTooltip()
- } else {
- tooltipTimeoutRef.current = setTimeout(
- showTooltip,
- 1000,
- )
- }
- }}
- onMouseLeave={() => {
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- setModeTooltip(null)
- }}
- >
-
- {agentMode !== "plan" && (
-
- {
- // Clear tooltip before closing dropdown (onMouseLeave won't fire)
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- setModeTooltip(null)
- setAgentMode("plan")
- setModeDropdownOpen(false)
- }}
- className="justify-between gap-2"
- onMouseEnter={(e) => {
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- const rect = e.currentTarget.getBoundingClientRect()
- const showTooltip = () => {
- setModeTooltip({
- visible: true,
- position: {
- top: rect.top,
- left: rect.right + 8,
- },
- mode: "plan",
- })
- hasShownTooltipRef.current = true
- tooltipTimeoutRef.current = null
- }
- if (hasShownTooltipRef.current) {
- showTooltip()
- } else {
- tooltipTimeoutRef.current = setTimeout(
- showTooltip,
- 1000,
- )
- }
- }}
- onMouseLeave={() => {
- if (tooltipTimeoutRef.current) {
- clearTimeout(tooltipTimeoutRef.current)
- tooltipTimeoutRef.current = null
- }
- setModeTooltip(null)
- }}
- >
-
- {agentMode === "plan" && (
-
-
- {modeTooltip?.visible &&
- createPortal(
- 0 && (
+
+
+
+
+ {effectiveProfile?.name || "Default"}
+
+
+
+
+ {displayProfiles.map((profile) => {
+ const isSelected = profile.id === effectiveProfile?.id
+ return (
+ setLastUsedProfileId(profile.id)}
+ className="gap-2 justify-between"
+ >
+ {profile.name}
+ {isSelected &&
+ )
+ })}
+ {
+ setSettingsActiveTab("models")
+ setSettingsDialogOpen(true)
}}
+ className="gap-2"
>
-
-
- {modeTooltip.mode === "agent"
- ? "Apply changes directly without a plan"
- : "Create a plan before making changes"}
-
-
-
+
+
Manage Profiles...
+
+
+
+ )}
- {/* Model selector - shows Ollama models when offline, Claude models when online */}
+ {/* Model selector - shows profile models, Ollama models when offline, or Claude models */}
{availableModels.isOffline && availableModels.hasOllama ? (
// Offline mode: show Ollama model selector
{currentOllamaModel || "Select model"}
@@ -1776,8 +1756,54 @@ export function NewChatForm({
})}
+ ) : profileModels.length > 0 ? (
+ // Profile mode: show models from selected profile config
+
+
+
+
+ {selectedProfileModel?.displayName || "Select model"}{" "}
+
+ ({selectedProfileModel?.modelId || ""})
+
+
+
+
+
+ {profileModels.map((model) => {
+ const isSelected = model.id === selectedProfileModel?.id
+ return (
+ setSelectedProfileModelId(model.id)}
+ className="gap-2 justify-between"
+ >
+
+
+ {model.displayName}{" "}
+
+ ({model.modelId})
+
+
+
+ {isSelected && (
+
+ )
+ })}
+
+
) : (
- // Online mode: show Claude model selector
+ // Fallback: show Claude model selector (no profile or empty profile)
{
@@ -1790,10 +1816,10 @@ export function NewChatForm({
4.5
+ {/* 4.5 */}
)}
@@ -1826,7 +1852,6 @@ export function NewChatForm({
{model.name}{" "}
- 4.5
{
+ if (selectedModelSupportsThinking) {
+ setThinkingEnabled(!thinkingEnabled)
+ }
+ }}
+ disabled={!selectedModelSupportsThinking}
+ className={cn(
+ "flex items-center gap-1.5 px-2 py-1 text-sm transition-colors rounded-md outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70",
+ !selectedModelSupportsThinking
+ ? "opacity-40 cursor-not-allowed text-muted-foreground"
+ : thinkingEnabled
+ ? "text-[#D4846C] hover:text-[#E8A08C] hover:bg-[#D4846C]/10"
+ : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+ )}
+ >
+ Thinking
+ )}
+
+
+ {/* Mode toggle (Agent/Plan) - simple toggle button */}
+
+ Plan
+ )}
+
diff --git a/src/renderer/features/agents/ui/agents-content.tsx b/src/renderer/features/agents/ui/agents-content.tsx
index 1c7a8d7e1..31861b15b 100644
--- a/src/renderer/features/agents/ui/agents-content.tsx
+++ b/src/renderer/features/agents/ui/agents-content.tsx
@@ -32,6 +32,7 @@ import {
betaKanbanEnabledAtom,
betaAutomationsEnabledAtom,
chatSourceModeAtom,
+ isRemoteModeAtom,
} from "../../../lib/atoms"
import { NewChatForm } from "../main/new-chat-form"
import { KanbanView } from "../../kanban"
@@ -166,20 +167,33 @@ export function AgentsContent() {
}
}, [activeSubChatName])
+ // Check if running in remote mode (web browser)
+ const isRemoteMode = useAtomValue(isRemoteModeAtom)
+
// Fetch teams for header
const { data: teams } = api.teams.getUserTeams.useQuery(undefined, {
enabled: !!selectedTeamId,
+ // Poll every 5 seconds in remote mode to sync with desktop changes
+ refetchInterval: isRemoteMode ? 5000 : false,
})
const selectedTeam = teams?.find((t: any) => t.id === selectedTeamId) as any
// Fetch agent chats for keyboard navigation and mobile view
const { data: agentChats } = api.agents.getAgentChats.useQuery(
{ teamId: selectedTeamId! },
- { enabled: !!selectedTeamId },
+ {
+ enabled: !!selectedTeamId,
+ // Poll every 5 seconds in remote mode to sync with desktop changes
+ refetchInterval: isRemoteMode ? 5000 : false,
+ },
)
// Fetch all projects for git info (like sidebar does)
- const { data: projects } = trpc.projects.list.useQuery()
+ const { data: projects } = trpc.projects.list.useQuery(
+ undefined, // no input
+ // Poll every 5 seconds in remote mode to sync with desktop changes
+ isRemoteMode ? { refetchInterval: 5000 } : undefined,
+ )
// Create map for quick project lookup by id
const projectsMap = useMemo(() => {
diff --git a/src/renderer/features/agents/ui/profile-selector.tsx b/src/renderer/features/agents/ui/profile-selector.tsx
new file mode 100644
index 000000000..be6784b2f
--- /dev/null
+++ b/src/renderer/features/agents/ui/profile-selector.tsx
@@ -0,0 +1,189 @@
+import { useAtom, useAtomValue, useSetAtom } from "jotai"
+import { ChevronDown, Settings } from "lucide-react"
+import { useCallback } from "react"
+
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "../../../components/ui/dropdown-menu"
+import { CheckIcon } from "../../../components/ui/icons"
+import {
+ agentsSettingsDialogActiveTabAtom,
+ agentsSettingsDialogOpenAtom,
+ lastUsedProfileIdAtom,
+ modelProfilesAtom,
+ type ModelProfile,
+} from "../../../lib/atoms"
+import { trpc } from "../../../lib/trpc"
+import { cn } from "../../../lib/utils"
+import { isRemoteMode } from "../../../lib/remote-transport"
+
+interface ProfileSelectorProps {
+ chatId: string
+ currentProfileId: string | null
+ disabled?: boolean
+ className?: string
+}
+
+/**
+ * Dropdown selector for choosing a model profile per-chat.
+ * Updates the chat's modelProfileId in the database and syncs lastUsedProfileIdAtom.
+ */
+export function ProfileSelector({
+ chatId,
+ currentProfileId,
+ disabled = false,
+ className,
+}: ProfileSelectorProps) {
+ const profiles = useAtomValue(modelProfilesAtom)
+ const [lastUsedProfileId, setLastUsedProfileId] = useAtom(lastUsedProfileIdAtom)
+ const setSettingsOpen = useSetAtom(agentsSettingsDialogOpenAtom)
+ const setSettingsTab = useSetAtom(agentsSettingsDialogActiveTabAtom)
+
+ const utils = trpc.useUtils()
+ const updateProfileMutation = trpc.chats.updateModelProfile.useMutation({
+ onSuccess: () => {
+ utils.chats.get.invalidate({ id: chatId })
+ },
+ })
+
+ // Filter out offline profiles from display (they're auto-selected when offline)
+ const displayProfiles = profiles.filter((p) => !p.isOffline)
+
+ // Get effective profile ID (chat's profile or fallback to lastUsed)
+ const effectiveProfileId = currentProfileId ?? lastUsedProfileId
+
+ // Find current profile
+ const currentProfile = profiles.find((p) => p.id === effectiveProfileId)
+
+ const handleProfileChange = useCallback(
+ (profileId: string) => {
+ // Update the chat's profile in database
+ updateProfileMutation.mutate({ id: chatId, modelProfileId: profileId })
+
+ // Update lastUsedProfileId so new chats inherit this
+ setLastUsedProfileId(profileId)
+ },
+ [chatId, updateProfileMutation, setLastUsedProfileId],
+ )
+
+ const handleOpenSettings = useCallback(() => {
+ // In web mode, settings dialog is not available
+ if (isRemoteMode()) {
+ console.log("[ProfileSelector] Settings not available in web mode")
+ return
+ }
+ setSettingsTab("models")
+ setSettingsOpen(true)
+ }, [setSettingsTab, setSettingsOpen])
+
+ // For web app or when no custom profiles: show "Default" option
+ // This ensures the selector is always visible in remote/web mode
+ const showDefaultOption = displayProfiles.length === 0 || isRemoteMode()
+
+ // In web mode, hide the "Manage Profiles" option since settings dialog is desktop-only
+ const showManageOption = !isRemoteMode()
+
+ return (
+
+
+
+
+ {currentProfile?.name || "Default"}
+
+
+
+
+ {/* Show "Default" option for web app or when no custom profiles */}
+ {showDefaultOption && (
+ {
+ // Clear the profile to use default
+ updateProfileMutation.mutate({ id: chatId, modelProfileId: null })
+ setLastUsedProfileId("")
+ }}
+ className="gap-2 justify-between"
+ >
+ Default
+ {!effectiveProfileId &&
+ )}
+ {displayProfiles.map((profile) => {
+ const isSelected = profile.id === effectiveProfileId
+ return (
+ handleProfileChange(profile.id)}
+ className="gap-2 justify-between"
+ >
+ {profile.name}
+ {isSelected &&
+ )
+ })}
+ {showDefaultOption && displayProfiles.length > 0 &&
+ Manage Profiles...
+
+ )}
+
+
+ )
+}
+
+/**
+ * Hook to get the effective profile for a chat.
+ * Returns the profile from chat.modelProfileId or falls back to lastUsedProfileId.
+ */
+export function useEffectiveProfile(
+ chatModelProfileId: string | null | undefined,
+): ModelProfile | null {
+ const profiles = useAtomValue(modelProfilesAtom)
+ const lastUsedProfileId = useAtomValue(lastUsedProfileIdAtom)
+
+ const effectiveProfileId = chatModelProfileId ?? lastUsedProfileId
+
+ if (!effectiveProfileId) {
+ // Return first non-offline profile as default
+ return profiles.find((p) => !p.isOffline) ?? null
+ }
+
+ return profiles.find((p) => p.id === effectiveProfileId) ?? null
+}
+
+/**
+ * Hook to get the effective model for a chat within a profile.
+ * Returns the model from chat.selectedModelId or falls back to first model in profile.
+ */
+export function useEffectiveModel(
+ profile: ModelProfile | null,
+ chatSelectedModelId: string | null | undefined,
+) {
+ if (!profile || !profile.models || profile.models.length === 0) {
+ return null
+ }
+
+ // Try to find the selected model
+ if (chatSelectedModelId) {
+ const selectedModel = profile.models.find((m) => m.id === chatSelectedModelId)
+ if (selectedModel) {
+ return selectedModel
+ }
+ }
+
+ // Fallback to first model
+ return profile.models[0] ?? null
+}
diff --git a/src/renderer/features/layout/agents-layout.tsx b/src/renderer/features/layout/agents-layout.tsx
index 7d651cf16..cdd21fa33 100644
--- a/src/renderer/features/layout/agents-layout.tsx
+++ b/src/renderer/features/layout/agents-layout.tsx
@@ -18,6 +18,7 @@ import { trpc } from "../../lib/trpc"
import { useAgentsHotkeys } from "../agents/lib/agents-hotkeys-manager"
import { toggleSearchAtom } from "../agents/search"
import { ClaudeLoginModal } from "../../components/dialogs/claude-login-modal"
+import { RemoteAccessDialog } from "../../components/dialogs/remote-access-dialog"
import { TooltipProvider } from "../../components/ui/tooltip"
import { ResizableSidebar } from "../../components/ui/resizable-sidebar"
import { AgentsSidebar } from "../sidebar/agents-sidebar"
@@ -241,6 +242,7 @@ export function AgentsLayout() {
{/* Global queue processor - handles message queues for all sub-chats */}
+
{/* Windows Title Bar (only shown on Windows with frameless window) */}
diff --git a/src/renderer/features/onboarding/api-key-onboarding-page.tsx b/src/renderer/features/onboarding/api-key-onboarding-page.tsx
index 8bb0f18ac..e3315b840 100644
--- a/src/renderer/features/onboarding/api-key-onboarding-page.tsx
+++ b/src/renderer/features/onboarding/api-key-onboarding-page.tsx
@@ -12,8 +12,11 @@ import {
apiKeyOnboardingCompletedAtom,
billingMethodAtom,
customClaudeConfigAtom,
+ modelProfilesAtom,
+ activeProfileIdAtom,
type CustomClaudeConfig,
} from "../../lib/atoms"
+import { trpc } from "../../lib/trpc"
import { cn } from "../../lib/utils"
// Check if the key looks like a valid Anthropic API key
@@ -24,6 +27,8 @@ const isValidApiKey = (key: string) => {
export function ApiKeyOnboardingPage() {
const [storedConfig, setStoredConfig] = useAtom(customClaudeConfigAtom)
+ const [profiles, setProfiles] = useAtom(modelProfilesAtom)
+ const setActiveProfileId = useSetAtom(activeProfileIdAtom)
const billingMethod = useAtomValue(billingMethodAtom)
const setBillingMethod = useSetAtom(billingMethodAtom)
const setApiKeyOnboardingCompleted = useSetAtom(apiKeyOnboardingCompletedAtom)
@@ -34,11 +39,20 @@ export function ApiKeyOnboardingPage() {
const defaultModel = "claude-sonnet-4-20250514"
const defaultBaseUrl = "https://api.anthropic.com"
+ // Query for existing CLI config (to pre-fill form with detected proxy)
+ const { data: cliConfig } = trpc.claudeCode.hasExistingCliConfig.useQuery()
+
const [apiKey, setApiKey] = useState(storedConfig.token)
const [model, setModel] = useState(storedConfig.model || "")
const [token, setToken] = useState(storedConfig.token)
const [baseUrl, setBaseUrl] = useState(storedConfig.baseUrl || "")
+ // Optional model configuration fields
+ const [defaultOpusModel, setDefaultOpusModel] = useState(storedConfig.defaultOpusModel || "")
+ const [defaultSonnetModel, setDefaultSonnetModel] = useState(storedConfig.defaultSonnetModel || "")
+ const [defaultHaikuModel, setDefaultHaikuModel] = useState(storedConfig.defaultHaikuModel || "")
+ const [subagentModel, setSubagentModel] = useState(storedConfig.subagentModel || "")
const [isSubmitting, setIsSubmitting] = useState(false)
+ const [hasAppliedCliConfig, setHasAppliedCliConfig] = useState(false)
// Sync from stored config on mount
useEffect(() => {
@@ -48,8 +62,32 @@ export function ApiKeyOnboardingPage() {
}
if (storedConfig.model) setModel(storedConfig.model)
if (storedConfig.baseUrl) setBaseUrl(storedConfig.baseUrl)
+ if (storedConfig.defaultOpusModel) setDefaultOpusModel(storedConfig.defaultOpusModel)
+ if (storedConfig.defaultSonnetModel) setDefaultSonnetModel(storedConfig.defaultSonnetModel)
+ if (storedConfig.defaultHaikuModel) setDefaultHaikuModel(storedConfig.defaultHaikuModel)
+ if (storedConfig.subagentModel) setSubagentModel(storedConfig.subagentModel)
}, [])
+ // Pre-fill form with detected CLI config (proxy settings) if available
+ useEffect(() => {
+ // Only proceed if we have config and haven't applied it yet
+ if (cliConfig && !hasAppliedCliConfig && isCustomModel) {
+ setHasAppliedCliConfig(true)
+
+ // Pre-fill with detected values if the current state is empty
+ if (cliConfig.apiKey && token === "") {
+ setToken(cliConfig.apiKey)
+ setApiKey(cliConfig.apiKey)
+ }
+ if (cliConfig.baseUrl && baseUrl === "") setBaseUrl(cliConfig.baseUrl)
+ if (cliConfig.model && model === "") setModel(cliConfig.model)
+ if (cliConfig.defaultOpusModel && defaultOpusModel === "") setDefaultOpusModel(cliConfig.defaultOpusModel)
+ if (cliConfig.defaultSonnetModel && defaultSonnetModel === "") setDefaultSonnetModel(cliConfig.defaultSonnetModel)
+ if (cliConfig.defaultHaikuModel && defaultHaikuModel === "") setDefaultHaikuModel(cliConfig.defaultHaikuModel)
+ if (cliConfig.subagentModel && subagentModel === "") setSubagentModel(cliConfig.subagentModel)
+ }
+ }, [cliConfig, hasAppliedCliConfig, isCustomModel, token, baseUrl, model, defaultOpusModel, defaultSonnetModel, defaultHaikuModel, subagentModel])
+
const handleBack = () => {
setBillingMethod(null)
}
@@ -71,13 +109,14 @@ export function ApiKeyOnboardingPage() {
setIsSubmitting(false)
}
- // Submit for custom model mode (all three fields)
- const submitCustomModel = () => {
+ // Submit for custom model mode (all fields)
+ const submitCustomModel = async () => {
const trimmedModel = model.trim()
const trimmedToken = token.trim()
const trimmedBaseUrl = baseUrl.trim()
- if (!trimmedModel || !trimmedToken || !trimmedBaseUrl) return
+ // Only model and baseUrl are required - token is optional for proxy configs
+ if (!trimmedModel || !trimmedBaseUrl) return
setIsSubmitting(true)
@@ -85,8 +124,62 @@ export function ApiKeyOnboardingPage() {
model: trimmedModel,
token: trimmedToken,
baseUrl: trimmedBaseUrl,
+ defaultOpusModel: defaultOpusModel.trim() || undefined,
+ defaultSonnetModel: defaultSonnetModel.trim() || undefined,
+ defaultHaikuModel: defaultHaikuModel.trim() || undefined,
+ subagentModel: subagentModel.trim() || undefined,
}
+
+ // Build ModelMapping array from config (unique, non-empty model IDs)
+ const modelMappings: Array<{ id: string; displayName: string; modelId: string; supportsThinking: boolean }> = []
+
+ const addModel = (id: string, displayName: string, modelId: string) => {
+ if (modelId) {
+ modelMappings.push({ id, displayName, modelId, supportsThinking: false })
+ }
+ }
+
+ // Add default model
+ addModel("default", "Default", trimmedModel)
+
+ // Add optional models
+ if (defaultOpusModel.trim()) addModel("opus", "Opus", defaultOpusModel.trim())
+ if (defaultSonnetModel.trim()) addModel("sonnet", "Sonnet", defaultSonnetModel.trim())
+ if (defaultHaikuModel.trim()) addModel("haiku", "Haiku", defaultHaikuModel.trim())
+ if (subagentModel.trim()) addModel("subagent", "Subagent", subagentModel.trim())
+
+ // Save to legacy config atom
setStoredConfig(config)
+
+ // Create profile data for database and localStorage
+ const profileData = {
+ name: "Default",
+ config,
+ models: modelMappings,
+ isOffline: false,
+ }
+
+ // Save to database (works in both desktop and remote mode)
+ try {
+ await trpc.modelProfiles.create.mutate(profileData)
+ console.log("[ApiKeyOnboarding] Created Default profile in database")
+ } catch (error) {
+ console.error("[ApiKeyOnboarding] Failed to save profile to database:", error)
+ }
+
+ // Also create a profile in modelProfilesAtom so it shows in settings immediately
+ const newProfileId = crypto.randomUUID()
+ const newProfile = {
+ id: newProfileId,
+ ...profileData,
+ }
+
+ // Add new profile (keep existing profiles like offline profile)
+ setProfiles([...profiles, newProfile])
+
+ // Set as active profile
+ setActiveProfileId(newProfileId)
+
setApiKeyOnboardingCompleted(true)
setIsSubmitting(false)
@@ -108,8 +201,9 @@ export function ApiKeyOnboardingPage() {
}
}
+ // Token is optional if using a proxy (baseUrl) - proxy may handle auth
const canSubmitCustomModel = Boolean(
- model.trim() && token.trim() && baseUrl.trim()
+ model.trim() && baseUrl.trim() // Only model and baseUrl are required
)
// Simple API key input mode
@@ -188,22 +282,22 @@ export function ApiKeyOnboardingPage() {
// Custom model mode with all fields
return (
-
+
{/* Draggable title bar area */}
{/* Back button - fixed in top left corner below traffic lights */}
-
+
{/* Header with dual icons */}
@@ -226,23 +320,21 @@ export function ApiKeyOnboardingPage() {
{/* Form Fields */}
- {/* Model Name */}
+ {/* Base URL */}
-
Model name
+
Base URL *
setModel(e.target.value)}
- placeholder="claude-sonnet-4-20250514"
+ value={baseUrl}
+ onChange={(e) => setBaseUrl(e.target.value)}
+ placeholder="https://api.anthropic.com"
className="w-full"
/>
-
- Model identifier for API requests
-
+
API endpoint URL
{/* API Token */}
- API token
+ API Token (Optional for proxies)
- {/* Base URL */}
+ {/* Default Model */}
-
Base URL
+
Default Model *
setBaseUrl(e.target.value)}
- placeholder="https://api.anthropic.com"
+ value={model}
+ onChange={(e) => setModel(e.target.value)}
+ placeholder="claude-sonnet-4-5-thinking"
className="w-full"
/>
-
API endpoint URL
+
+ Model identifier for API requests
+
+
+
+ {/* Optional Model Configuration Section */}
+
+
+ Additional Model Configuration (Optional)
+
+
+
+ {/* 2-column grid for optional model fields */}
+
diff --git a/src/renderer/features/onboarding/cli-config-detected-page.tsx b/src/renderer/features/onboarding/cli-config-detected-page.tsx
new file mode 100644
index 000000000..0d7fed58c
--- /dev/null
+++ b/src/renderer/features/onboarding/cli-config-detected-page.tsx
@@ -0,0 +1,207 @@
+"use client";
+
+import { useSetAtom } from "jotai";
+import { useState } from "react";
+import { ChevronLeft, Check, ExternalLink } from "lucide-react";
+
+import { ClaudeCodeIcon, KeyFilledIcon } from "../../components/ui/icons";
+import {
+ billingMethodAtom,
+ cliConfigDetectedShownAtom,
+} from "../../lib/atoms";
+import { trpc } from "../../lib/trpc";
+import { cn } from "../../lib/utils";
+
+export function CliConfigDetectedPage() {
+ const setBillingMethod = useSetAtom(billingMethodAtom);
+ const setCliConfigDetectedShown = useSetAtom(cliConfigDetectedShownAtom);
+ const [isContinuing, setIsContinuing] = useState(false);
+ const [showOAuthFlow, setShowOAuthFlow] = useState(false);
+
+ // Check for existing CLI config
+ const { data: cliConfig, isLoading } =
+ trpc.claudeCode.hasExistingCliConfig.useQuery();
+
+ const handleUseExistingConfig = () => {
+ setIsContinuing(true);
+ // Mark CLI config detected as shown so we don't show this page again
+ setCliConfigDetectedShown(true);
+ // Navigate to custom-model form (api-key-onboarding-page in "custom-model" mode)
+ // This allows users to review/edit the pre-filled values before continuing
+ setBillingMethod("custom-model");
+ // Note: apiKeyOnboardingCompleted is NOT set here - user needs to submit the form
+ };
+
+ const handleUseOAuth = () => {
+ setShowOAuthFlow(true);
+ setBillingMethod("claude-subscription");
+ };
+
+ const handleBack = () => {
+ setBillingMethod(null);
+ };
+
+ if (isLoading) {
+ return (
+
+
+ Checking configuration...
+
+
+ );
+ }
+
+ // If user chose OAuth, show loading while redirecting
+ if (showOAuthFlow) {
+ return (
+
+
+
+
+
+ Connecting to Claude...
+
+
+ Opening browser for authentication
+
+
+
+
+ );
+ }
+
+ const hasApiKey = cliConfig?.hasApiKey;
+ const hasBaseUrl = cliConfig?.baseUrl !== null;
+
+ return (
+
+ {/* Draggable title bar area */}
+
+
+ {/* Back button - fixed in top left corner below traffic lights */}
+
+
+
+
+ {/* Header */}
+
+
+
+
+ Claude Configuration Detected
+
+
+ We found an existing Claude CLI configuration in your shell
+ environment.
+
+
+
+
+ {/* Configuration Status */}
+
+
+
+
+ API Key: {" "}
+ {hasApiKey ? (
+
+ Configured
+
+ ) : (
+ Not set
+ )}
+
+
+
+
+
+
+ API Proxy: {" "}
+ {hasBaseUrl ? (
+
+ {cliConfig?.baseUrl}
+
+ ) : (
+
+ Default (api.anthropic.com)
+
+ )}
+
+
+
+
+
+ Your ANTHROPIC_API_KEY
+ {hasBaseUrl && " and "}
+ {hasBaseUrl && (
+ ANTHROPIC_BASE_URL
+ )}{" "}
+ environment variables were detected.
+
+
+
+
+ {/* Primary Action - Use Existing Config */}
+ {/* Enable if we have API key OR proxy URL (proxies may handle auth) */}
+
+ {isContinuing ? (
+ <>Setting up...
+ ) : (
+ <>
+
+
+ {/* Secondary Action - OAuth */}
+
+
+
+
+ Use your Claude Pro/Max subscription with OAuth authentication
+
+
+
+
+ );
+}
diff --git a/src/renderer/features/onboarding/index.ts b/src/renderer/features/onboarding/index.ts
index 9cb588fd2..9bfac611e 100644
--- a/src/renderer/features/onboarding/index.ts
+++ b/src/renderer/features/onboarding/index.ts
@@ -1,4 +1,5 @@
-export { AnthropicOnboardingPage } from "./anthropic-onboarding-page"
-export { ApiKeyOnboardingPage } from "./api-key-onboarding-page"
-export { BillingMethodPage } from "./billing-method-page"
-export { SelectRepoPage } from "./select-repo-page"
+export { AnthropicOnboardingPage } from "./anthropic-onboarding-page";
+export { ApiKeyOnboardingPage } from "./api-key-onboarding-page";
+export { BillingMethodPage } from "./billing-method-page";
+export { CliConfigDetectedPage } from "./cli-config-detected-page";
+export { SelectRepoPage } from "./select-repo-page";
diff --git a/src/renderer/features/sidebar/agents-sidebar.tsx b/src/renderer/features/sidebar/agents-sidebar.tsx
index fd0f7245a..b1d0328d5 100644
--- a/src/renderer/features/sidebar/agents-sidebar.tsx
+++ b/src/renderer/features/sidebar/agents-sidebar.tsx
@@ -20,6 +20,7 @@ import {
clearAgentChatSelectionAtom,
selectedAgentChatsCountAtom,
isDesktopAtom,
+ isRemoteModeAtom,
isFullscreenAtom,
showOfflineModeFeaturesAtom,
chatSourceModeAtom,
@@ -28,6 +29,7 @@ import {
showWorkspaceIconAtom,
betaKanbanEnabledAtom,
betaAutomationsEnabledAtom,
+ remoteAccessDialogOpenAtom,
} from "../../lib/atoms"
import {
useRemoteChats,
@@ -39,7 +41,7 @@ import {
useRenameRemoteChat,
} from "../../lib/hooks/use-remote-chats"
import { ArchivePopover } from "../agents/ui/archive-popover"
-import { ChevronDown, MoreHorizontal, Columns3, ArrowUpRight } from "lucide-react"
+import { ChevronDown, MoreHorizontal, Columns3, ArrowUpRight, Globe } from "lucide-react"
import { useQuery } from "@tanstack/react-query"
import { remoteTrpc } from "../../lib/remote-trpc"
// import { useRouter } from "next/navigation" // Desktop doesn't use next/navigation
@@ -136,6 +138,8 @@ import { Checkbox } from "../../components/ui/checkbox"
import { useHaptic } from "./hooks/use-haptic"
import { TypewriterText } from "../../components/ui/typewriter-text"
import { exportChat, copyChat, type ExportFormat } from "../agents/lib/export-chat"
+import { modelProfilesAtom, lastUsedProfileIdAtom } from "../../lib/atoms"
+import { CheckIcon } from "../../components/ui/icons"
// Feedback URL: uses env variable for hosted version, falls back to public Discord for open source
const FEEDBACK_URL =
@@ -176,6 +180,66 @@ const GitHubAvatar = React.memo(function GitHubAvatar({
)
})
+// Model Profile submenu for context menu
+const ModelProfileSubmenu = React.memo(function ModelProfileSubmenu({
+ chatId,
+ currentProfileId,
+}: {
+ chatId: string
+ currentProfileId: string | null | undefined
+}) {
+ const profiles = useAtomValue(modelProfilesAtom)
+ const [lastUsedProfileId, setLastUsedProfileId] = useAtom(lastUsedProfileIdAtom)
+ const utils = trpc.useUtils()
+
+ // Use chat's profile or fall back to lastUsedProfileId
+ const effectiveProfileId = currentProfileId ?? lastUsedProfileId
+
+ const updateProfileMutation = trpc.chats.updateModelProfile.useMutation({
+ onSuccess: () => {
+ utils.chats.get.invalidate({ id: chatId })
+ utils.chats.list.invalidate()
+ },
+ })
+
+ // Filter out offline profiles
+ const displayProfiles = profiles.filter((p) => !p.isOffline)
+
+ const handleProfileChange = useCallback(
+ (profileId: string) => {
+ updateProfileMutation.mutate({ id: chatId, modelProfileId: profileId })
+ setLastUsedProfileId(profileId)
+ },
+ [chatId, updateProfileMutation, setLastUsedProfileId],
+ )
+
+ if (displayProfiles.length === 0) {
+ return (
+
+ No profiles configured
+
+ )
+ }
+
+ return (
+ <>
+ {displayProfiles.map((profile) => {
+ const isSelected = profile.id === effectiveProfileId
+ return (
+
handleProfileChange(profile.id)}
+ className="justify-between"
+ >
+ {profile.name}
+ {isSelected &&
+ )
+ })}
+
+ )
+})
+
// Component to render chat icon with loading status
const ChatIcon = React.memo(function ChatIcon({
isSelected,
@@ -763,6 +827,15 @@ const AgentChatItem = React.memo(function AgentChatItem({
Open in new window
)}
+ {/* Model Profile submenu - only show for local chats */}
+ {!isRemote && (
+
+ Model Profile
+
+
+
+ )}
onArchive(chatId)} className="justify-between">
Archive workspace
@@ -1066,6 +1139,26 @@ const ArchiveButton = memo(forwardRef
+
+ setRemoteAccessDialogOpen(true)}
+ className="flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97] outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70"
+ >
+
+
+ Remote Access
+
+ )
+})
+
const KanbanButton = memo(function KanbanButton() {
const kanbanEnabled = useAtomValue(betaKanbanEnabledAtom)
const setSelectedChatId = useSetAtom(selectedAgentChatIdAtom)
@@ -1671,6 +1764,7 @@ export function AgentsSidebar({
// Global desktop/fullscreen state from atoms (initialized in AgentsLayout)
const isDesktop = useAtomValue(isDesktopAtom)
+ const isRemoteMode = useAtomValue(isRemoteModeAtom)
const isFullscreen = useAtomValue(isFullscreenAtom)
// Multi-select state
@@ -1779,7 +1873,18 @@ export function AgentsSidebar({
}, [])
// Fetch all local chats (no project filter)
- const { data: localChats } = trpc.chats.list.useQuery({})
+ const { data: localChats, isLoading: isChatsLoading, error: chatsError } = trpc.chats.list.useQuery(
+ {}, // empty input
+ // Poll every 5 seconds in remote mode to sync with desktop changes
+ isRemoteMode ? { refetchInterval: 5000 } : {},
+ )
+
+ // Debug: Log chat data in remote mode
+ useEffect(() => {
+ if (isRemoteMode) {
+ console.log('[AgentsSidebar] Remote mode - localChats:', localChats, 'isLoading:', isChatsLoading, 'error:', chatsError)
+ }
+ }, [isRemoteMode, localChats, isChatsLoading, chatsError])
// Fetch user's teams (same as web) - always enabled to allow merged list
const { data: teams, isLoading: isTeamsLoading, isError: isTeamsError } = useUserTeams(true)
@@ -1921,7 +2026,11 @@ export function AgentsSidebar({
)
// Fetch all projects for git info
- const { data: projects } = trpc.projects.list.useQuery()
+ const { data: projects } = trpc.projects.list.useQuery(
+ undefined, // no input
+ // Poll every 5 seconds in remote mode to sync with desktop changes
+ isRemoteMode ? { refetchInterval: 5000 } : undefined,
+ )
// Auto-import hook for "Open Locally" functionality
const { getMatchingProjects, autoImport, isImporting } = useAutoImport()
@@ -1933,7 +2042,11 @@ export function AgentsSidebar({
}, [projects])
// Fetch all archived chats (to get count)
- const { data: archivedChats } = trpc.chats.listArchived.useQuery({})
+ const { data: archivedChats } = trpc.chats.listArchived.useQuery(
+ undefined, // no input
+ // Poll every 5 seconds in remote mode to sync with desktop changes
+ isRemoteMode ? { refetchInterval: 5000 } : {},
+ )
const archivedChatsCount = archivedChats?.length ?? 0
// Get utils outside of callbacks - hooks must be called at top level
@@ -3398,22 +3511,24 @@ export function AgentsSidebar({
>
- {/* Settings Button */}
-
-
- {
- setSettingsActiveTab("preferences")
- setSettingsDialogOpen(true)
- }}
- className="flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97] outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70"
- >
-
-
- Settings{settingsHotkey && <> {settingsHotkey} }
-
+ {/* Settings Button - hide in remote mode */}
+ {!isRemoteMode && (
+
+
+ {
+ setSettingsActiveTab("preferences")
+ setSettingsDialogOpen(true)
+ }}
+ className="flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97] outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70"
+ >
+
+
+ Settings{settingsHotkey && <> {settingsHotkey} }
+
+ )}
{/* Help Button - isolated component to prevent sidebar re-renders */}
@@ -3421,6 +3536,9 @@ export function AgentsSidebar({
{/* Kanban View Button - isolated component */}
+ {/* Remote Access Button - hide in remote mode */}
+ {!isRemoteMode &&
}
+
{/* Archive Button - isolated component to prevent sidebar re-renders */}
diff --git a/src/renderer/lib/atoms/index.ts b/src/renderer/lib/atoms/index.ts
index 178d5645d..887f81fae 100644
--- a/src/renderer/lib/atoms/index.ts
+++ b/src/renderer/lib/atoms/index.ts
@@ -204,18 +204,50 @@ export const agentsSettingsDialogOpenAtom = atom(
}
)
+// Model profile types (defined here to avoid circular dependencies)
+export type ModelMapping = {
+ id: string // Internal reference ID (e.g., "opus", "sonnet", "haiku")
+ displayName: string // User-facing name (e.g., "Opus", "Sonnet 3.5")
+ modelId: string // Actual model ID sent to API (e.g., "glm-4.7", "claude-3-opus-20240229")
+ supportsThinking?: boolean // Whether this model supports extended thinking
+}
+
export type CustomClaudeConfig = {
model: string
- token: string
+ token?: string
baseUrl: string
+ // Additional model configuration (optional)
+ defaultOpusModel?: string // ANTHROPIC_DEFAULT_OPUS_MODEL
+ defaultSonnetModel?: string // ANTHROPIC_DEFAULT_SONNET_MODEL
+ defaultHaikuModel?: string // ANTHROPIC_DEFAULT_HAIKU_MODEL
+ subagentModel?: string // CLAUDE_CODE_SUBAGENT_MODEL
}
-// Model profile system - support multiple configs
export type ModelProfile = {
id: string
name: string
config: CustomClaudeConfig
- isOffline?: boolean // Mark as offline/Ollama profile
+ models: ModelMapping[]
+ isOffline?: boolean
+}
+
+export const OFFLINE_PROFILE: ModelProfile = {
+ id: 'offline-ollama',
+ name: 'Offline (Ollama)',
+ isOffline: true,
+ config: {
+ model: 'qwen2.5-coder:7b',
+ token: 'ollama',
+ baseUrl: 'http://localhost:11434',
+ },
+ models: [
+ {
+ id: 'default',
+ displayName: 'Default',
+ modelId: 'qwen2.5-coder:7b',
+ supportsThinking: false,
+ },
+ ],
}
// Selected Ollama model for offline mode
@@ -236,20 +268,16 @@ export const getOfflineProfile = (modelName?: string | null): ModelProfile => ({
token: 'ollama',
baseUrl: 'http://localhost:11434',
},
+ models: [
+ {
+ id: 'default',
+ displayName: 'Default',
+ modelId: modelName || 'qwen2.5-coder:7b',
+ supportsThinking: false,
+ },
+ ],
})
-// Predefined offline profile for Ollama (legacy, uses default model)
-export const OFFLINE_PROFILE: ModelProfile = {
- id: 'offline-ollama',
- name: 'Offline (Ollama)',
- isOffline: true,
- config: {
- model: 'qwen2.5-coder:7b',
- token: 'ollama',
- baseUrl: 'http://localhost:11434',
- },
-}
-
// Legacy single config (deprecated, kept for backwards compatibility)
export const customClaudeConfigAtom = atomWithStorage
(
"agents:claude-custom-config",
@@ -262,6 +290,8 @@ export const customClaudeConfigAtom = atomWithStorage(
{ getOnInit: true },
)
+// Migration block removed as per user request (legacy config no longer auto-migrates to "Migrated Config")
+
// OpenAI API key for voice transcription (for users without paid subscription)
export const openaiApiKeyAtom = atomWithStorage(
"agents:openai-api-key",
@@ -270,17 +300,84 @@ export const openaiApiKeyAtom = atomWithStorage(
{ getOnInit: true },
)
-// New: Model profiles storage
-export const modelProfilesAtom = atomWithStorage(
+// New: Model profiles storage (localStorage-based for desktop)
+// Renamed to localStorageModelProfilesAtom - use modelProfilesAtom from model-profiles-sync.ts instead
+export const localStorageModelProfilesAtom = atomWithStorage(
"agents:model-profiles",
[OFFLINE_PROFILE], // Start with offline profile
undefined,
{ getOnInit: true },
)
+// Re-export the database-synced model profiles atom
+// This atom automatically handles:
+// - Desktop mode: Uses localStorage, syncs to database
+// - Web mode: Loads from database via tRPC
+export { modelProfilesAtom, useSyncModelProfiles, activeConfigAtom, normalizeCustomClaudeConfig } from "./model-profiles-sync"
+
+// Migration: add models array to existing profiles that don't have it
+if (typeof window !== "undefined") {
+ const profilesKey = "agents:model-profiles"
+ const stored = localStorage.getItem(profilesKey)
+ if (stored) {
+ try {
+ const profiles = JSON.parse(stored) as ModelProfile[]
+ let needsMigration = false
+ const migrated = profiles.map(profile => {
+ if (!profile.models || profile.models.length === 0) {
+ needsMigration = true
+ return {
+ ...profile,
+ models: [
+ {
+ id: 'default',
+ displayName: 'Default',
+ modelId: profile.config.model || 'claude-3-opus',
+ supportsThinking: true,
+ },
+ ],
+ }
+ }
+ return profile
+ })
+ if (needsMigration) {
+ localStorage.setItem(profilesKey, JSON.stringify(migrated))
+ console.log("[atoms] Migrated profiles to include models array")
+ }
+ } catch (e) {
+ console.error("[atoms] Failed to migrate profiles:", e)
+ }
+ }
+}
+
// Active profile ID (null = use Claude Code default)
-export const activeProfileIdAtom = atomWithStorage(
- "agents:active-profile-id",
+// Renamed from activeProfileIdAtom - now serves as default for new chats
+export const lastUsedProfileIdAtom = atomWithStorage(
+ "agents:last-used-profile-id",
+ null,
+ undefined,
+ { getOnInit: true },
+)
+
+// Migration: rename old key to new key
+if (typeof window !== "undefined") {
+ const oldKey = "agents:active-profile-id"
+ const newKey = "agents:last-used-profile-id"
+ const oldValue = localStorage.getItem(oldKey)
+ if (oldValue !== null && localStorage.getItem(newKey) === null) {
+ localStorage.setItem(newKey, oldValue)
+ localStorage.removeItem(oldKey)
+ console.log("[atoms] Migrated activeProfileId to lastUsedProfileId")
+ }
+}
+
+// Backwards compatibility alias
+export const activeProfileIdAtom = lastUsedProfileIdAtom
+
+// Selected model ID within the current profile (e.g., "main", "opus", "sonnet", "haiku", "subagent")
+// Used by ipc-chat-transport to determine which model from the profile to use
+export const selectedProfileModelIdAtom = atomWithStorage(
+ "agents:selected-profile-model-id",
null,
undefined,
{ getOnInit: true },
@@ -313,55 +410,8 @@ export const showOfflineModeFeaturesAtom = atomWithStorage(
// Network status (updated from main process)
export const networkOnlineAtom = atom(true)
-export function normalizeCustomClaudeConfig(
- config: CustomClaudeConfig,
-): CustomClaudeConfig | undefined {
- const model = config.model.trim()
- const token = config.token.trim()
- const baseUrl = config.baseUrl.trim()
-
- if (!model || !token || !baseUrl) return undefined
-
- return { model, token, baseUrl }
-}
-
-// Get active config (considering network status and auto-fallback)
-export const activeConfigAtom = atom((get) => {
- const activeProfileId = get(activeProfileIdAtom)
- const profiles = get(modelProfilesAtom)
- const legacyConfig = get(customClaudeConfigAtom)
- const networkOnline = get(networkOnlineAtom)
- const autoOffline = get(autoOfflineModeAtom)
-
- // If auto-offline enabled and no internet, use offline profile
- if (!networkOnline && autoOffline) {
- const offlineProfile = profiles.find(p => p.isOffline)
- if (offlineProfile) {
- return offlineProfile.config
- }
- }
-
- // If specific profile is selected, use it
- if (activeProfileId) {
- const profile = profiles.find(p => p.id === activeProfileId)
- if (profile) {
- return profile.config
- }
- }
-
- // Fallback to legacy config if set
- const normalized = normalizeCustomClaudeConfig(legacyConfig)
- if (normalized) {
- return normalized
- }
-
- // No custom config
- return undefined
-})
-
// Preferences - Extended Thinking
// When enabled, Claude will use extended thinking for deeper reasoning (128K tokens)
-// Note: Extended thinking disables response streaming
export const extendedThinkingEnabledAtom = atomWithStorage(
"preferences:extended-thinking-enabled",
false,
@@ -712,6 +762,17 @@ export const updateInfoAtom = atom(null)
// Whether app is running in Electron desktop environment
export const isDesktopAtom = atom(false)
+// Whether app is running in remote mode (web browser, not desktop)
+// In remote mode, certain desktop-only features should be hidden
+export const isRemoteModeAtom = atom(() => {
+ // Check if running in remote mode (no desktopApi or has remote auth token)
+ if (typeof window === "undefined") return false
+ // If we have a stored remote auth PIN, we're in remote mode
+ if (sessionStorage.getItem("remote_ws_auth")) return true
+ // If desktopApi is missing, we're in remote mode
+ return !window.desktopApi
+})
+
// Fullscreen state - null means not initialized yet
// null = not yet loaded, false = not fullscreen, true = fullscreen
export const isFullscreenAtom = atom(null)
@@ -753,6 +814,15 @@ export const apiKeyOnboardingCompletedAtom = atomWithStorage(
{ getOnInit: true },
)
+// Whether user has seen the CLI config detected page
+// This tracks if the user was shown the "Configuration Detected" screen
+export const cliConfigDetectedShownAtom = atomWithStorage(
+ "onboarding:cli-config-detected-shown",
+ false,
+ undefined,
+ { getOnInit: true },
+)
+
// ============================================
// SESSION INFO ATOMS (MCP, Plugins, Tools)
// ============================================
@@ -846,3 +916,9 @@ export const mcpApprovalDialogOpenAtom = atom(false)
// Pending MCP approvals to show in the dialog
export const pendingMcpApprovalsAtom = atom([])
+
+// ============================================
+// REMOTE ACCESS ATOMS
+// ============================================
+
+export * from "./remote-access"
diff --git a/src/renderer/lib/atoms/model-profiles-sync.ts b/src/renderer/lib/atoms/model-profiles-sync.ts
new file mode 100644
index 000000000..c4ab1dc67
--- /dev/null
+++ b/src/renderer/lib/atoms/model-profiles-sync.ts
@@ -0,0 +1,223 @@
+import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"
+import { useEffect, useState } from "react"
+import { trpc } from "../../lib/trpc"
+import {
+ localStorageModelProfilesAtom,
+ activeProfileIdAtom,
+ customClaudeConfigAtom,
+ networkOnlineAtom,
+ autoOfflineModeAtom,
+} from "./index"
+import { OFFLINE_PROFILE, type ModelProfile, type CustomClaudeConfig } from "./index"
+import { isRemoteMode } from "../remote-transport"
+
+// Helper to normalize custom config (moved from index.ts to break circular dependency)
+export function normalizeCustomClaudeConfig(
+ config: CustomClaudeConfig,
+): CustomClaudeConfig | undefined {
+ const model = config.model.trim()
+ const token = config.token.trim()
+ const baseUrl = config.baseUrl.trim()
+
+ if (!model || !token || !baseUrl) return undefined
+
+ return { model, token, baseUrl }
+}
+
+/**
+ * Database-synced model profiles atom
+ * - Desktop mode: Uses localStorage (fast, offline-capable) and syncs to database
+ * - Web mode: Loads from database via tRPC
+ */
+
+// Internal atom to track if database sync has been done (desktop only)
+const hasSyncedToDatabaseAtom = atom(false)
+
+// Atom to hold database-loaded profiles (for web mode or after sync)
+const databaseProfilesAtom = atom(null)
+
+// Helper to convert database profile to ModelProfile
+function fromDBProfile(dbProfile: any): ModelProfile {
+ return {
+ id: dbProfile.id,
+ name: dbProfile.name,
+ config: typeof dbProfile.config === 'string' ? JSON.parse(dbProfile.config) : dbProfile.config,
+ models: typeof dbProfile.models === 'string' ? JSON.parse(dbProfile.models) : dbProfile.models,
+ isOffline: dbProfile.isOffline || false,
+ }
+}
+
+// Helper to convert ModelProfile to database format
+// Note: The tRPC router expects objects, Drizzle will handle serialization to JSON for TEXT columns
+function toDBProfile(profile: ModelProfile): Omit {
+ return {
+ name: profile.name,
+ config: profile.config,
+ models: profile.models || [],
+ isOffline: profile.isOffline || false,
+ }
+}
+
+/**
+ * Hook to sync model profiles between localStorage and database
+ * - Desktop: Syncs localStorage profiles to database on app start
+ * - Web: Loads profiles from database and stores in atom
+ */
+export function useSyncModelProfiles() {
+ const localStorageProfiles = useAtomValue(localStorageModelProfilesAtom)
+ const setDatabaseProfiles = useSetAtom(databaseProfilesAtom)
+ const [hasSynced, setHasSynced] = useAtom(hasSyncedToDatabaseAtom)
+ const isRemote = isRemoteMode()
+
+ const { data: dbProfiles, isLoading: isLoadingDB } = trpc.modelProfiles.list.useQuery(
+ undefined,
+ {
+ enabled: isRemote || !hasSynced, // Always load if remote, or if desktop hasn't synced yet
+ staleTime: Infinity, // Don't refetch automatically
+ }
+ )
+
+ const createMutation = trpc.modelProfiles.create.useMutation()
+ const updateMutation = trpc.modelProfiles.update.useMutation()
+ const deleteMutation = trpc.modelProfiles.delete.useMutation()
+
+ // Sync desktop localStorage profiles to database (one-time)
+ useEffect(() => {
+ if (!isRemote && !hasSynced && !isLoadingDB && dbProfiles) {
+ const syncToDatabase = async () => {
+ try {
+ // Get profiles from localStorage, excluding offline profile
+ const localProfiles = localStorageProfiles.filter(p => !p.isOffline)
+
+ // For each local profile, check if it exists in database
+ for (const localProfile of localProfiles) {
+ const existsInDB = dbProfiles.find((db: any) => db.name === localProfile.name)
+
+ if (!existsInDB) {
+ // Create new profile in database
+ const dbProfile = toDBProfile(localProfile)
+ await createMutation.mutateAsync(dbProfile)
+ console.log("[ModelProfilesSync] Created profile in DB:", localProfile.name)
+ }
+ // Note: We don't sync back from database to localStorage to avoid conflicts
+ // In the future, we can add proper conflict resolution with timestamps
+ }
+
+ setHasSynced(true)
+ console.log("[ModelProfilesSync] Sync completed")
+ } catch (error) {
+ console.error("[ModelProfilesSync] Failed to sync:", error)
+ }
+ }
+
+ syncToDatabase()
+ }
+ }, [isRemote, hasSynced, isLoadingDB, dbProfiles, localStorageProfiles, createMutation])
+
+ // In web mode, use database profiles directly
+ useEffect(() => {
+ if (isRemote && !isLoadingDB && dbProfiles) {
+ // Add offline profile to database profiles
+ const profiles = [
+ OFFLINE_PROFILE,
+ ...dbProfiles.map(fromDBProfile),
+ ]
+ setDatabaseProfiles(profiles)
+ }
+ }, [isRemote, isLoadingDB, dbProfiles, setDatabaseProfiles])
+
+ return {
+ isLoading: isLoadingDB,
+ dbProfiles,
+ createProfile: createMutation.mutateAsync,
+ updateProfile: updateMutation.mutateAsync,
+ deleteProfile: deleteMutation.mutateAsync,
+ }
+}
+
+/**
+ * Combined model profiles atom
+ * - Desktop: Returns localStorage profiles, writes to localStorage
+ * - Web: Returns database profiles, writes are not supported (web mode is read-only)
+ */
+export const modelProfilesAtom = atom(
+ (get) => {
+ const isRemote = isRemoteMode()
+ const localStorageProfiles = get(localStorageModelProfilesAtom)
+ const databaseProfiles = get(databaseProfilesAtom)
+
+ if (isRemote) {
+ // In web mode, use database profiles (with offline profile added)
+ return databaseProfiles || [OFFLINE_PROFILE]
+ }
+
+ // In desktop mode, use localStorage profiles
+ return localStorageProfiles
+ },
+ (get, set, newValue) => {
+ const isRemote = isRemoteMode()
+
+ if (isRemote) {
+ // In web mode, writes are not supported (read-only)
+ // In the future, we could add tRPC mutations to update database
+ console.warn("[modelProfilesAtom] Cannot modify profiles in web mode")
+ return
+ }
+
+ // In desktop mode, write to localStorage
+ set(localStorageModelProfilesAtom, newValue)
+ }
+)
+
+/**
+ * Get active config (considering network status and auto-fallback)
+ * - If auto-offline enabled and no internet, use offline profile
+ * - If specific profile is selected, use it
+ * - Fallback to legacy config if set
+ * - Returns undefined if no custom config found
+ */
+export const activeConfigAtom = atom((get) => {
+ const activeProfileId = get(activeProfileIdAtom)
+ const profiles = get(modelProfilesAtom)
+ const legacyConfig = get(customClaudeConfigAtom)
+ const networkOnline = get(networkOnlineAtom)
+ const autoOffline = get(autoOfflineModeAtom)
+
+ console.log('[activeConfigAtom] Debug:', {
+ activeProfileId,
+ profilesCount: profiles.length,
+ legacyConfigModel: legacyConfig.model,
+ legacyConfigBaseUrl: legacyConfig.baseUrl,
+ })
+
+ // If auto-offline enabled and no internet, use offline profile
+ if (!networkOnline && autoOffline) {
+ const offlineProfile = profiles.find(p => p.isOffline)
+ if (offlineProfile) {
+ console.log('[activeConfigAtom] Using offline profile')
+ return offlineProfile.config
+ }
+ }
+
+ // If specific profile is selected, use it
+ if (activeProfileId) {
+ const profile = profiles.find(p => p.id === activeProfileId)
+ if (profile) {
+ console.log('[activeConfigAtom] Using profile:', profile.name, 'with model:', profile.config.model)
+ return profile.config
+ } else {
+ console.log('[activeConfigAtom] Profile ID set but not found in profiles')
+ }
+ }
+
+ // Fallback to legacy config if set
+ const normalized = normalizeCustomClaudeConfig(legacyConfig)
+ if (normalized) {
+ console.log('[activeConfigAtom] Using normalized legacy config')
+ return normalized
+ }
+
+ console.log('[activeConfigAtom] No custom config found, returning undefined')
+ // No custom config
+ return undefined
+})
diff --git a/src/renderer/lib/atoms/remote-access.ts b/src/renderer/lib/atoms/remote-access.ts
new file mode 100644
index 000000000..e685fa147
--- /dev/null
+++ b/src/renderer/lib/atoms/remote-access.ts
@@ -0,0 +1,18 @@
+// src/renderer/lib/atoms/remote-access.ts
+
+import { atom } from "jotai"
+
+export type RemoteAccessStatus =
+ | { status: "disabled" }
+ | { status: "downloading"; progress: number }
+ | { status: "starting" }
+ | { status: "active"; url: string; pin: string; clients: number }
+ | { status: "error"; message: string }
+
+export const remoteAccessStatusAtom = atom({ status: "disabled" })
+
+export const remoteAccessDialogOpenAtom = atom(false)
+
+// Connection state for remote mode (web client)
+export type ConnectionState = "connecting" | "connected" | "disconnected"
+export const remoteConnectionStateAtom = atom("connected")
diff --git a/src/renderer/lib/hooks/use-remote-connection.ts b/src/renderer/lib/hooks/use-remote-connection.ts
new file mode 100644
index 000000000..f2fb710d3
--- /dev/null
+++ b/src/renderer/lib/hooks/use-remote-connection.ts
@@ -0,0 +1,29 @@
+// src/renderer/lib/hooks/use-remote-connection.ts
+
+import { useEffect } from "react"
+import { useSetAtom } from "jotai"
+import { remoteConnectionStateAtom } from "../atoms/remote-access"
+import { onConnectionStateChange, isRemoteMode } from "../remote-transport"
+
+/**
+ * Hook to track remote connection state
+ * Only active in remote mode (web browser)
+ */
+export function useRemoteConnection(): void {
+ const setConnectionState = useSetAtom(remoteConnectionStateAtom)
+
+ useEffect(() => {
+ // Only track connection in remote mode
+ if (!isRemoteMode()) return
+
+ // Subscribe to connection state changes
+ const unsubscribe = onConnectionStateChange((state) => {
+ console.log("[useRemoteConnection] State changed:", state)
+ setConnectionState(state)
+ })
+
+ return () => {
+ unsubscribe()
+ }
+ }, [setConnectionState])
+}
diff --git a/src/renderer/lib/remote-transport/get-link.ts b/src/renderer/lib/remote-transport/get-link.ts
new file mode 100644
index 000000000..2b07a9629
--- /dev/null
+++ b/src/renderer/lib/remote-transport/get-link.ts
@@ -0,0 +1,62 @@
+// src/renderer/lib/remote-transport/get-link.ts
+// Conditional tRPC link - returns wsLink for browser, ipcLink for Electron
+
+import { wsLink } from "./ws-link"
+import superjson from "superjson"
+
+// Cache the link to avoid re-creation
+let cachedLink: any = null
+let ipcLinkModule: any = null
+
+// Dynamically import ipcLink only in Electron
+// This avoids importing the module in browser where it would throw
+async function loadIpcLink() {
+ if (ipcLinkModule) return ipcLinkModule
+
+ // Check if we're in Electron (electronTRPC global exists)
+ // @ts-ignore
+ if (typeof window !== "undefined" && window.electronTRPC) {
+ try {
+ // Only import if electronTRPC exists
+ const { ipcLink } = await import("trpc-electron/renderer")
+ ipcLinkModule = ipcLink
+ } catch (error) {
+ // If import fails (e.g., in web bundle), fall back to null
+ console.warn("[get-link] Failed to load ipcLink, using wsLink fallback:", error)
+ }
+ }
+
+ return ipcLinkModule
+}
+
+/**
+ * Get the appropriate tRPC link based on environment
+ * - Browser (remote mode): WebSocket link
+ * - Electron: IPC link
+ *
+ * Note: Uses dynamic import to avoid loading trpc-electron in browser
+ */
+export async function getLink() {
+ if (cachedLink) return cachedLink
+
+ // Check if remote mode (no desktopApi means browser/remote)
+ // @ts-ignore
+ const isRemote = typeof window !== "undefined" && !window.desktopApi
+
+ if (isRemote) {
+ // Browser mode - always use wsLink
+ cachedLink = wsLink()
+ } else {
+ // Electron mode - try to dynamically import ipcLink
+ const ipc = await loadIpcLink()
+ if (ipc) {
+ cachedLink = ipc({ transformer: superjson })
+ } else {
+ // Fallback to wsLink if ipcLink failed to load
+ console.warn("[get-link] ipcLink not available, using wsLink fallback")
+ cachedLink = wsLink()
+ }
+ }
+
+ return cachedLink
+}
diff --git a/src/renderer/lib/remote-transport/index.ts b/src/renderer/lib/remote-transport/index.ts
new file mode 100644
index 000000000..4fdcf8f0d
--- /dev/null
+++ b/src/renderer/lib/remote-transport/index.ts
@@ -0,0 +1,378 @@
+// src/renderer/lib/remote-transport/index.ts
+// WebSocket Transport Adapter for Remote Access
+// Replaces IPC calls with WebSocket when running in browser
+
+import superjson from "superjson"
+
+type WSMessageType = "auth" | "trpc" | "api" | "subscribe" | "unsubscribe"
+
+interface WSRequest {
+ id: string
+ type: WSMessageType
+ method?: string
+ params?: unknown
+ pin?: string
+ channel?: string
+}
+
+interface WSResponse {
+ id: string | null
+ type: "auth_required" | "auth_success" | "auth_failed" | "result" | "error" | "subscription"
+ data?: unknown
+ error?: string
+ channel?: string
+}
+
+type PendingRequest = {
+ resolve: (data: unknown) => void
+ reject: (error: Error) => void
+}
+
+let ws: WebSocket | null = null
+let isAuthenticated = false
+let connectionPromise: Promise | null = null
+const pendingRequests = new Map()
+const subscriptionHandlers = new Map void>>()
+let requestId = 0
+
+// Connection state listeners
+type ConnectionState = "connecting" | "connected" | "disconnected"
+const connectionStateListeners = new Set<(state: ConnectionState) => void>()
+let currentConnectionState: ConnectionState = "connecting"
+
+/**
+ * Notify listeners of connection state change
+ */
+function notifyConnectionStateChange(state: ConnectionState) {
+ currentConnectionState = state
+ for (const listener of connectionStateListeners) {
+ try {
+ listener(state)
+ } catch (err) {
+ console.error("[RemoteTransport] Error in connection state listener:", err)
+ }
+ }
+}
+
+/**
+ * Subscribe to connection state changes
+ * Returns unsubscribe function
+ */
+export function onConnectionStateChange(callback: (state: ConnectionState) => void): () => void {
+ connectionStateListeners.add(callback)
+ // Immediately call with current state
+ try {
+ callback(currentConnectionState)
+ } catch (err) {
+ console.error("[RemoteTransport] Error in initial connection state callback:", err)
+ }
+ return () => {
+ connectionStateListeners.delete(callback)
+ }
+}
+
+/**
+ * Get current connection state
+ */
+export function getConnectionState(): ConnectionState {
+ return currentConnectionState
+}
+
+/**
+ * Check if we're running in remote browser mode
+ * Robust check that works even after desktopApi is mocked
+ */
+export function isRemoteMode(): boolean {
+ if (typeof window === "undefined") return false;
+
+ // If we have a stored PIN, we are definitely in remote mode
+ if (sessionStorage.getItem("remote_ws_auth")) return true;
+
+ // Otherwise check if desktopApi is missing (initial load)
+ return !window.desktopApi;
+}
+
+/**
+ * Get stored PIN from sessionStorage
+ */
+function getStoredPin(): string | null {
+ return sessionStorage.getItem("remote_ws_auth")
+}
+
+/**
+ * Connect to WebSocket server and authenticate
+ */
+export function connect(): Promise {
+ if (connectionPromise) return connectionPromise
+ if (ws?.readyState === WebSocket.OPEN && isAuthenticated) {
+ return Promise.resolve()
+ }
+
+ // Notify we're connecting
+ notifyConnectionStateChange("connecting")
+
+ connectionPromise = new Promise((resolve, reject) => {
+ const pin = getStoredPin()
+ if (!pin) {
+ // Redirect to login page
+ notifyConnectionStateChange("disconnected")
+ window.location.href = "/login"
+ reject(new Error("No PIN stored"))
+ return
+ }
+
+ const protocol = location.protocol === "https:" ? "wss:" : "ws:"
+ ws = new WebSocket(`${protocol}//${location.host}`)
+
+ ws.onopen = () => {
+ // Authenticate with stored PIN
+ const authRequest: WSRequest = {
+ id: `auth-${Date.now()}`,
+ type: "auth",
+ pin,
+ }
+ ws!.send(JSON.stringify(authRequest))
+ }
+
+ ws.onmessage = (event) => {
+ const message: WSResponse = JSON.parse(event.data)
+
+ // Handle auth response
+ if (message.type === "auth_success") {
+ console.log("[RemoteTransport] Authentication successful")
+ isAuthenticated = true
+ notifyConnectionStateChange("connected")
+ connectionPromise = null
+ resolve()
+ return
+ }
+
+ if (message.type === "auth_failed") {
+ console.error("[RemoteTransport] Authentication failed")
+ isAuthenticated = false
+ notifyConnectionStateChange("disconnected")
+ sessionStorage.removeItem("remote_ws_auth")
+ window.location.href = "/login"
+ reject(new Error("Authentication failed"))
+ return
+ }
+
+ if (message.type === "auth_required") {
+ console.log("[RemoteTransport] Auth required, waiting for success/fail...")
+ // Don't redirect immediately, give it a chance to process the auth we just sent
+ return
+ }
+
+ // Handle subscription messages
+ if (message.type === "subscription" && message.channel) {
+ const handlers = subscriptionHandlers.get(message.channel)
+ if (handlers) {
+ handlers.forEach((handler) => handler(message.data))
+ }
+ return
+ }
+
+ // Handle request responses
+ if (message.id) {
+ const pending = pendingRequests.get(message.id)
+ if (pending) {
+ pendingRequests.delete(message.id)
+ if (message.type === "error") {
+ pending.reject(new Error(message.error || "Unknown error"))
+ } else {
+ // Deserialize superjson data
+ const data = message.data
+ if (data && typeof data === "object" && "json" in data) {
+ pending.resolve(superjson.deserialize(data as any))
+ } else {
+ pending.resolve(data)
+ }
+ }
+ }
+ }
+ }
+
+ ws.onerror = (error) => {
+ console.error("[RemoteTransport] WebSocket error:", error)
+ notifyConnectionStateChange("disconnected")
+ connectionPromise = null
+ reject(new Error("WebSocket connection failed"))
+ }
+
+ ws.onclose = () => {
+ console.log("[RemoteTransport] WebSocket closed")
+ ws = null
+ isAuthenticated = false
+ connectionPromise = null
+ notifyConnectionStateChange("disconnected")
+ }
+ })
+
+ return connectionPromise
+}
+
+/**
+ * Send a request and wait for response
+ */
+async function sendRequest(type: WSMessageType, method?: string, params?: unknown): Promise {
+ await connect()
+
+ return new Promise((resolve, reject) => {
+ const id = `req-${++requestId}-${Date.now()}`
+ const request: WSRequest = { id, type, method, params }
+
+ pendingRequests.set(id, { resolve, reject })
+
+ // Timeout after 30 seconds
+ setTimeout(() => {
+ if (pendingRequests.has(id)) {
+ pendingRequests.delete(id)
+ reject(new Error("Request timeout"))
+ }
+ }, 30000)
+
+ ws!.send(JSON.stringify(request))
+ })
+}
+
+/**
+ * Call a tRPC procedure
+ */
+export async function trpcCall(method: string, params?: unknown): Promise {
+ return sendRequest("trpc", method, params)
+}
+
+/**
+ * Subscribe to a channel
+ */
+export async function subscribe(channel: string, handler: (data: unknown) => void): Promise<() => void> {
+ await connect()
+
+ // Register handler
+ if (!subscriptionHandlers.has(channel)) {
+ subscriptionHandlers.set(channel, new Set())
+ // Send subscribe request
+ await sendRequest("subscribe", undefined, undefined)
+ const id = `sub-${++requestId}`
+ const request: WSRequest = { id, type: "subscribe", channel }
+ ws!.send(JSON.stringify(request))
+ }
+ subscriptionHandlers.get(channel)!.add(handler)
+
+ // Return unsubscribe function
+ return () => {
+ const handlers = subscriptionHandlers.get(channel)
+ if (handlers) {
+ handlers.delete(handler)
+ if (handlers.size === 0) {
+ subscriptionHandlers.delete(channel)
+ // Send unsubscribe request
+ if (ws?.readyState === WebSocket.OPEN) {
+ const id = `unsub-${++requestId}`
+ const request: WSRequest = { id, type: "unsubscribe", channel }
+ ws.send(JSON.stringify(request))
+ }
+ }
+ }
+ }
+}
+
+/**
+ * Disconnect from server
+ */
+export function disconnect(): void {
+ if (ws) {
+ ws.close()
+ ws = null
+ }
+ isAuthenticated = false
+ pendingRequests.clear()
+ subscriptionHandlers.clear()
+}
+
+/**
+ * Create a remote desktopApi that bridges to WebSocket
+ */
+export function createRemoteDesktopApi(): Partial {
+ return {
+ platform: "darwin" as NodeJS.Platform, // Will be overridden by server
+ arch: "arm64",
+
+ // These will use tRPC calls over WebSocket
+ getVersion: async () => {
+ const result = await trpcCall("external.getAppVersion")
+ return result as string
+ },
+
+ isPackaged: async () => true,
+
+ // Window controls - no-op in browser
+ windowMinimize: async () => {},
+ windowMaximize: async () => {},
+ windowClose: async () => { window.close() },
+ windowIsMaximized: async () => false,
+ windowToggleFullscreen: async () => {},
+ windowIsFullscreen: async () => false,
+ setTrafficLightVisibility: async () => {},
+
+ // Clipboard
+ clipboardWrite: async (text: string) => {
+ await navigator.clipboard.writeText(text)
+ },
+ clipboardRead: async () => {
+ return navigator.clipboard.readText()
+ },
+
+ // Open external links
+ openExternal: async (url: string) => {
+ window.open(url, "_blank")
+ },
+
+ // Remote access - return disabled status (we're already remote)
+ getRemoteAccessStatus: async () => ({ status: "disabled" as const }),
+ enableRemoteAccess: async () => ({ status: "disabled" as const }),
+ disableRemoteAccess: async () => ({ status: "disabled" as const }),
+ onRemoteAccessStatusChange: () => () => {},
+
+ // Notifications
+ showNotification: async (options: { title: string; body: string }) => {
+ if ("Notification" in window && Notification.permission === "granted") {
+ new Notification(options.title, { body: options.body })
+ }
+ },
+
+ // Auth - no-op in remote mode
+ getUser: async () => null,
+ isAuthenticated: async () => false,
+ logout: async () => {},
+ startAuthFlow: async () => {},
+ submitAuthCode: async () => {},
+ getAuthToken: async () => null,
+
+ // Events - return no-op unsubscribe functions
+ onFullscreenChange: () => () => {},
+ onFocusChange: () => () => {},
+ onUpdateChecking: () => () => {},
+ onUpdateAvailable: () => () => {},
+ onUpdateNotAvailable: () => () => {},
+ onUpdateProgress: () => () => {},
+ onUpdateDownloaded: () => () => {},
+ onUpdateError: () => () => {},
+ onUpdateManualCheck: () => () => {},
+ onAuthSuccess: () => () => {},
+ onAuthError: () => () => {},
+ onShortcutNewAgent: () => () => {},
+ onFileChanged: () => () => {},
+ onGitStatusChanged: () => () => {},
+
+ // Git Watcher
+ subscribeToGitWatcher: async () => {},
+ unsubscribeFromGitWatcher: async () => {},
+
+ // Storage
+ getAppDataPath: async () => "/tmp/1code-remote",
+
+ // System
+ setAnalyticsOptOut: async () => {},
+ }
+}
diff --git a/src/renderer/lib/remote-transport/init.ts b/src/renderer/lib/remote-transport/init.ts
new file mode 100644
index 000000000..905bc0403
--- /dev/null
+++ b/src/renderer/lib/remote-transport/init.ts
@@ -0,0 +1,56 @@
+// src/renderer/lib/remote-transport/init.ts
+// Initialize remote transport when running in browser
+
+import { isRemoteMode, connect, createRemoteDesktopApi } from "./index"
+
+/**
+ * Initialize remote mode if running in browser without Electron
+ */
+export async function initRemoteTransport(): Promise {
+ if (!isRemoteMode()) {
+ console.log("[RemoteTransport] Running in Electron, skipping remote init")
+ return false
+ }
+
+ console.log("[RemoteTransport] Running in remote browser mode")
+
+ // Check if we have stored auth
+ const pin = sessionStorage.getItem("remote_ws_auth")
+ if (!pin) {
+ // Redirect to login if not on login page
+ if (!window.location.pathname.includes("/login") && window.location.pathname !== "/") {
+ window.location.href = "/login"
+ }
+ return false
+ }
+
+ try {
+ // Connect to WebSocket
+ await connect()
+
+ // Create and expose remote desktopApi
+ const remoteApi = createRemoteDesktopApi()
+ ;(window as any).desktopApi = remoteApi
+
+ // Also expose webUtils stub
+ ;(window as any).webUtils = {
+ getPathForFile: () => "",
+ }
+
+ console.log("[RemoteTransport] Remote transport initialized")
+ return true
+ } catch (error) {
+ console.error("[RemoteTransport] Failed to initialize:", error)
+ // Clear auth and redirect to login
+ sessionStorage.removeItem("remote_ws_auth")
+ window.location.href = "/login"
+ return false
+ }
+}
+
+/**
+ * Check if remote mode is active
+ */
+export function isRemoteModeActive(): boolean {
+ return isRemoteMode() && sessionStorage.getItem("remote_ws_auth") !== null
+}
diff --git a/src/renderer/lib/remote-transport/trpc-client.ts b/src/renderer/lib/remote-transport/trpc-client.ts
new file mode 100644
index 000000000..dfba497e1
--- /dev/null
+++ b/src/renderer/lib/remote-transport/trpc-client.ts
@@ -0,0 +1,39 @@
+// src/renderer/lib/remote-transport/trpc-client.ts
+// tRPC Client for Remote Access via WebSocket
+
+import { trpcCall } from "./index"
+
+type TRPCProxy = {
+ [key: string]: TRPCProxy & {
+ query: (input?: unknown) => Promise
+ mutate: (input?: unknown) => Promise
+ }
+}
+
+/**
+ * Create a proxy that intercepts tRPC calls and sends them via WebSocket
+ */
+function createTRPCProxy(path: string[] = []): TRPCProxy {
+ return new Proxy(() => {}, {
+ get(_, prop: string) {
+ if (prop === "query" || prop === "mutate") {
+ return async (input?: unknown) => {
+ const method = path.join(".")
+ return trpcCall(method, input)
+ }
+ }
+ return createTRPCProxy([...path, prop])
+ },
+ apply(_, __, args) {
+ // Handle direct calls like trpc.projects.list()
+ const method = path.join(".")
+ return trpcCall(method, args[0])
+ },
+ }) as TRPCProxy
+}
+
+/**
+ * Remote tRPC client
+ * Usage: remoteTrpc.projects.list.query() or remoteTrpc.chats.create.mutate({ ... })
+ */
+export const remoteTrpcClient = createTRPCProxy()
diff --git a/src/renderer/lib/remote-transport/ws-link.ts b/src/renderer/lib/remote-transport/ws-link.ts
new file mode 100644
index 000000000..ff53dce20
--- /dev/null
+++ b/src/renderer/lib/remote-transport/ws-link.ts
@@ -0,0 +1,281 @@
+// src/renderer/lib/remote-transport/ws-link.ts
+// WebSocket tRPC Link for Remote Access
+
+import { TRPCLink } from "@trpc/client"
+import { observable } from "@trpc/server/observable"
+import type { AppRouter } from "../../../main/lib/trpc/routers"
+import superjson from "superjson"
+
+type WSMessageType = "auth" | "trpc" | "api" | "subscribe" | "unsubscribe"
+
+interface WSRequest {
+ id: string
+ type: WSMessageType
+ method?: string
+ params?: unknown
+ pin?: string
+ channel?: string
+}
+
+interface WSResponse {
+ id: string | null
+ type: "auth_required" | "auth_success" | "auth_failed" | "result" | "error" | "subscription"
+ data?: unknown
+ error?: string
+ channel?: string
+}
+
+type PendingRequest = {
+ resolve: (data: unknown) => void
+ reject: (error: Error) => void
+}
+
+type SubscriptionHandler = {
+ onData: (data: unknown) => void
+ onError: (error: Error) => void
+ onComplete: () => void
+}
+
+let ws: WebSocket | null = null
+let isAuthenticated = false
+let connectionPromise: Promise | null = null
+const pendingRequests = new Map()
+const subscriptionHandlers = new Map()
+let requestId = 0
+
+/**
+ * Get stored PIN from sessionStorage
+ */
+function getStoredPin(): string | null {
+ return sessionStorage.getItem("remote_ws_auth")
+}
+
+/**
+ * Connect to WebSocket server and authenticate
+ */
+function connect(): Promise {
+ if (connectionPromise) return connectionPromise
+ if (ws?.readyState === WebSocket.OPEN && isAuthenticated) {
+ return Promise.resolve()
+ }
+
+ connectionPromise = new Promise((resolve, reject) => {
+ const pin = getStoredPin()
+ if (!pin) {
+ window.location.href = "/login"
+ reject(new Error("No PIN stored"))
+ return
+ }
+
+ const protocol = location.protocol === "https:" ? "wss:" : "ws:"
+ ws = new WebSocket(`${protocol}//${location.host}`)
+
+ ws.onopen = () => {
+ const authRequest: WSRequest = {
+ id: `auth-${Date.now()}`,
+ type: "auth",
+ pin,
+ }
+ ws!.send(JSON.stringify(authRequest))
+ }
+
+ ws.onmessage = (event) => {
+ const message: WSResponse = JSON.parse(event.data)
+
+ // Handle auth response
+ if (message.type === "auth_success") {
+ console.log("[ws-link] Authentication successful")
+ isAuthenticated = true
+ connectionPromise = null
+ resolve()
+ return
+ }
+
+ if (message.type === "auth_failed") {
+ console.error("[ws-link] Authentication failed")
+ isAuthenticated = false
+ sessionStorage.removeItem("remote_ws_auth")
+ window.location.href = "/login"
+ reject(new Error("Authentication failed"))
+ return
+ }
+
+ if (message.type === "auth_required") {
+ console.log("[ws-link] Auth required, waiting for success/fail...")
+ return
+ }
+
+ // Handle subscription messages
+ if (message.id) {
+ const subHandler = subscriptionHandlers.get(message.id)
+ if (subHandler) {
+ if (message.type === "subscription" && message.data !== undefined) {
+ console.log("[ws-link] Subscription data:", message.id, message.data)
+ subHandler.onData(message.data)
+ } else if (message.type === "error") {
+ console.error("[ws-link] Subscription error:", message.id, message.error)
+ subHandler.onError(new Error(message.error || "Subscription error"))
+ } else if (message.type === "result") {
+ // Check if this is the actual completion or just the initial subscription confirmation
+ const resultData = message.data as { completed?: boolean; subscribed?: boolean } | undefined
+ if (resultData?.completed) {
+ console.log("[ws-link] Subscription complete:", message.id)
+ subHandler.onComplete()
+ subscriptionHandlers.delete(message.id)
+ } else if (resultData?.subscribed) {
+ // Initial subscription confirmation - keep the handler active
+ console.log("[ws-link] Subscription confirmed:", message.id)
+ }
+ }
+ return
+ }
+
+ // Handle normal query/mutation responses
+ const pending = pendingRequests.get(message.id)
+ if (pending) {
+ pendingRequests.delete(message.id)
+ if (message.type === "error") {
+ pending.reject(new Error(message.error || "Unknown error"))
+ } else {
+ const data = message.data
+ if (data && typeof data === "object" && "json" in data) {
+ pending.resolve(superjson.deserialize(data as any))
+ } else {
+ pending.resolve(data)
+ }
+ }
+ }
+ }
+ }
+
+ ws.onerror = () => {
+ connectionPromise = null
+ reject(new Error("WebSocket connection failed"))
+ }
+
+ ws.onclose = () => {
+ ws = null
+ isAuthenticated = false
+ connectionPromise = null
+ // Clear all pending requests
+ for (const [id, pending] of pendingRequests) {
+ pending.reject(new Error("Connection closed"))
+ }
+ pendingRequests.clear()
+ // Clear all subscriptions
+ for (const handler of subscriptionHandlers.values()) {
+ handler.onComplete()
+ }
+ subscriptionHandlers.clear()
+ }
+ })
+
+ return connectionPromise
+}
+
+/**
+ * Send a tRPC request via WebSocket (for queries/mutations)
+ */
+async function sendTRPCRequest(method: string, params?: unknown): Promise {
+ await connect()
+
+ return new Promise((resolve, reject) => {
+ const id = `trpc-${++requestId}-${Date.now()}`
+ const request: WSRequest = { id, type: "trpc", method, params }
+
+ pendingRequests.set(id, { resolve, reject })
+
+ setTimeout(() => {
+ if (pendingRequests.has(id)) {
+ pendingRequests.delete(id)
+ reject(new Error("Request timeout"))
+ }
+ }, 30000)
+
+ ws!.send(JSON.stringify(request))
+ })
+}
+
+/**
+ * Create a WebSocket-based tRPC link
+ */
+export function wsLink(): TRPCLink {
+ return () => {
+ return ({ op }) => {
+ return observable((observer) => {
+ const { path, input, type } = op
+
+ // Convert path to method name (e.g., "projects.list")
+ const method = path
+
+ console.log("[ws-link] tRPC call:", { type, path: method })
+
+ // Handle subscriptions differently from queries/mutations
+ if (type === "subscription") {
+ console.log("[ws-link] Starting subscription:", method)
+
+ const id = `sub-${++requestId}-${Date.now()}`
+
+ // Set up subscription handler
+ const handler: SubscriptionHandler = {
+ onData: (data) => {
+ console.log("[ws-link] Subscription data received:", method, data)
+ observer.next({
+ result: {
+ type: "data",
+ data: data,
+ },
+ })
+ },
+ onError: (error) => {
+ console.error("[ws-link] Subscription error:", method, error)
+ observer.error(error)
+ },
+ onComplete: () => {
+ console.log("[ws-link] Subscription complete:", method)
+ observer.complete()
+ },
+ }
+
+ subscriptionHandlers.set(id, handler)
+
+ // Wait for connection, then send subscription request
+ connect().then(() => {
+ const request: WSRequest = { id, type: "trpc", method, params: input }
+ ws!.send(JSON.stringify(request))
+ console.log("[ws-link] Subscription request sent:", id, method)
+ }).catch((error) => {
+ console.error("[ws-link] Failed to connect for subscription:", error)
+ subscriptionHandlers.delete(id)
+ observer.error(error)
+ })
+
+ // Return cleanup function
+ return () => {
+ console.log("[ws-link] Unsubscribing:", method, id)
+ subscriptionHandlers.delete(id)
+ }
+ }
+
+ // Regular query/mutation
+ sendTRPCRequest(method, input)
+ .then((result) => {
+ observer.next({
+ result: {
+ type: "data",
+ data: result,
+ },
+ })
+ observer.complete()
+ })
+ .catch((error) => {
+ observer.error(error)
+ })
+
+ return () => {
+ // Cleanup for query/mutation (none needed)
+ }
+ })
+ }
+ }
+}
diff --git a/src/renderer/lib/tray-events.ts b/src/renderer/lib/tray-events.ts
new file mode 100644
index 000000000..03d32aedd
--- /dev/null
+++ b/src/renderer/lib/tray-events.ts
@@ -0,0 +1,37 @@
+import { useEffect } from "react"
+import { useSetAtom } from "jotai"
+import { desktopViewAtom } from "../features/agents/atoms"
+
+/**
+ * Hook to listen for tray events and handle them
+ * These events are dispatched from the main process via executeJavaScript
+ */
+export function useTrayEvents() {
+ const setDesktopView = useSetAtom(desktopViewAtom)
+
+ useEffect(() => {
+ // Handle workspace selection from tray
+ const handleWorkspaceOpen = (event: CustomEvent) => {
+ const { projectId } = event.detail
+ console.log("[Tray Events] Workspace opened:", projectId)
+
+ // The project is already set in localStorage by the tray handler
+ // Window will reload automatically
+ }
+
+ // Handle settings open from tray
+ const handleSettingsOpen = () => {
+ console.log("[Tray Events] Opening settings via atom")
+ // Set desktopView to 'settings' which opens the settings dialog
+ setDesktopView("settings")
+ }
+
+ window.addEventListener("tray:open-workspace", handleWorkspaceOpen as EventListener)
+ window.addEventListener("tray:open-settings", handleSettingsOpen)
+
+ return () => {
+ window.removeEventListener("tray:open-workspace", handleWorkspaceOpen as EventListener)
+ window.removeEventListener("tray:open-settings", handleSettingsOpen)
+ }
+ }, [setDesktopView])
+}
diff --git a/src/renderer/lib/trpc.ts b/src/renderer/lib/trpc.ts
index 684d64c03..36b79c224 100644
--- a/src/renderer/lib/trpc.ts
+++ b/src/renderer/lib/trpc.ts
@@ -1,17 +1,96 @@
import { createTRPCReact } from "@trpc/react-query"
import { createTRPCProxyClient } from "@trpc/client"
-import { ipcLink } from "trpc-electron/renderer"
import type { AppRouter } from "../../main/lib/trpc/routers"
import superjson from "superjson"
+import { wsLink } from "./remote-transport/ws-link"
+
+/**
+ * Check if we're in remote/browser mode (no electronTRPC global)
+ * Must be called at runtime, not at module load time
+ */
+function checkIsRemoteMode(): boolean {
+ // @ts-ignore
+ return typeof window !== "undefined" && !window.electronTRPC
+}
/**
* React hooks for tRPC
*/
export const trpc = createTRPCReact()
+// Vanilla client - initialized lazily
+let _trpcClient: ReturnType> | null = null
+let _clientPromise: Promise>> | null = null
+let _initStarted = false
+
+/**
+ * Initialize the vanilla client
+ */
+async function initVanillaClient(): Promise>> {
+ if (_trpcClient) return _trpcClient
+ if (_clientPromise) return _clientPromise
+
+ _clientPromise = (async () => {
+ const isRemote = checkIsRemoteMode()
+ console.log("[trpc] Initializing vanilla client, isRemote:", isRemote)
+
+ let link: any
+ if (isRemote) {
+ link = wsLink()
+ } else {
+ const { ipcLink } = await import("trpc-electron/renderer")
+ link = ipcLink({ transformer: superjson })
+ }
+
+ _trpcClient = createTRPCProxyClient({ links: [link] })
+ console.log("[trpc] Vanilla client initialized")
+ return _trpcClient
+ })()
+
+ return _clientPromise
+}
+
+// Start initialization immediately (will run after module loads)
+if (typeof window !== "undefined") {
+ // Use setTimeout to ensure this runs after preload has set up electronTRPC
+ setTimeout(() => {
+ if (!_initStarted) {
+ _initStarted = true
+ initVanillaClient().catch(console.error)
+ }
+ }, 0)
+}
+
+/**
+ * Get vanilla tRPC client (async to handle dynamic link loading)
+ */
+export async function getTrpcClient() {
+ if (_trpcClient) return _trpcClient
+ if (!_initStarted) {
+ _initStarted = true
+ return initVanillaClient()
+ }
+ return _clientPromise!
+}
+
/**
* Vanilla client for use outside React components (stores, utilities)
+ * Returns a proxy that delegates to the real client once initialized
*/
-export const trpcClient = createTRPCProxyClient({
- links: [ipcLink({ transformer: superjson })],
+export const trpcClient = new Proxy({} as ReturnType>, {
+ get(_target, prop) {
+ if (_trpcClient) {
+ return (_trpcClient as any)[prop]
+ }
+ // Return a proxy that waits for initialization
+ return new Proxy({} as any, {
+ get(_t, subProp) {
+ // This handles trpcClient.git.query(...) pattern
+ return async (...args: any[]) => {
+ const client = await getTrpcClient()
+ return (client as any)[prop][subProp](...args)
+ }
+ },
+ })
+ },
})