From 3dff3d43b5cfb2bf1b45e3a3d6c5cd15dd0c17ec Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 18:41:38 -0500
Subject: [PATCH 01/30] feat: add workspace management functionality

---
 api/app/database/pg/graph_ops/graph_crud.py   | 103 ++++++++-
 api/app/database/pg/models.py                 |  60 +++++
 api/app/routers/graph.py                      |  57 ++++-
 .../fd447b227777_add_workspace_table.py       | 114 ++++++++++
 ui/app/assets/icons/MdiBriefcaseOutline.svg   |   1 +
 .../assets/icons/MdiFolderRemoveOutline.svg   |   1 +
 .../components/ui/sidebar-history/actions.vue |  61 +++--
 .../ui/sidebar-history/sidebarHistory.vue     | 215 ++++++++++++++++--
 .../sidebar-history/sidebarHistoryFolder.vue  |  11 +-
 .../ui/sidebar-history/sidebarHistoryItem.vue |  14 +-
 .../sidebarHistoryWorkspacePagination.vue     |  37 +++
 .../components/ui/sidebar-history/submenu.vue |  67 +++---
 ui/app/composables/useAPI.ts                  |  57 ++++-
 ui/app/types/graph.d.ts                       |   9 +
 14 files changed, 727 insertions(+), 80 deletions(-)
 create mode 100644 api/migrations/versions/fd447b227777_add_workspace_table.py
 create mode 100644 ui/app/assets/icons/MdiBriefcaseOutline.svg
 create mode 100644 ui/app/assets/icons/MdiFolderRemoveOutline.svg
 create mode 100644 ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue

diff --git a/api/app/database/pg/graph_ops/graph_crud.py b/api/app/database/pg/graph_ops/graph_crud.py
index df566f46..4319c493 100644
--- a/api/app/database/pg/graph_ops/graph_crud.py
+++ b/api/app/database/pg/graph_ops/graph_crud.py
@@ -3,7 +3,7 @@
 from datetime import datetime, timedelta, timezone
 
 from database.neo4j.crud import update_neo4j_graph
-from database.pg.models import Edge, Folder, Graph, Node
+from database.pg.models import Edge, Folder, Graph, Node, Workspace
 from fastapi import HTTPException
 from models.usersDTO import SettingsDTO
 from neo4j import AsyncDriver
@@ -68,10 +68,16 @@ async def get_user_folders(engine: SQLAlchemyAsyncEngine, user_id: str) -> list[
         return list(result.scalars().all())
 
 
-async def create_folder(engine: SQLAlchemyAsyncEngine, user_id: str, name: str) -> Folder:
+async def create_folder(
+    engine: SQLAlchemyAsyncEngine, user_id: str, name: str, workspace_id: str | None = None
+) -> Folder:
     """Create a new folder."""
     async with AsyncSession(engine) as session:
-        folder = Folder(name=name, user_id=user_id)
+        folder = Folder(
+            name=name,
+            user_id=user_id,
+            workspace_id=uuid.UUID(workspace_id) if workspace_id else None,
+        )
         session.add(folder)
         await session.commit()
         await session.refresh(folder)
@@ -119,7 +125,10 @@ async def delete_folder(engine: SQLAlchemyAsyncEngine, folder_id: str) -> None:
 async def move_graph_to_folder(
     engine: SQLAlchemyAsyncEngine, graph_id: str, folder_id: str | None
 ) -> Graph:
-    """Move a graph to a specific folder (or root if folder_id is None)."""
+    """
+    Move a graph to a specific folder (or root if folder_id is None).
+    If moved to a folder, it adopts the folder's workspace.
+    """
     async with AsyncSession(engine) as session:
         async with session.begin():
             stmt = select(Graph).where(and_(Graph.id == graph_id))
@@ -130,6 +139,13 @@ async def move_graph_to_folder(
                 raise HTTPException(status_code=404, detail="Graph not found")
 
             graph.folder_id = uuid.UUID(folder_id) if folder_id else None
+
+            # If moving to a folder, update workspace_id to match the folder's workspace
+            if folder_id:
+                folder = await session.get(Folder, folder_id)
+                if folder:
+                    graph.workspace_id = folder.workspace_id
+
             session.add(graph)
 
         await session.refresh(graph, attribute_names=["folder_id", "nodes"])
@@ -143,6 +159,32 @@ async def move_graph_to_folder(
         return graph
 
 
+async def move_graph_to_workspace(
+    engine: SQLAlchemyAsyncEngine, graph_id: str, workspace_id: str
+) -> Graph:
+    """Move a graph to a specific workspace. Removes it from any folder."""
+    async with AsyncSession(engine) as session:
+        async with session.begin():
+            graph = await session.get(Graph, graph_id)
+            if not graph:
+                raise HTTPException(status_code=404, detail="Graph not found")
+
+            graph.workspace_id = uuid.UUID(workspace_id)
+            graph.folder_id = None
+            session.add(graph)
+
+        await session.refresh(graph, attribute_names=["workspace_id", "folder_id", "nodes"])
+
+        if not isinstance(graph, Graph):
+            raise HTTPException(
+                status_code=500, detail="Unexpected error: Retrieved object is not of type Graph."
+            )
+
+        graph.node_count = len(graph.nodes)
+
+        return graph
+
+
 class CompleteGraph(BaseModel):
     graph: Graph
     nodes: list[Node]
@@ -183,7 +225,11 @@ async def get_graph_by_id(engine: SQLAlchemyAsyncEngine, graph_id: str) -> Compl
 
 
 async def create_empty_graph(
-    engine: SQLAlchemyAsyncEngine, user_id: str, user_config: SettingsDTO, temporary: bool
+    engine: SQLAlchemyAsyncEngine,
+    user_id: str,
+    user_config: SettingsDTO,
+    temporary: bool,
+    workspace_id: str | None = None,
 ) -> Graph:
     """
     Create an empty graph in the database.
@@ -203,6 +249,7 @@ async def create_empty_graph(
                 name="New Canvas",
                 user_id=user_id,
                 temporary=temporary,
+                workspace_id=uuid.UUID(workspace_id) if workspace_id else None,
                 custom_instructions=systemPromptSelected,
                 max_tokens=user_config.models.maxTokens,
                 temperature=user_config.models.temperature,
@@ -356,3 +403,49 @@ async def delete_old_temporary_graphs(
         f"Cron job: Successfully deleted {len(graph_ids_to_delete)} "
         f"temporary graphs from PostgreSQL."
     )
+
+
+async def get_user_workspaces(engine: SQLAlchemyAsyncEngine, user_id: str) -> list[Workspace]:
+    """Retrieve all workspaces for a user. Create default if none exist."""
+    async with AsyncSession(engine) as session:
+        stmt = (
+            select(Workspace)
+            .where(and_(Workspace.user_id == user_id))
+            .order_by(Workspace.created_at)  # type: ignore
+        )
+        result = await session.exec(stmt)  # type: ignore
+        workspaces = list(result.scalars().all())
+
+        return workspaces
+
+
+async def create_workspace(engine: SQLAlchemyAsyncEngine, user_id: str, name: str) -> Workspace:
+    async with AsyncSession(engine) as session:
+        ws = Workspace(name=name, user_id=user_id)
+        session.add(ws)
+        await session.commit()
+        await session.refresh(ws)
+        return ws
+
+
+async def update_workspace(
+    engine: SQLAlchemyAsyncEngine, workspace_id: str, name: str
+) -> Workspace:
+    async with AsyncSession(engine) as session:
+        ws = await session.get(Workspace, workspace_id)
+        if not ws:
+            raise HTTPException(status_code=404, detail="Workspace not found")
+        ws.name = name
+        session.add(ws)
+        await session.commit()
+        await session.refresh(ws)
+        return ws
+
+
+async def delete_workspace(engine: SQLAlchemyAsyncEngine, workspace_id: str) -> None:
+    async with AsyncSession(engine) as session:
+        ws = await session.get(Workspace, workspace_id)
+        if not ws:
+            raise HTTPException(status_code=404, detail="Workspace not found")
+        await session.delete(ws)
+        await session.commit()
diff --git a/api/app/database/pg/models.py b/api/app/database/pg/models.py
index 3dc111c6..fd0f12ca 100644
--- a/api/app/database/pg/models.py
+++ b/api/app/database/pg/models.py
@@ -52,6 +52,48 @@ class UserStorageUsage(SQLModel, table=True):
     )
 
 
+class Workspace(SQLModel, table=True):
+    __tablename__ = "workspaces"
+
+    id: Optional[uuid.UUID] = Field(
+        default=None,
+        sa_column=Column(
+            PG_UUID(as_uuid=True),
+            primary_key=True,
+            server_default=func.uuid_generate_v4(),
+            nullable=False,
+        ),
+    )
+    user_id: uuid.UUID = Field(
+        sa_column=Column(
+            PG_UUID(as_uuid=True),
+            ForeignKey("users.id", ondelete="CASCADE"),
+            nullable=False,
+        ),
+    )
+    name: str = Field(max_length=50, nullable=False)
+    created_at: Optional[datetime.datetime] = Field(
+        default=None,
+        sa_column=Column(
+            TIMESTAMP(timezone=True),
+            server_default=func.now(),
+            nullable=False,
+        ),
+    )
+    updated_at: Optional[datetime.datetime] = Field(
+        default=None,
+        sa_column=Column(
+            TIMESTAMP(timezone=True),
+            server_default=func.now(),
+            onupdate=func.now(),
+            nullable=False,
+        ),
+    )
+
+    graphs: list["Graph"] = Relationship(back_populates="workspace")
+    folders: list["Folder"] = Relationship(back_populates="workspace")
+
+
 class Folder(SQLModel, table=True):
     __tablename__ = "folders"
 
@@ -71,6 +113,14 @@ class Folder(SQLModel, table=True):
             nullable=False,
         ),
     )
+    workspace_id: Optional[uuid.UUID] = Field(
+        default=None,
+        sa_column=Column(
+            PG_UUID(as_uuid=True),
+            ForeignKey("workspaces.id", ondelete="CASCADE"),
+            nullable=True,
+        ),
+    )
     name: str = Field(max_length=255, nullable=False)
     color: Optional[str] = Field(default=None, max_length=50, nullable=True)
 
@@ -93,6 +143,7 @@ class Folder(SQLModel, table=True):
     )
 
     graphs: list["Graph"] = Relationship(back_populates="folder")
+    workspace: Optional[Workspace] = Relationship(back_populates="folders")
 
 
 class Graph(SQLModel, table=True):
@@ -123,6 +174,14 @@ class Graph(SQLModel, table=True):
             nullable=True,
         ),
     )
+    workspace_id: Optional[uuid.UUID] = Field(
+        default=None,
+        sa_column=Column(
+            PG_UUID(as_uuid=True),
+            ForeignKey("workspaces.id", ondelete="SET NULL"),
+            nullable=True,
+        ),
+    )
 
     name: str = Field(index=True, max_length=255, nullable=False)
     description: Optional[str] = Field(default=None, sa_column=Column(TEXT))  # not used
@@ -178,6 +237,7 @@ class Graph(SQLModel, table=True):
     edges: list["Edge"] = Relationship(back_populates="graph")
 
     folder: Optional[Folder] = Relationship(back_populates="graphs")
+    workspace: Optional[Workspace] = Relationship(back_populates="graphs")
 
     _node_count: Optional[int] = PrivateAttr(default=None)
 
diff --git a/api/app/routers/graph.py b/api/app/routers/graph.py
index 0b384b39..b6440df1 100644
--- a/api/app/routers/graph.py
+++ b/api/app/routers/graph.py
@@ -8,18 +8,23 @@
     CompleteGraph,
     create_empty_graph,
     create_folder,
+    create_workspace,
     delete_folder,
     delete_graph,
+    delete_workspace,
     get_all_graphs,
     get_graph_by_id,
     get_user_folders,
+    get_user_workspaces,
     move_graph_to_folder,
+    move_graph_to_workspace,
     persist_temporary_graph,
     update_folder_color,
     update_folder_name,
+    update_workspace,
 )
 from database.pg.graph_ops.graph_node_crud import update_graph_with_nodes_and_edges
-from database.pg.models import Folder, Graph
+from database.pg.models import Folder, Graph, Workspace
 from database.pg.user_ops.usage_limits import check_free_tier_canvas_limit, validate_premium_nodes
 from fastapi import APIRouter, Depends, HTTPException, Request
 from models.graphDTO import NodeSearchRequest
@@ -73,6 +78,7 @@ async def route_get_graph_by_id(
 async def route_create_new_empty_graph(
     request: Request,
     temporary: bool = False,
+    workspace_id: str | None = None,
     user_id: str = Depends(get_current_user_id),
 ) -> Graph:
     """
@@ -89,7 +95,9 @@ async def route_create_new_empty_graph(
 
     user_settings = await get_user_settings(request.app.state.pg_engine, user_id)
 
-    return await create_empty_graph(request.app.state.pg_engine, user_id, user_settings, temporary)
+    return await create_empty_graph(
+        request.app.state.pg_engine, user_id, user_settings, temporary, workspace_id
+    )
 
 
 @router.post("/graph/{graph_id}/update")
@@ -345,9 +353,10 @@ async def route_get_folders(
 async def route_create_folder(
     request: Request,
     name: str,
+    workspace_id: str | None = None,
     user_id: str = Depends(get_current_user_id),
 ) -> Folder:
-    return await create_folder(request.app.state.pg_engine, user_id, name)
+    return await create_folder(request.app.state.pg_engine, user_id, name, workspace_id)
 
 
 @router.patch("/folders/{folder_id}")
@@ -379,6 +388,48 @@ async def route_move_graph(
     request: Request,
     graph_id: str,
     folder_id: str | None = None,  # None means move to root
+    workspace_id: str | None = None,
     user_id: str = Depends(get_current_user_id),
 ) -> Graph:
+    if workspace_id:
+        return await move_graph_to_workspace(request.app.state.pg_engine, graph_id, workspace_id)
     return await move_graph_to_folder(request.app.state.pg_engine, graph_id, folder_id)
+
+
+# --- Workspace Routes ---
+
+
+@router.get("/workspaces")
+async def route_get_workspaces(
+    request: Request,
+    user_id: str = Depends(get_current_user_id),
+) -> list[Workspace]:
+    return await get_user_workspaces(request.app.state.pg_engine, user_id)
+
+
+@router.post("/workspaces")
+async def route_create_workspace(
+    request: Request,
+    name: str,
+    user_id: str = Depends(get_current_user_id),
+) -> Workspace:
+    return await create_workspace(request.app.state.pg_engine, user_id, name)
+
+
+@router.patch("/workspaces/{workspace_id}")
+async def route_update_workspace(
+    request: Request,
+    workspace_id: str,
+    name: str,
+    user_id: str = Depends(get_current_user_id),
+) -> Workspace:
+    return await update_workspace(request.app.state.pg_engine, workspace_id, name)
+
+
+@router.delete("/workspaces/{workspace_id}")
+async def route_delete_workspace(
+    request: Request,
+    workspace_id: str,
+    user_id: str = Depends(get_current_user_id),
+) -> None:
+    await delete_workspace(request.app.state.pg_engine, workspace_id)
diff --git a/api/migrations/versions/fd447b227777_add_workspace_table.py b/api/migrations/versions/fd447b227777_add_workspace_table.py
new file mode 100644
index 00000000..d429e6cd
--- /dev/null
+++ b/api/migrations/versions/fd447b227777_add_workspace_table.py
@@ -0,0 +1,114 @@
+# flake8: noqa
+"""add workspace table
+
+Revision ID: fd447b227777
+Revises: c8c2d84a3b86
+Create Date: 2026-01-02 17:26:53.779164
+
+"""
+
+from alembic import op
+import sqlalchemy as sa
+import sqlmodel
+from sqlalchemy.dialects import postgresql
+
+# revision identifiers, used by Alembic.
+revision = "fd447b227777"
+down_revision = "c8c2d84a3b86"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # 1. Create workspaces table
+    op.create_table(
+        "workspaces",
+        sa.Column(
+            "id",
+            postgresql.UUID(as_uuid=True),
+            server_default=sa.text("uuid_generate_v4()"),
+            nullable=False,
+        ),
+        sa.Column("user_id", postgresql.UUID(as_uuid=True), nullable=False),
+        sa.Column("name", sqlmodel.sql.sqltypes.AutoString(length=50), nullable=False),
+        sa.Column(
+            "created_at",
+            sa.TIMESTAMP(timezone=True),
+            server_default=sa.text("now()"),
+            nullable=False,
+        ),
+        sa.Column(
+            "updated_at",
+            sa.TIMESTAMP(timezone=True),
+            server_default=sa.text("now()"),
+            nullable=False,
+        ),
+        sa.ForeignKeyConstraint(["user_id"], ["users.id"], ondelete="CASCADE"),
+        sa.PrimaryKeyConstraint("id"),
+    )
+
+    # 2. Add workspace_id to folders
+    op.add_column(
+        "folders", sa.Column("workspace_id", postgresql.UUID(as_uuid=True), nullable=True)
+    )
+    op.create_foreign_key(
+        "fk_folders_workspace_id",
+        "folders",
+        "workspaces",
+        ["workspace_id"],
+        ["id"],
+        ondelete="CASCADE",
+    )
+
+    # 3. Add workspace_id to graphs
+    op.add_column("graphs", sa.Column("workspace_id", postgresql.UUID(as_uuid=True), nullable=True))
+    op.create_foreign_key(
+        "fk_graphs_workspace_id",
+        "graphs",
+        "workspaces",
+        ["workspace_id"],
+        ["id"],
+        ondelete="SET NULL",
+    )
+
+    # 4. Data Migration
+    # Create default workspaces for all existing users
+    op.execute(
+        """
+        INSERT INTO workspaces (id, user_id, name, created_at, updated_at)
+        SELECT uuid_generate_v4(), id, 'Default', now(), now()
+        FROM users
+    """
+    )
+
+    # Link existing folders to the new default workspace of their owner
+    op.execute(
+        """
+        UPDATE folders f
+        SET workspace_id = w.id
+        FROM workspaces w
+        WHERE f.user_id = w.user_id
+    """
+    )
+
+    # Link existing graphs to the new default workspace of their owner
+    op.execute(
+        """
+        UPDATE graphs g
+        SET workspace_id = w.id
+        FROM workspaces w
+        WHERE g.user_id = w.user_id
+    """
+    )
+
+
+def downgrade() -> None:
+    # 1. Drop foreign keys and columns
+    op.drop_constraint("fk_graphs_workspace_id", "graphs", type_="foreignkey")
+    op.drop_column("graphs", "workspace_id")
+
+    op.drop_constraint("fk_folders_workspace_id", "folders", type_="foreignkey")
+    op.drop_column("folders", "workspace_id")
+
+    # 2. Drop workspaces table
+    op.drop_table("workspaces")
diff --git a/ui/app/assets/icons/MdiBriefcaseOutline.svg b/ui/app/assets/icons/MdiBriefcaseOutline.svg
new file mode 100644
index 00000000..0a2400f8
--- /dev/null
+++ b/ui/app/assets/icons/MdiBriefcaseOutline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Design Icons by Pictogrammers - https://github.com/Templarian/MaterialDesign/blob/master/LICENSE --><path fill="currentColor" d="M20 6c.58 0 1.05.2 1.42.59c.38.41.58.86.58 1.41v11c0 .55-.2 1-.58 1.41c-.37.39-.84.59-1.42.59H4c-.58 0-1.05-.2-1.42-.59C2.2 20 2 19.55 2 19V8c0-.55.2-1 .58-1.41C2.95 6.2 3.42 6 4 6h4V4c0-.58.2-1.05.58-1.42C8.95 2.2 9.42 2 10 2h4c.58 0 1.05.2 1.42.58c.38.37.58.84.58 1.42v2zM4 8v11h16V8zm10-2V4h-4v2z"/></svg>
\ No newline at end of file
diff --git a/ui/app/assets/icons/MdiFolderRemoveOutline.svg b/ui/app/assets/icons/MdiFolderRemoveOutline.svg
new file mode 100644
index 00000000..38be1ab6
--- /dev/null
+++ b/ui/app/assets/icons/MdiFolderRemoveOutline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Design Icons by Pictogrammers - https://github.com/Templarian/MaterialDesign/blob/master/LICENSE --><path fill="currentColor" d="M13 19c0 .34.04.67.09 1H4a2 2 0 0 1-2-2V6c0-1.11.89-2 2-2h6l2 2h8a2 2 0 0 1 2 2v5.81c-.61-.35-1.28-.59-2-.72V8H4v10h9.09c-.05.33-.09.66-.09 1m9.54-2.12l-1.42-1.41L19 17.59l-2.12-2.12l-1.41 1.41L17.59 19l-2.12 2.12l1.41 1.42L19 20.41l2.12 2.13l1.42-1.42L20.41 19z"/></svg>
\ No newline at end of file
diff --git a/ui/app/components/ui/sidebar-history/actions.vue b/ui/app/components/ui/sidebar-history/actions.vue
index 565ce12a..87dc74e0 100644
--- a/ui/app/components/ui/sidebar-history/actions.vue
+++ b/ui/app/components/ui/sidebar-history/actions.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Graph, Folder } from '@/types/graph';
+import type { Workspace } from '@/composables/useAPI';
 
 const props = defineProps({
     graph: {
@@ -14,33 +15,65 @@ const props = defineProps({
         type: Array as PropType<Folder[]>,
         default: () => [],
     },
+    workspaces: {
+        type: Array as PropType<Workspace[]>,
+        default: () => [],
+    },
 });
 
 const emit = defineEmits<{
     (e: 'rename' | 'download' | 'pin', graphId: string): void;
     (e: 'delete', graphId: string, graphName: string): void;
-    (e: 'move', graphId: string, folderId: string | null): void;
+    (e: 'move', graphId: string, folderId: string | null, workspaceId: string | null): void;
     (e: 'regenerateTitle', graphId: string, strategy: 'first' | 'all'): void;
 }>();
 
 const moveItems = computed(() => {
-    const items = [
-        {
-            label: 'No Folder',
-            action: () => emit('move', props.graph.id, null),
-            isActive: !props.graph.folder_id,
-        },
-    ];
+    const items = [];
+
+    // Option to remove from folder
+    if (props.graph.folder_id) {
+        items.push({
+            label: 'Remove from Folder',
+            action: () => emit('move', props.graph.id, null, null),
+            icon: 'MdiFolderRemoveOutline',
+        });
+    }
 
+    // Folders in current workspace
     if (props.folders.length > 0) {
+        items.push({
+            label: 'Folders',
+            isHeader: true,
+        });
         props.folders.forEach((folder) => {
-            items.push({
-                label: folder.name,
-                action: () => emit('move', props.graph.id, folder.id),
-                isActive: props.graph.folder_id === folder.id,
-            });
+            if (props.graph.folder_id !== folder.id) {
+                items.push({
+                    label: folder.name,
+                    action: () => emit('move', props.graph.id, folder.id, null),
+                });
+            }
         });
     }
+
+    // Workspaces
+    if (props.workspaces && props.workspaces.length > 1) {
+        // Divider
+        if (items.length > 0) {
+            items.push({ label: 'Workspaces', isHeader: true });
+        }
+
+        props.workspaces.forEach((ws) => {
+            if (props.graph.workspace_id !== ws.id) {
+                items.push({
+                    label: ws.name,
+                    action: () => emit('move', props.graph.id, null, ws.id),
+                    icon: 'MdiBriefcaseOutline',
+                });
+            }
+        });
+    }
+
     return items;
 });
 
@@ -100,7 +133,7 @@ const calculatePosition = (event: MouseEvent) => {
                     openUpwards ? 'bottom-full mb-2 origin-bottom-right' : 'mt-2 origin-top-right',
                 ]"
             >
-                <!-- Move to Folder Submenu -->
+                <!-- Move to Folder/Workspace Submenu -->
                 <UiSidebarHistorySubmenu
                     title="Move to..."
                     icon="MdiFolderOutline"
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistory.vue b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
index c226cf01..54cd93b2 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistory.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Graph, Folder } from '@/types/graph';
+import type { Graph, Folder, Workspace } from '@/types/graph';
 import { useResizeObserver, useDebounceFn } from '@vueuse/core';
 import UiSidebarHistorySearch from './sidebarHistorySearch.vue';
 import { PLAN_LIMITS } from '@/constants/limits';
@@ -37,6 +37,10 @@ const {
     updateHistoryFolder,
     moveGraph,
     deleteHistoryFolder,
+    getWorkspaces,
+    createWorkspace,
+    updateWorkspace,
+    deleteWorkspace,
 } = useAPI();
 
 const { user } = useUserSession();
@@ -47,6 +51,8 @@ const { error, success } = useToast();
 const STORAGE_KEY = 'meridian_expanded_folders';
 const graphs = ref<Graph[]>([]);
 const folders = ref<Folder[]>([]);
+const workspaces = ref<Workspace[]>([]);
+const activeWorkspaceIndex = ref(0);
 const expandedFolders = ref<Set<string>>(new Set());
 const searchQuery = ref('');
 
@@ -54,6 +60,11 @@ const editingId = ref<string | null>(null);
 const editInputValue = ref<string>('');
 const inputRefs = ref(new Map<string, HTMLInputElement>());
 
+// Workspace editing state
+const isEditingWorkspace = ref(false);
+const workspaceNameInput = ref('');
+const workspaceInputRef = ref<HTMLInputElement | null>(null);
+
 const historyListRef: Ref<HTMLDivElement | null> = ref(null);
 const searchComponentRef = ref<InstanceType<typeof UiSidebarHistorySearch> | null>(null);
 const isOverflowing = ref(false);
@@ -69,6 +80,8 @@ const isLimitReached = computed(() => {
 });
 
 // --- Computed Properties ---
+const activeWorkspace = computed(() => workspaces.value[activeWorkspaceIndex.value]);
+
 const searchResults = computed(() => {
     if (!searchQuery.value) return [];
     return graphs.value
@@ -78,14 +91,20 @@ const searchResults = computed(() => {
 
 const organizedData = computed(() => {
     if (searchQuery.value) return null;
+    if (!activeWorkspace.value) return null;
+
+    const wsId = activeWorkspace.value.id;
+
+    const wsFolders = folders.value.filter((f) => f.workspace_id === wsId);
+    const wsGraphs = graphs.value.filter((g) => g.workspace_id === wsId);
 
-    const pinned = graphs.value.filter((g) => g.pinned);
-    const unpinned = graphs.value.filter((g) => !g.pinned);
+    const pinned = wsGraphs.filter((g) => g.pinned);
+    const unpinned = wsGraphs.filter((g) => !g.pinned);
 
-    const folderMap = folders.value
+    const folderMap = wsFolders
         .map((folder) => ({
             ...folder,
-            graphs: unpinned
+            graphs: graphs.value
                 .filter((g) => g.folder_id === folder.id)
                 .sort(
                     (a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime(),
@@ -107,15 +126,63 @@ const organizedData = computed(() => {
 // --- Core Logic Functions ---
 const fetchData = async () => {
     try {
-        const [graphsData, foldersData] = await Promise.all([getGraphs(), getHistoryFolders()]);
+        const [graphsData, foldersData, workspacesData] = await Promise.all([
+            getGraphs(),
+            getHistoryFolders(),
+            getWorkspaces(),
+        ]);
         graphs.value = graphsData;
         folders.value = foldersData;
-    } catch (err) {
+        workspaces.value = workspacesData;
+
+        // Ensure we have a valid index
+        if (activeWorkspaceIndex.value >= workspaces.value.length) {
+            activeWorkspaceIndex.value = 0;
+        }
+    } catch (err: unknown) {
         console.error('Error fetching data:', err);
         error('Failed to load history.', { title: 'Load Error' });
     }
 };
 
+const handleCreateWorkspace = async () => {
+    try {
+        const newWs = await createWorkspace('New Workspace');
+        workspaces.value.push(newWs);
+        activeWorkspaceIndex.value = workspaces.value.length - 1;
+        startEditingWorkspace();
+    } catch {
+        error('Failed to create workspace.');
+    }
+};
+
+const startEditingWorkspace = async () => {
+    if (!activeWorkspace.value) return;
+    workspaceNameInput.value = activeWorkspace.value.name;
+    isEditingWorkspace.value = true;
+    await nextTick();
+    workspaceInputRef.value?.focus();
+    workspaceInputRef.value?.select();
+};
+
+const saveWorkspaceName = async () => {
+    if (!isEditingWorkspace.value || !activeWorkspace.value) return;
+    const newName = workspaceNameInput.value.trim();
+    if (newName && newName !== activeWorkspace.value.name) {
+        try {
+            const updated = await updateWorkspace(activeWorkspace.value.id, newName);
+            activeWorkspace.value.name = updated.name;
+        } catch {
+            error('Failed to rename workspace.');
+        }
+    }
+    isEditingWorkspace.value = false;
+};
+
+const cancelWorkspaceEdit = () => {
+    isEditingWorkspace.value = false;
+};
+
 const createGraphHandler = async () => {
     if (isLimitReached.value) {
         error('You have reached the maximum number of canvases for the Free plan.', {
@@ -125,7 +192,8 @@ const createGraphHandler = async () => {
     }
 
     try {
-        const newGraph = await createGraph(false);
+        const wsId = activeWorkspace.value?.id;
+        const newGraph = await createGraph(false, wsId);
         if (newGraph) {
             graphs.value.unshift(newGraph);
             upcomingModelData.value.data.model = modelsSettings.value.defaultModel;
@@ -151,7 +219,8 @@ const createGraphHandler = async () => {
 
 const createTemporaryGraphHandler = async () => {
     try {
-        const newGraph = await createGraph(true);
+        const wsId = activeWorkspace.value?.id;
+        const newGraph = await createGraph(true, wsId);
         if (newGraph) {
             upcomingModelData.value.data.model = modelsSettings.value.defaultModel;
             navigateToGraph(newGraph.id, true);
@@ -166,7 +235,8 @@ const createTemporaryGraphHandler = async () => {
 
 const createFolderHandler = async () => {
     try {
-        const newFolder = await createHistoryFolder('New Folder');
+        const wsId = activeWorkspace.value?.id;
+        const newFolder = await createHistoryFolder('New Folder', wsId);
         folders.value.push(newFolder);
         expandedFolders.value.add(newFolder.id);
         handleStartRename(newFolder.id, newFolder.name);
@@ -249,21 +319,76 @@ const cancelRename = () => {
     editInputValue.value = '';
 };
 
-const handleMoveGraph = async (graphId: string, folderId: string | null) => {
+const handleMoveGraph = async (
+    graphId: string,
+    folderId: string | null,
+    workspaceId: string | null = null,
+) => {
     const graph = graphs.value.find((g) => g.id === graphId);
     if (!graph) return;
 
     const oldFolderId = graph.folder_id;
-    graph.folder_id = folderId;
+    const oldWorkspaceId = graph.workspace_id;
+
+    if (folderId) {
+        graph.folder_id = folderId;
+        const targetFolder = folders.value.find((f) => f.id === folderId);
+        if (targetFolder) {
+            graph.workspace_id = targetFolder.workspace_id;
+        }
+    } else if (workspaceId) {
+        graph.folder_id = null;
+        graph.workspace_id = workspaceId;
+    } else {
+        graph.folder_id = null;
+    }
 
     try {
-        await moveGraph(graphId, folderId);
+        await moveGraph(graphId, folderId, workspaceId);
+        if (workspaceId) {
+            await fetchData();
+        }
     } catch {
         graph.folder_id = oldFolderId;
+        graph.workspace_id = oldWorkspaceId;
         error('Failed to move graph.');
     }
 };
 
+const handleDeleteWorkspace = async () => {
+    const ws = workspaces.value[activeWorkspaceIndex.value];
+    if (!ws) return;
+    if (
+        !confirm(
+            `Delete workspace "${ws.name}"? Graphs inside will be moved to the "${workspaces.value[0].name}" workspace.`,
+        )
+    )
+        return;
+
+    if (workspaces.value.length <= 1) {
+        error('Cannot delete the only workspace.');
+        return;
+    }
+    if (activeWorkspaceIndex.value === 0) {
+        error('Cannot delete the Default workspace.');
+        return;
+    }
+
+    try {
+        await deleteWorkspace(ws.id);
+        workspaces.value = workspaces.value.filter((w) => w.id !== ws.id);
+        graphs.value.forEach((g) => {
+            if (g.workspace_id === ws.id) g.workspace_id = workspaces.value[0].id;
+        });
+        // Adjust active index if needed
+        if (activeWorkspaceIndex.value >= workspaces.value.length) {
+            activeWorkspaceIndex.value = Math.max(0, workspaces.value.length - 1);
+        }
+    } catch {
+        error('Failed to delete workspace.');
+    }
+};
+
 const handleDeleteFolder = async (folderId: string) => {
     if (!confirm('Delete this folder? Graphs inside will be moved to the root list.')) return;
     try {
@@ -457,9 +582,53 @@ onMounted(async () => {
             @import="handleImportGraph"
         />
 
+        <!-- Workspace Header -->
+        <div v-if="activeWorkspace" class="hide-close mt-2 flex items-center justify-between px-1">
+            <div class="flex flex-1 items-center">
+                <div v-if="isEditingWorkspace" class="w-full max-w-[150px]">
+                    <input
+                        ref="workspaceInputRef"
+                        v-model="workspaceNameInput"
+                        type="text"
+                        class="bg-anthracite/20 text-stone-gray w-full rounded px-1 text-sm
+                            font-bold outline-none"
+                        @blur="saveWorkspaceName"
+                        @keydown.enter="saveWorkspaceName"
+                        @keydown.esc="cancelWorkspaceEdit"
+                    />
+                </div>
+                <h2
+                    v-else
+                    class="text-stone-gray/50 hover:text-stone-gray cursor-pointer truncate text-sm
+                        font-bold transition-colors"
+                    title="Rename Workspace"
+                    @click="startEditingWorkspace"
+                >
+                    {{ activeWorkspace.name }}
+                </h2>
+            </div>
+
+            <button
+                v-if="workspaces.length > 1 && activeWorkspaceIndex !== 0"
+                class="text-stone-gray/50 hover:text-stone-gray mr-2 hover:cursor-pointer"
+                title="Create new workspace"
+                @click="handleDeleteWorkspace()"
+            >
+                <UiIcon name="MaterialSymbolsDeleteRounded" class="h-3 w-3" />
+            </button>
+
+            <button
+                class="text-stone-gray/50 hover:text-stone-gray hover:cursor-pointer"
+                title="Create new workspace"
+                @click="handleCreateWorkspace"
+            >
+                <UiIcon name="Fa6SolidPlus" class="h-3 w-3" />
+            </button>
+        </div>
+
         <div
             ref="historyListRef"
-            class="hide-close hide-scrollbar relative mt-4 flex grow flex-col space-y-2
+            class="hide-close hide-scrollbar relative mt-2 flex grow flex-col space-y-2
                 overflow-y-auto pb-2"
         >
             <div
@@ -484,6 +653,7 @@ onMounted(async () => {
                     :editing-id="editingId"
                     :edit-input-value="editInputValue"
                     :folders="folders"
+                    :workspaces="workspaces"
                     @navigate="navigateToGraph"
                     @start-rename="(graphId, graphName) => handleStartRename(graphId, graphName)"
                     @update:edit-input-value="(val) => (editInputValue = val)"
@@ -509,6 +679,7 @@ onMounted(async () => {
                         :editing-id="editingId"
                         :edit-input-value="editInputValue"
                         :folders="folders"
+                        :workspaces="workspaces"
                         @navigate="navigateToGraph"
                         @start-rename="
                             (graphId, graphName) => handleStartRename(graphId, graphName)
@@ -537,6 +708,7 @@ onMounted(async () => {
                     :edit-input-value="editInputValue"
                     :current-graph-id="currentGraphId"
                     :all-folders="folders"
+                    :workspaces="workspaces"
                     @toggle="toggleFolder"
                     @start-rename="handleStartRename"
                     @delete="handleDeleteFolder"
@@ -566,6 +738,7 @@ onMounted(async () => {
                         :editing-id="editingId"
                         :edit-input-value="editInputValue"
                         :folders="folders"
+                        :workspaces="workspaces"
                         @navigate="navigateToGraph"
                         @start-rename="
                             (graphId, graphName) => handleStartRename(graphId, graphName)
@@ -588,15 +761,23 @@ onMounted(async () => {
 
         <div
             v-show="isOverflowing"
-            class="hide-close pointer-events-none absolute bottom-[80px] left-0 h-10 w-full px-4"
+            class="hide-close pointer-events-none absolute bottom-[80px] left-0 h-12 w-full px-4"
         >
             <div
-                class="dark:from-anthracite/75 from-stone-gray/20 absolute z-10 h-10 w-[364px]
+                class="dark:from-anthracite/75 from-stone-gray/20 absolute z-10 h-12 w-[364px]
                     bg-gradient-to-t to-transparent"
             />
-            <div class="from-obsidian absolute h-10 w-[364px] bg-gradient-to-t to-transparent" />
+            <div class="from-obsidian absolute h-12 w-[364px] bg-gradient-to-t to-transparent" />
         </div>
 
+        <!-- Pagination -->
+        <UiSidebarHistoryWorkspacePagination
+            class="hide-close"
+            :workspaces="workspaces"
+            :active-index="activeWorkspaceIndex"
+            @select="(idx) => (activeWorkspaceIndex = idx)"
+        />
+
         <UiSidebarHistoryUserProfileCard class="hide-close" />
         <div
             class="bg-anthracite hover:bg-obsidian/20 border-stone-gray/10 pointer-events-auto
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue b/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue
index e8278666..f5c54b1c 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Graph, Folder } from '@/types/graph';
+import type { Graph, Folder, Workspace } from '@/types/graph';
 import { ChromePicker } from 'vue-color';
 
 // --- Props ---
@@ -28,6 +28,10 @@ const props = defineProps({
         type: Array as PropType<Folder[]>,
         required: true,
     },
+    workspaces: {
+        type: Array as PropType<Workspace[]>,
+        default: () => [],
+    },
 });
 
 // --- Emits ---
@@ -49,7 +53,7 @@ const emit = defineEmits<{
 
     // Bubbled events from child UiSidebarHistoryItem
     (e: 'navigate', graphId: string, temporary: boolean): void;
-    (e: 'moveGraph', graphId: string, folderId: string | null): void;
+    (e: 'moveGraph', graphId: string, folderId: string | null, workspaceId: string | null): void;
 
     (e: 'regenerateTitle', graphId: string, strategy: 'first' | 'all'): void;
 }>();
@@ -262,6 +266,7 @@ watch(
                 :editing-id="editingId"
                 :edit-input-value="editInputValue"
                 :folders="allFolders"
+                :workspaces="workspaces"
                 @navigate="(graphId, temp) => emit('navigate', graphId, temp)"
                 @start-rename="(graphId, graphName) => emit('startGraphRename', graphId, graphName)"
                 @update:edit-input-value="(val) => emit('update:editInputValue', val)"
@@ -271,7 +276,7 @@ watch(
                 @delete="(graphId, graphName) => emit('deleteGraph', graphId, graphName)"
                 @download="(graphId) => emit('downloadGraph', graphId)"
                 @pin="(graphId) => emit('pinGraph', graphId)"
-                @move="(graphId, folderId) => emit('moveGraph', graphId, folderId)"
+                @move="(graphId, folderId, wsId) => emit('moveGraph', graphId, folderId, wsId)"
                 @regenerate-title="
                     (graphId, strategy) => emit('regenerateTitle', graphId, strategy)
                 "
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistoryItem.vue b/ui/app/components/ui/sidebar-history/sidebarHistoryItem.vue
index 172b5571..3d670f32 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistoryItem.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistoryItem.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Graph, Folder } from '@/types/graph';
+import type { Graph, Folder, Workspace } from '@/types/graph';
 
 const props = defineProps({
     graph: {
@@ -22,6 +22,10 @@ const props = defineProps({
         type: Array as PropType<Folder[]>,
         required: true,
     },
+    workspaces: {
+        type: Array as PropType<Workspace[]>,
+        default: () => [],
+    },
 });
 
 const emit = defineEmits<{
@@ -29,7 +33,7 @@ const emit = defineEmits<{
     (e: 'startRename' | 'delete', graphId: string, graphName: string): void;
     (e: 'update:editInputValue' | 'pin' | 'download', value: string): void;
     (e: 'confirmRename' | 'cancelRename'): void;
-    (e: 'move', graphId: string, folderId: string | null): void;
+    (e: 'move', graphId: string, folderId: string | null, workspaceId: string | null): void;
     (e: 'regenerateTitle', graphId: string, strategy: 'first' | 'all'): void;
     (e: 'setInputRef', graphId: string, el: unknown): void;
 }>();
@@ -107,11 +111,15 @@ const handleKeyDown = (event: KeyboardEvent) => {
             :graph="graph"
             :current-graph-id="currentGraphId"
             :folders="folders"
+            :workspaces="workspaces"
             @rename="(id: string) => emit('startRename', id, graph.name)"
             @delete="(id: string, name: string) => emit('delete', id, name)"
             @download="(id: string) => emit('download', id)"
             @pin="(id: string) => emit('pin', id)"
-            @move="(graphId: string, folderId: string | null) => emit('move', graphId, folderId)"
+            @move="
+                (graphId: string, folderId: string | null, wsId: string | null) =>
+                    emit('move', graphId, folderId, wsId)
+            "
             @regenerate-title="
                 (graphId: string, strategy: 'first' | 'all') =>
                     emit('regenerateTitle', graphId, strategy)
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue b/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
new file mode 100644
index 00000000..ce9e8e5f
--- /dev/null
+++ b/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import type { Workspace } from '@/types/graph';
+
+defineProps<{
+    workspaces: Workspace[];
+    activeIndex: number;
+}>();
+
+const emit = defineEmits<{
+    (e: 'select', index: number): void;
+}>();
+</script>
+
+<template>
+    <div
+        v-if="workspaces.length > 1"
+        class="absolute bottom-[4.2rem] left-0 z-10 flex h-8 w-full items-center justify-center
+            space-x-1 pb-2"
+    >
+        <button
+            v-for="(ws, index) in workspaces"
+            :key="ws.id"
+            class="group relative flex h-6 w-6 items-center justify-center"
+            :title="ws.name"
+            @click="emit('select', index)"
+        >
+            <div
+                class="transition-all duration-300 ease-in-out"
+                :class="[
+                    index === activeIndex
+                        ? 'bg-ember-glow h-2 w-2 rounded-full'
+                        : 'bg-stone-gray/30 group-hover:bg-stone-gray/60 h-1.5 w-1.5 rounded-full',
+                ]"
+            />
+        </button>
+    </div>
+</template>
diff --git a/ui/app/components/ui/sidebar-history/submenu.vue b/ui/app/components/ui/sidebar-history/submenu.vue
index 8c58b5f6..ce6a5e6d 100644
--- a/ui/app/components/ui/sidebar-history/submenu.vue
+++ b/ui/app/components/ui/sidebar-history/submenu.vue
@@ -5,13 +5,17 @@ defineProps<{
     items: {
         label: string;
         icon?: string;
-        action: () => void;
-        isActive?: boolean;
+        action?: () => void;
         class?: string;
+        isHeader?: boolean;
     }[];
 }>();
 
 const isOpen = ref(false);
+
+const executeAction = (action?: () => void) => {
+    if (action) action();
+};
 </script>
 
 <template>
@@ -41,9 +45,9 @@ const isOpen = ref(false);
             <div
                 v-show="isOpen"
                 class="dark:bg-stone-gray bg-anthracite dark:ring-anthracite/50 ring-stone-gray/10
-                    hide-scrollbar absolute top-0 right-full z-30 mr-1 max-h-60 w-40
-                    origin-top-right rounded-md p-1 shadow-lg ring-2 backdrop-blur-3xl
-                    focus:outline-none"
+                    hide-scrollbar absolute top-0 right-full z-30 mr-1 max-h-96 w-40
+                    origin-top-right overflow-y-auto rounded-md p-1 shadow-lg ring-2
+                    backdrop-blur-3xl focus:outline-none"
             >
                 <!-- Hover Bridge -->
                 <div
@@ -52,31 +56,38 @@ const isOpen = ref(false);
                 ></div>
                 <div class="absolute top-0 -right-16 h-10 w-20"></div>
 
-                <HeadlessMenuItem v-for="(item, index) in items" :key="index">
-                    <button
-                        class="hover:bg-obsidian/25 dark:text-obsidian text-soft-silk flex w-full
-                            items-center rounded-md px-4 py-2 text-sm font-bold transition-colors
-                            duration-200 ease-in-out"
-                        :class="item.class"
-                        @click.stop="item.action"
-                    >
-                        <UiIcon
-                            v-if="item.icon"
-                            :name="item.icon"
-                            class="h-5 w-5 -translate-x-2 opacity-70"
-                        />
-
-                        <span class="truncate" :class="{ 'opacity-50': item.isActive === false }">
+                <template v-for="(item, index) in items" :key="index">
+                    <!-- Header Item -->
+                    <HeadlessMenuItem v-if="item.isHeader">
+                        <div
+                            class="text-obsidian mt-2 mb-1 px-4 text-[10px] font-bold tracking-wider
+                                uppercase"
+                        >
                             {{ item.label }}
-                        </span>
+                        </div>
+                    </HeadlessMenuItem>
+
+                    <!-- Action Item -->
+                    <HeadlessMenuItem v-else>
+                        <button
+                            class="hover:bg-obsidian/25 dark:text-obsidian text-soft-silk flex
+                                w-full items-center rounded-md px-4 py-2 text-sm font-bold
+                                transition-colors duration-200 ease-in-out"
+                            :class="item.class"
+                            @click.stop="executeAction(item.action)"
+                        >
+                            <UiIcon
+                                v-if="item.icon"
+                                :name="item.icon"
+                                class="h-4 w-4 -translate-x-2 opacity-70"
+                            />
 
-                        <UiIcon
-                            v-if="item.isActive"
-                            name="MaterialSymbolsCheckSmallRounded"
-                            class="ml-auto h-3 w-3"
-                        />
-                    </button>
-                </HeadlessMenuItem>
+                            <span class="truncate">
+                                {{ item.label }}
+                            </span>
+                        </button>
+                    </HeadlessMenuItem>
+                </template>
             </div>
         </transition>
     </div>
diff --git a/ui/app/composables/useAPI.ts b/ui/app/composables/useAPI.ts
index f8b54604..fd889244 100644
--- a/ui/app/composables/useAPI.ts
+++ b/ui/app/composables/useAPI.ts
@@ -1,6 +1,7 @@
 import type {
     Graph,
     Folder,
+    Workspace,
     CompleteGraph,
     CompleteGraphRequest,
     Message,
@@ -219,8 +220,12 @@ export const useAPI = () => {
     /**
      * Creates a new graph.
      */
-    const createGraph = async (temporary: boolean): Promise<Graph> => {
-        return apiFetch<Graph>(`/api/graph/create?temporary=${temporary}`, { method: 'POST' });
+    const createGraph = async (temporary: boolean, workspaceId?: string | null): Promise<Graph> => {
+        let url = `/api/graph/create?temporary=${temporary}`;
+        if (workspaceId) {
+            url += `&workspace_id=${workspaceId}`;
+        }
+        return apiFetch<Graph>(url, { method: 'POST' });
     };
 
     /**
@@ -620,8 +625,12 @@ export const useAPI = () => {
         });
     };
 
-    const createHistoryFolder = async (name: string) => {
-        return apiFetch<Folder>(`/api/folders?name=${encodeURIComponent(name)}`, {
+    const createHistoryFolder = async (name: string, workspaceId?: string | null) => {
+        let url = `/api/folders?name=${encodeURIComponent(name)}`;
+        if (workspaceId) {
+            url += `&workspace_id=${workspaceId}`;
+        }
+        return apiFetch<Folder>(url, {
             method: 'POST',
         });
     };
@@ -639,11 +648,18 @@ export const useAPI = () => {
         });
     };
 
-    const moveGraph = async (graphId: string, folderId: string | null) => {
+    const moveGraph = async (
+        graphId: string,
+        folderId: string | null,
+        workspaceId: string | null = null,
+    ) => {
         if (!graphId) throw new Error('graphId is required');
-        let url = `/api/graph/${graphId}/move`;
+        let url = `/api/graph/${graphId}/move?`;
         if (folderId) {
-            url += `?folder_id=${folderId}`;
+            url += `folder_id=${folderId}`;
+        }
+        if (workspaceId) {
+            url += `&workspace_id=${workspaceId}`;
         }
         return apiFetch<Graph>(url, {
             method: 'POST',
@@ -662,6 +678,28 @@ export const useAPI = () => {
         await apiFetch<unknown>('/api/user/me', { method: 'DELETE' });
     };
 
+    // --- Workspace API ---
+
+    const getWorkspaces = async () => {
+        return apiFetch<Workspace[]>('/api/workspaces', { method: 'GET' });
+    };
+
+    const createWorkspace = async (name: string) => {
+        return apiFetch<Workspace>(`/api/workspaces?name=${encodeURIComponent(name)}`, {
+            method: 'POST',
+        });
+    };
+
+    const updateWorkspace = async (id: string, name: string) => {
+        return apiFetch<Workspace>(`/api/workspaces/${id}?name=${encodeURIComponent(name)}`, {
+            method: 'PATCH',
+        });
+    };
+
+    const deleteWorkspace = async (id: string) => {
+        return apiFetch<unknown>(`/api/workspaces/${id}`, { method: 'DELETE' });
+    };
+
     return {
         apiFetch,
         fetchWithRefresh,
@@ -711,5 +749,10 @@ export const useAPI = () => {
         getRepositoryCommitState,
         // --- Deprecated GitHub specific ---
         getUsage,
+        // --- Workspace ---
+        getWorkspaces,
+        createWorkspace,
+        updateWorkspace,
+        deleteWorkspace,
     };
 };
diff --git a/ui/app/types/graph.d.ts b/ui/app/types/graph.d.ts
index 08204fb9..f0f32662 100644
--- a/ui/app/types/graph.d.ts
+++ b/ui/app/types/graph.d.ts
@@ -9,6 +9,7 @@ interface Folder {
     color: string | null;
     created_at: string;
     updated_at: string;
+    workspace_id: string;
 }
 
 interface Graph {
@@ -30,6 +31,14 @@ interface Graph {
     repetition_penalty: number | null;
     reasoning_effort: ReasoningEffortEnum | null;
     node_count: number;
+    workspace_id: string; // UUID
+}
+
+export interface Workspace {
+    id: string;
+    name: string;
+    created_at: string;
+    updated_at: string;
 }
 
 interface CompleteGraph {

From 5f646a521ce9f6e5be467a218df13f9ec9f46007 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 18:42:11 -0500
Subject: [PATCH 02/30] fix: consolidate type imports in actions.vue

---
 ui/app/components/ui/sidebar-history/actions.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/app/components/ui/sidebar-history/actions.vue b/ui/app/components/ui/sidebar-history/actions.vue
index 87dc74e0..1c705d95 100644
--- a/ui/app/components/ui/sidebar-history/actions.vue
+++ b/ui/app/components/ui/sidebar-history/actions.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { Graph, Folder } from '@/types/graph';
-import type { Workspace } from '@/composables/useAPI';
+import type { Graph, Folder, Workspace } from '@/types/graph';
 
 const props = defineProps({
     graph: {

From 3eacec64386e49376b3a92b7ead7473ca5b8ad79 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 18:57:39 -0500
Subject: [PATCH 03/30] feat: enhance delete_workspace function to include user
 authorization and fallback handling

---
 api/app/database/pg/graph_ops/graph_crud.py | 62 ++++++++++++++++++---
 api/app/routers/graph.py                    |  2 +-
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/api/app/database/pg/graph_ops/graph_crud.py b/api/app/database/pg/graph_ops/graph_crud.py
index 4319c493..ed79d2f8 100644
--- a/api/app/database/pg/graph_ops/graph_crud.py
+++ b/api/app/database/pg/graph_ops/graph_crud.py
@@ -9,7 +9,7 @@
 from neo4j import AsyncDriver
 from neo4j.exceptions import Neo4jError
 from pydantic import BaseModel
-from sqlalchemy import delete, func, select
+from sqlalchemy import delete, func, select, update
 from sqlalchemy.ext.asyncio import AsyncEngine as SQLAlchemyAsyncEngine
 from sqlalchemy.orm import selectinload
 from sqlmodel import and_
@@ -442,10 +442,58 @@ async def update_workspace(
         return ws
 
 
-async def delete_workspace(engine: SQLAlchemyAsyncEngine, workspace_id: str) -> None:
+async def delete_workspace(engine: SQLAlchemyAsyncEngine, workspace_id: str, user_id: str) -> None:
     async with AsyncSession(engine) as session:
-        ws = await session.get(Workspace, workspace_id)
-        if not ws:
-            raise HTTPException(status_code=404, detail="Workspace not found")
-        await session.delete(ws)
-        await session.commit()
+        async with session.begin():
+            ws = await session.get(Workspace, workspace_id)
+            if not ws:
+                raise HTTPException(status_code=404, detail="Workspace not found")
+
+            if str(ws.user_id) != user_id:
+                raise HTTPException(
+                    status_code=403, detail="Not authorized to delete this workspace"
+                )
+
+            # Prevent deleting the last workspace
+            stmt_count = (
+                select(func.count())
+                .select_from(Workspace)
+                .where(and_(Workspace.user_id == user_id))
+            )
+            count = await session.scalar(stmt_count)
+            if count is None or count <= 1:
+                raise HTTPException(status_code=400, detail="Cannot delete the only workspace.")
+
+            # Identify Fallback Workspace (Oldest remaining that is not the target)
+            stmt_fallback = (
+                select(Workspace)
+                .where(and_(Workspace.user_id == user_id, Workspace.id != workspace_id))
+                .order_by(Workspace.created_at)  # type: ignore
+                .limit(1)
+            )
+            result_fallback = await session.exec(stmt_fallback)  # type: ignore
+            fallback_ws = result_fallback.scalar_one_or_none()
+
+            if not fallback_ws:
+                raise HTTPException(
+                    status_code=500, detail="Unable to identify fallback workspace."
+                )
+
+            # Migrate Folders to fallback workspace
+            stmt_folders = (
+                update(Folder)
+                .where(and_(Folder.workspace_id == workspace_id))
+                .values(workspace_id=fallback_ws.id)
+            )
+            await session.exec(stmt_folders)  # type: ignore
+
+            # Migrate Graphs to fallback workspace
+            stmt_graphs = (
+                update(Graph)
+                .where(and_(Graph.workspace_id == workspace_id))
+                .values(workspace_id=fallback_ws.id)
+            )
+            await session.exec(stmt_graphs)  # type: ignore
+
+            # Delete the workspace
+            await session.delete(ws)
diff --git a/api/app/routers/graph.py b/api/app/routers/graph.py
index b6440df1..0e5d796a 100644
--- a/api/app/routers/graph.py
+++ b/api/app/routers/graph.py
@@ -432,4 +432,4 @@ async def route_delete_workspace(
     workspace_id: str,
     user_id: str = Depends(get_current_user_id),
 ) -> None:
-    await delete_workspace(request.app.state.pg_engine, workspace_id)
+    await delete_workspace(request.app.state.pg_engine, workspace_id, user_id)

From 1a16cd433e66e8c858676e7285a96f4cf50cc8bf Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 19:03:18 -0500
Subject: [PATCH 04/30] feat: add state persistance of current workspace on
 page reload

---
 .../ui/sidebar-history/sidebarHistory.vue     | 58 ++++++++++++++-----
 .../sidebarHistoryWorkspacePagination.vue     | 10 ++--
 2 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/ui/app/components/ui/sidebar-history/sidebarHistory.vue b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
index 54cd93b2..0707d372 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistory.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
@@ -49,10 +49,12 @@ const { error, success } = useToast();
 
 // --- Local State ---
 const STORAGE_KEY = 'meridian_expanded_folders';
+const WORKSPACE_STORAGE_KEY = 'meridian_active_workspace';
+
 const graphs = ref<Graph[]>([]);
 const folders = ref<Folder[]>([]);
 const workspaces = ref<Workspace[]>([]);
-const activeWorkspaceIndex = ref(0);
+const activeWorkspaceId = ref<string | null>(null);
 const expandedFolders = ref<Set<string>>(new Set());
 const searchQuery = ref('');
 
@@ -80,7 +82,9 @@ const isLimitReached = computed(() => {
 });
 
 // --- Computed Properties ---
-const activeWorkspace = computed(() => workspaces.value[activeWorkspaceIndex.value]);
+const activeWorkspace = computed(() =>
+    workspaces.value.find((w) => w.id === activeWorkspaceId.value),
+);
 
 const searchResults = computed(() => {
     if (!searchQuery.value) return [];
@@ -135,9 +139,19 @@ const fetchData = async () => {
         folders.value = foldersData;
         workspaces.value = workspacesData;
 
-        // Ensure we have a valid index
-        if (activeWorkspaceIndex.value >= workspaces.value.length) {
-            activeWorkspaceIndex.value = 0;
+        // Restore active workspace from localStorage or default to first available
+        if (workspaces.value.length > 0) {
+            const storedId = localStorage.getItem(WORKSPACE_STORAGE_KEY);
+            const exists = workspaces.value.find((w) => w.id === storedId);
+
+            if (exists) {
+                activeWorkspaceId.value = exists.id;
+            } else if (
+                !activeWorkspaceId.value ||
+                !workspaces.value.find((w) => w.id === activeWorkspaceId.value)
+            ) {
+                activeWorkspaceId.value = workspaces.value[0].id;
+            }
         }
     } catch (err: unknown) {
         console.error('Error fetching data:', err);
@@ -149,7 +163,7 @@ const handleCreateWorkspace = async () => {
     try {
         const newWs = await createWorkspace('New Workspace');
         workspaces.value.push(newWs);
-        activeWorkspaceIndex.value = workspaces.value.length - 1;
+        activeWorkspaceId.value = newWs.id;
         startEditingWorkspace();
     } catch {
         error('Failed to create workspace.');
@@ -356,7 +370,7 @@ const handleMoveGraph = async (
 };
 
 const handleDeleteWorkspace = async () => {
-    const ws = workspaces.value[activeWorkspaceIndex.value];
+    const ws = activeWorkspace.value;
     if (!ws) return;
     if (
         !confirm(
@@ -369,7 +383,8 @@ const handleDeleteWorkspace = async () => {
         error('Cannot delete the only workspace.');
         return;
     }
-    if (activeWorkspaceIndex.value === 0) {
+    // Prevent deleting the default (first) workspace
+    if (ws.id === workspaces.value[0].id) {
         error('Cannot delete the Default workspace.');
         return;
     }
@@ -380,10 +395,8 @@ const handleDeleteWorkspace = async () => {
         graphs.value.forEach((g) => {
             if (g.workspace_id === ws.id) g.workspace_id = workspaces.value[0].id;
         });
-        // Adjust active index if needed
-        if (activeWorkspaceIndex.value >= workspaces.value.length) {
-            activeWorkspaceIndex.value = Math.max(0, workspaces.value.length - 1);
-        }
+        // Switch to default workspace
+        activeWorkspaceId.value = workspaces.value[0].id;
     } catch {
         error('Failed to delete workspace.');
     }
@@ -501,6 +514,21 @@ watch(
     },
     { deep: true },
 );
+
+watch(
+    activeWorkspaceId,
+    (newId) => {
+        if (newId) {
+            try {
+                localStorage.setItem(WORKSPACE_STORAGE_KEY, newId);
+            } catch (e) {
+                console.error('Failed to save active workspace to localStorage', e);
+            }
+        }
+    },
+    { immediate: false },
+);
+
 watch([graphs, folders], () => nextTick(checkOverflow), { deep: true });
 
 watch(
@@ -609,7 +637,7 @@ onMounted(async () => {
             </div>
 
             <button
-                v-if="workspaces.length > 1 && activeWorkspaceIndex !== 0"
+                v-if="workspaces.length > 1 && activeWorkspaceId !== workspaces[0].id"
                 class="text-stone-gray/50 hover:text-stone-gray mr-2 hover:cursor-pointer"
                 title="Create new workspace"
                 @click="handleDeleteWorkspace()"
@@ -774,8 +802,8 @@ onMounted(async () => {
         <UiSidebarHistoryWorkspacePagination
             class="hide-close"
             :workspaces="workspaces"
-            :active-index="activeWorkspaceIndex"
-            @select="(idx) => (activeWorkspaceIndex = idx)"
+            :active-id="activeWorkspaceId"
+            @select="(id) => (activeWorkspaceId = id)"
         />
 
         <UiSidebarHistoryUserProfileCard class="hide-close" />
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue b/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
index ce9e8e5f..6be82ebc 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
@@ -3,11 +3,11 @@ import type { Workspace } from '@/types/graph';
 
 defineProps<{
     workspaces: Workspace[];
-    activeIndex: number;
+    activeId: string | null;
 }>();
 
 const emit = defineEmits<{
-    (e: 'select', index: number): void;
+    (e: 'select', id: string): void;
 }>();
 </script>
 
@@ -18,16 +18,16 @@ const emit = defineEmits<{
             space-x-1 pb-2"
     >
         <button
-            v-for="(ws, index) in workspaces"
+            v-for="ws in workspaces"
             :key="ws.id"
             class="group relative flex h-6 w-6 items-center justify-center"
             :title="ws.name"
-            @click="emit('select', index)"
+            @click="emit('select', ws.id)"
         >
             <div
                 class="transition-all duration-300 ease-in-out"
                 :class="[
-                    index === activeIndex
+                    ws.id === activeId
                         ? 'bg-ember-glow h-2 w-2 rounded-full'
                         : 'bg-stone-gray/30 group-hover:bg-stone-gray/60 h-1.5 w-1.5 rounded-full',
                 ]"

From 45159b29d5b57f2cfc98a12254fa9b74ed048816 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 19:09:01 -0500
Subject: [PATCH 05/30] feat: implement workspace switching functionality with
 throttle and wheel event handling

---
 .../ui/sidebar-history/sidebarHistory.vue     | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/ui/app/components/ui/sidebar-history/sidebarHistory.vue b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
index 0707d372..8d01400e 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistory.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Graph, Folder, Workspace } from '@/types/graph';
-import { useResizeObserver, useDebounceFn } from '@vueuse/core';
+import { useResizeObserver, useDebounceFn, useThrottleFn } from '@vueuse/core';
 import UiSidebarHistorySearch from './sidebarHistorySearch.vue';
 import { PLAN_LIMITS } from '@/constants/limits';
 import type { User } from '@/types/user';
@@ -503,6 +503,38 @@ const checkOverflow = () => {
 };
 useResizeObserver(historyListRef, checkOverflow);
 
+// --- Workspace Switching ---
+const switchWorkspace = (direction: 'next' | 'prev') => {
+    if (workspaces.value.length <= 1) return;
+
+    const currentIndex = workspaces.value.findIndex((w) => w.id === activeWorkspaceId.value);
+    if (currentIndex === -1) return;
+
+    let newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
+
+    // Clamp index
+    if (newIndex < 0) newIndex = 0;
+    if (newIndex >= workspaces.value.length) newIndex = workspaces.value.length - 1;
+
+    if (newIndex !== currentIndex) {
+        activeWorkspaceId.value = workspaces.value[newIndex].id;
+    }
+};
+
+const throttledSwitch = useThrottleFn((direction: 'next' | 'prev') => {
+    switchWorkspace(direction);
+}, 300);
+
+const handleWheel = (event: WheelEvent) => {
+    if (!event.shiftKey) return;
+
+    const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+
+    if (Math.abs(delta) > 10) {
+        throttledSwitch(delta > 0 ? 'next' : 'prev');
+    }
+};
+
 watch(
     expandedFolders,
     (newFolders) => {
@@ -592,6 +624,7 @@ onMounted(async () => {
             'pointer-events-auto w-[25rem]': isLeftOpen,
             'pointer-events-none w-[3rem]': !isLeftOpen,
         }"
+        @wheel="handleWheel"
     >
         <UiSidebarHistoryLogo class="hide-close" />
 

From 92e79096254ed90724180d4ae14b5c79fa74490f Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 19:19:15 -0500
Subject: [PATCH 06/30] feat: refactor sidebar components and implement
 workspace management functionality

---
 .../ui/sidebar-history/sidebarHistory.vue     | 605 ++----------------
 .../composables/sidebar/useSidebarActions.ts  | 307 +++++++++
 ui/app/composables/sidebar/useSidebarData.ts  | 124 ++++
 .../sidebar/useSidebarWorkspaces.ts           | 165 +++++
 4 files changed, 661 insertions(+), 540 deletions(-)
 create mode 100644 ui/app/composables/sidebar/useSidebarActions.ts
 create mode 100644 ui/app/composables/sidebar/useSidebarData.ts
 create mode 100644 ui/app/composables/sidebar/useSidebarWorkspaces.ts

diff --git a/ui/app/components/ui/sidebar-history/sidebarHistory.vue b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
index 8d01400e..7e254a3a 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistory.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
@@ -1,463 +1,87 @@
 <script lang="ts" setup>
-import type { Graph, Folder, Workspace } from '@/types/graph';
-import { useResizeObserver, useDebounceFn, useThrottleFn } from '@vueuse/core';
+import { useResizeObserver } from '@vueuse/core';
 import UiSidebarHistorySearch from './sidebarHistorySearch.vue';
-import { PLAN_LIMITS } from '@/constants/limits';
-import type { User } from '@/types/user';
 
 // --- Stores ---
-const chatStore = useChatStore();
-const globalSettingsStore = useSettingsStore();
 const sidebarCanvasStore = useSidebarCanvasStore();
-const streamStore = useStreamStore();
-
-// --- State from Stores (Reactive Refs) ---
-const { upcomingModelData, lastOpenedChatId, openChatId } = storeToRefs(chatStore);
-const { modelsSettings } = storeToRefs(globalSettingsStore);
 const { isLeftOpen } = storeToRefs(sidebarCanvasStore);
-
-// --- Actions/Methods from Stores ---
-const { resetChatState } = chatStore;
 const { toggleLeftSidebar } = sidebarCanvasStore;
-const { regenerateTitle } = streamStore;
-
-// --- Routing ---
-const route = useRoute();
+const { updateGraphName } = useAPI();
 
 // --- Composables ---
 const {
-    getGraphs,
-    createGraph,
-    updateGraphName,
-    togglePin,
-    exportGraph,
-    importGraph,
-    getHistoryFolders,
-    createHistoryFolder,
-    updateHistoryFolder,
-    moveGraph,
-    deleteHistoryFolder,
-    getWorkspaces,
-    createWorkspace,
-    updateWorkspace,
-    deleteWorkspace,
-} = useAPI();
-
-const { user } = useUserSession();
-const graphEvents = useGraphEvents();
-const { error, success } = useToast();
-
-// --- Local State ---
-const STORAGE_KEY = 'meridian_expanded_folders';
-const WORKSPACE_STORAGE_KEY = 'meridian_active_workspace';
+    graphs,
+    folders,
+    workspaces,
+    searchQuery,
+    searchResults,
+    expandedFolders,
+    fetchData,
+    toggleFolder,
+    getOrganizedData,
+    initExpandedFolders,
+} = useSidebarData();
 
-const graphs = ref<Graph[]>([]);
-const folders = ref<Folder[]>([]);
-const workspaces = ref<Workspace[]>([]);
-const activeWorkspaceId = ref<string | null>(null);
-const expandedFolders = ref<Set<string>>(new Set());
-const searchQuery = ref('');
+const {
+    activeWorkspaceId,
+    activeWorkspace,
+    isEditingWorkspace,
+    workspaceNameInput,
+    workspaceInputRef,
+    initActiveWorkspace,
+    handleCreateWorkspace,
+    startEditingWorkspace,
+    saveWorkspaceName,
+    cancelWorkspaceEdit,
+    handleDeleteWorkspace,
+    handleWheel,
+} = useSidebarWorkspaces(workspaces, graphs);
 
-const editingId = ref<string | null>(null);
-const editInputValue = ref<string>('');
-const inputRefs = ref(new Map<string, HTMLInputElement>());
+const {
+    editingId,
+    editInputValue,
+    createGraphHandler,
+    createTemporaryGraphHandler,
+    createFolderHandler,
+    handleStartRename,
+    confirmRename,
+    cancelRename,
+    handleMoveGraph,
+    handleDeleteFolder,
+    handleUpdateFolderColor,
+    handlePin,
+    handleRegenerateTitle,
+    handleImportGraph,
+    setInputRef,
+    navigateToGraph,
+    exportGraph,
+} = useSidebarActions(graphs, folders, activeWorkspace, expandedFolders, fetchData);
 
-// Workspace editing state
-const isEditingWorkspace = ref(false);
-const workspaceNameInput = ref('');
-const workspaceInputRef = ref<HTMLInputElement | null>(null);
+const route = useRoute();
+const graphEvents = useGraphEvents();
 
-const historyListRef: Ref<HTMLDivElement | null> = ref(null);
+// --- Local Utils ---
+const historyListRef = ref<HTMLDivElement | null>(null) as Ref<HTMLDivElement | null>;
 const searchComponentRef = ref<InstanceType<typeof UiSidebarHistorySearch> | null>(null);
 const isOverflowing = ref(false);
 const isMac = ref(false);
 const isTemporaryOpen = computed(() => route.query.temporary === 'true');
 const currentGraphId = computed(() => route.params.id as string | undefined);
-const { handleDeleteGraph } = useGraphDeletion(graphs, currentGraphId);
-
-const isLimitReached = computed(() => {
-    if ((user.value as User)?.plan_type !== 'free') return false;
-    const nonTemporaryGraphs = graphs.value.filter((g) => !g.temporary);
-    return nonTemporaryGraphs.length >= PLAN_LIMITS.FREE.MAX_GRAPHS;
-});
-
-// --- Computed Properties ---
-const activeWorkspace = computed(() =>
-    workspaces.value.find((w) => w.id === activeWorkspaceId.value),
-);
-
-const searchResults = computed(() => {
-    if (!searchQuery.value) return [];
-    return graphs.value
-        .filter((graph) => graph.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
-        .sort((a, b) => Number(b.pinned) - Number(a.pinned));
-});
-
-const organizedData = computed(() => {
-    if (searchQuery.value) return null;
-    if (!activeWorkspace.value) return null;
-
-    const wsId = activeWorkspace.value.id;
-
-    const wsFolders = folders.value.filter((f) => f.workspace_id === wsId);
-    const wsGraphs = graphs.value.filter((g) => g.workspace_id === wsId);
-
-    const pinned = wsGraphs.filter((g) => g.pinned);
-    const unpinned = wsGraphs.filter((g) => !g.pinned);
-
-    const folderMap = wsFolders
-        .map((folder) => ({
-            ...folder,
-            graphs: graphs.value
-                .filter((g) => g.folder_id === folder.id)
-                .sort(
-                    (a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime(),
-                ),
-        }))
-        .sort((a, b) => a.name.localeCompare(b.name));
-
-    const loose = unpinned
-        .filter((g) => !g.folder_id)
-        .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
-
-    return {
-        pinned,
-        folders: folderMap,
-        loose,
-    };
-});
-
-// --- Core Logic Functions ---
-const fetchData = async () => {
-    try {
-        const [graphsData, foldersData, workspacesData] = await Promise.all([
-            getGraphs(),
-            getHistoryFolders(),
-            getWorkspaces(),
-        ]);
-        graphs.value = graphsData;
-        folders.value = foldersData;
-        workspaces.value = workspacesData;
-
-        // Restore active workspace from localStorage or default to first available
-        if (workspaces.value.length > 0) {
-            const storedId = localStorage.getItem(WORKSPACE_STORAGE_KEY);
-            const exists = workspaces.value.find((w) => w.id === storedId);
-
-            if (exists) {
-                activeWorkspaceId.value = exists.id;
-            } else if (
-                !activeWorkspaceId.value ||
-                !workspaces.value.find((w) => w.id === activeWorkspaceId.value)
-            ) {
-                activeWorkspaceId.value = workspaces.value[0].id;
-            }
-        }
-    } catch (err: unknown) {
-        console.error('Error fetching data:', err);
-        error('Failed to load history.', { title: 'Load Error' });
-    }
-};
-
-const handleCreateWorkspace = async () => {
-    try {
-        const newWs = await createWorkspace('New Workspace');
-        workspaces.value.push(newWs);
-        activeWorkspaceId.value = newWs.id;
-        startEditingWorkspace();
-    } catch {
-        error('Failed to create workspace.');
-    }
-};
-
-const startEditingWorkspace = async () => {
-    if (!activeWorkspace.value) return;
-    workspaceNameInput.value = activeWorkspace.value.name;
-    isEditingWorkspace.value = true;
-    await nextTick();
-    workspaceInputRef.value?.focus();
-    workspaceInputRef.value?.select();
-};
-
-const saveWorkspaceName = async () => {
-    if (!isEditingWorkspace.value || !activeWorkspace.value) return;
-    const newName = workspaceNameInput.value.trim();
-    if (newName && newName !== activeWorkspace.value.name) {
-        try {
-            const updated = await updateWorkspace(activeWorkspace.value.id, newName);
-            activeWorkspace.value.name = updated.name;
-        } catch {
-            error('Failed to rename workspace.');
-        }
-    }
-    isEditingWorkspace.value = false;
-};
-
-const cancelWorkspaceEdit = () => {
-    isEditingWorkspace.value = false;
-};
-
-const createGraphHandler = async () => {
-    if (isLimitReached.value) {
-        error('You have reached the maximum number of canvases for the Free plan.', {
-            title: 'Limit Reached',
-        });
-        return;
-    }
-
-    try {
-        const wsId = activeWorkspace.value?.id;
-        const newGraph = await createGraph(false, wsId);
-        if (newGraph) {
-            graphs.value.unshift(newGraph);
-            upcomingModelData.value.data.model = modelsSettings.value.defaultModel;
-            navigateToGraph(newGraph.id, false);
-        }
-    } catch (err: unknown) {
-        console.error('Failed to create graph from component:', err);
-        const detail =
-            (err as { data?: { detail?: string } })?.data?.detail ||
-            (err as { message?: string })?.message ||
-            '';
-        if (detail === 'FREE_TIER_CANVAS_LIMIT_REACHED') {
-            error('You have reached the maximum number of canvases for the Free plan.', {
-                title: 'Limit Reached',
-            });
-        } else {
-            error('Failed to create new canvas. Please try again.', {
-                title: 'Graph Creation Error',
-            });
-        }
-    }
-};
-
-const createTemporaryGraphHandler = async () => {
-    try {
-        const wsId = activeWorkspace.value?.id;
-        const newGraph = await createGraph(true, wsId);
-        if (newGraph) {
-            upcomingModelData.value.data.model = modelsSettings.value.defaultModel;
-            navigateToGraph(newGraph.id, true);
-        }
-    } catch (err) {
-        console.error('Failed to create temporary graph from component:', err);
-        error('Failed to create new temporary canvas. Please try again.', {
-            title: 'Temporary Graph Creation Error',
-        });
-    }
-};
-
-const createFolderHandler = async () => {
-    try {
-        const wsId = activeWorkspace.value?.id;
-        const newFolder = await createHistoryFolder('New Folder', wsId);
-        folders.value.push(newFolder);
-        expandedFolders.value.add(newFolder.id);
-        handleStartRename(newFolder.id, newFolder.name);
-    } catch (err) {
-        console.error('Failed to create folder from component:', err);
-        error('Failed to create new folder. Please try again.', {
-            title: 'Folder Creation Error',
-        });
-    }
-};
-
-const navigateToGraph = (id: string, temporary: boolean) => {
-    if (id === editingId.value) return;
-    resetChatState();
-    lastOpenedChatId.value = null;
-    openChatId.value = null;
-    navigateTo(`/graph/${id}?temporary=${temporary}`);
-};
-
-const toggleFolder = (folderId: string) => {
-    if (expandedFolders.value.has(folderId)) {
-        expandedFolders.value.delete(folderId);
-    } else {
-        expandedFolders.value.add(folderId);
-    }
-};
-
-const handleStartRename = async (id: string, currentName: string) => {
-    editingId.value = id;
-    editInputValue.value = currentName;
-    await nextTick();
-    const input = inputRefs.value.get(id);
-    if (input) {
-        input.focus();
-        input.select();
-    }
-};
-
-const confirmRename = async () => {
-    if (!editingId.value) return;
-    const id = editingId.value;
-    const newName = editInputValue.value.trim();
-    editingId.value = null;
-
-    // Check if it's a folder
-    const folderIndex = folders.value.findIndex((f) => f.id === id);
-    if (folderIndex !== -1) {
-        if (!newName || newName === folders.value[folderIndex].name) return;
-        const oldName = folders.value[folderIndex].name;
-        folders.value[folderIndex].name = newName;
-        try {
-            await updateHistoryFolder(id, newName, undefined);
-        } catch {
-            folders.value[folderIndex].name = oldName;
-            error('Failed to rename folder');
-        }
-        return;
-    }
-
-    // Check if it's a graph
-    const graphIndex = graphs.value.findIndex((g) => g.id === id);
-    if (graphIndex !== -1) {
-        if (!newName || newName === graphs.value[graphIndex].name) return;
-        const oldName = graphs.value[graphIndex].name;
-        graphs.value[graphIndex].name = newName;
-        try {
-            await updateGraphName(id, newName);
-        } catch (err) {
-            graphs.value[graphIndex].name = oldName;
-            console.error('Error updating graph name:', err);
-            error('Failed to update graph name. Please try again.', {
-                title: 'Graph Rename Error',
-            });
-        }
-    }
-};
 
-const cancelRename = () => {
-    editingId.value = null;
-    editInputValue.value = '';
-};
-
-const handleMoveGraph = async (
-    graphId: string,
-    folderId: string | null,
-    workspaceId: string | null = null,
-) => {
-    const graph = graphs.value.find((g) => g.id === graphId);
-    if (!graph) return;
-
-    const oldFolderId = graph.folder_id;
-    const oldWorkspaceId = graph.workspace_id;
-
-    if (folderId) {
-        graph.folder_id = folderId;
-        const targetFolder = folders.value.find((f) => f.id === folderId);
-        if (targetFolder) {
-            graph.workspace_id = targetFolder.workspace_id;
-        }
-    } else if (workspaceId) {
-        graph.folder_id = null;
-        graph.workspace_id = workspaceId;
-    } else {
-        graph.folder_id = null;
-    }
-
-    try {
-        await moveGraph(graphId, folderId, workspaceId);
-        if (workspaceId) {
-            await fetchData();
-        }
-    } catch {
-        graph.folder_id = oldFolderId;
-        graph.workspace_id = oldWorkspaceId;
-        error('Failed to move graph.');
-    }
-};
-
-const handleDeleteWorkspace = async () => {
-    const ws = activeWorkspace.value;
-    if (!ws) return;
-    if (
-        !confirm(
-            `Delete workspace "${ws.name}"? Graphs inside will be moved to the "${workspaces.value[0].name}" workspace.`,
-        )
-    )
-        return;
-
-    if (workspaces.value.length <= 1) {
-        error('Cannot delete the only workspace.');
-        return;
-    }
-    // Prevent deleting the default (first) workspace
-    if (ws.id === workspaces.value[0].id) {
-        error('Cannot delete the Default workspace.');
-        return;
-    }
-
-    try {
-        await deleteWorkspace(ws.id);
-        workspaces.value = workspaces.value.filter((w) => w.id !== ws.id);
-        graphs.value.forEach((g) => {
-            if (g.workspace_id === ws.id) g.workspace_id = workspaces.value[0].id;
-        });
-        // Switch to default workspace
-        activeWorkspaceId.value = workspaces.value[0].id;
-    } catch {
-        error('Failed to delete workspace.');
-    }
-};
-
-const handleDeleteFolder = async (folderId: string) => {
-    if (!confirm('Delete this folder? Graphs inside will be moved to the root list.')) return;
-    try {
-        await deleteHistoryFolder(folderId);
-        folders.value = folders.value.filter((f) => f.id !== folderId);
-        graphs.value.forEach((g) => {
-            if (g.folder_id === folderId) g.folder_id = null;
-        });
-    } catch {
-        error('Failed to delete folder.');
-    }
-};
-
-const debouncedUpdateFolder = useDebounceFn(async (folderId: string, color: string) => {
-    try {
-        await updateHistoryFolder(folderId, undefined, color);
-    } catch (err) {
-        console.error('Error updating folder color:', err);
-        error('Failed to update folder color.');
-    }
-}, 500);
-
-const handleUpdateFolderColor = (folderId: string, color: string) => {
-    const folder = folders.value.find((f) => f.id === folderId);
-    if (folder) {
-        (folder as Folder).color = color;
-    }
+// Use existing graph deletion composable
+const { handleDeleteGraph } = useGraphDeletion(graphs, currentGraphId);
 
-    debouncedUpdateFolder(folderId, color);
-};
+const organizedData = computed(() => getOrganizedData(activeWorkspaceId.value));
 
-const handleImportGraph = async (files: FileList) => {
-    if (!files || files.length === 0) return;
-
-    try {
-        const fileData = await files[0].text();
-        const importedGraph = await importGraph(fileData);
-
-        if (importedGraph) {
-            await fetchData();
-            await nextTick();
-            success('Graph imported successfully!', {
-                title: 'Graph Import',
-            });
-            navigateToGraph(importedGraph.id, false);
-        } else {
-            console.warn('Import successful but no graph returned from API');
-        }
-    } catch (err) {
-        console.error('Error importing graph:', err);
-        error('Failed to import graph. Please ensure the file is valid.', {
-            title: 'Graph Import Error',
-        });
+// --- Resize Logic ---
+const checkOverflow = () => {
+    if (historyListRef.value) {
+        isOverflowing.value = historyListRef.value.scrollHeight > historyListRef.value.clientHeight;
     }
 };
+useResizeObserver(historyListRef, checkOverflow);
 
+// --- Key Bindings ---
 const handleKeyDown = (event: KeyboardEvent) => {
     if (
         ((event.key === 'N' || event.key === 'n') && event.altKey) ||
@@ -472,95 +96,8 @@ const handleKeyDown = (event: KeyboardEvent) => {
         searchComponentRef.value?.focus();
     }
 };
-const handlePin = (graphId: string) => {
-    const graph = graphs.value.find((g) => g.id === graphId);
-    if (graph) {
-        togglePin(graphId, !graph.pinned).catch((err) => {
-            console.error('Error toggling pin status:', err);
-            error('Failed to update pin status.', { title: 'Pin Toggle Error' });
-            return;
-        });
-        graph.pinned = !graph.pinned;
-    }
-};
-
-const handleRegenerateTitle = (graphId: string, strategy: 'first' | 'all') => {
-    graphEvents.emit('update-name', {
-        graphId: graphId,
-        name: '...',
-    });
-    regenerateTitle(graphId, strategy);
-};
-
-const setInputRef = (id: string, el: unknown) => {
-    if (el) inputRefs.value.set(id, el as HTMLInputElement);
-};
-
-const checkOverflow = () => {
-    if (historyListRef.value) {
-        isOverflowing.value = historyListRef.value.scrollHeight > historyListRef.value.clientHeight;
-    }
-};
-useResizeObserver(historyListRef, checkOverflow);
-
-// --- Workspace Switching ---
-const switchWorkspace = (direction: 'next' | 'prev') => {
-    if (workspaces.value.length <= 1) return;
-
-    const currentIndex = workspaces.value.findIndex((w) => w.id === activeWorkspaceId.value);
-    if (currentIndex === -1) return;
-
-    let newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
-
-    // Clamp index
-    if (newIndex < 0) newIndex = 0;
-    if (newIndex >= workspaces.value.length) newIndex = workspaces.value.length - 1;
-
-    if (newIndex !== currentIndex) {
-        activeWorkspaceId.value = workspaces.value[newIndex].id;
-    }
-};
-
-const throttledSwitch = useThrottleFn((direction: 'next' | 'prev') => {
-    switchWorkspace(direction);
-}, 300);
-
-const handleWheel = (event: WheelEvent) => {
-    if (!event.shiftKey) return;
-
-    const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
-
-    if (Math.abs(delta) > 10) {
-        throttledSwitch(delta > 0 ? 'next' : 'prev');
-    }
-};
-
-watch(
-    expandedFolders,
-    (newFolders) => {
-        try {
-            localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(newFolders)));
-        } catch (e) {
-            console.error('Failed to save expanded folders to localStorage', e);
-        }
-    },
-    { deep: true },
-);
-
-watch(
-    activeWorkspaceId,
-    (newId) => {
-        if (newId) {
-            try {
-                localStorage.setItem(WORKSPACE_STORAGE_KEY, newId);
-            } catch (e) {
-                console.error('Failed to save active workspace to localStorage', e);
-            }
-        }
-    },
-    { immediate: false },
-);
 
+// --- Watchers ---
 watch([graphs, folders], () => nextTick(checkOverflow), { deep: true });
 
 watch(
@@ -576,23 +113,10 @@ watch(
     { deep: true },
 );
 
+// --- Lifecycle ---
 onMounted(async () => {
     isMac.value = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
-
-    // Load expanded folders from localStorage
-    try {
-        const storedFolders = localStorage.getItem(STORAGE_KEY);
-        if (storedFolders) {
-            const parsedFolders = JSON.parse(storedFolders);
-            if (Array.isArray(parsedFolders)) {
-                expandedFolders.value = new Set(parsedFolders);
-            }
-        }
-    } catch (e) {
-        console.error('Failed to load expanded folders from localStorage', e);
-        // Reset to default if storage is corrupted
-        localStorage.removeItem(STORAGE_KEY);
-    }
+    initExpandedFolders();
 
     const unsubscribeUpdateName = graphEvents.on('update-name', async ({ graphId, name }) => {
         const graphToUpdate = graphs.value.find((g) => g.id === graphId);
@@ -609,7 +133,8 @@ onMounted(async () => {
         document.removeEventListener('keydown', handleKeyDown);
     });
 
-    nextTick(() => fetchData());
+    await fetchData();
+    initActiveWorkspace();
     document.addEventListener('keydown', handleKeyDown);
 });
 </script>
@@ -672,7 +197,7 @@ onMounted(async () => {
             <button
                 v-if="workspaces.length > 1 && activeWorkspaceId !== workspaces[0].id"
                 class="text-stone-gray/50 hover:text-stone-gray mr-2 hover:cursor-pointer"
-                title="Create new workspace"
+                title="Delete workspace"
                 @click="handleDeleteWorkspace()"
             >
                 <UiIcon name="MaterialSymbolsDeleteRounded" class="h-3 w-3" />
diff --git a/ui/app/composables/sidebar/useSidebarActions.ts b/ui/app/composables/sidebar/useSidebarActions.ts
new file mode 100644
index 00000000..b89cbcb2
--- /dev/null
+++ b/ui/app/composables/sidebar/useSidebarActions.ts
@@ -0,0 +1,307 @@
+import type { Graph, Folder, Workspace } from '@/types/graph';
+import { useDebounceFn } from '@vueuse/core';
+import { PLAN_LIMITS } from '@/constants/limits';
+import type { User } from '@/types/user';
+
+export const useSidebarActions = (
+    graphs: Ref<Graph[]>,
+    folders: Ref<Folder[]>,
+    activeWorkspace: Ref<Workspace | undefined>,
+    expandedFolders: Ref<Set<string>>,
+    fetchData: () => Promise<void>,
+) => {
+    const {
+        createGraph,
+        createHistoryFolder,
+        updateGraphName,
+        updateHistoryFolder,
+        moveGraph,
+        deleteHistoryFolder,
+        togglePin,
+        importGraph,
+        exportGraph,
+    } = useAPI();
+
+    const { user } = useUserSession();
+    const { error, success } = useToast();
+    const chatStore = useChatStore();
+    const globalSettingsStore = useSettingsStore();
+    const streamStore = useStreamStore();
+    const graphEvents = useGraphEvents();
+    const { upcomingModelData, lastOpenedChatId, openChatId } = storeToRefs(chatStore);
+    const { modelsSettings } = storeToRefs(globalSettingsStore);
+    const { resetChatState } = chatStore;
+    const { regenerateTitle } = streamStore;
+
+    // --- Local State for Editing ---
+    const editingId = ref<string | null>(null);
+    const editInputValue = ref<string>('');
+    const inputRefs = ref(new Map<string, HTMLInputElement>());
+
+    // --- Helpers ---
+    const isLimitReached = computed(() => {
+        if ((user.value as User)?.plan_type !== 'free') return false;
+        const nonTemporaryGraphs = graphs.value.filter((g) => !g.temporary);
+        return nonTemporaryGraphs.length >= PLAN_LIMITS.FREE.MAX_GRAPHS;
+    });
+
+    const navigateToGraph = (id: string, temporary: boolean) => {
+        if (id === editingId.value) return;
+        resetChatState();
+        lastOpenedChatId.value = null;
+        openChatId.value = null;
+        navigateTo(`/graph/${id}?temporary=${temporary}`);
+    };
+
+    // --- Actions ---
+    const createGraphHandler = async () => {
+        if (isLimitReached.value) {
+            error('You have reached the maximum number of canvases for the Free plan.', {
+                title: 'Limit Reached',
+            });
+            return;
+        }
+
+        try {
+            const wsId = activeWorkspace.value?.id;
+            const newGraph = await createGraph(false, wsId);
+            if (newGraph) {
+                graphs.value.unshift(newGraph);
+                upcomingModelData.value.data.model = modelsSettings.value.defaultModel;
+                navigateToGraph(newGraph.id, false);
+            }
+        } catch (err: unknown) {
+            console.error('Failed to create graph:', err);
+            const detail =
+                (err as { data?: { detail?: string } })?.data?.detail ||
+                (err as { message?: string })?.message ||
+                '';
+            if (detail === 'FREE_TIER_CANVAS_LIMIT_REACHED') {
+                error('You have reached the maximum number of canvases for the Free plan.', {
+                    title: 'Limit Reached',
+                });
+            } else {
+                error('Failed to create new canvas. Please try again.', {
+                    title: 'Graph Creation Error',
+                });
+            }
+        }
+    };
+
+    const createTemporaryGraphHandler = async () => {
+        try {
+            const wsId = activeWorkspace.value?.id;
+            const newGraph = await createGraph(true, wsId);
+            if (newGraph) {
+                upcomingModelData.value.data.model = modelsSettings.value.defaultModel;
+                navigateToGraph(newGraph.id, true);
+            }
+        } catch (err) {
+            console.error('Failed to create temporary graph:', err);
+            error('Failed to create new temporary canvas. Please try again.', {
+                title: 'Temporary Graph Creation Error',
+            });
+        }
+    };
+
+    const createFolderHandler = async () => {
+        try {
+            const wsId = activeWorkspace.value?.id;
+            const newFolder = await createHistoryFolder('New Folder', wsId);
+            folders.value.push(newFolder);
+            expandedFolders.value.add(newFolder.id);
+            handleStartRename(newFolder.id, newFolder.name);
+        } catch (err) {
+            console.error('Failed to create folder:', err);
+            error('Failed to create new folder. Please try again.', {
+                title: 'Folder Creation Error',
+            });
+        }
+    };
+
+    const handleStartRename = async (id: string, currentName: string) => {
+        editingId.value = id;
+        editInputValue.value = currentName;
+        await nextTick();
+        const input = inputRefs.value.get(id);
+        if (input) {
+            input.focus();
+            input.select();
+        }
+    };
+
+    const confirmRename = async () => {
+        if (!editingId.value) return;
+        const id = editingId.value;
+        const newName = editInputValue.value.trim();
+        editingId.value = null;
+
+        // Check if it's a folder
+        const folderIndex = folders.value.findIndex((f) => f.id === id);
+        if (folderIndex !== -1) {
+            if (!newName || newName === folders.value[folderIndex].name) return;
+            const oldName = folders.value[folderIndex].name;
+            folders.value[folderIndex].name = newName;
+            try {
+                await updateHistoryFolder(id, newName, undefined);
+            } catch {
+                folders.value[folderIndex].name = oldName;
+                error('Failed to rename folder');
+            }
+            return;
+        }
+
+        // Check if it's a graph
+        const graphIndex = graphs.value.findIndex((g) => g.id === id);
+        if (graphIndex !== -1) {
+            if (!newName || newName === graphs.value[graphIndex].name) return;
+            const oldName = graphs.value[graphIndex].name;
+            graphs.value[graphIndex].name = newName;
+            try {
+                await updateGraphName(id, newName);
+            } catch (err) {
+                graphs.value[graphIndex].name = oldName;
+                console.error('Error updating graph name:', err);
+                error('Failed to update graph name. Please try again.', {
+                    title: 'Graph Rename Error',
+                });
+            }
+        }
+    };
+
+    const cancelRename = () => {
+        editingId.value = null;
+        editInputValue.value = '';
+    };
+
+    const handleMoveGraph = async (
+        graphId: string,
+        folderId: string | null,
+        workspaceId: string | null = null,
+    ) => {
+        const graph = graphs.value.find((g) => g.id === graphId);
+        if (!graph) return;
+
+        const oldFolderId = graph.folder_id;
+        const oldWorkspaceId = graph.workspace_id;
+
+        if (folderId) {
+            graph.folder_id = folderId;
+            const targetFolder = folders.value.find((f) => f.id === folderId);
+            if (targetFolder) {
+                graph.workspace_id = targetFolder.workspace_id;
+            }
+        } else if (workspaceId) {
+            graph.folder_id = null;
+            graph.workspace_id = workspaceId;
+        } else {
+            graph.folder_id = null;
+        }
+
+        try {
+            await moveGraph(graphId, folderId, workspaceId);
+            if (workspaceId) {
+                await fetchData();
+            }
+        } catch {
+            graph.folder_id = oldFolderId;
+            graph.workspace_id = oldWorkspaceId;
+            error('Failed to move graph.');
+        }
+    };
+
+    const handleDeleteFolder = async (folderId: string) => {
+        if (!confirm('Delete this folder? Graphs inside will be moved to the root list.')) return;
+        try {
+            await deleteHistoryFolder(folderId);
+            folders.value = folders.value.filter((f) => f.id !== folderId);
+            graphs.value.forEach((g) => {
+                if (g.folder_id === folderId) g.folder_id = null;
+            });
+        } catch {
+            error('Failed to delete folder.');
+        }
+    };
+
+    const debouncedUpdateFolder = useDebounceFn(async (folderId: string, color: string) => {
+        try {
+            await updateHistoryFolder(folderId, undefined, color);
+        } catch (err) {
+            console.error('Error updating folder color:', err);
+            error('Failed to update folder color.');
+        }
+    }, 500);
+
+    const handleUpdateFolderColor = (folderId: string, color: string) => {
+        const folder = folders.value.find((f) => f.id === folderId);
+        if (folder) {
+            folder.color = color;
+        }
+        debouncedUpdateFolder(folderId, color);
+    };
+
+    const handlePin = (graphId: string) => {
+        const graph = graphs.value.find((g) => g.id === graphId);
+        if (graph) {
+            togglePin(graphId, !graph.pinned).catch((err) => {
+                console.error('Error toggling pin status:', err);
+                error('Failed to update pin status.', { title: 'Pin Toggle Error' });
+                return;
+            });
+            graph.pinned = !graph.pinned;
+        }
+    };
+
+    const handleRegenerateTitle = (graphId: string, strategy: 'first' | 'all') => {
+        graphEvents.emit('update-name', {
+            graphId: graphId,
+            name: '...',
+        });
+        regenerateTitle(graphId, strategy);
+    };
+
+    const handleImportGraph = async (files: FileList) => {
+        if (!files || files.length === 0) return;
+        try {
+            const fileData = await files[0].text();
+            const importedGraph = await importGraph(fileData);
+            if (importedGraph) {
+                await fetchData();
+                await nextTick();
+                success('Graph imported successfully!', { title: 'Graph Import' });
+                navigateToGraph(importedGraph.id, false);
+            } else {
+                console.warn('Import successful but no graph returned from API');
+            }
+        } catch (err) {
+            console.error('Error importing graph:', err);
+            error('Failed to import graph. Please ensure the file is valid.', {
+                title: 'Graph Import Error',
+            });
+        }
+    };
+
+    const setInputRef = (id: string, el: unknown) => {
+        if (el) inputRefs.value.set(id, el as HTMLInputElement);
+    };
+
+    return {
+        editingId,
+        editInputValue,
+        createGraphHandler,
+        createTemporaryGraphHandler,
+        createFolderHandler,
+        handleStartRename,
+        confirmRename,
+        cancelRename,
+        handleMoveGraph,
+        handleDeleteFolder,
+        handleUpdateFolderColor,
+        handlePin,
+        handleRegenerateTitle,
+        handleImportGraph,
+        setInputRef,
+        navigateToGraph,
+        exportGraph,
+    };
+};
diff --git a/ui/app/composables/sidebar/useSidebarData.ts b/ui/app/composables/sidebar/useSidebarData.ts
new file mode 100644
index 00000000..c7705a6c
--- /dev/null
+++ b/ui/app/composables/sidebar/useSidebarData.ts
@@ -0,0 +1,124 @@
+import type { Graph, Folder, Workspace } from '@/types/graph';
+
+export const useSidebarData = () => {
+    const { getGraphs, getHistoryFolders, getWorkspaces } = useAPI();
+    const { error } = useToast();
+
+    // --- State ---
+    const graphs = ref<Graph[]>([]);
+    const folders = ref<Folder[]>([]);
+    const workspaces = ref<Workspace[]>([]);
+    const searchQuery = ref('');
+    const expandedFolders = ref<Set<string>>(new Set());
+
+    // --- Local Storage Keys ---
+    const STORAGE_KEY = 'meridian_expanded_folders';
+
+    // --- Actions ---
+    const fetchData = async () => {
+        try {
+            const [graphsData, foldersData, workspacesData] = await Promise.all([
+                getGraphs(),
+                getHistoryFolders(),
+                getWorkspaces(),
+            ]);
+            graphs.value = graphsData;
+            folders.value = foldersData;
+            workspaces.value = workspacesData;
+        } catch (err: unknown) {
+            console.error('Error fetching data:', err);
+            error('Failed to load history.', { title: 'Load Error' });
+        }
+    };
+
+    const toggleFolder = (folderId: string) => {
+        if (expandedFolders.value.has(folderId)) {
+            expandedFolders.value.delete(folderId);
+        } else {
+            expandedFolders.value.add(folderId);
+        }
+    };
+
+    // --- Computed ---
+    const searchResults = computed(() => {
+        if (!searchQuery.value) return [];
+        return graphs.value
+            .filter((graph) => graph.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+            .sort((a, b) => Number(b.pinned) - Number(a.pinned));
+    });
+
+    const getOrganizedData = (activeWorkspaceId: string | null) => {
+        if (searchQuery.value) return null;
+        if (!activeWorkspaceId) return null;
+
+        const wsFolders = folders.value.filter((f) => f.workspace_id === activeWorkspaceId);
+        const wsGraphs = graphs.value.filter((g) => g.workspace_id === activeWorkspaceId);
+
+        const pinned = wsGraphs.filter((g) => g.pinned);
+        const unpinned = wsGraphs.filter((g) => !g.pinned);
+
+        const folderMap = wsFolders
+            .map((folder) => ({
+                ...folder,
+                graphs: graphs.value
+                    .filter((g) => g.folder_id === folder.id)
+                    .sort(
+                        (a, b) =>
+                            new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime(),
+                    ),
+            }))
+            .sort((a, b) => a.name.localeCompare(b.name));
+
+        const loose = unpinned
+            .filter((g) => !g.folder_id)
+            .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
+
+        return {
+            pinned,
+            folders: folderMap,
+            loose,
+        };
+    };
+
+    // --- Watchers ---
+    watch(
+        expandedFolders,
+        (newFolders) => {
+            try {
+                localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(newFolders)));
+            } catch (e) {
+                console.error('Failed to save expanded folders to localStorage', e);
+            }
+        },
+        { deep: true },
+    );
+
+    // --- Init ---
+    const initExpandedFolders = () => {
+        try {
+            const storedFolders = localStorage.getItem(STORAGE_KEY);
+            if (storedFolders) {
+                const parsedFolders = JSON.parse(storedFolders);
+                if (Array.isArray(parsedFolders)) {
+                    expandedFolders.value = new Set(parsedFolders);
+                }
+            }
+        } catch (e) {
+            console.error('Failed to load expanded folders from localStorage', e);
+            localStorage.removeItem(STORAGE_KEY);
+        }
+    };
+
+    return {
+        graphs,
+        folders,
+        workspaces,
+        searchQuery,
+        searchResults,
+        expandedFolders,
+        fetchData,
+        toggleFolder,
+        getOrganizedData,
+        initExpandedFolders,
+    };
+};
diff --git a/ui/app/composables/sidebar/useSidebarWorkspaces.ts b/ui/app/composables/sidebar/useSidebarWorkspaces.ts
new file mode 100644
index 00000000..999aaa2c
--- /dev/null
+++ b/ui/app/composables/sidebar/useSidebarWorkspaces.ts
@@ -0,0 +1,165 @@
+import type { Workspace, Graph } from '@/types/graph';
+import { useThrottleFn } from '@vueuse/core';
+
+export const useSidebarWorkspaces = (workspaces: Ref<Workspace[]>, graphs: Ref<Graph[]>) => {
+    const { createWorkspace, updateWorkspace, deleteWorkspace } = useAPI();
+    const { error } = useToast();
+
+    // --- State ---
+    const activeWorkspaceId = ref<string | null>(null);
+    const isEditingWorkspace = ref(false);
+    const workspaceNameInput = ref('');
+    const workspaceInputRef = ref<HTMLInputElement | null>(null);
+    const WORKSPACE_STORAGE_KEY = 'meridian_active_workspace';
+
+    // --- Computed ---
+    const activeWorkspace = computed(() =>
+        workspaces.value.find((w) => w.id === activeWorkspaceId.value),
+    );
+
+    // --- Actions ---
+    const initActiveWorkspace = () => {
+        if (workspaces.value.length > 0) {
+            const storedId = localStorage.getItem(WORKSPACE_STORAGE_KEY);
+            const exists = workspaces.value.find((w) => w.id === storedId);
+
+            if (exists) {
+                activeWorkspaceId.value = exists.id;
+            } else if (
+                !activeWorkspaceId.value ||
+                !workspaces.value.find((w) => w.id === activeWorkspaceId.value)
+            ) {
+                activeWorkspaceId.value = workspaces.value[0].id;
+            }
+        }
+    };
+
+    const handleCreateWorkspace = async () => {
+        try {
+            const newWs = await createWorkspace('New Workspace');
+            workspaces.value.push(newWs);
+            activeWorkspaceId.value = newWs.id;
+            await startEditingWorkspace();
+        } catch {
+            error('Failed to create workspace.');
+        }
+    };
+
+    const startEditingWorkspace = async () => {
+        if (!activeWorkspace.value) return;
+        workspaceNameInput.value = activeWorkspace.value.name;
+        isEditingWorkspace.value = true;
+        await nextTick();
+        workspaceInputRef.value?.focus();
+        workspaceInputRef.value?.select();
+    };
+
+    const saveWorkspaceName = async () => {
+        if (!isEditingWorkspace.value || !activeWorkspace.value) return;
+        const newName = workspaceNameInput.value.trim();
+        if (newName && newName !== activeWorkspace.value.name) {
+            try {
+                const updated = await updateWorkspace(activeWorkspace.value.id, newName);
+                activeWorkspace.value.name = updated.name;
+            } catch {
+                error('Failed to rename workspace.');
+            }
+        }
+        isEditingWorkspace.value = false;
+    };
+
+    const cancelWorkspaceEdit = () => {
+        isEditingWorkspace.value = false;
+    };
+
+    const handleDeleteWorkspace = async () => {
+        const ws = activeWorkspace.value;
+        if (!ws) return;
+        if (
+            !confirm(
+                `Delete workspace "${ws.name}"? Graphs inside will be moved to the "${workspaces.value[0].name}" workspace.`,
+            )
+        )
+            return;
+
+        if (workspaces.value.length <= 1) {
+            error('Cannot delete the only workspace.');
+            return;
+        }
+        if (ws.id === workspaces.value[0].id) {
+            error('Cannot delete the Default workspace.');
+            return;
+        }
+
+        try {
+            await deleteWorkspace(ws.id);
+            workspaces.value = workspaces.value.filter((w) => w.id !== ws.id);
+            graphs.value.forEach((g) => {
+                if (g.workspace_id === ws.id) g.workspace_id = workspaces.value[0].id;
+            });
+            activeWorkspaceId.value = workspaces.value[0].id;
+        } catch {
+            error('Failed to delete workspace.');
+        }
+    };
+
+    const switchWorkspace = (direction: 'next' | 'prev') => {
+        if (workspaces.value.length <= 1) return;
+
+        const currentIndex = workspaces.value.findIndex((w) => w.id === activeWorkspaceId.value);
+        if (currentIndex === -1) return;
+
+        let newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
+
+        // Clamp index
+        if (newIndex < 0) newIndex = 0;
+        if (newIndex >= workspaces.value.length) newIndex = workspaces.value.length - 1;
+
+        if (newIndex !== currentIndex) {
+            activeWorkspaceId.value = workspaces.value[newIndex].id;
+        }
+    };
+
+    const throttledSwitch = useThrottleFn((direction: 'next' | 'prev') => {
+        switchWorkspace(direction);
+    }, 300);
+
+    const handleWheel = (event: WheelEvent) => {
+        if (!event.shiftKey) return;
+        const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+        if (Math.abs(delta) > 10) {
+            throttledSwitch(delta > 0 ? 'next' : 'prev');
+        }
+    };
+
+    // --- Watchers ---
+    watch(
+        activeWorkspaceId,
+        (newId) => {
+            if (newId) {
+                try {
+                    localStorage.setItem(WORKSPACE_STORAGE_KEY, newId);
+                } catch (e) {
+                    console.error('Failed to save active workspace to localStorage', e);
+                }
+            }
+        },
+        { immediate: false },
+    );
+
+    return {
+        activeWorkspaceId,
+        activeWorkspace,
+        isEditingWorkspace,
+        workspaceNameInput,
+        workspaceInputRef,
+        initActiveWorkspace,
+        handleCreateWorkspace,
+        startEditingWorkspace,
+        saveWorkspaceName,
+        cancelWorkspaceEdit,
+        handleDeleteWorkspace,
+        switchWorkspace,
+        handleWheel,
+    };
+};

From 31e680aa9adfa3d481d7d607f190914257637ff1 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 19:43:25 -0500
Subject: [PATCH 07/30] feat: update sidebar action labels and enhance submenu
 styling

---
 .../components/ui/sidebar-history/actions.vue |  6 +-
 .../components/ui/sidebar-history/submenu.vue | 92 +++++++++++--------
 2 files changed, 56 insertions(+), 42 deletions(-)

diff --git a/ui/app/components/ui/sidebar-history/actions.vue b/ui/app/components/ui/sidebar-history/actions.vue
index 1c705d95..e18071ed 100644
--- a/ui/app/components/ui/sidebar-history/actions.vue
+++ b/ui/app/components/ui/sidebar-history/actions.vue
@@ -33,7 +33,7 @@ const moveItems = computed(() => {
     // Option to remove from folder
     if (props.graph.folder_id) {
         items.push({
-            label: 'Remove from Folder',
+            label: 'Remove',
             action: () => emit('move', props.graph.id, null, null),
             icon: 'MdiFolderRemoveOutline',
         });
@@ -44,6 +44,7 @@ const moveItems = computed(() => {
         items.push({
             label: 'Folders',
             isHeader: true,
+            icon: 'MdiFolderOutline',
         });
         props.folders.forEach((folder) => {
             if (props.graph.folder_id !== folder.id) {
@@ -59,7 +60,7 @@ const moveItems = computed(() => {
     if (props.workspaces && props.workspaces.length > 1) {
         // Divider
         if (items.length > 0) {
-            items.push({ label: 'Workspaces', isHeader: true });
+            items.push({ label: 'Workspaces', isHeader: true, icon: 'MdiBriefcaseOutline' });
         }
 
         props.workspaces.forEach((ws) => {
@@ -67,7 +68,6 @@ const moveItems = computed(() => {
                 items.push({
                     label: ws.name,
                     action: () => emit('move', props.graph.id, null, ws.id),
-                    icon: 'MdiBriefcaseOutline',
                 });
             }
         });
diff --git a/ui/app/components/ui/sidebar-history/submenu.vue b/ui/app/components/ui/sidebar-history/submenu.vue
index ce6a5e6d..dffcd1d4 100644
--- a/ui/app/components/ui/sidebar-history/submenu.vue
+++ b/ui/app/components/ui/sidebar-history/submenu.vue
@@ -21,26 +21,42 @@ const executeAction = (action?: () => void) => {
 <template>
     <div class="relative w-full" @mouseenter="isOpen = true" @mouseleave="isOpen = false">
         <button
-            class="hover:bg-obsidian/25 dark:text-obsidian text-soft-silk flex w-full items-center
-                justify-between rounded-md py-2 pr-1 pl-4 text-sm font-bold transition-colors
-                duration-200 ease-in-out"
-            :class="{ 'bg-obsidian/25': isOpen }"
+            class="group flex w-full items-center justify-between rounded-md px-2 py-2 text-sm
+                font-bold transition-colors duration-200 ease-in-out"
+            :class="[
+                isOpen
+                    ? 'bg-obsidian/25 dark:text-obsidian text-soft-silk'
+                    : 'dark:text-obsidian text-soft-silk hover:bg-obsidian/25',
+            ]"
             @click.stop
         >
-            <div class="flex items-center">
-                <UiIcon :name="icon" class="dark:text-obsidian text-soft-silk mr-2 h-4 w-4" />
-                {{ title }}
+            <div class="flex items-center gap-2">
+                <UiIcon :name="icon" class="h-4 w-4 opacity-70" />
+                <span>{{ title }}</span>
             </div>
-            <UiIcon name="FlowbiteChevronDownOutline" class="h-4 w-4 -rotate-90" />
+            <UiIcon
+                name="FlowbiteChevronDownOutline"
+                class="h-4 w-4 -rotate-90 opacity-50 transition-transform duration-200"
+                :class="{ '-rotate-180': isOpen }"
+            />
         </button>
 
+        <div v-if="isOpen">
+            <!-- Hover Bridge -->
+            <div
+                class="absolute top-10 -left-4 z-40 h-10 w-20"
+                style="clip-path: polygon(0 0, 100% 0, 0 100%)"
+            ></div>
+            <div class="absolute top-0 -left-4 z-40 h-10 w-20"></div>
+        </div>
+
         <transition
             enter-active-class="transition ease-out duration-100"
-            enter-from-class="transform opacity-0 translate-x-2"
+            enter-from-class="transform opacity-0 -translate-x-1"
             enter-to-class="transform opacity-100 translate-x-0"
             leave-active-class="transition ease-in duration-75"
             leave-from-class="transform opacity-100 translate-x-0"
-            leave-to-class="transform opacity-0 translate-x-2"
+            leave-to-class="transform opacity-0 -translate-x-1"
         >
             <div
                 v-show="isOpen"
@@ -49,44 +65,42 @@ const executeAction = (action?: () => void) => {
                     origin-top-right overflow-y-auto rounded-md p-1 shadow-lg ring-2
                     backdrop-blur-3xl focus:outline-none"
             >
-                <!-- Hover Bridge -->
-                <div
-                    class="absolute top-10 -right-16 h-10 w-20"
-                    style="clip-path: polygon(0 0, 100% 0, 0 100%)"
-                ></div>
-                <div class="absolute top-0 -right-16 h-10 w-20"></div>
-
                 <template v-for="(item, index) in items" :key="index">
                     <!-- Header Item -->
-                    <HeadlessMenuItem v-if="item.isHeader">
+                    <div v-if="item.isHeader" class="px-2 pt-2 pb-1">
                         <div
-                            class="text-obsidian mt-2 mb-1 px-4 text-[10px] font-bold tracking-wider
-                                uppercase"
-                        >
-                            {{ item.label }}
-                        </div>
-                    </HeadlessMenuItem>
-
-                    <!-- Action Item -->
-                    <HeadlessMenuItem v-else>
-                        <button
-                            class="hover:bg-obsidian/25 dark:text-obsidian text-soft-silk flex
-                                w-full items-center rounded-md px-4 py-2 text-sm font-bold
-                                transition-colors duration-200 ease-in-out"
-                            :class="item.class"
-                            @click.stop="executeAction(item.action)"
+                            class="dark:text-obsidian/50 text-soft-silk/50 flex items-center gap-1.5
+                                text-[10px] font-bold tracking-wider uppercase"
                         >
                             <UiIcon
                                 v-if="item.icon"
                                 :name="item.icon"
-                                class="h-4 w-4 -translate-x-2 opacity-70"
+                                class="h-4 w-4 shrink-0 opacity-70 transition-opacity
+                                    group-hover:opacity-100"
                             />
+                            {{ item.label }}
+                        </div>
+                    </div>
 
-                            <span class="truncate">
-                                {{ item.label }}
-                            </span>
-                        </button>
-                    </HeadlessMenuItem>
+                    <!-- Action Item -->
+                    <button
+                        v-else
+                        class="group flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm
+                            font-bold transition-colors duration-200 ease-in-out"
+                        :class="[
+                            item.class,
+                            'hover:bg-obsidian/25 dark:text-obsidian text-soft-silk',
+                        ]"
+                        @click.stop="executeAction(item.action)"
+                    >
+                        <UiIcon
+                            v-if="item.icon"
+                            :name="item.icon"
+                            class="h-4 w-4 shrink-0 opacity-70 transition-opacity
+                                group-hover:opacity-100"
+                        />
+                        <span class="truncate">{{ item.label }}</span>
+                    </button>
                 </template>
             </div>
         </transition>

From 020245fb00311cc203c1513d63083dcdf4e66fe7 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 19:54:45 -0500
Subject: [PATCH 08/30] feat: create default 'Home' workspace when a new user
 is added

---
 api/app/database/pg/user_ops/user_crud.py | 78 ++++++++++++++---------
 1 file changed, 47 insertions(+), 31 deletions(-)

diff --git a/api/app/database/pg/user_ops/user_crud.py b/api/app/database/pg/user_ops/user_crud.py
index 0683ba4d..c1ef4116 100644
--- a/api/app/database/pg/user_ops/user_crud.py
+++ b/api/app/database/pg/user_ops/user_crud.py
@@ -1,6 +1,6 @@
 import logging
 
-from database.pg.models import User
+from database.pg.models import User, Workspace
 from fastapi import HTTPException
 from models.auth import ProviderEnum
 from pydantic import BaseModel, Field
@@ -28,6 +28,7 @@ async def create_user_from_provider(
 ) -> User:
     """
     Create a new user in the database from OAuth provider data.
+    Automatically creates a default 'Home' workspace.
 
     Args:
         pg_engine (SQLAlchemyAsyncEngine): The SQLAlchemy async engine instance.
@@ -58,8 +59,15 @@ async def create_user_from_provider(
                 oauth_id=str(payload.oauth_id),
             )
             session.add(user)
-            await session.commit()
-            return user
+
+            await session.flush()
+
+            # Create Default Workspace
+            workspace = Workspace(user_id=user.id, name="Home", order_index=0)
+            session.add(workspace)
+
+        await session.refresh(user)
+        return user
 
 
 async def create_user_with_password(
@@ -70,6 +78,7 @@ async def create_user_with_password(
 ) -> User:
     """
     Create a new user with a username and password (userpass provider).
+    Automatically creates a default 'Home' workspace.
 
     Args:
         pg_engine (SQLAlchemyAsyncEngine): The SQLAlchemy async engine.
@@ -84,37 +93,44 @@ async def create_user_with_password(
         HTTPException: If username or email is already taken.
     """
     async with AsyncSession(pg_engine, expire_on_commit=False) as session:
-        async with session.begin():
-            # Check for existing username or email
-            stmt = select(User).where(
-                or_(
-                    and_(User.username == username, User.oauth_provider == "userpass"),
-                    User.email == email,
+        try:
+            async with session.begin():
+                # Check for existing username or email
+                stmt = select(User).where(
+                    or_(
+                        and_(User.username == username, User.oauth_provider == "userpass"),
+                        User.email == email,
+                    )
                 )
-            )
-            result = await session.exec(stmt)  # type: ignore
-            existing_user_row = result.first()
+                result = await session.exec(stmt)  # type: ignore
+                existing_user_row = result.first()
+
+                if existing_user_row:
+                    existing_user = existing_user_row[0]
+                    if existing_user.email == email:
+                        raise HTTPException(status_code=409, detail="Email is already registered.")
+                    raise HTTPException(status_code=409, detail="Username is already taken.")
+
+                user = User(
+                    username=username,
+                    email=email,
+                    password=hashed_password,
+                    oauth_provider="userpass",
+                    plan_type="free",
+                )
+                session.add(user)
 
-            if existing_user_row:
-                existing_user = existing_user_row[0]
-                if existing_user.email == email:
-                    raise HTTPException(status_code=409, detail="Email is already registered.")
-                raise HTTPException(status_code=409, detail="Username is already taken.")
+                await session.flush()
 
-            user = User(
-                username=username,
-                email=email,
-                password=hashed_password,
-                oauth_provider="userpass",
-                plan_type="free",
-            )
-            session.add(user)
-            try:
-                await session.commit()
-            except IntegrityError:
-                await session.rollback()
-                raise HTTPException(status_code=409, detail="Username or Email already exists.")
-            return user
+                # Create Default Workspace
+                workspace = Workspace(user_id=user.id, name="Home", order_index=0)
+                session.add(workspace)
+
+        except IntegrityError:
+            raise HTTPException(status_code=409, detail="Username or Email already exists.")
+
+        await session.refresh(user)
+        return user
 
 
 async def get_user_by_provider_id(

From dd4ebb58b18f0b6fdf5a11ac6f151bf2855728fc Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 19:55:13 -0500
Subject: [PATCH 09/30] feat: rename default workspace from 'Home' to 'Default'
 for new users

---
 api/app/database/pg/user_ops/user_crud.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/api/app/database/pg/user_ops/user_crud.py b/api/app/database/pg/user_ops/user_crud.py
index c1ef4116..21da70f7 100644
--- a/api/app/database/pg/user_ops/user_crud.py
+++ b/api/app/database/pg/user_ops/user_crud.py
@@ -63,7 +63,7 @@ async def create_user_from_provider(
             await session.flush()
 
             # Create Default Workspace
-            workspace = Workspace(user_id=user.id, name="Home", order_index=0)
+            workspace = Workspace(user_id=user.id, name="Default", order_index=0)
             session.add(workspace)
 
         await session.refresh(user)
@@ -123,7 +123,7 @@ async def create_user_with_password(
                 await session.flush()
 
                 # Create Default Workspace
-                workspace = Workspace(user_id=user.id, name="Home", order_index=0)
+                workspace = Workspace(user_id=user.id, name="Default", order_index=0)
                 session.add(workspace)
 
         except IntegrityError:

From d1d53e29c3f7675be803bf3c2e43cef0456e8798 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 19:59:14 -0500
Subject: [PATCH 10/30] feat: set default workspace for new graphs if not
 specified

---
 api/app/database/pg/graph_ops/graph_crud.py | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/api/app/database/pg/graph_ops/graph_crud.py b/api/app/database/pg/graph_ops/graph_crud.py
index ed79d2f8..12e835f8 100644
--- a/api/app/database/pg/graph_ops/graph_crud.py
+++ b/api/app/database/pg/graph_ops/graph_crud.py
@@ -245,11 +245,26 @@ async def create_empty_graph(
 
     async with AsyncSession(engine) as session:
         async with session.begin():
+            target_workspace_id = None
+            if workspace_id:
+                target_workspace_id = uuid.UUID(workspace_id)
+            else:
+                stmt = (
+                    select(Workspace)
+                    .where(and_(Workspace.user_id == user_id))
+                    .order_by(Workspace.created_at)  # type: ignore
+                    .limit(1)
+                )
+                result = await session.exec(stmt)  # type: ignore
+                default_ws = result.scalars().first()
+                if default_ws:
+                    target_workspace_id = default_ws.id
+
             graph = Graph(
                 name="New Canvas",
                 user_id=user_id,
                 temporary=temporary,
-                workspace_id=uuid.UUID(workspace_id) if workspace_id else None,
+                workspace_id=target_workspace_id,
                 custom_instructions=systemPromptSelected,
                 max_tokens=user_config.models.maxTokens,
                 temperature=user_config.models.temperature,

From e00cf0f483055277c318012cdd1ffd0f0d7eb3d2 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 19:59:28 -0500
Subject: [PATCH 11/30] feat: display message when no items are available in
 submenu

---
 ui/app/components/ui/sidebar-history/submenu.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/ui/app/components/ui/sidebar-history/submenu.vue b/ui/app/components/ui/sidebar-history/submenu.vue
index dffcd1d4..a3280104 100644
--- a/ui/app/components/ui/sidebar-history/submenu.vue
+++ b/ui/app/components/ui/sidebar-history/submenu.vue
@@ -102,6 +102,12 @@ const executeAction = (action?: () => void) => {
                         <span class="truncate">{{ item.label }}</span>
                     </button>
                 </template>
+
+                <div v-if="items.length === 0" class="p-2">
+                    <span class="dark:text-obsidian/50 text-soft-silk/50 text-sm font-bold">
+                        No items available.
+                    </span>
+                </div>
             </div>
         </transition>
     </div>

From e9333c2e8e2b2ad3bca53f7850161ca674c324dd Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 20:05:25 -0500
Subject: [PATCH 12/30] feat: enhance sidebar history overflow handling with
 mutation observer

---
 .../ui/sidebar-history/sidebarHistory.vue          | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/app/components/ui/sidebar-history/sidebarHistory.vue b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
index 7e254a3a..8e1ce9f9 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistory.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useResizeObserver } from '@vueuse/core';
+import { useResizeObserver, useMutationObserver } from '@vueuse/core';
 import UiSidebarHistorySearch from './sidebarHistorySearch.vue';
 
 // --- Stores ---
@@ -76,10 +76,18 @@ const organizedData = computed(() => getOrganizedData(activeWorkspaceId.value));
 // --- Resize Logic ---
 const checkOverflow = () => {
     if (historyListRef.value) {
-        isOverflowing.value = historyListRef.value.scrollHeight > historyListRef.value.clientHeight;
+        const { scrollHeight, clientHeight } = historyListRef.value;
+        isOverflowing.value = scrollHeight > clientHeight + 1;
     }
 };
+
 useResizeObserver(historyListRef, checkOverflow);
+useMutationObserver(historyListRef, checkOverflow, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['style', 'class'],
+});
 
 // --- Key Bindings ---
 const handleKeyDown = (event: KeyboardEvent) => {
@@ -98,8 +106,6 @@ const handleKeyDown = (event: KeyboardEvent) => {
 };
 
 // --- Watchers ---
-watch([graphs, folders], () => nextTick(checkOverflow), { deep: true });
-
 watch(
     [graphs, currentGraphId],
     ([newGraphs, newGraphId]) => {

From 3fa26c61b2216e1926bfb12520531db4a8a4d92e Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 20:12:09 -0500
Subject: [PATCH 13/30] feat: refactor sidebar history component for improved
 structure and scrolling behavior

---
 .../sidebarHistoryWorkspacePagination.vue     | 59 +++++++++++++------
 1 file changed, 42 insertions(+), 17 deletions(-)

diff --git a/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue b/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
index 6be82ebc..1567232b 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Workspace } from '@/types/graph';
 
-defineProps<{
+const props = defineProps<{
     workspaces: Workspace[];
     activeId: string | null;
 }>();
@@ -9,29 +9,54 @@ defineProps<{
 const emit = defineEmits<{
     (e: 'select', id: string): void;
 }>();
+
+const containerRef = ref<HTMLElement | null>(null);
+
+const scrollToActive = async () => {
+    await nextTick();
+    if (!containerRef.value || !props.activeId) return;
+
+    const activeEl = containerRef.value.querySelector(`[data-id="${props.activeId}"]`);
+    if (activeEl) {
+        activeEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    }
+};
+
+watch(() => props.activeId, scrollToActive);
+onMounted(scrollToActive);
 </script>
 
 <template>
     <div
         v-if="workspaces.length > 1"
         class="absolute bottom-[4.2rem] left-0 z-10 flex h-8 w-full items-center justify-center
-            space-x-1 pb-2"
+            pb-2"
     >
-        <button
-            v-for="ws in workspaces"
-            :key="ws.id"
-            class="group relative flex h-6 w-6 items-center justify-center"
-            :title="ws.name"
-            @click="emit('select', ws.id)"
+        <div
+            ref="containerRef"
+            class="hide-scrollbar flex max-w-[80%] items-center space-x-1 overflow-x-auto px-2"
+            :class="[workspaces.length > 8 ? 'justify-start' : 'justify-center']"
         >
-            <div
-                class="transition-all duration-300 ease-in-out"
-                :class="[
-                    ws.id === activeId
-                        ? 'bg-ember-glow h-2 w-2 rounded-full'
-                        : 'bg-stone-gray/30 group-hover:bg-stone-gray/60 h-1.5 w-1.5 rounded-full',
-                ]"
-            />
-        </button>
+            <button
+                v-for="ws in workspaces"
+                :key="ws.id"
+                :data-id="ws.id"
+                class="group relative flex h-6 w-6 shrink-0 items-center justify-center"
+                :title="ws.name"
+                @click="emit('select', ws.id)"
+            >
+                <div
+                    class="transition-all duration-300 ease-in-out"
+                    :class="[
+                        ws.id === activeId
+                            ? 'bg-ember-glow h-2 w-2 rounded-full'
+                            : `bg-stone-gray/30 group-hover:bg-stone-gray/60 h-1.5 w-1.5
+                                rounded-full`,
+                    ]"
+                />
+            </button>
+        </div>
     </div>
 </template>
+
+<style scoped></style>

From 9caaa7d56eabfb8c5858405e58beab949ee58525 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Fri, 2 Jan 2026 20:16:21 -0500
Subject: [PATCH 14/30] feat: update getOrganizedData to accept graphs and
 folders as parameters for improved data handling

---
 .../components/ui/sidebar-history/sidebarHistory.vue |  4 +++-
 ui/app/composables/sidebar/useSidebarData.ts         | 12 ++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/ui/app/components/ui/sidebar-history/sidebarHistory.vue b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
index 8e1ce9f9..5a6813bf 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistory.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
@@ -71,7 +71,9 @@ const currentGraphId = computed(() => route.params.id as string | undefined);
 // Use existing graph deletion composable
 const { handleDeleteGraph } = useGraphDeletion(graphs, currentGraphId);
 
-const organizedData = computed(() => getOrganizedData(activeWorkspaceId.value));
+const organizedData = computed(() =>
+    getOrganizedData(activeWorkspaceId.value, graphs.value, folders.value),
+);
 
 // --- Resize Logic ---
 const checkOverflow = () => {
diff --git a/ui/app/composables/sidebar/useSidebarData.ts b/ui/app/composables/sidebar/useSidebarData.ts
index c7705a6c..b84b1d6f 100644
--- a/ui/app/composables/sidebar/useSidebarData.ts
+++ b/ui/app/composables/sidebar/useSidebarData.ts
@@ -47,12 +47,16 @@ export const useSidebarData = () => {
             .sort((a, b) => Number(b.pinned) - Number(a.pinned));
     });
 
-    const getOrganizedData = (activeWorkspaceId: string | null) => {
+    const getOrganizedData = (
+        activeWorkspaceId: string | null,
+        currentGraphs: Graph[],
+        currentFolders: Folder[],
+    ) => {
         if (searchQuery.value) return null;
         if (!activeWorkspaceId) return null;
 
-        const wsFolders = folders.value.filter((f) => f.workspace_id === activeWorkspaceId);
-        const wsGraphs = graphs.value.filter((g) => g.workspace_id === activeWorkspaceId);
+        const wsFolders = currentFolders.filter((f) => f.workspace_id === activeWorkspaceId);
+        const wsGraphs = currentGraphs.filter((g) => g.workspace_id === activeWorkspaceId);
 
         const pinned = wsGraphs.filter((g) => g.pinned);
         const unpinned = wsGraphs.filter((g) => !g.pinned);
@@ -60,7 +64,7 @@ export const useSidebarData = () => {
         const folderMap = wsFolders
             .map((folder) => ({
                 ...folder,
-                graphs: graphs.value
+                graphs: currentGraphs
                     .filter((g) => g.folder_id === folder.id)
                     .sort(
                         (a, b) =>

From 7552d6ac99d8044ff01ecbdf8cf7de11424094ea Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 09:25:35 -0500
Subject: [PATCH 15/30] feat: add functionality to move folders between
 workspaces and update contained graphs

---
 api/app/database/pg/graph_ops/graph_crud.py   | 29 +++++++++++++++++++
 api/app/routers/graph.py                      |  4 +++
 .../ui/sidebar-history/sidebarHistory.vue     |  2 ++
 .../sidebar-history/sidebarHistoryFolder.vue  | 29 ++++++++++++++++++-
 .../composables/sidebar/useSidebarActions.ts  | 29 +++++++++++++++++++
 ui/app/composables/useAPI.ts                  |  2 ++
 6 files changed, 94 insertions(+), 1 deletion(-)

diff --git a/api/app/database/pg/graph_ops/graph_crud.py b/api/app/database/pg/graph_ops/graph_crud.py
index 12e835f8..e47b5f77 100644
--- a/api/app/database/pg/graph_ops/graph_crud.py
+++ b/api/app/database/pg/graph_ops/graph_crud.py
@@ -112,6 +112,35 @@ async def update_folder_color(engine: SQLAlchemyAsyncEngine, folder_id: str, col
         return folder
 
 
+async def update_folder_workspace(
+    engine: SQLAlchemyAsyncEngine, folder_id: str, workspace_id: str
+) -> Folder:
+    """
+    Move a folder to a different workspace.
+    This also updates all graphs contained in this folder to the new workspace.
+    """
+    async with AsyncSession(engine) as session:
+        async with session.begin():
+            folder = await session.get(Folder, folder_id)
+            if not folder:
+                raise HTTPException(status_code=404, detail="Folder not found")
+
+            new_ws_uuid = uuid.UUID(workspace_id)
+            folder.workspace_id = new_ws_uuid
+            session.add(folder)
+
+            # Update contained graphs
+            stmt = (
+                update(Graph)
+                .where(and_(Graph.folder_id == folder_id))
+                .values(workspace_id=new_ws_uuid)
+            )
+            await session.exec(stmt)  # type: ignore
+
+        await session.refresh(folder)
+        return folder
+
+
 async def delete_folder(engine: SQLAlchemyAsyncEngine, folder_id: str) -> None:
     """Delete a folder. Graphs inside will have folder_id set to NULL due to ON DELETE SET NULL."""
     async with AsyncSession(engine) as session:
diff --git a/api/app/routers/graph.py b/api/app/routers/graph.py
index 0e5d796a..45c90d97 100644
--- a/api/app/routers/graph.py
+++ b/api/app/routers/graph.py
@@ -21,6 +21,7 @@
     persist_temporary_graph,
     update_folder_color,
     update_folder_name,
+    update_folder_workspace,
     update_workspace,
 )
 from database.pg.graph_ops.graph_node_crud import update_graph_with_nodes_and_edges
@@ -365,12 +366,15 @@ async def route_update_folder(
     folder_id: str,
     name: str | None = None,
     color: str | None = None,
+    workspace_id: str | None = None,
     user_id: str = Depends(get_current_user_id),
 ) -> Folder:
     if name is not None:
         return await update_folder_name(request.app.state.pg_engine, folder_id, name)
     if color is not None:
         return await update_folder_color(request.app.state.pg_engine, folder_id, color)
+    if workspace_id is not None:
+        return await update_folder_workspace(request.app.state.pg_engine, folder_id, workspace_id)
     raise HTTPException(status_code=400, detail="No valid update parameters provided")
 
 
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistory.vue b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
index 5a6813bf..0098be1c 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistory.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
@@ -47,6 +47,7 @@ const {
     confirmRename,
     cancelRename,
     handleMoveGraph,
+    handleMoveFolder,
     handleDeleteFolder,
     handleUpdateFolderColor,
     handlePin,
@@ -318,6 +319,7 @@ onMounted(async () => {
                     @download-graph="exportGraph"
                     @pin-graph="handlePin"
                     @move-graph="handleMoveGraph"
+                    @move-folder="handleMoveFolder"
                     @update-folder-color="handleUpdateFolderColor"
                     @regenerate-title="handleRegenerateTitle"
                 />
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue b/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue
index f5c54b1c..ec29755c 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue
@@ -46,6 +46,7 @@ const emit = defineEmits<{
         folderId: string,
         folderName: string,
     ): void;
+    (e: 'moveFolder', folderId: string, workspaceId: string): void;
 
     // Generic input/rename actions
     (e: 'confirmRename' | 'cancelRename'): void;
@@ -65,6 +66,24 @@ const color = ref(props.folder.color || 'rgba(255, 255, 255, 0.2)');
 // --- Computed ---
 const isEditing = computed(() => props.folder.id === props.editingId);
 
+const moveItems = computed(() => {
+    const items = [];
+
+    // Workspaces
+    if (props.workspaces && props.workspaces.length > 1) {
+        props.workspaces.forEach((ws) => {
+            if (props.folder.workspace_id !== ws.id) {
+                items.push({
+                    label: ws.name,
+                    action: () => emit('moveFolder', props.folder.id, ws.id),
+                });
+            }
+        });
+    }
+
+    return items;
+});
+
 // --- Handlers ---
 const onInput = (event: Event) => {
     emit('update:editInputValue', (event.target as HTMLInputElement).value);
@@ -165,10 +184,18 @@ watch(
                 >
                     <HeadlessMenuItems
                         class="dark:bg-stone-gray bg-anthracite dark:ring-anthracite/50
-                            ring-stone-gray/10 absolute right-0 z-30 mt-2 w-60 origin-top-right
+                            ring-stone-gray/10 absolute right-0 z-30 mt-2 w-48 origin-top-right
                             rounded-md p-1 shadow-lg ring-2 backdrop-blur-3xl focus:outline-none"
                         @click.stop
                     >
+                        <!-- Move to Workspace Submenu -->
+                        <UiSidebarHistorySubmenu
+                            v-if="moveItems.length > 0"
+                            title="Move to ..."
+                            icon="MdiBriefcaseOutline"
+                            :items="moveItems"
+                        />
+
                         <!-- Rename -->
                         <HeadlessMenuItem v-slot="{ active }">
                             <button
diff --git a/ui/app/composables/sidebar/useSidebarActions.ts b/ui/app/composables/sidebar/useSidebarActions.ts
index b89cbcb2..b408165a 100644
--- a/ui/app/composables/sidebar/useSidebarActions.ts
+++ b/ui/app/composables/sidebar/useSidebarActions.ts
@@ -210,6 +210,34 @@ export const useSidebarActions = (
         }
     };
 
+    const handleMoveFolder = async (folderId: string, workspaceId: string) => {
+        const folder = folders.value.find((f) => f.id === folderId);
+        if (!folder) return;
+
+        const oldWorkspaceId = folder.workspace_id;
+
+        // Optimistic update
+        folder.workspace_id = workspaceId;
+
+        // Update all children graphs
+        const childrenGraphs = graphs.value.filter((g) => g.folder_id === folderId);
+        childrenGraphs.forEach((g) => {
+            g.workspace_id = workspaceId;
+        });
+
+        try {
+            await updateHistoryFolder(folderId, undefined, undefined, workspaceId);
+        } catch (err) {
+            console.error('Failed to move folder:', err);
+            // Revert state on error
+            folder.workspace_id = oldWorkspaceId;
+            childrenGraphs.forEach((g) => {
+                g.workspace_id = oldWorkspaceId;
+            });
+            error('Failed to move folder.');
+        }
+    };
+
     const handleDeleteFolder = async (folderId: string) => {
         if (!confirm('Delete this folder? Graphs inside will be moved to the root list.')) return;
         try {
@@ -295,6 +323,7 @@ export const useSidebarActions = (
         confirmRename,
         cancelRename,
         handleMoveGraph,
+        handleMoveFolder,
         handleDeleteFolder,
         handleUpdateFolderColor,
         handlePin,
diff --git a/ui/app/composables/useAPI.ts b/ui/app/composables/useAPI.ts
index fd889244..74ee3fe6 100644
--- a/ui/app/composables/useAPI.ts
+++ b/ui/app/composables/useAPI.ts
@@ -639,10 +639,12 @@ export const useAPI = () => {
         id: string,
         name: string | undefined,
         color: string | undefined,
+        workspaceId: string | undefined = undefined,
     ) => {
         const queryParams = new URLSearchParams();
         if (name) queryParams.append('name', name);
         if (color) queryParams.append('color', color);
+        if (workspaceId) queryParams.append('workspace_id', workspaceId);
         return apiFetch<Folder>(`/api/folders/${id}?${queryParams.toString()}`, {
             method: 'PATCH',
         });

From 9bf2240596ac2df0223b58e8b48b2058cbe94d02 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 09:29:45 -0500
Subject: [PATCH 16/30] feat: sort folders and workspaces alphabetically in
 move items list

---
 ui/app/components/ui/sidebar-history/actions.vue         | 9 +++++++--
 .../ui/sidebar-history/sidebarHistoryFolder.vue          | 4 +++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/ui/app/components/ui/sidebar-history/actions.vue b/ui/app/components/ui/sidebar-history/actions.vue
index e18071ed..a05183fa 100644
--- a/ui/app/components/ui/sidebar-history/actions.vue
+++ b/ui/app/components/ui/sidebar-history/actions.vue
@@ -46,7 +46,10 @@ const moveItems = computed(() => {
             isHeader: true,
             icon: 'MdiFolderOutline',
         });
-        props.folders.forEach((folder) => {
+
+        const sortedFolders = [...props.folders].sort((a, b) => a.name.localeCompare(b.name));
+
+        sortedFolders.forEach((folder) => {
             if (props.graph.folder_id !== folder.id) {
                 items.push({
                     label: folder.name,
@@ -63,7 +66,9 @@ const moveItems = computed(() => {
             items.push({ label: 'Workspaces', isHeader: true, icon: 'MdiBriefcaseOutline' });
         }
 
-        props.workspaces.forEach((ws) => {
+        const sortedWorkspaces = [...props.workspaces].sort((a, b) => a.name.localeCompare(b.name));
+
+        sortedWorkspaces.forEach((ws) => {
             if (props.graph.workspace_id !== ws.id) {
                 items.push({
                     label: ws.name,
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue b/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue
index ec29755c..f9b59a0e 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistoryFolder.vue
@@ -71,7 +71,9 @@ const moveItems = computed(() => {
 
     // Workspaces
     if (props.workspaces && props.workspaces.length > 1) {
-        props.workspaces.forEach((ws) => {
+        const sortedWorkspaces = [...props.workspaces].sort((a, b) => a.name.localeCompare(b.name));
+
+        sortedWorkspaces.forEach((ws) => {
             if (props.folder.workspace_id !== ws.id) {
                 items.push({
                     label: ws.name,

From 0deeea06fbdfe6aa637ded8f784d52080872445d Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 09:34:15 -0500
Subject: [PATCH 17/30] feat: add search scope functionality to sidebar history
 for improved filtering

---
 .../ui/sidebar-history/sidebarHistory.vue     | 11 +++++
 .../sidebar-history/sidebarHistorySearch.vue  | 44 ++++++++++++++++---
 ui/app/composables/sidebar/useSidebarData.ts  | 16 ++++++-
 3 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/ui/app/components/ui/sidebar-history/sidebarHistory.vue b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
index 0098be1c..1e166b74 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistory.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
@@ -14,6 +14,8 @@ const {
     folders,
     workspaces,
     searchQuery,
+    searchScope,
+    searchWorkspaceId,
     searchResults,
     expandedFolders,
     fetchData,
@@ -122,6 +124,14 @@ watch(
     { deep: true },
 );
 
+watch(
+    activeWorkspaceId,
+    (newId) => {
+        searchWorkspaceId.value = newId;
+    },
+    { immediate: true },
+);
+
 // --- Lifecycle ---
 onMounted(async () => {
     isMac.value = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
@@ -173,6 +183,7 @@ onMounted(async () => {
         <UiSidebarHistorySearch
             ref="searchComponentRef"
             v-model:search-query="searchQuery"
+            v-model:search-scope="searchScope"
             :is-mac="isMac"
             @import="handleImportGraph"
         />
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistorySearch.vue b/ui/app/components/ui/sidebar-history/sidebarHistorySearch.vue
index 7756d158..250515aa 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistorySearch.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistorySearch.vue
@@ -15,6 +15,10 @@ const emit = defineEmits<{
 
 // --- Local State ---
 const searchQuery = defineModel<string>('searchQuery', { required: true });
+const searchScope = defineModel<'workspace' | 'global'>('searchScope', {
+    required: true,
+    default: 'workspace',
+});
 const searchInputRef = ref<HTMLInputElement | null>(null);
 
 // --- Handlers ---
@@ -29,6 +33,10 @@ const handleFileChange = (event: Event) => {
     }
 };
 
+const toggleScope = () => {
+    searchScope.value = searchScope.value === 'workspace' ? 'global' : 'workspace';
+};
+
 // Expose focus method for parent component
 defineExpose({
     focus: () => searchInputRef.value?.focus(),
@@ -47,18 +55,40 @@ defineExpose({
                 ref="searchInputRef"
                 v-model="searchQuery"
                 type="text"
-                placeholder="Search canvas..."
+                :placeholder="
+                    searchScope === 'workspace' ? 'Search in workspace...' : 'Search all canvas...'
+                "
                 class="dark:bg-stone-gray/25 bg-obsidian/50 placeholder:text-stone-gray/50
-                    text-stone-gray block h-9 w-full rounded-xl border-transparent px-3 py-2 pr-16
+                    text-stone-gray block h-9 w-full rounded-xl border-transparent px-3 py-2 pr-24
                     pl-10 text-sm font-semibold focus:border-transparent focus:ring-0
                     focus:outline-none"
                 @keydown.space.shift.exact.prevent="handleShiftSpace"
             />
-            <div
-                class="text-stone-gray/30 absolute top-1/2 right-3 ml-auto -translate-y-1/2
-                    rounded-md border px-1 py-0.5 text-[10px] font-bold"
-            >
-                {{ isMac ? '⌘ + K' : 'CTRL + K' }}
+
+            <div class="absolute top-1/2 right-3 flex -translate-y-1/2 items-center gap-2">
+                <!-- Scope Toggle -->
+                <button
+                    class="hover:bg-stone-gray/20 text-stone-gray/50 hover:text-stone-gray flex
+                        items-center justify-center rounded-md p-0.5 transition-colors"
+                    :title="
+                        searchScope === 'workspace'
+                            ? 'Searching: Workspace Only'
+                            : 'Searching: All Canvas'
+                    "
+                    @click="toggleScope"
+                >
+                    <UiIcon
+                        v-if="searchScope === 'workspace'"
+                        name="MdiBriefcaseOutline"
+                        class="h-4 w-4"
+                    />
+                    <UiIcon v-else name="MdiWeb" class="h-4 w-4" />
+                </button>
+
+                <!-- Shortcut Hint -->
+                <div class="text-stone-gray/30 rounded-md border px-1 py-0.5 text-[10px] font-bold">
+                    {{ isMac ? '⌘ + K' : 'CTRL + K' }}
+                </div>
             </div>
         </div>
         <label
diff --git a/ui/app/composables/sidebar/useSidebarData.ts b/ui/app/composables/sidebar/useSidebarData.ts
index b84b1d6f..db58525f 100644
--- a/ui/app/composables/sidebar/useSidebarData.ts
+++ b/ui/app/composables/sidebar/useSidebarData.ts
@@ -9,6 +9,8 @@ export const useSidebarData = () => {
     const folders = ref<Folder[]>([]);
     const workspaces = ref<Workspace[]>([]);
     const searchQuery = ref('');
+    const searchScope = ref<'workspace' | 'global'>('workspace');
+    const searchWorkspaceId = ref<string | null>(null);
     const expandedFolders = ref<Set<string>>(new Set());
 
     // --- Local Storage Keys ---
@@ -42,7 +44,17 @@ export const useSidebarData = () => {
     // --- Computed ---
     const searchResults = computed(() => {
         if (!searchQuery.value) return [];
-        return graphs.value
+
+        let filteredGraphs = graphs.value;
+
+        // Apply Scope Filtering
+        if (searchScope.value === 'workspace' && searchWorkspaceId.value) {
+            filteredGraphs = filteredGraphs.filter(
+                (g) => g.workspace_id === searchWorkspaceId.value,
+            );
+        }
+
+        return filteredGraphs
             .filter((graph) => graph.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
             .sort((a, b) => Number(b.pinned) - Number(a.pinned));
     });
@@ -118,6 +130,8 @@ export const useSidebarData = () => {
         folders,
         workspaces,
         searchQuery,
+        searchScope,
+        searchWorkspaceId,
         searchResults,
         expandedFolders,
         fetchData,

From fc08e513917dc1006bb1796c2ad48031c71ad259 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 09:47:28 -0500
Subject: [PATCH 18/30] feat: add workspace support to recent canvas section in
 home page

---
 .../ui/home/recentCanvasSection.vue           | 103 ++++++++++++++++--
 ui/app/pages/index.vue                        |  13 ++-
 2 files changed, 101 insertions(+), 15 deletions(-)

diff --git a/ui/app/components/ui/home/recentCanvasSection.vue b/ui/app/components/ui/home/recentCanvasSection.vue
index 4c088fef..25b1042e 100644
--- a/ui/app/components/ui/home/recentCanvasSection.vue
+++ b/ui/app/components/ui/home/recentCanvasSection.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Graph, Folder } from '@/types/graph';
+import type { Graph, Folder, Workspace } from '@/types/graph';
 
 // --- Props ---
 const props = defineProps({
@@ -11,6 +11,10 @@ const props = defineProps({
         type: Array as PropType<Folder[]>,
         required: true,
     },
+    workspaces: {
+        type: Array as PropType<Workspace[]>,
+        default: () => [],
+    },
     isLoading: {
         type: Boolean,
         default: false,
@@ -25,6 +29,7 @@ const emit = defineEmits<{
 // --- Local State ---
 const searchQuery = ref('');
 const currentFolderId = ref<string | null>(null);
+const activeWorkspaceId = ref<string | null>(null);
 const searchInputRef = ref<HTMLInputElement | null>(null);
 const scrollContainer = ref<HTMLElement | null>(null);
 const isMac = ref(false);
@@ -35,17 +40,30 @@ const currentFolder = computed(() => {
     return props.folders.find((f) => f.id === currentFolderId.value);
 });
 
+const currentWorkspace = computed(() =>
+    props.workspaces.find((w) => w.id === activeWorkspaceId.value),
+);
+
 /**
  * Determines what items to display in the grid.
- * 1. If Searching: Show all matching graphs (flat list).
+ * 1. If Searching: Show all matching graphs (flat list) within current workspace.
  * 2. If Folder Open: Show graphs inside that folder.
- * 3. If Root: Show Pinned Graphs -> Folders -> Loose Graphs.
+ * 3. If Root: Show Pinned Graphs -> Folders -> Loose Graphs (filtered by workspace).
  */
 const displayedItems = computed(() => {
-    // 1. Search Mode (Global)
+    // If no workspace selected yet, return empty
+    if (!activeWorkspaceId.value) return [];
+
+    // Pre-filter by workspace
+    const workspaceGraphs = props.graphs.filter((g) => g.workspace_id === activeWorkspaceId.value);
+    const workspaceFolders = props.folders.filter(
+        (f) => f.workspace_id === activeWorkspaceId.value,
+    );
+
+    // 1. Search Mode
     if (searchQuery.value) {
         const query = searchQuery.value.toLowerCase();
-        const matches = props.graphs
+        const matches = workspaceGraphs
             .filter((g) => g.name.toLowerCase().includes(query))
             .sort((a, b) => Number(b.pinned) - Number(a.pinned)); // Pinned first
 
@@ -54,7 +72,11 @@ const displayedItems = computed(() => {
 
     // 2. Folder View
     if (currentFolderId.value) {
-        const folderGraphs = props.graphs
+        // Ensure folder belongs to current workspace
+        const folder = workspaceFolders.find((f) => f.id === currentFolderId.value);
+        if (!folder) return [];
+
+        const folderGraphs = workspaceGraphs
             .filter((g) => g.folder_id === currentFolderId.value)
             .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
 
@@ -62,17 +84,17 @@ const displayedItems = computed(() => {
     }
 
     // 3. Root View
-    const pinned = props.graphs.filter((g) => g.pinned).map((g) => ({ type: 'graph', data: g }));
+    const pinned = workspaceGraphs.filter((g) => g.pinned).map((g) => ({ type: 'graph', data: g }));
 
     // Folders need to know how many items they contain for the UI
-    const folderItems = props.folders
+    const folderItems = workspaceFolders
         .map((f) => {
-            const count = props.graphs.filter((g) => g.folder_id === f.id).length;
+            const count = workspaceGraphs.filter((g) => g.folder_id === f.id).length;
             return { type: 'folder', data: f, count };
         })
         .sort((a, b) => a.data.name.localeCompare(b.data.name));
 
-    const loose = props.graphs
+    const loose = workspaceGraphs
         .filter((g) => !g.pinned && !g.folder_id)
         .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
         .map((g) => ({ type: 'graph', data: g }));
@@ -102,6 +124,31 @@ const goBack = () => {
     searchQuery.value = '';
 };
 
+const setActiveWorkspace = (id: string) => {
+    activeWorkspaceId.value = id;
+    // Persist to local storage to sync with sidebar if needed
+    localStorage.setItem('meridian_active_workspace', id);
+};
+
+// --- Watchers ---
+watch(
+    () => props.workspaces,
+    (newVal) => {
+        if (newVal.length > 0 && !activeWorkspaceId.value) {
+            const stored = localStorage.getItem('meridian_active_workspace');
+            const exists = newVal.find((w) => w.id === stored);
+            activeWorkspaceId.value = exists ? exists.id : newVal[0].id;
+        }
+    },
+    { immediate: true },
+);
+
+// Reset folder view when workspace changes
+watch(activeWorkspaceId, () => {
+    currentFolderId.value = null;
+    searchQuery.value = '';
+});
+
 // --- Lifecycle ---
 onMounted(() => {
     isMac.value = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
@@ -123,6 +170,38 @@ defineExpose({
     <div class="flex h-full w-full flex-col items-center">
         <!-- Header Section -->
         <div class="relative mb-8 flex w-full items-center justify-center">
+            <!-- Workspace Pagination & Name (Top Left) - Only in Root View -->
+            <div
+                v-if="!currentFolderId && workspaces.length > 0"
+                class="absolute left-0 flex flex-col items-start gap-1.5"
+            >
+                <!-- Pagination Dots -->
+                <div v-if="workspaces.length > 1" class="flex items-center gap-1.5">
+                    <button
+                        v-for="ws in workspaces"
+                        :key="ws.id"
+                        class="group relative flex h-4 w-4 shrink-0 items-center justify-center"
+                        :title="ws.name"
+                        @click="setActiveWorkspace(ws.id)"
+                    >
+                        <div
+                            class="transition-all duration-300 ease-in-out"
+                            :class="[
+                                ws.id === activeWorkspaceId
+                                    ? 'bg-ember-glow h-2.5 w-2.5 rounded-full'
+                                    : `bg-stone-gray/30 group-hover:bg-stone-gray/60 h-2 w-2
+                                        rounded-full`,
+                            ]"
+                        />
+                    </button>
+                </div>
+
+                <!-- Workspace Name -->
+                <span class="text-stone-gray/50 pl-0.5 text-xs font-bold tracking-wider uppercase">
+                    {{ currentWorkspace?.name }}
+                </span>
+            </div>
+
             <!-- Back Button (only in folder view) -->
             <button
                 v-if="currentFolderId"
@@ -286,10 +365,10 @@ defineExpose({
             <span class="text-soft-silk/50">
                 {{
                     searchQuery
-                        ? 'No matching canvas found.'
+                        ? 'No matching canvas found in this workspace.'
                         : currentFolderId
                           ? 'This folder is empty.'
-                          : 'No recent canvas found. Create a new one!'
+                          : 'No recent canvas found in this workspace.'
                 }}
             </span>
         </div>
diff --git a/ui/app/pages/index.vue b/ui/app/pages/index.vue
index 7486a4bc..9d30d50c 100644
--- a/ui/app/pages/index.vue
+++ b/ui/app/pages/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { DEFAULT_NODE_ID } from '@/constants';
 import { NodeTypeEnum, MessageRoleEnum, MessageContentTypeEnum } from '@/types/enums';
-import type { Graph, Folder, MessageContent, BlockDefinition } from '@/types/graph';
+import type { Graph, Folder, Workspace, MessageContent, BlockDefinition } from '@/types/graph';
 import type { User } from '@/types/user';
 import type HomeRecentCanvasSection from '~/components/ui/home/recentCanvasSection.vue';
 import { PLAN_LIMITS } from '@/constants/limits';
@@ -28,6 +28,7 @@ const { resetChatState, addMessage } = chatStore;
 // --- Local State ---
 const graphs = ref<Graph[]>([]);
 const folders = ref<Folder[]>([]);
+const workspaces = ref<Workspace[]>([]);
 const isLoading = ref(true);
 const animWords = ref(Array(10).fill(false));
 const pageRef = ref<HTMLElement | null>(null);
@@ -49,7 +50,7 @@ mainContentOpacity.on('change', (v) => (mainContentStyle.opacity = v));
 
 // --- Composables ---
 const { fileToMessageContent } = useFiles();
-const { getGraphs, getHistoryFolders, createGraph } = useAPI();
+const { getGraphs, getHistoryFolders, getWorkspaces, createGraph } = useAPI();
 const { generateId } = useUniqueId();
 const { user, fetch: fetchUserSession } = useUserSession();
 const { error } = useToast();
@@ -85,9 +86,14 @@ const handleWheel = (event: WheelEvent) => {
 
 const fetchData = async () => {
     try {
-        const [graphsData, foldersData] = await Promise.all([getGraphs(), getHistoryFolders()]);
+        const [graphsData, foldersData, workspacesData] = await Promise.all([
+            getGraphs(),
+            getHistoryFolders(),
+            getWorkspaces(),
+        ]);
         graphs.value = graphsData;
         folders.value = foldersData;
+        workspaces.value = workspacesData;
     } catch (err) {
         console.error('Error fetching data:', err);
         error('Failed to load history. Please try again.', { title: 'Load Error' });
@@ -364,6 +370,7 @@ onBeforeUnmount(() => {
                 ref="recentCanvasComponentRef"
                 :graphs="graphs"
                 :folders="folders"
+                :workspaces="workspaces"
                 :is-loading="isLoading"
                 @delete="(id, name) => handleDeleteGraph(id, name, false)"
             />

From f492344d3d55c25e72a91ffb578f793fc42af7bf Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 09:49:37 -0500
Subject: [PATCH 19/30] feat: implement unified search bar component with
 workspace and global scope functionality

---
 .../ui/home/recentCanvasSection.vue           | 73 +++++++---------
 .../sidebar-history/sidebarHistorySearch.vue  | 64 +++-----------
 ui/app/components/ui/utils/searchBar.vue      | 84 +++++++++++++++++++
 3 files changed, 126 insertions(+), 95 deletions(-)
 create mode 100644 ui/app/components/ui/utils/searchBar.vue

diff --git a/ui/app/components/ui/home/recentCanvasSection.vue b/ui/app/components/ui/home/recentCanvasSection.vue
index 25b1042e..5a5eef15 100644
--- a/ui/app/components/ui/home/recentCanvasSection.vue
+++ b/ui/app/components/ui/home/recentCanvasSection.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Graph, Folder, Workspace } from '@/types/graph';
+import UiUtilsSearchBar from '~/components/ui/utils/searchBar.vue';
 
 // --- Props ---
 const props = defineProps({
@@ -28,9 +29,10 @@ const emit = defineEmits<{
 
 // --- Local State ---
 const searchQuery = ref('');
+const searchScope = ref<'workspace' | 'global'>('workspace');
 const currentFolderId = ref<string | null>(null);
 const activeWorkspaceId = ref<string | null>(null);
-const searchInputRef = ref<HTMLInputElement | null>(null);
+const searchBarRef = ref<InstanceType<typeof UiUtilsSearchBar> | null>(null);
 const scrollContainer = ref<HTMLElement | null>(null);
 const isMac = ref(false);
 
@@ -46,30 +48,37 @@ const currentWorkspace = computed(() =>
 
 /**
  * Determines what items to display in the grid.
- * 1. If Searching: Show all matching graphs (flat list) within current workspace.
- * 2. If Folder Open: Show graphs inside that folder.
- * 3. If Root: Show Pinned Graphs -> Folders -> Loose Graphs (filtered by workspace).
+ * 1. If Searching: Show all matching graphs (flat list) respecting scope.
+ * 2. If Folder Open: Show graphs inside that folder (workspace bound).
+ * 3. If Root: Show Pinned Graphs -> Folders -> Loose Graphs (workspace bound).
  */
 const displayedItems = computed(() => {
-    // If no workspace selected yet, return empty
-    if (!activeWorkspaceId.value) return [];
-
-    // Pre-filter by workspace
-    const workspaceGraphs = props.graphs.filter((g) => g.workspace_id === activeWorkspaceId.value);
-    const workspaceFolders = props.folders.filter(
-        (f) => f.workspace_id === activeWorkspaceId.value,
-    );
-
     // 1. Search Mode
     if (searchQuery.value) {
         const query = searchQuery.value.toLowerCase();
-        const matches = workspaceGraphs
+        let sourceGraphs = props.graphs;
+
+        // Apply Scope Filtering
+        if (searchScope.value === 'workspace' && activeWorkspaceId.value) {
+            sourceGraphs = sourceGraphs.filter((g) => g.workspace_id === activeWorkspaceId.value);
+        }
+
+        const matches = sourceGraphs
             .filter((g) => g.name.toLowerCase().includes(query))
             .sort((a, b) => Number(b.pinned) - Number(a.pinned)); // Pinned first
 
         return matches.map((g) => ({ type: 'graph', data: g }));
     }
 
+    // If no workspace selected yet (and not global searching), return empty
+    if (!activeWorkspaceId.value) return [];
+
+    // Pre-filter by workspace for standard view
+    const workspaceGraphs = props.graphs.filter((g) => g.workspace_id === activeWorkspaceId.value);
+    const workspaceFolders = props.folders.filter(
+        (f) => f.workspace_id === activeWorkspaceId.value,
+    );
+
     // 2. Folder View
     if (currentFolderId.value) {
         // Ensure folder belongs to current workspace
@@ -103,14 +112,10 @@ const displayedItems = computed(() => {
 });
 
 // --- Methods ---
-const handleShiftSpace = () => {
-    document.execCommand('insertText', false, ' ');
-};
-
 const handleKeyDown = (event: KeyboardEvent) => {
     if ((event.key === 'k' || event.key === 'K') && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
-        searchInputRef.value?.focus();
+        searchBarRef.value?.focus();
     }
 };
 
@@ -195,7 +200,6 @@ defineExpose({
                         />
                     </button>
                 </div>
-
                 <!-- Workspace Name -->
                 <span class="text-stone-gray/50 pl-0.5 text-xs font-bold tracking-wider uppercase">
                     {{ currentWorkspace?.name }}
@@ -224,28 +228,13 @@ defineExpose({
 
             <!-- Search Input -->
             <div v-if="!isLoading && graphs.length > 0" class="absolute right-0 w-72">
-                <UiIcon
-                    name="MdiMagnify"
-                    class="text-stone-gray/50 pointer-events-none absolute top-1/2 left-3 h-5 w-5
-                        -translate-y-1/2"
-                />
-                <input
-                    ref="searchInputRef"
-                    v-model="searchQuery"
-                    type="text"
+                <UiUtilsSearchBar
+                    ref="searchBarRef"
+                    v-model:search-query="searchQuery"
+                    v-model:search-scope="searchScope"
+                    :is-mac="isMac"
                     placeholder="Search canvas..."
-                    class="dark:bg-stone-gray/25 bg-obsidian/50 placeholder:text-stone-gray/50
-                        text-stone-gray block h-9 w-full rounded-xl border-transparent px-3 py-2
-                        pr-16 pl-10 text-sm font-semibold focus:border-transparent focus:ring-0
-                        focus:outline-none"
-                    @keydown.space.shift.exact.prevent="handleShiftSpace"
                 />
-                <div
-                    class="text-stone-gray/30 absolute top-1/2 right-3 ml-auto -translate-y-1/2
-                        rounded-md border px-1 py-0.5 text-[10px] font-bold"
-                >
-                    {{ isMac ? '⌘ + K' : 'CTRL + K' }}
-                </div>
             </div>
         </div>
 
@@ -365,7 +354,9 @@ defineExpose({
             <span class="text-soft-silk/50">
                 {{
                     searchQuery
-                        ? 'No matching canvas found in this workspace.'
+                        ? searchScope === 'workspace'
+                            ? 'No matching canvas found in this workspace.'
+                            : 'No matching canvas found.'
                         : currentFolderId
                           ? 'This folder is empty.'
                           : 'No recent canvas found in this workspace.'
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistorySearch.vue b/ui/app/components/ui/sidebar-history/sidebarHistorySearch.vue
index 250515aa..42f4769b 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistorySearch.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistorySearch.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import UiUtilsSearchBar from '~/components/ui/utils/searchBar.vue';
+
 // --- Props ---
 defineProps({
     isMac: {
@@ -19,78 +21,32 @@ const searchScope = defineModel<'workspace' | 'global'>('searchScope', {
     required: true,
     default: 'workspace',
 });
-const searchInputRef = ref<HTMLInputElement | null>(null);
+const searchBarRef = ref<InstanceType<typeof UiUtilsSearchBar> | null>(null);
 
 // --- Handlers ---
-const handleShiftSpace = () => document.execCommand('insertText', false, ' ');
-
 const handleFileChange = (event: Event) => {
     const target = event.target as HTMLInputElement;
     if (target.files && target.files.length > 0) {
         emit('import', target.files);
-
         target.value = '';
     }
 };
 
-const toggleScope = () => {
-    searchScope.value = searchScope.value === 'workspace' ? 'global' : 'workspace';
-};
-
 // Expose focus method for parent component
 defineExpose({
-    focus: () => searchInputRef.value?.focus(),
+    focus: () => searchBarRef.value?.focus(),
 });
 </script>
 
 <template>
     <div class="hide-close mt-2 flex items-center gap-2">
-        <div class="relative w-full">
-            <UiIcon
-                name="MdiMagnify"
-                class="text-stone-gray/50 pointer-events-none absolute top-1/2 left-3 h-5 w-5
-                    -translate-y-1/2"
-            />
-            <input
-                ref="searchInputRef"
-                v-model="searchQuery"
-                type="text"
-                :placeholder="
-                    searchScope === 'workspace' ? 'Search in workspace...' : 'Search all canvas...'
-                "
-                class="dark:bg-stone-gray/25 bg-obsidian/50 placeholder:text-stone-gray/50
-                    text-stone-gray block h-9 w-full rounded-xl border-transparent px-3 py-2 pr-24
-                    pl-10 text-sm font-semibold focus:border-transparent focus:ring-0
-                    focus:outline-none"
-                @keydown.space.shift.exact.prevent="handleShiftSpace"
-            />
-
-            <div class="absolute top-1/2 right-3 flex -translate-y-1/2 items-center gap-2">
-                <!-- Scope Toggle -->
-                <button
-                    class="hover:bg-stone-gray/20 text-stone-gray/50 hover:text-stone-gray flex
-                        items-center justify-center rounded-md p-0.5 transition-colors"
-                    :title="
-                        searchScope === 'workspace'
-                            ? 'Searching: Workspace Only'
-                            : 'Searching: All Canvas'
-                    "
-                    @click="toggleScope"
-                >
-                    <UiIcon
-                        v-if="searchScope === 'workspace'"
-                        name="MdiBriefcaseOutline"
-                        class="h-4 w-4"
-                    />
-                    <UiIcon v-else name="MdiWeb" class="h-4 w-4" />
-                </button>
+        <UiUtilsSearchBar
+            ref="searchBarRef"
+            v-model:search-query="searchQuery"
+            v-model:search-scope="searchScope"
+            :is-mac="isMac"
+        />
 
-                <!-- Shortcut Hint -->
-                <div class="text-stone-gray/30 rounded-md border px-1 py-0.5 text-[10px] font-bold">
-                    {{ isMac ? '⌘ + K' : 'CTRL + K' }}
-                </div>
-            </div>
-        </div>
         <label
             class="dark:bg-stone-gray/25 bg-obsidian/50 text-stone-gray font-outfit
                 dark:hover:bg-stone-gray/20 hover:bg-obsidian/75 flex h-9 w-14 shrink-0 items-center
diff --git a/ui/app/components/ui/utils/searchBar.vue b/ui/app/components/ui/utils/searchBar.vue
new file mode 100644
index 00000000..a71bea84
--- /dev/null
+++ b/ui/app/components/ui/utils/searchBar.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+// --- Props ---
+defineProps({
+    isMac: {
+        type: Boolean,
+        required: true,
+    },
+    placeholder: {
+        type: String,
+        default: undefined,
+    },
+});
+
+// --- Models ---
+const searchQuery = defineModel<string>('searchQuery', { required: true });
+const searchScope = defineModel<'workspace' | 'global'>('searchScope', {
+    required: true,
+    default: 'workspace',
+});
+
+// --- Local State ---
+const inputRef = ref<HTMLInputElement | null>(null);
+
+// --- Handlers ---
+const handleShiftSpace = () => document.execCommand('insertText', false, ' ');
+
+const toggleScope = () => {
+    searchScope.value = searchScope.value === 'workspace' ? 'global' : 'workspace';
+};
+
+// Expose focus method
+defineExpose({
+    focus: () => inputRef.value?.focus(),
+});
+</script>
+
+<template>
+    <div class="relative w-full">
+        <UiIcon
+            name="MdiMagnify"
+            class="text-stone-gray/50 pointer-events-none absolute top-1/2 left-3 h-5 w-5
+                -translate-y-1/2"
+        />
+        <input
+            ref="inputRef"
+            v-model="searchQuery"
+            type="text"
+            :placeholder="
+                placeholder ||
+                (searchScope === 'workspace' ? 'Search in workspace...' : 'Search all canvas...')
+            "
+            class="dark:bg-stone-gray/25 bg-obsidian/50 placeholder:text-stone-gray/50
+                text-stone-gray block h-9 w-full rounded-xl border-transparent px-3 py-2 pr-24 pl-10
+                text-sm font-semibold focus:border-transparent focus:ring-0 focus:outline-none"
+            @keydown.space.shift.exact.prevent="handleShiftSpace"
+        />
+
+        <div class="absolute top-1/2 right-3 flex -translate-y-1/2 items-center gap-2">
+            <!-- Scope Toggle -->
+            <button
+                class="hover:bg-stone-gray/20 text-stone-gray/50 hover:text-stone-gray flex
+                    items-center justify-center rounded-md p-0.5 transition-colors"
+                :title="
+                    searchScope === 'workspace'
+                        ? 'Searching: Workspace Only'
+                        : 'Searching: All Canvas'
+                "
+                @click="toggleScope"
+            >
+                <UiIcon
+                    v-if="searchScope === 'workspace'"
+                    name="MdiBriefcaseOutline"
+                    class="h-4 w-4"
+                />
+                <UiIcon v-else name="MdiWeb" class="h-4 w-4" />
+            </button>
+
+            <!-- Shortcut Hint -->
+            <div class="text-stone-gray/30 rounded-md border px-1 py-0.5 text-[10px] font-bold">
+                {{ isMac ? '⌘ + K' : 'CTRL + K' }}
+            </div>
+        </div>
+    </div>
+</template>

From 482784ec3b67448994f911080ac934e650dcecf1 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 09:55:34 -0500
Subject: [PATCH 20/30] feat: enhance workspace switching functionality with
 wheel event support

---
 .../ui/home/recentCanvasSection.vue           | 34 ++++++++-----------
 ui/app/pages/index.vue                        |  8 ++++-
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/ui/app/components/ui/home/recentCanvasSection.vue b/ui/app/components/ui/home/recentCanvasSection.vue
index 5a5eef15..d7e1e329 100644
--- a/ui/app/components/ui/home/recentCanvasSection.vue
+++ b/ui/app/components/ui/home/recentCanvasSection.vue
@@ -27,11 +27,18 @@ const emit = defineEmits<{
     (e: 'delete', id: string, name: string): void;
 }>();
 
+// --- Composables ---
+const {
+    activeWorkspaceId,
+    activeWorkspace,
+    handleWheel: handleWorkspaceWheel,
+    initActiveWorkspace,
+} = useSidebarWorkspaces(toRef(props, 'workspaces'), toRef(props, 'graphs'));
+
 // --- Local State ---
 const searchQuery = ref('');
 const searchScope = ref<'workspace' | 'global'>('workspace');
 const currentFolderId = ref<string | null>(null);
-const activeWorkspaceId = ref<string | null>(null);
 const searchBarRef = ref<InstanceType<typeof UiUtilsSearchBar> | null>(null);
 const scrollContainer = ref<HTMLElement | null>(null);
 const isMac = ref(false);
@@ -42,10 +49,6 @@ const currentFolder = computed(() => {
     return props.folders.find((f) => f.id === currentFolderId.value);
 });
 
-const currentWorkspace = computed(() =>
-    props.workspaces.find((w) => w.id === activeWorkspaceId.value),
-);
-
 /**
  * Determines what items to display in the grid.
  * 1. If Searching: Show all matching graphs (flat list) respecting scope.
@@ -129,23 +132,13 @@ const goBack = () => {
     searchQuery.value = '';
 };
 
-const setActiveWorkspace = (id: string) => {
-    activeWorkspaceId.value = id;
-    // Persist to local storage to sync with sidebar if needed
-    localStorage.setItem('meridian_active_workspace', id);
-};
-
 // --- Watchers ---
 watch(
     () => props.workspaces,
-    (newVal) => {
-        if (newVal.length > 0 && !activeWorkspaceId.value) {
-            const stored = localStorage.getItem('meridian_active_workspace');
-            const exists = newVal.find((w) => w.id === stored);
-            activeWorkspaceId.value = exists ? exists.id : newVal[0].id;
-        }
+    () => {
+        initActiveWorkspace();
     },
-    { immediate: true },
+    { immediate: true, deep: true },
 );
 
 // Reset folder view when workspace changes
@@ -168,6 +161,7 @@ onBeforeUnmount(() => {
 // Expose the scroll container so the parent (index.vue) can attach the scroll animation listener
 defineExpose({
     scrollContainer,
+    handleWorkspaceWheel,
 });
 </script>
 
@@ -187,7 +181,7 @@ defineExpose({
                         :key="ws.id"
                         class="group relative flex h-4 w-4 shrink-0 items-center justify-center"
                         :title="ws.name"
-                        @click="setActiveWorkspace(ws.id)"
+                        @click="activeWorkspaceId = ws.id"
                     >
                         <div
                             class="transition-all duration-300 ease-in-out"
@@ -202,7 +196,7 @@ defineExpose({
                 </div>
                 <!-- Workspace Name -->
                 <span class="text-stone-gray/50 pl-0.5 text-xs font-bold tracking-wider uppercase">
-                    {{ currentWorkspace?.name }}
+                    {{ activeWorkspace?.name }}
                 </span>
             </div>
 
diff --git a/ui/app/pages/index.vue b/ui/app/pages/index.vue
index 9d30d50c..2b7abca2 100644
--- a/ui/app/pages/index.vue
+++ b/ui/app/pages/index.vue
@@ -59,6 +59,12 @@ const { handleDeleteGraph } = useGraphDeletion(graphs, undefined);
 // --- Core Logic Functions ---
 
 const handleWheel = (event: WheelEvent) => {
+    // Workspace Switching (Shift + Wheel)
+    if (event.shiftKey) {
+        recentCanvasComponentRef.value?.handleWorkspaceWheel(event);
+        return;
+    }
+
     const currentHeight = recentCanvasHeight.get();
     const isScrollingDown = event.deltaY > 0;
     const isScrollingUp = event.deltaY < 0;
@@ -237,7 +243,7 @@ onMounted(() => {
         // Add wheel listener for scroll animation
         const el = pageRef.value;
         if (el) {
-            el.addEventListener('wheel', handleWheel, { passive: true });
+            el.addEventListener('wheel', handleWheel, { passive: false });
         }
     });
 });

From 7a3702303a6e58ef4adf126ee9555f8aa385a7b4 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 09:57:06 -0500
Subject: [PATCH 21/30] feat: update workspace visibility logic in recent
 canvas section

---
 ui/app/components/ui/home/recentCanvasSection.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/app/components/ui/home/recentCanvasSection.vue b/ui/app/components/ui/home/recentCanvasSection.vue
index d7e1e329..691a9ad9 100644
--- a/ui/app/components/ui/home/recentCanvasSection.vue
+++ b/ui/app/components/ui/home/recentCanvasSection.vue
@@ -171,11 +171,11 @@ defineExpose({
         <div class="relative mb-8 flex w-full items-center justify-center">
             <!-- Workspace Pagination & Name (Top Left) - Only in Root View -->
             <div
-                v-if="!currentFolderId && workspaces.length > 0"
+                v-if="!currentFolderId && workspaces.length > 1"
                 class="absolute left-0 flex flex-col items-start gap-1.5"
             >
                 <!-- Pagination Dots -->
-                <div v-if="workspaces.length > 1" class="flex items-center gap-1.5">
+                <div class="flex items-center gap-1.5">
                     <button
                         v-for="ws in workspaces"
                         :key="ws.id"

From fe72af7c682719424bbd6b0cc59fa9a007f5d45e Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 10:05:26 -0500
Subject: [PATCH 22/30] feat: enhance update workspace function to include user
 ID for better access control

---
 api/app/database/pg/graph_ops/graph_crud.py | 20 ++++++++++++++++++--
 api/app/routers/graph.py                    |  2 +-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/api/app/database/pg/graph_ops/graph_crud.py b/api/app/database/pg/graph_ops/graph_crud.py
index e47b5f77..8edfbe58 100644
--- a/api/app/database/pg/graph_ops/graph_crud.py
+++ b/api/app/database/pg/graph_ops/graph_crud.py
@@ -473,16 +473,32 @@ async def create_workspace(engine: SQLAlchemyAsyncEngine, user_id: str, name: st
 
 
 async def update_workspace(
-    engine: SQLAlchemyAsyncEngine, workspace_id: str, name: str
+    engine: SQLAlchemyAsyncEngine,
+    workspace_id: str,
+    user_id: str,
+    name: str,
 ) -> Workspace:
     async with AsyncSession(engine) as session:
-        ws = await session.get(Workspace, workspace_id)
+        stmt = select(Workspace).where(
+            and_(Workspace.id == workspace_id, Workspace.user_id == user_id)
+        )
+        result = await session.exec(stmt)  # type: ignore
+        ws = result.scalar_one_or_none()
+
         if not ws:
             raise HTTPException(status_code=404, detail="Workspace not found")
+
         ws.name = name
         session.add(ws)
         await session.commit()
         await session.refresh(ws)
+
+        if not isinstance(ws, Workspace):
+            raise HTTPException(
+                status_code=500,
+                detail="Unexpected error: Retrieved object is not of type Workspace.",
+            )
+
         return ws
 
 
diff --git a/api/app/routers/graph.py b/api/app/routers/graph.py
index 45c90d97..ebdf5a99 100644
--- a/api/app/routers/graph.py
+++ b/api/app/routers/graph.py
@@ -427,7 +427,7 @@ async def route_update_workspace(
     name: str,
     user_id: str = Depends(get_current_user_id),
 ) -> Workspace:
-    return await update_workspace(request.app.state.pg_engine, workspace_id, name)
+    return await update_workspace(request.app.state.pg_engine, workspace_id, user_id, name)
 
 
 @router.delete("/workspaces/{workspace_id}")

From eac9de5d70a34e3f0e5a8f9c61dee00314cb057b Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 10:05:44 -0500
Subject: [PATCH 23/30] fix: linter

---
 api/migrations/versions/fd447b227777_add_workspace_table.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/migrations/versions/fd447b227777_add_workspace_table.py b/api/migrations/versions/fd447b227777_add_workspace_table.py
index d429e6cd..ee462746 100644
--- a/api/migrations/versions/fd447b227777_add_workspace_table.py
+++ b/api/migrations/versions/fd447b227777_add_workspace_table.py
@@ -7,9 +7,9 @@
 
 """
 
-from alembic import op
 import sqlalchemy as sa
 import sqlmodel
+from alembic import op
 from sqlalchemy.dialects import postgresql
 
 # revision identifiers, used by Alembic.

From 2ddeaaa40eebf019bf830b7d0b614199ed5a0f8d Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 10:08:48 -0500
Subject: [PATCH 24/30] feat: add UUID extension creation in workspace
 migration

---
 api/migrations/versions/fd447b227777_add_workspace_table.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/api/migrations/versions/fd447b227777_add_workspace_table.py b/api/migrations/versions/fd447b227777_add_workspace_table.py
index ee462746..e31e147f 100644
--- a/api/migrations/versions/fd447b227777_add_workspace_table.py
+++ b/api/migrations/versions/fd447b227777_add_workspace_table.py
@@ -20,6 +20,8 @@
 
 
 def upgrade() -> None:
+    op.execute('CREATE EXTENSION IF NOT EXISTS "uuid-ossp"')
+
     # 1. Create workspaces table
     op.create_table(
         "workspaces",

From c3c7553892be214e9a5bf71274dd22c02799f19b Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 10:12:14 -0500
Subject: [PATCH 25/30] fix: update wheel event listener to be passive for
 improved performance

---
 ui/app/pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/pages/index.vue b/ui/app/pages/index.vue
index 2b7abca2..ac49f3fa 100644
--- a/ui/app/pages/index.vue
+++ b/ui/app/pages/index.vue
@@ -243,7 +243,7 @@ onMounted(() => {
         // Add wheel listener for scroll animation
         const el = pageRef.value;
         if (el) {
-            el.addEventListener('wheel', handleWheel, { passive: false });
+            el.addEventListener('wheel', handleWheel, { passive: true });
         }
     });
 });

From 8763beaf9740fa431e3f1dbc0091baea2d886952 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 10:14:48 -0500
Subject: [PATCH 26/30] feat: enhance graph movement logic to support moving to
 workspace root and removing from folder

---
 api/app/routers/graph.py | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/api/app/routers/graph.py b/api/app/routers/graph.py
index ebdf5a99..d4e857f0 100644
--- a/api/app/routers/graph.py
+++ b/api/app/routers/graph.py
@@ -395,9 +395,20 @@ async def route_move_graph(
     workspace_id: str | None = None,
     user_id: str = Depends(get_current_user_id),
 ) -> Graph:
+    engine = request.app.state.pg_engine
+
+    # CASE 1: Move to specific folder
+    if folder_id:
+        if workspace_id:
+            pass
+        return await move_graph_to_folder(engine, graph_id, folder_id)
+
+    # CASE 2: Move to workspace root (removes from folder)
     if workspace_id:
-        return await move_graph_to_workspace(request.app.state.pg_engine, graph_id, workspace_id)
-    return await move_graph_to_folder(request.app.state.pg_engine, graph_id, folder_id)
+        return await move_graph_to_workspace(engine, graph_id, workspace_id)
+
+    # CASE 3: Remove from folder (stay in current workspace root)
+    return await move_graph_to_folder(engine, graph_id, None)
 
 
 # --- Workspace Routes ---

From a68a945a4ead2f4bd739bc4490714e48a2d99545 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 10:18:20 -0500
Subject: [PATCH 27/30] fix: add focus-visible outline to workspace buttons for
 better accessibility

---
 ui/app/components/ui/home/recentCanvasSection.vue              | 3 ++-
 .../ui/sidebar-history/sidebarHistoryWorkspacePagination.vue   | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/app/components/ui/home/recentCanvasSection.vue b/ui/app/components/ui/home/recentCanvasSection.vue
index 691a9ad9..6ef00727 100644
--- a/ui/app/components/ui/home/recentCanvasSection.vue
+++ b/ui/app/components/ui/home/recentCanvasSection.vue
@@ -179,7 +179,8 @@ defineExpose({
                     <button
                         v-for="ws in workspaces"
                         :key="ws.id"
-                        class="group relative flex h-4 w-4 shrink-0 items-center justify-center"
+                        class="group relative flex h-4 w-4 shrink-0 items-center justify-center
+                            focus-visible:outline-none"
                         :title="ws.name"
                         @click="activeWorkspaceId = ws.id"
                     >
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue b/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
index 1567232b..d1af7161 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistoryWorkspacePagination.vue
@@ -41,7 +41,7 @@ onMounted(scrollToActive);
                 v-for="ws in workspaces"
                 :key="ws.id"
                 :data-id="ws.id"
-                class="group relative flex h-6 w-6 shrink-0 items-center justify-center"
+                class="group relative flex h-6 w-6 shrink-0 items-center justify-center focus-visible:outline-none"
                 :title="ws.name"
                 @click="emit('select', ws.id)"
             >

From a8fb815514b040a6ef1082fb490bf8466c697ff3 Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 10:20:35 -0500
Subject: [PATCH 28/30] fix: filter valid folders before displaying in move
 items

---
 .../components/ui/sidebar-history/actions.vue  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/ui/app/components/ui/sidebar-history/actions.vue b/ui/app/components/ui/sidebar-history/actions.vue
index a05183fa..c0d04375 100644
--- a/ui/app/components/ui/sidebar-history/actions.vue
+++ b/ui/app/components/ui/sidebar-history/actions.vue
@@ -40,22 +40,24 @@ const moveItems = computed(() => {
     }
 
     // Folders in current workspace
-    if (props.folders.length > 0) {
+    const validFolders = props.folders.filter(
+        (f) => f.workspace_id === props.graph.workspace_id && f.id !== props.graph.folder_id,
+    );
+
+    if (validFolders.length > 0) {
         items.push({
             label: 'Folders',
             isHeader: true,
             icon: 'MdiFolderOutline',
         });
 
-        const sortedFolders = [...props.folders].sort((a, b) => a.name.localeCompare(b.name));
+        const sortedFolders = [...validFolders].sort((a, b) => a.name.localeCompare(b.name));
 
         sortedFolders.forEach((folder) => {
-            if (props.graph.folder_id !== folder.id) {
-                items.push({
-                    label: folder.name,
-                    action: () => emit('move', props.graph.id, folder.id, null),
-                });
-            }
+            items.push({
+                label: folder.name,
+                action: () => emit('move', props.graph.id, folder.id, null),
+            });
         });
     }
 

From 0d8492a020eab87ee80f8d2645a3327698fc642d Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 10:26:48 -0500
Subject: [PATCH 29/30] feat: extend useSidebarWorkspaces to include folders
 for improved workspace management

---
 .../ui/home/recentCanvasSection.vue           |  6 +++++-
 .../ui/sidebar-history/sidebarHistory.vue     |  2 +-
 .../sidebar/useSidebarWorkspaces.ts           | 19 +++++++++++++++----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/ui/app/components/ui/home/recentCanvasSection.vue b/ui/app/components/ui/home/recentCanvasSection.vue
index 6ef00727..7ee958ca 100644
--- a/ui/app/components/ui/home/recentCanvasSection.vue
+++ b/ui/app/components/ui/home/recentCanvasSection.vue
@@ -33,7 +33,11 @@ const {
     activeWorkspace,
     handleWheel: handleWorkspaceWheel,
     initActiveWorkspace,
-} = useSidebarWorkspaces(toRef(props, 'workspaces'), toRef(props, 'graphs'));
+} = useSidebarWorkspaces(
+    toRef(props, 'workspaces'),
+    toRef(props, 'graphs'),
+    toRef(props, 'folders'),
+);
 
 // --- Local State ---
 const searchQuery = ref('');
diff --git a/ui/app/components/ui/sidebar-history/sidebarHistory.vue b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
index 1e166b74..a5f6a4e5 100644
--- a/ui/app/components/ui/sidebar-history/sidebarHistory.vue
+++ b/ui/app/components/ui/sidebar-history/sidebarHistory.vue
@@ -37,7 +37,7 @@ const {
     cancelWorkspaceEdit,
     handleDeleteWorkspace,
     handleWheel,
-} = useSidebarWorkspaces(workspaces, graphs);
+} = useSidebarWorkspaces(workspaces, graphs, folders);
 
 const {
     editingId,
diff --git a/ui/app/composables/sidebar/useSidebarWorkspaces.ts b/ui/app/composables/sidebar/useSidebarWorkspaces.ts
index 999aaa2c..7311c46c 100644
--- a/ui/app/composables/sidebar/useSidebarWorkspaces.ts
+++ b/ui/app/composables/sidebar/useSidebarWorkspaces.ts
@@ -1,7 +1,11 @@
-import type { Workspace, Graph } from '@/types/graph';
+import type { Workspace, Graph, Folder } from '@/types/graph';
 import { useThrottleFn } from '@vueuse/core';
 
-export const useSidebarWorkspaces = (workspaces: Ref<Workspace[]>, graphs: Ref<Graph[]>) => {
+export const useSidebarWorkspaces = (
+    workspaces: Ref<Workspace[]>,
+    graphs: Ref<Graph[]>,
+    folders: Ref<Folder[]>,
+) => {
     const { createWorkspace, updateWorkspace, deleteWorkspace } = useAPI();
     const { error } = useToast();
 
@@ -94,10 +98,17 @@ export const useSidebarWorkspaces = (workspaces: Ref<Workspace[]>, graphs: Ref<G
         try {
             await deleteWorkspace(ws.id);
             workspaces.value = workspaces.value.filter((w) => w.id !== ws.id);
+            const defaultId = workspaces.value[0].id;
+
             graphs.value.forEach((g) => {
-                if (g.workspace_id === ws.id) g.workspace_id = workspaces.value[0].id;
+                if (g.workspace_id === ws.id) g.workspace_id = defaultId;
+            });
+
+            folders.value.forEach((f) => {
+                if (f.workspace_id === ws.id) f.workspace_id = defaultId;
             });
-            activeWorkspaceId.value = workspaces.value[0].id;
+
+            activeWorkspaceId.value = defaultId;
         } catch {
             error('Failed to delete workspace.');
         }

From 86d22cbba78ee8d902750213c174d03c8f3ba05a Mon Sep 17 00:00:00 2001
From: Mathis Verstrepen <mathisverstrepen@gmail.com>
Date: Sat, 3 Jan 2026 10:29:25 -0500
Subject: [PATCH 30/30] fix: remove order_index from default workspace creation
 for user

---
 api/app/database/pg/user_ops/user_crud.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/api/app/database/pg/user_ops/user_crud.py b/api/app/database/pg/user_ops/user_crud.py
index 21da70f7..d4bec055 100644
--- a/api/app/database/pg/user_ops/user_crud.py
+++ b/api/app/database/pg/user_ops/user_crud.py
@@ -63,7 +63,7 @@ async def create_user_from_provider(
             await session.flush()
 
             # Create Default Workspace
-            workspace = Workspace(user_id=user.id, name="Default", order_index=0)
+            workspace = Workspace(user_id=user.id, name="Default")
             session.add(workspace)
 
         await session.refresh(user)
@@ -123,7 +123,7 @@ async def create_user_with_password(
                 await session.flush()
 
                 # Create Default Workspace
-                workspace = Workspace(user_id=user.id, name="Default", order_index=0)
+                workspace = Workspace(user_id=user.id, name="Default")
                 session.add(workspace)
 
         except IntegrityError: