feat: preview session on task input page

Author: k11kirky

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

@@ -438,13 +438,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,
     });
@@ -462,6 +465,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) {
@@ -360,6 +373,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.");
@@ -419,6 +433,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);
     }
@@ -442,6 +465,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 {
@@ -511,6 +655,7 @@ export class SessionService {
     }
 
     this.connectingTasks.clear();
+    this.previewVersion = 0;
   }
 
   private handleSessionEvent(taskRunId: string, acpMsg: AcpMessage): void {