feat(dashboards): headerless dashboard page with a grid-matched icon

The dashboard page renders only the dashboard (or its empty state), so the
header, its Delete action, and the delete route, hook, and use case go away.
A new EMCN Dashboard icon is drawn on the shared sidebar icon grid and
replaces the analytics ChartColumn on dashboard surfaces.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01S6aTRnkiu7PxYZPNPXYEMV

Author: TheodoreSpeaks

apps/sim/app/api/workspaces/[id]/dashboard/route.ts

@@ -1,17 +1,11 @@
-import {
-  deleteWorkspaceDashboardContract,
-  readWorkspaceDashboardContract,
-} from '@/lib/api/contracts/dashboards'
+import { readWorkspaceDashboardContract } from '@/lib/api/contracts/dashboards'
 import {
   defineInternalJsonRoute,
   internalOrchestrationErrorPolicy,
   internalRateLimits,
   internalSessionAuth,
 } from '@/lib/api/server/routes'
-import {
-  deleteWorkspaceDashboard,
-  readWorkspaceDashboard,
-} from '@/lib/dashboards/application/dashboards'
+import { readWorkspaceDashboard } from '@/lib/dashboards/application/dashboards'
 import { dashboardOperations } from '@/lib/dashboards/application/operations'
 
 export const GET = defineInternalJsonRoute({
@@ -23,13 +17,3 @@ export const GET = defineInternalJsonRoute({
   mapInput: ({ params }) => ({ workspaceId: params.id }),
   useCase: readWorkspaceDashboard,
 })
-
-export const DELETE = defineInternalJsonRoute({
-  contract: deleteWorkspaceDashboardContract,
-  auth: internalSessionAuth,
-  operation: dashboardOperations.delete,
-  rateLimit: internalRateLimits.user({ bucketName: 'dashboards' }),
-  errorPolicy: internalOrchestrationErrorPolicy,
-  mapInput: ({ params }) => ({ workspaceId: params.id }),
-  useCase: deleteWorkspaceDashboard,
-})

apps/sim/app/workspace/[workspaceId]/dashboards/loading.tsx

@@ -1,8 +1,12 @@
 'use client'
 
-import { ChartColumn } from '@sim/emcn/icons'
-import { ResourceChromeFallback } from '@/app/workspace/[workspaceId]/components/resource/components/resource-chrome-fallback'
+import { DashboardLoading } from '@/components/dashboards/dashboard-loading'
+import { Resource } from '@/app/workspace/[workspaceId]/components/resource/resource'
 
 export default function DashboardsLoading() {
-  return <ResourceChromeFallback icon={ChartColumn} title='Dashboard' />
+  return (
+    <Resource>
+      <DashboardLoading />
+    </Resource>
+  )
 }

apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry/chat-context-kind-registry.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import {
-  ChartColumn,
+  Dashboard,
   Database,
   Folder as FolderIcon,
   Globe,
@@ -82,7 +82,7 @@ export const CHAT_CONTEXT_KIND_REGISTRY: Record<ChatContextKind, ChatContextKind
   },
   dashboard: {
     label: 'Dashboard',
-    renderIcon: ({ className }) => <ChartColumn className={className} />,
+    renderIcon: ({ className }) => <Dashboard className={className} />,
   },
   file: {
     label: 'File',

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -300,7 +300,7 @@ export const ResourceContent = memo(function ResourceContent({
       )
 
     case 'dashboard':
-      return <DashboardResource key={resource.id} workspaceId={workspaceId} embedded />
+      return <DashboardResource key={resource.id} workspaceId={workspaceId} />
     case 'file':
       return (
         <EmbeddedFile

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx

@@ -3,8 +3,8 @@
 import type { ElementType, ReactNode } from 'react'
 import { cn, OverflowText } from '@sim/emcn'
 import {
-  ChartColumn,
   Connections,
+  Dashboard,
   Database,
   File as FileIcon,
   Folder as FolderIcon,
@@ -187,11 +187,11 @@ export const RESOURCE_REGISTRY: Record<MothershipResourceType, ResourceTypeConfi
   dashboard: {
     type: 'dashboard',
     label: 'Dashboards',
-    icon: ChartColumn,
+    icon: Dashboard,
     renderTabIcon: (_resource, className) => (
-      <ChartColumn className={cn(className, 'text-[var(--text-icon)]')} />
+      <Dashboard className={cn(className, 'text-[var(--text-icon)]')} />
     ),
-    renderDropdownItem: (props) => <IconDropdownItem {...props} icon={ChartColumn} />,
+    renderDropdownItem: (props) => <IconDropdownItem {...props} icon={Dashboard} />,
   },
   file: {
     type: 'file',

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -25,7 +25,7 @@ import {
 } from '@sim/emcn'
 import {
   Building,
-  ChartColumn,
+  Dashboard,
   Database,
   Files,
   Integration,
@@ -727,7 +727,7 @@ export const Sidebar = memo(function Sidebar({ organizationHref }: SidebarProps)
         {
           id: 'dashboards',
           label: 'Dashboard',
-          icon: ChartColumn,
+          icon: Dashboard,
           href: `/workspace/${workspaceId}/dashboards`,
           hidden: !dashboardsEnabled || (permissionConfig.hideFilesTab && !accessRequestsEnabled),
           restricted: permissionConfig.hideFilesTab,

apps/sim/components/dashboards/dashboard-loading.tsx

@@ -0,0 +1,11 @@
+import { Loader } from '@sim/emcn/icons'
+
+/** Kept apart from the dashboard renderer so the route's loading fallback stays light. */
+export function DashboardLoading() {
+  return (
+    <div role='status' className='flex flex-1 items-center justify-center'>
+      <Loader animate className='size-[16px] text-[var(--text-icon)]' />
+      <span className='sr-only'>Loading dashboard</span>
+    </div>
+  )
+}

apps/sim/components/dashboards/dashboard-resource.tsx

@@ -1,26 +1,15 @@
 'use client'
 
-import { useState } from 'react'
-import {
-  ChipModal,
-  ChipModalBody,
-  ChipModalError,
-  ChipModalFooter,
-  ChipModalHeader,
-} from '@sim/emcn'
-import { ChartColumn, Loader, Trash } from '@sim/emcn/icons'
 import { DashboardFeatureGate } from '@/components/dashboards/dashboard-feature-gate'
+import { DashboardLoading } from '@/components/dashboards/dashboard-loading'
 import { DashboardPreview } from '@/components/dashboards/dashboard-preview'
 import { EmptyState } from '@/components/empty-state/empty-state'
 import { Resource } from '@/app/workspace/[workspaceId]/components/resource/resource'
 import { useWorkspaceFilesRoom } from '@/app/workspace/[workspaceId]/files/hooks/use-workspace-files-room'
-import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { useDeleteWorkspaceDashboard, useWorkspaceDashboard } from '@/hooks/queries/dashboards'
+import { useWorkspaceDashboard } from '@/hooks/queries/dashboards'
 
 interface DashboardResourceProps {
   workspaceId: string
-  /** The Chat resource panel supplies its own chrome; the page renders the header and actions. */
-  embedded?: boolean
 }
 
 /** The workspace's single dashboard, or an empty state until Sim saves the first one. */
@@ -32,38 +21,14 @@ export function DashboardResource(props: DashboardResourceProps) {
   )
 }
 
-function EnabledDashboardResource({ workspaceId, embedded }: DashboardResourceProps) {
+function EnabledDashboardResource({ workspaceId }: DashboardResourceProps) {
   useWorkspaceFilesRoom(workspaceId)
-  const { canEdit } = useUserPermissionsContext()
   const query = useWorkspaceDashboard(workspaceId)
-  const [confirmingDelete, setConfirmingDelete] = useState(false)
   const dashboard = query.data?.dashboard ?? null
   return (
     <Resource>
-      {!embedded && (
-        <Resource.Header
-          icon={ChartColumn}
-          title='Dashboard'
-          actions={
-            dashboard && canEdit
-              ? [
-                  {
-                    id: 'delete',
-                    icon: Trash,
-                    text: 'Delete',
-                    variant: 'destructive',
-                    onSelect: () => setConfirmingDelete(true),
-                  },
-                ]
-              : []
-          }
-        />
-      )}
       {query.isPending ? (
-        <div role='status' className='flex flex-1 items-center justify-center'>
-          <Loader animate className='size-[16px] text-[var(--text-icon)]' />
-          <span className='sr-only'>Loading dashboard</span>
-        </div>
+        <DashboardLoading />
       ) : query.error ? (
         <div className='p-6 text-[var(--text-error)]' role='alert'>
           {query.error.message}
@@ -82,47 +47,6 @@ function EnabledDashboardResource({ workspaceId, embedded }: DashboardResourcePr
           description='Sim will build your dashboard here once your workspace is set up.'
         />
       )}
-      {confirmingDelete && (
-        <DeleteDashboardModal
-          workspaceId={workspaceId}
-          onClose={() => setConfirmingDelete(false)}
-        />
-      )}
     </Resource>
   )
 }
-
-interface DeleteDashboardModalProps {
-  workspaceId: string
-  onClose: () => void
-}
-
-function DeleteDashboardModal({ workspaceId, onClose }: DeleteDashboardModalProps) {
-  const remove = useDeleteWorkspaceDashboard(workspaceId)
-  return (
-    <ChipModal
-      size='sm'
-      open
-      onOpenChange={(open) => {
-        if (!open) onClose()
-      }}
-      srTitle='Delete dashboard'
-    >
-      <ChipModalHeader onClose={onClose}>Delete dashboard</ChipModalHeader>
-      <ChipModalBody>
-        <p className='px-2 text-[var(--text-secondary)]'>Delete this workspace’s dashboard?</p>
-        {remove.error && <ChipModalError>{remove.error.message}</ChipModalError>}
-      </ChipModalBody>
-      <ChipModalFooter
-        defaultAction='dismiss'
-        onCancel={onClose}
-        primaryAction={{
-          label: 'Delete',
-          variant: 'destructive',
-          disabled: remove.isPending,
-          onClick: () => remove.mutate(undefined, { onSuccess: onClose }),
-        }}
-      />
-    </ChipModal>
-  )
-}

apps/sim/hooks/queries/dashboards.ts

@@ -1,10 +1,6 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { requestJson } from '@/lib/api/client/request'
-import {
-  deleteWorkspaceDashboardContract,
-  readWorkspaceDashboardContract,
-} from '@/lib/api/contracts/dashboards'
-import { workspaceFilesKeys } from '@/hooks/queries/workspace-files'
+import { readWorkspaceDashboardContract } from '@/lib/api/contracts/dashboards'
 
 export const DASHBOARD_STALE_TIME = 30_000
 export const dashboardKeys = {
@@ -22,15 +18,3 @@ export function useWorkspaceDashboard(workspaceId: string, options?: { enabled?:
     staleTime: DASHBOARD_STALE_TIME,
   })
 }
-
-export function useDeleteWorkspaceDashboard(workspaceId: string) {
-  const client = useQueryClient()
-  return useMutation({
-    mutationFn: () =>
-      requestJson(deleteWorkspaceDashboardContract, { params: { id: workspaceId } }),
-    onSettled: () => {
-      void client.invalidateQueries({ queryKey: dashboardKeys.workspace(workspaceId) })
-      void client.invalidateQueries({ queryKey: workspaceFilesKeys.lists() })
-    },
-  })
-}

apps/sim/lib/api/contracts/dashboards.ts

@@ -29,10 +29,4 @@ export const readWorkspaceDashboardContract = defineRouteContract({
     }),
   },
 })
-export const deleteWorkspaceDashboardContract = defineRouteContract({
-  method: 'DELETE',
-  path: '/api/workspaces/[id]/dashboard',
-  params: workspaceParams,
-  response: { mode: 'json', schema: z.object({ deleted: z.literal(true), id: z.string() }) },
-})
 export type DashboardRecord = z.output<typeof dashboardRecordSchema>