feat(chat): setting to keep the agent plan overlay collapsed

Author: Adam-Dalloul

src/components/chat/agent-plan-overlay.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react"
 import { NextIntlClientProvider } from "next-intl"
-import { describe, expect, it } from "vitest"
+import { afterEach, describe, expect, it } from "vitest"
 
 import { AgentPlanOverlay } from "./agent-plan-overlay"
 import enMessages from "@/i18n/messages/en.json"
@@ -22,6 +22,10 @@ const sampleEntries: PlanEntryInfo[] = [
 ]
 
 describe("AgentPlanOverlay", () => {
+  afterEach(() => {
+    window.localStorage.removeItem("codeg-plan-overlay-auto-expand")
+  })
+
   it("renders nothing when entries are empty", () => {
     const { container } = renderWithIntl(
       <AgentPlanOverlay entries={[]} planKey="p-empty" />
@@ -117,6 +121,37 @@ describe("AgentPlanOverlay", () => {
     expect(screen.getByText("Done A")).toBeInTheDocument()
   })
 
+  it("stays collapsed when auto-expand is turned off", () => {
+    window.localStorage.setItem("codeg-plan-overlay-auto-expand", "0")
+    const noPlan = {
+      id: "live-off",
+      content: [{ type: "text", text: "working" }],
+    } as unknown as LiveMessage
+    const withPlan = {
+      id: "live-off",
+      content: [
+        { type: "text", text: "working" },
+        {
+          type: "plan",
+          entries: [
+            { content: "Build step", priority: "high", status: "in_progress" },
+          ],
+        },
+      ],
+    } as unknown as LiveMessage
+
+    const { rerender } = renderWithIntl(
+      <AgentPlanOverlay message={noPlan} isStreaming />
+    )
+    rerender(
+      <NextIntlClientProvider locale="en" messages={enMessages}>
+        <AgentPlanOverlay message={withPlan} isStreaming />
+      </NextIntlClientProvider>
+    )
+    expect(screen.getByText("Plan 0/1")).toBeInTheDocument()
+    expect(screen.queryByText("Build step")).not.toBeInTheDocument()
+  })
+
   it("auto-expands once when a plan is created live while streaming", () => {
     // Streaming starts with no plan, then a plan_update lands. The overlay
     // should pop open by itself the first time the plan appears.

src/components/chat/agent-plan-overlay.tsx

@@ -13,6 +13,7 @@ import { Button } from "@/components/ui/button"
 import type { LiveMessage } from "@/contexts/acp-connections-context"
 import type { PlanEntryInfo } from "@/lib/types"
 import { cn } from "@/lib/utils"
+import { usePlanOverlayAutoExpand } from "@/hooks/use-plan-overlay-auto-expand"
 import {
   CheckCircle2Icon,
   ChevronDownIcon,
@@ -70,6 +71,7 @@ export const AgentPlanOverlay = memo(function AgentPlanOverlay({
   isStreaming = false,
 }: AgentPlanOverlayProps) {
   const t = useTranslations("Folder.chat.agentPlanOverlay")
+  const { autoExpand } = usePlanOverlayAutoExpand()
   const liveEntries = useMemo(
     () => getLatestPlanEntries(message ?? null),
     [message]
@@ -114,6 +116,7 @@ export const AgentPlanOverlay = memo(function AgentPlanOverlay({
   const [autoExpanded, setAutoExpanded] = useState(false)
   if (prevLiveHadPlan !== liveHasPlan) {
     const planCreatedLive =
+      autoExpand &&
       prevLiveHadPlan === false &&
       liveHasPlan &&
       isStreaming &&

src/components/settings/appearance-settings.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { LayoutGrid, Monitor, Moon, Sun, Type } from "lucide-react"
+import { LayoutGrid, ListTodo, Monitor, Moon, Sun, Type } from "lucide-react"
 import { useTranslations } from "next-intl"
 import { useTheme } from "next-themes"
 import { ScrollArea } from "@/components/ui/scroll-area"
@@ -30,6 +30,7 @@ import { PetManagerSection } from "./pet-manager-section"
 import { FontSettingsSection } from "./font-settings-section"
 import { WorkspaceBackgroundSection } from "./workspace-background-section"
 import { CustomStyleSection } from "./custom-style-section"
+import { usePlanOverlayAutoExpand } from "@/hooks/use-plan-overlay-auto-expand"
 
 type ThemeMode = "system" | "light" | "dark"
 
@@ -40,6 +41,8 @@ export function AppearanceSettings() {
   const { zoomLevel, setZoomLevel } = useZoomLevel()
   const { showWelcomeQuickActions, setShowWelcomeQuickActions } =
     useWelcomeQuickActions()
+  const { autoExpand: autoExpandPlan, setAutoExpand: setAutoExpandPlan } =
+    usePlanOverlayAutoExpand()
 
   const resolvedThemeLabel =
     resolvedTheme === "dark"
@@ -238,6 +241,30 @@ export function AppearanceSettings() {
           </label>
         </section>
 
+        {/* ===== Conversation overlays ===== */}
+        <section className="rounded-xl border bg-card p-4 space-y-4">
+          <div className="flex items-center gap-2">
+            <ListTodo className="h-4 w-4 text-muted-foreground" />
+            <h2 className="text-sm font-semibold">
+              {t("planOverlay.sectionTitle")}
+            </h2>
+          </div>
+
+          <p className="text-xs text-muted-foreground leading-5">
+            {t("planOverlay.sectionDescription")}
+          </p>
+
+          <label className="flex items-center gap-2">
+            <Switch
+              checked={autoExpandPlan}
+              onCheckedChange={setAutoExpandPlan}
+            />
+            <span className="text-xs text-muted-foreground">
+              {t("planOverlay.autoExpand")}
+            </span>
+          </label>
+        </section>
+
         {/* ===== Desktop Pet ===== */}
         <PetManagerSection />
       </div>

src/hooks/use-plan-overlay-auto-expand.ts

@@ -0,0 +1,38 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+
+import {
+  PLAN_OVERLAY_AUTO_EXPAND_EVENT,
+  STORAGE_KEY_PLAN_OVERLAY_AUTO_EXPAND,
+  readPlanOverlayAutoExpand,
+  writePlanOverlayAutoExpand,
+} from "@/lib/plan-overlay-prefs"
+
+export function usePlanOverlayAutoExpand(): {
+  autoExpand: boolean
+  setAutoExpand: (on: boolean) => void
+} {
+  const [autoExpand, setAutoExpandState] = useState(readPlanOverlayAutoExpand)
+
+  useEffect(() => {
+    const sync = () => setAutoExpandState(readPlanOverlayAutoExpand())
+    const onStorage = (event: StorageEvent) => {
+      if (event.key && event.key !== STORAGE_KEY_PLAN_OVERLAY_AUTO_EXPAND) return
+      sync()
+    }
+    window.addEventListener("storage", onStorage)
+    window.addEventListener(PLAN_OVERLAY_AUTO_EXPAND_EVENT, sync)
+    return () => {
+      window.removeEventListener("storage", onStorage)
+      window.removeEventListener(PLAN_OVERLAY_AUTO_EXPAND_EVENT, sync)
+    }
+  }, [])
+
+  const setAutoExpand = useCallback((on: boolean) => {
+    setAutoExpandState(on)
+    writePlanOverlayAutoExpand(on)
+  }, [])
+
+  return { autoExpand, setAutoExpand }
+}

src/i18n/messages/ar.json

@@ -173,6 +173,11 @@
       "sectionDescription": "بطاقات الاختصار «تطوير الكود / الأعمال المكتبية» التي تظهر أعلى مربع الإدخال في صفحة المحادثة الجديدة.",
       "showQuickActions": "العرض في صفحة المحادثة الجديدة"
     },
+    "planOverlay": {
+      "sectionTitle": "Agent plan",
+      "sectionDescription": "The floating plan card that appears on the left of a conversation when an agent writes a to-do list. You can always open it from the small chip.",
+      "autoExpand": "Open the plan card when an agent starts a plan"
+    },
     "workspaceBackground": {
       "sectionTitle": "خلفية مساحة العمل",
       "sectionDescription": "عرض صورة خلف مساحة العمل بالكامل. يصبح الشريط الجانبي واللوحات شبه شفافة ومصنفرة لتظهر الصورة من خلالها، ويحافظ القناع على وضوح النص.",

src/i18n/messages/de.json

@@ -173,6 +173,11 @@
       "sectionDescription": "Die Shortcut-Karten „Code-Entwicklung / Büroarbeit“ über dem Eingabefeld auf der Seite für eine neue Konversation.",
       "showQuickActions": "Auf der Seite für neue Konversationen anzeigen"
     },
+    "planOverlay": {
+      "sectionTitle": "Agent plan",
+      "sectionDescription": "The floating plan card that appears on the left of a conversation when an agent writes a to-do list. You can always open it from the small chip.",
+      "autoExpand": "Open the plan card when an agent starts a plan"
+    },
     "workspaceBackground": {
       "sectionTitle": "Arbeitsbereich-Hintergrund",
       "sectionDescription": "Zeigt ein Bild hinter dem gesamten Arbeitsbereich. Seitenleiste und Panels werden durchscheinend und mattiert, sodass das Bild durchscheint, und eine Maske sorgt für lesbaren Text.",

src/i18n/messages/en.json

@@ -173,6 +173,11 @@
       "sectionDescription": "The Code Development / Office Work shortcut cards shown above the composer on the new conversation page.",
       "showQuickActions": "Show on the new conversation page"
     },
+    "planOverlay": {
+      "sectionTitle": "Agent plan",
+      "sectionDescription": "The floating plan card that appears on the left of a conversation when an agent writes a to-do list. You can always open it from the small chip.",
+      "autoExpand": "Open the plan card when an agent starts a plan"
+    },
     "workspaceBackground": {
       "sectionTitle": "Workspace background",
       "sectionDescription": "Show a picture behind the whole workspace. Sidebar and panels turn translucent and frosted so the image shows through, and a mask keeps text readable.",

src/i18n/messages/es.json

@@ -173,6 +173,11 @@
       "sectionDescription": "Las tarjetas de acceso rápido «Desarrollo de código / Ofimática» que se muestran sobre el editor en la página de nueva conversación.",
       "showQuickActions": "Mostrar en la página de nueva conversación"
     },
+    "planOverlay": {
+      "sectionTitle": "Agent plan",
+      "sectionDescription": "The floating plan card that appears on the left of a conversation when an agent writes a to-do list. You can always open it from the small chip.",
+      "autoExpand": "Open the plan card when an agent starts a plan"
+    },
     "workspaceBackground": {
       "sectionTitle": "Fondo del espacio de trabajo",
       "sectionDescription": "Muestra una imagen detrás de todo el espacio de trabajo. La barra lateral y los paneles se vuelven translúcidos y esmerilados para dejar ver la imagen, y una máscara mantiene el texto legible.",

src/i18n/messages/fr.json

@@ -173,6 +173,11 @@
       "sectionDescription": "Les cartes de raccourci « Développement / Bureautique » affichées au-dessus du champ de saisie sur la page de nouvelle conversation.",
       "showQuickActions": "Afficher sur la page de nouvelle conversation"
     },
+    "planOverlay": {
+      "sectionTitle": "Agent plan",
+      "sectionDescription": "The floating plan card that appears on the left of a conversation when an agent writes a to-do list. You can always open it from the small chip.",
+      "autoExpand": "Open the plan card when an agent starts a plan"
+    },
     "workspaceBackground": {
       "sectionTitle": "Arrière-plan de l'espace de travail",
       "sectionDescription": "Affiche une image derrière tout l'espace de travail. La barre latérale et les panneaux deviennent translucides et dépolis pour laisser transparaître l'image, et un masque préserve la lisibilité du texte.",

src/i18n/messages/ja.json

@@ -173,6 +173,11 @@
       "sectionDescription": "新しい会話ページで入力欄の上に表示される「コード開発 / 日常業務」のショートカットカードです。",
       "showQuickActions": "新しい会話ページに表示する"
     },
+    "planOverlay": {
+      "sectionTitle": "Agent plan",
+      "sectionDescription": "The floating plan card that appears on the left of a conversation when an agent writes a to-do list. You can always open it from the small chip.",
+      "autoExpand": "Open the plan card when an agent starts a plan"
+    },
     "workspaceBackground": {
       "sectionTitle": "ワークスペースの背景",
       "sectionDescription": "ワークスペース全体の背後に画像を表示します。サイドバーやパネルは半透明のすりガラスになり画像が透けて見えます。マスクで文字の可読性を保ちます。",