@agent-native/core 0.121.2 → 0.122.1

package/src/cli/templates-meta.ts

@@ -112,6 +112,7 @@ export const TEMPLATES: TemplateMeta[] = [
     devPort: 8088,
     prodUrl: "https://analytics.agent-native.com",
     defaultMode: "prod",
+    requiredPackages: ["creative-context"],
     core: true,
   },
   {

package/src/client/AssistantChat.tsx

@@ -96,6 +96,7 @@ import { TextStreamingContext } from "./chat/markdown-renderer.js";
 import {
   CheckpointContext,
   MessageActionsContext,
+  assistantMessageRunId,
   UserMessage,
   AssistantMessage,
   SelectionAttachedPill,
@@ -364,16 +365,7 @@ function activeRunMatchesThread(
   return Boolean(threadId && state?.threadId === threadId && state.runId);
 }
 
-export function assistantMessageRunId(message: unknown): string | undefined {
-  const metadata = (message as { metadata?: unknown })?.metadata as
-    | { custom?: { runId?: unknown }; runId?: unknown }
-    | undefined;
-  return typeof metadata?.custom?.runId === "string"
-    ? metadata.custom.runId
-    : typeof metadata?.runId === "string"
-      ? metadata.runId
-      : undefined;
-}
+export { assistantMessageRunId };
 
 export function shouldAcceptRunError(args: {
   errorRunId?: string;
@@ -4945,9 +4937,43 @@ const AssistantChatInner = forwardRef<
   const chatScrollResetKey = `${tabId ?? ""}:${threadId ?? ""}`;
 
   const { isDevMode: cpDevMode } = useDevMode(apiUrl);
+  const [checkpointRunIds, setCheckpointRunIds] = useState<ReadonlySet<string>>(
+    () => new Set<string>(),
+  );
+  useEffect(() => {
+    if (!cpDevMode || !threadId) {
+      setCheckpointRunIds(new Set<string>());
+      return;
+    }
+    // Refetch once each run settles: the checkpoint for that turn is written
+    // after the run completes, so a list loaded mid-run would miss it.
+    if (isRunning) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        const res = await fetch(
+          `${apiUrl}/checkpoints?threadId=${encodeURIComponent(threadId)}`,
+        );
+        if (!res.ok) throw new Error(String(res.status));
+        const rows: unknown = await res.json();
+        if (cancelled) return;
+        const runIds = Array.isArray(rows)
+          ? rows
+              .map((row) => (row as { runId?: unknown })?.runId)
+              .filter((id): id is string => typeof id === "string" && !!id)
+          : [];
+        setCheckpointRunIds(new Set(runIds));
+      } catch {
+        if (!cancelled) setCheckpointRunIds(new Set<string>());
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [apiUrl, cpDevMode, threadId, isRunning]);
   const checkpointCtx = useMemo(
-    () => ({ apiUrl, devMode: cpDevMode, threadId }),
-    [apiUrl, cpDevMode, threadId],
+    () => ({ apiUrl, devMode: cpDevMode, threadId, checkpointRunIds }),
+    [apiUrl, cpDevMode, threadId, checkpointRunIds],
   );
   const messageActionsCtx = useMemo(() => ({ onForkChat }), [onForkChat]);
   const lastMessageLoopLimit = useMemo(() => {

package/src/client/NewWorkspaceAppFlow.tsx

@@ -1,4 +1,5 @@
 import {
+  IconAlertTriangle,
   IconArrowUpRight,
   IconBook,
   IconCheck,
@@ -13,6 +14,7 @@ import { sendToAgentChat } from "./agent-chat.js";
 import { agentNativePath, appBasePath } from "./api-path.js";
 import { isInBuilderFrame } from "./builder-frame.js";
 import { PromptComposer } from "./composer/index.js";
+import { useBuilderConnectFlow } from "./settings/useBuilderStatus.js";
 import { useDevMode } from "./use-dev-mode.js";
 
 export interface VaultSecretOption {
@@ -72,6 +74,16 @@ function defaultDispatchBasePath(sourceApp?: string): string | null {
   return "/dispatch";
 }
 
+const ERROR_FAILURE_REASONS = new Set([
+  "builder-error",
+  "builder-not-connected",
+  "credential-store-unavailable",
+]);
+
+function isErrorFailureReason(reason: string | null): boolean {
+  return !!reason && ERROR_FAILURE_REASONS.has(reason);
+}
+
 async function fetchJson(url: string, init?: RequestInit): Promise<any> {
   const res = await fetch(url, init);
   const data = await res.json().catch(() => null);
@@ -162,6 +174,8 @@ export function NewWorkspaceAppFlow({
   const [resourcesError, setResourcesError] = useState<string | null>(null);
   const [statusMessage, setStatusMessage] = useState<string | null>(null);
   const [branchUrl, setBranchUrl] = useState<string | null>(null);
+  const [failureReason, setFailureReason] = useState<string | null>(null);
+  const [lastSubmittedPrompt, setLastSubmittedPrompt] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { isDevMode } = useDevMode();
 
@@ -170,6 +184,19 @@ export function NewWorkspaceAppFlow({
       ? defaultDispatchBasePath(sourceApp)
       : dispatchBasePath;
 
+  // Enabled only while the connect CTA is on screen. Left always-on, the hook
+  // would poll Builder status on every mount and fire onConnected on its first
+  // status read for anyone already connected.
+  const connectFlow = useBuilderConnectFlow({
+    enabled: failureReason === "builder-not-connected",
+    trackingSource: "new_workspace_app_flow",
+    trackingFlow: "create_app",
+    onConnected: () => {
+      setFailureReason(null);
+      setStatusMessage("Builder connected. Press Create app to try again.");
+    },
+  });
+
   useEffect(() => {
     let cancelled = false;
     const secretsUrl = actionUrl(
@@ -264,9 +291,11 @@ export function NewWorkspaceAppFlow({
       selectedResources,
       vaultAccessMode,
     });
+    setLastSubmittedPrompt(prompt);
     setIsSubmitting(true);
     setStatusMessage(null);
     setBranchUrl(null);
+    setFailureReason(null);
 
     try {
       if (isInBuilderFrame()) {
@@ -297,10 +326,14 @@ export function NewWorkspaceAppFlow({
             result?.message ||
               "This requires a code change. Edit locally or use Builder.io to edit this code in the cloud and continue customizing the app any way you like.",
           );
+          setFailureReason(
+            result?.mode === "builder-unavailable" ? result.reason : null,
+          );
         }
       }
     } catch (err: any) {
       setStatusMessage(err?.message || "Could not start the new app flow.");
+      setFailureReason(null);
     } finally {
       setIsSubmitting(false);
     }
@@ -338,17 +371,49 @@ export function NewWorkspaceAppFlow({
           />
 
           {statusMessage ? (
-            <div className="rounded-md border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
-              {statusMessage}
-              {branchUrl ? (
-                <a
-                  href={branchUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="ms-2 inline-flex items-center gap-1 font-medium text-foreground underline"
+            <div
+              className={`flex flex-col gap-2 rounded-md border px-3 py-2 text-sm ${
+                isErrorFailureReason(failureReason)
+                  ? "border-destructive/40 bg-destructive/10 text-destructive"
+                  : "border-border bg-muted/40 text-muted-foreground"
+              }`}
+            >
+              <div className="flex flex-wrap items-center gap-2">
+                {isErrorFailureReason(failureReason) ? (
+                  <IconAlertTriangle className="h-4 w-4 shrink-0" />
+                ) : null}
+                <span>{statusMessage}</span>
+                {branchUrl ? (
+                  <a
+                    href={branchUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="inline-flex items-center gap-1 font-medium text-foreground underline"
+                  >
+                    Open branch <IconArrowUpRight className="h-3 w-3" />
+                  </a>
+                ) : null}
+              </div>
+              {failureReason === "builder-not-connected" ? (
+                <button
+                  type="button"
+                  onClick={() => connectFlow.start()}
+                  disabled={connectFlow.connecting}
+                  className="inline-flex w-fit cursor-pointer items-center gap-1 rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground hover:bg-accent/40 disabled:cursor-not-allowed disabled:opacity-60"
+                >
+                  {connectFlow.connecting ? "Connecting..." : "Connect Builder"}
+                </button>
+              ) : null}
+              {failureReason === "credential-store-unavailable" ||
+              failureReason === "builder-error" ? (
+                <button
+                  type="button"
+                  onClick={() => submit(lastSubmittedPrompt)}
+                  disabled={isSubmitting}
+                  className="inline-flex w-fit cursor-pointer items-center gap-1 rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground hover:bg-accent/40 disabled:cursor-not-allowed disabled:opacity-60"
                 >
-                  Open branch <IconArrowUpRight className="h-3 w-3" />
-                </a>
+                  Try again
+                </button>
               ) : null}
             </div>
           ) : null}

package/src/client/chat/message-components.tsx

@@ -40,6 +40,7 @@ import {
   IconStack2,
   IconMessageChatbot,
   IconPencil,
+  IconAlertTriangle,
   IconLoader2,
 } from "@tabler/icons-react";
 import React, { useState, useEffect, useCallback, useRef } from "react";
@@ -284,12 +285,54 @@ export const CheckpointContext = React.createContext<{
   apiUrl: string;
   devMode: boolean;
   threadId?: string;
+  // Run ids that actually have a saved checkpoint. Restore is only offered for
+  // these — auto-checkpointing skips turns that started from a dirty tree or a
+  // non-git cwd, and without this the menu item appears on every turn and does
+  // nothing when clicked.
+  checkpointRunIds?: ReadonlySet<string>;
 } | null>(null);
 
 export const MessageActionsContext = React.createContext<{
   onForkChat?: () => void | boolean | Promise<void | boolean>;
 } | null>(null);
 
+/**
+ * Restore rewrites the working tree, so only offer it when the server actually
+ * has a checkpoint for this turn. Auto-checkpointing skips turns that started
+ * from a dirty tree or a non-git cwd; gating on Code mode alone put a
+ * "Revert to here" item on turns where clicking it could do nothing.
+ */
+export function shouldOfferRestore(args: {
+  devMode: boolean | undefined;
+  isComplete: boolean;
+  isLast: boolean;
+  runId: string | undefined;
+  checkpointRunIds: ReadonlySet<string> | undefined;
+}): boolean {
+  return Boolean(
+    args.devMode &&
+    args.isComplete &&
+    !args.isLast &&
+    args.runId &&
+    args.checkpointRunIds?.has(args.runId),
+  );
+}
+
+/**
+ * Live yields put the run id at `metadata.custom.runId`; server-persisted
+ * messages put it at `metadata.runId`.
+ */
+export function assistantMessageRunId(message: unknown): string | undefined {
+  const metadata = (message as { metadata?: unknown })?.metadata as
+    | { custom?: { runId?: unknown }; runId?: unknown }
+    | undefined;
+  return typeof metadata?.custom?.runId === "string"
+    ? metadata.custom.runId
+    : typeof metadata?.runId === "string"
+      ? metadata.runId
+      : undefined;
+}
+
 // ─── MessageBranchPicker ──────────────────────────────────────────────────────
 
 export function MessageBranchPicker() {
@@ -557,20 +600,12 @@ export function MessageActionsMenu({
 
   const handleCopyRequestId = useCallback(() => {
     const m = messageRuntime.getState();
-    const meta = m.metadata as
-      | {
-          custom?: { runId?: unknown };
-          runId?: unknown;
-        }
-      | undefined;
-    // Live yields put the trace ID at metadata.custom.runId; server-persisted
-    // messages put it at metadata.runId. If neither is present (e.g. the run
-    // is still in flight and this is the first message), fall back to the
-    // active-run state so a hung / mid-stream chat still surfaces a usable
-    // trace ID. Last resort is the assistant-ui local message id.
+    // If the message carries no run id (e.g. the run is still in flight and
+    // this is the first message), fall back to the active-run state so a hung /
+    // mid-stream chat still surfaces a usable trace ID. Last resort is the
+    // assistant-ui local message id.
     const runId =
-      (typeof meta?.custom?.runId === "string" && meta.custom.runId) ||
-      (typeof meta?.runId === "string" && meta.runId) ||
+      assistantMessageRunId(m) ||
       (typeof window !== "undefined" ? getActiveRun()?.runId : null) ||
       m.id ||
       "";
@@ -1013,6 +1048,27 @@ export function shouldShowMissingFinalResponse({
   );
 }
 
+/**
+ * "The agent stopped" is derived from local client state, which dips to
+ * not-running at every chunk boundary and transport re-attach while the turn is
+ * still alive server-side. Requiring the shape to hold for a beat keeps the
+ * notice off the screen for those gaps without hiding a real stop for long.
+ */
+const MISSING_FINAL_RESPONSE_SETTLE_MS = 3_000;
+
+export function useSettledFlag(active: boolean, delayMs: number): boolean {
+  const [settled, setSettled] = useState(false);
+  useEffect(() => {
+    if (!active || delayMs <= 0) {
+      setSettled(false);
+      return;
+    }
+    const timer = window.setTimeout(() => setSettled(true), delayMs);
+    return () => window.clearTimeout(timer);
+  }, [active, delayMs]);
+  return active && (delayMs <= 0 || settled);
+}
+
 export function shouldShowAssistantWorkSummary({
   isLast,
   isComplete,
@@ -1201,8 +1257,9 @@ function isAssistantToolSummaryPart(
 
 export function AssistantMessage() {
   const [restoreState, setRestoreState] = useState<
-    "idle" | "confirming" | "restoring"
+    "idle" | "confirming" | "restoring" | "error"
   >("idle");
+  const [restoreError, setRestoreError] = useState<string | null>(null);
   const messageRuntime = useMessageRuntime();
   const thread = useThread();
   const chatRunning = React.useContext(ChatRunningContext);
@@ -1221,13 +1278,16 @@ export function AssistantMessage() {
     msg.content,
   );
   const hasCustomUi = assistantMessageHasCustomUi(msg.content);
-  const showMissingFinalResponse = shouldShowMissingFinalResponse({
-    isCurrentTurnRunning: isLast && chatRunning,
-    statusIsTerminal,
-    hasAssistantText: responseConnectionText.trim().length > 0,
-    hasUnresolvedTool,
-    hasCompletedCustomUi,
-  });
+  const showMissingFinalResponse = useSettledFlag(
+    shouldShowMissingFinalResponse({
+      isCurrentTurnRunning: isLast && chatRunning,
+      statusIsTerminal,
+      hasAssistantText: responseConnectionText.trim().length > 0,
+      hasUnresolvedTool,
+      hasCompletedCustomUi,
+    }),
+    isLast ? MISSING_FINAL_RESPONSE_SETTLE_MS : 0,
+  );
   const responseConnectionContext = userMessageTextBeforeAssistant(
     thread.messages,
     msg.id,
@@ -1275,60 +1335,60 @@ export function AssistantMessage() {
     wasRunningRef.current = chatRunning && isLast;
   }, [chatRunning, isComplete, isLast]);
 
+  const messageRunId = assistantMessageRunId(msg);
+
   const handleRestore = useCallback(async () => {
-    if (restoreState === "idle") {
+    if (restoreState === "idle" || restoreState === "error") {
+      setRestoreError(null);
       setRestoreState("confirming");
       return;
     }
     if (restoreState !== "confirming" || !cpCtx) return;
+    if (!messageRunId) {
+      setRestoreError("This message has no run to restore to.");
+      setRestoreState("error");
+      return;
+    }
     setRestoreState("restoring");
     try {
-      const m = messageRuntime.getState();
-      const meta = m.metadata as
-        | { custom?: { runId?: unknown }; runId?: unknown }
-        | undefined;
-      const runId =
-        (typeof meta?.custom?.runId === "string" && meta.custom.runId) ||
-        (typeof meta?.runId === "string" && meta.runId) ||
-        null;
-      if (!runId) {
-        setRestoreState("idle");
-        return;
-      }
-      const tid = cpCtx.threadId || "";
-      const res = await fetch(
-        `${cpCtx.apiUrl}/checkpoints?threadId=${encodeURIComponent(tid)}`,
-      );
-      const checkpoints: unknown[] = res.ok ? await res.json() : [];
-      const checkpoint = checkpoints.find(
-        (cp) => (cp as { runId?: string }).runId === runId,
-      );
-      if (!checkpoint) {
-        setRestoreState("idle");
-        return;
-      }
       const restoreRes = await fetch(`${cpCtx.apiUrl}/checkpoints/restore`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          checkpointId: (checkpoint as { id?: string }).id,
-        }),
+        body: JSON.stringify({ runId: messageRunId }),
       });
       if (restoreRes.ok) {
         window.location.reload();
-      } else {
-        setRestoreState("idle");
+        return;
       }
-    } catch {
-      setRestoreState("idle");
+      const payload = (await restoreRes.json().catch(() => null)) as {
+        error?: unknown;
+      } | null;
+      setRestoreError(
+        typeof payload?.error === "string"
+          ? payload.error
+          : `Restore failed (${restoreRes.status}).`,
+      );
+      setRestoreState("error");
+    } catch (err) {
+      setRestoreError(
+        err instanceof Error ? err.message : "Restore request failed.",
+      );
+      setRestoreState("error");
     }
-  }, [restoreState, cpCtx, messageRuntime]);
+  }, [restoreState, cpCtx, messageRunId]);
 
   const cancelRestore = useCallback(() => {
+    setRestoreError(null);
     setRestoreState("idle");
   }, []);
 
-  const showRestore = cpCtx?.devMode && isComplete && !isLast;
+  const showRestore = shouldOfferRestore({
+    devMode: cpCtx?.devMode,
+    isComplete,
+    isLast,
+    runId: messageRunId,
+    checkpointRunIds: cpCtx?.checkpointRunIds,
+  });
 
   // Collect parts for the files-changed summary (code-agent turns only).
   const msgContent = msg.content as ContentPart[] | undefined;
@@ -1497,20 +1557,21 @@ export function AssistantMessage() {
               <IconLoader2 className="h-3 w-3 animate-spin" />
               Restoring...
             </span>
+          ) : restoreState === "error" ? (
+            <span className="flex items-center gap-1 text-xs text-destructive">
+              <IconAlertTriangle className="h-3 w-3 shrink-0" />
+              <span className="truncate">{restoreError}</span>
+              <button
+                onClick={cancelRestore}
+                className="cursor-pointer rounded-md px-1.5 py-0.5 text-muted-foreground hover:bg-accent"
+              >
+                Dismiss
+              </button>
+            </span>
           ) : (
             <ThumbsFeedback
               threadId={cpCtx?.threadId ?? ""}
-              runId={(() => {
-                const meta = messageRuntime.getState().metadata as
-                  | { custom?: { runId?: unknown }; runId?: unknown }
-                  | undefined;
-                return (
-                  (typeof meta?.custom?.runId === "string" &&
-                    meta.custom.runId) ||
-                  (typeof meta?.runId === "string" && meta.runId) ||
-                  ""
-                );
-              })()}
+              runId={messageRunId ?? ""}
               messageSeq={thread.messages.findIndex((m) => m.id === msg.id)}
             />
           )}

package/src/client/chat/tool-call-display.tsx

@@ -930,13 +930,22 @@ function AgentCallCell({
 }) {
   const t = useT();
   const [open, setOpen] = useState(true);
-  const finalText = isRunning
-    ? activity?.responseText || responseText
-    : responseText || activity?.responseText;
-  const work = activity?.reasoning?.length || activity?.toolCalls?.length;
+  const toolCount = activity?.toolCalls?.length ?? 0;
+  // Response segments are ordered against the tool calls that preceded them, so
+  // they render in the timeline where the remote agent actually said them.
+  // Once the authoritative result text arrives, its segment moves to the
+  // bottom block instead of being rendered twice.
+  const segments = activity?.response ?? [];
+  const inlineSegments =
+    responseText && !isRunning ? segments.slice(0, toolCount) : segments;
+  const finalText =
+    responseText || (inlineSegments.length ? "" : activity?.responseText);
+  const work =
+    activity?.reasoning?.length || toolCount || inlineSegments.length;
   const workItemCount = Math.max(
     activity?.reasoning?.length ?? 0,
-    activity?.toolCalls?.length ?? 0,
+    toolCount,
+    inlineSegments.length,
   );
   const label = isRunning
     ? t("agentPanel.delegatedAgent.asking", { name: agentName })
@@ -947,6 +956,7 @@ function AgentCallCell({
     <div className="space-y-1 ps-5">
       {Array.from({ length: workItemCount }, (_, index) => {
         const reasoningText = activity?.reasoning?.[index];
+        const segment = inlineSegments[index];
         const tool = activity?.toolCalls?.[index];
         return (
           <React.Fragment key={`activity-${index}`}>
@@ -962,6 +972,20 @@ function AgentCallCell({
                 collapseWhenReplaced={index < activity.toolCalls.length}
               />
             )}
+            {segment && (
+              <div className="pb-1">
+                <SmoothMarkdownText
+                  text={segment}
+                  streaming={
+                    isRunning &&
+                    activity?.activePhase === "responding" &&
+                    index === inlineSegments.length - 1
+                  }
+                  resetKey={`agent-response-${agentName}-${index}`}
+                  statusType={isRunning ? "running" : "complete"}
+                />
+              </div>
+            )}
             {tool && (
               <AgentActivityToolCallRow
                 tool={tool}

package/src/client/error-format.ts

@@ -123,6 +123,24 @@ export function normalizeChatError(
   const looksHtml = /<html[\s>]|<body[\s>]|<head[\s>]/i.test(raw);
   const text = looksHtml ? htmlToText(raw) : raw.trim();
 
+  const code = normalizeErrorCode(errorCode);
+
+  if (code === "builder_model_unauthorized") {
+    return {
+      message:
+        "The provider behind this model rejected the request. Pick a different model, then retry.",
+      details: text,
+    };
+  }
+
+  if (code === "builder_auth_error") {
+    return {
+      message:
+        "Builder rejected the connected credentials. Reconnect Builder.io in Settings, then retry.",
+      details: text,
+    };
+  }
+
   if (isProviderRateLimit(text, errorCode)) {
     return {
       message:

package/src/client/org/OrgSwitcher.tsx

@@ -64,6 +64,13 @@ export interface OrgSwitcherProps {
   hideWhenSingle?: boolean;
   /** Keep the switcher's button height reserved while org state is loading. */
   reserveSpace?: boolean;
+  /**
+   * Icon-only trigger for collapsed sidebar rails. The popover — and with it
+   * the org list, pending invitations and "Join your team" — is identical;
+   * dropping the switcher instead leaves a collapsed rail with no way to
+   * reach another workspace.
+   */
+  compact?: boolean;
   /**
    * Path to navigate to when the user clicks "Organization settings".
    * Defaults to the Organization tab inside Settings. Templates with an
@@ -104,6 +111,9 @@ const APP_SUBMENU_CONTENT_CLASS =
 const SWITCHER_BUTTON_CLASS =
   "flex w-full items-center gap-2 rounded-md border-0 bg-accent/50 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent/70 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60 cursor-pointer";
 
+const COMPACT_SWITCHER_BUTTON_CLASS =
+  "flex items-center justify-center rounded-md border-0 bg-accent/50 p-1.5 text-muted-foreground hover:bg-accent/70 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60 cursor-pointer";
+
 const DEFAULT_ORGANIZATION_SETTINGS_PATH = "/settings#organization";
 const DEFAULT_PROFILE_PATH = "/settings#account";
 
@@ -295,6 +305,7 @@ export function OrgSwitcher({
   className,
   hideWhenSingle,
   reserveSpace,
+  compact,
   settingsPath = DEFAULT_ORGANIZATION_SETTINGS_PATH,
   profilePath = DEFAULT_PROFILE_PATH,
 }: OrgSwitcherProps) {
@@ -380,14 +391,25 @@ export function OrgSwitcher({
   return (
     <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>
       <PopoverPrimitive.Trigger asChild>
-        <button
-          type="button"
-          className={`${SWITCHER_BUTTON_CLASS} ${className ?? ""}`}
-        >
-          <ButtonIcon className="h-3.5 w-3.5 shrink-0" />
-          <span className="truncate flex-1 text-start">{buttonLabel}</span>
-          <IconSelector className="h-3 w-3 shrink-0 opacity-50" />
-        </button>
+        {compact ? (
+          <button
+            type="button"
+            title={buttonLabel}
+            aria-label={buttonLabel}
+            className={`${COMPACT_SWITCHER_BUTTON_CLASS} ${className ?? ""}`}
+          >
+            <ButtonIcon className="h-3.5 w-3.5 shrink-0" />
+          </button>
+        ) : (
+          <button
+            type="button"
+            className={`${SWITCHER_BUTTON_CLASS} ${className ?? ""}`}
+          >
+            <ButtonIcon className="h-3.5 w-3.5 shrink-0" />
+            <span className="truncate flex-1 text-start">{buttonLabel}</span>
+            <IconSelector className="h-3 w-3 shrink-0 opacity-50" />
+          </button>
+        )}
       </PopoverPrimitive.Trigger>
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content

package/src/client/org/TeamPage.tsx

@@ -1513,13 +1513,14 @@ export function TeamPage({
       {!isLoading && (
         <>
           <PendingInvitationsCard />
+          {/* Sitting in a personal workspace still counts as having an org, so
+              gating this on `!org?.orgId` hid the only in-page way to reach the
+              company workspace from the people who most needed it. */}
+          {org?.domainMatches && org.domainMatches.length > 0 && (
+            <JoinByDomainCard matches={org.domainMatches} />
+          )}
           {!org?.orgId ? (
-            <>
-              {org?.domainMatches && org.domainMatches.length > 0 && (
-                <JoinByDomainCard matches={org.domainMatches} />
-              )}
-              <CreateOrgCard description={createOrgDescription} />
-            </>
+            <CreateOrgCard description={createOrgDescription} />
           ) : (
             <MembersCard />
           )}