replace square stop icon with stop circle

Author: charlesvien

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

@@ -1,4 +1,4 @@
-import { ArrowUp, Stop } from "@phosphor-icons/react";
+import { ArrowUp, StopCircle } from "@phosphor-icons/react";
 import {
   InputGroup,
   InputGroupAddon,
@@ -179,7 +179,7 @@ function Composer({
                   onClick={onCancel}
                   aria-label="Stop"
                 >
-                  <Stop size={14} weight="fill" />
+                  <StopCircle size={14} weight="fill" />
                 </InputGroupButton>
               </Tooltip>
             ) : (

packages/ui/src/features/autoresearch/AutoresearchPanel.tsx

@@ -1,4 +1,10 @@
-import { ChartLineUp, Pause, Play, Plus, Stop } from "@phosphor-icons/react";
+import {
+  ChartLineUp,
+  Pause,
+  Play,
+  Plus,
+  StopCircle,
+} from "@phosphor-icons/react";
 import type { AutoresearchService } from "@posthog/core/autoresearch/autoresearch";
 import { AUTORESEARCH_SERVICE } from "@posthog/core/autoresearch/identifiers";
 import type {
@@ -344,7 +350,7 @@ function RunHeader({
               color="red"
               onClick={() => service.stopRun(run.id)}
             >
-              <Stop size={12} /> Stop
+              <StopCircle size={12} /> Stop
             </Button>
           )}
           {!isLive && (

packages/ui/src/features/message-editor/components/PromptInput.tsx

@@ -1,6 +1,6 @@
 import "./message-editor.css";
 import type { SessionConfigOption } from "@agentclientprotocol/sdk";
-import { ArrowUp, Stop } from "@phosphor-icons/react";
+import { ArrowUp, StopCircle } from "@phosphor-icons/react";
 import { InputGroup, InputGroupAddon, InputGroupButton } from "@posthog/quill";
 import { SHORTCUTS } from "@posthog/ui/features/command/keyboard-shortcuts";
 import type { PromptRecallHandler } from "@posthog/ui/features/sessions/components/chat-thread/composerPromptRecall";
@@ -366,7 +366,7 @@ export const PromptInput = forwardRef<EditorHandle, PromptInputProps>(
           onClick={onCancel}
           aria-label="Stop"
         >
-          <Stop size={14} weight="fill" />
+          <StopCircle size={14} weight="fill" />
         </InputGroupButton>
       </Tooltip>
     ) : slotMachineMode ? null : (

packages/ui/src/features/sessions/components/StopCloudRunButton.tsx

@@ -1,4 +1,4 @@
-import { Spinner, Stop } from "@phosphor-icons/react";
+import { Spinner, StopCircle } from "@phosphor-icons/react";
 import { isTerminalStatus } from "@posthog/core/cloud-task/schemas";
 import { Button as QuillButton } from "@posthog/quill";
 import { useState } from "react";
@@ -36,7 +36,7 @@ export function StopCloudRunButton({ taskId }: StopCloudRunButtonProps) {
           {stopRequested ? (
             <Spinner size={14} className="shrink-0 animate-spin" />
           ) : (
-            <Stop size={14} weight="regular" className="shrink-0" />
+            <StopCircle size={14} weight="regular" className="shrink-0" />
           )}
           {stopRequested ? "Stopping..." : "Stop run"}
         </QuillButton>

packages/ui/src/features/sessions/components/StopCloudRunDialog.tsx

@@ -1,4 +1,4 @@
-import { Stop } from "@phosphor-icons/react";
+import { StopCircle } from "@phosphor-icons/react";
 import {
   SESSION_SERVICE,
   type SessionService,
@@ -58,7 +58,7 @@ export function StopCloudRunDialog({
     <GitDialog
       open={open}
       onOpenChange={handleOpenChange}
-      icon={<Stop size={14} />}
+      icon={<StopCircle size={14} />}
       title={title}
       error={error}
       buttonLabel={buttonLabel}

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

@@ -1,4 +1,4 @@
-import { CheckCircle, Stop, XCircle } from "@phosphor-icons/react";
+import { CheckCircle, StopCircle, XCircle } from "@phosphor-icons/react";
 import { Box, Flex, Text } from "@radix-ui/themes";
 
 interface TaskNotificationViewProps {
@@ -18,7 +18,7 @@ const statusConfig = {
     borderColor: "border-red-6 dark:border-red-8",
   },
   stopped: {
-    icon: <Stop size={14} weight="fill" className="text-orange-9" />,
+    icon: <StopCircle size={14} weight="fill" className="text-orange-9" />,
     label: "Task stopped",
     borderColor: "border-orange-6 dark:border-orange-8",
   },

packages/ui/src/features/settings/sections/AddCustomSoundDialog.tsx

@@ -3,7 +3,7 @@ import {
   Microphone,
   Play,
   Scissors,
-  Stop,
+  StopCircle,
   Trash,
   UploadSimple,
 } from "@phosphor-icons/react";
@@ -66,7 +66,7 @@ export function AddCustomSoundDialog({
             <Flex gap="2" align="center" wrap="wrap">
               {sound.isRecording ? (
                 <Button color="red" onClick={sound.stopRecording}>
-                  <Stop weight="fill" /> Stop ({sound.elapsedLabel})
+                  <StopCircle weight="fill" /> Stop ({sound.elapsedLabel})
                 </Button>
               ) : (
                 <Button