Louis Knight-Webb e1b0ef70a4 feat: Remember panel state per workspace (Vibe Kanban) (#2064)
* I've successfully implemented workspace-specific panel state persistence. Here's a summary of the changes:

## Summary

### Changes Made

1. **`frontend/src/stores/useUiPreferencesStore.ts`**
   - Added `WorkspacePanelState` type to track `rightMainPanelMode` and `isLeftMainPanelVisible` per workspace
   - Added `workspacePanelStates: Record<string, WorkspacePanelState>` to store state keyed by workspace ID
   - Updated `toggleLeftMainPanel`, `toggleRightMainPanelMode`, `setRightMainPanelMode`, and `setLeftMainPanelVisible` to accept an optional `workspaceId` parameter
   - Added `getWorkspacePanelState` and `setWorkspacePanelState` actions
   - Added `useWorkspacePanelState(workspaceId)` hook for easy consumption
   - Updated `partialize` to persist `workspacePanelStates` to localStorage

2. **`frontend/src/components/ui-new/containers/WorkspacesLayout.tsx`**
   - Changed from using `useUiPreferencesStore` directly to using `useWorkspacePanelState(workspaceId)` hook
   - Panel state is now workspace-specific

3. **`frontend/src/components/ui-new/actions/useActionVisibility.ts`**
   - Updated to use `useWorkspacePanelState` for visibility context

4. **`frontend/src/components/ui-new/actions/index.ts`**
   - Updated `ToggleLeftMainPanel`, `ToggleChangesMode`, `ToggleLogsMode`, `TogglePreviewMode`, and `ToggleDevServer` actions to pass `currentWorkspaceId` when toggling panel modes

### Scope

**Workspace-specific:**
- `rightMainPanelMode` - Which panel (Preview/Changes/Logs) is open
- `isLeftMainPanelVisible` - Whether the chat panel is visible

**Stays global:**
- `isLeftSidebarVisible` - Workspace list sidebar (navigation element)
- `isRightSidebarVisible` - Git/Settings sidebar (global actions)
- Panel sizes (already work correctly)

### Testing

Verified the feature works:
1. Opened Preview panel in Workspace A
2. Navigated to Workspace B → Preview panel is closed (default state)
3. Navigated back to Workspace A → Preview panel is still open ✓

* Cleanup script changes for workspace c8b73e59-ac41-4c0f-be78-7b6499d514f9

* The refactoring is complete. Let me provide a summary of the changes:

## Summary

Refactored `useUiPreferencesStore.ts` to remove duplicate code paths for workspace-specific panel state:

### Changes Made

1. **`frontend/src/stores/useUiPreferencesStore.ts`**
   - Removed legacy global state (`isLeftMainPanelVisible`, `rightMainPanelMode`) from State type and initialization
   - Simplified 4 panel state actions by removing `else` branches for legacy behavior:
     - `toggleLeftMainPanel` - now early-returns if no workspaceId
     - `toggleRightMainPanelMode` - simplified to single set() call
     - `setRightMainPanelMode` - simplified to single set() call
     - `setLeftMainPanelVisible` - simplified
   - Removed `resetForCreateMode` action (was only setting legacy state)
   - Removed unused `useIsRightMainPanelVisible` hook

2. **`frontend/src/contexts/WorkspaceContext.tsx`**
   - Removed the `useEffect` that called `resetForCreateMode()` on create mode
   - Removed unused `useUiPreferencesStore` import

3. **`frontend/src/contexts/LogsPanelContext.tsx`**
   - Updated to use `useWorkspacePanelState` with workspace ID from context

4. **`frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`**
   - Updated to use `useWorkspacePanelState` with workspace ID

### Impact

- **~50 lines removed** from the codebase
- **Cleaner code** - no more `if (workspaceId) ... else ...` branching in every action
- **Same behavior** - all callers were already passing workspaceId

* Cleanup script changes for workspace c8b73e59-ac41-4c0f-be78-7b6499d514f9
2026-01-15 12:29:17 +00:00
2025-08-08 13:53:27 +01:00
2026-01-15 10:58:39 +00:00
2026-01-14 22:07:00 +00:00
2025-11-14 15:37:56 +00:00
2025-12-16 10:55:27 +00:00
2025-11-14 15:37:56 +00:00
2026-01-15 10:58:39 +00:00
2026-01-08 11:29:44 +00:00
2025-07-11 15:57:30 +01:00
2025-12-15 19:42:13 +00:00
2025-07-11 16:31:08 +01:00
2026-01-15 10:58:39 +00:00
2025-06-25 09:27:29 +01:00

Vibe Kanban Logo

Get 10X more out of Claude Code, Gemini CLI, Codex, Amp and other coding agents...

npm Build status Ask DeepWiki

We're hiring!

Overview

AI coding agents are increasingly writing the world's code and human engineers now spend the majority of their time planning, reviewing, and orchestrating tasks. Vibe Kanban streamlines this process, enabling you to:

  • Easily switch between different coding agents
  • Orchestrate the execution of multiple coding agents in parallel or in sequence
  • Quickly review work and start dev servers
  • Track the status of tasks that your coding agents are working on
  • Centralise configuration of coding agent MCP configs
  • Open projects remotely via SSH when running Vibe Kanban on a remote server

You can watch a video overview here.

Installation

Make sure you have authenticated with your favourite coding agent. A full list of supported coding agents can be found in the docs. Then in your terminal run:

npx vibe-kanban

Documentation

Please head to the website for the latest documentation and user guides.

Support

We use GitHub Discussions for feature requests. Please open a discussion to create a feature request. For bugs please open an issue on this repo.

Contributing

We would prefer that ideas and changes are first raised with the core team via GitHub Discussions or Discord, where we can discuss implementation details and alignment with the existing roadmap. Please do not open PRs without first discussing your proposal with the team.

Development

Prerequisites

Additional development tools:

cargo install cargo-watch
cargo install sqlx-cli

Install dependencies:

pnpm i

Running the dev server

pnpm run dev

This will start the backend. A blank DB will be copied from the dev_assets_seed folder.

Building the frontend

To build just the frontend:

cd frontend
pnpm build

Build from source (macOS)

  1. Run ./local-build.sh
  2. Test with cd npx-cli && node bin/cli.js

Environment Variables

The following environment variables can be configured at build time or runtime:

Variable Type Default Description
POSTHOG_API_KEY Build-time Empty PostHog analytics API key (disables analytics if empty)
POSTHOG_API_ENDPOINT Build-time Empty PostHog analytics endpoint (disables analytics if empty)
PORT Runtime Auto-assign Production: Server port. Dev: Frontend port (backend uses PORT+1)
BACKEND_PORT Runtime 0 (auto-assign) Backend server port (dev mode only, overrides PORT+1)
FRONTEND_PORT Runtime 3000 Frontend dev server port (dev mode only, overrides PORT)
HOST Runtime 127.0.0.1 Backend server host
MCP_HOST Runtime Value of HOST MCP server connection host (use 127.0.0.1 when HOST=0.0.0.0 on Windows)
MCP_PORT Runtime Value of BACKEND_PORT MCP server connection port
DISABLE_WORKTREE_ORPHAN_CLEANUP Runtime Not set Disable git worktree cleanup (for debugging)

Build-time variables must be set when running pnpm run build. Runtime variables are read when the application starts.

Remote Deployment

When running Vibe Kanban on a remote server (e.g., via systemctl, Docker, or cloud hosting), you can configure your editor to open projects via SSH:

  1. Access via tunnel: Use Cloudflare Tunnel, ngrok, or similar to expose the web UI
  2. Configure remote SSH in Settings → Editor Integration:
    • Set Remote SSH Host to your server hostname or IP
    • Set Remote SSH User to your SSH username (optional)
  3. Prerequisites:
    • SSH access from your local machine to the remote server
    • SSH keys configured (passwordless authentication)
    • VSCode Remote-SSH extension

When configured, the "Open in VSCode" buttons will generate URLs like vscode://vscode-remote/ssh-remote+user@host/path that open your local editor and connect to the remote server.

See the documentation for detailed setup instructions.

Description
Get 10X more out of Claude Code, Codex or any coding agent
https://www.vibekanban.com/
Readme Apache-2.0 48 MiB
Languages
Rust 51.1%
TypeScript 46.6%
CSS 1.1%
JavaScript 0.7%
PLpgSQL 0.2%
Other 0.2%