feat: add scratchpad chat model controls

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-08-03 10:28:43 +02:00 · 2026-03-22 10:20:17 +01:00
parent 1b41cbd1e0
commit fd0256d62f
12 changed files with 541 additions and 153 deletions
@@ -16,6 +16,7 @@ import { WelcomePane } from '@renderer/components/WelcomePane';
 import { getElectronApi } from '@renderer/lib/electronApi';
 import type { PatternDefinition } from '@shared/domain/pattern';
 import { isScratchpadProject } from '@shared/domain/project';
+import { applyScratchpadSessionConfig } from '@shared/domain/session';
 import type { WorkspaceState } from '@shared/domain/workspace';
 import { createId, nowIso } from '@shared/utils/ids';

@@ -89,13 +90,6 @@ export default function App() {
    () => workspace?.sessions.find((s) => s.id === workspace.selectedSessionId),
    [workspace?.selectedSessionId, workspace?.sessions],
  );
-  const patternForSession = useMemo(
-    () =>
-      selectedSession
-        ? workspace?.patterns.find((p) => p.id === selectedSession.patternId)
-        : undefined,
-    [selectedSession, workspace?.patterns],
-  );
  const projectForSession = useMemo(
    () =>
      selectedSession
@@ -103,6 +97,20 @@ export default function App() {
        : undefined,
    [selectedSession, workspace?.projects],
  );
+  const patternForSession = useMemo(() => {
+    if (!selectedSession) {
+      return undefined;
+    }
+
+    const basePattern = workspace?.patterns.find((pattern) => pattern.id === selectedSession.patternId);
+    if (!basePattern) {
+      return undefined;
+    }
+
+    return projectForSession && isScratchpadProject(projectForSession)
+      ? applyScratchpadSessionConfig(basePattern, selectedSession)
+      : basePattern;
+  }, [projectForSession, selectedSession, workspace?.patterns]);
  const activityForSession = useMemo(
    () => (selectedSession ? sessionActivities[selectedSession.id] : undefined),
    [selectedSession, sessionActivities],
@@ -135,12 +143,19 @@ export default function App() {
    );
  } else if (selectedSession && patternForSession && projectForSession) {
    content = (
-      <ChatPane
-        onSend={(c) => api.sendSessionMessage({ sessionId: selectedSession.id, content: c })}
-        pattern={patternForSession}
-        project={projectForSession}
-        session={selectedSession}
-      />
+        <ChatPane
+          onSend={(c) => api.sendSessionMessage({ sessionId: selectedSession.id, content: c })}
+          onUpdateScratchpadConfig={(config) =>
+            api.updateScratchpadSessionConfig({
+              sessionId: selectedSession.id,
+              model: config.model,
+              reasoningEffort: config.reasoningEffort,
+            })
+          }
+          pattern={patternForSession}
+          project={projectForSession}
+          session={selectedSession}
+        />
    );
    detailPanel = (
      <ActivityPanel
@@ -0,0 +1,152 @@
+import { useEffect, useRef, useState } from 'react';
+import { ChevronDown, Sparkles } from 'lucide-react';
+
+import {
+  findModel,
+  inferProvider,
+  modelCatalog,
+  providerMeta,
+  type ModelDefinition,
+} from '@shared/domain/models';
+import { reasoningEffortOptions, type ReasoningEffort } from '@shared/domain/pattern';
+
+import { ProviderIcon } from './ProviderIcons';
+
+function TierBadge({ tier }: { tier: ModelDefinition['tier'] }) {
+  const styles = {
+    premium: 'bg-amber-500/10 text-amber-400',
+    standard: 'bg-zinc-700/50 text-zinc-500',
+    fast: 'bg-emerald-500/10 text-emerald-400',
+  };
+
+  return (
+    <span className={`ml-auto rounded px-1.5 py-0.5 text-[9px] font-medium ${styles[tier]}`}>
+      {tier}
+    </span>
+  );
+}
+
+interface ModelSelectProps {
+  value: string;
+  onChange: (model: string) => void;
+  label?: string;
+  disabled?: boolean;
+}
+
+export function ModelSelect({
+  value,
+  onChange,
+  label = 'Model',
+  disabled = false,
+}: ModelSelectProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    function handleClick(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  const selected = findModel(value);
+  const provider = selected?.provider ?? inferProvider(value);
+
+  return (
+    <label className="block space-y-1.5">
+      <span className="text-[12px] font-medium text-zinc-400">{label}</span>
+      <div className="relative" ref={containerRef}>
+        <button
+          className="flex w-full items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-left text-[13px] text-zinc-100 outline-none transition hover:border-zinc-600 focus:border-indigo-500/50 disabled:cursor-not-allowed disabled:opacity-60"
+          disabled={disabled}
+          onClick={() => setOpen((current) => !current)}
+          type="button"
+        >
+          {provider && <ProviderIcon provider={provider} />}
+          <span className="flex-1 truncate">{selected?.name ?? (value || 'Select model')}</span>
+          <ChevronDown
+            className={`size-3.5 text-zinc-500 transition ${open ? 'rotate-180' : ''}`}
+          />
+        </button>
+
+        {open && !disabled && (
+          <div className="absolute z-30 mt-1 max-h-72 w-full overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
+            {providerMeta.map((providerGroup) => {
+              const models = modelCatalog.filter((model) => model.provider === providerGroup.id);
+
+              return (
+                <div key={providerGroup.id}>
+                  <div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
+                    <ProviderIcon provider={providerGroup.id} />
+                    <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+                      {providerGroup.label}
+                    </span>
+                  </div>
+                  {models.map((model) => (
+                    <button
+                      className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
+                        model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
+                      }`}
+                      key={model.id}
+                      onClick={() => {
+                        onChange(model.id);
+                        setOpen(false);
+                      }}
+                      type="button"
+                    >
+                      <span className="flex-1">{model.name}</span>
+                      <TierBadge tier={model.tier} />
+                    </button>
+                  ))}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </label>
+  );
+}
+
+interface ReasoningEffortSelectProps {
+  value: ReasoningEffort;
+  onChange: (value: ReasoningEffort) => void;
+  label?: string;
+  disabled?: boolean;
+}
+
+export function ReasoningEffortSelect({
+  value,
+  onChange,
+  label = 'Reasoning',
+  disabled = false,
+}: ReasoningEffortSelectProps) {
+  return (
+    <label className="block space-y-1.5">
+      <span className="text-[12px] font-medium text-zinc-400">{label}</span>
+      <div className="relative">
+        <select
+          className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 pr-9 text-[13px] text-zinc-100 outline-none transition focus:border-indigo-500/50 disabled:cursor-not-allowed disabled:opacity-60"
+          disabled={disabled}
+          onChange={(event) => onChange(event.target.value as ReasoningEffort)}
+          value={value}
+        >
+          {reasoningEffortOptions.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <Sparkles className="pointer-events-none absolute right-3 top-1/2 size-3.5 -translate-y-1/2 text-zinc-500" />
+      </div>
+    </label>
+  );
+}
@@ -3,8 +3,9 @@ import { AlertCircle, ArrowUp, Bot, Loader2, User } from 'lucide-react';

 import { MarkdownContent } from '@renderer/components/MarkdownContent';
 import { getAssistantMessagePhase } from '@renderer/lib/messagePhase';
+import { ModelSelect, ReasoningEffortSelect } from '@renderer/components/AgentConfigFields';

-import type { PatternDefinition } from '@shared/domain/pattern';
+import type { PatternDefinition, ReasoningEffort } from '@shared/domain/pattern';
 import { isScratchpadProject, type ProjectRecord } from '@shared/domain/project';
 import type { SessionRecord } from '@shared/domain/session';

@@ -23,30 +24,74 @@ interface ChatPaneProps {
  pattern: PatternDefinition;
  session: SessionRecord;
  onSend: (content: string) => Promise<void>;
+  onUpdateScratchpadConfig: (config: {
+    model: string;
+    reasoningEffort: ReasoningEffort;
+  }) => Promise<unknown>;
 }

-export function ChatPane({ project, pattern, session, onSend }: ChatPaneProps) {
+export function ChatPane({
+  project,
+  pattern,
+  session,
+  onSend,
+  onUpdateScratchpadConfig,
+}: ChatPaneProps) {
  const [input, setInput] = useState('');
+  const [configError, setConfigError] = useState<string>();
+  const [isUpdatingScratchpadConfig, setIsUpdatingScratchpadConfig] = useState(false);
  const transcriptRef = useRef<HTMLDivElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

-  const isBusy = session.status === 'running';
+  const isSessionBusy = session.status === 'running';
  const isScratchpad = isScratchpadProject(project);
+  const primaryAgent = pattern.agents[0];
+  const scratchpadReasoningEffort = primaryAgent?.reasoningEffort ?? 'high';
+  const isComposerDisabled = isSessionBusy || isUpdatingScratchpadConfig;

  useEffect(() => {
    transcriptRef.current?.scrollTo({
      top: transcriptRef.current.scrollHeight,
      behavior: 'smooth',
    });
-  }, [session.messages.length, isBusy]);
+  }, [session.messages.length, isSessionBusy]);
+
+  useEffect(() => {
+    setConfigError(undefined);
+    setIsUpdatingScratchpadConfig(false);
+  }, [session.id]);

  async function handleSubmit() {
    const text = input.trim();
-    if (!text || isBusy) return;
+    if (!text || isComposerDisabled) return;
    setInput('');
    await onSend(text);
  }

+  async function handleScratchpadConfigChange(config: {
+    model: string;
+    reasoningEffort: ReasoningEffort;
+  }) {
+    if (!isScratchpad || !primaryAgent || isComposerDisabled) {
+      return;
+    }
+
+    if (config.model === primaryAgent.model && config.reasoningEffort === scratchpadReasoningEffort) {
+      return;
+    }
+
+    setConfigError(undefined);
+    setIsUpdatingScratchpadConfig(true);
+
+    try {
+      await onUpdateScratchpadConfig(config);
+    } catch (error) {
+      setConfigError(error instanceof Error ? error.message : String(error));
+    } finally {
+      setIsUpdatingScratchpadConfig(false);
+    }
+  }
+
  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
@@ -65,7 +110,7 @@ export function ChatPane({ project, pattern, session, onSend }: ChatPaneProps) {
          </p>
        </div>
        <div className="flex items-center gap-2">
-          {session.status === 'running' && (
+          {isSessionBusy && (
            <span className="size-2 animate-pulse rounded-full bg-blue-400" />
          )}
          {session.status === 'error' && (
@@ -178,29 +223,77 @@ export function ChatPane({ project, pattern, session, onSend }: ChatPaneProps) {
          </div>
        )}

+        {configError && (
+          <div className="mb-3 flex items-start gap-2 rounded-lg bg-red-500/10 px-3 py-2 text-[13px] text-red-300">
+            <AlertCircle className="mt-0.5 size-4 shrink-0 text-red-400" />
+            <span>{configError}</span>
+          </div>
+        )}
+
        <div className="mx-auto max-w-3xl">
+          {isScratchpad && primaryAgent && (
+            <div className="mb-3 rounded-xl border border-zinc-800 bg-zinc-900/40 p-3">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
+                <div className="min-w-0 flex-1">
+                  <ModelSelect
+                    disabled={isComposerDisabled}
+                    onChange={(model) =>
+                      void handleScratchpadConfigChange({
+                        model,
+                        reasoningEffort: scratchpadReasoningEffort,
+                      })
+                    }
+                    value={primaryAgent.model}
+                  />
+                </div>
+                <div className="sm:w-44">
+                  <ReasoningEffortSelect
+                    disabled={isComposerDisabled}
+                    label="Thinking"
+                    onChange={(reasoningEffort) =>
+                      void handleScratchpadConfigChange({
+                        model: primaryAgent.model,
+                        reasoningEffort,
+                      })
+                    }
+                    value={scratchpadReasoningEffort}
+                  />
+                </div>
+              </div>
+              <p className="mt-2 text-[11px] text-zinc-500">
+                Applies to future replies in this scratchpad.
+              </p>
+            </div>
+          )}
+
          <div className="relative rounded-xl border border-zinc-700 bg-zinc-900 transition-colors focus-within:border-indigo-500/50">
            <textarea
              className="auto-resize-textarea block w-full resize-none bg-transparent px-4 py-3 pr-12 text-[14px] text-zinc-100 placeholder-zinc-600 outline-none"
-              disabled={isBusy}
+              disabled={isComposerDisabled}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={handleKeyDown}
-              placeholder={isBusy ? 'Waiting for response...' : 'Message...'}
+              placeholder={
+                isSessionBusy
+                  ? 'Waiting for response...'
+                  : isUpdatingScratchpadConfig
+                    ? 'Saving scratchpad settings...'
+                    : 'Message...'
+              }
              ref={textareaRef}
              rows={1}
              value={input}
            />
            <button
              className={`absolute bottom-2 right-2 flex size-8 items-center justify-center rounded-lg transition ${
-                input.trim() && !isBusy
+                input.trim() && !isComposerDisabled
                  ? 'bg-indigo-600 text-white hover:bg-indigo-500'
                  : 'bg-zinc-800 text-zinc-600'
              }`}
-              disabled={isBusy || !input.trim()}
+              disabled={isComposerDisabled || !input.trim()}
              onClick={() => void handleSubmit()}
              type="button"
            >
-              {isBusy ? (
+              {isSessionBusy ? (
                <Loader2 className="size-4 animate-spin" />
              ) : (
                <ArrowUp className="size-4" />
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import {
  AlertCircle,
  ArrowLeftRight,
@@ -19,16 +19,10 @@ import {
  validatePatternDefinition,
  type OrchestrationMode,
  type PatternDefinition,
-  type ReasoningEffort,
  type PatternAgentDefinition,
 } from '@shared/domain/pattern';
-import {
-  modelCatalog,
-  providerMeta,
-  findModel,
-  inferProvider,
-  type ModelDefinition,
-} from '@shared/domain/models';
+
+import { ModelSelect, ReasoningEffortSelect } from './AgentConfigFields';

 interface PatternEditorProps {
  pattern: PatternDefinition;
@@ -39,13 +33,6 @@ interface PatternEditorProps {
  onBack: () => void;
 }

-const reasoningEfforts: { value: ReasoningEffort; label: string }[] = [
-  { value: 'low', label: 'Low' },
-  { value: 'medium', label: 'Medium' },
-  { value: 'high', label: 'High' },
-  { value: 'xhigh', label: 'Maximum' },
-];
-
 interface ModeInfo {
  icon: LucideIcon;
  label: string;
@@ -202,95 +189,6 @@ function InputField({
  );
 }

-import { ProviderIcon } from './ProviderIcons';
-
-function TierBadge({ tier }: { tier: ModelDefinition['tier'] }) {
-  const styles = {
-    premium: 'bg-amber-500/10 text-amber-400',
-    standard: 'bg-zinc-700/50 text-zinc-500',
-    fast: 'bg-emerald-500/10 text-emerald-400',
-  };
-  return (
-    <span className={`ml-auto rounded px-1.5 py-0.5 text-[9px] font-medium ${styles[tier]}`}>
-      {tier}
-    </span>
-  );
-}
-
-function ModelSelect({ value, onChange }: { value: string; onChange: (model: string) => void }) {
-  const [open, setOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [open]);
-
-  const selected = findModel(value);
-  const provider = selected?.provider ?? inferProvider(value);
-
-  return (
-    <label className="block space-y-1.5">
-      <span className="text-[12px] font-medium text-zinc-400">Model</span>
-      <div className="relative" ref={containerRef}>
-        <button
-          className="flex w-full items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-left text-[13px] text-zinc-100 outline-none transition hover:border-zinc-600 focus:border-indigo-500/50"
-          onClick={() => setOpen(!open)}
-          type="button"
-        >
-          {provider && <ProviderIcon provider={provider} />}
-          <span className="flex-1 truncate">{selected?.name ?? (value || 'Select model')}</span>
-          <ChevronDown
-            className={`size-3.5 text-zinc-500 transition ${open ? 'rotate-180' : ''}`}
-          />
-        </button>
-
-        {open && (
-          <div className="absolute z-30 mt-1 max-h-72 w-full overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
-            {providerMeta.map((p) => {
-              const models = modelCatalog.filter((m) => m.provider === p.id);
-              return (
-                <div key={p.id}>
-                  <div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
-                    <ProviderIcon provider={p.id} />
-                    <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
-                      {p.label}
-                    </span>
-                  </div>
-                  {models.map((model) => (
-                    <button
-                      className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                        model.id === value
-                          ? 'bg-indigo-500/10 text-indigo-200'
-                          : 'text-zinc-300'
-                      }`}
-                      key={model.id}
-                      onClick={() => {
-                        onChange(model.id);
-                        setOpen(false);
-                      }}
-                      type="button"
-                    >
-                      <span className="flex-1">{model.name}</span>
-                      <TierBadge tier={model.tier} />
-                    </button>
-                  ))}
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </label>
-  );
-}
-
 export function PatternEditor({ pattern, isBuiltin, onChange, onDelete, onSave, onBack }: PatternEditorProps) {
  const issues = validatePatternDefinition(pattern);

@@ -513,24 +411,11 @@ export function PatternEditor({ pattern, isBuiltin, onChange, onDelete, onSave,
                      onChange={(v) => updateAgent(agent.id, { model: v })}
                      value={agent.model}
                    />
-                    <label className="block space-y-1.5">
-                      <span className="text-[12px] font-medium text-zinc-400">Reasoning</span>
-                      <select
-                        className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition focus:border-indigo-500/50"
-                        onChange={(e) =>
-                          updateAgent(agent.id, {
-                            reasoningEffort: e.target.value as ReasoningEffort,
-                          })
-                        }
-                        value={agent.reasoningEffort ?? 'high'}
-                      >
-                        {reasoningEfforts.map((r) => (
-                          <option key={r.value} value={r.value}>
-                            {r.label}
-                          </option>
-                        ))}
-                      </select>
-                    </label>
+                    <ReasoningEffortSelect
+                      label="Reasoning"
+                      onChange={(value) => updateAgent(agent.id, { reasoningEffort: value })}
+                      value={agent.reasoningEffort ?? 'high'}
+                    />
                  </div>
                  <div className="mt-3">
                    <InputField