@agent-native/core 0.127.3 → 0.128.1

package/src/client/AgentPanel.tsx

@@ -198,7 +198,9 @@ type PanelMode = "chat" | "cli" | "resources" | "settings";
 export function normalizeAgentPanelModeForSurface(
   mode: PanelMode,
   allowSettingsMode: boolean,
+  chatOnly = false,
 ): PanelMode {
+  if (chatOnly) return "chat";
   return mode === "settings" && !allowSettingsMode ? "chat" : mode;
 }
 const AGENT_PANEL_FONT_FAMILY =
@@ -597,6 +599,8 @@ export interface AgentPanelProps extends Omit<
   showPageNewChatButton?: boolean;
   /** Allow the sidebar settings view to render inside this panel. Default: true. */
   allowSettingsMode?: boolean;
+  /** Keep this surface on chat even when mode controls are hidden. */
+  chatOnly?: boolean;
   /** Optional link shown in Resources and Settings modes for the full Agent page. */
   agentPageHref?: string;
   /** Capability gate for source edits and CLI access. */
@@ -754,6 +758,7 @@ function AgentPanelInner({
   showTabBar = true,
   showPageNewChatButton = false,
   allowSettingsMode = true,
+  chatOnly = false,
   agentPageHref,
   codeAccess,
   ...assistantChatProps
@@ -807,9 +812,17 @@ function AgentPanelInner({
         saved === "resources" ||
         saved === "settings"
       )
-        return normalizeAgentPanelModeForSurface(saved, allowSettingsMode);
+        return normalizeAgentPanelModeForSurface(
+          saved,
+          allowSettingsMode,
+          chatOnly,
+        );
     } catch {}
-    return normalizeAgentPanelModeForSurface(defaultMode, allowSettingsMode);
+    return normalizeAgentPanelModeForSurface(
+      defaultMode,
+      allowSettingsMode,
+      chatOnly,
+    );
   });
   useEffect(() => {
     try {
@@ -823,15 +836,21 @@ function AgentPanelInner({
   const switchMode = useCallback(
     (m: PanelMode) => {
       startTransition(() =>
-        setMode(normalizeAgentPanelModeForSurface(m, allowSettingsMode)),
+        setMode(
+          normalizeAgentPanelModeForSurface(m, allowSettingsMode, chatOnly),
+        ),
       );
     },
-    [allowSettingsMode],
+    [allowSettingsMode, chatOnly],
   );
   useEffect(() => {
-    const nextMode = normalizeAgentPanelModeForSurface(mode, allowSettingsMode);
+    const nextMode = normalizeAgentPanelModeForSurface(
+      mode,
+      allowSettingsMode,
+      chatOnly,
+    );
     if (nextMode !== mode) switchMode(nextMode);
-  }, [mode, allowSettingsMode, switchMode]);
+  }, [mode, allowSettingsMode, chatOnly, switchMode]);
   const openRunThread = useCallback(
     (threadId: string, run?: AgentRun) => {
       switchMode("chat");
@@ -3349,6 +3368,7 @@ export function AgentSidebar({
             threadUrlSync={threadUrlSync}
             agentPageHref={agentPageHref}
             allowSettingsMode={false}
+            chatOnly
           />
         </div>
       </div>

package/src/client/AssistantChat.tsx

@@ -333,8 +333,16 @@ function activeRunStuckThresholdMs(runInfo: ActiveRunLookup): number {
 }
 
 function activeRunLooksStale(runInfo: ActiveRunLookup): boolean {
+  // A run killed before it emitted anything has no `lastProgressAt`. Falling
+  // back to the heartbeat keeps that case from reading as perpetually fresh —
+  // "never reported progress" is the worst case, not an exemption from the
+  // staleness check.
   const lastProgressAt =
-    typeof runInfo.lastProgressAt === "number" ? runInfo.lastProgressAt : null;
+    typeof runInfo.lastProgressAt === "number"
+      ? runInfo.lastProgressAt
+      : typeof runInfo.heartbeatAt === "number"
+        ? runInfo.heartbeatAt
+        : null;
   const nowMs =
     typeof runInfo.serverNow === "number" ? runInfo.serverNow : Date.now();
   const thresholdMs = activeRunStuckThresholdMs(runInfo);
@@ -345,6 +353,16 @@ function activeRunLooksStale(runInfo: ActiveRunLookup): boolean {
   );
 }
 
+/**
+ * The stored active run is what keeps the "Thinking…" spinner up across a
+ * reload, and the `/runs/active` probe is the only path that clears it. A 5xx
+ * or a network drop there means "couldn't determine", NOT "still running" —
+ * collapsing the two is what strands the spinner forever when the server is
+ * briefly unreachable, because no caller reschedules the probe. Retry inside
+ * the call, then give up loudly.
+ */
+const ACTIVE_RUN_PROBE_RETRY_DELAYS_MS = [400, 1200];
+
 /**
  * Decide whether a reconnect should give up with "no progress". The signal is
  * *time since the last streamed event*, NOT total reconnect duration: a healthy
@@ -3440,12 +3458,50 @@ const AssistantChatInner = forwardRef<
       if (isRuntimeRunningRef.current || isAutoResumingRef.current) {
         return false;
       }
+      const storedActiveRun = getActiveRun();
+      let runRes: Response | null = null;
+      for (let attempt = 0; ; attempt += 1) {
+        try {
+          const res = await fetch(
+            `${apiUrl}/runs/active?threadId=${encodeURIComponent(threadId)}`,
+          );
+          if (res.ok) {
+            runRes = res;
+            break;
+          }
+        } catch {
+          // Fall through to the retry/give-up path below.
+        }
+        const retryDelayMs = ACTIVE_RUN_PROBE_RETRY_DELAYS_MS[attempt];
+        if (retryDelayMs === undefined) break;
+        await new Promise((resolve) => setTimeout(resolve, retryDelayMs));
+      }
+
+      if (!runRes) {
+        // Still unreachable. Only a stored run for this thread is holding the
+        // spinner up, so that is also the only case worth interrupting the user
+        // for — drop it and say why, rather than leaving "Thinking…" forever.
+        if (storedActiveRun?.threadId === threadId) {
+          clearActiveRunIfMatches(threadId, storedActiveRun.runId);
+          window.dispatchEvent(
+            new CustomEvent("agent-chat:run-error", {
+              detail: {
+                message:
+                  "Couldn't reach the server to check whether the agent is still working. Send your message again to retry.",
+                errorCode: "run_status_unavailable",
+                recoverable: true,
+                ...(storedActiveRun.runId
+                  ? { runId: storedActiveRun.runId }
+                  : {}),
+                ...(tabId ? { tabId } : {}),
+              },
+            }),
+          );
+        }
+        return false;
+      }
+
       try {
-        const storedActiveRun = getActiveRun();
-        const runRes = await fetch(
-          `${apiUrl}/runs/active?threadId=${encodeURIComponent(threadId)}`,
-        );
-        if (!runRes.ok) return false;
         const runInfo = (await runRes.json()) as ActiveRunLookup;
         if (
           !runInfo.active ||
@@ -3464,7 +3520,7 @@ const AssistantChatInner = forwardRef<
       } catch {
         return false;
       }
-    }, [apiUrl, refreshThreadFromServer, startReconnectToRun, threadId]);
+    }, [apiUrl, refreshThreadFromServer, startReconnectToRun, tabId, threadId]);
 
   useEffect(() => {
     if (!threadId || !isNewThread) return;

package/src/client/DefaultSpinner.tsx

@@ -2,14 +2,23 @@
  * Full-screen loading spinner rendered during SSR and initial hydration.
  * Uses inline SVG + styles because Tailwind may not be loaded yet on the server.
  * Respects the user's OS color scheme so dark-mode users don't get a white flash.
+ *
+ * The stall hint is revealed by a pure-CSS `animation-delay`, never a timer:
+ * the states that strand a user here (hydration never runs, the route module
+ * 404s, a cold dev-server compile) are exactly the states where no JS of ours
+ * executes, so a `setTimeout` fallback would never fire. A featureless spinner
+ * is indistinguishable from a blank screen, and reads as "the app is broken"
+ * rather than "look at the terminal" — that mis-read is what this text buys.
  */
 export function DefaultSpinner() {
   return (
     <div
       style={{
         display: "flex",
+        flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
+        gap: 16,
         height: "100vh",
         width: "100%",
       }}
@@ -29,8 +38,28 @@ export function DefaultSpinner() {
       >
         <path d="M21 12a9 9 0 1 1-6.219-8.56" />
       </svg>
+      <p className="an-stall-hint">
+        Still loading. A first run compiles dependencies and can take a minute —
+        if it does not finish, check the terminal running the dev server for
+        errors.
+      </p>
       <style>{`
         @keyframes an-spin { to { transform: rotate(360deg) } }
+        @keyframes an-stall-in { to { opacity: 0.6 } }
+        .an-stall-hint {
+          opacity: 0;
+          margin: 0;
+          max-width: 32rem;
+          padding: 0 1.5rem;
+          text-align: center;
+          font-size: 0.875rem;
+          line-height: 1.5;
+          font-family: ui-sans-serif, system-ui, sans-serif;
+          animation: an-stall-in 0.4s ease-out 10s forwards;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .an-stall-hint { animation-duration: 0s }
+        }
         html {
           background: hsl(var(--background, 0 0% 100%));
           color: hsl(var(--foreground, 240 10% 3.9%));

package/src/client/org/TeamPage.tsx

@@ -56,6 +56,9 @@ import {
   type ReactNode,
 } from "react";
 
+// Type-only: erased at build time, so declaring app roles pulls no server or
+// database code into the browser bundle.
+import type { AppRolesDescriptor } from "../../org/app-roles.js";
 import type { DomainMatchOrg } from "../../org/types.js";
 import {
   Tooltip,
@@ -82,6 +85,8 @@ import {
   useSetA2ASecret,
   useSyncA2ASecret,
   useJoinByDomain,
+  useAppRoles,
+  useSetAppMemberRole,
   type InviteRole,
   type SyncA2ASecretResult,
 } from "./hooks.js";
@@ -127,6 +132,17 @@ export interface TeamPageProps {
    * tweak page width.
    */
   className?: string;
+  /**
+   * Opt in to an app-role column on the members table, using the same
+   * descriptor the app passes to `defineAppRoles`. Pass it explicitly rather
+   * than letting the page discover registered apps: a workspace can host
+   * several, and a members table that silently grows a column when some
+   * unrelated module registers itself is a surprise, not a feature.
+   *
+   * Only org owners/admins can change assignments; everyone else sees the
+   * column read-only.
+   */
+  appRoles?: AppRolesDescriptor;
 }
 
 function RoleIcon({ role }: { role: string }) {
@@ -383,7 +399,7 @@ interface PendingInviteListItem {
   role: string;
 }
 
-function MembersCard() {
+function MembersCard({ appRoles }: { appRoles?: AppRolesDescriptor }) {
   const t = useT();
   const { data: org } = useOrg();
   const { data: membersData, isLoading: isLoadingMembers } = useOrgMembers();
@@ -457,6 +473,7 @@ function MembersCard() {
         isLoadingMembers={isLoadingMembers}
         currentUserEmail={org.email}
         currentUserRole={org.role ?? null}
+        appRoles={appRoles}
       />
 
       {isOwner && <DangerZoneCard orgName={org.orgName ?? ""} />}
@@ -470,16 +487,26 @@ function MembersTableCard({
   isLoadingMembers,
   currentUserEmail,
   currentUserRole,
+  appRoles,
 }: {
   members: MemberListItem[];
   pendingInvites: PendingInviteListItem[];
   isLoadingMembers: boolean;
   currentUserEmail: string;
   currentUserRole: string | null;
+  appRoles?: AppRolesDescriptor;
 }) {
   const t = useT();
   const [showInviteForm, setShowInviteForm] = useState(false);
   const canInvite = currentUserRole === "owner" || currentUserRole === "admin";
+  const { data: appRoleData } = useAppRoles(appRoles?.appId);
+  const appRoleByEmail = new Map(
+    (appRoleData?.assignments ?? []).map((a) => [
+      a.email.toLowerCase(),
+      a.role,
+    ]),
+  );
+  const columnCount = appRoles ? 5 : 4;
 
   return (
     <section className="rounded-lg border border-border bg-card">
@@ -516,6 +543,9 @@ function MembersTableCard({
           <TableRow>
             <TableHead>{t("org.member")}</TableHead>
             <TableHead>{t("org.role")}</TableHead>
+            {appRoles && (
+              <TableHead>{appRoles.label ?? appRoles.appId}</TableHead>
+            )}
             <TableHead>{t("org.status")}</TableHead>
             <TableHead className="text-end">{t("org.actions")}</TableHead>
           </TableRow>
@@ -524,7 +554,7 @@ function MembersTableCard({
           {isLoadingMembers && members.length === 0 ? (
             [0, 1, 2].map((i) => (
               <TableRow key={i}>
-                <TableCell colSpan={4}>
+                <TableCell colSpan={columnCount}>
                   <div
                     className="h-3.5 rounded bg-muted animate-pulse"
                     style={{ width: `${180 + i * 48}px` }}
@@ -535,7 +565,7 @@ function MembersTableCard({
           ) : members.length === 0 && pendingInvites.length === 0 ? (
             <TableRow>
               <TableCell
-                colSpan={4}
+                colSpan={columnCount}
                 className="py-8 text-center text-sm text-muted-foreground"
               >
                 {t("org.noMembers")}
@@ -550,10 +580,17 @@ function MembersTableCard({
                   role={m.role}
                   isCurrentUser={m.email === currentUserEmail}
                   currentUserRole={currentUserRole}
+                  appRoles={appRoles}
+                  appRole={appRoleByEmail.get(m.email.toLowerCase()) ?? null}
+                  canManageAppRoles={Boolean(appRoleData?.canManage)}
                 />
               ))}
               {pendingInvites.map((inv) => (
-                <PendingInviteRow key={inv.id} invite={inv} />
+                <PendingInviteRow
+                  key={inv.id}
+                  invite={inv}
+                  hasAppRoleColumn={Boolean(appRoles)}
+                />
               ))}
             </>
           )}
@@ -665,7 +702,13 @@ function RoleBadge({ role }: { role: string }) {
   );
 }
 
-function PendingInviteRow({ invite }: { invite: PendingInviteListItem }) {
+function PendingInviteRow({
+  invite,
+  hasAppRoleColumn,
+}: {
+  invite: PendingInviteListItem;
+  hasAppRoleColumn?: boolean;
+}) {
   const t = useT();
   return (
     <TableRow className="opacity-70">
@@ -675,6 +718,13 @@ function PendingInviteRow({ invite }: { invite: PendingInviteListItem }) {
       <TableCell>
         <RoleBadge role={invite.role} />
       </TableCell>
+      {/* App roles hang off membership, so there is nothing to assign until the
+          invitation is accepted. */}
+      {hasAppRoleColumn && (
+        <TableCell>
+          <span className="text-muted-foreground">-</span>
+        </TableCell>
+      )}
       <TableCell>
         <span className="rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground">
           {t("org.invited")}
@@ -685,16 +735,112 @@ function PendingInviteRow({ invite }: { invite: PendingInviteListItem }) {
   );
 }
 
+/** Sentinel for "clear the assignment" — Select cannot carry an empty value. */
+const UNASSIGNED = "__unassigned__";
+
+function AppRoleCell({
+  email,
+  appRoles,
+  appRole,
+  canManage,
+}: {
+  email: string;
+  appRoles: AppRolesDescriptor;
+  appRole: string | null;
+  canManage: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const setAppRole = useSetAppMemberRole(appRoles.appId);
+  const labelFor = (r: string) => appRoles.roleLabels?.[r] ?? r;
+
+  if (editing) {
+    return (
+      <TableCell>
+        <Select
+          defaultOpen
+          value={appRole ?? UNASSIGNED}
+          onOpenChange={(open) => {
+            if (!open) setEditing(false);
+          }}
+          onValueChange={(value) => {
+            const next = value === UNASSIGNED ? null : value;
+            if (next === appRole) {
+              setEditing(false);
+              return;
+            }
+            setAppRole.mutate(
+              { email, role: next },
+              { onSuccess: () => setEditing(false) },
+            );
+          }}
+          disabled={setAppRole.isPending}
+        >
+          <SelectTrigger
+            autoFocus
+            className="h-auto w-auto rounded-md border border-border bg-background px-1.5 py-0.5 text-[11px]"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={UNASSIGNED}>
+              {appRoles.defaultRole ? labelFor(appRoles.defaultRole) : "—"}
+            </SelectItem>
+            {appRoles.roles.map((r) => (
+              <SelectItem key={r} value={r}>
+                {labelFor(r)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </TableCell>
+    );
+  }
+
+  // An unassigned member shows the app's default only as a hint. The default
+  // never satisfies a server guard, so it must not read as a granted role.
+  const display = appRole ? (
+    <span className="inline-flex items-center rounded border border-border px-2 py-1 text-xs text-muted-foreground">
+      {labelFor(appRole)}
+    </span>
+  ) : (
+    <span className="text-xs text-muted-foreground/70">
+      {appRoles.defaultRole ? labelFor(appRoles.defaultRole) : "—"}
+    </span>
+  );
+
+  return (
+    <TableCell>
+      {canManage ? (
+        <Button
+          type="button"
+          onClick={() => setEditing(true)}
+          className="cursor-pointer rounded hover:opacity-80"
+        >
+          {display}
+        </Button>
+      ) : (
+        display
+      )}
+    </TableCell>
+  );
+}
+
 function MemberRow({
   email,
   role,
   isCurrentUser,
   currentUserRole,
+  appRoles,
+  appRole,
+  canManageAppRoles,
 }: {
   email: string;
   role: string;
   isCurrentUser: boolean;
   currentUserRole: string | null;
+  appRoles?: AppRolesDescriptor;
+  appRole?: string | null;
+  canManageAppRoles?: boolean;
 }) {
   const t = useT();
   const removeMember = useRemoveMember();
@@ -719,6 +865,14 @@ function MemberRow({
       <TableCell>
         <RoleBadge role={role} />
       </TableCell>
+      {appRoles && (
+        <AppRoleCell
+          email={email}
+          appRoles={appRoles}
+          appRole={appRole ?? null}
+          canManage={Boolean(canManageAppRoles)}
+        />
+      )}
       <TableCell>
         {isCurrentUser ? (
           <span className="rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground">
@@ -1620,6 +1774,7 @@ export function TeamPage({
   showTitle = true,
   createOrgDescription,
   className,
+  appRoles,
 }: TeamPageProps) {
   const t = useT();
   const { data: org, isLoading } = useOrg();
@@ -1652,7 +1807,7 @@ export function TeamPage({
           {!org?.orgId ? (
             <CreateOrgCard description={createOrgDescription} />
           ) : (
-            <MembersCard />
+            <MembersCard appRoles={appRoles} />
           )}
         </>
       )}

package/src/client/org/hooks.ts

@@ -318,6 +318,73 @@ export function useSetOrgDomain() {
   });
 }
 
+export interface AppRoleAssignment {
+  email: string;
+  role: string;
+}
+
+export interface AppRolesInfo {
+  appId: string;
+  roles: string[];
+  /** Shown for members with no assignment. Never satisfies a server guard. */
+  defaultRole: string | null;
+  roleLabels: Record<string, string>;
+  /** Whether the current user may change assignments (org owner/admin). */
+  canManage: boolean;
+  assignments: AppRoleAssignment[];
+  myRole: string | null;
+}
+
+/**
+ * App-role vocabulary and assignments for the active org.
+ *
+ * `myRole` and `canManage` are progressive disclosure only — every guarded
+ * operation re-resolves both server-side, so a client that shows the wrong
+ * affordance still cannot perform the operation.
+ */
+export function useAppRoles(appId: string | undefined) {
+  const { data: org } = useOrg();
+  return useQuery<AppRolesInfo>({
+    queryKey: ["org-app-roles", appId ?? null, org?.orgId ?? null],
+    queryFn: () =>
+      apiFetch(`${ORG_BASE}/app-roles?appId=${encodeURIComponent(appId!)}`),
+    enabled: Boolean(appId),
+    staleTime: 30_000,
+  });
+}
+
+/** The current user's role in one app, or `null` when unassigned. */
+export function useAppRole(appId: string | undefined): {
+  role: string | null;
+  isLoading: boolean;
+  error: Error | null;
+} {
+  const query = useAppRoles(appId);
+  return {
+    role: query.data?.myRole ?? null,
+    isLoading: query.isLoading,
+    error: query.error,
+  };
+}
+
+export function useSetAppMemberRole(appId: string) {
+  const qc = useQueryClient();
+  return useMutation<
+    { appId: string; email: string; role: string | null },
+    Error,
+    { email: string; role: string | null }
+  >({
+    mutationFn: ({ email, role }) =>
+      apiFetch(`${ORG_BASE}/app-roles/${encodeURIComponent(email)}`, {
+        method: "PUT",
+        body: JSON.stringify({ appId, role }),
+      }),
+    onSuccess: async () => {
+      await qc.invalidateQueries({ queryKey: ["org-app-roles"] });
+    },
+  });
+}
+
 /**
  * Fetch the org's A2A secret on demand (owner/admin). Deliberately a separate
  * request from `useOrg()` so the secret only reaches the browser when the

package/src/client/org/index.ts

@@ -19,6 +19,9 @@ export {
   useSetA2ASecret,
   useSyncA2ASecret,
   useOrgRole,
+  useAppRoles,
+  useAppRole,
+  useSetAppMemberRole,
 } from "./hooks.js";
 
 export type {
@@ -27,8 +30,14 @@ export type {
   BulkInviteResult,
   SyncA2ASecretResult,
   UseOrgRoleResult,
+  AppRoleAssignment,
+  AppRolesInfo,
 } from "./hooks.js";
 
+// Type-only re-export so templates can annotate the `appRoles` prop without
+// importing the server module.
+export type { AppRolesDescriptor } from "../../org/app-roles.js";
+
 export { OrgSwitcher, type OrgSwitcherProps } from "./OrgSwitcher.js";
 export {
   InvitationBanner,