beadcyte 0.4.0

package/src/web/table.ts

@@ -0,0 +1,201 @@
+// table.ts — rows and sorting for the table view (bp-67g.44).
+//
+// The table is the surface for scanning and sorting rather than for seeing
+// time: one row per bead with everything the app knows about it, every
+// column sortable. Membership comes from the SAME filtered, windowed view
+// model the grid draws — one definition of "what is in view" — with the
+// Gantt's per-group truncation lifted, because dropping rows is a drawing
+// affordance and a table that silently loses them is worse than a long one.
+//
+// The derived columns are read through the same functions the drawer and the
+// tooltip use (buildBeadDetail for estimate and finish, the triage map for
+// the score), so a number here is the number there.
+//
+// DEFAULT SORT (recorded decision): triage score, descending. The table's
+// job is "what next", and the score is the app's one answer to that; bead id
+// is more predictable but says nothing. Ties break on id ascending so the
+// order is stable from load to load. Pure, so all of it is testable.
+
+import type { ViewModel } from "./view-model";
+import type { BeadDetail } from "./bead-detail";
+import type { TriageResult } from "./triage";
+
+export type TableSortKey =
+  | "id"
+  | "title"
+  | "type"
+  | "priority"
+  | "status"
+  | "assignee"
+  | "labels"
+  | "estimate"
+  | "finish"
+  | "triage"
+  | "group";
+
+export type SortDir = "asc" | "desc";
+
+export interface TableSort {
+  key: TableSortKey;
+  dir: SortDir;
+}
+
+export interface TableRow {
+  id: string;
+  title: string;
+  type: string;
+  priority: number;
+  status: string;
+  assignee: string | null;
+  /** The scheduler inferred the assignee; never to be shown as recorded fact. */
+  synthetic: boolean;
+  labels: string[];
+  estimateDays: number | null;
+  /** Days from today, for sorting; the date is for showing. */
+  finishDay: number | null;
+  finishDate: Date | null;
+  /** The finish is the scheduling horizon, a bound rather than a projection. */
+  beyondHorizon: boolean;
+  triage: number | null;
+  groupId: string;
+  group: string;
+}
+
+export interface TableColumn {
+  key: TableSortKey;
+  label: string;
+  /** The direction a fresh click on this column sorts by. */
+  natural: SortDir;
+  numeric?: boolean;
+}
+
+/**
+ * In display order. Each column's natural direction is the one a reader
+ * wants first: P0 before P4, the soonest finish first, the highest score
+ * first, everything textual A to Z.
+ */
+export const COLUMNS: readonly TableColumn[] = [
+  { key: "id", label: "id", natural: "asc" },
+  { key: "title", label: "title", natural: "asc" },
+  { key: "type", label: "type", natural: "asc" },
+  // Chips, not digits: left-aligned like its cells, though it sorts as a number.
+  { key: "priority", label: "pri", natural: "asc" },
+  { key: "status", label: "status", natural: "asc" },
+  { key: "assignee", label: "assignee", natural: "asc" },
+  { key: "labels", label: "labels", natural: "asc" },
+  { key: "estimate", label: "estimate", natural: "asc", numeric: true },
+  { key: "finish", label: "finish", natural: "asc", numeric: true },
+  { key: "triage", label: "triage", natural: "desc", numeric: true },
+  { key: "group", label: "group", natural: "asc" },
+];
+
+export const DEFAULT_SORT: TableSort = { key: "triage", dir: "desc" };
+
+/** Lifecycle order for the status column; anything unknown sorts after, A to Z. */
+const STATUS_ORDER = ["open", "pinned", "in_progress", "in_review", "blocked", "deferred", "closed", "tombstone"];
+
+export interface TableSources {
+  detailFor: (id: string) => Pick<BeadDetail, "estimateDays" | "scheduled"> | null;
+  triage: ReadonlyMap<string, TriageResult>;
+  labelsFor: (id: string) => readonly string[];
+}
+
+/** One row per view-model row, in view-model order (sorting comes after). */
+export function buildTableRows(vm: ViewModel, src: TableSources): TableRow[] {
+  const groupLabel = new Map(vm.groups.map((g) => [g.id, g.label] as const));
+  return vm.rows.map((r) => {
+    const d = src.detailFor(r.beadId);
+    const s = d?.scheduled ?? null;
+    return {
+      id: r.beadId,
+      title: r.title,
+      type: r.issueType,
+      priority: r.priority,
+      status: r.status,
+      assignee: r.assignee,
+      synthetic: r.syntheticAssignee,
+      labels: [...src.labelsFor(r.beadId)],
+      estimateDays: d?.estimateDays ?? null,
+      finishDay: s ? s.endDay : null,
+      finishDate: s ? s.endDate : null,
+      beyondHorizon: s?.beyondHorizon ?? false,
+      triage: src.triage.get(r.beadId)?.score ?? null,
+      groupId: r.groupId,
+      group: r.groupId.startsWith("__") ? "" : groupLabel.get(r.groupId) ?? r.groupId,
+    };
+  });
+}
+
+/** The sort a click produces: the same column flips, a new one starts natural. */
+export function toggleSort(current: TableSort, key: TableSortKey): TableSort {
+  if (current.key === key) return { key, dir: current.dir === "asc" ? "desc" : "asc" };
+  return { key, dir: COLUMNS.find((c) => c.key === key)?.natural ?? "asc" };
+}
+
+type Keyed = { v: number | string | null; row: TableRow };
+
+function sortValue(row: TableRow, key: TableSortKey): number | string | null {
+  switch (key) {
+    case "id":
+      return row.id;
+    case "title":
+      return row.title.toLowerCase();
+    case "type":
+      return row.type;
+    case "priority":
+      return row.priority;
+    case "status": {
+      const i = STATUS_ORDER.indexOf(row.status);
+      return i >= 0 ? i : STATUS_ORDER.length;
+    }
+    case "assignee":
+      return row.assignee ? row.assignee.toLowerCase() : null;
+    case "labels":
+      return row.labels.length ? row.labels.join(",").toLowerCase() : null;
+    case "estimate":
+      return row.estimateDays;
+    case "finish":
+      return row.finishDay;
+    case "triage":
+      return row.triage;
+    case "group":
+      return row.group || null;
+  }
+}
+
+/**
+ * Stable sort on one column. Rows with nothing in the column sort LAST in
+ * either direction — an unassigned bead is not "less than" alice on the way
+ * up and "more than" her on the way down — and ties break on id ascending
+ * so two loads of the same data agree.
+ */
+export function sortRows(rows: readonly TableRow[], sort: TableSort): TableRow[] {
+  const keyed: Keyed[] = rows.map((row) => ({ v: sortValue(row, sort.key), row }));
+  const sign = sort.dir === "asc" ? 1 : -1;
+  // Unknown statuses share one rank; fall through to the text so they still order.
+  const tieText = sort.key === "status";
+  keyed.sort((a, b) => {
+    if (a.v === null && b.v === null) return a.row.id.localeCompare(b.row.id);
+    if (a.v === null) return 1;
+    if (b.v === null) return -1;
+    let c = 0;
+    if (typeof a.v === "number" && typeof b.v === "number") c = a.v - b.v;
+    else c = String(a.v).localeCompare(String(b.v));
+    if (c === 0 && tieText) c = a.row.status.localeCompare(b.row.status);
+    if (c !== 0) return c * sign;
+    return a.row.id.localeCompare(b.row.id);
+  });
+  return keyed.map((k) => k.row);
+}
+
+/** "sorted by triage, highest first" — for the footer. */
+export function describeSort(sort: TableSort): string {
+  const col = COLUMNS.find((c) => c.key === sort.key);
+  const label = col?.label ?? sort.key;
+  // Priority's number runs the other way from its meaning: ascending is P0
+  // first, which is the HIGHEST priority. Say the rank, not the number.
+  if (sort.key === "priority") return `sorted by ${label}, ${sort.dir === "asc" ? "P0" : "P4"} first`;
+  if (sort.key === "finish") return `sorted by ${label}, ${sort.dir === "asc" ? "soonest" : "latest"} first`;
+  if (col?.numeric) return `sorted by ${label}, ${sort.dir === "asc" ? "lowest" : "highest"} first`;
+  return `sorted by ${label}, ${sort.dir === "asc" ? "A to Z" : "Z to A"}`;
+}

package/src/web/theme.ts

@@ -0,0 +1,88 @@
+// theme.ts — theme/style preference values and their storage format.
+//
+// Pure: no DOM, no localStorage, no Vue. composables/useTheme.ts owns the
+// reactive wiring and the root-element attributes; this owns what counts as
+// a valid preference, so the rules are testable.
+
+/** 'system' follows the OS; the others force a mode via [data-theme]. */
+export type ThemeMode = "system" | "light" | "dark";
+
+/** Palette family. 'default' is the app's own dark-derived scheme; the rest
+ *  live in styles-alt.css (ours) and styles-ported.css (ports + High Contrast). */
+export type StyleName =
+  | "default"
+  | "high-contrast"
+  | "catppuccin"
+  | "dracula"
+  | "github"
+  | "gruvbox"
+  | "nord"
+  | "one"
+  | "solarized"
+  | "synthwave"
+  | "terminal"
+  | "tokyonight";
+
+export const THEME_MODES: readonly ThemeMode[] = ["system", "light", "dark"];
+/** Picker order: the default, then the accessibility choice, then the rest A–Z. */
+export const STYLE_NAMES: readonly StyleName[] = [
+  "default",
+  "high-contrast",
+  "catppuccin",
+  "dracula",
+  "github",
+  "gruvbox",
+  "nord",
+  "one",
+  "solarized",
+  "synthwave",
+  "terminal",
+  "tokyonight",
+];
+
+/** What the picker prints. Ids stay lowercase single tokens for the URL and storage. */
+export const STYLE_LABELS: Readonly<Record<StyleName, string>> = {
+  default: "Default",
+  "high-contrast": "High Contrast",
+  catppuccin: "Catppuccin",
+  dracula: "Dracula",
+  github: "GitHub",
+  gruvbox: "Gruvbox",
+  nord: "Nord",
+  one: "One",
+  solarized: "Solarized",
+  synthwave: "Synthwave",
+  terminal: "Terminal",
+  tokyonight: "Tokyo Night",
+};
+
+export const THEME_STORAGE_KEY = "beadcyte:theme";
+export const STYLE_STORAGE_KEY = "beadcyte:style";
+
+export function parseThemeMode(raw: string | null | undefined): ThemeMode {
+  return raw && (THEME_MODES as readonly string[]).includes(raw)
+    ? (raw as ThemeMode)
+    : "system";
+}
+
+export function parseStyleName(raw: string | null | undefined): StyleName {
+  return raw && (STYLE_NAMES as readonly string[]).includes(raw)
+    ? (raw as StyleName)
+    : "default";
+}
+
+/**
+ * What the app is actually showing. 'system' has no answer of its own — it
+ * defers to the OS — so the caller supplies what the OS currently prefers.
+ */
+export function resolveIsDark(mode: ThemeMode, prefersDark: boolean): boolean {
+  if (mode === "dark") return true;
+  if (mode === "light") return false;
+  return prefersDark;
+}
+
+/** Next mode in the cycle, for a single-button toggle. */
+export function nextThemeMode(mode: ThemeMode): ThemeMode {
+  const i = THEME_MODES.indexOf(mode);
+  return THEME_MODES[(i + 1) % THEME_MODES.length];
+}

package/src/web/tokens.css

@@ -0,0 +1,168 @@
+/* tokens.css — the app's one colour/type/scalar layer.
+ *
+ * Loaded before app.css and every component's <style>, so anything here can
+ * be overridden downstream; loaded before styles-alt.css, so a named style
+ * can override it.
+ *
+ * Three things make this shorter than it looks:
+ *
+ * 1. `light-dark()` gives one declaration per token instead of the four-way
+ *    :root / prefers-color-scheme / [data-theme=light] / [data-theme=dark]
+ *    duplication. `color-scheme` below is what makes it resolve.
+ * 2. Colours are authored in OKLCH, so lightness tracks perceived
+ *    brightness. That matters here because the light-mode values keep each
+ *    dark hue and only move L — a shift that stays a consistent, comparable
+ *    step across hues in OKLCH and does not in HSL.
+ * 3. Variants are derived once, generically, with relative colour syntax
+ *    rather than hand-authored per token per theme.
+ *
+ * The dark values ARE the previous hardcoded palette, converted. Dark mode
+ * is meant to look unchanged; any visible difference in dark is a bug.
+ */
+
+/* Makes light-dark() resolve, and themes native UI (scrollbars, form
+   controls) to match. Unset [data-theme] = follow the OS. */
+:root {
+  color-scheme: light dark;
+}
+:root[data-theme="light"] {
+  color-scheme: light;
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+:root,
+/* Lets the options menu preview the default family while another is
+   active — same shared-selector trick as styles-alt.css. */
+[data-preview="default"] {
+  /* ── surfaces and ink ───────────────────────────────────────────────────
+     The light ladder is authored rather than derived: numerically inverting
+     the dark ladder lands on muddy mid-greys, where a light UI wants a
+     near-white ground carrying the same cool hue at much lower chroma. */
+  --c-bg: light-dark(oklch(98.5% 0.004 263.0), oklch(18.3% 0.031 263.4));
+  --c-panel: light-dark(oklch(96.3% 0.006 263.0), oklch(21.8% 0.036 262.5));
+  --c-panel-2: light-dark(oklch(93.5% 0.009 263.0), oklch(26.7% 0.048 264.7));
+  --c-border: light-dark(oklch(88.5% 0.012 263.0), oklch(28.8% 0.050 265.9));
+  --c-border-strong: light-dark(oklch(76.0% 0.022 263.0), oklch(38.6% 0.063 264.9));
+  --c-text: light-dark(oklch(24.0% 0.020 263.0), oklch(92.8% 0.006 264.5));
+  --c-dim: light-dark(oklch(48.0% 0.028 257.0), oklch(71.1% 0.035 256.8));
+  --c-dim-bright: light-dark(oklch(36.0% 0.024 253.0), oklch(86.9% 0.020 252.9));
+  /* ── data encoding ─────────────────────────────────────────────────────
+     These carry MEANING — bar kinds, the priority ramp, blocked/ready-now,
+     over-cap. Hue is preserved exactly across themes so green keeps meaning
+     shipped and red keeps meaning blocked; only lightness and chroma move,
+     because bright-on-dark and deep-on-light are what hold contrast on their
+     respective grounds.
+
+     A named style should think twice before overriding these: restyling the
+     chrome is a reskin, but restyling these is relabelling the data. */
+  --c-accent: light-dark(oklch(52.0% 0.183 293.5), oklch(70.9% 0.159 293.5));
+  --c-epic: light-dark(oklch(50.0% 0.203 305.5), oklch(72.2% 0.177 305.5));
+  /* Lightness is placed by search, not by taste (bp-67g.26). Hue stays; the L
+     of every colour-only encoding token — the bar kinds, the phases, danger —
+     is chosen so each pair clears 6 (aiming for 8) under simulated protan,
+     deutan and tritan vision as well as the 0.08 OKLab floor, both as tokens
+     and as bars painted over --c-panel. Re-run the placement instead of
+     nudging a value by hand: scripts/place-encoding-lightness.mjs. The
+     -bright and -stroke variants are text and outline tokens tuned for their
+     own contrast and do not track these fills. */
+  --c-shipped: light-dark(oklch(40.6% 0.109 151.7), oklch(83.1% 0.182 151.7));
+  --c-shipped-stroke: light-dark(oklch(38.0% 0.125 151.3), oklch(44.8% 0.108 151.3));
+  --c-shipped-bright: light-dark(oklch(60.0% 0.157 154.4), oklch(87.1% 0.136 154.4));
+  --c-in-progress: light-dark(oklch(60.5% 0.165 254.6), oklch(72.4% 0.143 254.6));
+  --c-in-progress-bright: light-dark(oklch(58.0% 0.110 251.8), oklch(80.9% 0.096 251.8));
+  --c-closed-noship: light-dark(oklch(49.4% 0.047 257.4), oklch(70.9% 0.041 257.4));
+  --c-today: light-dark(oklch(64.7% 0.239 25.3), oklch(63.8% 0.208 25.3));
+  --c-danger: light-dark(oklch(51.9% 0.191 22.2), oklch(71.0% 0.166 22.2));
+  --c-danger-bright: light-dark(oklch(60.0% 0.119 19.6), oklch(80.8% 0.103 19.6));
+  --c-warning: light-dark(oklch(62.0% 0.189 84.4), oklch(83.7% 0.164 84.4));
+  --c-warning-strong: light-dark(oklch(56.0% 0.183 55.9), oklch(75.8% 0.159 55.9));
+  --c-warning-bright: light-dark(oklch(66.0% 0.134 66.3), oklch(83.7% 0.117 66.3));
+  /* Bar kinds. These used to alias --c-accent, on the argument that "future"
+     isn't told apart from a sibling state by hue. That was wrong: it IS told
+     apart from `shipped` by hue, and a style whose accent lands near green
+     collapses the two. The terminal style did exactly that — shipped
+     oklch(0.8 0.182 151.7) against future oklch(0.78 0.18 145), 6.7 degrees
+     apart. So they carry their own hue, fixed like every other encoding
+     colour, and a style recolouring its accent can no longer reach them. */
+  --c-future: light-dark(oklch(38.8% 0.183 293.5), oklch(63.5% 0.159 293.5));
+  --c-backlog: light-dark(oklch(38.8% 0.183 293.5), oklch(63.5% 0.159 293.5));
+
+  /* Lifecycle phase fills for the economics breakdown. Separate from the
+     text-oriented semantics above because a fill and a label want different
+     values: light-mode --c-warning sits at L62 for text contrast, which as a
+     10px bar reads as muddy ochre rather than "waiting". Fixed across styles
+     like the rest of the encoding — including `other`, which previously
+     borrowed --c-border-strong and so drifted with the style while the three
+     beside it stayed put. */
+  --c-phase-worked: light-dark(oklch(52.6% 0.140 151.7), oklch(78.2% 0.175 151.7));
+  --c-phase-review: light-dark(oklch(59.7% 0.150 254.6), oklch(70.6% 0.143 254.6));
+  --c-phase-waiting: light-dark(oklch(74.0% 0.155 78.0), oklch(79.1% 0.162 84.4));
+  --c-phase-other: light-dark(oklch(74.0% 0.012 263.0), oklch(45.0% 0.063 264.9));
+
+  /* ── derived once, for whichever style is active ────────────────────────
+     Relative colour syntax against the RESOLVED token, so a named style
+     that changes --c-accent gets its own hover/dim/ring for free. "Toward
+     contrast" means darker on light and lighter on dark. */
+  --c-accent-hover: light-dark(
+    oklch(from var(--c-accent) calc(l - 0.08) c h),
+    oklch(from var(--c-accent) calc(l + 0.09) c h)
+  );
+  --c-accent-dim: oklch(from var(--c-accent) l c h / 15%);
+  --c-focus-ring: var(--c-accent);
+
+  /* Ink for content sitting ON --c-accent. --c-bg is already the correct
+     high-contrast opposite in both directions, so this needs no authoring. */
+  --c-accent-fg: var(--c-bg);
+
+  /* Accent washes, previously hardcoded as rgba() of the accent's literal
+     channels — which silently stopped matching the moment a style changed
+     the accent. Derived now, so they always track it. */
+  --c-accent-wash: oklch(from var(--c-accent) l c h / 8%);
+  --c-accent-wash-strong: oklch(from var(--c-accent) l c h / 15%);
+  --c-dim-wash: oklch(from var(--c-dim) l c h / 15%);
+
+  /* A subtle raise off the surface. Inverts direction by theme: lifting
+     means lighter on dark and darker on light. */
+  --c-lift: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
+
+  /* Scrim dims toward black in both directions, so one plain value. */
+  --c-scrim: rgba(0, 0, 0, 0.45);
+
+  /* Shadows are much weaker on a light ground: the same opacity that reads
+     as depth against near-black reads as dirt against near-white. */
+  --shadow-panel: light-dark(
+    0 8px 24px rgba(0, 0, 0, 0.12),
+    0 8px 24px rgba(0, 0, 0, 0.4)
+  );
+  --shadow-pop: light-dark(
+    0 12px 32px rgba(0, 0, 0, 0.16),
+    0 12px 32px rgba(0, 0, 0, 0.5)
+  );
+  --shadow-drawer: light-dark(
+    -20px 0 60px rgba(0, 0, 0, 0.18),
+    -20px 0 60px rgba(0, 0, 0, 0.5)
+  );
+
+  /* ── dimming ───────────────────────────────────────────────────────────
+     Per-theme, not shared: an opacity is a step toward the background, and
+     the same fraction is a different perceptual step against near-white
+     than against near-black. Light mode needs to fade less far to read as
+     "receded" without vanishing. */
+  --o-inferred: light-dark(0.55, 0.62);
+  --o-dim-label: light-dark(0.45, 0.35);
+  --o-spent-edge: light-dark(0.45, 0.5);
+
+  /* ── type ──────────────────────────────────────────────────────────────
+     Tokenised so a named style can supply its own faces; the default style
+     keeps the stack the app already used. */
+  --font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    monospace;
+
+  /* ── scalars ───────────────────────────────────────────────────────────── */
+  --radius: 4px;
+  --radius-sm: 3px;
+  --transition: 0.12s ease-out;
+}