Fix documentation inconsistencies from PR #3 review

CLAUDE.md

@@ -56,10 +56,10 @@ src/
 
 ## Styles
 
-Modular DRY SCSS architecture. All components import `@import '../styles/index'`.
+Modular DRY SCSS architecture. All components load shared styles via `@use '../styles/index' as *;`.
 
 - **Variables**: `$spacing-*`, `$radius-*`, `$color-*`, `$z-*`, `$transition-*`
-- **Mixins**: `flex-row`, `form-input`, `interactive-card`, `toolbar-btn`, `btn-success`, etc.
+- **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.

README.md

@@ -8,7 +8,7 @@ Visual workspace editor for [Tabby](https://tabby.sh). Create split-layout termi
 
 - **Visual split editor** - Design layouts inline, not in modal dialogs. Split horizontally, vertically, nest to any depth
 - **Layout toolbar** - Select a pane, then split, add adjacent panes, or delete with toolbar buttons
-- **Per-pane configuration** - Set profile, working directory, startup command, and custom title for each pane
+- **Per-pane configuration** - Set profile, working directory, and startup command for each pane
 - **One-click launch** - Open workspaces instantly from the toolbar dropdown
 - **Launch on startup** - Auto-open multiple workspaces when Tabby starts
 - **Any shell** - Works with Bash, Zsh, PowerShell, Nushell, cmd, WSL, and any other shell Tabby supports
@@ -47,7 +47,7 @@ Restart Tabby after installation.
 1. **Open settings** - Settings > TabbySpaces
 2. **Create workspace** - Click "New Workspace", name it
 3. **Design layout** - Click a pane to select it, use toolbar to split (horizontal/vertical)
-4. **Configure panes** - Hover over a pane, click the edit icon to set profile, cwd, startup command
+4. **Configure panes** - Click a pane (or use its context menu) to set profile, cwd, startup command
 5. **Save and launch** - Save changes, then click "Open" or use the toolbar dropdown
 
 ## Roadmap

docs/DESIGN.md

@@ -16,12 +16,12 @@ src/styles/
 All component SCSS files import shared styles:
 
 ```scss
-@import '../styles/index';
+@use '../styles/index' as *;
 
 .my-component {
   padding: $spacing-md;
   border-radius: $radius-lg;
-  @include flex-row($spacing-sm);
+  @include flex-center;
 }
 ```
 
@@ -35,15 +35,15 @@ Key mixins available:
 
 | Mixin | Purpose |
 |-------|---------|
-| `flex-row($gap)` | Horizontal flex with gap |
-| `flex-col($gap)` | Vertical flex with gap |
-| `flex-center` | Center content |
-| `flex-between` | Space between |
-| `form-input($bg)` | Styled input field |
-| `interactive-card($radius)` | Clickable card with hover/selected states |
-| `toolbar-btn` | Small toolbar button |
+| `flex-center` | Center content with flexbox |
+| `form-input($bg)` | Styled input field with focus state |
+| `form-label` | Uppercase compact label (S1 design) |
+| `toolbar-btn` | Small toolbar button with hover state |
 | `btn-success` | Green success button |
-| `icon-btn-opacity` | Icon with hover opacity |
+| `btn-base` | Base button styling with flex layout |
+| `btn-ghost` | Ghost button with border |
+| `btn-primary` | Primary button with theme color |
+| `icon-btn-sm($size)` | Small icon button with border |
 | `full-overlay($z)` | Fixed fullscreen overlay |
 | `dropdown-panel` | Dropdown with border/shadow |
 | `text-ellipsis` | Truncate text with ellipsis |

src/components/workspaceList.component.ts

@@ -98,16 +98,13 @@ export class WorkspaceListComponent implements OnInit, OnDestroy, AfterViewInit
   }
 
   createWorkspace(): void {
-    console.log('[L5 DEBUG] createWorkspace called, cachedProfiles:', this.cachedProfiles.length)
     const defaultProfileId = this.cachedProfiles[0]?.id || ''
     const workspace = createDefaultWorkspace()
     this.setProfileForAllPanes(workspace.root, defaultProfileId)
     this.selectedWorkspace = null
     this.editingWorkspace = workspace
     this.isCreatingNew = true
-    console.log('[L5 DEBUG] before updateDisplayTabs, isCreatingNew:', this.isCreatingNew, 'editingWorkspace:', !!this.editingWorkspace)
     this.updateDisplayTabs()
-    console.log('[L5 DEBUG] after updateDisplayTabs, displayTabs.length:', this.displayTabs.length)
     this.cdr.detectChanges()
   }