// Shared React components for project demo pages.
// Exposes TerminalWindow + helpers globally so per-project demos
// can be authored as ~30-line scripts.
// ── Constants ─────────────────────────────────────────────────────────────
const CHARS_PER_SEC = 30;
const PROMPT = '~/ai-portfolio';
// ── State computation ────────────────────────────────────────────────────
function computeTerminalState(script, t, opts = {}) {
const cwd = opts.cwd || PROMPT;
const lines = [];
let caption = '';
for (let i = 0; i < script.length; i++) {
const item = script[i];
if (t < item.t) break;
if (item.kind === 'caption') { caption = item.text; continue; }
if (item.kind === 'cmd') {
const typingDur = item.text.length / CHARS_PER_SEC;
const elapsed = t - item.t;
const ratio = Math.min(1, elapsed / typingDur);
const chars = Math.floor(item.text.length * ratio);
const done = elapsed >= typingDur;
lines.push({ ...item, rendered: item.text.slice(0, chars), typing: !done, cwd: item.cwd || cwd });
} else if (item.kind === 'progress') {
const ratio = Math.max(0, Math.min(1, (t - item.start) / (item.end - item.start)));
lines.push({ ...item, ratio });
} else {
lines.push(item);
}
}
const lastCmd = [...lines].reverse().find(l => l.kind === 'cmd');
const lastCmdIdx = lastCmd ? lines.lastIndexOf(lastCmd) : -1;
const hasOutputAfter = lastCmd && lines.slice(lastCmdIdx + 1).length > 0;
const allDone = !lastCmd || !lastCmd.typing;
if (allDone && hasOutputAfter) lines.push({ kind: 'prompt', cwd });
return { lines, caption };
}
// ── TerminalWindow component ────────────────────────────────────────────
function TerminalWindow({ script, captionColor = '#22d3ee', cwd, title, captionPrefix }) {
const t = useTime();
const { lines, caption } = React.useMemo(
() => computeTerminalState(script, t, { cwd }),
[script, t, cwd]
);
const scrollRef = React.useRef(null);
const lastCount = React.useRef(0);
React.useEffect(() => {
if (!scrollRef.current) return;
const el = scrollRef.current;
if (Math.abs(lines.length - lastCount.current) > 6) {
el.scrollTop = el.scrollHeight;
} else {
el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
}
lastCount.current = lines.length;
}, [lines.length]);
return (
{captionPrefix && {captionPrefix} ·}
{caption || '\u00A0'}
{title || 'zsh — ai-portfolio — 132×42'}
⌘ +1
{lines.map((line, i) => )}
);
}
function dot(color) {
return {
width: 12, height: 12, borderRadius: 6, background: color,
boxShadow: 'inset 0 0 0 0.5px rgba(0,0,0,0.2)', display: 'inline-block',
};
}
function TerminalLine({ line }) {
if (line.kind === 'cmd') {
return (
{line.cwd}
❯
{line.rendered}
{line.typing && }
);
}
if (line.kind === 'out') {
const color = line.color === 'success' ? '#34d399'
: line.color === 'accent' ? '#22d3ee'
: line.color === 'warn' ? '#fbbf24'
: line.color === 'danger' ? '#ff5a72'
: line.color === 'pink' ? '#f472b6'
: '#a8b0c1';
return (
{line.text || '\u00A0'}
);
}
if (line.kind === 'editor') {
return (
NVIM · {line.title}
‹INSERT›
{line.lines.map((l, i) => (
{i+1}
{l}
))}
);
}
if (line.kind === 'progress') return ;
if (line.kind === 'table') return ;
if (line.kind === 'json') {
return (
{line.text}
);
}
if (line.kind === 'prompt') {
return (
{line.cwd}
❯
);
}
return null;
}
function Caret() {
return (
);
}
function ProgressBar({ ratio, total, unit, label }) {
const cells = 28;
const filled = Math.floor(cells * ratio);
const pct = Math.floor(ratio * 100);
const count = Math.floor(total * ratio).toLocaleString();
const totalStr = total.toLocaleString();
return (
{label}
{'█'.repeat(filled)}
{'░'.repeat(cells - filled)}
{pct}%
{count} / {totalStr} {unit}
);
}
function ResultTable({ cols, rows }) {
const widths = cols.map((c, i) =>
Math.max(c.length, ...rows.map(r => String(r[i] || '').length))
);
const renderRow = (cells) =>
cells.map((c, i) => String(c || '').padEnd(widths[i] + 2)).join('');
return (
{renderRow(cols)}
{cols.map((_, i) => '─'.repeat(widths[i]) + ' ').join('')}
{rows.map((row, i) => {
const isHighlight = row[row.length - 1] === 'highlight';
const data = isHighlight ? row.slice(0, -1) : row;
return (
{renderRow(data)}
);
})}
);
}
// ── Generic node-state helper for system demos ────────────────────────────
function makeNodeState(activations) {
return function nodeState(nodeId, t) {
const acts = activations.filter(a => a[0] === nodeId);
if (!acts.length) return { state: 'idle', label: '' };
let last = null;
for (const [, s, e, label] of acts) {
if (t >= s && t <= e) return { state: 'active', label, progress: (t - s) / (e - s) };
if (t > e) last = { state: 'done', label };
}
return last || { state: 'idle', label: '' };
};
}
// ── Factory: build a terminal-demo component from a script ─────────────
function makeTerminalDemo({ script, duration, persistKey, title, captionColor, cwd, captionPrefix }) {
return function TerminalDemo() {
return (
);
};
}
Object.assign(window, {
TerminalWindow, TerminalLine, Caret, ProgressBar, ResultTable,
computeTerminalState, makeNodeState, makeTerminalDemo,
});