refactor(ui): reuse EMCN icons for simple product glyphs (#8016)

* refactor(ui): reuse EMCN icons for simple product glyphs

* docs(emcn): add CircleStop usage example

---------

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

Author: BillLeoutsakosvl346

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/index.ts

@@ -4,4 +4,3 @@ export type {
   NestedAgentGroup,
 } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view'
 export { isAgentGroupResolved } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view'
-export { CircleStop } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item'

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx

@@ -26,22 +26,6 @@ import { BrandIcon } from '@/blocks/brand-icon'
 import { useCustomBlockOverlayVersion } from '@/blocks/custom/client-overlay'
 import { getBlockByToolName } from '@/blocks/registry'
 
-export function CircleStop({ className }: { className?: string }) {
-  return (
-    <svg
-      width='16'
-      height='16'
-      viewBox='0 0 16 16'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <circle cx='8' cy='8' r='6.5' stroke='currentColor' strokeWidth='1.25' />
-      <rect x='6' y='6' width='4' height='4' rx='0.5' fill='currentColor' />
-    </svg>
-  )
-}
-
 export interface ToolCallItemProps {
   toolName: string
   displayTitle: string

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/index.ts

@@ -1,5 +1,5 @@
 export type { AgentGroupItem, NestedAgentGroup } from './agent-group'
-export { AgentGroup, CircleStop, isAgentGroupResolved } from './agent-group'
+export { AgentGroup, isAgentGroupResolved } from './agent-group'
 export { ChatContent } from './chat-content'
 export { MessageSources } from './message-sources'
 export { Options } from './options'

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx

@@ -2,7 +2,14 @@
 
 import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 import { cn, Expandable, ExpandableContent, SecretReveal, Tooltip, toast } from '@sim/emcn'
-import { ArrowRight, Check, ChevronDown, SquareArrowUpRight, TerminalWindow } from '@sim/emcn/icons'
+import {
+  ArrowRight,
+  Check,
+  ChevronDown,
+  Lock,
+  SquareArrowUpRight,
+  TerminalWindow,
+} from '@sim/emcn/icons'
 import { isRecordLike } from '@sim/utils/object'
 import { useParams } from 'next/navigation'
 import { useSession } from '@/lib/auth/auth-client'
@@ -1986,24 +1993,6 @@ function getCredentialProviderDisplayName(provider: string): string {
   )
 }
 
-const LockIcon = (props: { className?: string }) => (
-  <svg
-    className={props.className}
-    viewBox='0 0 16 16'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-  >
-    <rect x='2' y='5' width='12' height='8' rx='1.5' stroke='currentColor' strokeWidth='1.3' />
-    <path
-      d='M5 5V3.5a3 3 0 1 1 6 0V5'
-      stroke='currentColor'
-      strokeWidth='1.3'
-      strokeLinecap='round'
-    />
-    <circle cx='8' cy='9.5' r='1.25' fill='currentColor' />
-  </svg>
-)
-
 /**
  * Inline "paste a secret" widget rendered for
  * `<credential>{"type":"secret_input","name":"OPENAI_API_KEY"}</credential>`.
@@ -2484,7 +2473,7 @@ function CredentialLinkDisplay({
   // The connect link value comes from the streamed model output, so only
   // render it as a clickable link when it resolves to a real http(s) URL.
   if (!data.value || !isSafeHttpUrl(data.value)) return null
-  const Icon = getCredentialIcon(data.provider) ?? LockIcon
+  const Icon = getCredentialIcon(data.provider) ?? Lock
   const label = reconnectCredentialId
     ? `Reconnect ${reconnectCredential?.displayName ?? integrationName}`
     : hasExistingCredential
@@ -2550,7 +2539,7 @@ function PersonalCredentialLinkDisplay({
     onConnected,
   })
   if (!provider || (provider.toLowerCase() === 'gitlab' && !canEdit)) return null
-  const Icon = getCredentialIcon(provider) ?? LockIcon
+  const Icon = getCredentialIcon(provider) ?? Lock
   const connected = connection.status === 'connected'
   const label = connected
     ? `Connected ${name}`

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content-overlay.test.tsx

@@ -31,7 +31,6 @@ vi.mock('./components', () => ({
     </div>
   ),
   ChatContent: () => null,
-  CircleStop: () => null,
   Options: () => null,
   PendingTagIndicator: () => null,
 }))

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx

@@ -11,6 +11,7 @@ import {
   useState,
 } from 'react'
 import { cn } from '@sim/emcn'
+import { CircleStop } from '@sim/emcn/icons'
 import { PrepareFileEdit, Read as ReadTool } from '@/lib/copilot/generated/tool-catalog-v1'
 import { isToolHiddenInUi } from '@/lib/copilot/tools/client/hidden-tools'
 import { resolveToolDisplay } from '@/lib/copilot/tools/client/store-utils'
@@ -40,14 +41,7 @@ import type {
 import { SUBAGENT_LABELS } from '@/app/workspace/[workspaceId]/home/types'
 import { useCustomBlockOverlayVersion } from '@/blocks/custom/client-overlay'
 import type { AgentGroupItem } from './components'
-import {
-  AgentGroup,
-  ChatContent,
-  CircleStop,
-  MessageSources,
-  Options,
-  PendingTagIndicator,
-} from './components'
+import { AgentGroup, ChatContent, MessageSources, Options, PendingTagIndicator } from './components'
 import { deriveMessagePhase, isToolDone, type MessagePhase } from './utils'
 
 const FILE_SUBAGENT_ID = 'file'

apps/sim/app/workspace/[workspaceId]/upgrade/components/comparison-table/comparison-table.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { chipVariants, cn } from '@sim/emcn'
+import { Check } from '@sim/emcn/icons'
 import { SlackIcon } from '@/components/icons'
 import { BillingPeriodToggle } from '@/app/workspace/[workspaceId]/upgrade/components/billing-period-toggle/billing-period-toggle'
 import {
@@ -54,38 +55,14 @@ export interface ComparisonTableProps {
   ctas: Partial<Record<PlanName, ComparisonPlanCta>>
 }
 
-/**
- * Inline check icon — matches the card-level `CheckIcon` shape.
- */
-function CheckIcon() {
-  return (
-    <svg
-      width='14'
-      height='14'
-      viewBox='0 0 14 14'
-      fill='none'
-      aria-hidden='true'
-      className='size-[14px] shrink-0'
-    >
-      <path
-        d='M2.5 7L5.5 10L11.5 4'
-        stroke='currentColor'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}
-
 /**
  * Renders a single cell value: `true` → check icon, `false` → em-dash, string → text.
  */
 function Cell({ value }: { value: CellValue }) {
   if (value === true) {
     return (
       <span className='flex justify-center text-[var(--text-primary)]'>
-        <CheckIcon />
+        <Check className='size-[14px] shrink-0' />
       </span>
     )
   }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx

@@ -12,6 +12,7 @@ import {
   PopoverSection,
   usePopoverContext,
 } from '@sim/emcn'
+import { ChevronLeft } from '@sim/emcn/icons'
 import {
   getEffectiveBlockOutputType,
   getOutputPathsFromSchema,
@@ -862,14 +863,7 @@ const TagDropdownBackButton: React.FC<{ setSelectedIndex: (index: number) => voi
       }}
       onMouseEnter={handleMouseEnter}
     >
-      <svg
-        className={cn('shrink-0', size === 'sm' ? 'size-3' : 'h-3.5 w-3.5')}
-        fill='none'
-        viewBox='0 0 24 24'
-        stroke='currentColor'
-      >
-        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M15 19l-7-7 7-7' />
-      </svg>
+      <ChevronLeft className={cn('shrink-0', size === 'sm' ? 'size-3' : 'size-3.5')} />
       <span className='shrink-0'>Back</span>
     </PopoverItem>
   )

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx

@@ -11,7 +11,7 @@ import {
   Textarea,
   Tooltip,
 } from '@sim/emcn'
-import { ArrowLeftRight, Plus, Trash } from '@sim/emcn/icons'
+import { ArrowLeftRight, FileText, Plus, Trash } from '@sim/emcn/icons'
 import { generateId } from '@sim/utils/id'
 import { useParams } from 'next/navigation'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -336,19 +336,7 @@ export function VariablesInput({
   if (isPreview && (!assignments || assignments.length === 0)) {
     return (
       <div className='flex flex-col items-center justify-center rounded-md border border-border/40 bg-muted/20 py-8 text-center'>
-        <svg
-          className='mb-3 size-10 text-muted-foreground/40'
-          fill='none'
-          viewBox='0 0 24 24'
-          stroke='currentColor'
-        >
-          <path
-            strokeLinecap='round'
-            strokeLinejoin='round'
-            strokeWidth={1.5}
-            d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
-          />
-        </svg>
+        <FileText className='mb-3 size-10 text-muted-foreground/40' />
         <p className='mb-1 text-foreground text-sm'>No variable assignments defined</p>
         <p className='text-muted-foreground text-xs'>
           Add variables in the Variables panel to get started

packages/emcn/src/icons/circle-stop.tsx

@@ -0,0 +1,26 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Circled stop icon for stopped activity.
+ * @param props - SVG properties including className and accessibility attributes.
+ * @example
+ * import { CircleStop } from '@sim/emcn/icons'
+ *
+ * <CircleStop className='size-[16px] text-[var(--text-icon)]' />
+ */
+export function CircleStop(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='16'
+      height='16'
+      viewBox='0 0 16 16'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      {...props}
+    >
+      <circle cx='8' cy='8' r='6.5' stroke='currentColor' strokeWidth='1.25' />
+      <rect x='6' y='6' width='4' height='4' rx='0.5' fill='currentColor' />
+    </svg>
+  )
+}