fix(agents): address React Doctor warnings on bundle editor

- Move parseBundleInput + ParsedBundle to utils/parseBundleInput.ts so the
  component file only exports components (only-export-components).
- Sync the editable markdown draft from upstream content during render
  instead of in an effect, removing the chained/derived state-in-effect
  warnings (no-chain-state-updates, no-derived-state, no-event-handler).
  Behaviour is unchanged: the !editing guard still prevents a concurrent
  refetch from wiping an in-progress draft.
- Add aria-label to the bundle-import and per-file editor textareas
  (control-has-associated-label).

Generated-By: PostHog Code
Task-Id: 3d7de9b7-6d82-4868-b49b-7bb5f3029b24

Author: dmarticus

packages/ui/src/features/agent-applications/components/AgentBundleImportDialog.test.ts

@@ -1,5 +1,8 @@
 import { describe, expect, it } from "vitest";
-import { type ParsedBundle, parseBundleInput } from "./AgentBundleImportDialog";
+import {
+  type ParsedBundle,
+  parseBundleInput,
+} from "../utils/parseBundleInput";
 
 type Expected =
   | { ok: true; value: ParsedBundle }

packages/ui/src/features/agent-applications/components/AgentBundleImportDialog.tsx

@@ -3,73 +3,7 @@ import { Button } from "@posthog/ui/primitives/Button";
 import { Dialog, Flex, Text } from "@radix-ui/themes";
 import { useMemo, useState } from "react";
 import { useImportAgentDraftBundle } from "../hooks/useImportAgentDraftBundle";
-
-const HEADER_RE = /^---\s*(.+?)\s*---\s*$/;
-const SKILL_PATH_RE = /^skills\/([a-z0-9-]+)\/SKILL\.md$/;
-
-export interface ParsedBundle {
-  agent_md?: string;
-  skills?: { id: string; body: string }[];
-}
-
-/**
- * Splits a fenced paste — alternating `--- <path> ---` headers and bodies —
- * into the import payload the server accepts. The format is deliberately
- * simple so the source files can be cat'd together as-is; only `agent.md`
- * and `skills/<id>/SKILL.md` are recognised.
- */
-export function parseBundleInput(
-  input: string,
-): { ok: true; value: ParsedBundle } | { ok: false; error: string } {
-  const lines = input.replace(/\r\n/g, "\n").split("\n");
-  const value: ParsedBundle = {};
-  let current: { kind: "agent" } | { kind: "skill"; id: string } | null = null;
-  let buf: string[] = [];
-
-  const flush = () => {
-    if (!current) return;
-    const content = buf.join("\n").replace(/^\n+|\n+$/g, "");
-    if (current.kind === "agent") {
-      value.agent_md = content;
-    } else {
-      if (!value.skills) value.skills = [];
-      value.skills.push({ id: current.id, body: content });
-    }
-  };
-
-  for (const line of lines) {
-    const m = HEADER_RE.exec(line);
-    if (m) {
-      flush();
-      buf = [];
-      const path = m[1];
-      if (path === "agent.md") {
-        current = { kind: "agent" };
-      } else {
-        const skill = SKILL_PATH_RE.exec(path);
-        if (!skill) {
-          return {
-            ok: false,
-            error: `Unsupported file path: "${path}". Use "agent.md" or "skills/<id>/SKILL.md".`,
-          };
-        }
-        current = { kind: "skill", id: skill[1] };
-      }
-      continue;
-    }
-    if (current) buf.push(line);
-  }
-  flush();
-
-  if (value.agent_md === undefined && !value.skills?.length) {
-    return {
-      ok: false,
-      error:
-        "Nothing to import. Add at least one `--- agent.md ---` or `--- skills/<id>/SKILL.md ---` block.",
-    };
-  }
-  return { ok: true, value };
-}
+import { parseBundleInput } from "../utils/parseBundleInput";
 
 const SAMPLE = `--- agent.md ---
 You are the growth review agent. …
@@ -147,6 +81,7 @@ export function AgentBundleImportDialog({
           skills are overwritten by id; new ids are added.
         </Dialog.Description>
         <textarea
+          aria-label="Markdown bundle"
           value={input}
           onChange={(e) => setInput(e.currentTarget.value)}
           placeholder={SAMPLE}

packages/ui/src/features/agent-applications/components/AgentConfigurationPane.tsx

@@ -39,13 +39,7 @@ import { Button } from "@posthog/ui/primitives/Button";
 import { CodeBlock } from "@posthog/ui/primitives/CodeBlock";
 import { toast } from "@posthog/ui/primitives/toast";
 import { Flex, Select, Switch, Text } from "@radix-ui/themes";
-import {
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { type ReactNode, useCallback, useMemo, useState } from "react";
 import { useAgentApplication } from "../hooks/useAgentApplication";
 import { useAgentEnvKeys } from "../hooks/useAgentEnvKeys";
 import { useAgentRevision } from "../hooks/useAgentRevision";
@@ -2245,18 +2239,21 @@ function EditableMarkdownBody({
   const initial = file?.content ?? "";
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(initial);
+  const [syncedInitial, setSyncedInitial] = useState(initial);
   const mutation = useUpdateAgentDraftBundleFile(
     editable.idOrSlug,
     editable.revisionId,
   );
 
-  // Pull in upstream content changes (initial bundle load, post-save refetch),
-  // but only while the user isn't actively editing — otherwise an unrelated
-  // refetch (e.g. a concurrent bulk import) would silently wipe their draft.
-  // File-switch resets are handled by `key={editable.path}` at the call site.
-  useEffect(() => {
-    if (!editing) setDraft(initial);
-  }, [initial, editing]);
+  // Pull in upstream content changes (initial bundle load, post-save refetch)
+  // during render rather than via an effect, but only while the user isn't
+  // actively editing — otherwise an unrelated refetch (e.g. a concurrent bulk
+  // import) would silently wipe their draft. File-switch resets are handled by
+  // `key={editable.path}` at the call site.
+  if (initial !== syncedInitial && !editing) {
+    setSyncedInitial(initial);
+    setDraft(initial);
+  }
 
   if (!editing) {
     return (
@@ -2285,6 +2282,7 @@ function EditableMarkdownBody({
   return (
     <Flex direction="column" gap="2">
       <textarea
+        aria-label={editable.path}
         value={draft}
         onChange={(e) => setDraft(e.currentTarget.value)}
         disabled={mutation.isPending}

packages/ui/src/features/agent-applications/utils/parseBundleInput.ts

@@ -0,0 +1,66 @@
+const HEADER_RE = /^---\s*(.+?)\s*---\s*$/;
+const SKILL_PATH_RE = /^skills\/([a-z0-9-]+)\/SKILL\.md$/;
+
+export interface ParsedBundle {
+  agent_md?: string;
+  skills?: { id: string; body: string }[];
+}
+
+/**
+ * Splits a fenced paste — alternating `--- <path> ---` headers and bodies —
+ * into the import payload the server accepts. The format is deliberately
+ * simple so the source files can be cat'd together as-is; only `agent.md`
+ * and `skills/<id>/SKILL.md` are recognised.
+ */
+export function parseBundleInput(
+  input: string,
+): { ok: true; value: ParsedBundle } | { ok: false; error: string } {
+  const lines = input.replace(/\r\n/g, "\n").split("\n");
+  const value: ParsedBundle = {};
+  let current: { kind: "agent" } | { kind: "skill"; id: string } | null = null;
+  let buf: string[] = [];
+
+  const flush = () => {
+    if (!current) return;
+    const content = buf.join("\n").replace(/^\n+|\n+$/g, "");
+    if (current.kind === "agent") {
+      value.agent_md = content;
+    } else {
+      if (!value.skills) value.skills = [];
+      value.skills.push({ id: current.id, body: content });
+    }
+  };
+
+  for (const line of lines) {
+    const m = HEADER_RE.exec(line);
+    if (m) {
+      flush();
+      buf = [];
+      const path = m[1];
+      if (path === "agent.md") {
+        current = { kind: "agent" };
+      } else {
+        const skill = SKILL_PATH_RE.exec(path);
+        if (!skill) {
+          return {
+            ok: false,
+            error: `Unsupported file path: "${path}". Use "agent.md" or "skills/<id>/SKILL.md".`,
+          };
+        }
+        current = { kind: "skill", id: skill[1] };
+      }
+      continue;
+    }
+    if (current) buf.push(line);
+  }
+  flush();
+
+  if (value.agent_md === undefined && !value.skills?.length) {
+    return {
+      ok: false,
+      error:
+        "Nothing to import. Add at least one `--- agent.md ---` or `--- skills/<id>/SKILL.md ---` block.",
+    };
+  }
+  return { ok: true, value };
+}