feat(tables): saved views with filter, sort, and column presets

.github/workflows/test-build.yml

@@ -222,7 +222,11 @@ jobs:
   build:
     name: Build App
     runs-on: ${{ (vars.CI_PROVIDER == '' || vars.CI_PROVIDER == 'blacksmith') && 'blacksmith-16vcpu-ubuntu-2404' || 'linux-x64-8-core' }}
-    timeout-minutes: 15
+    # Build durations crossed 15 minutes as the app grew (10m02 on Jul 29 AM,
+    # 14m44 after the folders/desktop/library merges, then two straight
+    # timeouts) — GitHub reports a job timeout as "cancelled". 25 keeps
+    # headroom without masking a genuine hang.
+    timeout-minutes: 25
 
     steps:
       - name: Checkout code

apps/sim/app/api/table/[tableId]/views/[viewId]/route.ts

@@ -0,0 +1,106 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { deleteTableViewContract, updateTableViewContract } from '@/lib/api/contracts/tables'
+import { parseRequest, validationErrorResponse } from '@/lib/api/server/validation'
+import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
+import type { TableSchema } from '@/lib/table'
+import { deleteTableView, TableViewValidationError, updateTableView } from '@/lib/table'
+import { accessError, checkAccess } from '@/app/api/table/utils'
+
+const logger = createLogger('TableViewAPI')
+
+interface TableViewRouteParams {
+  params: Promise<{ tableId: string; viewId: string }>
+}
+
+/** PATCH /api/table/[tableId]/views/[viewId] - Rename, overwrite config, or set as default. */
+export const PATCH = withRouteHandler(
+  async (request: NextRequest, context: TableViewRouteParams) => {
+    const requestId = generateRequestId()
+
+    try {
+      const authResult = await checkSessionOrInternalAuth(request, { requireWorkflowId: false })
+      if (!authResult.success || !authResult.userId) {
+        return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
+      }
+
+      const parsed = await parseRequest(updateTableViewContract, request, context, {
+        validationErrorResponse: (error) => validationErrorResponse(error),
+      })
+      if (!parsed.success) return parsed.response
+
+      const { tableId, viewId } = parsed.data.params
+      const { workspaceId, name, config, configPatch, isDefault } = parsed.data.body
+
+      const result = await checkAccess(tableId, authResult.userId, 'write')
+      if (!result.ok) return accessError(result, requestId, tableId)
+
+      if (result.table.workspaceId !== workspaceId) {
+        return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
+      }
+
+      const columns = (result.table.schema as TableSchema).columns ?? []
+      const view = await updateTableView({
+        viewId,
+        tableId,
+        name,
+        config,
+        configPatch,
+        isDefault,
+        columns,
+      })
+      if (!view) {
+        return NextResponse.json({ error: 'View not found' }, { status: 404 })
+      }
+
+      return NextResponse.json({ success: true, data: { view } })
+    } catch (error) {
+      if (error instanceof TableViewValidationError) {
+        return NextResponse.json({ error: error.message }, { status: 400 })
+      }
+      logger.error(`[${requestId}] Error updating table view:`, error)
+      return NextResponse.json({ error: 'Failed to update view' }, { status: 500 })
+    }
+  }
+)
+
+/** DELETE /api/table/[tableId]/views/[viewId] - Remove a saved view. */
+export const DELETE = withRouteHandler(
+  async (request: NextRequest, context: TableViewRouteParams) => {
+    const requestId = generateRequestId()
+
+    try {
+      const authResult = await checkSessionOrInternalAuth(request, { requireWorkflowId: false })
+      if (!authResult.success || !authResult.userId) {
+        return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
+      }
+
+      const parsed = await parseRequest(deleteTableViewContract, request, context, {
+        validationErrorResponse: (error) => validationErrorResponse(error),
+      })
+      if (!parsed.success) return parsed.response
+
+      const { tableId, viewId } = parsed.data.params
+      const { workspaceId } = parsed.data.body
+
+      const result = await checkAccess(tableId, authResult.userId, 'write')
+      if (!result.ok) return accessError(result, requestId, tableId)
+
+      if (result.table.workspaceId !== workspaceId) {
+        return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
+      }
+
+      const deleted = await deleteTableView(viewId, tableId)
+      if (!deleted) {
+        return NextResponse.json({ error: 'View not found' }, { status: 404 })
+      }
+
+      return NextResponse.json({ success: true, data: { deleted: true } })
+    } catch (error) {
+      logger.error(`[${requestId}] Error deleting table view:`, error)
+      return NextResponse.json({ error: 'Failed to delete view' }, { status: 500 })
+    }
+  }
+)

apps/sim/app/api/table/[tableId]/views/route.ts

@@ -0,0 +1,96 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { createTableViewContract, listTableViewsContract } from '@/lib/api/contracts/tables'
+import { parseRequest, validationErrorResponse } from '@/lib/api/server/validation'
+import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
+import type { TableSchema } from '@/lib/table'
+import { createTableView, listTableViews, TableViewValidationError } from '@/lib/table'
+import { accessError, checkAccess } from '@/app/api/table/utils'
+
+const logger = createLogger('TableViewsAPI')
+
+interface TableRouteParams {
+  params: Promise<{ tableId: string }>
+}
+
+/** GET /api/table/[tableId]/views - List every saved view on a table. */
+export const GET = withRouteHandler(async (request: NextRequest, context: TableRouteParams) => {
+  const requestId = generateRequestId()
+
+  try {
+    const authResult = await checkSessionOrInternalAuth(request, { requireWorkflowId: false })
+    if (!authResult.success || !authResult.userId) {
+      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
+    }
+
+    const parsed = await parseRequest(listTableViewsContract, request, context, {
+      validationErrorResponse: (error) => validationErrorResponse(error),
+    })
+    if (!parsed.success) return parsed.response
+
+    const { tableId } = parsed.data.params
+    const { workspaceId } = parsed.data.query
+
+    const result = await checkAccess(tableId, authResult.userId, 'read')
+    if (!result.ok) return accessError(result, requestId, tableId)
+
+    if (result.table.workspaceId !== workspaceId) {
+      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
+    }
+
+    const columns = (result.table.schema as TableSchema).columns ?? []
+    const views = await listTableViews(tableId, columns)
+
+    return NextResponse.json({ success: true, data: { views } })
+  } catch (error) {
+    logger.error(`[${requestId}] Error listing table views:`, error)
+    return NextResponse.json({ error: 'Failed to list views' }, { status: 500 })
+  }
+})
+
+/** POST /api/table/[tableId]/views - Save the current filter/sort/layout as a named view. */
+export const POST = withRouteHandler(async (request: NextRequest, context: TableRouteParams) => {
+  const requestId = generateRequestId()
+
+  try {
+    const authResult = await checkSessionOrInternalAuth(request, { requireWorkflowId: false })
+    if (!authResult.success || !authResult.userId) {
+      return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
+    }
+
+    const parsed = await parseRequest(createTableViewContract, request, context, {
+      validationErrorResponse: (error) => validationErrorResponse(error),
+    })
+    if (!parsed.success) return parsed.response
+
+    const { tableId } = parsed.data.params
+    const { workspaceId, name, config } = parsed.data.body
+
+    const result = await checkAccess(tableId, authResult.userId, 'write')
+    if (!result.ok) return accessError(result, requestId, tableId)
+
+    if (result.table.workspaceId !== workspaceId) {
+      return NextResponse.json({ error: 'Invalid workspace ID' }, { status: 400 })
+    }
+
+    const columns = (result.table.schema as TableSchema).columns ?? []
+    const view = await createTableView({
+      tableId,
+      workspaceId,
+      name,
+      config,
+      userId: authResult.userId,
+      columns,
+    })
+
+    return NextResponse.json({ success: true, data: { view } })
+  } catch (error) {
+    if (error instanceof TableViewValidationError) {
+      return NextResponse.json({ error: error.message }, { status: 400 })
+    }
+    logger.error(`[${requestId}] Error creating table view:`, error)
+    return NextResponse.json({ error: 'Failed to create view' }, { status: 500 })
+  }
+})

apps/sim/app/workspace/[workspaceId]/chat/[chatId]/page.tsx

@@ -3,6 +3,7 @@ import type { Metadata } from 'next'
 import { getSession } from '@/lib/auth'
 import { Home } from '@/app/workspace/[workspaceId]/home/home'
 import { HomeFallback } from '@/app/workspace/[workspaceId]/home/home-fallback'
+import { resolveTableViewsEnabled } from '@/app/workspace/[workspaceId]/home/resolve-table-views-flag'
 
 export const metadata: Metadata = {
   title: 'Chat',
@@ -16,14 +17,17 @@ interface ChatPageProps {
 }
 
 export default async function ChatPage({ params }: ChatPageProps) {
-  const [{ chatId }, session] = await Promise.all([params, getSession()])
+  const [{ workspaceId, chatId }, session] = await Promise.all([params, getSession()])
+  const userId = session?.user?.id
+  const tableViewsEnabled = await resolveTableViewsEnabled(workspaceId, userId)
   return (
     <Suspense fallback={<HomeFallback />}>
       <Home
         key={chatId}
         chatId={chatId}
         userName={session?.user?.name}
-        userId={session?.user?.id}
+        userId={userId}
+        tableViewsEnabled={tableViewsEnabled}
       />
     </Suspense>
   )

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx

@@ -91,6 +91,18 @@ interface ResourceOptionsProps {
    * widgets; primary actions belong in the header's `actions`.
    */
   aside?: ReactNode
+  /**
+   * Mirror of {@link aside} on the other side: rendered immediately to the RIGHT
+   * of the filter/sort cluster and still grouped with it — e.g. the table editor's
+   * Columns menu, which reads as the last item in the Filter/Sort/Columns row.
+   */
+  asideEnd?: ReactNode
+  /**
+   * Control pinned to the far RIGHT of the bar, opposite the filter/sort cluster —
+   * e.g. the table editor's Save-view button. Unlike `aside` it is a real action,
+   * so it is separated from the menu group rather than joined to it.
+   */
+  trailing?: ReactNode
 }
 
 export const ResourceOptions = memo(function ResourceOptions({
@@ -99,6 +111,8 @@ export const ResourceOptions = memo(function ResourceOptions({
   filter,
   filterTags,
   aside,
+  asideEnd,
+  trailing,
 }: ResourceOptionsProps) {
   /**
    * Coordinates the Filter popover and Sort menu as a single menu bar: clicking
@@ -111,14 +125,23 @@ export const ResourceOptions = memo(function ResourceOptions({
   const isToggleFilter = filter?.mode === 'toggle'
   const popoverFilter = filter && filter.mode !== 'toggle' ? filter : null
 
-  const hasContent = search || sort || filter || aside || (filterTags && filterTags.length > 0)
+  const hasContent =
+    search ||
+    sort ||
+    filter ||
+    aside ||
+    asideEnd ||
+    trailing ||
+    (filterTags && filterTags.length > 0)
   if (!hasContent) return null
 
   return (
     <div className={cn('border-[var(--border)] border-b py-2.5', search ? 'px-6' : 'px-4')}>
       <div className='flex items-center'>
         {search && <SearchSection search={search} />}
-        <div className={cn('flex shrink-0 items-center gap-1.5', search && 'ml-auto')}>
+        {/* `ml-auto` moves to `trailing` when present so the menu cluster stays put
+            and only the trailing action is pushed to the far edge. */}
+        <div className={cn('flex shrink-0 items-center gap-1.5', search && !trailing && 'ml-auto')}>
           {aside}
           <div className='flex items-center'>
             {filterTags?.map((tag) => (
@@ -177,7 +200,9 @@ export const ResourceOptions = memo(function ResourceOptions({
             ) : null}
             {sort && (isToggleFilter || !popoverFilter) && <SortDropdown config={sort} />}
           </div>
+          {asideEnd}
         </div>
+        {trailing && <div className='ml-auto flex shrink-0 items-center gap-1.5'>{trailing}</div>}
       </div>
     </div>
   )

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

@@ -84,6 +84,9 @@ interface ResourceContentProps {
   isAgentResponding?: boolean
   genericResourceData?: GenericResourceData
   previewContextKey?: string
+  /** Resolved server-side by the home page — the embedded table can't read
+   *  AppConfig itself, so the flag is threaded down rather than looked up. */
+  tableViewsEnabled?: boolean
   onNotFound?: (resourceId: string) => void
   /**
    * Whether this resource is the one on screen. Only the persistent panels
@@ -153,6 +156,7 @@ export const ResourceContent = memo(function ResourceContent({
   isAgentResponding,
   genericResourceData,
   previewContextKey,
+  tableViewsEnabled,
   onNotFound,
   visible = true,
 }: ResourceContentProps) {
@@ -223,7 +227,15 @@ export const ResourceContent = memo(function ResourceContent({
 
   switch (resource.type) {
     case 'table':
-      return <Table key={resource.id} workspaceId={workspaceId} tableId={resource.id} embedded />
+      return (
+        <Table
+          key={resource.id}
+          workspaceId={workspaceId}
+          tableId={resource.id}
+          embedded
+          viewsEnabled={tableViewsEnabled}
+        />
+      )
 
     case 'file':
       return (

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

@@ -67,6 +67,8 @@ interface MothershipViewProps {
   previewSession?: FilePreviewSession | null
   isAgentResponding?: boolean
   genericResourceData?: GenericResourceData
+  /** Resolved server-side by the home page; forwarded to the embedded table. */
+  tableViewsEnabled?: boolean
 }
 
 export const MothershipView = memo(
@@ -81,6 +83,7 @@ export const MothershipView = memo(
       previewSession,
       isAgentResponding,
       genericResourceData,
+      tableViewsEnabled,
     }: MothershipViewProps,
     ref
   ) {
@@ -189,6 +192,7 @@ export const MothershipView = memo(
                 isAgentResponding={isAgentResponding}
                 genericResourceData={active.type === 'generic' ? genericResourceData : undefined}
                 previewContextKey={chatId}
+                tableViewsEnabled={tableViewsEnabled}
                 onNotFound={(resourceId) => removeResource('log', resourceId)}
               />
             )}

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

@@ -71,9 +71,11 @@ interface HomeProps {
   chatId?: string
   userName?: string
   userId?: string
+  /** Resolved server-side by the page — the embedded table can't reach AppConfig. */
+  tableViewsEnabled?: boolean
 }
 
-export function Home({ chatId, userName, userId }: HomeProps) {
+export function Home({ chatId, userName, userId, tableViewsEnabled }: HomeProps) {
   useOAuthReturnRouter()
   const { workspaceId } = useParams<{ workspaceId: string }>()
   const router = useRouter()
@@ -523,6 +525,7 @@ export function Home({ chatId, userName, userId }: HomeProps) {
             previewSession={previewSession}
             isAgentResponding={isSending}
             genericResourceData={genericResourceData ?? undefined}
+            tableViewsEnabled={tableViewsEnabled}
             className={skipResourceTransition ? '!transition-none' : undefined}
           />
         </Suspense>