@karmaniverous/jeeves-server 3.0.0-0

package/client/src/lib/svg.ts

@@ -0,0 +1,50 @@
+/**
+ * SVG normalization utilities shared between components.
+ */
+
+/**
+ * Normalize an SVG string for responsive display:
+ * - Fix preserveAspectRatio="none" (PlantUML quirk)
+ * - Remove inline width/height styles
+ * - Set width="100%" and let viewBox handle sizing
+ * - Ensure viewBox exists if dimensions are available
+ */
+export function normalizeSvg(svgText: string): string {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(svgText, 'image/svg+xml');
+  const svg = doc.querySelector('svg');
+  if (!svg) return svgText;
+
+  // Extract intrinsic dimensions for viewBox if missing
+  let w = 0, h = 0;
+  const viewBox = svg.getAttribute('viewBox');
+  if (viewBox) {
+    const parts = viewBox.split(/[\s,]+/).map(Number);
+    if (parts.length === 4) { w = parts[2]; h = parts[3]; }
+  }
+  if (w <= 0 || h <= 0) {
+    w = parseFloat(svg.getAttribute('width') ?? '0');
+    h = parseFloat(svg.getAttribute('height') ?? '0');
+  }
+
+  // Ensure viewBox exists
+  if (!svg.getAttribute('viewBox') && w > 0 && h > 0) {
+    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+  }
+
+  // Fix PlantUML preserveAspectRatio="none"
+  if (svg.getAttribute('preserveAspectRatio') === 'none') {
+    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+  }
+
+  // Strip fixed sizing
+  svg.removeAttribute('height');
+  svg.style.removeProperty('width');
+  svg.style.removeProperty('height');
+  svg.style.removeProperty('background');
+
+  // Set responsive sizing
+  svg.setAttribute('width', '100%');
+
+  return new XMLSerializer().serializeToString(doc);
+}

package/client/src/lib/theme.ts

@@ -0,0 +1,34 @@
+import { useState, useCallback, useEffect } from 'react';
+
+type Theme = 'light' | 'dark';
+
+function applyThemeClass(theme: Theme) {
+  if (theme === 'dark') {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+}
+
+export function useTheme(): [Theme, () => void] {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const saved = localStorage.getItem('jeeves-theme');
+    const t = (saved === 'dark' ? 'dark' : 'light') as Theme;
+    applyThemeClass(t);
+    return t;
+  });
+
+  useEffect(() => {
+    applyThemeClass(theme);
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => {
+      const next = prev === 'dark' ? 'light' : 'dark';
+      localStorage.setItem('jeeves-theme', next);
+      return next;
+    });
+  }, []);
+
+  return [theme, toggleTheme];
+}

package/client/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/client/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/client/src/pages/FileBrowser.tsx

@@ -0,0 +1,135 @@
+/**
+ * FileBrowser — thin composition root that wires hooks and components together.
+ */
+import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { DirectoryTable } from '@/components/DirectoryTable';
+import { DownloadDropdown } from '@/components/DownloadDropdown';
+import { DriveList } from '@/components/DriveList';
+import { FileContentView } from '@/components/FileContentView';
+import { Header } from '@/components/layout/Header';
+import { LinkDropdown } from '@/components/LinkDropdown';
+import { TabBar } from '@/components/TabBar';
+import { useFileBrowser } from '@/hooks/useFileBrowser';
+
+export function FileBrowser() {
+  const {
+    reqPath, theme, toggleTheme,
+    shareSettings, setShareSettings,
+    mobileTocOpen, setMobileTocOpen,
+    proseWidth, toggleProseWidth,
+    drives, directory, fileRaw, fileRendered, file,
+    loading, error, editing, setEditing,
+    viewTab, setViewTab,
+    breadcrumbs, isInsider, searchEnabled, keyAge,
+    rotateKeyDialogOpen, setRotateKeyDialogOpen,
+    handleRotateKey, confirmRotateKey,
+    topBarRef, mainRef, topBarHeight,
+    handleSave,
+  } = useFileBrowser();
+
+  const showFileView = file || (loading && !!reqPath);
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      {/* Fixed top bar */}
+      <div ref={topBarRef} className="fixed top-0 left-0 right-0 z-50">
+        <Header
+          breadcrumbs={breadcrumbs}
+          isInsider={isInsider}
+          searchEnabled={searchEnabled}
+          theme={theme}
+          onToggleTheme={toggleTheme}
+          keyAge={editing ? undefined : keyAge}
+          onRotateKey={editing ? undefined : handleRotateKey}
+          downloadDropdown={editing ? undefined :
+            file ? (
+              <DownloadDropdown reqPath={reqPath} file={file} isInsider={isInsider} variant="header" />
+            ) : directory ? (
+              <DownloadDropdown reqPath={reqPath} file={null} isDirectory isInsider={isInsider} variant="header" />
+            ) : undefined
+          }
+          downloadMenuItem={editing ? undefined :
+            file ? (
+              (onDismiss) => <DownloadDropdown reqPath={reqPath} file={file} isInsider={isInsider} variant="menuItem" onStateChange={(s) => { if (s === 'done') setTimeout(onDismiss, 800); }} />
+            ) : directory ? (
+              (onDismiss) => <DownloadDropdown reqPath={reqPath} file={null} isDirectory isInsider={isInsider} variant="menuItem" onStateChange={(s) => { if (s === 'done') setTimeout(onDismiss, 800); }} />
+            ) : undefined
+          }
+          linkControls={editing ? undefined : isInsider ? (
+            <LinkDropdown path={`/${reqPath}`} shareSettings={shareSettings} onShareSettingsChange={setShareSettings} showEvent showRaw={!!file} variant="header" isDirectory={!file} />
+          ) : undefined}
+          linkMenuItem={editing ? undefined : isInsider ? (
+            (onDismiss) => <LinkDropdown path={`/${reqPath}`} shareSettings={shareSettings} onShareSettingsChange={setShareSettings} showEvent showRaw={!!file} variant="menuItem" isDirectory={!file} onStateChange={(s) => { if (s === 'done') setTimeout(onDismiss, 800); }} />
+          ) : undefined}
+        />
+
+        {/* Tabs for file views */}
+        {showFileView && (
+          <TabBar
+            reqPath={reqPath}
+            file={file}
+            fileRendered={fileRendered}
+            viewTab={viewTab}
+            setViewTab={setViewTab}
+            proseWidth={proseWidth}
+            toggleProseWidth={toggleProseWidth}
+            isInsider={isInsider}
+            editing={editing}
+            setEditing={setEditing}
+            mobileTocOpen={mobileTocOpen}
+            setMobileTocOpen={setMobileTocOpen}
+            loading={loading}
+          />
+        )}
+      </div>
+
+      <main
+        ref={mainRef}
+        className={showFileView ? 'px-0 pb-32 overflow-y-auto' : 'p-4 pb-32 md:px-6 md:pt-6 overflow-y-auto'}
+        style={{ marginTop: `${topBarHeight}px`, height: `calc(100vh - ${topBarHeight}px)` }}
+      >
+        {loading && !reqPath && <div className="text-muted-foreground text-sm">Loading...</div>}
+        {error && <div className="text-destructive text-sm">Error: {error}</div>}
+
+        {/* Drive listing */}
+        {!loading && !error && drives && (
+          <DriveList drives={drives} isInsider={isInsider} shareSettings={shareSettings} onShareSettingsChange={setShareSettings} />
+        )}
+
+        {/* Directory listing */}
+        {!loading && !error && directory && (
+          <DirectoryTable entries={directory.entries} basePath={reqPath} isInsider={isInsider} shareSettings={shareSettings} onShareSettingsChange={setShareSettings} />
+        )}
+
+        {/* File viewer */}
+        {!error && showFileView && (
+          <FileContentView
+            reqPath={reqPath}
+            file={file}
+            fileRaw={fileRaw}
+            fileRendered={fileRendered}
+            viewTab={viewTab}
+            editing={editing}
+            setEditing={setEditing}
+            proseWidth={proseWidth}
+            topBarHeight={topBarHeight}
+            mainRef={mainRef}
+            mobileTocOpen={mobileTocOpen}
+            setMobileTocOpen={setMobileTocOpen}
+            onSave={handleSave}
+            loading={loading}
+          />
+        )}
+      </main>
+
+      <ConfirmDialog
+        open={rotateKeyDialogOpen}
+        onOpenChange={setRotateKeyDialogOpen}
+        title="Rotate insider key?"
+        description="This will invalidate ALL existing share links generated with your current key. This action cannot be undone."
+        confirmLabel="Rotate Key"
+        onConfirm={() => void confirmRotateKey()}
+      />
+    </div>
+  );
+}

package/client/src/pages/Home.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useAuth } from '@/lib/AuthContext';
+
+export function Home() {
+  const { loading, authenticated } = useAuth();
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (!loading && authenticated) {
+      navigate('/browse', { replace: true });
+    }
+  }, [loading, authenticated, navigate]);
+
+  if (loading) {
+    return (
+        <div className="min-h-screen bg-background flex items-center justify-center">
+          <div className="text-muted-foreground text-sm">Loading...</div>
+        </div>
+    );
+  }
+
+  return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-center space-y-6">
+          <div className="text-6xl mb-2">🎩</div>
+          <h1 className="text-2xl font-semibold text-foreground">Jeeves</h1>
+          <p className="text-muted-foreground text-sm max-w-xs mx-auto">
+            File browser and document server
+          </p>
+          <a
+            href="/auth/login?returnTo=/browse"
+            className="inline-flex items-center gap-3 px-6 py-3 bg-white text-zinc-800 rounded-lg shadow-md hover:shadow-lg transition-shadow font-medium text-sm border border-zinc-200"
+          >
+            <svg viewBox="0 0 24 24" width="20" height="20" className="shrink-0">
+              <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" />
+              <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+              <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+              <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+            </svg>
+            Sign in with Google
+          </a>
+        </div>
+      </div>
+  );
+}

package/client/src/pages/Runner.tsx

@@ -0,0 +1,151 @@
+/**
+ * Runner dashboard — job list view with stats summary and auto-refresh.
+ */
+
+import { RefreshCw } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Header } from '@/components/layout/Header';
+import { JobTableBody, JobTableHeader,  } from '@/components/runner/JobTable';
+import { nextSort, sortJobs } from '@/components/runner/jobTableUtils';
+import type { SortColumn, SortState } from '@/components/runner/JobTable';
+import { StatsBar } from '@/components/runner/StatsBar';
+import { Button } from '@/components/ui/button';
+import { useAuth } from '@/lib/AuthContext';
+import type { RunnerJob, RunnerStats } from '@/lib/runner-api';
+import { getRunnerJobs, getRunnerStats, triggerJobRun } from '@/lib/runner-api';
+import { useTheme } from '@/lib/theme';
+
+const REFRESH_INTERVAL = 10_000;
+
+export function Runner() {
+  const [jobs, setJobs] = useState<RunnerJob[]>([]);
+  const [stats, setStats] = useState<RunnerStats | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [sort, setSort] = useState<SortState>({ column: null, direction: 'desc' });
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const [theme, toggleTheme] = useTheme();
+  const { isInsider, searchEnabled, keyCreatedAt, rotateKey } = useAuth();
+
+  // Compute key age string
+  const keyAge = keyCreatedAt
+    ? `${Math.floor((Date.now() - new Date(keyCreatedAt).getTime()) / 86_400_000)}d`
+    : null;
+
+  const fetchData = useCallback(async () => {
+    try {
+      const [jobsData, statsData] = await Promise.all([
+        getRunnerJobs(),
+        getRunnerStats(),
+      ]);
+      setJobs(jobsData);
+      setStats(statsData);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch runner data');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void fetchData();
+  }, [fetchData]);
+
+  useEffect(() => {
+    if (autoRefresh) {
+      intervalRef.current = setInterval(() => void fetchData(), REFRESH_INTERVAL);
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [autoRefresh, fetchData]);
+
+  const handleRunNow = useCallback(async (id: string) => {
+    try {
+      await triggerJobRun(id);
+      await fetchData();
+    } catch {
+      await fetchData();
+    }
+  }, [fetchData]);
+
+  const handleSort = useCallback((column: SortColumn) => {
+    setSort((prev) => nextSort(prev, column));
+  }, []);
+
+  const sortedJobs = useMemo(() => sortJobs(jobs, sort), [jobs, sort]);
+
+  const breadcrumbs = [{ label: 'Runner', path: 'runner' }];
+
+  return (
+    <div className={`h-screen overflow-hidden ${theme === 'dark' ? 'dark' : ''}`}>
+      <div className="h-full flex flex-col bg-background text-foreground">
+        {/* Shared header */}
+        <Header
+          breadcrumbs={breadcrumbs}
+          isInsider={isInsider}
+          searchEnabled={searchEnabled}
+          theme={theme}
+          onToggleTheme={toggleTheme}
+          keyAge={keyAge}
+          onRotateKey={rotateKey}
+        />
+
+        {/* Runner controls bar */}
+        <div className="shrink-0 max-w-6xl mx-auto w-full px-4 pt-2 pb-1 flex items-center justify-between">
+          {!loading && <StatsBar stats={stats} />}
+          <div className="flex items-center gap-2 shrink-0">
+            <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
+              <input
+                type="checkbox"
+                checked={autoRefresh}
+                onChange={(e) => setAutoRefresh(e.target.checked)}
+                className="rounded"
+              />
+              Auto-refresh
+            </label>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              title="Refresh now"
+              onClick={() => void fetchData()}
+            >
+              <RefreshCw className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Error banner */}
+        {error && (
+          <div className="shrink-0 max-w-6xl mx-auto w-full px-4 pt-2">
+            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded-lg text-sm">
+              {error}
+            </div>
+          </div>
+        )}
+
+        {loading ? (
+          <div className="flex-1 flex items-center justify-center text-muted-foreground">Loading...</div>
+        ) : (
+          /* Single card: header pinned, body scrolls, scrollbar inside card */
+          <div className="flex-1 min-h-0 max-w-6xl mx-auto w-full px-4 pt-1 flex flex-col">
+            <div className="flex-1 min-h-0 bg-card border border-border rounded-lg flex flex-col">
+              {/* Pinned table header */}
+              <div className="shrink-0">
+                <JobTableHeader sort={sort} onSort={handleSort} />
+              </div>
+              {/* Scrollable table body — padding inside the scroll for mobile bottom space */}
+              <div className="flex-1 overflow-y-auto pb-32">
+                <JobTableBody jobs={sortedJobs} onRunNow={(id) => void handleRunNow(id)} />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/client/src/pages/RunnerJob.tsx

@@ -0,0 +1,170 @@
+/**
+ * Runner job detail view — job info, enable/disable, run history.
+ */
+
+import { ArrowLeft, Play, Power, PowerOff } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+
+import { Header } from '@/components/layout/Header';
+import { RunHistory } from '@/components/runner/RunHistory';
+import { StatusPill } from '@/components/runner/StatusPill';
+import { Button } from '@/components/ui/button';
+import { useAuth } from '@/lib/AuthContext';
+import type { RunEntry, RunnerJob as RunnerJobType } from '@/lib/runner-api';
+import {
+  disableJob,
+  enableJob,
+  getJobRuns,
+  getRunnerJob,
+  triggerJobRun,
+} from '@/lib/runner-api';
+import { useTheme } from '@/lib/theme';
+
+export function RunnerJob() {
+  const { jobId } = useParams<{ jobId: string }>();
+  const [job, setJob] = useState<RunnerJobType | null>(null);
+  const [runs, setRuns] = useState<RunEntry[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [theme, toggleTheme] = useTheme();
+  const { isInsider, searchEnabled, keyCreatedAt, rotateKey } = useAuth();
+
+  const keyAge = keyCreatedAt
+    ? `${Math.floor((Date.now() - new Date(keyCreatedAt).getTime()) / 86_400_000)}d`
+    : null;
+
+  const fetchData = useCallback(async () => {
+    if (!jobId) return;
+    try {
+      const [jobData, runsData] = await Promise.all([
+        getRunnerJob(jobId),
+        getJobRuns(jobId, 50),
+      ]);
+      setJob(jobData);
+      setRuns(runsData);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch job');
+    } finally {
+      setLoading(false);
+    }
+  }, [jobId]);
+
+  useEffect(() => {
+    void fetchData();
+  }, [fetchData]);
+
+  const handleToggleEnabled = useCallback(async () => {
+    if (!job) return;
+    try {
+      if (job.enabled) await disableJob(job.id);
+      else await enableJob(job.id);
+      await fetchData();
+    } catch {
+      await fetchData();
+    }
+  }, [job, fetchData]);
+
+  const handleRunNow = useCallback(async () => {
+    if (!job) return;
+    try {
+      await triggerJobRun(job.id);
+      setTimeout(() => void fetchData(), 500);
+    } catch {
+      await fetchData();
+    }
+  }, [job, fetchData]);
+
+  const breadcrumbs = [
+    { label: 'Runner', path: 'runner' },
+    { label: job?.name ?? jobId ?? '', path: `runner/${jobId}` },
+  ];
+
+  return (
+    <div className={`h-screen overflow-hidden ${theme === 'dark' ? 'dark' : ''}`}>
+      <div className="h-full flex flex-col bg-background text-foreground">
+        {/* Shared header */}
+        <Header
+          breadcrumbs={breadcrumbs}
+          isInsider={isInsider}
+          searchEnabled={searchEnabled}
+          theme={theme}
+          onToggleTheme={toggleTheme}
+          keyAge={keyAge}
+          onRotateKey={rotateKey}
+        />
+
+        <div className="flex-1 overflow-y-auto max-w-4xl mx-auto px-4 py-6 pb-32 space-y-6 w-full">
+          <Link
+            to="/runner"
+            className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to jobs
+          </Link>
+
+          {error && (
+            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded-lg text-sm">
+              {error}
+            </div>
+          )}
+
+          {loading ? (
+            <div className="text-center py-12 text-muted-foreground">Loading...</div>
+          ) : job ? (
+            <>
+              {/* Job Info Card */}
+              <div className="bg-card border border-border rounded-lg p-4 space-y-4">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <h1 className="text-xl font-semibold">{job.name}</h1>
+                    <div className="flex items-center gap-3 mt-2 text-sm text-muted-foreground">
+                      <span>Type: <span className="text-foreground">{job.type}</span></span>
+                      <span>Schedule: <code className="text-xs bg-muted px-1 py-0.5 rounded">{job.schedule}</code></span>
+                      <span>Overlap: <span className="text-foreground">{job.overlapPolicy}</span></span>
+                    </div>
+                  </div>
+                  <StatusPill status={job.enabled ? job.status : 'disabled'} />
+                </div>
+
+                <div className="flex items-center gap-2 pt-2 border-t border-border">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => void handleToggleEnabled()}
+                    className="gap-1.5"
+                  >
+                    {job.enabled
+                      ? <><PowerOff className="h-3.5 w-3.5" /> Disable</>
+                      : <><Power className="h-3.5 w-3.5" /> Enable</>
+                    }
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => void handleRunNow()}
+                    className="gap-1.5"
+                  >
+                    <Play className="h-3.5 w-3.5" />
+                    Run Now
+                  </Button>
+                </div>
+              </div>
+
+              {/* Run History */}
+              <div className="bg-card border border-border rounded-lg overflow-hidden">
+                <div className="px-4 py-3 border-b border-border">
+                  <h2 className="text-sm font-medium text-muted-foreground">Run History</h2>
+                </div>
+                <RunHistory runs={runs} />
+              </div>
+            </>
+          ) : (
+            <div className="text-center py-12 text-muted-foreground">Job not found</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/client/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/client/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}