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/float-tooltip/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Vasco Asturiano
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

frontend/node_modules/float-tooltip/README.md

@@ -0,0 +1,55 @@
+Floating Tooltip
+==============
+
+[![NPM package][npm-img]][npm-url]
+[![Build Size][build-size-img]][build-size-url]
+[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
+
+A floating tooltip JS component.
+
+## Quick start
+
+```js
+import Tooltip from 'float-tooltip';
+```
+or using a *script* tag
+```html
+<script src="//cdn.jsdelivr.net/npm/float-tooltip"></script>
+```
+then
+```js
+const myTooltip = new Tooltip(<triggerDOMElement>)
+  .content('<div>Hello World!</div>');
+```
+
+## API reference
+
+### Initialisation
+
+```js
+new Tooltip(<containerDomElement>, { configOptions })
+```
+
+| Config options | Description | Default |
+| --- | --- | :--: |
+| <b>style</b>: <i>object</i> | A custom style object apply to the tooltip and override the default style. | - |
+
+
+### Methods
+
+| Method | Description | Default                                                                                                                                                                                                                                           |
+| --- | --- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| <b>content</b>([<i>string | HTMLElement</i>]) | Specify the content of the tooltip. Supports plain text, HTML string content, an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) or [React JSX](https://react.dev/learn/writing-markup-with-jsx). If a falsy value is supplied the tooltip will automatically hide. | `false` |
+| <b>offsetX</b>([<i>number</i>]) | The amount of pixels to offset the tooltip horizontally from its center position relative to the pointer. If a `null` value is specified (default) the offset will be automatically calculated and gradually shifted so it remains horizontally inside the parent element. | - |
+| <b>offsetY</b>([<i>number</i>]) | The amount of pixels to offset the tooltip vertically relative to the pointer. A negative value will shift the tooltip to be above the pointer. If a `null` value is specified (default) the tooltip will be flipped above when the pointer is near the bottom, so it remains vertically inside the parent element. | - |
+
+## Giving Back
+
+[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8&currency_code=USD&source=url) If this project has helped you and you'd like to contribute back, you can always [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8&currency_code=USD&source=url)!
+
+[npm-img]: https://img.shields.io/npm/v/float-tooltip
+[npm-url]: https://npmjs.org/package/float-tooltip
+[build-size-img]: https://img.shields.io/bundlephobia/minzip/float-tooltip
+[build-size-url]: https://bundlephobia.com/result?p=float-tooltip
+[npm-downloads-img]: https://img.shields.io/npm/dt/float-tooltip
+[npm-downloads-url]: https://www.npmtrends.com/float-tooltip

frontend/node_modules/float-tooltip/dist/float-tooltip.d.ts

@@ -0,0 +1,18 @@
+import { ReactHTMLElement } from 'react';
+
+type ConfigOptions = {
+  style: {};
+}
+
+declare class Tooltip {
+  constructor(element: HTMLElement, configOptions?: ConfigOptions);
+
+  content(): string | boolean;
+  content(content: HTMLElement | ReactHTMLElement<HTMLElement> | string | boolean | null): Tooltip;
+  offsetX(): number | string | null;
+  offsetX(offset: number | string | null): Tooltip;
+  offsetY(): number | string | null;
+  offsetY(offset: number | string | null): Tooltip;
+}
+
+export { Tooltip as default };

frontend/node_modules/float-tooltip/dist/float-tooltip.mjs

@@ -0,0 +1,229 @@
+import { select, pointer } from 'd3-selection';
+import Kapsule from 'kapsule';
+import { isValidElement, cloneElement, render as render$1 } from 'preact';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var _reactElement2VNode = function reactElement2VNode(el) {
+  // Among other things, react VNodes (and all its children) need to have constructor: undefined attributes in order to be recognised, cloneElement (applied recursively) does the necessary conversion
+  if (!(_typeof(el) === 'object')) return el;
+  var res = cloneElement(el);
+  if (res.props) {
+    var _res$props;
+    res.props = _objectSpread2({}, res.props);
+    if (res !== null && res !== void 0 && (_res$props = res.props) !== null && _res$props !== void 0 && _res$props.children) {
+      res.props.children = Array.isArray(res.props.children) ? res.props.children.map(_reactElement2VNode) : _reactElement2VNode(res.props.children);
+    }
+  }
+  return res;
+};
+var isReactRenderable = function isReactRenderable(o) {
+  return isValidElement(cloneElement(o));
+};
+var render = function render(jsx, domEl) {
+  delete domEl.__k; // Wipe traces of previous preact renders
+  render$1(_reactElement2VNode(jsx), domEl);
+};
+
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".float-tooltip-kap {\n  position: absolute;\n  width: max-content; /* prevent shrinking near right edge */\n  max-width: max(50%, 150px);\n  padding: 3px 5px;\n  border-radius: 3px;\n  font: 12px sans-serif;\n  color: #eee;\n  background: rgba(0,0,0,0.6);\n  pointer-events: none;\n}\n";
+styleInject(css_248z);
+
+var index = Kapsule({
+  props: {
+    content: {
+      "default": false
+    },
+    offsetX: {
+      triggerUpdate: false
+    },
+    // null or number
+    offsetY: {
+      triggerUpdate: false
+    } // null or number
+  },
+  init: function init(domNode, state) {
+    var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style;
+    var isD3Selection = !!domNode && _typeof(domNode) === 'object' && !!domNode.node && typeof domNode.node === 'function';
+    var el = select(isD3Selection ? domNode.node() : domNode);
+
+    // make sure container is positioned, to provide anchor for tooltip
+    el.style('position') === 'static' && el.style('position', 'relative');
+    state.tooltipEl = el.append('div').attr('class', 'float-tooltip-kap');
+    Object.entries(style).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        k = _ref3[0],
+        v = _ref3[1];
+      return state.tooltipEl.style(k, v);
+    });
+    state.tooltipEl // start off-screen
+    .style('left', '-10000px').style('display', 'none');
+    var evSuffix = "tooltip-".concat(Math.round(Math.random() * 1e12));
+    state.mouseInside = false;
+    el.on("mousemove.".concat(evSuffix), function (ev) {
+      state.mouseInside = true;
+      var mousePos = pointer(ev);
+      var domNode = el.node();
+      var canvasWidth = domNode.offsetWidth;
+      var canvasHeight = domNode.offsetHeight;
+      var translate = [state.offsetX === null || state.offsetX === undefined
+      // auto: adjust horizontal position to not exceed canvas boundaries
+      ? "-".concat(mousePos[0] / canvasWidth * 100, "%") : typeof state.offsetX === 'number' ? "calc(-50% + ".concat(state.offsetX, "px)") : state.offsetX, state.offsetY === null || state.offsetY === undefined
+      // auto: flip to above if near bottom
+      ? canvasHeight > 130 && canvasHeight - mousePos[1] < 100 ? 'calc(-100% - 6px)' : '21px' : typeof state.offsetY === 'number' ? state.offsetY < 0 ? "calc(-100% - ".concat(Math.abs(state.offsetY), "px)") : "".concat(state.offsetY, "px") : state.offsetY];
+      state.tooltipEl.style('left', mousePos[0] + 'px').style('top', mousePos[1] + 'px').style('transform', "translate(".concat(translate.join(','), ")"));
+      state.content && state.tooltipEl.style('display', 'inline');
+    });
+    el.on("mouseover.".concat(evSuffix), function () {
+      state.mouseInside = true;
+      state.content && state.tooltipEl.style('display', 'inline');
+    });
+    el.on("mouseout.".concat(evSuffix), function () {
+      state.mouseInside = false;
+      state.tooltipEl.style('display', 'none');
+    });
+  },
+  update: function update(state) {
+    state.tooltipEl.style('display', !!state.content && state.mouseInside ? 'inline' : 'none');
+    if (!state.content) {
+      state.tooltipEl.text('');
+    } else if (state.content instanceof HTMLElement) {
+      state.tooltipEl.text(''); // empty it
+      state.tooltipEl.append(function () {
+        return state.content;
+      });
+    } else if (typeof state.content === 'string') {
+      state.tooltipEl.html(state.content);
+    } else if (isReactRenderable(state.content)) {
+      state.tooltipEl.text(''); // empty it
+      render(state.content, state.tooltipEl.node());
+    } else {
+      state.tooltipEl.style('display', 'none');
+      console.warn('Tooltip content is invalid, skipping.', state.content, state.content.toString());
+    }
+  }
+});
+
+export { index as default };

frontend/node_modules/float-tooltip/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "float-tooltip",
+  "version": "1.7.5",
+  "description": "Floating tooltip component",
+  "license": "MIT",
+  "type": "module",
+  "unpkg": "dist/float-tooltip.min.js",
+  "jsdelivr": "dist/float-tooltip.min.js",
+  "main": "dist/float-tooltip.mjs",
+  "module": "dist/float-tooltip.mjs",
+  "types": "dist/float-tooltip.d.ts",
+  "exports": {
+    "types": "./dist/float-tooltip.d.ts",
+    "umd": "./dist/float-tooltip.min.js",
+    "default": "./dist/float-tooltip.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vasturiano/float-tooltip.git"
+  },
+  "homepage": "https://github.com/vasturiano/float-tooltip",
+  "keywords": [
+    "tooltip",
+    "floating"
+  ],
+  "author": {
+    "name": "Vasco Asturiano",
+    "url": "https://github.com/vasturiano"
+  },
+  "bugs": {
+    "url": "https://github.com/vasturiano/float-tooltip/issues"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "rimraf dist && rollup -c",
+    "dev": "rollup -w -c rollup.config.dev.js",
+    "prepare": "npm run build"
+  },
+  "dependencies": {
+    "d3-selection": "2 - 3",
+    "kapsule": "^1.16",
+    "preact": "10"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@types/react": "^19.0.10",
+    "postcss": "^8.5.3",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.34.8",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "^5.7.3"
+  },
+  "engines": {
+    "node": ">=12"
+  }
+}