@karmaniverous/jeeves-server 3.0.0-0

package/client/src/components/layout/Header.tsx

@@ -0,0 +1,270 @@
+import { Moon, Sun, BookOpen, KeyRound, Github, Search, Activity } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { AccountMenu, type CollapsedItem } from '@/components/AccountMenu';
+import { SearchModal } from '@/components/SearchModal';
+import { Button } from '@/components/ui/button';
+import type { BreadcrumbItem } from '@/lib/api';
+
+const GITHUB_URL = 'https://github.com/karmaniverous/jeeves-server';
+
+interface HeaderProps {
+  breadcrumbs?: BreadcrumbItem[];
+  isInsider: boolean;
+  searchEnabled?: boolean;
+  theme: 'light' | 'dark';
+  onToggleTheme: () => void;
+  keyAge?: string | null;
+  onRotateKey?: () => void;
+  /** Download dropdown for header bar (icon button variant) */
+  downloadDropdown?: React.ReactNode;
+  /** Link dropdown for header bar (icon button variant) */
+  linkControls?: React.ReactNode;
+  /** Download dropdown factory for account menu (receives dismiss callback) */
+  downloadMenuItem?: (onDismiss: () => void) => React.ReactNode;
+  /** Link dropdown factory for account menu (receives dismiss callback) */
+  linkMenuItem?: (onDismiss: () => void) => React.ReactNode;
+}
+
+export function Header({
+  breadcrumbs = [],
+  isInsider,
+  searchEnabled,
+  theme,
+  onToggleTheme,
+  keyAge,
+  onRotateKey,
+  downloadDropdown,
+  linkControls,
+  downloadMenuItem,
+  linkMenuItem,
+}: HeaderProps) {
+  const hasKeyMgmt = isInsider && onRotateKey;
+  const [readmeUrl, setReadmeUrl] = useState<string | null>(null);
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  // Ctrl/Cmd+K keyboard shortcut
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      setSearchOpen(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (searchEnabled && isInsider) {
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [searchEnabled, isInsider, handleKeyDown]);
+
+  useEffect(() => {
+    fetch('/api/readme-link')
+      .then(r => r.ok ? r.json() as Promise<{ url: string }> : null)
+      .then(data => { if (data?.url) setReadmeUrl(data.url); })
+      .catch(() => {});
+  }, []);
+
+  // Build account menu collapsed items in left-to-right header order
+  const collapsedItems: CollapsedItem[] = [];
+
+  const menuItemClass = 'flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-accent transition-colors w-full text-left cursor-pointer';
+
+  // Link controls — hidden below 400px
+  if (linkMenuItem) {
+    collapsedItems.push({
+      breakpoint: 'bp-400',
+      node: linkMenuItem,
+      hasNestedDropdown: true,
+    });
+  }
+
+  // Download dropdown — hidden below 480px
+  if (downloadMenuItem) {
+    collapsedItems.push({
+      breakpoint: 'bp-480',
+      node: downloadMenuItem,
+      hasNestedDropdown: true,
+    });
+  }
+
+  // Key management — hidden below sm (640px)
+  if (hasKeyMgmt) {
+    collapsedItems.push({
+      breakpoint: 'sm',
+      node: (
+        <button onClick={onRotateKey} className={menuItemClass}>
+          <KeyRound className="h-4 w-4 shrink-0" />
+          Rotate key{keyAge ? ` (${keyAge})` : ''}
+        </button>
+      ),
+    });
+  }
+
+  // Runner — hidden below md (768px)
+  if (isInsider) {
+    collapsedItems.push({
+      breakpoint: 'md',
+      node: (
+        <Link to="/runner" className={menuItemClass}>
+          <Activity className="h-4 w-4 shrink-0" />
+          Runner
+        </Link>
+      ),
+    });
+  }
+
+  // README — hidden below md (768px)
+  if (readmeUrl) {
+    collapsedItems.push({
+      breakpoint: 'md',
+      node: (
+        <a href={readmeUrl} className={menuItemClass}>
+          <BookOpen className="h-4 w-4 shrink-0" />
+          README
+        </a>
+      ),
+    });
+  }
+
+  // GitHub — hidden below md (768px)
+  collapsedItems.push({
+    breakpoint: 'md',
+    node: (
+      <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" className={menuItemClass}>
+        <Github className="h-4 w-4 shrink-0" />
+        GitHub
+      </a>
+    ),
+  });
+
+  // Theme — hidden below md (768px)
+  collapsedItems.push({
+    breakpoint: 'md',
+    node: (
+      <button onClick={onToggleTheme} className={menuItemClass}>
+        {theme === 'dark' ? <Sun className="h-4 w-4 shrink-0" /> : <Moon className="h-4 w-4 shrink-0" />}
+        {theme === 'dark' ? 'Light mode' : 'Dark mode'}
+      </button>
+    ),
+  });
+
+  return (
+    <header className="bg-zinc-800 text-white px-4 py-2">
+      <div className="flex items-center gap-1">
+        {/* Breadcrumbs — takes remaining space, truncates */}
+        <div className="flex items-center min-w-0 flex-1">
+          <Link to="/browse" className="text-3xl no-underline shrink-0 mr-1" title="Jeeves Server">
+            🎩
+          </Link>
+          <nav className="flex items-center gap-1 min-w-0 overflow-x-auto overflow-y-hidden scrollbar-thin">
+            {breadcrumbs.map((crumb, i) => (
+              <span key={crumb.path} className="flex items-center gap-1 shrink-0">
+                <span className="text-zinc-500 mx-0.5">/</span>
+                {i === breadcrumbs.length - 1 ? (
+                  <span className="text-zinc-300 truncate max-w-48">{crumb.label}</span>
+                ) : (
+                  <Link
+                    to={`/browse/${crumb.path}`}
+                    className="text-blue-400 hover:underline truncate max-w-48"
+                  >
+                    {crumb.label}
+                  </Link>
+                )}
+              </span>
+            ))}
+          </nav>
+        </div>
+
+        {/* Controls — progressively hidden via responsive classes */}
+        <div className="flex items-center gap-1 shrink-0">
+          {/* Search: visible when configured, always shown */}
+          {searchEnabled && isInsider && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-zinc-300 hover:text-white hover:bg-white/10 h-8 w-8"
+              title="Search (Ctrl+K)"
+              onClick={() => setSearchOpen(true)}
+            >
+              <Search className="h-4 w-4" />
+            </Button>
+          )}
+
+          {/* Link controls: visible 400px+ */}
+          {linkControls && (
+            <div className="hidden min-[400px]:flex items-center">{linkControls}</div>
+          )}
+
+          {/* Download: visible 480px+ */}
+          {downloadDropdown && (
+            <div className="hidden min-[480px]:flex items-center">{downloadDropdown}</div>
+          )}
+
+          {/* Key management: visible sm+ (640px) */}
+          {hasKeyMgmt && (
+            <div className="hidden sm:flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-zinc-300 hover:text-white hover:bg-white/10 h-8 w-8"
+                title="Rotate key (invalidates all your shares)"
+                onClick={onRotateKey}
+              >
+                <KeyRound className="h-4 w-4" />
+              </Button>
+              {keyAge && <span className="text-xs text-zinc-500">{keyAge}</span>}
+            </div>
+          )}
+
+          {/* Runner: visible md+ (768px) */}
+          {isInsider && (
+            <Link to="/runner" title="Runner Dashboard" className="hidden md:inline-flex">
+              <Button variant="ghost" size="icon" className="text-zinc-300 hover:text-white hover:bg-white/10 h-8 w-8">
+                <Activity className="h-4 w-4" />
+              </Button>
+            </Link>
+          )}
+
+          {/* README: visible md+ (768px) */}
+          {readmeUrl && (
+            <a href={readmeUrl} title="README" className="hidden md:inline-flex">
+              <Button variant="ghost" size="icon" className="text-zinc-300 hover:text-white hover:bg-white/10 h-8 w-8">
+                <BookOpen className="h-4 w-4" />
+              </Button>
+            </a>
+          )}
+
+          {/* GitHub: visible md+ (768px) */}
+          <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" title="GitHub" className="hidden md:inline-flex">
+            <Button variant="ghost" size="icon" className="text-zinc-300 hover:text-white hover:bg-white/10 h-8 w-8">
+              <Github className="h-4 w-4" />
+            </Button>
+          </a>
+
+          {/* Theme: visible lg+ (1024px) */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-zinc-300 hover:text-white hover:bg-white/10 h-8 w-8 hidden md:inline-flex"
+            title="Toggle theme"
+            onClick={onToggleTheme}
+          >
+            {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+          </Button>
+
+          {/* Account menu — always visible */}
+          <AccountMenu
+            theme={theme}
+            onToggleTheme={onToggleTheme}
+            collapsedItems={collapsedItems}
+          />
+        </div>
+      </div>
+      {searchEnabled && isInsider && (
+        <SearchModal open={searchOpen} onClose={() => setSearchOpen(false)} />
+      )}
+    </header>
+  );
+}

package/client/src/components/panzoom.ts

@@ -0,0 +1,203 @@
+/**
+ * Shared Panzoom wrapper for SVG diagrams.
+ *
+ * Provides fullscreen toggle, zoom-to-fit, and drag/pan for any SVG element.
+ */
+import Panzoom from '@panzoom/panzoom';
+import { createElement, Maximize, Minimize } from 'lucide';
+
+// ── CSS class constants ──────────────────────────────────────────────
+
+const WRAPPER_CLASS = 'relative bg-white rounded-lg border border-border overflow-hidden my-4';
+const WRAPPER_FULLSCREEN_CLASS = 'fixed inset-0 z-[100] bg-white flex flex-col';
+const VIEWPORT_CLASS = 'overflow-hidden w-full';
+const VIEWPORT_FULLSCREEN_CLASS = 'overflow-hidden w-full h-full flex-1';
+const INNER_CLASS = 'flex items-center justify-center p-4 [&>svg]:max-w-full [&>svg]:h-auto';
+const INNER_FULLSCREEN_CLASS = 'p-4';
+const FS_BTN_CLASS = 'absolute top-2 right-2 z-10 p-1.5 bg-zinc-800/70 hover:bg-zinc-700 text-white rounded transition-colors';
+const HINT_CLASS = 'text-xs text-muted-foreground text-center py-1 opacity-60';
+const HINT_FULLSCREEN_CLASS = 'text-muted-foreground text-xs text-center py-2 pointer-events-none';
+
+const HINT_TEXT = 'Scroll to zoom · Drag to pan';
+const HINT_FULLSCREEN_TEXT = 'Scroll to zoom · Drag to pan · Esc to close';
+
+// ── Icon helpers ─────────────────────────────────────────────────────
+
+function createIcon(iconData: typeof Maximize): SVGSVGElement {
+  return createElement(iconData, { size: 16 }) as unknown as SVGSVGElement;
+}
+
+function setButtonIcon(btn: HTMLButtonElement, iconData: typeof Maximize): void {
+  btn.innerHTML = '';
+  btn.appendChild(createIcon(iconData));
+}
+
+// ── Zoom-to-fit helpers ──────────────────────────────────────────────
+
+function parseSvgDimensions(svg: SVGElement): { w: number; h: number } {
+  const vb = svg.getAttribute('viewBox');
+  if (vb) {
+    const parts = vb.split(/[\s,]+/).map(Number);
+    if (parts[2] && parts[3]) return { w: parts[2], h: parts[3] };
+  }
+  return { w: (svg as SVGSVGElement).clientWidth || 1000, h: (svg as SVGSVGElement).clientHeight || 800 };
+}
+
+function computeZoomToFit(
+  svgW: number, svgH: number, viewportW: number, viewportH: number,
+): { fitScale: number; fittedW: number; fittedH: number; startX: number; startY: number } {
+  const fitScale = Math.min(viewportW / svgW, viewportH / svgH, 1);
+  const fittedW = svgW * fitScale;
+  const fittedH = svgH * fitScale;
+  return { fitScale, fittedW, fittedH, startX: (viewportW - fittedW) / 2, startY: (viewportH - fittedH) / 2 };
+}
+
+// ── Core factory ─────────────────────────────────────────────────────
+
+export interface PanzoomWrapperOptions {
+  /** Extra CSS class for the wrapper (e.g., 'inline-svg-panzoom') */
+  wrapperExtraClass?: string;
+  /** Minimum height for the viewport (e.g., '200px') */
+  viewportMinHeight?: string;
+}
+
+export interface PanzoomWrapperResult {
+  wrapper: HTMLDivElement;
+  /** Call after attaching wrapper to the DOM to initialize Panzoom. */
+  initPanzoom: () => void;
+  enterFullscreen: () => void;
+  exitFullscreen: () => void;
+  cleanup: () => void;
+}
+
+/**
+ * Create a panzoom wrapper around an SVG element.
+ *
+ * The SVG is moved into the wrapper. Returns the wrapper element plus
+ * fullscreen controls and a cleanup function.
+ */
+export function createPanzoomWrapper(
+  svg: SVGElement,
+  _viewport: HTMLElement,
+  options?: PanzoomWrapperOptions,
+): PanzoomWrapperResult {
+  const wrapperClass = options?.wrapperExtraClass
+    ? `${options.wrapperExtraClass} ${WRAPPER_CLASS}`
+    : WRAPPER_CLASS;
+
+  const wrapper = document.createElement('div');
+  wrapper.className = wrapperClass;
+  wrapper.style.cursor = 'grab';
+
+  const viewport = document.createElement('div');
+  viewport.className = VIEWPORT_CLASS;
+  if (options?.viewportMinHeight) viewport.style.minHeight = options.viewportMinHeight;
+
+  const inner = document.createElement('div');
+  inner.className = INNER_CLASS;
+
+  inner.appendChild(svg);
+  viewport.appendChild(inner);
+
+  // Fullscreen button
+  const fsBtn = document.createElement('button');
+  fsBtn.className = FS_BTN_CLASS;
+  fsBtn.title = 'Fullscreen';
+  setButtonIcon(fsBtn, Maximize);
+
+  // Hint
+  const hint = document.createElement('div');
+  hint.className = HINT_CLASS;
+  hint.textContent = HINT_TEXT;
+
+  wrapper.appendChild(viewport);
+  wrapper.appendChild(fsBtn);
+  wrapper.appendChild(hint);
+
+  // Panzoom init is deferred until the wrapper is in the DOM.
+  // Callers must invoke initPanzoom() after attaching the wrapper.
+  let pz: ReturnType<typeof Panzoom> | null = null;
+
+  const wheelHandler = (e: WheelEvent) => { pz?.zoomWithWheel(e); };
+  viewport.addEventListener('wheel', wheelHandler, { passive: false });
+
+  const initPanzoom = () => {
+    if (pz) return; // already initialized
+    pz = Panzoom(inner, { maxScale: 20, contain: 'outside' });
+  };
+
+  let isFullscreen = false;
+
+  const enterFullscreen = () => {
+    isFullscreen = true;
+    wrapper.dataset.origClass = wrapper.className;
+    wrapper.className = WRAPPER_FULLSCREEN_CLASS;
+    wrapper.style.cursor = 'grab';
+    viewport.className = VIEWPORT_FULLSCREEN_CLASS;
+    if (options?.viewportMinHeight) viewport.style.minHeight = '';
+    inner.className = INNER_FULLSCREEN_CLASS;
+    hint.textContent = HINT_FULLSCREEN_TEXT;
+    hint.className = HINT_FULLSCREEN_CLASS;
+    fsBtn.title = 'Exit fullscreen';
+    setButtonIcon(fsBtn, Minimize);
+    pz?.destroy();
+    pz = null;
+
+    requestAnimationFrame(() => { requestAnimationFrame(() => { setTimeout(() => {
+      const s = inner.querySelector('svg');
+      if (s && viewport.clientWidth && viewport.clientHeight) {
+        const { w: svgW, h: svgH } = parseSvgDimensions(s);
+        const { fitScale, fittedW, fittedH, startX, startY } =
+          computeZoomToFit(svgW, svgH, viewport.clientWidth, viewport.clientHeight);
+
+        s.setAttribute('width', String(Math.round(fittedW)));
+        s.setAttribute('height', String(Math.round(fittedH)));
+        s.style.width = `${String(Math.round(fittedW))}px`;
+        s.style.height = `${String(Math.round(fittedH))}px`;
+
+        pz = Panzoom(inner, { maxScale: 20 / fitScale, minScale: 0.5, startScale: 1, startX, startY });
+      } else {
+        pz = Panzoom(inner, { maxScale: 20, minScale: 0.1 });
+      }
+    }, 50); }); });
+  };
+
+  const exitFullscreen = () => {
+    isFullscreen = false;
+    const s = inner.querySelector('svg');
+    if (s) {
+      s.setAttribute('width', '100%');
+      s.removeAttribute('height');
+      s.style.width = '';
+      s.style.height = '';
+    }
+    wrapper.className = wrapper.dataset.origClass ?? wrapperClass;
+    wrapper.style.cursor = 'grab';
+    viewport.className = VIEWPORT_CLASS;
+    if (options?.viewportMinHeight) viewport.style.minHeight = options.viewportMinHeight;
+    inner.className = INNER_CLASS;
+    hint.textContent = HINT_TEXT;
+    hint.className = HINT_CLASS;
+    fsBtn.title = 'Fullscreen';
+    setButtonIcon(fsBtn, Maximize);
+    pz?.destroy();
+    pz = Panzoom(inner, { maxScale: 20, contain: 'outside', startScale: 1 });
+  };
+
+  fsBtn.addEventListener('click', () => {
+    if (isFullscreen) exitFullscreen(); else enterFullscreen();
+  });
+
+  const escHandler = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && isFullscreen) exitFullscreen();
+  };
+  document.addEventListener('keydown', escHandler);
+
+  const cleanup = () => {
+    viewport.removeEventListener('wheel', wheelHandler);
+    document.removeEventListener('keydown', escHandler);
+    pz?.destroy();
+  };
+
+  return { wrapper, initPanzoom, enterFullscreen, exitFullscreen, cleanup };
+}

package/client/src/components/renderableUtils.ts

@@ -0,0 +1,15 @@
+/**
+ * Utility functions for determining if a file is renderable.
+ */
+import type { FileContent } from '@/lib/api';
+
+const RENDERABLE_EXTENSIONS = new Set(['.md', '.svg', '.mmd', '.puml', '.plantuml', '.pu']);
+
+export function isRenderable(file: FileContent): boolean {
+  return file.type === 'markdown' || file.type === 'svg' || file.type === 'mermaid' || file.type === 'plantuml' || !!file.html;
+}
+
+export function isRenderableExt(reqPath: string): boolean {
+  const ext = reqPath ? `.${reqPath.split('.').pop()?.toLowerCase()}` : '';
+  return RENDERABLE_EXTENSIONS.has(ext);
+}

package/client/src/components/runner/JobTable.tsx

@@ -0,0 +1,153 @@
+/**
+ * Job list table for runner dashboard.
+ * Split into header and body so the header can be pinned outside the scroll area.
+ * Supports column sorting with tri-state cycle: asc → desc → clear.
+ */
+
+import { ArrowDown, ArrowUp, ArrowUpDown, Play } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+import { Button } from '@/components/ui/button';
+import type { RunnerJob } from '@/lib/runner-api';
+
+import { StatusPill } from './StatusPill';
+
+/** Sortable column keys. */
+export type SortColumn = 'name' | 'type' | 'schedule' | 'status' | 'lastRun';
+export type SortDirection = 'asc' | 'desc';
+export interface SortState {
+  column: SortColumn | null;
+  direction: SortDirection;
+}
+
+interface JobTableHeaderProps {
+  sort: SortState;
+  onSort: (column: SortColumn) => void;
+}
+
+interface JobTableBodyProps {
+  jobs: RunnerJob[];
+  onRunNow: (id: string) => void;
+}
+
+/** Shared column widths so header and body stay aligned. */
+const colClass = {
+  name: 'w-[30%] px-3 py-2',
+  type: 'w-[10%] px-3 py-2',
+  schedule: 'w-[15%] px-3 py-2',
+  status: 'w-[12%] px-3 py-2',
+  lastRun: 'w-[25%] px-3 py-2',
+  action: 'w-[8%] px-3 py-2',
+};
+
+function formatTime(iso: string | null): string {
+  if (!iso) return '—';
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+}
+
+function SortIcon({ column, sort }: { column: SortColumn; sort: SortState }) {
+  if (sort.column !== column) {
+    return <ArrowUpDown className="h-3 w-3 opacity-40" />;
+  }
+  return sort.direction === 'asc'
+    ? <ArrowUp className="h-3 w-3" />
+    : <ArrowDown className="h-3 w-3" />;
+}
+
+interface ColumnDef {
+  key: SortColumn;
+  label: string;
+}
+
+const columns: ColumnDef[] = [
+  { key: 'name', label: 'Name' },
+  { key: 'type', label: 'Type' },
+  { key: 'schedule', label: 'Schedule' },
+  { key: 'status', label: 'Status' },
+  { key: 'lastRun', label: 'Last Run' },
+];
+
+export function JobTableHeader({ sort, onSort }: JobTableHeaderProps) {
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-border text-left">
+            {columns.map((col) => (
+              <th
+                key={col.key}
+                className={`${colClass[col.key]} font-medium text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors`}
+                onClick={() => onSort(col.key)}
+              >
+                <span className="inline-flex items-center gap-1">
+                  {col.label}
+                  <SortIcon column={col.key} sort={sort} />
+                </span>
+              </th>
+            ))}
+            <th className={`${colClass.action} font-medium text-muted-foreground`} />
+          </tr>
+        </thead>
+      </table>
+    </div>
+  );
+}
+
+export function JobTableBody({ jobs, onRunNow }: JobTableBodyProps) {
+  const navigate = useNavigate();
+
+  if (jobs.length === 0) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        No jobs found
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <tbody>
+          {jobs.map((job) => (
+            <tr
+              key={job.id}
+              className="border-b border-border hover:bg-muted/50 cursor-pointer transition-colors"
+              onClick={() => navigate(`/runner/${job.id}`)}
+            >
+              <td className={`${colClass.name} font-medium`}>{job.name}</td>
+              <td className={`${colClass.type} text-muted-foreground`}>{job.type}</td>
+              <td className={`${colClass.schedule} font-mono text-xs text-muted-foreground`}>
+                {job.schedule}
+              </td>
+              <td className={colClass.status}>
+                <StatusPill status={job.enabled ? job.status : 'disabled'} />
+              </td>
+              <td className={`${colClass.lastRun} text-muted-foreground text-xs`}>
+                {formatTime(job.lastRun)}
+              </td>
+              <td className={colClass.action}>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  title="Run Now"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onRunNow(job.id);
+                  }}
+                >
+                  <Play className="h-3.5 w-3.5" />
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+