devcoach 2.3.1 → 2.4.0-next.575.g9c67058

package/assets/SKILL.md

@@ -199,8 +199,9 @@ checkpoints, never touch the notebook.
 - "Close / stop the dashboard" → `stop_ui` (same `port`) — it stops whichever dashboard listens
   there, one you opened or one started from a terminal; if the user runs `devcoach ui` in their own
   terminal, Ctrl+C there stops it just as gracefully (in-flight requests finish)
-- "Lessons shared with me" → `get_lessons({imported: true})`
-- "Show me the lesson X shared" → `get_lessons({imported: true, search})` → the card,
+- "Lessons shared with me" → `get_lessons({imported: true})`; "what did Ada send me" →
+  `get_lessons({shared_by: "Ada"})` (exact sender name)
+- "Show me the lesson X shared" → `get_lessons({shared_by: X, search})` → the card,
   without `log_lesson` or the feedback line (see `references/sharing.md`)
 
 ## Operating notes

package/assets/references/sharing.md

@@ -54,7 +54,8 @@ just starred a lesson                            →  The one offer (below)
 ## Show a shared lesson
 
 "Show me what Ada shared", "read me the lesson I imported", "the lesson about X someone sent":
-`get_lessons({imported: true, search: …})` (ask if 2+ match), then render it as a normal card —
+`get_lessons({shared_by: "Ada"})` when a sender is named (exact name; `search` also matches the
+sender), else `get_lessons({imported: true, search: …})` — ask if 2+ match — then render it as a normal card —
 both bands, the title line with `Category · Level`, the body, the 💡 tip — **without**
 `log_lesson` and **without** the "Did that land?" line. It is already in their log, taught by
 someone else; it costs nothing on the rate limit. Record feedback only if they volunteer it

package/assets/static/relative-time.js

@@ -1,26 +1,80 @@
-/* Shared relative-time formatter used by lessons.html and lesson_detail.html */
+/* Shared relative-time formatter used by the lessons list and the lesson page. Every [data-ts]
+   gets a relative label; when its cell is too narrow for the long form ("17 minutes ago") it
+   switches to the compact one ("17m"), and it is re-evaluated after column drags and resizes. */
 (function () {
-  var rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+  /* "yesterday" / "today" are only right at day granularity; for weeks the number is always
+     spelled out — "last week" for something 13 days old is a lie — and from two months on the
+     relative label stops being useful at all: the date is printed instead ("July 27" within the
+     current year, "July 27, 2025" for earlier years). */
+  var rtfAuto = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+  var rtfExact = new Intl.RelativeTimeFormat('en', { numeric: 'always' });
+  var COMPACT_BELOW = 120; // cell width (px) under which the compact form is used
+
+  function parts(iso) {
+    var date = new Date(iso);
+    var now = new Date();
+    var diffMs = now - date;
+    var mins = Math.floor(diffMs / 60000);
+    var days = Math.floor(diffMs / 86400000);
+    /* Calendar months between the two dates by label: a July lesson seen in September is two
+       months away, whatever the day of month — old enough to print the date. */
+    var months = (now.getFullYear() - date.getFullYear()) * 12 + (now.getMonth() - date.getMonth());
+    return { diffMs: diffMs, mins: mins, days: days, months: Math.max(0, months) };
+  }
 
   function relativeTime(iso) {
+    var p = parts(iso);
+    if (p.diffMs < 0 || p.mins < 1) return 'just now';
+    if (p.mins < 60)    return rtfAuto.format(-p.mins, 'minute');
+    if (p.days === 0)   return 'today';
+    if (p.days === 1)   return 'yesterday';
+    if (p.days < 7)     return rtfAuto.format(-p.days, 'day');
+    if (p.months < 1)   return rtfExact.format(-Math.floor(p.days / 7), 'week');
+    if (p.months < 2)   return rtfExact.format(-p.months, 'month');
+    return absoluteDate(iso, 'long');
+  }
+
+  var monthDayLong = new Intl.DateTimeFormat('en', { month: 'long', day: 'numeric' });
+  var monthDayShort = new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric' });
+  var monthDayYear = new Intl.DateTimeFormat('en', { month: 'long', day: 'numeric', year: 'numeric' });
+  var monthYear = new Intl.DateTimeFormat('en', { month: 'short', year: 'numeric' });
+
+  /* Same year → "July 27" (compact: "Jul 27"); an earlier year → "July 27, 2025" (compact:
+     "Jul 2025" — at that distance the year matters more than the day). */
+  function absoluteDate(iso, style) {
     var date = new Date(iso);
-    var diffMs = Date.now() - date;
-    if (diffMs < 0)       return 'just now';
-    var diffMins = Math.floor(diffMs / 60000);
-    if (diffMins < 1)     return 'just now';
-    if (diffMins < 60)    return rtf.format(-diffMins, 'minute');
-    var diffDays = Math.floor(diffMs / 86400000);
-    if (diffDays === 0)   return 'today';
-    if (diffDays === 1)   return 'yesterday';
-    if (diffDays < 7)     return rtf.format(-diffDays, 'day');
-    if (diffDays < 30)    return rtf.format(-Math.floor(diffDays / 7), 'week');
-    if (diffDays < 365)   return rtf.format(-Math.floor(diffDays / 30), 'month');
-    return rtf.format(-Math.floor(diffDays / 365), 'year');
+    var sameYear = date.getFullYear() === new Date().getFullYear();
+    if (style === 'long') return (sameYear ? monthDayLong : monthDayYear).format(date);
+    return (sameYear ? monthDayShort : monthYear).format(date);
+  }
+
+  var weekdayShort = new Intl.DateTimeFormat('en', { weekday: 'short' });
+
+  function weekdayDay(date) {
+    return weekdayShort.format(date) + ' ' + date.getDate();
+  }
+
+  /* Compact: "17m" · "today" · "Mon 2" within the last week · "Sep 10" from a week on
+     (the full date for earlier years). */
+  function compactTime(iso) {
+    var p = parts(iso);
+    if (p.diffMs < 0 || p.mins < 1) return 'now';
+    if (p.mins < 60)    return p.mins + 'm';
+    if (p.days === 0)   return 'today';
+    if (p.days < 7)     return weekdayDay(new Date(iso));
+    return absoluteDate(iso, 'short');
+  }
+
+  function isNarrow(el) {
+    var cell = el.closest('td, th');
+    if (!cell) return false;
+    var w = cell.getBoundingClientRect().width;
+    return w > 0 && w < COMPACT_BELOW;
   }
 
   function applyRelativeTimes(root) {
     root.querySelectorAll('[data-ts]').forEach(function (el) {
-      el.textContent = relativeTime(el.dataset.ts);
+      el.textContent = isNarrow(el) ? compactTime(el.dataset.ts) : relativeTime(el.dataset.ts);
     });
   }
 
@@ -29,4 +83,13 @@
   document.body.addEventListener('htmx:afterSettle', function () {
     applyRelativeTimes(document);
   });
+  /* Column drags / resets (table-resize.js) and window resizes change the available width. */
+  document.addEventListener('dc:columns-resized', function () {
+    applyRelativeTimes(document);
+  });
+  var timer;
+  globalThis.addEventListener('resize', function () {
+    clearTimeout(timer);
+    timer = setTimeout(function () { applyRelativeTimes(document); }, 150);
+  });
 })();

package/assets/static/style.css

@@ -28,6 +28,9 @@
   --md-table-even-bg: #f9fafb;
   --md-strong: #111827;
   --md-em: #7c3aed;
+
+  --check-border: #cbd5e1;
+  --check-bg: #ffffff;
 }
 
 .dark {
@@ -56,6 +59,9 @@
   --md-table-even-bg: #111827;
   --md-strong: #f3f4f6;
   --md-em: #c4b5fd;
+
+  --check-border: #4b5563;
+  --check-bg: #111827;
 }
 
 /* ── Scrollbar ──────────────────────────────────────────────────────────── */
@@ -162,3 +168,67 @@
   color: var(--md-table-td-color);
 }
 .markdown-body tr:nth-child(even) td { background: var(--md-table-even-bg); }
+
+/* ── Lessons table: Select-mode checkboxes + drag-to-resize handles ─────────── */
+
+.dc-check {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  border: 1.5px solid var(--check-border);
+  background: var(--check-bg);
+  vertical-align: middle;
+  cursor: pointer;
+  transition: background-color 0.12s, border-color 0.12s;
+}
+.dc-check:checked {
+  background-color: #4f46e5;
+  border-color: #4f46e5;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7'/%3E%3C/svg%3E");
+  background-size: 72%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.dc-check:focus-visible {
+  outline: 2px solid #6366f1;
+  outline-offset: 2px;
+}
+
+/* The hit area is the last 10px of the header (inside its padding, so it never covers the label);
+   what you see is a 2px line drawn exactly on the column boundary. */
+.dc-resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 1;
+}
+.dc-resize-handle::after {
+  content: "";
+  position: absolute;
+  top: 18%;
+  bottom: 18%;
+  right: 0;
+  width: 2px;
+  border-radius: 1px;
+  background-color: transparent;
+  transition: background-color 0.12s;
+}
+.dc-resize-handle:hover::after,
+.dc-resizing .dc-resize-handle:active::after {
+  background-color: rgba(99, 102, 241, 0.85);
+}
+.dc-resizing {
+  user-select: none;
+  cursor: col-resize;
+}
+/* In Select mode every click on a row means "toggle it": links and forms inside stop reacting. */
+.dc-selecting tbody a,
+.dc-selecting tbody form,
+.dc-selecting tbody button {
+  pointer-events: none;
+}

package/assets/static/table-resize.js

@@ -0,0 +1,178 @@
+// Drag-to-resize table columns (the lessons table). Widths live on the <col> elements and are
+// remembered per column in localStorage; double-click a handle to reset the two columns beside it,
+// or call window.resetLessonColumns() (the ⋯ menu) to reset them all. Desktop widths only — on
+// narrow screens columns are already hidden and a drag would fight scrolling.
+//
+// A drag moves the boundary between two neighbouring columns: one grows exactly as much as the
+// other shrinks, so the table never changes width. One column (`<col data-flex>`, the title) never
+// gets an explicit width: it absorbs whatever its neighbours give or take, clamped to MIN_FLEX so
+// it stays readable. Stored widths that no longer fit (a narrower window) are dropped on load.
+(function () {
+  var MIN = 48;
+  var MIN_FLEX = 220;
+  var STORAGE = "lessons-col-widths";
+  if (!globalThis.matchMedia || !globalThis.matchMedia("(min-width: 1024px)").matches) {
+    globalThis.resetLessonColumns = function () {};
+    return;
+  }
+
+  function load() {
+    try {
+      return JSON.parse(localStorage.getItem(STORAGE) || "{}") || {};
+    } catch {
+      return {};
+    }
+  }
+  function save(widths) {
+    try {
+      localStorage.setItem(STORAGE, JSON.stringify(widths));
+    } catch {
+      /* storage unavailable: widths last for this page only */
+    }
+  }
+  function clamp(v, lo, hi) {
+    return Math.min(hi, Math.max(lo, v));
+  }
+  // Each column declares the narrowest width its content survives (`data-min`); the flex column
+  // falls back to MIN_FLEX, the others to MIN.
+  function minOf(col) {
+    var m = Number(col.dataset.min);
+    if (m > 0) return m;
+    return col.hasAttribute("data-flex") ? MIN_FLEX : MIN;
+  }
+  function setWidth(col, px) {
+    col.style.width = Math.round(px) + "px";
+  }
+  // The defaults are inline widths on the <col>s: remember them so resets restore, not wipe.
+  function restore(col) {
+    col.style.width = col.dataset.defaultWidth || "";
+  }
+  // Let listeners (relative-time.js) react to the new widths.
+  function announce() {
+    document.dispatchEvent(new CustomEvent("dc:columns-resized"));
+  }
+
+  var tables = document.querySelectorAll("table[data-resizable]");
+  tables.forEach(function (table) {
+    var cols = Array.prototype.slice.call(table.querySelectorAll("colgroup > col"));
+    var ths = Array.prototype.slice.call(table.querySelectorAll("thead th"));
+    if (cols.length !== ths.length) return;
+    var widths = load();
+    cols.forEach(function (col) {
+      col.dataset.defaultWidth = col.style.width || "";
+    });
+    var flexIndex = cols.findIndex(function (col) {
+      return col.hasAttribute("data-flex");
+    });
+    var flexTh = flexIndex >= 0 ? ths[flexIndex] : null;
+    function flexWidth() {
+      return flexTh ? flexTh.getBoundingClientRect().width : Infinity;
+    }
+    function apply() {
+      cols.forEach(function (col) {
+        var px = widths[col.dataset.col];
+        if (typeof px === "number" && px >= minOf(col)) col.style.width = px + "px";
+        else restore(col);
+      });
+      if (flexWidth() < MIN_FLEX) {
+        // The remembered layout does not fit this window: fall back to the defaults.
+        widths = {};
+        cols.forEach(restore);
+      }
+      announce();
+    }
+    apply();
+    var resizeTimer;
+    globalThis.addEventListener("resize", function () {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(apply, 150);
+    });
+
+    function nextVisible(i) {
+      for (var j = i + 1; j < ths.length; j++) {
+        if (ths[j].getBoundingClientRect().width > 0) return j;
+      }
+      return -1;
+    }
+
+    ths.forEach(function (th, i) {
+      // The star column stays fixed, and the share column (last) is never a drag partner.
+      if (i === 0 || i >= ths.length - 2) return;
+      var handle = document.createElement("span");
+      handle.className = "dc-resize-handle";
+      handle.setAttribute("aria-hidden", "true");
+      th.appendChild(handle);
+
+      handle.addEventListener("click", function (e) {
+        e.stopPropagation();
+      });
+      handle.addEventListener("dblclick", function (e) {
+        e.stopPropagation();
+        var j = nextVisible(i);
+        [cols[i], j >= 0 ? cols[j] : null].forEach(function (col) {
+          if (!col || col.hasAttribute("data-flex")) return;
+          restore(col);
+          delete widths[col.dataset.col];
+        });
+        save(widths);
+        announce();
+      });
+      handle.addEventListener("pointerdown", function (e) {
+        if (e.button !== 0) return;
+        var j = nextVisible(i);
+        if (j < 0) return;
+        e.preventDefault();
+        e.stopPropagation();
+        var left = cols[i];
+        var right = cols[j];
+        var leftFlex = left.hasAttribute("data-flex");
+        var rightFlex = right.hasAttribute("data-flex");
+        var startX = e.clientX;
+        var startL = th.getBoundingClientRect().width;
+        var startR = ths[j].getBoundingClientRect().width;
+        var total = startL + startR;
+        var minL = minOf(left);
+        var minR = minOf(right);
+        if (total < minL + minR) return; // nothing to give either way
+        handle.setPointerCapture(e.pointerId);
+        table.classList.add("dc-resizing");
+        function move(ev) {
+          var dx = ev.clientX - startX;
+          if (leftFlex) {
+            setWidth(right, clamp(startR - dx, minR, total - minL));
+          } else if (rightFlex) {
+            setWidth(left, clamp(startL + dx, minL, total - minR));
+          } else {
+            var l = clamp(startL + dx, minL, total - minR);
+            setWidth(left, l);
+            setWidth(right, total - l);
+          }
+          announce();
+        }
+        function up() {
+          handle.removeEventListener("pointermove", move);
+          handle.removeEventListener("pointerup", up);
+          handle.removeEventListener("pointercancel", up);
+          table.classList.remove("dc-resizing");
+          if (!leftFlex) widths[left.dataset.col] = Math.round(th.getBoundingClientRect().width);
+          if (!rightFlex) widths[right.dataset.col] = Math.round(ths[j].getBoundingClientRect().width);
+          save(widths);
+          announce();
+        }
+        handle.addEventListener("pointermove", move);
+        handle.addEventListener("pointerup", up);
+        handle.addEventListener("pointercancel", up);
+      });
+    });
+  });
+
+  globalThis.resetLessonColumns = function () {
+    try {
+      localStorage.removeItem(STORAGE);
+    } catch {
+      /* ignore */
+    }
+    document.querySelectorAll("table[data-resizable] colgroup > col").forEach(restore);
+    announce();
+  };
+})();