Add tree view support to browse datalayer spaces

Author: goanpeca

packages/vscode/.gitignore

@@ -0,0 +1,28 @@
+# Build outputs
+out/
+dist/
+*.vsix
+
+# Dependencies
+node_modules/
+
+# IDE
+.vscode-test/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Environment
+.env
+.env.local

packages/vscode/CLAUDE.md

@@ -2,13 +2,14 @@
 
 ## Project Overview
 
-This is a VS Code extension that provides a custom Jupyter Notebook editor with integrated Datalayer platform authentication. It uses the `@datalayer/jupyter-react` component library and supports both local Jupyter servers and the Datalayer cloud platform.
+This is a VS Code extension that provides a custom Jupyter Notebook editor with integrated Datalayer platform authentication and a Spaces tree view for managing cloud documents. It uses the `@datalayer/jupyter-react` component library and supports both local Jupyter servers and the Datalayer cloud platform.
 
 ## Architecture
 
 - **Extension Code** (`src/`): Runs in VS Code's Node.js context, handles authentication and server communication
 - **Webview Code** (`webview/`): Runs in an iframe, contains the React-based notebook editor
 - **Authentication System** (`src/auth/`): Token-based authentication with GitHub profile enrichment
+- **Spaces Tree View** (`src/spaces/`): Explorer sidebar for browsing Datalayer spaces and documents
 - **Communication**: Message passing between extension and webview with JWT token injection
 
 ## Development Setup
@@ -20,11 +21,25 @@ This is a VS Code extension that provides a custom Jupyter Notebook editor with
 
 ## Key Components
 
+### Core Extension
+
 - `src/extension.ts`: Main extension entry point with auth command registration
+- `src/notebookEditor.ts`: Custom editor provider with authenticated connections
+
+### Authentication System
+
 - `src/auth/authService.ts`: Authentication service with secure token storage
 - `src/auth/githubService.ts`: GitHub profile enrichment service
 - `src/auth/tokenProvider.ts`: User interface for authentication flows
-- `src/notebookEditor.ts`: Custom editor provider with authenticated connections
+
+### Spaces Tree View
+
+- `src/spaces/spacesTreeProvider.ts`: Tree data provider for Datalayer spaces
+- `src/spaces/spacerApiService.ts`: API service for fetching spaces and documents
+- `src/spaces/spaceItem.ts`: Data models for tree items
+
+### Webview
+
 - `webview/NotebookVSCode.tsx`: React component for the notebook UI
 - `webview/serviceManager.ts`: Handles Jupyter service connections with JWT tokens
 
@@ -70,6 +85,9 @@ This is a VS Code extension that provides a custom Jupyter Notebook editor with
 - `datalayer.login`: Authenticate with Datalayer platform
 - `datalayer.logout`: Sign out and clear credentials
 - `datalayer.showAuthStatus`: View authentication status
+- `datalayer.refreshSpaces`: Refresh the Spaces tree view
+- `datalayer.openDocument`: Open a document from the Spaces tree
+- `datalayer.createNotebookInSpace`: Create a new notebook in a selected space
 
 ## Configuration
 
@@ -89,3 +107,35 @@ This is a VS Code extension that provides a custom Jupyter Notebook editor with
 
 - View Type: `datalayer.jupyter-notebook`
 - File Pattern: `*.ipynb`
+
+## Spaces Tree View
+
+The extension includes a tree view in the Explorer sidebar that displays:
+
+- User's Datalayer spaces (with default space marked)
+- Documents within each space:
+  - Notebooks (`.ipynb` files)
+  - Lexical documents (`.lexical` files)
+  - Exercises and other document types
+- Real-time sync with the Datalayer platform
+- Context menu actions for creating new notebooks
+
+### API Endpoints Used
+
+- `/api/spacer/v1/spaces/users/me` - Get user's spaces
+- `/api/spacer/v1/spaces/{id}/items` - Get items in a space
+- `/api/spacer/v1/notebooks` - Create new notebooks
+
+## Directory Structure
+
+```
+src/
+├── auth/           # Authentication services
+├── spaces/         # Spaces tree view implementation
+├── test/           # Test files
+├── extension.ts    # Main extension entry
+└── notebookEditor.ts # Notebook editor provider
+
+webview/           # React-based notebook UI
+dist/              # Webpack build output
+```

packages/vscode/README.md

@@ -16,6 +16,34 @@ This [Visual Studio Code](https://code.visualstudio.com) extension allows you to
 - **Real-time Execution**: Run code cells with live output and error display
 - **IPyWidgets Support**: Full interactive widget support
 - **Status Bar Integration**: View connection status and user profile
+- **Spaces Tree View**: Browse and manage documents across all your Datalayer spaces
+
+## Spaces Tree View
+
+The extension provides a tree view in the Explorer sidebar that displays all your Datalayer spaces and documents:
+
+### Features
+
+- **Hierarchical Display**: Shows "Datalayer (@username)" as root, with spaces as folders containing documents
+- **Document Types**: Displays notebooks with `.ipynb` extension and documents with `.lexical` extension
+- **Default Space**: Marks your default space with "(Default)" label
+- **Real-time Updates**: Refreshes when authentication state changes
+- **Error Handling**: Shows helpful messages when not authenticated or when spaces are empty
+
+### Tree Structure
+
+```
+Datalayer (@username)
+├── My Library (Default)
+│   ├── notebook1.ipynb
+│   ├── document1.lexical
+│   └── notebook2.ipynb
+├── Project Space
+│   ├── analysis.ipynb
+│   └── notes.lexical
+└── Shared Space
+    └── collaboration.ipynb
+```
 
 ## Authentication
 
@@ -32,6 +60,9 @@ The extension supports authentication with the Datalayer platform:
 - `Datalayer: Logout from Datalayer` - Sign out and clear stored credentials
 - `Datalayer: Show Authentication Status` - View current authentication status
 - `Datalayer: Create new Datalayer Notebook` - Create a new notebook file
+- `Datalayer: Refresh Spaces` - Refresh the spaces tree view
+- `Datalayer: Open Document` - Open a document from the tree view (automatic on click)
+- `Datalayer: Create Notebook in Space` - Create a new notebook in a selected space
 
 ### Configuration
 

packages/vscode/package.json

@@ -43,8 +43,59 @@
         "command": "datalayer.showAuthStatus",
         "title": "Show Authentication Status",
         "category": "Datalayer"
+      },
+      {
+        "command": "datalayer.refreshSpaces",
+        "title": "Refresh Spaces",
+        "category": "Datalayer",
+        "icon": "$(refresh)"
+      },
+      {
+        "command": "datalayer.openDocument",
+        "title": "Open Document",
+        "category": "Datalayer"
+      },
+      {
+        "command": "datalayer.createNotebookInSpace",
+        "title": "Create Notebook in Space",
+        "category": "Datalayer",
+        "icon": "$(add)"
       }
     ],
+    "views": {
+      "explorer": [
+        {
+          "id": "datalayerSpaces",
+          "name": "Datalayer Spaces",
+          "icon": "$(menu)",
+          "contextualTitle": "Datalayer Spaces",
+          "when": "true"
+        }
+      ]
+    },
+    "viewsWelcome": [
+      {
+        "view": "datalayerSpaces",
+        "contents": "Welcome to Datalayer Spaces.\n[Login to Datalayer](command:datalayer.login) to view your spaces and documents.",
+        "when": "!datalayer.authenticated"
+      }
+    ],
+    "menus": {
+      "view/title": [
+        {
+          "command": "datalayer.refreshSpaces",
+          "when": "view == datalayerSpaces",
+          "group": "navigation"
+        }
+      ],
+      "view/item/context": [
+        {
+          "command": "datalayer.createNotebookInSpace",
+          "when": "view == datalayerSpaces && viewItem == space",
+          "group": "inline"
+        }
+      ]
+    },
     "configuration": {
       "title": "Datalayer",
       "properties": {