project-logbook 0.3.3 → 0.4.0

package/src/templates/logbook-client.js

@@ -2,27 +2,40 @@
   'use strict';
 
   /* ── 1. Real-time relative dates ──────────────────────────────────────── */
-  function relativeDate(isoString) {
-    var d = new Date(isoString);
+  /**
+   * Calculate the relative date string (today, yesterday, 2 days ago, etc)
+   * Prepend the relative component to the locally-formatted absolute date.
+   */
+  function getRelativeComponent(d) {
     var now = new Date();
     // Normalise both to midnight local time for day-diff calculation
     var dDay = new Date(d.getFullYear(), d.getMonth(), d.getDate());
     var nDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
     var diffDays = Math.round((nDay - dDay) / 86400000);
 
-    var relative;
-    if (diffDays === 0) relative = 'today';
-    else if (diffDays === 1) relative = 'yesterday';
-    else if (diffDays < 7) relative = diffDays + ' days ago';
-    else if (diffDays < 14) relative = '1 week ago';
-    else if (diffDays < 30) relative = Math.floor(diffDays / 7) + ' weeks ago';
-    else if (diffDays < 60) relative = '1 month ago';
-    else if (diffDays < 365) relative = Math.floor(diffDays / 30) + ' months ago';
-    else if (diffDays < 730) relative = '1 year ago';
-    else relative = Math.floor(diffDays / 365) + ' years ago';
-
-    var absolute = d.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
-    return relative + ', ' + absolute;
+    if (diffDays === 0) return 'today';
+    else if (diffDays === 1) return 'yesterday';
+    else if (diffDays < 7) return diffDays + ' days ago';
+    else if (diffDays < 14) return '1 week ago';
+    else if (diffDays < 30) return Math.floor(diffDays / 7) + ' weeks ago';
+    else if (diffDays < 60) return '1 month ago';
+    else if (diffDays < 365) return Math.floor(diffDays / 30) + ' months ago';
+    else if (diffDays < 730) return '1 year ago';
+    else return Math.floor(diffDays / 365) + ' years ago';
+  }
+
+  /**
+   * Format a Date object as absolute date and time in browser's local timezone.
+   * Format: "26 May 2026, 10:51"
+   */
+  function formatAbsoluteComponent(d) {
+    var day = d.getDate();
+    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    var month = months[d.getMonth()];
+    var year = d.getFullYear();
+    var hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours();
+    var minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
+    return day + ' ' + month + ' ' + year + ', ' + hours + ':' + minutes;
   }
 
   function updateRelativeDates() {
@@ -30,7 +43,20 @@
     for (var i = 0; i < els.length; i++) {
       var el = els[i];
       var iso = el.getAttribute('data-date');
-      if (iso) el.textContent = relativeDate(iso);
+      if (iso) {
+        var d = new Date(iso);
+        if (!isNaN(d.getTime())) {
+          // Format the absolute date in the user's browser/local timezone
+          var absolute = formatAbsoluteComponent(d);
+          // Prepend the relative component (e.g., "today")
+          var relative = getRelativeComponent(d);
+          if (relative) {
+            el.textContent = relative + ', ' + absolute;
+          } else {
+            el.textContent = absolute;
+          }
+        }
+      }
     }
   }
 

package/src/templates/steer.txt

@@ -8,11 +8,27 @@ Phase 1: Understand
 2. Review `AGENTS.md` and `CONTRIBUTING.md` if you need architectural or workflow context.
 
 Phase 2: Execute & Trace
-1. Use `log.md` as a live technical scratchpad.
-2. Log your work in real-time using the `logbook log "<message>"` command. Record every major decision, error, and pivot. Do not reconstruct this at the end.
-   Example: logbook log "Investigated root cause — found issue in src/lib/config.ts"
-   One message per call. For multiple entries, call the command once per message.
-3. Stick to the active entry; never modify past entries in the logbook folder.
+
+**CRITICAL: Real-Time Logging**
+You MUST log your work continuously using `logbook log "<message>"`. This is not optional.
+
+1. Use `log.md` as your live technical scratchpad.
+2. After EVERY significant step, run: `logbook log "<what you just did>"`
+   - Investigated a file? Log it.
+   - Found an error? Log it.
+   - Made a design decision? Log it.
+   - Fixed a bug? Log it.
+   - Ran tests? Log the result.
+   
+   Examples:
+   - `logbook log "Investigated src/lib/config.ts - found missing validation"`
+   - `logbook log "Created new RSS module with generateRssFeed() function"`
+   - `logbook log "Test failed: TypeScript error on line 42 - fixed type assertion"`
+   - `logbook log "All 127 tests pass, pre-commit suite successful"`
+
+3. **One message per command call.** For multiple entries, call the command multiple times.
+4. Do NOT reconstruct the log at the end. If the log is empty when you finish, you did it wrong.
+5. Stick to the active entry; never modify past entries in the logbook folder.
 
 Phase 3: Synthesize
 1. When implementation is finished, write the narrative in `index.md`.

package/src/templates/styles.css

@@ -33,6 +33,11 @@ header h1 {
 header h1 a {
   text-decoration: none !important;
   color: black !important;
+  transition: color 0.2s;
+}
+
+header h1 a:hover {
+  color: var(--primary) !important;
 }
 
 .tagline {
@@ -691,3 +696,119 @@ article img[src$='.webp'],
 article img[src$='.svg'] {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
+
+/* Technical Log Timeline */
+#log .timeline {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+
+#log .timeline::before {
+  content: '';
+  position: absolute;
+  left: 8px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--border);
+}
+
+#log .timeline-entry {
+  position: relative;
+  padding-left: 2rem;
+  margin-bottom: 0.75rem;
+  min-height: 1.5rem;
+  display: grid;
+  grid-template-columns: 55px 1fr;
+  gap: 0.5rem;
+}
+
+#log .timeline-entry.no-time .timeline-message {
+  grid-column: 2;
+}
+
+#log .timeline-entry.has-time::before {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--primary);
+  border: 2px solid var(--bg);
+  z-index: 1;
+}
+
+#log .timeline-entry.no-time::before {
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: 0.6rem;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  opacity: 0.6;
+}
+
+#log .timeline-time {
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--primary);
+  display: inline-block;
+}
+
+#log .timeline-message {
+  font-size: 0.9375rem;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+#log .timeline-entry.no-time .timeline-message {
+  color: var(--text);
+  opacity: 0.85;
+}
+
+#log .timeline-gap {
+  position: relative;
+  padding-left: 2rem;
+  margin: 1.5rem 0;
+  min-height: 1rem;
+}
+
+#log .timeline-gap::before {
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: 0.4rem;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  opacity: 0.5;
+}
+
+#log .gap-indicator {
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  font-style: italic;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+#log .log-fallback {
+  font-size: 0.9375rem;
+  color: var(--text);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  background: var(--primary-soft);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+  font-size: 0.8125rem;
+}