@zakmandhro/bunti 0.2.0 → 0.3.0

package/dist/demos/login.js

@@ -0,0 +1,175 @@
+import { Button, Card, Input, Link, Progress } from "../components/index.js";
+import { demo } from "./demo-layout.js";
+demo("AUTHENTICATION", (ctx, bounds) => {
+  const { color, icon, useState, lastKey, focus, isFocused, requestStop } = ctx;
+  const [email] = useState("input-email", "");
+  const [password] = useState("input-password", "");
+  const [status, setStatus] = useState("login-status", "idle");
+  const [error, setError] = useState("login-error", "");
+  const [progress, setProgress] = useState("login-progress", 0);
+  const [forgotNotice, setForgotNotice] = useState("forgot-notice", "");
+  const subtleTitle = { r: 140, g: 140, b: 140 };
+  const mutedText = { r: 110, g: 110, b: 110 };
+  const linkColor = { r: 37, g: 99, b: 235 };
+  const handleLogin = () => {
+    if (!email.includes("@")) {
+      setError("Please enter a valid email address.");
+      return;
+    }
+    if (password.length < 4) {
+      setError("Password must be at least 4 characters.");
+      return;
+    }
+    setError("");
+    setForgotNotice("");
+    setStatus("loading");
+    setProgress(0);
+  };
+  if (lastKey === "q")
+    requestStop();
+  if (status === "loading") {
+    if (progress < 1) {
+      const step = ctx.flicker(0.1) ? 0.05 : 0.01;
+      setProgress(Math.min(1, progress + step));
+    } else {
+      setStatus("success");
+    }
+  }
+  if (status === "success") {
+    const W = Math.min(bounds.w - 8, 60);
+    const card = bounds.place({
+      y: 4,
+      width: W,
+      height: 12
+    });
+    Card(ctx, {
+      x: card.x,
+      y: card.y,
+      width: card.width,
+      height: card.height,
+      title: "Welcome back",
+      variant: "accent",
+      bgColor: { r: 250, g: 249, b: 246 }
+    }, (sub) => {
+      sub.text(`
+ ${icon("check")} ${color.bold("You're signed in")}
+
+`);
+      sub.text(` Hi ${color.bold(email.split("@")[0])}, your session is now active.
+
+`);
+      Button(sub, {
+        id: "btn-logout",
+        label: "Sign out",
+        icon: icon("exit"),
+        variant: "danger",
+        onClick: () => {
+          setStatus("idle");
+          setProgress(0);
+          setError("");
+        }
+      });
+    });
+    return;
+  }
+  const W = Math.min(bounds.w - 8, 50);
+  const form = bounds.place({
+    width: W,
+    height: 26
+  });
+  Card(ctx, {
+    id: "auth-card",
+    x: form.x,
+    y: form.y,
+    width: form.width,
+    height: form.height,
+    border: "rounded",
+    variant: error ? "danger" : "accent",
+    bgColor: { r: 250, g: 249, b: 246 }
+  }, (sub) => {
+    const brandVisible = 2 + 1 + 5;
+    const logo = sub.resolveLocalRect({ width: brandVisible, height: 1 });
+    const logoPad = " ".repeat(logo.x);
+    const purple = { r: 147, g: 51, b: 234 };
+    const brand = color.fg(purple, color.bold(`${icon("bunti")} Bunti`));
+    sub.text(`${logoPad + brand}
+
+`);
+    sub.text(color.fg(mutedText, `Sign in to your Bunti account to continue.
+`));
+    sub.text(color.fg(mutedText, `Use ${color.bold("Tab")} or your mouse to move between fields.
+
+`));
+    sub.text(`${color.fg(subtleTitle, color.bold("Email address"))}
+`);
+    Input(sub, {
+      id: "input-email",
+      placeholder: "you@bunti.net",
+      width: "100%"
+    });
+    sub.text(`
+`);
+    sub.text(`${color.fg(subtleTitle, color.bold("Password"))}
+`);
+    Input(sub, {
+      id: "input-password",
+      placeholder: "Enter your password",
+      type: "password",
+      width: "100%"
+    });
+    if (isFocused("input-email") && lastKey === "enter")
+      focus("input-password");
+    if (isFocused("input-password") && lastKey === "enter")
+      handleLogin();
+    sub.text(`
+
+`);
+    if (status === "loading") {
+      const barW = W - 26;
+      sub.text(` ${icon("loading")} ${color.dim("Signing in ")} `);
+      Progress(sub, {
+        value: progress,
+        width: barW,
+        fillColor: { r: 37, g: 99, b: 235 },
+        trackColor: { r: 210, g: 208, b: 200 },
+        showPercent: true
+      });
+    } else {
+      Button(sub, {
+        id: "btn-login",
+        label: "Sign in",
+        icon: icon("lock"),
+        variant: "primary",
+        width: "100%",
+        onClick: handleLogin
+      });
+    }
+    sub.text(`
+`);
+    const linkText = "Forgot password?";
+    const link = sub.resolveLocalRect({
+      y: sub.cursorY,
+      width: linkText.length,
+      height: 1
+    });
+    Link(sub, {
+      id: "forgot-password",
+      label: linkText,
+      color: linkColor,
+      x: link.x,
+      y: link.y,
+      onClick: () => {
+        setForgotNotice("Password reset link sent to your email.");
+      }
+    });
+    if (error) {
+      sub.text(`
+
+ ${color.fg("error", `${icon("warning")} ${error}`)}`);
+    } else if (forgotNotice) {
+      sub.text(`
+
+ ${color.fg(mutedText, `${icon("check")} ${forgotNotice}`)}`);
+    }
+  });
+});

package/dist/demos/login.ts

@@ -1,5 +1,5 @@
 import { Button, Card, Input, Link, Progress } from '../components/index.js';
-import { demo } from './demo-layout';
+import { demo } from './demo-layout.js';
 
 /**
  * Sign-In Demo — web-app style auth form rendered in the terminal.

package/dist/demos/mission-control.js

@@ -0,0 +1,427 @@
+import { Progress, Spinner } from "../components/index.js";
+import {
+  darkTheme,
+  easeOutCubic,
+  lightTheme,
+  render,
+  truncate,
+  visibleWidth
+} from "../index.js";
+import { themes } from "../themes/index.js";
+const once = process.argv.includes("--once");
+const sizeArg = process.argv[process.argv.indexOf("--size") + 1];
+if (process.argv.includes("--size") && sizeArg?.includes("x")) {
+  const [c, r] = sizeArg.split("x").map((n) => Number.parseInt(n, 10));
+  if (c && r) {
+    Object.defineProperty(process.stdout, "columns", {
+      value: c,
+      configurable: true
+    });
+    Object.defineProperty(process.stdout, "rows", {
+      value: r,
+      configurable: true
+    });
+  }
+}
+const THEMES = [
+  darkTheme,
+  lightTheme,
+  themes.dracula,
+  themes["tokyo-night"],
+  themes["catppuccin-mocha"],
+  themes.nord,
+  themes["one-dark-pro"],
+  themes["github-light"]
+];
+const TASKS = [
+  "refactoring theme engine",
+  "wiring OAuth callbacks",
+  "chasing a flaky e2e suite",
+  "tuning the diff renderer",
+  "porting the icons pipeline",
+  "writing migration codemods",
+  "profiling the render loop",
+  "reviewing PR #214",
+  "drafting release notes",
+  "untangling circular imports"
+];
+const agents = [
+  ["nova", "bunti", "feat/motion-engine", "coding"],
+  ["luna", "lit-factory", "feat/agent-inbox", "coding"],
+  ["sona", "pullflow-web", "fix/review-sync", "review"],
+  ["atlas", "space-station", "chore/planet-gc", "coding"],
+  ["vega", "bunti-docs", "docs/quickstart", "idle"],
+  ["orion", "gstack", "fix/browse-daemon", "blocked"],
+  ["mira", "lit-factory", "feat/task-router", "coding"]
+].map(([name, repo, branch, status], i) => ({
+  name,
+  repo,
+  branch,
+  task: TASKS[i % TASKS.length],
+  status,
+  progress: 0.15 + i * 0.11,
+  rate: 90 + i * 25,
+  history: [],
+  tokens: 180000 + i * 90000,
+  files: 3 + i % 6,
+  startedAt: Date.now() - (i + 2) * 7 * 60000
+}));
+const events = [];
+const fleetHistory = [];
+const HISTORY_CAP = 48;
+const EVENT_CAP = 48;
+let taskCursor = agents.length;
+const clock = (d = new Date) => d.toTimeString().slice(0, 8);
+function pushEvent(kind, agent, msg) {
+  events.push({ ts: clock(), kind, agent, msg, born: Date.now() });
+  if (events.length > EVENT_CAP)
+    events.shift();
+}
+const CHATTER = [
+  ["commit", (a) => `pushed 2 commits to ${a.branch}`],
+  ["tests", (a) => `${a.repo} suite green in 41s`],
+  ["plan", (a) => `split "${a.task}" into 3 steps`],
+  ["commit", (a) => `rebased ${a.branch} on main`],
+  ["merge", (a) => `merged PR #${180 + (a.tokens / 1000 | 0) % 90}`],
+  ["tests", (a) => `added 6 cases for ${a.repo}`]
+];
+function chatter() {
+  const a = agents[Math.floor(Math.random() * agents.length)];
+  if (a.status === "blocked") {
+    pushEvent("stall", a.name, `waiting on CI for ${a.branch}`);
+  } else {
+    const [kind, msg] = CHATTER[Math.floor(Math.random() * CHATTER.length)];
+    pushEvent(kind, a.name, msg(a));
+  }
+}
+function tick() {
+  let fleetRate = 0;
+  for (const a of agents) {
+    const active = a.status === "coding" || a.status === "review";
+    if (active) {
+      a.progress += 0.02 + Math.random() * 0.05;
+      a.rate = Math.min(320, Math.max(45, a.rate + (Math.random() - 0.48) * 46));
+      a.tokens += a.rate / 60 * 0.9 * 1000;
+    } else {
+      a.rate = Math.max(12, a.rate * 0.86);
+    }
+    fleetRate += a.rate;
+    a.history.push(a.rate);
+    if (a.history.length > HISTORY_CAP)
+      a.history.shift();
+    if (a.progress >= 1) {
+      pushEvent("ship", a.name, `shipped "${a.task}"`);
+      a.progress = 0;
+      a.task = TASKS[taskCursor++ % TASKS.length];
+      a.files = 2 + Math.floor(Math.random() * 9);
+      a.startedAt = Date.now();
+      if (a.status === "review")
+        a.status = "coding";
+    }
+  }
+  fleetHistory.push(fleetRate);
+  if (fleetHistory.length > HISTORY_CAP)
+    fleetHistory.shift();
+  if (Math.random() < 0.85)
+    chatter();
+  if (Math.random() < 0.35)
+    chatter();
+  return Date.now();
+}
+for (let i = 0;i < 24; i++) {
+  let fleetRate = 0;
+  for (const a of agents) {
+    const sample = a.rate + Math.sin(i * 0.7 + a.rate) * 30;
+    a.history.push(sample);
+    fleetRate += sample;
+  }
+  fleetHistory.push(fleetRate);
+}
+pushEvent("plan", "nova", "fleet online — 7 agents reporting");
+pushEvent("commit", "luna", "pushed 2 commits to feat/agent-inbox");
+pushEvent("tests", "atlas", "space-station suite green in 38s");
+pushEvent("merge", "sona", "merged PR #209 into pullflow-web");
+pushEvent("commit", "mira", "rebased feat/task-router on main");
+const SPARK = "▁▂▃▄▅▆▇█";
+function sparkline(series, width) {
+  const n = Math.min(width, series.length);
+  if (n === 0)
+    return "";
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  for (let i = series.length - n;i < series.length; i++) {
+    const v = series[i];
+    if (v < min)
+      min = v;
+    if (v > max)
+      max = v;
+  }
+  const span = max - min || 1;
+  let out = "";
+  for (let i = series.length - n;i < series.length; i++) {
+    out += SPARK[Math.round((series[i] - min) / span * 7)];
+  }
+  return out;
+}
+const fmtTokens = (n) => n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : `${Math.round(n / 1000)}k`;
+function fmtUptime(since) {
+  const s = Math.max(0, Math.floor((Date.now() - since) / 1000));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  return h > 0 ? `${h}h ${String(m).padStart(2, "0")}m` : `${m}m ${s % 60}s`;
+}
+const STATUS_META = {
+  coding: { icon: "robot", token: "info", label: "coding" },
+  review: { icon: "pr", token: "accent", label: "review" },
+  blocked: { icon: "warning", token: "warning", label: "blocked" },
+  idle: { icon: "pause", token: "muted", label: "idle" }
+};
+const EVENT_META = {
+  commit: { icon: "commit", token: "info" },
+  tests: { icon: "check", token: "success" },
+  merge: { icon: "merge", token: "accent" },
+  ship: { icon: "rocket", token: "primary" },
+  stall: { icon: "warning", token: "warning" },
+  plan: { icon: "list", token: "muted" }
+};
+render((ctx) => {
+  const t = ctx.theme;
+  const { width: W, height: H, color, icon } = ctx;
+  ctx.wallpaper(t.background);
+  if (ctx.lastKey === "q" || ctx.lastKey === "escape")
+    ctx.requestStop();
+  if (ctx.lastKey === "r")
+    ctx.restartAnimation("entrance");
+  const pick = Number.parseInt(ctx.lastKey ?? "", 10);
+  if (pick >= 1 && pick <= THEMES.length)
+    ctx.setTheme(THEMES[pick - 1]);
+  if (W < 72 || H < 20) {
+    const msg = "mission control needs at least 72x20";
+    ctx.blit(Math.max(0, W - msg.length >> 1), H >> 1, t.muted(msg));
+    return;
+  }
+  ctx.useAsync("fleet-tick", async () => tick(), { interval: 900 });
+  const enter = (i) => once ? 1 : ctx.stagger(i + 1, {
+    id: "entrance",
+    delay: 150,
+    duration: 240,
+    easing: easeOutCubic
+  });
+  const mix = (token, p) => p >= 1 ? token.rgb : ctx.fade(t.background.rgb, token.rgb, p);
+  const ink = (token, p) => (s) => color.fg(mix(token, p), s);
+  const margin = W >= 100 ? 2 : 1;
+  const wide = W >= 100;
+  const headerH = 3;
+  const bodyY = headerH + 1;
+  const bodyH = H - bodyY - 2;
+  const leftW = wide ? 34 : 27;
+  const body = { x: margin, y: bodyY, width: W - margin * 2, height: bodyH };
+  const fleet = { x: body.x, y: body.y, width: leftW, height: body.height };
+  const right = {
+    x: body.x + leftW + 2,
+    y: body.y,
+    width: body.width - leftW - 2,
+    height: body.height
+  };
+  const detailH = H >= 32 ? 12 : 9;
+  const logY = right.y + detailH + 1;
+  const logH = right.height - detailH - 1;
+  const [selected] = ctx.useState("agents_index", 0);
+  const agent = agents[Math.min(selected, agents.length - 1)];
+  const [prevSel, setPrevSel] = ctx.useState("detail_prev", selected);
+  if (prevSel !== selected) {
+    setPrevSel(selected);
+    ctx.restartAnimation("detail-fade");
+  }
+  const swap = ctx.animate(220, { id: "detail-fade", easing: easeOutCubic });
+  const pHeader = enter(0);
+  ctx.box({
+    x: 0,
+    y: 0,
+    width: W,
+    height: headerH,
+    border: "none",
+    bgColor: mix(t.surfaceRaised, pHeader),
+    padding: [0, margin + 1],
+    valign: "middle"
+  }, (b) => {
+    if (pHeader < 0.5)
+      return;
+    const left = `${icon("bunti")} `;
+    const leftTitle = "AGENT FLEET";
+    const leftSub = "  mission control";
+    const rightPlain = `. fleet live  ${clock()}  ·  ${t.name}`;
+    const pad = Math.max(1, W - (margin + 1) * 2 - visibleWidth(left + leftTitle + leftSub) - visibleWidth(rightPlain));
+    b.text(ink(t.primary, pHeader)(left));
+    b.text(color.bold(ink(t.foreground, pHeader)(leftTitle)));
+    b.text(ink(t.muted, pHeader)(leftSub));
+    b.text(" ".repeat(pad));
+    Spinner(b, { label: "", color: mix(t.accent, pHeader) });
+    b.text(ink(t.success, pHeader)(" fleet live"));
+    b.text(ink(t.muted, pHeader)(`  ${clock()}  ·  `));
+    b.text(ink(t.accent, pHeader)(t.name));
+  });
+  const pFleet = enter(1);
+  const fleetY = fleet.y + Math.round((1 - pFleet) * 2);
+  ctx.box({
+    x: fleet.x,
+    y: fleetY,
+    width: fleet.width,
+    height: fleet.height,
+    border: "rounded",
+    borderColor: mix(t.border, pFleet),
+    title: " Agents ",
+    titleStyle: ink(t.muted, pFleet),
+    bgColor: mix(t.surface, pFleet),
+    padding: [1, 2]
+  }, (b) => {
+    if (pFleet < 0.6)
+      return;
+    const inner = fleet.width - 6;
+    const repoW = Math.max(6, inner - 16);
+    const rows = agents.map((a) => {
+      const meta = STATUS_META[a.status];
+      const working = a.status === "coding" || a.status === "review";
+      const pct = working ? `${String(Math.round(a.progress * 100)).padStart(3)}%` : "  · ";
+      const name = working ? t.foreground : t.muted;
+      return `${t[meta.token](icon(meta.icon))} ` + `${name(a.name.padEnd(7))}` + `${t.muted(truncate(a.repo, repoW).padEnd(repoW))} ` + `${t.muted(pct)}`;
+    });
+    b.list("agents", rows, { width: "100%" });
+    const innerH = fleet.height - 4;
+    const pad = innerH - agents.length - 3;
+    if (pad >= 1) {
+      const active = agents.filter((a) => a.status !== "idle").length;
+      const counts = `${active}/${agents.length} active`;
+      const label = wide ? "FLEET THROUGHPUT" : "FLEET";
+      b.text(`
+`.repeat(pad + 1));
+      b.text(t.muted(label));
+      b.text(" ".repeat(Math.max(1, inner - label.length - counts.length)));
+      b.text(t.muted(counts));
+      b.text(`
+`);
+      b.text(t.info(sparkline(fleetHistory, inner)));
+      b.text(`
+`);
+      const sum = fleetHistory[fleetHistory.length - 1] ?? 0;
+      b.text(t.muted("Σ "));
+      b.text(t.foreground(`${Math.round(sum)}`));
+      b.text(t.muted(" tok/min"));
+    }
+  });
+  const pDetail = enter(2);
+  const detailY = right.y + Math.round((1 - pDetail) * 2);
+  ctx.box({
+    x: right.x,
+    y: detailY,
+    width: right.width,
+    height: detailH,
+    border: "rounded",
+    borderColor: mix(t.border, pDetail),
+    title: " Mission Detail ",
+    titleStyle: ink(t.muted, pDetail),
+    bgColor: mix(t.surface, pDetail),
+    padding: [1, 2]
+  }, (b) => {
+    if (pDetail < 0.6)
+      return;
+    const dw = right.width - 6;
+    const rows = detailH - 4;
+    const meta = STATUS_META[agent.status];
+    const statusInk = ink(t[meta.token], swap);
+    const fgInk = ink(t.foreground, swap);
+    const mutedInk = ink(t.muted, swap);
+    const barW = Math.max(10, dw - 16);
+    b.text(color.bold(ink(t.primary, swap)(agent.name)));
+    b.text(mutedInk("  ·  "));
+    b.text(statusInk(`${icon(meta.icon)} ${meta.label}`));
+    b.text(`
+`);
+    b.text(fgInk(truncate(agent.task, dw)));
+    b.text(`
+`);
+    b.text(mutedInk(truncate(`${icon("repo")} ${agent.repo}   ${icon("branch")} ${agent.branch}`, dw)));
+    b.text(`
+`);
+    if (rows >= 6)
+      b.text(`
+`);
+    b.text(mutedInk("progress  "));
+    Progress(b, {
+      value: agent.status === "coding" || agent.status === "review" ? agent.progress : 0,
+      width: barW,
+      gradient: [t.primary, t.accent],
+      trackColor: mix(t.border, Math.min(pDetail, swap)),
+      showPercent: true
+    });
+    b.text(`
+`);
+    if (rows >= 8 && wide) {
+      b.text(mutedInk("tok/min   "));
+      b.text(ink(t.accent, swap)(sparkline(agent.history, barW)));
+      b.text(color.bold(fgInk(`  ${Math.round(agent.rate)}`)));
+      b.text(`
+`);
+    }
+    if (rows >= 7)
+      b.text(`
+`);
+    const sep = rows >= 7 ? "   ·   " : " · ";
+    b.text(mutedInk(`tokens ${fmtTokens(agent.tokens)}${sep}files ${agent.files}${sep}up ${fmtUptime(agent.startedAt)}`));
+  });
+  const pLog = enter(3);
+  const logYAnim = logY + Math.round((1 - pLog) * 2);
+  ctx.box({
+    x: right.x,
+    y: logYAnim,
+    width: right.width,
+    height: logH,
+    border: "rounded",
+    borderColor: mix(t.border, pLog),
+    title: " Activity ",
+    titleStyle: ink(t.muted, pLog),
+    bgColor: mix(t.surface, pLog),
+    padding: [1, 2]
+  }, (b) => {
+    if (pLog < 0.6)
+      return;
+    const lw = right.width - 6;
+    const visible = Math.max(1, logH - 4);
+    const shown = events.slice(-visible);
+    const now = Date.now();
+    for (let i = 0;i < shown.length; i++) {
+      const e = shown[i];
+      const meta = EVENT_META[e.kind];
+      const pe = Math.min(1, (now - e.born) / 240);
+      const slide = " ".repeat(Math.round((1 - easeOutCubic(pe)) * 6));
+      const head = `${e.ts}  `;
+      const badge = `${icon(meta.icon)} ${e.kind.padEnd(7)}`;
+      const who = `${e.agent.padEnd(7)}`;
+      const room = lw - slide.length - head.length - 9 - who.length;
+      b.text(slide);
+      b.text(t.muted(head));
+      b.text(t[meta.token](badge));
+      b.text(t.foreground(who));
+      b.text(t.muted(truncate(e.msg, Math.max(4, room))));
+      if (i < shown.length - 1)
+        b.text(`
+`);
+    }
+  });
+  const pBar = enter(4);
+  if (pBar > 0) {
+    const idx = THEMES.findIndex((th) => th.name === t.name) + 1;
+    const hint = "1-8 themes · ↑/↓ or click agents · q quit";
+    const status = `${idx > 0 ? idx : "·"}/8 ${t.name}`;
+    ctx.blit(margin + 1, H - 1, ink(t.muted, pBar)(hint));
+    ctx.blit(Math.max(0, W - margin - 1 - visibleWidth(status)), H - 1, ink(t.accent, pBar)(status));
+  }
+}, {
+  fps: 30,
+  keyboard: true,
+  mouse: true,
+  hideCursor: true,
+  alternateBuffer: !once,
+  theme: darkTheme,
+  once
+});