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

package/README.md

@@ -31,12 +31,25 @@ 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.
 
+## Meet Devi
+
+Devi is the Devdevian mascot: a small ghost with a laptop and an orbit. The terminal uses colored ASCII art, so it needs no image protocol or image downloads. A compact drawing is used when space is limited; authentication codes, addresses and controls take priority over decoration.
+
+- **“Devi missed you.”** appears while checking your saved session and loading the first page. It disappears as soon as the page is ready; there is no minimum splash duration or fake progress bar.
+- **“Devi saved you a seat.”** welcomes you to browser-approved sign-in. Sign-in instructions stay visible in small terminals.
+- Empty feed, Inbox, communities, local drafts and search views show a still mascot with a relevant next step. Errors remain error states; they do not become a happy empty view.
+- Subtle mode animates a blink only during startup work or pending browser approval. **Reduced motion** keeps the drawing static. Disable it entirely in **Appearance → Devi greeting**, with `devdevian appearance --welcome off`, or just for one launch with `devdevian tui --welcome off`.
+- A failed session check offers **R / Enter** to retry the existing session. **Ctrl+C** exits during loading. Script commands and `--json` output never print the mascot.
+
+All mascot captions are in English. Welcome preferences are local and compatible with existing 0.5.0 configuration files.
+
 ## Themes and layout
 
 Open **Appearance** in navigation, type `/appearance`, or press **,** from a reading/list screen. Use arrows to choose options and Tab to move between them. The entire interface previews each change, including code colors, the file picker and navigation. Wide terminals include a sample card next to the controls.
 
 - **Midnight** preserves the original blue/purple design; **Nebula** uses a deeper violet surface; **Daylight** is light; **Contrast** emphasizes readable foregrounds.
 - Choose a **blue, violet, cyan or rose accent**, comfortable/compact lists, automatic/hidden sidebar, automatic/stacked review panels, rounded/straight frames and subtle/reduced loading indicators.
+- **Devi greeting** shows/hides the terminal mascot on startup, sign-in and supported empty sections. Reduced motion keeps Devi still.
 - **Ctrl+S** saves locally. **Esc** cancels the preview. **0** restores the default preview; save to keep it, or cancel to retain existing settings.
 - Hidden navigation stays available with **Tab**. Stacked review panes switch with **W**. Narrow terminals automatically avoid a permanent sidebar and split review layout.
 

package/VERSIONS.md

@@ -8,6 +8,15 @@ Every published npm artifact has a unique immutable version. We record each vers
 
 **0.5.0 focuses on themes, interface customization and local appearance preferences.** Projects and Events parity remains a separate future milestone.
 
+## 0.5.1-alpha.1 — Meet Devi
+
+- Added a terminal-native ASCII mascot based on the ghost/laptop/orbit logo, with full and compact drawings and English greetings: “Devi missed you.” and “Devi saved you a seat.”
+- Startup follows the actual session check and first page request, with no minimum duration or artificial progress. Connection errors stop the loading state and offer an existing-session retry.
+- Supported empty sections show a still Devi and a contextual next step. Sign-in codes, addresses and controls take priority on small screens.
+- Subtle motion blinks only during active startup or browser approval; Reduced motion is static. Appearance includes a persistent welcome on/off option, also available to offline commands and session-only launch flags.
+- Script/JSON commands remain banner-free. No additional image dependency, API change, schema migration or production-data change. Existing preferences default the new setting to on.
+- Checked delayed/failing startup, retry, animation/static/off modes, English captions, first-page handoff, empty Inbox, script output and 60×18 device approval in unit and pseudo-terminal regressions.
+
 ## 0.5.0-alpha.1 — Make the terminal yours
 
 **Changes**

package/bin/devdevian.mjs

@@ -120,6 +120,7 @@ const help = `Devdevian CLI ${version} · alpha
   --review-layout MODE  auto | stacked
   --frame STYLE      round | single
   --motion MODE      subtle | reduced
+  --welcome MODE     on | off (Devi greeting)
   --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

package/lib/appearance.mjs

@@ -72,6 +72,14 @@ export const appearanceFields = [
       ["reduced", "Reduced · static indicators"],
     ],
   },
+  {
+    key: "welcome",
+    label: "Devi greeting",
+    options: [
+      ["on", "Show Devi"],
+      ["off", "Hide Devi"],
+    ],
+  },
 ];
 export const defaultAppearance = Object.freeze(
   Object.fromEntries(

package/lib/devi.mjs

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from "react";
+import { Box, Text } from "ink";
+import stringWidth from "string-width";
+import { clip, wrap } from "./tui-model.mjs";
+import { useTheme } from "./theme.mjs";
+const h = React.createElement;
+// Terminal-native mascot: ghost, laptop and orbit, drawn without image protocols.
+const full = [
+  '           .-""""-.',
+  "          /        \\",
+  "         /  .----.  \\       +",
+  "        |  ( o  o )  |",
+  "    .---|   '----' .-------.",
+  " .-'    |        /  </>  / '-.",
+  "(       |   _   /______/      )",
+  " '---.._ \\_/ \\_/     _..---'",
+  "         '----------'",
+];
+const small = [
+  "   .---.    .-----.",
+  "  ( o o )  / </> /",
+  "  /_   _\\ /_____/",
+  "    '---'",
+];
+export function deviArt(compact = false, frame = 0) {
+  const blink = frame % 6 === 4;
+  return (compact ? small : full).map((line) =>
+    blink ? line.replace("o  o", "-  -").replace("o o", "- -") : line,
+  );
+}
+// Required status and controls get space before decoration. No minimum display timer.
+export function deviLayout({
+  width,
+  height,
+  message,
+  status = [],
+  footer = [],
+  show = true,
+  frame = 0,
+}) {
+  width = Math.max(1, width);
+  height = Math.max(1, height);
+  const instructions = footer.flatMap((line) => wrap(line, width));
+  const details = status.flatMap((line) => wrap(line, width));
+  const footerRows = instructions.slice(0, height);
+  const budget = Math.max(0, height - footerRows.length);
+  const detailRows = details.slice(0, budget);
+  let remaining = height - footerRows.length - detailRows.length;
+  const title = message ? wrap(message, width) : [];
+  let art = [];
+  if (show) {
+    for (const compact of [false, true]) {
+      const candidate = deviArt(compact, frame);
+      if (
+        candidate.every((line) => stringWidth(line) <= width) &&
+        candidate.length + title.length + 2 <= remaining
+      ) {
+        art = candidate;
+        break;
+      }
+    }
+  }
+  const rows = [];
+  if (art.length) {
+    rows.push(
+      ...art.map((text) => ({
+        text: text.padEnd(Math.max(...art.map((line) => stringWidth(line)))),
+        role: text.includes("</>") ? "blue" : "purple",
+      })),
+      { text: "" },
+    );
+    remaining -= art.length + 1;
+  }
+  if (title.length && title.length <= remaining) {
+    rows.push(...title.map((text) => ({ text, role: "text", bold: true })));
+    remaining -= title.length;
+  }
+  if (remaining && rows.length) rows.push({ text: "" });
+  rows.push(
+    ...detailRows.map((text) => ({ text, role: "text" })),
+    ...footerRows.map((text) => ({ text, role: "muted" })),
+  );
+  return rows
+    .slice(0, height)
+    .map((row) => ({ ...row, text: clip(row.text, width) }));
+}
+export function DeviPanel({
+  width,
+  height,
+  message = "Devi missed you.",
+  status,
+  footer,
+  show = true,
+  animate = false,
+  motion = "subtle",
+}) {
+  const c = useTheme(),
+    [frame, setFrame] = useState(0);
+  useEffect(() => {
+    if (!show || !animate || motion === "reduced") return;
+    const timer = setInterval(() => setFrame((value) => (value + 1) % 6), 400);
+    return () => clearInterval(timer);
+  }, [show, animate, motion]);
+  const rows = deviLayout({
+    width,
+    height,
+    message,
+    status,
+    footer,
+    show,
+    frame: motion === "reduced" ? 0 : frame,
+  });
+  return h(
+    Box,
+    {
+      width,
+      height,
+      flexDirection: "column",
+      justifyContent: "center",
+      overflow: "hidden",
+    },
+    ...rows.map((row, index) =>
+      h(
+        Text,
+        {
+          key: index,
+          color: c[row.role] || c.text,
+          bold: row.bold,
+          wrap: "truncate",
+        },
+        " ".repeat(
+          Math.max(0, Math.floor((width - stringWidth(row.text)) / 2)),
+        ) + row.text,
+      ),
+    ),
+  );
+}

package/lib/tui.mjs

@@ -3,6 +3,7 @@ import { render, Box, Text, useApp, useInput, useWindowSize } from "ink";
 import { randomBytes } from "node:crypto";
 import { homedir, hostname } from "node:os";
 import { workspaceRoot, reviewSource } from "./workspace.mjs";
+import { DeviPanel } from "./devi.mjs";
 import { WorkspacePicker } from "./picker.mjs";
 import { DraftStore, draftIdentity } from "./drafts.mjs";
 import { spawn } from "node:child_process";
@@ -523,7 +524,8 @@ function App({ initialConfig, flags, root, initialAppearance }) {
     ),
     [user, setUser] = useState(null),
     [device, setDevice] = useState(null),
-    [authVersion, setAuthVersion] = useState(0);
+    [authVersion, setAuthVersion] = useState(0),
+    [booting, setBooting] = useState(true);
   const [route, setRoute] = useState({ view: "feed", page: 1 }),
     [data, setData] = useState(null),
     [loading, setLoading] = useState(false),
@@ -693,6 +695,7 @@ function App({ initialConfig, flags, root, initialAppearance }) {
     setPreview(null);
     setDevice(null);
     setUser(null);
+    setBooting(true);
     setReading(null);
     setActionIndex(null);
     setUnread(0);
@@ -716,6 +719,7 @@ function App({ initialConfig, flags, root, initialAppearance }) {
     } else setError(problemMessage(e));
   }
   function navigate(next, { replace = false } = {}) {
+    setBooting(false);
     if (!replace)
       history.current.push({
         route,
@@ -898,7 +902,7 @@ function App({ initialConfig, flags, root, initialAppearance }) {
         if (!controller.signal.aborted) fail(e);
       });
     return () => controller.abort();
-  }, [phase, api]);
+  }, [phase, api, authVersion]);
   useEffect(() => {
     if (phase !== "ready" || !api || form || route.view === "help") return;
     let active = true;
@@ -964,7 +968,10 @@ function App({ initialConfig, flags, root, initialAppearance }) {
           if (active) fail(e);
         })
         .finally(() => {
-          if (active) setLoading(false);
+          if (active) {
+            setLoading(false);
+            setBooting(false);
+          }
         });
     return () => {
       active = false;
@@ -996,6 +1003,7 @@ function App({ initialConfig, flags, root, initialAppearance }) {
           if (controller.signal.aborted) return;
           resetAccount();
           setConfig(saved);
+          setBooting(true);
           setPhase("checking");
           setNotice("Terminal connected.");
           return;
@@ -1062,6 +1070,7 @@ function App({ initialConfig, flags, root, initialAppearance }) {
     );
   }
   function openForm(next) {
+    setBooting(false);
     setForm({
       ...next,
       draftId: next.draftId || randomBytes(32).toString("hex"),
@@ -1772,6 +1781,14 @@ function App({ initialConfig, flags, root, initialAppearance }) {
         setDevice(null);
         return;
       }
+      if (phase === "checking") {
+        if (input === "q") exit();
+        else if (error && (keyEvent.return || input === "r" || input === "R")) {
+          setError("");
+          setAuthVersion((v) => v + 1);
+        }
+        return;
+      }
       if (input === "q") exit();
       else if (keyEvent.return && !busy.current) {
         if (phase === "pending" && device) openBrowser(device.verification_uri);
@@ -2257,44 +2274,82 @@ function App({ initialConfig, flags, root, initialAppearance }) {
       },
     });
   else if (phase !== "ready") {
-    const lines = [
-      "A place for curious developers.",
-      "Your conversations, without leaving the terminal.",
-      "",
-      ...(phase === "pending" && device
+    const statusLines =
+      phase === "pending" && device
         ? [
             "Confirm this code: " + device.user_code,
-            "Waiting for your approval " + spin,
             device.verification_uri,
-            "Enter reopens the browser · Esc cancels",
+            "Waiting for your approval...",
           ]
         : phase === "checking"
-          ? ["Opening your workspace " + spin]
+          ? error
+            ? ["Connection could not be completed.", error]
+            : ["Connecting to Devdevian..."]
           : [
               "Sign in with your existing Devdevian account.",
-              "",
-              "Enter connects this terminal through your browser.",
               "Google, GitHub and email sign-in stay on the website.",
-              "",
-              "Q exits.",
-            ]),
-    ];
+            ];
+    const footer =
+      phase === "pending"
+        ? ["Enter reopens the browser · Esc cancels"]
+        : phase === "checking"
+          ? [error ? "R or Enter retries · Ctrl+C exits" : "Ctrl+C exits"]
+          : [
+              "Enter connects this terminal through your browser.",
+              "Q or Ctrl+C exits.",
+            ];
     center = h(
       Box,
       {
         borderStyle: colors.frame,
         borderColor: colors.purple,
         flexDirection: "column",
-        paddingX: 2,
-        paddingY: 1,
+        paddingX: 1,
+        height: bodyHeight,
+        overflow: "hidden",
+      },
+      h(DeviPanel, {
+        width: Math.max(1, width - 4),
+        height: Math.max(1, bodyHeight - 2),
+        message:
+          effectiveAppearance.welcome === "off"
+            ? ""
+            : phase === "checking"
+              ? "Devi missed you."
+              : "Devi saved you a seat.",
+        status: statusLines,
+        footer,
+        show: effectiveAppearance.welcome === "on",
+        animate: phase !== "auth" && !error,
+        motion: effectiveAppearance.motion,
+      }),
+    );
+  } else if (
+    booting &&
+    !current &&
+    effectiveAppearance.welcome === "on" &&
+    !error &&
+    !dialog &&
+    !form &&
+    !picker
+  ) {
+    center = h(
+      Box,
+      {
+        borderStyle: colors.frame,
+        borderColor: colors.purple,
+        paddingX: 1,
         height: bodyHeight,
         overflow: "hidden",
       },
-      h(Text, { bold: true, color: colors.purple }, "YOUR DEVELOPER SPACE"),
-      h(FrameRows, {
-        rows: lines.flatMap((line) => wrap(line, width - 8)),
-        width: width - 8,
-        height: Math.max(1, bodyHeight - 5),
+      h(DeviPanel, {
+        width: Math.max(1, width - 4),
+        height: Math.max(1, bodyHeight - 2),
+        message: "Devi missed you.",
+        status: ["Loading your " + labelOf(route).toLowerCase() + "..."],
+        footer: ["Ctrl+C exits"],
+        motion: effectiveAppearance.motion,
+        animate: true,
       }),
     );
   } else if (dialog) {
@@ -2405,7 +2460,7 @@ function App({ initialConfig, flags, root, initialAppearance }) {
         width: contentWidth,
         height: contentHeight,
       });
-    else if (loading && !current)
+    else if ((loading || booting) && !current)
       body = h(
         Text,
         { color: colors.muted },
@@ -2500,30 +2555,49 @@ function App({ initialConfig, flags, root, initialAppearance }) {
           height: contentHeight,
           offset: Math.min(scroll, Math.max(0, lines.length - contentHeight)),
         });
-      else if (!current?.items?.length)
-        body = h(
-          Box,
-          { flexDirection: "column", paddingTop: 1 },
-          h(
-            Text,
-            { color: colors.text },
-            route.view === "search"
-              ? "Find your next useful conversation."
-              : error
-                ? "Could not open this view."
-                : "Nothing here yet.",
-          ),
-          h(
-            Text,
-            { color: colors.muted },
-            error
-              ? "Press Shift+R to retry."
-              : route.view === "feed"
-                ? "N starts a conversation. A asks a question."
-                : "Use / to search or Tab to explore another section.",
-          ),
-        );
-      else {
+      else if (!current?.items?.length) {
+        const messages = {
+          inbox: [
+            "You're all caught up.",
+            "Replies, mentions and review updates will appear here.",
+          ],
+          drafts: [
+            "No local drafts yet.",
+            "Start writing to save a private draft on this device.",
+          ],
+          communities: [
+            "Find your people.",
+            "Use / to search or N to create a private community.",
+          ],
+          feed: [
+            "Nothing here yet.",
+            "N starts a conversation. A asks a question.",
+          ],
+          search: route.query
+            ? [
+                "No conversations matched your search.",
+                "Try fewer words or a different phrase.",
+              ]
+            : [
+                "Find your next useful conversation.",
+                "Press / and type /search followed by your query.",
+              ],
+        };
+        const message = messages[route.view] || [
+          "Nothing here yet.",
+          "Use / to search or Tab to explore another section.",
+        ];
+        body = h(DeviPanel, {
+          width: contentWidth,
+          height: contentHeight,
+          message: message[0],
+          status: [message[1]],
+          show:
+            effectiveAppearance.welcome === "on" &&
+            Object.hasOwn(messages, route.view),
+          motion: effectiveAppearance.motion,
+        });
+      } else {
         const visible = Math.max(1, Math.floor(contentHeight / stride)),
           first = Math.max(0, index - visible + 1),
           rows = listRows(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenyokjs/devdevian-cli",
-  "version": "0.5.0-alpha.1",
+  "version": "0.5.1-alpha.1",
   "description": "Devdevian in your terminal: discussions, questions and human code reviews.",
   "type": "module",
   "bin": {