Share plan approval presentation logic

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

Author: richardsolomou

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

@@ -44,40 +44,6 @@ function isRejectOption(
   return option.kind.startsWith("reject") || option.optionId.includes("reject");
 }
 
-function extractTextContent(item: unknown): string | null {
-  if (!item || typeof item !== "object") return null;
-
-  const record = item as Record<string, unknown>;
-  if (typeof record.text === "string") {
-    return record.text;
-  }
-
-  if (!record.content || typeof record.content !== "object") {
-    return null;
-  }
-
-  const content = record.content as Record<string, unknown>;
-  return typeof content.text === "string" ? content.text : null;
-}
-
-function extractPlanText(
-  permission?: CloudPendingPermissionRequest,
-): string | null {
-  const rawPlan = permission?.toolCall.rawInput?.plan;
-  if (typeof rawPlan === "string" && rawPlan.trim().length > 0) {
-    return rawPlan;
-  }
-
-  for (const item of permission?.toolCall.content ?? []) {
-    const text = extractTextContent(item);
-    if (text?.trim()) {
-      return text;
-    }
-  }
-
-  return null;
-}
-
 export function PlanApprovalCard({
   toolData,
   permission,
@@ -90,7 +56,10 @@ export function PlanApprovalCard({
   const [customInput, setCustomInput] = useState("");
 
   const response = permission?.response;
-  const planText = useMemo(() => extractPlanText(permission), [permission]);
+  const planText = useMemo(
+    () => (permission ? extractPlanText(permission.toolCall) : null),
+    [permission],
+  );
   const selectedOption = useMemo(
     () =>
       permission?.options.find(
@@ -270,3 +239,5 @@ export function PlanApprovalCard({
     </View>
   );
 }
+
+import { extractPlanText } from "@posthog/core/sessions/planApprovalPresentation";

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

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { extractPlanText } from "./planApprovalPresentation";
+
+describe("extractPlanText", () => {
+  it.each([
+    [{ rawInput: { plan: "Raw plan" } }, "Raw plan"],
+    [{ content: [{ text: "Direct content" }] }, "Direct content"],
+    [
+      {
+        content: [
+          { type: "content", content: { type: "text", text: "Nested" } },
+        ],
+      },
+      "Nested",
+    ],
+    [{ rawInput: {}, content: [] }, null],
+  ])("extracts plan presentation from %o", (toolCall, expected) => {
+    expect(extractPlanText(toolCall)).toBe(expected);
+  });
+
+  it("prefers the canonical raw plan over rendered content", () => {
+    expect(
+      extractPlanText({
+        rawInput: { plan: "Canonical" },
+        content: [{ text: "Rendered" }],
+      }),
+    ).toBe("Canonical");
+  });
+});

packages/core/src/sessions/planApprovalPresentation.ts

@@ -0,0 +1,23 @@
+function extractTextContent(item: unknown): string | null {
+  if (!item || typeof item !== "object") return null;
+  const record = item as Record<string, unknown>;
+  if (typeof record.text === "string") return record.text;
+
+  if (!record.content || typeof record.content !== "object") return null;
+  const content = record.content as Record<string, unknown>;
+  return typeof content.text === "string" ? content.text : null;
+}
+
+export function extractPlanText(toolCall: {
+  rawInput?: { plan?: unknown } | null;
+  content?: readonly unknown[] | null;
+}): string | null {
+  const rawPlan = toolCall.rawInput?.plan;
+  if (typeof rawPlan === "string" && rawPlan.trim()) return rawPlan;
+
+  for (const item of toolCall.content ?? []) {
+    const text = extractTextContent(item);
+    if (text?.trim()) return text;
+  }
+  return null;
+}

packages/ui/src/features/sessions/components/session-update/PlanApprovalView.tsx

@@ -1,4 +1,5 @@
 import { CaretDown, CaretRight, CheckCircle } from "@phosphor-icons/react";
+import { extractPlanText } from "@posthog/core/sessions/planApprovalPresentation";
 import { Box, Flex, Text } from "@radix-ui/themes";
 import { useMemo, useState } from "react";
 import { PlanContent } from "../../../permissions/PlanContent";
@@ -32,20 +33,10 @@ export function PlanApprovalView({
     | undefined;
   const isHistoricalPlan = rawInput?.historical === true;
 
-  const planText = useMemo(() => {
-    if (content?.length) {
-      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 rawInput?.plan ?? null;
-  }, [content, rawInput?.plan]);
+  const planText = useMemo(
+    () => extractPlanText({ rawInput, content }),
+    [content, rawInput],
+  );
 
   const wasNotApproved = isFailed || wasCancelled;
   const showResult = isHistoricalPlan || isComplete || wasNotApproved;