feat: Create a preview session on task input page (#863)

### TL;DR

Added a preview session feature for the task input page that loads adapter-specific configuration options without creating a real task.

### What changed?

- Created a preview session system that loads model options, reasoning levels, and execution modes for the selected adapter
- Added a visual mode indicator that shows the current execution mode with an icon and label
- Separated model and reasoning level selectors from the editor toolbar for better organization
- Disabled log persistence for preview sessions since they don't correspond to real tasks
- Added keyboard shortcut (Shift+Tab) to cycle through execution modes
- Implemented version tracking to prevent race conditions when rapidly switching adapters

### How to test?

1. Open the task input page and verify that model options and reasoning levels load correctly
2. Change the adapter and confirm that the available options update accordingly
3. Use Shift+Tab to cycle through execution modes and verify the mode indicator updates
4. Check that no logs are persisted for preview sessions
5. Rapidly switch between adapters to ensure no race conditions occur

### Why make this change?

The task input page needed to display adapter-specific configuration options before task creation, but previously these options were only available after creating a task. This change improves the user experience by showing relevant options upfront, allowing users to configure their task properly before submission. It also prevents unnecessary log persistence for these temporary preview sessions.

Author: k11kirky

apps/twig/src/main/services/agent/service.ts

@@ -442,13 +442,16 @@ export class AgentService extends TypedEventEmitter<AgentServiceEvents> {
     const mockNodeDir = this.setupMockNodeEnvironment(taskRunId);
     this.setupEnvironment(credentials, mockNodeDir);
 
+    // Preview sessions don't persist logs — no real task exists
+    const isPreview = taskId === "__preview__";
+
     // OTEL log pipeline or legacy S3 writer if FF false
-    const useOtelPipeline = await this.isFeatureFlagEnabled(
-      "twig-agent-logs-pipeline",
-    );
+    const useOtelPipeline = isPreview
+      ? false
+      : await this.isFeatureFlagEnabled("twig-agent-logs-pipeline");
 
     log.info("Agent log transport", {
-      transport: useOtelPipeline ? "otel" : "s3",
+      transport: isPreview ? "none" : useOtelPipeline ? "otel" : "s3",
       taskId,
       taskRunId,
     });
@@ -466,6 +469,7 @@ export class AgentService extends TypedEventEmitter<AgentServiceEvents> {
             logsPath: "/i/v1/agent-logs",
           }
         : undefined,
+      skipLogPersistence: isPreview,
       debug: !app.isPackaged,
       onLog: onAgentLog,
     });

apps/twig/src/renderer/features/message-editor/components/EditorToolbar.tsx

@@ -13,6 +13,8 @@ interface EditorToolbarProps {
   onAttachFiles?: (files: File[]) => void;
   attachTooltip?: string;
   iconSize?: number;
+  /** Hide model and reasoning selectors (when rendered separately) */
+  hideSelectors?: boolean;
 }
 
 export function EditorToolbar({
@@ -23,6 +25,7 @@ export function EditorToolbar({
   onAttachFiles,
   attachTooltip = "Attach file",
   iconSize = 14,
+  hideSelectors = false,
 }: EditorToolbarProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -68,8 +71,16 @@ export function EditorToolbar({
           <Paperclip size={iconSize} weight="bold" />
         </IconButton>
       </Tooltip>
-      <ModelSelector taskId={taskId} adapter={adapter} disabled={disabled} />
-      <ReasoningLevelSelector taskId={taskId} disabled={disabled} />
+      {!hideSelectors && (
+        <>
+          <ModelSelector
+            taskId={taskId}
+            adapter={adapter}
+            disabled={disabled}
+          />
+          <ReasoningLevelSelector taskId={taskId} disabled={disabled} />
+        </>
+      )}
     </Flex>
   );
 }

apps/twig/src/renderer/features/message-editor/components/ModeIndicatorInput.tsx

@@ -55,7 +55,8 @@ const DEFAULT_STYLE: ModeStyle = {
 };
 
 interface ModeIndicatorInputProps {
-  modeOption: SessionConfigOption;
+  modeOption: SessionConfigOption | undefined;
+  onCycleMode?: () => void;
 }
 
 function flattenOptions(
@@ -70,7 +71,12 @@ function flattenOptions(
   return options as SessionConfigSelectOption[];
 }
 
-export function ModeIndicatorInput({ modeOption }: ModeIndicatorInputProps) {
+export function ModeIndicatorInput({
+  modeOption,
+  onCycleMode,
+}: ModeIndicatorInputProps) {
+  if (!modeOption) return null;
+
   const id = modeOption.currentValue;
 
   const style = MODE_STYLES[id] ?? DEFAULT_STYLE;
@@ -80,7 +86,13 @@ export function ModeIndicatorInput({ modeOption }: ModeIndicatorInputProps) {
   const label = option?.name ?? id;
 
   return (
-    <Flex align="center" justify="between" py="1">
+    <Flex
+      align="center"
+      justify="between"
+      py="1"
+      style={onCycleMode ? { cursor: "pointer" } : undefined}
+      onClick={onCycleMode}
+    >
       <Flex align="center" gap="1">
         <Text
           size="1"

apps/twig/src/renderer/features/sessions/service/service.ts

@@ -46,6 +46,8 @@ import { ANALYTICS_EVENTS } from "@/types/analytics";
 
 const log = logger.scope("session-service");
 
+export const PREVIEW_TASK_ID = "__preview__";
+
 interface AuthCredentials {
   apiKey: string;
   apiHost: string;
@@ -60,6 +62,7 @@ interface ConnectParams {
   executionMode?: ExecutionMode;
   adapter?: "claude" | "codex";
   model?: string;
+  reasoningLevel?: string;
 }
 
 // --- Singleton Service Instance ---
@@ -95,6 +98,8 @@ export class SessionService {
       permission?: { unsubscribe: () => void };
     }
   >();
+  /** Version counter to discard stale preview session results */
+  private previewVersion = 0;
 
   /**
    * Connect to a task session.
@@ -136,8 +141,15 @@ export class SessionService {
   }
 
   private async doConnect(params: ConnectParams): Promise<void> {
-    const { task, repoPath, initialPrompt, executionMode, adapter, model } =
-      params;
+    const {
+      task,
+      repoPath,
+      initialPrompt,
+      executionMode,
+      adapter,
+      model,
+      reasoningLevel,
+    } = params;
     const { id: taskId, latest_run: latestRun } = task;
     const taskTitle = task.title || task.description || "Task";
 
@@ -214,6 +226,7 @@ export class SessionService {
           executionMode,
           adapter,
           model,
+          reasoningLevel,
         );
       }
     } catch (error) {
@@ -366,6 +379,7 @@ export class SessionService {
     executionMode?: ExecutionMode,
     adapter?: "claude" | "codex",
     model?: string,
+    reasoningLevel?: string,
   ): Promise<void> {
     if (!auth.client) {
       throw new Error("Unable to reach server. Please check your connection.");
@@ -425,6 +439,15 @@ export class SessionService {
       );
     }
 
+    // Set reasoning level if provided (e.g., from Codex adapter's preview session)
+    if (reasoningLevel) {
+      await this.setSessionConfigOptionByCategory(
+        taskId,
+        "thought_level",
+        reasoningLevel,
+      );
+    }
+
     if (initialPrompt?.length) {
       await this.sendPrompt(taskId, initialPrompt);
     }
@@ -448,6 +471,127 @@ export class SessionService {
     sessionStoreSetters.removeSession(session.taskRunId);
   }
 
+  // --- Preview Session Management ---
+
+  /**
+   * Start a lightweight preview session for the task input page.
+   * This session is used solely to retrieve adapter-specific config options
+   * (models, modes, reasoning levels) without creating a real PostHog task.
+   *
+   * Uses a version counter to prevent race conditions when rapidly switching
+   * adapters — stale results from a previous start are discarded.
+   */
+  async startPreviewSession(params: {
+    adapter: "claude" | "codex";
+    repoPath?: string;
+  }): Promise<void> {
+    // Increment version to invalidate any in-flight start
+    const version = ++this.previewVersion;
+
+    // Cancel any existing preview session first
+    await this.cancelPreviewSession();
+
+    // Check if a newer start was requested while we were cancelling
+    if (version !== this.previewVersion) {
+      log.info("Preview session start superseded, skipping", { version });
+      return;
+    }
+
+    const auth = this.getAuthCredentials();
+    if (!auth) {
+      log.info("Skipping preview session - not authenticated");
+      return;
+    }
+
+    const taskRunId = `preview-${crypto.randomUUID()}`;
+    const session = this.createBaseSession(
+      taskRunId,
+      PREVIEW_TASK_ID,
+      "Preview",
+    );
+    session.adapter = params.adapter;
+    sessionStoreSetters.setSession(session);
+
+    try {
+      const result = await trpcVanilla.agent.start.mutate({
+        taskId: PREVIEW_TASK_ID,
+        taskRunId,
+        repoPath: params.repoPath || "~",
+        apiKey: auth.apiKey,
+        apiHost: auth.apiHost,
+        projectId: auth.projectId,
+        adapter: params.adapter,
+      });
+
+      // Check again after the async start — a newer call may have superseded us
+      if (version !== this.previewVersion) {
+        log.info(
+          "Preview session start superseded after agent.start, cleaning up stale session",
+          { taskRunId, version },
+        );
+        // Clean up the session we just started but is now stale
+        trpcVanilla.agent.cancel
+          .mutate({ sessionId: taskRunId })
+          .catch((err) => {
+            log.warn("Failed to cancel stale preview session", {
+              taskRunId,
+              error: err,
+            });
+          });
+        sessionStoreSetters.removeSession(taskRunId);
+        return;
+      }
+
+      const configOptions = result.configOptions as
+        | SessionConfigOption[]
+        | undefined;
+
+      sessionStoreSetters.updateSession(taskRunId, {
+        status: "connected",
+        channel: result.channel,
+        configOptions,
+      });
+
+      this.subscribeToChannel(taskRunId);
+
+      log.info("Preview session started", {
+        taskRunId,
+        adapter: params.adapter,
+        configOptionsCount: configOptions?.length ?? 0,
+      });
+    } catch (error) {
+      // Only clean up if we're still the current version
+      if (version === this.previewVersion) {
+        log.error("Failed to start preview session", { error });
+        sessionStoreSetters.removeSession(taskRunId);
+      }
+    }
+  }
+
+  /**
+   * Cancel and clean up the preview session.
+   * Unsubscribes and removes from store first (so nothing writes to the old
+   * session), then awaits the cancel on the main process.
+   */
+  async cancelPreviewSession(): Promise<void> {
+    const session = sessionStoreSetters.getSessionByTaskId(PREVIEW_TASK_ID);
+    if (!session) return;
+
+    const { taskRunId } = session;
+
+    // Unsubscribe and remove from store first so nothing writes to the old session
+    this.unsubscribeFromChannel(taskRunId);
+    sessionStoreSetters.removeSession(taskRunId);
+
+    try {
+      await trpcVanilla.agent.cancel.mutate({ sessionId: taskRunId });
+    } catch (error) {
+      log.warn("Failed to cancel preview session", { taskRunId, error });
+    }
+
+    log.info("Preview session cancelled", { taskRunId });
+  }
+
   // --- Subscription Management ---
 
   private subscribeToChannel(taskRunId: string): void {
@@ -517,6 +661,7 @@ export class SessionService {
     }
 
     this.connectingTasks.clear();
+    this.previewVersion = 0;
   }
 
   private handleSessionEvent(taskRunId: string, acpMsg: AcpMessage): void {