@agent-native/dispatch 0.6.1 → 0.8.0

package/src/components/approval-value-block.tsx

@@ -0,0 +1,33 @@
+export function parseApprovalValue(value: string | null | undefined): unknown {
+  if (!value) return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+export function approvalValuePreview(value: unknown): string {
+  if (value === null || value === undefined) return "None";
+  if (typeof value === "string") return value;
+  return JSON.stringify(value, null, 2);
+}
+
+export function ApprovalValueBlock({
+  label,
+  value,
+}: {
+  label: string;
+  value: unknown;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <div className="text-[11px] font-medium uppercase text-muted-foreground">
+        {label}
+      </div>
+      <pre className="max-h-40 overflow-auto rounded-lg border bg-background p-2 text-[11px] leading-relaxed text-foreground">
+        {approvalValuePreview(value)}
+      </pre>
+    </div>
+  );
+}

package/src/components/create-app-popover.tsx

@@ -44,6 +44,8 @@ interface WorkspaceResourceOption {
   updatedAt?: number;
 }
 
+type VaultAccessMode = "all-apps" | "manual";
+
 interface CreateAppPopoverProps {
   /**
    * Custom trigger element. Defaults to a dashed-border tile that matches the
@@ -78,11 +80,15 @@ function buildAppCreationPrompt(input: {
   prompt: string;
   selectedKeys: string[];
   selectedResources: WorkspaceResourceOption[];
+  vaultAccessMode: VaultAccessMode;
 }): string {
   const keyList = input.selectedKeys.join(", ");
-  const grantRequest = keyList
-    ? `Requested Dispatch vault key grants for this app: ${keyList}`
-    : `Requested Dispatch vault key grants for this app: none`;
+  const grantRequest =
+    input.vaultAccessMode === "all-apps"
+      ? `Dispatch vault access: all saved vault keys are available to every workspace app by default. No per-app vault grants are needed.`
+      : keyList
+        ? `Requested Dispatch vault key grants for this app: ${keyList}`
+        : `Requested Dispatch vault key grants for this app: none`;
   const resourceList = input.selectedResources.length
     ? input.selectedResources
         .map(
@@ -98,9 +104,11 @@ function buildAppCreationPrompt(input: {
     ``,
     `Suggested app name: ${input.appId} (you may adjust the slug if it conflicts)`,
     `User prompt: ${input.prompt.trim()}`,
+    `Generate a concise one-sentence app description from the user prompt before coding; save it in apps/${input.appId}/package.json "description" so Dispatch and A2A can describe the app.`,
     `If the user mentions a product or company such as Granola, Loom, Superhuman, Linear, or Notion, treat it as product inspiration unless they explicitly ask to connect to that service. Do not invent or require third-party API keys like GRANOLA_API_KEY just because a product is named.`,
     grantRequest,
     `Requested Dispatch workspace resources for this app:\n${resourceList}`,
+    `Dispatch workspace resources with scope=all are inherited workspace context. Do not copy or sync them into the new app; every workspace app reads them at runtime and may override with app shared or personal resources.`,
     ``,
     `Pick a starter template that fits the user's prompt — analytics, calendar, content, design, dispatch, forms, mail, slides, clips, or starter when none of the others fit.`,
     `Use the workspace app layout: create it under apps/${input.appId}, mount it at /${input.appId}, keep it on the shared workspace database/hosting model, and avoid table-name collisions by namespacing any new domain tables to the app.`,
@@ -112,18 +120,20 @@ function buildAppCreationPrompt(input: {
     `Do not clone first-party templates, create wrapper apps, or scaffold child apps/routes for Mail, Calendar, Analytics, etc. inside apps/${input.appId} just so this app can access them. If the request is a cross-app dashboard or overview, build only the new dashboard/overview app and delegate to the existing apps for domain work.`,
     `Only create another first-party app copy when the user explicitly asks for a customized fork/copy of that app; otherwise keep using the hosted/shared app so improvements to the base template keep flowing to users.`,
     `Do not satisfy this by adding a route, page, component, or file inside apps/starter or another existing app unless the user explicitly asks to modify that existing app.`,
-    keyList
-      ? `After the app exists, grant the selected Dispatch vault keys to appId "${input.appId}" and sync them once the app server is available. Treat these as requested grants, not active grants before creation succeeds.`
-      : `Do not grant any Dispatch vault keys unless the user asks later.`,
+    input.vaultAccessMode === "all-apps"
+      ? `Do not create per-app Dispatch vault grants unless the workspace switches vault access to manual or the user explicitly asks for manual grants.`
+      : keyList
+        ? `After the app exists, grant the selected Dispatch vault keys to appId "${input.appId}" and sync them once the app server is available. Treat these as requested grants, not active grants before creation succeeds.`
+        : `Do not grant any Dispatch vault keys unless the user asks later.`,
     input.selectedResources.length
-      ? `After the app exists, grant the selected Dispatch workspace resources to appId "${input.appId}" and sync them once the app server is available. Add a short note to apps/${input.appId}/AGENTS.md telling the app agent to read relevant shared resources under context/ or the selected resource paths before doing GTM/domain work.`
-      : `Do not grant any Dispatch workspace resources unless the user asks later.`,
+      ? `After the app exists, grant the selected Dispatch workspace resources to appId "${input.appId}". Do not sync All-app workspace resources; they are inherited.`
+      : `Do not grant any selected-only Dispatch workspace resources unless the user asks later.`,
     ``,
     `App readiness requirements before handing off:`,
-    `- Ensure apps/${input.appId}/package.json exists; Dispatch discovers workspace apps from apps/<app-id>/package.json, not a separate app registry.`,
+    `- Ensure apps/${input.appId}/package.json exists with displayName/name and a concise description; Dispatch discovers workspace apps from apps/<app-id>/package.json, not a separate app registry.`,
     `- Update the app manifest/package/deploy metadata needed by the existing workspace deployment model.`,
     `- Ensure the React Router client entry preserves APP_BASE_PATH/VITE_APP_BASE_PATH via appBasePath() so /${input.appId} hydrates correctly.`,
-    `- Verify the app's agent card/A2A metadata is ready so Dispatch can discover and delegate to the app after deployment.`,
+    `- Verify the app's agent card/A2A metadata is ready so Dispatch can discover and delegate to the app after deployment. Every sibling workspace app is available over A2A by default through call-agent, with names and descriptions from the workspace app registry.`,
     `When it is ready, start or update the workspace dev server and navigate the user to the absolute path /${input.appId} on the workspace origin. Do not prefix with /dispatch/, /apps/, /workspace/, or any other Dispatch tab — the new app is mounted at the workspace root, not under Dispatch. If you have a navigate tool available, pass /${input.appId} verbatim; if you only have a window.location-style escape hatch, set it to /${input.appId}.`,
   ].join("\n");
 }
@@ -170,6 +180,8 @@ export function CreateAppFlow({
   const [selectedResourceIds, setSelectedResourceIds] = useState<string[]>([]);
   const [secrets, setSecrets] = useState<VaultSecretOption[]>([]);
   const [resources, setResources] = useState<WorkspaceResourceOption[]>([]);
+  const [vaultAccessMode, setVaultAccessMode] =
+    useState<VaultAccessMode>("all-apps");
   const [secretsError, setSecretsError] = useState<string | null>(null);
   const [resourcesError, setResourcesError] = useState<string | null>(null);
   const [statusMessage, setStatusMessage] = useState<string | null>(null);
@@ -193,6 +205,15 @@ export function CreateAppFlow({
         setSecrets([]);
         setSecretsError(err?.message || "Could not load Dispatch keys");
       });
+    fetchJson(actionUrl(basePath, "get-vault-access-settings"))
+      .then((data) => {
+        if (cancelled) return;
+        setVaultAccessMode(data?.mode === "manual" ? "manual" : "all-apps");
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setVaultAccessMode("manual");
+      });
     fetchJson(actionUrl(basePath, "list-workspace-resource-options"))
       .then((data) => {
         if (cancelled) return;
@@ -218,9 +239,11 @@ export function CreateAppFlow({
     [resources, selectedResourceIds],
   );
   const selectedSecretLabel =
-    selectedSecretIds.length === 0
-      ? "no keys"
-      : `${selectedSecretIds.length} key${selectedSecretIds.length === 1 ? "" : "s"}`;
+    vaultAccessMode === "all-apps"
+      ? "all keys"
+      : selectedSecretIds.length === 0
+        ? "no keys"
+        : `${selectedSecretIds.length} key${selectedSecretIds.length === 1 ? "" : "s"}`;
   const selectedResourceLabel =
     selectedResourceIds.length === 0
       ? "no resources"
@@ -254,8 +277,12 @@ export function CreateAppFlow({
     const message = buildAppCreationPrompt({
       appId,
       prompt: trimmed,
-      selectedKeys: selectedSecrets.map((s) => s.credentialKey),
+      selectedKeys:
+        vaultAccessMode === "manual"
+          ? selectedSecrets.map((s) => s.credentialKey)
+          : [],
       selectedResources,
+      vaultAccessMode,
     });
     setIsSubmitting(true);
     setStatusMessage(null);
@@ -279,7 +306,10 @@ export function CreateAppFlow({
             body: JSON.stringify({
               prompt: trimmed,
               appId,
-              secretIds: selectedSecretIds.length > 0 ? selectedSecretIds : [],
+              secretIds:
+                vaultAccessMode === "manual" && selectedSecretIds.length > 0
+                  ? selectedSecretIds
+                  : [],
               resourceIds:
                 selectedResourceIds.length > 0 ? selectedResourceIds : [],
             }),
@@ -351,7 +381,11 @@ export function CreateAppFlow({
               <IconKey size={12} />
               Dispatch keys
             </div>
-            {secretsError ? (
+            {vaultAccessMode === "all-apps" ? (
+              <p className="rounded-md border border-dashed border-border px-3 py-3 text-xs text-muted-foreground">
+                Every saved Dispatch vault key is available to new apps.
+              </p>
+            ) : secretsError ? (
               <p className="rounded-md border border-dashed border-border px-3 py-3 text-xs text-muted-foreground">
                 {secretsError}
               </p>

package/src/components/dispatch-shell.tsx

@@ -1,17 +1,17 @@
 import { type ReactNode } from "react";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { IconInfoCircle } from "@tabler/icons-react";
 import { useSetPageTitle } from "@/components/layout/HeaderActions";
 
 /**
- * DispatchShell renders the per-page title (with optional description tooltip)
- * 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`.
+ * 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,
@@ -28,23 +28,24 @@ export function DispatchShell({
         {title}
       </h1>
       {description ? (
-        <Tooltip>
-          <TooltipTrigger asChild>
+        <Popover>
+          <PopoverTrigger asChild>
             <button
               type="button"
-              className="text-muted-foreground/60 hover:text-foreground cursor-pointer"
+              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={`About ${title}`}
             >
               <IconInfoCircle className="h-3.5 w-3.5" />
             </button>
-          </TooltipTrigger>
-          <TooltipContent
+          </PopoverTrigger>
+          <PopoverContent
             side="bottom"
+            align="start"
             className="max-w-72 text-xs leading-relaxed"
           >
             {description}
-          </TooltipContent>
-        </Tooltip>
+          </PopoverContent>
+        </Popover>
       ) : null}
     </div>,
   );

package/src/components/layout/Layout.tsx

@@ -12,6 +12,7 @@ import { InvitationBanner, OrgSwitcher } from "@agent-native/core/client/org";
 import {
   IconArrowUpRight,
   IconApps,
+  IconBrain,
   IconChartBar,
   IconBrandTelegram,
   IconKey,
@@ -151,6 +152,13 @@ const OPERATIONS_NAV_ITEMS = [
     icon: IconHistory,
     section: "operations",
   },
+  {
+    id: "dreams",
+    to: "/dreams",
+    label: "Dreams",
+    icon: IconBrain,
+    section: "operations",
+  },
   {
     id: "thread-debug",
     to: "/thread-debug",
@@ -229,10 +237,16 @@ function dispatchNavLinkTarget(path: string): string {
   if (typeof window === "undefined") return path;
   const basePath = appBasePath();
   if (!basePath) return path;
-  const context = (
-    window as Window & { __reactRouterContext?: { basename?: string } }
-  ).__reactRouterContext;
-  return context?.basename === basePath ? path : appPath(path);
+  // Mirror the basename calculation entry.client.tsx uses to configure the
+  // router (basePath iff the current URL is under that mount, "" otherwise).
+  // Reading the live URL directly avoids races with the previous check on
+  // `__reactRouterContext.basename`, which could read undefined before the
+  // entry script set it — that race produced /dispatch/dispatch/<route>
+  // history entries that 404'd on back-button navigation.
+  const pathname = window.location.pathname;
+  const routerHasBasename =
+    pathname === basePath || pathname.startsWith(`${basePath}/`);
+  return routerHasBasename ? path : appPath(path);
 }
 
 export function NavContent({
@@ -424,7 +438,7 @@ export function Layout({
         <AgentSidebar
           position="right"
           defaultOpen={false}
-          emptyStateText="Create apps, grant keys, and route work across the workspace."
+          emptyStateText="Create apps, manage vault keys, and route work across the workspace."
           suggestions={SIDEBAR_SUGGESTIONS}
         >
           {appContent}

package/src/components/messaging-setup-panel.tsx

@@ -449,23 +449,34 @@ export function MessagingSetupPanel() {
                     </p>
                   </div>
                 </div>
-                <div className="flex items-center gap-3">
-                  <a
-                    href={platform.docsUrl}
-                    className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                <div className="flex shrink-0 items-center gap-1">
+                  <Button
+                    asChild
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 px-2 text-xs text-muted-foreground"
                   >
-                    Docs
-                  </a>
+                    <a href={platform.docsUrl} target="_blank" rel="noreferrer">
+                      Docs
+                      <IconExternalLink className="ml-1 h-3 w-3" />
+                    </a>
+                  </Button>
                   {platform.externalUrl ? (
-                    <a
-                      href={platform.externalUrl}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                    <Button
+                      asChild
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 px-2 text-xs text-muted-foreground"
                     >
-                      {platform.externalLabel ?? "Open"}
-                      <IconExternalLink className="h-3.5 w-3.5" />
-                    </a>
+                      <a
+                        href={platform.externalUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {platform.externalLabel ?? "Open"}
+                        <IconExternalLink className="ml-1 h-3 w-3" />
+                      </a>
+                    </Button>
                   ) : null}
                 </div>
               </div>
@@ -609,7 +620,7 @@ export function MessagingSetupPanel() {
                 </div>
               ) : null}
 
-              <div className="mt-5 flex flex-wrap gap-2">
+              <div className="mt-5 flex flex-wrap items-center justify-end gap-2 border-t border-border pt-4">
                 {platform.id === "telegram" && configured ? (
                   <Button
                     variant="outline"
@@ -626,31 +637,35 @@ export function MessagingSetupPanel() {
                     )}
                   </Button>
                 ) : null}
-                <Button
-                  onClick={() => togglePlatform(platform, enabled)}
-                  disabled={
-                    togglingPlatform === platform.id || (!enabled && !canEnable)
-                  }
-                >
-                  {togglingPlatform === platform.id ? (
-                    <>
-                      <IconLoader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Saving...
-                    </>
-                  ) : enabled ? (
-                    "Disable"
-                  ) : (
-                    "Enable"
-                  )}
-                </Button>
+                {!configured && !enabled ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span tabIndex={0}>
+                        <Button disabled>Enable</Button>
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      Save the required credentials first.
+                    </TooltipContent>
+                  </Tooltip>
+                ) : (
+                  <Button
+                    onClick={() => togglePlatform(platform, enabled)}
+                    disabled={togglingPlatform === platform.id}
+                  >
+                    {togglingPlatform === platform.id ? (
+                      <>
+                        <IconLoader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Saving...
+                      </>
+                    ) : enabled ? (
+                      "Disable"
+                    ) : (
+                      "Enable"
+                    )}
+                  </Button>
+                )}
               </div>
-
-              {!configured ? (
-                <p className="mt-3 text-xs text-muted-foreground">
-                  Save the required credentials before enabling {platform.label}
-                  .
-                </p>
-              ) : null}
             </section>
           );
         })}