@suchitraswain/nightcode-cli 1.0.0

package/src/components/messages/bot-message.tsx

@@ -0,0 +1,160 @@
+import prettyMs from "pretty-ms";
+import { EmptyBorder } from "../border";
+import { useTheme } from "../../providers/theme";
+import type { Message } from "../../hooks/use-chat";
+import { Mode, type ModeType } from "@nightcode/shared";
+import { TextAttributes } from "@opentui/core";
+
+type ClientMessagePart = Message["parts"][number];
+type ToolPart = Extract<ClientMessagePart, { type: `tool-${string}` | "dynamic-tool" }>;
+
+type Props = {
+  parts: ClientMessagePart[];
+  model: string;
+  mode: ModeType;
+  durationMs?: number;
+  streaming?: boolean;
+};
+
+function formatToolName(name: string): string {
+  return name
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/^./, (c) => c.toUpperCase());
+};
+
+function isToolPart(part: ClientMessagePart): part is ToolPart {
+  return part.type === "dynamic-tool" || part.type.startsWith("tool-");
+};
+
+function formatToolArgs(tc: ToolPart): string {
+  if (!("input" in tc) || tc.input == null) return "";
+  if (typeof tc.input !== "object") return String(tc.input);
+  return Object.values(tc.input).map(String).join(" ");
+}
+
+type PartGroup = {
+  type: ClientMessagePart["type"];
+  parts: ClientMessagePart[];
+  key: string;
+};
+
+function groupConsecutiveParts(parts: ClientMessagePart[]): PartGroup[] {
+  const groups: PartGroup[] = [];
+
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i]!;
+    const lastGroup = groups[groups.length - 1];
+
+     if (lastGroup && lastGroup.type === part.type) {
+      lastGroup.parts.push(part);
+     } else {
+      const key = 
+        isToolPart(part) ? `group-tc-${part.toolCallId}` : `group-${part.type}-${i}`;
+      groups.push({ type: part.type, parts: [part], key });
+     }
+  }
+
+  return groups;
+};
+
+export function BotMessage({ 
+  parts,
+  model,
+  mode,
+  durationMs,
+  streaming = false,
+}: Props) {
+  const { colors } = useTheme();
+  return (
+    <box width="100%" alignItems="center">
+      {groupConsecutiveParts(parts).map((group, i) => (
+        <box key={group.key} width="100%" paddingTop={i === 0 ? 0 : 1}>
+          {group.parts.map((part, j) => {
+            if (part.type === "reasoning") {
+              return (
+                <box
+                  key={`reasoning-${j}`}
+                  border={["left"]}
+                  borderColor={colors.thinkingBorder}
+                  customBorderChars={{
+                    ...EmptyBorder,
+                    vertical: "│",
+                  }}
+                  width="100%"
+                  paddingX={2}
+                >
+                  <text attributes={TextAttributes.DIM}>
+                    <em fg={colors.thinking}>Thinking:</em> {part.text}
+                  </text>
+                </box>
+              );
+            }
+
+            if (isToolPart(part)) {
+              const toolName =
+                part.type === "dynamic-tool" ? part.toolName : part.type.slice("tool-".length);
+
+              return (
+                <box
+                  key={part.toolCallId}
+                  border={["left"]}
+                  borderColor={colors.thinkingBorder}
+                  customBorderChars={{
+                    ...EmptyBorder,
+                    vertical: "│",
+                  }}
+                  width="100%"
+                  paddingX={2}
+                >
+                  <text attributes={TextAttributes.DIM}>
+                    <em fg={colors.info}>{formatToolName(toolName)}:</em> {formatToolArgs(part)}
+                    {part.state !== "output-available" && part.state !== "output-error" 
+                      ? " …" 
+                      : ""
+                    }
+                    {part.state === "output-error" ? ` ${part.errorText}` : ""}
+                  </text>
+                </box>
+              );
+            }
+
+            if (part.type === "text") {
+              return (
+                <box key={`text-${j}`} paddingX={3} width="100%">
+                  <text>{part.text}</text>
+                </box>
+              );
+            }
+            
+            return null;
+          })}
+        </box>
+      ))}
+
+      <box paddingX={3} paddingY={1} gap={1} width="100%">
+        <box flexDirection="row" gap={2}>
+          <text fg={mode === Mode.PLAN ? colors.planMode : colors.primary}>◉</text>
+          <box flexDirection="row" gap={1}>
+            <text>
+              {mode === Mode.PLAN ? "Plan" : "Build"}
+            </text>
+            <text attributes={TextAttributes.DIM} fg={colors.dimSeparator}>
+              ›
+            </text>
+            <text attributes={TextAttributes.DIM}>{model}</text>
+            {(durationMs != null) && (
+              <>
+                <text attributes={TextAttributes.DIM} fg={colors.dimSeparator}>
+                  ›
+                </text>
+                <text attributes={TextAttributes.DIM}>
+                  {prettyMs(durationMs)}
+                </text>
+              </>
+            )}
+          </box>
+        </box>
+      </box>
+    </box>
+  );
+};

package/src/components/messages/error-message.tsx

@@ -0,0 +1,36 @@
+import { TextAttributes } from "@opentui/core";
+import { EmptyBorder } from "../border";
+import { useTheme } from "../../providers/theme";
+
+type Props = {
+  message: string;
+};
+
+export function ErrorMessage({ message }: Props) {
+  const { colors } = useTheme();
+
+  return (
+    <box width="100%" alignItems="center">
+      <box
+        border={["left"]}
+        borderColor={colors.error}
+        width="100%"
+        customBorderChars={{
+          ...EmptyBorder,
+          vertical: "┃",
+          bottomLeft: "╹",
+        }}
+      >
+        <box
+          justifyContent="center"
+          paddingX={2}
+          paddingY={1}
+          backgroundColor={colors.surface}
+          width="100%"
+        >
+          <text attributes={TextAttributes.DIM}>{message}</text>
+        </box>
+      </box>
+    </box>
+  );
+};

package/src/components/messages/index.tsx

@@ -0,0 +1,3 @@
+export { ErrorMessage } from "./error-message";
+export { UserMessage } from "./user-message";
+export { BotMessage } from "./bot-message";

package/src/components/messages/user-message.tsx

@@ -0,0 +1,36 @@
+import { Mode, type ModeType } from "@nightcode/shared";
+import { EmptyBorder } from "../border";
+import { useTheme } from "../../providers/theme";
+
+type Props = {
+  message: string;
+  mode: ModeType;
+};
+
+export function UserMessage({ message, mode }: Props) {
+  const { colors } = useTheme();
+
+  return (
+    <box width="100%" alignItems="center">
+      <box
+        border={["left"]}
+        borderColor={mode === Mode.PLAN ? colors.planMode : colors.primary}        width="100%"
+        customBorderChars={{
+          ...EmptyBorder,
+          vertical: "┃",
+          bottomLeft: "╹",
+        }}
+      >
+        <box
+          justifyContent="center"
+          paddingX={2}
+          paddingY={1}
+          backgroundColor={colors.surface}
+          width="100%"
+        >
+          <text>{message}</text>
+        </box>
+      </box>
+    </box>
+  );
+};

package/src/components/session-shell.tsx

@@ -0,0 +1,65 @@
+import { TextAttributes } from "@opentui/core";
+import type { ReactNode } from "react";
+import { InputBar } from "./input-bar";
+import { Spinner } from "./spinner";
+import { usePromptConfig } from "../providers/prompt-config";
+
+type Props = {
+  children?: ReactNode;
+  onSubmit: (text: string) => void;
+  inputDisabled?: boolean;
+  loading?: boolean;
+  interruptible?: boolean;
+};
+
+export function SessionShell({
+  children,
+  onSubmit,
+  inputDisabled = false,
+  loading = false,
+  interruptible = false,
+}: Props) {
+  const { mode } = usePromptConfig();
+
+  return (
+    <box
+      flexDirection="column"
+      flexGrow={1}
+      width="100%"
+      height="100%"
+      paddingY={1}
+      paddingX={2}
+      gap={1}
+    >
+      <scrollbox flexGrow={1} width="100%" stickyScroll stickyStart="bottom">
+        <box>{children}</box>
+      </scrollbox>
+      <box flexShrink={0}>
+        <InputBar onSubmit={onSubmit} disabled={inputDisabled} />
+      </box>
+      <box
+        flexShrink={0}
+        flexDirection="row"
+        justifyContent="space-between"
+        width="100%"
+        height={1}
+        gap={2}
+        paddingLeft={1}
+      >
+        <box flexDirection="row" alignItems="center" gap={2}>
+          {loading ? (
+            <>
+              <Spinner mode={mode} />
+              {interruptible ? <text>esc to interrupt</text> : null}
+            </>
+          ) : null}
+        </box>
+
+        <box flexDirection="row" gap={1} flexShrink={0} marginLeft="auto">
+          <text>tab</text>
+          <text attributes={TextAttributes.DIM}>agents</text>
+        </box>
+      </box>
+    </box>
+  );
+};

package/src/components/spinner.tsx

@@ -0,0 +1,14 @@
+import "opentui-spinner/react";
+import { Mode, type ModeType } from "@nightcode/shared";
+import { useTheme } from "../providers/theme";
+
+type Props = {
+  mode?: ModeType;
+};
+
+export function Spinner({ mode = Mode.BUILD }: Props) {
+  const { colors } = useTheme();
+  const activeColor = mode === Mode.PLAN ? colors.planMode : colors.primary;
+
+  return <spinner name="aesthetic" color={activeColor} />;
+};

package/src/components/status-bar.tsx

@@ -0,0 +1,23 @@
+import { TextAttributes } from "@opentui/core";
+import { useTheme } from "../providers/theme";
+import { usePromptConfig } from "../providers/prompt-config";
+import { Mode } from "@nightcode/shared";
+
+export function StatusBar() {
+  const { mode, model } = usePromptConfig();
+  const { colors } = useTheme();
+
+  return (
+    <box flexDirection="row" gap={1}>
+      
+      <text fg={mode === Mode.PLAN ? colors.planMode : colors.primary}>
+        {mode === Mode.PLAN ? "Plan" : "Build"}
+      </text>
+
+      <text attributes={TextAttributes.DIM} fg={colors.dimSeparator}>
+        ›
+      </text>
+      <text>{model}</text>
+    </box>
+  );
+};

package/src/hooks/use-chat.ts

@@ -0,0 +1,107 @@
+import { useMemo } from "react";
+import { useChat as useAiChat } from "@ai-sdk/react";
+import {
+  DefaultChatTransport,
+  type InferUITools,
+  lastAssistantMessageIsCompleteWithToolCalls,
+  type LanguageModelUsage,
+  type UIMessage,
+} from "ai";
+import { type ModeType, type SupportedChatModelId, type ToolContracts } from "@nightcode/shared";
+import { apiClient } from "../lib/api-client";
+import { getAuth } from "../lib/auth";
+import { executeLocalTool } from "../lib/local-tools";
+
+export type ChatMessageMetadata = {
+  mode?: ModeType;
+  model?: SupportedChatModelId | string;
+  durationMs?: number;
+  usage?: LanguageModelUsage;
+};
+
+type ChatTools = {
+  [Name in keyof InferUITools<ToolContracts>]: {
+    input: InferUITools<ToolContracts>[Name]["input"];
+    output: unknown;
+  };
+};
+
+export type Message = UIMessage<ChatMessageMetadata, never, ChatTools>;
+
+export function useChat(sessionId: string, initialMessages: Message[]) {
+  const transport = useMemo(() => {
+    return new DefaultChatTransport<Message>({
+      api: apiClient.chat.$url().toString(),
+      headers() {
+        const auth = getAuth();
+        return auth ? { Authorization: `Bearer ${auth.token}` } : new Headers();
+      },
+      prepareSendMessagesRequest({ messages }) {
+        const message = messages[messages.length - 1];
+        if (!message) throw new Error("No message to send");
+
+        const metadata = messages.findLast(
+          (m) => m.metadata?.mode && m.metadata?.model,
+        )?.metadata;
+        const previousMessage = messages[messages.length - 2];
+        const requestMessages =
+          message.role === "assistant" && previousMessage?.role === "user"
+            ? [previousMessage, message]
+            : [message];
+
+        return {
+          body: {
+            id: sessionId,
+            messages: requestMessages,
+            mode: message.metadata?.mode ?? metadata?.mode,
+            model: message.metadata?.model ?? metadata?.model,
+          },
+        }
+      }
+    });
+  }, [sessionId]);
+
+  const chat = useAiChat<Message>({
+    id: sessionId,
+    messages: initialMessages,
+    transport,
+    onToolCall({ toolCall }) {
+      const mode = chat.messages.at(-1)?.metadata?.mode ?? "BUILD";
+
+      void executeLocalTool(toolCall.toolName, toolCall.input, mode)
+        .then((output) =>
+          chat.addToolOutput({
+            tool: toolCall.toolName as keyof ChatTools,
+            toolCallId: toolCall.toolCallId,
+            output,
+          }),
+        )
+        .catch((error) =>
+          chat.addToolOutput({
+            tool: toolCall.toolName as keyof ChatTools,
+            toolCallId: toolCall.toolCallId,
+            state: "output-error",
+            errorText: error instanceof Error ? error.message : String(error),
+          }),
+        );
+    },
+    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
+  });
+
+  return {
+    messages: chat.messages,
+    status: chat.status,
+    error: chat.error,
+    submit: (params: { userText: string; mode: ModeType; model: SupportedChatModelId }) => {
+      return chat.sendMessage({
+        text: params.userText,
+        metadata: {
+          mode: params.mode,
+          model: params.model,
+        },
+      })
+    },
+    abort: chat.stop,
+    interrupt: chat.stop,
+  };
+};

package/src/hosted-config.ts

@@ -0,0 +1,6 @@
+/** Baked-in config for the hosted API — safe to ship (no secrets). */
+export const HOSTED_CONFIG = {
+  API_URL: "https://nightcode-production.up.railway.app",
+  CLERK_FRONTEND_API: "https://meet-spider-0.clerk.accounts.dev",
+  CLERK_OAUTH_CLIENT_ID: "UoAp1kIZL8SfGqU7",
+} as const;

package/src/index.tsx

@@ -0,0 +1,29 @@
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import { createMemoryRouter, RouterProvider } from "react-router";
+import { RootLayout } from "./layouts/root-layout";
+import { Home } from "./screens/home";
+import { NewSession } from "./screens/new-session";
+import { Session } from "./screens/session";
+
+const router = createMemoryRouter([
+  {
+    path: "/",
+    element: <RootLayout />,
+    children: [
+      { index: true, element: <Home /> },
+      { path: "sessions/new", element: <NewSession /> },
+      { path: "sessions/:id", element: <Session /> },
+    ]
+  }
+]);
+
+function App() {
+  return <RouterProvider router={router} />
+}
+
+const renderer = await createCliRenderer({
+  targetFps: 60,
+  exitOnCtrlC: false,
+});
+createRoot(renderer).render(<App />);

package/src/layouts/root-layout.tsx

@@ -0,0 +1,25 @@
+import { Outlet } from "react-router";
+import { ToastProvider } from "../providers/toast";
+import { DialogProvider } from "../providers/dialog";
+import { KeyboardLayerProvider } from "../providers/keyboard-layer";
+import { ThemeProvider } from "../providers/theme";
+import { ThemedRoot } from "./themed-root";
+import { PromptConfigProvider } from "../providers/prompt-config";
+
+export function RootLayout() {
+  return (
+    <ThemeProvider>
+      <ToastProvider>
+        <KeyboardLayerProvider>
+          <DialogProvider>
+            <PromptConfigProvider>
+              <ThemedRoot>
+                <Outlet />
+              </ThemedRoot>
+            </PromptConfigProvider>
+          </DialogProvider>
+        </KeyboardLayerProvider>
+      </ToastProvider>
+    </ThemeProvider>
+  );
+};

package/src/layouts/themed-root.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { useTheme } from "../providers/theme";
+
+type Props = {
+  children: ReactNode;
+};
+
+export function ThemedRoot({ children }: Props) {
+  const { colors } = useTheme();
+
+  return (
+    <box 
+      backgroundColor={colors.background} 
+      width="100%" 
+      height="100%" 
+      flexGrow={1}
+    >
+      {children}
+    </box>
+  );
+};

package/src/lib/api-client.ts

@@ -0,0 +1,25 @@
+import { hc } from "hono/client";
+import { clearAuth, getAuth } from "./auth";
+
+const apiUrl = process.env.API_URL ?? "http://localhost:3000";
+
+export const apiClient = hc(apiUrl, {
+  fetch: async (
+    input: Parameters<typeof fetch>[0],
+    init?: Parameters<typeof fetch>[1],
+  ) => {
+    const headers = new Headers(init?.headers);
+    const auth = getAuth();
+
+    if (auth) {
+      headers.set("Authorization", `Bearer ${auth.token}`);
+    }
+
+    const response = await fetch(input, { ...init, headers });
+    if (response.status === 401) {
+      clearAuth();
+    }
+
+    return response;
+  },
+});

package/src/lib/auth.ts

@@ -0,0 +1,38 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync, unlinkSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+type AuthData = {
+  token: string;
+};
+
+const AUTH_DIR = join(homedir(), ".nightcode");
+const AUTH_FILE = join(AUTH_DIR, "auth.json");
+
+
+export function getAuth(): AuthData | null {
+  try {
+    const data = readFileSync(AUTH_FILE, "utf-8");
+    const parsed = JSON.parse(data) as Partial<AuthData>;
+    return typeof parsed.token === "string" ? { token: parsed.token } : null;
+  } catch {
+    return null;
+  }
+};
+
+export function saveAuth(data: AuthData) {
+  if (!existsSync(AUTH_DIR)) {
+    // Owner-only permissions (rwx------) so other users on the machine can't read tokens
+    mkdirSync(AUTH_DIR, { mode: 0o700 });
+  }
+  writeFileSync(AUTH_FILE, JSON.stringify(data), { mode: 0o600 });
+}
+
+export function clearAuth() {
+  try {
+    unlinkSync(AUTH_FILE);
+  } catch {
+    // File doesn't exist
+  }
+}
+

package/src/lib/http-errors.ts

@@ -0,0 +1,18 @@
+type ErrorResponse = {
+  json: () => Promise<unknown>;
+  status: number;
+  statusText: string;
+};
+
+export async function getErrorMessage(response: ErrorResponse) {
+  try {
+    const data = (await response.json()) as { error?: string };
+    if (typeof data.error === "string" && data.error.length > 0) {
+      return data.error;
+    }
+  } catch {
+    // Ignore invalid error payloads and fall back to the status text below.
+  }
+
+  return response.statusText || `Request failed with status ${response.status}`;
+};