pi-weave 0.3.9 → 0.3.10

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

@@ -0,0 +1,153 @@
+/**
+ * The edit bar: the pure half (the refresh's E1).
+ *
+ * While a note is being edited, one bar under the title says so, carries the
+ * formatting buttons, shows whether the edits are on disk yet, and offers
+ * Discard and Done. Saving is automatic: a short pause in typing writes the
+ * draft (see `drafts.ts`, `keepOpen`), so Done only has to catch up and close.
+ *
+ * Everything that can be decided without a DOM is here: what the status says,
+ * and how a formatting button rewrites the text around the selection.
+ */
+
+import type { IconName } from "../shell/icons.model";
+
+/** How long typing has to pause before the draft is written. */
+export const AUTOSAVE_MS = 2500;
+
+export const EDITING_LABEL = "Editing";
+export const DISCARD_EDITS_LABEL = "Discard changes";
+export const RETRY_LABEL = "Retry";
+/** Asked before Discard writes the opening version back over autosaved edits. */
+export const REVERT_PROMPT = "Put this note back the way it was when you started editing?";
+
+/** What the status slot shows. */
+export type EditStatusKind = "saving" | "failed" | "pending" | "saved" | "clean";
+
+export interface EditStatus {
+  kind: EditStatusKind;
+  label: string;
+}
+
+/** The parts of a draft the status depends on. */
+export interface EditStatusInput {
+  saving: boolean;
+  failed: boolean;
+  /** Edits not yet on disk. */
+  dirty: boolean;
+  savedAt: number | null;
+}
+
+function clock(at: number): string {
+  return new Date(at).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+}
+
+/** The status slot, in priority order: a write in flight, a failed one, waiting edits, the last save. */
+export function editStatus(input: EditStatusInput): EditStatus {
+  if (input.saving) return { kind: "saving", label: "Saving…" };
+  if (input.failed) return { kind: "failed", label: "Not saved" };
+  if (input.dirty) return { kind: "pending", label: "Unsaved changes" };
+  if (input.savedAt !== null) return { kind: "saved", label: `Saved ${clock(input.savedAt)}` };
+  return { kind: "clean", label: "No changes yet" };
+}
+
+/** The formatting buttons, in bar order. */
+export type FormatKind = "heading" | "bold" | "italic" | "link" | "wikilink" | "task";
+
+export interface FormatTool {
+  kind: FormatKind;
+  icon: IconName;
+  label: string;
+  /** The key that applies it with ⌘/Ctrl, if any. */
+  key: string | null;
+}
+
+export const FORMAT_TOOLS: readonly FormatTool[] = [
+  { kind: "heading", icon: "heading", label: "Heading", key: null },
+  { kind: "bold", icon: "bold", label: "Bold", key: "b" },
+  { kind: "italic", icon: "italic", label: "Italic", key: "i" },
+  // No ⌘K: that is search, everywhere in the workspace, the editor included.
+  { kind: "link", icon: "link", label: "Link", key: null },
+  { kind: "wikilink", icon: "wikilink", label: "Link to a note", key: null },
+  { kind: "task", icon: "task", label: "Task", key: null },
+];
+
+/** The tool bound to a ⌘/Ctrl key, if any. */
+export function formatForKey(key: string): FormatKind | null {
+  return FORMAT_TOOLS.find((tool) => tool.key === key.toLowerCase())?.kind ?? null;
+}
+
+/** A textarea's value and selection. */
+export interface TextEdit {
+  value: string;
+  start: number;
+  end: number;
+}
+
+/** Wrap the selection, or insert a placeholder and select it so typing replaces it. */
+function wrap(edit: TextEdit, before: string, after: string, placeholder: string): TextEdit {
+  const selected = edit.value.slice(edit.start, edit.end);
+  const inner = selected === "" ? placeholder : selected;
+  const value = edit.value.slice(0, edit.start) + before + inner + after + edit.value.slice(edit.end);
+  return { value, start: edit.start + before.length, end: edit.start + before.length + inner.length };
+}
+
+/**
+ * Rewrite every line the selection touches. A selection that ends just after
+ * a line break (a triple-clicked line) does not touch the line below it.
+ */
+function eachLine(edit: TextEdit, rewrite: (line: string) => string): TextEdit {
+  const from = edit.value.lastIndexOf("\n", edit.start - 1) + 1;
+  const last = edit.end > edit.start && edit.value[edit.end - 1] === "\n" ? edit.end - 1 : edit.end;
+  const newline = edit.value.indexOf("\n", last);
+  const to = newline === -1 ? edit.value.length : newline;
+  const lines = edit.value.slice(from, to).split("\n").map(rewrite).join("\n");
+  const value = edit.value.slice(0, from) + lines + edit.value.slice(to);
+  return { value, start: from, end: from + lines.length };
+}
+
+const HEADING_RE = /^#{1,6}[ \t]+/;
+const TASK_RE = /^([ \t]*)[-*+][ \t]+\[[ xX]\][ \t]+/;
+const BULLET_RE = /^([ \t]*)[-*+][ \t]+/;
+
+/** Apply one formatting button to the text around the selection. */
+export function applyFormat(edit: TextEdit, kind: FormatKind): TextEdit {
+  switch (kind) {
+    case "bold":
+      return wrap(edit, "**", "**", "bold text");
+    case "italic":
+      return wrap(edit, "_", "_", "italic text");
+    case "wikilink":
+      return wrap(edit, "[[", "]]", "note title");
+    case "link": {
+      const selected = edit.value.slice(edit.start, edit.end);
+      if (selected === "") return wrap(edit, "[", "](https://)", "link text");
+      // With text selected, the URL is what is left to type, so select that.
+      const value = `${edit.value.slice(0, edit.start)}[${selected}](https://)${edit.value.slice(edit.end)}`;
+      const url = edit.start + selected.length + 3;
+      return { value, start: url, end: url + "https://".length };
+    }
+    case "heading":
+      return eachLine(edit, (line) => (HEADING_RE.test(line) ? line.replace(HEADING_RE, "") : `## ${line}`));
+    case "task":
+      return eachLine(edit, (line) => {
+        if (TASK_RE.test(line)) return line.replace(TASK_RE, "$1");
+        if (BULLET_RE.test(line)) return line.replace(BULLET_RE, "$1- [ ] ");
+        return `- [ ] ${line}`;
+      });
+  }
+}
+
+/**
+ * The one span a formatting change replaced: `before[start, end)` became
+ * `text`. The editor inserts just that span through the browser, so ⌘Z
+ * undoes the formatting; assigning the whole value would wipe the undo stack.
+ */
+export function replacedSpan(before: string, after: string): { start: number; end: number; text: string } {
+  const max = Math.min(before.length, after.length);
+  let head = 0;
+  while (head < max && before.charCodeAt(head) === after.charCodeAt(head)) head++;
+  let tail = 0;
+  while (tail < max - head && before.charCodeAt(before.length - 1 - tail) === after.charCodeAt(after.length - 1 - tail)) tail++;
+  return { start: head, end: before.length - tail, text: after.slice(head, after.length - tail) };
+}

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

@@ -678,7 +678,51 @@ export const SANITIZE_CONFIG: SanitizeConfig = frozen({
  * what gets handed over, with {@link SANITIZE_CONFIG}.
  */
 export function renderNote(purify: Purifier, body: string, index: WikiIndex): string {
-  return purify.sanitize(renderMarkdown(body, index), SANITIZE_CONFIG);
+  return tldrCard(purify.sanitize(renderMarkdown(body, index), SANITIZE_CONFIG));
+}
+
+// `TLDR`, `TL;DR`, either with the colon inside or after the bold, as search and the graph sheet read it.
+const TLDR_OPEN_RE = /^(\s*<h1>[\s\S]*?<\/h1>)?\s*<p><strong>TL;?DR[ \t]*:?<\/strong>[ \t]*:?[ \t\n]*/i;
+const LIST_TAG_RE = /<(\/?)(?:ul|ol)\b[^>]*>/g;
+
+/**
+ * Lift a note's opening TLDR into a card.
+ *
+ * Finalized notes open with a `**TLDR:**` paragraph, often followed by a list
+ * of `- [ ]` tasks (the notepad skill's format). The reading view sets that
+ * block apart so the summary is the first thing the eye lands on. Only the
+ * opening TLDR counts (optionally under a repeated `# Title`); a TLDR further
+ * down is ordinary prose.
+ *
+ * It runs on the *sanitised* HTML and only moves markup that is already
+ * there, adding one `div` and one label `span` of its own, so it opens no
+ * hole in the three layers above. The task checkboxes keep their order, and
+ * with it their `data-weave-task` indices.
+ */
+export function tldrCard(html: string): string {
+  const open = TLDR_OPEN_RE.exec(html);
+  if (open === null) return html;
+  const close = html.indexOf("</p>", open[0].length);
+  if (close === -1) return html;
+  const lead = open[1] ?? "";
+  const summary = html.slice(open[0].length, close);
+  let end = close + "</p>".length;
+  const list = /^\s*<(?:ul|ol)\b/.exec(html.slice(end));
+  if (list !== null) {
+    // Balanced, so a nested list stays inside the card with its parent.
+    LIST_TAG_RE.lastIndex = end;
+    let depth = 0;
+    for (let tag = LIST_TAG_RE.exec(html); tag !== null; tag = LIST_TAG_RE.exec(html)) {
+      depth += tag[1] === "/" ? -1 : 1;
+      if (depth === 0) {
+        end = tag.index + tag[0].length;
+        break;
+      }
+    }
+    if (depth !== 0) return html;
+  }
+  const items = html.slice(close + "</p>".length, end);
+  return `${lead}\n<div class="weave-tldr"><p><span class="weave-tldr-label">TLDR</span>${summary}</p>${items}\n</div>${html.slice(end)}`;
 }
 
 // --- reading a click back out of the DOM --------------------------------------------------
@@ -877,6 +921,24 @@ export interface NoteHeaderView {
   readonly created: string;
   readonly createdIso: string;
   readonly tags: readonly string[];
+  /** Who wrote it, as a sentence: "You wrote this". */
+  readonly byline: string;
+  /** Where it lives: "Vault / projects", or "Vault" at the root. */
+  readonly folder: string;
+}
+
+/** The byline under the title, in plain words rather than a provenance code. */
+export function noteByline(source: WireNoteSource): string {
+  if (source === "human") return "You wrote this";
+  if (source === "agent") return "Agent wrote this";
+  return "Generated by pi-weave";
+}
+
+export const VAULT_LABEL = "Vault";
+
+/** The folder crumb above the title: the slug's directories under the vault. */
+export function noteFolder(slug: string): string {
+  return [VAULT_LABEL, ...slug.split("/").slice(0, -1)].join(" / ");
 }
 
 /**
@@ -902,6 +964,8 @@ export function noteHeader(note: ViewNote, now: number): NoteHeaderView {
     created: relTime(note.created, now),
     createdIso: note.created,
     tags: note.tags,
+    byline: noteByline(note.source),
+    folder: noteFolder(note.slug),
   };
 }
 

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

@@ -22,6 +22,7 @@
  * rather than splitting `[[target]]` or `(url)`.
  */
 
+import { splitRawTail } from "../../shared/view";
 import type { HistoryRevision } from "../../shared/wire";
 
 export const MARK_OPEN = "";
@@ -129,6 +130,13 @@ export interface ReplayStep {
   /** 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 {
@@ -139,6 +147,12 @@ function shortTime(iso: string, previous: string | null): string {
   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;
@@ -157,9 +171,70 @@ export function replayStep(revisions: readonly HistoryRevision[], index: number)
     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;

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>