improvement(ui): home credits + suggested actions, integrations route, sidebar polish

- home: add CreditsChip and SuggestedActions to the empty home state; widen
  greeting to fit prompts
- integrations: promote to a top-level workspace route (/integrations) and
  drop the settings tab
- sidebar: rebuild collapsed flyout items on top of the new
  DropdownMenuItemAction slot; portal sub-content; quieter hover/active states
- search-modal: add Home and Integrations pages, surface tasks above
  workflows, tighten spacing and radii
- emcn/dropdown: add action prop to DropdownMenuItem, new
  DropdownMenuItemAction button, asChild on SubTrigger; align item heights
  to 30px and radii to lg
- emcn/button: add quiet variant for inline chip-style buttons
- icons: refresh weights to 1.55, redraw Eye, add Credit and Task icons
- task status: replace the Blimp + dot pattern with a Linear-style
  TaskStatusDot (active / unread / done)
- workflows/colors: regroup palette by hue family so the picker can render
  columns
- tasks query: skip cache cancellation when no list is cached and reconcile
  in onSuccess so the in-flight initial fetch isn't orphaned
- styles: nudge --text-icon shades for both themes

Author: emir-karabeg

apps/sim/app/_styles/globals.css

@@ -206,7 +206,7 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --text-muted: #707070;
     --text-subtle: #8c8c8c;
     --text-body: #3b3b3b;
-    --text-icon: #5e5e5e;
+    --text-icon: #525252;
 
     --text-inverse: #ffffff;
     --text-muted-inverse: #a0a0a0;
@@ -362,7 +362,7 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --text-muted: #787878;
     --text-subtle: #7d7d7d;
     --text-body: #cdcdcd;
-    --text-icon: #939393;
+    --text-icon: #a0a0a0;
 
     --text-inverse: #1b1b1b;
     --text-muted-inverse: #b3b3b3;

apps/sim/app/chat/components/input/input.tsx

@@ -182,7 +182,7 @@ export const ChatInput: React.FC<{
           <div
             onClick={handleContainerClick}
             className={cn(
-              'relative z-10 cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--landing-bg-elevated)] px-2.5 py-2',
+              'relative z-10 cursor-text rounded-2xl border border-[var(--border-1)] bg-[var(--landing-bg-elevated)] px-2.5 py-2',
               isDragOver && 'border-purple-500'
             )}
             onDragEnter={(e) => {

apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react'
-import { Blimp } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 
 interface ConversationListItemProps {
@@ -14,34 +13,12 @@ interface ConversationListItemProps {
 
 export function ConversationListItem({
   title,
-  isActive = false,
-  isUnread = false,
   className,
   titleClassName,
-  statusIndicatorClassName,
   actions,
 }: ConversationListItemProps) {
   return (
     <div className={cn('flex w-full min-w-0 items-center gap-2', className)}>
-      <span className='relative flex-shrink-0'>
-        <Blimp className='h-[16px] w-[16px] text-[var(--text-icon)]' />
-        {isActive && (
-          <span
-            className={cn(
-              '-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-amber-400',
-              statusIndicatorClassName
-            )}
-          />
-        )}
-        {!isActive && isUnread && (
-          <span
-            className={cn(
-              '-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-[var(--indicator-online)]',
-              statusIndicatorClassName
-            )}
-          />
-        )}
-      </span>
       <span className={cn('min-w-0 flex-1 truncate', titleClassName)}>{title}</span>
       {actions && <div className='ml-auto flex flex-shrink-0 items-center'>{actions}</div>}
     </div>

apps/sim/app/workspace/[workspaceId]/components/index.ts

@@ -28,3 +28,4 @@ export type {
   SelectableConfig,
 } from './resource/resource'
 export { Resource, ResourceTable } from './resource/resource'
+export { TaskStatusDot } from './task-status-dot'

apps/sim/app/workspace/[workspaceId]/components/task-status-dot.tsx

@@ -0,0 +1,61 @@
+import type { SVGProps } from 'react'
+import { cn } from '@/lib/core/utils/cn'
+
+type TaskStatus = 'active' | 'unread' | 'done'
+
+const STATUS_COLOR_CLASS: Record<TaskStatus, string> = {
+  active: 'text-yellow-500',
+  unread: 'text-[var(--brand-accent)]',
+  done: 'text-[var(--text-icon)]',
+}
+
+interface TaskStatusDotProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+  isActive?: boolean
+  isUnread?: boolean
+}
+
+/**
+ * Linear-style task status indicator.
+ *
+ * - **active** — outlined ring with a play wedge (in progress).
+ * - **unread** — outlined ring with a half-pie fill (started, awaiting attention).
+ * - **done** — filled disc with an inverse-color check (settled).
+ *
+ * Renders as a 16×16 SVG so it slots into rows beside other 16/14px row icons.
+ * Override size via `className` (e.g. `h-[14px] w-[14px]`) — the SVG scales.
+ */
+export function TaskStatusDot({ isActive, isUnread, className, ...props }: TaskStatusDotProps) {
+  const status: TaskStatus = isActive ? 'active' : isUnread ? 'unread' : 'done'
+
+  return (
+    <svg
+      aria-hidden='true'
+      viewBox='0 0 16 16'
+      fill='none'
+      className={cn('h-[16px] w-[16px] flex-shrink-0', STATUS_COLOR_CLASS[status], className)}
+      {...props}
+    >
+      {status === 'done' ? (
+        <>
+          <circle cx='8' cy='8' r='7' fill='currentColor' />
+          <path
+            d='M4.75 8.25 L6.85 10.35 L11.25 5.95'
+            stroke='var(--text-inverse)'
+            strokeWidth='1.5'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </>
+      ) : (
+        <>
+          <circle cx='8' cy='8' r='6.5' stroke='currentColor' strokeWidth='1.5' />
+          {status === 'active' ? (
+            <path d='M6.75 5.5 L10.5 8 L6.75 10.5 Z' fill='currentColor' />
+          ) : (
+            <path d='M8 3.25 A 4.75 4.75 0 0 1 8 12.75 Z' fill='currentColor' />
+          )}
+        </>
+      )}
+    </svg>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/components/credits-chip/credits-chip.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { Credit } from '@/components/emcn/icons'
+import { formatCredits } from '@/lib/billing/credits/conversion'
+import { isBillingEnabled } from '@/app/workspace/[workspaceId]/settings/navigation'
+import { useSubscriptionData } from '@/hooks/queries/subscription'
+import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
+
+export function CreditsChip() {
+  if (!isBillingEnabled) return null
+
+  return <CreditsChipInner />
+}
+
+function CreditsChipInner() {
+  const { data, isLoading } = useSubscriptionData()
+  const { navigateToSettings } = useSettingsNavigation()
+
+  if (isLoading || !data?.data) return null
+
+  const chipLabel = formatCredits(data.data.creditBalance)
+
+  return (
+    <button
+      type='button'
+      aria-label='Manage subscription'
+      onClick={() => navigateToSettings({ section: 'subscription' })}
+      className='group mx-0.5 inline-flex h-[30px] items-center gap-1.5 rounded-lg px-2 transition-colors hover-hover:bg-[var(--surface-active)]'
+    >
+      <Credit className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+      <span className='font-base text-[var(--text-body)] text-sm'>{chipLabel}</span>
+    </button>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/components/credits-chip/index.ts

@@ -0,0 +1 @@
+export { CreditsChip } from './credits-chip'

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

@@ -1,11 +1,13 @@
 export { ChatMessageAttachments } from './chat-message-attachments'
 export { ContextMentionIcon } from './context-mention-icon'
+export { CreditsChip } from './credits-chip'
 export {
   assistantMessageHasRenderableContent,
   MessageContent,
 } from './message-content'
 export { MothershipChat } from './mothership-chat/mothership-chat'
 export { MothershipView } from './mothership-view'
 export { QueuedMessages } from './queued-messages'
+export { SuggestedActions } from './suggested-actions'
 export { UserInput } from './user-input'
 export { UserMessageContent } from './user-message-content'

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat-skeleton.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from '@/components/emcn'
 
 const LAYOUT_SKELETON_STYLES = {
   'mothership-view': {
-    content: 'mx-auto max-w-[42rem] space-y-6',
+    content: 'mx-auto max-w-[44rem] space-y-6',
     userRow: 'flex flex-col items-end gap-[6px] pt-3',
   },
   'copilot-view': {

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx

@@ -57,13 +57,13 @@ const LAYOUT_STYLES = {
   'mothership-view': {
     scrollContainer:
       'min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-6 pt-4 pb-8 [scrollbar-gutter:stable_both-edges]',
-    content: 'mx-auto max-w-[42rem] space-y-6',
+    content: 'mx-auto max-w-[44rem] space-y-6',
     userRow: 'flex flex-col items-end gap-[6px] pt-3',
     attachmentWidth: 'max-w-[70%]',
     userBubble: 'max-w-[70%] overflow-hidden rounded-[16px] bg-[var(--surface-5)] px-3.5 py-2',
     assistantRow: 'group/msg',
     footer: 'flex-shrink-0 px-[24px] pb-[16px]',
-    footerInner: 'mx-auto max-w-[42rem]',
+    footerInner: 'mx-auto max-w-[44rem]',
   },
   'copilot-view': {
     scrollContainer: 'min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-3 pt-2 pb-4',