project-logbook 0.3.3 → 0.4.0

package/dist/lib/theme.d.ts

@@ -0,0 +1,37 @@
+/** Success message styling (green) */
+export declare const success: import("chalk").ChalkInstance;
+/** Error message styling (red) */
+export declare const error: import("chalk").ChalkInstance;
+/** Warning message styling (yellow) */
+export declare const warning: import("chalk").ChalkInstance;
+/** Info/secondary message styling (blue) */
+export declare const info: import("chalk").ChalkInstance;
+/** Neutral/disabled styling (gray) */
+export declare const neutral: import("chalk").ChalkInstance;
+/** Highlight/emphasis styling (cyan) */
+export declare const highlight: import("chalk").ChalkInstance;
+/** Bold text */
+export declare const bold: import("chalk").ChalkInstance;
+/**
+ * Format a section header (e.g., "Checking project integrity...").
+ * Uses blue color for visual separation.
+ */
+export declare function header(text: string): string;
+/**
+ * Format an error message with context.
+ * @param prefix - The category/command name
+ * @param message - The error message
+ */
+export declare function errorMessage(prefix: string, message: string): string;
+/**
+ * Format a warning message with context.
+ * @param prefix - The category/command name
+ * @param message - The warning message
+ */
+export declare function warningMessage(prefix: string, message: string): string;
+/**
+ * Format a success message with context.
+ * @param prefix - The category/command name
+ * @param message - The success message
+ */
+export declare function successMessage(prefix: string, message: string): string;

package/dist/lib/theme.js

@@ -0,0 +1,50 @@
+/**
+ * Centralized styling/theme for CLI output.
+ * Ensures consistent colors and visual hierarchy across all commands.
+ */
+import chalk from 'chalk';
+/** Success message styling (green) */
+export const success = chalk.green;
+/** Error message styling (red) */
+export const error = chalk.red;
+/** Warning message styling (yellow) */
+export const warning = chalk.yellow;
+/** Info/secondary message styling (blue) */
+export const info = chalk.blue;
+/** Neutral/disabled styling (gray) */
+export const neutral = chalk.gray;
+/** Highlight/emphasis styling (cyan) */
+export const highlight = chalk.cyan;
+/** Bold text */
+export const bold = chalk.bold;
+/**
+ * Format a section header (e.g., "Checking project integrity...").
+ * Uses blue color for visual separation.
+ */
+export function header(text) {
+    return info(text);
+}
+/**
+ * Format an error message with context.
+ * @param prefix - The category/command name
+ * @param message - The error message
+ */
+export function errorMessage(prefix, message) {
+    return `${error(prefix)}: ${message}`;
+}
+/**
+ * Format a warning message with context.
+ * @param prefix - The category/command name
+ * @param message - The warning message
+ */
+export function warningMessage(prefix, message) {
+    return `${warning(prefix)}: ${message}`;
+}
+/**
+ * Format a success message with context.
+ * @param prefix - The category/command name
+ * @param message - The success message
+ */
+export function successMessage(prefix, message) {
+    return `${success(prefix)}: ${message}`;
+}

package/dist/lib/url-helpers.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Check if a URL/path is external (has an absolute URI scheme).
+ * @param url - The URL or path to check
+ * @returns true if the URL has an absolute URI scheme (http://, https://, ftp://, etc.)
+ */
+export declare function isExternalUrl(url: string): boolean;
+/**
+ * Check if a value is an external URL or an anchor link.
+ * Used to identify URLs that should not be processed (rewritten, collected, etc.)
+ * @param href - The href/src value to check
+ * @returns true if the value is external or an anchor
+ */
+export declare function isExternalUrlOrAnchor(href: string): boolean;

package/dist/lib/url-helpers.js

@@ -0,0 +1,27 @@
+/**
+ * Regex pattern to detect absolute URLs with URI schemes.
+ * Matches URIs like: http://, https://, ftp://, data:, etc.
+ * Pattern breakdown:
+ *   ^[a-z]        - Starts with a letter (lowercase)
+ *   [a-z\d+\-.]*: - Followed by alphanumeric, +, -, or . characters, ending with :
+ * Example matches: http://, https://, ftp://, mailto:, data:
+ * Used to distinguish external URLs from relative paths.
+ */
+const EXTERNAL_URL_SCHEME_REGEX = /^[a-z][a-z\d+\-.]*:/i;
+/**
+ * Check if a URL/path is external (has an absolute URI scheme).
+ * @param url - The URL or path to check
+ * @returns true if the URL has an absolute URI scheme (http://, https://, ftp://, etc.)
+ */
+export function isExternalUrl(url) {
+    return EXTERNAL_URL_SCHEME_REGEX.test(url);
+}
+/**
+ * Check if a value is an external URL or an anchor link.
+ * Used to identify URLs that should not be processed (rewritten, collected, etc.)
+ * @param href - The href/src value to check
+ * @returns true if the value is external or an anchor
+ */
+export function isExternalUrlOrAnchor(href) {
+    return EXTERNAL_URL_SCHEME_REGEX.test(href) || href.startsWith('#');
+}

package/dist/linters/diff-to-narrative.d.ts

@@ -0,0 +1,6 @@
+import { Linter } from '../lib/lint-types.js';
+export declare function stripFrontmatter(content: string): string;
+export declare function stripMarkdown(text: string): string;
+export declare function getWordCount(content: string): number;
+declare const linter: Linter;
+export default linter;

package/dist/linters/diff-to-narrative.js

@@ -0,0 +1,114 @@
+import { getActiveEntry } from '../lib/session.js';
+import { getChangedLOC } from '../lib/git-helpers.js';
+import fs from 'fs-extra';
+import { join } from 'node:path';
+// Thresholds & Limits Configuration
+const TRIVIAL_LOC_MAX = 20;
+const STANDARD_LOC_MAX = 150;
+const TRIVIAL_WORDS = { min: 30, max: 150 };
+const STANDARD_WORDS = { min: 50, max: 300 };
+const LARGE_WORDS = { min: 100, max: 400 };
+export function stripFrontmatter(content) {
+    const lines = content.split(/\r?\n/);
+    if (lines[0]?.trim() === '---') {
+        const endIdx = lines.indexOf('---', 1);
+        if (endIdx !== -1) {
+            return lines.slice(endIdx + 1).join('\n');
+        }
+    }
+    return content;
+}
+export function stripMarkdown(text) {
+    return text
+        .replace(/<[^>]*>/g, '') // HTML tags
+        .replace(/!\[([^\]]*)]\([^)]*\)/g, '$1') // images
+        .replace(/\[([^\]]*)]\([^)]*\)/g, '$1') // links
+        .replace(/```[\s\S]*?```/g, '') // code blocks
+        .replace(/`([^`]+)`/g, '$1') // inline code
+        .replace(/(\*\*|__)(.*?)\1/g, '$2') // bold
+        .replace(/(\*|_)(.*?)\1/g, '$2') // italic
+        .replace(/^\s*>\s+/gm, '') // blockquotes
+        .replace(/^\s*#+\s+/gm, '') // headings
+        .replace(/^\s*[-*+]\s+/gm, '') // list bullets
+        .replace(/^\s*\d+\.\s+/gm, ''); // ordered lists
+}
+export function getWordCount(content) {
+    const clean = stripMarkdown(stripFrontmatter(content));
+    return clean.split(/\s+/).filter((w) => w.trim().length > 0).length;
+}
+const linter = {
+    name: 'diff-to-narrative',
+    description: 'Checks word count of active index.md against total LOC changed',
+    async check(context) {
+        // Only target project-level checks
+        if (context.entryName)
+            return [];
+        const active = await getActiveEntry();
+        if (!active || active.source !== 'lockfile') {
+            return [];
+        }
+        const logbookDir = context.config.logbookDir;
+        const { total: totalLOC } = await getChangedLOC(logbookDir);
+        // If there are no active changes and the tree is completely clean, skip gracefully
+        if (totalLOC === 0) {
+            return [];
+        }
+        const indexPath = join(process.cwd(), logbookDir, active.slug, 'index.md');
+        if (!(await fs.pathExists(indexPath))) {
+            return [];
+        }
+        const content = await fs.readFile(indexPath, 'utf-8');
+        const wordCount = getWordCount(content);
+        const issues = [];
+        if (totalLOC < TRIVIAL_LOC_MAX) {
+            if (wordCount < TRIVIAL_WORDS.min) {
+                issues.push({
+                    level: 'warning',
+                    category: 'story-ratio',
+                    message: `Code change is trivial (${totalLOC} LOC), but index.md has only ${wordCount} words (minimum is ${TRIVIAL_WORDS.min}). Please expand the narrative.`,
+                });
+            }
+            else if (wordCount > TRIVIAL_WORDS.max) {
+                issues.push({
+                    level: 'warning',
+                    category: 'story-ratio',
+                    message: `Warning: Code change is trivial, but index.md exceeds ${TRIVIAL_WORDS.max} words. Please summarize.`,
+                });
+            }
+        }
+        else if (totalLOC <= STANDARD_LOC_MAX) {
+            if (wordCount < STANDARD_WORDS.min) {
+                issues.push({
+                    level: 'warning',
+                    category: 'story-ratio',
+                    message: `Code change is standard (${totalLOC} LOC), but index.md has only ${wordCount} words (minimum is ${STANDARD_WORDS.min}). Please expand the narrative.`,
+                });
+            }
+            else if (wordCount > STANDARD_WORDS.max) {
+                issues.push({
+                    level: 'warning',
+                    category: 'story-ratio',
+                    message: `Warning: Code change is standard (${totalLOC} LOC), but index.md exceeds ${STANDARD_WORDS.max} words. Please summarize.`,
+                });
+            }
+        }
+        else {
+            if (wordCount < LARGE_WORDS.min) {
+                issues.push({
+                    level: 'warning',
+                    category: 'story-ratio',
+                    message: `Code change is large (${totalLOC} LOC), but index.md has only ${wordCount} words (minimum is ${LARGE_WORDS.min}). Please expand the narrative.`,
+                });
+            }
+            else if (wordCount > LARGE_WORDS.max) {
+                issues.push({
+                    level: 'warning',
+                    category: 'story-ratio',
+                    message: `Warning: Story exceeds ${LARGE_WORDS.max} words. Consider summarizing and linking to a Wiki/ADR.`,
+                });
+            }
+        }
+        return issues;
+    },
+};
+export default linter;

package/dist/linters/index.js

@@ -1,3 +1,4 @@
+import diffToNarrative from './diff-to-narrative.js';
 import frontmatter from './frontmatter.js';
 import jiraPrefix from './jira-prefix.js';
 import links from './links.js';
@@ -5,8 +6,10 @@ import lockfile from './lockfile.js';
 import placeholders from './placeholders.js';
 import projectIntegrity from './project-integrity.js';
 import readability from './readability.js';
+import technicalLog from './technical-log.js';
 import workspaces from './workspaces.js';
 export const linters = [
+    diffToNarrative,
     frontmatter,
     jiraPrefix,
     links,
@@ -14,5 +17,6 @@ export const linters = [
     placeholders,
     projectIntegrity,
     readability,
+    technicalLog,
     workspaces,
 ];

package/dist/linters/technical-log.d.ts

@@ -0,0 +1,7 @@
+import type { Linter } from '../lib/lint-types.js';
+/**
+ * Linter that checks for adequate technical logging.
+ * Ensures log.md has more than just the initial "Started investigation" entry.
+ */
+declare const technicalLog: Linter;
+export default technicalLog;

package/dist/linters/technical-log.js

@@ -0,0 +1,72 @@
+import fs from 'fs-extra';
+import { join } from 'node:path';
+/**
+ * Linter that checks for adequate technical logging.
+ * Ensures log.md has more than just the initial "Started investigation" entry.
+ */
+const technicalLog = {
+    name: 'technical-log',
+    description: 'Checks for adequate technical logging in log.md',
+    async check(context) {
+        const issues = [];
+        // Only check the active entry (the one with the lockfile)
+        // Old entries cannot be updated, so we don't warn about them
+        if (!context.entryName || !context.entryPath) {
+            return issues;
+        }
+        // Check if this is the active entry by verifying lockfile exists
+        const lockfilePath = join(process.cwd(), '.logbook-active');
+        if (!(await fs.pathExists(lockfilePath))) {
+            // No active entry, skip this linter
+            return issues;
+        }
+        const lockfileContent = await fs.readFile(lockfilePath, 'utf8');
+        const lockfileData = JSON.parse(lockfileContent);
+        const activeEntrySlug = lockfileData.slug;
+        // Only check if this entry matches the active entry slug
+        if (context.entryName !== activeEntrySlug) {
+            return issues;
+        }
+        const logPath = join(context.entryPath, 'log.md');
+        if (!(await fs.pathExists(logPath))) {
+            issues.push({
+                category: 'TECHNICAL_LOG',
+                level: 'warning',
+                message: 'Missing log.md file. Create one to document your technical decisions.',
+            });
+            return issues;
+        }
+        const logContent = await fs.readFile(logPath, 'utf8');
+        // Extract all protocol entries (lines starting with "- " under ## Protocol)
+        const protocolSection = logContent.split('## Protocol')[1];
+        if (!protocolSection) {
+            // No Protocol section found, might be malformed
+            issues.push({
+                category: 'TECHNICAL_LOG',
+                level: 'warning',
+                message: 'log.md missing "## Protocol" section. Add one to structure your log entries.',
+            });
+            return issues;
+        }
+        const lines = protocolSection.split('\n').filter((line) => line.trim().startsWith('- '));
+        const entryCount = lines.length;
+        // Check if there's only the initial "Started investigation" entry
+        if (entryCount <= 1) {
+            issues.push({
+                category: 'TECHNICAL_LOG',
+                level: 'warning',
+                message: 'log.md only contains the initial "Started investigation" entry. Log your work in real-time using `logbook log "<message>"` after each significant step.',
+            });
+        }
+        else if (entryCount < 5) {
+            // Less than 5 entries might indicate insufficient logging
+            issues.push({
+                category: 'TECHNICAL_LOG',
+                level: 'warning',
+                message: `log.md has only ${entryCount} entries. Consider adding more detail about your implementation process, decisions, and challenges.`,
+            });
+        }
+        return issues;
+    },
+};
+export default technicalLog;

package/dist/templates/CONTRIBUTING.md

@@ -47,12 +47,21 @@ Only update the currently active logbook entry. Do not edit other existing entri
 When you finish writing `index.md`, **remove the boilerplate link line** that the template inserts:
 
 ### 3. Quality Assurance
-Before submitting your work, you MUST release the active entry and run the linter:
+Before finalizing your work, you should run the linter to verify there are no errors:
 ```bash
-logbook release
 logbook lint
 ```
-`logbook release` removes the `.logbook-active` lockfile. The linter will fail if the lockfile is still present, enforcing that no entry is left dangling in a committed state.
+
+You can also check the overall status of the logbook, configuration settings, and statistics (total tasks, done, and drafts) using:
+```bash
+logbook status
+```
+
+The linter will warn you if the lockfile `.logbook-active` is still present, which is expected during active development.
+
+Once the work is ready:
+- **If you are an AI agent**: Do not release the entry. Hand back to the prompter, who will review and run `logbook release`.
+- **If you are a human developer**: Run `logbook release` to remove the lockfile and finalize the entry.
 
 The linter enforces rules to be followed.
 

package/dist/templates/index.md

@@ -3,24 +3,28 @@
 ticket: {{id}}
 # The title should be a human-readable description of the work
 title: {{title}}
-prompter: [PROMPTER]
-harness: [HARNESS]
-llm: [LLM]
-summary: [WRITE_SUMMARY_HERE]
+prompter: "[PROMPTER]"
+harness: "[HARNESS]"
+llm: "[LLM]"
+summary: "[WRITE_SUMMARY_HERE]"
 # Tags for categorizing the change (must be from allowed list in .project-logbook)
 tags: []
 # Workspace(s) this change affects (must match package.json workspaces; leave empty for single-project)
 # Example: workspaces: ["frontend", "shared"]
 workspaces: []
 # Set automatically by `logbook start`
-dateStart: [DATE_START]
+dateStart: "[DATE_START]"
 # Set automatically by `logbook release`
-dateEnd: [DATE_END]
+dateEnd: "[DATE_END]"
 ---
 
 ## Summary
 TODO: Write a polished, highly readable ticket summary that reads like an engaging technical narrative (similar to a well-written dev blog post).
 
+### Before You Start:
+- **Check `log.md`**: Review your technical log for all the decisions, errors, and pivots you recorded during implementation.
+- **Reference the log**: Use your real-time log entries as source material for the narrative — don't try to reconstruct from memory.
+
 ### Formatting & Style Rules:
 - **Maintain the narrative tone:** TODO: Keep the storytelling flair (e.g., describing how problems accumulated or how gaps surfaced), but stay strictly factual based on the provided changes.
 - **Add thematic headings:** TODO: Break the narrative down into logical chapters using Markdown headings (e.g., ### The Friction Points, ### The Fix, ### Closing the Gap).

package/dist/templates/log.md

@@ -1,4 +1,9 @@
 # Technical Log: {{id}}-{{slug}}
 
+> **REMINDER**: Log your work in real-time using `logbook log "<message>"`. Don't wait until the end!
+> 
+> Log after every significant step: investigation, errors, decisions, code changes, test runs, etc.
+>
+
 ## Protocol
 - {{fullIso}}: Started investigation.

package/dist/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/dist/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/dist/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;
+}