@agent-native/toolkit 0.221.0-same-host-mcp-20261027-20261027081850 → 0.221.0

package/src/app/settings/account/PreferencesSettings.tsx

@@ -1,6 +1,10 @@
+import { injectedAgentNativeConfig } from "@agent-native/core/client/app-config";
 import { useOptionalLocale, useT } from "@agent-native/core/client/i18n";
+import { useSession } from "@agent-native/core/client/use-session";
+import { useEffect, useState } from "react";
 
 import { LanguagePicker } from "../../shared/index.js";
+import { canShowThemeFamilySwitcher } from "../../shared/is-builder-io-employee.js";
 import { SchedulingTimezoneField } from "../SchedulingTimezoneField.js";
 import { SettingsGroup, SettingsRow } from "../SettingsRow.js";
 import { VoiceChatSettings } from "../VoiceChatSettings.js";
@@ -16,7 +20,18 @@ const key = (name: string) => `agentChat.settingsShell.account.${name}`;
 export function PreferencesSettings() {
   const t = useT();
   const hasLocale = useOptionalLocale() !== null;
+  const { session, status } = useSession();
+  const [clientReady, setClientReady] = useState(false);
   const languageLabel = t("agentChat.settingsShell.interfaceLanguage");
+  const canSwitchTheme = canShowThemeFamilySwitcher({
+    clientReady,
+    authenticated: status === "authenticated",
+    email: session?.email,
+    familyCount: injectedAgentNativeConfig().themeFamily?.families.length ?? 1,
+  });
+
+  useEffect(() => setClientReady(true), []);
+
   return (
     <div className="flex flex-col gap-8">
       <SettingsGroup id="language-region" title={t(key("languageAndRegion"))}>
@@ -39,13 +54,15 @@ export function PreferencesSettings() {
           control={<SchedulingTimezoneField compact />}
         />
       </SettingsGroup>
-      <SettingsGroup id="appearance" title={t(key("appearance"))}>
-        <SettingsRow
-          id="theme-family"
-          label={t(key("themeFamily"))}
-          control={<ThemeFamilySettings />}
-        />
-      </SettingsGroup>
+      {canSwitchTheme ? (
+        <SettingsGroup id="appearance" title={t(key("appearance"))}>
+          <SettingsRow
+            id="theme-family"
+            label={t(key("themeFamily"))}
+            control={<ThemeFamilySettings />}
+          />
+        </SettingsGroup>
+      ) : null}
       <SettingsGroup id="voice-input" title={t(key("voiceInput"))}>
         <VoiceTranscriptionSection compact />
       </SettingsGroup>

package/src/app/settings/account/ThemeFamilySettings.tsx

@@ -13,7 +13,7 @@ const key = (name: string) => `agentChat.settingsShell.account.${name}`;
 
 export function ThemeFamilySettings() {
   const t = useT();
-  const { family, status, setFamily } = useThemeFamily();
+  const { family, status, isForcedByUrl, setFamily } = useThemeFamily();
   const [saving, setSaving] = useState(false);
   const [saveFailed, setSaveFailed] = useState(false);
 
@@ -37,7 +37,7 @@ export function ThemeFamilySettings() {
       <Select
         value={family}
         onValueChange={(value) => void changeFamily(value)}
-        disabled={saving || status === "loading"}
+        disabled={saving || status === "loading" || isForcedByUrl}
       >
         <SelectTrigger aria-label={t(key("themeFamily"))}>
           <SelectValue />

package/src/app/settings/account/search-entries.spec.ts

@@ -7,6 +7,7 @@ import {
   PREFERENCES_SEARCH_ENTRIES,
   PROFILE_SEARCH_ENTRIES,
   SECURITY_SEARCH_ENTRIES,
+  visiblePreferenceSearchEntries,
 } from "./search-entries.js";
 
 const ALL = [
@@ -44,4 +45,17 @@ describe("account page search entries", () => {
     const sections = getCoreSettingsSearchEntries().get("preferences") ?? [];
     expect(sections.map((entry) => entry.id)).not.toContain("section:voice");
   });
+
+  it("does not index the theme-family row while the switch is hidden", () => {
+    expect(
+      visiblePreferenceSearchEntries(PREFERENCES_SEARCH_ENTRIES, false).map(
+        (entry) => entry.id,
+      ),
+    ).not.toContain("theme-family");
+    expect(
+      visiblePreferenceSearchEntries(PREFERENCES_SEARCH_ENTRIES, true).map(
+        (entry) => entry.id,
+      ),
+    ).toContain("theme-family");
+  });
 });

package/src/app/settings/account/search-entries.ts

@@ -87,3 +87,12 @@ export const SECURITY_SEARCH_ENTRIES: readonly SettingsPageSearchEntry[] = [
     anchor: "data-deletion",
   },
 ];
+
+export function visiblePreferenceSearchEntries(
+  entries: readonly SettingsPageSearchEntry[],
+  canShowThemeFamily: boolean,
+): readonly SettingsPageSearchEntry[] {
+  return canShowThemeFamily
+    ? entries
+    : entries.filter((entry) => entry.id !== "theme-family");
+}

package/src/app/settings/shell/SettingsShell.tsx

@@ -1,4 +1,5 @@
 import { appMountedPath } from "@agent-native/core/client/api-path";
+import { injectedAgentNativeConfig } from "@agent-native/core/client/app-config";
 import {
   deleteClientAppState,
   writeClientAppState,
@@ -12,6 +13,7 @@ import { useFeatureFlags } from "@agent-native/core/client/feature-flags/use-fea
 import { useT } from "@agent-native/core/client/i18n";
 import { useLabStates } from "@agent-native/core/client/labs/use-lab";
 import { useOrg } from "@agent-native/core/client/org";
+import { useSession } from "@agent-native/core/client/use-session";
 import { STANDARD_APP_ROUTES } from "@agent-native/core/navigation";
 import {
   SETTINGS_VIEW_STATE_KEY,
@@ -50,6 +52,8 @@ import {
 } from "react";
 import { useInRouterContext, useLocation, useNavigate } from "react-router";
 
+import { canShowThemeFamilySwitcher } from "../../shared/is-builder-io-employee.js";
+import { visiblePreferenceSearchEntries } from "../account/search-entries.js";
 import { getCoreSettingsSearchEntries } from "../agent-settings-search.js";
 import { SettingsSkeleton } from "../SettingsSkeleton.js";
 import {
@@ -395,6 +399,15 @@ function SettingsShellContent({
   ...bridgeInput
 }: ShellContentProps) {
   const t = useT();
+  const { session, status: sessionStatus } = useSession();
+  const [themeFamilyClientReady, setThemeFamilyClientReady] = useState(false);
+  useEffect(() => setThemeFamilyClientReady(true), []);
+  const canShowThemeFamily = canShowThemeFamilySwitcher({
+    clientReady: themeFamilyClientReady,
+    authenticated: sessionStatus === "authenticated",
+    email: session?.email,
+    familyCount: injectedAgentNativeConfig().themeFamily?.families.length ?? 1,
+  });
   const { location, go } = navigator;
 
   const { data: org } = useOrg();
@@ -785,14 +798,28 @@ function SettingsShellContent({
         label: pageLabel(page),
         groupLabel: groupLabel(page.group),
         entries: [
-          ...(page.searchEntries ?? []),
+          ...(page.id === "preferences"
+            ? visiblePreferenceSearchEntries(
+                page.searchEntries ?? [],
+                canShowThemeFamily,
+              )
+            : (page.searchEntries ?? [])),
           ...(coreEntries.get(page.id) ?? []),
           ...(bridgedEntries.get(page.id) ?? []),
         ],
       })),
       t,
     );
-  }, [bridge, groupLabel, pageIcon, pageLabel, pages, t, visiblePages]);
+  }, [
+    bridge,
+    canShowThemeFamily,
+    groupLabel,
+    pageIcon,
+    pageLabel,
+    pages,
+    t,
+    visiblePages,
+  ]);
 
   const shellContext = useMemo<SettingsShellContextValue>(
     () => ({ route: { page: routePage, sub: routeSub }, navigate, setHeader }),

package/src/app/shared/AppShellSkeleton.spec.tsx

@@ -29,10 +29,10 @@ describe("AppShellSkeleton home layout", () => {
       "[data-agent-native-app-skeleton-home-hero]",
     );
     expect(hero?.style.justifyContent).toBe("center");
-    // Mark, title, two lead lines, composer and hint.
+    // Mark, title and composer.
     expect(
       hero?.querySelectorAll("[data-agent-native-skeleton-block]"),
-    ).toHaveLength(6);
+    ).toHaveLength(3);
 
     const footer = shell.querySelector<HTMLElement>(
       "[data-agent-native-app-skeleton-home-footer]",

package/src/app/shared/AppShellSkeleton.tsx

@@ -970,8 +970,8 @@ function LaunchpadLayout() {
 }
 
 /**
- * A starter home page: the centered hero (mark, title, lead, large composer,
- * hint) over a two-column resource footer, with no header row.
+ * A starter home page: the centered hero (mark, title, large composer) over a
+ * two-column resource footer, with no header row.
  */
 function HomeLayout() {
   return (
@@ -1000,19 +1000,7 @@ function HomeLayout() {
           }}
         >
           <Block style={{ width: 56, height: 32 }} />
-          <div
-            style={{
-              display: "flex",
-              width: "100%",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 12,
-            }}
-          >
-            <Block style={{ width: "min(100%, 280px)", height: 44 }} />
-            <Block style={{ width: "min(100%, 400px)", height: 16 }} />
-            <Block style={{ width: "min(100%, 320px)", height: 16 }} />
-          </div>
+          <Block style={{ width: "min(100%, 280px)", height: 44 }} />
           <Block
             style={{
               width: "100%",
@@ -1022,7 +1010,6 @@ function HomeLayout() {
               borderRadius: 28,
             }}
           />
-          <Block style={{ width: "min(100%, 360px)", height: 14 }} />
         </section>
         <div
           data-agent-native-app-skeleton-home-footer="true"

package/src/app/shared/EnvironmentBadge.tsx

@@ -35,6 +35,9 @@ import { cn } from "@agent-native/toolkit/utils";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { FeedbackButton } from "../feedback/FeedbackButton.js";
+import { isBuilderIoEmployee } from "./is-builder-io-employee.js";
+
+export { isBuilderIoEmployee };
 
 export {
   BETA_FORCE_QUERY_PARAM,
@@ -51,10 +54,6 @@ export {
   type EnvironmentBadgeTargets,
 } from "@agent-native/core/shared/environment-lanes";
 
-export function isBuilderIoEmployee(email: string | null | undefined): boolean {
-  return email?.trim().toLowerCase().endsWith("@builder.io") ?? false;
-}
-
 export function isAgentNativeDesktopUserAgent(
   userAgent: string | undefined,
 ): boolean {

package/src/app/shared/is-builder-io-employee.ts

@@ -0,0 +1,17 @@
+export function isBuilderIoEmployee(email: string | null | undefined): boolean {
+  return email?.trim().toLowerCase().endsWith("@builder.io") ?? false;
+}
+
+export function canShowThemeFamilySwitcher(input: {
+  clientReady: boolean;
+  authenticated: boolean;
+  email: string | null | undefined;
+  familyCount: number;
+}): boolean {
+  return (
+    input.clientReady &&
+    input.authenticated &&
+    input.familyCount > 1 &&
+    isBuilderIoEmployee(input.email)
+  );
+}

package/src/app/styles/agent-conversation.css

@@ -539,22 +539,29 @@
   line-height: 1.5;
 }
 
+/* Inside an AgentKit transcript, markdown follows its line height. The
+   default lives in this fallback, not a declaration on the chat root, so a
+   host can still set the variable on any ancestor. */
+:is(.agentkit-chat, .agentkit-tokens) .agent-markdown {
+  line-height: var(--agentkit-transcript-message-line-height, 1.25rem);
+}
+
 .agent-markdown > :last-child {
   margin-bottom: 0;
 }
 
 .agent-markdown p {
-  margin: 0.4em 0;
+  margin: 0.25rem 0;
 }
 
 .agent-markdown ul,
 .agent-markdown ol {
-  margin: 0.4em 0;
-  padding-inline-start: 1.5em;
+  margin: 0.25rem 0;
+  padding-inline-start: 1.25rem;
 }
 
 .agent-markdown li {
-  margin: 0.15em 0;
+  margin: 0.25rem 0;
 }
 
 .agent-markdown li > p {
@@ -564,19 +571,19 @@
 .agent-markdown h1 {
   font-size: 1.25em;
   font-weight: 600;
-  margin: 0.75em 0 0.25em;
+  margin: 0.75rem 0 0.25rem;
 }
 
 .agent-markdown h2 {
   font-size: 1.125em;
   font-weight: 600;
-  margin: 0.75em 0 0.25em;
+  margin: 0.75rem 0 0.25rem;
 }
 
 .agent-markdown h3 {
   font-size: 1em;
   font-weight: 600;
-  margin: 0.75em 0 0.25em;
+  margin: 0.75rem 0 0.25rem;
 }
 
 .agent-markdown strong {
@@ -589,7 +596,7 @@
 
 .agent-markdown code {
   font-size: 0.875em;
-  padding: 0.15em 0.35em;
+  padding: 0.125rem 0.25rem;
   border-radius: 0.25em;
   background: hsl(var(--muted, 0 0% 15%));
   color: hsl(var(--foreground, 0 0% 90%));
@@ -597,8 +604,8 @@
 }
 
 .agent-markdown pre {
-  margin: 0.5em 0;
-  padding: 0.75em 1em;
+  margin: 0.5rem 0;
+  padding: 0.75rem 1rem;
   border-radius: 0.375em;
   background: hsl(var(--muted, 0 0% 15%));
   color: hsl(var(--foreground, 0 0% 90%));
@@ -606,6 +613,12 @@
   border: 1px solid hsl(var(--border, 0 0% 80%));
 }
 
+/* A code span's own line, on a different font's baseline, would stretch its
+   line past the transcript's line height. */
+.agent-markdown :not(pre) > code {
+  line-height: 1;
+}
+
 .agent-markdown pre code {
   padding: 0;
   background: transparent;
@@ -617,7 +630,7 @@
 .agent-markdown hr {
   border: none;
   border-top: 1px solid hsl(var(--border, 0 0% 20%));
-  margin: 0.75em 0 1em;
+  margin: 0.75rem 0 1rem;
 }
 
 .agent-markdown a {
@@ -631,14 +644,14 @@
 
 .agent-markdown blockquote {
   border-inline-start: 2px solid hsl(var(--border, 0 0% 20%));
-  padding-inline-start: 0.75em;
-  margin: 0.5em 0;
+  padding-inline-start: 0.75rem;
+  margin: 0.5rem 0;
   opacity: 0.8;
 }
 
 .agent-markdown table {
   border-collapse: collapse;
-  margin: 0.5em 0;
+  margin: 0.5rem 0;
   font-size: 0.875em;
 }
 
@@ -669,7 +682,7 @@
 .agent-markdown th,
 .agent-markdown td {
   border: 1px solid hsl(var(--border, 0 0% 20%));
-  padding: 0.35em 0.65em;
+  padding: 0.25rem 0.5rem;
   text-align: start;
 }
 
@@ -680,7 +693,7 @@
 }
 
 .agent-markdown-shiki {
-  margin: 0.5em 0;
+  margin: 0.25rem 0;
   border-radius: 0.375em;
   overflow: hidden;
   font-size: 0.8125em;
@@ -688,7 +701,7 @@
 
 .agent-markdown-shiki pre {
   margin: 0;
-  padding: 0.75em 1em;
+  padding: 0.5rem 0.75rem;
   overflow-x: auto;
   background: var(--shiki-light-bg);
   color: var(--shiki-light);

package/src/app/styles/theme-families.css

@@ -1,7 +1,18 @@
-/*
- * The agent-native family uses the shared Tailwind/shadcn palette from the
- * Design template. App styles remain the original family by default.
- */
+/* Family changes stay token-only so every app keeps the same markup. */
+:root[data-theme-family="agent-native"],
+:root[data-theme-family="agent-native"][data-appearance],
+.dark[data-theme-family="agent-native"],
+.dark[data-theme-family="agent-native"][data-appearance] {
+  --font-sans: "Inter Variable", "Inter", sans-serif;
+  --font-wordmark: "Geist Variable", "Geist", sans-serif;
+  --radius: 0.75rem;
+  --radius-xl: 0.75rem;
+  --agent-native-shadow-color: 0 0% 10%;
+  --shadow-composer: 0 8px 15px hsl(var(--agent-native-shadow-color) / 0.06);
+  --agent-kit-composer-radius: 0.75rem;
+  --agent-kit-composer-elevation: var(--shadow-composer);
+}
+
 :root[data-theme-family="agent-native"],
 :root[data-theme-family="agent-native"][data-appearance] {
   --background: 0 0% 100%;
@@ -23,7 +34,7 @@
   --border: 0 0% 90%;
   --input: 0 0% 90%;
   --ring: 0 0% 40%;
-  --radius: 0.5rem;
+  --radius: 0.75rem;
   --sidebar-background: 0 0% 97%;
   --sidebar-foreground: 0 0% 45%;
   --sidebar-primary: 0 0% 15%;
@@ -64,3 +75,9 @@
   --sidebar-border: 0 0% 20%;
   --sidebar-ring: 0 0% 60%;
 }
+
+.dark[data-theme-family="agent-native"],
+.dark[data-theme-family="agent-native"][data-appearance] {
+  --shadow-composer: 0 8px 30px hsl(var(--background) / 0.22);
+  --agent-kit-composer-elevation: var(--shadow-composer);
+}

package/src/app/styles/theme-families.spec.ts

@@ -6,6 +6,10 @@ const css = readFileSync(
   new URL("./theme-families.css", import.meta.url),
   "utf8",
 );
+const sharedCss = readFileSync(
+  new URL("./agent-native.css", import.meta.url),
+  "utf8",
+);
 
 describe("theme families", () => {
   it("provides a shared palette for the resolved light and dark modes", () => {
@@ -16,6 +20,10 @@ describe("theme families", () => {
     expect(css).not.toContain("prefers-color-scheme");
   });
 
+  it("leaves Original apps without family-specific variable overrides", () => {
+    expect(css).not.toContain('data-theme-family="original"');
+  });
+
   it("keeps the selected family palette ahead of appearance presets", () => {
     expect(css).toContain(
       ':root[data-theme-family="agent-native"][data-appearance]',
@@ -26,4 +34,69 @@ describe("theme families", () => {
     expect(css).toContain("--background: 0 0% 100%");
     expect(css).toContain("--background: 0 0% 13%");
   });
+
+  it("loads the selected family font and shared radius and composer tokens", () => {
+    expect(css).toContain('--font-sans: "Inter Variable", "Inter", sans-serif');
+    expect(css).toContain(
+      '--font-wordmark: "Geist Variable", "Geist", sans-serif',
+    );
+    expect(css).toContain("--radius: 0.75rem");
+    expect(css).toContain("--radius-xl: 0.75rem");
+    expect(sharedCss).toContain("--radius-lg: var(--radius)");
+    expect(sharedCss).toContain("--radius-md: calc(var(--radius) - 2px)");
+    expect(sharedCss).toContain("--radius-sm: calc(var(--radius) - 4px)");
+    expect(css).toContain("--agent-kit-composer-radius: 0.75rem");
+    expect(css).toContain(
+      "--agent-kit-composer-elevation: var(--shadow-composer)",
+    );
+    expect(css).toContain("--agent-native-shadow-color: 0 0% 10%");
+    expect(css).toContain(
+      "0 8px 15px hsl(var(--agent-native-shadow-color) / 0.06)",
+    );
+  });
+
+  it("keeps the light family palette radius at twelve pixels", () => {
+    const blocks = [
+      ...css.matchAll(
+        /([^{}]*data-theme-family="agent-native"[^{}]*)\{([^{}]*)\}/g,
+      ),
+    ];
+    const lightPalette = blocks.find(
+      ([, selectors, declarations]) =>
+        selectors.includes(":root[data-theme-family=") &&
+        declarations.includes("--background:"),
+    );
+
+    expect(lightPalette?.[2]).toMatch(/--radius:\s*0\.75rem/);
+  });
+
+  it("uses the code dark-palette composer elevation in dark mode", () => {
+    expect(css).toContain(
+      '.dark[data-theme-family="agent-native"][data-appearance]',
+    );
+    expect(css).toContain(
+      "--shadow-composer: 0 8px 30px hsl(var(--background) / 0.22)",
+    );
+  });
+
+  it("limits each family block to custom properties", () => {
+    const blocks = [
+      ...css.matchAll(
+        /([^{}]*data-theme-family="agent-native"[^{}]*)\{([^{}]*)\}/g,
+      ),
+    ];
+
+    expect(blocks.length).toBeGreaterThan(0);
+    for (const [, selectors, declarations] of blocks) {
+      expect(selectors).toContain("data-theme-family=");
+      const entries = declarations
+        .split(";")
+        .map((entry) => entry.trim())
+        .filter(Boolean);
+      expect(entries.length).toBeGreaterThan(0);
+      for (const entry of entries) {
+        expect(entry).toMatch(/^--[\w-]+\s*:/);
+      }
+    }
+  });
 });

package/src/app/styles/tokens/agent-kit.css

@@ -58,8 +58,8 @@
     hsl(var(--border))
   );
   --agent-kit-composer-editor-padding-inline: 1rem;
-  --agent-kit-composer-editor-padding-block-start: 0.875rem;
-  --agent-kit-composer-editor-padding-block-end: 0.125rem;
+  --agent-kit-composer-editor-padding-block-start: 0.75rem;
+  --agent-kit-composer-editor-padding-block-end: 0.25rem;
   --agent-kit-composer-editor-min-height: 1lh;
   --agent-kit-composer-editor-max-height: 12rem;
   --agent-kit-composer-font-size: 0.875rem;
@@ -71,7 +71,7 @@
   --agent-kit-composer-toolbar-padding-block-end: 0.5rem;
   --agent-kit-composer-toolbar-control-size: 1.5rem;
   --agent-kit-composer-toolbar-control-gap: 0.25rem;
-  --agent-kit-composer-toolbar-control-padding-inline: 0.375rem;
+  --agent-kit-composer-toolbar-control-padding-inline: 0.5rem;
   --agent-kit-composer-toolbar-control-font-size: var(
     --agent-kit-supporting-font-size
   );

package/src/composer/AgentSuggestionBar.overflow.spec.tsx

@@ -271,7 +271,7 @@ describe("AgentSuggestionBar overflow", () => {
       /\[data-agent-suggestion-scroller="true"\]\[data-overflow-end\] \{\n\s+--agent-suggestion-fade-end: 1\.5rem;/,
     );
     expect(styles).toMatch(
-      /\.agentkit-suggestions \{\n\s+--agent-suggestion-gap: 0\.375rem;/,
+      /\.agentkit-suggestions \{\n\s+--agent-suggestion-gap: 0\.5rem;/,
     );
   });
 });

package/src/composer/AttachmentChip.spec.tsx

@@ -0,0 +1,87 @@
+// @vitest-environment happy-dom
+
+import type { Attachment } from "@assistant-ui/react";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { AGENT_PROMPT_MAX_TEXT_FILE_BYTES } from "./prompt-attachments.js";
+import { AttachmentChip } from "./PromptComposer.js";
+import { ComposerRuntimeAdaptersProvider } from "./runtime-adapters.js";
+
+describe("AttachmentChip", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  async function renderChip(file: File) {
+    const attachment = {
+      id: "file-1",
+      type: "file",
+      name: file.name,
+      file,
+      status: { type: "requires-action", reason: "composer-send" },
+    } as unknown as Attachment;
+    await act(async () => {
+      root.render(
+        <ComposerRuntimeAdaptersProvider
+          adapters={{
+            translate: (_key, options) => String(options?.defaultValue ?? ""),
+          }}
+        >
+          <AttachmentChip attachment={attachment} onRemove={() => {}} />
+        </ComposerRuntimeAdaptersProvider>,
+      );
+    });
+  }
+
+  it("shows a file the browser cannot read before it is sent", async () => {
+    const file = new File(["# Design"], "DESIGN.md", { type: "text/markdown" });
+    vi.spyOn(file, "arrayBuffer").mockRejectedValue(
+      new Error("NotReadableError"),
+    );
+
+    await renderChip(file);
+
+    await vi.waitFor(() => {
+      expect(container.querySelector('[role="status"]')?.textContent).toContain(
+        "Couldn't read this file",
+      );
+    });
+  });
+
+  it("shows a text file over the read limit", async () => {
+    const file = new File(["<svg/>"], "logo.svg", { type: "image/svg+xml" });
+    Object.defineProperty(file, "size", {
+      value: AGENT_PROMPT_MAX_TEXT_FILE_BYTES + 1,
+    });
+
+    await renderChip(file);
+
+    await vi.waitFor(() => {
+      expect(container.textContent).toContain("File is over 8 MB");
+    });
+  });
+
+  it("keeps the plain chip for a readable file", async () => {
+    await renderChip(
+      new File(["# Design"], "DESIGN.md", { type: "text/markdown" }),
+    );
+
+    await act(async () => {});
+    expect(container.textContent).toContain("DESIGN.md");
+    expect(container.querySelector('[role="status"]')).toBeNull();
+  });
+});