Add Project Home, Auth Bridge, shared auth token, and Tier-1 polish

Project Home (DESIGN-REVIEW §B2): the project is promoted from a 280px sidebar card to a first-class main-area view. ProjectCard.tsx (1,257 lines) is replaced by a select-only ProjectRow plus tabs for Overview, Sessions, Automation, Config and Files. The PortMappings, FileManager and ContainerProgress modals are absorbed rather than reimplemented. Config gains a Saved/Saving/Failed indicator — save-on-blur failures previously reached only console.error. Tier-1 polish (DESIGN-REVIEW §A): new elevation, muted-accent, disabled and focus-ring tokens; a global :focus-visible ring with every focus:outline-none removed; filled buttons moved to --accent-emphasis and white-on-success toggles retired, fixing three WCAG AA failures (2.1:1, 2.5:1, 2.4:1); a shared Modal primitive with role="dialog", focus trap and restore, adopted by all remaining modals; status indicators that carry a glyph and word rather than colour alone. Ctrl+Shift+W closes a tab, deliberately not Ctrl+W — that is readline's kill-word, used constantly in the terminal this app is built around. Auth Bridge: a general loopback-callback bridge so browser logins run inside a container (aws sso login, Concourse fly login, claude login) can complete against the host browser. Listeners are discovered from /proc/net/tcp{,6} — ss/netstat/lsof are absent from the image — bound on host 127.0.0.1 only, and tunnelled in over the Docker API via socat, which keeps working on Docker Desktop where container IPs are not routable. Falls back to [::1] because Node resolves localhost to IPv6 first, so claude login often binds ::1 alone. Opt-in per project. This extracts create_attached_exec() and moves the existing terminal session path onto it, so there is one attached-exec implementation rather than two. Shared auth token: `claude setup-token` is run in a container, the token is stored in the OS keychain and injected as CLAUDE_CODE_OAUTH_TOKEN into Anthropic-backend projects. Contrary to the initial design note, setup-token uses an Anthropic-hosted redirect and blocks on a stdin paste prompt rather than a loopback callback, so a stdin command is required for the flow to complete. The token is never logged, never returned to the frontend, and is redacted from the streamed output with a stateful matcher that withholds any tail that could still grow into a secret. Change detection uses a random rotation id rather than a hash, since a hash in a docker-inspect readable label would be an offline verification oracle. Frontend 33 -> 51 tests; Rust 34 tests. Both builds clean. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-09 11:35:42 -07:00
parent f68d10d5c2
commit 01a2f6aec8
83 changed files with 8042 additions and 3064 deletions
@@ -65,7 +65,7 @@ export default function AwsSettings() {
              value={globalAws.aws_config_path ?? ""}
              onChange={(e) => handleChange("aws_config_path", e.target.value)}
              placeholder="~/.aws"
-              className="flex-1 px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+              className="flex-1 px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
            />
            <button
              onClick={handleDetect}
@@ -86,7 +86,7 @@ export default function AwsSettings() {
          <select
            value={globalAws.aws_profile ?? ""}
            onChange={(e) => handleChange("aws_profile", e.target.value)}
-            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
          >
            <option value="">None (use default)</option>
            {profiles.map((p) => (
@@ -103,7 +103,7 @@ export default function AwsSettings() {
            value={globalAws.aws_region ?? ""}
            onChange={(e) => handleChange("aws_region", e.target.value)}
            placeholder="e.g., us-east-1"
-            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
          />
        </div>

@@ -115,7 +115,7 @@ export default function AwsSettings() {
            value={globalAws.default_model_id ?? ""}
            onChange={(e) => handleChange("default_model_id", e.target.value)}
            placeholder="anthropic.claude-sonnet-4-20250514-v1:0"
-            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
          />
        </div>
      </div>
@@ -96,7 +96,7 @@ export default function DockerSettings() {
                onClick={() => handleSourceChange(opt.value)}
                className={`flex-1 px-2 py-1.5 text-xs rounded border transition-colors ${
                  imageSource === opt.value
-                    ? "bg-[var(--accent)] text-white border-[var(--accent)]"
+                    ? "bg-[var(--accent-emphasis)] text-white border-[var(--accent)]"
                    : "bg-[var(--bg-tertiary)] border-[var(--border-color)] hover:bg-[var(--border-color)]"
                }`}
                title={opt.description}
@@ -116,7 +116,7 @@ export default function DockerSettings() {
              value={customInput}
              onChange={(e) => handleCustomChange(e.target.value)}
              placeholder="e.g., myregistry.com/image:tag"
-              className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+              className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
            />
          </div>
        )}
@@ -149,7 +149,7 @@ export default function DockerSettings() {
            <button
              onClick={handleBuild}
              disabled={working || !dockerAvailable}
-              className="px-3 py-1.5 text-xs bg-[var(--accent)] text-white rounded hover:bg-[var(--accent-hover)] disabled:opacity-50 transition-colors"
+              className="px-3 py-1.5 text-xs bg-[var(--accent-emphasis)] text-white rounded hover:bg-[var(--accent-emphasis-hover)] disabled:text-[var(--text-disabled)] transition-colors"
            >
              {working ? "Building..." : imageExists ? "Rebuild Image" : "Build Image"}
            </button>
@@ -157,7 +157,7 @@ export default function DockerSettings() {
            <button
              onClick={handlePull}
              disabled={working || !dockerAvailable}
-              className="px-3 py-1.5 text-xs bg-[var(--accent)] text-white rounded hover:bg-[var(--accent-hover)] disabled:opacity-50 transition-colors"
+              className="px-3 py-1.5 text-xs bg-[var(--accent-emphasis)] text-white rounded hover:bg-[var(--accent-emphasis-hover)] disabled:text-[var(--text-disabled)] transition-colors"
            >
              {working ? "Pulling..." : imageExists ? "Re-pull Image" : "Pull Image"}
            </button>
@@ -1,5 +1,6 @@
-import { useEffect, useRef, useCallback } from "react";
 import type { ImageUpdateInfo } from "../../lib/types";
+import Modal from "../ui/Modal";
+import Button from "../ui/Button";

 interface Props {
  imageUpdateInfo: ImageUpdateInfo;
@@ -12,23 +13,6 @@ export default function ImageUpdateDialog({
  onDismiss,
  onClose,
 }: Props) {
-  const overlayRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
-
-  const handleOverlayClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (e.target === overlayRef.current) onClose();
-    },
-    [onClose],
-  );
-
  const shortDigest = (digest: string) => {
    // Show first 16 chars of the hash part (after "sha256:")
    const hash = digest.startsWith("sha256:") ? digest.slice(7) : digest;
@@ -36,56 +20,45 @@ export default function ImageUpdateDialog({
  };

  return (
-    <div
-      ref={overlayRef}
-      onClick={handleOverlayClick}
-      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+    <Modal
+      title="Container Image Update"
+      onClose={onClose}
+      widthClassName="w-[30rem]"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onDismiss}>
+            Dismiss
+          </Button>
+          <Button onClick={onClose}>Close</Button>
+        </>
+      }
    >
-      <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-6 w-[28rem] max-h-[80vh] overflow-y-auto shadow-xl">
-        <h2 className="text-lg font-semibold mb-3">Container Image Update</h2>
+      <p className="text-[13px] text-[var(--text-secondary)] mb-4">
+        A newer version of the container image is available in the registry. Re-pull the
+        image in Docker settings to get the latest tools and fixes.
+      </p>

-        <p className="text-sm text-[var(--text-secondary)] mb-4">
-          A newer version of the container image is available in the registry.
-          Re-pull the image in Docker settings to get the latest tools and fixes.
-        </p>
-
-        <div className="space-y-2 mb-4 text-xs bg-[var(--bg-primary)] rounded p-3 border border-[var(--border-color)]">
-          {imageUpdateInfo.local_digest && (
-            <div className="flex justify-between">
-              <span className="text-[var(--text-secondary)]">Local digest</span>
-              <span className="font-mono text-[var(--text-primary)]">
-                {shortDigest(imageUpdateInfo.local_digest)}...
-              </span>
-            </div>
-          )}
+      <div className="space-y-2 mb-4 text-xs bg-[var(--bg-primary)] rounded-[var(--radius-control)] p-3 border border-[var(--border-color)]">
+        {imageUpdateInfo.local_digest && (
          <div className="flex justify-between">
-            <span className="text-[var(--text-secondary)]">Remote digest</span>
-            <span className="font-mono text-[var(--accent)]">
-              {shortDigest(imageUpdateInfo.remote_digest)}...
+            <span className="text-[var(--text-secondary)]">Local digest</span>
+            <span className="font-mono text-[var(--text-primary)]">
+              {shortDigest(imageUpdateInfo.local_digest)}…
            </span>
          </div>
-        </div>
-
-        <p className="text-xs text-[var(--text-secondary)] mb-4">
-          Go to Settings &gt; Docker and click &quot;Re-pull Image&quot; to update.
-          Running containers will not be affected until restarted.
-        </p>
-
-        <div className="flex items-center justify-end gap-2">
-          <button
-            onClick={onDismiss}
-            className="px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
-          >
-            Dismiss
-          </button>
-          <button
-            onClick={onClose}
-            className="px-3 py-1.5 text-xs bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] transition-colors"
-          >
-            Close
-          </button>
+        )}
+        <div className="flex justify-between">
+          <span className="text-[var(--text-secondary)]">Remote digest</span>
+          <span className="font-mono text-[var(--accent)]">
+            {shortDigest(imageUpdateInfo.remote_digest)}…
+          </span>
        </div>
      </div>
-    </div>
+
+      <p className="text-xs text-[var(--text-secondary)]">
+        Go to Settings &gt; Container and click &quot;Re-pull Image&quot; to update.
+        Running containers will not be affected until restarted.
+      </p>
+    </Modal>
  );
 }
@@ -77,7 +77,7 @@ export default function MicrophoneSettings() {
            value={selected}
            onChange={(e) => handleChange(e.target.value)}
            disabled={loading}
-            className="flex-1 px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="flex-1 px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
          >
            <option value="">System Default</option>
            {devices.map((d) => (
@@ -90,7 +90,7 @@ export default function MicrophoneSettings() {
            onClick={enumerateDevices}
            disabled={loading}
            title="Refresh microphone list"
-            className="text-xs px-2 py-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)] rounded transition-colors disabled:opacity-50"
+            className="text-xs px-2 py-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)] rounded transition-colors disabled:text-[var(--text-disabled)]"
          >
            {loading ? "..." : "Refresh"}
          </button>
@@ -33,7 +33,7 @@ export default function OllamaSettings() {
            value={globalOllama.base_url ?? ""}
            onChange={(e) => handleChange("base_url", e.target.value)}
            placeholder="http://host.docker.internal:11434"
-            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
          />
        </div>

@@ -44,7 +44,7 @@ export default function OllamaSettings() {
            value={globalOllama.default_model_id ?? ""}
            onChange={(e) => handleChange("default_model_id", e.target.value)}
            placeholder="qwen3.5:27b"
-            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
          />
        </div>
      </div>
@@ -33,7 +33,7 @@ export default function OpenAiCompatibleSettings() {
            value={globalOai.base_url ?? ""}
            onChange={(e) => handleChange("base_url", e.target.value)}
            placeholder="http://host.docker.internal:4000"
-            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
          />
        </div>

@@ -44,7 +44,7 @@ export default function OpenAiCompatibleSettings() {
            value={globalOai.default_model_id ?? ""}
            onChange={(e) => handleChange("default_model_id", e.target.value)}
            placeholder="gpt-4o / gemini-pro / etc."
-            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
          />
        </div>
      </div>
@@ -12,6 +12,7 @@ import { detectHostTimezone } from "../../lib/tauri-commands";
 import type { EnvVar } from "../../lib/types";
 import Tooltip from "../ui/Tooltip";
 import AccordionSection from "../ui/AccordionSection";
+import Toggle from "../ui/Toggle";
 import WebTerminalSettings from "./WebTerminalSettings";
 import SttSettings from "./SttSettings";

@@ -86,7 +87,7 @@ export default function SettingsPanel() {
              }
            }}
            placeholder="UTC"
-            className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
          />
        </div>

@@ -177,7 +178,7 @@ export default function SettingsPanel() {
              }
            }}
            placeholder="~/.ssh"
-            className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
          />
        </div>

@@ -194,7 +195,7 @@ export default function SettingsPanel() {
              }
            }}
            placeholder="Your Name"
-            className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
          />
        </div>

@@ -211,7 +212,7 @@ export default function SettingsPanel() {
              }
            }}
            placeholder="you@example.com"
-            className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+            className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
          />
        </div>
      </AccordionSection>
@@ -230,27 +231,22 @@ export default function SettingsPanel() {
          )}
          <div className="flex items-center gap-2">
            <label className="text-xs text-[var(--text-secondary)]">Auto-check for updates</label>
-            <button
-              onClick={handleAutoCheckToggle}
-              className={`px-2 py-0.5 text-xs rounded transition-colors ${
-                appSettings?.auto_check_updates !== false
-                  ? "bg-[var(--success)] text-white"
-                  : "bg-[var(--bg-primary)] border border-[var(--border-color)] text-[var(--text-secondary)]"
-              }`}
-            >
-              {appSettings?.auto_check_updates !== false ? "ON" : "OFF"}
-            </button>
+            <Toggle
+              label="Auto-check for updates"
+              checked={appSettings?.auto_check_updates !== false}
+              onChange={handleAutoCheckToggle}
+            />
          </div>
          <button
            onClick={handleCheckNow}
            disabled={checkingUpdates}
-            className="px-3 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] disabled:opacity-50 transition-colors"
+            className="px-3 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] disabled:text-[var(--text-disabled)] transition-colors"
          >
            {checkingUpdates ? "Checking..." : "Check now"}
          </button>
          {imageUpdateInfo && (
-            <div className="flex items-center gap-2 px-3 py-2 text-xs bg-[var(--bg-primary)] border border-[var(--warning,#f59e0b)] rounded">
-              <span className="inline-block w-2 h-2 rounded-full bg-[var(--warning,#f59e0b)]" />
+            <div className="flex items-center gap-2 px-3 py-2 text-xs bg-[var(--bg-primary)] border border-[var(--warning)] rounded">
+              <span className="inline-block w-2 h-2 rounded-full bg-[var(--warning)]" />
              <span>A newer container image is available. Re-pull the image in Container settings above to update.</span>
            </div>
          )}
@@ -4,6 +4,7 @@ import { getSttStatus, startStt, stopStt, pullSttImage, buildSttImage } from "..
 import { listen } from "@tauri-apps/api/event";
 import type { SttStatus } from "../../lib/types";
 import Tooltip from "../ui/Tooltip";
+import Toggle from "../ui/Toggle";

 export default function SttSettings() {
  const { appSettings, saveSettings } = useSettings();
@@ -130,16 +131,11 @@ export default function SttSettings() {
      <div className="space-y-2">
        {/* Enable toggle */}
        <div className="flex items-center gap-2">
-          <button
-            onClick={handleToggleEnabled}
-            className={`px-2 py-0.5 text-xs rounded transition-colors ${
-              appSettings?.stt?.enabled
-                ? "bg-[var(--success)] text-white"
-                : "bg-[var(--bg-primary)] border border-[var(--border-color)] text-[var(--text-secondary)]"
-            }`}
-          >
-            {appSettings?.stt?.enabled ? "ON" : "OFF"}
-          </button>
+          <Toggle
+            label="Speech to text"
+            checked={!!appSettings?.stt?.enabled}
+            onChange={handleToggleEnabled}
+          />
          <span className="text-xs text-[var(--text-secondary)]">
            {appSettings?.stt?.enabled ? "Enabled" : "Disabled"}
          </span>
@@ -154,7 +150,7 @@ export default function SttSettings() {
                value={model}
                onChange={(e) => setModel(e.target.value)}
                onBlur={handleSaveModel}
-                className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+                className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
              >
                <option value="tiny">Tiny (fastest, ~75MB)</option>
                <option value="small">Small (balanced, ~500MB)</option>
@@ -172,7 +168,7 @@ export default function SttSettings() {
                onBlur={handleSavePort}
                min={1}
                max={65535}
-                className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+                className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
              />
            </div>

@@ -185,7 +181,7 @@ export default function SttSettings() {
                onChange={(e) => setLanguage(e.target.value)}
                onBlur={handleSaveLanguage}
                placeholder="Auto-detect"
-                className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)]"
+                className="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:border-[var(--accent)]"
              />
            </div>

@@ -222,14 +218,14 @@ export default function SttSettings() {
                <button
                  onClick={handlePull}
                  disabled={pulling || building}
-                  className="px-3 py-1 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] disabled:opacity-50 transition-colors"
+                  className="px-3 py-1 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] disabled:text-[var(--text-disabled)] transition-colors"
                >
                  {pulling ? "Pulling..." : "Pull Image"}
                </button>
                <button
                  onClick={handleBuild}
                  disabled={pulling || building}
-                  className="px-3 py-1 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] disabled:opacity-50 transition-colors"
+                  className="px-3 py-1 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] disabled:text-[var(--text-disabled)] transition-colors"
                >
                  {building ? "Building..." : "Build Locally"}
                </button>
@@ -1,6 +1,7 @@
-import { useEffect, useRef, useCallback } from "react";
 import { openUrl } from "@tauri-apps/plugin-opener";
 import type { UpdateInfo } from "../../lib/types";
+import Modal from "../ui/Modal";
+import Button from "../ui/Button";

 interface Props {
  updateInfo: UpdateInfo;
@@ -15,23 +16,6 @@ export default function UpdateDialog({
  onDismiss,
  onClose,
 }: Props) {
-  const overlayRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
-
-  const handleOverlayClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (e.target === overlayRef.current) onClose();
-    },
-    [onClose],
-  );
-
  const handleDownload = async (url: string) => {
    try {
      await openUrl(url);
@@ -46,76 +30,65 @@ export default function UpdateDialog({
  };

  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-[28rem] max-h-[80vh] overflow-y-auto shadow-xl">
-        <h2 className="text-lg font-semibold mb-3">Update Available</h2>
-
-        <div className="flex items-center gap-2 mb-4 text-sm">
-          <span className="text-[var(--text-secondary)]">{currentVersion}</span>
-          <span className="text-[var(--text-secondary)]">&rarr;</span>
-          <span className="text-[var(--accent)] font-semibold">
-            {updateInfo.version}
-          </span>
-        </div>
-
-        {updateInfo.body && (
-          <div className="mb-4">
-            <h3 className="text-xs font-semibold uppercase text-[var(--text-secondary)] mb-1">
-              Release Notes
-            </h3>
-            <div className="text-xs text-[var(--text-primary)] whitespace-pre-wrap bg-[var(--bg-primary)] rounded p-3 max-h-48 overflow-y-auto border border-[var(--border-color)]">
-              {updateInfo.body}
-            </div>
-          </div>
-        )}
-
-        {updateInfo.assets.length > 0 && (
-          <div className="mb-4 space-y-1">
-            <h3 className="text-xs font-semibold uppercase text-[var(--text-secondary)] mb-1">
-              Downloads
-            </h3>
-            {updateInfo.assets.map((asset) => (
-              <button
-                key={asset.name}
-                onClick={() => handleDownload(asset.browser_download_url)}
-                className="w-full flex items-center justify-between px-3 py-2 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:border-[var(--accent)] transition-colors"
-              >
-                <span className="truncate">{asset.name}</span>
-                <span className="text-[var(--text-secondary)] ml-2 flex-shrink-0">
-                  {formatSize(asset.size)}
-                </span>
-              </button>
-            ))}
-          </div>
-        )}
-
-        <div className="flex items-center justify-between">
-          <button
+    <Modal
+      title="Update Available"
+      onClose={onClose}
+      widthClassName="w-[30rem]"
+      footer={
+        <>
+          <Button
+            variant="ghost"
+            className="mr-auto text-[var(--accent)] hover:text-[var(--accent-hover)]"
            onClick={() => handleDownload(updateInfo.release_url)}
-            className="text-xs text-[var(--accent)] hover:text-[var(--accent-hover)] transition-colors"
          >
            View on Gitea
-          </button>
-          <div className="flex gap-2">
-            <button
-              onClick={onDismiss}
-              className="px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
-            >
-              Dismiss
-            </button>
-            <button
-              onClick={onClose}
-              className="px-3 py-1.5 text-xs bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] transition-colors"
-            >
-              Close
-            </button>
+          </Button>
+          <Button variant="ghost" onClick={onDismiss}>
+            Dismiss
+          </Button>
+          <Button onClick={onClose}>Close</Button>
+        </>
+      }
+    >
+      <div className="flex items-center gap-2 mb-4 text-[13px]">
+        <span className="text-[var(--text-secondary)] font-mono">{currentVersion}</span>
+        <span className="text-[var(--text-secondary)]">&rarr;</span>
+        <span className="text-[var(--accent)] font-semibold font-mono">
+          {updateInfo.version}
+        </span>
+      </div>
+
+      {updateInfo.body && (
+        <div className="mb-4">
+          <h3 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--text-secondary)] mb-1">
+            Release notes
+          </h3>
+          <div className="text-xs text-[var(--text-primary)] whitespace-pre-wrap bg-[var(--bg-primary)] rounded-[var(--radius-control)] p-3 max-h-48 overflow-y-auto border border-[var(--border-color)]">
+            {updateInfo.body}
          </div>
        </div>
-      </div>
-    </div>
+      )}
+
+      {updateInfo.assets.length > 0 && (
+        <div className="space-y-1">
+          <h3 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--text-secondary)] mb-1">
+            Downloads
+          </h3>
+          {updateInfo.assets.map((asset) => (
+            <button
+              key={asset.name}
+              type="button"
+              onClick={() => handleDownload(asset.browser_download_url)}
+              className="w-full flex items-center justify-between px-3 py-2 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-[var(--radius-control)] hover:border-[var(--accent)] transition-colors"
+            >
+              <span className="truncate font-mono">{asset.name}</span>
+              <span className="text-[var(--text-secondary)] ml-2 flex-shrink-0">
+                {formatSize(asset.size)}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </Modal>
  );
 }
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { startWebTerminal, stopWebTerminal, getWebTerminalStatus, regenerateWebTerminalToken } from "../../lib/tauri-commands";
 import type { WebTerminalInfo } from "../../lib/types";
 import Tooltip from "../ui/Tooltip";
+import Toggle from "../ui/Toggle";

 export default function WebTerminalSettings() {
  const [info, setInfo] = useState<WebTerminalInfo | null>(null);
@@ -68,17 +69,12 @@ export default function WebTerminalSettings() {
      <div className="space-y-2">
        {/* Toggle */}
        <div className="flex items-center gap-2">
-          <button
-            onClick={handleToggle}
+          <Toggle
+            label="Web terminal"
+            checked={!!info?.running}
            disabled={loading}
-            className={`px-2 py-0.5 text-xs rounded transition-colors ${
-              info?.running
-                ? "bg-[var(--success)] text-white"
-                : "bg-[var(--bg-primary)] border border-[var(--border-color)] text-[var(--text-secondary)]"
-            }`}
-          >
-            {loading ? "..." : info?.running ? "ON" : "OFF"}
-          </button>
+            onChange={handleToggle}
+          />
          <span className="text-xs text-[var(--text-secondary)]">
            {info?.running
              ? `Running on port ${info.port}`
@@ -116,7 +112,7 @@ export default function WebTerminalSettings() {
            </button>
            <button
              onClick={handleRegenerate}
-              className="text-xs px-2 py-0.5 text-[var(--warning,#f59e0b)] hover:bg-[var(--bg-primary)] rounded transition-colors"
+              className="text-xs px-2 py-0.5 text-[var(--warning)] hover:bg-[var(--bg-primary)] rounded transition-colors"
            >
              Regenerate
            </button>