Integrate plan mode into permissionselector and plan mode fixes (#690)

Author: jonathanlab

apps/twig/src/renderer/components/permissions/PermissionSelector.stories.tsx

@@ -1,5 +1,8 @@
 import { toolInfoFromToolUse } from "@posthog/agent/adapters/claude/conversion/tool-use-to-acp";
-import { buildPermissionOptions } from "@posthog/agent/adapters/claude/permissions/permission-options";
+import {
+  buildExitPlanModePermissionOptions,
+  buildPermissionOptions,
+} from "@posthog/agent/adapters/claude/permissions/permission-options";
 import {
   buildQuestionOptions,
   buildQuestionToolCallData,
@@ -474,6 +477,46 @@ export const Default: Story = {
   },
 };
 
+const exitPlanModeInput = {
+  plan: `# Add Dark Mode Support
+
+## Overview
+Add dark mode toggle to Twig app with theme persistence.
+
+## Implementation Steps
+- Create \`useThemeStore\` Zustand store with theme state (\`light\` | \`dark\` | \`system\`)
+- Add theme toggle button to settings panel that cycles through theme options
+- Update Radix UI Theme component to accept \`appearance\` prop from store
+- Add CSS variables for dark mode colors in global styles
+- Test theme switching persists across app restarts
+
+## Critical Files
+- \`apps/twig/src/renderer/stores/theme-store.ts\` (new)
+- \`apps/twig/src/renderer/App.tsx\` (modify Theme provider)
+- \`apps/twig/src/renderer/features/settings/SettingsPanel.tsx\` (add toggle)
+
+## Verification
+- Launch app, toggle dark mode, verify colors change
+- Restart app, verify theme persists
+- Test system theme option follows OS preference`,
+};
+export const ExitPlanMode: Story = {
+  args: {
+    toolCall: {
+      toolCallId: `story-${Date.now()}`,
+      title: "Approve this plan to proceed?",
+      kind: "switch_mode",
+      content: [
+        {
+          type: "content",
+          content: { type: "text", text: exitPlanModeInput.plan },
+        },
+      ],
+    },
+    options: buildExitPlanModePermissionOptions(),
+  },
+};
+
 const singleQuestion: QuestionItem[] = [
   {
     question: "Which testing framework do you prefer?",

apps/twig/src/renderer/components/permissions/PlanContent.tsx

@@ -0,0 +1,17 @@
+import { Box } from "@radix-ui/themes";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+interface PlanContentProps {
+  plan: string;
+}
+
+export function PlanContent({ plan }: PlanContentProps) {
+  return (
+    <Box className="rounded-lg border-2 border-blue-6 bg-blue-2 p-4">
+      <Box className="plan-markdown text-blue-12">
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{plan}</ReactMarkdown>
+      </Box>
+    </Box>
+  );
+}

apps/twig/src/renderer/components/permissions/SwitchModePermission.tsx

@@ -1,4 +1,6 @@
 import { ActionSelector } from "@components/ActionSelector";
+import { useMemo } from "react";
+import { PlanContent } from "./PlanContent";
 import { type BasePermissionProps, toSelectorOptions } from "./types";
 
 export function SwitchModePermission({
@@ -7,10 +9,29 @@ export function SwitchModePermission({
   onSelect,
   onCancel,
 }: BasePermissionProps) {
+  const planText = useMemo(() => {
+    const rawPlan = (toolCall.rawInput as { plan?: string } | undefined)?.plan;
+    if (rawPlan) return rawPlan;
+
+    const content = toolCall.content;
+    if (!content || content.length === 0) return null;
+    const textContent = content.find((c) => c.type === "content");
+    if (textContent && "content" in textContent) {
+      const inner = textContent.content as
+        | { type?: string; text?: string }
+        | undefined;
+      if (inner?.type === "text" && inner.text) {
+        return inner.text;
+      }
+    }
+    return null;
+  }, [toolCall.rawInput, toolCall.content]);
+
   return (
     <ActionSelector
-      title={toolCall.title ?? "Switch mode"}
-      question="Approve this mode change?"
+      title="Implementation Plan"
+      pendingAction={planText ? <PlanContent plan={planText} /> : undefined}
+      question="Approve this plan to proceed?"
       options={toSelectorOptions(options)}
       onSelect={onSelect}
       onCancel={onCancel}

apps/twig/src/renderer/features/sessions/components/ConversationView.tsx

@@ -143,7 +143,6 @@ export function ConversationView({
                 turn={item}
                 repoPath={repoPath}
                 isCloud={isCloud}
-                taskId={taskId}
               />
             ) : (
               <UserShellExecuteView key={item.id} item={item} />
@@ -184,7 +183,6 @@ interface TurnViewProps {
   turn: Turn;
   repoPath?: string | null;
   isCloud?: boolean;
-  taskId?: string;
 }
 
 function getInterruptMessage(reason?: string): string {
@@ -200,7 +198,6 @@ const TurnView = memo(function TurnView({
   turn,
   repoPath,
   isCloud = false,
-  taskId,
 }: TurnViewProps) {
   const wasCancelled = turn.stopReason === "cancelled";
   const gitAction = parseGitActionMessage(turn.userContent);
@@ -241,7 +238,6 @@ const TurnView = memo(function TurnView({
             key={`${item.sessionUpdate}-${i}`}
             item={renderItem}
             toolCalls={turn.toolCalls}
-            taskId={taskId}
             turnCancelled={wasCancelled}
           />
         );

apps/twig/src/renderer/features/sessions/components/session-update/CurrentModeView.tsx

@@ -1,39 +1,27 @@
-import { DotsCircleSpinner } from "@components/DotsCircleSpinner";
-import { usePendingPermissionsForTask } from "@features/sessions/stores/sessionStore";
+import { PlanContent } from "@components/permissions/PlanContent";
 import type { ToolCall } from "@features/sessions/types";
-import { CheckCircle, ClockCounterClockwise } from "@phosphor-icons/react";
+import { CheckCircle } from "@phosphor-icons/react";
 import { Box, Flex, Text } from "@radix-ui/themes";
 import { useMemo } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
 
 interface PlanApprovalViewProps {
   toolCall: ToolCall;
-  taskId: string;
   turnCancelled?: boolean;
 }
 
 export function PlanApprovalView({
   toolCall,
-  taskId,
   turnCancelled,
 }: PlanApprovalViewProps) {
-  const { toolCallId, status, content } = toolCall;
-  const pendingPermissions = usePendingPermissionsForTask(taskId);
-
-  const pendingPermission = pendingPermissions.get(toolCallId);
+  const { status, content } = toolCall;
   const isComplete = status === "completed";
-  const isPending = !!pendingPermission && !isComplete;
   const wasCancelled =
     (status === "pending" || status === "in_progress") && turnCancelled;
 
-  // Extract plan text from content or rawInput
   const planText = useMemo(() => {
-    // Try rawInput first (where Claude SDK puts the plan)
     const rawPlan = (toolCall.rawInput as { plan?: string } | undefined)?.plan;
     if (rawPlan) return rawPlan;
 
-    // Fallback: check content array
     if (!content || content.length === 0) return null;
     const textContent = content.find((c) => c.type === "content");
     if (textContent && "content" in textContent) {
@@ -47,34 +35,14 @@ export function PlanApprovalView({
     return null;
   }, [content, toolCall.rawInput]);
 
+  if (!isComplete && !wasCancelled) return null;
+
   return (
     <Box className="my-3">
-      {/* Plan content in highlighted box */}
-      {planText && (
-        <Box className="mb-3 rounded-lg border-2 border-amber-6 bg-amber-2 p-4">
-          <Flex align="center" gap="2" className="mb-2">
-            <Text size="2" weight="bold" className="text-amber-11">
-              Implementation Plan
-            </Text>
-          </Flex>
-          <Box className="plan-markdown text-amber-12">
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>
-              {planText}
-            </ReactMarkdown>
-          </Box>
-        </Box>
-      )}
+      {planText && <PlanContent plan={planText} />}
 
-      {/* Status indicator */}
-      <Flex align="center" gap="2" className="px-1">
-        {isPending ? (
-          <>
-            <ClockCounterClockwise size={14} className="text-amber-9" />
-            <Text size="1" className="text-amber-11">
-              Waiting for approval — use the selector below to continue
-            </Text>
-          </>
-        ) : isComplete ? (
+      <Flex align="center" gap="2" className="mt-2 px-1">
+        {isComplete ? (
           <>
             <CheckCircle size={14} weight="fill" className="text-green-9" />
             <Text size="1" className="text-green-11">
@@ -85,14 +53,7 @@ export function PlanApprovalView({
           <Text size="1" className="text-gray-9">
             (Cancelled)
           </Text>
-        ) : (
-          <>
-            <DotsCircleSpinner size={14} className="text-gray-9" />
-            <Text size="1" className="text-gray-9">
-              Preparing plan...
-            </Text>
-          </>
-        )}
+        ) : null}
       </Flex>
     </Box>
   );

apps/twig/src/renderer/features/sessions/components/session-update/PlanApprovalView.tsx

@@ -3,7 +3,6 @@ import type { SessionUpdate, ToolCall } from "@features/sessions/types";
 import { AgentMessage } from "./AgentMessage";
 import { CompactBoundaryView } from "./CompactBoundaryView";
 import { ConsoleMessage } from "./ConsoleMessage";
-import { CurrentModeView } from "./CurrentModeView";
 import { ErrorNotificationView } from "./ErrorNotificationView";
 import { StatusNotificationView } from "./StatusNotificationView";
 import { TaskNotificationView } from "./TaskNotificationView";
@@ -44,14 +43,12 @@ export type RenderItem =
 interface SessionUpdateViewProps {
   item: RenderItem;
   toolCalls?: Map<string, ToolCall>;
-  taskId?: string;
   turnCancelled?: boolean;
 }
 
 export function SessionUpdateView({
   item,
   toolCalls,
-  taskId,
   turnCancelled,
 }: SessionUpdateViewProps) {
   switch (item.sessionUpdate) {
@@ -69,7 +66,6 @@ export function SessionUpdateView({
       return (
         <ToolCallBlock
           toolCall={toolCalls?.get(item.toolCallId) ?? item}
-          taskId={taskId}
           turnCancelled={turnCancelled}
         />
       );
@@ -80,7 +76,7 @@ export function SessionUpdateView({
     case "available_commands_update":
       return null;
     case "current_mode_update":
-      return <CurrentModeView update={item} />;
+      return null;
     case "console":
       return (
         <ConsoleMessage

apps/twig/src/renderer/features/sessions/components/session-update/PlanView.tsx

@@ -5,25 +5,25 @@ import { ToolCallView } from "./ToolCallView";
 
 interface ToolCallBlockProps {
   toolCall: ToolCall;
-  taskId?: string;
   turnCancelled?: boolean;
 }
 
-export function ToolCallBlock({
-  toolCall,
-  taskId,
-  turnCancelled,
-}: ToolCallBlockProps) {
-  if (toolCall.kind === "switch_mode" && taskId) {
+export function ToolCallBlock({ toolCall, turnCancelled }: ToolCallBlockProps) {
+  const meta = toolCall._meta as
+    | { claudeCode?: { toolName?: string } }
+    | undefined;
+  const toolName = meta?.claudeCode?.toolName;
+
+  if (toolCall.kind === "switch_mode") {
     return (
-      <PlanApprovalView
-        toolCall={toolCall}
-        taskId={taskId}
-        turnCancelled={turnCancelled}
-      />
+      <PlanApprovalView toolCall={toolCall} turnCancelled={turnCancelled} />
     );
   }
 
+  if (toolName === "EnterPlanMode" || toolName === "ExitPlanMode") {
+    return null;
+  }
+
   if (toolCall.kind === "execute") {
     return (
       <ExecuteToolView toolCall={toolCall} turnCancelled={turnCancelled} />