coolify integration.

2026-02-27 08:55:41 -06:00
parent fe66be4aad
commit 2fe49b6725
62 changed files with 6366 additions and 129 deletions
--- a/app/renderer/components.json
+++ b/app/renderer/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
--- a/app/renderer/index.html
+++ b/app/renderer/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="Content-Security-Policy"
+    content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'" />
+  <title>Docker Deployment Manager</title>
+</head>
+<body class="bg-background text-foreground antialiased">
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>
--- a/app/renderer/package.json
+++ b/app/renderer/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "docker-deployment-manager-renderer",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0",
+    "@tanstack/react-query": "^5.0.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.5.0",
+    "lucide-react": "^0.460.0",
+    "sonner": "^1.7.0"
+  },
+  "devDependencies": {
+    "vite": "^6.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0",
+    "tailwindcss-animate": "^1.0.0"
+  }
+}
--- a/app/renderer/postcss.config.js
+++ b/app/renderer/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/app/renderer/src/app.jsx
+++ b/app/renderer/src/app.jsx
@@ -0,0 +1,51 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createHashRouter, RouterProvider } from 'react-router-dom';
+import { Toaster } from 'sonner';
+import { AppProvider } from '@/lib/app-context';
+import { AppLayout } from '@/components/layout/app-layout';
+import { DashboardPage } from '@/components/dashboard/dashboard-page';
+import { ServersPage } from '@/components/servers/servers-page';
+import { ProjectsPage } from '@/components/projects/projects-page';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+const router = createHashRouter([
+  {
+    path: '/',
+    element: <AppLayout />,
+    children: [
+      { index: true, element: <DashboardPage /> },
+      { path: 'servers', element: <ServersPage /> },
+      { path: 'projects', element: <ProjectsPage /> },
+      { path: 'projects/:projectName', element: <ProjectsPage /> },
+    ],
+  },
+]);
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AppProvider>
+        <RouterProvider router={router} />
+        <Toaster
+          theme="dark"
+          position="bottom-right"
+          toastOptions={{
+            style: {
+              background: 'hsl(222, 46%, 16%)',
+              border: '1px solid hsl(217, 71%, 22%)',
+              color: 'hsl(0, 0%, 93%)',
+            },
+          }}
+        />
+      </AppProvider>
+    </QueryClientProvider>
+  );
+}
--- a/app/renderer/src/components/dashboard/dashboard-page.jsx
+++ b/app/renderer/src/components/dashboard/dashboard-page.jsx
@@ -0,0 +1,151 @@
+import { Server, Container, Activity, AlertCircle } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { StatusDot } from '@/components/shared/status-dot';
+import { EmptyState } from '@/components/shared/empty-state';
+import { useServers } from '@/hooks/use-servers';
+import { useLocalProjects } from '@/hooks/use-projects';
+import { useRunningContainers } from '@/hooks/use-projects';
+import { useAppContext } from '@/lib/app-context';
+import { useNavigate } from 'react-router-dom';
+
+export function DashboardPage() {
+  const { data: servers, isLoading: serversLoading } = useServers();
+  const { data: localProjects } = useLocalProjects();
+  const { selectedServerId } = useAppContext();
+  const { data: containersResult } = useRunningContainers(selectedServerId);
+  const navigate = useNavigate();
+
+  const containers = containersResult?.containers || [];
+  const running = containers.filter((c) => c.status?.includes('Up')).length;
+  const stopped = containers.length - running;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold">Dashboard</h1>
+        <p className="text-sm text-muted-foreground">Fleet health overview</p>
+      </div>
+
+      {/* Fleet summary */}
+      <div className="grid grid-cols-4 gap-4">
+        <SummaryCard
+          icon={Container}
+          label="Local Projects"
+          value={localProjects?.length ?? '-'}
+        />
+        <SummaryCard
+          icon={Server}
+          label="Servers"
+          value={servers?.length ?? '-'}
+        />
+        <SummaryCard
+          icon={Activity}
+          label="Running"
+          value={selectedServerId ? running : '-'}
+          color="green"
+        />
+        <SummaryCard
+          icon={AlertCircle}
+          label="Stopped"
+          value={selectedServerId ? stopped : '-'}
+          color={stopped > 0 ? 'red' : 'gray'}
+        />
+      </div>
+
+      {/* Server cards */}
+      <div>
+        <h2 className="text-lg font-medium mb-3">Servers</h2>
+        {!servers || servers.length === 0 ? (
+          <EmptyState
+            icon={Server}
+            title="No servers configured"
+            description="Add a server to start managing deployments"
+          >
+            <Button variant="secondary" onClick={() => navigate('/servers')}>
+              Add Server
+            </Button>
+          </EmptyState>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {servers.map((server) => (
+              <ServerHealthCard key={server.id} server={server} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SummaryCard({ icon: Icon, label, value, color }) {
+  return (
+    <Card>
+      <CardContent className="p-4 flex items-center gap-3">
+        <div className="rounded-md bg-secondary p-2">
+          <Icon className="h-4 w-4 text-muted-foreground" />
+        </div>
+        <div>
+          <p className="text-2xl font-bold">{value}</p>
+          <p className="text-xs text-muted-foreground">{label}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ServerHealthCard({ server }) {
+  const { selectedServerId, setSelectedServerId } = useAppContext();
+  const isActive = selectedServerId === server.id;
+  const { data: containersResult } = useRunningContainers(isActive ? server.id : null);
+  const navigate = useNavigate();
+
+  const containers = containersResult?.containers || [];
+  const running = containers.filter((c) => c.status?.includes('Up')).length;
+
+  return (
+    <Card
+      className={isActive ? 'ring-1 ring-primary' : 'cursor-pointer hover:border-primary/50'}
+      onClick={() => {
+        setSelectedServerId(server.id);
+      }}
+    >
+      <CardHeader className="pb-2 p-4">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <StatusDot color={isActive && containers.length > 0 ? 'green' : 'gray'} />
+            {server.name}
+          </CardTitle>
+          {server.useSudo && (
+            <Badge variant="warning" className="text-[10px]">sudo</Badge>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="p-4 pt-0">
+        <p className="text-xs text-muted-foreground mb-2">{server.host}</p>
+        {isActive ? (
+          <div className="flex gap-3 text-xs">
+            <span className="text-[hsl(var(--success))]">{running} running</span>
+            <span className="text-muted-foreground">{containers.length} total</span>
+          </div>
+        ) : (
+          <p className="text-xs text-muted-foreground italic">Click to select</p>
+        )}
+        {isActive && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="mt-2 w-full text-xs"
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate('/projects');
+            }}
+          >
+            View Projects
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
--- a/app/renderer/src/components/deploy/deploy-button.jsx
+++ b/app/renderer/src/components/deploy/deploy-button.jsx
@@ -0,0 +1,262 @@
+import { useState } from 'react';
+import { Rocket, Hammer, Loader2, Wrench } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { DiffStatusBadge } from '@/components/projects/project-status-badge';
+import { useCompareProject, useInitProject } from '@/hooks/use-compare';
+import { useBuildTar, useDeployProject } from '@/hooks/use-deploy';
+import { useAppContext } from '@/lib/app-context';
+import { maskEnvContent } from '@/lib/utils';
+import { toast } from 'sonner';
+
+export function DeployActions({ project }) {
+  const { selectedServerId } = useAppContext();
+  const buildTar = useBuildTar();
+  const deployProject = useDeployProject();
+  const compare = useCompareProject();
+  const initProject = useInitProject();
+
+  const [buildLog, setBuildLog] = useState(null);
+  const [deployLog, setDeployLog] = useState(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [diff, setDiff] = useState(null);
+
+  const remotePath = project.remotePath || `~/containers/${project.name}`;
+
+  function handleBuild() {
+    setBuildLog('Building Docker image...');
+    buildTar.mutate(project.path, {
+      onSuccess: (result) => {
+        if (result.error) {
+          setBuildLog(`Error: ${result.error}\n${result.stderr || ''}`);
+          toast.error('Build failed');
+        } else {
+          setBuildLog(result.output + '\n\nBuild complete!');
+          toast.success('Build complete');
+        }
+      },
+      onError: (err) => {
+        setBuildLog(`Error: ${err.message}`);
+        toast.error('Build failed');
+      },
+    });
+  }
+
+  function handleDeploy() {
+    if (!selectedServerId) {
+      toast.error('Select a server first');
+      return;
+    }
+
+    compare.mutate(
+      { projectPath: project.path, serverId: selectedServerId, remotePath },
+      {
+        onSuccess: (result) => {
+          if (result.error) {
+            toast.error(`Compare failed: ${result.error}`);
+            return;
+          }
+
+          const d = result.diff;
+          const filesWithDiff = (d.files || []).filter(
+            (f) => f.status === 'different' || f.status === 'local-missing'
+          );
+
+          if (filesWithDiff.length > 0) {
+            setDiff(d);
+            setConfirmOpen(true);
+          } else {
+            executeDeploy();
+          }
+        },
+        onError: (err) => toast.error(err.message),
+      }
+    );
+  }
+
+  function executeDeploy() {
+    setConfirmOpen(false);
+    setDeployLog('Deploying...');
+
+    deployProject.mutate(
+      { projectPath: project.path, serverId: selectedServerId, remotePath },
+      {
+        onSuccess: (result) => {
+          if (result.error) {
+            setDeployLog(`Error: ${result.error}`);
+            toast.error('Deploy failed');
+          } else {
+            let log = '';
+            if (result.uploadedFiles?.length) {
+              log += `Uploaded:\n  - ${result.uploadedFiles.join('\n  - ')}\n\n`;
+            }
+            log += result.message || 'Deployment complete!';
+            if (result.status) log += `\n\nStatus:\n${result.status}`;
+            log += `\n\nHealth: ${result.healthy ? 'PASSED' : 'PENDING'}`;
+            setDeployLog(log);
+            toast.success(result.healthy ? 'Deploy successful' : 'Deployed (health check pending)');
+          }
+        },
+        onError: (err) => {
+          setDeployLog(`Error: ${err.message}`);
+          toast.error('Deploy failed');
+        },
+      }
+    );
+  }
+
+  function handleInit() {
+    initProject.mutate(project.path, {
+      onSuccess: (result) => {
+        if (result.error) {
+          toast.error(`Init failed: ${result.error}`);
+        } else {
+          toast.success('Project initialized');
+        }
+      },
+    });
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Action buttons */}
+      <div className="flex gap-2 flex-wrap">
+        {project.path && project.hasDockerfile && (
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleBuild}
+            disabled={buildTar.isPending}
+          >
+            {buildTar.isPending ? (
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            ) : (
+              <Hammer className="h-4 w-4 mr-2" />
+            )}
+            Build
+          </Button>
+        )}
+
+        {project.path && selectedServerId && (
+          <Button
+            size="sm"
+            onClick={handleDeploy}
+            disabled={deployProject.isPending || compare.isPending}
+          >
+            {deployProject.isPending || compare.isPending ? (
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            ) : (
+              <Rocket className="h-4 w-4 mr-2" />
+            )}
+            Deploy
+          </Button>
+        )}
+
+        {project.path && project.dockerStatus !== 'configured' && (
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleInit}
+            disabled={initProject.isPending}
+          >
+            <Wrench className="h-4 w-4 mr-2" />
+            Init
+          </Button>
+        )}
+      </div>
+
+      {/* Build log */}
+      {buildLog && (
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-medium text-muted-foreground">Build Output</span>
+            <Button variant="ghost" size="sm" className="h-6 text-[11px]" onClick={() => setBuildLog(null)}>
+              Clear
+            </Button>
+          </div>
+          <pre className="rounded-lg bg-secondary p-3 text-[11px] leading-relaxed max-h-60 overflow-auto whitespace-pre-wrap font-mono">
+            {buildLog}
+          </pre>
+        </div>
+      )}
+
+      {/* Deploy log */}
+      {deployLog && (
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-medium text-muted-foreground">Deploy Output</span>
+            <Button variant="ghost" size="sm" className="h-6 text-[11px]" onClick={() => setDeployLog(null)}>
+              Clear
+            </Button>
+          </div>
+          <pre className="rounded-lg bg-secondary p-3 text-[11px] leading-relaxed max-h-60 overflow-auto whitespace-pre-wrap font-mono">
+            {deployLog}
+          </pre>
+        </div>
+      )}
+
+      {/* Deploy confirmation dialog */}
+      <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-auto">
+          <DialogHeader>
+            <DialogTitle>Confirm Deployment: {project.name}</DialogTitle>
+            <DialogDescription>
+              Differences found between local and remote files. Continuing will overwrite remote.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3">
+            {(diff?.files || []).map((file) =>
+              file.status === 'different' || file.status === 'local-missing' ? (
+                <div key={file.name} className="rounded-lg border overflow-hidden">
+                  <div className="flex items-center gap-2 px-3 py-2 bg-secondary/50">
+                    <span className="text-sm font-medium">{file.name}</span>
+                    <DiffStatusBadge status={file.status} />
+                  </div>
+                  {(file.localContent || file.remoteContent) && (
+                    <div className="grid grid-cols-2 divide-x text-[11px]">
+                      <div>
+                        <div className="px-3 py-1 text-muted-foreground uppercase bg-background">Local</div>
+                        <pre className="px-3 py-2 max-h-40 overflow-auto whitespace-pre-wrap break-all">
+                          {(file.sensitive ? maskEnvContent(file.localContent) : file.localContent) || '(not found)'}
+                        </pre>
+                      </div>
+                      <div>
+                        <div className="px-3 py-1 text-muted-foreground uppercase bg-background">Remote</div>
+                        <pre className="px-3 py-2 max-h-40 overflow-auto whitespace-pre-wrap break-all">
+                          {(file.sensitive ? maskEnvContent(file.remoteContent) : file.remoteContent) || '(not found)'}
+                        </pre>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ) : null
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button variant="secondary" onClick={() => setConfirmOpen(false)}>
+              Abort
+            </Button>
+            <Button onClick={executeDeploy} disabled={deployProject.isPending}>
+              {deployProject.isPending ? (
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              ) : (
+                <Rocket className="h-4 w-4 mr-2" />
+              )}
+              Deploy (Overwrite Remote)
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
--- a/app/renderer/src/components/diff/diff-viewer.jsx
+++ b/app/renderer/src/components/diff/diff-viewer.jsx
@@ -0,0 +1,207 @@
+import { useState } from 'react';
+import { FileCode, Download, Upload, ExternalLink, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { DiffStatusBadge } from '@/components/projects/project-status-badge';
+import { useCompareProject } from '@/hooks/use-compare';
+import { usePullFile, usePullFiles } from '@/hooks/use-sync';
+import { useAppContext } from '@/lib/app-context';
+import { maskEnvContent } from '@/lib/utils';
+import { toolsApi } from '@/lib/api';
+import { toast } from 'sonner';
+
+export function DiffViewer({ project }) {
+  const { selectedServerId } = useAppContext();
+  const compare = useCompareProject();
+  const pullFile = usePullFile();
+  const pullFiles = usePullFiles();
+  const [diff, setDiff] = useState(null);
+
+  const remotePath = project.remotePath || `~/containers/${project.name}`;
+
+  function handleCompare() {
+    compare.mutate(
+      { projectPath: project.path, serverId: selectedServerId, remotePath },
+      {
+        onSuccess: (result) => {
+          if (result.error) {
+            toast.error(`Compare failed: ${result.error}`);
+          } else {
+            setDiff(result.diff);
+          }
+        },
+        onError: (err) => toast.error(err.message),
+      }
+    );
+  }
+
+  function handlePull(file) {
+    pullFile.mutate(
+      {
+        serverId: selectedServerId,
+        remotePath: file.remotePath,
+        localPath: file.localPath,
+        isDirectory: file.type === 'directory',
+      },
+      {
+        onSuccess: (result) => {
+          if (result.error) {
+            toast.error(`Pull failed: ${result.error}`);
+          } else {
+            toast.success(`Pulled ${file.name}`);
+            handleCompare(); // refresh
+          }
+        },
+      }
+    );
+  }
+
+  function handlePullAll() {
+    const filesToPull = (diff?.files || []).filter(
+      (f) => (f.status === 'different' || f.status === 'local-missing') && (f.remoteContent || f.type === 'directory')
+    );
+    if (!filesToPull.length) return;
+
+    pullFiles.mutate(
+      { serverId: selectedServerId, files: filesToPull },
+      {
+        onSuccess: (result) => {
+          if (result.error) {
+            toast.error(result.error);
+          } else {
+            toast.success(`Pulled ${result.pulled?.length || 0} files`);
+            handleCompare();
+          }
+        },
+      }
+    );
+  }
+
+  function handleVSCodeDiff(file) {
+    toolsApi.openVSCodeDiff({
+      localPath: file.localPath,
+      serverId: selectedServerId,
+      remoteFilePath: file.remotePath,
+    });
+  }
+
+  if (!selectedServerId) {
+    return (
+      <div className="text-sm text-muted-foreground py-8 text-center">
+        Select a server to compare files
+      </div>
+    );
+  }
+
+  if (!project.path) {
+    return (
+      <div className="text-sm text-muted-foreground py-8 text-center">
+        No local project path
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={handleCompare}
+          disabled={compare.isPending}
+        >
+          {compare.isPending ? (
+            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+          ) : (
+            <FileCode className="h-4 w-4 mr-2" />
+          )}
+          Compare Files
+        </Button>
+        {diff && (() => {
+          const pullable = (diff.files || []).filter(
+            (f) => f.status === 'different' || f.status === 'local-missing'
+          );
+          return pullable.length > 0 ? (
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handlePullAll}
+              disabled={pullFiles.isPending}
+            >
+              <Download className="h-4 w-4 mr-2" />
+              Pull All Different ({pullable.length})
+            </Button>
+          ) : null;
+        })()}
+      </div>
+
+      {diff && (
+        <div className="space-y-3">
+          {(diff.files || []).map((file, i) => (
+            <DiffFileCard
+              key={file.name}
+              file={file}
+              onPull={() => handlePull(file)}
+              onVSCodeDiff={() => handleVSCodeDiff(file)}
+              isPulling={pullFile.isPending}
+            />
+          ))}
+          {(!diff.files || diff.files.length === 0) && (
+            <p className="text-sm text-muted-foreground text-center py-4">No files to compare</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DiffFileCard({ file, onPull, onVSCodeDiff, isPulling }) {
+  const hasContent = file.localContent || file.remoteContent;
+  const localDisplay = file.sensitive ? maskEnvContent(file.localContent) : file.localContent;
+  const remoteDisplay = file.sensitive ? maskEnvContent(file.remoteContent) : file.remoteContent;
+
+  return (
+    <div className="rounded-lg border bg-card overflow-hidden">
+      <div className="flex items-center justify-between px-3 py-2 bg-secondary/50">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium">{file.name}</span>
+          <DiffStatusBadge status={file.status} />
+        </div>
+        <div className="flex gap-1">
+          {(file.status === 'different' || file.status === 'local-missing') && (
+            <Button variant="ghost" size="sm" onClick={onPull} disabled={isPulling}>
+              <Download className="h-3.5 w-3.5 mr-1" />
+              Pull
+            </Button>
+          )}
+          {file.status === 'different' && file.type !== 'directory' && (
+            <Button variant="ghost" size="sm" onClick={onVSCodeDiff}>
+              <ExternalLink className="h-3.5 w-3.5 mr-1" />
+              VS Code
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {hasContent && file.status !== 'match' && (
+        <div className="grid grid-cols-2 divide-x">
+          <div className="p-0">
+            <div className="px-3 py-1 text-[11px] text-muted-foreground uppercase bg-background">
+              Local
+            </div>
+            <pre className="px-3 py-2 text-[11px] leading-relaxed max-h-52 overflow-auto whitespace-pre-wrap break-all">
+              {localDisplay || '(not found)'}
+            </pre>
+          </div>
+          <div className="p-0">
+            <div className="px-3 py-1 text-[11px] text-muted-foreground uppercase bg-background">
+              Remote
+            </div>
+            <pre className="px-3 py-2 text-[11px] leading-relaxed max-h-52 overflow-auto whitespace-pre-wrap break-all">
+              {remoteDisplay || '(not found)'}
+            </pre>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/app/renderer/src/components/layout/app-layout.jsx
+++ b/app/renderer/src/components/layout/app-layout.jsx
@@ -0,0 +1,19 @@
+import { Outlet } from 'react-router-dom';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { ErrorBoundary } from '@/components/shared/error-boundary';
+import { Sidebar } from './sidebar';
+
+export function AppLayout() {
+  return (
+    <TooltipProvider>
+      <div className="flex h-screen overflow-hidden">
+        <Sidebar />
+        <main className="flex-1 overflow-auto">
+          <ErrorBoundary>
+            <Outlet />
+          </ErrorBoundary>
+        </main>
+      </div>
+    </TooltipProvider>
+  );
+}
--- a/app/renderer/src/components/layout/sidebar.jsx
+++ b/app/renderer/src/components/layout/sidebar.jsx
@@ -0,0 +1,75 @@
+import { NavLink } from 'react-router-dom';
+import { LayoutDashboard, Container, Settings } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
+import { useServers } from '@/hooks/use-servers';
+import { useAppContext } from '@/lib/app-context';
+
+const navItems = [
+  { to: '/', icon: LayoutDashboard, label: 'Dashboard', end: true },
+  { to: '/projects', icon: Container, label: 'Projects' },
+  { to: '/servers', icon: Settings, label: 'Settings' },
+];
+
+export function Sidebar() {
+  const { data: servers } = useServers();
+  const { selectedServerId, setSelectedServerId } = useAppContext();
+
+  return (
+    <aside className="flex flex-col w-56 shrink-0 border-r bg-card h-full">
+      {/* App title */}
+      <div className="flex items-center gap-2 px-4 h-14 border-b">
+        <Container className="h-5 w-5 text-primary" />
+        <span className="font-semibold text-sm">Docker Deploy</span>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex flex-col gap-1 p-2">
+        {navItems.map(({ to, icon: Icon, label, end }) => (
+          <NavLink
+            key={to}
+            to={to}
+            end={end}
+            className={({ isActive }) =>
+              cn(
+                'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-secondary text-foreground'
+                  : 'text-muted-foreground hover:bg-secondary/50 hover:text-foreground'
+              )
+            }
+          >
+            <Icon className="h-4 w-4" />
+            {label}
+          </NavLink>
+        ))}
+      </nav>
+
+      <Separator className="mx-2" />
+
+      {/* Server selector */}
+      <div className="p-3">
+        <label className="text-xs font-medium text-muted-foreground mb-1.5 block">
+          Active Server
+        </label>
+        <select
+          value={selectedServerId || ''}
+          onChange={(e) => setSelectedServerId(e.target.value || null)}
+          className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+        >
+          <option value="">None selected</option>
+          {(servers || []).map((server) => (
+            <option key={server.id} value={server.id}>
+              {server.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Footer */}
+      <div className="mt-auto p-3 border-t">
+        <p className="text-[11px] text-muted-foreground">v1.0.0</p>
+      </div>
+    </aside>
+  );
+}
--- a/app/renderer/src/components/projects/project-detail.jsx
+++ b/app/renderer/src/components/projects/project-detail.jsx
@@ -0,0 +1,134 @@
+import { FileCode, Check, X } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { StatusDot } from '@/components/shared/status-dot';
+import { ProjectStatusBadge, RunningStatusBadge, getRequiredFiles } from './project-status-badge';
+import { DiffViewer } from '@/components/diff/diff-viewer';
+import { LogsPanel } from '@/components/logs/logs-panel';
+import { DeployActions } from '@/components/deploy/deploy-button';
+import { useAppContext } from '@/lib/app-context';
+
+export function ProjectDetail({ project }) {
+  const { selectedServerId } = useAppContext();
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <h2 className="text-xl font-semibold flex items-center gap-2">
+            {project.name}
+            <RunningStatusBadge running={project.running} deployed={project.deployed} />
+          </h2>
+          {project.path && (
+            <p className="text-xs text-muted-foreground mt-1">{project.path}</p>
+          )}
+          {project.running?.ports && (
+            <p className="text-xs text-muted-foreground mt-0.5">Ports: {project.running.ports}</p>
+          )}
+        </div>
+        <ProjectStatusBadge project={project} />
+      </div>
+
+      {/* Tabs */}
+      <Tabs defaultValue="overview">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="files">Files</TabsTrigger>
+          <TabsTrigger value="logs">Logs</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="space-y-4 mt-4">
+          {/* File checklist */}
+          {project.path && (
+            <Card>
+              <CardContent className="p-4">
+                <h3 className="text-sm font-medium mb-3 flex items-center gap-2">
+                  <FileCode className="h-4 w-4" />
+                  Required Files
+                </h3>
+                <div className="space-y-2">
+                  {getRequiredFiles(project).map((file) => (
+                    <div key={file.name} className="flex items-center gap-2 text-sm">
+                      {file.present ? (
+                        <Check className="h-4 w-4 text-[hsl(var(--success))]" />
+                      ) : (
+                        <X className="h-4 w-4 text-destructive" />
+                      )}
+                      <span className="font-mono text-xs">{file.name}</span>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Status cards */}
+          <div className="grid grid-cols-3 gap-3">
+            <StatusCard
+              label="Deployed"
+              value={
+                !selectedServerId
+                  ? 'Select server'
+                  : project.deployed
+                  ? 'Yes'
+                  : 'No'
+              }
+              color={project.deployed ? 'green' : 'gray'}
+            />
+            <StatusCard
+              label="Running"
+              value={
+                !selectedServerId
+                  ? '-'
+                  : project.running
+                  ? project.running.status?.split(' ')[0]
+                  : project.deployed
+                  ? 'Stopped'
+                  : '-'
+              }
+              color={
+                project.running?.status?.includes('Up')
+                  ? 'green'
+                  : project.deployed
+                  ? 'red'
+                  : 'gray'
+              }
+            />
+            <StatusCard
+              label="Tar File"
+              value={project.tarFile ? 'Built' : 'Not built'}
+              color={project.tarFile ? 'green' : 'gray'}
+            />
+          </div>
+
+          {/* Deploy actions */}
+          <DeployActions project={project} />
+        </TabsContent>
+
+        <TabsContent value="files" className="mt-4">
+          <DiffViewer project={project} />
+        </TabsContent>
+
+        <TabsContent value="logs" className="mt-4">
+          <LogsPanel project={project} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+function StatusCard({ label, value, color }) {
+  return (
+    <Card>
+      <CardContent className="p-3">
+        <p className="text-[11px] text-muted-foreground mb-1">{label}</p>
+        <div className="flex items-center gap-2">
+          <StatusDot color={color} />
+          <span className="text-sm font-medium">{value}</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
--- a/app/renderer/src/components/projects/project-list-item.jsx
+++ b/app/renderer/src/components/projects/project-list-item.jsx
@@ -0,0 +1,37 @@
+import { cn } from '@/lib/utils';
+import { StatusDot } from '@/components/shared/status-dot';
+import { Badge } from '@/components/ui/badge';
+
+export function ProjectListItem({ project, isSelected, onClick }) {
+  const statusColor = project.running?.status?.includes('Up')
+    ? 'green'
+    : project.deployed
+    ? 'red'
+    : 'gray';
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'w-full flex items-center gap-3 rounded-md px-3 py-2.5 text-left text-sm transition-colors',
+        isSelected
+          ? 'bg-secondary text-foreground'
+          : 'text-muted-foreground hover:bg-secondary/50 hover:text-foreground'
+      )}
+    >
+      <StatusDot color={statusColor} />
+      <div className="flex-1 min-w-0">
+        <div className="font-medium truncate text-foreground">{project.name}</div>
+        {project.deployed && (
+          <div className="flex gap-1 mt-0.5">
+            {project.running?.status?.includes('Up') ? (
+              <Badge variant="success" className="text-[10px] px-1.5 py-0">active</Badge>
+            ) : project.deployed ? (
+              <Badge variant="destructive" className="text-[10px] px-1.5 py-0">exited</Badge>
+            ) : null}
+          </div>
+        )}
+      </div>
+    </button>
+  );
+}
--- a/app/renderer/src/components/projects/project-search.jsx
+++ b/app/renderer/src/components/projects/project-search.jsx
@@ -0,0 +1,33 @@
+import { Search } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+
+export function ProjectSearch({ value, onChange, statusFilter, onStatusFilterChange }) {
+  return (
+    <div className="space-y-2">
+      <div className="relative">
+        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="Search projects..."
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="pl-9 h-9"
+        />
+      </div>
+      <div className="flex gap-1">
+        {['all', 'running', 'stopped', 'not-deployed'].map((filter) => (
+          <button
+            key={filter}
+            onClick={() => onStatusFilterChange(filter)}
+            className={`px-2 py-0.5 text-[11px] rounded-md transition-colors ${
+              statusFilter === filter
+                ? 'bg-secondary text-foreground'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {filter === 'all' ? 'All' : filter === 'running' ? 'Running' : filter === 'stopped' ? 'Stopped' : 'Not Deployed'}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/app/renderer/src/components/projects/project-status-badge.jsx
+++ b/app/renderer/src/components/projects/project-status-badge.jsx
@@ -0,0 +1,60 @@
+import { Badge } from '@/components/ui/badge';
+
+export function ProjectStatusBadge({ project }) {
+  if (!project.path) {
+    return <Badge variant="secondary">Remote only</Badge>;
+  }
+
+  const missing = getRequiredFiles(project).filter((f) => !f.present).length;
+
+  if (missing === 0) {
+    return <Badge variant="success">Ready</Badge>;
+  }
+  if (missing <= 2) {
+    return <Badge variant="warning">{missing} missing</Badge>;
+  }
+  return <Badge variant="destructive">{missing} missing</Badge>;
+}
+
+export function RunningStatusBadge({ running, deployed }) {
+  if (running) {
+    const isUp = running.status?.includes('Up');
+    return (
+      <Badge variant={isUp ? 'success' : 'destructive'}>
+        {isUp ? 'Running' : 'Stopped'}
+      </Badge>
+    );
+  }
+  if (deployed) {
+    return <Badge variant="destructive">Stopped</Badge>;
+  }
+  return null;
+}
+
+export function DiffStatusBadge({ status }) {
+  switch (status) {
+    case 'match':
+      return <Badge variant="success">Match</Badge>;
+    case 'different':
+      return <Badge variant="warning">Different</Badge>;
+    case 'remote-missing':
+      return <Badge variant="destructive">Not on server</Badge>;
+    case 'local-missing':
+      return <Badge variant="warning">Only on server</Badge>;
+    case 'both-exist':
+      return <Badge variant="success">Both exist</Badge>;
+    case 'neither':
+      return <Badge variant="secondary">Neither</Badge>;
+    default:
+      return <Badge variant="secondary">Unknown</Badge>;
+  }
+}
+
+export function getRequiredFiles(project) {
+  return [
+    { name: 'Dockerfile', present: project.hasDockerfile },
+    { name: 'docker-compose.yml', present: project.hasDockerCompose },
+    { name: 'build-image-tar.ps1', present: project.hasBuildScript },
+    { name: '.dockerignore', present: project.hasDockerIgnore },
+  ];
+}
--- a/app/renderer/src/components/projects/projects-page.jsx
+++ b/app/renderer/src/components/projects/projects-page.jsx
@@ -0,0 +1,101 @@
+import { useState, useMemo } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Container } from 'lucide-react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { EmptyState } from '@/components/shared/empty-state';
+import { ProjectSearch } from './project-search';
+import { ProjectListItem } from './project-list-item';
+import { ProjectDetail } from './project-detail';
+import { useMergedProjects } from '@/hooks/use-merged-projects';
+import { useAppContext } from '@/lib/app-context';
+
+export function ProjectsPage() {
+  const { projectName } = useParams();
+  const navigate = useNavigate();
+  const { selectedServerId } = useAppContext();
+  const { projects, isLoading } = useMergedProjects(selectedServerId);
+
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+
+  const filtered = useMemo(() => {
+    let result = projects;
+
+    // Text search
+    if (search) {
+      const q = search.toLowerCase();
+      result = result.filter((p) => p.name.toLowerCase().includes(q));
+    }
+
+    // Status filter
+    if (statusFilter === 'running') {
+      result = result.filter((p) => p.running?.status?.includes('Up'));
+    } else if (statusFilter === 'stopped') {
+      result = result.filter((p) => p.deployed && !p.running?.status?.includes('Up'));
+    } else if (statusFilter === 'not-deployed') {
+      result = result.filter((p) => !p.deployed);
+    }
+
+    return result;
+  }, [projects, search, statusFilter]);
+
+  const selectedProject = projectName
+    ? projects.find((p) => p.name === decodeURIComponent(projectName))
+    : null;
+
+  return (
+    <div className="flex h-full">
+      {/* Left panel — project list */}
+      <div className="w-80 shrink-0 border-r flex flex-col h-full">
+        <div className="p-3 border-b">
+          <ProjectSearch
+            value={search}
+            onChange={setSearch}
+            statusFilter={statusFilter}
+            onStatusFilterChange={setStatusFilter}
+          />
+        </div>
+
+        <div className="p-2 border-b">
+          <span className="text-[11px] text-muted-foreground px-1">
+            {filtered.length} project{filtered.length !== 1 ? 's' : ''}
+            {isLoading ? ' (loading...)' : ''}
+          </span>
+        </div>
+
+        <ScrollArea className="flex-1">
+          <div className="p-1 space-y-0.5">
+            {filtered.map((project) => (
+              <ProjectListItem
+                key={project.name}
+                project={project}
+                isSelected={project.name === selectedProject?.name}
+                onClick={() => navigate(`/projects/${encodeURIComponent(project.name)}`)}
+              />
+            ))}
+            {filtered.length === 0 && !isLoading && (
+              <div className="py-8 text-center text-sm text-muted-foreground">
+                No projects found
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+
+      {/* Right panel — project detail */}
+      <div className="flex-1 overflow-auto">
+        {selectedProject ? (
+          <ProjectDetail project={selectedProject} />
+        ) : (
+          <EmptyState
+            icon={Container}
+            title="Select a project"
+            description="Choose a project from the list to view its details, compare files, and manage deployments"
+            className="h-full"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
--- a/app/renderer/src/components/servers/servers-page.jsx
+++ b/app/renderer/src/components/servers/servers-page.jsx
@@ -0,0 +1,271 @@
+import { useState } from 'react';
+import { Server, Plus, Pencil, Trash2, FolderOpen, Save } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Separator } from '@/components/ui/separator';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { EmptyState } from '@/components/shared/empty-state';
+import { useServers, useSaveServer, useDeleteServer } from '@/hooks/use-servers';
+import { useConfig, useSaveConfig } from '@/hooks/use-config';
+import { toast } from 'sonner';
+
+export function ServersPage() {
+  const { data: servers, isLoading } = useServers();
+  const { data: config } = useConfig();
+  const saveConfig = useSaveConfig();
+  const saveServer = useSaveServer();
+  const deleteServer = useDeleteServer();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingServer, setEditingServer] = useState(null);
+  const [projectsRoot, setProjectsRoot] = useState('');
+
+  // Sync local state when config loads
+  const currentRoot = projectsRoot || config?.projectsRoot || '';
+
+  function handleAdd() {
+    setEditingServer(null);
+    setDialogOpen(true);
+  }
+
+  function handleEdit(server) {
+    setEditingServer(server);
+    setDialogOpen(true);
+  }
+
+  function handleDelete(serverId) {
+    if (confirm('Delete this server?')) {
+      deleteServer.mutate(serverId);
+    }
+  }
+
+  function handleSave(formData) {
+    saveServer.mutate(formData, {
+      onSuccess: () => setDialogOpen(false),
+    });
+  }
+
+  function handleSaveRoot() {
+    if (!currentRoot) return;
+    saveConfig.mutate(
+      { projectsRoot: currentRoot },
+      {
+        onSuccess: () => {
+          toast.success('Projects root updated — go to Projects to rescan');
+          setProjectsRoot('');
+        },
+        onError: () => toast.error('Failed to save'),
+      }
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold">Settings</h1>
+          <p className="text-sm text-muted-foreground">Servers and project configuration</p>
+        </div>
+        <Button onClick={handleAdd}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Server
+        </Button>
+      </div>
+
+      {/* Projects Root Path */}
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <FolderOpen className="h-4 w-4" />
+            Projects Root
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-xs text-muted-foreground mb-3">
+            The folder containing your project repositories. The app scans subdirectories (up to 2 levels deep) for Dockerfiles.
+          </p>
+          <div className="flex gap-2">
+            <Input
+              value={projectsRoot || config?.projectsRoot || ''}
+              onChange={(e) => setProjectsRoot(e.target.value)}
+              placeholder="e.g., C:\.bucket\repos.gitea"
+              className="font-mono text-xs"
+            />
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleSaveRoot}
+              disabled={saveConfig.isPending || !currentRoot || currentRoot === config?.projectsRoot}
+            >
+              <Save className="h-4 w-4 mr-1" />
+              Save
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Separator />
+
+      {/* Servers */}
+      <div>
+        <h2 className="text-lg font-medium mb-3">Servers</h2>
+        {!servers || servers.length === 0 ? (
+          <EmptyState
+            icon={Server}
+            title="No servers yet"
+            description="Add your first server to start deploying Docker containers"
+          >
+            <Button onClick={handleAdd}>
+              <Plus className="h-4 w-4 mr-2" />
+              Add Server
+            </Button>
+          </EmptyState>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {servers.map((server) => (
+              <Card key={server.id}>
+                <CardHeader className="pb-2">
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-sm font-medium">{server.name}</CardTitle>
+                    <div className="flex gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={() => handleEdit(server)}
+                      >
+                        <Pencil className="h-3.5 w-3.5" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive"
+                        onClick={() => handleDelete(server.id)}
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-sm text-muted-foreground">{server.host}</p>
+                  {server.username && (
+                    <p className="text-xs text-muted-foreground mt-1">User: {server.username}</p>
+                  )}
+                  <div className="flex gap-2 mt-2">
+                    {server.useSudo && <Badge variant="warning">sudo</Badge>}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <ServerDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        server={editingServer}
+        onSave={handleSave}
+        isPending={saveServer.isPending}
+      />
+    </div>
+  );
+}
+
+function ServerDialog({ open, onOpenChange, server, onSave, isPending }) {
+  const [name, setName] = useState('');
+  const [host, setHost] = useState('');
+  const [username, setUsername] = useState('');
+  const [useSudo, setUseSudo] = useState(false);
+
+  // Reset form when dialog opens
+  function handleOpenChange(open) {
+    if (open) {
+      setName(server?.name || '');
+      setHost(server?.host || '');
+      setUsername(server?.username || '');
+      setUseSudo(server?.useSudo || false);
+    }
+    onOpenChange(open);
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!name || !host) return;
+    onSave({
+      id: server?.id,
+      name,
+      host,
+      username,
+      useSudo,
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{server ? 'Edit Server' : 'Add Server'}</DialogTitle>
+          <DialogDescription>
+            SSH credentials are read from the .env file (SSH_USERNAME, SSH_PASSWORD)
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              placeholder="e.g., Production Server"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="host">Host</Label>
+            <Input
+              id="host"
+              placeholder="e.g., 192.168.69.4"
+              value={host}
+              onChange={(e) => setHost(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="username">Username (optional)</Label>
+            <Input
+              id="username"
+              placeholder="From .env (SSH_USERNAME)"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="sudo"
+              checked={useSudo}
+              onCheckedChange={setUseSudo}
+            />
+            <Label htmlFor="sudo" className="text-sm font-normal">
+              Require sudo for Docker commands
+            </Label>
+          </div>
+          <DialogFooter>
+            <Button type="submit" disabled={isPending || !name || !host}>
+              {isPending ? 'Saving...' : 'Save'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/app/renderer/src/components/shared/empty-state.jsx
+++ b/app/renderer/src/components/shared/empty-state.jsx
@@ -0,0 +1,12 @@
+import { cn } from '@/lib/utils';
+
+export function EmptyState({ icon: Icon, title, description, children, className }) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center py-16 text-center', className)}>
+      {Icon && <Icon className="h-12 w-12 text-muted-foreground/50 mb-4" />}
+      {title && <h3 className="text-lg font-medium text-foreground mb-1">{title}</h3>}
+      {description && <p className="text-sm text-muted-foreground max-w-sm">{description}</p>}
+      {children && <div className="mt-4">{children}</div>}
+    </div>
+  );
+}
--- a/app/renderer/src/components/shared/error-boundary.jsx
+++ b/app/renderer/src/components/shared/error-boundary.jsx
@@ -0,0 +1,36 @@
+import { Component } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <AlertTriangle className="h-12 w-12 text-destructive mb-4" />
+          <h3 className="text-lg font-medium mb-1">Something went wrong</h3>
+          <p className="text-sm text-muted-foreground mb-4 max-w-md">
+            {this.state.error?.message || 'An unexpected error occurred'}
+          </p>
+          <Button
+            variant="secondary"
+            onClick={() => this.setState({ hasError: false, error: null })}
+          >
+            Try Again
+          </Button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
--- a/app/renderer/src/components/shared/status-dot.jsx
+++ b/app/renderer/src/components/shared/status-dot.jsx
@@ -0,0 +1,16 @@
+import { cn } from '@/lib/utils';
+
+const colorMap = {
+  green: 'bg-[hsl(180,80%,25%)]',
+  red: 'bg-[hsl(349,78%,58%)]',
+  yellow: 'bg-[hsl(37,90%,58%)]',
+  gray: 'bg-[hsl(0,0%,33%)]',
+};
+
+export function StatusDot({ color = 'gray', className }) {
+  return (
+    <span
+      className={cn('inline-block h-2.5 w-2.5 rounded-full', colorMap[color] || colorMap.gray, className)}
+    />
+  );
+}
--- a/app/renderer/src/components/ui/badge.jsx
+++ b/app/renderer/src/components/ui/badge.jsx
@@ -0,0 +1,27 @@
+import { cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow',
+        outline: 'text-foreground',
+        success: 'border-transparent bg-[hsl(var(--success))] text-[hsl(var(--success-foreground))]',
+        warning: 'border-transparent bg-[hsl(var(--warning))] text-[hsl(var(--warning-foreground))]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function Badge({ className, variant, ...props }) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
--- a/app/renderer/src/components/ui/button.jsx
+++ b/app/renderer/src/components/ui/button.jsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
--- a/app/renderer/src/components/ui/card.jsx
+++ b/app/renderer/src/components/ui/card.jsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h3 ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
--- a/app/renderer/src/components/ui/checkbox.jsx
+++ b/app/renderer/src/components/ui/checkbox.jsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <Check className="h-3.5 w-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
--- a/app/renderer/src/components/ui/dialog.jsx
+++ b/app/renderer/src/components/ui/dialog.jsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/70 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
--- a/app/renderer/src/components/ui/input.jsx
+++ b/app/renderer/src/components/ui/input.jsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = 'Input';
+
+export { Input };
--- a/app/renderer/src/components/ui/label.jsx
+++ b/app/renderer/src/components/ui/label.jsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Label = React.forwardRef(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    className={cn(
+      'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      className
+    )}
+    {...props}
+  />
+));
+Label.displayName = 'Label';
+
+export { Label };
--- a/app/renderer/src/components/ui/scroll-area.jsx
+++ b/app/renderer/src/components/ui/scroll-area.jsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '@/lib/utils';
+
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
--- a/app/renderer/src/components/ui/separator.jsx
+++ b/app/renderer/src/components/ui/separator.jsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '@/lib/utils';
+
+const Separator = React.forwardRef(
+  ({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
--- a/app/renderer/src/components/ui/tabs.jsx
+++ b/app/renderer/src/components/ui/tabs.jsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '@/lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
--- a/app/renderer/src/components/ui/tooltip.jsx
+++ b/app/renderer/src/components/ui/tooltip.jsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '@/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/app/renderer/src/globals.css
+++ b/app/renderer/src/globals.css
@@ -0,0 +1,61 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 230 40% 14%;
+    --foreground: 0 0% 93%;
+    --card: 222 46% 16%;
+    --card-foreground: 0 0% 93%;
+    --popover: 222 46% 16%;
+    --popover-foreground: 0 0% 93%;
+    --primary: 349 78% 58%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 217 71% 22%;
+    --secondary-foreground: 0 0% 93%;
+    --muted: 222 30% 20%;
+    --muted-foreground: 0 0% 53%;
+    --accent: 217 71% 22%;
+    --accent-foreground: 0 0% 93%;
+    --destructive: 349 78% 58%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 217 71% 22%;
+    --input: 217 71% 22%;
+    --ring: 349 78% 58%;
+    --radius: 0.5rem;
+
+    /* Semantic status colors */
+    --success: 180 80% 25%;
+    --success-foreground: 0 0% 100%;
+    --warning: 37 90% 58%;
+    --warning-foreground: 0 0% 0%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: hsl(var(--background));
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--secondary));
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground));
+  }
+}
--- a/app/renderer/src/hooks/use-compare.js
+++ b/app/renderer/src/hooks/use-compare.js
@@ -0,0 +1,14 @@
+import { useMutation } from '@tanstack/react-query';
+import { projectApi } from '@/lib/api';
+
+export function useCompareProject() {
+  return useMutation({
+    mutationFn: (data) => projectApi.compare(data),
+  });
+}
+
+export function useInitProject() {
+  return useMutation({
+    mutationFn: (projectPath) => projectApi.init(projectPath),
+  });
+}
--- a/app/renderer/src/hooks/use-config.js
+++ b/app/renderer/src/hooks/use-config.js
@@ -0,0 +1,23 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { configApi } from '@/lib/api';
+import { queryKeys } from '@/lib/query-keys';
+
+export function useConfig() {
+  return useQuery({
+    queryKey: queryKeys.config.all,
+    queryFn: () => configApi.get(),
+    staleTime: Infinity,
+  });
+}
+
+export function useSaveConfig() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (config) => configApi.save(config),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.config.all });
+      // Also refresh projects since root path may have changed
+      queryClient.invalidateQueries({ queryKey: queryKeys.projects.local });
+    },
+  });
+}
--- a/app/renderer/src/hooks/use-deploy.js
+++ b/app/renderer/src/hooks/use-deploy.js
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { deployApi } from '@/lib/api';
+import { queryKeys } from '@/lib/query-keys';
+
+export function useBuildTar() {
+  return useMutation({
+    mutationFn: (projectPath) => deployApi.buildTar(projectPath),
+  });
+}
+
+export function useDeployProject() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data) => deployApi.deploy(data),
+    onSuccess: (_result, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.projects.deployed(variables.serverId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.projects.containers(variables.serverId),
+      });
+    },
+  });
+}
--- a/app/renderer/src/hooks/use-logs.js
+++ b/app/renderer/src/hooks/use-logs.js
@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+import { logsApi } from '@/lib/api';
+import { queryKeys } from '@/lib/query-keys';
+
+export function useContainerLogs(serverId, remotePath, options = {}) {
+  return useQuery({
+    queryKey: queryKeys.logs.container(serverId, remotePath),
+    queryFn: () =>
+      logsApi.getContainerLogs({
+        serverId,
+        remotePath,
+        lines: options.lines || 100,
+      }),
+    enabled: !!serverId && !!remotePath,
+    refetchInterval: options.autoRefresh ? 5_000 : false,
+    staleTime: 0,
+  });
+}
--- a/app/renderer/src/hooks/use-merged-projects.js
+++ b/app/renderer/src/hooks/use-merged-projects.js
@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { useLocalProjects, useDeployedProjects, useRunningContainers } from './use-projects';
+
+export function useMergedProjects(serverId) {
+  const { data: localProjects, isLoading: localLoading } = useLocalProjects();
+  const { data: deployedResult, isLoading: deployedLoading } = useDeployedProjects(serverId);
+  const { data: containersResult, isLoading: containersLoading } = useRunningContainers(serverId);
+
+  const projects = useMemo(() => {
+    const projectMap = new Map();
+
+    // Add local projects
+    if (localProjects) {
+      for (const project of localProjects) {
+        projectMap.set(project.name, {
+          ...project,
+          deployed: null,
+          running: null,
+        });
+      }
+    }
+
+    // Match with deployed projects
+    const deployed = deployedResult?.deployed || [];
+    for (const dep of deployed) {
+      if (projectMap.has(dep.name)) {
+        projectMap.get(dep.name).deployed = dep;
+      } else {
+        projectMap.set(dep.name, {
+          name: dep.name,
+          path: null,
+          hasDockerfile: false,
+          hasDockerCompose: false,
+          dockerStatus: 'remote-only',
+          deployed: dep,
+          running: null,
+        });
+      }
+    }
+
+    // Match with running containers
+    const containers = containersResult?.containers || [];
+    for (const container of containers) {
+      for (const [name, project] of projectMap) {
+        if (container.name.includes(name) || name.includes(container.name)) {
+          project.running = container;
+          break;
+        }
+      }
+    }
+
+    return Array.from(projectMap.values());
+  }, [localProjects, deployedResult, containersResult]);
+
+  return {
+    projects,
+    isLoading: localLoading || (serverId && deployedLoading) || (serverId && containersLoading),
+  };
+}
--- a/app/renderer/src/hooks/use-projects.js
+++ b/app/renderer/src/hooks/use-projects.js
@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query';
+import { projectApi } from '@/lib/api';
+import { queryKeys } from '@/lib/query-keys';
+
+export function useLocalProjects() {
+  return useQuery({
+    queryKey: queryKeys.projects.local,
+    queryFn: () => projectApi.scanLocal(),
+    staleTime: 30_000,
+  });
+}
+
+export function useDeployedProjects(serverId) {
+  return useQuery({
+    queryKey: queryKeys.projects.deployed(serverId),
+    queryFn: () => projectApi.scanServer(serverId),
+    enabled: !!serverId,
+    staleTime: 60_000,
+  });
+}
+
+export function useRunningContainers(serverId) {
+  return useQuery({
+    queryKey: queryKeys.projects.containers(serverId),
+    queryFn: () => projectApi.getRunningContainers(serverId),
+    enabled: !!serverId,
+    refetchInterval: 30_000,
+    staleTime: 10_000,
+  });
+}
--- a/app/renderer/src/hooks/use-servers.js
+++ b/app/renderer/src/hooks/use-servers.js
@@ -0,0 +1,31 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { serverApi } from '@/lib/api';
+import { queryKeys } from '@/lib/query-keys';
+
+export function useServers() {
+  return useQuery({
+    queryKey: queryKeys.servers.all,
+    queryFn: () => serverApi.getAll(),
+    staleTime: Infinity,
+  });
+}
+
+export function useSaveServer() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (server) => serverApi.save(server),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.servers.all });
+    },
+  });
+}
+
+export function useDeleteServer() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (serverId) => serverApi.delete(serverId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.servers.all });
+    },
+  });
+}
--- a/app/renderer/src/hooks/use-sync.js
+++ b/app/renderer/src/hooks/use-sync.js
@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { syncApi } from '@/lib/api';
+import { queryKeys } from '@/lib/query-keys';
+
+export function usePullFile() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data) => syncApi.pullFile(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.projects.local });
+    },
+  });
+}
+
+export function usePullFiles() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data) => syncApi.pullFiles(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.projects.local });
+    },
+  });
+}
--- a/app/renderer/src/lib/api.js
+++ b/app/renderer/src/lib/api.js
@@ -0,0 +1,38 @@
+const api = window.api;
+
+export const serverApi = {
+  getAll: () => api.getServers(),
+  save: (server) => api.saveServer(server),
+  delete: (id) => api.deleteServer(id),
+};
+
+export const projectApi = {
+  scanLocal: () => api.scanLocalProjects(),
+  scanServer: (serverId) => api.scanServer(serverId),
+  getRunningContainers: (serverId) => api.getRunningContainers(serverId),
+  compare: (data) => api.compareProject(data),
+  init: (projectPath) => api.initProject(projectPath),
+};
+
+export const deployApi = {
+  buildTar: (projectPath) => api.buildTar(projectPath),
+  deploy: (data) => api.deployProject(data),
+};
+
+export const syncApi = {
+  pullFile: (data) => api.pullFile(data),
+  pullFiles: (data) => api.pullFiles(data),
+};
+
+export const logsApi = {
+  getContainerLogs: (data) => api.getContainerLogs(data),
+};
+
+export const configApi = {
+  get: () => api.getConfig(),
+  save: (config) => api.saveConfig(config),
+};
+
+export const toolsApi = {
+  openVSCodeDiff: (data) => api.openVSCodeDiff(data),
+};
--- a/app/renderer/src/lib/app-context.jsx
+++ b/app/renderer/src/lib/app-context.jsx
@@ -0,0 +1,21 @@
+import { createContext, useContext, useState } from 'react';
+
+const AppContext = createContext(null);
+
+export function AppProvider({ children }) {
+  const [selectedServerId, setSelectedServerId] = useState(null);
+
+  return (
+    <AppContext.Provider value={{ selectedServerId, setSelectedServerId }}>
+      {children}
+    </AppContext.Provider>
+  );
+}
+
+export function useAppContext() {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error('useAppContext must be used within AppProvider');
+  }
+  return context;
+}
--- a/app/renderer/src/lib/query-keys.js
+++ b/app/renderer/src/lib/query-keys.js
@@ -0,0 +1,16 @@
+export const queryKeys = {
+  servers: {
+    all: ['servers'],
+  },
+  projects: {
+    local: ['projects', 'local'],
+    deployed: (serverId) => ['projects', 'deployed', serverId],
+    containers: (serverId) => ['projects', 'containers', serverId],
+  },
+  logs: {
+    container: (serverId, remotePath) => ['logs', serverId, remotePath],
+  },
+  config: {
+    all: ['config'],
+  },
+};
--- a/app/renderer/src/lib/utils.js
+++ b/app/renderer/src/lib/utils.js
@@ -0,0 +1,24 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export function escapeHtml(text) {
+  if (!text) return '';
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+export function maskEnvContent(content) {
+  if (!content) return null;
+  return content.replace(
+    /^([A-Z_]+PASSWORD|[A-Z_]+SECRET|[A-Z_]+KEY|[A-Z_]+TOKEN)=(.+)$/gm,
+    '$1=****'
+  );
+}
--- a/app/renderer/src/main.jsx
+++ b/app/renderer/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app';
+import './globals.css';
+
+createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/app/renderer/tailwind.config.js
+++ b/app/renderer/tailwind.config.js
@@ -0,0 +1,50 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};
--- a/app/renderer/vite.config.js
+++ b/app/renderer/vite.config.js
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  root: '.',
+  base: './',
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    target: 'chrome130',
+  },
+  server: {
+    port: 5173,
+    strictPort: true,
+  },
+});