From 9da559e8a86b086ab74503865346142de4775673 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 8 Aug 2026 13:54:19 -0700
Subject: [PATCH 1/2] improvement(ui): consolidate the disclosure chevron and
 order resource menus like the sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#6400 aligned the workflow-tree folder chevron to the sidebar section header
(16px/100ms -> 14px/150ms) but left the literal hand-copied in three files, so the
next edit could drift them apart again. Extracts `disclosureChevronClass` into
chip-chrome as the single source and points the section header and both sidebar
trees at it. Adds `chipIconSlotClass` for the 16px slot that ChipChevronDown,
ChipSelect, ChipDropdown and ChipDatePicker each re-derived.

Both Back buttons rendered a ChevronDown rotated 90deg at 10px — wrong glyph, and
4px under every other chevron in the app; they are now ChevronLeft at 14px in that
shared slot. The sidebar file tree drew hand-inlined SVGs at strokeWidth 2 next to
the workflow tree's emcn icons at 1.55, so the two trees showed different folder
glyphs; both now use the emcn set. Its file rows also indented by the chevron's
width alone, landing their icon 4px left of a folder's and 2px smaller despite the
comment claiming they lined up — they now clear the chevron plus the row gap at
the same 16px size.

Separately, the chat `+`/`@` resource menus rendered every foldered family as a
submenu and only then the flat ones, which pinned Workflows to the top regardless
of any ordering. Adds `RESOURCE_MENU_ORDER` mirroring the sidebar top-down and
merges both kinds into one ordered pass, so the menus read Integrations, Chats,
Tables, Files, Knowledge Bases, Logs, Workflows, then Browser and Terminal on
desktop. Documents the general rule in .claude/rules/sim-list-ordering.md.
---
 .claude/rules/sim-list-ordering.md            |  76 ++++++++++
 CLAUDE.md                                     |   6 +
 .../add-resource-dropdown.tsx                 | 135 ++++++++++--------
 .../components/add-resource-dropdown/index.ts |   2 +-
 .../components/resource-registry/index.ts     |   2 +
 .../resource-registry/resource-registry.tsx   |  31 ++++
 .../plus-menu-dropdown/plus-menu-dropdown.tsx |  37 +----
 .../collapsed-sidebar-menu.tsx                |  16 +--
 .../components/file-list/file-list.tsx        |  58 +++-----
 .../settings-sidebar/settings-sidebar.tsx     |  18 ++-
 .../sidebar-section/sidebar-section.tsx       |  16 +--
 .../components/folder-item/folder-item.tsx    |  22 +--
 .../components/settings/settings-sidebar.tsx  |  11 +-
 .../chip-date-picker/chip-date-picker.tsx     |   7 +-
 .../chip-dropdown/chip-dropdown.tsx           |   6 +-
 .../components/chip-select/chip-select.tsx    |   6 +-
 .../emcn/src/components/chip/chip-chevron.tsx |   9 +-
 .../emcn/src/components/chip/chip-chrome.ts   |  14 ++
 packages/emcn/src/components/index.ts         |   2 +
 19 files changed, 266 insertions(+), 208 deletions(-)
 create mode 100644 .claude/rules/sim-list-ordering.md

diff --git a/.claude/rules/sim-list-ordering.md b/.claude/rules/sim-list-ordering.md
new file mode 100644
index 00000000000..2966eb4a1a6
--- /dev/null
+++ b/.claude/rules/sim-list-ordering.md
@@ -0,0 +1,76 @@
+---
+paths:
+  - "apps/sim/app/**/*.tsx"
+  - "apps/sim/ee/**/*.tsx"
+  - "apps/sim/components/**/*.tsx"
+---
+
+# List & Menu Ordering
+
+**A list orders itself the way the user already reads the same things somewhere else.** Dropdowns, context menus, tab strips, command palettes, and settings navs are all *second* presentations of a set the user has already seen — in the sidebar, in a toolbar, in a column-header row. When the second presentation reorders that set, the user re-reads it from scratch every time.
+
+This is not a style preference. Order is the cheapest affordance a list has, and the only one that costs nothing to get right.
+
+## The rule
+
+Before writing a list of items, find where the user sees those same items *first*. That surface owns the order; your list mirrors it.
+
+| The list | Mirrors |
+| --- | --- |
+| Resource menus (`+` attach, `@` mention, resource-tab `+`) | the workspace **sidebar**, top-down |
+| A row / root **context menu** | that surface's **toolbar**, left-to-right → top-to-bottom |
+| Settings tab strip, recently-deleted tabs | the **settings nav**, top-down |
+| A "New …" menu | the order those things appear once created |
+
+Left-to-right becomes top-to-bottom. A toolbar reading `Filter · Sort · Export · Delete` becomes a menu reading Filter, Sort, Export, Delete — never alphabetized, never grouped by implementation, never "destructive last" unless the toolbar already puts it last.
+
+Platform-only entries (desktop **Browser** and **Terminal**) trail the shared set rather than interleaving, so the common prefix is identical on every platform.
+
+## Encode the order once
+
+An order duplicated across surfaces is an order that will drift. Export **one** constant and sort by it — do not hand-maintain a matching literal per menu.
+
+```ts
+/** Top-down order for every menu listing resource families, mirroring the sidebar. */
+export const RESOURCE_MENU_ORDER: readonly MothershipResourceType[] = [
+  'integration', 'task', 'table', 'file', 'filefolder',
+  'knowledgebase', 'log', 'workflow', 'folder', 'browser', 'terminal', 'generic',
+]
+
+export function byResourceMenuOrder<T extends { type: MothershipResourceType }>(a: T, b: T) {
+  return RESOURCE_MENU_ORDER.indexOf(a.type) - RESOURCE_MENU_ORDER.indexOf(b.type)
+}
+```
+
+Canonical instance: `app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx`, consumed by `useAvailableResources` and `ResourceMenuSections`.
+
+## Render kinds in one pass, not one phase per kind
+
+The most common way a canonical order gets silently defeated: emitting all items of one *kind* and then all of another. Every submenu-backed family lands above every flat family regardless of what the order constant says.
+
+```tsx
+// ✗ Bad — two phases; the trees always pin to the top
+<ResourceTreeSections sections={treeSections} />
+{groups.filter((g) => !FOLDERED.has(g.type)).map(renderFlat)}
+
+// ✓ Good — one ordered pass; each entry picks its own rendering
+{entries.sort(byResourceMenuOrder).map((entry) =>
+  sectionByType.has(entry.type) ? renderTree(entry) : renderFlat(entry)
+)}
+```
+
+The same trap appears as "render the pinned ones, then the rest", "render enabled, then disabled", and "render the groups, then the loose items".
+
+## When order may diverge
+
+Only for reasons the user can perceive:
+
+- **Search/filter results** rank by match quality — the whole point is that ranking beats position.
+- **User-controlled ordering** (drag-to-reorder, manual `sortOrder`) wins over any canonical order.
+- **Recency lists** ("Recent chats") order by time, which *is* the order the user reads them elsewhere.
+
+"Grouped by which hook provides it", "alphabetical because it was easy", and "that's the order the array was built in" are not reasons.
+
+## Reviewing
+
+When a diff adds or edits a list of items, ask: where does the user see this set already, and does this match? If the answer is a different file with a different order, the diff needs a shared constant, not a second literal.
diff --git a/CLAUDE.md b/CLAUDE.md
index 1a1e4671737..fc63380d153 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -378,6 +378,12 @@ Shareable *client* view-state (active tab/panel, filters, search query, paginati
 
 Co-locate a `search-params.ts` per feature exporting the parser map (single source of truth, shared by client `useQueryStates`/`useQueryState` and server `createSearchParamsCache`). Never `import { z }` in client code for params — use nuqs parsers. Full decision framework, conventions, the debounced-input pattern, and the workflow-editor carve-out are in `.claude/rules/sim-url-state.md`.
 
+## List & Menu Ordering
+
+A list orders itself the way the user already reads the same things somewhere else. Resource menus (`+` attach, `@` mention, resource-tab `+`) mirror the **sidebar** top-down; a row or root **context menu** mirrors that surface's **toolbar**, left-to-right becoming top-to-bottom; tab strips mirror their nav. Platform-only entries (desktop Browser, Terminal) trail the shared set.
+
+Encode the order in ONE exported constant and sort by it — never a hand-maintained literal per menu (`RESOURCE_MENU_ORDER` / `byResourceMenuOrder` in `home/components/mothership-view/components/resource-registry`). Render mixed item kinds in a single ordered pass; emitting all submenu-backed families and then all flat ones silently pins every submenu to the top no matter what the constant says. Divergence is allowed only for search ranking, user-controlled ordering, and recency. Full rule in `.claude/rules/sim-list-ordering.md`.
+
 ## Styling
 
 Use Tailwind only, no inline styles. Use `cn()` from `@sim/emcn` for conditional classes.
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
index d1cdc78b561..d3f76ca1ae1 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
@@ -27,7 +27,10 @@ import {
   buildResourceFolderTree,
   type ResourceTreeNode,
 } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/resource-folder-tree'
-import { getResourceConfig } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
+import {
+  byResourceMenuOrder,
+  getResourceConfig,
+} from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
 import {
   RESOURCE_TAB_ICON_BUTTON_CLASS,
   RESOURCE_TAB_ICON_CLASS,
@@ -297,7 +300,7 @@ export function useAvailableResources(
         ],
       })
     }
-    return groups.filter((g) => !excluded.has(g.type))
+    return groups.filter((g) => !excluded.has(g.type)).sort(byResourceMenuOrder)
   }, [
     enabled,
     workflows,
@@ -414,12 +417,17 @@ interface FolderedSectionSpec {
   orderBySortOrder?: boolean
 }
 
-/** Single source of truth for the foldered submenus, in display order. */
+/**
+ * Single source of truth for the foldered submenus. Declared in
+ * {@link RESOURCE_MENU_ORDER}; the merge in {@link ResourceMenuSections} is what
+ * actually positions them among the flat families, so this order only has to agree
+ * with the canonical one rather than carry it.
+ */
 const FOLDERED_SECTION_SPECS: readonly FolderedSectionSpec[] = [
-  { type: 'workflow', folders: { kind: 'group', type: 'folder' }, orderBySortOrder: true },
-  { type: 'file', folders: { kind: 'group', type: 'filefolder' }, folderType: 'filefolder' },
   { type: 'table', folders: { kind: 'structure', key: 'table' } },
+  { type: 'file', folders: { kind: 'group', type: 'filefolder' }, folderType: 'filefolder' },
   { type: 'knowledgebase', folders: { kind: 'structure', key: 'knowledgebase' } },
+  { type: 'workflow', folders: { kind: 'group', type: 'folder' }, orderBySortOrder: true },
 ]
 
 /**
@@ -464,8 +472,11 @@ export function useResourceTreeSections({
   }, [groups, structureFolders])
 }
 
-interface ResourceTreeSectionsProps {
+interface ResourceMenuSectionsProps {
+  /** Foldered families, from {@link useResourceTreeSections}. */
   sections: ResourceTreeSection[]
+  /** Every available family. Foldered ones are taken from `sections` instead. */
+  groups: AvailableItemsByType[]
   onSelect: (resource: MothershipResource) => void
   /**
    * Width override for the submenu panels. The chat menu widens them past the
@@ -475,30 +486,72 @@ interface ResourceTreeSectionsProps {
   subContentClassName?: string
 }
 
-/** Renders {@link useResourceTreeSections} output as one submenu per family. */
-export function ResourceTreeSections({
+/**
+ * Renders every resource family as one submenu, foldered and flat interleaved in
+ * {@link RESOURCE_MENU_ORDER}. Rendering the two kinds in one pass is what lets a
+ * foldered family (Tables) sit above a flat one (Logs) — emitting all the trees
+ * and then all the flat families would pin every tree to the top regardless of the
+ * canonical order.
+ */
+export function ResourceMenuSections({
   sections,
+  groups,
   onSelect,
   subContentClassName,
-}: ResourceTreeSectionsProps) {
+}: ResourceMenuSectionsProps) {
+  const sectionByType = new Map(sections.map((section) => [section.type, section]))
+  const entries = groups
+    .filter(({ type, items }) =>
+      FOLDERED_RESOURCE_TYPES.has(type) ? sectionByType.has(type) : items.length > 0
+    )
+    .sort(byResourceMenuOrder)
+
   return (
     <>
-      {sections.map((section) => {
-        const config = getResourceConfig(section.type)
-        const SectionIcon = config.icon
+      {entries.map(({ type, items }) => {
+        const config = getResourceConfig(type)
+        const Icon = config.icon
+        const section = sectionByType.get(type)
+
+        // Browser and terminal each have one top-level panel — a flat launcher
+        // here creates inner tabs when that panel already exists.
+        if (!section && (type === 'browser' || type === 'terminal')) {
+          const item = items[0]
+          return (
+            <DropdownMenuItem
+              key={type}
+              onClick={() => onSelect({ type, id: item.id, title: item.name })}
+            >
+              <Icon className='size-[14px]' />
+              <span>{config.label}</span>
+            </DropdownMenuItem>
+          )
+        }
+
         return (
-          <DropdownMenuSub key={section.type}>
+          <DropdownMenuSub key={type}>
             <DropdownMenuSubTrigger>
-              <SectionIcon className='size-[14px]' />
+              <Icon className='size-[14px]' />
               <span>{config.label}</span>
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent className={subContentClassName}>
-              <ResourceFolderTreeItems
-                nodes={section.nodes}
-                type={section.type}
-                folderType={section.folderType}
-                onSelect={onSelect}
-              />
+              {section ? (
+                <ResourceFolderTreeItems
+                  nodes={section.nodes}
+                  type={section.type}
+                  folderType={section.folderType}
+                  onSelect={onSelect}
+                />
+              ) : (
+                items.map((item) => (
+                  <DropdownMenuItem
+                    key={item.id}
+                    onClick={() => onSelect({ type, id: item.id, title: item.name })}
+                  >
+                    {config.renderDropdownItem({ item })}
+                  </DropdownMenuItem>
+                ))
+              )}
             </DropdownMenuSubContent>
           </DropdownMenuSub>
         )
@@ -650,47 +703,7 @@ export function AddResourceDropdown({
               </div>
             )
           ) : (
-            <>
-              <ResourceTreeSections sections={treeSections} onSelect={select} />
-              {available.map(({ type, items }) => {
-                if (FOLDERED_RESOURCE_TYPES.has(type)) return null
-                if (items.length === 0) return null
-                const config = getResourceConfig(type)
-                const Icon = config.icon
-                // Browser and terminal each have one top-level panel — flat
-                // launchers here create inner tabs when that panel exists.
-                if (type === 'browser' || type === 'terminal') {
-                  const item = items[0]
-                  return (
-                    <DropdownMenuItem
-                      key={type}
-                      onClick={() => select({ type, id: item.id, title: item.name })}
-                    >
-                      <Icon className='size-[14px]' />
-                      <span>{config.label}</span>
-                    </DropdownMenuItem>
-                  )
-                }
-                return (
-                  <DropdownMenuSub key={type}>
-                    <DropdownMenuSubTrigger>
-                      <Icon className='size-[14px]' />
-                      <span>{config.label}</span>
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuSubContent>
-                      {items.map((item) => (
-                        <DropdownMenuItem
-                          key={item.id}
-                          onClick={() => select({ type, id: item.id, title: item.name })}
-                        >
-                          {config.renderDropdownItem({ item })}
-                        </DropdownMenuItem>
-                      ))}
-                    </DropdownMenuSubContent>
-                  </DropdownMenuSub>
-                )
-              })}
-            </>
+            <ResourceMenuSections sections={treeSections} groups={available} onSelect={select} />
           )}
         </div>
       </DropdownMenuContent>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/index.ts
index 337b05909ae..d419eca23be 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/index.ts
@@ -2,7 +2,7 @@ export {
   AddResourceDropdown,
   FOLDERED_RESOURCE_TYPES,
   ResourceFolderTreeItems,
-  ResourceTreeSections,
+  ResourceMenuSections,
   useAvailableResources,
   useResourceTreeSections,
 } from './add-resource-dropdown'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/index.ts
index bd16abae17a..ecdfa1cd258 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/index.ts
@@ -1,7 +1,9 @@
 export type { ResourceTypeConfig } from './resource-registry'
 export {
+  byResourceMenuOrder,
   getResourceConfig,
   invalidateResourceQueries,
+  RESOURCE_MENU_ORDER,
   RESOURCE_REGISTRY,
   RESOURCE_TYPES,
 } from './resource-registry'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
index 5a4793713ad..999473f88af 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
@@ -224,6 +224,37 @@ export const RESOURCE_REGISTRY: Record<MothershipResourceType, ResourceTypeConfi
 
 export const RESOURCE_TYPES = Object.values(RESOURCE_REGISTRY)
 
+/**
+ * Top-down order for every menu that lists resource families, mirroring the
+ * workspace sidebar so a user reads the same sequence in both places. The two
+ * desktop-only panels trail the workspace resources, matching where they surface
+ * in the app. `folder`/`filefolder` never render as their own entry — they feed
+ * their family's folder tree — but are ordered beside it so a menu that ever does
+ * surface them lands in the right place.
+ */
+export const RESOURCE_MENU_ORDER: readonly MothershipResourceType[] = [
+  'integration',
+  'task',
+  'table',
+  'file',
+  'filefolder',
+  'knowledgebase',
+  'log',
+  'workflow',
+  'folder',
+  'browser',
+  'terminal',
+  'generic',
+]
+
+/** Sorts anything keyed by resource type into {@link RESOURCE_MENU_ORDER}. */
+export function byResourceMenuOrder<T extends { type: MothershipResourceType }>(
+  a: T,
+  b: T
+): number {
+  return RESOURCE_MENU_ORDER.indexOf(a.type) - RESOURCE_MENU_ORDER.indexOf(b.type)
+}
+
 export function getResourceConfig(type: MothershipResourceType): ResourceTypeConfig {
   return RESOURCE_REGISTRY[type]
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/plus-menu-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/plus-menu-dropdown.tsx
index 67ad246f767..39f9c4b0ae2 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/plus-menu-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/plus-menu-dropdown.tsx
@@ -5,16 +5,11 @@ import {
   cn,
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuSearchInput,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@sim/emcn'
 import {
-  FOLDERED_RESOURCE_TYPES,
-  ResourceTreeSections,
+  ResourceMenuSections,
   useAvailableResources,
   useResourceTreeSections,
 } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown'
@@ -305,38 +300,12 @@ export const PlusMenuDropdown = React.memo(
             {/* Always-mounted; swapping this subtree with filtered results makes Radix's
                   menu FocusScope steal focus from the search input back to the content root. */}
             <div hidden={filteredItems !== null}>
-              <ResourceTreeSections
+              <ResourceMenuSections
                 sections={treeSections}
+                groups={visibleResources}
                 onSelect={handleSelect}
                 subContentClassName='max-w-[min(300px,calc(100vw-32px))]'
               />
-              {visibleResources
-                .filter(({ type }) => !FOLDERED_RESOURCE_TYPES.has(type))
-                .map(({ type, items }) => {
-                  if (items.length === 0) return null
-                  const config = getResourceConfig(type)
-                  const Icon = config.icon
-                  return (
-                    <DropdownMenuSub key={type}>
-                      <DropdownMenuSubTrigger>
-                        <Icon className='size-[14px]' />
-                        <span>{config.label}</span>
-                      </DropdownMenuSubTrigger>
-                      <DropdownMenuSubContent className='max-w-[min(300px,calc(100vw-32px))]'>
-                        {items.map((item) => (
-                          <DropdownMenuItem
-                            key={item.id}
-                            onClick={() => {
-                              handleSelect({ type, id: item.id, title: item.name })
-                            }}
-                          >
-                            {config.renderDropdownItem({ item })}
-                          </DropdownMenuItem>
-                        ))}
-                      </DropdownMenuSubContent>
-                    </DropdownMenuSub>
-                  )
-                })}
             </div>
             {/* Plain buttons, not DropdownMenuItem: mount/unmount must not mutate Radix's
                   menu Collection, or FocusScope restores focus to the content root. */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
index d29e742c0a0..29bc6910540 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -12,7 +12,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@sim/emcn'
-import { Folder, MoreHorizontal, Pencil, Plus, SquareArrowUpRight } from '@sim/emcn/icons'
+import { File, Folder, MoreHorizontal, Pencil, Plus, SquareArrowUpRight } from '@sim/emcn/icons'
 import Link from 'next/link'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { ConversationListItem } from '@/app/workspace/[workspaceId]/components'
@@ -62,19 +62,7 @@ function fileFlyoutEntries(
 }
 
 const FILE_FLYOUT_ICON = (
-  <svg
-    className='size-[14px] flex-shrink-0 text-[var(--text-icon)]'
-    viewBox='0 0 24 24'
-    fill='none'
-    stroke='currentColor'
-    strokeWidth='2'
-    strokeLinecap='round'
-    strokeLinejoin='round'
-    aria-hidden='true'
-  >
-    <path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
-    <path d='M14 2v4a2 2 0 0 0 2 2h4' />
-  </svg>
+  <File className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' aria-hidden='true' />
 )
 
 export function CollapsedFileFolderItems({
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/file-list/file-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/file-list/file-list.tsx
index 85158ee7b9d..8665fe0ff25 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/file-list/file-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/file-list/file-list.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { memo, useMemo, useState } from 'react'
-import { cn } from '@sim/emcn'
-import { ChevronRight } from '@sim/emcn/icons'
+import { chipContentIconClass, cn, disclosureChevronClass } from '@sim/emcn'
+import { ChevronRight, File, Folder, FolderOpen } from '@sim/emcn/icons'
 import Link from 'next/link'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import type { WorkspaceFileFolderApi } from '@/hooks/queries/workspace-file-folders'
@@ -42,24 +42,12 @@ function buildFileTree(
 
 const INDENT_PER_LEVEL = 16
 
-/** Width of the folder row's chevron, so a file's icon lines up with a folder's. */
-const CHEVRON_WIDTH = 14
-
-const FILE_ICON = (
-  <svg
-    className='size-[14px] flex-shrink-0 text-[var(--text-icon)]'
-    viewBox='0 0 24 24'
-    fill='none'
-    stroke='currentColor'
-    strokeWidth='2'
-    strokeLinecap='round'
-    strokeLinejoin='round'
-    aria-hidden='true'
-  >
-    <path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
-    <path d='M14 2v4a2 2 0 0 0 2 2h4' />
-  </svg>
-)
+/**
+ * A file row has no chevron, so it indents past where a folder row's would be —
+ * the chevron's own width plus the row's `gap-1` — putting the two rows' icons on
+ * the same x. Keep in step with `disclosureChevronClass` (14px) and the row gap.
+ */
+const CHEVRON_LEADING_WIDTH = 14 + 4
 
 interface FileTreeNodeItemProps {
   node: FileTreeNode
@@ -85,13 +73,13 @@ const FileTreeNodeItem = memo(function FileTreeNodeItem({
       <Link
         href={href}
         className={cn(
-          'group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg text-sm',
+          'group mx-0.5 flex h-[30px] items-center gap-1 rounded-lg text-sm',
           !isActive && 'hover-hover:bg-[var(--surface-hover)]',
           isActive && 'bg-[var(--surface-active)]'
         )}
-        style={{ paddingLeft: `${8 + level * INDENT_PER_LEVEL + CHEVRON_WIDTH}px` }}
+        style={{ paddingLeft: `${8 + level * INDENT_PER_LEVEL + CHEVRON_LEADING_WIDTH}px` }}
       >
-        {FILE_ICON}
+        <File className={chipContentIconClass} aria-hidden='true' />
         <span className='min-w-0 flex-1 truncate text-[var(--text-body)]'>{node.name}</span>
       </Link>
     )
@@ -109,27 +97,17 @@ const FileTreeNodeItem = memo(function FileTreeNodeItem({
       >
         <ChevronRight
           className={cn(
-            'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform duration-150',
+            disclosureChevronClass,
             isExpanded && hasChildren && 'rotate-90',
             !hasChildren && 'opacity-0'
           )}
-        />
-        <svg
-          className='size-[16px] flex-shrink-0 text-[var(--text-icon)]'
-          viewBox='0 0 24 24'
-          fill='none'
-          stroke='currentColor'
-          strokeWidth='2'
-          strokeLinecap='round'
-          strokeLinejoin='round'
           aria-hidden='true'
-        >
-          {isExpanded && hasChildren ? (
-            <path d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2' />
-          ) : (
-            <path d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' />
-          )}
-        </svg>
+        />
+        {isExpanded && hasChildren ? (
+          <FolderOpen className={chipContentIconClass} aria-hidden='true' />
+        ) : (
+          <Folder className={chipContentIconClass} aria-hidden='true' />
+        )}
         <span className='min-w-0 flex-1 truncate text-left text-[var(--text-body)]'>
           {node.name}
         </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
index f4587b47e78..51721d89430 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
@@ -1,7 +1,14 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ChevronDown, ChipConfirmModal, chipVariants, cn } from '@sim/emcn'
+import {
+  ChipConfirmModal,
+  chipContentIconClass,
+  chipIconSlotClass,
+  chipVariants,
+  cn,
+} from '@sim/emcn'
+import { ChevronLeft } from '@sim/emcn/icons'
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams, usePathname, useRouter } from 'next/navigation'
 import type { DesktopSettingsSurface } from '@/components/settings/navigation'
@@ -299,9 +306,10 @@ export function SettingsSidebar({
       >
         <SidebarTooltip label='Back' enabled={showCollapsedTooltips}>
           <button type='button' onClick={handleBack} className={chipVariants({ fullWidth: true })}>
-            <div className='flex size-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'>
-              <ChevronDown className='size-[10px] rotate-90' />
-            </div>
+            {/* The 16px slot every settings row gives its icon, so Back's label starts on their baseline. */}
+            <span aria-hidden className={cn(chipIconSlotClass, 'text-[var(--text-icon)]')}>
+              <ChevronLeft className='size-[14px]' />
+            </span>
             <span className='sidebar-collapse-hide truncate text-[var(--text-body)]'>Back</span>
           </button>
         </SidebarTooltip>
@@ -347,7 +355,7 @@ export function SettingsSidebar({
                     const itemClassName = chipVariants({ active, fullWidth: true })
                     const content = (
                       <>
-                        <Icon className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                        <Icon className={chipContentIconClass} />
                         <span className='sidebar-collapse-hide min-w-0 truncate text-[var(--text-body)]'>
                           {item.label}
                         </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx
index 2cd94f3f23b..41fa904a83e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { type ReactNode, useState } from 'react'
-import { ChevronDown, cn, Expandable, ExpandableContent } from '@sim/emcn'
+import { cn, disclosureChevronClass, Expandable, ExpandableContent } from '@sim/emcn'
+import { ChevronDown } from '@sim/emcn/icons'
 
 /**
  * Title-row layout, shared by the toggle and its rail-collapsed counterpart so the
@@ -11,14 +12,6 @@ import { ChevronDown, cn, Expandable, ExpandableContent } from '@sim/emcn'
  */
 const TITLE_ROW_CLASS = 'flex h-full min-w-0 flex-1 items-center gap-2 px-4'
 
-/**
- * One transition covering both of the chevron's states — the hover fade and the
- * collapse rotation — so the two can never drift apart. 150ms on Tailwind's default
- * `cubic-bezier(0.4, 0, 0.2, 1)` is the same curve the `collapsible-up`/`-down`
- * keyframes use for the body, so the whole section animates as one gesture.
- */
-const CHEVRON_TRANSITION_CLASS = 'transition-[opacity,transform] duration-150'
-
 interface SidebarSectionProps {
   title: string
   /** Controls pinned to the right of the title (e.g. the Workflows create/more buttons). */
@@ -93,9 +86,8 @@ export function SidebarSection({
              */}
             <ChevronDown
               className={cn(
-                'size-[14px] flex-shrink-0 text-[var(--text-icon)] opacity-0',
-                CHEVRON_TRANSITION_CLASS,
-                'group-hover/section:opacity-100 group-focus-visible/toggle:opacity-100',
+                disclosureChevronClass,
+                'opacity-0 group-hover/section:opacity-100 group-focus-visible/toggle:opacity-100',
                 !expanded && '-rotate-90'
               )}
             />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
index 3f5a0a9bd56..143625899f1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -1,12 +1,11 @@
 'use client'
 
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
-import { chipVariants, cn, toast } from '@sim/emcn'
+import { chipContentIconClass, chipVariants, cn, disclosureChevronClass, toast } from '@sim/emcn'
 import { ChevronRight, Folder, FolderOpen, Lock, MoreHorizontal } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
-import clsx from 'clsx'
 import { useRouter } from 'next/navigation'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { generateSubfolderName } from '@/lib/workspaces/naming'
@@ -501,22 +500,13 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
         onDragEnd={handleDragEnd}
       >
         <ChevronRight
-          className={clsx(
-            'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform duration-150',
-            isExpanded && 'rotate-90'
-          )}
+          className={cn(disclosureChevronClass, isExpanded && 'rotate-90')}
           aria-hidden='true'
         />
         {isExpanded ? (
-          <FolderOpen
-            className='size-[16px] flex-shrink-0 text-[var(--text-icon)]'
-            aria-hidden='true'
-          />
+          <FolderOpen className={chipContentIconClass} aria-hidden='true' />
         ) : (
-          <Folder
-            className='size-[16px] flex-shrink-0 text-[var(--text-icon)]'
-            aria-hidden='true'
-          />
+          <Folder className={chipContentIconClass} aria-hidden='true' />
         )}
         {isEditing ? (
           <input
@@ -552,7 +542,7 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
                 <span
                   role='img'
                   aria-label='Folder is locked'
-                  className={clsx(
+                  className={cn(
                     'pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity',
                     !isAnyDragActive && 'group-hover:opacity-0',
                     isContextMenuOpen && 'opacity-0'
@@ -566,7 +556,7 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
                 aria-label='Folder options'
                 onPointerDown={handleMorePointerDown}
                 onClick={handleMoreClick}
-                className={clsx(
+                className={cn(
                   'pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity',
                   !isAnyDragActive && 'group-hover:pointer-events-auto group-hover:opacity-100',
                   isContextMenuOpen && 'pointer-events-auto opacity-100'
diff --git a/apps/sim/components/settings/settings-sidebar.tsx b/apps/sim/components/settings/settings-sidebar.tsx
index 585ac03db19..82637e414d5 100644
--- a/apps/sim/components/settings/settings-sidebar.tsx
+++ b/apps/sim/components/settings/settings-sidebar.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { ChipConfirmModal, chipVariants, cn, Tooltip } from '@sim/emcn'
-import { ChevronDown } from '@sim/emcn/icons'
+import { ChipConfirmModal, chipIconSlotClass, chipVariants, cn, Tooltip } from '@sim/emcn'
+import { ChevronLeft } from '@sim/emcn/icons'
 import { useRouter } from 'next/navigation'
 import {
   SETTINGS_PLANE_CHROME,
@@ -114,9 +114,10 @@ export function SettingsSidebar<Section extends SettingsSection>({
               onClick={() => requestLeave(() => router.push(WORKSPACE_HREF))}
               className={chipVariants({ fullWidth: true })}
             >
-              <div className='flex size-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'>
-                <ChevronDown className='size-[10px] rotate-90' />
-              </div>
+              {/* The 16px slot every settings row gives its icon, so Back's label starts on their baseline. */}
+              <span aria-hidden className={cn(chipIconSlotClass, 'text-[var(--text-icon)]')}>
+                <ChevronLeft className='size-[14px]' />
+              </span>
               <span className='sidebar-collapse-hide truncate text-[var(--text-body)]'>Back</span>
             </button>
           </SidebarTooltip>
diff --git a/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx b/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
index 11f8de5a6ce..44baf6d5a1c 100644
--- a/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
+++ b/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
@@ -6,7 +6,7 @@ import { ChevronDown } from '../../icons'
 import { cn } from '../../lib/cn'
 import { Calendar, formatDateLabel, formatDateRangeLabel } from '../calendar/calendar'
 import { chipVariants, TRIGGER_BORDER_CLASS } from '../chip/chip'
-import { chipContentLabelClass } from '../chip/chip-chrome'
+import { chipContentLabelClass, chipIconSlotClass } from '../chip/chip-chrome'
 import { POPOVER_ANIMATION_CLASSES } from '../popover/popover-animation'
 
 interface ChipDatePickerBaseProps {
@@ -120,10 +120,7 @@ const ChipDatePicker = forwardRef<HTMLButtonElement, ChipDatePickerProps>(
               {triggerText || placeholder}
             </span>
             {variant === 'filled' && (
-              <span
-                aria-hidden
-                className='inline-flex size-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'
-              >
+              <span aria-hidden className={cn(chipIconSlotClass, 'text-[var(--text-icon)]')}>
                 <ChevronDown className='size-[14px]' />
               </span>
             )}
diff --git a/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx b/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
index e9360eecf26..1b391257b18 100644
--- a/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
+++ b/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
@@ -12,6 +12,7 @@ import type { VariantProps } from 'class-variance-authority'
 import { Check, ChevronDown } from '../../icons'
 import { cn } from '../../lib/cn'
 import { chipVariants, TRIGGER_BORDER_CLASS } from '../chip/chip'
+import { chipIconSlotClass } from '../chip/chip-chrome'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -241,10 +242,7 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
      * label — without this, the smaller glyph's bounding box would let the
      * chevron read as glued to the text relative to the leading icon.
      */
-    const chevronSlotClass = cn(
-      'inline-flex size-[16px] flex-shrink-0 items-center justify-center',
-      !isInverse && 'text-[var(--text-icon)]'
-    )
+    const chevronSlotClass = cn(chipIconSlotClass, !isInverse && 'text-[var(--text-icon)]')
     /**
      * `flex-1` is always applied so the chevron is pushed flush against the
      * trailing edge whenever the trigger gets stretched — by `fullWidth`, by a
diff --git a/packages/emcn/src/components/chip-select/chip-select.tsx b/packages/emcn/src/components/chip-select/chip-select.tsx
index 5ac884f8db7..94b4da1885e 100644
--- a/packages/emcn/src/components/chip-select/chip-select.tsx
+++ b/packages/emcn/src/components/chip-select/chip-select.tsx
@@ -4,6 +4,7 @@ import * as React from 'react'
 import { ChevronDown } from '../../icons'
 import { cn } from '../../lib/cn'
 import { chipVariants, TRIGGER_BORDER_CLASS } from '../chip/chip'
+import { chipIconSlotClass } from '../chip/chip-chrome'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -258,10 +259,7 @@ export function ChipSelect({
           <span className='min-w-0 truncate text-[var(--text-body)]'>
             {displayLabel ?? triggerLabel}
           </span>
-          <span
-            aria-hidden
-            className='inline-flex size-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'
-          >
+          <span aria-hidden className={cn(chipIconSlotClass, 'text-[var(--text-icon)]')}>
             <ChevronDown className='size-[14px]' />
           </span>
         </button>
diff --git a/packages/emcn/src/components/chip/chip-chevron.tsx b/packages/emcn/src/components/chip/chip-chevron.tsx
index 82c1fbd338b..3b4b30d23b5 100644
--- a/packages/emcn/src/components/chip/chip-chevron.tsx
+++ b/packages/emcn/src/components/chip/chip-chevron.tsx
@@ -1,5 +1,6 @@
 import { ChevronDown } from '../../icons'
 import { cn } from '../../lib/cn'
+import { chipIconSlotClass } from './chip-chrome'
 
 interface ChipChevronDownProps {
   /** Layout-only extras (e.g. `ml-auto` to push the chevron flush right). Never chrome. */
@@ -21,13 +22,7 @@ interface ChipChevronDownProps {
  */
 export function ChipChevronDown({ className }: ChipChevronDownProps) {
   return (
-    <span
-      aria-hidden
-      className={cn(
-        'inline-flex size-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]',
-        className
-      )}
-    >
+    <span aria-hidden className={cn(chipIconSlotClass, 'text-[var(--text-icon)]', className)}>
       <ChevronDown className='size-[14px]' />
     </span>
   )
diff --git a/packages/emcn/src/components/chip/chip-chrome.ts b/packages/emcn/src/components/chip/chip-chrome.ts
index 302e8ca4d1f..8c158a7eb13 100644
--- a/packages/emcn/src/components/chip/chip-chrome.ts
+++ b/packages/emcn/src/components/chip/chip-chrome.ts
@@ -58,6 +58,20 @@ export const chipGeometryClass = `h-[30px] items-center ${chipContentGap} rounde
 export const chipContentIconClass = 'size-[16px] flex-shrink-0 text-[var(--text-icon)]'
 /** Chip-content label (non-inverse): truncating `--text-body` at `text-sm`. Inverse chip variants override the color to `currentColor`. */
 export const chipContentLabelClass = 'min-w-0 truncate text-[var(--text-body)] text-sm'
+/**
+ * The disclosure chevron that rotates to expand or collapse a sidebar section or a
+ * tree row: 14px at `--text-icon`, animating on the same 150ms curve the section
+ * body expands on so the chevron and what it reveals read as one gesture. Opacity
+ * is in the property list for the consumers that also fade the chevron in.
+ *
+ * Single source for the sidebar section headers and the two sidebar trees. Other
+ * collapsible surfaces still carry their own literals at 8-12px and 100-200ms;
+ * migrating them onto this token is the remaining half of the consolidation.
+ */
+export const disclosureChevronClass =
+  'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-[opacity,transform] duration-150'
+/** The 16px square a chip-row icon or chevron centers in, so every row's label starts on the same baseline. */
+export const chipIconSlotClass = 'inline-flex size-[16px] flex-shrink-0 items-center justify-center'
 /**
  * Force-sizes a PRE-RENDERED icon node (`<svg>`/`<img>`/`<span>` avatar) to the
  * 14px resource-row standard + `--text-icon` color — regardless of the size the
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index 681d3c628e4..9a39315744c 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -28,7 +28,9 @@ export {
   chipFilledFillTokens,
   chipFilledSurfaceTokens,
   chipGeometryClass,
+  chipIconSlotClass,
   chipPrimaryFillTokens,
+  disclosureChevronClass,
 } from './chip/chip-chrome'
 export { ChipCombobox } from './chip-combobox/chip-combobox'
 export {

From 085f58f12147218021065ac9880e7a9027ee0eb1 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 8 Aug 2026 14:03:54 -0700
Subject: [PATCH 2/2] improvement(ui): order the remaining resource menus the
 way the user reads them
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An audit of every menu, tab strip, and context menu against the surface the user
already reads those items on turned up six more divergences.

The table row context menu put View execution before the Run/Re-run/Stop cluster
while the action bar puts it after, so the same four actions read in two orders;
the menu now follows the bar. The Files, Tables, and Knowledge empty-space create
menus were each the exact reverse of their own page header, and each named the
same action differently ("Create table" vs "New table", "Add knowledge base" vs
"New base") — reversed to match, labels unified.

Recently Deleted led with Workflows and buried Chats last, and put Knowledge Bases
ahead of Files; it now follows the sidebar after the default All tab. The command
palette hoisted Workflows from last to second for the same reason, and is now in
sidebar order too. Chats stays first in both, so the palette's Enter default is
unchanged.

Drops the unused RESOURCE_TYPES export: nothing consumed it, and its declaration
order was nearly the inverse of RESOURCE_MENU_ORDER, so the first consumer to map
it would have silently rendered a backwards menu.

Not included: buildUnifiedSettingsNavigation never applies its own unified.order
and returns registry declaration order instead. Nothing user-visible today (the
sidebar re-sorts before rendering) but navigation.test.ts pins the unsorted order
as canonical, so fixing it means changing that test — worth doing deliberately
rather than inside this PR.
---
 .../files-list-context-menu.tsx                | 18 ++++++++++--------
 .../mothership-view/components/index.ts        |  1 -
 .../components/resource-registry/index.ts      |  1 -
 .../resource-registry/resource-registry.tsx    |  2 --
 .../knowledge-list-context-menu.tsx            | 14 ++++++++------
 .../recently-deleted/recently-deleted.tsx      |  9 +++++----
 .../recently-deleted/search-params.ts          | 15 ++++++++++-----
 .../components/context-menu/context-menu.tsx   | 17 ++++++++++-------
 .../tables-list-context-menu.tsx               | 18 ++++++++++--------
 .../components/search-modal/search-modal.tsx   |  6 +++---
 apps/sim/stores/modals/search/types.ts         |  3 ++-
 11 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/files-list-context-menu/files-list-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/files-list-context-menu/files-list-context-menu.tsx
index 9d6308e761a..1fbe5068162 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/files-list-context-menu/files-list-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/files-list-context-menu/files-list-context-menu.tsx
@@ -43,10 +43,12 @@ export const FilesListContextMenu = memo(function FilesListContextMenu({
         sideOffset={4}
         onCloseAutoFocus={(e) => e.preventDefault()}
       >
-        {onCreateFile && (
-          <DropdownMenuItem disabled={disableCreate} onSelect={onCreateFile}>
-            <Plus />
-            New file
+        {/* Upload, New folder, New file — the order the page header presents
+            them once `orderHeaderActions` has pinned the primary action last. */}
+        {onUploadFile && (
+          <DropdownMenuItem disabled={disableUpload} onSelect={onUploadFile}>
+            <Upload />
+            Upload file
           </DropdownMenuItem>
         )}
         {onCreateFolder && (
@@ -55,10 +57,10 @@ export const FilesListContextMenu = memo(function FilesListContextMenu({
             New folder
           </DropdownMenuItem>
         )}
-        {onUploadFile && (
-          <DropdownMenuItem disabled={disableUpload} onSelect={onUploadFile}>
-            <Upload />
-            Upload file
+        {onCreateFile && (
+          <DropdownMenuItem disabled={disableCreate} onSelect={onCreateFile}>
+            <Plus />
+            New file
           </DropdownMenuItem>
         )}
       </DropdownMenuContent>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/index.ts
index 47d3ad87474..3eafad11021 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/index.ts
@@ -5,6 +5,5 @@ export {
   getResourceConfig,
   invalidateResourceQueries,
   RESOURCE_REGISTRY,
-  RESOURCE_TYPES,
 } from './resource-registry'
 export { ResourceTabs } from './resource-tabs'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/index.ts
index ecdfa1cd258..e8ae4e4ba60 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/index.ts
@@ -5,5 +5,4 @@ export {
   invalidateResourceQueries,
   RESOURCE_MENU_ORDER,
   RESOURCE_REGISTRY,
-  RESOURCE_TYPES,
 } from './resource-registry'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
index 999473f88af..22750f369a5 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
@@ -222,8 +222,6 @@ export const RESOURCE_REGISTRY: Record<MothershipResourceType, ResourceTypeConfi
   },
 } as const
 
-export const RESOURCE_TYPES = Object.values(RESOURCE_REGISTRY)
-
 /**
  * Top-down order for every menu that lists resource families, mirroring the
  * workspace sidebar so a user reads the same sequence in both places. The two
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-list-context-menu/knowledge-list-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-list-context-menu/knowledge-list-context-menu.tsx
index ee95e23bc19..3c7b2e35804 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-list-context-menu/knowledge-list-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-list-context-menu/knowledge-list-context-menu.tsx
@@ -49,18 +49,20 @@ export const KnowledgeListContextMenu = memo(function KnowledgeListContextMenu({
         sideOffset={4}
         onCloseAutoFocus={(e) => e.preventDefault()}
       >
-        {onAddKnowledgeBase && (
-          <DropdownMenuItem disabled={disableAdd} onSelect={onAddKnowledgeBase}>
-            <Plus />
-            Add knowledge base
-          </DropdownMenuItem>
-        )}
+        {/* New folder, New base — the order the page header presents them once
+            `orderHeaderActions` has pinned the primary action last. */}
         {onAddFolder && (
           <DropdownMenuItem disabled={disableAddFolder} onSelect={onAddFolder}>
             <FolderPlus />
             New folder
           </DropdownMenuItem>
         )}
+        {onAddKnowledgeBase && (
+          <DropdownMenuItem disabled={disableAdd} onSelect={onAddKnowledgeBase}>
+            <Plus />
+            New base
+          </DropdownMenuItem>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
index 39db4ff9265..ef7cb42baec 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
@@ -114,14 +114,15 @@ interface RestoredResourceEntry {
   displayIndex: number
 }
 
+/** Labels for {@link RECENTLY_DELETED_TABS}, which owns the order. */
 const TABS: { id: ResourceType; label: string }[] = [
   { id: 'all', label: 'All' },
-  { id: 'workflow', label: 'Workflows' },
-  { id: 'folder', label: 'Folders' },
+  { id: 'chat', label: 'Chats' },
   { id: 'table', label: 'Tables' },
-  { id: 'knowledge', label: 'Knowledge Bases' },
   { id: 'file', label: 'Files' },
-  { id: 'chat', label: 'Chats' },
+  { id: 'knowledge', label: 'Knowledge Bases' },
+  { id: 'workflow', label: 'Workflows' },
+  { id: 'folder', label: 'Folders' },
 ]
 
 const TYPE_LABEL: Record<Exclude<ResourceType, 'all'>, string> = {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/search-params.ts b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/search-params.ts
index 6379d8f145e..62ae0141460 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/search-params.ts
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/search-params.ts
@@ -1,15 +1,20 @@
 import { parseAsStringLiteral } from 'nuqs/server'
 import { createSortParams } from '@/lib/url-state'
 
-/** Selectable resource-type tabs in the Recently Deleted view. */
+/**
+ * Selectable resource-type tabs in the Recently Deleted view, after the default
+ * `all`: the sidebar's top-down order, so the tabs read the way the user already
+ * reads these resources. `TABS` in `recently-deleted.tsx` labels this same list —
+ * keep the two in step.
+ */
 export const RECENTLY_DELETED_TABS = [
   'all',
-  'workflow',
-  'folder',
+  'chat',
   'table',
-  'knowledge',
   'file',
-  'chat',
+  'knowledge',
+  'workflow',
+  'folder',
 ] as const
 
 export type RecentlyDeletedTab = (typeof RECENTLY_DELETED_TABS)[number]
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/context-menu/context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/context-menu/context-menu.tsx
index e4ca0b262a8..dd89bcd56a4 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/context-menu/context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/context-menu/context-menu.tsx
@@ -175,13 +175,10 @@ export function ContextMenu({
             Edit cell
           </DropdownMenuItem>
         )}
-        {canViewExecution && onViewExecution && (
-          <DropdownMenuItem onSelect={onViewExecution}>
-            <Eye />
-            View execution
-          </DropdownMenuItem>
-        )}
-        {/* Not gated on `disableEdit`: these write only workflow-output columns,
+        {/* Run, Re-run, Stop, then View execution — the order the action bar
+            presents the same four, so the user reads one sequence in both.
+
+            Not gated on `disableEdit`: these write only workflow-output columns,
             which the update lock exempts, and Stop is a cancel rather than a
             write. Their handlers are already withheld without edit permission. */}
         {hasWorkflowColumns && onRunWorkflows && (
@@ -202,6 +199,12 @@ export function ContextMenu({
             {stopLabel}
           </DropdownMenuItem>
         )}
+        {canViewExecution && onViewExecution && (
+          <DropdownMenuItem onSelect={onViewExecution}>
+            <Eye />
+            View execution
+          </DropdownMenuItem>
+        )}
         <DropdownMenuItem disabled={disableInsert} onSelect={onInsertAbove}>
           <ArrowUp />
           Insert row above
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/components/tables-list-context-menu/tables-list-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/components/tables-list-context-menu/tables-list-context-menu.tsx
index 1454dec9146..c9babea6f76 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/components/tables-list-context-menu/tables-list-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/components/tables-list-context-menu/tables-list-context-menu.tsx
@@ -54,10 +54,12 @@ export function TablesListContextMenu({
         sideOffset={4}
         onCloseAutoFocus={(e) => e.preventDefault()}
       >
-        {onCreateTable && (
-          <DropdownMenuItem disabled={disableCreate} onSelect={onCreateTable}>
-            <Plus />
-            Create table
+        {/* Import CSV, New folder, New table — the order the page header presents
+            them once `orderHeaderActions` has pinned the primary action last. */}
+        {onUploadCsv && (
+          <DropdownMenuItem disabled={disableUpload} onSelect={onUploadCsv}>
+            <Upload />
+            Import CSV
           </DropdownMenuItem>
         )}
         {onCreateFolder && (
@@ -66,10 +68,10 @@ export function TablesListContextMenu({
             New folder
           </DropdownMenuItem>
         )}
-        {onUploadCsv && (
-          <DropdownMenuItem disabled={disableUpload} onSelect={onUploadCsv}>
-            <Upload />
-            Import CSV
+        {onCreateTable && (
+          <DropdownMenuItem disabled={disableCreate} onSelect={onCreateTable}>
+            <Plus />
+            New table
           </DropdownMenuItem>
         )}
       </DropdownMenuContent>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index a53899b2f13..47428604ba5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -800,9 +800,6 @@ export function SearchModal({
               {showSection('chats') && (
                 <ChatsGroup items={filteredChats} onSelect={handleChatSelect} />
               )}
-              {showSection('workflows') && (
-                <WorkflowsGroup items={filteredWorkflows} onSelect={handleWorkflowSelect} />
-              )}
               {showSection('tables') && (
                 <TablesGroup items={filteredTables} onSelect={handleTableSelect} />
               )}
@@ -812,6 +809,9 @@ export function SearchModal({
               {showSection('knowledgeBases') && (
                 <KnowledgeBasesGroup items={filteredKnowledgeBases} onSelect={handleKbSelect} />
               )}
+              {showSection('workflows') && (
+                <WorkflowsGroup items={filteredWorkflows} onSelect={handleWorkflowSelect} />
+              )}
               {showSection('toolOperations') && (
                 <ToolOpsGroup items={filteredToolOps} onSelect={handleToolOperationSelect} />
               )}
diff --git a/apps/sim/stores/modals/search/types.ts b/apps/sim/stores/modals/search/types.ts
index 32146b9472b..a8e1e9022c1 100644
--- a/apps/sim/stores/modals/search/types.ts
+++ b/apps/sim/stores/modals/search/types.ts
@@ -63,11 +63,12 @@ export const SEARCH_SECTIONS = [
   'blocks',
   'tools',
   'triggers',
+  // Resource groups follow the sidebar's top-down order.
   'chats',
-  'workflows',
   'tables',
   'files',
   'knowledgeBases',
+  'workflows',
   'toolOperations',
   'workspaces',
   'docs',