Use shared sidebar actions and extract agent name field

Signed-off-by: Arjun Mahanti <arjun@squareup.com>

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}

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>
+  );
+}

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>