@agent-native/dispatch 0.2.2 → 0.2.4

package/src/components/agents-panel.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useRef, useState, type FormEvent } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -27,6 +27,48 @@ export interface ConnectedAgent {
   scope?: "shared" | "personal";
 }
 
+type AgentFormErrors = Partial<Record<"name" | "url" | "form", string>>;
+
+function slugifyAgentName(value: string): string {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+function validateAgentForm(name: string, url: string): AgentFormErrors {
+  const errors: AgentFormErrors = {};
+  const trimmedName = name.trim();
+  const trimmedUrl = url.trim();
+
+  if (!trimmedName) {
+    errors.name = "Agent name is required.";
+  } else if (!slugifyAgentName(trimmedName)) {
+    errors.name = "Agent name must include at least one letter or number.";
+  }
+
+  if (!trimmedUrl) {
+    errors.url = "Agent endpoint URL is required.";
+  } else {
+    try {
+      const parsed = new URL(trimmedUrl);
+      if (parsed.protocol !== "https:" && parsed.protocol !== "http:") {
+        errors.url = "Use an http:// or https:// endpoint URL.";
+      } else if (!parsed.hostname) {
+        errors.url = "Enter a complete endpoint URL with a host.";
+      } else if (parsed.username || parsed.password) {
+        errors.url = "Do not include credentials in the endpoint URL.";
+      }
+    } catch {
+      errors.url =
+        "Enter a valid endpoint URL, such as https://app.example.com.";
+    }
+  }
+
+  return errors;
+}
+
 export function AgentsPanel({
   agents,
   onRefresh,
@@ -38,6 +80,7 @@ export function AgentsPanel({
   const [url, setUrl] = useState("");
   const [description, setDescription] = useState("");
   const [saving, setSaving] = useState(false);
+  const [errors, setErrors] = useState<AgentFormErrors>({});
   const nameRef = useRef<HTMLInputElement>(null);
 
   const customAgents = agents.filter((agent) => agent.source === "custom");
@@ -46,12 +89,17 @@ export function AgentsPanel({
   );
   const builtinAgents = agents.filter((agent) => agent.source === "builtin");
 
-  const handleAdd = async () => {
+  const handleAdd = async (event?: FormEvent<HTMLFormElement>) => {
+    event?.preventDefault();
     const trimmedName = name.trim();
     const trimmedUrl = url.trim();
-    if (!trimmedName || !trimmedUrl) return;
+    const nextErrors = validateAgentForm(trimmedName, trimmedUrl);
+    if (Object.keys(nextErrors).length > 0) {
+      setErrors(nextErrors);
+      return;
+    }
 
-    const id = trimmedName.toLowerCase().replace(/[^a-z0-9-]/g, "-");
+    const id = slugifyAgentName(trimmedName);
     const agentJson = JSON.stringify(
       {
         id,
@@ -79,9 +127,21 @@ export function AgentsPanel({
         setName("");
         setUrl("");
         setDescription("");
+        setErrors({});
         onRefresh();
         nameRef.current?.focus();
+      } else {
+        setErrors({
+          form: `Could not add agent. Request failed with ${res.status}.`,
+        });
       }
+    } catch (error) {
+      setErrors({
+        form:
+          error instanceof Error
+            ? error.message
+            : "Could not add agent. Please try again.",
+      });
     } finally {
       setSaving(false);
     }
@@ -230,31 +290,66 @@ export function AgentsPanel({
           <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
             Add another A2A-compatible app by saving its agent endpoint here.
           </p>
-          <div className="mt-4 space-y-3">
-            <Input
-              ref={nameRef}
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-              placeholder="Name"
-            />
-            <Input
-              value={url}
-              onChange={(event) => setUrl(event.target.value)}
-              placeholder="https://app.example.com"
-            />
+          <form className="mt-4 space-y-3" onSubmit={handleAdd} noValidate>
+            <div className="space-y-1.5">
+              <Input
+                ref={nameRef}
+                value={name}
+                onChange={(event) => {
+                  setName(event.target.value);
+                  setErrors((current) => ({ ...current, name: undefined }));
+                }}
+                placeholder="Name"
+                aria-invalid={Boolean(errors.name)}
+                aria-describedby={
+                  errors.name ? "external-agent-name-error" : undefined
+                }
+              />
+              {errors.name ? (
+                <p
+                  id="external-agent-name-error"
+                  className="text-xs font-medium text-destructive"
+                >
+                  {errors.name}
+                </p>
+              ) : null}
+            </div>
+            <div className="space-y-1.5">
+              <Input
+                value={url}
+                onChange={(event) => {
+                  setUrl(event.target.value);
+                  setErrors((current) => ({ ...current, url: undefined }));
+                }}
+                placeholder="https://app.example.com"
+                aria-invalid={Boolean(errors.url)}
+                aria-describedby={
+                  errors.url ? "external-agent-url-error" : undefined
+                }
+              />
+              {errors.url ? (
+                <p
+                  id="external-agent-url-error"
+                  className="text-xs font-medium text-destructive"
+                >
+                  {errors.url}
+                </p>
+              ) : null}
+            </div>
             <Input
               value={description}
               onChange={(event) => setDescription(event.target.value)}
               placeholder="Description (optional)"
             />
-            <Button
-              className="w-full"
-              onClick={handleAdd}
-              disabled={!name.trim() || !url.trim() || saving}
-            >
+            {errors.form ? (
+              <p className="text-xs font-medium text-destructive">
+                {errors.form}
+              </p>
+            ) : null}
+            <Button type="submit" className="w-full" disabled={saving}>
               {saving ? "Saving..." : "Add agent"}
             </Button>
-          </div>
+          </form>
         </div>
       </div>
     </section>

package/src/components/layout/Header.tsx

@@ -44,7 +44,7 @@ export function Header({
         <Button
           variant="ghost"
           size="icon"
-          className="h-8 w-8 2xl:hidden cursor-pointer"
+          className="h-8 w-8 lg:hidden cursor-pointer"
           onClick={onOpenMobile}
           aria-label="Open navigation"
         >

package/src/components/layout/Layout.tsx

@@ -327,8 +327,6 @@ export function Layout({
 }) {
   const location = useLocation();
   const [mobileOpen, setMobileOpen] = useState(false);
-  const hasEmbeddedAgentChat =
-    location.pathname === "/" || location.pathname === "/overview";
 
   if (CHROMELESS_PATHS.some((path) => location.pathname === path)) {
     return <>{children}</>;
@@ -337,12 +335,7 @@ export function Layout({
   const showHeader = !pageOwnsToolbar(location.pathname);
   const appContent = (
     <div className="flex h-full flex-1 flex-col overflow-hidden">
-      {showHeader ? (
-        <Header
-          onOpenMobile={() => setMobileOpen(true)}
-          showAgentToggle={!hasEmbeddedAgentChat}
-        />
-      ) : null}
+      {showHeader ? <Header onOpenMobile={() => setMobileOpen(true)} /> : null}
       <InvitationBanner />
       <main className="flex-1 overflow-y-auto">
         {showHeader ? (
@@ -359,7 +352,7 @@ export function Layout({
   return (
     <HeaderActionsProvider>
       <div className="flex h-screen w-full overflow-hidden bg-background">
-        <aside className="hidden 2xl:flex w-64 shrink-0 flex-col border-r bg-sidebar text-sidebar-foreground">
+        <aside className="hidden lg:flex w-64 shrink-0 flex-col border-r bg-sidebar text-sidebar-foreground">
           <NavContent extensions={extensions} />
         </aside>
 
@@ -383,8 +376,7 @@ export function Layout({
 
         {/*
          * Always mount AgentSidebar so home composer's sendToAgentChat
-         * fallback can pop it via agent-panel:open. The toggle button stays
-         * hidden on overview because the home composer is the primary input.
+         * fallback can pop it via agent-panel:open.
          */}
         <AgentSidebar
           position="right"

package/src/components/ui/sidebar.tsx

@@ -307,24 +307,28 @@ const SidebarRail = React.forwardRef<
   const { toggleSidebar } = useSidebar();
 
   return (
-    <button
-      ref={ref}
-      data-sidebar="rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className,
-      )}
-      {...props}
-    />
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          ref={ref}
+          data-sidebar="rail"
+          aria-label="Toggle Sidebar"
+          tabIndex={-1}
+          onClick={toggleSidebar}
+          className={cn(
+            "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+            "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+            "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+            "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+            "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+            "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+            className,
+          )}
+          {...props}
+        />
+      </TooltipTrigger>
+      <TooltipContent>Toggle Sidebar</TooltipContent>
+    </Tooltip>
   );
 });
 SidebarRail.displayName = "SidebarRail";

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

@@ -0,0 +1,48 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const frameState = vi.hoisted(() => ({ inBuilderFrame: false }));
+const sendToAgentChatMock = vi.hoisted(() => vi.fn(() => "chat-tab"));
+
+vi.mock("@agent-native/core/client", () => ({
+  isInBuilderFrame: () => frameState.inBuilderFrame,
+  sendToAgentChat: sendToAgentChatMock,
+}));
+
+const { submitOverviewPrompt } = await import("./overview-chat.js");
+
+describe("submitOverviewPrompt", () => {
+  beforeEach(() => {
+    frameState.inBuilderFrame = false;
+    sendToAgentChatMock.mockClear();
+  });
+
+  it("sends overview prompts to a new local agent tab outside Builder", () => {
+    const tabId = submitOverviewPrompt(" build a metrics app ", "auto");
+
+    expect(tabId).toBe("chat-tab");
+    expect(sendToAgentChatMock).toHaveBeenCalledWith({
+      message: "build a metrics app",
+      submit: true,
+      newTab: true,
+      model: "auto",
+    });
+  });
+
+  it("routes overview prompts to Builder chat inside Builder", () => {
+    frameState.inBuilderFrame = true;
+
+    const tabId = submitOverviewPrompt("ship the onboarding flow", "auto");
+
+    expect(tabId).toBe("chat-tab");
+    expect(sendToAgentChatMock).toHaveBeenCalledWith({
+      message: "ship the onboarding flow",
+      submit: true,
+      type: "code",
+    });
+  });
+
+  it("ignores empty prompts", () => {
+    expect(submitOverviewPrompt("   ", "auto")).toBeNull();
+    expect(sendToAgentChatMock).not.toHaveBeenCalled();
+  });
+});

package/src/lib/overview-chat.ts

@@ -0,0 +1,24 @@
+import { isInBuilderFrame, sendToAgentChat } from "@agent-native/core/client";
+
+export function submitOverviewPrompt(
+  message: string,
+  selectedModel?: string | null,
+): string | null {
+  const trimmed = message.trim();
+  if (!trimmed) return null;
+
+  if (isInBuilderFrame()) {
+    return sendToAgentChat({
+      message: trimmed,
+      submit: true,
+      type: "code",
+    });
+  }
+
+  return sendToAgentChat({
+    message: trimmed,
+    submit: true,
+    newTab: true,
+    model: selectedModel || undefined,
+  });
+}

package/src/routes/pages/overview.tsx

@@ -2,7 +2,6 @@ import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router";
 import {
   PromptComposer,
-  sendToAgentChat,
   useActionQuery,
   useChatModels,
   agentNativePath,
@@ -34,6 +33,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { submitOverviewPrompt } from "@/lib/overview-chat";
 
 interface IntegrationStatus {
   platform: string;
@@ -99,17 +99,12 @@ function HomeChatPanel() {
   const { selectedModel } = useChatModels();
 
   const send = (message: string) => {
-    sendToAgentChat({
-      message,
-      submit: true,
-      newTab: true,
-      model: selectedModel || undefined,
-    });
+    submitOverviewPrompt(message, selectedModel);
   };
 
   return (
     <section className="px-2 py-6 sm:py-10">
-      <div className="mx-auto w-full max-w-2xl space-y-5">
+      <div className="mx-auto w-full max-w-2xl space-y-8">
         <h1 className="text-center text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">
           What should we do next?
         </h1>

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

@@ -0,0 +1,55 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+const packageRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  "../..",
+);
+const repoRoot = path.resolve(packageRoot, "../..");
+
+describe("dispatch Tailwind styles", () => {
+  it("exports package source directives for consuming apps", () => {
+    const pkg = JSON.parse(
+      fs.readFileSync(path.join(packageRoot, "package.json"), "utf-8"),
+    ) as { exports?: Record<string, string> };
+    const stylesheet = fs.readFileSync(
+      path.join(packageRoot, "src/styles/dispatch.css"),
+      "utf-8",
+    );
+
+    expect(pkg.exports?.["./styles/dispatch.css"]).toBe(
+      "./src/styles/dispatch.css",
+    );
+    expect(stylesheet).toContain(
+      '@source "../components/**/*.{js,mjs,ts,tsx}"',
+    );
+    expect(stylesheet).toContain('@source "../routes/**/*.{js,mjs,ts,tsx}"');
+  });
+
+  it("imports package source directives from the Dispatch template", () => {
+    const globalCss = fs.readFileSync(
+      path.join(repoRoot, "templates/dispatch/app/global.css"),
+      "utf-8",
+    );
+
+    expect(globalCss).toContain(
+      '@import "@agent-native/dispatch/styles/dispatch.css";',
+    );
+  });
+});
+
+describe("dispatch route shells", () => {
+  it("re-exports the index route redirects from the Dispatch template", () => {
+    const indexRoute = fs.readFileSync(
+      path.join(repoRoot, "templates/dispatch/app/routes/_index.tsx"),
+      "utf-8",
+    );
+
+    expect(indexRoute).toContain("loader");
+    expect(indexRoute).toContain("clientLoader");
+    expect(indexRoute).toContain("HydrateFallback");
+    expect(indexRoute).toContain("@agent-native/dispatch/routes/pages/_index");
+  });
+});

package/src/styles/dispatch.css

@@ -0,0 +1,9 @@
+/*
+ * Tailwind v4 does not scan package sources in node_modules unless the
+ * consuming app opts in. Import this stylesheet from a Dispatch app's global
+ * CSS so Tailwind includes the utilities used by packaged Dispatch routes and
+ * components.
+ */
+@source "../components/**/*.{js,mjs,ts,tsx}";
+@source "../hooks/**/*.{js,mjs,ts,tsx}";
+@source "../routes/**/*.{js,mjs,ts,tsx}";