jaitus 0.3.0

package/src/tui/widgets.js

@@ -0,0 +1,226 @@
+// ─── Motion ─────────────────────────────────────────────────────────────────────
+//
+// Ink 7 drives every animated component from one shared timer, so the cost of the
+// pieces below is a single interval for the whole app rather than one per widget.
+// That is the only reason a live cursor, a spinner, a shimmering label and a breathing
+// border can all run at once without the frame rate collapsing.
+//
+// Every widget here answers to `motionOn()`. Reduced motion is not a degraded mode: a
+// static spinner frame, a solid gradient and a plain bar are all legible, and someone
+// who gets motion sick from a sweeping highlight should not have to give up the UI to
+// turn it off.
+
+import React from 'react';
+import { Box, Text, useAnimation } from 'ink';
+import { palette, mix, ramp } from './theme.js';
+
+const h = React.createElement;
+
+let motionCache = { at: 0, value: true };
+
+/** Whether to animate. Cheap, cached, and re-read often enough to follow a setting. */
+export function motionOn() {
+  if (process.env.JAITUS_NO_ANIMATION === '1' || process.env.JAITUS_NO_SPINNER === '1') return false;
+  const now = Date.now();
+  if (now - motionCache.at < 1500) return motionCache.value;
+  let value = true;
+  try {
+    // Imported lazily: config reads the disk, and this is called during render.
+    const settings = globalThis.__jaitusSettings;
+    if (settings && settings.animations === false) value = false;
+  } catch { /* default to motion */ }
+  motionCache = { at: now, value };
+  return value;
+}
+
+/** The session caches settings here so render never touches the filesystem. */
+export function publishSettings(settings) {
+  globalThis.__jaitusSettings = settings || {};
+  motionCache = { at: 0, value: true };
+}
+
+// Classic Windows consoles with a raster font render block and box-drawing glyphs as
+// tofu, so every widget that draws with them needs a plain twin. Decided per call:
+// JAITUS_ASCII can be set after a device probe and before the first frame.
+const ascii = () => process.env.JAITUS_ASCII === '1';
+
+const BRAILLE = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const ASCII_SPIN = ['|', '/', '-', '\\'];
+const PULSE_DOTS = ['◐', '◓', '◑', '◒'];
+const ORBIT = ['⢎ ', '⠎⠁', '⠊⠑', '⠈⠱', ' ⡱', '⢀⡰', '⢄⡠', '⢆⡀'];
+
+export const SPINNERS = { braille: BRAILLE, ascii: ASCII_SPIN, pulse: PULSE_DOTS, orbit: ORBIT };
+
+export function Spinner({ kind = 'braille', color, interval = 80 }) {
+  const p = palette();
+  const frames = SPINNERS[kind] || BRAILLE;
+  const active = motionOn();
+  const { frame } = useAnimation({ interval, isActive: active });
+  return h(Text, { color: color || p.brand }, active ? frames[frame % frames.length] : frames[0]);
+}
+
+/**
+ * Text with a highlight travelling through it.
+ *
+ * The moving part is a narrow band rather than a whole-string colour change, because a
+ * band reads as "something is happening over there" while a pulsing string reads as an
+ * alert. `intensity` is how far the band lifts the base colour.
+ */
+export function Shimmer({ children, from, to, width = 6, interval = 70, bold = false }) {
+  const p = palette();
+  const base = from || p.brand;
+  const peak = to || p.brandSoft;
+  const text = String(children ?? '');
+  const active = motionOn();
+  const { frame } = useAnimation({ interval, isActive: active && text.length > 1 });
+  if (!active) return h(Text, { color: base, bold }, text);
+
+  const chars = [...text];
+  const period = chars.length + width * 2;
+  const head = frame % period;
+  return h(Text, { bold }, chars.map((ch, index) => {
+    const distance = Math.abs(index + width - head);
+    const t = distance >= width ? 0 : 1 - distance / width;
+    return h(Text, { key: index, color: mix(base, peak, t) }, ch);
+  }));
+}
+
+/** A fixed gradient across a string. The wordmark and the section rules use it. */
+export function GradientText({ children, from, to, bold = false, dimColor = false }) {
+  const p = palette();
+  const text = String(children ?? '');
+  const chars = [...text];
+  if (chars.length < 2) return h(Text, { color: from || p.brand, bold }, text);
+  const colors = ramp(from || p.brand, to || p.teal, chars.length);
+  return h(Text, { bold, dimColor }, chars.map((ch, index) => h(Text, { key: index, color: colors[index] }, ch)));
+}
+
+/**
+ * The same gradient, drifting. Used for the hairline under the header while a turn is
+ * in flight — the one piece of chrome that tells you the app is alive even when the
+ * model has gone quiet for thirty seconds.
+ */
+export function FlowingRule({ width, from, to, interval = 90, active = true }) {
+  const p = palette();
+  const w = Math.max(1, width | 0);
+  const on = active && motionOn();
+  const { frame } = useAnimation({ interval, isActive: on });
+  const a = from || p.brand;
+  const b = to || p.teal;
+  const bar = ascii() ? '-' : '─';
+  const moving = ascii() ? '=' : '━';
+  if (!on) {
+    const colors = ramp(a, b, w);
+    return h(Text, null, colors.map((color, i) => h(Text, { key: i, color }, bar)));
+  }
+  const period = w * 2;
+  return h(Text, null, Array.from({ length: w }, (_, i) => {
+    const phase = ((i + frame) % period) / period;
+    const t = phase < 0.5 ? phase * 2 : (1 - phase) * 2;
+    return h(Text, { key: i, color: mix(a, b, t) }, moving);
+  }));
+}
+
+/** A sine wave of block characters — the "thinking" ribbon beside the spinner. */
+export function Wave({ width = 12, color, interval = 70, active = true }) {
+  const p = palette();
+  const blocks = ascii() ? ['.', ':', '|', ':'] : ['▁', '▂', '▃', '▄', '▅', '▆', '▅', '▄', '▃', '▂'];
+  const on = active && motionOn();
+  const { frame } = useAnimation({ interval, isActive: on });
+  const tint = color || p.teal;
+  if (!on) return h(Text, { color: tint }, (ascii() ? ':' : '▃').repeat(width));
+  return h(Text, { color: tint }, Array.from({ length: width }, (_, i) => blocks[(i + frame) % blocks.length]).join(''));
+}
+
+/**
+ * A horizontal meter. `danger` flips the fill to amber then red as it fills, which is
+ * what the context meter needs: the number is meaningless until it is nearly full, and
+ * then it is the most important thing on the screen.
+ */
+export function Meter({ value, max = 1, width = 10, color, danger = false, track }) {
+  const p = palette();
+  const ratio = max > 0 ? Math.max(0, Math.min(1, value / max)) : 0;
+  const filled = Math.round(ratio * width);
+  const tint = danger
+    ? (ratio > 0.9 ? p.red : ratio > 0.75 ? p.yellow : color || p.teal)
+    : (color || p.teal);
+  const [on, off] = ascii() ? ['#', '.'] : ['█', '░'];
+  return h(Text, null,
+    h(Text, { color: tint }, on.repeat(filled)),
+    h(Text, { color: track || p.faint }, off.repeat(Math.max(0, width - filled))),
+  );
+}
+
+/** Elapsed seconds, counted in the render loop so no timer has to be owned upstream. */
+export function Elapsed({ since, color, interval = 1000 }) {
+  const p = palette();
+  useAnimation({ interval, isActive: motionOn() });
+  const seconds = Math.max(0, Math.floor((Date.now() - (since || Date.now())) / 1000));
+  const label = seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${String(seconds % 60).padStart(2, '0')}s`;
+  return h(Text, { color: color || p.dim }, label);
+}
+
+/** A block cursor that blinks. Off under reduced motion, where it stands solid. */
+export function Caret({ color, char = '▏' }) {
+  const p = palette();
+  const active = motionOn();
+  const { frame } = useAnimation({ interval: 500, isActive: active });
+  const visible = !active || frame % 2 === 0;
+  return h(Text, { color: visible ? (color || p.brand) : undefined, inverse: false }, visible ? char : ' ');
+}
+
+/**
+ * A panel that grows to its full height when it appears.
+ *
+ * Overlays that pop fully formed read as a glitch — the eye cannot tell whether the
+ * screen changed or the app crashed and redrew. Three frames of growth is enough to
+ * make the change legible as a movement, and short enough that nobody waits for it.
+ */
+export function Reveal({ children, rows, duration = 140 }) {
+  const active = motionOn();
+  const { time } = useAnimation({ interval: 40, isActive: active });
+  if (!active) return children;
+  const t = Math.min(1, time / duration);
+  if (t >= 1) return children;
+  const height = Math.max(1, Math.round(rows * t));
+  // The inner wrapper must refuse to shrink. Constraining only the outer box makes
+  // Yoga compress the children to fit instead of clipping them, and compressed rows in
+  // a terminal do not disappear — they are written on top of each other, so an overlay
+  // mid-animation renders as two lines of text merged into one.
+  return h(Box, { flexDirection: 'column', height, overflow: 'hidden' },
+    h(Box, { flexDirection: 'column', flexShrink: 0 }, children));
+}
+
+/** Rows of spans → Ink text. The single place span objects become pixels. */
+export function Rows({ rows, maxRows }) {
+  const visible = maxRows && rows.length > maxRows ? rows.slice(rows.length - maxRows) : rows;
+  return h(Box, { flexDirection: 'column' }, visible.map((row, index) =>
+    h(Text, { key: index, wrap: 'truncate-end' }, row.length
+      ? row.map((span, i) => h(Text, {
+        key: i,
+        color: span.color,
+        backgroundColor: span.backgroundColor,
+        bold: span.bold,
+        dimColor: span.dimColor,
+        italic: span.italic,
+        underline: span.underline,
+        inverse: span.inverse,
+        strikethrough: span.strikethrough,
+      }, span.t))
+      : ' ')));
+}
+
+/** One row of spans, for places that render a single line. */
+export function Row({ spans, wrap = 'truncate-end' }) {
+  return h(Text, { wrap }, (spans || []).map((span, i) => h(Text, {
+    key: i,
+    color: span.color,
+    backgroundColor: span.backgroundColor,
+    bold: span.bold,
+    dimColor: span.dimColor,
+    italic: span.italic,
+    underline: span.underline,
+    inverse: span.inverse,
+    strikethrough: span.strikethrough,
+  }, span.t)));
+}

package/src/tui/wordmark.js

@@ -0,0 +1,135 @@
+// ─── JAITUS, as letterforms ─────────────────────────────────────────────────────
+//
+// The previous wordmark was drawn directly in terminal cells, one cell per pixel. A
+// terminal cell is about twice as tall as it is wide, so every letter came out stretched
+// to double height with strokes one cell thick — which is why it read as ASCII art
+// rather than as a logotype.
+//
+// These are drawn on a PIXEL grid instead and rendered with half-blocks, two pixel rows
+// per terminal row. That makes the pixels square, so the proportions are the ones drawn
+// here, and it doubles the vertical resolution so a stroke can be two pixels wide and
+// still leave room for counters inside `A`, `U` and `S`.
+//
+// Eight rows tall → four terminal rows, which is the same height as the mascot mark, so
+// the two sit on one baseline as a lockup.
+
+const GLYPHS = {
+  J: [
+    '....███',
+    '....███',
+    '.....██',
+    '.....██',
+    '.....██',
+    '██...██',
+    '███████',
+    '.█████.',
+  ],
+  A: [
+    '..███..',
+    '.█████.',
+    '██...██',
+    '██...██',
+    '███████',
+    '███████',
+    '██...██',
+    '██...██',
+  ],
+  I: [
+    '██████',
+    '██████',
+    '..██..',
+    '..██..',
+    '..██..',
+    '..██..',
+    '██████',
+    '██████',
+  ],
+  T: [
+    '███████',
+    '███████',
+    '...██..',
+    '...██..',
+    '...██..',
+    '...██..',
+    '...██..',
+    '...██..',
+  ],
+  U: [
+    '██...██',
+    '██...██',
+    '██...██',
+    '██...██',
+    '██...██',
+    '██...██',
+    '███████',
+    '.█████.',
+  ],
+  S: [
+    '.██████',
+    '███████',
+    '██.....',
+    '██████.',
+    '.██████',
+    '.....██',
+    '███████',
+    '██████.',
+  ],
+};
+
+const SPACING = 1; // blank pixel columns between letters
+
+/**
+ * A word as a pixel grid: an array of rows, each a string of `█` and space.
+ *
+ * Unknown characters become a gap rather than throwing — the word is a brand asset, not
+ * user input, but a missing glyph should leave a hole in a logo rather than take down a
+ * terminal session.
+ */
+export function wordPixels(word = 'JAITUS') {
+  const letters = [...String(word).toUpperCase()].map((ch) => GLYPHS[ch] || null);
+  const height = 8;
+  const rows = Array.from({ length: height }, () => '');
+  letters.forEach((glyph, index) => {
+    if (index > 0) for (let y = 0; y < height; y++) rows[y] += '.'.repeat(SPACING);
+    for (let y = 0; y < height; y++) rows[y] += glyph ? glyph[y] : '.'.repeat(5);
+  });
+  return rows;
+}
+
+/** How many terminal cells wide and tall `word` renders. */
+export function wordSize(word = 'JAITUS') {
+  const pixels = wordPixels(word);
+  return { width: pixels[0]?.length || 0, rows: Math.ceil(pixels.length / 2) };
+}
+
+/**
+ * The word as rows of spans, using half-blocks.
+ *
+ * `ink(column, total)` returns the colour for a column, so the caller owns the gradient
+ * — the app runs coral to teal across the word and dims the whole thing during the
+ * intro, and neither of those belongs in the letterforms.
+ */
+export function wordRows(word = 'JAITUS', ink = () => undefined) {
+  const pixels = wordPixels(word);
+  const width = pixels[0]?.length || 0;
+  const rows = [];
+  for (let y = 0; y < pixels.length; y += 2) {
+    const top = pixels[y] || '';
+    const bottom = pixels[y + 1] || '';
+    const spans = [];
+    for (let x = 0; x < width; x++) {
+      const upper = top[x] === '█';
+      const lower = bottom[x] === '█';
+      const color = ink(x, width);
+      // Upper half-block with a background paints both pixels of the cell; one alone
+      // paints the half that is lit and leaves the other transparent, so the mark sits
+      // on the terminal's own ground rather than in a rectangle.
+      if (upper && lower) spans.push({ t: '█', color });
+      else if (upper) spans.push({ t: '▀', color });
+      else if (lower) spans.push({ t: '▄', color });
+      else spans.push({ t: ' ' });
+    }
+    rows.push(spans);
+  }
+  return rows;
+}