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/d3-binarytree/dist/d3-binarytree.js

@@ -0,0 +1,358 @@
+// https://github.com/vasturiano/d3-binarytree v1.0.2
+(function (global, factory) {
+typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+typeof define === 'function' && define.amd ? define(['exports'], factory) :
+(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.d3 = global.d3 || {}));
+})(this, (function (exports) { 'use strict';
+
+function tree_add(d) {
+  const x = +this._x.call(null, d);
+  return add(this.cover(x), x, d);
+}
+
+function add(tree, x, d) {
+  if (isNaN(x)) return tree; // ignore invalid points
+
+  var parent,
+      node = tree._root,
+      leaf = {data: d},
+      x0 = tree._x0,
+      x1 = tree._x1,
+      xm,
+      xp,
+      right,
+      i,
+      j;
+
+  // If the tree is empty, initialize the root as a leaf.
+  if (!node) return tree._root = leaf, tree;
+
+  // Find the existing leaf for the new point, or add it.
+  while (node.length) {
+    if (right = x >= (xm = (x0 + x1) / 2)) x0 = xm; else x1 = xm;
+    if (parent = node, !(node = node[i = +right])) return parent[i] = leaf, tree;
+  }
+
+  // Is the new point is exactly coincident with the existing point?
+  xp = +tree._x.call(null, node.data);
+  if (x === xp) return leaf.next = node, parent ? parent[i] = leaf : tree._root = leaf, tree;
+
+  // Otherwise, split the leaf node until the old and new point are separated.
+  do {
+    parent = parent ? parent[i] = new Array(2) : tree._root = new Array(2);
+    if (right = x >= (xm = (x0 + x1) / 2)) x0 = xm; else x1 = xm;
+  } while ((i = +right) === (j = +(xp >= xm)));
+  return parent[j] = node, parent[i] = leaf, tree;
+}
+
+function addAll(data) {
+  if (!Array.isArray(data)) data = Array.from(data);
+  const n = data.length;
+  const xz = new Float64Array(n);
+  let x0 = Infinity,
+      x1 = -Infinity;
+
+  // Compute the points and their extent.
+  for (let i = 0, x; i < n; ++i) {
+    if (isNaN(x = +this._x.call(null, data[i]))) continue;
+    xz[i] = x;
+    if (x < x0) x0 = x;
+    if (x > x1) x1 = x;
+  }
+
+  // If there were no (valid) points, abort.
+  if (x0 > x1) return this;
+
+  // Expand the tree to cover the new points.
+  this.cover(x0).cover(x1);
+
+  // Add the new points.
+  for (let i = 0; i < n; ++i) {
+    add(this, xz[i], data[i]);
+  }
+
+  return this;
+}
+
+function tree_cover(x) {
+  if (isNaN(x = +x)) return this; // ignore invalid points
+
+  var x0 = this._x0,
+      x1 = this._x1;
+
+  // If the binarytree has no extent, initialize them.
+  // Integer extent are necessary so that if we later double the extent,
+  // the existing half boundaries don’t change due to floating point error!
+  if (isNaN(x0)) {
+    x1 = (x0 = Math.floor(x)) + 1;
+  }
+
+  // Otherwise, double repeatedly to cover.
+  else {
+    var z = x1 - x0 || 1,
+        node = this._root,
+        parent,
+        i;
+
+    while (x0 > x || x >= x1) {
+      i = +(x < x0);
+      parent = new Array(2), parent[i] = node, node = parent, z *= 2;
+      switch (i) {
+        case 0: x1 = x0 + z; break;
+        case 1: x0 = x1 - z; break;
+      }
+    }
+
+    if (this._root && this._root.length) this._root = node;
+  }
+
+  this._x0 = x0;
+  this._x1 = x1;
+  return this;
+}
+
+function tree_data() {
+  var data = [];
+  this.visit(function(node) {
+    if (!node.length) do data.push(node.data); while (node = node.next)
+  });
+  return data;
+}
+
+function tree_extent(_) {
+  return arguments.length
+      ? this.cover(+_[0][0]).cover(+_[1][0])
+      : isNaN(this._x0) ? undefined : [[this._x0], [this._x1]];
+}
+
+function Half(node, x0, x1) {
+  this.node = node;
+  this.x0 = x0;
+  this.x1 = x1;
+}
+
+function tree_find(x, radius) {
+  var data,
+      x0 = this._x0,
+      x1,
+      x2,
+      x3 = this._x1,
+      halves = [],
+      node = this._root,
+      q,
+      i;
+
+  if (node) halves.push(new Half(node, x0, x3));
+  if (radius == null) radius = Infinity;
+  else {
+    x0 = x - radius;
+    x3 = x + radius;
+  }
+
+  while (q = halves.pop()) {
+
+    // Stop searching if this half can’t contain a closer node.
+    if (!(node = q.node)
+        || (x1 = q.x0) > x3
+        || (x2 = q.x1) < x0) continue;
+
+    // Bisect the current half.
+    if (node.length) {
+      var xm = (x1 + x2) / 2;
+
+      halves.push(
+        new Half(node[1], xm, x2),
+        new Half(node[0], x1, xm)
+      );
+
+      // Visit the closest half first.
+      if (i = +(x >= xm)) {
+        q = halves[halves.length - 1];
+        halves[halves.length - 1] = halves[halves.length - 1 - i];
+        halves[halves.length - 1 - i] = q;
+      }
+    }
+
+    // Visit this point. (Visiting coincident points isn’t necessary!)
+    else {
+      var d = Math.abs(x - +this._x.call(null, node.data));
+      if (d < radius) {
+        radius = d;
+        x0 = x - d;
+        x3 = x + d;
+        data = node.data;
+      }
+    }
+  }
+
+  return data;
+}
+
+function tree_remove(d) {
+  if (isNaN(x = +this._x.call(null, d))) return this; // ignore invalid points
+
+  var parent,
+      node = this._root,
+      retainer,
+      previous,
+      next,
+      x0 = this._x0,
+      x1 = this._x1,
+      x,
+      xm,
+      right,
+      i,
+      j;
+
+  // If the tree is empty, initialize the root as a leaf.
+  if (!node) return this;
+
+  // Find the leaf node for the point.
+  // While descending, also retain the deepest parent with a non-removed sibling.
+  if (node.length) while (true) {
+    if (right = x >= (xm = (x0 + x1) / 2)) x0 = xm; else x1 = xm;
+    if (!(parent = node, node = node[i = +right])) return this;
+    if (!node.length) break;
+    if (parent[(i + 1) & 1]) retainer = parent, j = i;
+  }
+
+  // Find the point to remove.
+  while (node.data !== d) if (!(previous = node, node = node.next)) return this;
+  if (next = node.next) delete node.next;
+
+  // If there are multiple coincident points, remove just the point.
+  if (previous) return (next ? previous.next = next : delete previous.next), this;
+
+  // If this is the root point, remove it.
+  if (!parent) return this._root = next, this;
+
+  // Remove this leaf.
+  next ? parent[i] = next : delete parent[i];
+
+  // If the parent now contains exactly one leaf, collapse superfluous parents.
+  if ((node = parent[0] || parent[1])
+      && node === (parent[1] || parent[0])
+      && !node.length) {
+    if (retainer) retainer[j] = node;
+    else this._root = node;
+  }
+
+  return this;
+}
+
+function removeAll(data) {
+  for (var i = 0, n = data.length; i < n; ++i) this.remove(data[i]);
+  return this;
+}
+
+function tree_root() {
+  return this._root;
+}
+
+function tree_size() {
+  var size = 0;
+  this.visit(function(node) {
+    if (!node.length) do ++size; while (node = node.next)
+  });
+  return size;
+}
+
+function tree_visit(callback) {
+  var halves = [], q, node = this._root, child, x0, x1;
+  if (node) halves.push(new Half(node, this._x0, this._x1));
+  while (q = halves.pop()) {
+    if (!callback(node = q.node, x0 = q.x0, x1 = q.x1) && node.length) {
+      var xm = (x0 + x1) / 2;
+      if (child = node[1]) halves.push(new Half(child, xm, x1));
+      if (child = node[0]) halves.push(new Half(child, x0, xm));
+    }
+  }
+  return this;
+}
+
+function tree_visitAfter(callback) {
+  var halves = [], next = [], q;
+  if (this._root) halves.push(new Half(this._root, this._x0, this._x1));
+  while (q = halves.pop()) {
+    var node = q.node;
+    if (node.length) {
+      var child, x0 = q.x0, x1 = q.x1, xm = (x0 + x1) / 2;
+      if (child = node[0]) halves.push(new Half(child, x0, xm));
+      if (child = node[1]) halves.push(new Half(child, xm, x1));
+    }
+    next.push(q);
+  }
+  while (q = next.pop()) {
+    callback(q.node, q.x0, q.x1);
+  }
+  return this;
+}
+
+function defaultX(d) {
+  return d[0];
+}
+
+function tree_x(_) {
+  return arguments.length ? (this._x = _, this) : this._x;
+}
+
+function binarytree(nodes, x) {
+  var tree = new Binarytree(x == null ? defaultX : x, NaN, NaN);
+  return nodes == null ? tree : tree.addAll(nodes);
+}
+
+function Binarytree(x, x0, x1) {
+  this._x = x;
+  this._x0 = x0;
+  this._x1 = x1;
+  this._root = undefined;
+}
+
+function leaf_copy(leaf) {
+  var copy = {data: leaf.data}, next = copy;
+  while (leaf = leaf.next) next = next.next = {data: leaf.data};
+  return copy;
+}
+
+var treeProto = binarytree.prototype = Binarytree.prototype;
+
+treeProto.copy = function() {
+  var copy = new Binarytree(this._x, this._x0, this._x1),
+      node = this._root,
+      nodes,
+      child;
+
+  if (!node) return copy;
+
+  if (!node.length) return copy._root = leaf_copy(node), copy;
+
+  nodes = [{source: node, target: copy._root = new Array(2)}];
+  while (node = nodes.pop()) {
+    for (var i = 0; i < 2; ++i) {
+      if (child = node.source[i]) {
+        if (child.length) nodes.push({source: child, target: node.target[i] = new Array(2)});
+        else node.target[i] = leaf_copy(child);
+      }
+    }
+  }
+
+  return copy;
+};
+
+treeProto.add = tree_add;
+treeProto.addAll = addAll;
+treeProto.cover = tree_cover;
+treeProto.data = tree_data;
+treeProto.extent = tree_extent;
+treeProto.find = tree_find;
+treeProto.remove = tree_remove;
+treeProto.removeAll = removeAll;
+treeProto.root = tree_root;
+treeProto.size = tree_size;
+treeProto.visit = tree_visit;
+treeProto.visitAfter = tree_visitAfter;
+treeProto.x = tree_x;
+
+exports.binarytree = binarytree;
+
+}));

frontend/node_modules/d3-binarytree/dist/d3-binarytree.min.js

@@ -0,0 +1,2 @@
+// https://github.com/vasturiano/d3-binarytree v1.0.2
+!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r((t="undefined"!=typeof globalThis?globalThis:t||self).d3=t.d3||{})}(this,(function(t){"use strict";function r(t,r,e){if(isNaN(r))return t;var n,i,o,s,h,a,u=t._root,f={data:e},l=t._x0,x=t._x1;if(!u)return t._root=f,t;for(;u.length;)if((s=r>=(i=(l+x)/2))?l=i:x=i,n=u,!(u=u[h=+s]))return n[h]=f,t;if(r===(o=+t._x.call(null,u.data)))return f.next=u,n?n[h]=f:t._root=f,t;do{n=n?n[h]=new Array(2):t._root=new Array(2),(s=r>=(i=(l+x)/2))?l=i:x=i}while((h=+s)==(a=+(o>=i)));return n[a]=u,n[h]=f,t}function e(t,r,e){this.node=t,this.x0=r,this.x1=e}function n(t){return t[0]}function i(t,r){var e=new o(null==r?n:r,NaN,NaN);return null==t?e:e.addAll(t)}function o(t,r,e){this._x=t,this._x0=r,this._x1=e,this._root=void 0}function s(t){for(var r={data:t.data},e=r;t=t.next;)e=e.next={data:t.data};return r}var h=i.prototype=o.prototype;h.copy=function(){var t,r,e=new o(this._x,this._x0,this._x1),n=this._root;if(!n)return e;if(!n.length)return e._root=s(n),e;for(t=[{source:n,target:e._root=new Array(2)}];n=t.pop();)for(var i=0;i<2;++i)(r=n.source[i])&&(r.length?t.push({source:r,target:n.target[i]=new Array(2)}):n.target[i]=s(r));return e},h.add=function(t){const e=+this._x.call(null,t);return r(this.cover(e),e,t)},h.addAll=function(t){Array.isArray(t)||(t=Array.from(t));const e=t.length,n=new Float64Array(e);let i=1/0,o=-1/0;for(let r,s=0;s<e;++s)isNaN(r=+this._x.call(null,t[s]))||(n[s]=r,r<i&&(i=r),r>o&&(o=r));if(i>o)return this;this.cover(i).cover(o);for(let i=0;i<e;++i)r(this,n[i],t[i]);return this},h.cover=function(t){if(isNaN(t=+t))return this;var r=this._x0,e=this._x1;if(isNaN(r))e=(r=Math.floor(t))+1;else{for(var n,i,o=e-r||1,s=this._root;r>t||t>=e;)switch(i=+(t<r),(n=new Array(2))[i]=s,s=n,o*=2,i){case 0:e=r+o;break;case 1:r=e-o}this._root&&this._root.length&&(this._root=s)}return this._x0=r,this._x1=e,this},h.data=function(){var t=[];return this.visit((function(r){if(!r.length)do{t.push(r.data)}while(r=r.next)})),t},h.extent=function(t){return arguments.length?this.cover(+t[0][0]).cover(+t[1][0]):isNaN(this._x0)?void 0:[[this._x0],[this._x1]]},h.find=function(t,r){var n,i,o,s,h,a=this._x0,u=this._x1,f=[],l=this._root;for(l&&f.push(new e(l,a,u)),null==r?r=1/0:(a=t-r,u=t+r);s=f.pop();)if(!(!(l=s.node)||(i=s.x0)>u||(o=s.x1)<a))if(l.length){var x=(i+o)/2;f.push(new e(l[1],x,o),new e(l[0],i,x)),(h=+(t>=x))&&(s=f[f.length-1],f[f.length-1]=f[f.length-1-h],f[f.length-1-h]=s)}else{var _=Math.abs(t-+this._x.call(null,l.data));_<r&&(r=_,a=t-_,u=t+_,n=l.data)}return n},h.remove=function(t){if(isNaN(o=+this._x.call(null,t)))return this;var r,e,n,i,o,s,h,a,u,f=this._root,l=this._x0,x=this._x1;if(!f)return this;if(f.length)for(;;){if((h=o>=(s=(l+x)/2))?l=s:x=s,r=f,!(f=f[a=+h]))return this;if(!f.length)break;r[a+1&1]&&(e=r,u=a)}for(;f.data!==t;)if(n=f,!(f=f.next))return this;return(i=f.next)&&delete f.next,n?(i?n.next=i:delete n.next,this):r?(i?r[a]=i:delete r[a],(f=r[0]||r[1])&&f===(r[1]||r[0])&&!f.length&&(e?e[u]=f:this._root=f),this):(this._root=i,this)},h.removeAll=function(t){for(var r=0,e=t.length;r<e;++r)this.remove(t[r]);return this},h.root=function(){return this._root},h.size=function(){var t=0;return this.visit((function(r){if(!r.length)do{++t}while(r=r.next)})),t},h.visit=function(t){var r,n,i,o,s=[],h=this._root;for(h&&s.push(new e(h,this._x0,this._x1));r=s.pop();)if(!t(h=r.node,i=r.x0,o=r.x1)&&h.length){var a=(i+o)/2;(n=h[1])&&s.push(new e(n,a,o)),(n=h[0])&&s.push(new e(n,i,a))}return this},h.visitAfter=function(t){var r,n=[],i=[];for(this._root&&n.push(new e(this._root,this._x0,this._x1));r=n.pop();){var o=r.node;if(o.length){var s,h=r.x0,a=r.x1,u=(h+a)/2;(s=o[0])&&n.push(new e(s,h,u)),(s=o[1])&&n.push(new e(s,u,a))}i.push(r)}for(;r=i.pop();)t(r.node,r.x0,r.x1);return this},h.x=function(t){return arguments.length?(this._x=t,this):this._x},t.binarytree=i}));