openaxies 0.1.0

package/src/components/ChatViewport.js

@@ -0,0 +1,194 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { hex } from '../config/theme.js';
+
+const h = React.createElement;
+
+function checkArray(arr) {
+  if (Array.isArray(arr) === false) {
+    return [];
+  }
+  return arr;
+}
+
+// Splits content on <think>...</think> tags.
+// Returns an array of { type: 'text' | 'think', content: string } parts.
+function parseThinkTags(content) {
+  if (typeof content !== 'string') {
+    return [];
+  }
+  const parts = [];
+  let remaining = content;
+  let inThink = false;
+
+  while (remaining.length > 0) {
+    if (inThink === false) {
+      const startIdx = remaining.indexOf('<think>');
+      if (startIdx === -1) {
+        if (remaining.length > 0) {
+          parts.push({ type: 'text', content: remaining });
+        }
+        break;
+      }
+      if (startIdx > 0) {
+        parts.push({ type: 'text', content: remaining.slice(0, startIdx) });
+      }
+      remaining = remaining.slice(startIdx + 7);
+      inThink = true;
+    } else {
+      const endIdx = remaining.indexOf('</think>');
+      if (endIdx === -1) {
+        if (remaining.length > 0) {
+          parts.push({ type: 'think', content: remaining });
+        }
+        break;
+      }
+      if (endIdx > 0) {
+        parts.push({ type: 'think', content: remaining.slice(0, endIdx) });
+      }
+      remaining = remaining.slice(endIdx + 8);
+      inThink = false;
+    }
+  }
+
+  return parts;
+}
+
+function clampWidth(width) {
+  if (typeof width !== 'number' || width < 20) {
+    return 80;
+  }
+  return Math.max(20, width - 2);
+}
+
+function pushLine(lines, text, color, bold) {
+  lines.push({
+    text: typeof text === 'string' ? text : '',
+    color: color,
+    bold: bold === true,
+  });
+}
+
+function wrapText(text, width) {
+  const safeWidth = Math.max(1, width);
+  const raw = typeof text === 'string' ? text : '';
+  const sourceLines = raw.split('\n');
+  const wrapped = [];
+
+  for (let i = 0; i < sourceLines.length; i++) {
+    let line = sourceLines[i];
+    if (line.length === 0) {
+      wrapped.push('');
+      continue;
+    }
+
+    while (line.length > safeWidth) {
+      let cut = line.lastIndexOf(' ', safeWidth);
+      if (cut < Math.floor(safeWidth / 2)) {
+        cut = safeWidth;
+      }
+      wrapped.push(line.slice(0, cut));
+      line = line.slice(cut).trimStart();
+    }
+
+    wrapped.push(line);
+  }
+
+  return wrapped;
+}
+
+function pushWrapped(lines, text, width, color, bold) {
+  const wrapped = wrapText(text, width);
+  for (let i = 0; i < wrapped.length; i++) {
+    pushLine(lines, wrapped[i], color, bold);
+  }
+}
+
+function pushContentLines(lines, content, width) {
+  const parts = parseThinkTags(content);
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (part.type === 'think') {
+      pushWrapped(lines, '# think ' + part.content.trim(), width, '#555577', false);
+    } else {
+      pushWrapped(lines, part.content, width, hex.primary, false);
+    }
+  }
+}
+
+// Transcript message - linear terminal flow, no side panels or bubbles.
+function pushMessageLines(lines, msg, safeCols) {
+  if (msg === null || msg === undefined || typeof msg !== 'object') {
+    return;
+  }
+
+  const content = typeof msg.content === 'string' ? msg.content : '';
+
+  if (msg.role === 'thinking') {
+    pushWrapped(lines, content, safeCols, hex.orange, false);
+    return;
+  }
+
+  if (msg.role === 'user') {
+    pushWrapped(lines, 'You > ' + content, safeCols, hex.neonBlue, true);
+    return;
+  }
+
+  pushLine(lines, 'OpenAxies $', hex.greenOnline, true);
+  pushContentLines(lines, content, safeCols);
+  pushLine(lines, '', hex.primary, false);
+}
+
+export function createChatViewport(messages, streamText, availLines, cols, scrollOffset) {
+  const safeMessages = checkArray(messages);
+  const safeAvail = typeof availLines === 'number' && availLines > 0 ? availLines : 1;
+  const safeCols = clampWidth(cols);
+  const rawOffset = typeof scrollOffset === 'number' && scrollOffset > 0
+    ? Math.floor(scrollOffset)
+    : 0;
+  const hasStream = typeof streamText === 'string' && streamText.length > 0;
+  const transcriptLines = [];
+
+  for (let i = 0; i < safeMessages.length; i++) {
+    pushMessageLines(transcriptLines, safeMessages[i], safeCols);
+  }
+
+  if (hasStream === true) {
+    pushLine(transcriptLines, 'OpenAxies $ streaming...', hex.greenOnline, true);
+    pushContentLines(transcriptLines, streamText, safeCols);
+  }
+
+  if (transcriptLines.length === 0) {
+    pushLine(transcriptLines, '# waiting for input', '#333355', false);
+  }
+
+  const visibleHeight = Math.max(1, safeAvail - 1);
+  const maxOffset = Math.max(0, transcriptLines.length - visibleHeight);
+  const safeOffset = Math.min(rawOffset, maxOffset);
+  const endIndex = transcriptLines.length - safeOffset;
+  const startIndex = Math.max(0, endIndex - visibleHeight);
+  const visibleLines = transcriptLines.slice(startIndex, endIndex);
+  const elements = [];
+
+  for (let i = 0; i < visibleLines.length; i++) {
+    const line = visibleLines[i];
+    elements.push(
+      h(Text, {
+        key: 'line-' + (startIndex + i),
+        color: line.color,
+        bold: line.bold,
+      }, line.text)
+    );
+  }
+
+  return h(Box, {
+    flexGrow: 1,
+    height: safeAvail,
+    flexDirection: 'column',
+    overflow: 'hidden',
+    paddingLeft: 1,
+    paddingRight: 1,
+    paddingTop: 0,
+    paddingBottom: 1,
+  }, ...elements);
+}

package/src/components/ComposerDock.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { hex } from '../config/theme.js';
+
+const h = React.createElement;
+
+export const DOCK_HEIGHT = 3;
+const MAX_FRAME_WIDTH = 80;
+const PROMPT = 'openaxies@root:~$ ';
+
+function checkString(value) {
+  if (typeof value !== 'string') {
+    return '';
+  }
+  return value;
+}
+
+function checkCallback(fn, label) {
+  if (fn !== null && fn !== undefined && typeof fn !== 'function') {
+    throw new Error(label + ' must be a function');
+  }
+}
+
+// ComposerDock — 3 rows, permanently at the bottom of the layout.
+//
+// Layout:
+//   ┌──────────────────────────────────────────────────────────────────────────────┐
+//   │ openaxies@root:~$ [TextInput]                                                │
+//   └──────────────────────────────────────────────────────────────────────────────┘
+//
+// The frame is capped at 80 columns for narrow terminal clients.
+// flexShrink: 0 prevents Ink from ever yielding these rows to the viewport.
+//
+// config.inputActive (bool, default true):
+//   Set to false when SlashOverlay is open so TextInput releases keyboard
+//   focus and arrow keys don't corrupt the input buffer.
+export function createComposerDock(config) {
+  if (config === null || config === undefined || typeof config !== 'object') {
+    throw new Error('createComposerDock requires a config object');
+  }
+
+  const value = checkString(config.value);
+  const onChange = config.onChange;
+  const onSubmit = config.onSubmit;
+  const inputActive = config.inputActive !== false;
+  const isStreaming = config.isStreaming === true;
+  const terminalWidth = Number.isFinite(config.terminalWidth)
+    ? Math.floor(config.terminalWidth)
+    : MAX_FRAME_WIDTH;
+
+  checkCallback(onChange, 'onChange');
+  checkCallback(onSubmit, 'onSubmit');
+
+  const placeholder = isStreaming
+    ? 'Ctrl+C to interrupt...'
+    : '/ commands';
+  const frameWidth = Math.max(2, Math.min(MAX_FRAME_WIDTH, terminalWidth));
+  const innerWidth = frameWidth - 2;
+  const inputWidth = Math.max(1, innerWidth - PROMPT.length);
+  const horizontalRule = '\u2500'.repeat(innerWidth);
+
+  return h(Box, {
+    width: '100%',
+    height: DOCK_HEIGHT,
+    flexDirection: 'column',
+    alignItems: 'center',
+    flexShrink: 0,
+  },
+    h(Box, { width: frameWidth, height: 1, flexShrink: 0 },
+      h(Text, { color: hex.border }, '\u250C' + horizontalRule + '\u2510')
+    ),
+    h(Box, {
+      width: frameWidth,
+      height: 1,
+      flexDirection: 'row',
+      flexShrink: 0,
+      overflow: 'hidden',
+    },
+      h(Text, { color: hex.border }, '\u2502'),
+      h(Box, {
+        width: innerWidth,
+        height: 1,
+        flexDirection: 'row',
+        overflow: 'hidden',
+      },
+        h(Text, { color: inputActive ? hex.greenOnline : hex.muted, bold: true }, PROMPT),
+        h(Box, { width: inputWidth, height: 1, overflow: 'hidden' },
+          h(TextInput, {
+            value: value,
+            onChange: onChange,
+            onSubmit: onSubmit,
+            placeholder: placeholder,
+            focus: inputActive,
+            showCursor: true,
+          })
+        )
+      ),
+      h(Text, { color: hex.border }, '\u2502')
+    ),
+    h(Box, { width: frameWidth, height: 1, flexShrink: 0 },
+      h(Text, { color: hex.border }, '\u2514' + horizontalRule + '\u2518')
+    )
+  );
+}

package/src/components/RouterBar.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { hex } from '../config/theme.js';
+
+const h = React.createElement;
+
+export const ROUTER_HEIGHT = 2;
+
+function checkActiveModel(modelId) {
+  if (typeof modelId !== 'string') {
+    return 'openaxis/openaxis-flash';
+  }
+  return modelId;
+}
+
+function checkColumns(cols) {
+  if (typeof cols !== 'number' || cols < 1) {
+    return 80;
+  }
+  return cols;
+}
+
+function buildSeparator(cols) {
+  const safeCols = checkColumns(cols);
+  let line = '';
+  for (let i = 0; i < safeCols; i++) {
+    line = line + '\u2500';
+  }
+  return line;
+}
+
+// RouterBar — 2 rows:
+//   Row 1: model status with active/standby indicators
+//   Row 2: full-width separator line
+export function createRouterBar(activeModel, cols) {
+  const modelStr = checkActiveModel(activeModel);
+  const isFlash = modelStr === 'openaxis/openaxis-flash';
+  const sepLine = buildSeparator(cols);
+
+  return h(Box, {
+    flexDirection: 'column',
+    width: '100%',
+    height: ROUTER_HEIGHT,
+    backgroundColor: hex.black,
+    paddingLeft: 1,
+    paddingRight: 1,
+    flexShrink: 0,
+  },
+    h(Box, {
+      height: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+
+      // ── Flash slot ──
+      h(Text, {
+        color: isFlash ? hex.neonBlue : '#333355',
+        bold: isFlash,
+      }, isFlash ? '\u25B6 ' : '\u25B7 '),
+      h(Text, {
+        color: isFlash ? hex.primary : '#444466',
+        bold: isFlash,
+      }, 'Flash'),
+      h(Text, {
+        color: isFlash ? hex.greenOnline : '#2A3A2A',
+      }, '  \u25CF '),
+      h(Text, {
+        color: isFlash ? hex.greenOnline : '#2A3A2A',
+        dimColor: !isFlash,
+      }, isFlash ? 'ACTIVE' : 'STANDBY'),
+
+      // ── Divider ──
+      h(Text, { color: '#1E1E2E' }, '    \u2502    '),
+
+      // ── Heavy slot ──
+      h(Text, {
+        color: !isFlash ? hex.neonBlue : '#333355',
+        bold: !isFlash,
+      }, !isFlash ? '\u25B6 ' : '\u25B7 '),
+      h(Text, {
+        color: !isFlash ? hex.primary : '#444466',
+        bold: !isFlash,
+      }, 'Heavy'),
+      h(Text, {
+        color: !isFlash ? hex.greenOnline : '#2A3A2A',
+      }, '  \u25CF '),
+      h(Text, {
+        color: !isFlash ? hex.greenOnline : '#2A3A2A',
+        dimColor: isFlash,
+      }, !isFlash ? 'ACTIVE' : 'STANDBY'),
+
+      // ── Right-side hint ──
+      h(Text, { color: '#1E1E2E' }, '    \u2502    '),
+      h(Text, { color: '#2A2A40' }, '/model to switch'),
+    ),
+    h(Text, { color: '#1A1A28' }, sepLine)
+  );
+}

package/src/components/SlashOverlay.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { hex } from '../config/theme.js';
+
+const h = React.createElement;
+
+export const SLASH_OVERLAY_HEIGHT = 6;
+
+// Row budget (no border box — flat design matching OpenCode command palette):
+//   Row 1  →  header + hint
+//   Row 2  →  ─── separator line
+//   Rows 3–6  →  up to 4 command rows
+//
+// The selected row renders with a full-width orange highlight bar.
+// Navigation is driven by App.js useInput; this component is purely presentational.
+
+function checkCommands(arr) {
+  if (Array.isArray(arr) === false) {
+    throw new Error('commands must be an array');
+  }
+  if (arr.length === 0) {
+    throw new Error('commands must not be empty');
+  }
+  for (let i = 0; i < arr.length; i++) {
+    const cmd = arr[i];
+    if (cmd === null || cmd === undefined || typeof cmd !== 'object') {
+      throw new Error('command at index ' + i + ' must be an object');
+    }
+    if (typeof cmd.trigger !== 'string' || cmd.trigger.length === 0) {
+      throw new Error('command at index ' + i + ' trigger must be non-empty');
+    }
+    if (typeof cmd.description !== 'string') {
+      throw new Error('command at index ' + i + ' description must be a string');
+    }
+  }
+  return arr;
+}
+
+export function createSlashOverlay(commands, selectedIndex) {
+  const safeCommands = checkCommands(commands);
+  const safeIndex =
+    typeof selectedIndex === 'number' &&
+    selectedIndex >= 0 &&
+    selectedIndex < safeCommands.length
+      ? selectedIndex
+      : 0;
+
+  // ── Header row ─────────────────────────────────────────────────────────────
+  const headerRow = h(Box, {
+    key: 'slash-header',
+    width: '100%',
+    height: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 1,
+    backgroundColor: '#111118',
+  },
+    h(Text, { color: hex.neonBlue, bold: true }, '\u2713 '),
+    h(Text, { color: hex.primary, bold: true }, 'Commands'),
+    h(Text, { color: '#333355' }, '  \u2500\u2500  '),
+    h(Text, { color: '#44445A' }, '\u2191\u2193 navigate'),
+    h(Text, { color: '#2A2A3A' }, '  \u00B7  '),
+    h(Text, { color: '#44445A' }, '\u23CE select'),
+    h(Text, { color: '#2A2A3A' }, '  \u00B7  '),
+    h(Text, { color: '#44445A' }, 'esc dismiss'),
+  );
+
+  // ── Separator ──────────────────────────────────────────────────────────────
+  const sepRow = h(Box, {
+    key: 'slash-sep',
+    width: '100%',
+    height: 1,
+    paddingLeft: 1,
+    backgroundColor: '#0D0D14',
+  },
+    h(Text, { color: '#1E1E2E' }, '\u2500'.repeat(60))
+  );
+
+  // ── Command rows ───────────────────────────────────────────────────────────
+  const maxVisible = SLASH_OVERLAY_HEIGHT - 2; // 4 rows after header + separator
+  const itemRows = [];
+
+  for (let i = 0; i < Math.min(safeCommands.length, maxVisible); i++) {
+    const cmd = safeCommands[i];
+    const isSelected = i === safeIndex;
+
+    itemRows.push(
+      h(Box, {
+        key: cmd.trigger,
+        width: '100%',
+        height: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 1,
+        paddingRight: 1,
+        // Orange highlight bar on selected row — matches OpenCode palette style
+        backgroundColor: isSelected ? '#2C1A00' : '#0D0D14',
+      },
+        // Selection marker
+        h(Text, {
+          color: isSelected ? hex.orange : '#1E1E2E',
+          bold: true,
+        }, isSelected ? '\u25B6 ' : '  '),
+        // Command trigger
+        h(Text, {
+          color: isSelected ? hex.orange : '#5A5A7A',
+          bold: isSelected,
+        }, cmd.trigger),
+        // Spacer
+        h(Text, { color: '#1A1A2A' }, '   '),
+        // Description
+        h(Text, {
+          color: isSelected ? '#DDDDEE' : '#3A3A55',
+        }, cmd.description),
+      )
+    );
+  }
+
+  return h(Box, {
+    width: '100%',
+    height: SLASH_OVERLAY_HEIGHT,
+    flexDirection: 'column',
+    flexShrink: 0,
+    overflow: 'hidden',
+  },
+    headerRow,
+    sepRow,
+    ...itemRows
+  );
+}

package/src/config/commands.js

@@ -0,0 +1,56 @@
+function checkString(value, label) {
+  if (typeof value !== 'string') {
+    throw new Error(label + ' must be a string');
+  }
+}
+
+function checkCommand(entry, index) {
+  if (entry === null || entry === undefined || typeof entry !== 'object') {
+    throw new Error('Command at index ' + index + ' must be an object');
+  }
+  checkString(entry.trigger, 'Command ' + index + ' trigger');
+  checkString(entry.description, 'Command ' + index + ' description');
+  if (entry.trigger[0] !== '/') {
+    throw new Error('Command ' + index + ' trigger must start with "/"');
+  }
+  if (entry.trigger.length < 2) {
+    throw new Error('Command ' + index + ' trigger must be at least 2 characters');
+  }
+}
+
+function checkCommands(arr) {
+  if (!Array.isArray(arr)) {
+    throw new Error('Commands must be an array');
+  }
+  if (arr.length === 0) {
+    throw new Error('Commands array must not be empty');
+  }
+  for (let i = 0; i < arr.length; i++) {
+    checkCommand(arr[i], i);
+  }
+  return arr;
+}
+
+const COMMAND_DEFS = Object.freeze([
+  { trigger: '/help', description: 'Show available commands' },
+  { trigger: '/clear', description: 'Clear the conversation' },
+  { trigger: '/model', description: 'Switch between Flash and Heavy' },
+  { trigger: '/exit', description: 'Quit the application' },
+]);
+
+checkCommands(COMMAND_DEFS);
+
+export const SLASH_MENU_HEIGHT = 6;
+
+export function getCommands() {
+  return COMMAND_DEFS;
+}
+
+export function findCommandByTrigger(input) {
+  for (let i = 0; i < COMMAND_DEFS.length; i++) {
+    if (input === COMMAND_DEFS[i].trigger || input.startsWith(COMMAND_DEFS[i].trigger + ' ')) {
+      return COMMAND_DEFS[i];
+    }
+  }
+  return null;
+}

package/src/config/models.js

@@ -0,0 +1,67 @@
+function checkString(value, label) {
+  if (typeof value !== 'string') {
+    throw new Error(label + ' must be a string');
+  }
+  if (value.length === 0) {
+    throw new Error(label + ' must not be empty');
+  }
+}
+
+function checkModelEntry(entry, index) {
+  if (entry === null || entry === undefined || typeof entry !== 'object') {
+    throw new Error('Model entry at index ' + index + ' must be an object');
+  }
+  checkString(entry.id, 'Model ' + index + ' id');
+  checkString(entry.label, 'Model ' + index + ' label');
+  checkString(entry.badge, 'Model ' + index + ' badge');
+  checkString(entry.provider, 'Model ' + index + ' provider');
+  if (entry.id.indexOf('/') === -1) {
+    throw new Error('Model ' + index + ' id must contain "/" (provider/model format)');
+  }
+}
+
+function checkModels(arr) {
+  if (!Array.isArray(arr)) {
+    throw new Error('Models must be an array');
+  }
+  if (arr.length === 0) {
+    throw new Error('Models array must not be empty');
+  }
+  for (let i = 0; i < arr.length; i++) {
+    checkModelEntry(arr[i], i);
+  }
+  return arr;
+}
+
+// Two routed models only — Flash (fast) and Heavy (quality).
+const MODELS = Object.freeze([
+  {
+    id: 'openaxis/openaxis-flash',
+    provider: 'openaxis',
+    label: 'OpenAxies Flash',
+    badge: 'Fast',
+  },
+  {
+    id: 'openaxis/openaxis-heavy',
+    provider: 'openaxis',
+    label: 'OpenAxies Heavy',
+    badge: 'Quality',
+  },
+]);
+
+checkModels(MODELS);
+
+export function getModels() {
+  return MODELS;
+}
+
+export function getModelById(id) {
+  for (let i = 0; i < MODELS.length; i++) {
+    if (MODELS[i].id === id) {
+      return MODELS[i];
+    }
+  }
+  return null;
+}
+
+export const DEFAULT_MODEL_ID = MODELS[0].id;

package/src/config/theme.js

@@ -0,0 +1,33 @@
+function checkString(value, label) {
+  if (typeof value !== 'string') {
+    throw new Error(label + ' must be a string');
+  }
+}
+
+function checkHex(value, label) {
+  checkString(value, label);
+  if (!/^#[0-9A-Fa-f]{6}$/.test(value)) {
+    throw new Error(label + ' must be a 6-digit hex color');
+  }
+  return value;
+}
+
+export const hex = Object.freeze({
+  orange: '#FF9F43',
+  cardBg: '#1C1C1C',
+  border: '#2A2A3A',
+  muted: '#666688',
+  primary: '#FFFFFF',
+  secondary: '#888888',
+  black: '#000000',
+  deepGray: '#262626',
+  dockBg: '#1A1A1A',
+  neonBlue: '#00F0FF',
+  dimWhite: '#AAAAAA',
+  greenOnline: '#00FF88',
+});
+
+const keys = Object.keys(hex);
+for (let i = 0; i < keys.length; i++) {
+  checkHex(hex[keys[i]], keys[i]);
+}