@suchitraswain/nightcode-cli 1.0.0

package/bin/nightcode.cjs

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+"use strict";
+
+const { spawnSync } = require("node:child_process");
+const path = require("node:path");
+
+const entry = path.join(__dirname, "nightcode.ts");
+const result = spawnSync("bun", [entry], { stdio: "inherit" });
+
+process.exit(result.status ?? 1);

package/bin/nightcode.ts

@@ -0,0 +1,5 @@
+import { bootstrapEnv } from "../src/bootstrap-env.ts";
+
+bootstrapEnv();
+
+await import("../src/index.tsx");

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@suchitraswain/nightcode-cli",
+  "version": "1.0.0",
+  "description": "NightCode terminal AI coding agent — connects to the hosted API",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SuchitraSwain/nightcode.git",
+    "directory": "packages/cli"
+  },
+  "keywords": ["nightcode", "cli", "ai", "terminal", "coding-agent"],
+  "bin": {
+    "nightcode": "./bin/nightcode.cjs"
+  },
+  "files": [
+    "bin",
+    "src",
+    "vendor"
+  ],
+  "imports": {
+    "@nightcode/shared": "./vendor/shared/index.ts"
+  },
+  "scripts": {
+    "dev": "bun run --watch src/index.tsx",
+    "prepare-package": "bash scripts/prepare-package.sh",
+    "prepublishOnly": "bun run prepare-package"
+  },
+  "engines": {
+    "bun": ">=1.0.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@ai-sdk/react": "^3.0.186",
+    "@opentui/core": "^0.1.97",
+    "@opentui/react": "^0.1.97",
+    "ai": "^6.0.184",
+    "date-fns": "^4.1.0",
+    "dotenv": "^17.4.2",
+    "hono": "^4.12.12",
+    "open": "^11.0.0",
+    "opentui-spinner": "^0.0.6",
+    "pretty-ms": "^9.3.0",
+    "react": "^19.2.4",
+    "react-router": "^7.14.0",
+    "zod": "^4.3.6"
+  }
+}

package/src/bootstrap-env.ts

@@ -0,0 +1,33 @@
+import dotenv from "dotenv";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { HOSTED_CONFIG } from "./hosted-config";
+
+const CLI_ENV_KEYS = [
+  "API_URL",
+  "CLERK_FRONTEND_API",
+  "CLERK_OAUTH_CLIENT_ID",
+  "CLERK_OAUTH_CLIENT_SECRET",
+] as const;
+
+function loadEnvFile(filePath: string) {
+  if (!fs.existsSync(filePath)) return;
+  dotenv.config({ path: filePath, quiet: true, override: false });
+}
+
+/** Apply hosted defaults for any CLI env var not already set. */
+export function bootstrapEnv() {
+  // Monorepo dev: repo root .env
+  loadEnvFile(path.resolve(import.meta.dirname, "../../../.env"));
+
+  // Published CLI: optional user override
+  loadEnvFile(path.join(os.homedir(), ".nightcode", ".env"));
+
+  for (const key of CLI_ENV_KEYS) {
+    if (!process.env[key]) {
+      const value = HOSTED_CONFIG[key as keyof typeof HOSTED_CONFIG];
+      if (value) process.env[key] = value;
+    }
+  }
+}

package/src/components/border.tsx

@@ -0,0 +1,18 @@
+export const EmptyBorder = {
+  topLeft: "",
+  bottomLeft: "",
+  vertical: "",
+  topRight: "",
+  bottomRight: "",
+  horizontal: " ",
+  bottomT: "",
+  topT: "",
+  cross: "",
+  leftT: "",
+  rightT: "",
+};
+
+export const SplitBorderChars = {
+  ...EmptyBorder,
+  vertical: "┃",
+};

package/src/components/command-menu/commands.tsx

@@ -0,0 +1,147 @@
+import { SUPPORTED_CHAT_MODELS } from "@nightcode/shared";
+import { 
+  AgentsDialogContent,
+  ModelsDialogContent,
+  SessionsDialogContent,
+  ThemeDialogContent,
+} from "../dialogs";
+import type { Command } from "./types";
+
+import { performLogin } from "../../lib/oauth";
+import { clearAuth } from "../../lib/auth";
+
+import { openBillingPortal, openUpgradeCheckout } from "../../lib/upgrade";
+
+export const COMMANDS: Command[] = [
+  {
+    name: "new",
+    description: "Start a new conversation",
+    value: "/new",
+    action: (ctx) => {
+      ctx.navigate("/");
+    },
+  },
+  {
+    name: "agents",
+    description: "Switch agents",
+    value: "/agents",
+    action: (ctx) => {
+      ctx.dialog.open({
+        title: "Select Agent",
+        children: <AgentsDialogContent currentMode={ctx.mode} onSelectMode={ctx.setMode} />,
+      })
+    },
+  },
+  {
+    name: "models",
+    description: "Select AI model for generation",
+    value: "/models",
+    action: (ctx) => {
+      ctx.dialog.open({
+        title: "Select Model",
+        children: (
+          <ModelsDialogContent
+            models={SUPPORTED_CHAT_MODELS.map((model) => model.id)}
+            onSelectModel={ctx.setModel}
+          />
+        ),
+      })
+    },
+  },
+  {
+    name: "sessions",
+    description: "Browse past sessions",
+    value: "/sessions",
+    action: (ctx) => {
+      ctx.dialog.open({
+        title: "Sessions",
+        children: <SessionsDialogContent />,
+      })
+    },
+  },
+  {
+    name: "theme",
+    description: "Change color theme",
+    value: "/theme",
+    action: (ctx) => {
+      ctx.dialog.open({
+        title: "Select Theme",
+        children: <ThemeDialogContent />,
+      })
+    },
+  },
+  {
+    name: "login",
+    description: "Sign in with your browser",
+    value: "/login",
+    action: async (ctx) => {
+      ctx.toast.show({ message: "Opening browser to sign in..." });
+
+      try {
+        await performLogin();
+        ctx.toast.show({ variant: "success", message: "Signed in" });
+      } catch (error) {
+        const message = error instanceof Error 
+          ? error.message 
+          : "Sign in failed or timed out";
+
+        ctx.toast.show({ variant: "error", message });
+      }
+    },
+  },
+  {
+    name: "logout",
+    description: "Sign out of your account",
+    value: "/logout",
+    action: (ctx) => {
+      clearAuth();
+      ctx.toast.show({ variant: "success", message: "Signed out" });
+    },
+  },
+  {
+    name: "upgrade",
+    description: "Buy more credits",
+    value: "/upgrade",
+    action: async (ctx) => {
+      ctx.toast.show({ message: "Opening credits checkout..." });
+
+      try {
+        await openUpgradeCheckout();
+        ctx.toast.show({
+          variant: "success",
+          message: "Checkout opened in browser",
+        });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to open checkout";
+        ctx.toast.show({ variant: "error", message });
+      }
+    },
+  },
+  {
+    name: "usage",
+    description: "Open billing portal in your browser",
+    value: "/usage",
+    action: async (ctx) => {
+      ctx.toast.show({ message: "Opening billing portal..." });
+
+      try {
+        await openBillingPortal();
+        ctx.toast.show({
+          variant: "success",
+          message: "Billing portal opened in browser",
+        });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to open billing portal";
+        ctx.toast.show({ variant: "error", message });
+      }
+    },
+  },
+  {
+    name: "exit",
+    description: "Quit the application",
+    value: "/exit",
+    action: (ctx) => {
+      ctx.exit();
+    },
+  },
+];

package/src/components/command-menu/filter-commands.ts

@@ -0,0 +1,8 @@
+import type { Command } from "./types";
+import { COMMANDS } from "./commands";
+
+export function getFilteredCommands(query: string): Command[] {
+  if (query.length === 0) return COMMANDS;
+  return COMMANDS
+    .filter((cmd) => cmd.name.toLowerCase().startsWith(query.toLowerCase()));
+};

package/src/components/command-menu/index.tsx

@@ -0,0 +1,74 @@
+import type { RefObject } from "react";
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { getFilteredCommands } from "./filter-commands";
+import { COMMANDS } from "./commands";
+import { useTheme } from "../../providers/theme";
+
+const MAX_VISIBLE_ITEMS = 8;
+
+// Align all command names in a fixed-width column so their descriptions
+// start at the same horizontal position for a clean tabular look.
+// The width adjusts to accommodate the longest command name.
+const COMMAND_COL_WIDTH = Math.max(...COMMANDS.map((cmd) => cmd.name.length)) + 4;
+
+type CommandMenuProps = {
+  query: string;
+  selectedIndex: number;
+  scrollRef: RefObject<ScrollBoxRenderable | null>;
+  onSelect: (index: number) => void;
+  onExecute: (index: number) => void;
+};
+
+export function CommandMenu({
+  query,
+  selectedIndex,
+  scrollRef,
+  onSelect,
+  onExecute,
+}: CommandMenuProps) {
+  const { colors } = useTheme();
+  const filtered = getFilteredCommands(query);
+  const visibleHeight = Math.min(filtered.length, MAX_VISIBLE_ITEMS);
+
+  if (filtered.length === 0) {
+    return (
+      <box paddingX={1}>
+        <text attributes={TextAttributes.DIM}>
+          No matching commands
+        </text>
+      </box>
+    );
+  }
+
+  return (
+    <scrollbox ref={scrollRef} height={visibleHeight}>
+      {filtered.map((cmd, i) => {
+        const isSelected = i === selectedIndex;
+
+        return (
+          <box
+            key={cmd.value}
+            flexDirection="row"
+            paddingX={1}
+            height={1}
+            overflow="hidden"
+            backgroundColor={isSelected ? colors.selection : undefined}
+            onMouseMove={() => onSelect(i)}
+            onMouseDown={() => onExecute(i)}
+          >
+            <box width={COMMAND_COL_WIDTH} flexShrink={0}>
+              <text selectable={false} fg={isSelected ? "black" : "white"}>
+                /{cmd.name}
+              </text>
+            </box>
+            <box flexGrow={1} flexShrink={1} overflow="hidden">
+              <text selectable={false} fg={isSelected ? "black" : "gray"}>
+                {cmd.description}
+              </text>
+            </box>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+};

package/src/components/command-menu/types.ts

@@ -0,0 +1,20 @@
+import type { DialogContextValue } from "../../providers/dialog";
+import type { ToastContextValue } from "../../providers/toast";
+import type { ModeType, SupportedChatModelId } from "@nightcode/shared";
+
+export type CommandContext = {
+  exit: () => void;
+  toast: ToastContextValue;
+  dialog: DialogContextValue;
+  navigate: (path: string) => void;
+  mode: ModeType;
+  setMode: (mode: ModeType) => void;
+  setModel: (model: SupportedChatModelId) => void;
+};
+
+export type Command = {
+  name: string;
+  description: string;
+  value: string;
+  action?: (ctx: CommandContext) => void | Promise<void>;
+};

package/src/components/command-menu/use-command-menu.ts

@@ -0,0 +1,113 @@
+import { useRef, useState, useMemo, type RefObject } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { useKeyboard } from "@opentui/react";
+import { getFilteredCommands } from "./filter-commands";
+import type { Command } from "./types";
+import { useKeyboardLayer } from "../../providers/keyboard-layer";
+
+type UseCommandMenuReturn = {
+  showCommandMenu: boolean;
+  commandQuery: string;
+  selectedIndex: number;
+  scrollRef: RefObject<ScrollBoxRenderable | null>;
+  handleContentChange: (text: string) => void;
+  resolveCommand: (index: number) => Command | undefined;
+  setSelectedIndex: (index: number) => void;
+};
+
+export function useCommandMenu(): UseCommandMenuReturn {
+  const [textValue, setTextValue] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [showCommandMenu, setShowCommandMenu] = useState(false);
+  const scrollRef = useRef<ScrollBoxRenderable>(null);
+  const { push, pop, isTopLayer } = useKeyboardLayer();
+
+  const commandQuery = showCommandMenu && textValue.startsWith("/") ? textValue.slice(1) : "";
+
+  const filteredCommands = useMemo(() => getFilteredCommands(commandQuery), [commandQuery]);
+
+  const close = () => {
+    setShowCommandMenu(false);
+    pop("command");
+  };
+
+  const handleContentChange = (text: string) => {
+    setTextValue(text);
+    setSelectedIndex(0);
+
+    // Jump back to the top of the list when the user types a new character
+    const scrollbox = scrollRef.current;
+    if (scrollbox) {
+      scrollbox.scrollTo(0);
+    }
+
+    const prefix = text.startsWith("/") ? text.slice(1) : null;
+    if (prefix !== null && !prefix.includes(" ")) {
+      setShowCommandMenu(true);
+      push("command", () => {
+        close();
+        return true;
+      });
+    } else {
+      close();
+    }
+  };
+
+  // Resolve a command at a specific index (returns the command, caller handles execution)
+  const resolveCommand = (index: number): Command | undefined => {
+    const command = filteredCommands[index];
+    if (command) {
+      close();
+    }
+    return command;
+  };
+
+  // Arrow keys move selection; the list follows along when the highlight goes off-screen
+  useKeyboard((key) => {
+    if (!showCommandMenu || !isTopLayer("command")) return;
+
+    if (key.name === "escape") {
+      key.preventDefault();
+      close();
+    } else if (key.name === "up") {
+      key.preventDefault();
+      setSelectedIndex((i: number) => {
+        const newIndex = Math.max(0, i - 1);
+        // Keep the highlighted item visible when arrowing past the edge
+        const sb = scrollRef.current;
+        if (sb && newIndex < sb.scrollTop) {
+          sb.scrollTo(newIndex);
+        }
+        return newIndex;
+      });
+    } else if (key.name === "down") {
+      key.preventDefault();
+      setSelectedIndex((i: number) => {
+        if (filteredCommands.length === 0) {
+          return 0;
+        }
+
+        const newIndex = Math.min(filteredCommands.length - 1, i + 1);
+        const sb = scrollRef.current;
+        if (sb) {
+          const viewportHeight = sb.viewport.height;
+          const visibleEnd = sb.scrollTop + viewportHeight - 1;
+          if (newIndex > visibleEnd) {
+            sb.scrollTo(newIndex - viewportHeight + 1);
+          }
+        }
+        return newIndex;
+      });
+    }
+  });
+
+  return {
+    showCommandMenu,
+    commandQuery,
+    selectedIndex,
+    scrollRef,
+    handleContentChange,
+    resolveCommand,
+    setSelectedIndex,
+  };
+};

package/src/components/dialog-search-list.tsx

@@ -0,0 +1,127 @@
+import { useCallback, useRef, useState, type ReactNode } from "react";
+import { TextAttributes, type InputRenderable, type ScrollBoxRenderable } from "@opentui/core";
+import { useKeyboard } from "@opentui/react";
+import { useKeyboardLayer } from "../providers/keyboard-layer";
+import { useTheme } from "../providers/theme";
+
+const MAX_VISIBLE_ITEMS = 6;
+
+type DialogSearchListProps<T> = {
+  items: T[];
+  onSelect: (item: T) => void;
+  onHighlight?: (item: T) => void;
+  filterFn: (item: T, query: string) => boolean;
+  renderItem: (item: T, isSelected: boolean) => ReactNode;
+  getKey: (item: T) => string;
+  placeholder?: string;
+  emptyText?: string;
+};
+
+export function DialogSearchList<T>({
+  items,
+  onSelect,
+  onHighlight,
+  filterFn,
+  renderItem,
+  getKey,
+  placeholder = "Search",
+  emptyText = "No results",
+}: DialogSearchListProps<T>) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [searchValue, setSearchValue] = useState("");
+  const inputRef = useRef<InputRenderable>(null);
+  const scrollRef = useRef<ScrollBoxRenderable>(null);
+  const { isTopLayer } = useKeyboardLayer();
+  const { colors } = useTheme();
+
+  const handleContentChange = useCallback(() => {
+    const text = inputRef.current?.value ?? "";
+    setSearchValue(text);
+    setSelectedIndex(0);
+
+    const scrollbox = scrollRef.current;
+    if (scrollbox) {
+      scrollbox.scrollTo(0);
+    }
+  }, []);
+    
+  const filtered = searchValue 
+    ? items.filter((item) => filterFn(item, searchValue)) : items;
+
+  const visibleHeight = Math.min(filtered.length, MAX_VISIBLE_ITEMS);
+
+  useKeyboard((key) => {
+    if (!isTopLayer("dialog")) return;
+
+    if (key.name === "return" || key.name === "enter") {
+      const item = filtered[selectedIndex];
+      if (item) {
+        onSelect(item);
+      }
+    } else if (key.name === "up") {
+      setSelectedIndex((i) => {
+        const newIndex = Math.max(0, i - 1);
+        const sb = scrollRef.current;
+        if (sb && newIndex < sb.scrollTop) {
+          sb.scrollTo(newIndex);
+        }
+        const item = filtered[newIndex];
+        if (item && onHighlight) onHighlight(item);
+        return newIndex;
+      });
+    } else if (key.name === "down") {
+      setSelectedIndex((i) => {
+        const newIndex = Math.min(filtered.length - 1, i + 1);
+        const sb = scrollRef.current;
+        if (sb) {
+          const viewportHeight = sb.viewport.height;
+          const visibleEnd = sb.scrollTop + viewportHeight - 1;
+          if (newIndex > visibleEnd) {
+            sb.scrollTo(newIndex - viewportHeight + 1);
+          }
+        }
+        const item = filtered[newIndex];
+        if (item && onHighlight) onHighlight(item);
+        return newIndex;
+      });
+    }
+  });
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <input
+        ref={inputRef}
+        placeholder={placeholder}
+        focused
+        onContentChange={handleContentChange}
+      />
+      {filtered.length === 0 ? (
+        <text attributes={TextAttributes.DIM}>
+          {emptyText}
+        </text>
+      ) : (
+        <scrollbox ref={scrollRef} height={visibleHeight}>
+          {filtered.map((item, i) => {
+            const isSelected = i === selectedIndex;
+            return (
+              <box
+                key={getKey(item)}
+                flexDirection="row"
+                height={1}
+                overflow="hidden"
+                backgroundColor={isSelected ? colors.selection : undefined}
+                onMouseMove={() => {
+                  setSelectedIndex(i);
+                  if (onHighlight) onHighlight(item);
+                }}
+                onMouseDown={() => onSelect(item)}
+              >
+                {renderItem(item, isSelected)}
+              </box>
+            )
+          })}
+        </scrollbox>
+      )}
+    </box>
+  );
+};

package/src/components/dialogs/agents-dialog.tsx

@@ -0,0 +1,47 @@
+import { useCallback } from "react";
+import { useDialog } from "../../providers/dialog";
+import { DialogSearchList } from "../dialog-search-list";
+import { Mode, type ModeType } from "@nightcode/shared";
+
+const AVAILABLE_MODES: ModeType[] = [Mode.BUILD, Mode.PLAN];
+
+type AgentsDialogContentProps = {
+  currentMode: ModeType;
+  onSelectMode: (mode: ModeType) => void;
+};
+
+function getModeLabel(mode: ModeType) {
+  return mode === Mode.PLAN ? "Plan" : "Build";
+}
+
+export const AgentsDialogContent = ({ 
+  currentMode, 
+  onSelectMode 
+}: AgentsDialogContentProps) => {
+  const dialog = useDialog();
+
+  const handleSelect = useCallback(
+    (nextMode: ModeType) => {
+      onSelectMode(nextMode);
+      dialog.close();
+    },
+    [onSelectMode, dialog],
+  );
+
+  return (
+    <DialogSearchList
+      items={AVAILABLE_MODES}
+      onSelect={handleSelect}
+      filterFn={(item, query) => getModeLabel(item).toLowerCase().includes(query.toLowerCase())}
+      renderItem={(item, isSelected) => (
+        <text selectable={false} fg={isSelected ? "black" : "white"}>
+          {item === currentMode ? " • " : "   "}
+          {getModeLabel(item)}
+        </text>
+      )}
+      getKey={(item) => item}
+      placeholder="Search agents"
+      emptyText="No matching agents"
+    />
+  );
+};

package/src/components/dialogs/index.tsx

@@ -0,0 +1,4 @@
+export { ThemeDialogContent } from "./theme-dialog";
+export { SessionsDialogContent } from "./sessions-dialog";
+export { AgentsDialogContent } from "./agents-dialog";
+export { ModelsDialogContent } from "./models-dialog";