@jami-studio/dispatch 0.13.14

package/src/components/dispatch-control-plane.tsx

@@ -0,0 +1,228 @@
+import {
+  PromptComposer,
+  isInBuilderFrame,
+  useActionQuery,
+  useChatModels,
+  useT,
+} from "@agent-native/core/client";
+import {
+  IconArrowUpRight,
+  IconBroadcast,
+  IconStack3,
+  type IconProps,
+} from "@tabler/icons-react";
+import type { ReactNode } from "react";
+import { Link, useNavigate } from "react-router";
+
+import { submitOverviewPrompt } from "../lib/overview-chat";
+import type { WorkspaceAppSummary } from "../lib/workspace-apps";
+import { CreateAppPopover } from "./create-app-popover";
+import { DispatchShell } from "./dispatch-shell";
+import { Button } from "./ui/button";
+import { Skeleton } from "./ui/skeleton";
+import { WorkspaceAppCard } from "./workspace-app-card";
+
+const PROMPT_SUGGESTIONS = [
+  "Summarize the current workspace health",
+  "Create an app for onboarding requests",
+  "Check which agents can help with analytics",
+];
+
+const WORKSPACE_LINKS = [
+  { to: "/automations", labelKey: "dispatch.nav.automations" },
+  { to: "/approvals", labelKey: "dispatch.nav.approvals" },
+  { to: "/destinations", labelKey: "dispatch.nav.delivery" },
+  { to: "/agents", labelKey: "dispatch.nav.agents" },
+  { to: "/vault", labelKey: "dispatch.nav.vault" },
+  { to: "/audit", labelKey: "dispatch.nav.audit" },
+] as const;
+
+function SectionHeader({
+  icon: Icon,
+  title,
+  detail,
+  action,
+}: {
+  icon: React.ComponentType<IconProps>;
+  title: string;
+  detail?: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="flex min-w-0 items-center justify-between gap-3">
+      <div className="flex min-w-0 items-center gap-2">
+        <Icon size={16} className="shrink-0 text-muted-foreground" />
+        <div className="min-w-0">
+          <h2 className="truncate text-sm font-semibold text-foreground">
+            {title}
+          </h2>
+          {detail ? (
+            <p className="mt-0.5 truncate text-xs text-muted-foreground">
+              {detail}
+            </p>
+          ) : null}
+        </div>
+      </div>
+      {action ? <div className="shrink-0">{action}</div> : null}
+    </div>
+  );
+}
+
+function CommandPanel() {
+  const { selectedModel } = useChatModels();
+  const navigate = useNavigate();
+
+  function send(message: string) {
+    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 (
+    <section className="rounded-lg border bg-card p-4">
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <IconBroadcast size={16} className="text-muted-foreground" />
+          <h2 className="text-sm font-semibold text-foreground">
+            Ask Dispatch
+          </h2>
+        </div>
+        <Button variant="outline" size="sm" asChild>
+          <Link to="/chat">
+            Open chat
+            <IconArrowUpRight size={14} />
+          </Link>
+        </Button>
+      </div>
+      <PromptComposer
+        placeholder="Route work, inspect status, or create an app..."
+        onSubmit={(text) => send(text)}
+      />
+      <div className="mt-3 flex flex-wrap gap-2">
+        {PROMPT_SUGGESTIONS.map((suggestion) => (
+          <button
+            key={suggestion}
+            type="button"
+            onClick={() => send(suggestion)}
+            className="cursor-pointer rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-muted-foreground transition hover:border-foreground/30 hover:text-foreground"
+          >
+            {suggestion}
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function WorkspaceLinks() {
+  const t = useT();
+
+  return (
+    <nav
+      aria-label={t("dispatch.pages.workspaceShortcutsAria")}
+      className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground"
+    >
+      <span className="font-medium text-foreground/70">
+        {t("dispatch.pages.also")}
+      </span>
+      {WORKSPACE_LINKS.map((item, index) => (
+        <span key={item.to} className="inline-flex items-center gap-x-3">
+          {index > 0 ? (
+            <span aria-hidden className="text-border">
+              ·
+            </span>
+          ) : null}
+          <Link
+            to={item.to}
+            className="transition hover:text-foreground hover:underline underline-offset-4"
+          >
+            {t(item.labelKey)}
+          </Link>
+        </span>
+      ))}
+    </nav>
+  );
+}
+
+function AppsPanel({
+  apps,
+  isLoading,
+}: {
+  apps: WorkspaceAppSummary[];
+  isLoading: boolean;
+}) {
+  const visibleApps = apps.filter((app) => !app.isDispatch && !app.archived);
+  const showSkeletons = isLoading && visibleApps.length === 0;
+
+  return (
+    <section className="flex flex-col gap-3">
+      <SectionHeader
+        icon={IconStack3}
+        title="Apps"
+        detail={
+          visibleApps.length === 1 ? "1 active" : `${visibleApps.length} active`
+        }
+        action={
+          <Button variant="outline" size="sm" asChild>
+            <Link to="/apps">
+              View all
+              <IconArrowUpRight size={14} />
+            </Link>
+          </Button>
+        }
+      />
+      {showSkeletons ? (
+        <div className="grid gap-3 md:grid-cols-2">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <div key={index} className="rounded-lg border bg-card p-4">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="mt-3 h-3 w-24" />
+              <Skeleton className="mt-3 h-3 w-full" />
+            </div>
+          ))}
+        </div>
+      ) : visibleApps.length > 0 ? (
+        <div className="grid gap-3 md:grid-cols-2">
+          {visibleApps.map((app) => (
+            <WorkspaceAppCard key={app.id} app={app} className="min-h-32" />
+          ))}
+        </div>
+      ) : (
+        <CreateAppPopover />
+      )}
+    </section>
+  );
+}
+
+export function DispatchControlPlane() {
+  const { data: workspaceApps = [], isLoading: appsLoading } = useActionQuery<
+    WorkspaceAppSummary[]
+  >("list-workspace-apps", { includeAgentCards: false, includeArchived: true });
+
+  return (
+    <DispatchShell
+      title="Overview"
+      description="Ask Dispatch or jump into a workspace app."
+    >
+      <div className="flex flex-col gap-6">
+        <CommandPanel />
+        <WorkspaceLinks />
+        <AppsPanel apps={workspaceApps ?? []} isLoading={appsLoading} />
+      </div>
+    </DispatchShell>
+  );
+}

package/src/components/dispatch-shell.tsx

@@ -0,0 +1,53 @@
+import { useT } from "@agent-native/core/client";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { type ReactNode } from "react";
+
+import { useSetPageTitle } from "./layout/HeaderActions";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+
+/**
+ * DispatchShell renders the per-page title (with an optional click-to-open
+ * description popover) into the global header via the HeaderActions store.
+ * The actual chrome (sidebar, AgentSidebar, header bar with AgentToggleButton)
+ * is provided by `Layout` mounted in `root.tsx`.
+ */
+export function DispatchShell({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}) {
+  const t = useT();
+  useSetPageTitle(
+    <div className="flex items-center gap-2 min-w-0">
+      <h1 className="text-lg font-semibold tracking-tight truncate text-foreground">
+        {title}
+      </h1>
+      {description ? (
+        <Popover>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 hover:bg-accent hover:text-foreground cursor-pointer"
+              aria-label={t("dispatch.sidebar.aboutPage", { title })}
+            >
+              <IconInfoCircle className="h-3.5 w-3.5" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent
+            side="bottom"
+            align="start"
+            className="max-w-72 text-xs leading-relaxed"
+          >
+            {description}
+          </PopoverContent>
+        </Popover>
+      ) : null}
+    </div>,
+  );
+
+  return <>{children}</>;
+}

package/src/components/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Public dispatch UI components. Most consumers only use `dispatchRoutes`
+ * and never import from here directly — components are exported as a
+ * customization escape hatch for embedding (e.g. mount `<DispatchShell>`
+ * inside a parent layout, or render `<AppKeysPopover>` next to a custom
+ * card list).
+ */
+export { DispatchShell } from "./dispatch-shell.js";
+export { Layout, NavContent } from "./layout/Layout.js";
+export type {
+  DispatchExtensionConfig,
+  DispatchNavIcon,
+  DispatchNavItem,
+  DispatchNavSection,
+} from "./layout/Layout.js";
+export { CreateAppPopover, CreateAppFlow } from "./create-app-popover.js";
+export { AppKeysPopover } from "./app-keys-popover.js";

package/src/components/layout/Header.tsx

@@ -0,0 +1,93 @@
+import { AgentToggleButton, LanguagePicker } from "@agent-native/core/client";
+import { RunsTray } from "@agent-native/core/client/progress";
+import { IconLayoutSidebar } from "@tabler/icons-react";
+import { useLocation, useNavigate } from "react-router";
+
+import { Button } from "../ui/button";
+import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
+
+const pageTitles: Record<string, string> = {
+  "/": "Overview",
+  "/overview": "Overview",
+  "/vault": "Vault",
+  "/integrations": "Integrations",
+  "/workspace": "Resources",
+  "/messaging": "Messaging",
+  "/agents": "Agents",
+  "/destinations": "Destinations",
+  "/identities": "Identities",
+  "/approvals": "Approvals",
+  "/automations": "Automations",
+  "/audit": "Audit",
+  "/settings": "Settings",
+};
+
+function resolveTitle(pathname: string): string {
+  if (pageTitles[pathname]) return pageTitles[pathname];
+
+  if (pathname.startsWith("/extensions")) return "Extensions";
+
+  return "Dispatch";
+}
+
+export function Header({
+  onOpenMobile,
+  showAgentToggle = true,
+}: {
+  onOpenMobile?: () => void;
+  showAgentToggle?: boolean;
+}) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const title = useHeaderTitle();
+  const actions = useHeaderActions();
+
+  function openRunThread(threadId: string) {
+    navigate("/chat", {
+      state: {
+        dispatchThread: {
+          id: `${Date.now()}-${threadId}`,
+          threadId,
+        },
+      },
+    });
+    window.requestAnimationFrame(() => {
+      window.dispatchEvent(
+        new CustomEvent("agent-chat:open-thread", {
+          detail: { threadId },
+        }),
+      );
+    });
+  }
+
+  return (
+    <header className="flex h-12 shrink-0 items-center gap-3 border-b border-border bg-background px-4 lg:px-6">
+      {onOpenMobile ? (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 lg:hidden cursor-pointer"
+          onClick={onOpenMobile}
+          aria-label="Open navigation"
+        >
+          <IconLayoutSidebar />
+        </Button>
+      ) : null}
+      <div className="flex items-center gap-3 flex-1 min-w-0">
+        {title ?? (
+          <h1 className="text-lg font-semibold tracking-tight truncate">
+            {resolveTitle(location.pathname)}
+          </h1>
+        )}
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        {actions}
+        <LanguagePicker variant="icon" />
+        <RunsTray limit={8} onOpenThread={openRunThread} />
+        {showAgentToggle ? (
+          <AgentToggleButton className="h-8 w-8 rounded-md hover:bg-accent" />
+        ) : null}
+      </div>
+    </header>
+  );
+}

package/src/components/layout/HeaderActions.tsx

@@ -0,0 +1,84 @@
+import {
+  useEffect,
+  useSyncExternalStore,
+  type ReactNode,
+  type FC,
+} from "react";
+
+/**
+ * External store for the page's header title + actions. We use an external
+ * store (not React context) so that pages can inject ReactNode without
+ * subscribing to the header state themselves — subscribing would trigger a
+ * re-render on every update, which in turn creates new JSX, which updates
+ * the store again, which re-renders… an infinite loop.
+ *
+ * Only <Header /> reads the store via useSyncExternalStore; pages only write.
+ */
+
+type Listener = () => void;
+
+let currentTitle: ReactNode = null;
+let currentActions: ReactNode = null;
+const listeners = new Set<Listener>();
+
+function notify() {
+  for (const l of listeners) l();
+}
+
+function subscribe(l: Listener): () => void {
+  listeners.add(l);
+  return () => {
+    listeners.delete(l);
+  };
+}
+
+/** Consumed only by <Header /> — returns the current title. */
+export function useHeaderTitle(): ReactNode {
+  return useSyncExternalStore(
+    subscribe,
+    () => currentTitle,
+    () => currentTitle,
+  );
+}
+
+/** Consumed only by <Header /> — returns the current actions slot. */
+export function useHeaderActions(): ReactNode {
+  return useSyncExternalStore(
+    subscribe,
+    () => currentActions,
+    () => currentActions,
+  );
+}
+
+/**
+ * Provider is now a no-op wrapper for backwards compatibility — the state
+ * lives in the module-level store above. Kept as a component so callers of
+ * <HeaderActionsProvider> don't need to change.
+ */
+export const HeaderActionsProvider: FC<{ children: ReactNode }> = ({
+  children,
+}) => <>{children}</>;
+
+/** Mount a custom title into the app header. Cleans up on unmount. */
+export function useSetPageTitle(node: ReactNode) {
+  useEffect(() => {
+    currentTitle = node;
+    notify();
+    return () => {
+      currentTitle = null;
+      notify();
+    };
+  });
+}
+
+/** Mount ReactNode into the header's actions slot. Cleans up on unmount. */
+export function useSetHeaderActions(node: ReactNode) {
+  useEffect(() => {
+    currentActions = node;
+    notify();
+    return () => {
+      currentActions = null;
+      notify();
+    };
+  });
+}