feat(resources): logs and files graphics, and settle the set as one collection

Logs is an activity feed — newest run lifted onto its own card, older ones
settling behind it. The relative stamps are the only literal text in any of these
graphics; everything else stays skeleton, so nothing here has to be translated or
kept true.

Files is a folder with sheets standing proud of its front panel. Depth comes from
the surface ramp rather than shadow, which would need separate light and dark
recipes where the ramp inverts on its own. The tab's diagonal is filleted at both
ends and every outer corner shares one radius — mixing radii, or running the
diagonal into square junctions, made the corners fight at this size.

Consistency pass across the set:

- Titles are the resource name alone. "No tables yet" earned nothing the
  description does not already say.
- The knowledge mark is mirrored so its bore faces left. Rebuilt on the geometry
  rather than flipped, since a flip would have put the shading on the wrong side.
  Its contours are thinned and mixed toward `--border-1`: the landing marks are
  the focal art of their section, but this one sits beside a ruled grid whose
  lines are 1px, and full-weight contours read as ink next to it.
- The logs feed is sized to the same ~148px footprint as the rest. The frame
  centres graphic and copy together, so a taller graphic pushes its title out of
  line with the others' and the set stops reading as one thing.
- Every empty state carries its create action and a docs link, each running the
  same handler as the header's primary chip.
- Fades run whichever way the subject recedes: the tables grid to the
  bottom-right, the knowledge set up and right, the logs feed down, the folder
  up.

Fixes a duplicate React key in the knowledge mark — the volumes stack along y
now, so keying on `box.x` gave every one of them `0`.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: andresdjasso

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

@@ -1,55 +1,122 @@
+import { Chip, ChipLink, Upload } from '@sim/emcn'
+import { BookOpen } from '@sim/emcn/icons'
 import { EmptyState } from '@/components/empty-state/empty-state'
-import {
-  Bar,
-  Vignette,
-} from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/vignette'
 
-/** Name and size skeleton widths for the files already sitting in the folder. */
-const FOLDER_FILES = [
-  { name: 84, size: 22 },
-  { name: 62, size: 18 },
-] as const
+const FILES_DOCS_URL = 'https://docs.sim.ai/files'
 
 /**
- * A folder held open with one file still in the air above its dashed landing
- * slot — Files is the one resource whose empty state is really an invitation to
- * drop something, so the graphic draws the gesture rather than the result.
+ * Hairline contours, matching the tables grid's 1px `--border-1` rules and the
+ * knowledge mark's thinned strokes — the graphics sit one nav item apart, so a
+ * heavier outline here would read as a different illustration system.
+ *
+ * Fills stay near the top of the surface ramp for the same reason: the border
+ * draws the folder and the fill only has to separate one layer from the next. A
+ * solid mid-grey body made this the heaviest thing on the page.
  */
+const HAIRLINE = {
+  stroke: 'var(--border-1)',
+  strokeWidth: 1.1,
+  strokeLinejoin: 'round' as const,
+} as const
+
+/**
+ * A folder held open with sheets standing proud of its front panel.
+ *
+ * Depth is carried by the surface ramp rather than by shadow: the back panel is
+ * the darkest tier, the sheets are the lightest, and the front panel sits between
+ * them. Shadows would need separate light and dark recipes; the ramp inverts on
+ * its own.
+ *
+ * The tab's diagonal is filleted at both ends and every outer corner shares one
+ * radius, so the silhouette reads as a single drawn shape. Mixing radii, or
+ * running the diagonal into square junctions, makes the corners fight each other
+ * at this size.
+ */
+const CORNER = 10
+const FOLDER_BACK = [
+  'M 22 34',
+  'H 66',
+  'Q 72 34 75.5 38',
+  'L 82.5 46',
+  'Q 86 50 92 50',
+  'H 178',
+  'Q 188 50 188 60',
+  'V 140',
+  'Q 188 150 178 150',
+  'H 22',
+  'Q 12 150 12 140',
+  'V 44',
+  'Q 12 34 22 34',
+  'Z',
+].join(' ')
+
+/**
+ * Dissolves upward, so the folder rises out of the page while its front panel
+ * stays crisp where the copy begins. Running it the other way — the direction the
+ * logs feed fades — ate the panel's base and left the tab hanging.
+ */
+const FOLDER_FADE =
+  '[-webkit-mask-image:linear-gradient(to_top,#000_58%,transparent_100%)] [mask-image:linear-gradient(to_top,#000_58%,transparent_100%)]'
+
 function FilesGraphic() {
   return (
-    <Vignette>
-      <span className='absolute top-[30px] left-[54px] h-[16px] w-[64px] rounded-t-[8px] border-[var(--border-1)] border-x border-t bg-[var(--surface-3)]' />
-
-      <div className='absolute top-[42px] left-[54px] h-[92px] w-[208px] rounded-[8px] rounded-tl-none border border-[var(--border-1)] bg-[var(--surface-2)] px-3 pt-3'>
-        {FOLDER_FILES.map((file) => (
-          <div key={file.name} className='mb-[10px] flex items-center gap-2'>
-            <span className='size-[14px] shrink-0 rounded-[3px] bg-[var(--surface-5)]' />
-            <Bar className='h-2' style={{ width: file.name }} />
-            <Bar className='ml-auto h-2' style={{ width: file.size }} />
-          </div>
-        ))}
-
-        <span className='block h-[26px] w-full rounded-[6px] border border-[var(--brand-secondary)] border-dashed opacity-60' />
-      </div>
-
-      <div className='-rotate-6 absolute top-[10px] left-[178px] flex h-[36px] w-[108px] items-center gap-2 rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-1)] px-2.5 shadow-lg'>
-        <span className='size-[16px] shrink-0 rounded-[4px] bg-[color-mix(in_srgb,var(--brand-secondary)_28%,transparent)]' />
-        <span className='flex flex-col gap-[5px]'>
-          <Bar className='h-2 w-[54px]' />
-          <Bar className='h-[6px] w-[32px]' />
-        </span>
-      </div>
-    </Vignette>
+    <svg
+      viewBox='0 0 200 160'
+      width={185}
+      height={148}
+      fill='none'
+      aria-hidden='true'
+      focusable='false'
+      className={`block max-w-none shrink-0 ${FOLDER_FADE}`}
+    >
+      <path d={FOLDER_BACK} fill='var(--surface-4)' {...HAIRLINE} />
+
+      <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}
+      />
+    </svg>
   )
 }
 
+interface FilesEmptyStateProps {
+  /** Opens the file picker — the same action the header's upload chip runs. */
+  onUpload: () => void
+  /** Mirrors the header chip's disabled state: no edit rights, or an upload in flight. */
+  uploadDisabled?: boolean
+}
+
 /** Empty state for the files list when the workspace has none. */
-export function FilesEmptyState() {
+export function FilesEmptyState({ onUpload, uploadDisabled = false }: FilesEmptyStateProps) {
   return (
     <EmptyState
       graphic={<FilesGraphic />}
-      title='No files yet'
-      description='Drop files here to share them across your team and every agent.'
+      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>
+          <ChipLink
+            href={FILES_DOCS_URL}
+            target='_blank'
+            rel='noopener noreferrer'
+            variant='border'
+            leftIcon={BookOpen}
+          >
+            Docs
+          </ChipLink>
+        </div>
+      }
     />
   )
 }

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

@@ -12,7 +12,7 @@ const ENTRIES = [
   { label: 'Knowledge', node: <KnowledgeEmptyState onCreate={() => {}} /> },
   { label: 'Tables', node: <TablesEmptyState onCreate={() => {}} /> },
   { label: 'Logs', node: <LogsEmptyState /> },
-  { label: 'Files', node: <FilesEmptyState /> },
+  { label: 'Files', node: <FilesEmptyState onUpload={() => {}} /> },
   { label: 'Skills', node: <SkillsEmptyState /> },
 ]
 

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

@@ -20,7 +20,7 @@ export function KnowledgeEmptyState({
   return (
     <EmptyState
       graphic={<KnowledgeIsoMark height={148} />}
-      title='No knowledge bases yet'
+      title='Knowledge bases'
       description='Upload documents to give your agents a memory they can search.'
       action={
         <div className='flex items-center gap-2'>

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

@@ -42,22 +42,37 @@ function boxFaces(box: Box) {
   }
 }
 
+/**
+ * Thin along y rather than x, so the cover is the face at max y — the one the
+ * projection turns to the left. Stacking along y then walks the set left-and-down
+ * toward the viewer, so drawing in offset order paints back to front.
+ */
 const SLABS: Box[] = [0, 90, 180].map((offset) => ({
-  x: offset,
-  y: 0,
+  x: 0,
+  y: offset,
   z: 0,
-  w: 46,
-  d: 208,
+  w: 208,
+  d: 46,
   h: 236,
 }))
 
-const ISO_STROKE = 'color-mix(in srgb, var(--text-subtle) 76%, var(--text-muted))'
+/**
+ * Lighter and thinner than the landing marks draw them.
+ *
+ * Those marks are the focal art of their section; here the mark sits beside a
+ * ruled grid and a skeleton feed whose lines are 1px of `--border-1`. Carrying
+ * the landing's full-weight contour made the volumes read as ink next to those,
+ * so the stroke is mixed toward `--border-1` and thinned to land near a hairline
+ * once the mark is scaled to empty-state size.
+ */
+const ISO_STROKE =
+  'color-mix(in srgb, color-mix(in srgb, var(--text-subtle) 76%, var(--text-muted)) 55%, var(--border-1))'
 const ISO_FILL_LOW = 'var(--surface-6)'
 const ISO_FILL_MID = 'color-mix(in srgb, var(--surface-3) 58%, var(--surface-6))'
 const ISO_FILL_HIGH = 'var(--surface-3)'
 /** Darker than any outer face — the bore's wall turns away from the light. */
 const ISO_FILL_BORE = 'color-mix(in srgb, var(--surface-6) 72%, var(--surface-7))'
-const ISO_LINE_STROKE_WIDTH = 3.2
+const ISO_LINE_STROKE_WIDTH = 1.9
 
 /**
  * Maps flat artwork into the plane of the front volume's cover.
@@ -72,25 +87,25 @@ const ISO_LINE_STROKE_WIDTH = 3.2
 const COVER = SLABS[SLABS.length - 1]
 
 const COVER_PLANE = (() => {
-  const [originX, originY] = project(COVER.x + COVER.w, COVER.y, COVER.z)
-  return `matrix(${(-COS_30).toFixed(4)} 0.5 0 1 ${originX.toFixed(3)} ${(originY - COVER.h).toFixed(3)})`
+  const [originX, originY] = project(COVER.x, COVER.y + COVER.d, COVER.z)
+  return `matrix(${COS_30.toFixed(4)} 0.5 0 1 ${originX.toFixed(3)} ${(originY - COVER.h).toFixed(3)})`
 })()
 
 const BORE_RADIUS = 62
-const BORE_CX = COVER.d / 2
+const BORE_CX = COVER.w / 2
 const BORE_CY = COVER.h / 2
 
 /**
  * The far mouth of the bore, in the same cover-plane coordinates.
  *
- * Boring straight back through the volume is a world-space step of `-w` along x.
+ * Boring straight back through the volume is a world-space step of `-d` along y.
  * Solving the cover-plane matrix for the local offset that produces that step
- * gives `(+w, -w)` — so the far mouth sits up and left of the near one by exactly
+ * gives `(+d, -d)` — so the far mouth sits up and left of the near one by exactly
  * the volume's thickness, and the sliver of near-mouth it fails to cover is the
  * wall you see down the hole.
  */
-const FAR_CX = BORE_CX + COVER.w
-const FAR_CY = BORE_CY - COVER.w
+const FAR_CX = BORE_CX + COVER.d
+const FAR_CY = BORE_CY - COVER.d
 
 const BORE_MASK_ID = 'knowledge-iso-bore-mask'
 const BORE_CLIP_ID = 'knowledge-iso-bore-clip'
@@ -108,13 +123,13 @@ const VIEW_BOX = `${MIN_X.toFixed(2)} ${MIN_Y.toFixed(2)} ${(MAX_X - MIN_X).toFi
  * The tables grid's corner fade, run along the other diagonal.
  *
  * There it dissolves toward the bottom-right, because a grid keeps its meaning
- * cropped. Here the stack recedes up and to the left, and the front volume
- * carries the bore — so the fade is anchored at the bottom-right and eats into
- * the back of the set instead, reading as more volumes behind rather than
- * dissolving the one detail worth looking at.
+ * cropped. Here the set recedes up and to the right, and the front volume carries
+ * the bore — so the fade is anchored at the bottom-left and eats into the back of
+ * the set instead, reading as more volumes behind rather than dissolving the one
+ * detail worth looking at.
  */
 const STACK_FADE =
-  '[-webkit-mask-image:linear-gradient(to_right,transparent_0%,#000_44%),linear-gradient(to_bottom,transparent_0%,#000_40%)] [mask-image:linear-gradient(to_right,transparent_0%,#000_44%),linear-gradient(to_bottom,transparent_0%,#000_40%)] [-webkit-mask-composite:source-in] [mask-composite:intersect]'
+  '[-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,
@@ -154,9 +169,9 @@ export function KnowledgeIsoMark({ height = 148 }: KnowledgeIsoMarkProps) {
         {SLABS.map((box) => {
           const faces = boxFaces(box)
           return (
-            <g key={box.x}>
-              <path d={toPath(faces.left)} fill={ISO_FILL_LOW} stroke='none' />
-              <path d={toPath(faces.right)} fill={ISO_FILL_MID} stroke='none' />
+            <g key={`${box.x}-${box.y}`}>
+              <path d={toPath(faces.left)} fill={ISO_FILL_MID} stroke='none' />
+              <path d={toPath(faces.right)} fill={ISO_FILL_LOW} stroke='none' />
               <path d={toPath(faces.top)} fill={ISO_FILL_HIGH} stroke='none' />
               <path d={toPath(faces.left)} {...LINE_PROPS} />
               <path d={toPath(faces.right)} {...LINE_PROPS} />