theboardtui 0.1.0

package/dist/components/StatusMonitor.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+import { apiGet } from "../lib/api.js";
+import { formatStatus, formatDate } from "../utils/formatters.js";
+import { statusPending, statusAnalyzing, muted } from "../lib/theme.js";
+import Card from "./ui/Card.js";
+import Spinner from "./ui/Spinner.js";
+import Stack from "./layout/Stack.js";
+import ErrorDisplay from "./ui/ErrorDisplay.js";
+export default function StatusMonitor({ problemId, pollInterval = 5000 }) {
+    const [runs, setRuns] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState("");
+    useEffect(() => {
+        if (!problemId)
+            return;
+        loadStatus();
+        const interval = setInterval(loadStatus, pollInterval);
+        return () => clearInterval(interval);
+    }, [problemId, pollInterval]);
+    const loadStatus = async () => {
+        if (!problemId)
+            return;
+        try {
+            setLoading(true);
+            setError("");
+            const data = await apiGet(`/api/problems/${problemId}/analysis-runs`).catch(() => ({ analysisRuns: [] }));
+            setRuns(data.analysisRuns || []);
+        }
+        catch (err) {
+            setError(err.message || "Failed to load status");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const activeRuns = runs.filter((run) => run.status === "pending" || run.status === "analyzing");
+    const recentRuns = runs.slice(0, 5);
+    if (loading && runs.length === 0) {
+        return (_jsx(Card, { variant: "outlined", title: "Status Monitor", children: _jsx(Spinner, { message: "Loading status..." }) }));
+    }
+    if (error) {
+        return (_jsx(Card, { variant: "outlined", title: "Status Monitor", children: _jsx(ErrorDisplay, { error: error, maxWidth: Math.min(70, (process.stdout.columns || 80) - 4) }) }));
+    }
+    return (_jsx(Card, { variant: "outlined", title: "Status Monitor", children: _jsxs(Stack, { direction: "vertical", gap: "sm", children: [activeRuns.length > 0 && (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, children: "Active Analyses" }), activeRuns.map((run) => (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Text, { children: [run.status === "analyzing" ? statusAnalyzing("●") : statusPending("●"), " ", run.id.slice(0, 8)] }), _jsx(Text, { children: muted(formatDate(run.createdAt)) })] }, run.id)))] })), recentRuns.length > 0 && (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, children: "Recent Runs" }), recentRuns.map((run) => (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Text, { children: [formatStatus(run.status), " ", run.id.slice(0, 8)] }), _jsx(Text, { children: muted(formatDate(run.createdAt)) })] }, run.id)))] })), runs.length === 0 && (_jsx(Text, { children: muted("No analysis runs found") }))] }) }));
+}

package/dist/components/layout/Container.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "ink";
+import { padding } from "../../design/index.js";
+export default function Container({ children, padding: paddingSize = "md" }) {
+    return (_jsx(Box, { paddingX: padding[paddingSize], paddingY: padding[paddingSize], children: children }));
+}

package/dist/components/layout/Grid.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "ink";
+import { gap } from "../../design/index.js";
+export default function Grid({ children, columns = 2, gap: gapSize = "md" }) {
+    return (_jsx(Box, { flexDirection: "row", flexWrap: "wrap", gap: gap[gapSize], children: children }));
+}

package/dist/components/layout/Header.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import chalk from "chalk";
+import { colors, gap } from "../../design/index.js";
+import Divider from "../ui/Divider.js";
+export default function Header({ title, subtitle, actions }) {
+    return (_jsxs(Box, { flexDirection: "column", gap: gap.sm, children: [_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: chalk.hex(colors.primary).bold(title) }), subtitle && (_jsx(Text, { children: chalk.hex(colors.muted)(subtitle) }))] }), actions && _jsx(Box, { children: actions })] }), _jsx(Divider, {})] }));
+}

package/dist/components/layout/Section.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "ink";
+import { gap, padding } from "../../design/index.js";
+export default function Section({ children, title, gap: gapSize = "md", padding: paddingSize = "none" }) {
+    return (_jsxs(Box, { flexDirection: "column", gap: gap[gapSize], paddingX: padding[paddingSize], paddingY: padding[paddingSize], children: [title && (_jsx(Box, {})), children] }));
+}

package/dist/components/layout/Stack.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "ink";
+import { gap } from "../../design/index.js";
+export default function Stack({ children, direction = "vertical", gap: gapSize = "sm", align = "start" }) {
+    const alignItems = align === "start" ? "flex-start" : align === "center" ? "center" : "flex-end";
+    return (_jsx(Box, { flexDirection: direction === "vertical" ? "column" : "row", gap: gap[gapSize], alignItems: alignItems, children: children }));
+}

package/dist/components/ui/Badge.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+import chalk from "chalk";
+import { colors, semanticColors } from "../../design/index.js";
+export default function Badge({ children, variant = "default" }) {
+    const colorMap = {
+        default: semanticColors.text.secondary,
+        primary: colors.primary,
+        success: colors.approve,
+        warning: colors.warning,
+        danger: colors.danger,
+        muted: colors.muted,
+    };
+    const color = colorMap[variant];
+    return _jsx(Text, { children: chalk.hex(color)(String(children)) });
+}

package/dist/components/ui/Button.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+import chalk from "chalk";
+import { colors, semanticColors } from "../../design/index.js";
+export default function Button({ children, variant = "primary", disabled = false, focused = false }) {
+    if (disabled) {
+        return _jsx(Text, { children: chalk.hex(semanticColors.text.disabled)(String(children)) });
+    }
+    const colorMap = {
+        primary: colors.primary,
+        secondary: semanticColors.text.secondary,
+        danger: colors.danger,
+    };
+    const color = colorMap[variant];
+    const text = focused
+        ? chalk.hex(color).bold(`▶ ${String(children)}`)
+        : chalk.hex(color)(String(children));
+    return _jsx(Text, { children: text });
+}

package/dist/components/ui/Card.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import chalk from "chalk";
+import { colors, semanticColors, padding, borderChars } from "../../design/index.js";
+export default function Card({ children, variant = "default", title, padding: paddingSize = "md" }) {
+    const pad = padding[paddingSize];
+    const borderColor = semanticColors.border.default;
+    const borderTop = variant === "outlined"
+        ? chalk.hex(borderColor)(borderChars.horizontal.repeat(50))
+        : "";
+    const borderBottom = variant === "outlined"
+        ? chalk.hex(borderColor)(borderChars.horizontal.repeat(50))
+        : "";
+    return (_jsxs(Box, { flexDirection: "column", children: [title && (_jsx(Box, { paddingX: pad, paddingY: 1, children: _jsx(Text, { bold: true, children: chalk.hex(colors.foreground)(title) }) })), borderTop && (_jsx(Box, { paddingX: pad, children: _jsx(Text, { children: borderTop }) })), _jsx(Box, { paddingX: pad, paddingY: title ? 1 : pad, children: children }), borderBottom && (_jsx(Box, { paddingX: pad, children: _jsx(Text, { children: borderBottom }) }))] }));
+}

package/dist/components/ui/Divider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+import chalk from "chalk";
+import { borderChars, semanticColors } from "../../design/index.js";
+export default function Divider({ length = 50, variant = "horizontal" }) {
+    const char = variant === "double" ? "═" : borderChars.horizontal;
+    const line = char.repeat(length);
+    return _jsx(Text, { children: chalk.hex(semanticColors.border.default)(line) });
+}

package/dist/components/ui/ErrorDisplay.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { formatError } from "../../utils/formatters.js";
+import { muted } from "../../lib/theme.js";
+export default function ErrorDisplay({ error, maxWidth = 70, showHelpText = false, helpText }) {
+    if (!error)
+        return null;
+    const errorLines = formatError(error, maxWidth);
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [errorLines.map((line, index) => (_jsx(Text, { children: line }, index))), showHelpText && helpText && (_jsxs(_Fragment, { children: [_jsx(Box, { height: 1 }), _jsx(Text, { children: muted(helpText) })] }))] }));
+}

package/dist/components/ui/Input.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import TextInput from "ink-text-input";
+import chalk from "chalk";
+import { semanticColors, padding } from "../../design/index.js";
+export default function Input({ value, onChange, onSubmit, placeholder, label, error, focused = false, mask, }) {
+    const borderColor = error
+        ? semanticColors.border.error
+        : focused
+            ? semanticColors.border.focus
+            : semanticColors.border.default;
+    return (_jsxs(Box, { flexDirection: "column", gap: padding.xs, children: [label && (_jsx(Text, { children: chalk.hex(semanticColors.text.primary).bold(label) })), _jsxs(Box, { children: [_jsxs(Text, { children: [chalk.hex(borderColor)(">"), " "] }), _jsx(TextInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: placeholder, mask: mask }), focused && _jsx(Text, { children: chalk.inverse(" ") })] }), error && (_jsx(Text, { children: chalk.hex(semanticColors.border.error)(error) }))] }));
+}

package/dist/components/ui/List.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import chalk from "chalk";
+import { colors, gap } from "../../design/index.js";
+export function ListItem({ children, selected = false, focused = false }) {
+    const indicator = selected || focused
+        ? chalk.hex(colors.primary)("▶ ")
+        : "  ";
+    return (_jsx(Box, { children: _jsxs(Text, { children: [indicator, children] }) }));
+}
+export default function List({ children, gap: gapSize = "sm" }) {
+    return (_jsx(Box, { flexDirection: "column", gap: gap[gapSize], children: children }));
+}

package/dist/components/ui/Panel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "ink";
+import { semanticColors, padding } from "../../design/index.js";
+export default function Panel({ children, padding: paddingSize = "md", border = true }) {
+    const pad = padding[paddingSize];
+    const borderColor = semanticColors.border.default;
+    if (!border) {
+        return (_jsx(Box, { paddingX: pad, paddingY: pad, children: children }));
+    }
+    return (_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", children: _jsx(Box, { paddingX: pad, paddingY: pad, children: children }) }));
+}

package/dist/components/ui/Spinner.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Text } from "ink";
+import chalk from "chalk";
+import { colors } from "../../design/index.js";
+const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+export default function Spinner({ message = "Loading..." }) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setFrame((prev) => (prev + 1) % spinnerFrames.length);
+        }, 100);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsxs(Text, { children: [chalk.hex(colors.primary)(spinnerFrames[frame]), " ", message] }));
+}

package/dist/design/borders.js

@@ -0,0 +1,51 @@
+export const borderStyle = {
+    none: "none",
+    solid: "solid",
+    double: "double",
+    round: "round",
+    bold: "bold",
+};
+export const borderChars = {
+    horizontal: "─",
+    vertical: "│",
+    topLeft: "┌",
+    topRight: "┐",
+    bottomLeft: "└",
+    bottomRight: "┘",
+    cross: "┼",
+    tLeft: "├",
+    tRight: "┤",
+    tTop: "┬",
+    tBottom: "┴",
+    cornerTopLeft: "╭",
+    cornerTopRight: "╮",
+    cornerBottomLeft: "╰",
+    cornerBottomRight: "╯",
+};
+export const borderRadius = {
+    none: "",
+    sm: " ",
+    md: "  ",
+    lg: "   ",
+};
+export const borderWidth = {
+    none: 0,
+    thin: 1,
+    medium: 2,
+    thick: 3,
+};
+export function createBorder(style = "round", width = "thin") {
+    if (style === "round") {
+        return {
+            top: borderChars.horizontal.repeat(borderWidth[width]),
+            bottom: borderChars.horizontal.repeat(borderWidth[width]),
+            left: borderChars.vertical,
+            right: borderChars.vertical,
+            topLeft: borderChars.topLeft,
+            topRight: borderChars.topRight,
+            bottomLeft: borderChars.bottomLeft,
+            bottomRight: borderChars.bottomRight,
+        };
+    }
+    return createBorder("round", width);
+}

package/dist/design/colors.js

@@ -0,0 +1,45 @@
+export const colors = {
+    primary: "#4c6fff",
+    secondary: "#17d4ff",
+    approve: "#3dd68c",
+    warning: "#facc15",
+    danger: "#ef4444",
+    muted: "#9ca3af",
+    foreground: "#ffffff",
+    background: "#050816",
+    ink: "#050816",
+    surface: "#0b1020",
+};
+export const semanticColors = {
+    text: {
+        primary: colors.foreground,
+        secondary: colors.muted,
+        disabled: colors.muted,
+    },
+    background: {
+        default: colors.background,
+        surface: colors.surface,
+        elevated: colors.surface,
+    },
+    border: {
+        default: colors.muted,
+        focus: colors.primary,
+        error: colors.danger,
+    },
+    status: {
+        pending: colors.warning,
+        analyzing: colors.primary,
+        completed: colors.approve,
+        failed: colors.danger,
+    },
+    interactive: {
+        primary: colors.primary,
+        secondary: colors.secondary,
+        hover: colors.primary,
+        active: colors.primary,
+    },
+};
+export function getColor(path) {
+    const [category, name] = path.split(".");
+    return semanticColors[category][name];
+}

package/dist/design/index.js

@@ -0,0 +1,30 @@
+export * from "./colors.js";
+export * from "./typography.js";
+export * from "./spacing.js";
+export * from "./borders.js";
+import { colors } from "./colors.js";
+import { fontSize, fontWeight, lineHeight, textStyles } from "./typography.js";
+import { spacing, padding, margin, gap } from "./spacing.js";
+import { borderStyle, borderChars, borderRadius, borderWidth, createBorder } from "./borders.js";
+export const designSystem = {
+    colors,
+    typography: {
+        fontSize,
+        fontWeight,
+        lineHeight,
+        textStyles,
+    },
+    spacing: {
+        spacing,
+        padding,
+        margin,
+        gap,
+    },
+    borders: {
+        borderStyle,
+        borderChars,
+        borderRadius,
+        borderWidth,
+        createBorder,
+    },
+};

package/dist/design/spacing.js

@@ -0,0 +1,41 @@
+export const spacing = {
+    0: 0,
+    1: 1,
+    2: 2,
+    3: 3,
+    4: 4,
+    5: 5,
+    6: 6,
+    8: 8,
+    10: 10,
+    12: 12,
+    16: 16,
+    20: 20,
+    24: 24,
+};
+export const padding = {
+    none: spacing[0],
+    xs: spacing[1],
+    sm: spacing[2],
+    md: spacing[4],
+    lg: spacing[6],
+    xl: spacing[8],
+    "2xl": spacing[12],
+};
+export const margin = {
+    none: spacing[0],
+    xs: spacing[1],
+    sm: spacing[2],
+    md: spacing[4],
+    lg: spacing[6],
+    xl: spacing[8],
+    "2xl": spacing[12],
+};
+export const gap = {
+    none: spacing[0],
+    xs: spacing[1],
+    sm: spacing[2],
+    md: spacing[4],
+    lg: spacing[6],
+    xl: spacing[8],
+};

package/dist/design/typography.js

@@ -0,0 +1,62 @@
+export const fontSize = {
+    xs: 0.75,
+    sm: 0.875,
+    base: 1,
+    lg: 1.125,
+    xl: 1.25,
+    "2xl": 1.5,
+    "3xl": 1.875,
+    "4xl": 2.25,
+};
+export const fontWeight = {
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+};
+export const lineHeight = {
+    none: 1,
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2,
+};
+export const textStyles = {
+    title: {
+        fontSize: fontSize["3xl"],
+        fontWeight: fontWeight.extrabold,
+        lineHeight: lineHeight.tight,
+    },
+    heading: {
+        fontSize: fontSize["2xl"],
+        fontWeight: fontWeight.bold,
+        lineHeight: lineHeight.tight,
+    },
+    subheading: {
+        fontSize: fontSize.xl,
+        fontWeight: fontWeight.semibold,
+        lineHeight: lineHeight.snug,
+    },
+    body: {
+        fontSize: fontSize.base,
+        fontWeight: fontWeight.normal,
+        lineHeight: lineHeight.normal,
+    },
+    bodySmall: {
+        fontSize: fontSize.sm,
+        fontWeight: fontWeight.normal,
+        lineHeight: lineHeight.normal,
+    },
+    label: {
+        fontSize: fontSize.sm,
+        fontWeight: fontWeight.medium,
+        lineHeight: lineHeight.normal,
+    },
+    caption: {
+        fontSize: fontSize.xs,
+        fontWeight: fontWeight.normal,
+        lineHeight: lineHeight.normal,
+    },
+};

package/dist/index.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "ink";
+import App from "./App.js";
+import dotenv from "dotenv";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+dotenv.config({ path: join(__dirname, "../.env") });
+dotenv.config({ path: join(__dirname, "../.env.local") });
+process.stdin.on("error", (err) => {
+    if (err.code !== "EIO") {
+        console.error("stdin error:", err);
+    }
+});
+process.on("SIGINT", () => {
+    process.exit(0);
+});
+process.on("SIGTERM", () => {
+    process.exit(0);
+});
+process.on("uncaughtException", (err) => {
+    if (err.code === "EIO") {
+        process.exit(0);
+    }
+    else {
+        console.error("Uncaught exception:", err);
+        process.exit(1);
+    }
+});
+process.on("unhandledRejection", (reason, promise) => {
+    console.error("Unhandled rejection at:", promise, "reason:", reason);
+    process.exit(1);
+});
+process.stdout.write("\x1b[2J\x1b[H");
+const { waitUntilExit } = render(_jsx(App, {}));
+waitUntilExit().catch((err) => {
+    if (err.code !== "EIO") {
+        console.error("Error waiting for exit:", err);
+    }
+    process.exit(0);
+});