feat: refactor permissions and question UI (#652)

This PR makes the entire permissions + questinos UI keyboard navigateable + clickable, and just refactors a ton of stuff related to it. It also improves the individual tool call UI per tool call type

![image.png](https://app.graphite.com/user-attachments/assets/ce2f17f6-522f-4db5-ae22-457cf269b477.png)

![image.png](https://app.graphite.com/user-attachments/assets/4a0588fe-fea9-4426-b50b-899d4df23399.png)

Author: jonathanlab

.gitignore

@@ -45,6 +45,7 @@ AGENTS.md
 # Playwright
 playwright-results/
 playwright-report/
+.playwright-cli
 test-results/
 
 *storybook.log

README.md

@@ -228,3 +228,15 @@ Native modules (like node-pty) need to be rebuilt for your Electron version:
 ```bash
 pnpm --filter twig exec electron-rebuild
 ```
+
+## Acknowledgments
+
+Built with love by the PostHog team.
+
+## Roadmap
+
+Stay tuned for upcoming features and improvements.
+
+## FAQ
+
+Check the issues page for common questions and answers.

apps/cli/src/commands/split.ts

@@ -37,7 +37,7 @@ export async function split(
     process.exit(1);
   }
 
-  const { matchingFiles, availableFiles } = previewResult.value;
+  const { matchingFiles } = previewResult.value;
 
   // Show preview
   message(

apps/twig/.storybook/main.ts

@@ -32,6 +32,10 @@ const config: StorybookConfig = {
           "@stores": path.resolve(__dirname, "../src/renderer/stores"),
           "@hooks": path.resolve(__dirname, "../src/renderer/hooks"),
           "@utils": path.resolve(__dirname, "../src/renderer/utils"),
+          "@posthog/agent/adapters/claude/permission-options": path.resolve(
+            __dirname,
+            "../../../packages/agent/src/adapters/claude/permission-options.ts",
+          ),
         },
       },
     });

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

@@ -1,3 +1,7 @@
+import type {
+  RequestPermissionRequest,
+  PermissionOption as SdkPermissionOption,
+} from "@agentclientprotocol/sdk";
 import { z } from "zod";
 
 // Session credentials schema
@@ -161,20 +165,8 @@ export interface AgentSessionEventPayload {
   payload: unknown;
 }
 
-export interface PermissionOption {
-  kind: "allow_once" | "allow_always" | "reject_once" | "reject_always";
-  name: string;
-  optionId: string;
-  description?: string;
-}
-
-export interface PermissionRequestPayload {
-  sessionId: string;
-  toolCallId: string;
-  title: string;
-  options: PermissionOption[];
-  rawInput: unknown;
-}
+export type PermissionOption = SdkPermissionOption;
+export type PermissionRequestPayload = RequestPermissionRequest;
 
 export interface AgentServiceEvents {
   [AgentServiceEvent.SessionEvent]: AgentSessionEventPayload;
@@ -186,10 +178,10 @@ export const respondToPermissionInput = z.object({
   sessionId: z.string(),
   toolCallId: z.string(),
   optionId: z.string(),
-  // For multi-select mode: array of selected option IDs
-  selectedOptionIds: z.array(z.string()).optional(),
-  // For "Other" option: custom text input from user
+  // For "Other" option: custom text input from user (ACP extension via _meta)
   customInput: z.string().optional(),
+  // For multi-question flows: all answers keyed by question text
+  answers: z.record(z.string(), z.string()).optional(),
 });
 
 export type RespondToPermissionInput = z.infer<typeof respondToPermissionInput>;

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

@@ -253,8 +253,8 @@ export class AgentService extends TypedEventEmitter<AgentServiceEvents> {
     sessionId: string,
     toolCallId: string,
     optionId: string,
-    selectedOptionIds?: string[],
     customInput?: string,
+    answers?: Record<string, string>,
   ): void {
     const key = `${sessionId}:${toolCallId}`;
     const pending = this.pendingPermissions.get(key);
@@ -268,18 +268,20 @@ export class AgentService extends TypedEventEmitter<AgentServiceEvents> {
       sessionId,
       toolCallId,
       optionId,
-      selectedOptionIds,
       hasCustomInput: !!customInput,
+      hasAnswers: !!answers,
     });
 
+    const meta: Record<string, unknown> = {};
+    if (customInput) meta.customInput = customInput;
+    if (answers) meta.answers = answers;
+
     pending.resolve({
       outcome: {
         outcome: "selected",
         optionId,
-        // Include multi-select and custom input in the response
-        ...(selectedOptionIds && { selectedOptionIds }),
-        ...(customInput && { customInput }),
       },
+      ...(Object.keys(meta).length > 0 && { _meta: meta }),
     });
 
     this.pendingPermissions.delete(key);
@@ -924,13 +926,6 @@ For git operations while detached:
         // The claude.ts adapter only calls requestPermission when user input is needed.
         // (It handles auto-approve internally for acceptEdits/bypassPermissions modes)
         if (toolCallId) {
-          log.info("Permission request requires user input", {
-            sessionId: taskRunId,
-            toolCallId,
-            toolName,
-            title: params.toolCall?.title,
-          });
-
           return new Promise((resolve, reject) => {
             const key = `${taskRunId}:${toolCallId}`;
             service.pendingPermissions.set(key, {
@@ -944,18 +939,7 @@ For git operations while detached:
               sessionId: taskRunId,
               toolCallId,
             });
-            service.emit(AgentServiceEvent.PermissionRequest, {
-              sessionId: taskRunId,
-              toolCallId,
-              title: params.toolCall?.title || "Permission Required",
-              options: params.options.map((o) => ({
-                kind: o.kind,
-                name: o.name,
-                optionId: o.optionId,
-                description: (o as { description?: string }).description,
-              })),
-              rawInput: params.toolCall?.rawInput,
-            });
+            service.emit(AgentServiceEvent.PermissionRequest, params);
           });
         }
 

apps/twig/src/main/trpc/routers/agent.ts

@@ -112,8 +112,8 @@ export const agentRouter = router({
         input.sessionId,
         input.toolCallId,
         input.optionId,
-        input.selectedOptionIds,
         input.customInput,
+        input.answers,
       ),
     ),
 

apps/twig/src/renderer/components/ActionSelector.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ActionSelector } from "./ActionSelector";
+
+const meta: Meta<typeof ActionSelector> = {
+  title: "Components/ActionSelector",
+  component: ActionSelector,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    onSelect: { action: "selected" },
+    onMultiSelect: { action: "multiSelected" },
+    onCancel: { action: "cancelled" },
+    onStepAnswer: { action: "stepAnswered" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionSelector>;
+
+export const SingleSelect: Story = {
+  args: {
+    title: "Single Select",
+    question: "Choose one option:",
+    options: [
+      { id: "a", label: "Option A", description: "First option" },
+      { id: "b", label: "Option B", description: "Second option" },
+      { id: "c", label: "Option C", description: "Third option" },
+    ],
+  },
+};
+
+export const WithCustomInput: Story = {
+  args: {
+    title: "With Custom Input",
+    question: "Choose an option or provide your own:",
+    options: [
+      { id: "a", label: "Option A" },
+      { id: "b", label: "Option B" },
+    ],
+    allowCustomInput: true,
+    customInputPlaceholder: "Type your answer...",
+  },
+};
+
+export const MultiSelect: Story = {
+  args: {
+    title: "Multi Select",
+    question: "Select all that apply:",
+    options: [
+      { id: "react", label: "React", description: "UI library" },
+      { id: "vue", label: "Vue", description: "Progressive framework" },
+      { id: "svelte", label: "Svelte", description: "Compiler-based" },
+      { id: "angular", label: "Angular", description: "Full framework" },
+    ],
+    multiSelect: true,
+  },
+};
+
+export const MultiSelectWithOther: Story = {
+  args: {
+    title: "Multi Select with Other",
+    question: "Which features do you want?",
+    options: [
+      { id: "auth", label: "Authentication" },
+      { id: "db", label: "Database" },
+      { id: "api", label: "REST API" },
+    ],
+    multiSelect: true,
+    allowCustomInput: true,
+    customInputPlaceholder: "Describe additional features...",
+  },
+};
+
+export const WithSteps: Story = {
+  args: {
+    title: "Frontend",
+    question: "Which frontend framework do you prefer?",
+    options: [
+      {
+        id: "react",
+        label: "React",
+        description: "Component-based UI library",
+      },
+      { id: "vue", label: "Vue", description: "Progressive framework" },
+      { id: "svelte", label: "Svelte", description: "Compiler-based" },
+    ],
+    multiSelect: true,
+    allowCustomInput: true,
+    customInputPlaceholder: "Type something",
+    currentStep: 0,
+    steps: [
+      { label: "Frontend" },
+      { label: "Backend" },
+      { label: "Databases" },
+      { label: "Submit" },
+    ],
+  },
+};

apps/twig/src/renderer/components/ActionSelector.tsx

@@ -0,0 +1,20 @@
+export { ActionSelector } from "./action-selector/ActionSelector";
+export {
+  CANCEL_OPTION_ID,
+  filterOtherOptions,
+  isCancelOption,
+  isOtherOption,
+  isSubmitOption,
+  makeOptionId,
+  OPTION_ID_PREFIX,
+  OTHER_OPTION_ID,
+  OTHER_OPTION_ID_ALT,
+  parseOptionIndex,
+  SUBMIT_OPTION_ID,
+} from "./action-selector/constants";
+export type {
+  ActionSelectorProps,
+  SelectorOption,
+  StepAnswer,
+  StepInfo,
+} from "./action-selector/types";