opencode-global-habit-profile 0.0.0-stage → 0.1.0

package/src/ui-model.js

@@ -0,0 +1,108 @@
+function directoryName(value) {
+  const name = typeof value === 'string' ? value.trim() : ''
+  return name && name.length <= 128 && !/[\\/\u0000-\u001f\u007f]/.test(name) ? name : ''
+}
+
+export function groupCheckpoints(checkpoints) {
+  const groups = new Map()
+  const directories = new Map()
+  for (const item of checkpoints) {
+    const key = item.project
+    if (!groups.has(key)) groups.set(key, { key, project: item.project, items: [] })
+    groups.get(key).items.push(item)
+    const name = directoryName(item?.projectDirectoryName)
+    if (name) {
+      const createdAt = typeof item?.createdAt === 'string' ? item.createdAt : ''
+      if (!directories.has(key) || createdAt >= directories.get(key).createdAt) directories.set(key, { name, createdAt })
+    }
+  }
+  return [...groups.values()].map((group) => ({ ...group, directoryName: directories.get(group.key)?.name ?? '' }))
+}
+
+export function groupTodos(todos = [], includeArchived = false, directories = new Map()) {
+  const groups = new Map()
+  const names = new Map()
+  for (const todo of todos) {
+    if (!includeArchived && todo.status === 'archived') continue
+    if (!groups.has(todo.project)) groups.set(todo.project, { key: todo.project, project: todo.project, total: 0, pending: [], completed: [], archived: [] })
+    const group = groups.get(todo.project)
+    const name = directoryName(todo.projectDirectoryName)
+    if (name) {
+      const createdAt = typeof todo.createdAt === 'string' ? todo.createdAt : ''
+      if (!names.has(todo.project) || createdAt >= names.get(todo.project).createdAt) names.set(todo.project, { name, createdAt })
+    }
+    group[todo.status].push(todo)
+    group.total++
+  }
+  return [...groups.values()].map((group) => ({ ...group, directoryName: names.get(group.key)?.name ?? directories.get(group.key) ?? '' }))
+}
+
+export function projectDirectoryLabel(scope, language = 'es') {
+  return typeof scope?.directoryName === 'string' && scope.directoryName.trim()
+    ? scope.directoryName
+    : language === 'es' ? 'Directorio no disponible' : 'Directory unavailable'
+}
+
+export function checkpointTitle(item, language = 'es') {
+  return typeof item?.sessionTitle === 'string' && item.sessionTitle.trim()
+    ? item.sessionTitle
+    : language === 'es' ? 'Título no disponible' : 'Title unavailable'
+}
+
+function reportCategory(key) {
+  const match = /^(request:)?(tool|cli):([^:]+)$/.exec(key)
+  if (!match) return null
+  return {
+    group: match[2] === 'tool' ? 'tools' : 'commands',
+    kind: match[2],
+    name: match[3],
+    signal: match[1] ? 'request' : 'activity',
+  }
+}
+
+export function reportGroups(counts = {}) {
+  const groups = Object.fromEntries(['tools', 'commands'].map((key) => [key, { key, total: 0, items: [] }]))
+  for (const [key, count] of Object.entries(counts)) {
+    const category = reportCategory(key)
+    if (!category || !Number.isSafeInteger(count) || count < 1) continue
+    const group = groups[category.group]
+    group.total += count
+    group.items.push({ key, name: category.name, kind: category.kind, signal: category.signal, count })
+  }
+  for (const group of Object.values(groups)) group.items.sort((a, b) => b.count - a.count || a.key.localeCompare(b.key))
+  return Object.values(groups)
+}
+
+export function dailyTrend(daily = {}, today = new Date().toISOString().slice(0, 10)) {
+  const cutoff = new Date(`${today}T00:00:00.000Z`)
+  cutoff.setUTCDate(cutoff.getUTCDate() - 364)
+  const oldest = cutoff.toISOString().slice(0, 10)
+  return Object.entries(daily).filter(([date]) => /^\d{4}-\d{2}-\d{2}$/.test(date) && date >= oldest && date <= today && new Date(`${date}T00:00:00.000Z`).toISOString().slice(0, 10) === date).sort(([a], [b]) => a.localeCompare(b)).map(([date, counts]) => {
+    const row = { date, tools: 0, commands: 0 }
+    for (const [key, count] of Object.entries(counts ?? {})) {
+      const category = reportCategory(key)
+      if (category && Number.isSafeInteger(count) && count > 0) row[category.group] += count
+    }
+    return row
+  }).filter(({ tools, commands }) => tools + commands > 0)
+}
+
+export function trendBars(series) {
+  if (!series.length) return []
+  const width = 720, height = 180, left = 28, right = 16, top = 12, bottom = 28
+  const days = series.map(({ date }) => Date.parse(`${date}T00:00:00.000Z`))
+  const distinctDays = days.at(-1) !== days[0]
+  const span = distinctDays ? Math.round((days.at(-1) - days[0]) / 86_400_000) : 1
+  const max = Math.max(1, ...series.flatMap(({ tools, commands }) => [tools, commands]))
+  const plotWidth = width - left - right, plotHeight = height - top - bottom
+  const slot = plotWidth / (span + 1), barWidth = Math.max(.5, slot * .18)
+  const groupWidth = barWidth * 2
+  return series.flatMap((row, index) => {
+    const progress = distinctDays ? ((days[index] - days[0]) / 86_400_000) / span : .5
+    const center = left + groupWidth / 2 + progress * (plotWidth - groupWidth)
+    return ['tools', 'commands'].map((key, offset) => {
+      const barHeight = row[key] / max * plotHeight
+      return { date: row.date, key, count: row[key], x: center + (offset - 1) * barWidth, y: top + plotHeight - barHeight, width: barWidth, height: barHeight }
+    }).filter(({ count }) => count > 0)
+  })
+}

package/src/ui-navigation.js

@@ -0,0 +1,13 @@
+export const viewIds = Object.freeze(['reports', 'checkpoints', 'todos'])
+
+export function viewFromHash(hash) {
+  const view = hash.startsWith('#') ? hash.slice(1) : hash
+  return viewIds.includes(view) ? view : viewIds[0]
+}
+
+export function watchHashView(target, onChange) {
+  const sync = () => onChange(viewFromHash(target.location.hash))
+  target.addEventListener('hashchange', sync)
+  sync()
+  return () => target.removeEventListener('hashchange', sync)
+}

package/src/ui-server.js

@@ -0,0 +1,273 @@
+import { randomBytes, timingSafeEqual } from "node:crypto"
+import { lstatSync, mkdirSync, watch } from "node:fs"
+import { mkdir, readFile, writeFile, lstat, unlink, rename, rmdir } from "node:fs/promises"
+import { basename, dirname, join } from "node:path"
+import { fileURLToPath } from "node:url"
+import { homedir } from "node:os"
+import { createServer, request as httpRequest } from "node:http"
+import { clearCheckpoints, clearHabits, deleteCheckpoint, getData, storePath, updateCheckpoint } from "./store.js"
+
+const maxBody = 8192
+const distPath = join(fileURLToPath(new URL("../dist/", import.meta.url)))
+const controlPath = "/__habit_memory_control"
+export function createUiServer({ port = 0 } = {}) {
+  const token = randomBytes(32).toString("hex")
+  const clients = new Set()
+  let watcher, refreshTimer
+  const server = createServer(async (req, res) => {
+    const host = req.headers.host
+    if (![ `127.0.0.1:${server.address()?.port}`, `localhost:${server.address()?.port}` ].includes(host)) { res.writeHead(403).end("Forbidden"); return }
+    const method = req.method || "GET", url = new URL(req.url || "/", `http://${host}`)
+    if (url.pathname === controlPath) {
+      const supplied = req.headers["x-habit-token"]
+      const authorized = ["GET", "POST"].includes(method) && req.headers.origin === `http://${host}` && typeof supplied === "string" && Buffer.byteLength(supplied) === Buffer.byteLength(token) && timingSafeEqual(Buffer.from(supplied), Buffer.from(token))
+      if (!authorized) { res.writeHead(403).end(); return }
+      if (method === "GET") { res.writeHead(200, { "cache-control": "no-store" }).end("active"); return }
+      res.writeHead(200, { "cache-control": "no-store" }).end("stopping")
+      setImmediate(() => { server.closeStreams(); server.close() })
+      return
+    }
+    const securityHeaders = { "x-content-type-options": "nosniff", "content-security-policy": "default-src 'none'; script-src 'self'; style-src 'self'; connect-src 'self'; base-uri 'none'; frame-ancestors 'none'", "referrer-policy": "no-referrer" }
+    const send = (status, payload, type = "application/json; charset=utf-8") => { res.writeHead(status, { "content-type": type, "cache-control": "no-store", ...securityHeaders }); res.end(payload) }
+    if (method === "GET" && url.pathname === "/") {
+      try { const html = (await readFile(join(distPath, "index.html"), "utf8")).replace("<head>", `<head><meta name="habit-token" content="${token}">`); send(200, html, "text/html; charset=utf-8") }
+      catch { send(503, "WebUI assets are missing (dist/index.html was not found). Run `npm run build` from the plugin directory to generate `dist/`.", "text/plain; charset=utf-8") }
+      return
+    }
+    const asset = /^\/assets\/(index-[a-zA-Z0-9_-]+\.(?:js|css))$/.exec(url.pathname)
+    if (method === "GET" && asset) {
+      try { const file = asset[1], type = file.endsWith(".js") ? "text/javascript; charset=utf-8" : "text/css; charset=utf-8"; send(200, await readFile(join(distPath, "assets", file)), type) }
+      catch { send(404, "Not found", "text/plain; charset=utf-8") }
+      return
+    }
+    if (method === "GET" && url.pathname === "/api/data") {
+      try { const data = await getData(); send(200, JSON.stringify({ habits: data.habits, checkpoints: data.checkpoints, todos: data.todos })) }
+      catch { send(500, JSON.stringify({ error: "Unable to read local memory" })) }
+      return
+    }
+    if (method === "GET" && url.pathname === "/api/events") {
+      res.writeHead(200, { "content-type": "text/event-stream; charset=utf-8", "cache-control": "no-store", connection: "keep-alive", ...securityHeaders })
+      res.write(": connected\n\n")
+      clients.add(res)
+      const heartbeat = setInterval(() => {
+        if (res.writableEnded) return
+        try { res.write(": ping\n\n") } catch { res.end() }
+      }, 30_000)
+      heartbeat.unref?.()
+      res.on("close", () => { clearInterval(heartbeat); clients.delete(res) })
+      return
+    }
+    if (method !== "POST" || !["/api/checkpoint/edit", "/api/checkpoint/delete", "/api/scope/delete", "/api/habits/clear"].includes(url.pathname)) { send(404, JSON.stringify({ error: "Not found" })); return }
+    const origin = req.headers.origin
+    if (origin !== `http://${host}` || req.headers["x-habit-token"] !== token) { send(403, JSON.stringify({ error: "Forbidden" })); return }
+    let raw = ""
+    try {
+      if (!/^application\/json(?:\s*;|$)/i.test(req.headers["content-type"] || "")) throw new Error()
+      for await (const chunk of req) { raw += chunk; if (Buffer.byteLength(raw) > maxBody) { send(413, JSON.stringify({ error: "Request too large" })); return } }
+      const body = JSON.parse(raw)
+      const clearingHabits = url.pathname === "/api/habits/clear", editing = url.pathname === "/api/checkpoint/edit", deleting = url.pathname === "/api/checkpoint/delete"
+      const fields = clearingHabits ? ["confirm"] : editing ? ["project", "context", "id", "summary"] : deleting ? ["project", "context", "id"] : ["project", "context"]
+      if (!body || Array.isArray(body) || Object.keys(body).length !== fields.length || Object.keys(body).some((key) => !fields.includes(key))) throw new Error()
+      if (clearingHabits) {
+        if (body.confirm !== true) throw new Error()
+        await clearHabits()
+        send(200, JSON.stringify({ changed: true }))
+        return
+      }
+      const changed = editing ? await updateCheckpoint(body.project, body.context, body.id, body.summary) : deleting ? await deleteCheckpoint(body.project, body.context, body.id) : await clearCheckpoints(body.project, body.context)
+      send(changed ? 200 : 404, JSON.stringify({ changed }))
+    } catch { send(400, JSON.stringify({ error: "Invalid request" })) }
+  })
+  server.on("clientError", (_error, socket) => socket.end("HTTP/1.1 400 Bad Request\r\nConnection: close\r\n\r\n"))
+  try {
+    const directory = dirname(storePath)
+    mkdirSync(directory, { recursive: true, mode: 0o700 })
+    watcher = watch(directory, (_event, filename) => {
+      if (filename && filename !== basename(storePath)) return
+      if (refreshTimer) return
+      refreshTimer = setTimeout(() => {
+        refreshTimer = undefined
+        for (const client of clients) {
+          if (client.writableEnded) { clients.delete(client); continue }
+          try { client.write("data: refresh\n\n") } catch { clients.delete(client) }
+        }
+      }, 100)
+    })
+    watcher.unref?.()
+    watcher.on("error", () => { watcher?.close(); watcher = undefined })
+  } catch {}
+  server.closeStreams = () => { for (const client of clients) { try { client.end() } catch {} } clients.clear() }
+  server.on("close", () => { clearTimeout(refreshTimer); watcher?.close(); server.closeStreams() })
+  server.habitToken = token
+  return server.listen(port, "127.0.0.1")
+}
+
+let uiServer
+
+const ipcFiles = () => {
+  const base = process.env.XDG_RUNTIME_DIR && isSafeRuntimeDir(process.env.XDG_RUNTIME_DIR)
+    ? join(process.env.XDG_RUNTIME_DIR, "habit-memory")
+    : join(homedir(), ".local", "share", "habit-memory")
+  const dir = base
+  return { dir, descriptor: join(dir, "ui-control.json"), token: join(dir, "ui-control.token"), lock: join(dir, "ui-control.lock") }
+}
+
+function isSafeRuntimeDir(path) {
+  try {
+    const stat = lstatSync(path)
+    return stat.isDirectory() && stat.uid === process.getuid?.() && !(stat.mode & 0o077)
+  } catch { return false }
+}
+
+async function withLock(paths, fn) {
+  const deadline = Date.now() + 3000
+  while (true) {
+    try { await mkdir(paths.lock, { mode: 0o700 }); break }
+    catch (error) { if (error.code !== "EEXIST" || Date.now() >= deadline) throw error; await new Promise((resolve) => setTimeout(resolve, 25)) }
+  }
+  try { return await fn() } finally { await rmdir(paths.lock).catch(() => {}) }
+}
+
+async function readDescriptor(paths = ipcFiles()) {
+  const stat = await lstat(paths.descriptor)
+  if (!stat.isFile() || stat.uid !== process.getuid?.() || (stat.mode & 0o077)) throw new Error("Unsafe UI control descriptor")
+  const raw = await readFile(paths.descriptor, "utf8")
+  const descriptor = JSON.parse(raw)
+  const secret = await lstat(paths.token)
+  if (!secret.isFile() || secret.uid !== process.getuid?.() || (secret.mode & 0o077) || descriptor.token !== await readFile(paths.token, "utf8") || !/^[a-f0-9]{64}$/.test(descriptor.token) || !Number.isInteger(descriptor.port) || descriptor.port < 1 || descriptor.port > 65535) throw new Error("Invalid UI control descriptor")
+  return { ...descriptor, paths, identity: { descriptor: { dev: stat.dev, ino: stat.ino, raw }, token: { dev: secret.dev, ino: secret.ino } } }
+}
+
+function controlRequest(descriptor, { method = "GET", path = controlPath, timeout = 500, bodyLimit = 64 } = {}) {
+  return new Promise((resolve, reject) => {
+    const req = httpRequest({ hostname: "127.0.0.1", port: descriptor.port, path, method, headers: { host: `127.0.0.1:${descriptor.port}`, origin: `http://127.0.0.1:${descriptor.port}`, ...(path === controlPath ? { "x-habit-token": descriptor.token } : {}) } }, (res) => {
+      const chunks = []
+      let size = 0
+      res.on("data", (chunk) => {
+        size += chunk.length
+        if (size > bodyLimit) { req.destroy(new Error("Control response too large")); return }
+        chunks.push(chunk)
+      })
+      res.once("end", () => { clearTimeout(timer); resolve({ status: res.statusCode, body: Buffer.concat(chunks).toString() }) })
+      res.once("aborted", () => { clearTimeout(timer); reject(Object.assign(new Error("Control response aborted"), { code: "ECONNRESET" })) })
+      res.once("error", (error) => { clearTimeout(timer); reject(error) })
+    })
+    const timer = setTimeout(() => req.destroy(Object.assign(new Error("Control request timed out"), { code: "ETIMEDOUT" })), timeout)
+    req.once("error", (error) => { clearTimeout(timer); reject(error) })
+    req.end()
+  })
+}
+
+async function requestRemoteStop(descriptor) {
+  try {
+    const response = await controlRequest(descriptor, { method: "POST", timeout: 1000 })
+    if (response.status !== 200 || response.body !== "stopping") return false
+    const deadline = Date.now() + 1500
+    while (Date.now() < deadline) {
+      try { await controlRequest(descriptor, { path: "/", timeout: 100, bodyLimit: 0 }) }
+      catch (error) { if (error.code === "ECONNREFUSED") return true }
+      await new Promise((done) => setTimeout(done, 25))
+    }
+    return false
+  } catch { return false }
+}
+
+async function remoteIsActive(descriptor) {
+  for (let attempt = 0; attempt < 2; attempt++) {
+    try {
+      const response = await controlRequest(descriptor)
+      if (response.status === 200 && response.body === "active") return true
+      throw new Error("Existing UI control endpoint returned an unexpected response")
+    } catch (error) {
+      if (error.code === "ECONNREFUSED") return false
+      if (error.code === "ETIMEDOUT") throw new Error("Existing UI control endpoint timed out")
+      if (error.message.startsWith("Existing UI control endpoint")) throw error
+      if (attempt === 0 && error.code === "ECONNRESET") continue
+      const code = typeof error.code === "string" && /^[A-Z0-9_]{1,40}$/.test(error.code) ? ` (${error.code})` : ""
+      throw new Error(`Existing UI control endpoint could not be verified${code}`)
+    }
+  }
+}
+
+async function removeStale(paths, existing) {
+  const current = await readDescriptor(paths)
+  if (current.identity.descriptor.dev !== existing.identity.descriptor.dev || current.identity.descriptor.ino !== existing.identity.descriptor.ino || current.identity.descriptor.raw !== existing.identity.descriptor.raw || current.identity.token.dev !== existing.identity.token.dev || current.identity.token.ino !== existing.identity.token.ino || current.token !== existing.token) throw new Error("UI control state changed during recovery")
+  await unlink(paths.descriptor)
+  const tokenStat = await lstat(paths.token)
+  if (tokenStat.dev !== existing.identity.token.dev || tokenStat.ino !== existing.identity.token.ino || await readFile(paths.token, "utf8") !== existing.token) throw new Error("UI control token changed during recovery")
+  await unlink(paths.token)
+}
+
+async function removeOwned(paths, token, descriptorIdentity) {
+  try {
+    if (await readFile(paths.token, "utf8") !== token) return
+    if (!descriptorIdentity) { await unlink(paths.token); return }
+    const current = await readDescriptor(paths)
+    const stat = await lstat(paths.descriptor)
+    if (current.token !== token || stat.dev !== descriptorIdentity.dev || stat.ino !== descriptorIdentity.ino) return
+    await unlink(paths.descriptor)
+    if (await readFile(paths.token, "utf8") === token) await unlink(paths.token)
+  } catch {}
+}
+
+async function installControl(server) {
+  const paths = ipcFiles()
+  await mkdir(paths.dir, { recursive: true, mode: 0o700 })
+  const dirStat = await lstat(paths.dir)
+  if (!dirStat.isDirectory() || dirStat.uid !== process.getuid?.() || (dirStat.mode & 0o077)) throw new Error("Unsafe Habit Memory control directory")
+  await withLock(paths, async () => {
+    let descriptorExists = true
+    try { await lstat(paths.descriptor) }
+    catch (error) { if (error.code === "ENOENT") descriptorExists = false; else throw error }
+    if (descriptorExists) {
+      const existing = await readDescriptor(paths)
+      if (await remoteIsActive(existing)) {
+        server.remotePort = existing.port
+        server.close()
+        return
+      }
+      await removeStale(paths, existing)
+    }
+    const token = server.habitToken
+    let identity
+    server.once("close", () => {
+      if (identity) void withLock(paths, () => removeOwned(paths, token, identity)).catch(() => {})
+    })
+    const tempToken = `${paths.token}.${randomBytes(8).toString("hex")}.tmp`, tempDescriptor = `${paths.descriptor}.${randomBytes(8).toString("hex")}.tmp`
+    await writeFile(tempToken, token, { mode: 0o600, flag: "wx" })
+    await rename(tempToken, paths.token)
+    const publish = () => {
+      const descriptor = JSON.stringify({ port: server.address().port, token })
+      return writeFile(tempDescriptor, descriptor, { mode: 0o600, flag: "wx" }).then(() => rename(tempDescriptor, paths.descriptor))
+    }
+    if (!server.listening) throw new Error("UI listener closed before control publication")
+    await publish()
+    identity = await lstat(paths.descriptor)
+  })
+}
+
+export function startUiServer() {
+  if (uiServer?.listening) return uiServer
+  const server = createUiServer({ port: Number(process.env.HABIT_MEMORY_UI_PORT || 43109) })
+  uiServer = server
+  server.controlReady = new Promise((resolve, reject) => {
+    server.once("listening", () => installControl(server).then(resolve, (error) => {
+      server.close()
+      reject(error)
+    }))
+    server.once("error", reject)
+  })
+  server.once("close", () => { if (uiServer === server) uiServer = undefined })
+  server.on("listening", () => process.stdout.write(`Habit Memory UI: http://127.0.0.1:${server.address().port}\n`))
+  return server
+}
+
+export async function stopUiServer() {
+  if (!uiServer?.listening) return withLock(ipcFiles(), async () => { const descriptor = await readDescriptor(); if (!await requestRemoteStop(descriptor)) return false; return true }).catch(() => false)
+  const server = uiServer
+  await server.controlReady
+  server.closeStreams()
+  return new Promise((resolve, reject) => server.close((error) => error ? reject(error) : resolve(true)))
+}
+
+if (process.argv[1] && new URL(import.meta.url).pathname === process.argv[1]) startUiServer()

package/src/ui.css

@@ -0,0 +1,166 @@
+:root {
+  color-scheme: dark;
+  --canvas: #0b1119;
+  --surface: #101923;
+  --surface-raised: #141f2b;
+  --ink: #dce6ed;
+  --muted: #91a2b1;
+  --brand: #59d6c8;
+  --danger: #ed8589;
+  --series-commands: #b69af7;
+  --line: color-mix(in srgb, var(--ink) 12%, transparent);
+  --line-soft: color-mix(in srgb, var(--ink) 7%, transparent);
+  --focus: var(--brand);
+  background: var(--canvas);
+  color: var(--ink);
+  font: 14px/1.5 system-ui, sans-serif;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+  --canvas: #f2f6f8;
+  --surface: #ffffff;
+  --surface-raised: #e8eff2;
+  --ink: #172733;
+  --muted: #536a78;
+  --brand: #087d75;
+  --danger: #a8323c;
+  --series-commands: #6045a8;
+  --line: color-mix(in srgb, var(--ink) 17%, transparent);
+  --line-soft: color-mix(in srgb, var(--ink) 10%, transparent);
+}
+
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body { margin: 0; background: var(--canvas); color: var(--ink); }
+button, select { color: inherit; font: inherit; }
+
+.app-shell { min-height: 100vh; background: var(--canvas); }
+.sidebar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .75rem 1rem;
+  padding: .875rem 1rem .75rem;
+  border-bottom: 1px solid var(--line);
+  background: var(--canvas);
+}
+.brand { color: var(--ink); font-size: 1rem; font-weight: 750; letter-spacing: -.035em; text-decoration: none; white-space: nowrap; }
+.brand::before { content: "HM"; display: inline-grid; width: 1.75rem; height: 1.75rem; margin-right: .55rem; place-items: center; border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent); border-radius: .35rem; color: var(--brand); font-size: .65rem; letter-spacing: .02em; vertical-align: -.2rem; }
+.sidebar-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; flex: none; gap: .25rem; padding: .2rem; border: 1px solid var(--line-soft); border-radius: .45rem; background: var(--surface); }
+.sidebar-nav a { flex: 1; min-width: 0; padding: .45rem .55rem; border-radius: .3rem; color: var(--muted); font-size: .82rem; font-weight: 650; overflow-wrap: anywhere; text-align: center; text-decoration: none; }
+.sidebar-nav a:hover, .sidebar-nav a:focus-visible { color: var(--ink); background: var(--surface-raised); }
+.sidebar-nav a[aria-current="page"] { color: color-mix(in srgb, var(--brand) 90%, var(--ink)); background: var(--surface-raised); }
+.local-note { flex: 1 1 9rem; max-width: 13rem; margin: 0; color: var(--muted); font-size: .75rem; }
+.workspace { min-width: 0; }
+.masthead { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.4rem 1rem 1.1rem; border-bottom: 1px solid var(--line-soft); }
+.eyebrow { margin: 0 0 .35rem; color: var(--brand); font-size: .68rem; font-weight: 750; letter-spacing: .13em; }
+h1 { margin: 0; font-size: clamp(1.55rem, 5vw, 2.1rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.18; text-wrap: balance; }
+.intro { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; }
+.masthead-controls { display: flex; align-items: center; gap: .5rem; }
+.language { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .75rem; font-weight: 650; }
+.language select, .theme-toggle { min-height: 2.25rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--surface); color: var(--ink); font-size: .78rem; font-weight: 650; }
+.theme-toggle { cursor: pointer; }
+
+main { width: min(100%, 88rem); margin-inline: auto; padding: 1rem 1rem 3rem; }
+.page-note, .section-note { color: var(--muted); }
+.page-note { max-width: 60rem; margin: 0 0 1rem; font-size: .8rem; }
+.stat-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.8rem; }
+.stat-card { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; min-height: 3.8rem; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); color: var(--muted); font-size: .76rem; font-weight: 650; }
+.stat-card span { min-width: 0; overflow-wrap: anywhere; }
+.stat-card strong { color: var(--brand); font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1; }
+.checkpoint-summary { grid-template-columns: minmax(0, 1fr); max-width: 20rem; margin: .8rem 0 1.2rem; }
+main > section { margin-top: 2rem; scroll-margin-top: 1rem; }
+h2 { display: flex; align-items: baseline; gap: .65rem; margin: 0; font-size: 1.15rem; font-weight: 680; letter-spacing: -.025em; text-wrap: balance; }
+h3 { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin: 0; font-size: .86rem; font-weight: 680; line-height: 1.4; text-wrap: balance; }
+.section-note { margin: .25rem 0 .8rem; font-size: .8rem; }
+.notice { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; color: var(--danger); }
+
+.report-heading { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
+.report-heading .section-note { max-width: 58rem; margin-bottom: 0; }
+.include-archived { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; color: var(--muted); font-size: .8rem; font-weight: 650; cursor: pointer; }
+.include-archived input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--brand); }
+.include-archived input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
+.report-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: .8rem; }
+.report-card, .trend-panel { min-width: 0; padding: .8rem .85rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); }
+.report-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
+.report-total { flex: none; color: var(--brand); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
+.report-ranking { margin: .55rem 0 0; padding: 0; list-style: none; }
+.report-ranking li { display: flex; justify-content: space-between; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--line-soft); }
+.report-ranking li > strong { flex: none; color: var(--brand); font-variant-numeric: tabular-nums; }
+.report-label { min-width: 0; overflow-wrap: anywhere; }
+.report-label code { display: block; margin-top: .15rem; color: var(--muted); font-size: .7rem; }
+.empty-report { margin: .7rem 0 0; color: var(--muted); font-size: .8rem; }
+.trend-panel { margin-top: .65rem; }
+.trend-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .65rem 0 .2rem; padding: 0; color: var(--muted); font-size: .72rem; list-style: none; }
+.trend-legend li::before { display: inline-block; width: .48rem; height: .48rem; margin-right: .35rem; border-radius: .1rem; background: currentColor; content: ""; }
+.tools-series { color: var(--brand); }
+.commands-series { color: var(--series-commands); }
+.trend-chart { display: block; width: 100%; max-width: 100%; height: auto; overflow: hidden; }
+.trend-chart .chart-axis { stroke: var(--line); stroke-width: 1; }
+.trend-chart text { fill: var(--muted); font: 10px system-ui, sans-serif; }
+.trend-chart rect { rx: 1px; }
+.trend-chart .tools-series { fill: var(--brand); }
+.trend-chart .commands-series { fill: var(--series-commands); }
+
+.scope { min-width: 0; border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); }
+.scope-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; margin-top: .8rem; }
+.project-summary { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .8rem; cursor: pointer; }
+.project-summary::after { margin-left: auto; color: var(--muted); content: "⌄"; font-size: 1.2rem; }
+.scope[open] > .project-summary::after { content: "⌃"; }
+.project-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.scope-provenance { display: grid; min-width: 0; gap: .4rem; }
+.scope-caption { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--brand); font-size: .67rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
+.scope-caption::before { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: var(--brand); }
+.scope-caption .scope-directory { min-width: 0; color: var(--ink); font-size: .82rem; letter-spacing: normal; text-transform: none; overflow-wrap: anywhere; }
+code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
+.project-summary code, .entry-context code { display: inline-block; max-width: 100%; padding: .15rem .35rem; border: 1px solid var(--line-soft); border-radius: .25rem; background: var(--canvas); font-size: .77rem; overflow-wrap: anywhere; }
+.project-checkpoints { border-top: 1px solid var(--line-soft); }
+.todo-status-list { display: grid; padding: .7rem .8rem; border-top: 1px solid var(--line-soft); }
+.todo-status + .todo-status { padding-top: .65rem; border-top: 1px solid var(--line-soft); }
+.todo-status-heading { color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
+.todo-status-heading span:last-child { color: var(--brand); font-variant-numeric: tabular-nums; }
+.todo-items { margin: .35rem 0 0; padding: 0; list-style: none; }
+.todo-items li { padding: .5rem 0; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; white-space: pre-wrap; }
+.entry { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; padding: .8rem; }
+.entry + .entry { border-top: 1px solid var(--line-soft); }
+.entry-content { min-width: 0; }
+.entry-title { display: block; margin: 0 0 .25rem; overflow-wrap: anywhere; }
+.entry-summary { margin: 0 0 .3rem; white-space: pre-wrap; overflow-wrap: anywhere; }
+.entry-context { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0 0 .25rem; color: var(--muted); font-size: .72rem; }
+time { color: var(--muted); font-size: .72rem; }
+.entry-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
+
+button, select { min-height: 2.35rem; padding: .4rem .65rem; border: 1px solid var(--line); border-radius: .32rem; background: var(--surface-raised); color: var(--ink); cursor: pointer; }
+button { font-size: .76rem; font-weight: 650; }
+button:hover:not(:disabled), select:hover { border-color: color-mix(in srgb, var(--brand) 65%, var(--line)); }
+.action-edit { border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); color: var(--brand); }
+.action-delete { border-color: color-mix(in srgb, var(--danger) 46%, var(--line)); color: var(--danger); }
+.action-delete:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
+button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+button:disabled { opacity: .55; cursor: not-allowed; }
+
+@media (min-width: 45rem) {
+  .app-shell { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); }
+  .sidebar { position: sticky; top: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 1.5rem; height: 100vh; min-height: 32rem; padding: 1.5rem 1rem 1rem; border-right: 1px solid var(--line); border-bottom: 0; }
+  .brand { font-size: 1.05rem; }
+  .sidebar-nav { display: flex; flex: none; flex-direction: column; gap: .25rem; padding: .25rem; }
+  .sidebar-nav a { flex: none; padding: .62rem .65rem; text-align: left; }
+  .local-note { flex: none; max-width: none; margin: auto 0 0; }
+  .masthead { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.6rem 1.75rem 1.2rem; }
+  main { padding: 1.25rem 1.75rem 3rem; }
+  .report-heading { flex-direction: row; align-items: center; justify-content: space-between; }
+  .report-heading > button { flex: none; }
+  .entry { flex-direction: row; justify-content: space-between; }
+  .entry-actions { flex: none; }
+}
+
+@media (min-width: 68rem) {
+  .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .scope-list { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
+}

package/src/ui.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './ui.css'
+
+createApp(App).mount('#app')