ubume 0.1.0

package/src/ui/chrome/DashCard.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import type { ReactNode } from "react";
+import { Box, Text } from "ink";
+import { useTheme } from "../theme.js";
+import { getVisualWidth } from "../layout.js";
+
+interface DashCardProps {
+  cols: number;
+  title: string;
+  rightBadge?: string;
+  borderColor?: string;
+  titleColor?: string;
+  badgeColor?: string;
+  children: ReactNode;
+}
+
+export function DashCard({
+  cols,
+  title,
+  rightBadge,
+  borderColor,
+  titleColor,
+  badgeColor,
+  children,
+}: DashCardProps) {
+  const theme = useTheme();
+  const border = borderColor ?? theme.border;
+  const tColor = titleColor ?? theme.textMuted;
+  const bColor = badgeColor ?? theme.textDim;
+
+  // Account for AppShell gutter (-1) and Timeline paddingX={1} (-2)
+  const w = cols - 3;
+
+  const topLine = buildTopBorder(w, title, rightBadge);
+  const bottomFill = "─".repeat(Math.max(1, w - 2));
+
+  return (
+    <Box flexDirection="column" width="100%">
+      <Text wrap="truncate">
+        <Text color={border}>{"╭── "}</Text>
+        <Text color={tColor} bold>{topLine.title}</Text>
+        <Text color={border}>{topLine.badge ? " " + topLine.fill + " " : " " + topLine.fill}</Text>
+        {topLine.badge ? (
+          <>
+            <Text color={bColor}>{topLine.badge}</Text>
+            <Text color={border}>{" ──╮"}</Text>
+          </>
+        ) : (
+          <Text color={border}>{"──╮"}</Text>
+        )}
+      </Text>
+      <Box flexDirection="row" width="100%">
+        <Text color={border}>{"│ "}</Text>
+        <Box flexDirection="column" flexGrow={1} flexShrink={1}>
+          {children}
+        </Box>
+        <Text color={border}>{" │"}</Text>
+      </Box>
+      <Text wrap="truncate" color={border}>{"╰" + bottomFill + "╯"}</Text>
+    </Box>
+  );
+}
+
+function buildTopBorder(
+  w: number,
+  title: string,
+  badge?: string,
+): { title: string; fill: string; badge: string | null } {
+  // Layout: "╭── " + title + " " + fill + " " + badge + " ──╮"
+  // Or:     "╭── " + title + " " + fill + "──╮"
+  const prefix = 4; // "╭── "
+  const suffix = badge ? 4 : 3; // " ──╮" with badge spacing, or "──╮"
+  const titleWidth = getVisualWidth(title);
+  const badgeWidth = badge ? getVisualWidth(badge) : 0;
+  const spacing = badge ? 2 : 1; // the title-only variant has no trailing gap before the corner
+
+  const available = w - prefix - titleWidth - spacing - badgeWidth - suffix;
+  const fillCount = Math.max(1, available);
+  const fill = "─".repeat(fillCount);
+
+  return { title, fill, badge: badge ?? null };
+}

package/src/ui/chrome/RunFooter.tsx

@@ -0,0 +1,65 @@
+import React, { memo } from "react";
+import { Box, Text } from "ink";
+import type { UIState } from "../../session/types.js";
+import * as renderDebug from "../../core/perf/renderDebug.js";
+import { useTheme } from "../theme.js";
+import { AnimatedStatusText } from "./AnimatedStatusText.js";
+import { isAnimatedBusyState } from "./busyStatusAnimation.js";
+
+export function measureRunFooterRows(): number {
+  return 3;
+}
+
+export function getRunFooterStatus(uiState: UIState): string {
+  if (uiState.kind === "IDLE") return "";
+  if (uiState.kind === "THINKING") return "Ubume is thinking";
+  if (uiState.kind === "RESPONDING") return "Ubume is thinking";
+  if (uiState.kind === "ANSWER_VISIBLE") return "Ubume response complete";
+  if (uiState.kind === "SHELL_RUNNING") return "Ubume is running command";
+  if (uiState.kind === "ERROR") return uiState.message;
+  if (uiState.kind === "AWAITING_USER_ACTION") return "Ubume needs your answer";
+  return "Ubume is working";
+}
+
+interface RunFooterProps {
+  uiState: UIState;
+  showBusyLoader?: boolean;
+  onCancel: () => void;
+  onQuit: () => void;
+}
+
+function RunFooter({ uiState, showBusyLoader = true }: RunFooterProps) {
+  renderDebug.useRenderDebug("Footer", {
+    uiStateKind: uiState.kind,
+    showBusyLoader,
+  });
+  renderDebug.useLifecycleDebug("Footer", {
+    uiStateKind: uiState.kind,
+  });
+
+  const theme = useTheme();
+  // THINKING/RESPONDING/SHELL_RUNNING indicate active processing
+  const isActive = showBusyLoader && isAnimatedBusyState(uiState.kind);
+
+  return (
+    <Box flexDirection="column" paddingBottom={1} width="100%">
+      <Box borderStyle="single" borderTop={true} borderBottom={false} borderLeft={false} borderRight={false} borderColor={theme.border} marginBottom={1} />
+      <Box paddingX={1} width="100%" justifyContent="space-between" overflow="hidden">
+        <Box flexShrink={1} flexGrow={1} overflow="hidden">
+          <Text color={theme.info}>{"✧ "}</Text>
+          <AnimatedStatusText baseText={getRunFooterStatus(uiState)} isActive={isActive} />
+        </Box>
+        <Box flexShrink={0}>
+          <Text color={theme.textDim}>Esc cancel  Ctrl+C quit</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export const MemoizedRunFooter = memo(RunFooter, (prev, next) => {
+  return prev.uiState.kind === next.uiState.kind
+    && prev.showBusyLoader === next.showBusyLoader;
+});
+
+export { RunFooter };

package/src/ui/chrome/RuntimeStatusBar.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { useTheme } from "../theme.js";
+import type { Layout } from "../layout.js";
+import * as renderDebug from "../../core/perf/renderDebug.js";
+
+export type RuntimeAvailability = "available" | "checking" | "reconnecting" | "unavailable" | "unknown";
+
+export interface RuntimeStatusBarProps {
+  layout: Layout;
+  modelDisplay: string;
+  contextDisplay?: string;
+  availability?: RuntimeAvailability;
+}
+
+export function measureRuntimeStatusBarRows(): number {
+  return 1;
+}
+
+function getAvailabilityLabel(availability: RuntimeAvailability | undefined): string | null {
+  if (availability === "checking") return "checking";
+  if (availability === "reconnecting") return "reconnecting";
+  if (availability === "unavailable") return "unavailable";
+  if (availability === "unknown") return "Unknown";
+  return null;
+}
+
+function renderRuntimeDisplay(displayStr: string, theme: ReturnType<typeof useTheme>) {
+  const safeDisplay = displayStr.trim() || "Local / Detecting...";
+  const slashIndex = safeDisplay.indexOf("/");
+  if (slashIndex === -1) {
+    return <Text color={theme.model} wrap="truncate">{safeDisplay}</Text>;
+  }
+
+  const providerPart = safeDisplay.substring(0, slashIndex).trim() || "Local";
+  const remaining = safeDisplay.substring(slashIndex + 1).trim() || "Detecting...";
+  const parenIndex = remaining.indexOf("(");
+
+  if (parenIndex === -1) {
+    return (
+      <Box flexDirection="row" overflow="hidden">
+        <Text color={theme.provider}>{providerPart}</Text>
+        <Text color={theme.textMuted}>{" / "}</Text>
+        <Text color={theme.model}>{remaining}</Text>
+      </Box>
+    );
+  }
+
+  const modelPart = remaining.substring(0, parenIndex).trim();
+  let reasoningPart = remaining.substring(parenIndex + 1).trim();
+  if (reasoningPart.endsWith(")")) {
+    reasoningPart = reasoningPart.substring(0, reasoningPart.length - 1).trim();
+  }
+
+  return (
+    <Box flexDirection="row" overflow="hidden">
+      <Text color={theme.provider}>{providerPart}</Text>
+      <Text color={theme.textMuted}>{" / "}</Text>
+      <Text color={theme.model}>{modelPart}</Text>
+      <Text color={theme.textMuted}>{" ("}</Text>
+      <Text color={theme.accentMuted}>{reasoningPart}</Text>
+      <Text color={theme.textMuted}>{")"}</Text>
+    </Box>
+  );
+}
+
+export function RuntimeStatusBar({
+  layout,
+  modelDisplay,
+  contextDisplay,
+  availability = "available",
+}: RuntimeStatusBarProps) {
+  const theme = useTheme();
+  const availabilityLabel = getAvailabilityLabel(availability);
+  const safeModelDisplay = modelDisplay.trim() || "Local / Detecting...";
+  const safeContextDisplay = contextDisplay?.trim() || "Unknown";
+  renderDebug.useRenderDebug("RuntimeStatusBar", {
+    modelDisplay: safeModelDisplay,
+    contextDisplay: safeContextDisplay,
+    availability,
+    cols: layout.cols,
+  });
+
+  return (
+    <Box
+      height={measureRuntimeStatusBarRows()}
+      width="100%"
+      paddingLeft={1}
+      paddingRight={1}
+      justifyContent="space-between"
+      overflow="hidden"
+    >
+      <Box flexGrow={1} flexShrink={1} overflow="hidden" flexDirection="row">
+        {renderRuntimeDisplay(safeModelDisplay, theme)}
+        {availabilityLabel && (
+          <>
+            <Text color={theme.textMuted}>{" · "}</Text>
+            <Text color={availability === "unavailable" ? theme.warning : theme.info}>{availabilityLabel}</Text>
+          </>
+        )}
+      </Box>
+      <Box flexShrink={0}>
+        <Text color={theme.textMuted}>{layout.cols >= 48 ? "Context: " : "Ctx: "}</Text>
+        <Text color={safeContextDisplay === "Unknown" ? theme.textDim : theme.context}>{safeContextDisplay}</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/ui/chrome/Spinner.tsx

@@ -0,0 +1,25 @@
+import React, { startTransition, useEffect, useState } from "react";
+import { Text } from "ink";
+import { useTheme } from "../theme.js";
+
+const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export function Spinner({ color }: { color?: string }) {
+  const theme = useTheme();
+  const [frame, setFrame] = useState(0);
+  const activeColor = color ?? theme.textDim;
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      // startTransition marks this as low-priority so React can coalesce or
+      // defer it when a higher-priority streaming render is already pending.
+      startTransition(() => {
+        setFrame((f) => (f + 1) % frames.length);
+      });
+    }, 80);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return <Text color={activeColor}>{frames[frame]}</Text>;
+}