feat: add kitty-inspired layout system with 7 layout modes

[devin-ai-integration]

Summary

Adds a complete kitty terminal emulator-inspired layout system to the Workspace IDE. This introduces 7 layout modes that control how panes are arranged within a workspace window:

• Stack — Single pane view; other panes hidden behind it with tab switching
• Tall — Full-height main pane(s) on the left, remaining panes stacked vertically on the right
• Fat — Full-width main pane(s) on top, remaining panes tiled horizontally on the bottom
• Grid — Balanced grid with all panes roughly equal size
• Splits — Manual recursive split layout (default, preserves existing behavior)
• Horizontal — All panes displayed side by side (columns)
• Vertical — All panes stacked one below the other (rows)

What's included:

• Layout engine (src/layouts/kittyLayouts.ts) — Algorithms that convert a flat list of panes into the appropriate PaneSplit tree for each layout mode
• LayoutSelector component — Dropdown in the TopBar for selecting layouts with live config controls (bias slider, full-size count, mirrored toggle for Tall/Fat)
• Keyboard shortcut — Ctrl+Shift+L cycles through enabled layouts
• Stack mode rendering — Shows only the active pane with a pane tab bar for switching
• kitty.conf — Configuration file reference documenting all layout options and shortcuts
• docs/KITTY_LAYOUTS.md — Full documentation covering all layouts, options, architecture, and types

Files changed:

• src/types/workspace.ts — Added KittyLayoutType, KittyLayoutConfig, layout labels and order
• src/layouts/kittyLayouts.ts — New layout engine with build functions for each layout
• src/stores/workspaceStore.ts — Added layout state, setKittyLayout, updateKittyLayoutConfig, cycleLayout actions
• src/components/layout/LayoutSelector.tsx — New dropdown component
• src/components/layout/WorkspaceLayout.tsx — Stack mode support
• src/components/layout/TopBar.tsx — Integrated LayoutSelector
• src/App.tsx — Added Ctrl+Shift+L shortcut
• src/index.css — Styles for layout selector and stack pane tabs
• kitty.conf — Configuration reference file
• docs/KITTY_LAYOUTS.md — Layout documentation

Review & Testing Checklist for Human

• Switch between all 7 layouts using the dropdown and verify pane arrangement matches expected behavior (Tall/Fat/Grid/Horizontal/Vertical/Stack/Splits)
• Test Tall and Fat layout options: adjust bias slider, increase full-size panes, toggle mirrored
• Verify Ctrl+Shift+L cycles through layouts correctly
• In Stack mode, confirm switching between panes via the pane tab bar works
• Verify that splitting panes and then switching layouts preserves all pane content

Notes

• The kitty.conf file is a reference configuration — it documents the layout options but is not parsed at runtime (the IDE uses the Zustand store directly)
• The Splits layout preserves the existing manual split behavior, so existing workflows are unaffected
• Build, lint, and type checks all pass

Link to Devin session: https://app.devin.ai/sessions/d432aed97ef54beb8e0512e2af2eaec2
Requested by: @Huynhthuongg

[devin-ai-integration]

Original prompt from Thuong

ATTACHMENT:"https://app.devin.ai/attachments/d45f5e07-522c-4192-9e18-ea229b4cb9ee/prompt-1777477058491.md"

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[Huynhthuongg]

HUỲNH THƯƠNG

[devin-ai-integration]

End-to-End Test Results — Kitty Layout System

All 4 tests passed. Ran dev server locally, tested all layouts via browser UI interactions.

Devin session

Escalations

None. No runtime issues found. Devin Review's 6 comments are all design observations, not runtime bugs.

---

Test 1: All 7 layouts render distinct arrangements — PASSED

Each layout selected via LayoutSelector dropdown. All 7 produce visually distinct pane arrangements and TopBar label updates correctly.

Splits (Default)	Tall

Fat	Horizontal

Vertical	Grid	Stack

Test 2: Stack mode tab bar switches pane content — PASSED

Clicked each tab in Stack mode. Content changed on each click — 3 distinct pane contents observed (Editor code, Preview "App not running", Console placeholder text).

Preview Tab	Console Tab

Test 3: Tall layout bias & mirrored controls affect rendering — PASSED

Bias slider changed from 50% → 75%: main pane visibly widened. Mirrored checkbox toggled: layout flipped left↔right.

Bias: 75%	Mirrored ON

Test 4: Ctrl+Shift+L cycles layouts sequentially — PASSED

Pressed Ctrl+Shift+L 3 times. Layout cycled: Tall → Fat → Grid → Splits. TopBar label updated on each press.

Fat (1st press)	Grid (2nd press)