ubume 0.1.0

package/src/ui/render/textLayout.ts

@@ -0,0 +1,392 @@
+import stringWidth from "string-width";
+
+interface WindowSlice {
+  text: string;
+  cursorColumn: number;
+}
+
+export interface TextUnit {
+  text: string;
+  start: number;
+  end: number;
+  width: number;
+}
+
+export interface WrappedTextRow {
+  text: string;
+  start: number;
+  end: number;
+  breakType: "soft" | "hard" | "end";
+}
+
+// ─── Character measurement ───────────────────────────────────────────────────
+
+export function getCharWidth(char: string): number {
+  return Math.max(1, stringWidth(char));
+}
+
+export function normalizeLineBreaks(text: string): string {
+  return text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+}
+
+export function getTextUnits(text: string): TextUnit[] {
+  const units: TextUnit[] = [];
+  let offset = 0;
+
+  for (const char of text) {
+    const length = char.length;
+    units.push({
+      text: char,
+      start: offset,
+      end: offset + length,
+      width: getCharWidth(char),
+    });
+    offset += length;
+  }
+
+  return units;
+}
+
+export function getTextWidth(text: string): number {
+  return stringWidth(text);
+}
+
+function trimToWidthFromEnd(text: string, maxWidth: number): string {
+  if (maxWidth <= 0) return "";
+  let width = 0;
+  const kept: TextUnit[] = [];
+  const units = getTextUnits(text);
+
+  for (let index = units.length - 1; index >= 0; index -= 1) {
+    const unit = units[index]!;
+    if (width + unit.width > maxWidth) break;
+    kept.unshift(unit);
+    width += unit.width;
+  }
+
+  return kept.map((unit) => unit.text).join("");
+}
+
+function trimToWidthFromStart(text: string, maxWidth: number): string {
+  if (maxWidth <= 0) return "";
+  let width = 0;
+  let output = "";
+
+  for (const unit of getTextUnits(text)) {
+    if (width + unit.width > maxWidth) break;
+    output += unit.text;
+    width += unit.width;
+  }
+
+  return output;
+}
+
+// ─── Input window ────────────────────────────────────────────────────────────
+
+export function flattenInputForDisplay(text: string, cursor: number): { text: string; cursor: number } {
+  const normalized = normalizeLineBreaks(text);
+  const units = getTextUnits(normalized);
+  let output = "";
+  let mappedCursor = 0;
+
+  for (const unit of units) {
+    if (unit.start === cursor) {
+      mappedCursor = output.length;
+    }
+
+    if (unit.text === "\n") {
+      output += " ↩ ";
+      continue;
+    }
+    if (unit.text === "\t") {
+      output += "  ";
+      continue;
+    }
+    output += unit.text;
+  }
+
+  if (cursor >= normalized.length) {
+    mappedCursor = output.length;
+  }
+
+  return { text: output, cursor: mappedCursor };
+}
+
+export function createInlineInputWindow(text: string, cursor: number, maxWidth: number): WindowSlice {
+  const safeWidth = Math.max(1, maxWidth);
+  const flattened = flattenInputForDisplay(text, cursor);
+  const units = getTextUnits(flattened.text);
+  const charStartWidths: number[] = [];
+  let totalWidth = 0;
+
+  for (const unit of units) {
+    charStartWidths.push(totalWidth);
+    totalWidth += unit.width;
+  }
+
+  const cursorWidth = getTextWidth(flattened.text.slice(0, flattened.cursor));
+  if (totalWidth <= safeWidth) {
+    return { text: flattened.text, cursorColumn: cursorWidth };
+  }
+
+  const preferredStart = Math.max(0, cursorWidth - Math.floor(safeWidth * 0.65));
+  let windowStart = preferredStart;
+  if (windowStart + safeWidth > totalWidth) {
+    windowStart = Math.max(0, totalWidth - safeWidth);
+  }
+  const windowEnd = windowStart + safeWidth;
+
+  let startIndex = 0;
+  while (startIndex < units.length && charStartWidths[startIndex]! + units[startIndex]!.width <= windowStart) {
+    startIndex += 1;
+  }
+
+  let endIndex = startIndex;
+  while (endIndex < units.length && charStartWidths[endIndex]! < windowEnd) {
+    endIndex += 1;
+  }
+
+  let visibleText = units.slice(startIndex, endIndex).map((unit) => unit.text).join("");
+  let cursorColumn = Math.max(0, cursorWidth - (charStartWidths[startIndex] ?? 0));
+  const truncatedLeft = startIndex > 0;
+  const truncatedRight = endIndex < units.length;
+
+  if (truncatedLeft) {
+    const ellipsis = "…";
+    const available = Math.max(1, safeWidth - getCharWidth(ellipsis) - (truncatedRight ? getCharWidth(ellipsis) : 0));
+    visibleText = ellipsis + trimToWidthFromEnd(visibleText, available);
+    cursorColumn = Math.min(getTextWidth(visibleText), Math.max(getCharWidth(ellipsis), cursorColumn + getCharWidth(ellipsis)));
+  }
+
+  if (truncatedRight) {
+    const ellipsis = "…";
+    const available = Math.max(1, safeWidth - (truncatedLeft ? getCharWidth(ellipsis) : 0) - getCharWidth(ellipsis));
+    const baseText = truncatedLeft ? visibleText.slice(1) : visibleText;
+    visibleText = `${truncatedLeft ? "…" : ""}${trimToWidthFromStart(baseText, available)}${ellipsis}`;
+  }
+
+  return {
+    text: visibleText,
+    cursorColumn: Math.max(0, Math.min(getTextWidth(visibleText), cursorColumn)),
+  };
+}
+
+export function splitTextAtColumn(text: string, column: number): { before: string; current: string; after: string } {
+  const safeColumn = Math.max(0, column);
+  let width = 0;
+  const units = getTextUnits(text);
+
+  for (const unit of units) {
+    if (width + unit.width > safeColumn) {
+      return {
+        before: text.slice(0, unit.start),
+        current: unit.text,
+        after: text.slice(unit.end),
+      };
+    }
+
+    width += unit.width;
+    if (width > safeColumn) break;
+  }
+
+  return {
+    before: text,
+    current: "",
+    after: "",
+  };
+}
+
+// ─── Text wrapping ────────────────────────────────────────────────────────────
+
+export function wrapTextRows(
+  text: string,
+  maxWidth: number,
+  firstLineWidth: number = maxWidth,
+): WrappedTextRow[] {
+  const normalized = normalizeLineBreaks(text);
+  const safeWidth = Math.max(1, maxWidth);
+  const safeFirstWidth = Math.max(1, firstLineWidth);
+  const rows: WrappedTextRow[] = [];
+  let rowUnits: TextUnit[] = [];
+  let rowWidth = 0;
+  let skippingSoftWhitespace = false;
+
+  const unitsText = (units: TextUnit[]) => units.map((unit) => unit.text).join("");
+  const unitsWidth = (units: TextUnit[]) => units.reduce((total, current) => total + current.width, 0);
+  const pushRow = (units: TextUnit[], end: number, breakType: WrappedTextRow["breakType"]) => {
+    rows.push({
+      text: unitsText(units),
+      start: units[0]?.start ?? end,
+      end,
+      breakType,
+    });
+  };
+  const findWordBoundary = (units: TextUnit[]): { breakStart: number; continuationStart: number } | null => {
+    for (let index = units.length - 2; index >= 0; index -= 1) {
+      if (!/^[ \t]$/.test(units[index]!.text)) continue;
+
+      let breakStart = index;
+      while (breakStart > 0 && /^[ \t]$/.test(units[breakStart - 1]!.text)) {
+        breakStart -= 1;
+      }
+
+      let continuationStart = index + 1;
+      while (continuationStart < units.length && /^[ \t]$/.test(units[continuationStart]!.text)) {
+        continuationStart += 1;
+      }
+
+      if (breakStart > 0 && continuationStart < units.length) {
+        return { breakStart, continuationStart };
+      }
+      index = breakStart;
+    }
+    return null;
+  };
+
+  for (const unit of getTextUnits(normalized)) {
+    if (unit.text === "\n") {
+      pushRow(rowUnits, unit.start, "hard");
+      rowUnits = [];
+      rowWidth = 0;
+      skippingSoftWhitespace = false;
+      continue;
+    }
+
+    if (skippingSoftWhitespace && /^[ \t]$/.test(unit.text)) continue;
+    skippingSoftWhitespace = false;
+
+    // Only the first emitted row honors firstLineWidth; later rows use maxWidth.
+    const limit = rows.length === 0 ? safeFirstWidth : safeWidth;
+    if (rowUnits.length > 0 && rowWidth + unit.width > limit) {
+      const candidate = [...rowUnits, unit];
+      const boundary = findWordBoundary(candidate);
+      if (boundary) {
+        const before = candidate.slice(0, boundary.breakStart);
+        const after = candidate.slice(boundary.continuationStart);
+        pushRow(before, candidate[boundary.breakStart]!.start, "soft");
+        rowUnits = after;
+        rowWidth = unitsWidth(after);
+      } else if (/^[ \t]$/.test(unit.text)) {
+        pushRow(rowUnits, unit.start, "soft");
+        rowUnits = [];
+        rowWidth = 0;
+        skippingSoftWhitespace = true;
+      } else {
+        pushRow(rowUnits, unit.start, "soft");
+        rowUnits = [unit];
+        rowWidth = unit.width;
+      }
+      continue;
+    }
+
+    rowUnits.push(unit);
+    rowWidth += unit.width;
+  }
+
+  if (rowUnits.length > 0) {
+    pushRow(rowUnits, normalized.length, "end");
+  } else {
+    rows.push({
+      text: "",
+      start: normalized.length,
+      end: normalized.length,
+      breakType: "end",
+    });
+  }
+
+  return rows.length > 0 ? rows : [{
+    text: "",
+    start: 0,
+    end: 0,
+    breakType: "end",
+  }];
+}
+
+export function wrapPlainText(
+  text: string,
+  maxWidth: number,
+  firstLineWidth: number = maxWidth,
+): string[] {
+  return wrapTextRows(text, maxWidth, firstLineWidth).map((row) => row.text);
+}
+
+export function wrapCommandText(text: string, maxWidth: number): string[] {
+  if (maxWidth <= 2) return [];
+  const normalized = normalizeLineBreaks(text);
+  const rows: string[] = [];
+  let currentLine = "";
+  let currentWidth = 0;
+  
+  // Split on whitespace, but keep the whitespace tokens
+  const tokens = normalized.split(/([ \t]+)/);
+  
+  for (let i = 0; i < tokens.length; i++) {
+    let token = tokens[i];
+    if (!token) continue;
+    
+    if (token === "\n") {
+      rows.push(currentLine);
+      currentLine = "  ";
+      currentWidth = 2;
+      continue;
+    }
+    
+    let tokenWidth = getTextWidth(token);
+    
+    // Skip leading whitespace on continuation lines
+    if (/^[ \t]+$/.test(token) && currentLine === "  ") {
+      continue;
+    }
+
+    if (currentWidth + tokenWidth > maxWidth) {
+      if (/^[ \t]+$/.test(token)) {
+        // Space that pushes us over the edge, ignore it and break
+        rows.push(currentLine);
+        currentLine = "  ";
+        currentWidth = 2;
+        continue;
+      }
+      
+      if (currentWidth > 2) {
+        // We have some content on this line, push it and start a new line
+        rows.push(currentLine);
+        currentLine = "  ";
+        currentWidth = 2;
+      }
+      
+      // Now check if the token alone exceeds the available width (maxWidth - 2)
+      while (tokenWidth > maxWidth - currentWidth) {
+        const available = maxWidth - currentWidth;
+        const split = splitTextAtColumn(token, available);
+        
+        currentLine += split.before;
+        rows.push(currentLine);
+        
+        token = split.current + split.after;
+        tokenWidth = getTextWidth(token);
+        currentLine = "  ";
+        currentWidth = 2;
+      }
+      
+      currentLine += token;
+      currentWidth += tokenWidth;
+      
+    } else {
+      currentLine += token;
+      currentWidth += tokenWidth;
+    }
+  }
+  
+  if (currentLine.trim().length > 0 || currentLine === "  ") {
+    // only push if there is actual content, or if it is an intentionally empty line (rare)
+    if (currentLine !== "  ") {
+       rows.push(currentLine);
+    }
+  }
+  
+  if (rows.length > 0 && rows[0].startsWith("  ") && !text.startsWith("  ")) {
+    rows[0] = rows[0].substring(2);
+  }
+  
+  return rows;
+}

package/src/ui/theme.tsx

@@ -0,0 +1,274 @@
+import React, { createContext, useContext, ReactNode } from "react";
+import * as renderDebug from "../core/perf/renderDebug.js";
+
+export interface Theme {
+  bg: string;
+  surface: string;
+  surfaceMuted: string;
+  border: string;
+  borderFocused: string;
+  text: string;
+  textMuted: string;
+  textDim: string;
+  accent: string;
+  accentMuted: string;
+  success: string;
+  warning: string;
+  error: string;
+  info: string;
+  command: string;
+  prompt: string;
+  model: string;
+  provider: string;
+  context: string;
+  logoPrimary: string;
+  logoSecondary: string;
+  logoShadow: string;
+}
+
+// ─── Theme definitions ────────────────────────────────────────────────────────
+
+export const DARK_THEME = {
+  bg: "#0E0E10",
+  surface: "#18181B",
+  surfaceMuted: "#111113",
+  border: "#27272A",
+  borderFocused: "#2DD4BF",
+  accent: "#10B981",
+  accentMuted: "#059669",
+  text: "#F4F4F5",
+  textMuted: "#A1A1AA",
+  textDim: "#52525B",
+  success: "#22C55E",
+  warning: "#F59E0B",
+  error: "#EF4444",
+  info: "#06B6D4",
+  command: "#34D399",
+  prompt: "#10B981",
+  model: "#60A5FA",
+  provider: "#6EE7B7",
+  context: "#67E8F9",
+  logoPrimary: "#34D399",
+  logoSecondary: "#10B981",
+  logoShadow: "#064E3B",
+} satisfies Theme;
+
+export const PURPLE_THEME = {
+  bg: "#12101C",
+  surface: "#1B162E",
+  surfaceMuted: "#151224",
+  border: "#3B2C66",
+  borderFocused: "#BB9AF7",
+  accent: "#BB9AF7",
+  accentMuted: "#9D78E3",
+  text: "#E2D9FA",
+  textMuted: "#9AA5CE",
+  textDim: "#565F89",
+  success: "#9ECE6A",
+  warning: "#E0AF68",
+  error: "#F7768E",
+  info: "#7AA2F7",
+  command: "#BB9AF7",
+  prompt: "#7DCFFF",
+  model: "#89DDFF",
+  provider: "#B4F9F8",
+  context: "#89DDFF",
+  logoPrimary: "#BB9AF7",
+  logoSecondary: "#7AA2F7",
+  logoShadow: "#3B2C66",
+} satisfies Theme;
+
+export const MONO_THEME = {
+  bg: "#0F0F0F",
+  surface: "#1A1A1A",
+  surfaceMuted: "#141414",
+  border: "#333333",
+  borderFocused: "#FAFAFA",
+  accent: "#FAFAFA",
+  accentMuted: "#A3A3A3",
+  text: "#F5F5F5",
+  textMuted: "#A3A3A3",
+  textDim: "#525252",
+  success: "#D4D4D4",
+  warning: "#A3A3A3",
+  error: "#E5E5E5",
+  info: "#8A8A8A",
+  command: "#E5E5E5",
+  prompt: "#D4D4D4",
+  model: "#E5E5E5",
+  provider: "#A3A3A3",
+  context: "#A3A3A3",
+  logoPrimary: "#FAFAFA",
+  logoSecondary: "#D4D4D4",
+  logoShadow: "#525252",
+} satisfies Theme;
+
+export const BLACK_THEME = {
+  bg: "#000000",
+  surface: "#0D0D10",
+  surfaceMuted: "#060608",
+  border: "#242427",
+  borderFocused: "#FAFAFA",
+  accent: "#F4F4F5",
+  accentMuted: "#A1A1AA",
+  text: "#FAFAFA",
+  textMuted: "#A1A1AA",
+  textDim: "#52525B",
+  success: "#10B981",
+  warning: "#F59E0B",
+  error: "#EF4444",
+  info: "#3B82F6",
+  command: "#FAFAFA",
+  prompt: "#D4D4D8",
+  model: "#60A5FA",
+  provider: "#A7F3D0",
+  context: "#67E8F9",
+  logoPrimary: "#FAFAFA",
+  logoSecondary: "#A1A1AA",
+  logoShadow: "#52525B",
+} satisfies Theme;
+
+export const NORDIC_THEME = {
+  bg: "#1E222A",
+  surface: "#2E3440",
+  surfaceMuted: "#242933",
+  border: "#3B4252",
+  borderFocused: "#88C0D0",
+  accent: "#8FBCBB",
+  accentMuted: "#81A1C1",
+  text: "#ECEFF4",
+  textMuted: "#D8DEE9",
+  textDim: "#4C566A",
+  success: "#A3BE8C",
+  warning: "#EBCB8B",
+  error: "#BF616A",
+  info: "#5E81AC",
+  command: "#88C0D0",
+  prompt: "#88C0D0",
+  model: "#81A1C1",
+  provider: "#8FBCBB",
+  context: "#88C0D0",
+  logoPrimary: "#88C0D0",
+  logoSecondary: "#81A1C1",
+  logoShadow: "#434C5E",
+} satisfies Theme;
+
+export const DRACULA_THEME = {
+  bg: "#1E1F29",
+  surface: "#282A36",
+  surfaceMuted: "#21222C",
+  border: "#44475A",
+  borderFocused: "#BD93F9",
+  accent: "#FF79C6",
+  accentMuted: "#BF93F9",
+  text: "#F8F8F2",
+  textMuted: "#BFBFBF",
+  textDim: "#6272A4",
+  success: "#50FA7B",
+  warning: "#F1FA8C",
+  error: "#FF5555",
+  info: "#8BE9FD",
+  command: "#FF79C6",
+  prompt: "#8BE9FD",
+  model: "#BD93F9",
+  provider: "#8BE9FD",
+  context: "#8BE9FD",
+  logoPrimary: "#BD93F9",
+  logoSecondary: "#FF79C6",
+  logoShadow: "#44475A",
+} satisfies Theme;
+
+export const GRUVBOX_THEME = {
+  bg: "#1D2021",
+  surface: "#282828",
+  surfaceMuted: "#242424",
+  border: "#3C3836",
+  borderFocused: "#FABD2F",
+  accent: "#FABD2F",
+  accentMuted: "#D79921",
+  text: "#EBDBB2",
+  textMuted: "#A89984",
+  textDim: "#665C54",
+  success: "#B8BB26",
+  warning: "#FE8019",
+  error: "#FB4934",
+  info: "#83A598",
+  command: "#FABD2F",
+  prompt: "#83A598",
+  model: "#83A598",
+  provider: "#8EC07C",
+  context: "#83A598",
+  logoPrimary: "#FABD2F",
+  logoSecondary: "#B8BB26",
+  logoShadow: "#504945",
+} satisfies Theme;
+
+export const OCEAN_THEME = {
+  bg: "#030712",
+  surface: "#0F172A",
+  surfaceMuted: "#0A0F1D",
+  border: "#1E293B",
+  borderFocused: "#38BDF8",
+  accent: "#0EA5E9",
+  accentMuted: "#0284C7",
+  text: "#F0F9FF",
+  textMuted: "#7DD3FC",
+  textDim: "#0369A1",
+  success: "#10B981",
+  warning: "#F59E0B",
+  error: "#F43F5E",
+  info: "#0EA5E9",
+  command: "#0EA5E9",
+  prompt: "#38BDF8",
+  model: "#7DD3FC",
+  provider: "#38BDF8",
+  context: "#38BDF8",
+  logoPrimary: "#0EA5E9",
+  logoSecondary: "#38BDF8",
+  logoShadow: "#1E3A70",
+} satisfies Theme;
+
+// ─── Theme registry ───────────────────────────────────────────────────────────
+
+export const THEMES: Record<string, Theme> = {
+  dark: DARK_THEME,
+  purple: PURPLE_THEME,
+  mono: MONO_THEME,
+  black: BLACK_THEME,
+  nordic: NORDIC_THEME,
+  dracula: DRACULA_THEME,
+  gruvbox: GRUVBOX_THEME,
+  ocean: OCEAN_THEME,
+};
+
+// ─── Context & hook ───────────────────────────────────────────────────────────
+
+const ThemeContext = createContext<Theme>(DARK_THEME);
+
+interface ThemeProviderProps {
+  theme?: string;
+  customTheme?: Partial<Theme>;
+  children: ReactNode;
+}
+
+export function ThemeProvider({ theme: themeName = "dark", customTheme, children }: ThemeProviderProps) {
+  renderDebug.useLifecycleDebug("ThemeProvider", {
+    themeName,
+    customTheme: Boolean(customTheme),
+  });
+  renderDebug.useRenderDebug("ThemeProvider", {
+    themeName,
+    customTheme: Boolean(customTheme),
+  });
+  const baseTheme = THEMES[themeName] || DARK_THEME;
+  const activeTheme = themeName === "custom" ? { ...DARK_THEME, ...customTheme } : baseTheme;
+  return (
+    <ThemeContext.Provider value={activeTheme as Theme}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}

package/src/ui/themeFlow.ts

@@ -0,0 +1,41 @@
+import type { Screen } from "../session/types.js";
+
+export interface ThemeSelectionState {
+  committedTheme: string;
+  previewTheme: string | null;
+}
+
+export function getDisplayedThemeName(state: ThemeSelectionState): string {
+  return state.previewTheme ?? state.committedTheme;
+}
+
+export function previewThemeSelection(
+  state: ThemeSelectionState,
+  nextTheme: string,
+): ThemeSelectionState {
+  return {
+    ...state,
+    previewTheme: nextTheme,
+  };
+}
+
+export function commitThemeSelection(
+  state: ThemeSelectionState,
+  nextTheme: string,
+): ThemeSelectionState {
+  return {
+    committedTheme: nextTheme,
+    previewTheme: null,
+  };
+}
+
+export function cancelThemeSelection(state: ThemeSelectionState): ThemeSelectionState {
+  return {
+    committedTheme: state.committedTheme,
+    previewTheme: null,
+  };
+}
+
+export function shouldBumpComposerInstance(previousScreen: Screen, nextScreen: Screen): boolean {
+  return previousScreen !== "main" && nextScreen === "main";
+}