T1/Phase 1: scaffold Vite SPA + Hono API + Bun worker

- apps/web: Vite + React 19 + TanStack Router/Query + shadcn/ui - apps/api: Hono + Bun on :3001 with /api/health, /api/auth/*, /mcp stubs - apps/worker: Bun worker stub, DB connection, graceful SIGTERM - apps/web-legacy/: old Next.js code moved aside (preserved for T2-T8 reference) - Dockerfiles: api (Bun), worker (Bun), spa (multi-stage Caddy) - Caddyfile: serves dist + reverse-proxies /api/* + /mcp to api - docker-compose.yml: 4-service target (api, spa, db, worker) - packages/db/src/client.ts: shared Drizzle client for api + worker - db/client.ts: root-level alias for convenience Parent: t_e1cbd87d -> t_24c9c3fd (T0)
2026-08-01 01:15:31 +00:00
parent 9203aee758
commit fca56ab77e
312 changed files with 3489 additions and 196 deletions
@@ -0,0 +1,110 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import dynamic from 'next/dynamic';
+
+const ForceGraph2D = dynamic(() => import('react-force-graph-2d'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex h-full items-center justify-center">
+      <p className="text-sm text-muted-foreground">Loading graph...</p>
+    </div>
+  ),
+});
+
+interface Note {
+  id: string;
+  title: string;
+  domain: string;
+}
+
+interface GraphNode {
+  id: string;
+  title: string;
+  domain: string;
+  val: number;
+}
+
+interface GraphLink {
+  source: string;
+  target: string;
+}
+
+interface NoteGraphProps {
+  notes: Note[];
+}
+
+export function NoteGraph({ notes }: NoteGraphProps) {
+  const [graphData, setGraphData] = useState<{
+    nodes: GraphNode[];
+    links: GraphLink[];
+  }>({ nodes: [], links: [] });
+  const graphRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 300, height: 500 });
+
+  useEffect(() => {
+    fetchGraphData();
+  }, []);
+
+  useEffect(() => {
+    if (graphRef.current) {
+      const { width, height } = graphRef.current.getBoundingClientRect();
+      setDimensions({ width: Math.floor(width) || 300, height: Math.floor(height) || 500 });
+    }
+  }, []);
+
+  async function fetchGraphData() {
+    try {
+      const response = await fetch('/api/notes/graph');
+      if (response.ok) {
+        const data = await response.json();
+
+        const nodes: GraphNode[] = (data.nodes || []).map(
+          (node: { id: string; title: string; domain: string; connectionCount?: number }) => ({
+            id: node.id,
+            title: node.title,
+            domain: node.domain,
+            val: (node.connectionCount || 0) + 1,
+          })
+        );
+
+        const links: GraphLink[] = (data.edges || []).map(
+          (edge: { source: string; target: string }) => ({
+            source: edge.source,
+            target: edge.target,
+          })
+        );
+
+        setGraphData({ nodes, links });
+      }
+    } catch (error) {
+      console.error('Failed to fetch graph data:', error);
+    }
+  }
+
+  if (graphData.nodes.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-sm text-muted-foreground">No graph data available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={graphRef} className="h-[500px] w-full">
+      <ForceGraph2D
+        graphData={graphData}
+        nodeLabel="title"
+        nodeAutoColorBy="domain"
+        nodeRelSize={6}
+        linkDirectionalArrowLength={6}
+        linkDirectionalArrowRelPos={0.99}
+        onNodeClick={(node: Record<string, unknown>) => {
+          console.log('Clicked node:', node);
+        }}
+        width={dimensions.width}
+        height={dimensions.height}
+      />
+    </div>
+  );
+}