@agent-native/dispatch 0.0.0-beta-20260819155526

package/src/components/agents-panel.tsx

@@ -0,0 +1,383 @@
+import { agentNativePath } from "@agent-native/core/client/api-path";
+import { useOrgRole } from "@agent-native/core/client/org";
+import { IconExternalLink, IconTrash } from "@tabler/icons-react";
+import { useRef, useState, type FormEvent } from "react";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./ui/alert-dialog";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+export interface ConnectedAgent {
+  id: string;
+  name: string;
+  description: string;
+  url: string;
+  color: string;
+  source: "builtin" | "custom" | "workspace";
+  resourceId?: string;
+  path?: string;
+  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,
+}: {
+  agents: ConnectedAgent[];
+  onRefresh: () => void;
+}) {
+  const { org, isLoading: orgLoading, error: orgError } = useOrgRole();
+  const canManageSharedAgents =
+    !orgLoading &&
+    !orgError &&
+    (!org?.orgId || org.role === "owner" || org.role === "admin");
+  const [name, setName] = useState("");
+  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");
+  const workspaceAgents = agents.filter(
+    (agent) => agent.source === "workspace",
+  );
+  const builtinAgents = agents.filter((agent) => agent.source === "builtin");
+
+  const handleAdd = async (event?: FormEvent<HTMLFormElement>) => {
+    event?.preventDefault();
+    const trimmedName = name.trim();
+    const trimmedUrl = url.trim();
+    const nextErrors = validateAgentForm(trimmedName, trimmedUrl);
+    if (Object.keys(nextErrors).length > 0) {
+      setErrors(nextErrors);
+      return;
+    }
+
+    const id = slugifyAgentName(trimmedName);
+    const agentJson = JSON.stringify(
+      {
+        id,
+        name: trimmedName,
+        description: description.trim() || undefined,
+        url: trimmedUrl,
+        color: "#6B7280",
+      },
+      null,
+      2,
+    );
+
+    setSaving(true);
+    try {
+      const res = await fetch(agentNativePath("/_agent-native/resources"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          path: `remote-agents/${id}.json`,
+          content: agentJson,
+          shared: true,
+        }),
+      });
+      if (res.ok) {
+        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);
+    }
+  };
+
+  const handleDelete = async (resourceId?: string) => {
+    if (!resourceId) return;
+    const res = await fetch(
+      agentNativePath(`/_agent-native/resources/${resourceId}`),
+      {
+        method: "DELETE",
+      },
+    );
+    if (res.ok) onRefresh();
+  };
+
+  return (
+    <section className="rounded-2xl bg-card p-5">
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]">
+        <div className="space-y-4">
+          <div>
+            <div className="text-sm font-medium text-foreground">
+              Available by default
+            </div>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {builtinAgents.map((agent) => (
+                <div
+                  key={agent.id}
+                  className="inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs text-muted-foreground"
+                >
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: agent.color }}
+                  />
+                  <span>{agent.name}</span>
+                </div>
+              ))}
+              {builtinAgents.length === 0 && (
+                <div className="rounded-xl border border-dashed px-4 py-6 text-sm text-muted-foreground">
+                  No default agents detected.
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div>
+            <div className="text-sm font-medium text-foreground">
+              Added in this workspace
+            </div>
+            <div className="mt-2 space-y-2">
+              {workspaceAgents.map((agent) => (
+                <div
+                  key={agent.id}
+                  className="flex items-start justify-between gap-3 rounded-xl border bg-muted/30 px-4 py-3"
+                >
+                  <div className="min-w-0">
+                    <div className="text-sm font-medium text-foreground">
+                      {agent.name}
+                    </div>
+                    {agent.description ? (
+                      <div className="mt-1 text-xs text-muted-foreground">
+                        {agent.description}
+                      </div>
+                    ) : null}
+                    <div className="mt-1 text-xs text-muted-foreground">
+                      <a
+                        href={agent.url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex items-center gap-1 hover:text-foreground"
+                      >
+                        {agent.url}
+                        <IconExternalLink className="h-3 w-3" />
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              ))}
+              {customAgents.map((agent) => (
+                <div
+                  key={agent.id}
+                  className="flex items-start justify-between gap-3 rounded-xl border bg-muted/30 px-4 py-3"
+                >
+                  <div className="min-w-0">
+                    <div className="text-sm font-medium text-foreground">
+                      {agent.name}
+                    </div>
+                    {agent.description ? (
+                      <div className="mt-1 text-xs text-muted-foreground">
+                        {agent.description}
+                      </div>
+                    ) : null}
+                    <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
+                      <a
+                        href={agent.url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex items-center gap-1 hover:text-foreground"
+                      >
+                        {agent.url}
+                        <IconExternalLink className="h-3 w-3" />
+                      </a>
+                      <span>·</span>
+                      <span>{agent.scope || "shared"}</span>
+                    </div>
+                  </div>
+                  {canManageSharedAgents && (
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <IconTrash className="h-4 w-4" />
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>
+                            Remove this agent?
+                          </AlertDialogTitle>
+                          <AlertDialogDescription>
+                            “{agent.name}” will be removed from the workspace.
+                            Any jobs or chats that delegate to it will stop
+                            working.
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>Cancel</AlertDialogCancel>
+                          <AlertDialogAction
+                            onClick={() => handleDelete(agent.resourceId)}
+                          >
+                            Remove
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  )}
+                </div>
+              ))}
+              {workspaceAgents.length === 0 && customAgents.length === 0 && (
+                <div className="rounded-xl border border-dashed px-4 py-6 text-sm text-muted-foreground">
+                  No extra agents added yet.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-xl border bg-muted/20 p-4">
+          <div className="text-sm font-medium text-foreground">
+            Add external agent
+          </div>
+          {canManageSharedAgents ? (
+            <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+              Add another A2A-compatible app by saving its agent endpoint here.
+            </p>
+          ) : !orgLoading ? (
+            <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+              Only workspace owners and admins can add shared agents.
+            </p>
+          ) : null}
+          <form
+            className={`mt-4 space-y-3 ${canManageSharedAgents ? "" : "hidden"}`}
+            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)"
+            />
+            {errors.form ? (
+              <p className="text-xs font-medium text-destructive">
+                {errors.form}
+              </p>
+            ) : null}
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={saving || !canManageSharedAgents}
+            >
+              {saving ? "Saving..." : "Add agent"}
+            </Button>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/components/app-icon.spec.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { AppIcon } from "./app-icon";
+
+describe("AppIcon", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it("gives Plan a colored generated accent instead of a neutral gray", () => {
+    act(() => {
+      root.render(<AppIcon id="plan" name="Plan" />);
+    });
+
+    const icon = container.firstElementChild as HTMLElement;
+    expect(icon.style.getPropertyValue("--dispatch-app-icon-color-rgb")).toBe(
+      "47 111 237",
+    );
+    expect(icon.style.color).toBe("rgb(var(--dispatch-app-icon-color-rgb))");
+  });
+
+  it("removes the colored background for monochrome rail icons", () => {
+    act(() => {
+      root.render(<AppIcon id="plan" name="Plan" monochrome />);
+    });
+
+    const icon = container.firstElementChild as HTMLElement;
+    expect(icon.className).toContain("bg-transparent");
+    expect(icon.style.cssText).not.toContain("background-color");
+  });
+});

package/src/components/app-icon.tsx

@@ -0,0 +1,177 @@
+import {
+  IconBrain,
+  IconBrandChrome,
+  IconBrandJira,
+  IconCalendar,
+  IconChartBar,
+  IconCode,
+  IconFileText,
+  IconFolder,
+  IconLayoutBoard,
+  IconListCheck,
+  IconMail,
+  IconMessageCircle,
+  IconPhoto,
+  IconPresentation,
+  IconRoute,
+  IconSettings,
+  IconStack2,
+  IconUsers,
+} from "@tabler/icons-react";
+import type { CSSProperties } from "react";
+
+import { cn } from "../lib/utils";
+
+type AppIconComponent = typeof IconStack2;
+
+const ICONS_BY_KEY: Record<string, AppIconComponent> = {
+  barchart2: IconChartBar,
+  brandjira: IconBrandJira,
+  brain: IconBrain,
+  calendardays: IconCalendar,
+  calendarmonth: IconCalendar,
+  chartbar: IconChartBar,
+  code: IconCode,
+  filetext: IconFileText,
+  folder: IconFolder,
+  galleryhorizontal: IconPresentation,
+  globe: IconBrandChrome,
+  layoutboard: IconLayoutBoard,
+  listcheck: IconListCheck,
+  mail: IconMail,
+  messagecircle: IconMessageCircle,
+  photo: IconPhoto,
+  presentation: IconPresentation,
+  route: IconRoute,
+  settings: IconSettings,
+  stack2: IconStack2,
+  users: IconUsers,
+};
+
+/** Keep the Dispatch rail visually identical to the desktop app for first-party apps. */
+const APP_VISUALS_BY_ID: Record<
+  string,
+  { icon: AppIconComponent; colorRgb: string }
+> = {
+  analytics: { icon: IconChartBar, colorRgb: "245 158 11" },
+  assets: { icon: IconPhoto, colorRgb: "15 118 110" },
+  brain: { icon: IconBrain, colorRgb: "139 92 246" },
+  calendar: { icon: IconCalendar, colorRgb: "0 181 255" },
+  chat: { icon: IconMessageCircle, colorRgb: "24 24 27" },
+  clips: { icon: IconStack2, colorRgb: "14 165 233" },
+  content: { icon: IconFileText, colorRgb: "16 185 129" },
+  crm: { icon: IconUsers, colorRgb: "37 99 235" },
+  design: { icon: IconStack2, colorRgb: "244 114 182" },
+  dispatch: { icon: IconRoute, colorRgb: "20 184 166" },
+  factory: { icon: IconUsers, colorRgb: "124 58 237" },
+  forms: { icon: IconStack2, colorRgb: "6 182 212" },
+  macros: { icon: IconCode, colorRgb: "113 113 122" },
+  mail: { icon: IconMail, colorRgb: "59 130 246" },
+  plan: { icon: IconLayoutBoard, colorRgb: "47 111 237" },
+  slides: { icon: IconPresentation, colorRgb: "236 72 153" },
+  tasks: { icon: IconListCheck, colorRgb: "99 102 241" },
+};
+
+function appIconComponent(
+  id: string,
+  name: string,
+  iconKey?: string,
+): AppIconComponent {
+  const normalizedIconKey = iconKey?.trim().toLowerCase();
+  if (normalizedIconKey && ICONS_BY_KEY[normalizedIconKey]) {
+    return ICONS_BY_KEY[normalizedIconKey];
+  }
+
+  const standardVisuals = APP_VISUALS_BY_ID[id.trim().toLowerCase()];
+  if (standardVisuals) return standardVisuals.icon;
+
+  const haystack = `${id} ${name}`.toLowerCase();
+
+  if (haystack.includes("mail") || haystack.includes("email")) {
+    return IconMail;
+  }
+  if (
+    haystack.includes("analytics") ||
+    haystack.includes("metric") ||
+    haystack.includes("indicator") ||
+    haystack.includes("gtm")
+  ) {
+    return IconChartBar;
+  }
+  if (haystack.includes("coach") || haystack.includes("agent")) {
+    return IconBrain;
+  }
+  return IconStack2;
+}
+
+function safeHexColor(color: string | undefined): string | null {
+  const normalized = color?.trim();
+  return normalized && /^#[0-9a-f]{6}$/i.test(normalized) ? normalized : null;
+}
+
+export function AppIcon({
+  id,
+  name,
+  icon,
+  color,
+  className,
+  size = "md",
+  monochrome = false,
+}: {
+  id: string;
+  name: string;
+  icon?: string;
+  color?: string;
+  className?: string;
+  size?: "sm" | "md";
+  monochrome?: boolean;
+}) {
+  const Icon = appIconComponent(id, name, icon);
+  const customColor = safeHexColor(color);
+  const standardColorRgb = APP_VISUALS_BY_ID[id.trim().toLowerCase()]?.colorRgb;
+  const style = customColor
+    ? ({
+        "--dispatch-app-icon-color": customColor,
+        backgroundColor:
+          "color-mix(in srgb, var(--dispatch-app-icon-color) 14%, transparent)",
+        color: "var(--dispatch-app-icon-color)",
+      } as CSSProperties)
+    : standardColorRgb
+      ? ({
+          "--dispatch-app-icon-color-rgb": standardColorRgb,
+          backgroundColor: "rgb(var(--dispatch-app-icon-color-rgb) / 0.14)",
+          color: "rgb(var(--dispatch-app-icon-color-rgb))",
+        } as CSSProperties)
+      : ({
+          "--dispatch-app-icon-hue": `${appHue(id, name)} 72% 44%`,
+          backgroundColor: "hsl(var(--dispatch-app-icon-hue) / 0.14)",
+          color: "hsl(var(--dispatch-app-icon-hue))",
+        } as CSSProperties);
+
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "flex shrink-0 items-center justify-center rounded-lg",
+        size === "sm" ? "size-7" : "size-10",
+        monochrome && "bg-transparent text-sidebar-foreground/70",
+        className,
+      )}
+      style={monochrome ? undefined : style}
+    >
+      <Icon size={size === "sm" ? 15 : 19} strokeWidth={1.8} />
+    </span>
+  );
+}
+
+function hashForApp(id: string, name: string): number {
+  let hash = 0;
+  for (const character of `${id}:${name}`) {
+    hash = (hash * 31 + character.charCodeAt(0)) | 0;
+  }
+  return hash;
+}
+
+function appHue(id: string, name: string): number {
+  return 20 + (Math.abs(hashForApp(id, name)) % 320);
+}