pi-weave 0.3.8 → 0.3.10

package/src/web/client/note/replay.model.ts

@@ -0,0 +1,248 @@
+/**
+ * Replay: the pure half of the note history slider.
+ *
+ * The server sends every saved revision of a note, oldest first (see
+ * `src/core/history.ts`). This module decides what one step of the slider
+ * says ("Agent rewrote the summary · 10:05 · +120 −40") and which text that
+ * step added, so the column can highlight it.
+ *
+ * ## Highlighting through Markdown
+ *
+ * The added text is found in the Markdown source, but it has to be shown in
+ * the rendered HTML. So the source is marked with two private-use characters,
+ * {@link MARK_OPEN} and {@link MARK_CLOSE}, before it is rendered, and the
+ * column turns the marked text nodes into `<mark>` elements afterwards
+ * ({@link splitMarked}). The markers are characters, not tags, so they pass
+ * through the renderer and the sanitiser as plain text and cannot introduce
+ * markup of their own.
+ *
+ * A marker must not change what the Markdown means, so {@link markChange}
+ * puts one pair on each changed line, after any block syntax (`## `, `- `,
+ * `> `), skips fence and rule lines, and widens a range to cover a whole link
+ * rather than splitting `[[target]]` or `(url)`.
+ */
+
+import { splitRawTail } from "../../shared/view";
+import type { HistoryRevision } from "../../shared/wire";
+
+export const MARK_OPEN = "";
+export const MARK_CLOSE = "";
+
+/** Milliseconds between steps while playing. */
+export const PLAY_INTERVAL_MS = 900;
+
+/** The smallest prefix/suffix-preserving edit from `from` to `to` (same rule as core's log). */
+export function changedRange(from: string, to: string): { start: number; end: number; removed: number } {
+  const max = Math.min(from.length, to.length);
+  let head = 0;
+  while (head < max && from.charCodeAt(head) === to.charCodeAt(head)) head++;
+  let tail = 0;
+  while (tail < max - head && from.charCodeAt(from.length - 1 - tail) === to.charCodeAt(to.length - 1 - tail)) tail++;
+  return { start: head, end: to.length - tail, removed: from.length - tail - head };
+}
+
+const BLOCK_PREFIX_RE = /^[ \t]*(?:#{1,6}[ \t]+|>[ \t]?|(?:[*+-]|\d{1,9}[.)])[ \t]+(?:\[[ xX]\][ \t]+)?)*/;
+const SKIP_LINE_RE = /^[ \t]*(?:`{3,}|~{3,}|<!--|(?:[-*_][ \t]*){3,}$)/;
+const LINK_RE = /!?\[\[[^\]\n]*\]\]|!?\[[^\]\n]*\]\([^)\n]*\)|<[a-z][a-z0-9+.-]*:[^>\s]*>/gi;
+
+/** Mark the text `body` gained over `previous` (the whole body for the first revision). */
+export function markChange(previous: string | null, body: string): string {
+  const { start, end } = changedRange(previous ?? "", body);
+  if (start >= end) return body;
+  const ranges: Array<[number, number]> = [];
+  let lineStart = body.lastIndexOf("\n", start - 1) + 1;
+  while (lineStart < end) {
+    const newline = body.indexOf("\n", lineStart);
+    const lineEnd = newline === -1 ? body.length : newline;
+    const line = body.slice(lineStart, lineEnd);
+    if (!SKIP_LINE_RE.test(line)) {
+      const prefix = (BLOCK_PREFIX_RE.exec(line) as RegExpExecArray)[0].length;
+      let from = Math.max(start - lineStart, prefix);
+      let to = Math.min(end, lineEnd) - lineStart;
+      for (const link of line.matchAll(LINK_RE)) {
+        const linkEnd = (link.index as number) + link[0].length;
+        if (from > (link.index as number) && from < linkEnd) from = link.index as number;
+        if (to > (link.index as number) && to < linkEnd) to = linkEnd;
+      }
+      if (line.slice(from, to).trim() !== "") ranges.push([lineStart + from, lineStart + to]);
+    }
+    lineStart = lineEnd + 1;
+  }
+  let marked = body;
+  for (const [from, to] of ranges.reverse()) {
+    marked = marked.slice(0, from) + MARK_OPEN + marked.slice(from, to) + MARK_CLOSE + marked.slice(to);
+  }
+  return marked;
+}
+
+/**
+ * Split one text node's text at the markers. `inside` carries over from the
+ * previous text node, because a marked range can span elements
+ * (`plain **bold** plain`).
+ */
+export function splitMarked(text: string, inside: boolean): { parts: Array<{ text: string; marked: boolean }>; inside: boolean } {
+  const parts: Array<{ text: string; marked: boolean }> = [];
+  let current = "";
+  let state = inside;
+  for (const char of text) {
+    if (char === MARK_OPEN || char === MARK_CLOSE) {
+      if (current !== "") parts.push({ text: current, marked: state });
+      current = "";
+      state = char === MARK_OPEN;
+    } else {
+      current += char;
+    }
+  }
+  if (current !== "") parts.push({ text: current, marked: state });
+  return { parts, inside: state };
+}
+
+const WHO: Record<HistoryRevision["by"], string> = {
+  human: "You",
+  agent: "Agent",
+  outside: "Outside edit",
+  system: "pi-weave",
+};
+
+const WHAT: Record<string, string> = {
+  create: "created the note",
+  edit: "edited",
+  append: "added to the note",
+  raw: "added words to Raw",
+  finalize: "rewrote the summary",
+  generate: "generated the note",
+  repair: "fixed links",
+  outside: "changed outside pi-weave",
+  baseline: "earliest saved version",
+};
+
+/** One step of the slider, as the column shows it. */
+export interface ReplayStep {
+  /** "3 of 12". */
+  position: string;
+  /** "Agent rewrote the summary". */
+  action: string;
+  /** Short local time; the full ISO string goes in `atIso`. */
+  at: string;
+  atIso: string;
+  /** "+120 −40", or "" when nothing changed in the text. */
+  change: string;
+  /** The body to render, with the added text marked. */
+  marked: string;
+  by: HistoryRevision["by"];
+  /**
+   * Whether the column scrolls to the change. Not when it starts in the
+   * `## Raw` tail: dictation lands at the very end of the note, and following
+   * it dragged the reader to the bottom on every Raw step, then back up on the
+   * next edit. The added words are still marked where they are.
+   */
+  follow: boolean;
+}
+
+function shortTime(iso: string, previous: string | null): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  const time = date.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+  const sameDay = previous !== null && new Date(previous).toDateString() === date.toDateString();
+  return sameDay ? time : `${date.toLocaleDateString(undefined, { month: "short", day: "numeric" })}, ${time}`;
+}
+
+/** Whether offset `at` of `body` falls in its `## Raw` tail (or the gap just above it). */
+export function inRawTail(body: string, at: number): boolean {
+  const { head, tail } = splitRawTail(body);
+  return tail !== "" && at >= head.length;
+}
+
+/** Describe revision `index`. Clamped, so a stale index after a refetch still shows something. */
+export function replayStep(revisions: readonly HistoryRevision[], index: number): ReplayStep | null {
+  if (revisions.length === 0) return null;
+  const i = Math.max(0, Math.min(revisions.length - 1, index));
+  const revision = revisions[i] as HistoryRevision;
+  const previous = i === 0 ? null : (revisions[i - 1] as HistoryRevision);
+  const range = changedRange(previous?.body ?? "", revision.body);
+  const added = range.end - range.start;
+  const change = [added > 0 ? `+${added}` : "", range.removed > 0 ? `−${range.removed}` : ""].filter(Boolean).join(" ");
+  const what = WHAT[revision.op] ?? revision.op;
+  return {
+    position: `${i + 1} of ${revisions.length}`,
+    action: revision.op === "baseline" ? what[0]!.toUpperCase() + what.slice(1) : `${WHO[revision.by]} ${what}`,
+    at: shortTime(revision.at, previous?.at ?? null),
+    atIso: revision.at,
+    change,
+    marked: markChange(previous?.body ?? null, revision.body),
+    by: revision.by,
+    follow: !inRawTail(revision.body, range.start),
+  };
+}
+
+/** One bar of the history band: how much a version changed, and who changed it. */
+export interface ChangeBar {
+  /** 0–1 of the band's height; never so small that a version disappears. */
+  height: number;
+  by: HistoryRevision["by"];
+}
+
+/** The shortest bar, so a one-character fix still reads as a version. */
+export const MIN_BAR = 0.14;
+
+/**
+ * Bar heights for the history band (the refresh's "change bars"). Height
+ * follows how many characters a version added and removed, on a log scale so
+ * one big rewrite does not flatten every other bar into the floor. The first
+ * version counts its whole body.
+ */
+export function changeBars(revisions: readonly HistoryRevision[]): ChangeBar[] {
+  const sizes = revisions.map((revision, i) => {
+    const range = changedRange(i === 0 ? "" : (revisions[i - 1] as HistoryRevision).body, revision.body);
+    return range.end - range.start + range.removed;
+  });
+  const top = Math.log1p(Math.max(0, ...sizes));
+  return revisions.map((revision, i) => ({
+    height: top === 0 ? MIN_BAR : MIN_BAR + (1 - MIN_BAR) * (Math.log1p(sizes[i] as number) / top),
+    by: revision.by,
+  }));
+}
+
+/** A day label under the band, at a fraction of its width. */
+export interface DayMark {
+  /** 0–1 along the band: version index over the last index. */
+  at: number;
+  label: string;
+}
+
+/**
+ * Where each day starts along the band, labelled "Today", "Yesterday" or a
+ * short date. The first version always gets a label, so the band says when
+ * the history begins.
+ */
+export function dayMarks(revisions: readonly HistoryRevision[], now: number): DayMark[] {
+  const today = new Date(now);
+  const yesterday = new Date(now - 86_400_000);
+  const last = Math.max(1, revisions.length - 1);
+  const marks: DayMark[] = [];
+  let previous = "";
+  revisions.forEach((revision, i) => {
+    const date = new Date(revision.at);
+    if (Number.isNaN(date.getTime())) return;
+    const day = date.toDateString();
+    if (day === previous) return;
+    previous = day;
+    const label = day === today.toDateString() ? "Today"
+      : day === yesterday.toDateString() ? "Yesterday"
+      : date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+    marks.push({ at: revisions.length === 1 ? 0 : i / last, label });
+  });
+  return marks;
+}
+
+/** The next index while playing, or null at the end. */
+export function nextStep(index: number, count: number): number | null {
+  return index + 1 < count ? index + 1 : null;
+}
+
+export const HISTORY_LABEL = "History";
+export const HISTORY_CLOSE_LABEL = "Close history";
+export const HISTORY_OFF_HINT = "History is off, so new changes are not being saved. Turn it on in Settings → Editor.";
+/** Shown on the oldest version kept, once older ones were dropped (the file holds at most 500). */
+export const HISTORY_TRIMMED = "Older versions were trimmed";
+export const HISTORY_EMPTY = "No saved versions yet. Changes are saved from now on.";

package/src/web/client/search/SearchPalette.tsx

@@ -1,32 +1,72 @@
 import { useEffect, useRef, useState } from "preact/hooks";
 import type { GraphPayload } from "../../shared/wire";
 import { useFocusTrap } from "../shell/FocusTrap";
+import { ICON_BOX, ICON_STROKE } from "../shell/icons.model";
+import type { IconDef } from "../shell/icons.model";
 import { fetchSearch } from "../api";
 import type { FetchLike } from "../api";
-import type { SearchRowView } from "./search.model";
-import { DEBOUNCE_MS, PALETTE_HINT, PALETTE_PLACEHOLDER, PALETTE_TITLE, initialSearchState, paletteModel, resultIdAt, searchKey } from "./search.model";
-import type { SearchState } from "./search.model";
+import type { PaletteIntent, SearchRowView, SearchState } from "./search.model";
+import {
+  DEBOUNCE_MS,
+  LIGHT_UP_KEY,
+  PALETTE_HINT,
+  PALETTE_PLACEHOLDER,
+  PALETTE_TITLE,
+  SCOPE_GROUP_LABEL,
+  SEARCH_GLYPH,
+  closesPalette,
+  initialSearchState,
+  lightUpIntent,
+  lightUpLabel,
+  nextState,
+  paletteKey,
+  paletteModel,
+  rowIntent,
+  serverQuery,
+} from "./search.model";
 
 export interface SearchPaletteProps {
   graph: GraphPayload | null;
   onSelect: (id: string, newTab?: boolean) => void;
   onClose: () => void;
+  /** Light the query's matches (`ids`, the results) up in the graph. The footer offers it only when this is given. */
+  onLightUp?: (query: string, ids: readonly string[]) => void;
   ports: { fetch: FetchLike };
 }
 
+function Glyph({ def, class: className }: { def: IconDef; class: string }) {
+  return (
+    <svg
+      class={className}
+      width={ICON_BOX}
+      height={ICON_BOX}
+      viewBox={`0 0 ${ICON_BOX} ${ICON_BOX}`}
+      fill={def.filled ? "currentColor" : "none"}
+      stroke={def.filled ? undefined : "currentColor"}
+      stroke-width={def.filled ? undefined : def.width ?? ICON_STROKE}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      {def.d.map((d) => <path d={d} />)}
+    </svg>
+  );
+}
+
 function Row({ row, onPick, onHover }: { row: SearchRowView; onPick: (newTab: boolean) => void; onHover: () => void }) {
   return (
     <li
       id={row.domId}
       role="option"
       aria-selected={row.active}
-      class={`weave-hit weave-hit-${row.kind}${row.active ? " weave-hit-on" : ""}`}
+      class={`weave-hit weave-hit-${row.group}${row.active ? " weave-hit-on" : ""}`}
       onMouseMove={onHover}
       onClick={(event) => onPick(event.metaKey || event.ctrlKey)}
     >
-      <span class="weave-hit-badge">{row.badge}</span>
-      <span class="weave-hit-label">{row.label}</span>
-      <span class="weave-hit-detail">{row.detail}</span>
+      <Glyph def={row.icon} class="weave-icon weave-hit-icon" />
+      <span class={row.mono ? "weave-hit-label weave-hit-mono" : "weave-hit-label"}>{row.label}</span>
+      <span class="weave-hit-detail">{row.parts.map((part) => part.mark ? <mark class="weave-hit-mark">{part.text}</mark> : part.text)}</span>
+      {row.meta ? <span class="weave-hit-meta">{row.meta}</span> : null}
     </li>
   );
 }
@@ -41,7 +81,7 @@ export function SearchPalette(props: SearchPaletteProps) {
   useEffect(() => void input.current?.focus(), []);
 
   useEffect(() => {
-    const query = state.query.trim();
+    const query = serverQuery(state.query);
     let active = true;
     if (!query) {
       abort.current?.abort();
@@ -69,15 +109,17 @@ export function SearchPalette(props: SearchPaletteProps) {
     };
   }, [state.query, props.ports.fetch]);
 
-  const model = paletteModel(state, props.graph);
-  const pick = (index: number | null, newTab = false): void => {
-    const id = resultIdAt(model.rows, index);
-    if (id !== null) props.onSelect(id, newTab);
-    props.onClose();
+  const model = paletteModel(state, props.graph, Date.now());
+  const run = (intent: PaletteIntent): void => {
+    if (intent.type === "open") props.onSelect(intent.id, intent.newTab);
+    if (intent.type === "lightUp") props.onLightUp?.(intent.query, intent.ids);
+    if (closesPalette(intent)) props.onClose();
+    else setState((current) => nextState(current, intent));
+    if (intent.type === "scope" || intent.type === "tag") input.current?.focus();
   };
 
   return (
-    <div class="weave-scrim" onClick={() => pick(null)}>
+    <div class="weave-scrim" onClick={() => run({ type: "close" })}>
       <div
         class="weave-palette"
         role="dialog"
@@ -87,36 +129,63 @@ export function SearchPalette(props: SearchPaletteProps) {
         ref={trap.ref as { current: HTMLDivElement | null }}
         onClick={(event) => event.stopPropagation()}
         onKeyDown={(event) => {
-          if (trap.onKeyDown(event as unknown as KeyboardEvent)) return;
-          const next = searchKey(state.cursor, event.key, model.count);
-          if (!next.handled) return;
+          const intent = paletteKey(model, { key: event.key, shift: event.shiftKey, mod: event.metaKey || event.ctrlKey, inInput: event.target === input.current }, props.onLightUp !== undefined);
+          if (intent.type === "none") {
+            trap.onKeyDown(event as unknown as KeyboardEvent);
+            return;
+          }
           event.preventDefault();
-          setState((current) => ({ ...current, cursor: next.cursor }));
-          if (next.dismiss) pick(next.activate, event.metaKey || event.ctrlKey);
+          run(intent);
         }}
       >
-        <input
-          type="search"
-          class="weave-palette-input"
-          ref={input}
-          value={state.query}
-          placeholder={PALETTE_PLACEHOLDER}
-          aria-label={PALETTE_TITLE}
-          aria-controls="weave-search-results"
-          aria-activedescendant={model.activeDomId ?? undefined}
-          onInput={(event) => setState((current) => ({ ...current, query: event.currentTarget.value, cursor: 0 }))}
-        />
+        <div class="weave-palette-bar">
+          <Glyph def={SEARCH_GLYPH} class="weave-icon weave-palette-glyph" />
+          <input
+            type="search"
+            class="weave-palette-input"
+            ref={input}
+            value={state.query}
+            placeholder={PALETTE_PLACEHOLDER}
+            role="combobox"
+            aria-label={PALETTE_TITLE}
+            aria-expanded={model.count > 0}
+            aria-autocomplete="list"
+            aria-controls="weave-search-results"
+            aria-activedescendant={model.activeDomId ?? undefined}
+            onInput={(event) => setState((current) => ({ ...current, query: event.currentTarget.value, cursor: 0 }))}
+          />
+          <kbd class="weave-palette-kbd" aria-hidden="true">Esc</kbd>
+        </div>
+        {model.scopes.length ? (
+          <div class="weave-palette-scopes" role="group" aria-label={SCOPE_GROUP_LABEL}>
+            {model.scopes.map((scope) => (
+              <button key={scope.scope} type="button" class="weave-palette-scope" aria-pressed={scope.active} onClick={() => run({ type: "scope", scope: scope.scope })}>
+                {scope.label} <span class="weave-palette-scope-count">{scope.count}</span>
+              </button>
+            ))}
+          </div>
+        ) : null}
         {model.status === null ? (
           <ul id="weave-search-results" class="weave-hits" role="listbox" aria-label={PALETTE_TITLE}>
-            {model.rows.map((row, index) => <Row key={row.id} row={row} onPick={(newTab) => pick(index, newTab)} onHover={() => setState((current) => ({ ...current, cursor: index }))} />)}
+            {model.groups.map((group) => (
+              <li key={group.group} role="presentation" class="weave-hit-section">
+                <div id={group.domId} role="presentation" class="weave-hit-group">{group.heading}</div>
+                <ul role="group" aria-labelledby={group.domId} class="weave-hit-rows">
+                  {group.rows.map((row) => <Row key={row.id} row={row} onPick={(newTab) => run(rowIntent(row, newTab))} onHover={() => run({ type: "move", cursor: row.index })} />)}
+                </ul>
+              </li>
+            ))}
           </ul>
         ) : (
           <p class="weave-palette-status" role="status">{model.status}</p>
         )}
         <p class="weave-palette-foot">
-          <span>{model.countLabel}</span>
-          <button type="button" class="weave-chip" disabled={model.count === 0} onClick={() => pick(state.cursor, true)}>Open in new tab</button>
-          <span class="weave-palette-hint">{PALETTE_HINT} · ⌘/Ctrl ↵ new tab</span>
+          <span>{PALETTE_HINT}</span>
+          {props.onLightUp && model.lightUp.length > 0 ? (
+            <button type="button" class="weave-palette-light" onClick={() => run(lightUpIntent(model))}>
+              {lightUpLabel(model.lightUp.length)} <kbd class="weave-palette-kbd">{LIGHT_UP_KEY}</kbd>
+            </button>
+          ) : null}
         </p>
       </div>
     </div>