feat: show container progress in modal and add terminal jump-to-bottom button

Show container start/stop/rebuild progress as a modal popup instead of
inline text that was never visible. Add optimistic status updates so the
status dot turns yellow immediately. Also add a "Jump to Current" button
in the terminal when scrolled away from the bottom.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/src-tauri/src/commands/project_commands.rs

@@ -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(
-                    &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);
+            // 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_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)?;
+    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 {

app/src-tauri/src/docker/container.rs

@@ -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).

app/src-tauri/src/storage/projects_store.rs

@@ -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);
             }
         }
 

app/src/components/projects/ContainerProgressModal.tsx

@@ -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]} &ldquo;{projectName}&rdquo;
+        </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>
+  );
+}

app/src/components/projects/ProjectCard.tsx

@@ -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}...
-              </span>
+              <>
+                <span className="text-xs text-[var(--text-secondary)]">
+                  {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>
   );
 }

app/src/components/terminal/TerminalView.tsx

@@ -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"

app/src/hooks/useProjects.ts

@@ -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(