@agent-native/core 0.129.2 → 0.130.0

package/src/client/chat/widgets/DataTableWidget.tsx

@@ -1,19 +1,8 @@
-import {
-  IconDots,
-  IconDownload,
-  IconExternalLink,
-  IconTable,
-} from "@tabler/icons-react";
+import { IconDownload, IconExternalLink, IconTable } from "@tabler/icons-react";
 
 import { requestAgentSidebarOpen } from "../../agent-sidebar-state.js";
 import { appPath } from "../../api-path.js";
 import { startAgentChatViewTransition } from "../../chat-view-transition.js";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../../components/ui/dropdown-menu.js";
 import { downloadFile, toCSVTable } from "../../db-admin/export-utils.js";
 import { cn } from "../../utils.js";
 import type { DataTableWidget as DataTableWidgetData } from "./data-widget-types.js";
@@ -165,23 +154,15 @@ export function DataTableWidget({
             <IconExternalLink className="h-3 w-3" />
           </a>
         ) : null}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              aria-label="Data table options"
-              className="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            >
-              <IconDots className="h-3.5 w-3.5" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-44">
-            <DropdownMenuItem onSelect={exportCsv} disabled={!canExportCsv}>
-              <IconDownload className="mr-2 h-3.5 w-3.5" />
-              Download CSV
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <button
+          type="button"
+          onClick={exportCsv}
+          disabled={!canExportCsv}
+          className="inline-flex shrink-0 items-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"
+        >
+          <IconDownload className="h-3 w-3" />
+          Download CSV
+        </button>
       </div>
       <div className="max-h-[360px] overflow-auto">
         <table className="w-full min-w-[420px] border-collapse text-xs">

package/src/client/chat/widgets/WorkspaceFileWidget.tsx

@@ -0,0 +1,71 @@
+import {
+  IconDownload,
+  IconFile,
+  IconFileSpreadsheet,
+  IconFileText,
+} from "@tabler/icons-react";
+
+import { useFormatters, useT } from "../../i18n.js";
+import { resourceDownloadUrl } from "../../resources/use-resources.js";
+import type { WorkspaceFileResult } from "./workspace-file-result.js";
+
+function formatFileSize(
+  sizeBytes: number,
+  formatNumber: (value: number, options?: Intl.NumberFormatOptions) => string,
+): string {
+  if (sizeBytes < 1024) return `${formatNumber(sizeBytes)} B`;
+  if (sizeBytes < 1024 * 1024) {
+    return `${formatNumber(sizeBytes / 1024, { maximumFractionDigits: 1 })} KB`;
+  }
+  return `${formatNumber(sizeBytes / 1024 / 1024, {
+    maximumFractionDigits: 1,
+  })} MB`;
+}
+
+function fileIcon(contentType: string) {
+  if (
+    contentType === "text/csv" ||
+    contentType.includes("spreadsheet") ||
+    contentType.includes("excel")
+  ) {
+    return IconFileSpreadsheet;
+  }
+  if (contentType.startsWith("text/") || contentType === "application/json") {
+    return IconFileText;
+  }
+  return IconFile;
+}
+
+export function WorkspaceFileWidget({
+  result,
+}: {
+  result: WorkspaceFileResult;
+}) {
+  const t = useT();
+  const { formatNumber } = useFormatters();
+  const { file } = result;
+  const FileIcon = fileIcon(file.contentType);
+  const href = resourceDownloadUrl(file.resourceId);
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+        <FileIcon className="size-5" aria-hidden="true" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-medium">{file.name}</div>
+        <div className="truncate text-xs text-muted-foreground">
+          {formatFileSize(file.sizeBytes, formatNumber)} · {file.path}
+        </div>
+      </div>
+      <a
+        href={href}
+        download={file.name}
+        className="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground no-underline transition-colors hover:bg-primary/90 hover:no-underline"
+      >
+        <IconDownload className="size-3.5" aria-hidden="true" />
+        {t("workspaceFile.download")}
+      </a>
+    </div>
+  );
+}

package/src/client/chat/widgets/builtin-tool-renderers.tsx

@@ -6,6 +6,7 @@ import {
   ACTION_CHAT_UI_DATA_TABLE_RENDERER,
   ACTION_CHAT_UI_DATA_WIDGET_RENDERER,
   ACTION_CHAT_UI_INLINE_EXTENSION_RENDERER,
+  ACTION_CHAT_UI_WORKSPACE_FILE_RENDERER,
 } from "../../../action-ui.js";
 import {
   registerReservedActionChatRenderer,
@@ -22,6 +23,7 @@ import {
   type DataWidgetResult,
 } from "./data-widget-types.js";
 import { normalizeInlineExtensionToolResult } from "./inline-extension-result.js";
+import { normalizeWorkspaceFileResult } from "./workspace-file-result.js";
 
 const LazyDataChartWidget = lazy(() =>
   import("./DataChartWidget.js").then((module) => ({
@@ -43,6 +45,11 @@ const LazyInlineExtensionWidget = lazy(() =>
     default: module.InlineExtensionWidget,
   })),
 );
+const LazyWorkspaceFileWidget = lazy(() =>
+  import("./WorkspaceFileWidget.js").then((module) => ({
+    default: module.WorkspaceFileWidget,
+  })),
+);
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return !!value && typeof value === "object" && !Array.isArray(value);
@@ -149,6 +156,15 @@ const BuiltinInlineExtensionRenderer: ToolRendererComponent = ({ context }) =>
     </Suspense>
   ) : null;
 
+const BuiltinWorkspaceFileRenderer: ToolRendererComponent = ({ context }) => {
+  const result = normalizeWorkspaceFileResult(context.resultJson);
+  return result ? (
+    <Suspense fallback={<BuiltinToolRendererSkeleton framed={false} />}>
+      <LazyWorkspaceFileWidget result={result} />
+    </Suspense>
+  ) : null;
+};
+
 export function isBuiltinDataWidgetActionRenderer(
   context: ToolRendererContext,
 ): boolean {
@@ -170,6 +186,12 @@ export function resolveBuiltinActionChatRenderer(
   ) {
     return BuiltinInlineExtensionRenderer;
   }
+  if (
+    context.chatUI?.renderer === ACTION_CHAT_UI_WORKSPACE_FILE_RENDERER &&
+    normalizeWorkspaceFileResult(context.resultJson)
+  ) {
+    return BuiltinWorkspaceFileRenderer;
+  }
   if (
     isBuiltinDataWidgetActionRenderer(context) &&
     normalizeActionDataWidgetResult(context)

package/src/client/chat/widgets/workspace-file-result.ts

@@ -0,0 +1,49 @@
+export interface WorkspaceFileResult {
+  file: {
+    resourceId: string;
+    path: string;
+    name: string;
+    contentType: string;
+    sizeBytes: number;
+    updatedAt?: string;
+  };
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+
+export function normalizeWorkspaceFileResult(
+  value: unknown,
+): WorkspaceFileResult | null {
+  if (!isRecord(value) || !isRecord(value.file)) return null;
+  const file = value.file;
+  if (
+    typeof file.resourceId !== "string" ||
+    !file.resourceId ||
+    typeof file.path !== "string" ||
+    !file.path ||
+    typeof file.name !== "string" ||
+    !file.name ||
+    typeof file.contentType !== "string" ||
+    !file.contentType ||
+    typeof file.sizeBytes !== "number" ||
+    !Number.isFinite(file.sizeBytes) ||
+    file.sizeBytes < 0
+  ) {
+    return null;
+  }
+
+  return {
+    file: {
+      resourceId: file.resourceId,
+      path: file.path,
+      name: file.name,
+      contentType: file.contentType,
+      sizeBytes: file.sizeBytes,
+      ...(typeof file.updatedAt === "string"
+        ? { updatedAt: file.updatedAt }
+        : {}),
+    },
+  };
+}

package/src/client/embed-auth.ts

@@ -2,6 +2,7 @@ import {
   EMBED_MODE_QUERY_PARAM,
   EMBED_START_PATH,
   EMBED_TARGET_HEADER,
+  EMBED_TARGET_QUERY_PARAM,
   EMBED_TOKEN_QUERY_PARAM,
   MCP_APP_CHAT_BRIDGE_QUERY_PARAM,
 } from "../shared/embed-auth.js";
@@ -463,6 +464,7 @@ function withEmbedAuthHeaders(
     isAgentNativeRuntimePath(url.pathname)
   ) {
     url.searchParams.set(EMBED_TOKEN_QUERY_PARAM, token);
+    url.searchParams.set(EMBED_TARGET_QUERY_PARAM, currentEmbedTarget(win));
     return [url.toString(), init];
   }
 

package/src/client/org/InvitationBanner.tsx

@@ -2,13 +2,17 @@ import { IconLoader2 } from "@tabler/icons-react";
 import { useState } from "react";
 
 import { useOrg, useAcceptInvitation, useJoinByDomain } from "./hooks.js";
+import { WorkspaceNotice } from "./WorkspaceNotice.js";
 
 export interface InvitationBannerProps {
   className?: string;
 }
 
 /**
- * Top-of-app banner that surfaces:
+ * Top-of-app notice bar. Mounted in every template shell, so it owns the
+ * org-level notices a member needs before they can make sense of what they're
+ * looking at:
+ *   - They're on the wrong deployment ({@link WorkspaceNotice}).
  *   - Pending org invitations (one-click Accept).
  *   - Domain-match orgs the user can auto-join because their email domain
  *     matches `organizations.allowed_domain` (one-click Join). Lets a new
@@ -18,6 +22,15 @@ export interface InvitationBannerProps {
  * Renders nothing when there's nothing to surface.
  */
 export function InvitationBanner({ className }: InvitationBannerProps) {
+  return (
+    <>
+      <WorkspaceNotice className={className} />
+      <InvitationRows className={className} />
+    </>
+  );
+}
+
+function InvitationRows({ className }: InvitationBannerProps) {
   const { data: org } = useOrg();
   const acceptInvitation = useAcceptInvitation();
   const joinByDomain = useJoinByDomain();

package/src/client/org/OrgSwitcher.tsx

@@ -12,6 +12,7 @@ import {
   IconChevronRight,
   IconClipboardList,
   IconCode,
+  IconExternalLink,
   IconFileText,
   IconKey,
   IconLayoutBoard,
@@ -41,6 +42,7 @@ import {
 import { useState } from "react";
 import { useNavigate } from "react-router";
 
+import { shouldOfferWorkspace } from "../../org/workspace-url.js";
 import { agentNativePath } from "../api-path.js";
 import { useT } from "../i18n.js";
 import { useSession } from "../use-session.js";
@@ -426,6 +428,27 @@ export function OrgSwitcher({
         >
           {mode === "list" && (
             <>
+              {/* The org name alone is ambiguous: the same org exists on every
+                  deployment a member has signed into, so the switcher reads
+                  identically on all of them. The host is what tells them
+                  which one they're actually looking at. */}
+              {typeof window !== "undefined" && (
+                <div className="px-2.5 pb-1.5 pt-1 text-[11px] text-muted-foreground">
+                  <div className="truncate">{window.location.host}</div>
+                  {shouldOfferWorkspace(
+                    window.location.href,
+                    org.workspaceUrl,
+                  ) && (
+                    <a
+                      href={org.workspaceUrl ?? undefined}
+                      className="mt-0.5 inline-flex items-center gap-1 text-foreground no-underline hover:underline"
+                    >
+                      <IconExternalLink className="h-3 w-3 shrink-0" />
+                      Your workspace
+                    </a>
+                  )}
+                </div>
+              )}
               {!inOrg && (
                 <div
                   className="flex w-full items-center gap-2 px-2.5 py-1.5 text-xs text-muted-foreground"

package/src/client/org/TeamPage.tsx

@@ -46,6 +46,7 @@ import {
   IconAlertTriangle,
   IconUsersGroup,
   IconHelpCircle,
+  IconExternalLink,
 } from "@tabler/icons-react";
 import {
   forwardRef,
@@ -81,6 +82,7 @@ import {
   useDeleteOrg,
   useSwitchOrg,
   useSetOrgDomain,
+  useSetOrgWorkspaceUrl,
   useRevealA2ASecret,
   useSetA2ASecret,
   useSyncA2ASecret,
@@ -460,6 +462,8 @@ function MembersCard({ appRoles }: { appRoles?: AppRolesDescriptor }) {
               ownerEmail={org.email}
             />
 
+            <WorkspaceUrlSettingsSection workspaceUrl={org.workspaceUrl} />
+
             {isOwner && <A2ASecretSection isSet={Boolean(org.a2aSecretSet)} />}
           </div>
         )}
@@ -1477,6 +1481,132 @@ function DomainSettingsSection({
   );
 }
 
+function WorkspaceUrlSettingsSection({
+  workspaceUrl,
+}: {
+  workspaceUrl: string | null;
+}) {
+  const setWorkspaceUrl = useSetOrgWorkspaceUrl();
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(workspaceUrl ?? "");
+
+  function save() {
+    const trimmed = draft.trim();
+    if (trimmed === (workspaceUrl ?? "")) {
+      setEditing(false);
+      return;
+    }
+    setWorkspaceUrl.mutate(trimmed || null, {
+      onSuccess: () => setEditing(false),
+    });
+  }
+
+  return (
+    <div className="space-y-2 border-t border-border pt-3 first:border-t-0 first:pt-0">
+      <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+        Your workspace
+      </div>
+      <p className="text-[11px] text-muted-foreground">
+        If your team runs its own workspace, members who land on a different
+        deployment — opening a template from the catalog, for instance — get
+        pointed here instead of an app that looks empty.
+      </p>
+      {!editing ? (
+        <div className="flex items-center gap-2">
+          {workspaceUrl ? (
+            <>
+              <span className="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-sm">
+                <IconExternalLink className="h-3.5 w-3.5 text-muted-foreground" />
+                {workspaceUrl}
+              </span>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    onClick={() => {
+                      setDraft(workspaceUrl);
+                      setEditing(true);
+                    }}
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    <IconPencil size={14} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Edit workspace URL</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    intent="danger"
+                    emphasis="ghost"
+                    disabled={setWorkspaceUrl.isPending}
+                    onClick={() => setWorkspaceUrl.mutate(null)}
+                    className="text-muted-foreground hover:text-destructive disabled:opacity-50"
+                  >
+                    <IconX size={14} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Remove workspace URL</TooltipContent>
+              </Tooltip>
+            </>
+          ) : (
+            <Button
+              type="button"
+              intent="neutral"
+              emphasis="outline"
+              onClick={() => setEditing(true)}
+              className="flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium hover:bg-accent/50"
+            >
+              <IconExternalLink size={14} />
+              Set workspace URL
+            </Button>
+          )}
+        </div>
+      ) : (
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") save();
+              if (e.key === "Escape") setEditing(false);
+            }}
+            placeholder="workspace.example.com"
+            className="rounded-md border border-border bg-background px-2.5 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-foreground"
+            autoFocus
+          />
+          <Button
+            type="button"
+            intent="primary"
+            emphasis="solid"
+            disabled={setWorkspaceUrl.isPending}
+            onClick={save}
+            className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+          >
+            {setWorkspaceUrl.isPending ? (
+              <IconLoader2 size={14} className="animate-spin" />
+            ) : (
+              "Save"
+            )}
+          </Button>
+          <Button
+            type="button"
+            intent="neutral"
+            emphasis="outline"
+            onClick={() => setEditing(false)}
+            className="rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground"
+          >
+            Cancel
+          </Button>
+        </div>
+      )}
+      <ErrorText error={setWorkspaceUrl.error} />
+    </div>
+  );
+}
+
 function A2ASecretSection({ isSet }: { isSet: boolean }) {
   const revealA2ASecret = useRevealA2ASecret();
   const setA2ASecret = useSetA2ASecret();

package/src/client/org/WorkspaceNotice.tsx

@@ -0,0 +1,85 @@
+import { IconExternalLink } from "@tabler/icons-react";
+import { useState } from "react";
+
+import { shouldOfferWorkspace } from "../../org/workspace-url.js";
+import { useOrg } from "./hooks.js";
+
+const DISMISS_KEY_PREFIX = "agent-native:workspace-notice-dismissed:";
+
+function dismissKey(workspaceUrl: string): string {
+  return `${DISMISS_KEY_PREFIX}${workspaceUrl}`;
+}
+
+function readDismissed(workspaceUrl: string): boolean {
+  try {
+    return localStorage.getItem(dismissKey(workspaceUrl)) === "1";
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Points a member at their org's own workspace when they've landed somewhere
+ * else — typically a shared hosted app opened from the template catalog.
+ *
+ * The switcher shows the same org name on both deployments, so without this
+ * the two are indistinguishable: the app looks like their team's, the team's
+ * apps aren't in it, and the natural reading is a broken session rather than
+ * a different host. Renders nothing unless an owner/admin has set a workspace
+ * URL and the member is not already on it.
+ *
+ * Deliberately a choice, not a redirect. The shared hosted app is the real
+ * product for most people, and some members of an org with a workspace still
+ * want to be here.
+ */
+export function WorkspaceNotice({ className }: { className?: string }) {
+  const { data: org } = useOrg();
+  // Only re-renders after a click; the persisted answer is re-read below,
+  // because on every load this renders before the org query resolves and a
+  // value captured then would always be the pre-data default.
+  const [dismissedNow, setDismissedNow] = useState(false);
+  const workspaceUrl = org?.workspaceUrl ?? null;
+
+  if (typeof window === "undefined") return null;
+  if (!workspaceUrl || dismissedNow || readDismissed(workspaceUrl)) return null;
+  if (!shouldOfferWorkspace(window.location.href, workspaceUrl)) return null;
+
+  const workspaceHost = new URL(workspaceUrl).host;
+
+  return (
+    <div
+      className={`border-b border-border bg-blue-50 dark:bg-blue-950/30 px-3 py-2.5 sm:px-4 ${className ?? ""}`}
+    >
+      <div className="flex items-center justify-between gap-4 text-sm">
+        <span className="min-w-0 flex-1 text-foreground">
+          <span className="font-medium">{org?.orgName}</span> has its own
+          workspace at <span className="font-medium">{workspaceHost}</span>.
+          Your team&apos;s apps live there, not here.
+        </span>
+        <div className="flex shrink-0 items-center gap-2">
+          <a
+            href={workspaceUrl}
+            className="inline-flex items-center gap-1.5 rounded-md bg-green-600 px-3 py-1.5 text-xs font-medium text-white no-underline hover:bg-green-700"
+          >
+            <IconExternalLink className="h-3 w-3" />
+            Go there
+          </a>
+          <button
+            type="button"
+            onClick={() => {
+              try {
+                localStorage.setItem(dismissKey(workspaceUrl), "1");
+              } catch {
+                // Private-mode storage failure only costs a repeat banner.
+              }
+              setDismissedNow(true);
+            }}
+            className="rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground cursor-pointer"
+          >
+            Stay here
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/org/hooks.ts

@@ -318,6 +318,20 @@ export function useSetOrgDomain() {
   });
 }
 
+export function useSetOrgWorkspaceUrl() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (url: string | null) =>
+      apiFetch(`${ORG_BASE}/workspace-url`, {
+        method: "PUT",
+        body: JSON.stringify({ url }),
+      }),
+    onSuccess: async () => {
+      await qc.invalidateQueries({ queryKey: ["org-me"] });
+    },
+  });
+}
+
 export interface AppRoleAssignment {
   email: string;
   role: string;

package/src/client/org/index.ts

@@ -15,6 +15,7 @@ export {
   useSwitchOrg,
   useJoinByDomain,
   useSetOrgDomain,
+  useSetOrgWorkspaceUrl,
   useRevealA2ASecret,
   useSetA2ASecret,
   useSyncA2ASecret,
@@ -43,6 +44,7 @@ export {
   InvitationBanner,
   type InvitationBannerProps,
 } from "./InvitationBanner.js";
+export { WorkspaceNotice } from "./WorkspaceNotice.js";
 export { TeamPage, type TeamPageProps } from "./TeamPage.js";
 export {
   RequireActiveOrg,