simplify(resources): reuse the iso recipe and let the frame own its layout

Hides the empty-state graphic behind `error` as well. A failed load also
leaves `rows` empty, and inviting someone to create their first item is the
wrong answer to a request that did not complete — all four pages only logged
the error, so the zero-data copy was what a failed load actually rendered.

`iso-illustration-style` moves out of the landing route group to
`components/iso/`. Importing it from a workspace route was the only
workspace-to-landing edge in the app, one directory away from an `iso-marks`
barrel that pulls ~10KB gzipped of illustration components — a hazard for
whoever needs the second constant. The contour recipe is now shared too:
`createIsoLineProps` takes an optional stroke width, so the knowledge mark
stops re-declaring it and only its weight diverges.

`EmptyState` owns the action row's layout, so the three pages with two chips
drop their wrapper div and every empty state's chips sit identically. Its
unused `className` prop goes with them. Also drops the `height` prop that had
one caller passing its default, and the `CORNER` constant that promised
single-sourcing the path's four bare literals did not honour.

Author: waleedlatif1

apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-build-illustration.tsx

@@ -5,7 +5,7 @@ import {
   ISO_FILL_LOW,
   ISO_FILL_MID,
   ISO_STROKE,
-} from '@/app/(landing)/components/mothership/components/iso-marks/iso-illustration-style'
+} from '@/components/iso/iso-illustration-style'
 
 export interface IsoBuildIllustrationProps {
   size?: number

apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-ingest-illustration.tsx

@@ -9,7 +9,7 @@ import {
   ISO_FILL_PULSE_LOW,
   ISO_FILL_PULSE_MID,
   ISO_STROKE,
-} from '@/app/(landing)/components/mothership/components/iso-marks/iso-illustration-style'
+} from '@/components/iso/iso-illustration-style'
 
 export interface IsoIngestIllustrationProps {
   size?: number

apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-integrate-illustration.tsx

@@ -5,7 +5,7 @@ import {
   ISO_FILL_LOW,
   ISO_FILL_MID,
   ISO_STROKE,
-} from '@/app/(landing)/components/mothership/components/iso-marks/iso-illustration-style'
+} from '@/components/iso/iso-illustration-style'
 
 export interface IsoIntegrateIllustrationProps {
   size?: number

apps/sim/app/(landing)/components/mothership/components/iso-marks/iso-monitor-illustration.tsx

@@ -5,7 +5,7 @@ import {
   ISO_FILL_LOW,
   ISO_FILL_MID,
   ISO_STROKE,
-} from '@/app/(landing)/components/mothership/components/iso-marks/iso-illustration-style'
+} from '@/components/iso/iso-illustration-style'
 
 export interface IsoMonitorIllustrationProps {
   size?: number

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/files-empty-state.tsx

@@ -20,7 +20,6 @@ const HAIRLINE = {
   strokeLinejoin: 'round' as const,
 } as const
 
-const CORNER = 10
 const FOLDER_BACK = [
   'M 22 34',
   'H 66',
@@ -53,8 +52,8 @@ const FOLDER_FADE =
  * darkest tier, the sheets the lightest, the front panel between them. Shadows
  * would need separate light and dark recipes; the ramp inverts on its own.
  *
- * Every outer corner shares one radius so the silhouette reads as a single drawn
- * shape — mixing radii makes the corners fight each other at this size.
+ * Every outer corner shares the same 10-unit radius so the silhouette reads as a
+ * single drawn shape — mixing radii makes the corners fight each other at this size.
  */
 function FilesGraphic() {
   return (
@@ -72,15 +71,7 @@ function FilesGraphic() {
       <rect x='34' y='56' width='132' height='84' rx='5' fill='var(--surface-2)' {...HAIRLINE} />
       <rect x='26' y='64' width='148' height='76' rx='5' fill='var(--surface-2)' {...HAIRLINE} />
 
-      <rect
-        x='12'
-        y='74'
-        width='176'
-        height='76'
-        rx={CORNER}
-        fill='var(--surface-2)'
-        {...HAIRLINE}
-      />
+      <rect x='12' y='74' width='176' height='76' rx='10' fill='var(--surface-2)' {...HAIRLINE} />
     </svg>
   )
 }
@@ -100,12 +91,12 @@ export function FilesEmptyState({ onUpload, uploadDisabled = false }: FilesEmpty
       title='Files'
       description='Upload files to share them across your team and every agent.'
       action={
-        <div className='flex items-center gap-2'>
+        <>
           <Chip variant='primary' onClick={onUpload} disabled={uploadDisabled} leftIcon={Upload}>
             Upload
           </Chip>
           <EmptyStateDocsLink href={FILES_DOCS_URL} />
-        </div>
+        </>
       }
     />
   )

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/knowledge-empty-state.tsx

@@ -20,16 +20,16 @@ export function KnowledgeEmptyState({
 }: KnowledgeEmptyStateProps) {
   return (
     <EmptyState
-      graphic={<KnowledgeIsoMark height={148} />}
+      graphic={<KnowledgeIsoMark />}
       title='Knowledge bases'
       description='Upload documents to give your agents a memory they can search.'
       action={
-        <div className='flex items-center gap-2'>
+        <>
           <Chip variant='primary' onClick={onCreate} disabled={createDisabled} leftIcon={Plus}>
             New base
           </Chip>
           <EmptyStateDocsLink href={KNOWLEDGE_DOCS_URL} />
-        </div>
+        </>
       }
     />
   )

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/knowledge-iso.tsx

@@ -1,11 +1,12 @@
 import { cn } from '@sim/emcn'
 import {
+  createIsoLineProps,
   ISO_FILL_HIGH,
   ISO_FILL_LOW,
   ISO_FILL_MID,
   ISO_FILL_PULSE_LOW,
   ISO_STROKE as ISO_STROKE_BASE,
-} from '@/app/(landing)/components/mothership/components/iso-marks/iso-illustration-style'
+} from '@/components/iso/iso-illustration-style'
 
 const COS_30 = Math.cos(Math.PI / 6)
 
@@ -70,7 +71,10 @@ const SLABS: Box[] = [0, 90, 180].map((offset) => ({
 const ISO_STROKE = `color-mix(in srgb, ${ISO_STROKE_BASE} 55%, var(--border-1))`
 /** Darker than any outer face — the bore's wall turns away from the light. */
 const ISO_FILL_BORE = ISO_FILL_PULSE_LOW
-const ISO_LINE_STROKE_WIDTH = 1.9
+const KNOWLEDGE_STROKE_WIDTH = 1.9
+
+/** Matches the other three resource graphics, so the set centres as one collection. */
+const MARK_HEIGHT = 148
 
 /**
  * Maps flat artwork into the plane of the front volume's cover.
@@ -140,13 +144,12 @@ const VIEW_BOX = `${MIN_X.toFixed(2)} ${MIN_Y.toFixed(2)} ${(MAX_X - MIN_X).toFi
 const STACK_FADE =
   '[-webkit-mask-image:linear-gradient(to_right,#000_56%,transparent_100%),linear-gradient(to_bottom,transparent_0%,#000_40%)] [mask-image:linear-gradient(to_right,#000_56%,transparent_100%),linear-gradient(to_bottom,transparent_0%,#000_40%)] [-webkit-mask-composite:source-in] [mask-composite:intersect]'
 
-const LINE_PROPS = {
-  fill: 'none' as const,
-  stroke: ISO_STROKE,
-  strokeWidth: ISO_LINE_STROKE_WIDTH,
-  strokeLinecap: 'round' as const,
-  strokeLinejoin: 'round' as const,
-}
+/** Shared iso contour recipe at this mark's own weight; spread onto both paths and circles. */
+const LINE_PROPS = createIsoLineProps<SVGPathElement & SVGCircleElement>(
+  undefined,
+  ISO_STROKE,
+  KNOWLEDGE_STROKE_WIDTH
+)
 
 /**
  * Down the hole: the near mouth is floored with the wall tone, then the far mouth
@@ -178,24 +181,20 @@ function BoreInterior() {
   )
 }
 
-interface KnowledgeIsoMarkProps {
-  height?: number
-}
-
 /**
  * Isometric knowledge-base mark on the landing page's iso-illustration recipe.
  *
  * Geometry is authored in a large unit space so the shared stroke constant lands
  * as a hairline once the mark is scaled to empty-state size — as it does on the
  * landing marks, which draw 3.2 into a ~526-unit viewBox.
  */
-export function KnowledgeIsoMark({ height = 148 }: KnowledgeIsoMarkProps) {
-  const width = height * ((MAX_X - MIN_X) / (MAX_Y - MIN_Y))
+export function KnowledgeIsoMark() {
+  const width = MARK_HEIGHT * ((MAX_X - MIN_X) / (MAX_Y - MIN_Y))
   return (
     <svg
       viewBox={VIEW_BOX}
       width={width}
-      height={height}
+      height={MARK_HEIGHT}
       fill='none'
       aria-hidden='true'
       focusable='false'

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/tables-empty-state.tsx

@@ -116,12 +116,12 @@ export function TablesEmptyState({ onCreate, createDisabled = false }: TablesEmp
       title='Tables'
       description='Create a table to store structured data your agents can read and write.'
       action={
-        <div className='flex items-center gap-2'>
+        <>
           <Chip variant='primary' onClick={onCreate} disabled={createDisabled} leftIcon={Plus}>
             New table
           </Chip>
           <EmptyStateDocsLink href={TABLES_DOCS_URL} />
-        </div>
+        </>
       }
     />
   )

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

@@ -1818,11 +1818,15 @@ export function Files() {
    * The loading and placeholder gates cover the paints where `rows` is empty only
    * because the list has not arrived — a cold cache when the server prefetch
    * declined to seed, and the retained previous result during a workspace switch.
+   * `error` is gated too: a failed load also leaves `rows` empty, and inviting
+   * someone to create their first item is the wrong answer to a request that
+   * did not complete.
    */
   const showEmptyState =
     rows.length === 0 &&
     !isLoading &&
     !isPlaceholderData &&
+    !error &&
     currentFolderId === null &&
     !debouncedSearchTerm.trim() &&
     filterTags.length === 0

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

@@ -1347,11 +1347,15 @@ export function Knowledge() {
    * The loading and placeholder gates cover the paints where `rows` is empty only
    * because the list has not arrived — a cold cache when the server prefetch
    * declined to seed, and the retained previous result during a workspace switch.
+   * `error` is gated too: a failed load also leaves `rows` empty, and inviting
+   * someone to create their first item is the wrong answer to a request that
+   * did not complete.
    */
   const showEmptyState =
     rows.length === 0 &&
     !isLoading &&
     !isPlaceholderData &&
+    !error &&
     currentFolderId === null &&
     !debouncedSearchQuery.trim() &&
     filterTags.length === 0