@agent-native/dispatch 0.8.17 → 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/db/schema.ts

@@ -174,13 +174,13 @@ export const vaultAuditLog = table("vault_audit_log", {
   createdAt: integer("created_at").notNull(),
 });
 
-// ─── Workspace Resources: shared skills, instructions, agents, knowledge ──────
+// ─── Workspace Resources: shared skills, instructions, agents, knowledge, MCP ─
 
 export const workspaceResources = table("workspace_resources", {
   id: text("id").primaryKey(),
   ownerEmail: text("owner_email").notNull(),
   orgId: text("org_id"),
-  kind: text("kind").notNull(), // "skill" | "instruction" | "agent" | "knowledge"
+  kind: text("kind").notNull(), // "skill" | "instruction" | "agent" | "knowledge" | "mcp-server"
   name: text("name").notNull(),
   description: text("description"),
   path: text("path").notNull(), // resource path, e.g. "skills/designer.md"

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/routes/pages/workspace.tsx

@@ -11,6 +11,7 @@ import {
   IconEdit,
   IconFileText,
   IconPlus,
+  IconPlugConnected,
   IconTrash,
   IconUser,
   IconX,
@@ -87,6 +88,13 @@ const KIND_CONFIG = {
     description:
       "Reference resources - brand, positioning, persona, and domain context",
   },
+  "mcp-server": {
+    label: "MCP Server",
+    icon: IconPlugConnected,
+    pathPrefix: "mcp-servers/",
+    description:
+      "HTTP MCP servers - external tools centrally granted to app agents",
+  },
 } as const;
 
 const STARTER_GLOBAL_CONTEXT = [
@@ -135,6 +143,7 @@ function defaultResourcePath(kind: string, name: string): string {
   if (kind === "instruction") return `instructions/${slug}.md`;
   if (kind === "agent") return `agents/${slug}.md`;
   if (kind === "knowledge") return `context/${slug}.md`;
+  if (kind === "mcp-server") return `mcp-servers/${slug}.json`;
   return `${slug}.md`;
 }
 
@@ -347,8 +356,8 @@ function AddResourceDialog() {
         <DialogHeader>
           <DialogTitle>Add workspace resource</DialogTitle>
           <DialogDescription>
-            Create a skill, instruction, agent profile, or reference resource
-            that can be shared across workspace apps.
+            Create a skill, instruction, agent profile, reference resource, or
+            MCP server that can be shared across workspace apps.
           </DialogDescription>
         </DialogHeader>
         <div className="space-y-4 py-2">
@@ -364,6 +373,7 @@ function AddResourceDialog() {
                   <SelectItem value="instruction">Instruction</SelectItem>
                   <SelectItem value="agent">Agent</SelectItem>
                   <SelectItem value="knowledge">Knowledge pack</SelectItem>
+                  <SelectItem value="mcp-server">MCP server</SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -390,7 +400,9 @@ function AddResourceDialog() {
                     ? "Research Specialist"
                     : kind === "knowledge"
                       ? "Core GTM Messaging"
-                      : "Code Style Guide"
+                      : kind === "mcp-server"
+                        ? "Zapier MCP"
+                        : "Code Style Guide"
               }
               value={name}
               onChange={(e) => setName(e.target.value)}
@@ -407,7 +419,9 @@ function AddResourceDialog() {
             <p className="text-xs text-muted-foreground">
               Skills use skills/name/SKILL.md. Guardrails in AGENTS.md or
               instructions/ auto-load in app chat. Reference resources in
-              context/ are indexed so agents can read them when relevant.
+              context/ are indexed so agents can read them when relevant. MCP
+              server resources use mcp-servers/name.json and are loaded as HTTP
+              MCP tools.
             </p>
           </div>
           <div className="space-y-2">
@@ -428,7 +442,9 @@ function AddResourceDialog() {
                     ? "---\nname: Research Specialist\ndescription: Handles research tasks\n---\n\n# Instructions\n\n..."
                     : kind === "knowledge"
                       ? "# Core GTM Messaging\n\n## Positioning\n\n## ICP\n\n## Proof points\n\n## Source\n\n"
-                      : "# Instructions\n\nAlways-on guardrails for agents across apps..."
+                      : kind === "mcp-server"
+                        ? '{\n  "type": "http",\n  "url": "https://example.com/mcp",\n  "headers": {\n    "Authorization": "Bearer ${keys.MCP_SERVER_TOKEN}"\n  },\n  "description": "Shared MCP tools for workspace apps"\n}\n'
+                        : "# Instructions\n\nAlways-on guardrails for agents across apps..."
               }
               value={content}
               onChange={(e) => setContent(e.target.value)}
@@ -447,7 +463,12 @@ function AddResourceDialog() {
           <Button
             onClick={() =>
               create.mutate({
-                kind: kind as "skill" | "instruction" | "agent" | "knowledge",
+                kind: kind as
+                  | "skill"
+                  | "instruction"
+                  | "agent"
+                  | "knowledge"
+                  | "mcp-server",
                 name,
                 description: description || undefined,
                 path: path || defaultResourcePath(kind, name),
@@ -1010,6 +1031,9 @@ export default function WorkspaceRoute() {
   const knowledge = (resources || []).filter(
     (r: any) => r.kind === "knowledge",
   );
+  const mcpServers = (resources || []).filter(
+    (r: any) => r.kind === "mcp-server",
+  );
 
   function ResourceList({
     items,
@@ -1056,7 +1080,7 @@ export default function WorkspaceRoute() {
   return (
     <DispatchShell
       title="Workspace Resources"
-      description="Manage inherited workspace skills, guardrail instructions, agent profiles, and reference resources. All-app resources are available to every app without syncing."
+      description="Manage inherited workspace skills, guardrail instructions, agent profiles, reference resources, and MCP servers. All-app resources are available to every app without syncing."
     >
       <div className="flex items-center justify-between">
         <div className="text-sm text-muted-foreground">
@@ -1087,6 +1111,9 @@ export default function WorkspaceRoute() {
           <TabsTrigger value="knowledge">
             Knowledge {knowledge.length > 0 && `(${knowledge.length})`}
           </TabsTrigger>
+          <TabsTrigger value="mcp">
+            MCP {mcpServers.length > 0 && `(${mcpServers.length})`}
+          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="skills" className="mt-4">
@@ -1116,6 +1143,13 @@ export default function WorkspaceRoute() {
             emptyText="No knowledge packs yet. Add GTM, product, or domain context that apps can reuse."
           />
         </TabsContent>
+
+        <TabsContent value="mcp" className="mt-4">
+          <ResourceList
+            items={mcpServers}
+            emptyText="No workspace MCP servers yet. Add an HTTP MCP server to share external tools across apps."
+          />
+        </TabsContent>
       </Tabs>
     </DispatchShell>
   );

package/src/server/lib/workspace-resources-store.spec.ts

@@ -703,6 +703,7 @@ describe("workspace resource materialization", () => {
     expect(mocks.resourceEffectiveContext).toHaveBeenCalledWith(
       "person@example.test",
       "context/brand.md",
+      { workspaceAppId: "analytics", orgId: "org_123" },
     );
     expect(mocks.resourcePut).toHaveBeenCalledWith(
       "__workspace__",
@@ -899,6 +900,7 @@ describe("workspace resource materialization", () => {
     expect(mocks.resourceEffectiveContext).toHaveBeenCalledWith(
       "owner@example.test",
       "context/analytics-launch.md",
+      { workspaceAppId: "analytics", orgId: "org_123" },
     );
   });