fix(dashboards): list by folder, canonical folder paths, named props

The dashboard browser now asks for one folder's dashboards instead of
filtering the first 500 across the workspace, folder paths use the shared
segment encoder, and the README names the renumbered migrations.

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]/dashboards/route.ts

@@ -14,7 +14,11 @@ export const GET = defineInternalJsonRoute({
   operation: dashboardOperations.list,
   rateLimit: internalRateLimits.user({ bucketName: 'dashboards' }),
   errorPolicy: internalOrchestrationErrorPolicy,
-  mapInput: ({ params, query }) => ({ workspaceId: params.id, ...query }),
+  mapInput: ({ params, query }) => ({
+    workspaceId: params.id,
+    search: query.search,
+    folderId: query.folder === 'root' ? null : query.folder,
+  }),
   useCase: listDashboards,
 })
 

apps/sim/app/workspace/[workspaceId]/dashboards/[dashboardId]/page.tsx

@@ -1,8 +1,9 @@
 import { DashboardResource } from '@/components/dashboards/dashboard-resource'
-export default async function DashboardPage({
-  params,
-}: {
+
+interface DashboardPageProps {
   params: Promise<{ workspaceId: string; dashboardId: string }>
-}) {
+}
+
+export default async function DashboardPage({ params }: DashboardPageProps) {
   return <DashboardResource {...(await params)} />
 }

apps/sim/app/workspace/[workspaceId]/dashboards/dashboard-dialog.tsx

@@ -11,6 +11,7 @@ import {
 } from '@sim/emcn'
 import type { DashboardRecord } from '@/lib/api/contracts/dashboards'
 import type { FolderApi } from '@/lib/api/contracts/folders'
+import { encodeFolderPathSegment } from '@/lib/folders/paths'
 import { useDashboardMutation } from '@/hooks/queries/dashboards'
 
 export type DashboardDialogState =
@@ -62,7 +63,7 @@ export function DashboardDialog({
   function pathFor(id: string): string {
     const row = folders.find((folder) => folder.id === id)
     if (!row) return ''
-    return `${row.parentId ? pathFor(row.parentId) : ''}/${encodeURIComponent(row.name)}`
+    return `${row.parentId ? pathFor(row.parentId) : ''}/${encodeFolderPathSegment(row.name)}`
   }
   function save() {
     const callbacks = {
@@ -90,7 +91,7 @@ export function DashboardDialog({
         break
       case 'createFolder':
         mutation.mutate(
-          { operation: 'createFolder', path: `${folderPath}/${encodeURIComponent(name)}` },
+          { operation: 'createFolder', path: `${folderPath}/${encodeFolderPathSegment(name)}` },
           callbacks
         )
         break
@@ -99,7 +100,7 @@ export function DashboardDialog({
           {
             operation: 'moveFolder',
             path: state.path,
-            destinationPath: `${pathFor(target)}/${encodeURIComponent(name)}`,
+            destinationPath: `${pathFor(target)}/${encodeFolderPathSegment(name)}`,
           },
           callbacks
         )

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

@@ -12,6 +12,7 @@ import {
 import { ChartColumn, Folder, Loader, MoreHorizontal, Pencil, Trash } from '@sim/emcn/icons'
 import { useRouter } from 'next/navigation'
 import { useQueryStates } from 'nuqs'
+import { encodeFolderPathSegment } from '@/lib/folders/paths'
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
 import { Resource } from '@/app/workspace/[workspaceId]/components/resource/resource'
 import {
@@ -72,7 +73,10 @@ export function Dashboards({ workspaceId }: DashboardsProps) {
   useWorkspaceFilesRoom(workspaceId)
   const setSearch = useDebouncedSearchSetter((search, options) => setState({ search }, options))
   const search = useSearchFilterValue(state.search, SEARCH_DEBOUNCE_MS).trim()
-  const query = useDashboards(workspaceId, search)
+  const query = useDashboards(
+    workspaceId,
+    search ? { search } : { folder: state.folderId ?? 'root' }
+  )
   const folderQuery = useDashboardFolders(workspaceId)
   const folders = folderQuery.data?.folders ?? []
   const dashboards = query.data?.dashboards ?? []
@@ -90,7 +94,7 @@ export function Dashboards({ workspaceId }: DashboardsProps) {
     current = folders.find((item) => item.id === current?.parentId)
   }
   const folderPath = breadcrumbs.length
-    ? `/${breadcrumbs.map((item) => encodeURIComponent(item.label)).join('/')}`
+    ? `/${breadcrumbs.map((item) => encodeFolderPathSegment(item.label)).join('/')}`
     : ''
   const open = (id: string) => router.push(`/workspace/${workspaceId}/dashboards/${id}`)
   const folderMissing = state.folderId !== null && folderQuery.isSuccess && !folder
@@ -153,7 +157,7 @@ export function Dashboards({ workspaceId }: DashboardsProps) {
                 (!search || item.name.toLowerCase().includes(search.toLowerCase()))
             )
             .map((item) => {
-              const path = `${folderPath}/${encodeURIComponent(item.name)}`
+              const path = `${folderPath}/${encodeFolderPathSegment(item.name)}`
               return {
                 id: item.id,
                 cells: {
@@ -171,24 +175,22 @@ export function Dashboards({ workspaceId }: DashboardsProps) {
                 },
               }
             }),
-          ...dashboards
-            .filter((item) => search || item.folderId === state.folderId)
-            .map((item) => ({
-              id: item.id,
-              cells: {
-                name: { icon: <ChartColumn />, label: item.name },
-                updated: { label: new Date(item.updatedAt).toLocaleDateString() },
-                actions: {
-                  content: canEdit && (
-                    <DashboardRowActions
-                      label={item.name}
-                      onEdit={() => setDialog({ kind: 'edit', dashboard: item })}
-                      onDelete={() => setDialog({ kind: 'delete', dashboard: item })}
-                    />
-                  ),
-                },
+          ...dashboards.map((item) => ({
+            id: item.id,
+            cells: {
+              name: { icon: <ChartColumn />, label: item.name },
+              updated: { label: new Date(item.updatedAt).toLocaleDateString() },
+              actions: {
+                content: canEdit && (
+                  <DashboardRowActions
+                    label={item.name}
+                    onEdit={() => setDialog({ kind: 'edit', dashboard: item })}
+                    onDelete={() => setDialog({ kind: 'delete', dashboard: item })}
+                  />
+                ),
               },
-            })),
+            },
+          })),
         ]}
         onRowClick={(id) => {
           if (folders.some((item) => item.id === id)) {

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

@@ -1,6 +1,10 @@
 import type { ReactNode } from 'react'
 import { DashboardFeatureGate } from '@/components/dashboards/dashboard-feature-gate'
 
-export default function DashboardLayout({ children }: { children: ReactNode }) {
+interface DashboardLayoutProps {
+  children: ReactNode
+}
+
+export default function DashboardLayout({ children }: DashboardLayoutProps) {
   return <DashboardFeatureGate>{children}</DashboardFeatureGate>
 }

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/available-resources.ts

@@ -118,9 +118,13 @@ export function useAvailableResources(
   const { data: tables, isPending: tablesPending } = useTablesList(workspaceId, 'active', {
     enabled: enabled && Boolean(workspaceId),
   })
-  const { data: dashboardData, isPending: dashboardsPending } = useDashboards(workspaceId, '', {
-    enabled: enabled && dashboardsEnabled && !excludeTypes?.includes('dashboard'),
-  })
+  const { data: dashboardData, isPending: dashboardsPending } = useDashboards(
+    workspaceId,
+    {},
+    {
+      enabled: enabled && dashboardsEnabled && !excludeTypes?.includes('dashboard'),
+    }
+  )
   const { data: files, isPending: filesPending } = useWorkspaceFiles(workspaceId, 'active', {
     enabled: enabled && Boolean(workspaceId),
   })

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

@@ -165,9 +165,13 @@ function useResourceNameLookup(
 ): Map<string, string> {
   const dashboardsEnabled = useFeatureFlag('dashboards')
   const enabled = resources.length > 0
-  const { data: dashboardData } = useDashboards(workspaceId ?? '', '', {
-    enabled: enabled && dashboardsEnabled,
-  })
+  const { data: dashboardData } = useDashboards(
+    workspaceId ?? '',
+    {},
+    {
+      enabled: enabled && dashboardsEnabled,
+    }
+  )
   const owners = [
     ...new Set(
       resources

apps/sim/hooks/queries/dashboards.ts

@@ -6,6 +6,7 @@ import {
   createDashboardFolderContract,
   deleteDashboardContract,
   deleteDashboardFolderContract,
+  type ListDashboardsQuery,
   listDashboardFoldersContract,
   listDashboardsContract,
   type MoveDashboardBody,
@@ -21,20 +22,24 @@ export const DASHBOARD_STALE_TIME = 30_000
 export const dashboardKeys = {
   all: ['dashboards'] as const,
   lists: () => [...dashboardKeys.all, 'list'] as const,
-  list: (workspaceId: string, search = '') =>
-    [...dashboardKeys.lists(), workspaceId, search] as const,
+  list: (workspaceId: string, query: ListDashboardsQuery = {}) =>
+    [...dashboardKeys.lists(), workspaceId, query.search ?? '', query.folder ?? ''] as const,
   details: () => [...dashboardKeys.all, 'detail'] as const,
   detail: (workspaceId: string, id: string) =>
     [...dashboardKeys.details(), workspaceId, id] as const,
   folders: (workspaceId: string) => [...dashboardKeys.all, 'folders', workspaceId] as const,
 }
-export function useDashboards(workspaceId: string, search = '', options?: { enabled?: boolean }) {
+export function useDashboards(
+  workspaceId: string,
+  query: ListDashboardsQuery = {},
+  options?: { enabled?: boolean }
+) {
   return useQuery({
-    queryKey: dashboardKeys.list(workspaceId, search),
+    queryKey: dashboardKeys.list(workspaceId, query),
     queryFn: ({ signal }) =>
       requestJson(listDashboardsContract, {
         params: { id: workspaceId },
-        query: { search },
+        query,
         signal,
       }),
     enabled: Boolean(workspaceId) && (options?.enabled ?? true),

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

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 import { defineRouteContract } from '@/lib/api/contracts'
 import { folderSchema } from '@/lib/api/contracts/folders'
-import { workspaceIdSchema } from '@/lib/api/contracts/primitives'
+import { folderIdSchema, workspaceIdSchema } from '@/lib/api/contracts/primitives'
 
 export const dashboardParamsSchema = z.object({
   id: workspaceIdSchema,
@@ -44,11 +44,16 @@ export const moveDashboardBodySchema = z
     folderId: z.string().min(1).nullable().optional(),
   })
   .strict()
+export const listDashboardsQuerySchema = z.object({
+  search: z.string().max(255).optional(),
+  /** A folder id, or `root` for dashboards outside any folder. Omit to list every folder. */
+  folder: z.union([z.literal('root'), folderIdSchema]).optional(),
+})
 export const listDashboardsContract = defineRouteContract({
   method: 'GET',
   path: '/api/workspaces/[id]/dashboards',
   params: workspaceParams,
-  query: z.object({ search: z.string().max(255).optional() }),
+  query: listDashboardsQuerySchema,
   response: {
     mode: 'json',
     schema: z.object({ dashboards: z.array(dashboardRecordSchema), truncated: z.boolean() }),
@@ -123,6 +128,7 @@ export const deleteDashboardFolderContract = defineRouteContract({
   response: { mode: 'json', schema: deletedResponse },
 })
 export type DashboardRecord = z.output<typeof dashboardRecordSchema>
+export type ListDashboardsQuery = z.input<typeof listDashboardsQuerySchema>
 export type CreateDashboardBody = z.input<typeof createDashboardBodySchema>
 export type UpdateDashboardBody = z.input<typeof updateDashboardBodySchema>
 export type MoveDashboardBody = z.input<typeof moveDashboardBodySchema>

apps/sim/lib/dashboards/README.md

@@ -41,7 +41,7 @@ These measures take a condition rather than a numeric field, so tables do not ne
 axis formatting. Pie/donut distributions can continue grouping by outcome and
 counting rows; their slice percentages are computed by ECharts.
 
-Queries reuse the table predicate compiler and the existing read-only repeatable-read transaction guards, including statement/lock timeouts and tenant index planning. The built-in timestamp predicate leaves the indexed column uncast. Custom date extraction requires scanning matching table rows. There is no background polling. Migration 0384 adds `dashboard` to the existing folder resource enum; it does not create a dashboard table.
+Queries reuse the table predicate compiler and the existing read-only repeatable-read transaction guards, including statement/lock timeouts and tenant index planning. The built-in timestamp predicate leaves the indexed column uncast. Custom date extraction requires scanning matching table rows. There is no background polling. Migration 0391 adds `dashboard` to the existing folder resource enum; it does not create a dashboard table.
 
 Bounds: 128 KB source, 48 blocks, 4 layout levels, 2 grouping fields, 8 measures, 12 projected columns, 500 result rows and 8 KB per returned row. Limits apply after aggregation. An explicit limit yields a labeled top-N result; unrequested group overflow is an error. API rate admission is per viewer. Errors are never turned into successful zeros. Only visible tabs mount their query observers; identical queries share React Query cache entries for one minute, and Refresh requests fresh data.
 
@@ -89,8 +89,8 @@ New dashboard definitions are unlisted workspace files. Dashboard APIs select th
 content type explicitly, and the resource picker requests dashboards separately from Files.
 Versions, billing, cleanup, and complete workspace copies still include unlisted resources.
 
-Migration 0385 adds the defaulted discovery column and a temporary bridge for old upload
-writers during rollout. Script migration 0025 backfills non-workspace uploads in id-keyed
+Migration 0392 adds the defaulted discovery column and a temporary bridge for old upload
+writers during rollout. Script migration 0027 backfills non-workspace uploads in id-keyed
 pages of 1,000, including archived uploads, without changing content revisions or ownership.
 It contains no dashboard backfill: dashboards have not shipped. Remove the bridge in a
 later migration after all discovery-aware writers are deployed.