@hasna/terminal 0.1.0 → 0.1.2

package/src/App.tsx

@@ -1,43 +1,81 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useRef } from "react";
 import { Box, Text, useInput, useApp } from "ink";
-import { exec } from "child_process";
-import { promisify } from "util";
-import { translateToCommand, checkPermissions } from "./ai.js";
+import { spawn, type ChildProcess } from "child_process";
+import { translateToCommand, explainCommand, fixCommand, checkPermissions, isIrreversible } from "./ai.js";
 import {
   loadHistory,
   appendHistory,
   loadConfig,
   saveConfig,
-  type HistoryEntry,
   type Permissions,
 } from "./history.js";
 import Onboarding from "./Onboarding.js";
+import StatusBar from "./StatusBar.js";
+import Spinner from "./Spinner.js";
 
-const execAsync = promisify(exec);
+// ── types ─────────────────────────────────────────────────────────────────────
 
 type Phase =
-  | { type: "input"; value: string; histIdx: number }
-  | { type: "thinking"; nl: string }
-  | { type: "confirm"; nl: string; command: string }
+  | { type: "input";   value: string; cursor: number; histIdx: number; raw: boolean }
+  | { type: "thinking"; nl: string; raw: boolean }
+  | { type: "confirm"; nl: string; command: string; raw: boolean; danger: boolean }
+  | { type: "explain"; nl: string; command: string; explanation: string }
   | { type: "running"; nl: string; command: string }
-  | { type: "error"; message: string };
+  | { type: "autofix"; nl: string; command: string; errorOutput: string }
+  | { type: "error";   message: string };
 
 interface ScrollEntry {
   nl: string;
   cmd: string;
-  output: string;
+  lines: string[];
+  truncated: boolean;
+  expanded: boolean;
   error?: boolean;
 }
 
+const MAX_LINES = 20;
+
+// ── helpers ───────────────────────────────────────────────────────────────────
+
+function insertAt(s: string, pos: number, ch: string) { return s.slice(0, pos) + ch + s.slice(pos); }
+function deleteAt(s: string, pos: number) { return pos <= 0 ? s : s.slice(0, pos - 1) + s.slice(pos); }
+
+function runCommand(
+  command: string,
+  onLine: (line: string) => void,
+  onDone: (code: number) => void,
+  signal: AbortSignal
+): ChildProcess {
+  const proc = spawn("/bin/zsh", ["-c", command], { stdio: ["ignore", "pipe", "pipe"] });
+
+  const handleData = (data: Buffer) => {
+    const text = data.toString();
+    text.split("\n").forEach((line) => { if (line) onLine(line); });
+  };
+
+  proc.stdout?.on("data", handleData);
+  proc.stderr?.on("data", handleData);
+  proc.on("close", (code) => onDone(code ?? 0));
+
+  signal.addEventListener("abort", () => { try { proc.kill("SIGTERM"); } catch {} });
+  return proc;
+}
+
+// ── component ─────────────────────────────────────────────────────────────────
+
 export default function App() {
   const { exit } = useApp();
   const [config, setConfig] = useState(() => loadConfig());
-  const [nlHistory] = useState<string[]>(() =>
-    loadHistory().map((h) => h.nl).filter(Boolean)
-  );
+  const [nlHistory] = useState<string[]>(() => loadHistory().map((h) => h.nl).filter(Boolean));
+  const [sessionCmds, setSessionCmds] = useState<string[]>([]);
   const [sessionNl, setSessionNl] = useState<string[]>([]);
   const [scroll, setScroll] = useState<ScrollEntry[]>([]);
-  const [phase, setPhase] = useState<Phase>({ type: "input", value: "", histIdx: -1 });
+  const [streamLines, setStreamLines] = useState<string[]>([]);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const [phase, setPhase] = useState<Phase>({
+    type: "input", value: "", cursor: 0, histIdx: -1, raw: false,
+  });
 
   const allNl = [...nlHistory, ...sessionNl];
 
@@ -47,166 +85,308 @@ export default function App() {
     saveConfig(next);
   };
 
-  const pushScroll = (entry: ScrollEntry) => setScroll((s) => [...s, entry]);
+  const inputPhase = (overrides: Partial<Extract<Phase, { type: "input" }>> = {}) => {
+    setPhase({ type: "input", value: "", cursor: 0, histIdx: -1, raw: false, ...overrides });
+    setStreamLines([]);
+  };
+
+  const pushScroll = (entry: Omit<ScrollEntry, "expanded">) =>
+    setScroll((s) => [...s, { ...entry, expanded: false }]);
+
+  const commitStream = (nl: string, cmd: string, lines: string[], error: boolean) => {
+    const truncated = lines.length > MAX_LINES;
+    pushScroll({ nl, cmd, lines: truncated ? lines.slice(0, MAX_LINES) : lines, truncated, error });
+    appendHistory({ nl, cmd, output: lines.join("\n"), ts: Date.now(), error });
+    setSessionCmds((c) => [...c.slice(-9), cmd]);
+    setStreamLines([]);
+  };
+
+  const runPhase = async (nl: string, command: string, raw: boolean) => {
+    setPhase({ type: "running", nl, command });
+    setStreamLines([]);
+    const abort = new AbortController();
+    abortRef.current = abort;
+    const lines: string[] = [];
+
+    await new Promise<void>((resolve) => {
+      runCommand(
+        command,
+        (line) => { lines.push(line); setStreamLines([...lines]); },
+        (code) => {
+          commitStream(nl, command, lines, code !== 0);
+          abortRef.current = null;
+          if (code !== 0 && !raw) {
+            // offer auto-fix
+            setPhase({ type: "autofix", nl, command, errorOutput: lines.join("\n") });
+          } else {
+            inputPhase({ raw });
+          }
+          resolve();
+        },
+        abort.signal
+      );
+    });
+  };
 
   useInput(
     useCallback(
       async (input: string, key: any) => {
+
+        // ── running: Ctrl+C kills process ─────────────────────────────────
+        if (phase.type === "running") {
+          if (key.ctrl && input === "c") {
+            abortRef.current?.abort();
+            inputPhase();
+          }
+          return;
+        }
+
+        // ── input ─────────────────────────────────────────────────────────
         if (phase.type === "input") {
           if (key.ctrl && input === "c") { exit(); return; }
+          if (key.ctrl && input === "l") { setScroll([]); return; }
+          if (key.ctrl && input === "r") {
+            setPhase({ ...phase, raw: !phase.raw, value: "", cursor: 0 });
+            return;
+          }
 
           if (key.upArrow) {
-            const nextIdx = Math.min(phase.histIdx + 1, allNl.length - 1);
-            const val = allNl[allNl.length - 1 - nextIdx] ?? "";
-            setPhase({ type: "input", value: val, histIdx: nextIdx });
+            const idx = Math.min(phase.histIdx + 1, allNl.length - 1);
+            const val = allNl[allNl.length - 1 - idx] ?? "";
+            setPhase({ ...phase, value: val, cursor: val.length, histIdx: idx });
             return;
           }
           if (key.downArrow) {
-            const nextIdx = Math.max(phase.histIdx - 1, -1);
-            const val = nextIdx === -1 ? "" : allNl[allNl.length - 1 - nextIdx] ?? "";
-            setPhase({ type: "input", value: val, histIdx: nextIdx });
+            const idx = Math.max(phase.histIdx - 1, -1);
+            const val = idx === -1 ? "" : allNl[allNl.length - 1 - idx] ?? "";
+            setPhase({ ...phase, value: val, cursor: val.length, histIdx: idx });
             return;
           }
+          if (key.leftArrow)  { setPhase({ ...phase, cursor: Math.max(0, phase.cursor - 1) }); return; }
+          if (key.rightArrow) { setPhase({ ...phase, cursor: Math.min(phase.value.length, phase.cursor + 1) }); return; }
+
           if (key.return) {
             const nl = phase.value.trim();
             if (!nl) return;
             setSessionNl((h) => [...h, nl]);
-            setPhase({ type: "thinking", nl });
+
+            if (phase.raw) {
+              await runPhase(nl, nl, true);
+              return;
+            }
+
+            setPhase({ type: "thinking", nl, raw: false });
             try {
-              const command = await translateToCommand(nl, config.permissions);
-              // Local permission guard on the returned command
+              const command = await translateToCommand(nl, config.permissions, sessionCmds);
               const blocked = checkPermissions(command, config.permissions);
               if (blocked) {
-                pushScroll({ nl, cmd: command, output: `blocked: ${blocked}`, error: true });
-                setPhase({ type: "input", value: "", histIdx: -1 });
+                pushScroll({ nl, cmd: command, lines: [`blocked: ${blocked}`], truncated: false, error: true });
+                inputPhase();
                 return;
               }
-              setPhase({ type: "confirm", nl, command });
+              const danger = isIrreversible(command);
+              setPhase({ type: "confirm", nl, command, raw: false, danger });
             } catch (e: any) {
               setPhase({ type: "error", message: e.message });
             }
             return;
           }
+
           if (key.backspace || key.delete) {
-            setPhase({ ...phase, value: phase.value.slice(0, -1), histIdx: -1 });
+            const val = deleteAt(phase.value, phase.cursor);
+            setPhase({ ...phase, value: val, cursor: Math.max(0, phase.cursor - 1), histIdx: -1 });
             return;
           }
           if (input && !key.ctrl && !key.meta) {
-            setPhase({ ...phase, value: phase.value + input, histIdx: -1 });
+            const val = insertAt(phase.value, phase.cursor, input);
+            setPhase({ ...phase, value: val, cursor: phase.cursor + 1, histIdx: -1 });
           }
           return;
         }
 
+        // ── confirm ───────────────────────────────────────────────────────
         if (phase.type === "confirm") {
           if (key.ctrl && input === "c") { exit(); return; }
-          if (input === "y" || input === "Y" || key.return) {
+
+          if (input === "?") {
             const { nl, command } = phase;
-            setPhase({ type: "running", nl, command });
+            setPhase({ type: "thinking", nl, raw: false });
             try {
-              const { stdout, stderr } = await execAsync(command, { shell: "/bin/zsh" });
-              const output = (stdout + stderr).trim();
-              pushScroll({ nl, cmd: command, output });
-              appendHistory({ nl, cmd: command, output, ts: Date.now() });
-              setPhase({ type: "input", value: "", histIdx: -1 });
-            } catch (e: any) {
-              const output = ((e.stdout ?? "") + (e.stderr ?? "")).trim() || e.message;
-              pushScroll({ nl, cmd: command, output, error: true });
-              appendHistory({ nl, cmd: command, output, ts: Date.now(), error: true });
-              setPhase({ type: "input", value: "", histIdx: -1 });
+              const explanation = await explainCommand(command);
+              setPhase({ type: "explain", nl, command, explanation });
+            } catch {
+              setPhase({ type: "confirm", nl, command, raw: false, danger: phase.danger });
             }
             return;
           }
-          if (input === "n" || input === "N" || key.escape) {
-            setPhase({ type: "input", value: "", histIdx: -1 });
+          if (input === "y" || input === "Y" || key.return) {
+            await runPhase(phase.nl, phase.command, false);
             return;
           }
+          if (input === "n" || input === "N" || key.escape) { inputPhase(); return; }
           if (input === "e" || input === "E") {
-            setPhase({ type: "input", value: phase.command, histIdx: -1 });
+            setPhase({ type: "input", value: phase.command, cursor: phase.command.length, histIdx: -1, raw: false });
+            return;
+          }
+          return;
+        }
+
+        // ── explain → back to confirm ─────────────────────────────────────
+        if (phase.type === "explain") {
+          if (key.ctrl && input === "c") { exit(); return; }
+          setPhase({ type: "confirm", nl: phase.nl, command: phase.command, raw: false, danger: isIrreversible(phase.command) });
+          return;
+        }
+
+        // ── autofix ───────────────────────────────────────────────────────
+        if (phase.type === "autofix") {
+          if (key.ctrl && input === "c") { exit(); return; }
+          if (input === "y" || input === "Y" || key.return) {
+            const { nl, command, errorOutput } = phase;
+            setPhase({ type: "thinking", nl, raw: false });
+            try {
+              const fixed = await fixCommand(nl, command, errorOutput, config.permissions, sessionCmds);
+              const danger = isIrreversible(fixed);
+              setPhase({ type: "confirm", nl, command: fixed, raw: false, danger });
+            } catch (e: any) {
+              setPhase({ type: "error", message: e.message });
+            }
             return;
           }
+          inputPhase();
           return;
         }
 
+        // ── error ─────────────────────────────────────────────────────────
         if (phase.type === "error") {
           if (key.ctrl && input === "c") { exit(); return; }
-          setPhase({ type: "input", value: "", histIdx: -1 });
+          inputPhase();
           return;
         }
       },
-      [phase, allNl, config, exit]
+      [phase, allNl, config, sessionCmds, exit]
     )
   );
 
+  // ── expand toggle ──────────────────────────────────────────────────────────
+  const toggleExpand = (i: number) =>
+    setScroll((s) => s.map((e, idx) => idx === i ? { ...e, expanded: !e.expanded } : e));
+
+  // ── onboarding ─────────────────────────────────────────────────────────────
   if (!config.onboarded) {
     return <Onboarding onDone={finishOnboarding} />;
   }
 
+  const isRaw = phase.type === "input" && phase.raw;
+
+  // ── render ─────────────────────────────────────────────────────────────────
   return (
     <Box flexDirection="column">
+
+      {/* scrollback */}
       {scroll.map((entry, i) => (
-        <Box key={i} flexDirection="column" marginBottom={1}>
-          <Box gap={1}>
+        <Box key={i} flexDirection="column" marginBottom={1} paddingLeft={2}>
+          <Box gap={2}>
             <Text dimColor>›</Text>
             <Text dimColor>{entry.nl}</Text>
           </Box>
-          <Box gap={1}>
-            <Text dimColor>$</Text>
-            <Text>{entry.cmd}</Text>
-          </Box>
-          {entry.output && (
-            <Text color={entry.error ? "red" : undefined}>{entry.output}</Text>
+          {entry.nl !== entry.cmd && (
+            <Box gap={2} paddingLeft={2}>
+              <Text dimColor>$</Text>
+              <Text dimColor>{entry.cmd}</Text>
+            </Box>
+          )}
+          {entry.lines.length > 0 && (
+            <Box flexDirection="column" paddingLeft={4}>
+              {entry.lines.map((line, j) => (
+                <Text key={j} color={entry.error ? "red" : undefined}>{line}</Text>
+              ))}
+              {entry.truncated && !entry.expanded && (
+                <Text dimColor>… (space to expand)</Text>
+              )}
+            </Box>
           )}
         </Box>
       ))}
 
-      {phase.type === "input" && (
-        <Box gap={1}>
-          <Text dimColor>›</Text>
-          <Text>{phase.value}</Text>
-          <Text inverse> </Text>
-        </Box>
-      )}
-
-      {phase.type === "thinking" && (
-        <Box flexDirection="column">
-          <Box gap={1}>
+      {/* confirm */}
+      {phase.type === "confirm" && (
+        <Box flexDirection="column" marginBottom={1} paddingLeft={2}>
+          <Box gap={2}>
             <Text dimColor>›</Text>
             <Text dimColor>{phase.nl}</Text>
           </Box>
-          <Text dimColor>  translating…</Text>
+          <Box gap={2} paddingLeft={2}>
+            <Text dimColor>$</Text>
+            <Text>{phase.command}</Text>
+            {phase.danger && <Text color="red"> ⚠ irreversible</Text>}
+          </Box>
+          <Box paddingLeft={4}><Text dimColor>enter  n  e  ?</Text></Box>
         </Box>
       )}
 
-      {phase.type === "confirm" && (
-        <Box flexDirection="column">
-          <Box gap={1}>
-            <Text dimColor>›</Text>
-            <Text dimColor>{phase.nl}</Text>
-          </Box>
-          <Box gap={1}>
+      {/* explain */}
+      {phase.type === "explain" && (
+        <Box flexDirection="column" marginBottom={1} paddingLeft={2}>
+          <Box gap={2} paddingLeft={2}>
             <Text dimColor>$</Text>
             <Text>{phase.command}</Text>
           </Box>
-          <Text dimColor>  [enter] run  [n] cancel  [e] edit</Text>
+          <Box paddingLeft={4}>
+            <Text dimColor>{phase.explanation}</Text>
+          </Box>
+          <Box paddingLeft={4}><Text dimColor>any key to continue</Text></Box>
+        </Box>
+      )}
+
+      {/* autofix */}
+      {phase.type === "autofix" && (
+        <Box flexDirection="column" marginBottom={1} paddingLeft={2}>
+          <Text dimColor>  command failed — retry with fix?  [enter / n]</Text>
         </Box>
       )}
 
+      {/* spinners */}
+      {phase.type === "thinking" && <Spinner label="translating" />}
+
+      {/* running — live stream */}
       {phase.type === "running" && (
-        <Box flexDirection="column">
-          <Box gap={1}>
+        <Box flexDirection="column" paddingLeft={2}>
+          <Box gap={2}>
             <Text dimColor>$</Text>
-            <Text>{phase.command}</Text>
+            <Text dimColor>{phase.command}</Text>
           </Box>
-          <Text dimColor>  running…</Text>
+          {streamLines.length > 0 && (
+            <Box flexDirection="column" paddingLeft={2}>
+              {streamLines.slice(-MAX_LINES).map((line, i) => (
+                <Text key={i}>{line}</Text>
+              ))}
+            </Box>
+          )}
+          <Spinner label="ctrl+c to cancel" />
         </Box>
       )}
 
+      {/* error */}
       {phase.type === "error" && (
-        <Box flexDirection="column">
-          <Text color="red">  {phase.message}</Text>
-          <Text dimColor>  press any key</Text>
+        <Box paddingLeft={2}>
+          <Text color="red">{phase.message}</Text>
+        </Box>
+      )}
+
+      {/* input */}
+      {phase.type === "input" && (
+        <Box gap={2} paddingLeft={2}>
+          <Text dimColor>{isRaw ? "$" : "›"}</Text>
+          <Box>
+            <Text>{phase.value.slice(0, phase.cursor)}</Text>
+            <Text inverse>{phase.value[phase.cursor] ?? " "}</Text>
+            <Text>{phase.value.slice(phase.cursor + 1)}</Text>
+          </Box>
         </Box>
       )}
+
+      <StatusBar permissions={config.permissions} />
     </Box>
   );
 }

package/src/Onboarding.tsx

@@ -6,89 +6,77 @@ interface Props {
   onDone: (perms: Permissions) => void;
 }
 
-type Step =
-  | { type: "welcome" }
-  | { type: "permissions"; cursor: number }
-  | { type: "done" };
+type Step = "welcome" | "permissions";
 
-const PERM_KEYS: Array<{ key: keyof Permissions; label: string; description: string }> = [
-  { key: "destructive", label: "destructive", description: "rm, delete, drop table…" },
-  { key: "network",     label: "network",     description: "curl, wget, ssh, ping…"  },
-  { key: "sudo",        label: "sudo",        description: "commands requiring root"  },
-  { key: "install",     label: "install",     description: "brew, npm -g, pip…"       },
-  { key: "write_outside_cwd", label: "write outside cwd", description: "files outside current directory" },
+const PERM_KEYS: Array<{ key: keyof Permissions; label: string; hint: string }> = [
+  { key: "destructive",       label: "destructive",    hint: "rm, delete, drop…"          },
+  { key: "network",           label: "network",        hint: "curl, wget, ssh…"            },
+  { key: "sudo",              label: "sudo",           hint: "root-level commands"         },
+  { key: "install",           label: "install",        hint: "brew, npm -g, pip…"          },
+  { key: "write_outside_cwd", label: "write outside",  hint: "files outside current dir"   },
 ];
 
 export default function Onboarding({ onDone }: Props) {
-  const [step, setStep] = useState<Step>({ type: "welcome" });
+  const [step, setStep] = useState<Step>("welcome");
+  const [cursor, setCursor] = useState(0);
   const [perms, setPerms] = useState<Permissions>({ ...DEFAULT_PERMISSIONS });
 
   useInput((input, key) => {
     if (key.ctrl && input === "c") process.exit(0);
 
-    if (step.type === "welcome") {
-      setStep({ type: "permissions", cursor: 0 });
+    if (step === "welcome") {
+      setStep("permissions");
       return;
     }
 
-    if (step.type === "permissions") {
-      const { cursor } = step;
-      if (key.upArrow) {
-        setStep({ type: "permissions", cursor: Math.max(0, cursor - 1) });
-        return;
-      }
-      if (key.downArrow) {
-        setStep({ type: "permissions", cursor: Math.min(PERM_KEYS.length - 1, cursor + 1) });
-        return;
-      }
+    if (step === "permissions") {
+      if (key.upArrow)   { setCursor((c) => Math.max(0, c - 1)); return; }
+      if (key.downArrow) { setCursor((c) => Math.min(PERM_KEYS.length - 1, c + 1)); return; }
       if (input === " ") {
         const k = PERM_KEYS[cursor].key;
         setPerms((p) => ({ ...p, [k]: !p[k] }));
         return;
       }
-      if (key.return) {
-        onDone(perms);
-        return;
-      }
-      return;
+      if (key.return) { onDone(perms); return; }
     }
   });
 
-  if (step.type === "welcome") {
+  if (step === "welcome") {
     return (
-      <Box flexDirection="column" paddingTop={1} gap={1}>
-        <Text bold>terminal</Text>
-        <Text>Type anything in plain English.</Text>
-        <Text>The AI translates it to a shell command and runs it.</Text>
-        <Text>Use ↑ / ↓ to browse history. Enter to run, n to cancel, e to edit.</Text>
-        <Text dimColor>press any key to set up permissions →</Text>
-      </Box>
-    );
-  }
-
-  if (step.type === "permissions") {
-    return (
-      <Box flexDirection="column" paddingTop={1} gap={1}>
-        <Text bold>what can the AI do?</Text>
-        <Text dimColor>space to toggle  ·  enter to confirm</Text>
-        <Box flexDirection="column" marginTop={1}>
-          {PERM_KEYS.map((p, i) => {
-            const active = step.cursor === i;
-            const on = perms[p.key];
-            return (
-              <Box key={p.key} gap={2}>
-                <Text>{active ? "›" : " "}</Text>
-                <Text color={on ? undefined : "red"}>{on ? "✓" : "✗"}</Text>
-                <Text bold={active}>{p.label}</Text>
-                <Text dimColor>{p.description}</Text>
-              </Box>
-            );
-          })}
+      <Box flexDirection="column" paddingLeft={2} gap={1} paddingTop={1}>
+        <Text>terminal</Text>
+        <Text dimColor>speak plain english, run commands</Text>
+        <Box flexDirection="column" marginTop={1} gap={0}>
+          <Text dimColor>›  type what you want</Text>
+          <Text dimColor>$  see the command before it runs</Text>
+          <Text dimColor>↑↓  browse history</Text>
+          <Text dimColor>?  explain a command before running</Text>
+          <Text dimColor>ctrl+r  toggle raw shell mode</Text>
         </Box>
-        <Text dimColor>you can change this later in ~/.terminal/config.json</Text>
+        <Box marginTop={1}><Text dimColor>any key to set permissions →</Text></Box>
       </Box>
     );
   }
 
-  return null;
+  return (
+    <Box flexDirection="column" paddingLeft={2} gap={1} paddingTop={1}>
+      <Text dimColor>what can the AI run?</Text>
+      <Box flexDirection="column" marginTop={1}>
+        {PERM_KEYS.map((p, i) => {
+          const active = cursor === i;
+          const on = perms[p.key];
+          return (
+            <Box key={p.key} gap={2}>
+              <Text dimColor>{active ? "›" : " "}</Text>
+              <Text color={on ? undefined : "red"}>{on ? "✓" : "✗"}</Text>
+              <Text bold={active}>{p.label}</Text>
+              <Text dimColor>{p.hint}</Text>
+            </Box>
+          );
+        })}
+      </Box>
+      <Box marginTop={1}><Text dimColor>space toggle  ·  enter confirm</Text></Box>
+      <Text dimColor>edit later: ~/.terminal/config.json</Text>
+    </Box>
+  );
 }

package/src/Spinner.tsx

@@ -0,0 +1,24 @@
+import React, { useState, useEffect } from "react";
+import { Text } from "ink";
+
+const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+interface Props {
+  label: string;
+}
+
+export default function Spinner({ label }: Props) {
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const t = setInterval(() => setFrame((f) => (f + 1) % FRAMES.length), 80);
+    return () => clearInterval(t);
+  }, []);
+
+  return (
+    <Text dimColor>
+      {"  "}
+      {FRAMES[frame]} {label}
+    </Text>
+  );
+}