@karmaniverous/jeeves-server 3.0.0-0

package/client/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "lint:fix": "eslint --fix .",
+    "typecheck": "tsc -b --noEmit"
+  },
+  "dependencies": {
+    "@codemirror/lang-cpp": "^6.0.3",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-php": "^6.0.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.36.5",
+    "@panzoom/panzoom": "^4.5.1",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.18",
+    "clsx": "^2.1.1",
+    "codemirror": "^6.0.2",
+    "lucide": "^0.575.0",
+    "lucide-react": "^0.564.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.0",
+    "tailwind-merge": "^3.4.1",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1"
+  }
+}

package/client/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/client/src/App.tsx

@@ -0,0 +1,22 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+import { AuthProvider } from '@/lib/auth';
+import { FileBrowser } from '@/pages/FileBrowser';
+import { Home } from '@/pages/Home';
+import { Runner } from '@/pages/Runner';
+import { RunnerJob } from '@/pages/RunnerJob';
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/runner/:jobId" element={<RunnerJob />} />
+          <Route path="/runner" element={<Runner />} />
+          <Route path="/browse/*" element={<FileBrowser />} />
+          <Route path="/" element={<Home />} />
+        </Routes>
+      </BrowserRouter>
+    </AuthProvider>
+  );
+}

package/client/src/components/AccountMenu.tsx

@@ -0,0 +1,167 @@
+import { ExternalLink, LogOut, User } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { useAuth } from '@/lib/AuthContext';
+
+export interface CollapsedItem {
+  node: React.ReactNode | ((onDismiss: () => void) => React.ReactNode);
+  /** Breakpoint at which this item is hidden from the header bar (and thus shown in the menu) */
+  breakpoint: 'bp-400' | 'bp-480' | 'sm' | 'md' | 'lg';
+  /** If true, this item contains a nested dropdown that should prevent account menu auto-close */
+  hasNestedDropdown?: boolean;
+}
+
+interface AccountMenuProps {
+  theme?: 'light' | 'dark';
+  onToggleTheme?: () => void;
+  /** Items that collapse into this menu at various breakpoints, in display order */
+  collapsedItems?: CollapsedItem[];
+}
+
+/**
+ * Maps breakpoint to Tailwind class that shows the item only BELOW that breakpoint.
+ * e.g. breakpoint 'sm' → item is in menu when < sm → "sm:hidden" (visible below sm, hidden at sm+)
+ */
+/**
+ * Maps breakpoint key to Tailwind class that hides the item AT OR ABOVE that width.
+ * Items appear in the menu only below their breakpoint.
+ * Using arbitrary min-width values for tighter control over when items fold.
+ */
+const BREAKPOINT_CLASS: Record<string, string> = {
+  'bp-400': 'min-[400px]:hidden',
+  'bp-480': 'min-[480px]:hidden',
+  sm: 'sm:hidden',       // 640px
+  md: 'md:hidden',       // 768px
+  lg: 'lg:hidden',       // 1024px
+};
+
+export function AccountMenu({ collapsedItems = [] }: AccountMenuProps) {
+  const { authenticated, email, picture } = useAuth();
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [privacyUrl, setPrivacyUrl] = useState<string | null>(null);
+  const [termsUrl, setTermsUrl] = useState<string | null>(null);
+
+  // Fetch content share links on mount
+  useEffect(() => {
+    fetch('/api/content-link/privacy')
+      .then((r) => r.json())
+      .then((data: { url?: string }) => { if (data.url) setPrivacyUrl(data.url); })
+      .catch(() => {});
+    fetch('/api/content-link/terms')
+      .then((r) => r.json())
+      .then((data: { url?: string }) => { if (data.url) setTermsUrl(data.url); })
+      .catch(() => {});
+  }, []);
+
+  // Track whether a nested Radix dropdown is currently open
+  const nestedDropdownOpen = useCallback(() => {
+    return !!document.querySelector('[data-radix-popper-content-wrapper]');
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e: Event) {
+      const target = e.target as HTMLElement;
+      // Don't close if click is inside the account menu
+      if (menuRef.current?.contains(target)) return;
+      // Don't close if a nested Radix dropdown is open anywhere
+      if (nestedDropdownOpen()) return;
+      // Don't close if click is inside any Radix portal
+      if (target.closest?.('[data-radix-popper-content-wrapper]')) return;
+      if (target.closest?.('[role="menu"]')) return;
+      setOpen(false);
+    }
+    document.addEventListener('pointerdown', handleClickOutside, true);
+    document.addEventListener('mousedown', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('pointerdown', handleClickOutside, true);
+      document.removeEventListener('mousedown', handleClickOutside, true);
+    };
+  }, [open, nestedDropdownOpen]);
+
+  if (!authenticated) return null;
+
+  const initial = email ? email[0].toUpperCase() : '?';
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-zinc-700 transition-colors"
+        title={email ?? 'Account'}
+      >
+        {picture ? (
+          <img src={picture} alt="" className="h-7 w-7 rounded-full" referrerPolicy="no-referrer" />
+        ) : (
+          <div className="h-7 w-7 rounded-full bg-blue-600 flex items-center justify-center text-white text-xs font-semibold">
+            {initial}
+          </div>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-1 w-56 bg-popover border border-border rounded-lg shadow-lg z-50 py-1">
+          {/* User info — links to Google account */}
+          <a
+            href="https://myaccount.google.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-3 py-2 border-b border-border hover:bg-accent transition-colors"
+          >
+            <User className="h-4 w-4 text-foreground" />
+            <span className="text-sm text-foreground truncate">{email}</span>
+          </a>
+
+          {/* Collapsed items — each visible in menu only below its breakpoint */}
+          {collapsedItems.map((item, i) => (
+            <div key={i} className={BREAKPOINT_CLASS[item.breakpoint]}>
+              {typeof item.node === 'function' ? item.node(() => setOpen(false)) : item.node}
+            </div>
+          ))}
+
+          {/* Separator before sign out if there are collapsed items */}
+          {collapsedItems.length > 0 && (
+            <div className="border-b border-border" />
+          )}
+
+          <a
+            href="/auth/logout"
+            className="flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-accent transition-colors"
+          >
+            <LogOut className="h-4 w-4" />
+            Sign out
+          </a>
+
+          {/* Legal links — share links to content/*.md */}
+          {(privacyUrl ?? termsUrl) && (
+            <div className="border-t border-border mt-1 pt-1">
+              {privacyUrl && (
+                <a
+                  href={privacyUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent transition-colors"
+                >
+                  <ExternalLink className="h-3 w-3" />
+                  Privacy
+                </a>
+              )}
+              {termsUrl && (
+                <a
+                  href={termsUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent transition-colors"
+                >
+                  <ExternalLink className="h-3 w-3" />
+                  Terms
+                </a>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/client/src/components/ActionDropdown.tsx

@@ -0,0 +1,120 @@
+/**
+ * Generic action dropdown with state machine (idle/loading/done/error),
+ * icon swapping, and variant rendering (header/default/menuItem).
+ *
+ * Used by LinkDropdown and DownloadDropdown to eliminate structural duplication.
+ */
+import { Check, Loader2, X } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export type ActionState = 'idle' | 'loading' | 'done' | 'error';
+
+export interface ActionDropdownProps {
+  /** Icon shown in idle state */
+  icon: LucideIcon;
+  /** Label for the trigger (menuItem variant) */
+  label: string;
+  /** Tooltip for the trigger button */
+  title: string;
+  /** Render variant */
+  variant?: 'header' | 'default' | 'menuItem';
+  /** Small variant for directory rows */
+  compact?: boolean;
+  /** Error callback */
+  onError?: (error: string) => void;
+  /** State change callback */
+  onStateChange?: (state: ActionState) => void;
+  /** Children rendered inside the dropdown content */
+  children: React.ReactNode;
+  /** Extra content before children (e.g., error display) — rendered by parent */
+  errorSlot?: React.ReactNode;
+  /** Dropdown content alignment */
+  align?: 'start' | 'center' | 'end';
+  /** Dropdown content width class */
+  contentClass?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** External state override (parent controls state) */
+  state?: ActionState;
+  /** Called when dropdown opens/closes */
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function ActionDropdown({
+  icon: IdleIcon,
+  label,
+  title,
+  variant = 'default',
+  compact,
+  state: externalState,
+  disabled,
+  children,
+  errorSlot,
+  align = 'end',
+  contentClass,
+  onOpenChange,
+}: ActionDropdownProps) {
+  const state = externalState ?? 'idle';
+  const isMenuItem = variant === 'menuItem';
+  const iconSize = compact ? 'h-3.5 w-3.5' : 'h-4 w-4';
+  const btnSize = compact ? 'h-7 w-7' : 'h-8 w-8';
+
+  const Icon = state === 'done' ? Check : state === 'error' ? X : state === 'loading' ? Loader2 : IdleIcon;
+  const iconColor = state === 'done' ? 'text-green-500' : state === 'error' ? 'text-red-500' : '';
+
+  const trigger = isMenuItem ? (
+    <button
+      className="flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-accent transition-colors w-full text-left"
+      disabled={disabled || state === 'loading'}
+    >
+      <Icon className={`h-4 w-4 shrink-0 ${iconColor} ${state === 'loading' ? 'animate-spin' : ''}`} />
+      {label}
+    </button>
+  ) : (
+    <Button
+      variant="ghost"
+      size="icon"
+      className={`${btnSize} ${iconColor || (variant === 'header' ? 'text-zinc-300 hover:text-white hover:bg-white/10' : 'text-muted-foreground hover:text-foreground')}`}
+      disabled={disabled || state === 'loading'}
+      title={title}
+    >
+      <Icon className={`${iconSize} ${state === 'loading' ? 'animate-spin' : ''}`} />
+    </Button>
+  );
+
+  return (
+    <DropdownMenu onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger asChild>
+        {trigger}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={align} className={contentClass}>
+        {errorSlot && (
+          <>
+            {errorSlot}
+            <DropdownMenuSeparator />
+          </>
+        )}
+        {children}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/** Reusable error message banner for dropdowns. */
+export function DropdownErrorBanner({ message }: { message: string | null }) {
+  if (!message) return null;
+  return (
+    <div className="px-2 py-1.5 text-xs text-red-500 bg-red-500/10 rounded mx-1 mb-1">
+      {message}
+    </div>
+  );
+}
+

package/client/src/components/CodeEditor.tsx

@@ -0,0 +1,143 @@
+/**
+ * Lazy-loaded CodeMirror editor for in-browser text editing.
+ * Only imported when the user clicks Edit on a text file's Raw tab.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { getLanguageExtension, loadCodeMirror } from '@/lib/codemirror';
+import { useTheme } from '@/lib/theme';
+
+interface CodeEditorProps {
+  content: string;
+  fileName: string;
+  onSave: (content: string) => Promise<void>;
+  onCancel: () => void;
+}
+
+export function CodeEditor({ content, fileName, onSave, onCancel }: CodeEditorProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<import('@codemirror/view').EditorView | null>(null);
+  const [dirty, setDirty] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [theme] = useTheme();
+  const savedContentRef = useRef(content);
+
+  const handleSave = useCallback(async () => {
+    if (!viewRef.current) return;
+    const newContent = viewRef.current.state.doc.toString();
+    setSaving(true);
+    try {
+      await onSave(newContent);
+      savedContentRef.current = newContent;
+      setDirty(false);
+    } finally {
+      setSaving(false);
+    }
+  }, [onSave]);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    let destroyed = false;
+
+    (async () => {
+      const { EditorView, EditorState, basicSetup, keymap, oneDark } = await loadCodeMirror();
+      if (destroyed) return;
+
+      const ext = fileName.split('.').pop() ?? '';
+      const langExt = await getLanguageExtension(ext);
+      if (destroyed) return;
+
+      const extensions = [
+        basicSetup,
+        keymap.of([{
+          key: 'Mod-s',
+          run: () => {
+            handleSave();
+            return true;
+          },
+        }]),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            const current = update.state.doc.toString();
+            setDirty(current !== savedContentRef.current);
+          }
+        }),
+        EditorView.theme({
+          '&': { fontSize: '14px', height: '100%' },
+          '.cm-scroller': { overflow: 'auto' },
+          '.cm-content': { fontFamily: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace" },
+          '.cm-gutters': { fontFamily: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace" },
+        }),
+      ];
+
+      if (theme === 'dark') {
+        extensions.push(oneDark);
+      }
+
+      if (langExt) {
+        extensions.push(langExt);
+      }
+
+      const state = EditorState.create({
+        doc: content,
+        extensions,
+      });
+
+      const view = new EditorView({
+        state,
+        parent: containerRef.current!,
+      });
+
+      viewRef.current = view;
+      setLoading(false);
+    })();
+
+    return () => {
+      destroyed = true;
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-muted/50">
+        <span className="text-sm font-medium text-foreground">Editing</span>
+        {dirty && (
+          <span className="text-xs px-1.5 py-0.5 bg-amber-500/20 text-amber-600 dark:text-amber-400 rounded">
+            unsaved
+          </span>
+        )}
+        <div className="flex-1" />
+        <button
+          onClick={onCancel}
+          className="px-3 py-1 text-sm rounded border border-border text-muted-foreground hover:bg-accent transition-colors"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={handleSave}
+          disabled={saving || !dirty}
+          className="px-3 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          {saving ? 'Saving…' : 'Save'}
+        </button>
+        <span className="text-xs text-muted-foreground hidden sm:inline">Ctrl+S</span>
+      </div>
+
+      {/* Editor */}
+      <div ref={containerRef} className="flex-1 overflow-hidden">
+        {loading && (
+          <div className="flex items-center justify-center h-32 text-muted-foreground">
+            Loading editor…
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/client/src/components/CodeViewer.tsx

@@ -0,0 +1,113 @@
+/**
+ * Read-only CodeMirror 6 viewer with syntax highlighting and code folding.
+ * Replaces highlight.js-based CodeBlock for the raw file view.
+ */
+import { Check, Copy } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+
+import { getLanguageExtension, loadCodeMirror } from '@/lib/codemirror';
+import { useTheme } from '@/lib/theme';
+
+interface CodeViewerProps {
+  content: string;
+  fileName: string;
+}
+
+export function CodeViewer({ content, fileName }: CodeViewerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<import('@codemirror/view').EditorView | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [copied, setCopied] = useState(false);
+  const [theme] = useTheme();
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    let destroyed = false;
+
+    (async () => {
+      const { EditorView, EditorState, basicSetup, oneDark } = await loadCodeMirror();
+      if (destroyed) return;
+
+      const ext = fileName.split('.').pop() ?? '';
+      const langExt = await getLanguageExtension(ext);
+      if (destroyed) return;
+
+      const extensions = [
+        basicSetup,
+        EditorState.readOnly.of(true),
+        EditorView.editable.of(false),
+        EditorView.theme({
+          '&': { fontSize: '14px' },
+          '.cm-scroller': { overflow: 'auto' },
+          '.cm-content': {
+            fontFamily: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace",
+          },
+          '.cm-gutters': {
+            fontFamily: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace",
+          },
+          // Style the cursor as invisible in read-only mode
+          '.cm-cursor': { display: 'none' },
+        }),
+      ];
+
+      if (theme === 'dark') {
+        extensions.push(oneDark);
+      }
+
+      if (langExt) {
+        extensions.push(langExt);
+      }
+
+      const state = EditorState.create({
+        doc: content,
+        extensions,
+      });
+
+      const view = new EditorView({
+        state,
+        parent: containerRef.current!,
+      });
+
+      viewRef.current = view;
+      setLoading(false);
+    })();
+
+    return () => {
+      destroyed = true;
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, [content, fileName, theme]);
+
+  return (
+    <div className="relative group rounded-lg border border-border overflow-hidden">
+      {/* Copy button */}
+      <div className="absolute top-2 right-2 z-10">
+        <button
+          onClick={() => void handleCopy()}
+          className="p-1.5 rounded bg-accent hover:bg-accent/80 text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-all"
+          title="Copy to clipboard"
+        >
+          {copied ? <Check className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5" />}
+        </button>
+      </div>
+
+      {/* CodeMirror container */}
+      <div ref={containerRef}>
+        {loading && (
+          <pre className="p-4 text-sm text-muted-foreground bg-muted">
+            <code>{content.slice(0, 200)}…</code>
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}

package/client/src/components/ConfirmDialog.tsx

@@ -0,0 +1,32 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+}
+
+export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel = 'Continue', onConfirm }: ConfirmDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogTitle>{title}</AlertDialogTitle>
+        <AlertDialogDescription>{description}</AlertDialogDescription>
+        <div className="flex justify-end gap-2 mt-2">
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>{confirmLabel}</AlertDialogAction>
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}