@agent-native/dispatch 0.19.1 → 0.20.0

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

@@ -1,31 +1,43 @@
-import { useActionQuery } from "@agent-native/core/client/hooks";
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
-import {
-  IconArrowLeft,
-  IconArrowUpRight,
-  IconClockHour4,
-} from "@tabler/icons-react";
-import { useEffect, useMemo } from "react";
-import { Link, useLocation, useParams } from "react-router";
+import { IconArrowLeft, IconClockHour4 } from "@tabler/icons-react";
+import { useEffect, useMemo, useState } from "react";
+import { Link, useParams } from "react-router";
 
 import { ActionQueryError } from "../../components/action-query-error";
-import { DispatchShell } from "../../components/dispatch-shell";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import { Skeleton } from "../../components/ui/skeleton";
+import { Spinner } from "../../components/ui/spinner";
 import {
   workspaceAppHref,
   type WorkspaceAppSummary,
 } from "../../lib/workspace-apps";
 
+interface EmbedSessionResult {
+  startUrl: string;
+  targetPath?: string;
+  expiresAt?: number;
+  app: string;
+}
+
+interface EmbedSessionInput {
+  app: string;
+  path?: string;
+  url?: string;
+  chrome: "minimal";
+}
+
 export function meta() {
   return [{ title: "Workspace app - Dispatch" }];
 }
 
 export default function WorkspaceAppRoute() {
   const t = useT();
-  const location = useLocation();
   const { appId } = useParams();
   const appsQuery = useActionQuery("list-workspace-apps", {
     includeAgentCards: false,
@@ -37,41 +49,88 @@ export default function WorkspaceAppRoute() {
     [appId, apps],
   );
   const href = app ? workspaceAppHref(app) : null;
+  const [embedUrl, setEmbedUrl] = useState<string | null>(null);
+  const [embedError, setEmbedError] = useState<Error | null>(null);
+  const [embedAttempt, setEmbedAttempt] = useState(0);
+  const createEmbedSession = useActionMutation<
+    EmbedSessionResult,
+    EmbedSessionInput
+  >("create_embed_session", {
+    skipActionQueryInvalidation: true,
+  });
+  const embedInput = useMemo<EmbedSessionInput | null>(() => {
+    if (!app || !href) return null;
+    const path = app.path.trim();
+    if (path.startsWith("/")) {
+      return { app: app.id, path, chrome: "minimal" };
+    }
+    return { app: app.id, url: href, chrome: "minimal" };
+  }, [app?.id, app?.path, href]);
 
   useEffect(() => {
-    if (!app || app.status === "pending" || !href) return;
-    window.location.assign(href);
-  }, [app, href]);
+    if (!app || app.status === "pending" || !embedInput) return;
+    let cancelled = false;
+    setEmbedUrl(null);
+    setEmbedError(null);
+    void createEmbedSession
+      .mutateAsync(embedInput)
+      .then((result) => {
+        if (!cancelled) setEmbedUrl(result.startUrl);
+      })
+      .catch((cause: unknown) => {
+        if (!cancelled) {
+          setEmbedError(
+            cause instanceof Error ? cause : new Error(String(cause)),
+          );
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    app?.id,
+    app?.path,
+    app?.status,
+    createEmbedSession.mutateAsync,
+    embedAttempt,
+    embedInput,
+  ]);
 
-  return (
-    <DispatchShell
-      title={app?.name || t("dispatch.pages.workspaceAppFallback")}
-      description={t("dispatch.pages.workspaceAppDescription")}
-    >
-      <div className="max-w-2xl rounded-lg bg-card p-5">
-        <Button asChild size="sm" variant="ghost" className="-ml-2 mb-4">
-          <Link
-            to={
-              location.pathname.startsWith("/admin/") ? "/admin/apps" : "/apps"
-            }
-          >
-            <IconArrowLeft size={15} className="mr-1.5" />
-            {t("dispatch.nav.apps")}
-          </Link>
-        </Button>
-
-        {appsQuery.isError ? (
+  if (appsQuery.isError) {
+    return (
+      <div className="flex h-full min-h-0 items-center justify-center p-6">
+        <div className="w-full max-w-2xl">
           <ActionQueryError
             error={appsQuery.error}
             onRetry={() => void appsQuery.refetch()}
           />
-        ) : isLoading && !app ? (
-          <div className="space-y-3">
-            <Skeleton className="h-5 w-48" />
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-2/3" />
-          </div>
-        ) : !app ? (
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading && !app) {
+    return (
+      <div className="flex h-full min-h-0 items-center justify-center p-6">
+        <div className="w-full max-w-2xl space-y-3 rounded-xl border bg-card p-6">
+          <Skeleton className="h-5 w-48" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-2/3" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!app) {
+    return (
+      <div className="flex h-full min-h-0 items-center justify-center p-6">
+        <div className="w-full max-w-2xl rounded-xl border bg-card p-6">
+          <Button asChild size="sm" variant="ghost" className="-ml-2 mb-4">
+            <Link to="/apps">
+              <IconArrowLeft size={15} className="mr-1.5" />
+              {t("dispatch.nav.apps")}
+            </Link>
+          </Button>
           <div className="space-y-3">
             <h2 className="text-base font-semibold text-foreground">
               {t("dispatch.pages.appNotFound")}
@@ -80,7 +139,21 @@ export default function WorkspaceAppRoute() {
               {t("dispatch.pages.pageNotFoundDescription")}
             </p>
           </div>
-        ) : app.status === "pending" ? (
+        </div>
+      </div>
+    );
+  }
+
+  if (app.status === "pending") {
+    return (
+      <div className="flex h-full min-h-0 items-center justify-center p-6">
+        <div className="w-full max-w-2xl rounded-xl border bg-card p-6">
+          <Button asChild size="sm" variant="ghost" className="-ml-2 mb-4">
+            <Link to="/apps">
+              <IconArrowLeft size={15} className="mr-1.5" />
+              {t("dispatch.nav.apps")}
+            </Link>
+          </Button>
           <div className="space-y-4">
             <div className="flex flex-wrap items-center gap-2">
               <h2 className="text-base font-semibold text-foreground">
@@ -115,31 +188,45 @@ export default function WorkspaceAppRoute() {
                   rel="noreferrer"
                 >
                   {t("dispatch.pages.openBuilderBranch")}
-                  <IconArrowUpRight size={15} className="ml-1.5" />
                 </a>
               </Button>
             ) : null}
           </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-dispatch-workspace-app-host
+      className="flex h-full min-h-0 flex-col bg-background"
+    >
+      <div className="min-h-0 flex-1 bg-muted/20">
+        {embedUrl ? (
+          <iframe
+            data-dispatch-workspace-app-frame
+            src={embedUrl}
+            title={app.name}
+            referrerPolicy="no-referrer"
+            className="h-full w-full border-0 bg-background"
+          />
+        ) : embedError ? (
+          <div className="flex h-full items-center justify-center p-6">
+            <div className="w-full max-w-2xl">
+              <ActionQueryError
+                error={embedError}
+                onRetry={() => setEmbedAttempt((attempt) => attempt + 1)}
+              />
+            </div>
+          </div>
         ) : (
-          <div className="space-y-3">
-            <h2 className="text-base font-semibold text-foreground">
-              {t("dispatch.pages.openingApp", { name: app.name })}
-            </h2>
-            <p className="text-sm text-muted-foreground">
-              {t("dispatch.pages.redirectingTo")}{" "}
-              <span className="font-mono text-foreground">{app.path}</span>.
-            </p>
-            {href ? (
-              <Button asChild>
-                <a href={href}>
-                  {t("dispatch.pages.openApp")}
-                  <IconArrowUpRight size={15} className="ml-1.5" />
-                </a>
-              </Button>
-            ) : null}
+          <div className="flex h-full items-center justify-center">
+            <Spinner className="size-5 text-muted-foreground" />
+            <span className="sr-only">{t("dispatch.pages.loading")}</span>
           </div>
         )}
       </div>
-    </DispatchShell>
+    </div>
   );
 }

package/src/routes/pages/apps.tsx

@@ -6,14 +6,19 @@ import {
   IconClockHour4,
   IconEyeOff,
   IconPlus,
-  IconStack2,
 } from "@tabler/icons-react";
 import { useState } from "react";
+import { Outlet, useParams } from "react-router";
 
 import { ActionQueryError } from "../../components/action-query-error";
-import { ConnectedAppCard } from "../../components/connected-app-card";
+import {
+  APP_LIST_GRID_CLASS,
+  APP_LIST_GRID_ROW_CLASS,
+  AppList,
+} from "../../components/app-list-row";
 import { CreateAppPopover } from "../../components/create-app-popover";
 import { DispatchShell } from "../../components/dispatch-shell";
+import { OtherAppsSection } from "../../components/other-apps-section";
 import { Button } from "../../components/ui/button";
 import {
   Collapsible,
@@ -22,15 +27,11 @@ import {
 } from "../../components/ui/collapsible";
 import { Skeleton } from "../../components/ui/skeleton";
 import { WorkspaceAppCard } from "../../components/workspace-app-card";
-import {
-  WorkspaceTemplatesSection,
-  type CuratedWorkspaceTemplatesResult,
-  type WorkspaceTemplateLabels,
+import type {
+  CuratedWorkspaceTemplatesResult,
+  WorkspaceTemplateLabels,
 } from "../../components/workspace-template-card";
-import {
-  filterOtherApps,
-  type ConnectedAppSummary,
-} from "../../lib/other-apps";
+import type { ConnectedAppSummary } from "../../lib/other-apps";
 import { cn } from "../../lib/utils";
 import type { WorkspaceAppSummary } from "../../lib/workspace-apps";
 
@@ -44,7 +45,12 @@ interface WorkspaceInfo {
   appCount: number;
 }
 
-export default function AppsRoute() {
+export default function AppsRouteEntry() {
+  const { appId } = useParams();
+  return appId ? <Outlet /> : <AppsRoute />;
+}
+
+function AppsRoute() {
   const t = useT();
   const [showPending, setShowPending] = useState(false);
   const [showHidden, setShowHidden] = useState(false);
@@ -72,10 +78,6 @@ export default function AppsRoute() {
   const activeApps = visibleApps.filter((app) => app.status !== "pending");
   const pendingApps = visibleApps.filter((app) => app.status === "pending");
   const archivedApps = allApps.filter((app) => app.archived);
-  const otherApps = filterOtherApps(
-    (connectedAppsQuery.data || []) as ConnectedAppSummary[],
-    allApps,
-  );
   const showAppSkeletons = appsLoading && allApps.length === 0;
   const templateLabels: WorkspaceTemplateLabels = {
     appId: t("dispatch.pages.remixAppIdLabel"),
@@ -83,13 +85,14 @@ export default function AppsRoute() {
     cancel: t("dispatch.pages.cancel"),
     integrationSetup: t("dispatch.pages.integrationSetup"),
     installed: t("dispatch.pages.alreadyInWorkspace"),
-    remix: t("dispatch.pages.remix"),
+    remix: t("dispatch.pages.addApp", { defaultValue: "Add app" }),
     remixing: t("dispatch.pages.remixing"),
     remixSuccess: t("dispatch.pages.remixSuccess"),
     remixError: t("dispatch.pages.remixError"),
     appIdRequired: t("dispatch.pages.appIdRequired"),
     source: t("dispatch.pages.source"),
-    viewLiveApp: t("dispatch.pages.viewLiveApp"),
+    openApp: t("dispatch.pages.openApp", { defaultValue: "Open app" }),
+    viewLiveApp: t("dispatch.pages.openApp", { defaultValue: "Open" }),
   };
 
   return (
@@ -113,11 +116,7 @@ export default function AppsRoute() {
               />
               <div className="min-w-0">
                 <h2 className="truncate text-sm font-semibold text-foreground">
-                  {workspaceLabel
-                    ? t("dispatch.pages.appsInWorkspace", {
-                        workspace: workspaceLabel,
-                      })
-                    : t("dispatch.pages.workspaceApps")}
+                  {t("dispatch.pages.yourApps", { defaultValue: "Your apps" })}
                 </h2>
                 <p className="mt-0.5 text-xs text-muted-foreground">
                   {t("dispatch.pages.activeCount", {
@@ -140,9 +139,9 @@ export default function AppsRoute() {
               <CreateAppPopover
                 align="end"
                 trigger={
-                  <Button size="sm">
+                  <Button size="sm" variant="outline">
                     <IconPlus size={15} className="mr-1.5" />
-                    {t("dispatch.pages.createApp")}
+                    {t("dispatch.pages.addApp", { defaultValue: "Add app" })}
                   </Button>
                 }
               />
@@ -157,11 +156,15 @@ export default function AppsRoute() {
           ) : showAppSkeletons ? (
             <AppsSkeletonGrid />
           ) : activeApps.length > 0 ? (
-            <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
+            <AppList className={APP_LIST_GRID_CLASS}>
               {activeApps.map((app) => (
-                <WorkspaceAppCard key={app.id} app={app} className="h-full" />
+                <WorkspaceAppCard
+                  key={app.id}
+                  app={app}
+                  className={APP_LIST_GRID_ROW_CLASS}
+                />
               ))}
-            </div>
+            </AppList>
           ) : pendingApps.length > 0 ? (
             <EmptyActiveAppsState />
           ) : (
@@ -171,7 +174,7 @@ export default function AppsRoute() {
 
         {pendingApps.length > 0 ? (
           <Collapsible open={showPending} onOpenChange={setShowPending}>
-            <section className="space-y-3 border-t pt-4">
+            <section className="space-y-3 border-t pt-6">
               <div className="flex flex-wrap items-center justify-between gap-3">
                 <div className="flex min-w-0 items-center gap-2">
                   <IconClockHour4
@@ -183,7 +186,7 @@ export default function AppsRoute() {
                       {t("dispatch.pages.pendingApps")}
                     </h2>
                     <p className="text-xs text-muted-foreground">
-                      {t("dispatch.pages.pendingAppsDescription", {
+                      {t("dispatch.pages.pendingCount", {
                         count: pendingApps.length,
                       })}
                     </p>
@@ -210,78 +213,42 @@ export default function AppsRoute() {
                 </CollapsibleTrigger>
               </div>
               <CollapsibleContent>
-                <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
+                <AppList className={APP_LIST_GRID_CLASS}>
                   {pendingApps.map((app) => (
                     <WorkspaceAppCard
                       key={app.id}
                       app={app}
-                      className="h-full"
+                      className={APP_LIST_GRID_ROW_CLASS}
                     />
                   ))}
-                </div>
+                </AppList>
               </CollapsibleContent>
             </section>
           </Collapsible>
         ) : null}
 
-        {curatedTemplatesQuery.isError ? (
-          <section className="space-y-3 border-t pt-4">
-            <ActionQueryError
-              error={curatedTemplatesQuery.error}
-              onRetry={() => void curatedTemplatesQuery.refetch()}
-            />
-          </section>
-        ) : curatedTemplatesQuery.data ? (
-          <section className="space-y-3 border-t pt-4">
-            <div className="flex min-w-0 items-start gap-2">
-              <IconStack2
-                size={16}
-                className="mt-0.5 shrink-0 text-muted-foreground"
-              />
-              <div className="min-w-0">
-                <h2 className="truncate text-sm font-semibold text-foreground">
-                  {t("dispatch.pages.curatedTemplates")}
-                </h2>
-                <p className="mt-0.5 text-xs text-muted-foreground">
-                  {t("dispatch.pages.curatedTemplatesDescription")}
-                </p>
-              </div>
-            </div>
-            <WorkspaceTemplatesSection
-              templates={
-                curatedTemplatesQuery.data as CuratedWorkspaceTemplatesResult
-              }
-              labels={templateLabels}
-              onRemixSuccess={() => {
-                void appsQuery.refetch();
-                void curatedTemplatesQuery.refetch();
-              }}
-            />
-          </section>
-        ) : null}
-
-        {connectedAppsQuery.isError ? (
-          <section className="space-y-3 border-t pt-4">
-            <OtherAppsHeading count={0} />
-            <ActionQueryError
-              error={connectedAppsQuery.error}
-              onRetry={() => void connectedAppsQuery.refetch()}
-            />
-          </section>
-        ) : connectedAppsQuery.isLoading || otherApps.length > 0 ? (
-          <section className="space-y-3 border-t pt-4">
-            <OtherAppsHeading count={otherApps.length} />
-            {connectedAppsQuery.isLoading ? (
-              <OtherAppsSkeletonGrid />
-            ) : (
-              <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
-                {otherApps.map((app) => (
-                  <ConnectedAppCard key={app.id} app={app} />
-                ))}
-              </div>
-            )}
-          </section>
-        ) : null}
+        <OtherAppsSection
+          templates={
+            curatedTemplatesQuery.data as
+              | CuratedWorkspaceTemplatesResult
+              | undefined
+          }
+          connectedApps={
+            connectedAppsQuery.data as ConnectedAppSummary[] | undefined
+          }
+          workspaceApps={allApps}
+          templatesLoading={curatedTemplatesQuery.isLoading}
+          connectedAppsLoading={connectedAppsQuery.isLoading}
+          templatesError={curatedTemplatesQuery.error}
+          connectedAppsError={connectedAppsQuery.error}
+          onRetryTemplates={() => void curatedTemplatesQuery.refetch()}
+          onRetryConnectedApps={() => void connectedAppsQuery.refetch()}
+          templateLabels={templateLabels}
+          onRemixSuccess={() => {
+            void appsQuery.refetch();
+            void curatedTemplatesQuery.refetch();
+          }}
+        />
 
         {archivedApps.length > 0 ? (
           <Collapsible open={showHidden} onOpenChange={setShowHidden}>
@@ -324,15 +291,15 @@ export default function AppsRoute() {
                 </CollapsibleTrigger>
               </div>
               <CollapsibleContent>
-                <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
+                <AppList className={APP_LIST_GRID_CLASS}>
                   {archivedApps.map((app) => (
                     <WorkspaceAppCard
                       key={app.id}
                       app={app}
-                      className="h-full"
+                      className={APP_LIST_GRID_ROW_CLASS}
                     />
                   ))}
-                </div>
+                </AppList>
               </CollapsibleContent>
             </section>
           </Collapsible>
@@ -342,64 +309,26 @@ export default function AppsRoute() {
   );
 }
 
-function OtherAppsHeading({ count }: { count: number }) {
-  const t = useT();
-  return (
-    <div className="flex min-w-0 items-start gap-2">
-      <IconStack2 size={16} className="mt-0.5 shrink-0 text-muted-foreground" />
-      <div className="min-w-0">
-        <h2 className="truncate text-sm font-semibold text-foreground">
-          {t("dispatch.pages.otherApps")}
-        </h2>
-        <p className="mt-0.5 text-xs text-muted-foreground">
-          {t("dispatch.pages.otherAppsDescription")}
-          {count > 0
-            ? ` · ${t("dispatch.pages.availableCount", { count })}`
-            : ""}
-        </p>
-      </div>
-    </div>
-  );
-}
-
-function OtherAppsSkeletonGrid() {
-  return (
-    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-      {Array.from({ length: 3 }).map((_, index) => (
-        <div key={index} className="rounded-lg bg-card p-4">
-          <div className="flex items-start gap-3">
-            <Skeleton className="size-8 rounded-md" />
-            <div className="flex-1 space-y-3">
-              <Skeleton className="h-4 w-32" />
-              <Skeleton className="h-3 w-full" />
-              <Skeleton className="h-3 w-2/3" />
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
 function AppsSkeletonGrid() {
   return (
-    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+    <AppList className={APP_LIST_GRID_CLASS}>
       {Array.from({ length: 3 }).map((_, index) => (
-        <div key={index} className="rounded-lg bg-card p-4">
-          <div className="flex items-start justify-between gap-3">
-            <div className="min-w-0 flex-1 space-y-3">
-              <Skeleton className="h-4 w-32" />
-              <Skeleton className="h-3 w-24" />
-              <div className="space-y-2 pt-1">
-                <Skeleton className="h-3 w-full" />
-                <Skeleton className="h-3 w-2/3" />
-              </div>
-            </div>
-            <Skeleton className="h-7 w-7 rounded-md" />
+        <div
+          key={index}
+          className={cn(
+            "flex min-w-0 items-center gap-3 border-b px-4 py-3.5 last:border-b-0",
+            APP_LIST_GRID_ROW_CLASS,
+          )}
+        >
+          <Skeleton className="size-8 shrink-0 rounded-md" />
+          <div className="min-w-0 flex-1 space-y-2">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-3 w-2/3" />
           </div>
+          <Skeleton className="h-8 w-24 shrink-0 rounded-md" />
         </div>
       ))}
-    </div>
+    </AppList>
   );
 }
 
@@ -419,9 +348,9 @@ function EmptyAppsState() {
       <div className="mt-4">
         <CreateAppPopover
           trigger={
-            <Button size="sm">
+            <Button size="sm" variant="outline">
               <IconPlus size={15} className="mr-1.5" />
-              {t("dispatch.pages.createApp")}
+              {t("dispatch.pages.addApp", { defaultValue: "Add app" })}
             </Button>
           }
         />