feat: remove workspace system, add pinned flows and label renames

Replace workspace system with pinned flows API (pin/unpin/list/reorder). Rename user-facing labels: Tree→Flow, Procedure→Project. Add sidebar nav sub-items for flow type filtering. Remove 11 workspace files, add migrations 037-038, clean all workspace references. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-15 12:06:10 -05:00
parent 336e37d018
commit 58a55f4d88
39 changed files with 1612 additions and 2288 deletions
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -11,4 +11,4 @@ export { default as stepCategoriesApi } from './stepCategories'
 export { default as accountsApi } from './accounts'
 export { default as adminApi } from './admin'
 export { treeMarkdownApi } from './treeMarkdown'
-export { default as workspacesApi } from './workspaces'
+export { default as pinnedFlowsApi } from './pinnedFlows'
--- a/frontend/src/api/pinnedFlows.ts
+++ b/frontend/src/api/pinnedFlows.ts
@@ -0,0 +1,40 @@
+import { apiClient } from './client'
+
+export interface PinnedFlow {
+  id: string
+  tree_id: string
+  tree_name: string
+  tree_type: 'troubleshooting' | 'procedural'
+  category_emoji?: string
+  category_name?: string
+  pinned_at: string
+  display_order: number
+}
+
+export interface PinnedFlowsResponse {
+  items: PinnedFlow[]
+  count: number
+}
+
+export const pinnedFlowsApi = {
+  list: async (): Promise<PinnedFlowsResponse> => {
+    const { data } = await apiClient.get('/trees/pinned')
+    return data
+  },
+
+  pin: async (treeId: string): Promise<PinnedFlow> => {
+    const { data } = await apiClient.post(`/trees/${treeId}/pin`)
+    return data
+  },
+
+  unpin: async (treeId: string): Promise<void> => {
+    await apiClient.delete(`/trees/${treeId}/pin`)
+  },
+
+  reorder: async (order: { tree_id: string; display_order: number }[]): Promise<PinnedFlowsResponse> => {
+    const { data } = await apiClient.patch('/trees/pinned/reorder', { order })
+    return data
+  },
+}
+
+export default pinnedFlowsApi
--- a/frontend/src/api/workspaces.ts
+++ b/frontend/src/api/workspaces.ts
@@ -1,25 +0,0 @@
-import { apiClient } from './client'
-import type { Workspace, WorkspaceCreate, WorkspaceUpdate } from '@/types'
-
-export const workspacesApi = {
-  list: async (): Promise<Workspace[]> => {
-    const { data } = await apiClient.get('/workspaces')
-    return data
-  },
-
-  create: async (payload: WorkspaceCreate): Promise<Workspace> => {
-    const { data } = await apiClient.post('/workspaces', payload)
-    return data
-  },
-
-  update: async (id: string, payload: WorkspaceUpdate): Promise<Workspace> => {
-    const { data } = await apiClient.patch(`/workspaces/${id}`, payload)
-    return data
-  },
-
-  delete: async (id: string): Promise<void> => {
-    await apiClient.delete(`/workspaces/${id}`)
-  },
-}
-
-export default workspacesApi
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -3,7 +3,7 @@ import { Outlet, useLocation, useNavigate, Link } from 'react-router-dom'
 import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, LogOut, Shield } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
-import { useWorkspaceStore } from '@/store/workspaceStore'
+import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { TopBar } from './TopBar'
 import { Sidebar } from './Sidebar'
@@ -14,15 +14,9 @@ export function AppLayout() {
  const navigate = useNavigate()
  const { user, logout } = useAuthStore()
  const { effectiveRole } = usePermissions()
-  const fetchWorkspaces = useWorkspaceStore(s => s.fetchWorkspaces)
-  const sidebarCollapsed = useWorkspaceStore(s => s.sidebarCollapsed)
+  const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

-  // Fetch workspaces on mount
-  useEffect(() => {
-    fetchWorkspaces()
-  }, [fetchWorkspaces])
-
  // Close mobile menu on route change
  const [prevPath, setPrevPath] = useState(location.pathname)
  if (prevPath !== location.pathname) {
--- a/frontend/src/components/layout/NavItem.tsx
+++ b/frontend/src/components/layout/NavItem.tsx
@@ -2,6 +2,13 @@ import { Link, useLocation } from 'react-router-dom'
 import type { LucideIcon } from 'lucide-react'
 import { cn } from '@/lib/utils'

+interface NavSubItem {
+  href: string
+  label: string
+  count?: number
+  isActive?: boolean
+}
+
 interface NavItemProps {
  href: string
  icon: LucideIcon
@@ -9,16 +16,22 @@ interface NavItemProps {
  badge?: number | 'dot'
  matchPaths?: string[]
  collapsed?: boolean
+  children?: NavSubItem[]
 }

-export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed }: NavItemProps) {
+export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed, children }: NavItemProps) {
  const location = useLocation()
+  const fullPath = location.pathname + location.search
  const isActive = matchPaths
    ? matchPaths.some(p => location.pathname.startsWith(p))
    : href === '/'
      ? location.pathname === '/'
      : location.pathname.startsWith(href)

+  // Check if any child is specifically active
+  const activeChild = children?.find(c => fullPath === c.href || fullPath.startsWith(c.href + '&'))
+  const isParentDimmed = !!activeChild && isActive
+
  if (collapsed) {
    return (
      <Link
@@ -45,33 +58,65 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed
  }

  return (
-    <Link
-      to={href}
-      className={cn(
-        'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium transition-all duration-120',
-        isActive
-          ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
-          : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
-      )}
-    >
-      {/* Active indicator bar */}
-      {isActive && (
-        <div className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2 rounded-r-full bg-gradient-brand" />
-      )}
+    <div>
+      <Link
+        to={href}
+        className={cn(
+          'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium transition-all duration-120',
+          isActive
+            ? isParentDimmed
+              ? 'bg-[hsl(var(--sidebar-active))]/50 text-foreground/70'
+              : 'bg-[hsl(var(--sidebar-active))] text-foreground'
+            : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+        )}
+      >
+        {/* Active indicator bar */}
+        {isActive && !isParentDimmed && (
+          <div className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2 rounded-r-full bg-gradient-brand" />
+        )}

-      <Icon size={18} className={cn('shrink-0', isActive ? 'opacity-100' : 'opacity-70')} />
-      <span className="truncate">{label}</span>
+        <Icon size={18} className={cn('shrink-0', isActive ? 'opacity-100' : 'opacity-70')} />
+        <span className="truncate">{label}</span>

-      {/* Badge */}
-      {badge !== undefined && badge !== 0 && (
-        badge === 'dot' ? (
-          <span className="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-brand-gradient-from" />
-        ) : (
-          <span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-label text-muted-foreground">
-            {badge}
-          </span>
-        )
+        {/* Badge */}
+        {badge !== undefined && badge !== 0 && (
+          badge === 'dot' ? (
+            <span className="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-brand-gradient-from" />
+          ) : (
+            <span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-label text-muted-foreground">
+              {badge}
+            </span>
+          )
+        )}
+      </Link>
+
+      {/* Sub-items */}
+      {children && children.length > 0 && (
+        <div className="mt-0.5 space-y-0.5">
+          {children.map(child => {
+            const childActive = fullPath === child.href || fullPath.startsWith(child.href + '&')
+            return (
+              <Link
+                key={child.href}
+                to={child.href}
+                className={cn(
+                  'flex items-center gap-2 rounded-lg pl-9 pr-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
+                  childActive
+                    ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
+                    : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                )}
+              >
+                <span className="truncate">{child.label}</span>
+                {child.count !== undefined && (
+                  <span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-label text-muted-foreground">
+                    {child.count}
+                  </span>
+                )}
+              </Link>
+            )
+          })}
+        </div>
      )}
-    </Link>
+    </div>
  )
 }
--- a/frontend/src/components/layout/QuickLaunch.tsx
+++ b/frontend/src/components/layout/QuickLaunch.tsx
@@ -22,7 +22,7 @@ interface QuickAction {

 const ACTIONS: QuickAction[] = [
  { id: 'new-tree', icon: Plus, label: 'New Troubleshooting Flow', description: 'Create a branching decision tree', path: '/trees/new', color: '#3b82f6' },
-  { id: 'new-procedure', icon: Plus, label: 'New Procedure', description: 'Create a step-by-step procedure', path: '/flows/new', color: '#8b5cf6' },
+  { id: 'new-project', icon: Plus, label: 'New Project', description: 'Create a step-by-step project', path: '/flows/new', color: '#8b5cf6' },
  { id: 'sessions', icon: Play, label: 'View Sessions', description: 'See active and recent sessions', path: '/sessions', color: '#f59e0b' },
  { id: 'step-library', icon: Bookmark, label: 'Step Library', description: 'Browse reusable steps', path: '/step-library', color: '#10b981' },
  { id: 'exports', icon: FileText, label: 'Exports & Shares', description: 'View shared session exports', path: '/shares', color: '#6366f1' },
@@ -130,7 +130,7 @@ export function QuickLaunch({ open, onClose }: QuickLaunchProps) {
                    <div className="min-w-0">
                      <p className="text-sm font-medium truncate">{tree.name}</p>
                      <p className="text-[0.6875rem] text-muted-foreground">
-                        {tree.tree_type === 'procedural' ? 'Procedure' : 'Troubleshooting'} · {tree.usage_count} uses
+                        {tree.tree_type === 'procedural' ? 'Project' : 'Troubleshooting'} · {tree.usage_count} uses
                      </p>
                    </div>
                    <Play size={14} className="ml-auto shrink-0 opacity-40" />
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,13 +1,15 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
-import { useWorkspaceStore } from '@/store/workspaceStore'
-import { getWorkspaceLabels } from '@/constants/workspaceLabels'
-import { WorkspaceSwitcher } from '@/components/workspace/WorkspaceSwitcher'
-import { CategoryList } from '@/components/workspace/CategoryList'
-import { TagCloud } from '@/components/workspace/TagCloud'
+import { useUserPreferencesStore } from '@/store/userPreferencesStore'
+import { CategoryList } from '@/components/sidebar/CategoryList'
+import { TagCloud } from '@/components/sidebar/TagCloud'
+import { PinnedFlowsSection } from '@/components/sidebar/PinnedFlowsSection'
 import { NavItem } from './NavItem'
-import { categoriesApi, tagsApi, sessionsApi } from '@/api'
+import { categoriesApi, tagsApi, sessionsApi, treesApi } from '@/api'
+import { pinnedFlowsApi } from '@/api/pinnedFlows'
+import type { PinnedFlow } from '@/api/pinnedFlows'
+import { toast } from '@/lib/toast'

 interface CategoryItem {
  id: string
@@ -17,26 +19,27 @@ interface CategoryItem {
 }

 export function Sidebar() {
-  const activeWorkspace = useWorkspaceStore(s => s.getActiveWorkspace())
-  const activeWorkspaceId = useWorkspaceStore(s => s.activeWorkspaceId)
-  const sidebarCollapsed = useWorkspaceStore(s => s.sidebarCollapsed)
-  const toggleSidebar = useWorkspaceStore(s => s.toggleSidebar)
-  const labels = getWorkspaceLabels(activeWorkspace?.slug)
+  const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed)
+  const toggleSidebar = useUserPreferencesStore(s => s.toggleSidebar)

  const [categories, setCategories] = useState<CategoryItem[]>([])
  const [tags, setTags] = useState<string[]>([])
  const [activeCategoryId, setActiveCategoryId] = useState<string | null>(null)
  const [activeTags, setActiveTags] = useState<string[]>([])
  const [activeSessionCount, setActiveSessionCount] = useState(0)
+  const [pinnedFlows, setPinnedFlows] = useState<PinnedFlow[]>([])
+  const [treeCounts, setTreeCounts] = useState({ total: 0, troubleshooting: 0, procedural: 0 })

-  // Fetch categories, tags, and active session count when workspace changes
+  // Fetch sidebar data on mount
  useEffect(() => {
    const fetchData = async () => {
      try {
-        const [cats, tagList, activeSessions] = await Promise.all([
+        const [cats, tagList, activeSessions, allTrees, pinnedData] = await Promise.all([
          categoriesApi.list(),
          tagsApi.list().catch(() => []),
          sessionsApi.list({ completed: false, size: 50 }).catch(() => []),
+          treesApi.list({ sort_by: 'name' }).catch(() => []),
+          pinnedFlowsApi.list().catch(() => ({ items: [], count: 0 })),
        ])
        setCategories(cats.map(c => ({
          id: c.id,
@@ -46,12 +49,18 @@ export function Sidebar() {
        })))
        setTags(tagList.map((t: { name: string }) => t.name).slice(0, 15))
        setActiveSessionCount(activeSessions.length)
+        setPinnedFlows(pinnedData.items)
+
+        const total = allTrees.length
+        const troubleshooting = allTrees.filter(t => t.tree_type === 'troubleshooting').length
+        const procedural = allTrees.filter(t => t.tree_type === 'procedural').length
+        setTreeCounts({ total, troubleshooting, procedural })
      } catch {
        // Silently handle errors
      }
    }
    fetchData()
-  }, [activeWorkspaceId])
+  }, [])

  const navigate = useNavigate()
  const location = useLocation()
@@ -91,6 +100,16 @@ export function Sidebar() {
    navigate(`/trees?${params.toString()}`)
  }

+  const handleUnpin = async (treeId: string) => {
+    try {
+      await pinnedFlowsApi.unpin(treeId)
+      setPinnedFlows(prev => prev.filter(f => f.tree_id !== treeId))
+      toast.success('Unpinned from sidebar')
+    } catch {
+      toast.error('Failed to unpin flow')
+    }
+  }
+
  return (
    <nav className="sidebar flex flex-col border-r border-border bg-[hsl(var(--sidebar-bg))]">
      {sidebarCollapsed ? (
@@ -107,16 +126,26 @@ export function Sidebar() {
        </>
      ) : (
        <>
-          {/* Workspace Switcher */}
-          <WorkspaceSwitcher />
+          {/* Pinned Flows */}
+          <PinnedFlowsSection flows={pinnedFlows} onUnpin={handleUnpin} />

          <div className="border-b border-[hsl(var(--border-subtle))]" />

          {/* Primary Navigation */}
          <div className="px-3 py-2 space-y-0.5">
            <NavItem href="/" icon={LayoutGrid} label="Dashboard" />
-            <NavItem href="/trees" icon={Box} label={labels.allItems} matchPaths={['/trees', '/flows']} />
-            <NavItem href="/my-trees" icon={PenLine} label={labels.editor} />
+            <NavItem
+              href="/trees"
+              icon={Box}
+              label="All Flows"
+              badge={treeCounts.total || undefined}
+              matchPaths={['/trees', '/flows']}
+              children={[
+                { href: '/trees?type=troubleshooting', label: 'Troubleshooting', count: treeCounts.troubleshooting || undefined },
+                { href: '/trees?type=procedural', label: 'Projects', count: treeCounts.procedural || undefined },
+              ]}
+            />
+            <NavItem href="/my-trees" icon={PenLine} label="Flow Editor" />
            <NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} />
            <NavItem href="/shares" icon={FileText} label="Exports" />
            <NavItem href="/step-library" icon={Bookmark} label="Step Library" badge="dot" />
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -3,8 +3,7 @@ import { Link, useNavigate } from 'react-router-dom'
 import { Search, Zap, LogOut, User, Shield, Settings } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
-import { useWorkspaceStore } from '@/store/workspaceStore'
-import { getWorkspaceLabels } from '@/constants/workspaceLabels'
+import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { CommandPalette } from './CommandPalette'
 import { QuickLaunch } from './QuickLaunch'
@@ -15,9 +14,7 @@ export function TopBar() {
  const navigate = useNavigate()
  const { user, logout } = useAuthStore()
  const { effectiveRole, isSuperAdmin } = usePermissions()
-  const activeWorkspace = useWorkspaceStore(s => s.getActiveWorkspace())
-  const sidebarCollapsed = useWorkspaceStore(s => s.sidebarCollapsed)
-  const labels = getWorkspaceLabels(activeWorkspace?.slug)
+  const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed)

  const [userMenuOpen, setUserMenuOpen] = useState(false)
  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false)
@@ -77,22 +74,25 @@ export function TopBar() {
          )}
        </Link>

+        {/* Spacer - push search to center */}
+        <div className="flex-1" />
+
        {/* Search trigger */}
        <button
          onClick={() => setCommandPaletteOpen(true)}
-          className="relative flex-1 text-left"
+          className="relative w-full text-left"
          style={{ maxWidth: '480px' }}
        >
          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
          <div className="w-full rounded-lg border border-border bg-card py-2 pl-9 pr-14 text-[0.8125rem] text-muted-foreground cursor-pointer hover:border-primary/30 transition-colors">
-            {labels.searchPlaceholder}
+            Search flows, sessions, tags…
          </div>
          <span className="absolute right-3 top-1/2 -translate-y-1/2 rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
-            ⌘K
+            {navigator.platform?.toLowerCase().includes('mac') ? '⌘K' : 'Ctrl+K'}
          </span>
        </button>

-        {/* Spacer */}
+        {/* Spacer - push actions to right */}
        <div className="flex-1" />

        {/* Action buttons */}
--- a/frontend/src/components/workspace/CategoryList.tsx
+++ b/frontend/src/components/workspace/CategoryList.tsx
--- a/frontend/src/components/sidebar/PinnedFlowsSection.tsx
+++ b/frontend/src/components/sidebar/PinnedFlowsSection.tsx
@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ChevronDown, ChevronRight, Pin } from 'lucide-react'
+import { getTreeNavigatePath } from '@/lib/routing'
+import { cn } from '@/lib/utils'
+import type { PinnedFlow } from '@/api/pinnedFlows'
+
+interface PinnedFlowsSectionProps {
+  flows: PinnedFlow[]
+  onUnpin: (treeId: string) => void
+}
+
+export function PinnedFlowsSection({ flows, onUnpin }: PinnedFlowsSectionProps) {
+  const navigate = useNavigate()
+  const [collapsed, setCollapsed] = useState(false)
+
+  return (
+    <div className="px-3 py-2">
+      <button
+        onClick={() => setCollapsed(!collapsed)}
+        className="flex w-full items-center gap-1 px-3 mb-1 font-heading text-[0.6875rem] font-bold uppercase tracking-[0.04em] text-muted-foreground hover:text-foreground transition-colors"
+      >
+        {collapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
+        Pinned
+      </button>
+
+      {!collapsed && (
+        <div className="space-y-0.5 max-h-[280px] overflow-y-auto">
+          {flows.length === 0 ? (
+            <p className="px-3 py-2 text-xs text-muted-foreground">
+              Pin your most-used flows here
+            </p>
+          ) : (
+            flows.map(flow => (
+              <button
+                key={flow.tree_id}
+                onClick={() => navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))}
+                onContextMenu={(e) => {
+                  e.preventDefault()
+                  onUnpin(flow.tree_id)
+                }}
+                className={cn(
+                  'group flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
+                  'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                )}
+                title={`${flow.tree_name} (right-click to unpin)`}
+              >
+                <span className="text-sm shrink-0">
+                  {flow.tree_type === 'procedural' ? '📋' : '🔧'}
+                </span>
+                <span className="truncate flex-1 text-left">{flow.tree_name}</span>
+                <Pin size={12} className="shrink-0 opacity-0 group-hover:opacity-40 transition-opacity" />
+              </button>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
--- a/frontend/src/components/workspace/TagCloud.tsx
+++ b/frontend/src/components/workspace/TagCloud.tsx
--- a/frontend/src/components/workspace/WorkspaceCreateModal.tsx
+++ b/frontend/src/components/workspace/WorkspaceCreateModal.tsx
@@ -1,136 +0,0 @@
-import { useState } from 'react'
-import { X, Loader2 } from 'lucide-react'
-import { workspacesApi } from '@/api/workspaces'
-import { useWorkspaceStore } from '@/store/workspaceStore'
-import { toast } from '@/lib/toast'
-import { cn } from '@/lib/utils'
-
-interface WorkspaceCreateModalProps {
-  open: boolean
-  onClose: () => void
-}
-
-const ICONS = ['📁', '🔧', '📋', '🚀', '🎯', '💼', '🔒', '📊', '🧪', '⚙️']
-
-export function WorkspaceCreateModal({ open, onClose }: WorkspaceCreateModalProps) {
-  const fetchWorkspaces = useWorkspaceStore(s => s.fetchWorkspaces)
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
-  const [icon, setIcon] = useState('📁')
-  const [saving, setSaving] = useState(false)
-
-  const slug = name
-    .toLowerCase()
-    .replace(/[^a-z0-9\s-]/g, '')
-    .replace(/\s+/g, '-')
-    .slice(0, 50)
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!name.trim() || !slug) return
-    setSaving(true)
-    try {
-      await workspacesApi.create({ name: name.trim(), slug, description: description.trim() || undefined, icon })
-      await fetchWorkspaces()
-      toast.success(`Workspace "${name}" created`)
-      setName('')
-      setDescription('')
-      setIcon('📁')
-      onClose()
-    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Failed to create workspace'
-      toast.error(message)
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  if (!open) return null
-
-  return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in" onClick={onClose} />
-      <div className="relative w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-2xl animate-scale-in">
-        <div className="flex items-center justify-between mb-5">
-          <h2 className="text-lg font-heading font-bold text-foreground">Create Workspace</h2>
-          <button onClick={onClose} className="rounded-lg p-1 text-muted-foreground hover:bg-accent hover:text-foreground">
-            <X size={18} />
-          </button>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {/* Icon picker */}
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-foreground">Icon</label>
-            <div className="flex flex-wrap gap-1.5">
-              {ICONS.map(i => (
-                <button
-                  key={i}
-                  type="button"
-                  onClick={() => setIcon(i)}
-                  className={cn(
-                    'flex h-9 w-9 items-center justify-center rounded-lg text-lg transition-colors',
-                    icon === i
-                      ? 'bg-primary/10 border border-primary/30'
-                      : 'border border-border hover:bg-accent'
-                  )}
-                >
-                  {i}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Name */}
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-foreground">Name</label>
-            <input
-              type="text"
-              value={name}
-              onChange={e => setName(e.target.value)}
-              placeholder="e.g., Network Operations"
-              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-              autoFocus
-            />
-            {slug && (
-              <p className="mt-1 text-[0.6875rem] text-muted-foreground">
-                Slug: <code className="rounded bg-secondary px-1">{slug}</code>
-              </p>
-            )}
-          </div>
-
-          {/* Description */}
-          <div>
-            <label className="mb-1.5 block text-sm font-medium text-foreground">Description <span className="text-muted-foreground font-normal">(optional)</span></label>
-            <input
-              type="text"
-              value={description}
-              onChange={e => setDescription(e.target.value)}
-              placeholder="Brief description"
-              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-            />
-          </div>
-
-          {/* Actions */}
-          <div className="flex justify-end gap-2 pt-2">
-            <button
-              type="button"
-              onClick={onClose}
-              className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={!name.trim() || saving}
-              className="flex items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity disabled:opacity-50"
-            >
-              {saving && <Loader2 size={14} className="animate-spin" />}
-              Create
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}
--- a/frontend/src/components/workspace/WorkspaceSwitcher.tsx
+++ b/frontend/src/components/workspace/WorkspaceSwitcher.tsx
@@ -1,87 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-import { ChevronDown, Plus } from 'lucide-react'
-import { useWorkspaceStore } from '@/store/workspaceStore'
-import { WorkspaceCreateModal } from './WorkspaceCreateModal'
-import { toast } from '@/lib/toast'
-import { cn } from '@/lib/utils'
-
-export function WorkspaceSwitcher() {
-  const { workspaces, activeWorkspaceId, setActiveWorkspace } = useWorkspaceStore()
-  const activeWorkspace = workspaces.find(w => w.id === activeWorkspaceId)
-
-  const [open, setOpen] = useState(false)
-  const [createModalOpen, setCreateModalOpen] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
-    }
-    if (open) document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [open])
-
-  const handleSwitch = (ws: typeof workspaces[0]) => {
-    if (ws.id !== activeWorkspaceId) {
-      setActiveWorkspace(ws.id)
-      toast.success(`Switched to ${ws.name}`)
-    }
-    setOpen(false)
-  }
-
-  if (!activeWorkspace) return null
-
-  return (
-    <>
-    <div className="relative px-3 py-2" ref={ref}>
-      <button
-        onClick={() => setOpen(!open)}
-        className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left hover:bg-[hsl(var(--sidebar-hover))] transition-colors"
-      >
-        <span className="text-lg leading-none">{activeWorkspace.icon || '📁'}</span>
-        <div className="min-w-0 flex-1">
-          <p className="text-sm font-heading font-semibold text-foreground truncate">{activeWorkspace.name}</p>
-          {activeWorkspace.description && (
-            <p className="text-[0.6875rem] text-muted-foreground truncate">{activeWorkspace.description}</p>
-          )}
-        </div>
-        <ChevronDown size={14} className={cn('shrink-0 text-muted-foreground transition-transform', open && 'rotate-180')} />
-      </button>
-
-      {open && (
-        <div className="absolute left-3 right-3 z-50 mt-1 rounded-lg border border-border bg-card shadow-xl animate-scale-in">
-          <div className="p-1">
-            {workspaces.map(ws => (
-              <button
-                key={ws.id}
-                onClick={() => handleSwitch(ws)}
-                className={cn(
-                  'flex w-full items-center gap-3 rounded-md px-3 py-2 text-left transition-colors',
-                  ws.id === activeWorkspaceId
-                    ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
-                    : 'text-muted-foreground hover:bg-accent hover:text-foreground'
-                )}
-              >
-                <span className="text-base leading-none">{ws.icon || '📁'}</span>
-                <span className="flex-1 truncate text-sm">{ws.name}</span>
-                <span className="font-label text-[0.6875rem] text-muted-foreground">{ws.tree_count}</span>
-              </button>
-            ))}
-          </div>
-          <div className="border-t border-border p-1">
-            <button
-              onClick={() => { setOpen(false); setCreateModalOpen(true) }}
-              className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-            >
-              <Plus size={14} />
-              Add workspace…
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-
-    <WorkspaceCreateModal open={createModalOpen} onClose={() => setCreateModalOpen(false)} />
-    </>
-  )
-}
--- a/frontend/src/constants/flowLabels.ts
+++ b/frontend/src/constants/flowLabels.ts
@@ -0,0 +1,38 @@
+export interface FlowTypeLabels {
+  navLabel: string
+  singular: string
+  plural: string
+  newButton: string
+  searchPlaceholder: string
+}
+
+export const FLOW_TYPE_LABELS: Record<string, FlowTypeLabels> = {
+  all: {
+    navLabel: 'All Flows',
+    singular: 'Flow',
+    plural: 'Flows',
+    newButton: '+ Create Flow',
+    searchPlaceholder: 'Search flows, sessions, tags\u2026',
+  },
+  troubleshooting: {
+    navLabel: 'Troubleshooting',
+    singular: 'Flow',
+    plural: 'Flows',
+    newButton: '+ New Troubleshooting Flow',
+    searchPlaceholder: 'Search troubleshooting flows\u2026',
+  },
+  procedural: {
+    navLabel: 'Projects',
+    singular: 'Project',
+    plural: 'Projects',
+    newButton: '+ New Project',
+    searchPlaceholder: 'Search projects, runbooks\u2026',
+  },
+}
+
+export function getFlowLabels(typeFilter?: string): FlowTypeLabels {
+  if (typeFilter && typeFilter in FLOW_TYPE_LABELS) {
+    return FLOW_TYPE_LABELS[typeFilter]
+  }
+  return FLOW_TYPE_LABELS.all
+}
--- a/frontend/src/constants/workspaceLabels.ts
+++ b/frontend/src/constants/workspaceLabels.ts
@@ -1,45 +0,0 @@
-export interface WorkspaceLabels {
-  allItems: string
-  editor: string
-  newItem: string
-  searchPlaceholder: string
-}
-
-export const WORKSPACE_LABELS: Record<string, WorkspaceLabels> = {
-  troubleshooting: {
-    allItems: 'All Trees',
-    editor: 'Tree Editor',
-    newItem: 'New Tree',
-    searchPlaceholder: 'Search trees, sessions, tags\u2026',
-  },
-  procedures: {
-    allItems: 'All Procedures',
-    editor: 'Flow Editor',
-    newItem: 'New Procedure',
-    searchPlaceholder: 'Search procedures, runbooks\u2026',
-  },
-  policies: {
-    allItems: 'All Policies',
-    editor: 'Policy Editor',
-    newItem: 'New Policy',
-    searchPlaceholder: 'Search policies, compliance\u2026',
-  },
-  finance: {
-    allItems: 'All Finance Flows',
-    editor: 'Flow Editor',
-    newItem: 'New Flow',
-    searchPlaceholder: 'Search billing, procurement\u2026',
-  },
-}
-
-export const DEFAULT_LABELS: WorkspaceLabels = {
-  allItems: 'All Flows',
-  editor: 'Flow Editor',
-  newItem: 'New Flow',
-  searchPlaceholder: 'Search flows, sessions, tags\u2026',
-}
-
-export function getWorkspaceLabels(slug?: string): WorkspaceLabels {
-  if (slug && slug in WORKSPACE_LABELS) return WORKSPACE_LABELS[slug]
-  return DEFAULT_LABELS
-}
--- a/frontend/src/pages/QuickStartPage.tsx
+++ b/frontend/src/pages/QuickStartPage.tsx
@@ -6,8 +6,6 @@ import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem } from '@/types'
 import type { Session } from '@/types/session'
 import { getTreeNavigatePath } from '@/lib/routing'
-import { useWorkspaceStore } from '@/store/workspaceStore'
-import { getWorkspaceLabels } from '@/constants/workspaceLabels'
 import { usePermissions } from '@/hooks/usePermissions'
 import { QuickStats } from '@/components/dashboard/QuickStats'
 import { FiltersBar } from '@/components/dashboard/FiltersBar'
@@ -32,8 +30,6 @@ function timeAgo(dateStr: string): string {
 export function QuickStartPage() {
  const navigate = useNavigate()
  const { canCreateTrees } = usePermissions()
-  const activeWorkspace = useWorkspaceStore(s => s.getActiveWorkspace())
-  const labels = getWorkspaceLabels(activeWorkspace?.slug)

  const [query, setQuery] = useState('')
  const [searchResults, setSearchResults] = useState<TreeListItem[]>([])
@@ -147,17 +143,17 @@ export function QuickStartPage() {
            Dashboard
          </h1>
          <p className="mt-1 text-sm text-muted-foreground">
-            Welcome back. Here&apos;s what&apos;s happening in your workspace.
+            Welcome back. Here&apos;s what&apos;s happening with your flows.
          </p>
        </div>
        <div className="flex items-center gap-2">
          {canCreateTrees && (
            <Link
-              to={activeWorkspace?.slug === 'procedures' ? '/flows/new' : '/trees/new'}
+              to="/trees/new"
              className="flex items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
            >
              <Plus size={16} />
-              {labels.newItem}
+              Create Flow
            </Link>
          )}
        </div>
@@ -184,7 +180,7 @@ export function QuickStartPage() {
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onFocus={() => query.length >= 2 && setShowResults(true)}
-          placeholder={labels.searchPlaceholder}
+          placeholder="Search flows, sessions, tags…"
          className="w-full rounded-lg border border-border bg-card py-2.5 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
        />
        {showResults && (
@@ -226,7 +222,7 @@ export function QuickStartPage() {
        </div>
      ) : (
        <SectionGroup
-          title={labels.allItems}
+          title="All Flows"
          count={filteredTrees.length}
          delay={200}
        >
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -1,12 +1,11 @@
 import { useEffect, useState, useCallback } from 'react'
 import { useNavigate, Link, useSearchParams } from 'react-router-dom'
-import { Plus, X, FolderOpen, RotateCcw, Play } from 'lucide-react'
+import { Plus, X, RotateCcw, Play } from 'lucide-react'
 import { treesApi } from '@/api/trees'
 import { categoriesApi } from '@/api/categories'
 import { foldersApi } from '@/api/folders'
 import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem, CategoryListItem, FolderListItem, Session } from '@/types'
-import { FolderSidebar } from '@/components/library/FolderSidebar'
 import { FolderEditModal } from '@/components/library/FolderEditModal'
 import { ConfirmDialog } from '@/components/common/ConfirmDialog'
 import { TreeGridView } from '@/components/library/TreeGridView'
@@ -64,9 +63,6 @@ export function TreeLibraryPage() {
  const [editingFolder, setEditingFolder] = useState<FolderListItem | null>(null)
  const [newFolderParentId, setNewFolderParentId] = useState<string | null>(null)

-  // Mobile folder sidebar state
-  const [mobileFolderOpen, setMobileFolderOpen] = useState(false)
-
  // Delete confirmation state
  const [treeToDelete, setTreeToDelete] = useState<TreeListItem | null>(null)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
@@ -213,12 +209,6 @@ export function TreeLibraryPage() {
    setFolderModalOpen(true)
  }

-  const handleEditFolder = (folder: FolderListItem) => {
-    setEditingFolder(folder)
-    setNewFolderParentId(null)
-    setFolderModalOpen(true)
-  }
-
  const handleDeleteTree = async () => {
    if (!treeToDelete) return
    setIsDeleting(true)
@@ -257,33 +247,20 @@ export function TreeLibraryPage() {

  return (
    <div className="flex h-full">
-      {/* Folder Sidebar */}
-      <FolderSidebar
-        selectedFolderId={selectedFolderId}
-        onFolderSelect={(id) => {
-          setSelectedFolderId(id)
-          setMobileFolderOpen(false)
-        }}
-        onCreateFolder={handleCreateFolder}
-        onEditFolder={handleEditFolder}
-        mobileOpen={mobileFolderOpen}
-        onMobileClose={() => setMobileFolderOpen(false)}
-      />
-
      {/* Main Content */}
      <div className="flex-1 overflow-auto">
        <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
          <div className="mb-6 flex flex-col gap-4 sm:mb-8 sm:flex-row sm:items-start sm:justify-between">
            <div>
              <h1 className="text-2xl font-bold text-white sm:text-3xl">
-                {typeFilter === 'procedural' ? 'Procedures' : typeFilter === 'troubleshooting' ? 'Troubleshooting Flows' : 'Flow Library'}
+                {typeFilter === 'procedural' ? 'Projects' : typeFilter === 'troubleshooting' ? 'Troubleshooting Flows' : 'Flow Library'}
              </h1>
              <p className="mt-2 text-white/40">
                {typeFilter === 'procedural'
-                  ? 'Step-by-step procedures for project work'
+                  ? 'Step-by-step projects and runbooks'
                  : typeFilter === 'troubleshooting'
                    ? 'Branching decision flows for troubleshooting'
-                    : 'Browse and start troubleshooting flows and procedures'}
+                    : 'Browse and start troubleshooting flows and projects'}
              </p>
            </div>
            {canCreateTrees && (
@@ -295,7 +272,7 @@ export function TreeLibraryPage() {
                )}
              >
                <Plus className="h-4 w-4" />
-                {typeFilter === 'procedural' ? 'Create Procedure' : 'Create Flow'}
+                {typeFilter === 'procedural' ? 'New Project' : 'Create Flow'}
              </Link>
            )}
          </div>
@@ -303,18 +280,6 @@ export function TreeLibraryPage() {
          {/* Search and Filter */}
          <div className="mb-4 space-y-4">
            <div className="flex flex-col gap-4 sm:flex-row">
-              {/* Mobile folder button */}
-              <button
-                onClick={() => setMobileFolderOpen(true)}
-                className={cn(
-                  'flex items-center gap-2 rounded-md border border-white/10 px-3 py-2 text-sm font-medium md:hidden',
-                  'text-white/40 hover:bg-white/10 hover:text-white',
-                  selectedFolderId && 'border-white/30 text-white'
-                )}
-              >
-                <FolderOpen className="h-4 w-4" />
-                Folders
-              </button>
              <div className="flex flex-1 gap-2">
                <input
                  type="text"
@@ -372,7 +337,7 @@ export function TreeLibraryPage() {
                          : 'text-white/40 hover:text-white/60'
                      )}
                    >
-                      {t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : 'Procedures'}
+                      {t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : 'Projects'}
                    </button>
                  ))}
                </div>
--- a/frontend/src/store/userPreferencesStore.ts
+++ b/frontend/src/store/userPreferencesStore.ts
@@ -15,11 +15,13 @@ interface UserPreferencesState {
  setTreeLibrarySortBy: (sortBy: TreeSortBy) => void
  preferredEditorMode: EditorMode
  setPreferredEditorMode: (mode: EditorMode) => void
+  sidebarCollapsed: boolean
+  toggleSidebar: () => void
 }

 export const useUserPreferencesStore = create<UserPreferencesState>()(
  persist(
-    (set) => ({
+    (set, get) => ({
      defaultExportFormat: 'markdown',
      setDefaultExportFormat: (format) => set({ defaultExportFormat: format }),
      treeLibraryView: 'grid',
@@ -28,6 +30,8 @@ export const useUserPreferencesStore = create<UserPreferencesState>()(
      setTreeLibrarySortBy: (sortBy) => set({ treeLibrarySortBy: sortBy }),
      preferredEditorMode: 'form',
      setPreferredEditorMode: (mode) => set({ preferredEditorMode: mode }),
+      sidebarCollapsed: false,
+      toggleSidebar: () => set({ sidebarCollapsed: !get().sidebarCollapsed }),
    }),
    {
      name: 'user-preferences-storage',
--- a/frontend/src/store/workspaceStore.ts
+++ b/frontend/src/store/workspaceStore.ts
@@ -1,59 +0,0 @@
-import { create } from 'zustand'
-import type { Workspace } from '@/types'
-import { workspacesApi } from '@/api/workspaces'
-
-interface WorkspaceState {
-  workspaces: Workspace[]
-  activeWorkspaceId: string | null
-  loading: boolean
-  sidebarCollapsed: boolean
-  setActiveWorkspace: (id: string) => void
-  fetchWorkspaces: () => Promise<void>
-  getActiveWorkspace: () => Workspace | undefined
-  toggleSidebar: () => void
-}
-
-export const useWorkspaceStore = create<WorkspaceState>((set, get) => ({
-  workspaces: [],
-  activeWorkspaceId: localStorage.getItem('active-workspace-id'),
-  loading: false,
-  sidebarCollapsed: localStorage.getItem('sidebar-collapsed') === 'true',
-
-  setActiveWorkspace: (id: string) => {
-    localStorage.setItem('active-workspace-id', id)
-    set({ activeWorkspaceId: id })
-  },
-
-  fetchWorkspaces: async () => {
-    set({ loading: true })
-    try {
-      const workspaces = await workspacesApi.list()
-      const state = get()
-      let activeId = state.activeWorkspaceId
-
-      // If no active workspace or active workspace doesn't exist, use default
-      if (!activeId || !workspaces.find(w => w.id === activeId)) {
-        const defaultWs = workspaces.find(w => w.is_default) || workspaces[0]
-        if (defaultWs) {
-          activeId = defaultWs.id
-          localStorage.setItem('active-workspace-id', activeId)
-        }
-      }
-
-      set({ workspaces, activeWorkspaceId: activeId, loading: false })
-    } catch {
-      set({ loading: false })
-    }
-  },
-
-  getActiveWorkspace: () => {
-    const { workspaces, activeWorkspaceId } = get()
-    return workspaces.find(w => w.id === activeWorkspaceId)
-  },
-
-  toggleSidebar: () => {
-    const next = !get().sidebarCollapsed
-    localStorage.setItem('sidebar-collapsed', String(next))
-    set({ sidebarCollapsed: next })
-  },
-}))
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -8,7 +8,6 @@ export * from './category'
 export * from './folder'
 export * from './step'
 export type { Account, Subscription, PlanLimits, SubscriptionDetails, AccountInvite, AccountMember } from './account'
-export type { Workspace, WorkspaceCreate, WorkspaceUpdate } from './workspace'
 export * from './admin'

 // API response wrapper types
--- a/frontend/src/types/workspace.ts
+++ b/frontend/src/types/workspace.ts
@@ -1,32 +0,0 @@
-export interface Workspace {
-  id: string
-  name: string
-  slug: string
-  description: string | null
-  icon: string | null
-  accent_color: string | null
-  account_id: string
-  is_default: boolean
-  sort_order: number
-  tree_count: number
-  created_at: string
-  updated_at: string
-}
-
-export interface WorkspaceCreate {
-  name: string
-  slug: string
-  description?: string
-  icon?: string
-  accent_color?: string
-  sort_order?: number
-}
-
-export interface WorkspaceUpdate {
-  name?: string
-  slug?: string
-  description?: string
-  icon?: string
-  accent_color?: string
-  sort_order?: number
-}