tabby-tabbyspaces 0.0.1 → 0.2.0

package/.claude/settings.local.json

@@ -9,7 +9,34 @@
       "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)",
+      "Bash(ls:*)"
     ]
-  }
+  },
+  "enableAllProjectMcpServers": true,
+  "enabledMcpjsonServers": [
+    "tabby"
+  ]
 }

package/.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: CI
+
+on:
+  push:
+    branches: [dev]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Build
+        run: npm run build

package/.github/workflows/claude-code-review.yml

@@ -0,0 +1,44 @@
+name: Claude Code Review
+
+on:
+  pull_request:
+    types: [opened, synchronize, ready_for_review, reopened]
+    # Optional: Only run on specific file changes
+    # paths:
+    #   - "src/**/*.ts"
+    #   - "src/**/*.tsx"
+    #   - "src/**/*.js"
+    #   - "src/**/*.jsx"
+
+jobs:
+  claude-review:
+    # Only run for repository members to control costs
+    if: |
+      github.event.pull_request.author_association == 'OWNER' ||
+      github.event.pull_request.author_association == 'MEMBER' ||
+      github.event.pull_request.author_association == 'COLLABORATOR'
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: read
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Run Claude Code Review
+        id: claude-review
+        uses: anthropics/claude-code-action@v1.0.0
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          prompt: >
+            Please review the changes in this pull request and leave a concise summary comment with any issues, suggestions, and potential bugs:
+            https://github.com/${{ github.repository }}/pull/${{ github.event.pull_request.number }}
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://code.claude.com/docs/en/cli-reference for available options
+

package/.github/workflows/claude.yml

@@ -0,0 +1,81 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (
+        github.event_name == 'issue_comment' &&
+        contains(github.event.comment.body, '@claude') &&
+        (
+          github.event.comment.author_association == 'OWNER' ||
+          github.event.comment.author_association == 'MEMBER' ||
+          github.event.comment.author_association == 'COLLABORATOR'
+        )
+      ) ||
+      (
+        github.event_name == 'pull_request_review_comment' &&
+        contains(github.event.comment.body, '@claude') &&
+        (
+          github.event.comment.author_association == 'OWNER' ||
+          github.event.comment.author_association == 'MEMBER' ||
+          github.event.comment.author_association == 'COLLABORATOR'
+        )
+      ) ||
+      (
+        github.event_name == 'pull_request_review' &&
+        contains(github.event.review.body, '@claude') &&
+        (
+          github.event.review.author_association == 'OWNER' ||
+          github.event.review.author_association == 'MEMBER' ||
+          github.event.review.author_association == 'COLLABORATOR'
+        )
+      ) ||
+      (
+        github.event_name == 'issues' &&
+        (
+          contains(github.event.issue.body, '@claude') ||
+          contains(github.event.issue.title, '@claude')
+        ) &&
+        (
+          github.event.issue.author_association == 'OWNER' ||
+          github.event.issue.author_association == 'MEMBER' ||
+          github.event.issue.author_association == 'COLLABORATOR'
+        )
+      )
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+      issues: write
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1.0.0
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+
+          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
+          # prompt: 'Update the pull request description to include a summary of changes.'
+
+          # Optional: Add claude_args to customize behavior and configuration
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://code.claude.com/docs/en/cli-reference for available options
+          # claude_args: '--allowed-tools Bash(gh pr:*)'
+

package/.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Build
+        run: npm run build
+
+      - name: Publish to npm
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/CHANGELOG.md

@@ -1,20 +1,92 @@
-# 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.2.0] - 2026-01-26
+
+### Design
+
+- **S1 "Tight & Sharp" UI redesign**
+  - Tab bar navigation replaces vertical workspace list
+  - Inline pane editor replaces modal overlay
+  - Section-based layout with uppercase titles
+  - Reorganized preview toolbar with icon buttons
+  - 2-column form grid in pane editor
+- Refactor SCSS to modular DRY architecture
+  - Shared variables: spacing scale, border radius, colors, z-index
+  - Reusable mixins: flex-row, form-input, interactive-card, toolbar-btn
+  - All components migrated to use shared styles
+- Add design system documentation (docs/DESIGN.md)
+- Add HTML mockups for design exploration
+
+### Reliability
+
+- Improved duplicate workspace detection on Tabby restart
+  - Add workspaceId to recovery tokens
+  - Two-strategy detection (restored tabs + freshly opened)
+- Better shell initialization with 2s timeout and error handling
+- Wait for Tabby recovery before launching startup workspaces
+- Type-safe workspace detection with proper type guards
+
+### Bug Fixes
+
+- Fix focus lost after workspace delete (NgbModal replaces native confirm)
+- Fix split preview change detection (remove OnPush strategy)
+- Fix race condition in shell initialization
+
+### Infrastructure
+
+- Add CI/CD workflows (GitHub Actions for build + release)
+- Add dev branch workflow documentation
+
+### Technical
+
+- Code review cleanup and fixes
+- Consistent use of deepClone helper
+- Add deleteConfirmModal component
+- Improve singleton service patterns
+
+---
+
+## [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,12 +34,36 @@ 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
+├── styles/                  # Shared SCSS (modular DRY)
+│   ├── _variables.scss      # Spacing, radius, colors, z-index
+│   └── _mixins.scss         # Reusable patterns
 └── components/              # Angular components (.ts, .pug, .scss)
+    ├── workspaceList        # Main settings UI
+    ├── workspaceEditor      # Single workspace editor
+    ├── paneEditor           # Pane configuration
+    └── splitPreview         # Visual split preview
 ```
 
+## Styles
+
+Modular DRY SCSS architecture. All components load shared styles via `@use '../styles/index' as *;`.
+
+- **Variables**: `$spacing-*`, `$radius-*`, `$color-*`, `$z-*`, `$transition-*`
+- **Mixins**: Layout, form, card, and button patterns. See `src/styles/_mixins.scss` for the available mixins.
+- **Theming**: Uses Tabby's `--theme-*` CSS variables
+
+See `docs/DESIGN.md` for details.
+
 ## Build
 
 ```bash
@@ -37,7 +80,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 +122,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 +179,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 +200,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 +226,108 @@ 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;
+```
+
+## Angular Change Detection
+
+**KRITIČNO**: NE koristi `OnPush` strategiju na komponentama koje primaju mutirane objekte.
+
+### Pravilo
+- **NE koristi `OnPush`** ako parent komponenta mutira objekte umesto da kreira nove reference
+- Angular default strategija automatski detektuje sve promene
+- `OnPush` je samo za leaf komponente koje emituju events bez lokalnog state-a
+
+### Zašto
+- `OnPush` osvežava view samo kada se `@Input` referenca promeni
+- Mutacija objekta (npr. `workspace.root.children.push()`) NE menja referencu
+- Bez nove reference, Angular ne zna da treba re-renderovati
+
+### Komponente u ovom projektu
+- `workspaceEditor` - **default CD** (mutira workspace)
+- `workspaceList` - **default CD** (koristi `detectChanges()` za async operacije)
+- `splitPreview` - **default CD** (prima mutirane objekte)
+- `paneEditor` - može biti `OnPush` (samo emituje, nema mutacija)
+
 ## 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/CONTRIBUTING.md

@@ -49,7 +49,9 @@ No hot reload. Tabby doesn't support it for plugins. Restart after each build.
 2. Create a branch (`git checkout -b fix/thing`)
 3. Make your changes
 4. Test manually in Tabby
-5. Submit PR with a clear description
+5. Submit PR **to the `dev` branch** (not `main`)
+
+CI will check that your code builds. `main` is for releases only.
 
 No strict commit message format. Just be clear about what you changed and why.