Compare commits
5 Commits
v0.1.71
...
v0.1.76-ma
| Author | SHA1 | Date | |
|---|---|---|---|
| 2ddc705925 | |||
| 1aced2d860 | |||
| 652e451afe | |||
| eb86aa95b7 | |||
| 3228e6cdd7 |
@@ -1,10 +1,20 @@
|
||||
use tauri::State;
|
||||
use tauri::{Emitter, State};
|
||||
|
||||
use crate::docker;
|
||||
use crate::models::{container_config, AuthMode, Project, ProjectPath, ProjectStatus};
|
||||
use crate::storage::secure;
|
||||
use crate::AppState;
|
||||
|
||||
fn emit_progress(app_handle: &tauri::AppHandle, project_id: &str, message: &str) {
|
||||
let _ = app_handle.emit(
|
||||
"container-progress",
|
||||
serde_json::json!({
|
||||
"project_id": project_id,
|
||||
"message": message,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/// Extract secret fields from a project and store them in the OS keychain.
|
||||
fn store_secrets_for_project(project: &Project) -> Result<(), String> {
|
||||
if let Some(ref token) = project.git_token {
|
||||
@@ -81,12 +91,19 @@ pub async fn remove_project(
|
||||
state: State<'_, AppState>,
|
||||
) -> Result<(), String> {
|
||||
// Stop and remove container if it exists
|
||||
if let Some(project) = state.projects_store.get(&project_id) {
|
||||
if let Some(ref project) = state.projects_store.get(&project_id) {
|
||||
if let Some(ref container_id) = project.container_id {
|
||||
state.exec_manager.close_sessions_for_container(container_id).await;
|
||||
let _ = docker::stop_container(container_id).await;
|
||||
let _ = docker::remove_container(container_id).await;
|
||||
}
|
||||
// Clean up the snapshot image + volumes
|
||||
if let Err(e) = docker::remove_snapshot_image(project).await {
|
||||
log::warn!("Failed to remove snapshot image for project {}: {}", project_id, e);
|
||||
}
|
||||
if let Err(e) = docker::remove_project_volumes(project).await {
|
||||
log::warn!("Failed to remove project volumes for project {}: {}", project_id, e);
|
||||
}
|
||||
}
|
||||
|
||||
// Clean up keychain secrets for this project
|
||||
@@ -109,6 +126,7 @@ pub async fn update_project(
|
||||
#[tauri::command]
|
||||
pub async fn start_project_container(
|
||||
project_id: String,
|
||||
app_handle: tauri::AppHandle,
|
||||
state: State<'_, AppState>,
|
||||
) -> Result<Project, String> {
|
||||
let mut project = state
|
||||
@@ -140,6 +158,7 @@ pub async fn start_project_container(
|
||||
// Wrap container operations so that any failure resets status to Stopped.
|
||||
let result: Result<String, String> = async {
|
||||
// Ensure image exists
|
||||
emit_progress(&app_handle, &project_id, "Checking image...");
|
||||
if !docker::image_exists(&image_name).await? {
|
||||
return Err(format!("Docker image '{}' not found. Please pull or build the image first.", image_name));
|
||||
}
|
||||
@@ -153,48 +172,77 @@ pub async fn start_project_container(
|
||||
// AWS config path from global settings
|
||||
let aws_config_path = settings.global_aws.aws_config_path.clone();
|
||||
|
||||
// Check for existing container
|
||||
let container_id = if let Some(existing_id) = docker::find_existing_container(&project).await? {
|
||||
let needs_recreation = docker::container_needs_recreation(
|
||||
// Check if config changed — if so, snapshot + recreate
|
||||
let needs_recreate = docker::container_needs_recreation(
|
||||
&existing_id,
|
||||
&project,
|
||||
settings.global_claude_instructions.as_deref(),
|
||||
&settings.global_custom_env_vars,
|
||||
settings.timezone.as_deref(),
|
||||
)
|
||||
.await
|
||||
.unwrap_or(false);
|
||||
if needs_recreation {
|
||||
log::info!("Container config changed, recreating container for project {}", project.id);
|
||||
).await.unwrap_or(false);
|
||||
|
||||
if needs_recreate {
|
||||
log::info!("Container config changed for project {} — committing snapshot and recreating", project.id);
|
||||
// Snapshot the filesystem before destroying
|
||||
emit_progress(&app_handle, &project_id, "Saving container state...");
|
||||
if let Err(e) = docker::commit_container_snapshot(&existing_id, &project).await {
|
||||
log::warn!("Failed to snapshot container before recreation: {}", e);
|
||||
}
|
||||
emit_progress(&app_handle, &project_id, "Recreating container...");
|
||||
let _ = docker::stop_container(&existing_id).await;
|
||||
docker::remove_container(&existing_id).await?;
|
||||
|
||||
// Create from snapshot image (preserves system-level changes)
|
||||
let snapshot_image = docker::get_snapshot_image_name(&project);
|
||||
let create_image = if docker::image_exists(&snapshot_image).await.unwrap_or(false) {
|
||||
snapshot_image
|
||||
} else {
|
||||
image_name.clone()
|
||||
};
|
||||
|
||||
let new_id = docker::create_container(
|
||||
&project,
|
||||
&docker_socket,
|
||||
&image_name,
|
||||
&create_image,
|
||||
aws_config_path.as_deref(),
|
||||
&settings.global_aws,
|
||||
settings.global_claude_instructions.as_deref(),
|
||||
&settings.global_custom_env_vars,
|
||||
settings.timezone.as_deref(),
|
||||
).await?;
|
||||
emit_progress(&app_handle, &project_id, "Starting container...");
|
||||
docker::start_container(&new_id).await?;
|
||||
new_id
|
||||
} else {
|
||||
emit_progress(&app_handle, &project_id, "Starting container...");
|
||||
docker::start_container(&existing_id).await?;
|
||||
existing_id
|
||||
}
|
||||
} else {
|
||||
// Container doesn't exist (first start, or Docker pruned it).
|
||||
// Check for a snapshot image first — it preserves system-level
|
||||
// changes (apt/pip/npm installs) from the previous session.
|
||||
let snapshot_image = docker::get_snapshot_image_name(&project);
|
||||
let create_image = if docker::image_exists(&snapshot_image).await.unwrap_or(false) {
|
||||
log::info!("Creating container from snapshot image for project {}", project.id);
|
||||
snapshot_image
|
||||
} else {
|
||||
image_name.clone()
|
||||
};
|
||||
|
||||
emit_progress(&app_handle, &project_id, "Creating container...");
|
||||
let new_id = docker::create_container(
|
||||
&project,
|
||||
&docker_socket,
|
||||
&image_name,
|
||||
&create_image,
|
||||
aws_config_path.as_deref(),
|
||||
&settings.global_aws,
|
||||
settings.global_claude_instructions.as_deref(),
|
||||
&settings.global_custom_env_vars,
|
||||
settings.timezone.as_deref(),
|
||||
).await?;
|
||||
emit_progress(&app_handle, &project_id, "Starting container...");
|
||||
docker::start_container(&new_id).await?;
|
||||
new_id
|
||||
};
|
||||
@@ -222,6 +270,7 @@ pub async fn start_project_container(
|
||||
#[tauri::command]
|
||||
pub async fn stop_project_container(
|
||||
project_id: String,
|
||||
app_handle: tauri::AppHandle,
|
||||
state: State<'_, AppState>,
|
||||
) -> Result<(), String> {
|
||||
let project = state
|
||||
@@ -229,22 +278,26 @@ pub async fn stop_project_container(
|
||||
.get(&project_id)
|
||||
.ok_or_else(|| format!("Project {} not found", project_id))?;
|
||||
|
||||
if let Some(ref container_id) = project.container_id {
|
||||
state.projects_store.update_status(&project_id, ProjectStatus::Stopping)?;
|
||||
|
||||
if let Some(ref container_id) = project.container_id {
|
||||
// Close exec sessions for this project
|
||||
emit_progress(&app_handle, &project_id, "Stopping container...");
|
||||
state.exec_manager.close_sessions_for_container(container_id).await;
|
||||
|
||||
docker::stop_container(container_id).await?;
|
||||
state.projects_store.update_status(&project_id, ProjectStatus::Stopped)?;
|
||||
if let Err(e) = docker::stop_container(container_id).await {
|
||||
log::warn!("Docker stop failed for container {} (project {}): {} — resetting to Stopped anyway", container_id, project_id, e);
|
||||
}
|
||||
}
|
||||
|
||||
state.projects_store.update_status(&project_id, ProjectStatus::Stopped)?;
|
||||
Ok(())
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub async fn rebuild_project_container(
|
||||
project_id: String,
|
||||
app_handle: tauri::AppHandle,
|
||||
state: State<'_, AppState>,
|
||||
) -> Result<Project, String> {
|
||||
let project = state
|
||||
@@ -260,8 +313,16 @@ pub async fn rebuild_project_container(
|
||||
state.projects_store.set_container_id(&project_id, None)?;
|
||||
}
|
||||
|
||||
// Remove snapshot image + volumes so Reset creates from the clean base image
|
||||
if let Err(e) = docker::remove_snapshot_image(&project).await {
|
||||
log::warn!("Failed to remove snapshot image for project {}: {}", project_id, e);
|
||||
}
|
||||
if let Err(e) = docker::remove_project_volumes(&project).await {
|
||||
log::warn!("Failed to remove project volumes for project {}: {}", project_id, e);
|
||||
}
|
||||
|
||||
// Start fresh
|
||||
start_project_container(project_id, state).await
|
||||
start_project_container(project_id, app_handle, state).await
|
||||
}
|
||||
|
||||
fn default_docker_socket() -> String {
|
||||
|
||||
@@ -1,23 +1,28 @@
|
||||
use bollard::Docker;
|
||||
use std::sync::OnceLock;
|
||||
use std::sync::Mutex;
|
||||
|
||||
static DOCKER: OnceLock<Result<Docker, String>> = OnceLock::new();
|
||||
static DOCKER: Mutex<Option<Docker>> = Mutex::new(None);
|
||||
|
||||
pub fn get_docker() -> Result<&'static Docker, String> {
|
||||
let result = DOCKER.get_or_init(|| {
|
||||
Docker::connect_with_local_defaults()
|
||||
.map_err(|e| format!("Failed to connect to Docker daemon: {}", e))
|
||||
});
|
||||
match result {
|
||||
Ok(docker) => Ok(docker),
|
||||
Err(e) => Err(e.clone()),
|
||||
pub fn get_docker() -> Result<Docker, String> {
|
||||
let mut guard = DOCKER.lock().map_err(|e| format!("Lock poisoned: {}", e))?;
|
||||
if let Some(docker) = guard.as_ref() {
|
||||
return Ok(docker.clone());
|
||||
}
|
||||
let docker = Docker::connect_with_local_defaults()
|
||||
.map_err(|e| format!("Failed to connect to Docker daemon: {}", e))?;
|
||||
guard.replace(docker.clone());
|
||||
Ok(docker)
|
||||
}
|
||||
|
||||
pub async fn check_docker_available() -> Result<bool, String> {
|
||||
let docker = get_docker()?;
|
||||
match docker.ping().await {
|
||||
Ok(_) => Ok(true),
|
||||
Err(e) => Err(format!("Docker daemon not responding: {}", e)),
|
||||
Err(_) => {
|
||||
// Connection object exists but daemon not responding — clear cache
|
||||
let mut guard = DOCKER.lock().map_err(|e| format!("Lock poisoned: {}", e))?;
|
||||
*guard = None;
|
||||
Ok(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ use bollard::container::{
|
||||
Config, CreateContainerOptions, ListContainersOptions, RemoveContainerOptions,
|
||||
StartContainerOptions, StopContainerOptions,
|
||||
};
|
||||
use bollard::image::{CommitContainerOptions, RemoveImageOptions};
|
||||
use bollard::models::{ContainerSummary, HostConfig, Mount, MountTypeEnum, PortBinding};
|
||||
use std::collections::HashMap;
|
||||
use std::collections::hash_map::DefaultHasher;
|
||||
@@ -367,7 +368,19 @@ pub async fn create_container(
|
||||
});
|
||||
}
|
||||
|
||||
// Named volume for claude config persistence
|
||||
// Named volume for the entire home directory — preserves ~/.claude.json,
|
||||
// ~/.local (pip/npm globals), and any other user-level state across
|
||||
// container stop/start cycles.
|
||||
mounts.push(Mount {
|
||||
target: Some("/home/claude".to_string()),
|
||||
source: Some(format!("triple-c-home-{}", project.id)),
|
||||
typ: Some(MountTypeEnum::VOLUME),
|
||||
read_only: Some(false),
|
||||
..Default::default()
|
||||
});
|
||||
|
||||
// Named volume for claude config persistence — mounted as a nested volume
|
||||
// inside the home volume; Docker gives the more-specific mount precedence.
|
||||
mounts.push(Mount {
|
||||
target: Some("/home/claude/.claude".to_string()),
|
||||
source: Some(format!("triple-c-claude-config-{}", project.id)),
|
||||
@@ -538,6 +551,83 @@ pub async fn remove_container(container_id: &str) -> Result<(), String> {
|
||||
.map_err(|e| format!("Failed to remove container: {}", e))
|
||||
}
|
||||
|
||||
/// Return the snapshot image name for a project.
|
||||
pub fn get_snapshot_image_name(project: &Project) -> String {
|
||||
format!("triple-c-snapshot-{}:latest", project.id)
|
||||
}
|
||||
|
||||
/// Commit the container's filesystem to a snapshot image so that system-level
|
||||
/// changes (apt/pip/npm installs, ~/.claude.json, etc.) survive container
|
||||
/// removal. The Config is left empty so that secrets injected as env vars are
|
||||
/// NOT baked into the image.
|
||||
pub async fn commit_container_snapshot(container_id: &str, project: &Project) -> Result<(), String> {
|
||||
let docker = get_docker()?;
|
||||
let image_name = get_snapshot_image_name(project);
|
||||
|
||||
// Parse repo:tag
|
||||
let (repo, tag) = match image_name.rsplit_once(':') {
|
||||
Some((r, t)) => (r.to_string(), t.to_string()),
|
||||
None => (image_name.clone(), "latest".to_string()),
|
||||
};
|
||||
|
||||
let options = CommitContainerOptions {
|
||||
container: container_id.to_string(),
|
||||
repo: repo.clone(),
|
||||
tag: tag.clone(),
|
||||
pause: true,
|
||||
..Default::default()
|
||||
};
|
||||
|
||||
// Empty config — no env vars / cmd baked in
|
||||
let config = Config::<String> {
|
||||
..Default::default()
|
||||
};
|
||||
|
||||
docker
|
||||
.commit_container(options, config)
|
||||
.await
|
||||
.map_err(|e| format!("Failed to commit container snapshot: {}", e))?;
|
||||
|
||||
log::info!("Committed container {} as snapshot {}:{}", container_id, repo, tag);
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Remove the snapshot image for a project (used on Reset / project removal).
|
||||
pub async fn remove_snapshot_image(project: &Project) -> Result<(), String> {
|
||||
let docker = get_docker()?;
|
||||
let image_name = get_snapshot_image_name(project);
|
||||
|
||||
docker
|
||||
.remove_image(
|
||||
&image_name,
|
||||
Some(RemoveImageOptions {
|
||||
force: true,
|
||||
noprune: false,
|
||||
}),
|
||||
None,
|
||||
)
|
||||
.await
|
||||
.map_err(|e| format!("Failed to remove snapshot image {}: {}", image_name, e))?;
|
||||
|
||||
log::info!("Removed snapshot image {}", image_name);
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Remove both named volumes for a project (used on Reset / project removal).
|
||||
pub async fn remove_project_volumes(project: &Project) -> Result<(), String> {
|
||||
let docker = get_docker()?;
|
||||
for vol in [
|
||||
format!("triple-c-home-{}", project.id),
|
||||
format!("triple-c-claude-config-{}", project.id),
|
||||
] {
|
||||
match docker.remove_volume(&vol, None).await {
|
||||
Ok(_) => log::info!("Removed volume {}", vol),
|
||||
Err(e) => log::warn!("Failed to remove volume {} (may not exist): {}", vol, e),
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Check whether the existing container's configuration still matches the
|
||||
/// current project settings. Returns `true` when the container must be
|
||||
/// recreated (mounts or env vars differ).
|
||||
|
||||
@@ -70,17 +70,38 @@ impl ProjectsStore {
|
||||
(Vec::new(), false)
|
||||
};
|
||||
|
||||
// Reconcile stale transient statuses: on a cold app start no Docker
|
||||
// operations can be in flight, so Starting/Stopping are always stale.
|
||||
let mut projects = projects;
|
||||
let mut needs_save = needs_save;
|
||||
for p in projects.iter_mut() {
|
||||
match p.status {
|
||||
crate::models::ProjectStatus::Starting | crate::models::ProjectStatus::Stopping => {
|
||||
log::warn!(
|
||||
"Reconciling stale '{}' status for project '{}' ({}) → Stopped",
|
||||
serde_json::to_string(&p.status).unwrap_or_default().trim_matches('"'),
|
||||
p.name,
|
||||
p.id
|
||||
);
|
||||
p.status = crate::models::ProjectStatus::Stopped;
|
||||
p.updated_at = chrono::Utc::now().to_rfc3339();
|
||||
needs_save = true;
|
||||
}
|
||||
_ => {}
|
||||
}
|
||||
}
|
||||
|
||||
let store = Self {
|
||||
projects: Mutex::new(projects),
|
||||
file_path,
|
||||
};
|
||||
|
||||
// Persist migrated format back to disk
|
||||
// Persist migrated/reconciled format back to disk
|
||||
if needs_save {
|
||||
log::info!("Migrated projects.json from single-path to multi-path format");
|
||||
log::info!("Saving reconciled/migrated projects.json to disk");
|
||||
let projects = store.lock();
|
||||
if let Err(e) = store.save(&projects) {
|
||||
log::error!("Failed to save migrated projects: {}", e);
|
||||
log::error!("Failed to save projects: {}", e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ import { useUpdates } from "./hooks/useUpdates";
|
||||
import { useAppState } from "./store/appState";
|
||||
|
||||
export default function App() {
|
||||
const { checkDocker, checkImage } = useDocker();
|
||||
const { checkDocker, checkImage, startDockerPolling } = useDocker();
|
||||
const { loadSettings } = useSettings();
|
||||
const { refresh } = useProjects();
|
||||
const { loadVersion, checkForUpdates, startPeriodicCheck } = useUpdates();
|
||||
@@ -22,8 +22,13 @@ export default function App() {
|
||||
// Initialize on mount
|
||||
useEffect(() => {
|
||||
loadSettings();
|
||||
let stopPolling: (() => void) | undefined;
|
||||
checkDocker().then((available) => {
|
||||
if (available) checkImage();
|
||||
if (available) {
|
||||
checkImage();
|
||||
} else {
|
||||
stopPolling = startDockerPolling();
|
||||
}
|
||||
});
|
||||
refresh();
|
||||
|
||||
@@ -34,6 +39,7 @@ export default function App() {
|
||||
return () => {
|
||||
clearTimeout(updateTimer);
|
||||
cleanup?.();
|
||||
stopPolling?.();
|
||||
};
|
||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
|
||||
109
app/src/components/projects/ContainerProgressModal.tsx
Normal file
109
app/src/components/projects/ContainerProgressModal.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import { useEffect, useRef, useCallback } from "react";
|
||||
|
||||
interface Props {
|
||||
projectName: string;
|
||||
operation: "starting" | "stopping" | "resetting";
|
||||
progressMsg: string | null;
|
||||
error: string | null;
|
||||
completed: boolean;
|
||||
onForceStop: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const operationLabels: Record<string, string> = {
|
||||
starting: "Starting",
|
||||
stopping: "Stopping",
|
||||
resetting: "Resetting",
|
||||
};
|
||||
|
||||
export default function ContainerProgressModal({
|
||||
projectName,
|
||||
operation,
|
||||
progressMsg,
|
||||
error,
|
||||
completed,
|
||||
onForceStop,
|
||||
onClose,
|
||||
}: Props) {
|
||||
const overlayRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Auto-close on success after 800ms
|
||||
useEffect(() => {
|
||||
if (completed && !error) {
|
||||
const timer = setTimeout(onClose, 800);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [completed, error, onClose]);
|
||||
|
||||
// Escape to close (only when completed or error)
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape" && (completed || error)) onClose();
|
||||
};
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [completed, error, onClose]);
|
||||
|
||||
const handleOverlayClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (e.target === overlayRef.current && (completed || error)) onClose();
|
||||
},
|
||||
[completed, error, onClose],
|
||||
);
|
||||
|
||||
const inProgress = !completed && !error;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={overlayRef}
|
||||
onClick={handleOverlayClick}
|
||||
className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
||||
>
|
||||
<div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-6 w-80 shadow-xl text-center">
|
||||
<h3 className="text-sm font-semibold mb-4">
|
||||
{operationLabels[operation]} “{projectName}”
|
||||
</h3>
|
||||
|
||||
{/* Spinner / checkmark / error icon */}
|
||||
<div className="flex justify-center mb-3">
|
||||
{error ? (
|
||||
<span className="text-3xl text-[var(--error)]">✕</span>
|
||||
) : completed ? (
|
||||
<span className="text-3xl text-[var(--success)]">✓</span>
|
||||
) : (
|
||||
<div className="w-8 h-8 border-2 border-[var(--accent)] border-t-transparent rounded-full animate-spin" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Progress message */}
|
||||
<p className="text-xs text-[var(--text-secondary)] min-h-[1.25rem] mb-4">
|
||||
{error
|
||||
? <span className="text-[var(--error)]">{error}</span>
|
||||
: completed
|
||||
? "Done!"
|
||||
: progressMsg ?? `${operationLabels[operation]}...`}
|
||||
</p>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex justify-center gap-2">
|
||||
{inProgress && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onForceStop(); }}
|
||||
className="px-3 py-1.5 text-xs text-[var(--error)] border border-[var(--error)]/30 rounded hover:bg-[var(--error)]/10 transition-colors"
|
||||
>
|
||||
Force Stop
|
||||
</button>
|
||||
)}
|
||||
{(completed || error) && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onClose(); }}
|
||||
className="px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] border border-[var(--border-color)] rounded transition-colors"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { open } from "@tauri-apps/plugin-dialog";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import type { Project, ProjectPath, AuthMode, BedrockConfig, BedrockAuthMethod } from "../../lib/types";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { useTerminal } from "../../hooks/useTerminal";
|
||||
@@ -7,6 +8,7 @@ import { useAppState } from "../../store/appState";
|
||||
import EnvVarsModal from "./EnvVarsModal";
|
||||
import PortMappingsModal from "./PortMappingsModal";
|
||||
import ClaudeInstructionsModal from "./ClaudeInstructionsModal";
|
||||
import ContainerProgressModal from "./ContainerProgressModal";
|
||||
|
||||
interface Props {
|
||||
project: Project;
|
||||
@@ -23,6 +25,9 @@ export default function ProjectCard({ project }: Props) {
|
||||
const [showEnvVarsModal, setShowEnvVarsModal] = useState(false);
|
||||
const [showPortMappingsModal, setShowPortMappingsModal] = useState(false);
|
||||
const [showClaudeInstructionsModal, setShowClaudeInstructionsModal] = useState(false);
|
||||
const [progressMsg, setProgressMsg] = useState<string | null>(null);
|
||||
const [activeOperation, setActiveOperation] = useState<"starting" | "stopping" | "resetting" | null>(null);
|
||||
const [operationCompleted, setOperationCompleted] = useState(false);
|
||||
const isSelected = selectedProjectId === project.id;
|
||||
const isStopped = project.status === "stopped" || project.status === "error";
|
||||
|
||||
@@ -64,9 +69,38 @@ export default function ProjectCard({ project }: Props) {
|
||||
setBedrockModelId(project.bedrock_config?.model_id ?? "");
|
||||
}, [project]);
|
||||
|
||||
// Listen for container progress events
|
||||
useEffect(() => {
|
||||
const unlisten = listen<{ project_id: string; message: string }>(
|
||||
"container-progress",
|
||||
(event) => {
|
||||
if (event.payload.project_id === project.id) {
|
||||
setProgressMsg(event.payload.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
return () => { unlisten.then((f) => f()); };
|
||||
}, [project.id]);
|
||||
|
||||
// Mark operation completed when status settles
|
||||
useEffect(() => {
|
||||
if (project.status === "running" || project.status === "stopped" || project.status === "error") {
|
||||
if (activeOperation) {
|
||||
setOperationCompleted(true);
|
||||
}
|
||||
// Clear progress if no modal is managing it
|
||||
if (!activeOperation) {
|
||||
setProgressMsg(null);
|
||||
}
|
||||
}
|
||||
}, [project.status, activeOperation]);
|
||||
|
||||
const handleStart = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setProgressMsg(null);
|
||||
setOperationCompleted(false);
|
||||
setActiveOperation("starting");
|
||||
try {
|
||||
await start(project.id);
|
||||
} catch (e) {
|
||||
@@ -79,6 +113,9 @@ export default function ProjectCard({ project }: Props) {
|
||||
const handleStop = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setProgressMsg(null);
|
||||
setOperationCompleted(false);
|
||||
setActiveOperation("stopping");
|
||||
try {
|
||||
await stop(project.id);
|
||||
} catch (e) {
|
||||
@@ -96,6 +133,21 @@ export default function ProjectCard({ project }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleForceStop = async () => {
|
||||
try {
|
||||
await stop(project.id);
|
||||
} catch (e) {
|
||||
setError(String(e));
|
||||
}
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setActiveOperation(null);
|
||||
setOperationCompleted(false);
|
||||
setProgressMsg(null);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const defaultBedrockConfig: BedrockConfig = {
|
||||
auth_method: "static_credentials",
|
||||
aws_region: "us-east-1",
|
||||
@@ -302,6 +354,10 @@ export default function ProjectCard({ project }: Props) {
|
||||
<ActionButton
|
||||
onClick={async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setProgressMsg(null);
|
||||
setOperationCompleted(false);
|
||||
setActiveOperation("resetting");
|
||||
try { await rebuild(project.id); } catch (e) { setError(String(e)); }
|
||||
setLoading(false);
|
||||
}}
|
||||
@@ -315,9 +371,12 @@ export default function ProjectCard({ project }: Props) {
|
||||
<ActionButton onClick={handleOpenTerminal} disabled={loading} label="Terminal" accent />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="text-xs text-[var(--text-secondary)]">
|
||||
{project.status}...
|
||||
{progressMsg ?? `${project.status}...`}
|
||||
</span>
|
||||
<ActionButton onClick={handleStop} disabled={loading} label="Force Stop" danger />
|
||||
</>
|
||||
)}
|
||||
<ActionButton
|
||||
onClick={(e) => { e?.stopPropagation?.(); setShowConfig(!showConfig); }}
|
||||
@@ -722,6 +781,18 @@ export default function ProjectCard({ project }: Props) {
|
||||
onClose={() => setShowClaudeInstructionsModal(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeOperation && (
|
||||
<ContainerProgressModal
|
||||
projectName={project.name}
|
||||
operation={activeOperation}
|
||||
progressMsg={progressMsg}
|
||||
error={error}
|
||||
completed={operationCompleted}
|
||||
onForceStop={handleForceStop}
|
||||
onClose={closeModal}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -25,6 +25,7 @@ export default function TerminalView({ sessionId, active }: Props) {
|
||||
|
||||
const [detectedUrl, setDetectedUrl] = useState<string | null>(null);
|
||||
const [imagePasteMsg, setImagePasteMsg] = useState<string | null>(null);
|
||||
const [isAtBottom, setIsAtBottom] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
@@ -86,6 +87,12 @@ export default function TerminalView({ sessionId, active }: Props) {
|
||||
sendInput(sessionId, data);
|
||||
});
|
||||
|
||||
// Track scroll position to show "Jump to Current" button
|
||||
const scrollDisposable = term.onScroll(() => {
|
||||
const buf = term.buffer.active;
|
||||
setIsAtBottom(buf.viewportY >= buf.baseY);
|
||||
});
|
||||
|
||||
// Handle image paste: intercept paste events with image data,
|
||||
// upload to the container, and inject the file path into terminal input.
|
||||
const handlePaste = (e: ClipboardEvent) => {
|
||||
@@ -164,6 +171,7 @@ export default function TerminalView({ sessionId, active }: Props) {
|
||||
detector.dispose();
|
||||
detectorRef.current = null;
|
||||
inputDisposable.dispose();
|
||||
scrollDisposable.dispose();
|
||||
containerRef.current?.removeEventListener("paste", handlePaste, { capture: true });
|
||||
outputPromise.then((fn) => fn?.());
|
||||
exitPromise.then((fn) => fn?.());
|
||||
@@ -231,6 +239,11 @@ export default function TerminalView({ sessionId, active }: Props) {
|
||||
}
|
||||
}, [detectedUrl]);
|
||||
|
||||
const handleScrollToBottom = useCallback(() => {
|
||||
termRef.current?.scrollToBottom();
|
||||
setIsAtBottom(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={terminalContainerRef}
|
||||
@@ -251,6 +264,14 @@ export default function TerminalView({ sessionId, active }: Props) {
|
||||
{imagePasteMsg}
|
||||
</div>
|
||||
)}
|
||||
{!isAtBottom && (
|
||||
<button
|
||||
onClick={handleScrollToBottom}
|
||||
className="absolute bottom-4 right-4 z-50 px-3 py-1.5 rounded-md text-xs font-medium bg-[#1f2937] text-[#58a6ff] border border-[#30363d] shadow-lg hover:bg-[#2d3748] transition-colors cursor-pointer"
|
||||
>
|
||||
Jump to Current ↓
|
||||
</button>
|
||||
)}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="w-full h-full"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useCallback } from "react";
|
||||
import { useCallback, useRef } from "react";
|
||||
import { useShallow } from "zustand/react/shallow";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { useAppState } from "../store/appState";
|
||||
@@ -59,6 +59,39 @@ export function useDocker() {
|
||||
[setImageExists],
|
||||
);
|
||||
|
||||
const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
const startDockerPolling = useCallback(() => {
|
||||
// Don't start if already polling
|
||||
if (pollingRef.current) return () => {};
|
||||
|
||||
const interval = setInterval(async () => {
|
||||
try {
|
||||
const available = await commands.checkDocker();
|
||||
if (available) {
|
||||
clearInterval(interval);
|
||||
pollingRef.current = null;
|
||||
setDockerAvailable(true);
|
||||
// Also check image once Docker is available
|
||||
try {
|
||||
const exists = await commands.checkImageExists();
|
||||
setImageExists(exists);
|
||||
} catch {
|
||||
setImageExists(false);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Still not available, keep polling
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
pollingRef.current = interval;
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
pollingRef.current = null;
|
||||
};
|
||||
}, [setDockerAvailable, setImageExists]);
|
||||
|
||||
const pullImage = useCallback(
|
||||
async (imageName: string, onProgress?: (msg: string) => void) => {
|
||||
const unlisten = onProgress
|
||||
@@ -84,5 +117,6 @@ export function useDocker() {
|
||||
checkImage,
|
||||
buildImage,
|
||||
pullImage,
|
||||
startDockerPolling,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -50,31 +50,45 @@ export function useProjects() {
|
||||
[removeProjectFromList],
|
||||
);
|
||||
|
||||
const setOptimisticStatus = useCallback(
|
||||
(id: string, status: "starting" | "stopping") => {
|
||||
const { projects } = useAppState.getState();
|
||||
const project = projects.find((p) => p.id === id);
|
||||
if (project) {
|
||||
updateProjectInList({ ...project, status });
|
||||
}
|
||||
},
|
||||
[updateProjectInList],
|
||||
);
|
||||
|
||||
const start = useCallback(
|
||||
async (id: string) => {
|
||||
setOptimisticStatus(id, "starting");
|
||||
const updated = await commands.startProjectContainer(id);
|
||||
updateProjectInList(updated);
|
||||
return updated;
|
||||
},
|
||||
[updateProjectInList],
|
||||
[updateProjectInList, setOptimisticStatus],
|
||||
);
|
||||
|
||||
const stop = useCallback(
|
||||
async (id: string) => {
|
||||
setOptimisticStatus(id, "stopping");
|
||||
await commands.stopProjectContainer(id);
|
||||
const list = await commands.listProjects();
|
||||
setProjects(list);
|
||||
},
|
||||
[setProjects],
|
||||
[setProjects, setOptimisticStatus],
|
||||
);
|
||||
|
||||
const rebuild = useCallback(
|
||||
async (id: string) => {
|
||||
setOptimisticStatus(id, "starting");
|
||||
const updated = await commands.rebuildProjectContainer(id);
|
||||
updateProjectInList(updated);
|
||||
return updated;
|
||||
},
|
||||
[updateProjectInList],
|
||||
[updateProjectInList, setOptimisticStatus],
|
||||
);
|
||||
|
||||
const update = useCallback(
|
||||
|
||||
Reference in New Issue
Block a user