@agent-native/dispatch 0.8.18 → 0.8.19

package/src/components/layout/Layout.tsx

@@ -1,11 +1,19 @@
-import { useState, type ComponentType, type ReactNode } from "react";
-import { NavLink, useLocation } from "react-router";
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+import { NavLink, useLocation, useNavigate } from "react-router";
 import {
   AgentSidebar,
   FeedbackButton,
   appBasePath,
   appPath,
   useActionQuery,
+  useChatThreads,
+  type ChatThreadSummary,
 } from "@agent-native/core/client";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import { InvitationBanner, OrgSwitcher } from "@agent-native/core/client/org";
@@ -18,7 +26,9 @@ import {
   IconKey,
   IconChevronDown,
   IconLayersSubtract,
+  IconMessageQuestion,
   IconMessages,
+  IconPlus,
   IconPlugConnected,
   IconBroadcast,
   IconFingerprint,
@@ -34,6 +44,11 @@ import {
   SheetDescription,
   SheetTitle,
 } from "@/components/ui/sheet";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { Header } from "./Header";
 import { HeaderActionsProvider } from "./HeaderActions";
 
@@ -65,6 +80,13 @@ export interface DispatchExtensionConfig {
 }
 
 const PRIMARY_NAV_ITEMS = [
+  {
+    id: "chat",
+    to: "/chat",
+    label: "Chat",
+    icon: IconMessageQuestion,
+    section: "primary",
+  },
   {
     id: "overview",
     to: "/overview",
@@ -249,6 +271,142 @@ function dispatchNavLinkTarget(path: string): string {
   return routerHasBasename ? path : appPath(path);
 }
 
+function formatThreadAge(updatedAt: number) {
+  const diffMs = Math.max(0, Date.now() - updatedAt);
+  const minutes = Math.floor(diffMs / 60_000);
+  if (minutes < 1) return "now";
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d`;
+  return new Date(updatedAt).toLocaleDateString([], {
+    month: "short",
+    day: "numeric",
+  });
+}
+
+function threadTitle(thread: ChatThreadSummary) {
+  return thread.title || thread.preview || "New chat";
+}
+
+function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
+  const navigate = useNavigate();
+  const {
+    threads,
+    activeThreadId,
+    createThread,
+    switchThread,
+    refreshThreads,
+  } = useChatThreads(undefined, undefined, undefined, { autoCreate: false });
+
+  const visibleThreads = useMemo(
+    () =>
+      threads
+        .filter(
+          (thread) => thread.messageCount > 0 || thread.id === activeThreadId,
+        )
+        .sort((a, b) => b.updatedAt - a.updatedAt)
+        .slice(0, 8),
+    [activeThreadId, threads],
+  );
+
+  useEffect(() => {
+    const refresh = () => refreshThreads();
+    const handleRunning = (event: Event) => {
+      const detail = (event as CustomEvent).detail as
+        | { isRunning?: unknown }
+        | undefined;
+      if (detail?.isRunning === false) refreshThreads();
+    };
+
+    window.addEventListener("agent-chat:threads-updated", refresh);
+    window.addEventListener("agentNative.chatRunning", handleRunning);
+    window.addEventListener("focus", refresh);
+    return () => {
+      window.removeEventListener("agent-chat:threads-updated", refresh);
+      window.removeEventListener("agentNative.chatRunning", handleRunning);
+      window.removeEventListener("focus", refresh);
+    };
+  }, [refreshThreads]);
+
+  function openThread(threadId: string, options?: { isNew?: boolean }) {
+    switchThread(threadId);
+    navigate(dispatchNavLinkTarget("/chat"));
+    onNavigate?.();
+    window.requestAnimationFrame(() => {
+      window.dispatchEvent(
+        new CustomEvent("agent-chat:open-thread", {
+          detail: { threadId, newThread: options?.isNew === true },
+        }),
+      );
+    });
+  }
+
+  async function handleNewChat() {
+    const threadId = await createThread();
+    if (threadId) openThread(threadId, { isNew: true });
+  }
+
+  return (
+    <div className="mt-2 border-l border-sidebar-border/70 pl-3">
+      <div className="mb-1 flex h-7 items-center gap-2 pr-1">
+        <div className="min-w-0 flex-1 text-xs font-medium text-sidebar-foreground/70">
+          Chats
+        </div>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={handleNewChat}
+              className="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              aria-label="New Dispatch chat"
+            >
+              <IconPlus className="size-3.5" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>New chat</TooltipContent>
+        </Tooltip>
+      </div>
+      <div className="grid gap-0.5">
+        {visibleThreads.length > 0 ? (
+          visibleThreads.map((thread) => {
+            const isActive = thread.id === activeThreadId;
+            return (
+              <button
+                key={thread.id}
+                type="button"
+                onClick={() => openThread(thread.id)}
+                className={cn(
+                  "flex h-8 min-w-0 cursor-pointer items-center gap-2 rounded-md px-2 text-left text-sm transition-colors",
+                  isActive
+                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                    : "text-sidebar-foreground/80 hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground",
+                )}
+              >
+                <span className="min-w-0 flex-1 truncate">
+                  {threadTitle(thread)}
+                </span>
+                <span className="shrink-0 text-[11px] text-sidebar-foreground/50">
+                  {isActive ? "" : formatThreadAge(thread.updatedAt)}
+                </span>
+              </button>
+            );
+          })
+        ) : (
+          <button
+            type="button"
+            onClick={handleNewChat}
+            className="flex h-8 cursor-pointer items-center rounded-md px-2 text-left text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground"
+          >
+            <span className="truncate">New chat</span>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
 export function NavContent({
   onNavigate,
   extensions,
@@ -302,6 +460,9 @@ export function NavContent({
           )}
           <span className="truncate">{item.label}</span>
         </NavLink>
+        {item.id === "chat" ? (
+          <DispatchChatsSection onNavigate={onNavigate} />
+        ) : null}
       </li>
     );
   };
@@ -384,17 +545,24 @@ export function Layout({
 }) {
   const location = useLocation();
   const [mobileOpen, setMobileOpen] = useState(false);
+  const localPathname = localDispatchPath(location.pathname);
 
-  if (CHROMELESS_PATHS.some((path) => location.pathname === path)) {
+  if (CHROMELESS_PATHS.some((path) => localPathname === path)) {
     return <>{children}</>;
   }
 
-  const showHeader = !pageOwnsToolbar(location.pathname);
+  const isChatRoute = localPathname === "/chat";
+  const showHeader = !isChatRoute && !pageOwnsToolbar(localPathname);
   const appContent = (
-    <div className="flex h-full flex-1 flex-col overflow-hidden">
+    <div className="flex h-full min-w-0 flex-1 flex-col overflow-hidden">
       {showHeader ? <Header onOpenMobile={() => setMobileOpen(true)} /> : null}
       <InvitationBanner />
-      <main className="flex-1 overflow-y-auto">
+      <main
+        className={cn(
+          "flex-1",
+          isChatRoute ? "min-h-0 overflow-hidden" : "overflow-y-auto",
+        )}
+      >
         {showHeader ? (
           <div className="mx-auto max-w-7xl space-y-10 px-4 py-6 sm:px-6">
             {children}
@@ -405,6 +573,18 @@ export function Layout({
       </main>
     </div>
   );
+  const content = isChatRoute ? (
+    appContent
+  ) : (
+    <AgentSidebar
+      position="right"
+      defaultOpen={false}
+      emptyStateText="Create apps, manage vault keys, and route work across the workspace."
+      suggestions={SIDEBAR_SUGGESTIONS}
+    >
+      {appContent}
+    </AgentSidebar>
+  );
 
   return (
     <HeaderActionsProvider>
@@ -431,18 +611,7 @@ export function Layout({
           </SheetContent>
         </Sheet>
 
-        {/*
-         * Always mount AgentSidebar so home composer's sendToAgentChat
-         * fallback can pop it via agent-panel:open.
-         */}
-        <AgentSidebar
-          position="right"
-          defaultOpen={false}
-          emptyStateText="Create apps, manage vault keys, and route work across the workspace."
-          suggestions={SIDEBAR_SUGGESTIONS}
-        >
-          {appContent}
-        </AgentSidebar>
+        {content}
       </div>
     </HeaderActionsProvider>
   );

package/src/hooks/use-navigation-state.spec.ts

@@ -2,6 +2,13 @@ import { describe, expect, it } from "vitest";
 import { buildDispatchNavigationState } from "./use-navigation-state.js";
 
 describe("buildDispatchNavigationState", () => {
+  it("recognizes the full-page chat route", () => {
+    expect(buildDispatchNavigationState("/chat")).toEqual({
+      view: "chat",
+      path: "/chat",
+    });
+  });
+
   it("exposes the current extension id from extension routes", () => {
     expect(
       buildDispatchNavigationState("/extensions/ext-1/github-stars-over-time"),

package/src/hooks/use-navigation-state.ts

@@ -173,6 +173,7 @@ function resolveView(
   if (pathname === "/extensions" || pathname.startsWith("/extensions/")) {
     return "extensions";
   }
+  if (pathname.startsWith("/chat")) return "chat";
   if (pathname.startsWith("/apps")) return "apps";
   if (pathname.startsWith("/metrics")) return "metrics";
   if (pathname.startsWith("/new-app")) return "new-app";
@@ -197,6 +198,9 @@ function resolvePath(
   command?: Pick<NavigationState, "extensionId">,
 ): string | undefined {
   switch (view) {
+    case "chat":
+    case "ask":
+      return "/chat";
     case "overview":
       return "/overview";
     case "apps":

package/src/lib/overview-chat.spec.ts

@@ -28,6 +28,21 @@ describe("submitOverviewPrompt", () => {
     });
   });
 
+  it("can submit to a mounted page chat without opening the sidebar", () => {
+    const tabId = submitOverviewPrompt(" build a metrics app ", "auto", {
+      openSidebar: false,
+    });
+
+    expect(tabId).toBe("chat-tab");
+    expect(sendToAgentChatMock).toHaveBeenCalledWith({
+      message: "build a metrics app",
+      submit: true,
+      newTab: true,
+      model: "auto",
+      openSidebar: false,
+    });
+  });
+
   it("routes overview prompts to Builder chat inside Builder", () => {
     frameState.inBuilderFrame = true;
 

package/src/lib/overview-chat.ts

@@ -3,6 +3,7 @@ import { isInBuilderFrame, sendToAgentChat } from "@agent-native/core/client";
 export function submitOverviewPrompt(
   message: string,
   selectedModel?: string | null,
+  options?: { openSidebar?: boolean },
 ): string | null {
   const trimmed = message.trim();
   if (!trimmed) return null;
@@ -20,5 +21,6 @@ export function submitOverviewPrompt(
     submit: true,
     newTab: true,
     model: selectedModel || undefined,
+    ...(options?.openSidebar === false ? { openSidebar: false } : {}),
   });
 }

package/src/routes/index.ts

@@ -31,6 +31,7 @@ import { type RouteConfig, route, index } from "@react-router/dev/routes";
  */
 export const dispatchRoutes: RouteConfig = [
   index("./pages/_index.js"),
+  route("chat", "./pages/chat.js"),
   route("overview", "./pages/overview.js"),
   route("metrics", "./pages/metrics.js"),
   route("apps", "./pages/apps.js"),

package/src/routes/pages/_index.tsx

@@ -23,7 +23,7 @@ export function meta() {
  *
  * We preserve `?` and `#` so deep-links like `?thread=<id>` from a Slack
  * "Open thread" button survive the bounce — `useThreadDeepLink` in
- * `root.tsx` reads them after the redirect lands on `/overview`.
+ * `root.tsx` reads them after the redirect lands and opens `/chat`.
  */
 function buildTarget(request: Request): string {
   const url = new URL(request.url);

package/src/routes/pages/chat.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useRef } from "react";
+import { useLocation, useNavigate } from "react-router";
+import { AgentChatSurface } from "@agent-native/core/client";
+import { submitOverviewPrompt } from "@/lib/overview-chat";
+
+interface DispatchChatLocationState {
+  dispatchPrompt?: {
+    id?: string | number;
+    message?: string;
+    selectedModel?: string | null;
+  };
+  dispatchThread?: {
+    id?: string | number;
+    threadId?: string;
+  };
+}
+
+export function meta() {
+  return [{ title: "Chat — Dispatch" }];
+}
+
+export default function ChatRoute() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const handledStateIds = useRef(new Set<string>());
+  const state = location.state as DispatchChatLocationState | null;
+  const prompt = state?.dispatchPrompt;
+  const thread = state?.dispatchThread;
+
+  useEffect(() => {
+    const message = prompt?.message?.trim();
+    const threadId = thread?.threadId?.trim();
+    if (!message && !threadId) return;
+
+    const stateId = String(
+      prompt?.id ?? thread?.id ?? `${message ?? ""}:${threadId ?? ""}`,
+    );
+    if (handledStateIds.current.has(stateId)) return;
+    handledStateIds.current.add(stateId);
+
+    const timer = window.setTimeout(() => {
+      if (threadId) {
+        window.dispatchEvent(
+          new CustomEvent("agent-chat:open-thread", {
+            detail: { threadId },
+          }),
+        );
+      }
+      if (message) {
+        submitOverviewPrompt(message, prompt?.selectedModel, {
+          openSidebar: false,
+        });
+      }
+      navigate(`${location.pathname}${location.search}${location.hash}`, {
+        replace: true,
+        state: null,
+      });
+    }, 0);
+
+    return () => window.clearTimeout(timer);
+  }, [
+    location.hash,
+    location.pathname,
+    location.search,
+    navigate,
+    prompt?.id,
+    prompt?.message,
+    prompt?.selectedModel,
+    thread?.id,
+    thread?.threadId,
+  ]);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background">
+      <AgentChatSurface
+        mode="page"
+        className="dispatch-chat-panel"
+        defaultMode="chat"
+        showHeader={false}
+        showTabBar={false}
+        dynamicSuggestions={false}
+        suggestions={[]}
+        emptyStateText="Ask Dispatch to create apps, route work, or manage the workspace."
+        emptyStateDisplay="hidden"
+        centerComposerWhenEmpty
+        composerLayoutVariant="hero"
+        composerPlaceholder="Ask Dispatch..."
+        composerSlot={
+          <div className="dispatch-chat-intro">
+            <h1>What should Dispatch do next?</h1>
+            <p>
+              Create apps, manage shared keys, and route work across agents.
+            </p>
+          </div>
+        }
+      />
+    </div>
+  );
+}

package/src/routes/pages/overview.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
-import { Link } from "react-router";
+import { Link, useNavigate } from "react-router";
 import {
   PromptComposer,
   useActionQuery,
   useChatModels,
   agentNativePath,
+  isInBuilderFrame,
 } from "@agent-native/core/client";
 import {
   IconActivity,
@@ -75,9 +76,26 @@ const HOME_CHAT_SUGGESTIONS = [
 
 function HomeChatPanel() {
   const { selectedModel } = useChatModels();
+  const navigate = useNavigate();
 
   const send = (message: string) => {
-    submitOverviewPrompt(message, selectedModel);
+    const trimmed = message.trim();
+    if (!trimmed) return;
+
+    if (isInBuilderFrame()) {
+      submitOverviewPrompt(trimmed, selectedModel);
+      return;
+    }
+
+    navigate("/chat", {
+      state: {
+        dispatchPrompt: {
+          id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+          message: trimmed,
+          selectedModel,
+        },
+      },
+    });
   };
 
   return (
@@ -90,9 +108,7 @@ function HomeChatPanel() {
           <PromptComposer
             placeholder="Message agent…"
             onSubmit={(text) => {
-              const trimmed = text.trim();
-              if (!trimmed) return;
-              send(trimmed);
+              send(text);
             }}
           />
           <div className="flex flex-wrap justify-center gap-2">

package/src/styles/dispatch-css.spec.ts

@@ -52,4 +52,13 @@ describe("dispatch route shells", () => {
     expect(indexRoute).toContain("HydrateFallback");
     expect(indexRoute).toContain("@agent-native/dispatch/routes/pages/_index");
   });
+
+  it("re-exports the chat route from the Dispatch template", () => {
+    const chatRoute = fs.readFileSync(
+      path.join(repoRoot, "templates/dispatch/app/routes/chat.tsx"),
+      "utf-8",
+    );
+
+    expect(chatRoute).toContain("@agent-native/dispatch/routes/pages/chat");
+  });
 });

package/src/styles/dispatch.css

@@ -7,3 +7,106 @@
 @source "../components/**/*.{js,mjs,ts,tsx}";
 @source "../hooks/**/*.{js,mjs,ts,tsx}";
 @source "../routes/**/*.{js,mjs,ts,tsx}";
+
+.dispatch-chat-panel [data-agent-empty-state="centered"] {
+  justify-content: center;
+  padding-bottom: clamp(4rem, 12vh, 8rem);
+}
+
+.dispatch-chat-intro {
+  display: none;
+}
+
+.dispatch-chat-panel [data-agent-empty-state="centered"] .dispatch-chat-intro {
+  display: grid;
+  width: min(760px, calc(100vw - 3rem));
+  max-width: 760px;
+  gap: 0.5rem;
+  margin: 0 auto 1rem;
+  text-align: center;
+}
+
+.dispatch-chat-intro h1 {
+  margin: 0;
+  color: hsl(var(--foreground));
+  font-size: 2.5rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.12;
+}
+
+.dispatch-chat-intro p {
+  margin: 0;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+
+.dispatch-chat-panel [data-agent-empty-state="centered"] .agent-chat-scroll {
+  flex: 0 0 auto;
+  min-height: 0;
+  overflow: visible;
+}
+
+.dispatch-chat-panel [data-agent-empty-state="centered"] .agent-composer-area {
+  width: min(760px, calc(100vw - 3rem));
+  max-width: 760px;
+  padding: 0;
+}
+
+.dispatch-chat-panel [data-agent-empty-state="centered"] .agent-composer-root {
+  min-height: 10.5rem;
+  border-color: hsl(var(--border));
+  border-radius: 1rem;
+  background: hsl(var(--card));
+  box-shadow:
+    0 20px 60px hsl(220 10% 2% / 0.12),
+    0 0 0 1px hsl(var(--border) / 0.45);
+}
+
+.dark
+  .dispatch-chat-panel
+  [data-agent-empty-state="centered"]
+  .agent-composer-root {
+  box-shadow:
+    0 24px 80px hsl(220 10% 2% / 0.4),
+    0 0 0 1px hsl(var(--border) / 0.7);
+}
+
+.dispatch-chat-panel
+  [data-agent-empty-state="centered"]
+  .agent-composer-prosemirror {
+  min-height: 6.75rem;
+  font-size: 1rem;
+  line-height: 1.625rem;
+}
+
+@media (max-width: 767px) {
+  .dispatch-chat-panel [data-agent-empty-state="centered"] {
+    padding: 1rem;
+    padding-bottom: 5rem;
+  }
+
+  .dispatch-chat-panel
+    [data-agent-empty-state="centered"]
+    .dispatch-chat-intro {
+    width: 100%;
+    margin-bottom: 0.875rem;
+  }
+
+  .dispatch-chat-intro h1 {
+    font-size: 1.75rem;
+  }
+
+  .dispatch-chat-panel
+    [data-agent-empty-state="centered"]
+    .agent-composer-area {
+    width: 100%;
+  }
+
+  .dispatch-chat-panel
+    [data-agent-empty-state="centered"]
+    .agent-composer-root {
+    min-height: 9rem;
+  }
+}