@agent-native/dispatch 0.0.0-beta-20260819155526

package/src/routes/pages/chat.tsx

@@ -0,0 +1,335 @@
+import {
+  AgentChatSurface,
+  insertAgentComposerReference,
+  markAgentChatHomeHandoff,
+  readChatFirstMode,
+} from "@agent-native/core/client/agent-chat";
+import { appBasePath, appPath } from "@agent-native/core/client/api-path";
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type ComponentProps,
+} from "react";
+import { useLocation, useNavigate } from "react-router";
+
+import { ActionQueryError } from "../../components/action-query-error";
+import { useDispatchExtensions } from "../../components/layout/Layout";
+import { Skeleton } from "../../components/ui/skeleton";
+import { submitOverviewPrompt } from "../../lib/overview-chat";
+
+interface WorkspaceAgentResource {
+  id: string;
+  name: string;
+  description: string | null;
+  path: string;
+  content: string;
+  scope: "all" | "selected";
+  updatedAt: number;
+}
+
+function chatThreadPath(threadId: string | null, agentPath?: string): string {
+  const path = threadId ? `/chat/${encodeURIComponent(threadId)}` : "/chat";
+  return agentPath ? `${path}?agent=${encodeURIComponent(agentPath)}` : path;
+}
+
+function stripBasePath(pathname: string): string {
+  const basePath = appBasePath();
+  if (!basePath) return pathname;
+  if (pathname === basePath) return "/";
+  if (pathname.startsWith(`${basePath}/`)) {
+    return pathname.slice(basePath.length) || "/";
+  }
+  return pathname;
+}
+
+// The chat surface renders for both `/chat` and the `/chat/:threadId` deep
+// link. The thread id is read from the pathname (not `useParams`) because the
+// param is owned by the nested deep-link route, not this leaf component.
+function threadIdFromPath(pathname: string): string | null {
+  const match = stripBasePath(pathname).match(/^\/chat\/([^/]+)/);
+  if (!match) return null;
+  try {
+    const value = decodeURIComponent(match[1]).trim();
+    return value || null;
+  } catch {
+    return null;
+  }
+}
+
+// Mirror the basename handling Dispatch's nav links use: pass a router-local
+// path when the live URL is already under the mount, otherwise prefix it.
+function dispatchNavTarget(path: string): string {
+  if (typeof window === "undefined") return path;
+  const basePath = appBasePath();
+  if (!basePath) return path;
+  const pathname = window.location.pathname;
+  const routerHasBasename =
+    pathname === basePath || pathname.startsWith(`${basePath}/`);
+  return routerHasBasename ? path : appPath(path);
+}
+
+interface DispatchThreadUrlSync {
+  routeThreadId: string | null;
+  getPath: (threadId: string | null) => string;
+  navigate: (path: string, options?: { replace?: boolean }) => void;
+}
+
+type DispatchAgentChatSurfaceProps = ComponentProps<typeof AgentChatSurface> & {
+  threadUrlSync?: DispatchThreadUrlSync;
+};
+
+function DispatchAgentChatSurface(props: DispatchAgentChatSurfaceProps) {
+  return <AgentChatSurface {...props} />;
+}
+
+interface DispatchChatLocationState {
+  dispatchPrompt?: {
+    id?: string | number;
+    message?: string;
+    selectedModel?: string | null;
+    selectedEngine?: string | null;
+    selectedEffort?: ComponentProps<typeof AgentChatSurface>["selectedEffort"];
+  };
+  dispatchThread?: {
+    id?: string | number;
+    threadId?: string;
+  };
+}
+
+export function meta() {
+  return [{ title: "Chat — Dispatch" }];
+}
+
+export default function ChatRoute() {
+  const t = useT();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const routeThreadId = threadIdFromPath(location.pathname);
+  const agentPath = new URLSearchParams(location.search).get("agent");
+  const agentsQuery = useActionQuery<WorkspaceAgentResource[]>(
+    "list-workspace-resources",
+    { kind: "agent" },
+    { enabled: Boolean(agentPath), staleTime: 30_000 },
+  );
+  const agent = useMemo(
+    () =>
+      agentPath
+        ? (agentsQuery.data ?? []).find((resource) => {
+            const profileId = resource.path
+              .replace(/^agents\//, "")
+              .replace(/\.md$/, "");
+            return (
+              resource.path === agentPath ||
+              resource.id === agentPath ||
+              profileId === agentPath
+            );
+          })
+        : undefined,
+    [agentPath, agentsQuery.data],
+  );
+  const agentScope = useMemo(
+    () =>
+      agent
+        ? {
+            type: "agent",
+            id: agent.id,
+            label: agent.name,
+            contextKey: `dispatch-agent:${agent.id}`,
+          }
+        : null,
+    [agent],
+  );
+  const handledStateIds = useRef(new Set<string>());
+  const extensions = useDispatchExtensions();
+  const suppressInlineOpenApp =
+    extensions?.chatFirst === true ||
+    readChatFirstMode() ||
+    new URLSearchParams(location.search).get("chatFirst") === "1";
+
+  const navigateThreadUrl = useCallback(
+    (path: string, options?: { replace?: boolean }) =>
+      navigate(dispatchNavTarget(path), options),
+    [navigate],
+  );
+  const threadUrlSync = useMemo<DispatchThreadUrlSync>(
+    () => ({
+      routeThreadId: routeThreadId ?? null,
+      getPath: (threadId) => chatThreadPath(threadId, agentPath ?? undefined),
+      navigate: navigateThreadUrl,
+    }),
+    [agentPath, routeThreadId, navigateThreadUrl],
+  );
+  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,
+          selectedEngine: prompt?.selectedEngine,
+          selectedEffort: prompt?.selectedEffort,
+        });
+      }
+      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,
+    prompt?.selectedEngine,
+    prompt?.selectedEffort,
+    thread?.id,
+    thread?.threadId,
+  ]);
+
+  useEffect(() => {
+    function handleChatRunning(event: Event) {
+      const detail = (event as CustomEvent).detail;
+      if (detail?.isRunning === true) markAgentChatHomeHandoff("dispatch");
+    }
+
+    window.addEventListener("agentNative.chatRunning", handleChatRunning);
+    return () =>
+      window.removeEventListener("agentNative.chatRunning", handleChatRunning);
+  }, []);
+
+  useEffect(() => {
+    if (!agent) return;
+    const timer = window.setTimeout(() => {
+      insertAgentComposerReference(
+        {
+          label: agent.name,
+          icon: "agent",
+          source: "agent:custom",
+          refType: "custom-agent",
+          refId: agent.id,
+          refPath: agent.path,
+          slotKey: "dispatch-agent",
+          slotLabel: "Agent",
+        },
+        { openSidebar: false },
+      );
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [agent?.id, agent?.name, agent?.path]);
+
+  if (agentPath && agentsQuery.isLoading) {
+    return (
+      <div className="flex h-full min-h-0 flex-col gap-4 bg-background px-4 py-6 sm:px-6">
+        <Skeleton className="mx-auto h-6 w-48" />
+        <Skeleton className="mx-auto h-12 w-full max-w-2xl" />
+      </div>
+    );
+  }
+
+  if (agentPath && agentsQuery.isError) {
+    return (
+      <div className="flex h-full min-h-0 items-center justify-center bg-background px-4">
+        <ActionQueryError
+          error={agentsQuery.error}
+          onRetry={() => void agentsQuery.refetch()}
+        />
+      </div>
+    );
+  }
+
+  if (agentPath && !agent) {
+    return (
+      <div className="flex h-full min-h-0 items-center justify-center bg-background px-4 text-sm text-muted-foreground">
+        This agent is no longer available.
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background">
+      <DispatchAgentChatSurface
+        key={agent ? `agent-${agent.id}` : "dispatch"}
+        mode="page"
+        chatViewTransition
+        className="dispatch-chat-panel px-4 sm:px-6"
+        defaultMode="chat"
+        storageKey={agent ? `dispatch-agent-${agent.id}` : "dispatch"}
+        scope={agentScope}
+        threadUrlSync={threadUrlSync}
+        showHeader={false}
+        showTabBar={false}
+        dynamicSuggestions={false}
+        suppressInlineOpenApp={suppressInlineOpenApp}
+        suggestions={[]}
+        emptyStateText={t("dispatch.pages.chatAcrossAppsDescription", {
+          defaultValue:
+            "Route work, inspect status, or create something new from one place.",
+        })}
+        emptyStateDisplay="hidden"
+        {...(!prompt?.message
+          ? {
+              centerComposerWhenEmpty: true,
+              composerLayoutVariant: "hero" as const,
+            }
+          : {})}
+        composerPlaceholder={
+          agent
+            ? `Ask ${agent.name}...`
+            : t("dispatch.pages.chatPromptPlaceholder", {
+                defaultValue: "Ask Dispatch...",
+              })
+        }
+        composerSlot={
+          agent ? (
+            <div className="dispatch-chat-intro">
+              <h1>{agent.name}</h1>
+              {agent.description ? <p>{agent.description}</p> : null}
+            </div>
+          ) : !prompt?.message ? (
+            <div className="dispatch-chat-intro">
+              <h1>
+                {t("dispatch.pages.chatAcrossApps", {
+                  defaultValue: "Chat across your apps",
+                })}
+              </h1>
+              <p>
+                {t("dispatch.pages.chatAcrossAppsDescription", {
+                  defaultValue:
+                    "Route work, inspect status, or create something new from one place.",
+                })}
+              </p>
+            </div>
+          ) : null
+        }
+      />
+    </div>
+  );
+}

package/src/routes/pages/destinations.tsx

@@ -0,0 +1,309 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconChevronRight } from "@tabler/icons-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { ActionQueryError } from "../../components/action-query-error";
+import { DispatchShell } from "../../components/dispatch-shell";
+import { TaskQueueHealth } from "../../components/task-queue-health";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../../components/ui/alert-dialog";
+import { Button } from "../../components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../../components/ui/collapsible";
+import { Input } from "../../components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/ui/select";
+import { Textarea } from "../../components/ui/textarea";
+
+export function meta() {
+  return [{ title: "Destinations — Dispatch" }];
+}
+
+function QuickSendRow({
+  destination,
+}: {
+  destination: { id: string; name: string };
+}) {
+  const t = useT();
+  const [text, setText] = useState("");
+  const send = useActionMutation("send-platform-message", {
+    onSuccess: () => {
+      toast.success(t("dispatch.pages.messageSent"));
+      setText("");
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : t("dispatch.pages.unableToSendMessage"),
+      );
+    },
+  });
+  return (
+    <div className="mt-3 flex gap-2">
+      <Input
+        value={text}
+        onChange={(event) => setText(event.target.value)}
+        placeholder={t("dispatch.pages.quickTestMessage")}
+      />
+      <Button
+        onClick={() =>
+          send.mutate({
+            destinationId: destination.id,
+            text: text || `Test message to ${destination.name}`,
+          })
+        }
+        disabled={send.isPending}
+      >
+        {t("dispatch.pages.send")}
+      </Button>
+    </div>
+  );
+}
+
+export default function DestinationsRoute() {
+  const t = useT();
+  const destinationsQuery = useActionQuery("list-destinations", {});
+  const { data } = destinationsQuery;
+  const [form, setForm] = useState({
+    name: "",
+    platform: "slack",
+    destination: "",
+    threadRef: "",
+    notes: "",
+  });
+  const [addOpen, setAddOpen] = useState(false);
+
+  const upsert = useActionMutation("upsert-destination", {
+    onSuccess: () => {
+      toast.success(t("dispatch.pages.destinationSaved"));
+      setForm((current) => ({
+        ...current,
+        name: "",
+        destination: "",
+        threadRef: "",
+        notes: "",
+      }));
+    },
+  });
+  const remove = useActionMutation("delete-destination", {
+    onSuccess: () => toast.success(t("dispatch.pages.destinationRemoved")),
+  });
+
+  return (
+    <DispatchShell
+      title={t("dispatch.nav.destinations")}
+      description={t("dispatch.pages.destinationsDescription")}
+    >
+      <div className="flex flex-col gap-4">
+        <TaskQueueHealth />
+        <section className="rounded-2xl bg-card p-5">
+          <h2 className="text-lg font-semibold text-foreground">
+            {t("dispatch.pages.savedDestinations")}
+          </h2>
+          {destinationsQuery.isError ? (
+            <ActionQueryError
+              className="mt-4"
+              error={destinationsQuery.error}
+              onRetry={() => void destinationsQuery.refetch()}
+            />
+          ) : (
+            <div className="mt-4 divide-y">
+              {(data || []).map((destination: any) => (
+                <div key={destination.id} className="py-4 first:pt-0">
+                  <div className="flex items-start justify-between gap-3">
+                    <div>
+                      <div className="text-sm font-medium text-foreground">
+                        {destination.name}
+                      </div>
+                      <div className="mt-1 text-xs text-muted-foreground">
+                        {destination.platform} · {destination.destination}
+                        {destination.threadRef
+                          ? ` · thread ${destination.threadRef}`
+                          : ""}
+                      </div>
+                      {destination.notes && (
+                        <p className="mt-2 text-sm text-muted-foreground">
+                          {destination.notes}
+                        </p>
+                      )}
+                    </div>
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button variant="outline" size="sm">
+                          {t("dispatch.pages.delete")}
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>
+                            {t("dispatch.pages.deleteDestinationTitle")}
+                          </AlertDialogTitle>
+                          <AlertDialogDescription>
+                            {t("dispatch.pages.deleteDestinationDescription", {
+                              name: destination.name,
+                            })}
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>
+                            {t("dispatch.pages.cancel")}
+                          </AlertDialogCancel>
+                          <AlertDialogAction
+                            onClick={() =>
+                              remove.mutate({ id: destination.id })
+                            }
+                          >
+                            {t("dispatch.pages.delete")}
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  </div>
+                  <Collapsible className="mt-3">
+                    <CollapsibleTrigger className="group flex w-full cursor-pointer items-center gap-1.5 text-left text-xs font-medium text-muted-foreground hover:text-foreground">
+                      <IconChevronRight className="h-3.5 w-3.5 transition-transform group-data-[state=open]:rotate-90" />
+                      <span>Send a test message</span>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <QuickSendRow destination={destination} />
+                    </CollapsibleContent>
+                  </Collapsible>
+                </div>
+              ))}
+              {(data?.length || 0) === 0 && (
+                <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
+                  {t("dispatch.pages.noDestinations")}
+                </div>
+              )}
+            </div>
+          )}
+        </section>
+
+        <Collapsible
+          open={addOpen}
+          onOpenChange={setAddOpen}
+          className="rounded-2xl bg-card"
+        >
+          <CollapsibleTrigger className="group flex w-full cursor-pointer items-center justify-between gap-3 p-5 text-left hover:bg-muted/20">
+            <span>
+              <span className="block text-lg font-semibold text-foreground">
+                {t("dispatch.pages.addDestination")}
+              </span>
+              <span className="mt-1 block text-sm text-muted-foreground">
+                Save a reusable delivery target for scheduled or agent-sent
+                messages.
+              </span>
+            </span>
+            <IconChevronRight className="h-5 w-5 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
+          </CollapsibleTrigger>
+          <CollapsibleContent className="border-t px-5 pb-5 pt-4">
+            <div className="space-y-3">
+              <Input
+                value={form.name}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    name: event.target.value,
+                  }))
+                }
+                placeholder={t("dispatch.pages.dailyDigestChannel")}
+              />
+              <Select
+                value={form.platform}
+                onValueChange={(value) =>
+                  setForm((current) => ({
+                    ...current,
+                    platform: value,
+                  }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="slack">Slack</SelectItem>
+                  <SelectItem value="telegram">Telegram</SelectItem>
+                  <SelectItem value="email">Email</SelectItem>
+                </SelectContent>
+              </Select>
+              <Input
+                value={form.destination}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    destination: event.target.value,
+                  }))
+                }
+                placeholder={
+                  form.platform === "slack"
+                    ? "C0123456789"
+                    : form.platform === "email"
+                      ? "teammate+qa@agent-native.test"
+                      : "123456789"
+                }
+              />
+              <Input
+                value={form.threadRef}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    threadRef: event.target.value,
+                  }))
+                }
+                placeholder={t("dispatch.pages.optionalThreadOrTopicId")}
+              />
+              <Textarea
+                value={form.notes}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    notes: event.target.value,
+                  }))
+                }
+                placeholder={t("dispatch.pages.destinationNotes")}
+              />
+              <Button
+                className="w-full"
+                onClick={() =>
+                  upsert.mutate({
+                    name: form.name,
+                    platform: form.platform as "slack" | "telegram" | "email",
+                    destination: form.destination,
+                    threadRef: form.threadRef || undefined,
+                    notes: form.notes || undefined,
+                  })
+                }
+                disabled={!form.name || !form.destination}
+              >
+                {t("dispatch.pages.saveDestination")}
+              </Button>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    </DispatchShell>
+  );
+}