Add side panels, task selection, graph animation, and project docs

- Foldable left panel (user profile) and right panel (task details)
- Clicking a task in the list or graph node selects it and shows details
- Both views (task list + graph) always mounted via absolute inset-0 for
  correct canvas dimensions; tabs toggle visibility with opacity
- Graph node selection animation: other nodes repel outward (charge -600),
  then selected node smoothly slides to center (500ms cubic ease-out),
  then charge restores to -120 and graph stabilizes
- Graph re-fits on tab switch and panel resize via ResizeObserver
- Fix UUID string IDs throughout (backend returns UUIDs, not integers)
- Add TaskDetailPanel, UserPanel components
- Add CLAUDE.md project documentation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/node_modules/react-force-graph-2d/dist/react-force-graph-2d.d.ts

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import ForceGraphKapsule from 'force-graph';
+
+interface GraphData<NodeType = {}, LinkType = {}> {
+  nodes: NodeObject<NodeType>[];
+  links: LinkObject<NodeType, LinkType>[];
+}
+
+type NodeObject<NodeType = {}> = NodeType & {
+  id?: string | number;
+  x?: number;
+  y?: number;
+  vx?: number;
+  vy?: number;
+  fx?: number;
+  fy?: number;
+  [others: string]: any;
+};
+
+type LinkObject<NodeType = {}, LinkType = {}> = LinkType & {
+  source?: string | number | NodeObject<NodeType>;
+  target?: string | number | NodeObject<NodeType>;
+  [others: string]: any;
+};
+
+type Accessor<In, Out> = Out | string | ((obj: In) => Out);
+type NodeAccessor<NodeType, T> = Accessor<NodeObject<NodeType>, T>;
+type LinkAccessor<NodeType, LinkType, T> = Accessor<LinkObject<NodeType, LinkType>, T>;
+
+type TooltipContent = string | React.ReactHTMLElement<HTMLElement>;
+
+type CanvasCustomRenderMode = 'replace' | 'before' | 'after';
+type CanvasCustomRenderFn<T> = (obj: T, canvasContext: CanvasRenderingContext2D, globalScale: number) => void;
+type CanvasPointerAreaPaintFn<T> = (obj: T, paintColor: string, canvasContext: CanvasRenderingContext2D, globalScale: number) => void;
+
+type DagMode = 'td' | 'bu' | 'lr' | 'rl' | 'radialout' | 'radialin';
+
+interface ForceFn<NodeType = {}> {
+  (alpha: number): void;
+  initialize?: (nodes: NodeObject<NodeType>[], ...args: any[]) => void;
+  [key: string]: any;
+}
+
+interface ForceGraphProps<
+  NodeType = {},
+  LinkType = {}
+> {
+  // Data input
+  graphData?: GraphData<NodeObject<NodeType>, LinkObject<NodeType, LinkType>>;
+  nodeId?: string;
+  linkSource?: string;
+  linkTarget?: string;
+
+  // Container layout
+  width?: number;
+  height?: number;
+  backgroundColor?: string;
+
+  // Node styling
+  nodeRelSize?: number;
+  nodeVal?: NodeAccessor<NodeType, number>;
+  nodeLabel?: NodeAccessor<NodeType, TooltipContent>;
+  nodeVisibility?: NodeAccessor<NodeType, boolean>;
+  nodeColor?: NodeAccessor<NodeType, string>;
+  nodeAutoColorBy?: NodeAccessor<NodeType, string | null>;
+  nodeCanvasObjectMode?: string | ((obj: NodeObject<NodeType>) => CanvasCustomRenderMode | any);
+  nodeCanvasObject?: CanvasCustomRenderFn<NodeObject<NodeType>>;
+  nodePointerAreaPaint?: CanvasPointerAreaPaintFn<NodeObject<NodeType>>;
+
+  // Link styling
+  linkLabel?: LinkAccessor<NodeType, LinkType, TooltipContent>;
+  linkVisibility?: LinkAccessor<NodeType, LinkType, boolean>;
+  linkColor?: LinkAccessor<NodeType, LinkType, string>;
+  linkAutoColorBy?: LinkAccessor<NodeType, LinkType, string | null>;
+  linkLineDash?: LinkAccessor<NodeType, LinkType, number[] | null>;
+  linkWidth?: LinkAccessor<NodeType, LinkType, number>;
+  linkCurvature?: LinkAccessor<NodeType, LinkType, number>;
+  linkCanvasObject?: CanvasCustomRenderFn<LinkObject<NodeType, LinkType>>;
+  linkCanvasObjectMode?: string | ((obj: LinkObject<NodeType, LinkType>) => CanvasCustomRenderMode | any);
+  linkDirectionalArrowLength?: LinkAccessor<NodeType, LinkType, number>;
+  linkDirectionalArrowColor?: LinkAccessor<NodeType, LinkType, string>;
+  linkDirectionalArrowRelPos?: LinkAccessor<NodeType, LinkType, number>;
+  linkDirectionalParticles?: LinkAccessor<NodeType, LinkType, number>;
+  linkDirectionalParticleSpeed?: LinkAccessor<NodeType, LinkType, number>;
+  linkDirectionalParticleOffset?: LinkAccessor<NodeType, LinkType, number>;
+  linkDirectionalParticleWidth?: LinkAccessor<NodeType, LinkType, number>;
+  linkDirectionalParticleColor?: LinkAccessor<NodeType, LinkType, string>;
+  linkDirectionalParticleCanvasObject?: (x: number, y: number, link: LinkType, canvasContext: CanvasRenderingContext2D, globalScale: number) => void;
+  linkPointerAreaPaint?: CanvasPointerAreaPaintFn<LinkObject<NodeType, LinkType>>;
+
+  // Render control
+  autoPauseRedraw?: boolean;
+  minZoom?: number;
+  maxZoom?: number;
+  onRenderFramePre?: (canvasContext: CanvasRenderingContext2D, globalScale: number) => void;
+  onRenderFramePost?: (canvasContext: CanvasRenderingContext2D, globalScale: number) => void;
+
+  // Force engine (d3-force) configuration
+  dagMode?: DagMode;
+  dagLevelDistance?: number | null;
+  dagNodeFilter?: (node: NodeObject<NodeType>) => boolean;
+  onDagError?: ((loopNodeIds: (string | number)[]) => void) | undefined;
+  d3AlphaMin?: number;
+  d3AlphaDecay?: number;
+  d3VelocityDecay?: number;
+  ngraphPhysics?: object;
+  warmupTicks?: number;
+  cooldownTicks?: number;
+  cooldownTime?: number;
+  onEngineTick?: () => void;
+  onEngineStop?: () => void;
+
+  // Interaction
+  onNodeClick?: (node: NodeObject<NodeType>, event: MouseEvent) => void;
+  onNodeRightClick?: (node: NodeObject<NodeType>, event: MouseEvent) => void;
+  onNodeHover?: (node: NodeObject<NodeType> | null, previousNode: NodeObject<NodeType> | null) => void;
+  onNodeDrag?: (node: NodeObject<NodeType>, translate: { x: number, y: number }) => void;
+  onNodeDragEnd?: (node: NodeObject<NodeType>, translate: { x: number, y: number }) => void;
+  onLinkClick?: (link: LinkObject<NodeType, LinkType>, event: MouseEvent) => void;
+  onLinkRightClick?: (link: LinkObject<NodeType, LinkType>, event: MouseEvent) => void;
+  onLinkHover?: (link: LinkObject<NodeType, LinkType> | null, previousLink: LinkObject<NodeType, LinkType> | null) => void;
+  linkHoverPrecision?: number;
+  onBackgroundClick?: (event: MouseEvent) => void;
+  onBackgroundRightClick?: (event: MouseEvent) => void;
+  showPointerCursor?: boolean | ((obj: NodeObject<NodeType> | LinkObject<NodeType, LinkType> | undefined) => boolean);
+  onZoom?: (transform: {k: number, x: number, y: number}) => void;
+  onZoomEnd?: (transform: {k: number, x: number, y: number}) => void;
+  enableNodeDrag?: boolean;
+  enableZoomInteraction?: boolean | ((event: MouseEvent) => boolean);
+  enablePanInteraction?: boolean | ((event: MouseEvent) => boolean);
+  enablePointerInteraction?: boolean;
+}
+
+interface ForceGraphMethods<
+  NodeType = {},
+  LinkType = {}
+> {
+  // Link styling
+  emitParticle(link: LinkObject<NodeType, LinkType>): ForceGraphKapsule;
+
+  // Force engine (d3-force) configuration
+  d3Force(forceName: 'link' | 'charge' | 'center' | string): ForceFn<NodeObject<NodeType>> | undefined;
+  d3Force(forceName: 'link' | 'charge' | 'center' | string, forceFn: ForceFn<NodeObject<NodeType>> | null): ForceGraphKapsule;
+  d3ReheatSimulation(): ForceGraphKapsule;
+
+  // Render control
+  pauseAnimation(): ForceGraphKapsule;
+  resumeAnimation(): ForceGraphKapsule;
+  centerAt(): {x: number, y: number};
+  centerAt(x?: number, y?: number, durationMs?: number): ForceGraphKapsule;
+  zoom(): number;
+  zoom(scale: number, durationMs?: number): ForceGraphKapsule;
+  zoomToFit(durationMs?: number, padding?: number, nodeFilter?: (node: NodeObject<NodeType>) => boolean): ForceGraphKapsule;
+
+  // Utility
+  getGraphBbox(nodeFilter?: (node: NodeObject<NodeType>) => boolean): { x: [number, number], y: [number, number] };
+  screen2GraphCoords(x: number, y: number): { x: number, y: number };
+  graph2ScreenCoords(x: number, y: number): { x: number, y: number };
+}
+
+type FCwithRef = <NodeType = {}, LinkType = {}>(props: ForceGraphProps<NodeObject<NodeType>, LinkObject<NodeType, LinkType>> & { ref?: React.MutableRefObject<ForceGraphMethods<NodeObject<NodeType>, LinkObject<NodeType, LinkType>> | undefined>; }) => React.ReactElement;
+
+declare const ForceGraph: FCwithRef;
+
+export { ForceGraph as default };
+export type { ForceGraphMethods, ForceGraphProps, GraphData, LinkObject, NodeObject };

frontend/node_modules/react-force-graph-2d/dist/react-force-graph-2d.mjs

@@ -0,0 +1,133 @@
+import fromKapsule from 'react-kapsule';
+import ForceGraph2DKapsule from 'force-graph';
+import PropTypes from 'prop-types';
+
+const commonPropTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  graphData: PropTypes.shape({
+    nodes: PropTypes.arrayOf(PropTypes.object).isRequired,
+    links: PropTypes.arrayOf(PropTypes.object).isRequired
+  }),
+  backgroundColor: PropTypes.string,
+  nodeRelSize: PropTypes.number,
+  nodeId: PropTypes.string,
+  nodeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  nodeVal: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  nodeVisibility: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.func]),
+  nodeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  nodeAutoColorBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  onNodeHover: PropTypes.func,
+  onNodeClick: PropTypes.func,
+  linkSource: PropTypes.string,
+  linkTarget: PropTypes.string,
+  linkLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  linkVisibility: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.func]),
+  linkColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  linkAutoColorBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  linkWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  linkCurvature: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  linkDirectionalArrowLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  linkDirectionalArrowColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  linkDirectionalArrowRelPos: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  linkDirectionalParticles: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  linkDirectionalParticleSpeed: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  linkDirectionalParticleOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  linkDirectionalParticleWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  linkDirectionalParticleColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  onLinkHover: PropTypes.func,
+  onLinkClick: PropTypes.func,
+  dagMode: PropTypes.oneOf(['td', 'bu', 'lr', 'rl', 'zin', 'zout', 'radialin', 'radialout']),
+  dagLevelDistance: PropTypes.number,
+  dagNodeFilter: PropTypes.func,
+  onDagError: PropTypes.func,
+  d3AlphaMin: PropTypes.number,
+  d3AlphaDecay: PropTypes.number,
+  d3VelocityDecay: PropTypes.number,
+  warmupTicks: PropTypes.number,
+  cooldownTicks: PropTypes.number,
+  cooldownTime: PropTypes.number,
+  onEngineTick: PropTypes.func,
+  onEngineStop: PropTypes.func,
+  getGraphBbox: PropTypes.func
+};
+const pointerBasedPropTypes = {
+  zoomToFit: PropTypes.func,
+  onNodeRightClick: PropTypes.func,
+  onNodeDrag: PropTypes.func,
+  onNodeDragEnd: PropTypes.func,
+  onLinkRightClick: PropTypes.func,
+  linkHoverPrecision: PropTypes.number,
+  onBackgroundClick: PropTypes.func,
+  onBackgroundRightClick: PropTypes.func,
+  showPointerCursor: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  enablePointerInteraction: PropTypes.bool,
+  enableNodeDrag: PropTypes.bool
+};
+const threeBasedPropTypes = {
+  showNavInfo: PropTypes.bool,
+  nodeOpacity: PropTypes.number,
+  nodeResolution: PropTypes.number,
+  nodeThreeObject: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
+  nodeThreeObjectExtend: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.func]),
+  nodePositionUpdate: PropTypes.func,
+  linkOpacity: PropTypes.number,
+  linkResolution: PropTypes.number,
+  linkCurveRotation: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+  linkMaterial: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
+  linkThreeObject: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
+  linkThreeObjectExtend: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.func]),
+  linkPositionUpdate: PropTypes.func,
+  linkDirectionalArrowResolution: PropTypes.number,
+  linkDirectionalParticleResolution: PropTypes.number,
+  linkDirectionalParticleThreeObject: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
+  forceEngine: PropTypes.oneOf(['d3', 'ngraph']),
+  ngraphPhysics: PropTypes.object,
+  numDimensions: PropTypes.oneOf([1, 2, 3])
+};
+const ForceGraph2DPropTypes = Object.assign({}, commonPropTypes, pointerBasedPropTypes, {
+  linkLineDash: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.string, PropTypes.func]),
+  nodeCanvasObjectMode: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  nodeCanvasObject: PropTypes.func,
+  nodePointerAreaPaint: PropTypes.func,
+  linkCanvasObjectMode: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  linkCanvasObject: PropTypes.func,
+  linkPointerAreaPaint: PropTypes.func,
+  linkDirectionalParticleCanvasObject: PropTypes.func,
+  autoPauseRedraw: PropTypes.bool,
+  minZoom: PropTypes.number,
+  maxZoom: PropTypes.number,
+  enableZoomInteraction: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  enablePanInteraction: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  onZoom: PropTypes.func,
+  onZoomEnd: PropTypes.func,
+  onRenderFramePre: PropTypes.func,
+  onRenderFramePost: PropTypes.func
+});
+Object.assign({}, commonPropTypes, pointerBasedPropTypes, threeBasedPropTypes, {
+  enableNavigationControls: PropTypes.bool,
+  controlType: PropTypes.oneOf(['trackball', 'orbit', 'fly']),
+  rendererConfig: PropTypes.object,
+  extraRenderers: PropTypes.arrayOf(PropTypes.shape({
+    render: PropTypes.func.isRequired
+  }))
+});
+Object.assign({}, commonPropTypes, threeBasedPropTypes, {
+  nodeDesc: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  linkDesc: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+});
+Object.assign({}, commonPropTypes, threeBasedPropTypes, {
+  markerAttrs: PropTypes.object,
+  yOffset: PropTypes.number,
+  glScale: PropTypes.number
+});
+
+const ForceGraph2D = fromKapsule(ForceGraph2DKapsule, {
+  methodNames: [
+  // bind methods
+  'emitParticle', 'd3Force', 'd3ReheatSimulation', 'stopAnimation', 'pauseAnimation', 'resumeAnimation', 'centerAt', 'zoom', 'zoomToFit', 'getGraphBbox', 'screen2GraphCoords', 'graph2ScreenCoords']
+});
+ForceGraph2D.displayName = 'ForceGraph2D';
+ForceGraph2D.propTypes = ForceGraph2DPropTypes;
+
+export { ForceGraph2D as default };