daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add integrated terminal with PTY backend and xterm.js frontend (Vibe Kanban) (#2104)

Browse Source 
* integrated terminal

* ci

* persist terminal

* Done! I've moved the TerminalPanelContainer from the main panel area to the right sidebar. Here's a summary of the changes:

- Added `isTerminalVisible: boolean` to global state (defaults to `true`)
- Added `toggleTerminal()` and `setTerminalVisible(value)` actions
- Added `isTerminalVisible` to the persisted state and the `useWorkspacePanelState` hook

- Imported `TerminalPanelContainer` and `useUiPreferencesStore`
- Restructured the component to always include a terminal section at the bottom (when not in create mode and `isTerminalVisible` is true)
- Dynamic flex ratios:
  - With upper content + terminal: flex-4 (content) / flex-2 (git) / flex-4 (terminal)
  - Without upper content + terminal: flex-3 (git) / flex-7 (terminal)
  - When terminal is hidden: original ratios preserved

- Removed the `TerminalPanelContainer` import
- Removed the TERMINAL case from the right main panel rendering

- Added `isTerminalVisible` to `ActionVisibilityContext` interface
- Updated `ToggleTerminalMode` action to use `toggleTerminal()` and check `isTerminalVisible`

- Added `isTerminalVisible` from `panelState` to the visibility context

The terminal now appears permanently at the bottom of the right sidebar (when visible), and the toggle button collapses/expands just the terminal section within the sidebar. The visibility state is persisted to localStorage.

* Frontend ESLint passes with no errors. The backend Rust error (`crates/utils/src/shell.rs:31`) is a pre-existing issue in the codebase, not related to my changes.

* `cargo check` passes now. The fix was adding `.to_path_buf()` to convert the `&Path` reference to an owned `PathBuf`.

* The code compiles. Done! I've added three environment variables in `crates/local-deployment/src/pty.rs:73-75`:

1. `ZDOTDIR=/nonexistent` - prevents zsh from loading `~/.zshrc`
2. `PS1="$ "` - sets the bash prompt
3. `PROMPT="$ "` - sets the zsh prompt

The terminal prompt will now show just `$ ` instead of `lkw@Louiss-MacBook-Pro vibe-kanban %`. Run `pnpm run dev:qa` and open the terminal panel to verify.

* Cleanup script changes for workspace 928e696e-5f40-4603-9227-798f0520e07f

* Done! The fix is simpler - using `cmd.arg("-f")` to tell zsh/bash to skip loading config files. This:

1. Removes the `ZDOTDIR=/nonexistent` that was causing errors
2. Adds `-f` flag which skips `.zshrc`/`.bashrc` loading
3. Keeps `PS1` and `PROMPT` env vars which will now be respected

Run `pnpm run dev:qa` and open the terminal to verify the prompt shows `$ `.

* Cleanup script changes for workspace 928e696e-5f40-4603-9227-798f0520e07f

* I've implemented the terminal theme integration. Here's a summary of the changes:

## Changes Made

**1. Created `frontend/src/utils/terminalTheme.ts`**
- `hslToHex()` function to convert HSL CSS variable format (`"210 40% 98%"`) to hex colors
- `getCssVariable()` helper to read CSS variables from the `.new-design` element
- `getTerminalTheme()` function that builds an xterm.js `ITheme` object from CSS variables:
  - Uses `--console-background` and `--console-foreground` for main colors
  - Uses `--console-success` and `--console-error` for green/red ANSI colors
  - Provides appropriate ANSI color palettes for both light and dark modes

**2. Updated `frontend/src/components/ui-new/terminal/XTermInstance.tsx`**
- Imported `useTheme` hook and `getTerminalTheme` utility
- Replaced hardcoded Tokyo Night theme with dynamic `getTerminalTheme()` call
- Added effect to update terminal theme when app theme changes (`terminal.options.theme = getTerminalTheme()`)

The terminal will now:
- Initialize with colors matching the current theme
- Automatically update colors when switching between light and dark mode
- Use the console color variables defined in `index.css`

* Cleanup script changes for workspace 928e696e-5f40-4603-9227-798f0520e07f

* Now I understand the issue clearly. Here are the relevant variables:

| Variable | Light Mode | Dark Mode | Purpose |
|----------|------------|-----------|---------|
| `--_primary` | `0 0% 5%` (dark) | `240 4.8% 95.9%` (light) | Button background - **inverted** |
| `--_console-background` | `0 0% 100%` (white) | `0 0% 0%` (black) | Terminal background - **correct** |
| `--_console-foreground` | `0 0% 5%` (dark) | `210 40% 98%` (light) | Terminal text - **correct** |
| `--bg-primary` | `0 0% 100%` (white) | `0 0% 13%` (dark gray) | Page background |

The code was changed to use `--primary` but that's the wrong variable. For the terminal, you should use:
- `--console-background` / `--_console-background` for the background
- `--console-foreground` / `--_console-foreground` for the text

Or if you prefer to match other UI elements:
- `--bg-primary` for background
- `--text-high` for foreground text

Which approach would you prefer? The original `--console-*` variables were specifically designed for terminal styling, or we can use `--bg-primary`/`--text-high` to match the general UI background.

* Cleanup script changes for workspace 928e696e-5f40-4603-9227-798f0520e07f

* Done. The terminal will now use `--bg-primary` for the background and `--text-high` for the foreground text. This means:

- **Light mode**: White background (`0 0% 100%`) with dark text (`0 0% 5%`)
- **Dark mode**: Dark gray background (`0 0% 13%`) with light text (`0 0% 96%`)

* Done. The terminal will now use `--bg-secondary` for the background and `--text-high` for the foreground text. This means:

- **Light mode**: Light gray background (`0 0% 95%`) with dark text (`0 0% 5%`)
- **Dark mode**: Darker gray background (`0 0% 11%`) with light text (`0 0% 96%`)

* Let me know if you find any issues during testing or need adjustments!

* Cleanup script changes for workspace 928e696e-5f40-4603-9227-798f0520e07f

* terminal

* sidebar cleanup

* fix chat collapse

Amp-Thread-ID: https://ampcode.com/threads/T-019bc754-8db9-712a-a915-58d74d210cad
Co-authored-by: Amp <amp@ampcode.com>

* for the terminal on windows we need to default to powershell if avalibale for the pty  (vibe-kanban 049dbf73)

only if powershell.exe cannot be resolved, we should use cmd.

* he colour theme used for the terminal ui isn't visible enough in light mode (vibe-kanban 5f50878a)

t I think we either don't override the ANSI colour mapping with our own, or it's not contrasted enough

* fmt

---------

Co-authored-by: Gabriel Gordon-Hall <ggordonhall@gmail.com>
Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: Solomon <abcpro11051@disroot.org>
This commit is contained in:
Louis Knight-Webb
2026-01-16 17:56:28 +00:00
committed by GitHub
parent 10f6a9171a
commit d941e9a5e0
45 changed files with 2016 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
Cargo.lock generated
View File

@@ -1577,6 +1577,12 @@ version = "0.15.7"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1aaf95b3e5c8f23aa320147307562d361db0ae0d51242340f558153b4eb2439b" checksum = "1aaf95b3e5c8f23aa320147307562d361db0ae0d51242340f558153b4eb2439b"
[[package]]
name = "downcast-rs"
version = "1.2.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "75b325c5dbd37f80359721ad39aca5a29fb04c89279657cffdda8736d0c0b9d2"
[[package]] [[package]]
name = "dunce" name = "dunce"
version = "1.0.5" version = "1.0.5"
@@ -1868,6 +1874,17 @@ dependencies = [
"windows-sys 0.60.2", "windows-sys 0.60.2",
] ]
[[package]]
name = "filedescriptor"
version = "0.8.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e40758ed24c9b2eeb76c35fb0aebc66c626084edd827e07e1552279814c6682d"
dependencies = [
"libc",
"thiserror 1.0.69",
"winapi",
]
[[package]] [[package]]
name = "filetime" name = "filetime"
version = "0.2.26" version = "0.2.26"
@@ -2736,6 +2753,15 @@ dependencies = [
"generic-array", "generic-array",
] ]
[[package]]
name = "ioctl-rs"
version = "0.1.6"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f7970510895cee30b3e9128319f2cefd4bde883a39f38baa279567ba3a7eb97d"
dependencies = [
"libc",
]
[[package]] [[package]]
name = "ipnet" name = "ipnet"
version = "2.11.0" version = "2.11.0"
@@ -2998,6 +3024,7 @@ dependencies = [
"globwalk", "globwalk",
"json-patch", "json-patch",
"nix 0.29.0", "nix 0.29.0",
"portable-pty",
"reqwest", "reqwest",
"sentry", "sentry",
"serde_json", "serde_json",
@@ -3090,6 +3117,15 @@ version = "2.7.6"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f52b00d39961fc5b2736ea853c9cc86238e165017a493d1d5c8eac6bdc4cc273" checksum = "f52b00d39961fc5b2736ea853c9cc86238e165017a493d1d5c8eac6bdc4cc273"
[[package]]
name = "memoffset"
version = "0.6.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5aa361d4faea93603064a027415f07bd8e1d5c88c9fbf68bf56a285428fd79ce"
dependencies = [
"autocfg",
]
[[package]] [[package]]
name = "memoffset" name = "memoffset"
version = "0.9.1" version = "0.9.1"
@@ -3191,6 +3227,20 @@ dependencies = [
"version_check", "version_check",
] ]
[[package]]
name = "nix"
version = "0.25.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f346ff70e7dbfd675fe90590b92d59ef2de15a8779ae305ebcbfd3f0caf59be4"
dependencies = [
"autocfg",
"bitflags 1.3.2",
"cfg-if",
"libc",
"memoffset 0.6.5",
"pin-utils",
]
[[package]] [[package]]
name = "nix" name = "nix"
version = "0.27.1" version = "0.27.1"
@@ -3224,7 +3274,7 @@ dependencies = [
"cfg-if", "cfg-if",
"cfg_aliases", "cfg_aliases",
"libc", "libc",
"memoffset", "memoffset 0.9.1",
] ]
[[package]] [[package]]
@@ -3815,6 +3865,27 @@ version = "1.11.1"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f84267b20a16ea918e43c6a88433c2d54fa145c92a811b5b047ccbe153674483" checksum = "f84267b20a16ea918e43c6a88433c2d54fa145c92a811b5b047ccbe153674483"
[[package]]
name = "portable-pty"
version = "0.8.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "806ee80c2a03dbe1a9fb9534f8d19e4c0546b790cde8fd1fea9d6390644cb0be"
dependencies = [
"anyhow",
"bitflags 1.3.2",
"downcast-rs",
"filedescriptor",
"lazy_static",
"libc",
"log",
"nix 0.25.1",
"serial",
"shared_library",
"shell-words",
"winapi",
"winreg 0.10.1",
]
[[package]] [[package]]
name = "potential_utf" name = "potential_utf"
version = "0.1.4" version = "0.1.4"
@@ -4730,12 +4801,55 @@ dependencies = [
"syn 2.0.111", "syn 2.0.111",
] ]
[[package]]
name = "serial"
version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a1237a96570fc377c13baa1b88c7589ab66edced652e43ffb17088f003db3e86"
dependencies = [
"serial-core",
"serial-unix",
"serial-windows",
]
[[package]]
name = "serial-core"
version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3f46209b345401737ae2125fe5b19a77acce90cd53e1658cda928e4fe9a64581"
dependencies = [
"libc",
]
[[package]]
name = "serial-unix"
version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f03fbca4c9d866e24a459cbca71283f545a37f8e3e002ad8c70593871453cab7"
dependencies = [
"ioctl-rs",
"libc",
"serial-core",
"termios",
]
[[package]]
name = "serial-windows"
version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "15c6d3b776267a75d31bbdfd5d36c0ca051251caafc285827052bc53bcdc8162"
dependencies = [
"libc",
"serial-core",
]
[[package]] [[package]]
name = "server" name = "server"
version = "0.0.153" version = "0.0.153"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"axum", "axum",
"base64",
"chrono", "chrono",
"db", "db",
"deployment", "deployment",
@@ -4860,6 +4974,16 @@ dependencies = [
"lazy_static", "lazy_static",
] ]
[[package]]
name = "shared_library"
version = "0.1.9"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5a9e7e0f2bfae24d8a5b5a66c5b257a83c7412304311512a0c054cd5e619da11"
dependencies = [
"lazy_static",
"libc",
]
[[package]] [[package]]
name = "shell-words" name = "shell-words"
version = "1.1.1" version = "1.1.1"
@@ -5332,6 +5456,15 @@ dependencies = [
"winapi-util", "winapi-util",
] ]
[[package]]
name = "termios"
version = "0.2.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d5d9cf598a6d7ce700a4e6a9199da127e6819a61e64b68609683cc9a01b5683a"
dependencies = [
"libc",
]
[[package]] [[package]]
name = "thiserror" name = "thiserror"
version = "1.0.69" version = "1.0.69"
@@ -5825,7 +5958,7 @@ version = "1.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "89daebc3e6fd160ac4aa9fc8b3bf71e1f74fbf92367ae71fb83a037e8bf164b9" checksum = "89daebc3e6fd160ac4aa9fc8b3bf71e1f74fbf92367ae71fb83a037e8bf164b9"
dependencies = [ dependencies = [
"memoffset", "memoffset 0.9.1",
"tempfile", "tempfile",
"winapi", "winapi",
] ]
@@ -5970,7 +6103,7 @@ dependencies = [
"uuid", "uuid",
"which", "which",
"windows-sys 0.61.2", "windows-sys 0.61.2",
"winreg", "winreg 0.55.0",
] ]
[[package]] [[package]]
@@ -6616,6 +6749,15 @@ dependencies = [
"memchr", "memchr",
] ]
[[package]]
name = "winreg"
version = "0.10.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "80d0f4e272c85def139476380b12f9ac60926689dd2e01d4923222f40580869d"
dependencies = [
"winapi",
]
[[package]] [[package]]
name = "winreg" name = "winreg"
version = "0.55.0" version = "0.55.0"

1
crates/local-deployment/Cargo.toml
View File

@@ -26,6 +26,7 @@ futures = "0.3"
json-patch = "2.0" json-patch = "2.0"
tokio = { workspace = true } tokio = { workspace = true }
globwalk = "0.9" globwalk = "0.9"
portable-pty = "0.8"
[dev-dependencies] [dev-dependencies]
tempfile = "3.8" tempfile = "3.8"

11
crates/local-deployment/src/lib.rs
View File

@@ -30,10 +30,11 @@ use utils::{
}; };
use uuid::Uuid; use uuid::Uuid;
use crate::container::LocalContainerService; use crate::{container::LocalContainerService, pty::PtyService};
mod command; mod command;
pub mod container; pub mod container;
mod copy; mod copy;
pub mod pty;
#[derive(Clone)] #[derive(Clone)]
pub struct LocalDeployment { pub struct LocalDeployment {
@@ -56,6 +57,7 @@ pub struct LocalDeployment {
remote_client: Result<RemoteClient, RemoteClientNotConfigured>, remote_client: Result<RemoteClient, RemoteClientNotConfigured>,
auth_context: AuthContext, auth_context: AuthContext,
oauth_handoffs: Arc<RwLock<HashMap<Uuid, PendingHandoff>>>, oauth_handoffs: Arc<RwLock<HashMap<Uuid, PendingHandoff>>>,
pty: PtyService,
} }
#[derive(Debug, Clone)] #[derive(Debug, Clone)]
@@ -189,6 +191,8 @@ impl Deployment for LocalDeployment {
let file_search_cache = Arc::new(FileSearchCache::new()); let file_search_cache = Arc::new(FileSearchCache::new());
let pty = PtyService::new();
let deployment = Self { let deployment = Self {
config, config,
user_id, user_id,
@@ -209,6 +213,7 @@ impl Deployment for LocalDeployment {
remote_client, remote_client,
auth_context, auth_context,
oauth_handoffs, oauth_handoffs,
pty,
}; };
Ok(deployment) Ok(deployment)
@@ -340,4 +345,8 @@ impl LocalDeployment {
pub fn share_config(&self) -> Option<&ShareConfig> { pub fn share_config(&self) -> Option<&ShareConfig> {
self.share_config.as_ref() self.share_config.as_ref()
} }
pub fn pty(&self) -> &PtyService {
&self.pty
}
} }

220
crates/local-deployment/src/pty.rs Normal file
View File

@@ -0,0 +1,220 @@
use std::{
collections::HashMap,
io::{Read, Write},
path::PathBuf,
sync::{Arc, Mutex},
thread,
};
use portable_pty::{CommandBuilder, NativePtySystem, PtySize, PtySystem};
use thiserror::Error;
use tokio::sync::mpsc;
use utils::shell::get_interactive_shell;
use uuid::Uuid;
#[derive(Debug, Error)]
pub enum PtyError {
#[error("Failed to create PTY: {0}")]
CreateFailed(String),
#[error("Session not found: {0}")]
SessionNotFound(Uuid),
#[error("Failed to write to PTY: {0}")]
WriteFailed(String),
#[error("Failed to resize PTY: {0}")]
ResizeFailed(String),
#[error("Session already closed")]
SessionClosed,
}
struct PtySession {
writer: Box<dyn Write + Send>,
master: Box<dyn portable_pty::MasterPty + Send>,
_output_handle: thread::JoinHandle<()>,
closed: bool,
}
#[derive(Clone)]
pub struct PtyService {
sessions: Arc<Mutex<HashMap<Uuid, PtySession>>>,
}
impl PtyService {
pub fn new() -> Self {
Self {
sessions: Arc::new(Mutex::new(HashMap::new())),
}
}
pub async fn create_session(
&self,
working_dir: PathBuf,
cols: u16,
rows: u16,
) -> Result<(Uuid, mpsc::UnboundedReceiver<Vec<u8>>), PtyError> {
let session_id = Uuid::new_v4();
let (output_tx, output_rx) = mpsc::unbounded_channel();
let shell = get_interactive_shell().await;
let result = tokio::task::spawn_blocking(move || {
let pty_system = NativePtySystem::default();
let pty_pair = pty_system
.openpty(PtySize {
rows,
cols,
pixel_width: 0,
pixel_height: 0,
})
.map_err(|e| PtyError::CreateFailed(e.to_string()))?;
let mut cmd = CommandBuilder::new(&shell);
cmd.cwd(&working_dir);
// Configure shell-specific options
let shell_name = shell.file_name().and_then(|n| n.to_str()).unwrap_or("");
if shell_name == "powershell.exe" || shell_name == "pwsh.exe" {
// PowerShell: use -NoLogo for cleaner startup
cmd.arg("-NoLogo");
} else if shell_name == "cmd.exe" {
// cmd.exe: no special args needed
} else {
// Unix shells (bash, zsh, etc.): skip loading rc files
cmd.arg("-f");
cmd.env("PS1", "$ "); // Bash prompt
cmd.env("PROMPT", "$ "); // Zsh prompt
}
cmd.env("TERM", "xterm-256color");
cmd.env("COLORTERM", "truecolor");
let child = pty_pair
.slave
.spawn_command(cmd)
.map_err(|e| PtyError::CreateFailed(e.to_string()))?;
let writer = pty_pair
.master
.take_writer()
.map_err(|e| PtyError::CreateFailed(e.to_string()))?;
let mut reader = pty_pair
.master
.try_clone_reader()
.map_err(|e| PtyError::CreateFailed(e.to_string()))?;
let output_handle = thread::spawn(move || {
let mut buf = [0u8; 4096];
loop {
match reader.read(&mut buf) {
Ok(0) => break,
Ok(n) => {
if output_tx.send(buf[..n].to_vec()).is_err() {
break;
}
}
Err(_) => break,
}
}
drop(child);
});
Ok::<_, PtyError>((pty_pair.master, writer, output_handle))
})
.await
.map_err(|e| PtyError::CreateFailed(e.to_string()))??;
let (master, writer, output_handle) = result;
let session = PtySession {
writer,
master,
_output_handle: output_handle,
closed: false,
};
self.sessions
.lock()
.map_err(|e| PtyError::CreateFailed(e.to_string()))?
.insert(session_id, session);
Ok((session_id, output_rx))
}
pub async fn write(&self, session_id: Uuid, data: &[u8]) -> Result<(), PtyError> {
let mut sessions = self
.sessions
.lock()
.map_err(|e| PtyError::WriteFailed(e.to_string()))?;
let session = sessions
.get_mut(&session_id)
.ok_or(PtyError::SessionNotFound(session_id))?;
if session.closed {
return Err(PtyError::SessionClosed);
}
session
.writer
.write_all(data)
.map_err(|e| PtyError::WriteFailed(e.to_string()))?;
session
.writer
.flush()
.map_err(|e| PtyError::WriteFailed(e.to_string()))?;
Ok(())
}
pub async fn resize(&self, session_id: Uuid, cols: u16, rows: u16) -> Result<(), PtyError> {
let sessions = self
.sessions
.lock()
.map_err(|e| PtyError::ResizeFailed(e.to_string()))?;
let session = sessions
.get(&session_id)
.ok_or(PtyError::SessionNotFound(session_id))?;
if session.closed {
return Err(PtyError::SessionClosed);
}
session
.master
.resize(PtySize {
rows,
cols,
pixel_width: 0,
pixel_height: 0,
})
.map_err(|e| PtyError::ResizeFailed(e.to_string()))?;
Ok(())
}
pub async fn close_session(&self, session_id: Uuid) -> Result<(), PtyError> {
if let Some(mut session) = self
.sessions
.lock()
.map_err(|_| PtyError::SessionClosed)?
.remove(&session_id)
{
session.closed = true;
}
Ok(())
}
pub fn session_exists(&self, session_id: &Uuid) -> bool {
self.sessions
.lock()
.map(|s| s.contains_key(session_id))
.unwrap_or(false)
}
}
impl Default for PtyService {
fn default() -> Self {
Self::new()
}
}

1
crates/server/Cargo.toml
View File

@@ -39,6 +39,7 @@ strip-ansi-escapes = "0.2.1"
thiserror = { workspace = true } thiserror = { workspace = true }
os_info = "3.12.0" os_info = "3.12.0"
futures-util = "0.3" futures-util = "0.3"
base64 = "0.22"
ignore = "0.4" ignore = "0.4"
git2 = { workspace = true } git2 = { workspace = true }
mime_guess = "2.0" mime_guess = "2.0"

8
crates/server/src/error.rs
View File

@@ -12,6 +12,7 @@ use db::models::{
use deployment::{DeploymentError, RemoteClientNotConfigured}; use deployment::{DeploymentError, RemoteClientNotConfigured};
use executors::{command::CommandBuildError, executors::ExecutorError}; use executors::{command::CommandBuildError, executors::ExecutorError};
use git2::Error as Git2Error; use git2::Error as Git2Error;
use local_deployment::pty::PtyError;
use services::services::{ use services::services::{
config::{ConfigError, EditorOpenError}, config::{ConfigError, EditorOpenError},
container::ContainerError, container::ContainerError,
@@ -78,6 +79,8 @@ pub enum ApiError {
Forbidden(String), Forbidden(String),
#[error(transparent)] #[error(transparent)]
CommandBuilder(#[from] CommandBuildError), CommandBuilder(#[from] CommandBuildError),
#[error(transparent)]
Pty(#[from] PtyError),
} }
impl From<&'static str> for ApiError { impl From<&'static str> for ApiError {
@@ -180,6 +183,11 @@ impl IntoResponse for ApiError {
ApiError::BadRequest(_) => (StatusCode::BAD_REQUEST, "BadRequest"), ApiError::BadRequest(_) => (StatusCode::BAD_REQUEST, "BadRequest"),
ApiError::Conflict(_) => (StatusCode::CONFLICT, "ConflictError"), ApiError::Conflict(_) => (StatusCode::CONFLICT, "ConflictError"),
ApiError::Forbidden(_) => (StatusCode::FORBIDDEN, "ForbiddenError"), ApiError::Forbidden(_) => (StatusCode::FORBIDDEN, "ForbiddenError"),
ApiError::Pty(err) => match err {
PtyError::SessionNotFound(_) => (StatusCode::NOT_FOUND, "PtyError"),
PtyError::SessionClosed => (StatusCode::GONE, "PtyError"),
_ => (StatusCode::INTERNAL_SERVER_ERROR, "PtyError"),
},
}; };
let error_message = match &self { let error_message = match &self {

2
crates/server/src/routes/mod.rs
View File

@@ -25,6 +25,7 @@ pub mod shared_tasks;
pub mod tags; pub mod tags;
pub mod task_attempts; pub mod task_attempts;
pub mod tasks; pub mod tasks;
pub mod terminal;
pub fn router(deployment: DeploymentImpl) -> IntoMakeService<Router> { pub fn router(deployment: DeploymentImpl) -> IntoMakeService<Router> {
// Create routers with different middleware layers // Create routers with different middleware layers
@@ -46,6 +47,7 @@ pub fn router(deployment: DeploymentImpl) -> IntoMakeService<Router> {
.merge(approvals::router()) .merge(approvals::router())
.merge(scratch::router(&deployment)) .merge(scratch::router(&deployment))
.merge(sessions::router(&deployment)) .merge(sessions::router(&deployment))
.merge(terminal::router())
.nest("/images", images::routes()) .nest("/images", images::routes())
.with_state(deployment); .with_state(deployment);

173
crates/server/src/routes/terminal.rs Normal file
View File

@@ -0,0 +1,173 @@
use std::path::PathBuf;
use axum::{
Router,
extract::{
Query, State,
ws::{Message, WebSocket, WebSocketUpgrade},
},
response::IntoResponse,
routing::get,
};
use base64::{Engine, engine::general_purpose::STANDARD as BASE64};
use db::models::{workspace::Workspace, workspace_repo::WorkspaceRepo};
use deployment::Deployment;
use futures_util::{SinkExt, StreamExt};
use serde::{Deserialize, Serialize};
use uuid::Uuid;
use crate::{DeploymentImpl, error::ApiError};
#[derive(Debug, Deserialize)]
pub struct TerminalQuery {
pub workspace_id: Uuid,
#[serde(default = "default_cols")]
pub cols: u16,
#[serde(default = "default_rows")]
pub rows: u16,
}
fn default_cols() -> u16 {
80
}
fn default_rows() -> u16 {
24
}
#[derive(Debug, Deserialize)]
#[serde(tag = "type", rename_all = "snake_case")]
enum TerminalCommand {
Input { data: String },
Resize { cols: u16, rows: u16 },
}
#[derive(Debug, Serialize)]
#[serde(tag = "type", rename_all = "snake_case")]
enum TerminalMessage {
Output { data: String },
Error { message: String },
}
pub async fn terminal_ws(
ws: WebSocketUpgrade,
State(deployment): State<DeploymentImpl>,
Query(query): Query<TerminalQuery>,
) -> Result<impl IntoResponse, ApiError> {
let attempt = Workspace::find_by_id(&deployment.db().pool, query.workspace_id)
.await?
.ok_or_else(|| ApiError::BadRequest("Attempt not found".to_string()))?;
let container_ref = attempt
.container_ref
.ok_or_else(|| ApiError::BadRequest("Attempt has no workspace directory".to_string()))?;
let base_dir = PathBuf::from(&container_ref);
if !base_dir.exists() {
return Err(ApiError::BadRequest(
"Workspace directory does not exist".to_string(),
));
}
let mut working_dir = base_dir.clone();
match WorkspaceRepo::find_repos_for_workspace(&deployment.db().pool, query.workspace_id).await {
Ok(repos) if repos.len() == 1 => {
let repo_dir = base_dir.join(&repos[0].name);
if repo_dir.exists() {
working_dir = repo_dir;
}
}
Ok(_) => {}
Err(e) => {
tracing::warn!(
"Failed to resolve repos for workspace {}: {}",
attempt.id,
e
);
}
}
Ok(ws.on_upgrade(move |socket| {
handle_terminal_ws(socket, deployment, working_dir, query.cols, query.rows)
}))
}
async fn handle_terminal_ws(
socket: WebSocket,
deployment: DeploymentImpl,
working_dir: PathBuf,
cols: u16,
rows: u16,
) {
let (session_id, mut output_rx) = match deployment
.pty()
.create_session(working_dir, cols, rows)
.await
{
Ok(result) => result,
Err(e) => {
tracing::error!("Failed to create PTY session: {}", e);
let _ = send_error(socket, &e.to_string()).await;
return;
}
};
let (mut ws_sender, mut ws_receiver) = socket.split();
let pty_service = deployment.pty().clone();
let session_id_for_input = session_id;
let output_task = tokio::spawn(async move {
while let Some(data) = output_rx.recv().await {
let msg = TerminalMessage::Output {
data: BASE64.encode(&data),
};
let json = match serde_json::to_string(&msg) {
Ok(j) => j,
Err(_) => continue,
};
if ws_sender.send(Message::Text(json.into())).await.is_err() {
break;
}
}
ws_sender
});
while let Some(Ok(msg)) = ws_receiver.next().await {
match msg {
Message::Text(text) => {
if let Ok(cmd) = serde_json::from_str::<TerminalCommand>(&text) {
match cmd {
TerminalCommand::Input { data } => {
if let Ok(bytes) = BASE64.decode(&data) {
let _ = pty_service.write(session_id_for_input, &bytes).await;
}
}
TerminalCommand::Resize { cols, rows } => {
let _ = pty_service.resize(session_id_for_input, cols, rows).await;
}
}
}
}
Message::Close(_) => break,
_ => {}
}
}
let _ = deployment.pty().close_session(session_id).await;
output_task.abort();
}
async fn send_error(mut socket: WebSocket, message: &str) -> Result<(), axum::Error> {
let msg = TerminalMessage::Error {
message: message.to_string(),
};
let json = serde_json::to_string(&msg).unwrap_or_default();
socket.send(Message::Text(json.into())).await?;
socket.close().await?;
Ok(())
}
pub fn router() -> Router<DeploymentImpl> {
Router::new().route("/terminal/ws", get(terminal_ws))
}

18
crates/utils/src/shell.rs
View File

@@ -22,6 +22,24 @@ pub fn get_shell_command() -> (String, &'static str) {
} }
} }
/// Returns the path to an interactive shell for the current platform.
/// Used for spawning PTY sessions.
///
/// On Windows, prefers PowerShell if available, falling back to cmd.exe.
/// On Unix, returns the user's configured shell from $SHELL.
pub async fn get_interactive_shell() -> PathBuf {
if cfg!(windows) {
// Prefer PowerShell if available, fall back to cmd.exe
if let Some(powershell) = resolve_executable_path("powershell.exe").await {
powershell
} else {
PathBuf::from("cmd.exe")
}
} else {
UnixShell::current_shell().path().to_path_buf()
}
}
/// Resolve an executable by name, falling back to a refreshed PATH if needed. /// Resolve an executable by name, falling back to a refreshed PATH if needed.
/// ///
/// The search order is: /// The search order is:

4
frontend/package.json
View File

@@ -79,7 +79,11 @@
"tailwind-merge": "^2.2.0", "tailwind-merge": "^2.2.0",
"tailwind-scrollbar": "^3.1.0", "tailwind-scrollbar": "^3.1.0",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"react-use-websocket": "^4.13.0",
"vibe-kanban-web-companion": "^0.0.4", "vibe-kanban-web-companion": "^0.0.4",
"@xterm/addon-fit": "^0.10.0",
"@xterm/addon-web-links": "^0.11.0",
"@xterm/xterm": "^5.5.0",
"wa-sqlite": "^1.0.0", "wa-sqlite": "^1.0.0",
"zustand": "^4.5.4" "zustand": "^4.5.4"
}, },

5
frontend/src/App.tsx
View File

@@ -38,6 +38,7 @@ import { ClickedElementsProvider } from './contexts/ClickedElementsProvider';
// Design scope components // Design scope components
import { LegacyDesignScope } from '@/components/legacy-design/LegacyDesignScope'; import { LegacyDesignScope } from '@/components/legacy-design/LegacyDesignScope';
import { NewDesignScope } from '@/components/ui-new/scope/NewDesignScope'; import { NewDesignScope } from '@/components/ui-new/scope/NewDesignScope';
import { TerminalProvider } from '@/contexts/TerminalContext';
// New design pages // New design pages
import { Workspaces } from '@/pages/ui-new/Workspaces'; import { Workspaces } from '@/pages/ui-new/Workspaces';
@@ -184,7 +185,9 @@ function AppContent() {
path="/workspaces" path="/workspaces"
element={ element={
<NewDesignScope> <NewDesignScope>
<NewDesignLayout /> <TerminalProvider>
<NewDesignLayout />
</TerminalProvider>
</NewDesignScope> </NewDesignScope>
} }
> >

72
frontend/src/components/ui-new/containers/GitPanelCreateContainer.tsx
View File

@@ -1,72 +0,0 @@
import { useMemo, useEffect, useCallback } from 'react';
import { GitPanelCreate } from '@/components/ui-new/views/GitPanelCreate';
import { useMultiRepoBranches } from '@/hooks/useRepoBranches';
import { useProjects } from '@/hooks/useProjects';
import { useCreateMode } from '@/contexts/CreateModeContext';
import { CreateProjectDialog } from '@/components/ui-new/dialogs/CreateProjectDialog';
interface GitPanelCreateContainerProps {
className?: string;
}
export function GitPanelCreateContainer({
className,
}: GitPanelCreateContainerProps) {
const {
repos,
addRepo,
removeRepo,
clearRepos,
targetBranches,
setTargetBranch,
selectedProjectId,
setSelectedProjectId,
} = useCreateMode();
const { projects } = useProjects();
const repoIds = useMemo(() => repos.map((r) => r.id), [repos]);
const { branchesByRepo } = useMultiRepoBranches(repoIds);
// Auto-select current branch when branches load
useEffect(() => {
repos.forEach((repo) => {
const branches = branchesByRepo[repo.id];
if (branches && !targetBranches[repo.id]) {
const currentBranch = branches.find((b) => b.is_current);
if (currentBranch) {
setTargetBranch(repo.id, currentBranch.name);
}
}
});
}, [repos, branchesByRepo, targetBranches, setTargetBranch]);
const selectedProject = projects.find((p) => p.id === selectedProjectId);
const registeredRepoPaths = useMemo(() => repos.map((r) => r.path), [repos]);
const handleCreateProject = useCallback(async () => {
const result = await CreateProjectDialog.show({});
if (result.status === 'saved') {
setSelectedProjectId(result.project.id);
clearRepos();
}
}, [setSelectedProjectId, clearRepos]);
return (
<GitPanelCreate
className={className}
repos={repos}
projects={projects}
selectedProjectId={selectedProjectId}
selectedProjectName={selectedProject?.name}
onProjectSelect={(p) => setSelectedProjectId(p.id)}
onCreateProject={handleCreateProject}
onRepoRemove={removeRepo}
branchesByRepo={branchesByRepo}
targetBranches={targetBranches}
onBranchChange={setTargetBranch}
registeredRepoPaths={registeredRepoPaths}
onRepoRegistered={addRepo}
/>
);
}

48
frontend/src/components/ui-new/containers/ProcessListContainer.tsx
View File

@@ -3,10 +3,8 @@ import { useTranslation } from 'react-i18next';
import { useExecutionProcessesContext } from '@/contexts/ExecutionProcessesContext'; import { useExecutionProcessesContext } from '@/contexts/ExecutionProcessesContext';
import { useLogsPanel } from '@/contexts/LogsPanelContext'; import { useLogsPanel } from '@/contexts/LogsPanelContext';
import { ProcessListItem } from '../primitives/ProcessListItem'; import { ProcessListItem } from '../primitives/ProcessListItem';
import { CollapsibleSectionHeader } from '../primitives/CollapsibleSectionHeader';
import { InputField } from '../primitives/InputField'; import { InputField } from '../primitives/InputField';
import { CaretUpIcon, CaretDownIcon } from '@phosphor-icons/react'; import { CaretUpIcon, CaretDownIcon } from '@phosphor-icons/react';
import { PERSIST_KEYS } from '@/stores/useUiPreferencesStore';
export function ProcessListContainer() { export function ProcessListContainer() {
const { const {
@@ -73,7 +71,7 @@ export function ProcessListContainer() {
const searchBar = showSearch && ( const searchBar = showSearch && (
<div <div
className="p-base flex items-center gap-2 shrink-0" className="my-base flex items-center gap-2 shrink-0"
onKeyDown={handleSearchKeyDown} onKeyDown={handleSearchKeyDown}
> >
<InputField <InputField
@@ -117,31 +115,25 @@ export function ProcessListContainer() {
); );
return ( return (
<div className="h-full w-full bg-secondary flex flex-col overflow-hidden"> <div className="h-full w-full bg-secondary flex flex-col overflow-hidden p-base">
<CollapsibleSectionHeader {sortedProcesses.length === 0 ? (
title={t('sections.processes')} <div className="h-full flex items-center justify-center text-low">
persistKey={PERSIST_KEYS.processesSection} <p className="text-sm">{t('processes.noProcesses')}</p>
contentClassName="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-panel scrollbar-track-transparent p-base min-h-0" </div>
> ) : (
{sortedProcesses.length === 0 ? ( <div className="space-y-0">
<div className="h-full flex items-center justify-center text-low"> {sortedProcesses.map((process) => (
<p className="text-sm">{t('processes.noProcesses')}</p> <ProcessListItem
</div> key={process.id}
) : ( runReason={process.run_reason}
<div className="space-y-0"> status={process.status}
{sortedProcesses.map((process) => ( startedAt={process.started_at}
<ProcessListItem selected={process.id === selectedProcessId}
key={process.id} onClick={() => handleSelectProcess(process.id)}
runReason={process.run_reason} />
status={process.status} ))}
startedAt={process.started_at} </div>
selected={process.id === selectedProcessId} )}
onClick={() => handleSelectProcess(process.id)}
/>
))}
</div>
)}
</CollapsibleSectionHeader>
{searchBar} {searchBar}
</div> </div>
); );

166
frontend/src/components/ui-new/containers/ProjectSelectorContainer.tsx
View File

@@ -139,89 +139,91 @@ export function ProjectSelectorContainer({
}, [onCreateProject]); }, [onCreateProject]);
return ( return (
<DropdownMenu open={dropdownOpen} onOpenChange={handleOpenChange}> <div className="p-base w-full">
<DropdownMenuTrigger asChild> <DropdownMenu open={dropdownOpen} onOpenChange={handleOpenChange}>
<button <DropdownMenuTrigger asChild>
type="button" <button
className={cn( type="button"
'flex items-center justify-between w-full px-base py-half', className={cn(
'text-sm text-left rounded border bg-secondary', 'flex items-center justify-between w-full px-base py-half',
'hover:bg-tertiary transition-colors', 'text-sm text-left rounded border bg-secondary',
'focus:outline-none focus:ring-1 focus:ring-accent' 'hover:bg-tertiary transition-colors',
)} 'focus:outline-none focus:ring-1 focus:ring-accent'
> )}
<span className={selectedProjectName ? '' : 'text-low'}>
{selectedProjectName ?? 'Select project'}
</span>
<svg
className="h-4 w-4 text-low"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
> >
<path <span className={selectedProjectName ? '' : 'text-low'}>
strokeLinecap="round" {selectedProjectName ?? 'Select project'}
strokeLinejoin="round" </span>
strokeWidth={2} <svg
d="M19 9l-7 7-7-7" className="h-4 w-4 text-low"
/> fill="none"
</svg> stroke="currentColor"
</button> viewBox="0 0 24 24"
</DropdownMenuTrigger> >
<DropdownMenuContent> <path
<DropdownMenuSearchInput strokeLinecap="round"
placeholder="Search projects..." strokeLinejoin="round"
value={searchTerm} strokeWidth={2}
onValueChange={handleSearchTermChange} d="M19 9l-7 7-7-7"
onKeyDown={handleKeyDown} />
/> </svg>
<DropdownMenuSeparator /> </button>
{/* Create new project button */} </DropdownMenuTrigger>
<DropdownMenuItem <DropdownMenuContent>
onSelect={handleCreateClick} <DropdownMenuSearchInput
onMouseEnter={() => setHighlightedIndex(0)} placeholder="Search projects..."
preventFocusOnHover value={searchTerm}
icon={PlusIcon} onValueChange={handleSearchTermChange}
className={cn( onKeyDown={handleKeyDown}
'text-accent',
safeHighlightedIndex === 0 && 'bg-secondary'
)}
>
{t('projects.createNew')}
</DropdownMenuItem>
<DropdownMenuSeparator />
{filteredItems.length === 0 ? (
<div className="px-base py-half text-sm text-low text-center">
{t('projects.noProjectsFound')}
</div>
) : (
<Virtuoso
ref={virtuosoRef}
style={{ height: '14rem' }}
totalCount={filteredItems.length}
computeItemKey={(idx) => filteredItems[idx]?.id ?? String(idx)}
itemContent={(idx) => {
const item = filteredItems[idx];
// Highlight index is offset by 1 (create button is at 0)
const isHighlighted = idx + 1 === safeHighlightedIndex;
const isSelected = selectedProjectId === item.id;
return (
<DropdownMenuItem
onSelect={() => handleSelect(item)}
onMouseEnter={() => setHighlightedIndex(idx + 1)}
preventFocusOnHover
className={cn(
isSelected && 'bg-secondary',
isHighlighted && 'bg-secondary'
)}
>
{item.name}
</DropdownMenuItem>
);
}}
/> />
)} <DropdownMenuSeparator />
</DropdownMenuContent> {/* Create new project button */}
</DropdownMenu> <DropdownMenuItem
onSelect={handleCreateClick}
onMouseEnter={() => setHighlightedIndex(0)}
preventFocusOnHover
icon={PlusIcon}
className={cn(
'text-accent',
safeHighlightedIndex === 0 && 'bg-secondary'
)}
>
{t('projects.createNew')}
</DropdownMenuItem>
<DropdownMenuSeparator />
{filteredItems.length === 0 ? (
<div className="px-base py-half text-sm text-low text-center">
{t('projects.noProjectsFound')}
</div>
) : (
<Virtuoso
ref={virtuosoRef}
style={{ height: '14rem' }}
totalCount={filteredItems.length}
computeItemKey={(idx) => filteredItems[idx]?.id ?? String(idx)}
itemContent={(idx) => {
const item = filteredItems[idx];
// Highlight index is offset by 1 (create button is at 0)
const isHighlighted = idx + 1 === safeHighlightedIndex;
const isSelected = selectedProjectId === item.id;
return (
<DropdownMenuItem
onSelect={() => handleSelect(item)}
onMouseEnter={() => setHighlightedIndex(idx + 1)}
preventFocusOnHover
className={cn(
isSelected && 'bg-secondary',
isHighlighted && 'bg-secondary'
)}
>
{item.name}
</DropdownMenuItem>
);
}}
/>
)}
</DropdownMenuContent>
</DropdownMenu>
</div>
); );
} }

323
frontend/src/components/ui-new/containers/RightSidebar.tsx
View File

@@ -1,16 +1,41 @@
import { GitPanelCreateContainer } from '@/components/ui-new/containers/GitPanelCreateContainer'; import { useMemo, useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FileTreeContainer } from '@/components/ui-new/containers/FileTreeContainer'; import { FileTreeContainer } from '@/components/ui-new/containers/FileTreeContainer';
import { ProcessListContainer } from '@/components/ui-new/containers/ProcessListContainer'; import { ProcessListContainer } from '@/components/ui-new/containers/ProcessListContainer';
import { PreviewControlsContainer } from '@/components/ui-new/containers/PreviewControlsContainer'; import { PreviewControlsContainer } from '@/components/ui-new/containers/PreviewControlsContainer';
import { GitPanelContainer } from '@/components/ui-new/containers/GitPanelContainer'; import { GitPanelContainer } from '@/components/ui-new/containers/GitPanelContainer';
import { TerminalPanelContainer } from '@/components/ui-new/containers/TerminalPanelContainer';
import { ProjectSelectorContainer } from '@/components/ui-new/containers/ProjectSelectorContainer';
import { RecentReposListContainer } from '@/components/ui-new/containers/RecentReposListContainer';
import { BrowseRepoButtonContainer } from '@/components/ui-new/containers/BrowseRepoButtonContainer';
import { CreateRepoButtonContainer } from '@/components/ui-new/containers/CreateRepoButtonContainer';
import { useChangesView } from '@/contexts/ChangesViewContext'; import { useChangesView } from '@/contexts/ChangesViewContext';
import { useWorkspaceContext } from '@/contexts/WorkspaceContext'; import { useWorkspaceContext } from '@/contexts/WorkspaceContext';
import { useCreateMode } from '@/contexts/CreateModeContext';
import { useMultiRepoBranches } from '@/hooks/useRepoBranches';
import { useProjects } from '@/hooks/useProjects';
import { CreateProjectDialog } from '@/components/ui-new/dialogs/CreateProjectDialog';
import { SelectedReposList } from '@/components/ui-new/primitives/SelectedReposList';
import { WarningIcon } from '@phosphor-icons/react';
import type { Workspace, RepoWithTargetBranch } from 'shared/types'; import type { Workspace, RepoWithTargetBranch } from 'shared/types';
import { import {
RIGHT_MAIN_PANEL_MODES, RIGHT_MAIN_PANEL_MODES,
PERSIST_KEYS,
type RightMainPanelMode, type RightMainPanelMode,
useExpandedAll, useExpandedAll,
usePersistedExpanded,
useUiPreferencesStore,
PersistKey,
} from '@/stores/useUiPreferencesStore'; } from '@/stores/useUiPreferencesStore';
import { CollapsibleSectionHeader } from '../primitives/CollapsibleSectionHeader';
type SectionDef = {
title: string;
persistKey: PersistKey;
visible: boolean;
expanded: boolean;
content: React.ReactNode;
};
export interface RightSidebarProps { export interface RightSidebarProps {
isCreateMode: boolean; isCreateMode: boolean;
@@ -25,78 +50,258 @@ export function RightSidebar({
selectedWorkspace, selectedWorkspace,
repos, repos,
}: RightSidebarProps) { }: RightSidebarProps) {
const { t } = useTranslation(['tasks', 'common']);
const { selectFile } = useChangesView(); const { selectFile } = useChangesView();
const { diffs } = useWorkspaceContext(); const { diffs } = useWorkspaceContext();
const { setExpanded } = useExpandedAll(); const { setExpanded } = useExpandedAll();
const isTerminalVisible = useUiPreferencesStore((s) => s.isTerminalVisible);
if (isCreateMode) { const {
return <GitPanelCreateContainer />; repos: createRepos,
} addRepo,
removeRepo,
clearRepos,
targetBranches,
setTargetBranch,
selectedProjectId,
setSelectedProjectId,
} = useCreateMode();
const { projects } = useProjects();
if (rightMainPanelMode === RIGHT_MAIN_PANEL_MODES.CHANGES) { const repoIds = useMemo(() => createRepos.map((r) => r.id), [createRepos]);
return ( const { branchesByRepo } = useMultiRepoBranches(repoIds);
<div className="flex flex-col h-full">
<div className="flex-[7] min-h-0 overflow-hidden"> useEffect(() => {
<FileTreeContainer if (!isCreateMode) return;
key={selectedWorkspace?.id} createRepos.forEach((repo) => {
workspaceId={selectedWorkspace?.id} const branches = branchesByRepo[repo.id];
diffs={diffs} if (branches && !targetBranches[repo.id]) {
onSelectFile={(path) => { const currentBranch = branches.find((b) => b.is_current);
selectFile(path); if (currentBranch) {
setExpanded(`diff:${path}`, true); setTargetBranch(repo.id, currentBranch.name);
}} }
/> }
</div> });
<div className="flex-[3] min-h-0 overflow-hidden"> }, [
isCreateMode,
createRepos,
branchesByRepo,
targetBranches,
setTargetBranch,
]);
const [changesExpanded] = usePersistedExpanded(
PERSIST_KEYS.changesSection,
true
);
const [processesExpanded] = usePersistedExpanded(
PERSIST_KEYS.processesSection,
true
);
const [devServerExpanded] = usePersistedExpanded(
PERSIST_KEYS.devServerSection,
true
);
const [gitExpanded] = usePersistedExpanded(
PERSIST_KEYS.gitPanelRepositories,
true
);
const [terminalExpanded] = usePersistedExpanded(
PERSIST_KEYS.terminalSection,
true
);
const selectedProject = projects.find((p) => p.id === selectedProjectId);
const registeredRepoPaths = useMemo(
() => createRepos.map((r) => r.path),
[createRepos]
);
const handleCreateProject = useCallback(async () => {
const result = await CreateProjectDialog.show({});
if (result.status === 'saved') {
setSelectedProjectId(result.project.id);
clearRepos();
}
}, [setSelectedProjectId, clearRepos]);
const hasNoRepos = createRepos.length === 0;
const hasUpperContent =
rightMainPanelMode === RIGHT_MAIN_PANEL_MODES.CHANGES ||
rightMainPanelMode === RIGHT_MAIN_PANEL_MODES.LOGS ||
rightMainPanelMode === RIGHT_MAIN_PANEL_MODES.PREVIEW;
const getUpperExpanded = () => {
if (rightMainPanelMode === RIGHT_MAIN_PANEL_MODES.CHANGES)
return changesExpanded;
if (rightMainPanelMode === RIGHT_MAIN_PANEL_MODES.LOGS)
return processesExpanded;
if (rightMainPanelMode === RIGHT_MAIN_PANEL_MODES.PREVIEW)
return devServerExpanded;
return false;
};
const upperExpanded = getUpperExpanded();
const sections: SectionDef[] = isCreateMode
? [
{
title: t('common:sections.project'),
persistKey: PERSIST_KEYS.gitPanelProject,
visible: true,
expanded: true,
content: (
<div className="p-base">
<ProjectSelectorContainer
projects={projects}
selectedProjectId={selectedProjectId}
selectedProjectName={selectedProject?.name}
onProjectSelect={(p) => setSelectedProjectId(p.id)}
onCreateProject={handleCreateProject}
/>
</div>
),
},
{
title: t('common:sections.repositories'),
persistKey: PERSIST_KEYS.gitPanelRepositories,
visible: true,
expanded: true,
content: hasNoRepos ? (
<div className="p-base">
<div className="flex items-center gap-2 p-base rounded bg-warning/10 border border-warning/20">
<WarningIcon className="h-4 w-4 text-warning shrink-0" />
<p className="text-sm text-warning">
{t('gitPanel.create.warnings.noReposSelected')}
</p>
</div>
</div>
) : (
<SelectedReposList
repos={createRepos}
onRemove={removeRepo}
branchesByRepo={branchesByRepo}
selectedBranches={targetBranches}
onBranchChange={setTargetBranch}
/>
),
},
{
title: t('common:sections.addRepositories'),
persistKey: PERSIST_KEYS.gitPanelAddRepositories,
visible: true,
expanded: true,
content: (
<div className="flex flex-col gap-base p-base">
<p className="text-xs text-low font-medium">
{t('common:sections.recent')}
</p>
<RecentReposListContainer
registeredRepoPaths={registeredRepoPaths}
onRepoRegistered={addRepo}
/>
<p className="text-xs text-low font-medium">
{t('common:sections.other')}
</p>
<BrowseRepoButtonContainer onRepoRegistered={addRepo} />
<CreateRepoButtonContainer onRepoCreated={addRepo} />
</div>
),
},
]
: buildWorkspaceSections();
function buildWorkspaceSections(): SectionDef[] {
const result: SectionDef[] = [
{
title: 'Git',
persistKey: PERSIST_KEYS.gitPanelRepositories,
visible: true,
expanded: gitExpanded,
content: (
<GitPanelContainer <GitPanelContainer
selectedWorkspace={selectedWorkspace} selectedWorkspace={selectedWorkspace}
repos={repos} repos={repos}
diffs={diffs} diffs={diffs}
/> />
</div> ),
</div> },
); {
} title: 'Terminal',
persistKey: PERSIST_KEYS.terminalSection,
visible: isTerminalVisible,
expanded: terminalExpanded,
content: <TerminalPanelContainer />,
},
];
if (rightMainPanelMode === RIGHT_MAIN_PANEL_MODES.LOGS) { switch (rightMainPanelMode) {
return ( case RIGHT_MAIN_PANEL_MODES.CHANGES:
<div className="flex flex-col h-full"> result.unshift({
<div className="flex-[7] min-h-0 overflow-hidden"> title: 'Changes',
<ProcessListContainer /> persistKey: PERSIST_KEYS.changesSection,
</div> visible: hasUpperContent,
<div className="flex-[3] min-h-0 overflow-hidden"> expanded: upperExpanded,
<GitPanelContainer content: (
selectedWorkspace={selectedWorkspace} <FileTreeContainer
repos={repos} key={selectedWorkspace?.id}
diffs={diffs} workspaceId={selectedWorkspace?.id}
/> diffs={diffs}
</div> onSelectFile={(path) => {
</div> selectFile(path);
); setExpanded(`diff:${path}`, true);
} }}
/>
),
});
break;
case RIGHT_MAIN_PANEL_MODES.LOGS:
result.unshift({
title: 'Logs',
persistKey: PERSIST_KEYS.rightPanelprocesses,
visible: hasUpperContent,
expanded: upperExpanded,
content: <ProcessListContainer />,
});
break;
case RIGHT_MAIN_PANEL_MODES.PREVIEW:
result.unshift({
title: 'Preview',
persistKey: PERSIST_KEYS.rightPanelPreview,
visible: hasUpperContent,
expanded: upperExpanded,
content: (
<PreviewControlsContainer attemptId={selectedWorkspace?.id} />
),
});
break;
case null:
break;
}
if (rightMainPanelMode === RIGHT_MAIN_PANEL_MODES.PREVIEW) { return result;
return (
<div className="flex flex-col h-full">
<div className="flex-[7] min-h-0 overflow-hidden">
<PreviewControlsContainer attemptId={selectedWorkspace?.id} />
</div>
<div className="flex-[3] min-h-0 overflow-hidden">
<GitPanelContainer
selectedWorkspace={selectedWorkspace}
repos={repos}
diffs={diffs}
/>
</div>
</div>
);
} }
return ( return (
<GitPanelContainer <div className="h-full border-l bg-secondary overflow-y-auto">
selectedWorkspace={selectedWorkspace} <div className="divide-y border-b">
repos={repos} {sections.map((section) => (
diffs={diffs} <div
/> key={section.persistKey}
className="max-h-[max(50vh,400px)] flex flex-col overflow-hidden"
>
<CollapsibleSectionHeader
title={section.title}
persistKey={section.persistKey}
>
<div className="flex flex-1 border-t min-h-[200px]">
{section.content}
</div>
</CollapsibleSectionHeader>
</div>
))}
</div>
</div>
); );
} }

65
frontend/src/components/ui-new/containers/TerminalPanelContainer.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { useEffect, useRef } from 'react';
import { useWorkspaceContext } from '@/contexts/WorkspaceContext';
import { useTerminal } from '@/contexts/TerminalContext';
import { TerminalPanel } from '../views/TerminalPanel';
export function TerminalPanelContainer() {
const { workspace } = useWorkspaceContext();
const {
getTabsForWorkspace,
getActiveTab,
createTab,
closeTab,
setActiveTab,
clearWorkspaceTabs,
} = useTerminal();
const workspaceId = workspace?.id;
const containerRef = workspace?.container_ref ?? null;
const tabs = workspaceId ? getTabsForWorkspace(workspaceId) : [];
const activeTab = workspaceId ? getActiveTab(workspaceId) : null;
const creatingRef = useRef(false);
const prevWorkspaceIdRef = useRef<string | null>(null);
// Clean up terminals when workspace changes
useEffect(() => {
if (
prevWorkspaceIdRef.current &&
prevWorkspaceIdRef.current !== workspaceId
) {
clearWorkspaceTabs(prevWorkspaceIdRef.current);
}
prevWorkspaceIdRef.current = workspaceId ?? null;
}, [workspaceId, clearWorkspaceTabs]);
// Auto-create first tab when workspace is selected and terminal mode is active
useEffect(() => {
if (
workspaceId &&
containerRef &&
tabs.length === 0 &&
!creatingRef.current
) {
creatingRef.current = true;
createTab(workspaceId, containerRef);
}
if (tabs.length > 0) {
creatingRef.current = false;
}
}, [workspaceId, containerRef, tabs.length, createTab]);
return (
<TerminalPanel
tabs={tabs}
activeTabId={activeTab?.id ?? null}
workspaceId={workspaceId ?? ''}
containerRef={containerRef}
onTabSelect={(tabId) => workspaceId && setActiveTab(workspaceId, tabId)}
onTabClose={(tabId) => workspaceId && closeTab(workspaceId, tabId)}
onNewTab={() =>
workspaceId && containerRef && createTab(workspaceId, containerRef)
}
/>
);
}

16
frontend/src/components/ui-new/containers/WorkspacesLayout.tsx
View File

@@ -48,13 +48,15 @@ function ModeProvider({
return <CreateModeProvider>{children}</CreateModeProvider>; return <CreateModeProvider>{children}</CreateModeProvider>;
} }
return ( return (
<ExecutionProcessesProvider <CreateModeProvider>
key={executionProps.key} <ExecutionProcessesProvider
attemptId={executionProps.attemptId} key={executionProps.key}
sessionId={executionProps.sessionId} attemptId={executionProps.attemptId}
> sessionId={executionProps.sessionId}
{children} >
</ExecutionProcessesProvider> {children}
</ExecutionProcessesProvider>
</CreateModeProvider>
); );
} }

72
frontend/src/components/ui-new/primitives/CollapsibleSectionHeader.tsx
View File

@@ -14,7 +14,6 @@ interface CollapsibleSectionHeaderProps {
onIconClick?: () => void; onIconClick?: () => void;
children?: React.ReactNode; children?: React.ReactNode;
className?: string; className?: string;
contentClassName?: string;
} }
export function CollapsibleSectionHeader({ export function CollapsibleSectionHeader({
@@ -25,7 +24,6 @@ export function CollapsibleSectionHeader({
onIconClick, onIconClick,
children, children,
className, className,
contentClassName,
}: CollapsibleSectionHeaderProps) { }: CollapsibleSectionHeaderProps) {
const [expanded, toggle] = usePersistedExpanded(persistKey, defaultExpanded); const [expanded, toggle] = usePersistedExpanded(persistKey, defaultExpanded);
@@ -35,42 +33,44 @@ export function CollapsibleSectionHeader({
}; };
return ( return (
<div className={cn('flex flex-col h-full overflow-auto', className)}> <div className={cn('flex flex-col h-full min-h-0', className)}>
<button <div className="">
type="button" <button
onClick={() => toggle()} type="button"
className={cn( onClick={() => toggle()}
'flex items-center justify-between w-full border-b px-base py-half bg-secondary border-l-half border-l-low cursor-pointer' className={cn(
)} 'flex items-center justify-between w-full px-base py-half cursor-pointer'
>
<span className="font-medium truncate text-normal">{title}</span>
<div className="flex items-center gap-half">
{IconComponent && onIconClick && (
<span
role="button"
tabIndex={0}
onClick={handleIconClick}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleIconClick(e as unknown as React.MouseEvent);
}
}}
className="text-low hover:text-normal"
>
<IconComponent className="size-icon-xs" weight="bold" />
</span>
)} )}
<CaretDownIcon >
weight="fill" <span className="font-medium truncate text-normal">{title}</span>
className={cn( <div className="flex items-center gap-half">
'size-icon-xs text-low transition-transform', {IconComponent && onIconClick && (
!expanded && '-rotate-90' <span
role="button"
tabIndex={0}
onClick={handleIconClick}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleIconClick(e as unknown as React.MouseEvent);
}
}}
className="text-low hover:text-normal"
>
<IconComponent className="size-icon-xs" weight="bold" />
</span>
)} )}
/> <CaretDownIcon
</div> weight="fill"
</button> className={cn(
{expanded && <div className={contentClassName}>{children}</div>} 'size-icon-xs text-low transition-transform',
!expanded && '-rotate-90'
)}
/>
</div>
</button>
</div>
{expanded && children}
</div> </div>
); );
} }

13
frontend/src/components/ui-new/primitives/RepoCard.tsx
View File

@@ -25,9 +25,8 @@ import {
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
} from './Dropdown'; } from './Dropdown';
import { CollapsibleSection } from './CollapsibleSection';
import { SplitButton, type SplitButtonOption } from './SplitButton'; import { SplitButton, type SplitButtonOption } from './SplitButton';
import { useRepoAction, PERSIST_KEYS } from '@/stores/useUiPreferencesStore'; import { useRepoAction } from '@/stores/useUiPreferencesStore';
export type RepoAction = export type RepoAction =
| 'pull-request' | 'pull-request'
@@ -113,12 +112,8 @@ export function RepoCard({
hasPrOpen && selectedAction === 'pull-request' ? 'merge' : selectedAction; hasPrOpen && selectedAction === 'pull-request' ? 'merge' : selectedAction;
return ( return (
<CollapsibleSection <div className="bg-primary rounded-sm my-base p-base space-y-base">
persistKey={PERSIST_KEYS.repoCard(repoId)} <div className="font-medium">{name}</div>
title={name}
className="gap-half"
defaultExpanded
>
{/* Branch row */} {/* Branch row */}
<div className="flex items-center gap-base"> <div className="flex items-center gap-base">
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
@@ -290,6 +285,6 @@ export function RepoCard({
onAction={(action) => onActionsClick?.(action)} onAction={(action) => onActionsClick?.(action)}
/> />
</div> </div>
</CollapsibleSection> </div>
); );
} }

4
frontend/src/components/ui-new/primitives/SelectedReposList.tsx
View File

@@ -22,7 +22,7 @@ export function SelectedReposList({
if (repos.length === 0) { if (repos.length === 0) {
return ( return (
<div className="flex flex-col items-center justify-center py-double text-center"> <div className="flex flex-col items-center justify-center p-base text-center">
<FolderSimpleIcon <FolderSimpleIcon
className="size-icon-xl text-low mb-base" className="size-icon-xl text-low mb-base"
weight="duotone" weight="duotone"
@@ -36,7 +36,7 @@ export function SelectedReposList({
} }
return ( return (
<div className="flex flex-col gap-double"> <div className="flex flex-col gap-double p-base w-full overflow-x-hidden">
{repos.map((repo) => ( {repos.map((repo) => (
<RepoCardSimple <RepoCardSimple
key={repo.id} key={repo.id}

62
frontend/src/components/ui-new/terminal/TerminalTabBar.tsx Normal file
View File

@@ -0,0 +1,62 @@
import { PlusIcon, XIcon } from '@phosphor-icons/react';
import { cn } from '@/lib/utils';
import type { TerminalTab } from '@/contexts/TerminalContext';
interface TerminalTabBarProps {
tabs: TerminalTab[];
activeTabId: string | null;
onTabSelect: (tabId: string) => void;
onTabClose: (tabId: string) => void;
onNewTab: () => void;
}
export function TerminalTabBar({
tabs,
activeTabId,
onTabSelect,
onTabClose,
onNewTab,
}: TerminalTabBarProps) {
return (
<div className="flex items-center gap-1 border-b border-border bg-secondary px-2 py-1">
<div className="flex items-center gap-1 overflow-x-auto">
{tabs.map((tab) => (
<div
key={tab.id}
className={cn(
'group flex items-center gap-1 rounded px-2 py-1 text-sm cursor-pointer',
tab.id === activeTabId
? 'bg-primary text-high'
: 'text-low hover:bg-primary/50 hover:text-normal'
)}
onClick={() => onTabSelect(tab.id)}
>
<span className="truncate max-w-[120px]">{tab.title}</span>
<button
className={cn(
'ml-1 rounded p-0.5 hover:bg-secondary',
tab.id === activeTabId
? 'opacity-100'
: 'opacity-0 group-hover:opacity-100'
)}
onClick={(e) => {
e.stopPropagation();
onTabClose(tab.id);
}}
aria-label="Close terminal"
>
<XIcon className="h-3 w-3" />
</button>
</div>
))}
</div>
<button
className="flex items-center justify-center h-6 w-6 shrink-0 rounded text-low hover:text-normal hover:bg-primary/50"
onClick={onNewTab}
aria-label="New terminal"
>
<PlusIcon className="h-4 w-4" />
</button>
</div>
);
}

120
frontend/src/components/ui-new/terminal/XTermInstance.tsx Normal file
View File

@@ -0,0 +1,120 @@
import { useEffect, useRef, useCallback, useMemo } from 'react';
import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';
import { WebLinksAddon } from '@xterm/addon-web-links';
import '@xterm/xterm/css/xterm.css';
import { useTerminalWebSocket } from '@/hooks/useTerminalWebSocket';
import { useTheme } from '@/components/ThemeProvider';
import { getTerminalTheme } from '@/utils/terminalTheme';
interface XTermInstanceProps {
workspaceId: string;
isActive: boolean;
onClose?: () => void;
}
export function XTermInstance({
workspaceId,
isActive,
onClose,
}: XTermInstanceProps) {
const containerRef = useRef<HTMLDivElement>(null);
const terminalRef = useRef<Terminal | null>(null);
const fitAddonRef = useRef<FitAddon | null>(null);
const initialSizeRef = useRef({ cols: 80, rows: 24 });
const { theme } = useTheme();
const onData = useCallback((data: string) => {
terminalRef.current?.write(data);
}, []);
const endpoint = useMemo(() => {
const protocol = window.location.protocol === 'https:' ? 'https:' : 'http:';
const host = window.location.host;
return `${protocol}//${host}/api/terminal/ws?workspace_id=${workspaceId}&cols=${initialSizeRef.current.cols}&rows=${initialSizeRef.current.rows}`;
}, [workspaceId]);
const { send, resize } = useTerminalWebSocket({
endpoint,
onData,
onExit: onClose,
});
useEffect(() => {
if (!containerRef.current || terminalRef.current) return;
const terminal = new Terminal({
cursorBlink: true,
fontSize: 12,
fontFamily: '"IBM Plex Mono", monospace',
theme: getTerminalTheme(),
});
const fitAddon = new FitAddon();
const webLinksAddon = new WebLinksAddon();
terminal.loadAddon(fitAddon);
terminal.loadAddon(webLinksAddon);
terminal.open(containerRef.current);
fitAddon.fit();
initialSizeRef.current = { cols: terminal.cols, rows: terminal.rows };
terminalRef.current = terminal;
fitAddonRef.current = fitAddon;
terminal.onData((data) => {
send(data);
});
return () => {
terminal.dispose();
terminalRef.current = null;
fitAddonRef.current = null;
};
}, [send]);
useEffect(() => {
if (!isActive || !fitAddonRef.current) return;
const handleResize = () => {
fitAddonRef.current?.fit();
if (terminalRef.current) {
resize(terminalRef.current.cols, terminalRef.current.rows);
}
};
const resizeObserver = new ResizeObserver(handleResize);
if (containerRef.current) {
resizeObserver.observe(containerRef.current);
}
handleResize();
return () => {
resizeObserver.disconnect();
};
}, [isActive, resize]);
useEffect(() => {
if (isActive) {
terminalRef.current?.focus();
}
}, [isActive]);
// Update terminal theme when app theme changes
useEffect(() => {
if (terminalRef.current) {
terminalRef.current.options.theme = getTerminalTheme();
}
}, [theme]);
return (
<div
ref={containerRef}
className="h-full w-full"
style={{ display: isActive ? 'block' : 'none' }}
/>
);
}

92
frontend/src/components/ui-new/views/FileTree.tsx
View File

@@ -5,8 +5,6 @@ import { Tooltip } from '../primitives/Tooltip';
import { FileTreeSearchBar } from './FileTreeSearchBar'; import { FileTreeSearchBar } from './FileTreeSearchBar';
import { FileTreeNode } from './FileTreeNode'; import { FileTreeNode } from './FileTreeNode';
import type { TreeNode } from '../types/fileTree'; import type { TreeNode } from '../types/fileTree';
import { CollapsibleSectionHeader } from '../primitives/CollapsibleSectionHeader';
import { PERSIST_KEYS } from '@/stores/useUiPreferencesStore';
interface FileTreeProps { interface FileTreeProps {
nodes: TreeNode[]; nodes: TreeNode[];
@@ -82,62 +80,54 @@ export function FileTree({
}; };
return ( return (
<div className={cn('w-full h-full bg-secondary flex flex-col', className)}> <div className={cn('w-full bg-secondary flex flex-col', className)}>
<CollapsibleSectionHeader <div className="px-base pt-base">
title="Changes" <div className="flex items-center gap-half">
persistKey={PERSIST_KEYS.changesSection} <div className="flex-1">
contentClassName="flex flex-col flex-1 min-h-0" <FileTreeSearchBar
> searchQuery={searchQuery}
<div className="px-base pt-base"> onSearchChange={onSearchChange}
<div className="flex items-center gap-half"> isAllExpanded={isAllExpanded}
<div className="flex-1"> onToggleExpandAll={onToggleExpandAll}
<FileTreeSearchBar />
searchQuery={searchQuery} </div>
onSearchChange={onSearchChange} {onToggleGitHubComments && (
isAllExpanded={isAllExpanded} <Tooltip
onToggleExpandAll={onToggleExpandAll} content={
/> showGitHubComments
</div> ? t('common:fileTree.hideGitHubComments')
{onToggleGitHubComments && ( : t('common:fileTree.showGitHubComments')
<Tooltip }
content={ >
<button
type="button"
onClick={() => onToggleGitHubComments(!showGitHubComments)}
className={cn(
'p-1 rounded hover:bg-panel transition-colors shrink-0',
showGitHubComments ? 'text-normal' : 'text-low',
isGitHubCommentsLoading && 'opacity-50 animate-pulse'
)}
aria-label={
showGitHubComments showGitHubComments
? t('common:fileTree.hideGitHubComments') ? t('common:fileTree.hideGitHubComments')
: t('common:fileTree.showGitHubComments') : t('common:fileTree.showGitHubComments')
} }
> >
<button <GithubLogoIcon className="size-icon-sm" weight="fill" />
type="button" </button>
onClick={() => onToggleGitHubComments(!showGitHubComments)} </Tooltip>
className={cn(
'p-1 rounded hover:bg-panel transition-colors shrink-0',
showGitHubComments ? 'text-normal' : 'text-low',
isGitHubCommentsLoading && 'opacity-50 animate-pulse'
)}
aria-label={
showGitHubComments
? t('common:fileTree.hideGitHubComments')
: t('common:fileTree.showGitHubComments')
}
>
<GithubLogoIcon className="size-icon-sm" weight="fill" />
</button>
</Tooltip>
)}
</div>
</div>
<div className="p-base flex-1 min-h-0 overflow-auto scrollbar-thin scrollbar-thumb-panel scrollbar-track-transparent">
{nodes.length > 0 ? (
renderNodes(nodes)
) : (
<div className="p-base text-low text-sm">
{searchQuery
? t('common:fileTree.noResults')
: 'No changed files'}
</div>
)} )}
</div> </div>
</CollapsibleSectionHeader> </div>
<div className="p-base flex-1 min-h-0 overflow-auto scrollbar-thin scrollbar-thumb-panel scrollbar-track-transparent">
{nodes.length > 0 ? (
renderNodes(nodes)
) : (
<div className="p-base text-low text-sm">
{searchQuery ? t('common:fileTree.noResults') : 'No changed files'}
</div>
)}
</div>
</div> </div>
); );
} }

100
frontend/src/components/ui-new/views/GitPanel.tsx
View File

@@ -7,9 +7,6 @@ import {
} from '@/components/ui-new/primitives/RepoCard'; } from '@/components/ui-new/primitives/RepoCard';
import { InputField } from '@/components/ui-new/primitives/InputField'; import { InputField } from '@/components/ui-new/primitives/InputField';
import { ErrorAlert } from '@/components/ui-new/primitives/ErrorAlert'; import { ErrorAlert } from '@/components/ui-new/primitives/ErrorAlert';
import { CollapsibleSection } from '../primitives/CollapsibleSection';
import { CollapsibleSectionHeader } from '../primitives/CollapsibleSectionHeader';
import { PERSIST_KEYS } from '@/stores/useUiPreferencesStore';
export interface RepoInfo { export interface RepoInfo {
id: string; id: string;
@@ -60,66 +57,53 @@ export function GitPanel({
return ( return (
<div <div
className={cn( className={cn(
'w-full h-full bg-secondary flex flex-col text-low overflow-y-auto', 'flex flex-col flex-1 w-full bg-secondary text-low overflow-y-auto',
className className
)} )}
> >
{error && <ErrorAlert message={error} />} {error && <ErrorAlert message={error} />}
<CollapsibleSectionHeader <div className="gap-base px-base">
title={t('common:sections.repositories')} {repos.map((repo) => (
persistKey={PERSIST_KEYS.gitPanelRepositories} <RepoCard
contentClassName="flex flex-col p-base gap-base overflow-auto" key={repo.id}
> repoId={repo.id}
<div className="flex flex-col gap-base"> name={repo.name}
{repos.map((repo) => ( targetBranch={repo.targetBranch}
<RepoCard commitsAhead={repo.commitsAhead}
key={repo.id} filesChanged={repo.filesChanged}
repoId={repo.id} linesAdded={repo.linesAdded}
name={repo.name} linesRemoved={repo.linesRemoved}
targetBranch={repo.targetBranch} prNumber={repo.prNumber}
commitsAhead={repo.commitsAhead} prUrl={repo.prUrl}
filesChanged={repo.filesChanged} prStatus={repo.prStatus}
linesAdded={repo.linesAdded} showPushButton={repo.showPushButton}
linesRemoved={repo.linesRemoved} isPushPending={repo.isPushPending}
prNumber={repo.prNumber} isPushSuccess={repo.isPushSuccess}
prUrl={repo.prUrl} isPushError={repo.isPushError}
prStatus={repo.prStatus} onChangeTarget={() => onActionsClick?.(repo.id, 'change-target')}
showPushButton={repo.showPushButton} onRebase={() => onActionsClick?.(repo.id, 'rebase')}
isPushPending={repo.isPushPending} onActionsClick={(action) => onActionsClick?.(repo.id, action)}
isPushSuccess={repo.isPushSuccess} onPushClick={() => onPushClick?.(repo.id)}
isPushError={repo.isPushError} onOpenInEditor={() => onOpenInEditor?.(repo.id)}
onChangeTarget={() => onActionsClick?.(repo.id, 'change-target')} onCopyPath={() => onCopyPath?.(repo.id)}
onRebase={() => onActionsClick?.(repo.id, 'rebase')} onOpenSettings={() => onOpenSettings?.(repo.id)}
onActionsClick={(action) => onActionsClick?.(repo.id, action)} />
onPushClick={() => onPushClick?.(repo.id)} ))}
onOpenInEditor={() => onOpenInEditor?.(repo.id)} <div className="bg-primary flex flex-col gap-base w-full p-base rounded-sm my-base">
onCopyPath={() => onCopyPath?.(repo.id)} <div className="flex gap-base items-center">
onOpenSettings={() => onOpenSettings?.(repo.id)} <GitBranchIcon className="size-icon-md text-base" weight="fill" />
/> <p className="font-medium truncate">
))} {t('common:sections.workingBranch')}
</p>
</div>
<InputField
variant="editable"
value={workingBranchName}
onChange={onWorkingBranchNameChange}
placeholder={t('gitPanel.advanced.placeholder')}
/>
</div> </div>
<div className="flex flex-col gap-base w-full"> </div>
<CollapsibleSection
title={t('common:sections.advanced')}
persistKey={PERSIST_KEYS.gitAdvancedSettings}
defaultExpanded={false}
className="flex flex-col gap-half"
>
<div className="flex gap-base items-center">
<GitBranchIcon className="size-icon-xs text-base" weight="fill" />
<p className="text-sm font-medium text-low truncate">
{t('common:sections.workingBranch')}
</p>
</div>
<InputField
variant="editable"
value={workingBranchName}
onChange={onWorkingBranchNameChange}
placeholder={t('gitPanel.advanced.placeholder')}
/>
</CollapsibleSection>
</div>
</CollapsibleSectionHeader>
</div> </div>
); );
} }

110
frontend/src/components/ui-new/views/GitPanelCreate.tsx
View File

@@ -1,110 +0,0 @@
import { useTranslation } from 'react-i18next';
import { cn } from '@/lib/utils';
import { CollapsibleSectionHeader } from '@/components/ui-new/primitives/CollapsibleSectionHeader';
import { SelectedReposList } from '@/components/ui-new/primitives/SelectedReposList';
import { ProjectSelectorContainer } from '@/components/ui-new/containers/ProjectSelectorContainer';
import { RecentReposListContainer } from '@/components/ui-new/containers/RecentReposListContainer';
import { BrowseRepoButtonContainer } from '@/components/ui-new/containers/BrowseRepoButtonContainer';
import { CreateRepoButtonContainer } from '@/components/ui-new/containers/CreateRepoButtonContainer';
import { WarningIcon } from '@phosphor-icons/react';
import { PERSIST_KEYS } from '@/stores/useUiPreferencesStore';
import type { Project, GitBranch, Repo } from 'shared/types';
interface GitPanelCreateProps {
className?: string;
repos: Repo[];
projects: Project[];
selectedProjectId: string | null;
selectedProjectName?: string;
onProjectSelect: (project: Project) => void;
onCreateProject: () => void;
onRepoRemove: (repoId: string) => void;
branchesByRepo: Record<string, GitBranch[]>;
targetBranches: Record<string, string>;
onBranchChange: (repoId: string, branch: string) => void;
registeredRepoPaths: string[];
onRepoRegistered: (repo: Repo) => void;
}
export function GitPanelCreate({
className,
repos,
projects,
selectedProjectId,
selectedProjectName,
onProjectSelect,
onCreateProject,
onRepoRemove,
branchesByRepo,
targetBranches,
onBranchChange,
registeredRepoPaths,
onRepoRegistered,
}: GitPanelCreateProps) {
const { t } = useTranslation(['tasks', 'common']);
const hasNoRepos = repos.length === 0;
return (
<div
className={cn(
'w-full h-full bg-secondary flex flex-col text-low overflow-y-auto',
className
)}
>
<CollapsibleSectionHeader
title={t('common:sections.project')}
persistKey={PERSIST_KEYS.gitPanelProject}
contentClassName="p-base border-b"
>
<ProjectSelectorContainer
projects={projects}
selectedProjectId={selectedProjectId}
selectedProjectName={selectedProjectName}
onProjectSelect={onProjectSelect}
onCreateProject={onCreateProject}
/>
</CollapsibleSectionHeader>
<CollapsibleSectionHeader
title={t('common:sections.repositories')}
persistKey={PERSIST_KEYS.gitPanelRepositories}
contentClassName="p-base border-b"
>
{hasNoRepos ? (
<div className="flex items-center gap-2 p-base rounded bg-warning/10 border border-warning/20">
<WarningIcon className="h-4 w-4 text-warning shrink-0" />
<p className="text-sm text-warning">
{t('gitPanel.create.warnings.noReposSelected')}
</p>
</div>
) : (
<SelectedReposList
repos={repos}
onRemove={onRepoRemove}
branchesByRepo={branchesByRepo}
selectedBranches={targetBranches}
onBranchChange={onBranchChange}
/>
)}
</CollapsibleSectionHeader>
<CollapsibleSectionHeader
title={t('common:sections.addRepositories')}
persistKey={PERSIST_KEYS.gitPanelAddRepositories}
contentClassName="flex flex-col p-base gap-half"
>
<p className="text-xs text-low font-medium">
{t('common:sections.recent')}
</p>
<RecentReposListContainer
registeredRepoPaths={registeredRepoPaths}
onRepoRegistered={onRepoRegistered}
/>
<p className="text-xs text-low font-medium">
{t('common:sections.other')}
</p>
<BrowseRepoButtonContainer onRepoRegistered={onRepoRegistered} />
<CreateRepoButtonContainer onRepoCreated={onRepoRegistered} />
</CollapsibleSectionHeader>
</div>
);
}

96
frontend/src/components/ui-new/views/PreviewControls.tsx
View File

@@ -1,9 +1,7 @@
import { ArrowSquareOutIcon, SpinnerIcon } from '@phosphor-icons/react'; import { ArrowSquareOutIcon, SpinnerIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { CollapsibleSectionHeader } from '../primitives/CollapsibleSectionHeader';
import { VirtualizedProcessLogs } from '../containers/VirtualizedProcessLogs'; import { VirtualizedProcessLogs } from '../containers/VirtualizedProcessLogs';
import { PERSIST_KEYS } from '@/stores/useUiPreferencesStore';
import { getDevServerWorkingDir } from '@/lib/devServerUtils'; import { getDevServerWorkingDir } from '@/lib/devServerUtils';
import type { ExecutionProcess, PatchType } from 'shared/types'; import type { ExecutionProcess, PatchType } from 'shared/types';
@@ -42,57 +40,51 @@ export function PreviewControls({
className className
)} )}
> >
<CollapsibleSectionHeader <div className="flex-1 flex flex-col min-h-0">
title="Dev Server Logs" <div className="flex items-center justify-between px-base py-half">
persistKey={PERSIST_KEYS.devServerSection} <span className="text-xs font-medium text-low">
contentClassName="flex flex-col flex-1 overflow-hidden" {t('preview.logs.label')}
> </span>
<div className="flex-1 flex flex-col min-h-0"> <button
<div className="flex items-center justify-between px-base py-half"> type="button"
<span className="text-xs font-medium text-low"> onClick={onViewFullLogs}
{t('preview.logs.label')} className="flex items-center gap-half text-xs text-brand hover:text-brand-hover"
</span> >
<button <span>{t('preview.logs.viewFull')}</span>
type="button" <ArrowSquareOutIcon className="size-icon-xs" />
onClick={onViewFullLogs} </button>
className="flex items-center gap-half text-xs text-brand hover:text-brand-hover"
>
<span>{t('preview.logs.viewFull')}</span>
<ArrowSquareOutIcon className="size-icon-xs" />
</button>
</div>
{devServerProcesses.length > 1 && (
<div className="flex border-b border-border mx-base">
{devServerProcesses.map((process) => (
<button
key={process.id}
className={cn(
'px-base py-half text-xs border-b-2 transition-colors',
activeProcessId === process.id
? 'border-brand text-normal'
: 'border-transparent text-low hover:text-normal'
)}
onClick={() => onTabChange(process.id)}
>
{getDevServerWorkingDir(process) ??
t('preview.browser.devServerFallback')}
</button>
))}
</div>
)}
<div className="flex-1 min-h-0 overflow-hidden">
{isLoading && devServerProcesses.length === 0 ? (
<div className="h-full flex items-center justify-center text-low">
<SpinnerIcon className="size-icon-sm animate-spin" />
</div>
) : devServerProcesses.length > 0 ? (
<VirtualizedProcessLogs logs={logs} error={logsError} />
) : null}
</div>
</div> </div>
</CollapsibleSectionHeader>
{devServerProcesses.length > 1 && (
<div className="flex border-b border-border mx-base">
{devServerProcesses.map((process) => (
<button
key={process.id}
className={cn(
'px-base py-half text-xs border-b-2 transition-colors',
activeProcessId === process.id
? 'border-brand text-normal'
: 'border-transparent text-low hover:text-normal'
)}
onClick={() => onTabChange(process.id)}
>
{getDevServerWorkingDir(process) ??
t('preview.browser.devServerFallback')}
</button>
))}
</div>
)}
<div className="flex-1 min-h-0 overflow-hidden">
{isLoading && devServerProcesses.length === 0 ? (
<div className="h-full flex items-center justify-center text-low">
<SpinnerIcon className="size-icon-sm animate-spin" />
</div>
) : devServerProcesses.length > 0 ? (
<VirtualizedProcessLogs logs={logs} error={logsError} />
) : null}
</div>
</div>
</div> </div>
); );
} }

32
frontend/src/components/ui-new/views/TerminalPanel.tsx Normal file
View File

@@ -0,0 +1,32 @@
import type { TerminalTab } from '@/contexts/TerminalContext';
import { XTermInstance } from '../terminal/XTermInstance';
interface TerminalPanelProps {
tabs: TerminalTab[];
activeTabId: string | null;
workspaceId: string;
containerRef: string | null;
onTabSelect: (tabId: string) => void;
onTabClose: (tabId: string) => void;
onNewTab: () => void;
}
export function TerminalPanel({
tabs,
activeTabId,
workspaceId,
onTabClose,
}: TerminalPanelProps) {
return (
<div className="flex-1 overflow-hidden bg-secondary p-base">
{tabs.map((tab) => (
<XTermInstance
key={tab.id}
workspaceId={workspaceId}
isActive={tab.id === activeTabId}
onClose={() => onTabClose(tab.id)}
/>
))}
</div>
);
}

237
frontend/src/contexts/TerminalContext.tsx Normal file
View File

@@ -0,0 +1,237 @@
import {
createContext,
useContext,
useReducer,
useMemo,
useCallback,
ReactNode,
} from 'react';
export interface TerminalTab {
id: string;
title: string;
workspaceId: string;
cwd: string;
}
interface TerminalState {
tabsByWorkspace: Record<string, TerminalTab[]>;
activeTabByWorkspace: Record<string, string | null>;
}
type TerminalAction =
| { type: 'CREATE_TAB'; workspaceId: string; cwd: string }
| { type: 'CLOSE_TAB'; workspaceId: string; tabId: string }
| { type: 'SET_ACTIVE_TAB'; workspaceId: string; tabId: string }
| {
type: 'UPDATE_TAB_TITLE';
workspaceId: string;
tabId: string;
title: string;
}
| { type: 'CLEAR_WORKSPACE_TABS'; workspaceId: string };
function generateTabId(): string {
return `term-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
}
function terminalReducer(
state: TerminalState,
action: TerminalAction
): TerminalState {
switch (action.type) {
case 'CREATE_TAB': {
const { workspaceId, cwd } = action;
const existingTabs = state.tabsByWorkspace[workspaceId] || [];
const newTab: TerminalTab = {
id: generateTabId(),
title: `Terminal ${existingTabs.length + 1}`,
workspaceId,
cwd,
};
return {
...state,
tabsByWorkspace: {
...state.tabsByWorkspace,
[workspaceId]: [...existingTabs, newTab],
},
activeTabByWorkspace: {
...state.activeTabByWorkspace,
[workspaceId]: newTab.id,
},
};
}
case 'CLOSE_TAB': {
const { workspaceId, tabId } = action;
const tabs = state.tabsByWorkspace[workspaceId] || [];
const newTabs = tabs.filter((t) => t.id !== tabId);
const wasActive = state.activeTabByWorkspace[workspaceId] === tabId;
let newActiveTab = state.activeTabByWorkspace[workspaceId];
if (wasActive && newTabs.length > 0) {
const closedIndex = tabs.findIndex((t) => t.id === tabId);
const newIndex = Math.min(closedIndex, newTabs.length - 1);
newActiveTab = newTabs[newIndex]?.id ?? null;
} else if (newTabs.length === 0) {
newActiveTab = null;
}
return {
...state,
tabsByWorkspace: {
...state.tabsByWorkspace,
[workspaceId]: newTabs,
},
activeTabByWorkspace: {
...state.activeTabByWorkspace,
[workspaceId]: newActiveTab,
},
};
}
case 'SET_ACTIVE_TAB': {
const { workspaceId, tabId } = action;
return {
...state,
activeTabByWorkspace: {
...state.activeTabByWorkspace,
[workspaceId]: tabId,
},
};
}
case 'UPDATE_TAB_TITLE': {
const { workspaceId, tabId, title } = action;
const tabs = state.tabsByWorkspace[workspaceId] || [];
return {
...state,
tabsByWorkspace: {
...state.tabsByWorkspace,
[workspaceId]: tabs.map((t) =>
t.id === tabId ? { ...t, title } : t
),
},
};
}
case 'CLEAR_WORKSPACE_TABS': {
const { workspaceId } = action;
const restTabs = Object.fromEntries(
Object.entries(state.tabsByWorkspace).filter(
([key]) => key !== workspaceId
)
);
const restActive = Object.fromEntries(
Object.entries(state.activeTabByWorkspace).filter(
([key]) => key !== workspaceId
)
);
return {
tabsByWorkspace: restTabs,
activeTabByWorkspace: restActive,
};
}
default:
return state;
}
}
interface TerminalContextType {
getTabsForWorkspace: (workspaceId: string) => TerminalTab[];
getActiveTab: (workspaceId: string) => TerminalTab | null;
createTab: (workspaceId: string, cwd: string) => void;
closeTab: (workspaceId: string, tabId: string) => void;
setActiveTab: (workspaceId: string, tabId: string) => void;
updateTabTitle: (workspaceId: string, tabId: string, title: string) => void;
clearWorkspaceTabs: (workspaceId: string) => void;
}
const TerminalContext = createContext<TerminalContextType | null>(null);
interface TerminalProviderProps {
children: ReactNode;
}
export function TerminalProvider({ children }: TerminalProviderProps) {
const [state, dispatch] = useReducer(terminalReducer, {
tabsByWorkspace: {},
activeTabByWorkspace: {},
});
const getTabsForWorkspace = useCallback(
(workspaceId: string): TerminalTab[] => {
return state.tabsByWorkspace[workspaceId] || [];
},
[state.tabsByWorkspace]
);
const getActiveTab = useCallback(
(workspaceId: string): TerminalTab | null => {
const activeId = state.activeTabByWorkspace[workspaceId];
if (!activeId) return null;
const tabs = state.tabsByWorkspace[workspaceId] || [];
return tabs.find((t) => t.id === activeId) || null;
},
[state.tabsByWorkspace, state.activeTabByWorkspace]
);
const createTab = useCallback((workspaceId: string, cwd: string) => {
dispatch({ type: 'CREATE_TAB', workspaceId, cwd });
}, []);
const closeTab = useCallback((workspaceId: string, tabId: string) => {
dispatch({ type: 'CLOSE_TAB', workspaceId, tabId });
}, []);
const setActiveTab = useCallback((workspaceId: string, tabId: string) => {
dispatch({ type: 'SET_ACTIVE_TAB', workspaceId, tabId });
}, []);
const updateTabTitle = useCallback(
(workspaceId: string, tabId: string, title: string) => {
dispatch({ type: 'UPDATE_TAB_TITLE', workspaceId, tabId, title });
},
[]
);
const clearWorkspaceTabs = useCallback((workspaceId: string) => {
dispatch({ type: 'CLEAR_WORKSPACE_TABS', workspaceId });
}, []);
const value = useMemo(
() => ({
getTabsForWorkspace,
getActiveTab,
createTab,
closeTab,
setActiveTab,
updateTabTitle,
clearWorkspaceTabs,
}),
[
getTabsForWorkspace,
getActiveTab,
createTab,
closeTab,
setActiveTab,
updateTabTitle,
clearWorkspaceTabs,
]
);
return (
<TerminalContext.Provider value={value}>
{children}
</TerminalContext.Provider>
);
}
export function useTerminal() {
const context = useContext(TerminalContext);
if (!context) {
throw new Error('useTerminal must be used within TerminalProvider');
}
return context;
}

100
frontend/src/hooks/useTerminalWebSocket.ts Normal file
View File

@@ -0,0 +1,100 @@
import { useCallback, useEffect, useRef } from 'react';
import useWebSocket, { ReadyState } from 'react-use-websocket';
interface TerminalMessage {
type: 'output' | 'error' | 'exit';
data?: string;
message?: string;
code?: number;
}
interface UseTerminalWebSocketOptions {
endpoint: string | null;
onData: (data: string) => void;
onExit?: () => void;
onError?: (error: string) => void;
}
interface UseTerminalWebSocketReturn {
send: (data: string) => void;
resize: (cols: number, rows: number) => void;
isConnected: boolean;
}
function encodeBase64(str: string): string {
const bytes = new TextEncoder().encode(str);
const binString = Array.from(bytes, (b) => String.fromCodePoint(b)).join('');
return btoa(binString);
}
function decodeBase64(base64: string): string {
const binString = atob(base64);
const bytes = Uint8Array.from(binString, (c) => c.codePointAt(0)!);
return new TextDecoder().decode(bytes);
}
export function useTerminalWebSocket({
endpoint,
onData,
onExit,
onError,
}: UseTerminalWebSocketOptions): UseTerminalWebSocketReturn {
const onDataRef = useRef(onData);
const onExitRef = useRef(onExit);
const onErrorRef = useRef(onError);
useEffect(() => {
onDataRef.current = onData;
onExitRef.current = onExit;
onErrorRef.current = onError;
}, [onData, onExit, onError]);
const wsEndpoint = endpoint ? endpoint.replace(/^http/, 'ws') : null;
const { sendMessage, readyState } = useWebSocket(wsEndpoint, {
onMessage: (event) => {
try {
const msg: TerminalMessage = JSON.parse(event.data);
switch (msg.type) {
case 'output':
if (msg.data) {
onDataRef.current(decodeBase64(msg.data));
}
break;
case 'error':
onErrorRef.current?.(msg.message || 'Unknown error');
break;
case 'exit':
onExitRef.current?.();
break;
}
} catch {
// Ignore parse errors
}
},
onError: () => {
onErrorRef.current?.('WebSocket connection error');
},
shouldReconnect: () => false,
});
const send = useCallback(
(data: string) => {
sendMessage(JSON.stringify({ type: 'input', data: encodeBase64(data) }));
},
[sendMessage]
);
const resize = useCallback(
(cols: number, rows: number) => {
sendMessage(JSON.stringify({ type: 'resize', cols, rows }));
},
[sendMessage]
);
return {
send,
resize,
isConnected: readyState === ReadyState.OPEN,
};
}

3
frontend/src/i18n/locales/en/common.json
View File

@@ -165,7 +165,8 @@
"workingBranch": "Working Branch", "workingBranch": "Working Branch",
"recent": "Recent", "recent": "Recent",
"other": "Other", "other": "Other",
"devServerPreview": "Dev Server Preview" "devServerPreview": "Dev Server Preview",
"terminal": "Terminal"
}, },
"repos": { "repos": {
"loading": "Loading repositories...", "loading": "Loading repositories...",

3
frontend/src/i18n/locales/en/tasks.json
View File

@@ -653,6 +653,9 @@
"discardChanges": "Discard Changes" "discardChanges": "Discard Changes"
} }
}, },
"terminal": {
"selectWorkspace": "Select a workspace to open terminal"
},
"restoreLogsDialog": { "restoreLogsDialog": {
"title": "Confirm Retry", "title": "Confirm Retry",
"historyChange": { "historyChange": {

3
frontend/src/i18n/locales/es/common.json
View File

@@ -165,7 +165,8 @@
"workingBranch": "Rama de trabajo", "workingBranch": "Rama de trabajo",
"recent": "Reciente", "recent": "Reciente",
"other": "Otro", "other": "Otro",
"devServerPreview": "Vista previa del servidor de desarrollo" "devServerPreview": "Vista previa del servidor de desarrollo",
"terminal": "Terminal"
}, },
"repos": { "repos": {
"loading": "Cargando repositorios...", "loading": "Cargando repositorios...",

3
frontend/src/i18n/locales/es/tasks.json
View File

@@ -586,6 +586,9 @@
"discardChanges": "Descartar Cambios" "discardChanges": "Descartar Cambios"
} }
}, },
"terminal": {
"selectWorkspace": "Selecciona un espacio de trabajo para abrir terminal"
},
"restoreLogsDialog": { "restoreLogsDialog": {
"title": "Confirmar Reintento", "title": "Confirmar Reintento",
"historyChange": { "historyChange": {

3
frontend/src/i18n/locales/ja/common.json
View File

@@ -165,7 +165,8 @@
"workingBranch": "作業ブランチ", "workingBranch": "作業ブランチ",
"recent": "最近", "recent": "最近",
"other": "その他", "other": "その他",
"devServerPreview": "開発サーバープレビュー" "devServerPreview": "開発サーバープレビュー",
"terminal": "ターミナル"
}, },
"repos": { "repos": {
"loading": "リポジトリを読み込み中...", "loading": "リポジトリを読み込み中...",

3
frontend/src/i18n/locales/ja/tasks.json
View File

@@ -586,6 +586,9 @@
"discardChanges": "変更を破棄" "discardChanges": "変更を破棄"
} }
}, },
"terminal": {
"selectWorkspace": "ターミナルを開くにはワークスペースを選択してください"
},
"restoreLogsDialog": { "restoreLogsDialog": {
"title": "リトライを確認", "title": "リトライを確認",
"historyChange": { "historyChange": {

3
frontend/src/i18n/locales/ko/common.json
View File

@@ -165,7 +165,8 @@
"workingBranch": "작업 브랜치", "workingBranch": "작업 브랜치",
"recent": "최근", "recent": "최근",
"other": "기타", "other": "기타",
"devServerPreview": "개발 서버 미리보기" "devServerPreview": "개발 서버 미리보기",
"terminal": "터미널"
}, },
"repos": { "repos": {
"loading": "저장소 로딩 중...", "loading": "저장소 로딩 중...",

3
frontend/src/i18n/locales/ko/tasks.json
View File

@@ -586,6 +586,9 @@
"discardChanges": "변경사항 버리기" "discardChanges": "변경사항 버리기"
} }
}, },
"terminal": {
"selectWorkspace": "터미널을 열려면 작업 공간을 선택하세요"
},
"restoreLogsDialog": { "restoreLogsDialog": {
"title": "재시도 확인", "title": "재시도 확인",
"historyChange": { "historyChange": {

3
frontend/src/i18n/locales/zh-Hans/common.json
View File

@@ -165,7 +165,8 @@
"workingBranch": "工作分支", "workingBranch": "工作分支",
"recent": "最近", "recent": "最近",
"other": "其他", "other": "其他",
"devServerPreview": "开发服务器预览" "devServerPreview": "开发服务器预览",
"terminal": "终端"
}, },
"repos": { "repos": {
"loading": "正在加载仓库...", "loading": "正在加载仓库...",

3
frontend/src/i18n/locales/zh-Hans/tasks.json
View File

@@ -586,6 +586,9 @@
"discardChanges": "放弃更改" "discardChanges": "放弃更改"
} }
}, },
"terminal": {
"selectWorkspace": "选择一个工作区以打开终端"
},
"restoreLogsDialog": { "restoreLogsDialog": {
"title": "确认重试", "title": "确认重试",
"historyChange": { "historyChange": {

3
frontend/src/i18n/locales/zh-Hant/common.json
View File

@@ -165,7 +165,8 @@
"workingBranch": "工作分支", "workingBranch": "工作分支",
"recent": "最近", "recent": "最近",
"other": "其他", "other": "其他",
"devServerPreview": "開發伺服器預覽" "devServerPreview": "開發伺服器預覽",
"terminal": "終端機"
}, },
"repos": { "repos": {
"loading": "正在載入儲存庫...", "loading": "正在載入儲存庫...",

3
frontend/src/i18n/locales/zh-Hant/tasks.json
View File

@@ -586,6 +586,9 @@
"discardChanges": "放棄變更" "discardChanges": "放棄變更"
} }
}, },
"terminal": {
"selectWorkspace": "選擇一個工作區以開啟終端機"
},
"restoreLogsDialog": { "restoreLogsDialog": {
"title": "確認重試", "title": "確認重試",
"historyChange": { "historyChange": {

23
frontend/src/stores/useUiPreferencesStore.ts
View File

@@ -35,17 +35,21 @@ const DEFAULT_WORKSPACE_PANEL_STATE: WorkspacePanelState = {
export const PERSIST_KEYS = { export const PERSIST_KEYS = {
// Sidebar sections // Sidebar sections
workspacesSidebarArchived: 'workspaces-sidebar-archived', workspacesSidebarArchived: 'workspaces-sidebar-archived',
// Git panel sections // Right panel sections
gitAdvancedSettings: 'git-advanced-settings', gitAdvancedSettings: 'git-advanced-settings',
gitPanelRepositories: 'git-panel-repositories', gitPanelRepositories: 'git-panel-repositories',
gitPanelProject: 'git-panel-project', gitPanelProject: 'git-panel-project',
gitPanelAddRepositories: 'git-panel-add-repositories', gitPanelAddRepositories: 'git-panel-add-repositories',
rightPanelprocesses: 'right-panel-processes',
rightPanelPreview: 'right-panel-preview',
// Process panel sections // Process panel sections
processesSection: 'processes-section', processesSection: 'processes-section',
// Changes panel sections // Changes panel sections
changesSection: 'changes-section', changesSection: 'changes-section',
// Preview panel sections // Preview panel sections
devServerSection: 'dev-server-section', devServerSection: 'dev-server-section',
// Terminal panel section
terminalSection: 'terminal-section',
// GitHub comments toggle // GitHub comments toggle
showGitHubComments: 'show-github-comments', showGitHubComments: 'show-github-comments',
// Panel sizes // Panel sizes
@@ -66,8 +70,11 @@ export type PersistKey =
| typeof PERSIST_KEYS.processesSection | typeof PERSIST_KEYS.processesSection
| typeof PERSIST_KEYS.changesSection | typeof PERSIST_KEYS.changesSection
| typeof PERSIST_KEYS.devServerSection | typeof PERSIST_KEYS.devServerSection
| typeof PERSIST_KEYS.terminalSection
| typeof PERSIST_KEYS.showGitHubComments | typeof PERSIST_KEYS.showGitHubComments
| typeof PERSIST_KEYS.rightMainPanel | typeof PERSIST_KEYS.rightMainPanel
| typeof PERSIST_KEYS.rightPanelprocesses
| typeof PERSIST_KEYS.rightPanelPreview
| `repo-card-${string}` | `repo-card-${string}`
| `diff:${string}` | `diff:${string}`
| `edit:${string}` | `edit:${string}`
@@ -90,6 +97,7 @@ type State = {
// Global layout state (applies across all workspaces) // Global layout state (applies across all workspaces)
isLeftSidebarVisible: boolean; isLeftSidebarVisible: boolean;
isRightSidebarVisible: boolean; isRightSidebarVisible: boolean;
isTerminalVisible: boolean;
previewRefreshKey: number; previewRefreshKey: number;
// Workspace-specific panel state // Workspace-specific panel state
@@ -108,6 +116,8 @@ type State = {
toggleLeftSidebar: () => void; toggleLeftSidebar: () => void;
toggleLeftMainPanel: (workspaceId?: string) => void; toggleLeftMainPanel: (workspaceId?: string) => void;
toggleRightSidebar: () => void; toggleRightSidebar: () => void;
toggleTerminal: () => void;
setTerminalVisible: (value: boolean) => void;
toggleRightMainPanelMode: ( toggleRightMainPanelMode: (
mode: RightMainPanelMode, mode: RightMainPanelMode,
workspaceId?: string workspaceId?: string
@@ -141,6 +151,7 @@ export const useUiPreferencesStore = create<State>()(
// Global layout state // Global layout state
isLeftSidebarVisible: true, isLeftSidebarVisible: true,
isRightSidebarVisible: true, isRightSidebarVisible: true,
isTerminalVisible: true,
previewRefreshKey: 0, previewRefreshKey: 0,
// Workspace-specific panel state // Workspace-specific panel state
@@ -201,6 +212,11 @@ export const useUiPreferencesStore = create<State>()(
toggleRightSidebar: () => toggleRightSidebar: () =>
set((s) => ({ isRightSidebarVisible: !s.isRightSidebarVisible })), set((s) => ({ isRightSidebarVisible: !s.isRightSidebarVisible })),
toggleTerminal: () =>
set((s) => ({ isTerminalVisible: !s.isTerminalVisible })),
setTerminalVisible: (value) => set({ isTerminalVisible: value }),
toggleRightMainPanelMode: (mode, workspaceId) => { toggleRightMainPanelMode: (mode, workspaceId) => {
if (!workspaceId) return; if (!workspaceId) return;
const state = get(); const state = get();
@@ -306,6 +322,7 @@ export const useUiPreferencesStore = create<State>()(
// Global layout (persist sidebar visibility) // Global layout (persist sidebar visibility)
isLeftSidebarVisible: state.isLeftSidebarVisible, isLeftSidebarVisible: state.isLeftSidebarVisible,
isRightSidebarVisible: state.isRightSidebarVisible, isRightSidebarVisible: state.isRightSidebarVisible,
isTerminalVisible: state.isTerminalVisible,
// Workspace-specific panel state (persisted) // Workspace-specific panel state (persisted)
workspacePanelStates: state.workspacePanelStates, workspacePanelStates: state.workspacePanelStates,
}), }),
@@ -408,6 +425,7 @@ export function useWorkspacePanelState(workspaceId: string | undefined) {
const isRightSidebarVisible = useUiPreferencesStore( const isRightSidebarVisible = useUiPreferencesStore(
(s) => s.isRightSidebarVisible (s) => s.isRightSidebarVisible
); );
const isTerminalVisible = useUiPreferencesStore((s) => s.isTerminalVisible);
// Actions from store // Actions from store
const toggleRightMainPanelMode = useUiPreferencesStore( const toggleRightMainPanelMode = useUiPreferencesStore(
@@ -445,9 +463,10 @@ export function useWorkspacePanelState(workspaceId: string | undefined) {
rightMainPanelMode: wsState.rightMainPanelMode, rightMainPanelMode: wsState.rightMainPanelMode,
isLeftMainPanelVisible: wsState.isLeftMainPanelVisible, isLeftMainPanelVisible: wsState.isLeftMainPanelVisible,
// Global state (sidebars) // Global state (sidebars and terminal)
isLeftSidebarVisible, isLeftSidebarVisible,
isRightSidebarVisible, isRightSidebarVisible,
isTerminalVisible,
// Workspace-specific actions // Workspace-specific actions
toggleRightMainPanelMode: toggleRightMainPanelModeForWorkspace, toggleRightMainPanelMode: toggleRightMainPanelModeForWorkspace,

74
frontend/src/styles/new/index.css
View File

@@ -275,81 +275,82 @@
} }
} }
/* ANSI color classes for fancy-ansi */ /* ANSI color classes for fancy-ansi - optimized for both light and dark modes */
@layer components { @layer components {
.ansi-red { /* Light mode: use darker shades for contrast on light backgrounds */
@apply text-red-500; .new-design .ansi-red {
@apply text-red-700 dark:text-red-400;
} }
.ansi-green { .new-design .ansi-green {
@apply text-green-500; @apply text-green-700 dark:text-green-400;
} }
.ansi-yellow { .new-design .ansi-yellow {
@apply text-yellow-500; @apply text-yellow-700 dark:text-yellow-400;
} }
.ansi-blue { .new-design .ansi-blue {
@apply text-blue-500; @apply text-blue-700 dark:text-blue-400;
} }
.ansi-magenta { .new-design .ansi-magenta {
@apply text-purple-500; @apply text-purple-700 dark:text-purple-400;
} }
.ansi-cyan { .new-design .ansi-cyan {
@apply text-cyan-500; @apply text-cyan-700 dark:text-cyan-400;
} }
.ansi-white { .new-design .ansi-white {
@apply text-white; @apply text-gray-600 dark:text-gray-200;
} }
.ansi-black { .new-design .ansi-black {
@apply text-black; @apply text-black dark:text-gray-900;
} }
.ansi-bright-red { .new-design .ansi-bright-red {
@apply text-red-400; @apply text-red-600 dark:text-red-300;
} }
.ansi-bright-green { .new-design .ansi-bright-green {
@apply text-green-400; @apply text-green-600 dark:text-green-300;
} }
.ansi-bright-yellow { .new-design .ansi-bright-yellow {
@apply text-yellow-400; @apply text-amber-600 dark:text-yellow-300;
} }
.ansi-bright-blue { .new-design .ansi-bright-blue {
@apply text-blue-400; @apply text-blue-600 dark:text-blue-300;
} }
.ansi-bright-magenta { .new-design .ansi-bright-magenta {
@apply text-purple-400; @apply text-purple-600 dark:text-purple-300;
} }
.ansi-bright-cyan { .new-design .ansi-bright-cyan {
@apply text-cyan-400; @apply text-cyan-600 dark:text-cyan-300;
} }
.ansi-bright-white { .new-design .ansi-bright-white {
@apply text-gray-200; @apply text-gray-500 dark:text-gray-100;
} }
.ansi-bright-black { .new-design .ansi-bright-black {
@apply text-gray-700; @apply text-gray-600 dark:text-gray-500;
} }
.ansi-bold { .new-design .ansi-bold {
@apply font-bold; @apply font-bold;
} }
.ansi-italic { .new-design .ansi-italic {
@apply italic; @apply italic;
} }
.ansi-underline { .new-design .ansi-underline {
@apply underline; @apply underline;
} }
} }
@@ -359,6 +360,7 @@
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }
100% { 100% {
background-position: -200% 0; background-position: -200% 0;
} }

139
frontend/src/utils/terminalTheme.ts Normal file
View File

@@ -0,0 +1,139 @@
import type { ITheme } from '@xterm/xterm';
/**
* Convert HSL CSS variable value (e.g., "210 40% 98%") to hex color.
*/
function hslToHex(hslValue: string): string {
const trimmed = hslValue.trim();
if (!trimmed) return '#000000';
// Parse "H S% L%" format (space-separated, S and L have % suffix)
const parts = trimmed.split(/\s+/);
if (parts.length < 3) return '#000000';
const h = parseFloat(parts[0]) / 360;
const s = parseFloat(parts[1]) / 100;
const l = parseFloat(parts[2]) / 100;
// HSL to RGB conversion
let r: number, g: number, b: number;
if (s === 0) {
r = g = b = l;
} else {
const hue2rgb = (p: number, q: number, t: number) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
const toHex = (x: number) => {
const hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
/**
* Get the CSS variable value from the computed styles.
* Looks for the variable on .new-design element first, then falls back to :root.
*/
function getCssVariable(name: string): string {
// Try to get from .new-design element first (where theme variables are scoped)
const newDesignEl = document.querySelector('.new-design');
if (newDesignEl) {
const value = getComputedStyle(newDesignEl).getPropertyValue(name).trim();
if (value) return value;
}
// Fall back to document element
return getComputedStyle(document.documentElement)
.getPropertyValue(name)
.trim();
}
/**
* Build an xterm.js theme from CSS variables defined in index.css.
* Uses --console-background and --console-foreground as the main colors,
* and derives ANSI colors from a combination of theme-appropriate defaults.
*/
export function getTerminalTheme(): ITheme {
const background = getCssVariable('--bg-secondary');
const foreground = getCssVariable('--text-high');
const success = getCssVariable('--console-success');
const error = getCssVariable('--console-error');
// Detect if we're in dark mode by checking the class on html element
const isDark = document.documentElement.classList.contains('dark');
// Convert the main colors
const bgHex = hslToHex(background);
const fgHex = hslToHex(foreground);
const greenHex = hslToHex(success);
const redHex = hslToHex(error);
// Define ANSI palette based on light/dark mode
// These are carefully chosen to be readable on the respective backgrounds
if (isDark) {
return {
background: bgHex,
foreground: fgHex,
cursor: fgHex,
cursorAccent: bgHex,
selectionBackground: '#3d4966',
selectionForeground: fgHex,
black: '#1a1a1a',
red: redHex,
green: greenHex,
yellow: '#e0af68',
blue: '#7aa2f7',
magenta: '#bb9af7',
cyan: '#7dcfff',
white: '#c0caf5',
brightBlack: '#545c7e',
brightRed: redHex,
brightGreen: greenHex,
brightYellow: '#e0af68',
brightBlue: '#7aa2f7',
brightMagenta: '#bb9af7',
brightCyan: '#7dcfff',
brightWhite: fgHex,
};
} else {
// Light mode colors
return {
background: bgHex,
foreground: fgHex,
cursor: fgHex,
cursorAccent: bgHex,
selectionBackground: '#accef7',
selectionForeground: '#1a1a1a',
black: '#1a1a1a',
red: redHex,
green: greenHex,
yellow: '#946800',
blue: '#0550ae',
magenta: '#a626a4',
cyan: '#0e7490',
white: '#57606a',
brightBlack: '#4b5563',
brightRed: redHex,
brightGreen: greenHex,
brightYellow: '#7c5800',
brightBlue: '#0969da',
brightMagenta: '#8250df',
brightCyan: '#0891b2',
brightWhite: fgHex,
};
}
}

40
pnpm-lock.yaml generated
View File

@@ -122,6 +122,15 @@ importers:
'@virtuoso.dev/message-list': '@virtuoso.dev/message-list':
specifier: ^1.13.3 specifier: ^1.13.3
version: 1.13.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) version: 1.13.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@xterm/addon-fit':
specifier: ^0.10.0
version: 0.10.0(@xterm/xterm@5.5.0)
'@xterm/addon-web-links':
specifier: ^0.11.0
version: 0.11.0(@xterm/xterm@5.5.0)
'@xterm/xterm':
specifier: ^5.5.0
version: 5.5.0
class-variance-authority: class-variance-authority:
specifier: ^0.7.0 specifier: ^0.7.0
version: 0.7.1 version: 0.7.1
@@ -191,6 +200,9 @@ importers:
react-router-dom: react-router-dom:
specifier: ^6.8.1 specifier: ^6.8.1
version: 6.30.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) version: 6.30.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react-use-websocket:
specifier: ^4.13.0
version: 4.13.0
react-virtuoso: react-virtuoso:
specifier: ^4.14.0 specifier: ^4.14.0
version: 4.14.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) version: 4.14.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2090,6 +2102,19 @@ packages:
'@vue/shared@3.5.18': '@vue/shared@3.5.18':
resolution: {integrity: sha512-cZy8Dq+uuIXbxCZpuLd2GJdeSO/lIzIspC2WtkqIpje5QyFbvLaI5wZtdUjLHjGZrlVX6GilejatWwVYYRc8tA==} resolution: {integrity: sha512-cZy8Dq+uuIXbxCZpuLd2GJdeSO/lIzIspC2WtkqIpje5QyFbvLaI5wZtdUjLHjGZrlVX6GilejatWwVYYRc8tA==}
'@xterm/addon-fit@0.10.0':
resolution: {integrity: sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==}
peerDependencies:
'@xterm/xterm': ^5.0.0
'@xterm/addon-web-links@0.11.0':
resolution: {integrity: sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==}
peerDependencies:
'@xterm/xterm': ^5.0.0
'@xterm/xterm@5.5.0':
resolution: {integrity: sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==}
acorn-jsx@5.3.2: acorn-jsx@5.3.2:
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
peerDependencies: peerDependencies:
@@ -3201,6 +3226,9 @@ packages:
'@types/react': '@types/react':
optional: true optional: true
react-use-websocket@4.13.0:
resolution: {integrity: sha512-anMuVoV//g2N76Wxqvqjjo1X48r9Np3y1/gMl7arX84tAPXdy5R7sB5lO5hvCzQRYjqXwV8XMAiEBOUbyrZFrw==}
react-virtuoso@4.14.0: react-virtuoso@4.14.0:
resolution: {integrity: sha512-fR+eiCvirSNIRvvCD7ueJPRsacGQvUbjkwgWzBZXVq+yWypoH7mRUvWJzGHIdoRaCZCT+6mMMMwIG2S1BW3uwA==} resolution: {integrity: sha512-fR+eiCvirSNIRvvCD7ueJPRsacGQvUbjkwgWzBZXVq+yWypoH7mRUvWJzGHIdoRaCZCT+6mMMMwIG2S1BW3uwA==}
peerDependencies: peerDependencies:
@@ -5556,6 +5584,16 @@ snapshots:
'@vue/shared@3.5.18': {} '@vue/shared@3.5.18': {}
'@xterm/addon-fit@0.10.0(@xterm/xterm@5.5.0)':
dependencies:
'@xterm/xterm': 5.5.0
'@xterm/addon-web-links@0.11.0(@xterm/xterm@5.5.0)':
dependencies:
'@xterm/xterm': 5.5.0
'@xterm/xterm@5.5.0': {}
acorn-jsx@5.3.2(acorn@8.15.0): acorn-jsx@5.3.2(acorn@8.15.0):
dependencies: dependencies:
acorn: 8.15.0 acorn: 8.15.0
@@ -6625,6 +6663,8 @@ snapshots:
optionalDependencies: optionalDependencies:
'@types/react': 18.3.23 '@types/react': 18.3.23
react-use-websocket@4.13.0: {}
react-virtuoso@4.14.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): react-virtuoso@4.14.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies: dependencies:
react: 18.3.1 react: 18.3.1