tabby-tabbyspaces 0.0.1 → 0.1.0

package/.claude/settings.local.json

@@ -9,7 +9,33 @@
       "WebFetch(domain:github.com)",
       "Bash(npm run build:dev:*)",
       "Bash(wc:*)",
-      "Bash(tree:*)"
+      "WebFetch(domain:docs.tabby.sh)",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "WebFetch(domain:api.github.com)",
+      "Bash(ls -la \"C:\\\\Users\\\\halil\\\\tabbyspaces\\\\dist\"\" | grep -E \"package)",
+      "Bash(.json \")",
+      "Bash(dir /s /b \"C:\\\\Users\\\\halil\\\\AppData\\\\Local\\\\Programs\\\\tabby\")",
+      "WebFetch(domain:localhost)",
+      "Bash(curl:*)",
+      "mcp__tabby__query",
+      "mcp__tabby__execute_js",
+      "Bash(start \"\" \"C:\\\\Program Files \\(x86\\)\\\\Tabby\\\\Tabby.exe\" --remote-debugging-port=9222)",
+      "mcp__tabby__list_targets",
+      "Bash(tree:*)",
+      "Bash(dir \"C:\\\\Users\\\\halil\\\\tabbyspaces\\\\node_modules\" /B)",
+      "Bash(findstr:*)",
+      "mcp__tabby__screenshot",
+      "Bash(python:*)",
+      "Bash(cmd /c \"dir /A %APPDATA%\\\\tabby\\\\plugins\\\\node_modules\")",
+      "Bash(cmd /c \"dir %APPDATA%\\\\tabby\\\\plugins\")",
+      "Bash(git log:*)",
+      "Bash(ls -la \"C:\\\\Users\\\\halil\\\\tabbyspaces\\\\screenshots\"\" 2>nul || echo \"Directory not found \")",
+      "Bash(dir:*)",
+      "Bash(cmd.exe /c start \"\" \"C:\\\\Program Files \\(x86\\)\\\\Tabby\\\\Tabby.exe\" --remote-debugging-port=9222)"
     ]
-  }
+  },
+  "enableAllProjectMcpServers": true,
+  "enabledMcpjsonServers": [
+    "tabby"
+  ]
 }

package/CHANGELOG.md

@@ -1,20 +1,46 @@
-# Changelog
-
-## [0.0.1] - 2026-01-03
-
-Initial release.
-
-### Features
-
-- Workspace list with create, edit, duplicate, delete
-- Visual split-layout editor (horizontal/vertical, any nesting depth)
-- Pane configuration: base profile, working directory, startup command, custom title
-- Toolbar button for quick workspace launch
-- Default workspace option (launches on Tabby startup)
-- Icon and color customization per workspace
-- Hotkey support (planned)
-
-### Technical
-
-- Full dev/prod build isolation for parallel development
-- Automatic Tabby profile generation from workspace config
+# Changelog
+
+## [0.1.0] - 2026-01-13
+
+### Features
+
+- Inline workspace editor (replaces modal dialog)
+- Layout editing toolbar with pane selection system
+- Startup command support per pane
+- Launch on startup supports multiple workspaces
+- Distinct icons for DEV vs PROD versions
+
+### Bug Fixes
+
+- Fix delete/save race conditions with async/await
+- Fix native split re-running startup command
+- Fix async change detection and profile cleanup timing
+
+### UX Improvements
+
+- Pane title format: shows base profile when no custom title
+- Toolbar UI polish
+- Settings panel max-width override (1024px)
+
+### Technical
+
+- Remove profile persistence (cleaner architecture - no generated profiles)
+- Watch mode for dev workflow (`npm run watch:dev`)
+
+---
+
+## [0.0.1] - 2026-01-03
+
+Initial release.
+
+### Features
+
+- Workspace list with create, edit, duplicate, delete
+- Visual split-layout editor (horizontal/vertical, any nesting depth)
+- Pane configuration: base profile, working directory, startup command, custom title
+- Toolbar button for quick workspace launch
+- Icon and color customization per workspace
+
+### Technical
+
+- Full dev/prod build isolation for parallel development

package/CLAUDE.md

@@ -2,6 +2,25 @@
 
 Visual split-layout workspace editor for Tabby.
 
+## Git Workflow
+
+- **main** - Stable releases only. Do not commit directly.
+- **dev** - Active development. All work happens here.
+
+```bash
+# Normal workflow
+git checkout dev        # Work on dev
+# ... make changes ...
+git commit
+
+# Release workflow
+git checkout main
+git merge dev
+git tag v0.x.0
+git push --tags
+git checkout dev        # Back to work
+```
+
 ## Tech Stack
 
 - **Framework**: Angular 15 (Tabby uses Angular 15)
@@ -15,10 +34,21 @@ Visual split-layout workspace editor for Tabby.
 ```
 src/
 ├── index.ts                 # NgModule entry point
+├── build-config.ts          # Build-time constants (CONFIG_KEY, DISPLAY_NAME)
 ├── models/                  # TypeScript interfaces
+│   └── workspace.model.ts
 ├── services/                # Business logic
-├── providers/               # Tabby config/settings providers
+│   ├── workspaceEditor.service.ts
+│   └── startupCommand.service.ts
+├── providers/               # Tabby config/settings/toolbar providers
+│   ├── config.provider.ts
+│   ├── settings.provider.ts
+│   └── toolbar.provider.ts
 └── components/              # Angular components (.ts, .pug, .scss)
+    ├── workspaceList        # Main settings UI
+    ├── workspaceEditor      # Single workspace editor
+    ├── paneEditor           # Pane configuration
+    └── splitPreview         # Visual split preview
 ```
 
 ## Build
@@ -37,7 +67,7 @@ Debug: `Ctrl+Shift+I` in Tabby opens DevTools.
 ### package.json (required)
 ```json
 {
-  "keywords": ["tabby-plugin"],
+  "keywords": ["tabby", "tabby-plugin"],
   "main": "dist/index.js",
   "tabbyPlugin": {
     "name": "tabbyspaces",
@@ -79,20 +109,45 @@ export default class MyModule {}
 
 ## Data Model
 
-- `Workspace` - Main object with name, icon, color, root split
+- `Workspace` - Main object with name, icon, color, root split, launchOnStartup
 - `WorkspaceSplit` - Recursive structure with orientation, ratios, children
-- `WorkspacePane` - Leaf node with profileId, cwd, startupCommand, title
+- `WorkspacePane` - Leaf node with profileId (reference to existing Tabby profile), cwd, startupCommand, title
 
-## Tabby Profile Generation
+### Workspace Fields
+| Field | Type | Description |
+|-------|------|-------------|
+| `id` | string | UUID |
+| `name` | string | Display name |
+| `icon` | string | FontAwesome icon name (without fa- prefix) |
+| `color` | string | Hex color |
+| `root` | WorkspaceSplit | Root split node |
+| `launchOnStartup` | boolean | Auto-open when Tabby starts (multiple allowed) |
 
-Plugin stores a simplified model in `config.store.tabbyspaces.workspaces` and auto-generates verbose Tabby `split-layout` profiles in `config.store.profiles`.
+## Architecture
 
-## Nushell Startup Commands
+### Storage
+Plugin stores workspaces in `config.store.tabbyspaces.workspaces`. No profiles are generated in `config.store.profiles`.
 
-For Nushell, startup commands are passed as:
-```typescript
-options.args = ['-e', startupCommand]
-```
+### Opening Workspaces
+1. Generate temporary `split-layout` recovery token from workspace model (includes `options.cwd`)
+2. Open via `ProfilesService.openNewTabForProfile()`
+3. `StartupCommandService` listens for `tabOpened$` events
+4. Match terminal tabs by pane ID (passed via `tabCustomTitle`)
+5. Send startup command via `sendInput()` (if defined)
+
+### CWD Handling
+CWD is set via native `options.cwd` in the recovery token. The shell spawns directly in the target directory - no visible `cd` commands.
+
+### Profile Support
+Plugin supports both user-defined profiles (`type: 'local'`) and built-in shells (`type: 'local:cmd'`, `'local:powershell'`, `'local:wsl'`, etc.). Profile lookup uses a two-stage approach:
+1. First checks user profiles in `config.store.profiles`
+2. Falls back to cached profiles from `profilesService.getProfiles()` (includes built-ins)
+
+### Launch on Startup
+Workspaces with `launchOnStartup: true` are automatically opened when Tabby starts. Multiple workspaces can be marked. Logic is in `toolbar.provider.ts` constructor with 500ms delay to ensure Tabby is ready.
+
+### Migration
+`cleanupOrphanedProfiles()` removes any leftover profiles from previous plugin versions (prefix `split-layout:tabbyspaces:`).
 
 ## References
 
@@ -111,10 +166,20 @@ Linux:    ~/.config/tabby/plugins
 
 ### Production install
 ```bash
+# Via Tabby Plugin Manager (Settings → Plugins → search "tabbyspaces")
+# Or via npm:
 cd <plugins-folder>
 npm install tabby-tabbyspaces
 ```
 
+### Production uninstall
+```bash
+# Via Tabby Plugin Manager
+# Or via npm:
+cd <plugins-folder>
+npm uninstall tabby-tabbyspaces
+```
+
 ## Development
 
 ### Dev install (once)
@@ -122,16 +187,24 @@ npm install tabby-tabbyspaces
 npm run build:dev
 cd %APPDATA%\tabby\plugins
 npm install "<path-to-repo>/dist-dev"
+# Restart Tabby
+```
+
+### Dev uninstall
+```bash
+cd %APPDATA%\tabby\plugins
+npm uninstall tabby-tabbyspaces-dev
+# Restart Tabby
 ```
 
 ### Dev workflow (after install)
 ```bash
-npm run build:dev   # Initial build (creates dist-dev/package.json)
+npm run build:dev   # Rebuild
 npm run watch:dev   # Watch mode - rebuilds on file changes
-# restart Tabby after each rebuild
+# Restart Tabby after each rebuild
 ```
 
-npm auto-creates symlinks for local packages, so each build is immediately available.
+npm creates symlinks for local packages, so each build is immediately available.
 
 ### Dev vs Prod Isolation
 
@@ -140,13 +213,88 @@ npm auto-creates symlinks for local packages, so each build is immediately avail
 | Package | `tabby-tabbyspaces` | `tabby-tabbyspaces-dev` |
 | Config | `config.store.tabbyspaces` | `config.store.tabbyspaces_dev` |
 | Display | "TabbySpaces" | "TabbySpaces DEV" |
+| Toolbar icon | Grid (4 squares) | ⚡ Bolt |
+| Settings icon | `th-large` | `bolt` |
 
 Both plugins can be installed simultaneously.
 
+## CDP Debugging (via tabby-mcp)
+
+Automatizovan način za testiranje plugina kroz Chrome DevTools Protocol.
+
+### Workflow
+1. **Pokreni Tabby** sa remote debugging:
+   ```bash
+   cmd.exe /c start "" "C:\Program Files (x86)\Tabby\Tabby.exe" --remote-debugging-port=9222
+   ```
+2. **Izlistaj targets** sa `mcp__tabby__list_targets`
+3. **Identifikuj target** - oba imaju isti URL, ali:
+   - Target 0 = Tvoj radni Tabby (Claude Code session)
+   - Target 1 = Debug Tabby instance (pokrenut sa --remote-debugging-port)
+4. **Debug** sa `query`, `execute_js`, `screenshot`
+
+**VAŽNO:** Debug-uj NOVI Tabby instance (target 1), ne onaj u kojem radiš!
+
+### MCP Tools
+| Tool | Opis |
+|------|------|
+| `mcp__tabby__list_targets` | Lista CDP targets sa index, title, URL, WebSocket |
+| `mcp__tabby__query` | CSS selector → lista elemenata |
+| `mcp__tabby__execute_js` | Izvrši JS (fresh scope, async/await support) |
+| `mcp__tabby__screenshot` | Screenshot Tabby prozora |
+
+### Identifikacija DEV verzije
+
+DEV verzija ima ⚡ bolt ikonicu (umesto grid-a):
+- **Toolbar**: SVG bolt ikonica u gornjem desnom uglu
+- **Settings sidebar**: FontAwesome `fa-bolt` pored "TabbySpaces DEV"
+
+```javascript
+// Proveri da li je DEV verzija aktivna u settings
+document.querySelector('.nav-link .fa-bolt')  // DEV
+document.querySelector('.nav-link .fa-th-large')  // PROD
+```
+
+### CSS Selektori Reference
+
+| Selektor | Element |
+|----------|---------|
+| `.preview-pane` | Pane u split preview-u |
+| `.preview-pane.selected` | Selektovan pane |
+| `.toolbar-btn` | Toolbar dugmad |
+| `.toolbar-btn[title="Edit pane"]` | Specifično dugme po title-u |
+| `.pane-editor-modal` | Edit pane modal |
+| `.context-menu` | Context menu (desni klik) |
+| `.workspace-item` | Workspace u listi |
+| `.nav-link .fa-bolt` | DEV settings tab ikonica |
+| `.nav-link .fa-th-large` | PROD settings tab ikonica |
+
+### Primeri
+```javascript
+// Query elemente
+mcp__tabby__query(target: 1, selector: '.preview-pane')
+
+// Klikni na pane i proveri toolbar
+document.querySelectorAll('.preview-pane')[0].click();
+return Array.from(document.querySelectorAll('.toolbar-btn'))
+  .map(b => ({title: b.title, disabled: b.disabled}));
+
+// Split pane i vrati novi count
+const before = document.querySelectorAll('.preview-pane').length;
+document.querySelectorAll('.preview-pane')[0].click();
+document.querySelector('.toolbar-btn[title="Split Horizontal"]').click();
+return { before, after: document.querySelectorAll('.preview-pane').length };
+
+// Async primer - sačekaj Angular change detection
+document.querySelectorAll('.preview-pane')[0].click();
+await new Promise(r => setTimeout(r, 100));
+return document.querySelectorAll('.preview-pane.selected').length;
+```
+
 ## Known Issues
 
 ### YAML escape sequences in config.yaml
-If a base profile in Tabby config uses double-quoted strings with wrong escape sequences (e.g., `\t` instead of `\\t`), the plugin will copy the corrupted path.
+If a base profile in Tabby config uses double-quoted strings with wrong escape sequences (e.g., `\t` instead of `\\t`), shell detection will fail and CWD commands may not work correctly.
 
 ```yaml
 # WRONG - \t becomes TAB character

package/README.md

@@ -1,61 +1,71 @@
-# TabbySpaces
-
-Visual workspace editor for [Tabby](https://tabby.sh). Create split-layout terminal workspaces without touching config files.
-
-![Workspace Editor](screenshots/editor.png)
-
-## What it does
-
-- Visual editor for split layouts (horizontal/vertical, nested, any depth)
-- Per-pane configuration: profile, working directory, startup command, title
-- One-click workspace launch from toolbar
-- Hotkey support for quick workspace switching
-- Works with any shell (Bash, Zsh, PowerShell, Nushell, etc.)
-
-## Install
-
-**From Tabby Plugin Manager:**
-Settings → Plugins → Search "tabbyspaces" → Install
-
-**Manual:**
-```bash
-cd ~/.config/tabby/plugins  # or %APPDATA%\tabby\plugins on Windows
-npm install tabby-tabbyspaces
-```
-
-Restart Tabby after installation.
-
-## Usage
-
-1. Open Settings → TabbySpaces
-2. Create a workspace
-3. Design your split layout visually
-4. Configure each pane (profile, cwd, startup command)
-5. Save and launch from the toolbar
-
-### Workspace editor
-
-![Edit Workspace](screenshots/workspace-edit.png)
-
-### Pane configuration
-
-![Edit Pane](screenshots/pane-edit.png)
-
-## About this project
-
-This plugin was written 100% by [Claude Code](https://claude.ai/code).
-
-Igor Halilović had the idea and provided product direction. He hates Angular so much (19 years of web dev, wrote his own TypeScript framework) that he didn't look at this code. Not once. He told Claude Code what he wanted, Claude Code built it.
-
-Human provides the *what* and *why*. AI handles the *how*.
-
-## Tech
-
-- Angular 15 (Tabby's framework)
-- TypeScript 4.9
-- Webpack 5
-- Pug templates, SCSS styles
-
-## License
-
-MIT
+# TabbySpaces
+
+Visual workspace editor for [Tabby](https://tabby.sh). Create split-layout terminal workspaces without touching config files.
+
+![Workspace Editor](screenshots/editor.png)
+
+## What it does
+
+- Visual editor for split layouts (horizontal/vertical, nested, any depth)
+- Per-pane configuration: profile, working directory, startup command, title
+- One-click workspace launch from toolbar
+- Launch on startup (auto-open workspaces when Tabby starts)
+- Works with any shell (Bash, Zsh, PowerShell, Nushell, etc.)
+
+## About this project
+
+This plugin was written 100% by [Claude Code](https://claude.ai/code).
+
+Igor Halilović had the idea and provided product direction. He hates Angular so much (19 years of web dev, wrote his own TypeScript framework) that he didn't look at this code. Not once. He told Claude Code what he wanted, Claude Code built it.
+
+Human provides the *what* and *why*. AI handles the *how*.
+
+Here's the fun part: to test this plugin, we built [tabby-mcp](https://github.com/halilc4/tabby-mcp) - an MCP server that lets Claude Code interact with Tabby via CDP. So the AI that built TabbySpaces can now test it too. Full circle.
+
+## Install
+
+**From Tabby Plugin Manager:**
+Settings → Plugins → Search "tabbyspaces" → Install
+
+**Manual:**
+```bash
+cd ~/.config/tabby/plugins  # or %APPDATA%\tabby\plugins on Windows
+npm install tabby-tabbyspaces
+```
+
+Restart Tabby after installation.
+
+## Usage
+
+1. Open Settings → TabbySpaces
+2. Create a workspace
+3. Design your split layout visually
+4. Configure each pane (profile, cwd, startup command)
+5. Save and launch from the toolbar
+
+### Pane configuration
+
+![Edit Pane](screenshots/pane-edit.png)
+
+## Roadmap
+
+- Hotkey support for quick workspace switching
+- Pane presets (saved configurations for quick adding)
+- Resize panes in editor (adjust split ratios)
+- Drag and drop panes (reorganize layout by dragging)
+
+## Tech
+
+- Angular 15 (Tabby's framework)
+- TypeScript 4.9
+- Webpack 5
+- Pug templates, SCSS styles
+
+## Community
+
+- [Discussions](https://github.com/halilc4/tabbyspaces/discussions) - Questions, ideas, show your setup
+- [Issues](https://github.com/halilc4/tabbyspaces/issues) - Bug reports
+
+## License
+
+MIT

package/RELEASE.md

@@ -0,0 +1,91 @@
+# Release Workflow
+
+## Trenutno stanje
+- **Dev branch**: 15 commit-a ispred main-a
+- **Verzija**: 0.0.1
+- **Tagovi**: Nema
+- **PROD instalacija**: Lokalni symlink (za testiranje)
+- **Status**: U toku testiranja (2026-01-13)
+
+## Instalacije u Tabby plugins
+```json
+// %APPDATA%\tabby\plugins\package.json
+{
+  "dependencies": {
+    "tabby-tabbyspaces": "file:../../../../tabbyspaces/dist",  // LOKALNI SYMLINK (za testiranje)
+    "tabby-tabbyspaces-dev": "file:../../../../tabbyspaces/dist-dev"
+  }
+}
+```
+
+| Verzija | Config key | Ikonica | Update |
+|---------|------------|---------|--------|
+| PROD | `tabbyspaces` | Grid (`th-large`) | `npm run build` + restart |
+| DEV | `tabbyspaces_dev` | Bolt (`bolt`) | `npm run build:dev` + restart |
+
+## Testiranje (ručno)
+
+### Funkcionalnosti za testirati
+- [x] Plugin se pojavljuje u Settings sidebar (ikonica `th-large`, ne `bolt`)
+- [x] Toolbar dugme (grid ikonica)
+- [x] Kreiranje novog workspace-a
+- [x] Split layout editing (horizontal/vertical)
+- [x] Pane selection i editing
+- [x] Startup command
+- [x] Launch on startup
+- [x] Čuvanje u `config.store.tabbyspaces`
+
+### Install/Uninstall
+- [x] Uninstall PROD (`npm uninstall tabby-tabbyspaces`)
+- [x] Install lokalni symlink (`npm install dist`)
+- [x] Reinstall sa npm registry (`npm install tabby-tabbyspaces`)
+
+### Napomene iz testiranja
+- Na prvi pogled funkcionalno radi
+- (dodaj napomene tokom testiranja)
+
+### Iterativno testiranje
+```bash
+# Napravi promenu → build → restart Tabby
+npm run build
+```
+
+## Release (kad bude spremno)
+
+```bash
+# 1. Bump verziju u package.json (npr. "0.1.0")
+
+# 2. Final build
+npm run build
+
+# 3. Commit
+git add package.json
+git commit -m "Bump version to 0.1.0"
+
+# 4. Merge u main
+git checkout main
+git merge dev
+
+# 5. Tag
+git tag v0.1.0
+
+# 6. Push
+git push origin main
+git push --tags
+
+# 7. Publish na npm
+cd dist
+npm publish
+
+# 8. Vrati se na dev
+git checkout dev
+```
+
+## Posle testiranja (opciono)
+
+Vrati PROD na npm registry verziju:
+```bash
+cd %APPDATA%\tabby\plugins
+npm uninstall tabby-tabbyspaces
+npm install tabby-tabbyspaces
+```