@agent-native/dispatch 0.2.12 → 0.2.14

package/src/routes/pages/apps.$appId.tsx

@@ -9,23 +9,10 @@ import {
 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;
-  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.path || app.url || null;
-}
+import {
+  workspaceAppHref,
+  type WorkspaceAppSummary,
+} from "@/lib/workspace-apps";
 
 export function meta() {
   return [{ title: "Workspace app - Dispatch" }];

package/src/routes/pages/apps.tsx

@@ -1,37 +1,10 @@
 import { useActionQuery } from "@agent-native/core/client";
-import {
-  IconArrowUpRight,
-  IconApps,
-  IconClockHour4,
-  IconPlus,
-} from "@tabler/icons-react";
-import { AppKeysPopover } from "@/components/app-keys-popover";
+import { IconApps, IconPlus } from "@tabler/icons-react";
 import { CreateAppPopover } from "@/components/create-app-popover";
 import { DispatchShell } from "@/components/dispatch-shell";
-import { Badge } from "@/components/ui/badge";
+import { WorkspaceAppCard } from "@/components/workspace-app-card";
 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.path || app.url || null;
-}
-
-function isPendingBuilderHref(app: WorkspaceAppSummary): boolean {
-  return app.status === "pending" && !!app.builderUrl;
-}
+import type { WorkspaceAppSummary } from "@/lib/workspace-apps";
 
 export function meta() {
   return [{ title: "Apps — Dispatch" }];
@@ -94,65 +67,9 @@ export default function AppsRoute() {
           </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>
-              );
-            })}
+            {typedApps.map((app) => (
+              <WorkspaceAppCard key={app.id} app={app} />
+            ))}
 
             <CreateAppPopover />
           </div>

package/src/routes/pages/overview.tsx

@@ -21,11 +21,10 @@ import {
   IconShieldCheck,
   type IconProps,
 } 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 { WorkspaceAppCard } from "@/components/workspace-app-card";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -34,6 +33,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { submitOverviewPrompt } from "@/lib/overview-chat";
+import type { WorkspaceAppSummary } from "@/lib/workspace-apps";
 
 interface IntegrationStatus {
   platform: string;
@@ -67,28 +67,6 @@ const ZERO_TASK_QUEUE_STATS: TaskQueueStats = {
   recent_failures: [],
 };
 
-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.path || app.url || null;
-}
-
-function isPendingBuilderHref(app: WorkspaceAppSummary): boolean {
-  return app.status === "pending" && !!app.builderUrl;
-}
-
 const HOME_CHAT_SUGGESTIONS = [
   "Create a lightweight customer onboarding app",
   "Ask Slides to draft a board update from our latest metrics",
@@ -186,66 +164,9 @@ function WorkspaceAppsSection({
           ? Array.from({ length: 6 }).map((_, index) => (
               <AppCardSkeleton key={index} />
             ))
-          : visibleApps.map((app) => {
-              const href = workspaceAppHref(app);
-              // Pending Builder branches live on a different host (Builder
-              // editor URL); open those in a new tab. Ready workspace apps
-              // navigate the current window so this works inside the
-              // Builder webview, where new tabs would try to open in the
-              // host browser and break the embedded session.
-              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 min-h-32 rounded-lg border bg-card p-4 transition hover:border-foreground/30 aria-disabled:pointer-events-none aria-disabled:opacity-60"
-                >
-                  <div className="flex h-full 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>
-              );
-            })}
+          : visibleApps.map((app) => (
+              <WorkspaceAppCard key={app.id} app={app} className="min-h-32" />
+            ))}
 
         {!showSkeletons ? <CreateAppPopover /> : null}
       </div>

package/src/server/lib/app-creation-store.ts

@@ -864,6 +864,10 @@ function buildWorkspaceAppPrompt(input: {
       `Dispatch workspace resources selected for this app:\n${resourceList}`,
       "",
       `Use the workspace app layout: create it under apps/${appId}, mount it at /${appId}, keep it on the shared workspace database/hosting model, and avoid table-name collisions by namespacing any new domain tables to the app.`,
+      `Important routing rule: from outside the app, link to /${appId}; inside apps/${appId}, React Router routes are app-local. Use <Link to="/review"> and navigate("/review"), not "/${appId}/review"; APP_BASE_PATH supplies the mounted prefix, and hardcoding it causes doubled URLs like /${appId}/${appId}/review.`,
+      "Existing first-party apps are neighbors, not implementation details for this app. If the user prompt mentions Mail, Calendar, Analytics, Dispatch, or other templates, treat them as existing hosted/connected apps that this app can link to or call through A2A/default connected agents. For example, Mail, Calendar, and Analytics already exist at https://mail.agent-native.com, https://calendar.agent-native.com, and https://analytics.agent-native.com.",
+      `Do not clone first-party templates, create wrapper apps, or scaffold child apps/routes for Mail, Calendar, Analytics, etc. inside apps/${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.",
       selectedKeys.length
         ? `Dispatch will create pending vault requests for the selected keys for appId "${appId}" after this app creation request is accepted. Do not grant or sync vault keys directly from the app-creation branch.`
         : "Do not grant or request any Dispatch vault keys unless the user asks later.",
@@ -873,7 +877,7 @@ function buildWorkspaceAppPrompt(input: {
       "",
       "Agent-native rules (these are the framework's contract — not optional):",
       `- Persist ALL data in SQL via Drizzle. Add tables to apps/${appId}/server/db/schema.ts and migrations to apps/${appId}/server/plugins/db.ts. NEVER use localStorage, sessionStorage, IndexedDB, or in-memory state for anything the user expects to persist — agent and UI must read the same source of truth.`,
-      `- Define every create/read/update/delete as an action in apps/${appId}/actions/ using defineAction. The agent calls these as tools and the frontend calls them at /_agent-native/actions/<name> via useActionQuery / useActionMutation. Don't add /api/* routes for CRUD.`,
+      `- Define every create/read/update/delete as an action in apps/${appId}/actions/ using defineAction. The agent calls these as tools and the frontend calls them via useActionQuery / useActionMutation. If you must raw-fetch framework action endpoints, use agentNativePath("/_agent-native/actions/<name>") so mounted apps call the right URL. Don't add /api/* routes for CRUD.`,
       "- Build the UI from shadcn/ui components in app/components/ui/ (Button, Input, Dialog, Popover, Card, etc.) and Tailwind utilities. Don't author bespoke CSS classes in global.css unless you genuinely need a primitive that shadcn doesn't ship.",
       "- Use Tabler Icons (@tabler/icons-react) for every icon. Never use emojis as icons.",
       `- Expose what the user is looking at via application_state (navigation.view, selection, etc.) so the agent has live context. Mirror the patterns in templates/mail or templates/slides.`,

package/src/server/plugins/agent-chat.ts

@@ -29,6 +29,7 @@ Use the standard workspace primitives:
 - Use custom agent profiles in agents/*.md for local spawned work and remote-agents/*.json for remote A2A apps.
 - When answering whether workspace apps expose agent cards or A2A endpoints, call list-workspace-apps with includeAgentCards=true. If you have not requested that probe, absence of agent-card fields means unchecked, not unavailable.
 - When creating a new workspace app, create a separate app under apps/<app-id> with apps/<app-id>/package.json, mount it at /<app-id>, use relative /<app-id> links, never hardcode localhost or dev ports, use shadcn/ui with @tabler/icons-react rather than lucide-react, and ensure the React Router client entry preserves APP_BASE_PATH/VITE_APP_BASE_PATH via appBasePath(). There is no separate workspace app registry to edit.
+- Treat first-party apps such as Mail, Calendar, Analytics, and Dispatch as existing hosted/connected neighbors available through links and A2A/default connected agents. Do not create wrapper apps, child apps, nested routes, or cloned template copies just to give a new app access to them; build only the genuinely new workflow and delegate cross-app work to those existing apps.
 
 When a user asks for something like a digest, reminder, routing rule, or saved behavior:
 - First decide whether it should be a resource, a recurring job, a destination, or a delegated task.

package/src/server/plugins/integrations.ts

@@ -13,6 +13,7 @@ Default posture:
 - Heavily delegate domain work to specialized agents through A2A (call-agent) when another app owns the job. Apps you can delegate to include slides (decks/presentations), analytics (data/dashboards), content (docs/articles), videos (Remotion compositions), forms (form builder), clips (screen recordings), design (visual designs), and images (brand image libraries and generated raster imagery).
 - Use list-connected-agents to see what agents are available before assuming a request must be handled locally.
 - When asked whether workspace apps expose agent cards or A2A endpoints, call list-workspace-apps with includeAgentCards=true. Without that probe, missing agent-card fields mean unchecked, not unavailable.
+- Treat first-party apps such as Mail, Calendar, Analytics, and Dispatch as existing hosted/connected neighbors available through links and A2A/default connected agents. Do not create wrapper apps, child apps, nested routes, or cloned template copies just to give a new app access to them; build only the genuinely new workflow and delegate cross-app work to those existing apps.
 - Keep durable memory and operating instructions in resources rather than ephemeral chat.
 - Reply in the originating thread unless the user explicitly asks you to send to a saved destination.
 
@@ -21,6 +22,7 @@ When a user asks for something:
 - After call-agent returns an answer, RELAY IT DIRECTLY to the user with at most a one-line preface — do not rephrase, summarize, or add commentary. The downstream agent already crafted the answer; your job is delivery, not editing. This minimizes round-trips and keeps the user-visible reply fast.
 - Exception: if the downstream agent reports a missing model/provider credential, do not name exact env vars, Vault keys, tokens, or secrets. Say the target app needs an LLM connection and recommend connecting Builder/managed LLM for that app; keep bring-your-own provider keys as a secondary option only if the user asks.
 - If the user asks to create, build, make, scaffold, or generate an "agent" from Dispatch chat or by tagging @agent-native in Slack, email, or Telegram, first classify the ask. If it is a simple Dispatch-native behavior like a reminder, digest, monitor, routing rule, saved instruction, or recurring workflow, create or update the recurring job/resource/destination in Dispatch. If it is a robust unique product or teammate that needs its own UI, data model, actions, integrations, or domain workflow, treat it as a new workspace app and call start-workspace-app-creation.
+- If a new-app prompt asks for access to Mail, Calendar, Analytics, or similar first-party app data/agents, keep using the existing hosted/connected app and A2A path. Do not ask Builder to scaffold those apps as children of the new app unless the user explicitly asks for a customized fork/copy.
 - If the user explicitly asks for a new app or workspace app, call start-workspace-app-creation with their prompt. Do not satisfy a new-app request 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. If the request is too vague to classify, ask one concise follow-up. If the action returns mode "builder", reply with the Builder branch URL; Builder is responsible for creating the separate workspace app under apps/<app-id>, mounting it at /<app-id>, ensuring apps/<app-id>/package.json exists so Dispatch discovers it, using relative /<app-id> links instead of hardcoded localhost/dev ports, and preserving APP_BASE_PATH/VITE_APP_BASE_PATH via appBasePath() in the React Router client entry. There is no separate workspace app registry to edit. If it returns mode "local-agent", tell the user it is ready for the local code agent and include the returned app path/prompt summary. If it returns mode "coming-soon" or "builder-unavailable", explain the missing Builder setup and ask them to connect/configure Builder.
 - For digests, reminders, or saved behavior, prefer recurring jobs, resources, or destinations over chat replies.
 - Keep responses concise and operational — messaging platforms have character limits.