03: routing and screen layout

packages/cli/package.json

@@ -16,6 +16,8 @@
   "dependencies": {
     "@opentui/core": "^0.2.10",
     "@opentui/react": "^0.2.10",
-    "react": "^19.2.6"
+    "opentui-spinner": "^0.0.7",
+    "react": "^19.2.6",
+    "react-router": "^7.17.0"
   }
 }

packages/cli/src/components/messages/bot-message.tsx

@@ -0,0 +1,27 @@
+import { useTheme } from "../../providers/theme";
+
+type Props = {
+    content: string;
+    model: string;
+};
+
+export function BotMessage({content, model} : Props){
+    const { colors } = useTheme();
+
+    return (
+        <box width="100%" alignItems="center">
+            <box paddingY={1} width="100%">
+                <box paddingX={3} width="100%">
+                    <text>{content}</text>
+                </box>
+            </box>
+
+            <box paddingX={3} paddingBottom={1} gap={1} width="100%">
+                <box flexDirection="row" gap={2}>
+                    <text fg={colors.primary}>&#9673;</text>
+                    <text>{model}</text>
+                </box>  
+            </box>
+        </box>
+    )
+}

packages/cli/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>
+    )
+}

packages/cli/src/components/messages/index.tsx

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

packages/cli/src/components/messages/user-message.tsx

@@ -0,0 +1,35 @@
+import { EmptyBorder } from "../border";
+import { useTheme } from "../../providers/theme";
+
+type Props = {
+    message: string;
+};
+
+export function UserMessage({message} : Props){
+    const { colors } = useTheme();
+
+    return (
+        <box width="100%" alignItems="center">
+            <box
+                border={["left"]}
+                borderColor={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>
+    )
+}

packages/cli/src/components/session-shell.tsx

@@ -0,0 +1,59 @@
+import { TextAttributes } from "@opentui/core";
+import type { ReactNode } from "react";
+import { InputBar } from "./input-bar";
+import { Spinner } from "./spinner";
+
+type Props = {
+    children?: ReactNode;
+    onSubmit: (text: string) => void;
+    inputDisabled?: boolean;
+    loading?: boolean;
+};
+
+export function SessionShell({
+    children,
+    onSubmit,
+    inputDisabled = false,
+    loading = false,
+}: Props) {
+    return (
+        <box
+            flexDirection="column"
+            flexGrow={1}
+            width="100%"
+            paddingY={1}
+            paddingX={2}
+            gap={1}
+        >   
+            <scrollbox
+                flexGrow={1}
+                width="100%"
+                stickyScroll
+                stickyStart="bottom"
+            >
+                <box gap={1}>{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/> : null} 
+                </box>
+
+                <box flexDirection="row" gap={1} flexShrink={0} marginLeft="auto">
+                    <text>tab</text>
+                    <text attributes={TextAttributes.DIM}>agents</text>
+                </box>
+            </box>
+        </box>
+    );
+};

packages/cli/src/components/spinner.tsx

@@ -0,0 +1,8 @@
+import "opentui-spinner/react";
+import { useTheme } from "../providers/theme";
+
+export function Spinner(){
+    const { colors } = useTheme();
+
+    return <spinner name="line" color={colors.primary}/>
+};

packages/cli/src/index.tsx

@@ -1,42 +1,35 @@
 import { createCliRenderer } from "@opentui/core";
 import { createRoot } from "@opentui/react";
-import { Header } from "./components/header";
-import { InputBar } from "./components/input-bar";
-import { ToastProvider } from "./providers/toast";
-import { KeyboardLayerProvider } from "./providers/keyboard-layer";
-import { DialogProvider } from "./providers/dialog";
-import { ThemeProvider, useTheme } from "./providers/theme";
+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/sessions";
 
-function ThemedRoot(){
-  const { colors } = useTheme();
+const router = createMemoryRouter([
+  {
+    path: "/",
+    element: <RootLayout/>,
+    children: [
+      {
+        index: true,
+        element: <Home />
+      },
+      {
+        path: "session/new",
+        element: <NewSession />
+      },
+      {
+        path: "session/:id",
+        element: <Session />
+      },
+    ]
+  }
+])
 
-  return (
-    <box
-      alignItems="center"
-      justifyContent="center"
-      backgroundColor={colors.background}
-      width="100%"
-      height="100%"
-      gap={2}
-    >
-      <Header />
-      <box width="100%" maxWidth={78} paddingX={2}>
-        <InputBar onSubmit={() => {}} />
-      </box>
-    </box>
-  )
-}
 function App() {
   return (
-    <ThemeProvider>
-      <KeyboardLayerProvider>
-        <DialogProvider>
-          <ToastProvider>
-            <ThemedRoot />
-          </ToastProvider>
-        </DialogProvider>
-      </KeyboardLayerProvider>
-    </ThemeProvider>
+    <RouterProvider router={router}/>
   );
 }
 

packages/cli/src/layouts/root-layout.tsx

@@ -0,0 +1,22 @@
+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";
+
+export function RootLayout(){
+    return (
+        <ThemeProvider>
+          <KeyboardLayerProvider>
+            <DialogProvider>
+              <ToastProvider>
+                <ThemedRoot>
+                    <Outlet/>
+                </ThemedRoot>
+              </ToastProvider>
+            </DialogProvider>
+          </KeyboardLayerProvider>
+        </ThemeProvider>
+      );
+}

packages/cli/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>
+  )
+}

packages/cli/src/providers/theme/index.tsx

@@ -6,7 +6,7 @@ import type { ReactNode } from "react";
 import type { ThemeColors, Theme } from "../../theme";
 import { DEFAULT_THEME, THEMES } from "../../theme";
 
-const CONFIG_DIR = join(homedir(), ".nightcode");
+const CONFIG_DIR = join(homedir(), ".voidcode");
 const THEME_PREFERENCES_PATH = join(CONFIG_DIR, "preferences.json");
 
 type ThemePreferences = {