feat(system-log): add app presets and example helper for service timelines

Author: jamesbrink

README.md

@@ -32,6 +32,12 @@ nix run . -- --multi-dir ~/Projects/utensils --template compare-panel --sync-tim
 
 # Render system logs (journalctl -> timeline)
 nix run . -- --system-log journal --system-log-since "24 hours ago" --template tokyo-night --legend all -o system-journal.mp4
+
+# Service-focused system timeline (recommended preset)
+nix run . -- --system-log journal --system-log-since "24 hours ago" --system-log-limit 5000 --template tokyo-night --legend actions --title "System Services" -o system-services.mp4
+
+# Same preset via helper script
+./scripts/example-system-services ./out/examples/system-services-example.mp4
 ```
 
 ### Nix build targets
@@ -88,6 +94,7 @@ The web interface uses the same urandom-style visual language (zinc dark base, J
 Web UI extras:
 - defaults to **single-repo** mode for fast one-off renders
 - includes **System Log** mode (`journal`, `kernel`, `auth`) for machine activity timelines
+- System Log mode auto-applies a useful preset (`tokyo-night` + `legend=actions` + title `System Services`)
 - GitHub-like repo search (`owner/repo` picker)
 - selected GitHub repos are cloned/updated locally under `/tmp/envisaged-web-repos`
 - POST/redirect/GET flow avoids browser “submit form again” prompts

scripts/example-system-services

@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+OUT=${1:-system-services.mp4}
+
+exec nix run . -- \
+  --system-log journal \
+  --system-log-since "24 hours ago" \
+  --system-log-limit 5000 \
+  --template tokyo-night \
+  --legend actions \
+  --title "System Services" \
+  -o "$OUT"

src/envisaged/web_templates/index.html

@@ -85,7 +85,7 @@ <h2 class="mb-4 text-lg font-semibold">New Render</h2>
             </label>
             <label class="block">
               <span class="mb-1 block text-[11px] uppercase label-meta text-zinc-500">Template</span>
-              <select name="template" class="form-select w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm">
+              <select id="template-select" name="template" class="form-select w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm">
                 {% for t in templates %}
                 <option value="{{ t }}" {% if t == default_template %}selected{% endif %}>{{ t }}</option>
                 {% endfor %}
@@ -95,7 +95,7 @@ <h2 class="mb-4 text-lg font-semibold">New Render</h2>
 
           <label class="block">
             <span class="mb-1 block text-[11px] uppercase label-meta text-zinc-500">Title</span>
-            <input name="title" value="Envisaged Render" class="form-input w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm" />
+            <input id="title-input" name="title" value="Envisaged Render" class="form-input w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm" />
           </label>
 
           <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
@@ -119,7 +119,7 @@ <h2 class="mb-4 text-lg font-semibold">New Render</h2>
           <div id="system-group" class="grid grid-cols-1 sm:grid-cols-3 gap-3">
             <label class="block">
               <span class="mb-1 block text-[11px] uppercase label-meta text-zinc-500">System Source</span>
-              <select name="system_log" class="form-select w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm">
+              <select id="system-source-select" name="system_log" class="form-select w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm">
                 <option value="journal">journal</option>
                 <option value="kernel">kernel</option>
                 <option value="auth">auth</option>
@@ -164,7 +164,7 @@ <h2 class="mb-4 text-lg font-semibold">New Render</h2>
             </label>
             <label class="block">
               <span class="mb-1 block text-[11px] uppercase label-meta text-zinc-500">Legend</span>
-              <select name="legend" class="form-select w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm">
+              <select id="legend-select" name="legend" class="form-select w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm">
                 <option>auto</option>
                 <option>none</option>
                 <option>repos</option>
@@ -175,7 +175,7 @@ <h2 class="mb-4 text-lg font-semibold">New Render</h2>
             </label>
             <label class="block">
               <span class="mb-1 block text-[11px] uppercase label-meta text-zinc-500">Legend Limit</span>
-              <input name="legend_limit" type="number" min="1" max="20" value="8" class="form-input w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm" />
+              <input id="legend-limit-input" name="legend_limit" type="number" min="1" max="20" value="8" class="form-input w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm" />
             </label>
           </div>
 
@@ -223,6 +223,11 @@ <h2 class="text-lg font-semibold">Recent Renders</h2>
       const multiReposEl = document.getElementById('multi-repos');
       const multiReposGroup = document.getElementById('multi-repos-group');
       const systemGroup = document.getElementById('system-group');
+      const templateSelect = document.getElementById('template-select');
+      const titleInput = document.getElementById('title-input');
+      const legendSelect = document.getElementById('legend-select');
+      const legendLimitInput = document.getElementById('legend-limit-input');
+      const systemSourceSelect = document.getElementById('system-source-select');
       const refreshBtn = document.getElementById('refresh-btn');
 
       function updateModeVisibility() {
@@ -241,6 +246,17 @@ <h2 class="text-lg font-semibold">Recent Renders</h2>
 
         systemGroup.classList.toggle('opacity-50', !system);
         systemGroup.classList.toggle('hidden', !system);
+
+        if (system && modeEl.dataset.systemPresetApplied !== '1') {
+          if (titleInput.value.trim() === '' || titleInput.value === 'Envisaged Render') {
+            titleInput.value = 'System Services';
+          }
+          templateSelect.value = 'tokyo-night';
+          legendSelect.value = 'actions';
+          legendLimitInput.value = '8';
+          systemSourceSelect.value = 'journal';
+          modeEl.dataset.systemPresetApplied = '1';
+        }
       }
 
       modeEl.addEventListener('change', updateModeVisibility);