feat(ipuaro): add TUI components and hooks (v0.11.0)

2025-12-28 07:16:53 +05:00 · 2025-12-01 13:00:14 +05:00
parent 259ecc181a
commit fd1e6ad86e
20 changed files with 1722 additions and 2 deletions
--- a/packages/ipuaro/src/tui/components/StatusBar.tsx
+++ b/packages/ipuaro/src/tui/components/StatusBar.tsx
@@ -0,0 +1,81 @@
+/**
+ * StatusBar component for TUI.
+ * Displays: [ipuaro] [ctx: 12%] [project: myapp] [main] [47m] status
+ */
+
+import { Box, Text } from "ink"
+import type React from "react"
+import type { BranchInfo, TuiStatus } from "../types.js"
+
+export interface StatusBarProps {
+    contextUsage: number
+    projectName: string
+    branch: BranchInfo
+    sessionTime: string
+    status: TuiStatus
+}
+
+function getStatusIndicator(status: TuiStatus): { text: string; color: string } {
+    switch (status) {
+        case "ready": {
+            return { text: "ready", color: "green" }
+        }
+        case "thinking": {
+            return { text: "thinking...", color: "yellow" }
+        }
+        case "tool_call": {
+            return { text: "executing...", color: "cyan" }
+        }
+        case "awaiting_confirmation": {
+            return { text: "confirm?", color: "magenta" }
+        }
+        case "error": {
+            return { text: "error", color: "red" }
+        }
+        default: {
+            return { text: "ready", color: "green" }
+        }
+    }
+}
+
+function formatContextUsage(usage: number): string {
+    return `${String(Math.round(usage * 100))}%`
+}
+
+export function StatusBar({
+    contextUsage,
+    projectName,
+    branch,
+    sessionTime,
+    status,
+}: StatusBarProps): React.JSX.Element {
+    const statusIndicator = getStatusIndicator(status)
+    const branchDisplay = branch.isDetached ? `HEAD@${branch.name.slice(0, 7)}` : branch.name
+
+    return (
+        <Box borderStyle="single" borderColor="gray" paddingX={1} justifyContent="space-between">
+            <Box gap={1}>
+                <Text color="cyan" bold>
+                    [ipuaro]
+                </Text>
+                <Text color="gray">
+                    [ctx:{" "}
+                    <Text color={contextUsage > 0.8 ? "red" : "white"}>
+                        {formatContextUsage(contextUsage)}
+                    </Text>
+                    ]
+                </Text>
+                <Text color="gray">
+                    [<Text color="blue">{projectName}</Text>]
+                </Text>
+                <Text color="gray">
+                    [<Text color="green">{branchDisplay}</Text>]
+                </Text>
+                <Text color="gray">
+                    [<Text color="white">{sessionTime}</Text>]
+                </Text>
+            </Box>
+            <Text color={statusIndicator.color}>{statusIndicator.text}</Text>
+        </Box>
+    )
+}