From 2702c4f67a0b4e99cae75ddfc505ecdd97272cb8 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Wed, 16 Sep 2026 10:44:57 -0400
Subject: [PATCH] Use shared sidebar actions and extract agent name field

Signed-off-by: Arjun Mahanti <arjun@squareup.com>
---
 .../agents/ui/AgentInstanceEditDialog.tsx     | 33 +++-----------
 .../features/agents/ui/EditAgentNameField.tsx | 45 +++++++++++++++++++
 .../pulse/ui/MessagesSidebarSection.tsx       |  9 ++--
 3 files changed, 57 insertions(+), 30 deletions(-)
 create mode 100644 desktop/src/features/agents/ui/EditAgentNameField.tsx

diff --git a/desktop/src/features/agents/ui/AgentInstanceEditDialog.tsx b/desktop/src/features/agents/ui/AgentInstanceEditDialog.tsx
index 676733ebb9..e9c6b2da16 100644
--- a/desktop/src/features/agents/ui/AgentInstanceEditDialog.tsx
+++ b/desktop/src/features/agents/ui/AgentInstanceEditDialog.tsx
@@ -68,6 +68,7 @@ import {
   selectionOnRuntimeChange,
   type RuntimeModelProviderSelection,
 } from "./runtimeModelProviderSelection";
+import { EditAgentNameField } from "./EditAgentNameField";
 import { AgentCreationPreview } from "./AgentCreationPreview";
 import { OwnerOnlyAccessField } from "./OwnerOnlyAccessField";
 import type { EnvVarsValue } from "./EnvVarsEditor";
@@ -975,33 +976,11 @@ export function AgentInstanceEditDialog({
             )}
           </div>
           <div className="space-y-5">
-            <div className="space-y-1.5">
-              <BlockLabel
-                className="text-sm font-medium text-foreground"
-                htmlFor="edit-agent-name"
-              >
-                Agent name
-              </BlockLabel>
-              <div
-                className={cn(
-                  "flex min-h-11 items-center px-3",
-                  PERSONA_FIELD_SHELL_CLASS,
-                )}
-              >
-                <Input
-                  autoCorrect="off"
-                  className={cn(
-                    "h-8 px-0 py-0 leading-6",
-                    PERSONA_FIELD_CONTROL_CLASS,
-                  )}
-                  disabled={isSaving}
-                  id="edit-agent-name"
-                  onChange={(event) => setName(event.target.value)}
-                  placeholder="Agent name"
-                  value={name}
-                />
-              </div>
-            </div>
+            <EditAgentNameField
+              disabled={isSaving}
+              value={name}
+              onChange={setName}
+            />
             <OwnerOnlyAccessField
               accessLocked={agentAccessOwnerOnly === true}
               allowlist={respondToAllowlist}
diff --git a/desktop/src/features/agents/ui/EditAgentNameField.tsx b/desktop/src/features/agents/ui/EditAgentNameField.tsx
new file mode 100644
index 0000000000..6b9fa23768
--- /dev/null
+++ b/desktop/src/features/agents/ui/EditAgentNameField.tsx
@@ -0,0 +1,45 @@
+import { Label as BlockLabel } from "@/shared/blockui/components/label";
+import { cn } from "@/shared/lib/cn";
+import { Input } from "@/shared/ui/input";
+import {
+  PERSONA_FIELD_CONTROL_CLASS,
+  PERSONA_FIELD_SHELL_CLASS,
+} from "./agentConfigOptions";
+
+/** Agent identity name field with the shared form styling. */
+export function EditAgentNameField({
+  disabled,
+  value,
+  onChange,
+}: {
+  disabled: boolean;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <BlockLabel
+        className="text-sm font-medium text-foreground"
+        htmlFor="edit-agent-name"
+      >
+        Agent name
+      </BlockLabel>
+      <div
+        className={cn(
+          "flex min-h-11 items-center px-3",
+          PERSONA_FIELD_SHELL_CLASS,
+        )}
+      >
+        <Input
+          autoCorrect="off"
+          className={cn("h-8 px-0 py-0 leading-6", PERSONA_FIELD_CONTROL_CLASS)}
+          disabled={disabled}
+          id="edit-agent-name"
+          onChange={(event) => onChange(event.target.value)}
+          placeholder="Agent name"
+          value={value}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/desktop/src/features/pulse/ui/MessagesSidebarSection.tsx b/desktop/src/features/pulse/ui/MessagesSidebarSection.tsx
index 1a39d2cbea..6a11fa60c6 100644
--- a/desktop/src/features/pulse/ui/MessagesSidebarSection.tsx
+++ b/desktop/src/features/pulse/ui/MessagesSidebarSection.tsx
@@ -2,6 +2,7 @@ import { useState, type ReactNode } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "@/shared/lib/cn";
 import { StatusEmoji } from "@/features/user-status/ui/StatusEmoji";
+import { Button } from "@/shared/ui/button";
 
 /** Collapsible classic section, using the same capsule rows as Recents. */
 export function MessagesSidebarSection({
@@ -23,9 +24,11 @@ export function MessagesSidebarSection({
       aria-label={name}
     >
       <h3>
-        <button
+        <Button
           type="button"
-          className="mb-2 flex w-full items-center gap-2 rounded-full px-4 py-2 text-left text-xs font-medium text-muted-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          variant="ghost"
+          size="sm"
+          className="mb-2 h-auto w-full justify-start gap-2 rounded-full px-4 py-2 text-left text-xs font-medium text-muted-foreground hover:bg-muted"
           aria-expanded={open}
           onClick={() => setOpen(!open)}
         >
@@ -39,7 +42,7 @@ export function MessagesSidebarSection({
             </span>
           )}
           <span className="truncate">{name}</span>
-        </button>
+        </Button>
       </h3>
       {open && children}
     </section>