@karmaniverous/jeeves-server 3.0.0-0

package/client/src/hooks/useFileBrowser.ts

@@ -0,0 +1,102 @@
+/**
+ * Composition root for the file browser — combines focused hooks.
+ */
+import { useEffect, useState } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+
+import type { BreadcrumbItem } from '@/lib/api';
+import { useAuth } from '@/lib/AuthContext';
+import { useTheme } from '@/lib/theme';
+import { useFileData } from './useFileData';
+import { useShareSettings } from './useShareSettings';
+import { useTopBar } from './useTopBar';
+
+function formatRelativeTime(isoDate: string): string {
+  const ms = Date.now() - new Date(isoDate).getTime();
+  const mins = Math.floor(ms / 60_000);
+  if (mins < 60) return `${String(mins)}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${String(hours)}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${String(days)}d ago`;
+}
+
+export function useFileBrowser() {
+  const params = useParams<{ '*': string }>();
+  const reqPath = params['*'] ?? '';
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [theme, toggleTheme] = useTheme();
+
+  // Browser tab title
+  useEffect(() => {
+    const siteTitle = 'Jeeves Server';
+    const segments = reqPath.split('/').filter(Boolean);
+    const last = segments.length ? segments[segments.length - 1] : '';
+    const decoded = last ? decodeURIComponent(last) : '';
+    document.title = decoded ? `${decoded} - ${siteTitle}` : siteTitle;
+  }, [reqPath]);
+
+  // Data
+  const {
+    drives, directory, fileRaw, fileRendered, file,
+    loading, error, editing, setEditing,
+    viewTab, setViewTab: setViewTabInternal,
+    handleSave,
+  } = useFileData(reqPath, searchParams);
+
+  // Sync tab to URL
+  const setViewTab = (tab: 'rendered' | 'raw') => {
+    setViewTabInternal(tab);
+    setSearchParams((prev) => {
+      const next = new URLSearchParams(prev);
+      if (tab === 'rendered') next.delete('tab');
+      else next.set('tab', tab);
+      return next;
+    }, { replace: true });
+  };
+
+  // Sharing
+  const { shareSettings, setShareSettings } = useShareSettings();
+
+  // UI state
+  const [mobileTocOpen, setMobileTocOpen] = useState(false);
+  const [proseWidth, setProseWidth] = useState<'narrow' | 'medium' | 'wide'>(
+    () => (localStorage.getItem('jeeves-prose-width') as 'narrow' | 'medium' | 'wide') ?? 'medium',
+  );
+  const toggleProseWidth = (w: 'narrow' | 'medium' | 'wide') => {
+    setProseWidth(w);
+    localStorage.setItem('jeeves-prose-width', w);
+  };
+
+  // Auth
+  const { isInsider: authInsider, searchEnabled, keyCreatedAt, rotateKey } = useAuth();
+  const breadcrumbs: BreadcrumbItem[] = directory?.breadcrumbs ?? file?.breadcrumbs ?? [];
+  const isInsider = directory?.isInsider ?? file?.isInsider ?? authInsider;
+  const keyAge = keyCreatedAt ? formatRelativeTime(keyCreatedAt) : null;
+
+  // Key rotation dialog
+  const [rotateKeyDialogOpen, setRotateKeyDialogOpen] = useState(false);
+  const handleRotateKey = () => setRotateKeyDialogOpen(true);
+  const confirmRotateKey = async () => {
+    setRotateKeyDialogOpen(false);
+    await rotateKey();
+  };
+
+  // Layout
+  const { topBarRef, mainRef, topBarHeight } = useTopBar(JSON.stringify([file, directory, drives]));
+
+  return {
+    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,
+  };
+}

package/client/src/hooks/useFileData.ts

@@ -0,0 +1,78 @@
+/**
+ * Data fetching for file browser — drives, directories, and file content.
+ */
+import { useCallback, useEffect, useState } from 'react';
+
+import type { DirectoryListing, DriveEntry, FileContent } from '@/lib/api';
+import { getDrives, getDirectory, getFile, getFileRaw, saveFile } from '@/lib/api';
+
+export function useFileData(reqPath: string, searchParams: URLSearchParams) {
+  const [drives, setDrives] = useState<DriveEntry[] | null>(null);
+  const [directory, setDirectory] = useState<DirectoryListing | null>(null);
+  const [fileRaw, setFileRaw] = useState<FileContent | null>(null);
+  const [fileRendered, setFileRendered] = useState<FileContent | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [editing, setEditing] = useState(false);
+
+  const initialTab = searchParams.get('tab') === 'raw' ? 'raw' : 'rendered';
+  const [viewTab, setViewTabInternal] = useState<'rendered' | 'raw'>(initialTab);
+
+  const file = fileRendered ?? fileRaw;
+
+  const loadData = useCallback(async (path: string, params: URLSearchParams) => {
+    setLoading(true);
+    setError(null);
+    setDrives(null);
+    setDirectory(null);
+    setFileRaw(null);
+    setFileRendered(null);
+    setEditing(false);
+    setViewTabInternal(params.get('tab') === 'raw' ? 'raw' : 'rendered');
+
+    if (!path) {
+      try {
+        const data = await getDrives();
+        setDrives(data);
+      } catch (e: unknown) {
+        setError((e as Error).message);
+      } finally {
+        setLoading(false);
+      }
+    } else {
+      try {
+        const data = await getDirectory(path);
+        if ('entries' in data) {
+          setDirectory(data);
+          setLoading(false);
+        } else {
+          getFileRaw(path).then((raw) => { setFileRaw(raw); setLoading(false); }).catch(() => {});
+          getFile(path).then(setFileRendered).catch(() => {});
+        }
+      } catch {
+        getFileRaw(path).then((raw) => { setFileRaw(raw); setLoading(false); }).catch((e: Error) => { setError(e.message); setLoading(false); });
+        getFile(path).then(setFileRendered).catch(() => {});
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadData(reqPath, searchParams);
+  }, [loadData, reqPath, searchParams]);
+
+  const handleSave = async (content: string) => {
+    await saveFile(reqPath, content);
+    const refreshed = await getFileRaw(reqPath);
+    setFileRaw(refreshed);
+    try { const r = await getFile(reqPath); setFileRendered(r); } catch { /* ignore */ }
+    setEditing(false);
+  };
+
+  return {
+    drives, directory, fileRaw, fileRendered, file,
+    loading, error,
+    editing, setEditing,
+    viewTab, setViewTab: setViewTabInternal,
+    handleSave,
+  };
+}

package/client/src/hooks/useScrollAnchor.ts

@@ -0,0 +1,70 @@
+/**
+ * Scroll anchoring hook.
+ *
+ * Observes a scrollable container for content height changes (e.g. lazy diagram
+ * renders replacing placeholders with SVGs). When content above the current
+ * viewport grows, compensates the scroll position so the user's reading position
+ * remains stable.
+ *
+ * Uses ResizeObserver on the content element inside the scroll container.
+ */
+import { useEffect, useRef } from 'react';
+
+/**
+ * Attach scroll anchoring to a scrollable container.
+ *
+ * @param scrollRef - Ref to the scrollable container (the element with overflow-y).
+ * @param contentRef - Ref to the content element inside the scroller whose height may change.
+ * @param active - Whether anchoring is active (disable during programmatic scrolls).
+ */
+export function useScrollAnchor(
+  scrollRef: React.RefObject<HTMLElement | null>,
+  contentRef: React.RefObject<HTMLElement | null>,
+  active = true,
+): void {
+  const prevHeight = useRef<number>(0);
+  const prevScrollTop = useRef<number>(0);
+
+  useEffect(() => {
+    const scroller = scrollRef.current;
+    const content = contentRef.current;
+    if (!scroller || !content || !active) return;
+
+    // Snapshot initial state
+    prevHeight.current = content.scrollHeight;
+    prevScrollTop.current = scroller.scrollTop;
+
+    // Track scroll position
+    const onScroll = () => {
+      prevScrollTop.current = scroller.scrollTop;
+    };
+    scroller.addEventListener('scroll', onScroll, { passive: true });
+
+    // Observe content size changes
+    const observer = new ResizeObserver(() => {
+      const newHeight = content.scrollHeight;
+      const oldHeight = prevHeight.current;
+      const delta = newHeight - oldHeight;
+
+      if (Math.abs(delta) > 0 && prevScrollTop.current > 0) {
+        // Only compensate if content grew above the current scroll position.
+        // If the scroller's scrollTop hasn't changed but scrollHeight grew,
+        // the browser didn't auto-adjust, meaning growth was above viewport.
+        const currentScrollTop = scroller.scrollTop;
+        if (currentScrollTop === prevScrollTop.current && delta > 0) {
+          scroller.scrollTop = currentScrollTop + delta;
+        }
+        prevScrollTop.current = scroller.scrollTop;
+      }
+
+      prevHeight.current = newHeight;
+    });
+
+    observer.observe(content);
+
+    return () => {
+      scroller.removeEventListener('scroll', onScroll);
+      observer.disconnect();
+    };
+  }, [scrollRef, contentRef, active]);
+}

package/client/src/hooks/useShareSettings.ts

@@ -0,0 +1,22 @@
+/**
+ * Share settings persistence (localStorage).
+ */
+import { useEffect, useState } from 'react';
+
+import type { ShareSettings } from '@/lib/api';
+
+function loadShareSettings(): ShareSettings {
+  const saved = localStorage.getItem('jeeves-share-settings');
+  if (saved) try { return JSON.parse(saved) as ShareSettings; } catch { /* ignore */ }
+  return { expiry: localStorage.getItem('jeeves-share-expiry') ?? '', depth: 0, dirs: false };
+}
+
+export function useShareSettings() {
+  const [shareSettings, setShareSettings] = useState<ShareSettings>(loadShareSettings);
+
+  useEffect(() => {
+    localStorage.setItem('jeeves-share-settings', JSON.stringify(shareSettings));
+  }, [shareSettings]);
+
+  return { shareSettings, setShareSettings };
+}

package/client/src/hooks/useTopBar.ts

@@ -0,0 +1,27 @@
+/**
+ * Top bar height measurement for sticky layout.
+ *
+ * @param depsKey - Serialized dependency key (e.g. JSON.stringify([val1, val2])).
+ *   When this value changes, the top bar height is re-measured.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export function useTopBar(depsKey = '') {
+  const topBarRef = useRef<HTMLDivElement>(null);
+  const mainRef = useRef<HTMLElement>(null);
+  const [topBarHeight, setTopBarHeight] = useState(96);
+
+  const measureTopBar = useCallback(() => {
+    if (topBarRef.current) setTopBarHeight(topBarRef.current.offsetHeight);
+  }, []);
+
+  useEffect(() => {
+    measureTopBar();
+    window.addEventListener('resize', measureTopBar);
+    return () => window.removeEventListener('resize', measureTopBar);
+  }, [measureTopBar]);
+
+  useEffect(() => { measureTopBar(); }, [measureTopBar, depsKey]);
+
+  return { topBarRef, mainRef, topBarHeight };
+}

package/client/src/index.css

@@ -0,0 +1,281 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+html, body, #root {
+  height: 100%;
+  overflow: hidden;
+}
+@plugin '@tailwindcss/typography';
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-destructive: var(--destructive);
+  --color-ring: var(--ring);
+  --radius: 0.5rem;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+@layer base {
+  :root {
+    color-scheme: light;
+    --background: #ffffff;
+    --foreground: #0a0a0a;
+    --muted: #f5f5f5;
+    --muted-foreground: #737373;
+    --border: #e5e5e5;
+    --primary: #171717;
+    --primary-foreground: #fafafa;
+    --accent: #f5f5f5;
+    --accent-foreground: #171717;
+    --popover: #ffffff;
+    --popover-foreground: #0a0a0a;
+    --destructive: #ef4444;
+    --ring: #171717;
+  }
+
+  .dark {
+    color-scheme: dark;
+    --background: #0a0a0a;
+    --foreground: #fafafa;
+    --muted: #262626;
+    --muted-foreground: #a3a3a3;
+    --border: #262626;
+    --primary: #fafafa;
+    --primary-foreground: #0a0a0a;
+    --accent: #3a3a3a;
+    --accent-foreground: #fafafa;
+    --popover: #1c1c1c;
+    --popover-foreground: #fafafa;
+    --destructive: #f87171;
+    --ring: #d4d4d4;
+  }
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+
+/* Markdown anchor links */
+.prose .anchor {
+  text-decoration: none;
+  color: var(--color-muted-foreground);
+  opacity: 0;
+  transition: opacity 0.15s;
+  margin-left: 0.4em;
+}
+
+.prose h1:hover .anchor,
+.prose h2:hover .anchor,
+.prose h3:hover .anchor,
+.prose h4:hover .anchor,
+.prose h5:hover .anchor,
+.prose h6:hover .anchor {
+  opacity: 1;
+}
+
+.prose h1, .prose h2, .prose h3,
+.prose h4, .prose h5, .prose h6 {
+  position: relative;
+}
+
+/* Frontmatter block */
+.prose .frontmatter-block {
+  margin-bottom: 2em;
+}
+
+/* Code blocks */
+.prose pre {
+  background-color: var(--color-muted);
+  color: var(--color-foreground);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  position: relative;
+}
+
+.prose pre code {
+  color: inherit;
+}
+
+/* Copy button on code blocks (injected via JS) */
+.code-copy-btn {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0.375rem;
+  border-radius: 0.25rem;
+  background: rgba(63, 63, 70, 0.8);
+  color: #a1a1aa;
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s, background 0.15s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+pre:hover .code-copy-btn {
+  opacity: 1;
+}
+
+.code-copy-btn:hover {
+  background: rgba(82, 82, 91, 0.9);
+  color: #fff;
+}
+
+.prose code {
+  font-size: 0.875em;
+}
+
+.prose :not(pre) > code {
+  background-color: var(--color-muted);
+  padding: 0.125em 0.375em;
+  border-radius: 0.25rem;
+  font-weight: 500;
+}
+
+.prose :not(pre) > code::before,
+.prose :not(pre) > code::after {
+  content: none;
+}
+
+/* Thin scrollbar for breadcrumb nav */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,0.2) transparent;
+}
+.scrollbar-thin::-webkit-scrollbar {
+  height: 3px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.2);
+  border-radius: 2px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* TOC sidebar */
+.toc-sidebar {
+  position: sticky;
+  top: 1rem;
+  overflow-y: auto;
+}
+
+.toc-sidebar a {
+  display: block;
+  padding: 0.25rem 0;
+  color: var(--color-muted-foreground);
+  text-decoration: none;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  transition: color 0.15s;
+}
+
+.toc-sidebar a:hover {
+  color: var(--color-foreground);
+}
+
+.toc-sidebar a.active {
+  color: var(--color-foreground);
+  font-weight: 600;
+}
+
+/* Embedded diagram containers in markdown */
+/* Lazy diagram loading placeholder */
+.embedded-diagram-lazy,
+.embedded-diagram-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2rem 1rem;
+  margin: 1rem 0;
+  border: 1px dashed var(--border);
+  border-radius: 0.5rem;
+  color: var(--muted-foreground);
+  font-size: 0.875rem;
+}
+
+.diagram-spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid var(--border);
+  border-top-color: var(--foreground);
+  border-radius: 50%;
+  animation: diagram-spin 0.8s linear infinite;
+}
+
+@keyframes diagram-spin {
+  to { transform: rotate(360deg); }
+}
+
+.embedded-diagram-rendered {
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1rem 0;
+  overflow-x: auto;
+  text-align: center;
+}
+
+.embedded-diagram-rendered svg {
+  max-width: 100%;
+  height: auto;
+  display: inline-block;
+}
+
+.embedded-diagram-error {
+  background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
+  border: 1px solid var(--color-destructive);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.diagram-error-label {
+  color: var(--color-destructive);
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.diagram-reload-hint {
+  color: var(--color-muted-foreground);
+  font-size: 0.8125rem;
+  font-style: italic;
+  margin-bottom: 0.5rem;
+}
+
+.diagram-retry-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-foreground);
+  background: var(--color-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background 150ms;
+}
+
+.diagram-retry-btn:hover {
+  background: var(--color-accent);
+}

package/client/src/lib/AuthContext.ts

@@ -0,0 +1,27 @@
+/**
+ * Auth context and hook.
+ */
+import { createContext, useContext } from 'react';
+
+export interface AuthState {
+  loading: boolean;
+  authenticated: boolean;
+  email?: string;
+  picture?: string;
+  isInsider: boolean;
+  searchEnabled: boolean;
+  keyCreatedAt?: string | null;
+  rotateKey: () => Promise<void>;
+}
+
+export const AuthContext = createContext<AuthState>({
+  loading: true,
+  authenticated: false,
+  isInsider: false,
+  searchEnabled: false,
+  rotateKey: async () => {},
+});
+
+export function useAuth(): AuthState {
+  return useContext(AuthContext);
+}