From 88b68ee9747fbd030b429b059e0ea3d492f5a9b2 Mon Sep 17 00:00:00 2001
From: "snake.tech" <9079973+snaketech-tu@users.noreply.github.com>
Date: Tue, 10 Nov 2026 07:59:34 +0000
Subject: [PATCH 1/3] Open every page at the top

All pages scroll in the same element, so a new page kept the scroll
position of the last one: Preferences opened from the Logs page started
at its bottom. Reset the scroll when the page or the connection changes,
and test it.
---
 CHANGELOG.md            |  5 +++++
 e2e/tests/prefs.spec.ts | 13 ++++++++++++-
 ui/src/App.svelte       | 12 +++++++++++-
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b59712f..b7f1459 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,11 @@
 Release notes for each version. The section of a version becomes the text of
 its GitHub release, and Stackline shows it in the update dialog.
 
+## Unreleased
+
+### Fixed
+- **Pages open at the top.** Every page scrolls in the same area, so a page opened where the last one was scrolled to: Preferences, opened from the Logs page, started at its bottom. Each page, and each connection you switch to, now starts at the top
+
 ## 0.6.0
 
 Stackline now works like Kubri: lists you can drive with the keyboard, an inspector beside the list, and a log workspace that keeps running while you look around. Read-only is now a switch per connection, and with it off Stackline can restart, stop, start and scale services.
diff --git a/e2e/tests/prefs.spec.ts b/e2e/tests/prefs.spec.ts
index 5892bb0..3d16b09 100644
--- a/e2e/tests/prefs.spec.ts
+++ b/e2e/tests/prefs.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test, type Page } from '@playwright/test'
-import { open } from './helpers'
+import { nav, open } from './helpers'
 
 const storeLine = (page: Page) => page.locator('section.panel', { has: page.getByRole('heading', { name: 'Local store' }) }).locator('.set .l').first()
 const entries = async (page: Page) => Number(((await storeLine(page).textContent()) ?? '').match(/([\d,.]+) entries/)?.[1].replace(/[,.]/g, '') ?? -1)
@@ -35,3 +35,14 @@ test('after clearing the store, logs are collected again', async ({ page }) => {
   await open(page, 'logs')
   await expect(page.locator('.stream .row').first()).toBeVisible()
 })
+
+test('Preferences opens at the top, not where the last page was scrolled to', async ({ page }) => {
+  await open(page, 'logs')
+  const view = page.locator('main.view')
+  // The log list makes the page long; scroll it well down.
+  await expect.poll(() => view.evaluate((el) => el.scrollHeight - el.clientHeight)).toBeGreaterThan(300)
+  await view.evaluate((el) => (el.scrollTop = el.scrollHeight))
+  await nav(page, 'Preferences')
+  await expect(page.getByRole('heading', { name: 'Appearance' })).toBeVisible()
+  expect(await view.evaluate((el) => el.scrollTop)).toBe(0)
+})
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index c771d82..f61e7c8 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -106,6 +106,16 @@
   }
   /** The note about a reset settings file was read. */
   let configSeen = $state(false)
+
+  // Every page scrolls in the same element, so a new page would open at the
+  // place the last one was scrolled to (Preferences after the Logs page opened
+  // at its bottom). Each page and each connection starts at the top.
+  let viewEl = $state<HTMLElement>()
+  $effect(() => {
+    void app.view
+    void app.activeId
+    if (viewEl) viewEl.scrollTop = 0
+  })
 </script>
 
 <svelte:window onkeydown={keydown} />
@@ -144,7 +154,7 @@
     </header>
     <div class="area">
       <div class="content" class:with-inspector={docked} class:full={docked && app.inspectorFull}>
-        <main class="view" class:list={isList}>
+        <main class="view" class:list={isList} bind:this={viewEl}>
           {#if app.meta?.configWarning && !configSeen}
             <div class="warn-banner host-banner" role="alert">
               <span><b>Your settings were reset.</b><br /><span class="muted" style="font-size:12.5px">{app.meta.configWarning}</span></span>

From 1eea12c3b2f0c90693e109bd8110db28ea6f567a Mon Sep 17 00:00:00 2001
From: "snake.tech" <9079973+snaketech-tu@users.noreply.github.com>
Date: Tue, 10 Nov 2026 08:06:44 +0000
Subject: [PATCH 2/3] Query any time range on the Logs page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Type a range (90m, yesterday, 14:00-15:30, since 8:00, 9.11. 8:00 - 12:00,
14:05 ± 5m), pick a quick one, set exact From and To, or reuse a recent
range. Ctrl K takes the same text. [ and ] step to the range before or
after, - zooms out. Open-ended ranges (today, since 14:00) follow the
clock and survive a link.
---
 CHANGELOG.md                          |  10 +
 README.md                             |  19 ++
 e2e/tests/logs.spec.ts                |  71 ++++++-
 ui/src/app.css                        |   1 +
 ui/src/components/DownloadMenu.svelte |   4 +-
 ui/src/components/HelpOverlay.svelte  |   3 +
 ui/src/components/Palette.svelte      |   8 +-
 ui/src/components/Popover.svelte      |   6 +-
 ui/src/components/RangePicker.svelte  | 158 ++++++++++++++
 ui/src/lib/state.svelte.ts            | 120 +++++++++--
 ui/src/lib/timeframe.ts               | 284 ++++++++++++++++++++++++++
 ui/src/views/Logs.svelte              |  36 ++--
 12 files changed, 685 insertions(+), 35 deletions(-)
 create mode 100644 ui/src/components/RangePicker.svelte
 create mode 100644 ui/src/lib/timeframe.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b59712f..955f427 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,16 @@
 Release notes for each version. The section of a version becomes the text of
 its GitHub release, and Stackline shows it in the update dialog.
 
+## Unreleased
+
+### Added
+- **Query any time range on the Logs page.** Next to the range buttons, the clock button (or `t`) opens a menu where you can type a range (`90m`, `yesterday`, `14:00-15:30`, `since 8:00`, `9.11. 8:00 - 12:00`, `14:05 ± 5m`, `now-6h to now-2h`), pick a quick one (5m to 3d, today, yesterday, this week), set exact From and To times, or reuse a recent range. Ctrl K understands the same text and opens the Logs page on that range
+- **Step through time.** The arrows beside the range (or `[` and `]`) show the range of the same length before or after; **Zoom out** (or `-`) doubles it. Reaching now turns it back into a range that follows the clock
+- **Ranges that run until now**, such as `today` or `since 14:00`, keep following new lines like the presets do, Live included, and their link keeps the start
+
+### Changed
+- The Logs page names the range in words (`last 90 minutes`, `yesterday 22:00 – 02:00`) instead of bare clock times, and the download menu does the same
+
 ## 0.6.0
 
 Stackline now works like Kubri: lists you can drive with the keyboard, an inspector beside the list, and a log workspace that keeps running while you look around. Read-only is now a switch per connection, and with it off Stackline can restart, stop, start and scale services.
diff --git a/README.md b/README.md
index c649a0c..42334a9 100644
--- a/README.md
+++ b/README.md
@@ -162,6 +162,25 @@ stack:shop replica:2
 node:worker-01 level:warn
 ```
 
+**Pick any time range.** Besides the buttons (Auto, 15m, 1h, 3h, 24h, 7d), the
+clock button (or `t`) takes a typed range, quick picks, exact From and To
+fields and your recent ranges. Ctrl K takes the same text. For example:
+
+```text
+90m                      last 90 minutes
+today / yesterday        the whole day (today runs until now)
+since 8:00               from 08:00 until now, following new lines
+14:00-15:30              today, or yesterday when that is still ahead
+yesterday 22:00 to 02:00 across midnight
+9.11. 8:00 - 12:00       a day without a year is the last one that passed
+2026-11-09               one whole day
+14:05 ± 5m               around a moment
+now-6h to now-2h         relative to now
+```
+
+`[` and `]` move to the range before or after (same length), `-` zooms out.
+Copy link keeps the exact range.
+
 Drag across the timeline to narrow the time range, select an error group to
 filter the stream, then expand a log entry to inspect its trace. Enable **Live**
 to follow new entries. Downloads use the current filters by default.
diff --git a/e2e/tests/logs.spec.ts b/e2e/tests/logs.spec.ts
index 392f319..f2134a9 100644
--- a/e2e/tests/logs.spec.ts
+++ b/e2e/tests/logs.spec.ts
@@ -95,7 +95,7 @@ test('Copy link fixes the time range, and the link opens from Ctrl K', async ({
   await expect(page.getByRole('heading', { name: 'Log stream' })).toBeVisible()
   await expect(page.getByPlaceholder(/^Search/)).toHaveValue('worker')
   await expect(page.getByRole('group', { name: 'Levels' }).getByRole('button', { name: /^Warn/ })).toHaveAttribute('aria-pressed', 'true')
-  await expect(page.getByRole('button', { name: 'Reset zoom' })).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Reset range' })).toBeVisible()
 })
 
 // `migrate` prints a 40 KB line, 1500 short lines and "Applied 3 migrations", then exits.
@@ -138,3 +138,72 @@ test('a line longer than 16 KB is one entry, whole, and the row says it goes on'
   await row.click()
   await expect(row.locator('pre.trace')).toHaveText('Schema dump ' + 'x'.repeat(40000))
 })
+
+test('a typed time range shows those lines, and the arrows step through time', async ({ page }) => {
+  await open(page, 'logs')
+  const rangeButton = page.getByRole('button', { name: /Custom/ })
+  await rangeButton.click()
+  const typed = page.getByRole('textbox', { name: 'Type a time range' })
+  await typed.fill('90 min')
+  await expect(page.getByRole('button', { name: 'Show last 90 minutes' })).toBeVisible()
+  await typed.press('Enter')
+  await expect(page).toHaveURL(/[#&?]t=90m(&|$)/)
+  await expect(page.getByRole('button', { name: /last 90 minutes/ }).first()).toBeVisible()
+  await expect(page.locator('.stream .row').first()).toBeVisible()
+
+  // Earlier: the 90 minutes before, a fixed range in the address.
+  await page.getByRole('button', { name: 'Earlier' }).click()
+  await expect(page).toHaveURL(/[#&?]t=\d+-\d+(&|$)/)
+  const [a, z] = /t=(\d+)-(\d+)/.exec(page.url())!.slice(1).map(Number)
+  expect(z - a).toBe(90 * 60e3)
+  // Later again: back to a range that ends now.
+  await page.getByRole('button', { name: 'Later' }).click()
+  await expect(page).toHaveURL(/[#&?]t=90m(&|$)/)
+
+  // A range that runs until now follows the clock and comes back from its link.
+  await page.keyboard.press('t')
+  await typed.fill('since 5h ago')
+  await typed.press('Enter')
+  await expect(page).toHaveURL(/[#&?]t=\d+-now(&|$)/)
+  await expect(page.locator('.stream .row').first()).toBeVisible()
+  await page.reload()
+  await expect(page.getByRole('button', { name: /^since / }).first()).toBeVisible()
+
+  // Typed ranges are offered again.
+  await page.keyboard.press('t')
+  await expect(page.getByRole('dialog', { name: 'Time range' })).toContainText('since 5h ago')
+  await expect(page.getByRole('dialog', { name: 'Time range' })).toContainText('90 min')
+  await page.keyboard.press('Escape')
+})
+
+test('from and to fields pick an exact range, and nonsense is refused', async ({ page }) => {
+  await open(page, 'logs')
+  await page.getByRole('button', { name: /Custom/ }).click()
+  const dialog = page.getByRole('dialog', { name: 'Time range' })
+  await dialog.getByRole('textbox', { name: 'Type a time range' }).fill('soon-ish')
+  await expect(dialog).toContainText('Not a range yet')
+
+  const pad = (n: number) => String(n).padStart(2, '0')
+  const local = (t: number) => {
+    const d = new Date(t)
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
+  }
+  const now = Date.now()
+  await dialog.getByLabel('From').fill(local(now - 2 * 3600e3))
+  await dialog.getByLabel(/^To/).fill(local(now - 3 * 3600e3))
+  await dialog.getByRole('button', { name: 'Show this range' }).click()
+  await expect(dialog).toContainText('The end must come after the start.')
+  await dialog.getByLabel(/^To/).fill(local(now - 60e3))
+  await dialog.getByRole('button', { name: 'Show this range' }).click()
+  await expect(dialog).toHaveCount(0)
+  await expect(page).toHaveURL(/[#&?]t=\d+-\d+(&|$)/)
+  await expect(page.locator('.stream .row').first()).toBeVisible()
+})
+
+test('Ctrl K takes a time range', async ({ page }) => {
+  await open(page, 'overview')
+  await page.keyboard.press('Control+k')
+  await page.getByPlaceholder(/^Search or run a command/).fill('last 2 hours')
+  await page.keyboard.press('Enter')
+  await expect(page).toHaveURL(/#logs\?.*t=2h(&|$)/)
+})
diff --git a/ui/src/app.css b/ui/src/app.css
index fb2b0fa..19f5ea2 100644
--- a/ui/src/app.css
+++ b/ui/src/app.css
@@ -741,3 +741,4 @@ tr.editrow>td{background:var(--panel-2);padding:16px 18px}
 .warn-t{color:var(--warn)}
 .changes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;border-radius:8px;border:1px dashed color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 6%,var(--panel))}
 .changes .muted{display:inline-flex;align-items:center;gap:5px;font-size:12px;margin-right:auto;color:var(--warn)}
+.pop.wide{width:min(440px,calc(100vw - 24px));max-width:none;max-height:min(640px,calc(100vh - 80px));grid-template-columns:minmax(0,1fr)}
diff --git a/ui/src/components/DownloadMenu.svelte b/ui/src/components/DownloadMenu.svelte
index ed8a21c..91f57fd 100644
--- a/ui/src/components/DownloadMenu.svelte
+++ b/ui/src/components/DownloadMenu.svelte
@@ -2,7 +2,7 @@
   // Download is one click for what the view shows; the arrow picks the format or the whole range.
   import { app, load, save } from '../lib/state.svelte'
   import { api, apiFetch, query } from '../lib/api'
-  import { hhmm } from '../lib/format'
+  import { rangeText } from '../lib/timeframe'
   import Icon from './Icon.svelte'
   import Popover from './Popover.svelte'
 
@@ -71,7 +71,7 @@
     <div class="sepl"></div>
     <div class="hd">Download now</div>
     <button class="it" role="menuitem" onclick={() => download(false)}><span class="l2"><span>What the view shows</span><small>Current filters and time range</small></span></button>
-    <button class="it" role="menuitem" onclick={() => download(true)}><span class="l2"><span>Everything from {hhmm(from)} to {hhmm(to)}</span><small>All services, all levels</small></span></button>
+    <button class="it" role="menuitem" onclick={() => download(true)}><span class="l2"><span>Everything {L.moving ? L.rangeLabel() : `from ${rangeText(from, to)}`}</span><small>All services, all levels</small></span></button>
     <div class="sepl"></div>
     <div class="note">Exports from the local store, with stack traces kept whole. Downloads go to this computer, never to the server.</div>
   </Popover>
diff --git a/ui/src/components/HelpOverlay.svelte b/ui/src/components/HelpOverlay.svelte
index a64857d..aecaa4a 100644
--- a/ui/src/components/HelpOverlay.svelte
+++ b/ui/src/components/HelpOverlay.svelte
@@ -43,6 +43,9 @@
       ['Enter', 'Expand a line'],
       ['c', 'Copy a line'],
       ['f', 'Fill the window with the stream'],
+      ['t', 'Type or pick a time range'],
+      ['[  ]', 'The range before or after this one'],
+      ['-', 'Zoom out to twice the range'],
     ]],
   ]
 </script>
diff --git a/ui/src/components/Palette.svelte b/ui/src/components/Palette.svelte
index ad98d3f..54eeb98 100644
--- a/ui/src/components/Palette.svelte
+++ b/ui/src/components/Palette.svelte
@@ -4,6 +4,7 @@
   import { app, VIEWS } from '../lib/state.svelte'
   import { fetchLogs } from '../lib/api'
   import { firstLine } from '../lib/format'
+  import { parseRange } from '../lib/timeframe'
   import type { Group } from '../lib/types'
   import Icon from './Icon.svelte'
 
@@ -76,13 +77,18 @@
       const hash = pastedLink
       return [{ kind: 'Link', label: 'Open this log link', text: hash, right: '', run: () => { app.openLink(new URLSearchParams(hash.slice(hash.indexOf('?') + 1))); app.go('logs') } } satisfies Item]
     }
+    // A typed time range (`2h`, `yesterday 14:00-15:00`) shows the logs of that range.
+    const range = parseRange(q)
+    const rangeItem: Item[] = range
+      ? [{ kind: 'Range', label: `Show logs of ${q.trim()}`, text: q, right: 'time range', run: () => { app.go('logs'); app.logs.applyText(q) } }]
+      : []
     const words = q.toLowerCase().split(/\s+/).filter(Boolean)
     if (!words.length) {
       const top = all.filter((x) => x.kind === 'Service' && (x.right.includes('★') || /^0\/[1-9]/.test(x.right)))
       return [...top, ...all.filter((x) => x.kind === 'Error').slice(0, 3), ...all.filter((x) => x.kind === 'Page')]
     }
     // What it is called counts as much as its keywords: "allow changes" finds "Allow changes on …".
-    return all.filter((x) => words.every((w) => `${x.label} ${x.text}`.toLowerCase().includes(w))).slice(0, 30)
+    return [...rangeItem, ...all.filter((x) => words.every((w) => `${x.label} ${x.text}`.toLowerCase().includes(w)))].slice(0, 30)
   })
   $effect(() => {
     void q
diff --git a/ui/src/components/Popover.svelte b/ui/src/components/Popover.svelte
index 2fe4731..390a161 100644
--- a/ui/src/components/Popover.svelte
+++ b/ui/src/components/Popover.svelte
@@ -3,8 +3,8 @@
   import type { Snippet } from 'svelte'
   import { onMount } from 'svelte'
 
-  let { anchor, onclose, align = 'left', label, children }: {
-    anchor: HTMLElement; onclose: () => void; align?: 'left' | 'right'; label: string; children: Snippet
+  let { anchor, onclose, align = 'left', label, wide = false, children }: {
+    anchor: HTMLElement; onclose: () => void; align?: 'left' | 'right'; label: string; wide?: boolean; children: Snippet
   } = $props()
 
   let el: HTMLDivElement | undefined = $state()
@@ -47,7 +47,7 @@
 
 <!-- The menu itself moves to the end of the page; this wrapper stays where Svelte expects it. -->
 <div style="display:contents">
-  <div class="pop" role="menu" aria-label={label} bind:this={el} style:left="{pos.left}px" style:top="{pos.top}px">
+  <div class="pop" class:wide role={wide ? 'dialog' : 'menu'} aria-label={label} bind:this={el} style:left="{pos.left}px" style:top="{pos.top}px">
     {@render children()}
   </div>
 </div>
diff --git a/ui/src/components/RangePicker.svelte b/ui/src/components/RangePicker.svelte
new file mode 100644
index 0000000..5a81530
--- /dev/null
+++ b/ui/src/components/RangePicker.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+  // The time range of the Logs page: one-click presets, a menu to type or pick
+  // any range, and steps to the range before or after.
+  import { app, PRESETS, type Preset } from '../lib/state.svelte'
+  import { inputValue, parseRange, rangeInput, presetText, rangeText, type Range } from '../lib/timeframe'
+  import Icon from './Icon.svelte'
+  import Popover from './Popover.svelte'
+
+  let { open = $bindable(false) }: { open?: boolean } = $props()
+
+  const L = app.logs
+  const BUTTONS: Preset[] = ['auto', ...PRESETS]
+  const QUICK: [string, string][] = [
+    ['5m', '5m'], ['30m', '30m'], ['6h', '6h'], ['12h', '12h'], ['2d', '2d'], ['3d', '3d'],
+    ['Today', 'today'], ['Yesterday', 'yesterday'], ['This week', 'this week'],
+  ]
+  const EXAMPLES = ['2h', 'yesterday', '14:00-15:30', 'since 8:00', '9.11. 8:00 - 12:00', '14:05 ± 5m']
+
+  let anchor: HTMLButtonElement | undefined = $state()
+  let typed = $state('')
+  let fromIn = $state('')
+  let toIn = $state('')
+  let error = $state('')
+
+  /** A range that has no button of its own shows as words on the menu button. */
+  let custom = $derived(!(L.preset && BUTTONS.includes(L.preset)))
+
+  $effect(() => {
+    if (!open) return
+    // Every time it opens: the fields show the range on screen.
+    const [a, z] = L.window()
+    typed = ''
+    error = ''
+    fromIn = inputValue(a)
+    toIn = L.moving ? '' : inputValue(z)
+  })
+
+  function label(r: Range): string {
+    if ('preset' in r) return r.preset === 'auto' ? 'all stored lines' : presetText(r.preset)
+    return rangeText(r.from, r.to)
+  }
+
+  let preview = $derived.by(() => {
+    if (!typed.trim()) return null
+    const r = parseRange(typed)
+    return r ? label(r) : ''
+  })
+
+  function applyTyped() {
+    if (!typed.trim()) return
+    if (L.applyText(typed)) open = false
+    else error = 'That is not a range Stackline understands. Try one of the examples.'
+  }
+
+  function pick(text: string) {
+    L.applyText(text)
+    open = false
+  }
+
+  function applyFields() {
+    const a = fromIn ? new Date(fromIn).getTime() : NaN
+    const z = toIn ? new Date(toIn).getTime() : null
+    if (Number.isNaN(a)) return void (error = 'Pick a start.')
+    if (z !== null && (Number.isNaN(z) || z <= a)) return void (error = 'The end must come after the start.')
+    if (a >= Date.now()) return void (error = 'The start is in the future.')
+    L.setRange({ from: a, to: z })
+    L.remember(rangeInput(a, z))
+    open = false
+  }
+
+  function toggle() {
+    open = !open
+  }
+</script>
+
+<div class="rp">
+  <div class="seg" role="group" aria-label="Time range">
+    {#each BUTTONS as p (p)}
+      <button aria-pressed={L.preset === p} onclick={() => L.setPreset(p)} title={p === 'auto' ? 'From the oldest stored line until now' : presetText(p)}>{p === 'auto' ? 'Auto' : p}</button>
+    {/each}
+  </div>
+  <button class="ctl rbtn" class:on={custom} bind:this={anchor} aria-haspopup="dialog" aria-expanded={open} onclick={toggle}
+    title="Type or pick any time range (t)">
+    <Icon name="clock" size={14} /><span class="rl">{custom ? L.rangeLabel(app.now) : 'Custom'}</span><Icon name="chevD" size={12} />
+  </button>
+  <span class="steps">
+    <button class="ctl icon" onclick={() => L.step(-1)} aria-label="Earlier" title="Earlier: the same length before this range ( [ )"><Icon name="chevL" size={14} /></button>
+    <button class="ctl icon" onclick={() => L.step(1)} disabled={L.moving} aria-label="Later" title="Later: the same length after this range ( ] )"><Icon name="chev" size={14} /></button>
+  </span>
+</div>
+
+{#if open && anchor}
+  <Popover {anchor} label="Time range" wide onclose={() => (open = false)}>
+    <div class="hd">Type a range</div>
+    <!-- svelte-ignore a11y_autofocus -->
+    <input class="find mono" bind:value={typed} autofocus placeholder="2h, yesterday, 14:00-15:30, since 8:00…" spellcheck="false" autocomplete="off"
+      aria-label="Type a time range" onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); applyTyped() } }} oninput={() => (error = '')} />
+    {#if preview}
+      <button class="it" onclick={applyTyped}><Icon name="check" size={13} /><span class="l">Show {preview}</span><span class="r">Enter</span></button>
+    {:else if preview === ''}
+      <div class="note err">Not a range yet. Examples: {EXAMPLES.join(' · ')}</div>
+    {:else}
+      <div class="note">For example {#each EXAMPLES as ex, i (ex)}{#if i}, {/if}<button class="ex mono" onclick={() => (typed = ex)}>{ex}</button>{/each}</div>
+    {/if}
+
+    <div class="sepl"></div>
+    <div class="hd">Quick</div>
+    <div class="chips">
+      {#each QUICK as [name, text] (text)}
+        <button class="btn sm" onclick={() => pick(text)}>{name}</button>
+      {/each}
+    </div>
+
+    <div class="sepl"></div>
+    <div class="hd">From and to</div>
+    <div class="fields">
+      <label class="field">From<input type="datetime-local" bind:value={fromIn} step="60" oninput={() => (error = '')} /></label>
+      <label class="field" title="Leave empty to run until now">To<input type="datetime-local" bind:value={toIn} step="60" oninput={() => (error = '')} /></label>
+    </div>
+    <div class="row-end">
+      {#if toIn}<button class="btn ghost sm" onclick={() => (toIn = '')}>Until now</button>{:else}<span class="muted hint">No end: the range runs until now.</span>{/if}
+      <button class="btn pri sm" onclick={applyFields}>Show this range</button>
+    </div>
+    {#if error}<div class="note err" role="alert">{error}</div>{/if}
+
+    {#if L.recent.length}
+      <div class="sepl"></div>
+      <div class="hd">Recent</div>
+      {#each L.recent as text (text)}
+        {@const r = parseRange(text)}
+        {#if r}
+          <button class="it" onclick={() => pick(text)}><Icon name="clock" size={13} /><span class="l mono">{text}</span><span class="r">{label(r)}</span></button>
+        {/if}
+      {/each}
+    {/if}
+    <div class="sepl"></div>
+    <div class="note">Drag across the graph to zoom in. <kbd>[</kbd> <kbd>]</kbd> step earlier or later, <kbd>-</kbd> zooms out, <kbd>t</kbd> opens this menu.</div>
+  </Popover>
+{/if}
+
+<style>
+  .rp{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
+  .rbtn{max-width:min(320px,70vw)}
+  .rbtn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--fg);font-weight:600}
+  .rl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
+  .steps{display:inline-flex;gap:4px}
+  .steps button:disabled{opacity:.4;cursor:default}
+  .chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 10px 6px}
+  .fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:2px 10px}
+  .fields .field{min-width:0}
+  .fields input{height:34px;font-family:var(--mono);font-size:12px;min-width:0;padding:0 6px}
+  .row-end{display:flex;justify-content:flex-end;align-items:center;gap:6px;padding:8px 10px 4px}
+  .hint{font-size:11.5px;margin-right:auto}
+  .note.err{color:var(--err)}
+  .ex{all:unset;cursor:pointer;color:var(--accent);font-size:11.5px}
+  .ex:hover{text-decoration:underline}
+  @media (max-width:520px){.fields{grid-template-columns:1fr}}
+</style>
diff --git a/ui/src/lib/state.svelte.ts b/ui/src/lib/state.svelte.ts
index 9639fd2..edcfee5 100644
--- a/ui/src/lib/state.svelte.ts
+++ b/ui/src/lib/state.svelte.ts
@@ -5,6 +5,7 @@ import { untrack } from 'svelte'
 import { SvelteSet } from 'svelte/reactivity'
 import { ApiError, api, fetchDeploys, post, put, type LogParams } from './api'
 import { beforeEvent } from './events'
+import { parseRange, presetFor, presetMs, presetText, rangeText, type Preset, type Range } from './timeframe'
 import { load, save } from './storage'
 import { DockState } from './dock.svelte'
 import { newLists, type ListView } from './lists.svelte'
@@ -37,9 +38,9 @@ export type Drawer =
   | null
 
 export type Theme = 'system' | 'light' | 'dark'
-export type Preset = 'auto' | '15m' | '1h' | '3h' | '24h' | '7d'
-/** Minutes per fixed preset. `auto` starts at the oldest stored line instead. */
-export const PRESETS: Record<Exclude<Preset, 'auto'>, number> = { '15m': 15, '1h': 60, '3h': 180, '24h': 1440, '7d': 10080 }
+export type { Preset }
+/** The ranges with a button of their own. `auto` starts at the oldest stored line. */
+export const PRESETS: Preset[] = ['15m', '1h', '3h', '24h', '7d']
 export const LEVELS: Level[] = ['ERROR', 'WARN', 'INFO', 'DEBUG']
 
 export { load, save }
@@ -87,6 +88,15 @@ export class LogFilters {
   }
 }
 
+function loadRecent(): string[] {
+  try {
+    const v = JSON.parse(load('stackline-recent-ranges') ?? '[]')
+    return Array.isArray(v) ? v.filter((t): t is string => typeof t === 'string').slice(0, 6) : []
+  } catch {
+    return []
+  }
+}
+
 /** Filters of the logs view. Kept here so they survive switching views. */
 class LogsState extends LogFilters {
   /** Picked sources: full service names, or `stack:<name>` for a whole stack. Any of them matches. */
@@ -94,9 +104,14 @@ class LogsState extends LogFilters {
   q = $state('')
   /** The error group (fingerprint) the stream is narrowed to. */
   group = $state<string | null>(null)
+  /** A range that ends now and moves with it; null for a fixed one (`from`, `to`). */
   preset = $state<Preset | null>('auto')
   from = $state(Date.now() - 3 * 3600e3)
   to = $state(Date.now())
+  /** A fixed start that runs until now (`today`, `since 14:00`): `to` follows the clock. */
+  openEnd = $state(false)
+  /** Ranges picked in the range menu, newest first, as typed text. */
+  recent = $state<string[]>(loadRecent())
   live = $state(false)
   collapse = $state(true)
   /** Error groups above the stream (it gets the full width) or beside it. */
@@ -112,20 +127,31 @@ class LogsState extends LogFilters {
     this.autoFrom = autoFrom
   }
 
-  /** The time range to query: a preset ends now, a zoom is fixed. */
+  /** The time range to query: a preset or an open end ends now, a zoom is fixed. */
   window(): [number, number] {
-    if (this.preset) {
-      const to = Date.now()
-      return [this.preset === 'auto' ? Math.min(this.autoFrom(), to - 15 * 60e3) : to - PRESETS[this.preset] * 60e3, to]
-    }
+    const now = Date.now()
+    if (this.preset) return [this.preset === 'auto' ? Math.min(this.autoFrom(), now - 15 * 60e3) : now - (presetMs(this.preset) ?? 3600e3), now]
+    if (this.openEnd) return [this.from, Math.max(now, this.from + 1000)]
     return [this.from, this.to]
   }
 
+  /** The range follows the clock, so it is reloaded now and then and can be followed live. */
+  get moving(): boolean {
+    return !!this.preset || this.openEnd
+  }
+
+  /** The range as words: `last 3 hours`, `since 14:00`, `yesterday 22:00 – 02:00`. */
+  rangeLabel(now = Date.now()): string {
+    if (this.preset === 'auto') return 'all stored lines'
+    if (this.preset) return presetText(this.preset)
+    return rangeText(this.from, this.openEnd ? null : this.to, now)
+  }
+
   /** Query parameters for the current filters. */
   params(): LogParams {
     const [from, to] = this.window()
     const p: LogParams = { from: Math.floor(from), to: Math.ceil(to), levels: [...this.levels].join(',') }
-    if (this.preset) p.open = true
+    if (this.moving) p.open = true
     const q = [this.q.trim(), this.group ? `fp:${this.group}` : ''].filter(Boolean).join(' ')
     if (q) p.q = q
     const stacks = [...this.sources].filter((s) => s.startsWith('stack:')).map((s) => s.slice(6))
@@ -147,16 +173,80 @@ class LogsState extends LogFilters {
 
   setPreset(p: Preset) {
     this.preset = p
+    this.openEnd = false
     ;[this.from, this.to] = this.window()
   }
 
   zoom(from: number, to: number) {
     this.preset = null
+    this.openEnd = false
     this.live = false
     this.from = from
     this.to = to
   }
 
+  /** From a fixed time until now, following the clock. Live stays as it was. */
+  since(from: number) {
+    this.preset = null
+    this.openEnd = true
+    this.from = from
+    this.to = Date.now()
+  }
+
+  setRange(r: Range) {
+    if ('preset' in r) this.setPreset(r.preset)
+    else if (r.to === null) this.since(r.from)
+    else this.zoom(r.from, r.to)
+  }
+
+  /**
+   * Reads a typed range (see `parseRange`) and shows it. Kept among the
+   * recent ranges when `remember` is set. False when it means nothing.
+   */
+  applyText(text: string, remember = true): boolean {
+    const r = parseRange(text)
+    if (!r) return false
+    this.setRange(r)
+    if (remember) this.remember(text.trim())
+    return true
+  }
+
+  remember(text: string) {
+    this.recent = [text, ...this.recent.filter((t) => t.toLowerCase() !== text.toLowerCase())].slice(0, 6)
+    save('stackline-recent-ranges', JSON.stringify(this.recent))
+  }
+
+  /**
+   * Moves the range by its own length: earlier (-1) or later (1). A range
+   * that would reach past now ends now and follows the clock again.
+   */
+  step(dir: -1 | 1) {
+    const [a, z] = this.window()
+    const len = z - a
+    const now = Date.now()
+    if (dir > 0 && this.moving) return
+    if (dir > 0 && z + len >= now - 1000) {
+      this.setPreset(presetFor(len))
+      return
+    }
+    this.zoom(a + dir * len, z + dir * len)
+  }
+
+  /** Twice as long around the same middle, never past now. */
+  zoomOut() {
+    const [a, z] = this.window()
+    const len = z - a
+    const now = Date.now()
+    if (this.moving) {
+      if (this.preset !== 'auto') this.setPreset(presetFor(2 * len))
+      return
+    }
+    const to = Math.min(now, z + len / 2)
+    const from = to - 2 * len
+    if (to >= now - 1000) this.setPreset(presetFor(2 * len))
+    else this.zoom(from, to)
+  }
+
   /**
    * The filters as the part of a link after `#`: `logs?c=…&t=1h&s=…`. With
    * `fixed`, a preset becomes the range it covers now, so the link shows the
@@ -164,10 +254,11 @@ class LogsState extends LogFilters {
    */
   link(conn: string, fixed = false): string {
     const p = new URLSearchParams({ c: conn })
-    if (!this.preset || fixed) {
+    if (!this.moving || fixed) {
       const [from, to] = this.window()
       p.set('t', `${Math.floor(from)}-${Math.ceil(to)}`)
-    } else if (this.preset !== 'auto') p.set('t', this.preset)
+    } else if (this.openEnd) p.set('t', `${Math.floor(this.from)}-now`)
+    else if (this.preset !== 'auto') p.set('t', this.preset!)
     if (this.sources.size) p.set('s', [...this.sources].join(','))
     if (this.soloLevels) p.set('l', [...this.levels].join(','))
     if (this.q.trim()) p.set('q', this.q.trim())
@@ -179,9 +270,10 @@ class LogsState extends LogFilters {
   applyLink(p: URLSearchParams) {
     this.reset()
     const t = p.get('t') ?? ''
-    const range = /^(\d+)-(\d+)$/.exec(t)
-    if (range && +range[1] < +range[2]) this.zoom(+range[1], +range[2])
-    else if (t in PRESETS) this.setPreset(t as Preset)
+    const range = /^(\d+)-(\d+|now)$/.exec(t)
+    if (range && range[2] === 'now') this.since(+range[1])
+    else if (range && +range[1] < +range[2]) this.zoom(+range[1], +range[2])
+    else if (presetMs(t)) this.setPreset(t)
     this.sources.clear()
     for (const src of (p.get('s') ?? '').split(',')) if (src) this.sources.add(src)
     const levels = (p.get('l') ?? '').split(',').filter((l): l is Level => (LEVELS as string[]).includes(l))
diff --git a/ui/src/lib/timeframe.ts b/ui/src/lib/timeframe.ts
new file mode 100644
index 0000000..36fae7f
--- /dev/null
+++ b/ui/src/lib/timeframe.ts
@@ -0,0 +1,284 @@
+// Time ranges for the Logs page: typed ones ("2h", "yesterday", "14:00-15:30"),
+// relative ones that end now, and how a range reads on screen. Local time throughout.
+
+/** A range that ends now and moves with it: `auto` or a length such as `15m`, `6h`, `2d`. */
+export type Preset = string
+
+/**
+ * What a typed range means. `preset` moves with the clock. A `from` with
+ * `to: null` starts at a fixed time and runs until now (open end).
+ */
+export type Range = { preset: Preset } | { from: number; to: number | null }
+
+const UNIT_MS = { s: 1e3, m: 60e3, h: 3600e3, d: 86400e3, w: 7 * 86400e3 } as const
+type Unit = keyof typeof UNIT_MS
+
+const UNITS: [RegExp, Unit][] = [
+  [/^(s|secs?|seconds?)$/, 's'],
+  [/^(m|mins?|minutes?|minuten?)$/, 'm'],
+  [/^(h|hrs?|hours?|std|stunden?)$/, 'h'],
+  [/^(d|days?|tage?n?)$/, 'd'],
+  [/^(w|wks?|weeks?|wochen?)$/, 'w'],
+]
+
+/** `90 min`, `2h`, `1.5 days` as milliseconds, or null. */
+export function duration(text: string): number | null {
+  const m = /^(\d+(?:[.,]\d+)?)\s*([a-zäöü]+)$/i.exec(text.trim())
+  if (!m) return null
+  const unit = UNITS.find(([re]) => re.test(m[2].toLowerCase()))?.[1]
+  const n = parseFloat(m[1].replace(',', '.'))
+  if (!unit || !(n > 0)) return null
+  return n * UNIT_MS[unit]
+}
+
+/** The length of a preset in ms; `auto` and unknown presets have none. */
+export function presetMs(p: Preset): number | null {
+  const m = /^(\d+)([mhd])$/.exec(p)
+  return m ? +m[1] * UNIT_MS[m[2] as Unit] : null
+}
+
+/** The shortest preset name for a length: 90 minutes is `90m`, 48 hours `2d`. */
+export function presetFor(ms: number): Preset {
+  const mins = Math.max(1, Math.round(ms / 60e3))
+  if (mins % 1440 === 0 && mins >= 2880) return `${mins / 1440}d`
+  if (mins % 60 === 0) return `${mins / 60}h`
+  return `${mins}m`
+}
+
+function midnight(t: number, addDays = 0): number {
+  const d = new Date(t)
+  d.setHours(0, 0, 0, 0)
+  d.setDate(d.getDate() + addDays)
+  return d.getTime()
+}
+
+/** Monday 00:00 of the week of `t`. */
+function weekStart(t: number): number {
+  const d = new Date(midnight(t))
+  return midnight(d.getTime(), -((d.getDay() + 6) % 7))
+}
+
+function at(day: number, h: number, mi: number, s = 0): number {
+  const d = new Date(day)
+  d.setHours(h, mi, s, 0)
+  return d.getTime()
+}
+
+/** A clock time `14:00`, `9:30:15` or `14h`. */
+function clock(text: string): [number, number, number] | null {
+  const m = /^(\d{1,2})(?::(\d{2}))?(?::(\d{2}))?h?$/.exec(text)
+  // A bare number is a time only as `14h`; `14` alone is too vague.
+  if (!m || (m[2] === undefined && !text.endsWith('h'))) return null
+  const [h, mi, s] = [+m[1], +(m[2] ?? 0), +(m[3] ?? 0)]
+  return h < 24 && mi < 60 && s < 60 ? [h, mi, s] : null
+}
+
+const WEEKDAYS = [
+  ['sun', 'sunday', 'so', 'sonntag'],
+  ['mon', 'monday', 'mo', 'montag'],
+  ['tue', 'tuesday', 'di', 'dienstag'],
+  ['wed', 'wednesday', 'mi', 'mittwoch'],
+  ['thu', 'thursday', 'do', 'donnerstag'],
+  ['fri', 'friday', 'fr', 'freitag'],
+  ['sat', 'saturday', 'sa', 'samstag'],
+]
+
+/**
+ * A day: `today`, `yesterday`, a weekday (the last one, today included),
+ * `2026-11-09`, `9.11.2026`, `9.11.` or `11/9`. Gives midnight of that day.
+ */
+function day(text: string, now: number): number | null {
+  const t = text.toLowerCase()
+  if (t === 'today' || t === 'heute') return midnight(now)
+  if (t === 'yesterday' || t === 'gestern') return midnight(now, -1)
+  const wd = WEEKDAYS.findIndex((names) => names.includes(t))
+  if (wd >= 0) return midnight(now, -((new Date(now).getDay() - wd + 7) % 7))
+  let y: number, mo: number, d: number
+  let m: RegExpExecArray | null
+  if ((m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(t))) [y, mo, d] = [+m[1], +m[2], +m[3]]
+  else if ((m = /^(\d{1,2})\.(\d{1,2})\.(\d{4}|\d{2})?$/.exec(t))) [d, mo, y] = [+m[1], +m[2], m[3] ? (m[3].length === 2 ? 2000 + +m[3] : +m[3]) : NaN]
+  else if ((m = /^(\d{1,2})\/(\d{1,2})(?:\/(\d{4}))?$/.exec(t))) [mo, d, y] = [+m[1], +m[2], m[3] ? +m[3] : NaN]
+  else return null
+  const year = Number.isNaN(y) ? new Date(now).getFullYear() : y
+  const date = new Date(year, mo - 1, d)
+  if (date.getMonth() !== mo - 1 || date.getDate() !== d) return null
+  // A day without a year is the last one that has passed.
+  if (Number.isNaN(y) && date.getTime() > now) date.setFullYear(year - 1)
+  return date.getTime()
+}
+
+/** One point in time, or null. `day` is set when only a day was given (no clock time). */
+function point(text: string, now: number): { t: number; day?: boolean } | null {
+  const s = text.trim().toLowerCase().replace(/\s+/g, ' ')
+  if (s === 'now' || s === 'jetzt') return { t: now }
+  let m: RegExpExecArray | null
+  // now-2h, now - 30m
+  // now-2h, 2h ago, vor 2h: to the minute, so the range reads and links cleanly
+  if ((m = /^now ?- ?(.+)$/.exec(s)) || (m = /^(.+?) ago$/.exec(s)) || (m = /^vor (.+)$/.exec(s))) {
+    const d = duration(m[1])
+    return d ? { t: Math.floor((now - d) / 60e3) * 60e3 } : null
+  }
+  // 2026-11-09T14:00 from a date field or an ISO time
+  if ((m = /^(\d{4}-\d{1,2}-\d{1,2})t(\d{1,2}:\d{2}(?::\d{2})?)(?:\.\d+)?$/.exec(s))) return point(`${m[1]} ${m[2]}`, now)
+  const c = clock(s)
+  if (c) {
+    // A time without a day is the last time the clock showed it.
+    const today = at(midnight(now), ...c)
+    return { t: today <= now ? today : at(midnight(now, -1), ...c) }
+  }
+  const dd = day(s, now)
+  if (dd !== null) return { t: dd, day: true }
+  // day + time, in either order: `yesterday 14:00`, `9.11. 8:30`, `14:00 yesterday`
+  const parts = s.split(' ')
+  if (parts.length >= 2) {
+    for (const [dt, tm] of [[parts.slice(0, -1).join(' '), parts.at(-1)!], [parts.slice(1).join(' '), parts[0]]]) {
+      const base = day(dt, now)
+      const cl = clock(tm.replace(/^(um|at)$/, ''))
+      if (base !== null && cl) return { t: at(base, ...cl) }
+    }
+    // `yesterday at 14:00`, `gestern um 14:00`
+    if (parts.length === 3 && /^(at|um)$/.test(parts[1])) return point(`${parts[0]} ${parts[2]}`, now)
+  }
+  return null
+}
+
+/**
+ * Reads a typed range. Understands, among others:
+ * `15m`, `last 2 hours`, `today`, `yesterday`, `this week`, `since 14:00`,
+ * `14:00-15:30`, `yesterday 22:00 to today 02:00`, `2026-11-09`,
+ * `9.11. 8:00 - 9:00`, `14:05 +/- 5m`, `14:00 +30m`, `now-6h to now-2h`, `auto`.
+ */
+export function parseRange(text: string, now = Date.now()): Range | null {
+  let s = text.trim().toLowerCase().replace(/\s+/g, ' ')
+  if (!s) return null
+  if (s === 'auto' || s === 'all' || s === 'everything' || s === 'alles') return { preset: 'auto' }
+  s = s.replace(/^(the )?(last|past|letzte[nr]?) /, '')
+  const len = duration(s)
+  if (len) return { preset: presetFor(len) }
+  if (s === 'hour' || s === 'stunde') return { preset: '1h' }
+  if (s === 'day' || s === 'tag') return { preset: '24h' }
+  if (s === 'week' || s === 'woche') return { preset: '7d' }
+  if (s === 'today' || s === 'heute') return { from: midnight(now), to: null }
+  if (s === 'this week' || s === 'diese woche') return { from: weekStart(now), to: null }
+  if (s === 'previous week' || s === 'vorige woche') return { from: weekStart(now) - 7 * 86400e3, to: weekStart(now) }
+
+  let m: RegExpExecArray | null
+  // since 14:00, from yesterday, after 9.11.
+  if ((m = /^(since|from|after|seit|ab) (.+)$/.exec(s)) && !/ (-|–|to|until|till|bis) /.test(m[2])) {
+    const p = point(m[2], now)
+    return p && p.t < now ? { from: p.t, to: null } : null
+  }
+  // before 14:00, until 14:00: the hour leading up to it
+  if ((m = /^(before|until|till|bis) (.+)$/.exec(s))) {
+    const p = point(m[2], now)
+    return p ? { from: p.t - 3600e3, to: p.t } : null
+  }
+  // around 14:05, 14:05 +/- 10m, 14:05 ± 10m
+  if ((m = /^(?:around|um|ca\.?) (.+?)(?: ?(?:\+\/?-|±) ?(.+))?$/.exec(s)) || (m = /^(.+?) ?(?:\+\/?-|±) ?(.+)$/.exec(s))) {
+    const p = point(m[1], now)
+    const d = m[2] ? duration(m[2]) : 5 * 60e3
+    return p && d ? { from: p.t - d, to: p.t + d } : null
+  }
+  // 14:00 +30m: from a time, for a while
+  if ((m = /^(.+?) ?\+ ?(\d.*)$/.exec(s))) {
+    const p = point(m[1], now)
+    const d = duration(m[2])
+    return p && d ? { from: p.t, to: p.t + d } : null
+  }
+  // A from and a to: `a - b`, `a to b`, `a..b`, `14:00-15:30`
+  const split =
+    /^(.+?) (?:-|–|—|to|until|till|bis) (.+)$/.exec(s) ??
+    /^(.+?) ?\.\. ?(.+)$/.exec(s) ??
+    /^(\d{1,2}(?::\d{2}){0,2})[-–](\d{1,2}(?::\d{2}){0,2})$/.exec(s) ??
+    /^(.*\d{1,2}:\d{2}(?::\d{2})?)[-–](\d{1,2}:\d{2}(?::\d{2})?)$/.exec(s)
+  if (split) {
+    const a = point(split[1], now)
+    if (!a) return null
+    const bText = split[2]
+    if (/^(now|jetzt)$/.test(bText)) return a.t < now ? { from: a.t, to: null } : null
+    // The end may be just a clock time: on the day the range starts, or the next.
+    const cl = clock(bText)
+    let b: number | null
+    if (cl) {
+      b = at(midnight(a.t), ...cl)
+      if (b <= a.t) b = at(midnight(a.t, 1), ...cl)
+    } else {
+      const p = point(bText, now)
+      // A day as the end includes the whole day.
+      b = p ? (p.day ? midnight(p.t, 1) : p.t) : null
+    }
+    return b !== null && b > a.t ? { from: a.t, to: b } : null
+  }
+  // A single day is the whole day; a single time is "since".
+  const p = point(s, now)
+  if (!p) return null
+  if (p.day) return { from: p.t, to: midnight(p.t, 1) }
+  return p.t < now ? { from: p.t, to: null } : null
+}
+
+const pad = (n: number) => String(n).padStart(2, '0')
+
+/** `14:05`, or `14:05:30` with `seconds`. */
+function clockText(t: number, seconds = false): string {
+  const d = new Date(t)
+  const s = `${pad(d.getHours())}:${pad(d.getMinutes())}`
+  return seconds ? `${s}:${pad(d.getSeconds())}` : s
+}
+
+/** `today`, `yesterday`, `Mon 9 Nov`, or `2025-11-09` in another year. */
+function dayText(t: number, now: number): string {
+  if (t === midnight(now)) return 'today'
+  if (t === midnight(now, -1)) return 'yesterday'
+  const d = new Date(t)
+  if (d.getFullYear() === new Date(now).getFullYear()) return d.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' })
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+}
+
+/** `14:05` today, `yesterday 14:05`, `Mon 9 Nov 14:05` this year, else `2025-11-09 14:05`. */
+export function pointText(t: number, now = Date.now(), seconds = false): string {
+  const d = new Date(t)
+  const c = clockText(t, seconds)
+  const m0 = midnight(now)
+  if (t >= m0 && t < midnight(now, 1)) return c
+  if (t >= midnight(now, -1) && t < m0) return `yesterday ${c}`
+  if (d.getFullYear() === new Date(now).getFullYear())
+    return `${d.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' })} ${c}`
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${c}`
+}
+
+/** How a fixed range reads: `14:00 – 15:30`, `yesterday 22:00 – 02:00`, `Mon 9 Nov 08:00 – 12:00`. */
+export function rangeText(from: number, to: number | null, now = Date.now()): string {
+  if (to === null) return from === midnight(now) ? 'today' : `since ${pointText(from, now)}`
+  // Whole days read as days: `yesterday`, `Mon 9 Nov – today`.
+  if (from === midnight(from) && to === midnight(to)) {
+    const a = dayText(from, now)
+    return to === midnight(from, 1) ? a : `${a} – ${dayText(midnight(to, -1), now)}`
+  }
+  const seconds = to - from < 10 * 60e3 && (new Date(from).getSeconds() !== 0 || new Date(to).getSeconds() !== 0)
+  const a = pointText(from, now, seconds)
+  // The end on the same day or the night after reads as a clock time only.
+  const short = midnight(to) === midnight(from) || (to - from < 86400e3 && midnight(to) === midnight(from, 1) && to < midnight(now, 1))
+  const b = short ? clockText(to, seconds) : pointText(to, now, seconds)
+  return `${a} – ${b}`
+}
+
+/** A preset as words: `last 15 minutes`, `last 6 hours`, `last 2 days`. */
+export function presetText(p: Preset): string {
+  const m = /^(\d+)([mhd])$/.exec(p)
+  if (!m) return p
+  const n = +m[1]
+  const word = { m: 'minute', h: 'hour', d: 'day' }[m[2] as 'm' | 'h' | 'd']
+  return n === 1 ? `last ${word}` : `last ${n} ${word}s`
+}
+
+/** The value for an `<input type="datetime-local">`. */
+export function inputValue(t: number): string {
+  const d = new Date(t)
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+
+/** A range as text `parseRange` reads back: `2026-11-09 14:00 - 2026-11-09 15:30`, `since 2026-11-09 14:00`. */
+export function rangeInput(from: number, to: number | null): string {
+  const t = (x: number) => inputValue(x).replace('T', ' ')
+  return to === null ? `since ${t(from)}` : `${t(from)} - ${t(to)}`
+}
diff --git a/ui/src/views/Logs.svelte b/ui/src/views/Logs.svelte
index 3a04435..d6a614e 100644
--- a/ui/src/views/Logs.svelte
+++ b/ui/src/views/Logs.svelte
@@ -1,21 +1,22 @@
 <script lang="ts">
   import { onDestroy, untrack } from 'svelte'
-  import { app, LEVELS, PRESETS, type Preset } from '../lib/state.svelte'
+  import { app, LEVELS } from '../lib/state.svelte'
   import { api, fetchEvents, fetchLogs } from '../lib/api'
   import { LINES, LogPages, nearEnd } from '../lib/pages.svelte'
   import { ago, bytes, dateTime, firstLine, hhmm, hms, patternParts, plural, searchTerms } from '../lib/format'
   import type { DockerEvent, Entry, Group, Level, StoreStats } from '../lib/types'
   import { isCrash } from '../lib/events'
+  import { pointText } from '../lib/timeframe'
   import Histogram from '../components/Histogram.svelte'
   import Icon from '../components/Icon.svelte'
   import LogRow from '../components/LogRow.svelte'
   import SourcePicker from '../components/SourcePicker.svelte'
+  import RangePicker from '../components/RangePicker.svelte'
   import DownloadMenu from '../components/DownloadMenu.svelte'
   import Spark from '../components/Spark.svelte'
 
   const L = app.logs
   const COL: Record<Level, string> = { ERROR: 'var(--err)', WARN: 'var(--warn)', INFO: 'var(--info)', DEBUG: 'var(--dbg)' }
-  const RANGES: Preset[] = ['auto', ...(Object.keys(PRESETS) as Preset[])]
 
   // The newest page is replaced as a whole on every load; older pages are added by "Show more".
   const pages = new LogPages()
@@ -31,6 +32,7 @@
   let seq = 0
   /** Open the newest entry once the next result arrives (after picking a group). */
   let openFirst = false
+  let rangeOpen = $state(false)
 
   async function load() {
     const id = app.activeId
@@ -56,14 +58,14 @@
 
   // Reload when a filter changes (debounced), and keep a preset range moving.
   $effect(() => {
-    void [app.activeId, [...L.sources].join(), L.q, L.group, L.preset, L.from, L.to, [...L.levels].join()]
+    void [app.activeId, [...L.sources].join(), L.q, L.group, L.preset, L.openEnd, L.from, L.to, [...L.levels].join()]
     // Other filters: the older lines shown so far no longer fit.
     untrack(() => pages.reset())
     const t = setTimeout(load, 80)
     return () => clearTimeout(t)
   })
   $effect(() => {
-    if (!L.preset) return
+    if (!L.moving) return
     const every = L.live ? Math.max(1, app.settings?.logPollSecs ?? 3) * 1000 : 15000
     // A hidden tab catches up when it is shown again instead of polling in the background.
     const t = setInterval(() => !document.hidden && load(), every)
@@ -96,7 +98,7 @@
 
   function toggleLive() {
     L.live = !L.live
-    if (L.live && !L.preset) L.setPreset('auto')
+    if (L.live && !L.moving) L.setPreset('auto')
   }
 
   function setQ(q: string) {
@@ -185,6 +187,13 @@
     if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || app.drawer || app.palette || app.help || app.ask || e.ctrlKey || e.metaKey || e.altKey) return
     if (e.key === 'f') {
       L.maxi = !L.maxi
+    } else if (e.key === 't') {
+      e.preventDefault()
+      rangeOpen = true
+    } else if (e.key === '[' || e.key === ']') {
+      L.step(e.key === '[' ? -1 : 1)
+    } else if (e.key === '-') {
+      L.zoomOut()
     } else if (e.key === '/') {
       e.preventDefault()
       search?.focus()
@@ -210,11 +219,7 @@
 
 <section class="panel">
   <div class="pb fbar">
-    <div class="seg" role="group" aria-label="Time range">
-      {#each RANGES as p (p)}
-        <button aria-pressed={L.preset === p} onclick={() => L.setPreset(p)} title={p === 'auto' ? 'From the oldest stored line until now' : undefined}>{p === 'auto' ? 'Auto' : p}</button>
-      {/each}
-    </div>
+    <RangePicker bind:open={rangeOpen} />
     <SourcePicker />
     <span class="lvgroup" role="group" aria-label="Levels">
       {#each LEVELS as l (l)}
@@ -239,9 +244,10 @@
   <div class="ph" style="border-top:1px solid var(--line);border-bottom:0;padding-bottom:0">
     <h2>Log volume</h2>
     <span class="muted mono" style="font-size:12px">
-      {#if L.preset === 'auto'}since {hhmm(shown.from || L.window()[0])}{:else if L.preset}last {L.preset}{:else}{hhmm(L.from)} – {hhmm(L.to)}
-        <button class="btn ghost sm" onclick={() => L.setPreset('auto')}>Reset zoom</button>{/if}
+      {#if L.preset === 'auto'}since {hhmm(shown.from || L.window()[0])}{:else}{L.rangeLabel(app.now)}{/if}
     </span>
+    {#if L.preset !== 'auto'}<button class="btn ghost sm" onclick={() => L.zoomOut()} title="Twice as long ( - )">Zoom out</button>{/if}
+    {#if !L.preset}<button class="btn ghost sm" onclick={() => L.setPreset('auto')} title="Back to all stored lines">Reset range</button>{/if}
     {#if loading}<span class="spinner" style="width:12px;height:12px"></span>{/if}
     <span class="pill ok hide-sm" title="Logs are collected per replica and kept on this computer" style="font-size:11.5px">
       <span class="dot"></span>Local store · {app.settings?.retentionDays ?? 2} {app.settings?.retentionDays === 1 ? 'day' : 'days'}{#if stats} · {bytes(stats.bytes)}{/if}{#if res?.syncedAt} · synced {ago(res.syncedAt, app.now)}{/if}
@@ -353,11 +359,13 @@
             </button>
             <span class="muted">{pages.entries.length.toLocaleString()} of {res.result.total.toLocaleString()} shown</span>
           {:else if pages.more}
-            <span>The stream shows at most {LINES.max.toLocaleString()} lines. For older ones, drag across the graph to pick an earlier range, or download them.</span>
+            <span>The stream shows at most {LINES.max.toLocaleString()} lines. For older ones, pick an earlier range (<kbd>[</kbd> or type one under <kbd>t</kbd>), or download them.</span>
+            <button class="btn ghost sm" onclick={() => L.step(-1)}>Earlier range</button>
           {:else if L.preset === 'auto'}
             <span class="muted">These are all the stored lines that match{#if last}, back to {app.now - last.ts / 1000 > 20 * 3600e3 ? dateTime(last.ts / 1000) : hms(last.ts / 1000).slice(0, 8)}{/if}. Stackline keeps {app.settings?.retentionDays ?? 2} {app.settings?.retentionDays === 1 ? 'day' : 'days'} of logs, and reads a replica 6 hours back when it first sees it.</span>
           {:else}
-            <span class="muted">No older lines in this range, which starts at {hhmm(shown.from)}.</span>
+            <span class="muted">No older lines in this range, which starts at {pointText(shown.from, app.now)}.</span>
+            <button class="btn ghost sm" onclick={() => L.step(-1)}>Earlier range</button>
             <button class="btn ghost sm" onclick={() => L.setPreset('auto')}>Show all stored lines</button>
           {/if}
         </div>

From 05358793294fd9a516a37875265884ade7e892b6 Mon Sep 17 00:00:00 2001
From: "snake.tech" <9079973+snaketech-tu@users.noreply.github.com>
Date: Tue, 10 Nov 2026 08:16:17 +0000
Subject: [PATCH 3/3] Release 0.7.0

---
 Cargo.lock                | 6 +++---
 Cargo.toml                | 2 +-
 desktop/package-lock.json | 4 ++--
 desktop/package.json      | 2 +-
 ui/package-lock.json      | 4 ++--
 ui/package.json           | 2 +-
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index e8cb154..b2625b7 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3971,7 +3971,7 @@ checksum = "6ce2be8dc25455e1f91df71bfa12ad37d7af1092ae736f3a6cd0e37bc7810596"
 
 [[package]]
 name = "stackline"
-version = "0.6.0"
+version = "0.7.0"
 dependencies = [
  "anyhow",
  "axum",
@@ -3999,7 +3999,7 @@ dependencies = [
 
 [[package]]
 name = "stackline-core"
-version = "0.6.0"
+version = "0.7.0"
 dependencies = [
  "anyhow",
  "bytes",
@@ -4020,7 +4020,7 @@ dependencies = [
 
 [[package]]
 name = "stackline-desktop"
-version = "0.6.0"
+version = "0.7.0"
 dependencies = [
  "anyhow",
  "serde_json",
diff --git a/Cargo.toml b/Cargo.toml
index afe74a1..618e629 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -4,7 +4,7 @@ members = ["crates/stackline-core", "crates/stackline", "desktop/src-tauri"]
 default-members = ["crates/stackline-core", "crates/stackline"]
 
 [workspace.package]
-version = "0.6.0"
+version = "0.7.0"
 edition = "2024"
 license = "Apache-2.0"
 repository = "https://github.com/snaketech-tu/stackline"
diff --git a/desktop/package-lock.json b/desktop/package-lock.json
index 9ebef7f..d0500e1 100644
--- a/desktop/package-lock.json
+++ b/desktop/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "stackline-desktop",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "stackline-desktop",
-      "version": "0.6.0",
+      "version": "0.7.0",
       "devDependencies": {
         "@tauri-apps/cli": "^2"
       }
diff --git a/desktop/package.json b/desktop/package.json
index 2c83558..fbc27d1 100644
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -1,7 +1,7 @@
 {
   "name": "stackline-desktop",
   "private": true,
-  "version": "0.6.0",
+  "version": "0.7.0",
   "scripts": {
     "tauri": "tauri"
   },
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 273dd78..19bee7c 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "stackline-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "stackline-ui",
-      "version": "0.6.0",
+      "version": "0.7.0",
       "dependencies": {
         "@fontsource/jetbrains-mono": "^5.3.0",
         "@fontsource/plus-jakarta-sans": "^5.3.0"
diff --git a/ui/package.json b/ui/package.json
index 951529d..598088e 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "stackline-ui",
   "private": true,
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "scripts": {
     "dev": "vite",