@tenyokjs/devdevian-cli 0.3.1-alpha.1 → 0.4.1-alpha.1

package/README.md

@@ -10,6 +10,8 @@ devdevian open     # a separate terminal window
 
 Login opens a browser. Compare the code shown in the terminal, sign in to Devdevian, then authorize the terminal. Google, GitHub and email login happen on the website; no provider credentials are collected by this package. Use `--no-open` to open the printed address yourself, including when connecting over SSH.
 
+Version-by-version changes and the customization roadmap: [CLI version history](VERSIONS.md).
+
 ## Live workspace
 
 The default `devdevian` command and `devdevian tui` open an alternate terminal screen. Navigation, conversations, inline forms, previews and search update in that screen; exiting restores your normal terminal. The blue and purple layout adapts to the terminal size, with compact navigation below 90 columns. Minimum size: 60 columns × 18 rows.
@@ -18,7 +20,8 @@ The default `devdevian` command and `devdevian tui` open an alternate terminal s
 - **/** focuses search and commands: `/feed`, `/inbox`, `/search query`, `/open 142`, `/ask`, `/review`, `/drafts`, `/communities`, `/devices`, `/help`, `/logout`, `/quit`.
 - **←/→** switch conversation tabs; **Space** reads the selected reply/remark in full. **[ / ]** paginate; **Page Up/Down** scroll.
 - **N** creates a conversation (a community on the Communities screen); **A** asks a question; **R** replies inside a conversation; **Shift+R** refreshes.
-- **C** comments on snippet lines; **E/D** edit/delete your own ordinary replies or code feedback; **S** resolves/reopens a code remark as the publication author; **!** reports selected code feedback.
+- **C** comments on snippet lines; **E/D** edit/delete your own ordinary replies or code feedback; **S** resolves/reopens a code remark or accepts/removes a reply as the solution (question/review author only); **!** reports selected code feedback.
+- **Ctrl+E** opens the current multiline field in `$VISUAL` / `$EDITOR` (use `code --wait` for VS Code). Closing the editor restores the form; publishing still requires preview and confirmation. **Ctrl+L** saves an active draft and returns to sign-in.
 - In forms, **Tab/Shift+Tab** change fields, arrows choose options or move the text cursor, **Enter** adds a line, **Ctrl+S** opens the preview. Publication requires a separate confirmation; Escape asks before discarding a draft. Drafts auto-save locally after a short pause and can be restored from **Local drafts** or `/drafts`.
 - **Ctrl+C** exits. With an unsent draft, confirm saving and leaving or press Ctrl+C again to force exit.
 
@@ -28,6 +31,20 @@ Pages have a bounded 30-second in-memory cache. Refresh explicitly with Shift+R.
 
 Ordinary reply deletion replaces your text with a placeholder and preserves nested replies. Its attachments become unavailable. Deleting an accepted answer reopens the question. D/d works on a selected reply or while reading it in full; confirmation is required.
 
+## Code and discussion, together
+
+Press **V** in a review to open the code workspace. Wide terminals show the snippet alongside its discussion; narrow terminals show one pane at a time. **W** switches focus. In the code pane, arrows move between lines (left/right scroll horizontally), **Space** anchors a range and **C** opens a prefilled comment form. Remarks may cover at most 50 lines. **Enter** selects a remark covering the current line, if it is on the current page. Markers describe the current page only; **F** cycles all/open/resolved remarks and **[ / ]** page through them.
+
+Selecting a remark highlights its range. A remark on an earlier snippet shows its **saved quote**, not unrelated current lines. Switch to current code with **W** before adding a new remark. Git patch line numbers still include patch headers.
+
+**X** or **?** opens a keyboard action menu for the selected item. It shows edits/deletion for your own content, resolve/reopen for review authors and accepted solutions for question/review authors. Deletion and accepting/removing a solution require confirmation. Feedback reports go to the existing moderation queue. The server checks permissions independently.
+
+## Inbox and live updates
+
+The header shows unread notifications. Live reads run every **45 seconds**, slowing to **3 minutes** after two minutes without input; failures back off up to five minutes. An expired/revoked session pauses updates. Pause/resume from **X → Pause/Resume live updates**, or start with `devdevian tui --no-live`.
+
+Inbox and open discussion views refresh without moving a selected item that still exists. While you type, use a picker, read full text or confirm an action, background reads update only the unread count; they do not replace the view or draft. Polling never marks notifications as read. **X → Mark received notifications as read** affects only notifications through the last loaded boundary; newer arrivals remain unread. Shift+R refreshes manually.
+
 ## Project files and Git changes
 
 Start inside your project (`cd PROJECT1 && devdevian tui`) or use `devdevian tui --project /path/to/PROJECT1`. `devdevian open --project /path/to/PROJECT1` carries the same project into a new terminal window. The project root stays fixed for the session.

package/VERSIONS.md

@@ -0,0 +1,57 @@
+# Devdevian CLI version history
+
+The CLI is a separately versioned Devdevian client. Its npm version does not have to match the web app or API version. All versions below use the same hosted account and permission model.
+
+Every published npm artifact has a unique immutable version. We record each version here, even when several ship in one working session. A GitHub release can summarize a day's work and link to the individual entries; it does not need to be created for every npm publication. An unfinished change stays under **Unreleased** until its package version is assigned. Alpha packages use the `alpha` npm tag.
+
+## Roadmap
+
+- **0.5.0 — Themes and interface customization:** visual presets, appearance preferences and layout customization. Planned, not shipped; exact settings will be agreed before implementation.
+- Projects and Events parity is deferred; it is not the 0.5.0 milestone.
+
+## 0.4.1-alpha.1 — Everyday writing and navigation
+
+**Changes**
+
+- `Ctrl+E` edits a multiline form field using `VISUAL`, then `EDITOR`, then the platform default. Ink temporarily hands over the terminal and restores it afterward. Original and returned text are saved locally before publication; failed, oversized or invalid editor output preserves the original form.
+- Notifications link to the exact ordinary reply, including nested replies on later pages. Back navigation restores the selected item by ID and retains reading/review position where content still exists.
+- Conversation bodies and full-text replies render headings, lists, quotes, bold text, inline code, visible link destinations and fenced code with basic lexical highlighting. HTML is displayed as text; terminal control sequences are removed. This is a lightweight renderer, not full CommonMark.
+- HTTP status is preserved for non-JSON failures. Connection, timeout, permission, missing-content, rate-limit and server failures suggest a concrete next action. Session expiry during writing keeps the form; `Ctrl+L` saves the draft and returns to connection setup.
+
+**Compatibility and checks**
+
+No API/schema migration. Existing browser and CLI credentials remain compatible. Regression coverage includes real pseudo-terminal editor handoff/restoration, reply deep links, permission/error states and text rendering. Desktop editor behavior still depends on the configured editor; GUI editors such as VS Code need a wait flag (`code --wait`).
+
+## 0.4.0-alpha.1 — Review workspace and live Inbox
+
+- Side-by-side code and remarks on wide terminals; `W` focus switching on compact layouts. Select a line range and press `C` to comment; `F` filters all/open/resolved remarks. Markers describe the current page. Old remarks display their saved quote.
+- `X` context menu for available edits, deletion, reports, resolving remarks and accepted solutions. Destructive/solution actions require confirmation and server permission checks.
+- Unread counter and serial live polling: 45 seconds active, three minutes idle, failure backoff and pause controls. Active forms and selected items are preserved.
+- Shared blue/purple styling, rounded frames, clearer tabs, cards and project identity. No API/schema migration.
+
+## 0.3.1-alpha.1 — Reply deletion
+
+- `D/d` deletes the author's ordinary reply, including full-text and parent-reply views, with confirmation and revision checks.
+- API tombstones remove text and attachments from access, preserve descendant replies and clear the deleted reply's solution mark. Deleted replies cannot be edited or accepted again. Existing metadata storage is used; no schema migration.
+
+## 0.3.0-alpha.1 — Project files, Git diffs and drafts
+
+- Root-relative file explorer, filename filtering, code preview and line-range selection. Sensitive paths, ignored files, nested symlinks and outside-root traversal are excluded.
+- Read-only staged/unstaged Git diff selection, including individual hunks. No staging, commits or project helper execution. Changed source requires reselection before publication.
+- Scoped local autosaved drafts, restore/delete controls and bounded retention. Snippet source is reread at preview time; selected source files are not copied into draft storage.
+
+## 0.2.0-alpha.1 — Live terminal workspace
+
+- Replaced the numbered scrolling menu with an alternate-screen interface, responsive navigation, forms, previews and search.
+- Paginated conversations, replies, code-feedback threads, edit/delete/report actions and connected-terminal controls.
+- `devdevian tui` runs in the current terminal; `devdevian open` launches a supported desktop terminal. Unicode editing, cancellable reads, bounded caching and terminal restoration checks.
+
+## 0.1.0-alpha.1 — First terminal client
+
+- Browser-approved terminal authentication with scoped, expiring, revocable CLI credentials.
+- Command-based feed, Inbox, search, questions, replies, file-based reviews, line remarks and community discovery using the existing Devdevian API.
+- Explicit publication confirmation, JSON output for scripts, local private credential storage and terminal-output sanitization.
+
+## Preparing a combined GitHub release
+
+Choose a product release title and list the exact npm versions it includes. Summarize user-visible changes, installation, compatibility and known limitations; link to the relevant headings in this file. Do not rename or republish existing npm artifacts, and do not imply that a planned milestone has shipped. GitHub releases are created when the maintainer decides to close the session or milestone.

package/bin/devdevian.mjs

@@ -2,10 +2,9 @@
 import { fileURLToPath } from "node:url";
 import packageInfo from "../package.json" with { type: "json" };
 import { parseArgs } from "node:util";
-import { readFile, writeFile, mkdtemp, rm } from "node:fs/promises";
-import { hostname, tmpdir } from "node:os";
-import { join } from "node:path";
-import { spawn, spawnSync } from "node:child_process";
+import { readFile } from "node:fs/promises";
+import { hostname } from "node:os";
+import { spawn } from "node:child_process";
 import { createInterface } from "node:readline/promises";
 import { setTimeout as delay } from "node:timers/promises";
 import {
@@ -16,6 +15,7 @@ import {
   removeConfig,
   clean,
 } from "../lib/client.mjs";
+import { editExternal } from "../lib/external-editor.mjs";
 const version = packageInfo.version;
 const options = {
   host: { type: "string" },
@@ -39,6 +39,7 @@ const options = {
   json: { type: "boolean" },
   editor: { type: "boolean" },
   "no-open": { type: "boolean" },
+  "no-live": { type: "boolean" },
   help: { type: "boolean", short: "h" },
   version: { type: "boolean", short: "v" },
 };
@@ -95,6 +96,7 @@ const help = `Devdevian CLI ${version} · alpha
   devdevian review reopen POST_ID REVIEW_ID
   devdevian communities [--page 2]
 
+  --no-live          Disable background reads in the live workspace
   --project PATH     Root directory for the live file/diff picker (default: current directory)
   --community ID     Publish to an approved private community
   --editor           Write text in $VISUAL / $EDITOR
@@ -109,30 +111,10 @@ async function editor(initial = "") {
   if (!process.stdin.isTTY || !process.stdout.isTTY)
     throw Error("--editor needs an interactive terminal.");
   terminal?.pause();
-  const directory = await mkdtemp(join(tmpdir(), "devdevian-editor-")),
-    file = join(directory, "message.md");
   try {
-    await writeFile(file, initial, { mode: 0o600 });
-    const command =
-      process.env.VISUAL ||
-      process.env.EDITOR ||
-      (process.platform === "win32" ? "notepad" : "vi");
-    // No shell: metacharacters in content or filenames cannot become commands.
-    const parts =
-      command
-        .match(/(?:[^\s"']+|"[^"]*"|'[^']*')+/g)
-        ?.map((p) => p.replace(/^(['"])(.*)\1$/, "$2")) || [];
-    if (!parts.length) throw Error("Set EDITOR to your text editor.");
-    const result = spawnSync(parts[0], [...parts.slice(1), file], {
-      stdio: "inherit",
-      shell: false,
-    });
-    if (result.error || result.status !== 0)
-      throw Error("The editor did not finish successfully.");
-    return await readFile(file, "utf8");
+    return await editExternal(initial);
   } finally {
     terminal?.resume();
-    await rm(directory, { recursive: true, force: true });
   }
 }
 async function boundedFile(file, max) {
@@ -477,6 +459,7 @@ try {
     for (const key of ["host", "name", "project"])
       if (values[key]) args.push("--" + key, values[key]);
     if (values["no-open"]) args.push("--no-open");
+    if (values["no-live"]) args.push("--no-live");
     await (
       await import("../lib/window.mjs")
     ).openWindow({ entry: fileURLToPath(import.meta.url), args });

package/lib/client.mjs

@@ -110,8 +110,13 @@ export function client(origin, token = null) {
       });
     } catch (error) {
       if (signal?.aborted) throw error;
-      throw Error(
-        "Could not reach Devdevian. Check your connection and server address.",
+      throw Object.assign(
+        Error(
+          error.name === "TimeoutError"
+            ? "Connection timed out. Check your connection and server address."
+            : "Could not reach Devdevian. Check your connection and server address.",
+        ),
+        { code: error.name === "TimeoutError" ? "TIMEOUT" : "NETWORK" },
       );
     }
     const chunks = [];
@@ -127,8 +132,11 @@ export function client(origin, token = null) {
     try {
       data = JSON.parse(text);
     } catch {
-      throw Error(
-        `Devdevian returned an unexpected response (HTTP ${response.status}). Try again later.`,
+      throw Object.assign(
+        Error(
+          `Devdevian returned an unexpected response (HTTP ${response.status}). Try again later.`,
+        ),
+        { status: response.status },
       );
     }
     if (!response.ok) {

package/lib/context-actions.mjs

@@ -0,0 +1,53 @@
+// Visibility is a convenience; the API remains the permission authority.
+export function contextActions({ route, data, selected, user, live }) {
+  const actions = [],
+    post = data?.post;
+  const add = (id, label) => actions.push({ id, label });
+  const feedback =
+    route.view === "feedback" ||
+    (route.view === "post" && route.tab === "feedback");
+  const reply =
+    route.view === "thread" ||
+    (route.view === "post" && route.tab === "replies");
+  if (selected) add("read", "Read selected item");
+  if (post && !post.archived_at && !post.locked_at) {
+    add("reply", "Write a reply");
+    if (post.code) add("comment", "Comment on selected code lines");
+  }
+  if (
+    (reply || feedback) &&
+    selected &&
+    user &&
+    selected.user_id === user.id &&
+    !selected.deleted_at
+  ) {
+    add("edit", "Edit your reply / remark");
+    add("delete", "Delete your reply / remark…");
+  }
+  if (post && user && post.user_id === user.id) {
+    const note =
+      route.view === "feedback" ? data.note : feedback ? selected : null;
+    if (note && !note.deleted_at)
+      add("resolve", note.resolved ? "Reopen remark" : "Resolve remark");
+    if (
+      reply &&
+      selected &&
+      !selected.deleted_at &&
+      ["question", "review"].includes(post.kind)
+    )
+      add(
+        "solution",
+        post.accepted_reply_id === selected.id
+          ? "Remove accepted solution…"
+          : "Accept as solution…",
+      );
+  }
+  if (feedback && selected && !selected.deleted_at)
+    add("report", "Report selected feedback…");
+  if (post) add("browser", "Open conversation in browser");
+  if (route.view === "inbox" && data?.unread_count > 0)
+    add("read-all", "Mark received notifications as read");
+  add("sync", "Refresh this view");
+  add("live", live ? "Pause live updates" : "Resume live updates");
+  return actions;
+}

package/lib/external-editor.mjs

@@ -0,0 +1,111 @@
+import { spawn } from "node:child_process";
+import { mkdtemp, writeFile, open, rm, lstat } from "node:fs/promises";
+import { constants } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+// Parse argv, never shell code. Quoting supports editor paths and --wait flags.
+export function editorArgs(command) {
+  const args = [];
+  let value = "",
+    quote = null,
+    started = false;
+  for (const char of command.trim()) {
+    if (quote) {
+      if (char === quote) quote = null;
+      else value += char;
+    } else if (char === '"' || char === "'") {
+      quote = char;
+      started = true;
+    } else if (/\s/.test(char)) {
+      if (started) {
+        args.push(value);
+        value = "";
+        started = false;
+      }
+    } else {
+      value += char;
+      started = true;
+    }
+  }
+  if (quote) throw Error("Close the quote in VISUAL / EDITOR.");
+  if (started) args.push(value);
+  if (!args[0])
+    throw Error(
+      "Set VISUAL or EDITOR to an editor command (for example: code --wait).",
+    );
+  return args;
+}
+export async function editExternal(
+  initial,
+  {
+    max = 15000,
+    command = process.env.VISUAL ||
+      process.env.EDITOR ||
+      (process.platform === "win32" ? "notepad" : "vi"),
+  } = {},
+) {
+  const [executable, ...args] = editorArgs(command);
+  const directory = await mkdtemp(join(tmpdir(), "devdevian-editor-")),
+    file = join(directory, "message.md");
+  try {
+    await writeFile(file, initial, { mode: 0o600, flag: "wx" });
+    await new Promise((resolve, reject) => {
+      const child = spawn(executable, [...args, file], {
+        stdio: "inherit",
+        shell: false,
+      });
+      child.once("error", () =>
+        reject(
+          Error(
+            "Could not start the editor. Check VISUAL / EDITOR; your original text is unchanged.",
+          ),
+        ),
+      );
+      child.once("exit", (code) =>
+        code === 0
+          ? resolve()
+          : reject(
+              Error(
+                "Editor cancelled or failed; your original text is unchanged.",
+              ),
+            ),
+      );
+    });
+    const infoBeforeOpen = await lstat(file);
+    if (infoBeforeOpen.isSymbolicLink() || !infoBeforeOpen.isFile())
+      throw Error("Editor output must be a regular file. Original text kept.");
+    const handle = await open(
+      file,
+      constants.O_RDONLY |
+        (constants.O_NOFOLLOW || 0) |
+        (constants.O_NONBLOCK || 0),
+    );
+    try {
+      const info = await handle.stat();
+      if (!info.isFile() || info.size > max * 4)
+        throw Error(
+          `Editor output must be a UTF-8 text file with at most ${max} characters. Original text kept.`,
+        );
+      const buffer = Buffer.alloc(max * 4 + 1),
+        { bytesRead } = await handle.read(buffer, 0, buffer.length, 0);
+      let text;
+      try {
+        text = new TextDecoder("utf-8", { fatal: true }).decode(
+          buffer.subarray(0, bytesRead),
+        );
+      } catch {
+        throw Error("Editor output must be UTF-8. Original text kept.");
+      }
+      if (bytesRead > max * 4 || text.length > max || text.includes("\0"))
+        throw Error(
+          `Editor output exceeds ${max} characters or contains binary data. Original text kept.`,
+        );
+      return text.replace(/\r\n/g, "\n");
+    } finally {
+      await handle.close();
+    }
+  } finally {
+    await rm(directory, { recursive: true, force: true });
+  }
+}

package/lib/live.mjs

@@ -0,0 +1,52 @@
+// Serial, cancellable polling: network failures never retry a mutation.
+export function liveLoop(
+  work,
+  {
+    schedule = setTimeout,
+    cancel = clearTimeout,
+    now = Date.now,
+    activity = () => now(),
+    active = 45000,
+    idle = 180000,
+    onError = () => {},
+  } = {},
+) {
+  const controller = new AbortController();
+  let timer,
+    failures = 0,
+    stopped = false;
+  async function run() {
+    try {
+      await work(controller.signal);
+      failures = 0;
+    } catch (error) {
+      if (stopped) return;
+      failures++;
+      onError(error);
+      if (error.status === 401 || error.status === 403) {
+        stop();
+        return;
+      }
+    }
+    if (stopped) return;
+    const base = now() - activity() > 120000 ? idle : active;
+    timer = schedule(run, Math.min(300000, base * 2 ** Math.min(failures, 3)));
+  }
+  function stop() {
+    stopped = true;
+    cancel(timer);
+    controller.abort();
+  }
+  timer = schedule(run, 0);
+  return stop;
+}
+export function anchoredIndex(previous, next, index) {
+  const row = previous?.[index];
+  if (row) {
+    const found = next.findIndex(
+      (item) => item.id === row.id && item.entryType === row.entryType,
+    );
+    if (found >= 0) return found;
+  }
+  return Math.max(0, Math.min(index, next.length - 1));
+}

package/lib/picker.mjs

@@ -9,17 +9,9 @@ import {
   readDiff,
   selectLines,
 } from "./workspace.mjs";
+import { colors } from "./theme.mjs";
 const h = React.createElement,
-  c = {
-    text: "#e0e7ff",
-    muted: "#8190af",
-    blue: "#79b8ff",
-    purple: "#b29aff",
-    green: "#70d6b0",
-    red: "#ff9baf",
-    bg: "#12192b",
-    selected: "#29345b",
-  };
+  c = { ...colors, bg: colors.panel };
 export function WorkspacePicker({
   root,
   width,

package/lib/problems.mjs

@@ -0,0 +1,29 @@
+import { clean } from "./client.mjs";
+export function problemMessage(error) {
+  const detail = clean(error.message || "Unexpected error.");
+  if (error.status === 401)
+    return "Session expired or revoked. Ctrl+L reconnects; your draft is kept locally.";
+  if (error.status === 403)
+    return (
+      "Access denied. Check your community membership or account permissions. " +
+      detail
+    );
+  if (error.status === 404)
+    return (
+      "Content unavailable: it may have been removed or is private. Esc goes back. " +
+      detail
+    );
+  if (error.status === 429)
+    return (
+      "Rate limit reached. Wait before trying again; writes are not retried automatically. " +
+      detail
+    );
+  if (error.status >= 500)
+    return (
+      "Server temporarily unavailable. Shift+R retries a view; check before retrying a write. " +
+      detail
+    );
+  if (error.code === "NETWORK" || error.code === "TIMEOUT")
+    return detail + " Shift+R retries a view. Your draft remains editable.";
+  return detail;
+}

package/lib/review-workspace.mjs

@@ -0,0 +1,163 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { clip, graphemes } from "./tui-model.mjs";
+import { syntaxSpans } from "./rich-text.mjs";
+import { colors as c } from "./theme.mjs";
+const h = React.createElement;
+export function codeRange(line, anchor = null) {
+  return {
+    start: Math.min(line, anchor ?? line) + 1,
+    end: Math.max(line, anchor ?? line) + 1,
+  };
+}
+export function reviewExcerpt(post, note) {
+  // Never attach an old remark to unrelated lines in the new snippet.
+  if (note?.outdated)
+    return {
+      text: note.quote || "Earlier snippet unavailable",
+      first: note.start_line || 1,
+      old: true,
+    };
+  return { text: post?.code || "", first: 1, old: false };
+}
+export function ReviewWorkspace({
+  post,
+  note,
+  items,
+  index,
+  width,
+  height,
+  focus,
+  line,
+  anchor,
+  horizontal = 0,
+  rows,
+}) {
+  const split = width >= 78,
+    codeWidth = split ? Math.floor(width * 0.55) : width;
+  const selectedNote = note || items[index];
+  const excerpt = reviewExcerpt(post, focus === "code" ? null : selectedNote),
+    lines = excerpt.text.split("\n");
+  const range = codeRange(line, anchor);
+  const target = excerpt.old
+    ? 0
+    : focus === "code"
+      ? line
+      : Math.max(0, (selectedNote?.start_line || 1) - 1);
+  const header = height >= 4 ? 2 : 1,
+    count = Math.max(1, height - header),
+    top = Math.max(
+      0,
+      Math.min(lines.length - count, target - Math.floor(count / 3)),
+    );
+  const code = h(
+    Box,
+    { width: codeWidth, height, flexDirection: "column", overflow: "hidden" },
+    h(
+      Text,
+      { color: focus === "code" ? c.blue : c.purple, bold: true },
+      clip(
+        excerpt.old
+          ? "Earlier snippet · saved quote"
+          : "Code · W focus · C comment",
+        codeWidth,
+      ),
+    ),
+    header === 2
+      ? h(
+          Text,
+          { color: c.muted },
+          clip(
+            focus === "code"
+              ? `Lines ${range.start}–${range.end} · Space select`
+              : "Markers: remarks on this page",
+            codeWidth,
+          ),
+        )
+      : null,
+    ...Array.from({ length: count }, (_, i) => {
+      const n = top + i,
+        number = excerpt.first + n;
+      if (n >= lines.length) return h(Text, { key: i }, " ");
+      const marked =
+        !excerpt.old &&
+        items.some(
+          (item) =>
+            !item.outdated &&
+            !item.deleted_at &&
+            number >= item.start_line &&
+            number <= item.end_line,
+        );
+      const highlighted =
+        excerpt.old ||
+        (focus === "code"
+          ? number >= range.start && number <= range.end
+          : selectedNote &&
+            !selectedNote.outdated &&
+            number >= selectedNote.start_line &&
+            number <= selectedNote.end_line);
+      const text = lines[n];
+      const rendered = clip(
+        `${marked ? "●" : " "}${String(number).padStart(4)}  ${graphemes(text.replaceAll("\t", "  ")).slice(horizontal).join("")}`,
+        codeWidth,
+      );
+      return h(
+        Text,
+        {
+          key: i,
+          backgroundColor: highlighted ? c.selected : undefined,
+          color: text.startsWith("+")
+            ? c.green
+            : text.startsWith("-")
+              ? c.red
+              : c.text,
+        },
+        ...(text.startsWith("+") || text.startsWith("-")
+          ? [rendered]
+          : syntaxSpans(rendered).map((span, j) =>
+              h(Text, { key: j, color: span.color }, span.text),
+            )),
+      );
+    }),
+  );
+  const notesWidth = split ? width - codeWidth - 2 : width;
+  const visible = Math.max(1, Math.floor((height - 2) / 4)),
+    first = Math.max(0, index - visible + 1);
+  const notes = h(
+    Box,
+    { width: notesWidth, height, flexDirection: "column", overflow: "hidden" },
+    h(
+      Text,
+      { color: focus === "notes" ? c.blue : c.purple, bold: true },
+      "Discussion · W focus",
+    ),
+    header === 2
+      ? h(
+          Text,
+          { color: c.muted },
+          clip("Enter thread · Space read · X actions", notesWidth),
+        )
+      : null,
+    ...(items.length
+      ? rows(notesWidth)
+          .slice(first * 4, first * 4 + height - header)
+          .map((row, i) =>
+            h(
+              Text,
+              {
+                key: i,
+                color: row.color || c.text,
+                bold: row.bold,
+                backgroundColor: row.selected ? c.selected : undefined,
+              },
+              clip(typeof row === "string" ? row : row.text, notesWidth),
+            ),
+          )
+      : [h(Text, { key: "empty", color: c.muted }, "No remarks. C adds one.")]),
+  );
+  return h(
+    Box,
+    { height, width, gap: split ? 2 : 0, overflow: "hidden" },
+    ...(split ? [code, notes] : [focus === "code" ? code : notes]),
+  );
+}