@karmaniverous/jeeves-server 3.0.0-0

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

@@ -0,0 +1,140 @@
+/**
+ * Run history table with expandable stdout/stderr for job detail view.
+ */
+
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+
+import type { RunEntry } from '@/lib/runner-api';
+
+import { StatusPill } from './StatusPill';
+
+interface RunHistoryProps {
+  runs: RunEntry[];
+}
+
+function formatDuration(ms: number | null): string {
+  if (ms === null) return '—';
+  if (ms < 1000) return `${String(ms)}ms`;
+  const s = ms / 1000;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const m = Math.floor(s / 60);
+  const rem = Math.round(s % 60);
+  return `${String(m)}m ${String(rem)}s`;
+}
+
+function formatTime(iso: string | null): string {
+  if (!iso) return '—';
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+}
+
+export function RunHistory({ runs }: RunHistoryProps) {
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+  const toggle = (id: number) => {
+    const key = String(id);
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  if (runs.length === 0) {
+    return (
+      <div className="text-center py-6 text-muted-foreground text-sm">
+        No runs yet
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-border text-left">
+            <th className="px-3 py-2 w-8" />
+            <th className="px-3 py-2 font-medium text-muted-foreground">Status</th>
+            <th className="px-3 py-2 font-medium text-muted-foreground">Trigger</th>
+            <th className="px-3 py-2 font-medium text-muted-foreground">Started</th>
+            <th className="px-3 py-2 font-medium text-muted-foreground">Duration</th>
+            <th className="px-3 py-2 font-medium text-muted-foreground">Exit</th>
+          </tr>
+        </thead>
+        <tbody>
+          {runs.map((run) => (
+            <RunRow
+              key={run.id}
+              run={run}
+              isExpanded={expanded.has(String(run.id))}
+              onToggle={() => toggle(run.id)}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+interface RunRowProps {
+  run: RunEntry;
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+function RunRow({ run, isExpanded, onToggle }: RunRowProps) {
+  const hasOutput = run.stdoutTail || run.stderrTail;
+
+  return (
+    <>
+      <tr
+        className={`border-b border-border transition-colors ${hasOutput ? 'cursor-pointer hover:bg-muted/50' : ''}`}
+        onClick={hasOutput ? onToggle : undefined}
+      >
+        <td className="px-3 py-2">
+          {hasOutput && (
+            isExpanded
+              ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+          )}
+        </td>
+        <td className="px-3 py-2"><StatusPill status={run.status} /></td>
+        <td className="px-3 py-2 text-muted-foreground">{run.trigger}</td>
+        <td className="px-3 py-2 text-muted-foreground text-xs">
+          {formatTime(run.startedAt)}
+        </td>
+        <td className="px-3 py-2 text-muted-foreground text-xs">
+          {formatDuration(run.durationMs)}
+        </td>
+        <td className="px-3 py-2 font-mono text-xs">
+          {run.exitCode !== null ? String(run.exitCode) : '—'}
+        </td>
+      </tr>
+      {isExpanded && hasOutput && (
+        <tr>
+          <td colSpan={6} className="px-3 py-2 bg-muted/30">
+            <OutputBlock label="stdout" content={run.stdoutTail} />
+            <OutputBlock label="stderr" content={run.stderrTail} />
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+function OutputBlock({ label, content }: { label: string; content: string }) {
+  if (!content) return null;
+  return (
+    <div className="mb-2 last:mb-0">
+      <div className="text-xs font-medium text-muted-foreground mb-1">{label}</div>
+      <pre className="text-xs bg-zinc-900 text-zinc-200 p-2 rounded overflow-x-auto max-h-48 whitespace-pre-wrap">
+        {content}
+      </pre>
+    </div>
+  );
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Stats summary bar for runner dashboard.
+ */
+
+import type { RunnerStats } from '@/lib/runner-api';
+
+interface StatsBarProps {
+  stats: RunnerStats | null;
+}
+
+interface StatCardProps {
+  label: string;
+  value: number;
+  color: string;
+}
+
+function StatCard({ label, value, color }: StatCardProps) {
+  return (
+    <div className="flex flex-col items-center px-3 py-1">
+      <span className={`text-lg font-bold leading-tight ${color}`}>{value}</span>
+      <span className="text-xs text-muted-foreground">{label}</span>
+    </div>
+  );
+}
+
+export function StatsBar({ stats }: StatsBarProps) {
+  if (!stats) {
+    return (
+      <div className="flex items-center gap-4 p-4 bg-muted/50 rounded-lg">
+        <span className="text-sm text-muted-foreground">Loading stats...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-1 px-2 py-1 bg-muted/50 rounded-lg">
+      <StatCard label="Total" value={stats.totalJobs} color="text-foreground" />
+      <StatCard label="Running" value={stats.running} color="text-yellow-600 dark:text-yellow-400" />
+      <StatCard label="OK (1h)" value={stats.okLastHour} color="text-green-600 dark:text-green-400" />
+      <StatCard label="Errors (1h)" value={stats.errorsLastHour} color="text-red-600 dark:text-red-400" />
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+/**
+ * Colored status pill for runner job status display.
+ */
+
+const statusStyles: Record<string, string> = {
+  ok: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
+  error: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
+  running: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
+  disabled: 'bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400',
+  pending: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+};
+
+const fallbackStyle = 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300';
+
+interface StatusPillProps {
+  status: string | null;
+}
+
+export function StatusPill({ status }: StatusPillProps) {
+  const display = status ?? 'pending';
+  const style = statusStyles[display] ?? fallbackStyle;
+  return (
+    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${style}`}>
+      {display}
+    </span>
+  );
+}

package/client/src/components/runner/jobTableUtils.ts

@@ -0,0 +1,65 @@
+/**
+ * Sorting utilities for the runner job table.
+ */
+import type { RunnerJob } from '@/lib/runner-api';
+
+import type { SortColumn, SortState } from './JobTable';
+
+/**
+ * Sort jobs by chosen column, then by lastRun desc, then by name asc.
+ * Null lastRun values sort to the end.
+ */
+export function sortJobs(jobs: RunnerJob[], sort: SortState): RunnerJob[] {
+  return [...jobs].sort((a, b) => {
+    // Primary: chosen sort column
+    if (sort.column) {
+      const cmp = compareByColumn(a, b, sort.column);
+      if (cmp !== 0) return sort.direction === 'asc' ? cmp : -cmp;
+    }
+
+    // Secondary: lastRun desc (nulls last)
+    const lastRunCmp = compareNullableDate(a.lastRun, b.lastRun);
+    if (lastRunCmp !== 0) return -lastRunCmp; // negative for desc
+
+    // Tertiary: name asc
+    return a.name.localeCompare(b.name);
+  });
+}
+
+function compareByColumn(a: RunnerJob, b: RunnerJob, col: SortColumn): number {
+  switch (col) {
+    case 'name':
+      return a.name.localeCompare(b.name);
+    case 'type':
+      return a.type.localeCompare(b.type);
+    case 'schedule':
+      return a.schedule.localeCompare(b.schedule);
+    case 'status': {
+      const sa = a.enabled ? (a.status ?? '') : 'disabled';
+      const sb = b.enabled ? (b.status ?? '') : 'disabled';
+      return sa.localeCompare(sb);
+    }
+    case 'lastRun':
+      return compareNullableDate(a.lastRun, b.lastRun);
+    default:
+      return 0;
+  }
+}
+
+function compareNullableDate(a: string | null, b: string | null): number {
+  if (!a && !b) return 0;
+  if (!a) return -1; // nulls last
+  if (!b) return 1;
+  return a < b ? -1 : a > b ? 1 : 0;
+}
+
+/** Cycle sort: click same column toggles asc↔desc; click different column starts desc. */
+export function nextSort(current: SortState, column: SortColumn): SortState {
+  if (current.column === column) {
+    // Same column: asc → desc → clear
+    if (current.direction === 'desc') return { column, direction: 'asc' };
+    return { column: null, direction: 'desc' }; // clear
+  }
+  // New column: start desc
+  return { column, direction: 'desc' };
+}

package/client/src/components/scrollUtils.ts

@@ -0,0 +1,39 @@
+/**
+ * Smooth scroll utilities for in-page navigation.
+ */
+const SCROLL_DURATION = 600;
+
+function smoothScrollTo(container: HTMLElement | Window, targetY: number) {
+  const isWindow = container === window;
+  const startY = isWindow ? window.scrollY : (container as HTMLElement).scrollTop;
+  const diff = targetY - startY;
+  if (Math.abs(diff) < 2) return;
+  const startTime = performance.now();
+
+  function step(currentTime: number) {
+    const elapsed = currentTime - startTime;
+    const progress = Math.min(elapsed / SCROLL_DURATION, 1);
+    const ease = progress < 0.5
+      ? 4 * progress * progress * progress
+      : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+    if (isWindow) {
+      window.scrollTo(0, startY + diff * ease);
+    } else {
+      (container as HTMLElement).scrollTop = startY + diff * ease;
+    }
+    if (progress < 1) requestAnimationFrame(step);
+  }
+
+  requestAnimationFrame(step);
+}
+
+export function scrollToIdInContainer(container: HTMLElement | null, id: string) {
+  const el = document.getElementById(id);
+  if (el && container) {
+    const elRect = el.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const top = container.scrollTop + (elRect.top - containerRect.top) - 16;
+    smoothScrollTo(container, top);
+    window.history.replaceState(null, '', `#${id}`);
+  }
+}

package/client/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/lib/utils';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogTitle = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-destructive px-4 py-2 text-sm font-semibold text-white ring-offset-background transition-colors hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-md border border-border bg-background px-4 py-2 text-sm font-semibold ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/client/src/components/ui/button.tsx

@@ -0,0 +1,40 @@
+import { type ButtonHTMLAttributes, forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'outline' | 'ghost' | 'link';
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'default', ...props }, ref) => {
+    return (
+      <button
+        className={cn(
+          'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:pointer-events-none disabled:opacity-50',
+          {
+            'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'default',
+            'border border-border bg-background hover:bg-accent hover:text-accent-foreground': variant === 'outline',
+            'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
+            'text-primary underline-offset-4 hover:underline': variant === 'link',
+          },
+          {
+            'h-10 px-4 py-2': size === 'default',
+            'h-9 rounded-md px-3': size === 'sm',
+            'h-11 rounded-md px-8': size === 'lg',
+            'h-10 w-10': size === 'icon',
+          },
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button };

package/client/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '@/lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+};

package/client/src/components/ui/input.tsx

@@ -0,0 +1,26 @@
+import { type InputHTMLAttributes, forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm',
+          'file:border-0 file:bg-transparent file:text-sm file:font-medium',
+          'placeholder:text-muted-foreground',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };

package/client/src/components/useActionState.ts

@@ -0,0 +1,43 @@
+/**
+ * Hook for managing action dropdown state machine.
+ */
+import { useState } from 'react';
+
+import type { ActionState } from './ActionDropdown';
+
+export function useActionState(
+  onError?: (error: string) => void,
+  onStateChange?: (state: ActionState) => void,
+) {
+  const [state, setStateInternal] = useState<ActionState>('idle');
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  const setState = (s: ActionState) => {
+    setStateInternal(s);
+    onStateChange?.(s);
+  };
+
+  const handleAction = async (action: () => Promise<void>) => {
+    setState('loading');
+    setErrorMsg(null);
+    try {
+      await action();
+      setState('done');
+      setTimeout(() => setState('idle'), 1500);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Action failed';
+      setErrorMsg(msg);
+      setState('error');
+      onError?.(msg);
+    }
+  };
+
+  const resetOnClose = (open: boolean) => {
+    if (!open && state === 'error') {
+      setState('idle');
+      setErrorMsg(null);
+    }
+  };
+
+  return { state, errorMsg, handleAction, resetOnClose };
+}