@agent-native/dispatch 0.1.1

package/src/routes/pages/apps.tsx

@@ -0,0 +1,163 @@
+import { useActionQuery } from "@agent-native/core/client";
+import {
+  IconArrowUpRight,
+  IconApps,
+  IconClockHour4,
+  IconPlus,
+} from "@tabler/icons-react";
+import { AppKeysPopover } from "@/components/app-keys-popover";
+import { CreateAppPopover } from "@/components/create-app-popover";
+import { DispatchShell } from "@/components/dispatch-shell";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+interface WorkspaceAppSummary {
+  id: string;
+  name: string;
+  description?: string;
+  path: string;
+  url?: string | null;
+  isDispatch: boolean;
+  status?: "ready" | "pending";
+  statusLabel?: string;
+  builderUrl?: string | null;
+  branchName?: string | null;
+}
+
+function workspaceAppHref(app: WorkspaceAppSummary): string | null {
+  if (app.status === "pending") return app.builderUrl || null;
+  return app.url || app.path || null;
+}
+
+function isPendingBuilderHref(app: WorkspaceAppSummary): boolean {
+  return app.status === "pending" && !!app.builderUrl;
+}
+
+export function meta() {
+  return [{ title: "Apps — Dispatch" }];
+}
+
+interface WorkspaceInfo {
+  name: string | null;
+  displayName: string | null;
+  appCount: number;
+}
+
+export default function AppsRoute() {
+  const { data: apps = [] } = useActionQuery(
+    "list-workspace-apps",
+    { includeAgentCards: false },
+    {
+      refetchInterval: 2_000,
+    },
+  );
+  const { data: workspace } = useActionQuery(
+    "get-workspace-info",
+    {},
+    { staleTime: 60_000 },
+  );
+  const ws = workspace as WorkspaceInfo | undefined;
+  const workspaceLabel = ws?.displayName ?? ws?.name ?? null;
+  const typedApps = (apps as WorkspaceAppSummary[]).filter(
+    (app) => !app.isDispatch,
+  );
+
+  return (
+    <DispatchShell
+      title="Apps"
+      description={
+        workspaceLabel
+          ? `Apps in the "${workspaceLabel}" workspace. Each app gets its own route under this workspace and shares its database, auth, and agent chat.`
+          : "Open workspace apps and start new app creation from Dispatch."
+      }
+    >
+      <div className="space-y-4">
+        <section className="space-y-3">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-2">
+              <IconApps size={16} className="text-muted-foreground" />
+              <h2 className="text-sm font-semibold text-foreground">
+                {workspaceLabel
+                  ? `Apps in ${workspaceLabel}`
+                  : "Workspace apps"}
+              </h2>
+            </div>
+            <CreateAppPopover
+              align="end"
+              trigger={
+                <Button size="sm" variant="outline">
+                  <IconPlus size={15} className="mr-1.5" />
+                  App
+                </Button>
+              }
+            />
+          </div>
+
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {typedApps.map((app) => {
+              const href = workspaceAppHref(app);
+              // Pending Builder branches live on a different host; open
+              // those in a new tab. Ready workspace apps stay in-window
+              // so the cards work inside the Builder webview, where new
+              // tabs would escape to the host browser.
+              const openInNewTab = isPendingBuilderHref(app);
+              return (
+                <a
+                  key={app.id}
+                  href={href ?? undefined}
+                  target={openInNewTab ? "_blank" : undefined}
+                  rel={openInNewTab ? "noreferrer" : undefined}
+                  aria-disabled={!href}
+                  className="group rounded-lg border bg-card p-4 transition hover:border-foreground/30 aria-disabled:pointer-events-none aria-disabled:opacity-60"
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="flex min-w-0 items-center gap-2">
+                        <h3 className="truncate text-sm font-semibold text-foreground">
+                          {app.name}
+                        </h3>
+                        {app.status === "pending" ? (
+                          <Badge
+                            variant="outline"
+                            className="shrink-0 gap-1 border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"
+                          >
+                            <IconClockHour4 size={12} />
+                            Building
+                          </Badge>
+                        ) : null}
+                      </div>
+                      <p className="mt-1 truncate font-mono text-xs text-muted-foreground">
+                        {app.path}
+                      </p>
+                      {app.status === "pending" && app.branchName ? (
+                        <p className="mt-1 truncate text-xs text-muted-foreground">
+                          Branch: {app.branchName}
+                        </p>
+                      ) : null}
+                      {app.description ? (
+                        <p className="mt-2 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
+                          {app.description}
+                        </p>
+                      ) : null}
+                    </div>
+                    <div className="flex shrink-0 items-center gap-1">
+                      {app.status === "ready" ? (
+                        <AppKeysPopover appId={app.id} appName={app.name} />
+                      ) : null}
+                      <IconArrowUpRight
+                        size={16}
+                        className="text-muted-foreground transition group-hover:text-foreground"
+                      />
+                    </div>
+                  </div>
+                </a>
+              );
+            })}
+
+            <CreateAppPopover />
+          </div>
+        </section>
+      </div>
+    </DispatchShell>
+  );
+}

package/src/routes/pages/audit.tsx

@@ -0,0 +1,41 @@
+import { useActionQuery } from "@agent-native/core/client";
+import { DispatchShell } from "@/components/dispatch-shell";
+
+export function meta() {
+  return [{ title: "Audit — Dispatch" }];
+}
+
+export default function AuditRoute() {
+  const { data } = useActionQuery("list-dispatch-audit", { limit: 100 });
+
+  return (
+    <DispatchShell
+      title="Audit"
+      description="Change history for routes, settings, and approvals."
+    >
+      <section className="rounded-2xl border bg-card p-5">
+        <div className="space-y-3">
+          {(data || []).map((event) => (
+            <div
+              key={event.id}
+              className="rounded-xl border bg-muted/30 px-4 py-3"
+            >
+              <div className="text-sm font-medium text-foreground">
+                {event.summary}
+              </div>
+              <div className="mt-1 text-xs text-muted-foreground">
+                {event.actor} · {event.action} ·{" "}
+                {new Date(event.createdAt).toLocaleString()}
+              </div>
+            </div>
+          ))}
+          {(data?.length || 0) === 0 && (
+            <div className="rounded-xl border border-dashed px-4 py-6 text-sm text-muted-foreground">
+              No audit entries yet.
+            </div>
+          )}
+        </div>
+      </section>
+    </DispatchShell>
+  );
+}

package/src/routes/pages/destinations.tsx

@@ -0,0 +1,253 @@
+import { useState } from "react";
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import { toast } from "sonner";
+import { DispatchShell } from "@/components/dispatch-shell";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+export function meta() {
+  return [{ title: "Destinations — Dispatch" }];
+}
+
+function QuickSendRow({
+  destination,
+}: {
+  destination: { id: string; name: string };
+}) {
+  const [text, setText] = useState("");
+  const send = useActionMutation("send-platform-message", {
+    onSuccess: () => {
+      toast.success("Message sent");
+      setText("");
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Unable to send message",
+      );
+    },
+  });
+  return (
+    <div className="mt-3 flex gap-2">
+      <Input
+        value={text}
+        onChange={(event) => setText(event.target.value)}
+        placeholder="Quick test message"
+      />
+      <Button
+        onClick={() =>
+          send.mutate({
+            destinationId: destination.id,
+            text: text || `Test message to ${destination.name}`,
+          })
+        }
+        disabled={send.isPending}
+      >
+        Send
+      </Button>
+    </div>
+  );
+}
+
+export default function DestinationsRoute() {
+  const { data } = useActionQuery("list-destinations", {});
+  const [form, setForm] = useState({
+    name: "",
+    platform: "slack",
+    destination: "",
+    threadRef: "",
+    notes: "",
+  });
+
+  const upsert = useActionMutation("upsert-destination", {
+    onSuccess: () => {
+      toast.success("Destination saved");
+      setForm((current) => ({
+        ...current,
+        name: "",
+        destination: "",
+        threadRef: "",
+        notes: "",
+      }));
+    },
+  });
+  const remove = useActionMutation("delete-destination", {
+    onSuccess: () => toast.success("Destination removed"),
+  });
+
+  return (
+    <DispatchShell
+      title="Destinations"
+      description="Saved outbound Slack channels, Telegram chats, and thread targets."
+    >
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
+        <section className="rounded-2xl border bg-card p-5">
+          <h2 className="text-lg font-semibold text-foreground">
+            Saved destinations
+          </h2>
+          <div className="mt-4 space-y-3">
+            {(data || []).map((destination) => (
+              <div
+                key={destination.id}
+                className="rounded-xl border bg-muted/30 p-4"
+              >
+                <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">
+                        Delete
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>Delete destination?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                          “{destination.name}” will be removed. Any saved
+                          workflows or jobs that target this destination will
+                          start failing on the next send.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction
+                          onClick={() => remove.mutate({ id: destination.id })}
+                        >
+                          Delete
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                </div>
+                <QuickSendRow destination={destination} />
+              </div>
+            ))}
+            {(data?.length || 0) === 0 && (
+              <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
+                No destinations saved yet. Add your first Slack channel or
+                Telegram chat on the right.
+              </div>
+            )}
+          </div>
+        </section>
+
+        <section className="rounded-2xl border bg-card p-5">
+          <h2 className="text-lg font-semibold text-foreground">
+            Add destination
+          </h2>
+          <div className="mt-4 space-y-3">
+            <Input
+              value={form.name}
+              onChange={(event) =>
+                setForm((current) => ({ ...current, name: event.target.value }))
+              }
+              placeholder="Daily digest channel"
+            />
+            <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="Optional thread or topic id"
+            />
+            <Textarea
+              value={form.notes}
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  notes: event.target.value,
+                }))
+              }
+              placeholder="What should use this destination?"
+            />
+            <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}
+            >
+              Save destination
+            </Button>
+          </div>
+        </section>
+      </div>
+    </DispatchShell>
+  );
+}

package/src/routes/pages/identities.tsx

@@ -0,0 +1,91 @@
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import { toast } from "sonner";
+import { DispatchShell } from "@/components/dispatch-shell";
+import { Button } from "@/components/ui/button";
+
+export function meta() {
+  return [{ title: "Identities — Dispatch" }];
+}
+
+export default function IdentitiesRoute() {
+  const { data } = useActionQuery("list-linked-identities", {});
+  const createToken = useActionMutation("create-link-token", {
+    onSuccess: () => toast.success("Link token created"),
+  });
+
+  return (
+    <DispatchShell
+      title="Identities"
+      description="Link external senders to workspace users."
+    >
+      <div className="grid gap-4 xl:grid-cols-2">
+        <section className="rounded-2xl border bg-card p-5">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <h2 className="text-lg font-semibold text-foreground">
+              Active links
+            </h2>
+            <div className="flex shrink-0 gap-2">
+              <Button
+                variant="outline"
+                onClick={() => createToken.mutate({ platform: "slack" })}
+              >
+                New Slack token
+              </Button>
+              <Button
+                onClick={() => createToken.mutate({ platform: "telegram" })}
+              >
+                New Telegram token
+              </Button>
+            </div>
+          </div>
+          <div className="mt-4 space-y-3">
+            {(data?.links || []).map((link) => (
+              <div
+                key={link.id}
+                className="rounded-xl border bg-muted/30 px-4 py-3"
+              >
+                <div className="text-sm font-medium text-foreground">
+                  {link.externalUserName || link.externalUserId}
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">
+                  {link.platform} → {link.ownerEmail}
+                </div>
+              </div>
+            ))}
+            {(data?.links?.length || 0) === 0 && (
+              <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
+                No linked identities yet. Generate a token and ask the user to
+                send <code>/link TOKEN</code> from Slack or Telegram.
+              </div>
+            )}
+          </div>
+        </section>
+
+        <section className="rounded-2xl border bg-card p-5">
+          <h2 className="text-lg font-semibold text-foreground">Link tokens</h2>
+          <div className="mt-4 space-y-3">
+            {(data?.tokens || []).map((token) => (
+              <div key={token.id} className="rounded-xl border px-4 py-3">
+                <div className="text-sm font-medium text-foreground">
+                  /link {token.token}
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">
+                  {token.platform} · expires{" "}
+                  {new Date(token.expiresAt).toLocaleString()}
+                  {token.claimedAt
+                    ? ` · claimed by ${token.claimedByExternalUserName || token.claimedByExternalUserId}`
+                    : " · waiting to be claimed"}
+                </div>
+              </div>
+            ))}
+            {(data?.tokens?.length || 0) === 0 && (
+              <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
+                No active link tokens.
+              </div>
+            )}
+          </div>
+        </section>
+      </div>
+    </DispatchShell>
+  );
+}