feat(playground): Resources is the in-tab directory with real lists a…

…nd create actions Resources shows the kinds inside the workspace tab; a kind shows the real list with its New/Upload/Connect action under a Resources / Kind breadcrumb back to the directory; a row opens as its own resource tab. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014LcvZQzHFcm7Egc7rPEEHv
simstudioai · TheodoreSpeaks · Sep 25, 2026 · Sep 25, 2026 · Sep 25, 2026 · Sep 25, 2026
commit f9441676f24e751b35bbe9dcba5cbbe8e1e22cf4
diff --git a/apps/sim/app/playground/org/components/chat-resource-panel.tsx b/apps/sim/app/playground/org/components/chat-resource-panel.tsx
@@ -55,7 +55,7 @@ export function ChatResourcePanel({
   onOpenTerminal,
   onBrowse,
 }: ChatResourcePanelProps) {
-  if (view.type === 'workspace') return <WorkspaceView onBrowse={onBrowse} />
+  if (view.type === 'workspace') return <WorkspaceView />
   if (view.type === 'resource') return <ResourceBody resource={view.resource} />
   if (view.type === 'browser') return <BrowserView />
   if (view.type === 'terminal') return <TerminalView />

diff --git a/apps/sim/app/playground/org/components/chat-surface.tsx b/apps/sim/app/playground/org/components/chat-surface.tsx
@@ -40,7 +40,7 @@ import {
   WORKSPACES,
   workspaceById,
 } from '@/app/playground/org/lib/mock-data'
-import type { ProjectSection } from '@/app/playground/org/lib/routes'
+import { type ProjectSection, WORKSPACE_SECTIONS } from '@/app/playground/org/lib/routes'
 import { protoParsers } from '@/app/playground/org/lib/search-params'
 import { useWorkspacePane } from '@/app/playground/org/lib/workspace-pane-store'
 import {
@@ -117,10 +117,8 @@ function tabFromRef(ref: string): PanelTab {
   return newTab(workspaceId, kind)
 }
 
-const PROJECT_SECTIONS: readonly ProjectSection[] = ['dashboard', 'changelog', 'issues', 'settings']
-
 function isProjectSection(value: string): value is ProjectSection {
-  return PROJECT_SECTIONS.includes(value as ProjectSection)
+  return value === 'resources' || WORKSPACE_SECTIONS.some((section) => section.id === value)
 }
 
 const NO_MESSAGES: ChatMessage[] = []

diff --git a/apps/sim/app/playground/org/components/resource-kinds.tsx b/apps/sim/app/playground/org/components/resource-kinds.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import { BrowseRow, BrowseSection } from '@/app/playground/org/components/browse-rows'
+import { isPanelKind, resourcesOfKind } from '@/app/playground/org/lib/chat-resources'
+import { RESOURCES, type Workspace } from '@/app/playground/org/lib/mock-data'
+import { RESOURCE_SECTIONS, type WorkspaceSection } from '@/app/playground/org/lib/routes'
+import { useWorkspacePane } from '@/app/playground/org/lib/workspace-pane-store'
+
+function countOf(workspace: Workspace, id: WorkspaceSection): number | null {
+  if (id === 'credentials') return RESOURCES.credentials.length
+  return isPanelKind(id) ? resourcesOfKind(workspace, id).length : null
+}
+
+/** The Resources tab: every resource kind as a row, the way the new tab lists them. */
+export function ResourceKinds({ workspace }: { workspace: Workspace }) {
+  const setSection = useWorkspacePane((state) => state.setSection)
+  return (
+    <div className='px-4 py-4'>
+      <BrowseSection label={`Browse ${workspace.name}`}>
+        {RESOURCE_SECTIONS.map((section) => {
+          const count = countOf(workspace, section.id)
+          return (
+            <BrowseRow key={section.id} onClick={() => setSection(section.id)}>
+              <section.icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
+              <span className='min-w-0 flex-1 truncate text-[var(--text-body)]'>
+                {section.label}
+              </span>
+              {count !== null && (
+                <span className='text-[var(--text-muted)] text-caption'>{count}</span>
+              )}
+            </BrowseRow>
+          )
+        })}
+      </BrowseSection>
+    </div>
+  )
+}
diff --git a/apps/sim/app/playground/org/components/resource-section.tsx b/apps/sim/app/playground/org/components/resource-section.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import { useState } from 'react'
+import { Chip, ChipTag } from '@sim/emcn'
+import {
+  Database,
+  Files,
+  Folder,
+  Integration,
+  Library,
+  Plus,
+  Table,
+  Workflow,
+} from '@sim/emcn/icons'
+import { useQueryStates } from 'nuqs'
+import { isPanelKind } from '@/app/playground/org/lib/chat-resources'
+import { RESOURCES, type Workspace } from '@/app/playground/org/lib/mock-data'
+import { protoParsers } from '@/app/playground/org/lib/search-params'
+import { useWorkspacePane } from '@/app/playground/org/lib/workspace-pane-store'
+import { timeCell } from '@/app/workspace/[workspaceId]/components/resource/components/time-cell'
+import {
+  Resource,
+  type ResourceColumn,
+  type ResourceRow,
+} from '@/app/workspace/[workspaceId]/components/resource/resource'
+
+type ResourceSectionId = keyof typeof RESOURCES
+
+const CONFIG: Record<
+  ResourceSectionId,
+  {
+    title: string
+    icon: React.ComponentType<{ className?: string }>
+    create?: string
+    meta: string
+  }
+> = {
+  workflows: { title: 'Workflows', icon: Workflow, create: 'New workflow', meta: 'Status' },
+  logs: { title: 'Logs', icon: Library, meta: 'Result' },
+  tables: { title: 'Tables', icon: Table, create: 'New table', meta: 'Rows' },
+  files: { title: 'Files', icon: Files, create: 'Upload', meta: 'Type' },
+  knowledge: { title: 'Knowledge', icon: Database, create: 'New base', meta: 'Documents' },
+  credentials: { title: 'Integrations', icon: Integration, create: 'Connect', meta: 'Status' },
+}
+
+const COLUMNS: ResourceColumn[] = [
+  { id: 'name', header: 'Name', widthMultiplier: 2 },
+  { id: 'meta', header: 'Detail' },
+  { id: 'owner', header: 'Owner' },
+  { id: 'updated', header: 'Updated' },
+]
+
+interface ResourceSectionProps {
+  workspace: Workspace
+  section: ResourceSectionId
+}
+
+/** The existing Resource list over static rows, under a breadcrumb back to the directory; a row opens as a tab. */
+export function ResourceSection({ workspace, section }: ResourceSectionProps) {
+  const [, setParams] = useQueryStates(protoParsers)
+  const setSection = useWorkspacePane((state) => state.setSection)
+  const config = CONFIG[section]
+  const [search, setSearch] = useState('')
+  const Icon = config.icon
+  const rows: ResourceRow[] = RESOURCES[section]
+    .filter((item) => item.name.toLowerCase().includes(search.toLowerCase()))
+    .map((item) => ({
+      id: item.id,
+      cells: {
+        name: { icon: <Icon className='size-[14px] text-[var(--text-icon)]' />, label: item.name },
+        meta: /expired|error|failing/i.test(item.meta)
+          ? { content: <ChipTag variant='gray'>{item.meta}</ChipTag> }
+          : { label: item.meta },
+        owner: { label: item.owner },
+        updated: timeCell(item.updated),
+      },
+    }))
+  return (
+    <Resource>
+      <Resource.Header
+        icon={Folder}
+        breadcrumbs={[
+          { label: 'Resources', onClick: () => setSection('resources') },
+          { label: config.title, icon: Icon },
+        ]}
+      />
+      <Resource.Options
+        trailing={
+          config.create ? (
+            <Chip variant='primary' leftIcon={Plus}>
+              {config.create}
+            </Chip>
+          ) : undefined
+        }
+        search={{
+          value: search,
+          onChange: setSearch,
+          placeholder: `Search ${config.title.toLowerCase()}`,
+        }}
+      />
+      <Resource.Table
+        columns={COLUMNS}
+        rows={rows}
+        onRowClick={
+          isPanelKind(section)
+            ? (id) => {
+                const item = RESOURCES[section].find((candidate) => candidate.id === id)
+                if (!item) throw new Error(`Unknown ${section} row ${id}`)
+                void setParams({ open: `${section}:${workspace.id}:${id}` })
+              }
+            : undefined
+        }
+      />
+    </Resource>
+  )
+}
diff --git a/apps/sim/app/playground/org/components/workspace-view.tsx b/apps/sim/app/playground/org/components/workspace-view.tsx
@@ -10,38 +10,45 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@sim/emcn'
-import { ArrowUpRight, Check, ChevronDown, Settings } from '@sim/emcn/icons'
+import { Check, ChevronDown, Settings } from '@sim/emcn/icons'
 import { IdentityTile } from '@/components/identity-tile/identity-tile'
 import { BrowseRow, BrowseSection } from '@/app/playground/org/components/browse-rows'
 import { Changelog } from '@/app/playground/org/components/changelog'
 import { IssuesList } from '@/app/playground/org/components/issues-list'
 import { ProjectSettings } from '@/app/playground/org/components/project-settings'
 import { ProtoDashboard } from '@/app/playground/org/components/proto-dashboard'
-import type { PanelKind } from '@/app/playground/org/lib/chat-resources'
+import { ResourceKinds } from '@/app/playground/org/components/resource-kinds'
+import { ResourceSection } from '@/app/playground/org/components/resource-section'
 import { ORGANIZATION, WORKSPACES, workspaceById } from '@/app/playground/org/lib/mock-data'
-import { MAIN_SECTIONS, type ProjectSection } from '@/app/playground/org/lib/routes'
+import {
+  MAIN_SECTION_IDS,
+  MAIN_SECTIONS,
+  type ProjectSection,
+} from '@/app/playground/org/lib/routes'
 import { SETTINGS_NAV } from '@/app/playground/org/lib/settings-nav'
 import { useWorkspacePane } from '@/app/playground/org/lib/workspace-pane-store'
 
-const TABS = MAIN_SECTIONS.map((item) => ({ id: item.id as ProjectSection, label: item.label }))
+const TABS = [
+  ...MAIN_SECTIONS.map((item) => ({ id: item.id as ProjectSection, label: item.label })),
+  { id: 'resources' as ProjectSection, label: 'Resources' },
+]
 
 const TAB_CLASS = '-mb-px border-b-2 pb-2.5 text-small transition-colors'
 const TAB_IDLE_CLASS =
   'border-transparent text-[var(--text-muted)] hover-hover:text-[var(--text-body)]'
 
-interface WorkspaceViewProps {
-  /** Resources opens the project's kinds in a browsing tab of its own. */
-  onBrowse: (workspaceId: string, kind: PanelKind | null) => void
-}
-
 /**
- * The workspace tab: pick a project, then its dashboard, changelog, and issues. Resources
- * leaves the tab: it opens the project's kinds in a new tab, the way the + button does.
+ * The workspace tab: pick a project, then its dashboard, changelog, issues, and resources.
+ * Resources is the directory: every other kind with its real list and create actions; a row
+ * opens as a resource tab of its own.
  */
-export function WorkspaceView({ onBrowse }: WorkspaceViewProps) {
+export function WorkspaceView() {
   const { projectId, section, setProject, setSection } = useWorkspacePane()
   if (!projectId) return <ProjectPicker onPick={setProject} />
   const workspace = workspaceById(projectId)
+  const activeTab: ProjectSection = MAIN_SECTION_IDS.includes(section as never)
+    ? section
+    : 'resources'
   return (
     <div className='flex h-full min-h-0 flex-col'>
       <header className='flex shrink-0 flex-col gap-3 px-6 pt-5'>
@@ -79,7 +86,7 @@ export function WorkspaceView({ onBrowse }: WorkspaceViewProps) {
           className='flex items-center gap-6 border-[var(--border)] border-b'
         >
           {TABS.map((item) => {
-            const active = section === item.id
+            const active = activeTab === item.id
             return (
               <button
                 key={item.id}
@@ -97,14 +104,6 @@ export function WorkspaceView({ onBrowse }: WorkspaceViewProps) {
               </button>
             )
           })}
-          <button
-            type='button'
-            onClick={() => onBrowse(workspace.id, null)}
-            className={cn(TAB_CLASS, TAB_IDLE_CLASS, 'flex items-center gap-1')}
-          >
-            Resources
-            <ArrowUpRight className='size-[12px]' />
-          </button>
         </nav>
       </header>
       <div className='min-h-0 flex-1 overflow-y-auto'>
@@ -154,6 +153,8 @@ function SectionBody({ section }: { section: ProjectSection }) {
       return <Changelog workspace={workspace} />
     case 'issues':
       return <IssuesList workspace={workspace} />
+    case 'resources':
+      return <ResourceKinds workspace={workspace} />
     case 'settings':
       return (
         <div className='flex flex-col gap-2'>
@@ -167,5 +168,7 @@ function SectionBody({ section }: { section: ProjectSection }) {
           <ProjectSettings workspace={workspace} sectionId={settingsSection} />
         </div>
       )
+    default:
+      return <ResourceSection workspace={workspace} section={section} />
   }
 }
diff --git a/apps/sim/app/playground/org/lib/routes.ts b/apps/sim/app/playground/org/lib/routes.ts
@@ -28,12 +28,13 @@ export const WORKSPACE_SECTIONS = [
 
 export type WorkspaceSection = (typeof WORKSPACE_SECTIONS)[number]['id']
 
-/** Tabs of the workspace pane; every other kind opens in a browsing tab from Resources. */
+/** Tabs of the workspace pane; every other section lives under Resources. */
 export const MAIN_SECTION_IDS: readonly WorkspaceSection[] = ['dashboard', 'changelog', 'issues']
 export const MAIN_SECTIONS = WORKSPACE_SECTIONS.filter((s) => MAIN_SECTION_IDS.includes(s.id))
+export const RESOURCE_SECTIONS = WORKSPACE_SECTIONS.filter((s) => !MAIN_SECTION_IDS.includes(s.id))
 
-/** What the workspace tab shows: one of its tabs, or settings from the project menu. */
-export type ProjectSection = 'dashboard' | 'changelog' | 'issues' | 'settings'
+/** What the workspace tab shows: a section, or the Resources directory listing the rest. */
+export type ProjectSection = WorkspaceSection | 'resources'
 
 /**
  * Everything lives beside a chat, so a link to a project thing is a `?open=` ref the chat