mx-space · Innei · Feb 18, 2026 · Feb 19, 2026
diff --git a/apps/agent-ui/components.json b/apps/agent-ui/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/apps/agent-ui/eslint.config.mjs b/apps/agent-ui/eslint.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from '@lobehub/eslint-config'
+
+export default defineConfig({
+  react: true,
+  typescript: true,
+  sortKeys: false,
+})
diff --git a/apps/agent-ui/index.html b/apps/agent-ui/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0a0a0a" />
+    <title>MX Agent</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="dark">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/agent-ui/package.json b/apps/agent-ui/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@mx-space/agent-ui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@lexical/code": "^0.22.0",
+    "@lexical/link": "^0.22.0",
+    "@lexical/list": "^0.22.0",
+    "@lexical/markdown": "^0.22.0",
+    "@lexical/react": "^0.22.0",
+    "@lexical/rich-text": "^0.22.0",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-switch": "1.2.6",
+    "@radix-ui/react-toast": "1.2.15",
+    "@radix-ui/react-tooltip": "1.2.8",
+    "@streamdown/cjk": "latest",
+    "@streamdown/code": "latest",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lexical": "^0.22.0",
+    "lucide-react": "^0.564.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router": "^7.0.0",
+    "socket.io-client": "^4.8.0",
+    "streamdown": "latest",
+    "tailwind-merge": "^3.3.1",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.4.0",
+    "tailwindcss": "^4.1.0",
+    "tw-animate-css": "^1.3.3",
+    "typescript": "^5.7.3",
+    "vite": "^6.2.0"
+  }
+}
diff --git a/apps/agent-ui/src/app.tsx b/apps/agent-ui/src/app.tsx
@@ -0,0 +1,17 @@
+import { Toaster } from '@/components/ui/toaster'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { AgentRoute } from '@/routes/index'
+import { BrowserRouter, Route, Routes } from 'react-router'
+
+export function App() {
+  return (
+    <BrowserRouter>
+      <TooltipProvider delayDuration={200}>
+        <Routes>
+          <Route path="/*" element={<AgentRoute />} />
+        </Routes>
+        <Toaster />
+      </TooltipProvider>
+    </BrowserRouter>
+  )
+}
diff --git a/apps/agent-ui/src/components/agent/agent-shell.tsx b/apps/agent-ui/src/components/agent/agent-shell.tsx
@@ -0,0 +1,101 @@
+import { Button } from '@/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { useAgentStore } from '@/lib/agent-store'
+import { PanelLeft, PenSquare, Settings2 } from 'lucide-react'
+import { ChatMessages } from './chat-messages'
+import { InputBar } from './input-bar'
+import { SettingsPanel } from './settings-panel'
+import { Sidebar } from './sidebar'
+
+export function AgentShell() {
+  const store = useAgentStore()
+
+  return (
+    <div className="flex h-screen bg-background">
+      {/* Sidebar */}
+      <Sidebar />
+
+      {/* Main area */}
+      <div className="flex flex-1 flex-col min-w-0">
+        {/* Top bar */}
+        <header className="flex h-12 shrink-0 items-center justify-between border-b border-border px-4">
+          <div className="flex items-center gap-2">
+            {!store.sidebarOpen && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-8 text-muted-foreground hover:text-foreground"
+                    onClick={() => store.setSidebarOpen(true)}
+                    aria-label="Open sidebar"
+                  >
+                    <PanelLeft className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Open sidebar</TooltipContent>
+              </Tooltip>
+            )}
+            <div className="flex items-center gap-3">
+              <div className="flex size-7 items-center justify-center">
+                <svg
+                  className="size-5 text-foreground"
+                  viewBox="0 0 76 65"
+                  fill="currentColor"
+                >
+                  <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
+                </svg>
+              </div>
+              <div className="h-4 w-px bg-border" />
+              <h1 className="text-sm font-medium text-foreground">MX Agent</h1>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-8 text-muted-foreground hover:text-foreground"
+                  onClick={store.newSession}
+                  aria-label="New chat"
+                >
+                  <PenSquare className="size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>New chat</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-8 text-muted-foreground hover:text-foreground"
+                  onClick={() => store.setSettingsOpen(true)}
+                  aria-label="Settings"
+                >
+                  <Settings2 className="size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Settings</TooltipContent>
+            </Tooltip>
+          </div>
+        </header>
+
+        {/* Chat area */}
+        <ChatMessages />
+
+        {/* Input area */}
+        <InputBar />
+
+        {/* Settings dialog */}
+        <SettingsPanel />
+      </div>
+    </div>
+  )
+}