@suchitraswain/nightcode-cli 1.0.0

package/src/providers/theme/index.tsx

@@ -0,0 +1,75 @@
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+import { createContext, useContext, useState, useCallback } from "react";
+import type { ReactNode } from "react";
+import type { ThemeColors, Theme } from "../../theme";
+import { DEFAULT_THEME, THEMES } from "../../theme";
+
+const CONFIG_DIR = join(homedir(), ".nightcode");
+const THEME_PREFERENCES_PATH = join(CONFIG_DIR, "preferences.json");
+
+type ThemePreferences = {
+  themeName: string;
+};
+
+function getInitialTheme(): Theme {
+  try {
+    const preferences = JSON.parse(
+      readFileSync(THEME_PREFERENCES_PATH, "utf8"),
+    ) as Partial<ThemePreferences>;
+    const savedTheme = THEMES.find((theme) => theme.name === preferences.themeName);
+    return savedTheme ?? DEFAULT_THEME;
+  } catch {
+    return DEFAULT_THEME;
+  }
+};
+
+function persistTheme(theme: Theme) {
+  try {
+    mkdirSync(CONFIG_DIR, { recursive: true });
+    writeFileSync(
+      THEME_PREFERENCES_PATH,
+      JSON.stringify({ themeName: theme.name } satisfies ThemePreferences, null, 2),
+      "utf8",
+    );
+  } catch {
+    // Ignore preference write failures so theme switching still works for this session.
+  }
+};
+
+type ThemeContextValue = {
+  colors: ThemeColors;
+  currentTheme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function useTheme(): ThemeContextValue {
+  const value = useContext(ThemeContext);
+  if (!value) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return value;
+}
+
+type ThemeProviderProps = {
+  children: ReactNode;
+};
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const [currentTheme, setCurrentTheme] = useState<Theme>(getInitialTheme);
+
+  const setTheme = useCallback((theme: Theme) => {
+    setCurrentTheme(theme);
+    persistTheme(theme);
+  }, []);
+
+  return (
+    <ThemeContext.Provider 
+      value={{ colors: currentTheme.colors, currentTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/src/providers/toast/index.tsx

@@ -0,0 +1,118 @@
+import { 
+  createContext, 
+  useContext, 
+  useRef, 
+  useState, 
+  useCallback,
+  useMemo
+} from "react";
+import type { ReactNode } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { ToastOptions, ToastVariant } from "./types";
+import { DEFAULT_DURATION } from "./types";
+import { SplitBorderChars } from "../../components/border";
+import { useTheme } from "../theme";
+
+export type ToastContextValue = {
+  show: (options: ToastOptions) => void;
+};
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast(): ToastContextValue {
+  const value = useContext(ToastContext);
+  if (!value) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+
+  return value;
+};
+
+type ToastProviderProps = {
+  children: ReactNode;
+};
+
+export function ToastProvider({ children }: ToastProviderProps) {
+  const [currentToast, setCurrentToast] = useState<ToastOptions | null>(null);
+  const timeoutHandleRef = useRef<NodeJS.Timeout | null>(null);
+
+  const clearCurrentTimeout = useCallback(() => {
+    if (timeoutHandleRef.current) {
+      clearTimeout(timeoutHandleRef.current);
+      timeoutHandleRef.current = null;
+    }
+  }, []);
+
+  const show = useCallback((options: ToastOptions) => {
+    const duration = options.duration ?? DEFAULT_DURATION;
+
+    clearCurrentTimeout();
+
+    setCurrentToast({
+      variant: options.variant ?? "info",
+      ...options,
+      duration,
+    });
+
+    timeoutHandleRef.current = setTimeout(() => {
+      setCurrentToast(null);
+    }, duration).unref();
+  }, [clearCurrentTimeout]);
+
+  const value = useMemo(() => ({ show }), [show]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <Toast currentToast={currentToast} />
+    </ToastContext.Provider>
+  );
+};
+
+type ToastProps = {
+  currentToast: ToastOptions | null;
+};
+
+function Toast({ currentToast }: ToastProps) {
+  const { width } = useTerminalDimensions();
+  const { colors } = useTheme();
+
+  if (!currentToast) {
+    return null;
+  }
+
+  const variantColors: Record<ToastVariant, string> = {
+    success: colors.success,
+    error: colors.error,
+    info: colors.info,
+  };
+
+  const borderColor = currentToast.variant
+    ? variantColors[currentToast.variant]
+    : variantColors.info;
+
+  return (
+    <box
+      position="absolute"
+      justifyContent="center"
+      alignItems="flex-start"
+      top={2}
+      right={2}
+      width={Math.max(1, Math.min(60, width - 6))}
+      paddingLeft={2}
+      paddingRight={2}
+      paddingTop={1}
+      paddingBottom={1}
+      backgroundColor={colors.surface}
+      borderColor={borderColor}
+      border={["left", "right"]}
+      customBorderChars={SplitBorderChars}
+    >
+      <box flexDirection="column" gap={1} width="100%">
+        <text fg="#E1E1E1" wrapMode="word" width="100%">
+          {currentToast.message}
+        </text>
+      </box>
+    </box>
+  );
+};

package/src/providers/toast/types.ts

@@ -0,0 +1,9 @@
+export type ToastVariant = "success" | "error" | "info";
+
+export type ToastOptions = {
+  message: string;
+  variant?: ToastVariant;
+  duration?: number;
+};
+
+export const DEFAULT_DURATION = 3000;

package/src/screens/home.tsx

@@ -0,0 +1,39 @@
+import { useCallback } from "react";
+import { useNavigate } from "react-router";
+import { Header } from "../components/header";
+import { InputBar } from "../components/input-bar";
+import { usePromptConfig } from "../providers/prompt-config";
+import { TextAttributes } from "@opentui/core";
+
+export function Home() {
+  const navigate = useNavigate();
+  const { mode, model } = usePromptConfig();
+
+  const handleSubmit = useCallback(
+    (text: string) => {
+      navigate("/sessions/new", { state: { message: text, mode, model } });
+    },
+    [navigate, mode, model],
+  );
+
+  return (
+    <box
+      alignItems="center"
+      justifyContent="center"
+      flexGrow={1}
+      gap={2}
+      position="relative"
+      width="100%"
+      height="100%"
+    >
+      <Header />
+      <box width="100%" maxWidth={78} paddingX={2} flexDirection="column" gap={1}>
+        <InputBar onSubmit={handleSubmit} />
+        <box flexDirection="row" gap={1} flexShrink={0} marginLeft="auto">
+          <text>tab</text>
+          <text attributes={TextAttributes.DIM}>agents</text>
+        </box>
+      </box>
+    </box>
+  );
+};

package/src/screens/new-session.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useMemo, useRef } from "react";
+import { z } from "zod";
+import { Mode, modeSchema } from "@nightcode/shared";
+import { useNavigate, useLocation } from "react-router";
+import { SessionShell } from "../components/session-shell";
+import { UserMessage } from "../components/messages";
+import { useToast } from "../providers/toast";
+import { apiClient } from "../lib/api-client";
+import { getErrorMessage } from "../lib/http-errors";
+
+const newSessionStateSchema = z.object({
+  message: z.string(),
+  mode: modeSchema,
+  model: z.string(),
+});
+
+export function NewSession() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const toast = useToast();
+  const hasStartedRef = useRef(false);
+
+  const state = useMemo(() => {
+    const parsed = newSessionStateSchema.safeParse(location.state);
+    return parsed.success ? parsed.data : null;
+  }, [location.state])
+
+  // Guard: if navigated here directly without state, go home
+  useEffect(() => {
+    if (!state) {
+      navigate("/", { replace: true });
+    }
+  }, [state, navigate]);
+
+  // Create the session on mount — this screen exists to do this
+  useEffect(() => {
+    if (!state || hasStartedRef.current) return;
+
+    hasStartedRef.current = true;
+
+    let ignore = false;
+    const createSession = async () => {
+      try {
+        const res = await apiClient.sessions.$post({
+          json: {
+            title: state.message.slice(0, 100),
+          },
+        });
+
+        if (ignore) return;
+        if (!res.ok) {
+          throw new Error(await getErrorMessage(res));
+        }
+        const session = await res.json();
+        navigate(
+          `/sessions/${session.id}`,
+          { replace: true, state: { session, initialPrompt: state } }
+        );
+      } catch (error) {
+        if (ignore) return;
+        toast.show({
+          variant: "error",
+          message: error instanceof Error ? error.message : "Failed to create session",
+        });
+        navigate("/", { replace: true });
+      }
+    };
+
+    createSession();
+    return () => {
+      ignore = true;
+    };
+  }, [state, navigate, toast]);
+
+  if (!state) return null;
+
+  return (
+    <SessionShell onSubmit={() => {}} inputDisabled loading>
+      <UserMessage message={state.message} mode={state.mode} />
+    </SessionShell>
+  );
+};

package/src/screens/session.tsx

@@ -0,0 +1,171 @@
+import { useState, useEffect, useMemo, useRef } from "react";
+import { useParams, useLocation, useNavigate } from "react-router";
+import { z } from "zod";
+import { useKeyboard } from "@opentui/react";
+import { type ModeType, type SupportedChatModelId, type SessionRecord } from "@nightcode/shared";
+import { SessionShell } from "../components/session-shell";
+import { 
+  UserMessage, 
+  BotMessage, 
+  ErrorMessage
+} from "../components/messages";
+import { useToast } from "../providers/toast";
+import { useChat } from "../hooks/use-chat";
+import { usePromptConfig } from "../providers/prompt-config";
+import type { Message } from "../hooks/use-chat";
+import { apiClient } from "../lib/api-client";
+import { getErrorMessage } from "../lib/http-errors";
+import { useKeyboardLayer } from "../providers/keyboard-layer";
+
+type SessionData = SessionRecord;
+
+const sessionLocationSchema = z.object({
+  session: z.custom<SessionData>((val) => val != null && typeof val === "object" && "id" in val),
+  initialPrompt: z
+    .object({
+      message: z.string(),
+      mode: z.custom<ModeType>(),
+      model: z.custom<SupportedChatModelId>(),
+    })
+    .optional(),
+});
+
+function ChatMessage(
+  { msg }: {
+    msg: Message
+  }
+) {
+  if (msg.role === "user") {
+    const text = msg.parts
+      .filter((p) => p.type === "text")
+      .map((p) => p.text)
+      .join("");
+
+    return <UserMessage message={text} mode={msg.metadata?.mode ?? "BUILD"} />;
+  }
+
+  return (
+    <BotMessage
+      parts={msg.parts}
+      model={msg.metadata?.model ?? "unknown"}
+      mode={msg.metadata?.mode ?? "BUILD"}
+      durationMs={msg.metadata?.durationMs}
+      streaming={false}
+    />
+  );
+};
+
+function SessionChat({ 
+  session,
+  initialPrompt,
+}: { 
+  session: SessionData,
+  initialPrompt?: { message: string; mode: ModeType; model: SupportedChatModelId };
+}) {
+  const [initialMessages] = useState(() => session.messages as unknown as Message[]);
+  const { mode, model } = usePromptConfig();
+  const { isTopLayer } = useKeyboardLayer();
+  const { messages, status, submit, abort, interrupt, error } = useChat(
+    session.id,
+    initialMessages
+  );
+  const hasSubmittedInitialPromptRef = useRef(false);
+
+  // Stop the pending reply when the user leaves this session.
+  useEffect(() => {
+    return () => {
+      void abort();
+    };
+  }, [abort]);
+
+  // Let the user cancel a reply even before the first streamed chunk arrives.
+  useKeyboard((key) => {
+    if (key.name === "escape" && isTopLayer("base") && status === "streaming") {
+      key.preventDefault();
+      interrupt();
+    }
+  });
+
+  useEffect(() => {
+    if (!initialPrompt || hasSubmittedInitialPromptRef.current) return;
+    hasSubmittedInitialPromptRef.current = true;
+    void submit({
+      userText: initialPrompt.message,
+      mode: initialPrompt.mode,
+      model: initialPrompt.model,
+    });
+  }, [initialPrompt, submit]);
+
+  return (
+    <SessionShell
+      onSubmit={(text) => submit({ userText: text, mode, model })}
+      loading={status === "submitted" || status === "streaming"}
+      interruptible={status === "submitted" || status === "streaming"}
+    >
+      {messages.map((msg) => (
+        <ChatMessage key={msg.id} msg={msg} />
+      ))}
+      {error && <ErrorMessage message={error.message} />}
+    </SessionShell>
+  );
+}
+
+export function Session() {
+  const { id } = useParams();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const toast = useToast();
+
+  const prefetched = useMemo(() => {
+    const parsed = sessionLocationSchema.safeParse(location.state);
+    return parsed.success ? parsed.data : null;
+  }, [location.state]);
+
+  const [session, setSession] = useState<SessionData | null>(prefetched?.session ?? null);
+
+  useEffect(() => {
+    // Skip fetch if session was passed via location state
+    if (prefetched?.session) return;
+
+    setSession(null);
+
+    if (!id) return;
+
+    let ignore = false;
+    const fetchSession = async () => {
+      try {
+        const res = await apiClient.sessions[":id"].$get({ 
+          param: { id },
+        });
+        if (ignore) return;
+        if (!res.ok) throw new Error(await getErrorMessage(res));
+        const resolved = await res.json();
+        setSession(resolved);
+      } catch (err) {
+        if (ignore) return;
+        toast.show({
+          variant: "error",
+          message: err instanceof Error ? err.message : "Failed to load session",
+        });
+        navigate("/", { replace: true });
+      }
+    };
+
+    fetchSession();
+    return () => {
+      ignore = true;
+    };
+  }, [id, prefetched, toast, navigate]);
+
+  if (!session) {
+    return <SessionShell onSubmit={() => {}} inputDisabled loading />;
+  }
+
+  return (
+    <SessionChat 
+      key={session.id} 
+      session={session} 
+      initialPrompt={prefetched?.initialPrompt}
+    />
+  );
+};