pixelmuse 0.2.0

package/dist/tui.js

@@ -0,0 +1,1274 @@
+#!/usr/bin/env node
+import {
+  PixelmuseClient,
+  deleteApiKey,
+  deleteTemplate,
+  extractVariables,
+  getApiKey,
+  getTemplate,
+  isValidKeyFormat,
+  listTemplates,
+  pollGeneration,
+  saveApiKey,
+  saveTemplate
+} from "./chunk-ZVJQFWUI.js";
+import {
+  autoSave,
+  hasChafa,
+  imageToBuffer,
+  renderImageDirect
+} from "./chunk-MZZY4JXW.js";
+import {
+  readSettings,
+  writeSettings
+} from "./chunk-7ARYEFAH.js";
+
+// src/tui.tsx
+import { render } from "ink";
+
+// src/app.tsx
+import { useEffect as useEffect9 } from "react";
+import { Box as Box17, useApp as useApp2, useInput as useInput9 } from "ink";
+
+// src/hooks/useRouter.ts
+import { useReducer, useCallback } from "react";
+function reducer(state, action) {
+  switch (action.type) {
+    case "navigate":
+      return { current: action.route, history: [...state.history, state.current] };
+    case "back": {
+      if (state.history.length === 0) return state;
+      const prev = state.history.at(-1);
+      if (!prev) return state;
+      return { current: prev, history: state.history.slice(0, -1) };
+    }
+    case "replace":
+      return { ...state, current: action.route };
+  }
+}
+function useRouter(initial = { screen: "home" }) {
+  const [state, dispatch] = useReducer(reducer, { current: initial, history: [] });
+  const navigate = useCallback((route) => dispatch({ type: "navigate", route }), []);
+  const back = useCallback(() => dispatch({ type: "back" }), []);
+  const replace = useCallback((route) => dispatch({ type: "replace", route }), []);
+  return { route: state.current, navigate, back, replace, canGoBack: state.history.length > 0 };
+}
+
+// src/hooks/useAuth.ts
+import { useState, useEffect, useCallback as useCallback2 } from "react";
+function useAuth() {
+  const [state, setState] = useState({
+    apiKey: null,
+    account: null,
+    isAuthenticated: false,
+    isLoading: true,
+    error: null
+  });
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const key = await getApiKey();
+      if (cancelled) return;
+      if (key) {
+        setState((s) => ({ ...s, apiKey: key, isAuthenticated: true, isLoading: false }));
+        try {
+          const client = new PixelmuseClient(key);
+          const account = await client.getAccount();
+          if (!cancelled) setState((s) => ({ ...s, account }));
+        } catch {
+        }
+      } else {
+        setState((s) => ({ ...s, isLoading: false }));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const login = useCallback2(async (key) => {
+    if (!isValidKeyFormat(key)) {
+      return { success: false, error: "Invalid key format. Keys start with pm_live_ or pm_test_" };
+    }
+    setState((s) => ({ ...s, isLoading: true, error: null }));
+    try {
+      const client = new PixelmuseClient(key);
+      const account = await client.getAccount();
+      await saveApiKey(key);
+      setState({ apiKey: key, account, isAuthenticated: true, isLoading: false, error: null });
+      return { success: true };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Login failed";
+      setState((s) => ({ ...s, isLoading: false, error: msg }));
+      return { success: false, error: msg };
+    }
+  }, []);
+  const logout = useCallback2(async () => {
+    await deleteApiKey();
+    setState({ apiKey: null, account: null, isAuthenticated: false, isLoading: false, error: null });
+  }, []);
+  const refreshAccount = useCallback2(async () => {
+    if (!state.apiKey) return;
+    try {
+      const client = new PixelmuseClient(state.apiKey);
+      const account = await client.getAccount();
+      setState((s) => ({ ...s, account }));
+    } catch {
+    }
+  }, [state.apiKey]);
+  return { ...state, login, logout, refreshAccount };
+}
+
+// src/hooks/useApi.ts
+import { useMemo } from "react";
+function useApi(apiKey) {
+  return useMemo(() => apiKey ? new PixelmuseClient(apiKey) : null, [apiKey]);
+}
+
+// src/hooks/useConfig.ts
+import { useState as useState2, useCallback as useCallback3 } from "react";
+function useConfig() {
+  const [settings, setSettings] = useState2(() => readSettings());
+  const updateSettings = useCallback3((updates) => {
+    const next = { ...settings, ...updates };
+    writeSettings(next);
+    setSettings(next);
+  }, [settings]);
+  return { settings, updateSettings };
+}
+
+// src/app.tsx
+import { Spinner as Spinner9 } from "@inkjs/ui";
+
+// src/components/Header.tsx
+import { Box, Text } from "ink";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SCREEN_LABELS = {
+  home: "Home",
+  login: "Login",
+  generate: "Generate",
+  gallery: "Gallery",
+  "gallery-detail": "Image Detail",
+  models: "Models",
+  prompts: "Prompts",
+  "prompt-editor": "Prompt Editor",
+  account: "Account",
+  "buy-credits": "Buy Credits"
+};
+function Header({ route }) {
+  const label = SCREEN_LABELS[route.screen] ?? route.screen;
+  return /* @__PURE__ */ jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, marginBottom: 1, children: [
+    /* @__PURE__ */ jsx(Text, { bold: true, color: "magenta", children: "pixelmuse" }),
+    /* @__PURE__ */ jsx(Text, { color: "gray", children: " / " }),
+    /* @__PURE__ */ jsx(Text, { color: "white", children: label })
+  ] });
+}
+
+// src/components/StatusBar.tsx
+import { Box as Box2, Text as Text2 } from "ink";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function StatusBar({ account, hints }) {
+  return /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, paddingX: 1, borderStyle: "single", borderColor: "gray", children: [
+    account && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2(Text2, { color: "green", children: [
+        "credits: ",
+        account.credits.total
+      ] }),
+      /* @__PURE__ */ jsx2(Text2, { color: "gray", children: " | " }),
+      /* @__PURE__ */ jsxs2(Text2, { color: "cyan", children: [
+        "plan: ",
+        account.plan
+      ] }),
+      /* @__PURE__ */ jsx2(Text2, { color: "gray", children: " | " })
+    ] }),
+    /* @__PURE__ */ jsx2(Text2, { color: "gray", children: hints ?? "q quit | esc back" })
+  ] });
+}
+
+// src/screens/Home.tsx
+import { Box as Box3, Text as Text3 } from "ink";
+import { Select } from "@inkjs/ui";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Home({ account, navigate, onLogout }) {
+  const items = [
+    { label: "Generate Image", value: "generate" },
+    { label: "Gallery", value: "gallery" },
+    { label: "Prompt Templates", value: "prompts" },
+    { label: "Models", value: "models" },
+    { label: "Account & Credits", value: "account" },
+    { label: "Logout", value: "logout" }
+  ];
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", gap: 1, children: [
+    account && /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs3(Text3, { children: [
+        "Welcome, ",
+        /* @__PURE__ */ jsx3(Text3, { bold: true, children: account.email })
+      ] }),
+      /* @__PURE__ */ jsxs3(Text3, { color: "green", children: [
+        account.credits.total,
+        " credits available"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      Select,
+      {
+        options: items,
+        onChange: (value) => {
+          switch (value) {
+            case "generate":
+              navigate({ screen: "generate" });
+              break;
+            case "gallery":
+              navigate({ screen: "gallery" });
+              break;
+            case "prompts":
+              navigate({ screen: "prompts" });
+              break;
+            case "models":
+              navigate({ screen: "models" });
+              break;
+            case "account":
+              navigate({ screen: "account" });
+              break;
+            case "logout":
+              onLogout();
+              break;
+          }
+        }
+      }
+    )
+  ] });
+}
+
+// src/screens/Login.tsx
+import { useState as useState3 } from "react";
+import { Box as Box4, Text as Text4 } from "ink";
+import { TextInput, Spinner, StatusMessage } from "@inkjs/ui";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Login({ onLogin, onSuccess }) {
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const handleSubmit = async (value) => {
+    const key = value.trim();
+    if (!key) return;
+    setLoading(true);
+    setError(null);
+    const result = await onLogin(key);
+    setLoading(false);
+    if (result.success) {
+      onSuccess();
+    } else {
+      setError(result.error ?? "Login failed");
+    }
+  };
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx4(Text4, { bold: true, children: "Enter your Pixelmuse API key" }),
+    /* @__PURE__ */ jsxs4(Text4, { color: "gray", children: [
+      "Get your key at",
+      " ",
+      /* @__PURE__ */ jsx4(Text4, { color: "cyan", underline: true, children: "pixelmuse.studio/settings/api-keys" })
+    ] }),
+    error && /* @__PURE__ */ jsx4(StatusMessage, { variant: "error", children: error }),
+    loading ? /* @__PURE__ */ jsx4(Spinner, { label: "Validating key..." }) : /* @__PURE__ */ jsxs4(Box4, { children: [
+      /* @__PURE__ */ jsx4(Text4, { color: "gray", children: "Key: " }),
+      /* @__PURE__ */ jsx4(TextInput, { placeholder: "pm_live_...", onSubmit: handleSubmit })
+    ] })
+  ] });
+}
+
+// src/screens/Generate.tsx
+import { useState as useState4, useEffect as useEffect2, useCallback as useCallback4 } from "react";
+import { Box as Box6, Text as Text6, useApp, useInput } from "ink";
+import { Select as Select2, TextInput as TextInput2 } from "@inkjs/ui";
+
+// src/components/GenerationProgress.tsx
+import { Box as Box5, Text as Text5 } from "ink";
+import { Spinner as Spinner2, ProgressBar } from "@inkjs/ui";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function GenerationProgress({ provider, progress = 0, elapsed = 0, model }) {
+  const elapsedStr = `${Math.round(elapsed)}s`;
+  if (provider === "gemini") {
+    return /* @__PURE__ */ jsx5(Box5, { flexDirection: "column", gap: 1, children: /* @__PURE__ */ jsx5(Spinner2, { label: `Generating with ${model ?? "Gemini"}... (${elapsedStr})` }) });
+  }
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsxs5(Text5, { children: [
+      "Generating with ",
+      /* @__PURE__ */ jsx5(Text5, { bold: true, children: model ?? "Replicate" }),
+      "... (",
+      elapsedStr,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsx5(ProgressBar, { value: Math.round(progress * 100) })
+  ] });
+}
+
+// src/screens/Generate.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var GEMINI_MODELS = /* @__PURE__ */ new Set(["nano-banana-2", "nano-banana-pro", "imagen-3"]);
+var MODEL_OPTIONS = [
+  { label: "Nano Banana 2 (1 credit, fast)", value: "nano-banana-2" },
+  { label: "Nano Banana Pro (4 credits)", value: "nano-banana-pro" },
+  { label: "Flux Schnell (1 credit)", value: "flux-schnell" },
+  { label: "Google Imagen 3 (1 credit)", value: "imagen-3" },
+  { label: "Recraft V4 (1 credit)", value: "recraft-v4" },
+  { label: "Recraft V4 Pro (7 credits)", value: "recraft-v4-pro" }
+];
+var ASPECT_OPTIONS = [
+  { label: "1:1 Square", value: "1:1" },
+  { label: "16:9 Landscape", value: "16:9" },
+  { label: "9:16 Portrait", value: "9:16" },
+  { label: "3:2 Landscape", value: "3:2" },
+  { label: "2:3 Portrait", value: "2:3" },
+  { label: "4:3 Landscape", value: "4:3" },
+  { label: "21:9 Ultrawide", value: "21:9" }
+];
+function Generate({
+  client,
+  navigate,
+  initialPrompt,
+  initialModel,
+  initialAspectRatio,
+  initialStyle,
+  defaultModel = "nano-banana-2",
+  defaultAspectRatio = "1:1",
+  defaultStyle = "none"
+}) {
+  const { exit } = useApp();
+  const [step, setStep] = useState4(initialPrompt ? "model" : "prompt");
+  const [prompt, setPrompt] = useState4(initialPrompt ?? "");
+  const [model, setModel] = useState4(initialModel ?? defaultModel);
+  const [aspectRatio, setAspectRatio] = useState4(
+    initialAspectRatio ?? defaultAspectRatio
+  );
+  const [style] = useState4(initialStyle ?? defaultStyle);
+  const [generation, setGeneration] = useState4(null);
+  const [error, setError] = useState4(null);
+  const [progress, setProgress] = useState4(0);
+  const [elapsed, setElapsed] = useState4(0);
+  useEffect2(() => {
+    if (initialPrompt && initialModel) {
+      if (initialAspectRatio && initialStyle) {
+        setStep("generating");
+      } else if (initialAspectRatio) {
+        setStep("generating");
+      } else {
+        setStep("options");
+      }
+    }
+  }, []);
+  const generate = useCallback4(async () => {
+    setStep("generating");
+    setError(null);
+    const start = Date.now();
+    const timer = setInterval(() => {
+      setElapsed((Date.now() - start) / 1e3);
+    }, 100);
+    try {
+      let gen = await client.generate({
+        prompt,
+        model,
+        aspect_ratio: aspectRatio,
+        style: style === "none" ? void 0 : style
+      });
+      if (gen.status === "processing" || gen.status === "pending") {
+        gen = await pollGeneration(client, gen.id, {
+          onProgress: (e, p) => {
+            setElapsed(e);
+            setProgress(p);
+          }
+        });
+      }
+      clearInterval(timer);
+      setGeneration(gen);
+      let imagePath = null;
+      if (gen.output?.[0]) {
+        const buf = await imageToBuffer(gen.output[0]);
+        imagePath = autoSave(gen.id, buf);
+      }
+      const payload = { type: "preview", generation: gen, imagePath };
+      exit(void 0);
+      globalThis.__pixelmuse_preview = payload;
+      setStep("preview");
+    } catch (err) {
+      clearInterval(timer);
+      setError(err instanceof Error ? err.message : "Generation failed");
+      setStep("preview");
+    }
+  }, [client, prompt, model, aspectRatio, style, exit]);
+  useEffect2(() => {
+    if (step === "generating" && !generation && !error) {
+      generate();
+    }
+  }, [step]);
+  useInput(
+    (input) => {
+      if (step !== "preview") return;
+      if (input === "r") {
+        setGeneration(null);
+        setError(null);
+        setProgress(0);
+        setElapsed(0);
+        setStep("generating");
+      } else if (input === "h") {
+        navigate({ screen: "home" });
+      }
+    }
+  );
+  if (step === "prompt") {
+    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Enter your prompt:" }),
+      /* @__PURE__ */ jsx6(
+        TextInput2,
+        {
+          placeholder: "A cinematic landscape with dramatic lighting...",
+          onSubmit: (value) => {
+            if (value.trim()) {
+              setPrompt(value.trim());
+              setStep("model");
+            }
+          }
+        }
+      )
+    ] });
+  }
+  if (step === "model") {
+    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Select model:" }),
+      /* @__PURE__ */ jsx6(Text6, { color: "gray", wrap: "truncate", children: prompt }),
+      /* @__PURE__ */ jsx6(
+        Select2,
+        {
+          options: MODEL_OPTIONS,
+          onChange: (value) => {
+            setModel(value);
+            setStep("options");
+          }
+        }
+      )
+    ] });
+  }
+  if (step === "options") {
+    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Aspect ratio:" }),
+      /* @__PURE__ */ jsx6(
+        Select2,
+        {
+          options: ASPECT_OPTIONS,
+          onChange: (value) => {
+            setAspectRatio(value);
+            setStep("generating");
+          }
+        }
+      )
+    ] });
+  }
+  if (step === "generating") {
+    const provider = GEMINI_MODELS.has(model) ? "gemini" : "replicate";
+    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsx6(Text6, { color: "gray", wrap: "truncate", children: prompt }),
+      /* @__PURE__ */ jsx6(GenerationProgress, { provider, progress, elapsed, model })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsxs6(Text6, { color: "red", children: [
+      "Error: ",
+      error
+    ] }),
+    /* @__PURE__ */ jsx6(Text6, { color: "gray", children: "[r] retry | [h] home" })
+  ] });
+}
+
+// src/screens/Gallery.tsx
+import { useState as useState6, useEffect as useEffect3 } from "react";
+import { Box as Box8, Text as Text8, useInput as useInput3 } from "ink";
+import { Spinner as Spinner3 } from "@inkjs/ui";
+
+// src/components/ImageGrid.tsx
+import { useState as useState5 } from "react";
+import { Box as Box7, Text as Text7, useInput as useInput2 } from "ink";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function ImageGrid({ generations, columns = 3, onSelect }) {
+  const [selectedIndex, setSelectedIndex] = useState5(0);
+  useInput2((input, key) => {
+    if (key.leftArrow) {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+    } else if (key.rightArrow) {
+      setSelectedIndex((i) => Math.min(generations.length - 1, i + 1));
+    } else if (key.upArrow) {
+      setSelectedIndex((i) => Math.max(0, i - columns));
+    } else if (key.downArrow) {
+      setSelectedIndex((i) => Math.min(generations.length - 1, i + columns));
+    } else if (key.return) {
+      const gen = generations[selectedIndex];
+      if (gen) onSelect(gen);
+    }
+  });
+  const rows = [];
+  for (let i = 0; i < generations.length; i += columns) {
+    rows.push(generations.slice(i, i + columns));
+  }
+  const cellWidth = Math.floor((process.stdout.columns ?? 80) / columns) - 2;
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
+    rows.map((row, rowIndex) => /* @__PURE__ */ jsx7(Box7, { children: row.map((gen, colIndex) => {
+      const index = rowIndex * columns + colIndex;
+      const isSelected = index === selectedIndex;
+      return /* @__PURE__ */ jsxs7(
+        Box7,
+        {
+          width: cellWidth,
+          borderStyle: isSelected ? "bold" : "single",
+          borderColor: isSelected ? "magenta" : "gray",
+          flexDirection: "column",
+          paddingX: 1,
+          children: [
+            /* @__PURE__ */ jsxs7(Text7, { color: gen.status === "succeeded" ? "green" : gen.status === "failed" ? "red" : "yellow", children: [
+              gen.status === "succeeded" ? "\u25CF" : gen.status === "failed" ? "\u2717" : "\u25CC",
+              " ",
+              gen.model
+            ] }),
+            /* @__PURE__ */ jsx7(Text7, { color: "gray", wrap: "truncate", children: gen.prompt.slice(0, cellWidth - 4) }),
+            /* @__PURE__ */ jsx7(Text7, { color: "gray", dimColor: true, children: new Date(gen.created_at).toLocaleDateString() })
+          ]
+        },
+        gen.id
+      );
+    }) }, rowIndex)),
+    /* @__PURE__ */ jsx7(Text7, { color: "gray", dimColor: true, children: "\u2190\u2192\u2191\u2193 navigate | enter select" })
+  ] });
+}
+
+// src/screens/Gallery.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function Gallery({ client, navigate }) {
+  const [generations, setGenerations] = useState6([]);
+  const [loading, setLoading] = useState6(true);
+  const [error, setError] = useState6(null);
+  const [hasMore, setHasMore] = useState6(false);
+  const [cursor, setCursor] = useState6();
+  const load = async (nextCursor) => {
+    setLoading(true);
+    try {
+      const result = await client.listGenerations({ cursor: nextCursor, limit: 12 });
+      if (nextCursor) {
+        setGenerations((prev) => [...prev, ...result.data]);
+      } else {
+        setGenerations(result.data);
+      }
+      setHasMore(result.has_more);
+      setCursor(result.next_cursor ?? void 0);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load gallery");
+    }
+    setLoading(false);
+  };
+  useEffect3(() => {
+    load();
+  }, []);
+  useInput3((input) => {
+    if (input === "l" && hasMore && !loading) {
+      load(cursor);
+    }
+  });
+  if (loading && generations.length === 0) {
+    return /* @__PURE__ */ jsx8(Spinner3, { label: "Loading gallery..." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs8(Text8, { color: "red", children: [
+      "Error: ",
+      error
+    ] });
+  }
+  if (generations.length === 0) {
+    return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsx8(Text8, { children: "No generations yet." }),
+      /* @__PURE__ */ jsx8(Text8, { color: "gray", children: "Generate your first image to see it here!" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx8(
+      ImageGrid,
+      {
+        generations,
+        onSelect: (gen) => navigate({ screen: "gallery-detail", id: gen.id })
+      }
+    ),
+    hasMore && /* @__PURE__ */ jsx8(Text8, { color: "gray", children: "[l] load more" }),
+    loading && /* @__PURE__ */ jsx8(Spinner3, { label: "Loading more..." })
+  ] });
+}
+
+// src/screens/GalleryDetail.tsx
+import { useState as useState8, useEffect as useEffect5 } from "react";
+import { Box as Box10, Text as Text10, useInput as useInput4 } from "ink";
+import { ConfirmInput, Spinner as Spinner5 } from "@inkjs/ui";
+
+// src/components/ImagePreview.tsx
+import { useState as useState7, useEffect as useEffect4 } from "react";
+import { Box as Box9, Text as Text9 } from "ink";
+import { Spinner as Spinner4 } from "@inkjs/ui";
+import { execSync } from "child_process";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function ImagePreview({ source, width }) {
+  const [ansi, setAnsi] = useState7(null);
+  const [state, setState] = useState7("loading");
+  useEffect4(() => {
+    if (typeof source !== "string" || !hasChafa()) {
+      setState("error");
+      return;
+    }
+    try {
+      const cols = width ?? Math.min(process.stdout.columns ?? 80, 80);
+      const result = execSync(
+        `chafa --format symbols --size ${cols} --animate off "${source}"`,
+        { encoding: "utf-8", maxBuffer: 10 * 1024 * 1024 }
+      );
+      setAnsi(result);
+      setState("done");
+    } catch {
+      setState("error");
+    }
+  }, [source, width]);
+  if (state === "error") {
+    return /* @__PURE__ */ jsx9(Box9, { children: /* @__PURE__ */ jsx9(Text9, { color: "red", children: "[Preview unavailable \u2014 install chafa for best results]" }) });
+  }
+  if (state === "loading") {
+    return /* @__PURE__ */ jsx9(Box9, { children: /* @__PURE__ */ jsx9(Spinner4, { label: "Rendering preview..." }) });
+  }
+  return /* @__PURE__ */ jsx9(Text9, { children: ansi });
+}
+
+// src/screens/GalleryDetail.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function GalleryDetail({ client, generationId, navigate, back }) {
+  const [generation, setGeneration] = useState8(null);
+  const [imagePath, setImagePath] = useState8(null);
+  const [loading, setLoading] = useState8(true);
+  const [confirming, setConfirming] = useState8(false);
+  const [error, setError] = useState8(null);
+  useEffect5(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const gen = await client.getGeneration(generationId);
+        if (cancelled) return;
+        setGeneration(gen);
+        if (gen.output?.[0]) {
+          const buf = await imageToBuffer(gen.output[0]);
+          if (!cancelled) {
+            const path = autoSave(gen.id, buf);
+            setImagePath(path);
+          }
+        }
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : "Failed to load");
+      }
+      if (!cancelled) setLoading(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [generationId]);
+  useInput4((input) => {
+    if (confirming) return;
+    if (input === "d") setConfirming(true);
+    if (input === "r" && generation) {
+      navigate({ screen: "generate", prompt: generation.prompt, model: generation.model });
+    }
+  });
+  const handleConfirm = async () => {
+    setConfirming(false);
+    try {
+      await client.deleteGeneration(generationId);
+      back();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Delete failed");
+    }
+  };
+  const handleCancel = () => {
+    setConfirming(false);
+  };
+  if (loading) return /* @__PURE__ */ jsx10(Spinner5, { label: "Loading..." });
+  if (error) return /* @__PURE__ */ jsxs9(Text10, { color: "red", children: [
+    "Error: ",
+    error
+  ] });
+  if (!generation) return /* @__PURE__ */ jsx10(Text10, { color: "red", children: "Generation not found" });
+  return /* @__PURE__ */ jsxs9(Box10, { flexDirection: "column", gap: 1, children: [
+    imagePath && /* @__PURE__ */ jsx10(ImagePreview, { source: imagePath }),
+    /* @__PURE__ */ jsxs9(Box10, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs9(Text10, { children: [
+        /* @__PURE__ */ jsx10(Text10, { bold: true, children: "Prompt: " }),
+        generation.prompt
+      ] }),
+      /* @__PURE__ */ jsxs9(Text10, { children: [
+        /* @__PURE__ */ jsx10(Text10, { bold: true, children: "Model: " }),
+        generation.model
+      ] }),
+      /* @__PURE__ */ jsxs9(Text10, { children: [
+        /* @__PURE__ */ jsx10(Text10, { bold: true, children: "Credits: " }),
+        /* @__PURE__ */ jsx10(Text10, { color: "green", children: generation.credits_charged })
+      ] }),
+      /* @__PURE__ */ jsxs9(Text10, { children: [
+        /* @__PURE__ */ jsx10(Text10, { bold: true, children: "Created: " }),
+        new Date(generation.created_at).toLocaleString()
+      ] }),
+      generation.completed_at && /* @__PURE__ */ jsxs9(Text10, { children: [
+        /* @__PURE__ */ jsx10(Text10, { bold: true, children: "Duration: " }),
+        Math.round(
+          (new Date(generation.completed_at).getTime() - new Date(generation.created_at).getTime()) / 1e3
+        ),
+        "s"
+      ] })
+    ] }),
+    confirming ? /* @__PURE__ */ jsxs9(Box10, { children: [
+      /* @__PURE__ */ jsx10(Text10, { color: "red", children: "Delete this generation? " }),
+      /* @__PURE__ */ jsx10(ConfirmInput, { onConfirm: handleConfirm, onCancel: handleCancel })
+    ] }) : /* @__PURE__ */ jsx10(Text10, { color: "gray", children: "[d] delete | [r] regenerate | esc back" })
+  ] });
+}
+
+// src/screens/Models.tsx
+import { useState as useState9, useEffect as useEffect6 } from "react";
+import { Box as Box12, Text as Text12, useInput as useInput5 } from "ink";
+import { Spinner as Spinner6 } from "@inkjs/ui";
+
+// src/components/ModelTable.tsx
+import { Box as Box11, Text as Text11 } from "ink";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function ModelTable({ models, selectedIndex }) {
+  return /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs10(Box11, { children: [
+      /* @__PURE__ */ jsx11(Box11, { width: 22, children: /* @__PURE__ */ jsx11(Text11, { bold: true, color: "gray", children: "Model" }) }),
+      /* @__PURE__ */ jsx11(Box11, { width: 8, children: /* @__PURE__ */ jsx11(Text11, { bold: true, color: "gray", children: "Credits" }) }),
+      /* @__PURE__ */ jsx11(Box11, { width: 40, children: /* @__PURE__ */ jsx11(Text11, { bold: true, color: "gray", children: "Strengths" }) })
+    ] }),
+    models.map((m, i) => {
+      const isSelected = i === selectedIndex;
+      return /* @__PURE__ */ jsxs10(Box11, { children: [
+        /* @__PURE__ */ jsx11(Box11, { width: 22, children: /* @__PURE__ */ jsxs10(Text11, { color: isSelected ? "magenta" : "white", bold: isSelected, children: [
+          isSelected ? "> " : "  ",
+          m.name
+        ] }) }),
+        /* @__PURE__ */ jsx11(Box11, { width: 8, children: /* @__PURE__ */ jsx11(Text11, { color: m.credit_cost > 1 ? "yellow" : "green", children: m.credit_cost }) }),
+        /* @__PURE__ */ jsx11(Box11, { width: 40, children: /* @__PURE__ */ jsx11(Text11, { color: "gray", children: m.strengths.join(", ") }) })
+      ] }, m.id);
+    })
+  ] });
+}
+
+// src/screens/Models.tsx
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function Models({ navigate }) {
+  const [models, setModels] = useState9([]);
+  const [selectedIndex, setSelectedIndex] = useState9(0);
+  const [loading, setLoading] = useState9(true);
+  const [error, setError] = useState9(null);
+  useEffect6(() => {
+    PixelmuseClient.listModels().then(setModels).catch((err) => setError(err instanceof Error ? err.message : "Failed to load")).finally(() => setLoading(false));
+  }, []);
+  useInput5((input, key) => {
+    if (key.upArrow) setSelectedIndex((i) => Math.max(0, i - 1));
+    if (key.downArrow) setSelectedIndex((i) => Math.min(models.length - 1, i + 1));
+    if (key.return || input === "g") {
+      const model = models[selectedIndex];
+      if (model) navigate({ screen: "generate", model: model.id });
+    }
+  });
+  if (loading) return /* @__PURE__ */ jsx12(Spinner6, { label: "Loading models..." });
+  if (error) return /* @__PURE__ */ jsxs11(Text12, { color: "red", children: [
+    "Error: ",
+    error
+  ] });
+  const selected = models[selectedIndex];
+  return /* @__PURE__ */ jsxs11(Box12, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx12(ModelTable, { models, selectedIndex }),
+    selected && /* @__PURE__ */ jsxs11(Box12, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
+      /* @__PURE__ */ jsx12(Text12, { bold: true, children: selected.name }),
+      /* @__PURE__ */ jsx12(Text12, { color: "gray", children: selected.description }),
+      /* @__PURE__ */ jsxs11(Text12, { children: [
+        "Aspect ratios: ",
+        /* @__PURE__ */ jsx12(Text12, { color: "cyan", children: selected.supported_aspect_ratios.join(", ") })
+      ] }),
+      selected.weaknesses.length > 0 && /* @__PURE__ */ jsxs11(Text12, { children: [
+        "Weaknesses: ",
+        /* @__PURE__ */ jsx12(Text12, { color: "yellow", children: selected.weaknesses.join(", ") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx12(Text12, { color: "gray", children: "\u2191\u2193 navigate | enter or [g] generate with model" })
+  ] });
+}
+
+// src/screens/Prompts.tsx
+import { useState as useState10 } from "react";
+import { Box as Box13, Text as Text13, useInput as useInput6 } from "ink";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function Prompts({ navigate }) {
+  const [templates, setTemplates] = useState10(() => listTemplates());
+  const [selectedIndex, setSelectedIndex] = useState10(0);
+  useInput6((input, key) => {
+    if (key.upArrow) setSelectedIndex((i) => Math.max(0, i - 1));
+    if (key.downArrow) setSelectedIndex((i) => Math.min(templates.length - 1, i + 1));
+    if (input === "n") navigate({ screen: "prompt-editor" });
+    if (input === "e") {
+      const t = templates[selectedIndex];
+      if (t) navigate({ screen: "prompt-editor", name: t.name });
+    }
+    if (input === "u") {
+      const t = templates[selectedIndex];
+      if (t) {
+        navigate({
+          screen: "generate",
+          prompt: t.prompt,
+          model: t.defaults.model,
+          aspectRatio: t.defaults.aspect_ratio,
+          style: t.defaults.style
+        });
+      }
+    }
+    if (input === "d") {
+      const t = templates[selectedIndex];
+      if (t) {
+        deleteTemplate(t.name);
+        setTemplates(listTemplates());
+        setSelectedIndex((i) => Math.min(i, templates.length - 2));
+      }
+    }
+  });
+  if (templates.length === 0) {
+    return /* @__PURE__ */ jsxs12(Box13, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsx13(Text13, { children: "No prompt templates saved." }),
+      /* @__PURE__ */ jsx13(Text13, { color: "gray", children: "[n] create new template" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs12(Box13, { flexDirection: "column", gap: 1, children: [
+    templates.map((t, i) => {
+      const isSelected = i === selectedIndex;
+      return /* @__PURE__ */ jsxs12(Box13, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs12(Text13, { color: isSelected ? "magenta" : "white", bold: isSelected, children: [
+          isSelected ? "> " : "  ",
+          t.name
+        ] }),
+        /* @__PURE__ */ jsxs12(Text13, { color: "gray", children: [
+          "  ",
+          t.description,
+          t.tags.length > 0 && ` [${t.tags.join(", ")}]`
+        ] })
+      ] }, t.name);
+    }),
+    /* @__PURE__ */ jsx13(Text13, { color: "gray", children: "[n] new | [e] edit | [u] use | [d] delete | esc back" })
+  ] });
+}
+
+// src/screens/PromptEditor.tsx
+import { useState as useState11 } from "react";
+import { Box as Box14, Text as Text14 } from "ink";
+import { TextInput as TextInput3 } from "@inkjs/ui";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function PromptEditor({ existingName, onDone: _onDone }) {
+  const existing = existingName ? getTemplate(existingName) : null;
+  const [step, setStep] = useState11(existing ? "prompt" : "name");
+  const [name, setName] = useState11(existing?.name ?? "");
+  const [description, setDescription] = useState11(existing?.description ?? "");
+  const [prompt, setPrompt] = useState11(existing?.prompt ?? "");
+  const [tags, setTags] = useState11(existing?.tags.join(", ") ?? "");
+  const handleSave = () => {
+    const vars = extractVariables(prompt);
+    const variables = {};
+    for (const v of vars) {
+      variables[v] = existing?.variables[v] ?? "";
+    }
+    const template = {
+      name,
+      description,
+      prompt,
+      defaults: existing?.defaults ?? {},
+      variables,
+      tags: tags.split(",").map((t) => t.trim()).filter(Boolean)
+    };
+    saveTemplate(template);
+    setStep("done");
+  };
+  if (step === "done") {
+    return /* @__PURE__ */ jsxs13(Box14, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsxs13(Text14, { color: "green", children: [
+        'Template "',
+        name,
+        '" saved!'
+      ] }),
+      /* @__PURE__ */ jsx14(Text14, { color: "gray", children: "Press esc to go back" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs13(Box14, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsxs13(Text14, { bold: true, children: [
+      existing ? "Edit" : "New",
+      " Prompt Template"
+    ] }),
+    step === "name" && /* @__PURE__ */ jsxs13(Box14, { children: [
+      /* @__PURE__ */ jsx14(Text14, { children: "Name: " }),
+      /* @__PURE__ */ jsx14(
+        TextInput3,
+        {
+          defaultValue: name,
+          placeholder: "blog-thumbnail",
+          onSubmit: (v) => {
+            setName(v.trim());
+            setStep("description");
+          }
+        }
+      )
+    ] }),
+    step === "description" && /* @__PURE__ */ jsxs13(Box14, { children: [
+      /* @__PURE__ */ jsx14(Text14, { children: "Description: " }),
+      /* @__PURE__ */ jsx14(
+        TextInput3,
+        {
+          defaultValue: description,
+          placeholder: "Dark-themed blog post thumbnail",
+          onSubmit: (v) => {
+            setDescription(v.trim());
+            setStep("prompt");
+          }
+        }
+      )
+    ] }),
+    step === "prompt" && /* @__PURE__ */ jsxs13(Box14, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsxs13(Text14, { color: "gray", children: [
+        "Use ",
+        "{{variable}}",
+        " for placeholders"
+      ] }),
+      /* @__PURE__ */ jsxs13(Box14, { children: [
+        /* @__PURE__ */ jsx14(Text14, { children: "Prompt: " }),
+        /* @__PURE__ */ jsx14(
+          TextInput3,
+          {
+            defaultValue: prompt,
+            placeholder: "A cinematic {{subject}} on a dark background...",
+            onSubmit: (v) => {
+              setPrompt(v.trim());
+              setStep("tags");
+            }
+          }
+        )
+      ] })
+    ] }),
+    step === "tags" && /* @__PURE__ */ jsxs13(Box14, { children: [
+      /* @__PURE__ */ jsx14(Text14, { children: "Tags (comma separated): " }),
+      /* @__PURE__ */ jsx14(
+        TextInput3,
+        {
+          defaultValue: tags,
+          placeholder: "blog, thumbnail, dark",
+          onSubmit: (v) => {
+            setTags(v);
+            handleSave();
+          }
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/screens/Account.tsx
+import { useState as useState12, useEffect as useEffect7 } from "react";
+import { Box as Box15, Text as Text15, useInput as useInput7 } from "ink";
+import { Spinner as Spinner7 } from "@inkjs/ui";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function Account({ client, account, navigate, onLogout }) {
+  const [usage, setUsage] = useState12(null);
+  const [loading, setLoading] = useState12(true);
+  useEffect7(() => {
+    const now = /* @__PURE__ */ new Date();
+    const thirtyDaysAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1e3);
+    client.getUsage({ start: thirtyDaysAgo.toISOString(), end: now.toISOString() }).then(setUsage).catch(() => {
+    }).finally(() => setLoading(false));
+  }, []);
+  useInput7((input) => {
+    if (input === "b") navigate({ screen: "buy-credits" });
+    if (input === "l") onLogout();
+  });
+  if (!account) return /* @__PURE__ */ jsx15(Spinner7, { label: "Loading account..." });
+  return /* @__PURE__ */ jsxs14(Box15, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsxs14(Box15, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs14(Text15, { children: [
+        /* @__PURE__ */ jsx15(Text15, { bold: true, children: "Email: " }),
+        account.email
+      ] }),
+      /* @__PURE__ */ jsxs14(Text15, { children: [
+        /* @__PURE__ */ jsx15(Text15, { bold: true, children: "Plan: " }),
+        /* @__PURE__ */ jsx15(Text15, { color: "cyan", children: account.plan })
+      ] }),
+      /* @__PURE__ */ jsxs14(Text15, { children: [
+        /* @__PURE__ */ jsx15(Text15, { bold: true, children: "Credits: " }),
+        /* @__PURE__ */ jsx15(Text15, { color: "green", children: account.credits.total }),
+        /* @__PURE__ */ jsxs14(Text15, { color: "gray", children: [
+          " ",
+          "(subscription: ",
+          account.credits.subscription,
+          ", purchased: ",
+          account.credits.purchased,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs14(Text15, { children: [
+        /* @__PURE__ */ jsx15(Text15, { bold: true, children: "Rate limit: " }),
+        account.rate_limit.requests_per_minute,
+        " req/min"
+      ] })
+    ] }),
+    loading ? /* @__PURE__ */ jsx15(Spinner7, { label: "Loading usage..." }) : usage ? /* @__PURE__ */ jsxs14(Box15, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx15(Text15, { bold: true, children: "30-Day Usage" }),
+      /* @__PURE__ */ jsxs14(Text15, { children: [
+        "Generations: ",
+        /* @__PURE__ */ jsx15(Text15, { color: "cyan", children: usage.generations_count }),
+        " | Credits used:",
+        " ",
+        /* @__PURE__ */ jsx15(Text15, { color: "yellow", children: usage.credits_used })
+      ] }),
+      usage.by_model.length > 0 && /* @__PURE__ */ jsx15(Box15, { flexDirection: "column", marginTop: 1, children: usage.by_model.map((m) => /* @__PURE__ */ jsxs14(Text15, { children: [
+        "  ",
+        m.model,
+        ": ",
+        m.count,
+        " generations (",
+        m.credits,
+        " credits)"
+      ] }, m.model)) })
+    ] }) : null,
+    /* @__PURE__ */ jsx15(Text15, { color: "gray", children: "[b] buy credits | [l] logout | esc back" })
+  ] });
+}
+
+// src/screens/BuyCredits.tsx
+import { useState as useState13, useEffect as useEffect8 } from "react";
+import { Box as Box16, Text as Text16, useInput as useInput8 } from "ink";
+import { Select as Select3, Spinner as Spinner8 } from "@inkjs/ui";
+import open from "open";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+function BuyCredits({ client, onRefreshAccount, back }) {
+  const [packages, setPackages] = useState13([]);
+  const [loading, setLoading] = useState13(true);
+  const [checkoutOpened, setCheckoutOpened] = useState13(false);
+  const [error, setError] = useState13(null);
+  useEffect8(() => {
+    PixelmuseClient.listPackages().then(setPackages).catch((err) => setError(err instanceof Error ? err.message : "Failed to load")).finally(() => setLoading(false));
+  }, []);
+  useInput8(() => {
+    if (checkoutOpened) {
+      onRefreshAccount();
+      back();
+    }
+  });
+  if (loading) return /* @__PURE__ */ jsx16(Spinner8, { label: "Loading packages..." });
+  if (error) return /* @__PURE__ */ jsxs15(Text16, { color: "red", children: [
+    "Error: ",
+    error
+  ] });
+  if (checkoutOpened) {
+    return /* @__PURE__ */ jsxs15(Box16, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsx16(Text16, { color: "green", children: "Checkout opened in your browser." }),
+      /* @__PURE__ */ jsx16(Text16, { color: "gray", children: "Press any key to refresh your balance and go back." })
+    ] });
+  }
+  const options = packages.map((p) => ({
+    label: `${p.label} \u2014 ${p.credits + p.bonus_credits} credits \u2014 $${p.price_usd}`,
+    value: p.name
+  }));
+  return /* @__PURE__ */ jsxs15(Box16, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx16(Text16, { bold: true, children: "Buy Credits" }),
+    /* @__PURE__ */ jsx16(
+      Select3,
+      {
+        options,
+        onChange: async (value) => {
+          try {
+            const { checkout_url } = await client.createCheckout({
+              package: value
+            });
+            await open(checkout_url);
+            setCheckoutOpened(true);
+          } catch (err) {
+            setError(err instanceof Error ? err.message : "Checkout failed");
+          }
+        }
+      }
+    )
+  ] });
+}
+
+// src/app.tsx
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+var PUBLIC_SCREENS = /* @__PURE__ */ new Set(["login", "models"]);
+function App({ initialRoute }) {
+  const { exit } = useApp2();
+  const { route, navigate, back, replace } = useRouter(initialRoute ?? { screen: "home" });
+  const auth = useAuth();
+  const client = useApi(auth.apiKey);
+  const { settings } = useConfig();
+  useEffect9(() => {
+    if (!auth.isLoading && !auth.isAuthenticated && !PUBLIC_SCREENS.has(route.screen)) {
+      replace({ screen: "login" });
+    }
+  }, [auth.isLoading, auth.isAuthenticated, route.screen]);
+  useInput9((input, key) => {
+    if (input === "q") exit();
+    if (key.escape) back();
+  });
+  if (auth.isLoading) {
+    return /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx17(Header, { route }),
+      /* @__PURE__ */ jsx17(Spinner9, { label: "Loading..." })
+    ] });
+  }
+  const renderScreen = () => {
+    switch (route.screen) {
+      case "login":
+        return /* @__PURE__ */ jsx17(
+          Login,
+          {
+            onLogin: auth.login,
+            onSuccess: () => navigate({ screen: "home" })
+          }
+        );
+      case "home":
+        return /* @__PURE__ */ jsx17(
+          Home,
+          {
+            account: auth.account,
+            navigate,
+            onLogout: async () => {
+              await auth.logout();
+              replace({ screen: "login" });
+            }
+          }
+        );
+      case "generate":
+        if (!client) return null;
+        return /* @__PURE__ */ jsx17(
+          Generate,
+          {
+            client,
+            navigate,
+            initialPrompt: route.prompt,
+            initialModel: route.model,
+            initialAspectRatio: route.aspectRatio,
+            initialStyle: route.style,
+            defaultModel: settings.defaultModel,
+            defaultAspectRatio: settings.defaultAspectRatio,
+            defaultStyle: settings.defaultStyle
+          }
+        );
+      case "gallery":
+        if (!client) return null;
+        return /* @__PURE__ */ jsx17(Gallery, { client, navigate });
+      case "gallery-detail":
+        if (!client) return null;
+        return /* @__PURE__ */ jsx17(
+          GalleryDetail,
+          {
+            client,
+            generationId: route.id,
+            navigate,
+            back
+          }
+        );
+      case "models":
+        return /* @__PURE__ */ jsx17(Models, { navigate });
+      case "prompts":
+        return /* @__PURE__ */ jsx17(Prompts, { navigate });
+      case "prompt-editor":
+        return /* @__PURE__ */ jsx17(PromptEditor, { existingName: route.name, onDone: back });
+      case "account":
+        if (!client) return null;
+        return /* @__PURE__ */ jsx17(
+          Account,
+          {
+            client,
+            account: auth.account,
+            navigate,
+            onLogout: async () => {
+              await auth.logout();
+              replace({ screen: "login" });
+            }
+          }
+        );
+      case "buy-credits":
+        if (!client) return null;
+        return /* @__PURE__ */ jsx17(
+          BuyCredits,
+          {
+            client,
+            onRefreshAccount: auth.refreshAccount,
+            back
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx17(Header, { route }),
+    renderScreen(),
+    /* @__PURE__ */ jsx17(StatusBar, { account: auth.account })
+  ] });
+}
+
+// src/tui.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function showPreview(payload) {
+  const { generation, imagePath } = payload;
+  if (imagePath) {
+    renderImageDirect(imagePath);
+  }
+  console.log();
+  console.log(
+    `Model: \x1B[1m${generation.model}\x1B[0m | Credits: \x1B[32m${generation.credits_charged}\x1B[0m`
+  );
+  if (imagePath) {
+    console.log(`\x1B[2mSaved to ${imagePath}\x1B[0m`);
+  }
+  console.log();
+  console.log("\x1B[90m[r] regenerate | [g] gallery | [h] home | [q] quit\x1B[0m");
+  return new Promise((resolve) => {
+    const { stdin } = process;
+    const wasRaw = stdin.isRaw;
+    stdin.setRawMode(true);
+    stdin.resume();
+    const handler = (data) => {
+      const key = data.toString();
+      stdin.setRawMode(wasRaw ?? false);
+      stdin.removeListener("data", handler);
+      stdin.pause();
+      switch (key) {
+        case "r":
+          resolve({ screen: "generate" });
+          break;
+        case "g":
+          resolve({ screen: "gallery" });
+          break;
+        case "h":
+          resolve({ screen: "home" });
+          break;
+        default:
+          resolve(null);
+      }
+    };
+    stdin.on("data", handler);
+  });
+}
+async function launchTui(initialRoute = { screen: "home" }) {
+  let route = initialRoute;
+  while (route) {
+    const instance = render(/* @__PURE__ */ jsx18(App, { initialRoute: route }));
+    await instance.waitUntilExit();
+    const payload = globalThis.__pixelmuse_preview;
+    delete globalThis.__pixelmuse_preview;
+    if (payload?.type === "preview") {
+      route = await showPreview(payload);
+    } else {
+      route = null;
+    }
+  }
+}
+export {
+  launchTui
+};