@tenyokjs/devdevian-cli 0.4.0-alpha.1 → 0.5.0-alpha.1

package/lib/review-workspace.mjs

@@ -1,7 +1,8 @@
 import React from "react";
 import { Box, Text } from "ink";
 import { clip, graphemes } from "./tui-model.mjs";
-import { colors as c } from "./theme.mjs";
+import { syntaxSpans } from "./rich-text.mjs";
+import { useTheme } from "./theme.mjs";
 const h = React.createElement;
 export function codeRange(line, anchor = null) {
   return {
@@ -31,8 +32,11 @@ export function ReviewWorkspace({
   anchor,
   horizontal = 0,
   rows,
+  layout = "auto",
+  stride = 4,
 }) {
-  const split = width >= 78,
+  const c = useTheme();
+  const split = width >= 78 && layout !== "stacked",
     codeWidth = split ? Math.floor(width * 0.55) : width;
   const selectedNote = note || items[index];
   const excerpt = reviewExcerpt(post, focus === "code" ? null : selectedNote),
@@ -96,6 +100,10 @@ export function ReviewWorkspace({
             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,
         {
@@ -107,15 +115,16 @@ export function ReviewWorkspace({
               ? c.red
               : c.text,
         },
-        clip(
-          `${marked ? "●" : " "}${String(number).padStart(4)}  ${graphemes(text.replaceAll("\t", "  ")).slice(horizontal).join("")}`,
-          codeWidth,
-        ),
+        ...(text.startsWith("+") || text.startsWith("-")
+          ? [rendered]
+          : syntaxSpans(rendered, c).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)),
+  const visible = Math.max(1, Math.floor((height - 2) / stride)),
     first = Math.max(0, index - visible + 1);
   const notes = h(
     Box,
@@ -134,7 +143,7 @@ export function ReviewWorkspace({
       : null,
     ...(items.length
       ? rows(notesWidth)
-          .slice(first * 4, first * 4 + height - header)
+          .slice(first * stride, first * stride + height - header)
           .map((row, i) =>
             h(
               Text,

package/lib/rich-text.mjs

@@ -0,0 +1,96 @@
+import { clean } from "./client.mjs";
+import { wrap } from "./tui-model.mjs";
+import { colors } from "./theme.mjs";
+
+// Small, predictable terminal renderer. HTML and terminal hyperlinks are never executed.
+export function syntaxSpans(text, c = colors) {
+  const pattern =
+    /("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`[^`]*`|\/\/.*$|#.*$|\b(?:async|await|function|return|const|let|var|if|else|throw|new|class|import|from|export|def|None|True|False|true|false|null|try|catch|for|while)\b|\b\d+(?:\.\d+)?\b)/g;
+  const parts = [];
+  let start = 0;
+  for (const match of text.matchAll(pattern)) {
+    if (match.index > start)
+      parts.push({ text: text.slice(start, match.index) });
+    const word = match[0];
+    parts.push({
+      text: word,
+      color: /^(\/\/|#)/.test(word)
+        ? c.muted
+        : /^["'`]/.test(word)
+          ? c.green
+          : /^\d/.test(word)
+            ? c.blue
+            : c.purple,
+    });
+    start = match.index + word.length;
+  }
+  if (start < text.length) parts.push({ text: text.slice(start) });
+  return parts;
+}
+export function markdownRows(value, width, c = colors) {
+  let fence = null,
+    number = 0;
+  const rows = [];
+  for (const raw of clean(value).replace(/\t/g, "  ").split("\n")) {
+    const marker = raw.match(/^\s*(`{3,}|~{3,})(.*)$/);
+    if (
+      marker &&
+      (!fence ||
+        (marker[1][0] === fence[0] &&
+          marker[1].length >= fence.length &&
+          !marker[2].trim()))
+    ) {
+      if (fence) {
+        fence = null;
+        rows.push({ text: "", color: c.muted });
+      } else {
+        fence = marker[1];
+        number = 0;
+        rows.push({
+          text:
+            "CODE SNIPPET" + (marker[2].trim() ? " · " + marker[2].trim() : ""),
+          color: c.blue,
+          bold: true,
+        });
+      }
+      continue;
+    }
+    if (fence) {
+      const prefix = String(++number).padStart(4) + "  ";
+      for (const [i, line] of wrap(raw, Math.max(1, width - 6)).entries()) {
+        const text = (i ? "      " : prefix) + line;
+        rows.push({ text, spans: syntaxSpans(text, c) });
+      }
+      continue;
+    }
+    const heading = /^#{1,6}\s+/.test(raw),
+      quote = /^>\s?/.test(raw);
+    const text = raw
+      .replace(/^#{1,6}\s+/, "")
+      .replace(/^>\s?/, "│ ")
+      .replace(/^\s*[-*+]\s+/, "• ")
+      .replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, "$1 <$2>");
+    for (const line of wrap(text, width)) {
+      const parts = [];
+      let start = 0;
+      for (const match of line.matchAll(/\*\*([^*]+)\*\*|`([^`]+)`/g)) {
+        if (match.index > start)
+          parts.push({ text: line.slice(start, match.index) });
+        parts.push({
+          text: match[1] || match[2],
+          bold: !!match[1],
+          color: match[2] ? c.blue : undefined,
+        });
+        start = match.index + match[0].length;
+      }
+      parts.push({ text: line.slice(start) });
+      rows.push({
+        text: parts.map((p) => p.text).join(""),
+        spans: parts,
+        bold: heading,
+        color: heading ? c.purple : quote ? c.muted : c.text,
+      });
+    }
+  }
+  return rows;
+}

package/lib/theme.mjs

@@ -1,13 +1,66 @@
-// One palette for the workspace, file picker and review panes.
-export const colors = Object.freeze({
-  bg: "#0b1020",
-  panel: "#11182b",
-  line: "#303d60",
-  muted: "#8e9ab8",
-  text: "#e5eaff",
-  blue: "#86baff",
-  purple: "#b5a0ff",
-  green: "#7bdcbd",
-  red: "#ffa0b4",
-  selected: "#29365b",
-});
+import { createContext, useContext } from "react";
+import { normalizeAppearance } from "./appearance.mjs";
+const presets = {
+  midnight: {
+    bg: "#0b1020",
+    panel: "#11182b",
+    line: "#303d60",
+    muted: "#96a3c1",
+    text: "#e5eaff",
+    green: "#7bdcbd",
+    red: "#ffa0b4",
+    selected: "#29365b",
+  },
+  nebula: {
+    bg: "#100d20",
+    panel: "#1a1530",
+    line: "#4a3b68",
+    muted: "#a49ab9",
+    text: "#f0eaff",
+    green: "#86ddc3",
+    red: "#ffa6bd",
+    selected: "#3c2c59",
+  },
+  daylight: {
+    bg: "#f2f5ff",
+    panel: "#ffffff",
+    line: "#b4c0dc",
+    muted: "#53617a",
+    text: "#1b2440",
+    green: "#16634d",
+    red: "#a12444",
+    selected: "#dce5ff",
+  },
+  contrast: {
+    bg: "#000000",
+    panel: "#080e1c",
+    line: "#899cc6",
+    muted: "#becae2",
+    text: "#ffffff",
+    green: "#8cf4c7",
+    red: "#ffb0c4",
+    selected: "#24345c",
+  },
+};
+export function themeFor(value = {}) {
+  const settings = normalizeAppearance(value),
+    light = settings.theme === "daylight";
+  const accents = light
+    ? {
+        blue: ["#3154b8", "#6b36b6"],
+        violet: ["#6b36b6", "#3154b8"],
+        cyan: ["#006b80", "#6b36b6"],
+        rose: ["#9b246c", "#3154b8"],
+      }
+    : {
+        blue: ["#86baff", "#b5a0ff"],
+        violet: ["#c0a6ff", "#86baff"],
+        cyan: ["#74d5ed", "#b5a0ff"],
+        rose: ["#f4a6cf", "#86baff"],
+      };
+  const [blue, purple] = accents[settings.accent];
+  return { ...presets[settings.theme], blue, purple, frame: settings.frame };
+}
+export const colors = Object.freeze(themeFor());
+export const ThemeContext = createContext(colors);
+export const useTheme = () => useContext(ThemeContext);

package/lib/tui-data.mjs

@@ -19,8 +19,42 @@ export const navigation = [
   ["communities", "Communities", "Your private spaces"],
   ["search", "Search", "Find a conversation"],
   ["devices", "Connected terminals", "Manage CLI access"],
+  ["appearance", "Appearance", "Themes & layout"],
   ["help", "Help", "Keys & commands"],
 ];
+export async function notificationRoute(api, item) {
+  if (item.code_review_id)
+    return {
+      view: "feedback",
+      postId: item.post_id,
+      id: item.code_review_id,
+      page: 1,
+      targetReply: item.feedback_reply_id || null,
+    };
+  if (!item.reply_id)
+    return { view: "post", id: item.post_id, tab: "overview", page: 1 };
+  const post = await api(`/posts/${item.post_id}?reply_id=${item.reply_id}`);
+  const target = post.reply_path?.at(-1);
+  if (!target || post.reply_target_missing)
+    throw Object.assign(Error("The linked reply is no longer available."), {
+      status: 404,
+    });
+  return target.parent_id
+    ? {
+        view: "thread",
+        postId: item.post_id,
+        parent: { id: target.parent_id },
+        page: target.page,
+        targetReply: item.reply_id,
+      }
+    : {
+        view: "post",
+        id: item.post_id,
+        tab: "replies",
+        page: target.page,
+        targetReply: item.reply_id,
+      };
+}
 export async function loadPage(api, route, signal) {
   const get = (path) => api(path, { signal }),
     page = route.page || 1;
@@ -85,7 +119,13 @@ export async function loadPage(api, route, signal) {
     };
   }
   if (route.view === "post") {
-    const post = await get("/posts/" + route.id + "?reply_page=" + page);
+    const post = await get(
+      "/posts/" +
+        route.id +
+        (route.targetReply
+          ? "?reply_id=" + route.targetReply
+          : "?reply_page=" + page),
+    );
     let items = post.replies,
       pagination = post.reply_pagination;
     let snippet_hash;
@@ -194,9 +234,12 @@ export function contentLines(route, data) {
       "E / D            Edit / delete your own feedback or reply",
       "O                Open this conversation in your browser",
       "/                Focus the command / search bar",
+      "Ctrl+E           Edit a multiline field in VISUAL / EDITOR",
+      "Ctrl+L           Save a draft and reconnect an expired session",
       "Ctrl+S           Preview the current form",
       "Ctrl+O / Ctrl+G  Select a code file / Git diff in a review form",
       "/drafts          Restore locally saved drafts for this account/project",
+      "/appearance      Preview and save local themes and layout",
       "Ctrl+C           Exit and restore the original terminal",
       "",
       "Commands: /feed  /inbox  /search words  /open 142",

package/lib/tui-model.mjs

@@ -129,6 +129,7 @@ export function parseCommand(text) {
       "help",
       "devices",
       "drafts",
+      "appearance",
     ].includes(cmd)
   )
     return { command: cmd, arg };
@@ -140,7 +141,7 @@ export function parseCommand(text) {
     return { command: cmd, arg: Number(arg) };
   if (["quit", "logout"].includes(cmd)) return { command: cmd };
   throw Error(
-    "Use /feed, /inbox, /search words, /open ID, /ask, /review, /communities, /devices, /drafts, /help or /quit.",
+    "Use /feed, /inbox, /search words, /open ID, /ask, /review, /communities, /devices, /drafts, /appearance, /help or /quit.",
   );
 }
 export class PageCache {