Share permission option presentation logic

Generated-By: PostHog Code
Task-Id: 40c57a59-b4e1-4760-8e56-ecd03e9c2f0f

Author: richardsolomou

apps/mobile/src/features/tasks/components/PlanApprovalCard.tsx

@@ -1,3 +1,9 @@
+import {
+  getPermissionOptionMeta,
+  isPermissionRejection,
+  permissionOptionUsesCustomInput,
+} from "@posthog/core/sessions/permissionResponse";
+import { extractPlanText } from "@posthog/core/sessions/planApprovalPresentation";
 import {
   ArrowsClockwise,
   ChatCircle,
@@ -28,22 +34,6 @@ interface PlanApprovalCardProps {
   onSendPermissionResponse?: (args: PermissionResponseArgs) => void;
 }
 
-function optionMeta(option: CloudPendingPermissionRequest["options"][number]) {
-  return option._meta as
-    | {
-        customInput?: boolean;
-        description?: string;
-      }
-    | undefined;
-}
-
-function isRejectOption(
-  option?: CloudPendingPermissionRequest["options"][number],
-) {
-  if (!option) return false;
-  return option.kind.startsWith("reject") || option.optionId.includes("reject");
-}
-
 export function PlanApprovalCard({
   toolData,
   permission,
@@ -101,7 +91,9 @@ export function PlanApprovalCard({
     selectedOption?.name ||
     response?.displayText ||
     null;
-  const resolvedAsReject = isRejectOption(selectedOption);
+  const resolvedAsReject = selectedOption
+    ? isPermissionRejection(selectedOption)
+    : false;
 
   return (
     <View className="mx-4 my-1 rounded-lg border border-accent-6 bg-gray-2">
@@ -165,8 +157,8 @@ export function PlanApprovalCard({
       ) : (
         <View className="px-3 pb-3">
           {permission.options.map((option) => {
-            const meta = optionMeta(option);
-            const usesCustomInput = meta?.customInput === true;
+            const meta = getPermissionOptionMeta(option);
+            const usesCustomInput = permissionOptionUsesCustomInput(option);
             const isCustomSelected = selectedCustomOptionId === option.optionId;
 
             return (
@@ -194,7 +186,7 @@ export function PlanApprovalCard({
                   >
                     {option.name}
                   </Text>
-                  {meta?.description && (
+                  {meta.description && (
                     <Text className="mt-1 font-mono text-[11px] text-gray-9 leading-4">
                       {meta.description}
                     </Text>
@@ -239,5 +231,3 @@ export function PlanApprovalCard({
     </View>
   );
 }
-
-import { extractPlanText } from "@posthog/core/sessions/planApprovalPresentation";

packages/core/src/sessions/permissionResponse.test.ts

@@ -2,10 +2,62 @@ import type { PermissionRequest } from "@posthog/shared";
 import { describe, expect, it } from "vitest";
 import {
   formatPermissionAnswerPrompt,
+  getPermissionOptionMeta,
   isOtherPermissionOption,
+  isPermissionApproval,
+  isPermissionRejection,
+  permissionOptionUsesCustomInput,
   planPermissionResponse,
+  resolveInitialPlanApprovalOption,
+  selectPlanPermissionOptions,
 } from "./permissionResponse";
 
+describe("permission option presentation", () => {
+  const approveOnce = {
+    optionId: "default",
+    name: "Approve",
+    kind: "allow_once" as const,
+  };
+  const approveAuto = {
+    optionId: "auto",
+    name: "Approve automatically",
+    kind: "allow_always" as const,
+  };
+  const reject = {
+    optionId: "reject_with_feedback",
+    name: "Reject",
+    kind: "reject_once" as const,
+    _meta: { customInput: true, description: "Explain why" },
+  };
+
+  it("classifies approval, rejection, and custom-input options", () => {
+    expect(isPermissionApproval(approveOnce)).toBe(true);
+    expect(isPermissionRejection(reject)).toBe(true);
+    expect(permissionOptionUsesCustomInput(reject)).toBe(true);
+    expect(getPermissionOptionMeta(reject)).toEqual({
+      customInput: true,
+      description: "Explain why",
+    });
+  });
+
+  it("selects plan options and prefers a feedback rejection", () => {
+    expect(selectPlanPermissionOptions([approveOnce, reject])).toEqual({
+      approvals: [approveOnce],
+      rejection: reject,
+    });
+  });
+
+  it.each([
+    ["default", "default"],
+    [null, "auto"],
+    ["missing", "auto"],
+  ])("resolves preferred approval %s", (preferred, expected) => {
+    expect(
+      resolveInitialPlanApprovalOption([approveOnce, approveAuto], preferred),
+    ).toBe(expected);
+  });
+});
+
 function makePermission(
   options: Array<{
     optionId: string;

packages/core/src/sessions/permissionResponse.ts

@@ -1,5 +1,72 @@
 import type { PermissionRequest } from "@posthog/shared";
 
+export type PermissionOption = PermissionRequest["options"][number];
+
+export function getPermissionOptionMeta(option: PermissionOption): {
+  customInput: boolean;
+  description?: string;
+} {
+  const meta = option._meta as
+    | { customInput?: boolean; description?: string }
+    | null
+    | undefined;
+  return {
+    customInput: meta?.customInput === true,
+    ...(meta?.description ? { description: meta.description } : {}),
+  };
+}
+
+export function isPermissionApproval(option: PermissionOption): boolean {
+  return option.kind === "allow_once" || option.kind === "allow_always";
+}
+
+export function isPermissionRejection(option: PermissionOption): boolean {
+  return (
+    option.kind === "reject_once" ||
+    option.kind === "reject_always" ||
+    option.optionId.includes("reject")
+  );
+}
+
+export function permissionOptionUsesCustomInput(
+  option: PermissionOption,
+): boolean {
+  return (
+    isOtherPermissionOption(option.optionId) ||
+    getPermissionOptionMeta(option).customInput
+  );
+}
+
+export function selectPlanPermissionOptions(options: PermissionOption[]): {
+  approvals: PermissionOption[];
+  rejection: PermissionOption | null;
+} {
+  const approvals = options.filter(isPermissionApproval);
+  const rejections = options.filter(isPermissionRejection);
+  return {
+    approvals,
+    rejection:
+      rejections.find(permissionOptionUsesCustomInput) ?? rejections[0] ?? null,
+  };
+}
+
+export function resolveInitialPlanApprovalOption(
+  approvals: PermissionOption[],
+  preferredOptionId?: string | null,
+): string | undefined {
+  const has = (optionId: string): boolean =>
+    approvals.some((option) => option.optionId === optionId);
+  return (
+    (preferredOptionId && has(preferredOptionId)
+      ? preferredOptionId
+      : undefined) ??
+    (has("auto") ? "auto" : undefined) ??
+    approvals.find((option) => option.optionId === "default")?.optionId ??
+    approvals.find((option) => option.kind === "allow_once")?.optionId ??
+    approvals[0]?.optionId
+  );
+}
+
 const OTHER_OPTION_ID = "_other";
 const OTHER_OPTION_ID_ALT = "other";
 

packages/ui/src/features/permissions/PlanApprovalSelector.tsx

@@ -1,7 +1,8 @@
-import type {
-  PermissionOption,
-  SessionConfigOption,
-} from "@agentclientprotocol/sdk";
+import type { SessionConfigOption } from "@agentclientprotocol/sdk";
+import {
+  resolveInitialPlanApprovalOption,
+  selectPlanPermissionOptions,
+} from "@posthog/core/sessions/permissionResponse";
 import type { ExecutionMode } from "@posthog/shared";
 import { ModeSelector } from "@posthog/ui/features/message-editor/components/ModeSelector";
 import { MODE_LABELS } from "@posthog/ui/features/sessions/modeStyles";
@@ -17,21 +18,6 @@ import { type BasePermissionProps, toSelectorOptions } from "./types";
 const TITLE = "Implementation Plan";
 const QUESTION = "Approve this plan to proceed?";
 
-function isApprove(option: PermissionOption): boolean {
-  return option.kind === "allow_once" || option.kind === "allow_always";
-}
-
-function isReject(option: PermissionOption): boolean {
-  return option.kind === "reject_once" || option.kind === "reject_always";
-}
-
-function hasCustomInput(option: PermissionOption): boolean {
-  return (
-    (option._meta as { customInput?: boolean } | null | undefined)
-      ?.customInput === true
-  );
-}
-
 // Don't steal focus from an interactive element in a different grid cell
 // (multi-task view). Mirrors the guard in useActionSelectorState.
 function isInteractiveElementInDifferentCell(
@@ -65,11 +51,8 @@ export function PlanApprovalSelector({
   onSelect,
   onCancel,
 }: BasePermissionProps) {
-  const approveOptions = useMemo(() => options.filter(isApprove), [options]);
-  const rejectOption = useMemo(
-    () =>
-      options.find((o) => isReject(o) && hasCustomInput(o)) ??
-      options.find(isReject),
+  const { approvals: approveOptions, rejection: rejectOption } = useMemo(
+    () => selectPlanPermissionOptions(options),
     [options],
   );
 
@@ -81,16 +64,7 @@ export function PlanApprovalSelector({
   // Resolution order: the mode last approved with (remembered preference),
   // then "auto", then manual-approve, then any single-use mode, then the first.
   const initialMode = useMemo(() => {
-    const has = (id: string) => approveOptions.some((o) => o.optionId === id);
-    return (
-      (lastApprovalMode && has(lastApprovalMode)
-        ? lastApprovalMode
-        : undefined) ??
-      (has("auto") ? "auto" : undefined) ??
-      approveOptions.find((o) => o.optionId === "default")?.optionId ??
-      approveOptions.find((o) => o.kind === "allow_once")?.optionId ??
-      approveOptions[0]?.optionId
-    );
+    return resolveInitialPlanApprovalOption(approveOptions, lastApprovalMode);
   }, [approveOptions, lastApprovalMode]);
 
   const [selectedMode, setSelectedMode] = useState(initialMode);

packages/ui/src/features/permissions/types.ts

@@ -3,6 +3,7 @@ import type {
   RequestPermissionRequest,
   ToolCallContent,
 } from "@agentclientprotocol/sdk";
+import { getPermissionOptionMeta } from "@posthog/core/sessions/permissionResponse";
 import type { CodeToolKind } from "@posthog/ui/features/sessions/types";
 import type { SelectorOption } from "@posthog/ui/primitives/ActionSelector";
 
@@ -26,14 +27,12 @@ export function toSelectorOptions(
   options: PermissionOption[],
 ): SelectorOption[] {
   return options.map((opt) => {
-    const meta = opt._meta as
-      | { description?: string; customInput?: boolean }
-      | undefined;
+    const meta = getPermissionOptionMeta(opt);
     return {
       id: opt.optionId,
       label: opt.name,
-      description: meta?.description,
-      customInput: meta?.customInput,
+      description: meta.description,
+      customInput: meta.customInput,
     };
   });
 }