@agent-native/dispatch 0.25.1 → 0.27.0

package/src/components/workspace-app-host.tsx

@@ -1,3 +1,4 @@
+import { AgentSidebar } from "@agent-native/core/client/agent-chat";
 import {
   ChatFirstAppPane,
   defaultChatFirstCopy,
@@ -10,8 +11,14 @@ import {
 } 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, IconClockHour4 } from "@tabler/icons-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  IconArrowLeft,
+  IconArrowUpRight,
+  IconClockHour4,
+  IconLock,
+} from "@tabler/icons-react";
+import { useTheme } from "next-themes";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Link } from "react-router";
 
 import { isEmbedSessionExpiredMessage } from "../lib/embed-session-recovery";
@@ -38,6 +45,40 @@ interface EmbedSessionInput {
   chrome: "minimal";
 }
 
+type WorkspaceAppTheme = "light" | "dark";
+type WorkspaceAppAuthState = "unknown" | "authenticated" | "unauthenticated";
+
+function resolveWorkspaceAppAuthState(
+  rawUrl: string | null,
+): WorkspaceAppAuthState {
+  if (!rawUrl) return "unknown";
+  try {
+    const lastSegment = new URL(rawUrl, window.location.origin).pathname
+      .split("/")
+      .filter(Boolean)
+      .at(-1)
+      ?.toLowerCase();
+    if (
+      lastSegment === "sign-in" ||
+      lastSegment === "login" ||
+      lastSegment === "signup"
+    ) {
+      return "unauthenticated";
+    }
+    return "authenticated";
+  } catch {
+    return "unknown";
+  }
+}
+
+function buildWorkspaceAppThemeUpdate(theme: WorkspaceAppTheme) {
+  return {
+    type: "agent-native-theme-update" as const,
+    theme,
+    isDark: theme === "dark",
+  };
+}
+
 export function buildChatFirstEmbedSessionInput(
   appId: string,
   path: string,
@@ -56,18 +97,49 @@ interface WorkspaceAppFrameProps {
   app: WorkspaceAppFrameApp;
   /** Chat-first app tabs use their own route while standalone hosts use app metadata. */
   embedPath?: string;
+  /** Chat-first app surfaces own the parent chat rail around the iframe. */
+  chatSidebar?: boolean;
   copy?: ChatFirstCopy;
 }
 
 export function WorkspaceAppFrame({
   app,
   embedPath,
+  chatSidebar = false,
   copy = defaultChatFirstCopy,
 }: WorkspaceAppFrameProps) {
+  const { resolvedTheme } = useTheme();
+  const theme: WorkspaceAppTheme =
+    resolvedTheme === "dark" || resolvedTheme === "light"
+      ? resolvedTheme
+      : typeof document !== "undefined" &&
+          document.documentElement.classList.contains("dark")
+        ? "dark"
+        : "light";
   const [embedUrl, setEmbedUrl] = useState<string | null>(null);
   const [embedError, setEmbedError] = useState<Error | null>(null);
   const [embedAttempt, setEmbedAttempt] = useState(0);
+  const [authState, setAuthState] = useState<WorkspaceAppAuthState>("unknown");
   const embedFrameRef = useRef<HTMLIFrameElement>(null);
+  const postThemeToFrame = useCallback(() => {
+    embedFrameRef.current?.contentWindow?.postMessage(
+      buildWorkspaceAppThemeUpdate(theme),
+      "*",
+    );
+  }, [theme]);
+  const handleFrameLoad = useCallback(() => {
+    postThemeToFrame();
+    const frame = embedFrameRef.current;
+    let frameUrl = embedUrl;
+    try {
+      frameUrl = frame?.contentWindow?.location.href ?? frameUrl;
+      // coercion-ok: Cross-origin frames cannot expose location; their auth state arrives by message.
+    } catch {
+      // Cross-origin app frames report their auth state through postMessage.
+    }
+    const nextAuthState = resolveWorkspaceAppAuthState(frameUrl);
+    if (nextAuthState !== "unknown") setAuthState(nextAuthState);
+  }, [embedUrl, postThemeToFrame]);
   const workspaceSsoEnabled = useFeatureFlag(DISPATCH_WORKSPACE_SSO_FLAG.key);
   const createEmbedSession = useActionMutation<
     EmbedSessionResult,
@@ -104,6 +176,7 @@ export function WorkspaceAppFrame({
     let cancelled = false;
     setEmbedUrl(null);
     setEmbedError(null);
+    setAuthState("unknown");
     const createSession = workspaceSsoEnabled
       ? createWorkspaceSsoEmbedSession
       : createEmbedSession;
@@ -154,7 +227,26 @@ export function WorkspaceAppFrame({
       window.removeEventListener("message", handleEmbedSessionExpired);
   }, [embedUrl]);
 
-  return (
+  useEffect(() => {
+    const handleAuthState = (event: MessageEvent) => {
+      const frame = embedFrameRef.current;
+      if (!frame || event.source !== frame.contentWindow) return;
+      if (event.data?.type !== "agentNative.authState") return;
+      const status = event.data.data?.status;
+      if (status === "authenticated" || status === "unauthenticated") {
+        setAuthState(status);
+      }
+    };
+
+    window.addEventListener("message", handleAuthState);
+    return () => window.removeEventListener("message", handleAuthState);
+  }, []);
+
+  useEffect(() => {
+    postThemeToFrame();
+  }, [embedUrl, postThemeToFrame]);
+
+  const appPane = (
     <ChatFirstAppPane
       app={app}
       status={
@@ -178,6 +270,7 @@ export function WorkspaceAppFrame({
           src={url}
           title={title ?? app.name}
           ref={embedFrameRef}
+          onLoad={handleFrameLoad}
           referrerPolicy="no-referrer"
           allow="clipboard-read; clipboard-write"
           className="h-full w-full border-0 bg-background"
@@ -186,6 +279,49 @@ export function WorkspaceAppFrame({
       copy={copy}
     />
   );
+
+  if (!chatSidebar) return appPane;
+
+  return (
+    <AgentSidebar
+      position="left"
+      defaultOpen
+      openStorageKey="dispatch-app-chat"
+      storageKey={`dispatch-app-chat:${app.id}`}
+      scope={{
+        type: "workspace-app",
+        id: app.id,
+        label: app.name,
+        contextKey: `workspace-app:${app.id}`,
+      }}
+      agentChatSurface="app"
+      showTabBar
+      suppressInlineOpenApp
+      dynamicSuggestions={false}
+      suggestions={[]}
+      emptyStateText={`Ask about ${app.name}`}
+      composerSlot={
+        authState === "unauthenticated" ? (
+          <div className="flex shrink-0 items-center px-3 pb-1">
+            <button
+              type="button"
+              data-dispatch-app-sign-in
+              aria-label={`Sign in to ${app.name} on the right`}
+              title={`Sign in to ${app.name} on the right`}
+              onClick={() => embedFrameRef.current?.focus()}
+              className="inline-flex h-6 shrink-0 items-center gap-1 rounded-full border border-border/70 bg-background/60 px-2 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            >
+              <IconLock size={12} stroke={1.8} />
+              <span>Sign in on the right</span>
+              <IconArrowUpRight size={12} stroke={1.8} />
+            </button>
+          </div>
+        ) : null
+      }
+    >
+      {appPane}
+    </AgentSidebar>
+  );
 }
 
 export function WorkspaceAppHost({ appId }: { appId?: string }) {