diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 940b6da11ea11..3c79bb06fd879 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -3365,7 +3365,7 @@ export const reference = {
         },
         {
           name: 'Management API',
-          url: '/reference/javascript',
+          url: '/reference/api/introduction',
           icon: '/img/icons/menu/reference-api' as `/${string}`,
         },
       ],
diff --git a/apps/docs/content/guides/auth/oauth-server/oauth-flows.mdx b/apps/docs/content/guides/auth/oauth-server/oauth-flows.mdx
index 3820b37c0ce64..855391dca71f5 100644
--- a/apps/docs/content/guides/auth/oauth-server/oauth-flows.mdx
+++ b/apps/docs/content/guides/auth/oauth-server/oauth-flows.mdx
@@ -158,7 +158,7 @@ https://<project-ref>.supabase.co/auth/v1/oauth/authorize?
 | `client_id`             | The client ID from registration              |
 | `redirect_uri`          | Must exactly match a registered redirect URI |
 | `code_challenge`        | The generated code challenge                 |
-| `code_challenge_method` | Must be `S256` (SHA-256)                     |
+| `code_challenge_method` | `S256` (SHA-256, recommended) or `plain`     |
 
 #### Optional parameters
 
diff --git a/apps/docs/content/guides/functions/limits.mdx b/apps/docs/content/guides/functions/limits.mdx
index a7db02f15fca9..6049d907497a0 100644
--- a/apps/docs/content/guides/functions/limits.mdx
+++ b/apps/docs/content/guides/functions/limits.mdx
@@ -20,8 +20,8 @@ subtitle: "Limits applied Edge Functions in Supabase's hosted platform."
 - Maximum Function Size: 20MB (bundled locally via the CLI) or 5MB (bundled server-side, e.g. via the Management API or Dashboard)
 - Maximum no. of Functions per project:
   - Free: 100
-  - Pro: 500
-  - Team: 1000
+  - Pro: 1000
+  - Team: 2000
   - Enterprise: Unlimited
 - Maximum log message length: 10,000 characters
 - Log event threshold: 100 events per 10 seconds
diff --git a/apps/docs/scripts/search/sources/index.ts b/apps/docs/scripts/search/sources/index.ts
index 3682cb505b3ef..d3becfcb67c36 100644
--- a/apps/docs/scripts/search/sources/index.ts
+++ b/apps/docs/scripts/search/sources/index.ts
@@ -51,6 +51,18 @@ export async function fetchJsLibReferenceSource() {
   })
 }
 
+export async function fetchServerLibReferenceSource() {
+  // Server SDK is driven by the new reference pipeline. Ingest search sources
+  // from the generated `content/reference/server/v1/` outputs so embeddings
+  // never drift from what the renderer shows.
+  return loadClientLibReferenceFromNewPipeline({
+    source: 'server-lib',
+    path: '/reference/server',
+    meta: { title: 'Server Reference', language: 'TypeScript' },
+    contentDir: 'content/reference/server/v1',
+  })
+}
+
 export async function fetchDartLibReferenceSource() {
   // Dart v2 is driven by the new reference pipeline. Ingest search sources from
   // the generated `content/reference/dart/v2/` outputs so embeddings never
@@ -132,6 +144,7 @@ export async function fetchAllSources(fullIndex: boolean) {
   const lintWarningsGuideSources = fetchLintWarningsGuideSources()
   const openApiReferenceSource = fetchOpenApiReferenceSource()
   const jsLibReferenceSource = fetchJsLibReferenceSource()
+  const serverLibReferenceSource = fullIndex ? fetchServerLibReferenceSource() : []
   const dartLibReferenceSource = fullIndex ? fetchDartLibReferenceSource() : []
   const pythonLibReferenceSource = fullIndex ? fetchPythonLibReferenceSource() : []
   const cSharpLibReferenceSource = fullIndex ? fetchCSharpLibReferenceSource() : []
@@ -165,6 +178,7 @@ export async function fetchAllSources(fullIndex: boolean) {
       lintWarningsGuideSources,
       openApiReferenceSource,
       jsLibReferenceSource,
+      serverLibReferenceSource,
       dartLibReferenceSource,
       pythonLibReferenceSource,
       cSharpLibReferenceSource,
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/AccessToken.permissions.test.ts b/apps/studio/components/interfaces/Account/AccessTokens/AccessToken.permissions.test.ts
index 4aab626e393c9..b40d3550382af 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/AccessToken.permissions.test.ts
+++ b/apps/studio/components/interfaces/Account/AccessTokens/AccessToken.permissions.test.ts
@@ -1,7 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
 import {
-  computeOverallRisk,
   countConfigured,
   getCatalogEntry,
   scopesToSelection,
@@ -145,37 +144,6 @@ describe('selectionToScopes', () => {
   })
 })
 
-describe('computeOverallRisk', () => {
-  it('is Minimal with no capabilities', () => {
-    expect(computeOverallRisk({}, 'project').level).toBe('Minimal')
-  })
-
-  it('account-level read-only is still Elevated', () => {
-    const risk = computeOverallRisk({ 'project:advisors': 'read' }, 'account')
-    expect(risk.level).toBe('Elevated')
-    expect(risk.tone).toBe('medium')
-  })
-
-  it('account-level with any write is High', () => {
-    const risk = computeOverallRisk({ 'project:realtime_config': 'readwrite' }, 'account')
-    expect(risk.level).toBe('High')
-  })
-
-  it('project high-risk write is High', () => {
-    expect(computeOverallRisk({ 'project:database': 'readwrite' }, 'project').level).toBe('High')
-  })
-
-  it('project medium write is Medium', () => {
-    expect(computeOverallRisk({ 'project:realtime_config': 'readwrite' }, 'project').level).toBe(
-      'Medium'
-    )
-  })
-
-  it('read-only project is Low', () => {
-    expect(computeOverallRisk({ 'project:database': 'read' }, 'project').level).toBe('Low')
-  })
-})
-
 describe('countConfigured', () => {
   it('counts only non-none modes', () => {
     expect(countConfigured({ a: 'read', b: 'none', c: 'readwrite' })).toBe(2)
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/AccessToken.permissions.ts b/apps/studio/components/interfaces/Account/AccessTokens/AccessToken.permissions.ts
index 4b74ad622daf5..405b96e3d61cc 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/AccessToken.permissions.ts
+++ b/apps/studio/components/interfaces/Account/AccessTokens/AccessToken.permissions.ts
@@ -629,72 +629,10 @@ export const PERMISSION_MODE_LABEL: Record<PermissionMode, string> = {
   readwrite: 'Read-write',
 }
 
-export const RISK_DOT_CLASS: Record<RiskLevel, string> = {
-  low: 'bg-brand-600',
-  medium: 'bg-warning-600',
-  high: 'bg-destructive-600',
-}
-
 export type ResourceAccessMode = 'project' | 'organization' | 'account'
 
-export interface OverallRisk {
-  /** Minimal | Low | Medium | Elevated | High */
-  level: string
-  text: string
-  tone: 'default' | 'low' | 'medium' | 'high'
-}
-
-export const RISK_TONE_VARIANT: Record<
-  OverallRisk['tone'],
-  'default' | 'success' | 'warning' | 'destructive'
-> = {
-  default: 'default',
+export const RISK_TONE_VARIANT: Record<RiskLevel, 'success' | 'warning' | 'destructive'> = {
   low: 'success',
   medium: 'warning',
   high: 'destructive',
 }
-
-/**
- * Computes the overall token risk from the selected capabilities and the resource-access breadth.
- * Account-level tokens are never below "Elevated", even when read-only.
- */
-export const computeOverallRisk = (
-  selection: PermissionSelection,
-  resourceAccess: ResourceAccessMode
-): OverallRisk => {
-  const active = Object.entries(selection).filter(([, mode]) => mode !== 'none')
-  if (active.length === 0) {
-    return { level: 'Minimal', text: 'Minimal — No capabilities', tone: 'default' }
-  }
-
-  const anyWrite = active.some(([, mode]) => mode === 'readwrite')
-  const anyHighWrite = active.some(
-    ([key, mode]) => mode === 'readwrite' && CATALOG_BY_KEY.get(key)?.risk === 'high'
-  )
-
-  const scopeWord =
-    resourceAccess === 'account'
-      ? 'Account-wide'
-      : resourceAccess === 'organization'
-        ? 'Organization-wide'
-        : 'Single-project'
-  const accessWord = anyWrite ? 'read-write' : 'read-only'
-
-  let level: string
-  let tone: OverallRisk['tone']
-  if (resourceAccess === 'account') {
-    level = anyWrite ? 'High' : 'Elevated'
-    tone = anyWrite ? 'high' : 'medium'
-  } else if (anyHighWrite) {
-    level = 'High'
-    tone = 'high'
-  } else if (anyWrite) {
-    level = 'Medium'
-    tone = 'medium'
-  } else {
-    level = 'Low'
-    tone = 'low'
-  }
-
-  return { level, text: `${level} — ${scopeWord} ${accessWord} access`, tone }
-}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/NewScopedTokenForm.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/NewScopedTokenForm.tsx
index 25f572efe1b87..7c18d08c332b0 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/NewScopedTokenForm.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/NewScopedTokenForm.tsx
@@ -1,9 +1,20 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { ChevronRight } from 'lucide-react'
+import { ChevronRight, X } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
-import { Button, Form, ScrollArea, Separator, SheetClose, SheetFooter } from 'ui'
+import {
+  Button,
+  Form,
+  InfoIcon,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  ScrollArea,
+  Separator,
+  SheetClose,
+  SheetFooter,
+} from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 
 import { CLASSIC_TOKEN_WARNING } from '../../AccessToken.constants'
@@ -46,6 +57,8 @@ export const NewScopedTokenForm = ({
   })
   const [step, setStep] = useState<'form' | 'review'>('form')
   const [formValues, setFormValues] = useState<TokenFormValues>(DEFAULT_VALUES)
+  // Dismissal sticks for the sheet's lifetime, so bouncing between steps doesn't resurface it.
+  const [isCreateHintDismissed, setIsCreateHintDismissed] = useState(false)
   const [showMissingPermissionsWarning, setShowMissingPermissionsWarning] = useState(false)
   const resourceSectionRef = useRef<HTMLDivElement>(null)
   const resourceAccess = useWatch({ control: form.control, name: 'resourceAccess' })
@@ -111,7 +124,10 @@ export const NewScopedTokenForm = ({
 
   return (
     <>
-      <ScrollArea className="flex-1">
+      {/* Radix wraps viewport children in an inline-styled display:table div that grows to fit
+          the widest child, which would let one long endpoint path expand the sheet instead of
+          clipping — force it back to block so widths are bounded and rows can truncate. */}
+      <ScrollArea className="flex-1 [&>[data-radix-scroll-area-viewport]>div]:block!">
         {step === 'form' ? (
           <Form {...form}>
             <form id={FORM_ID} onSubmit={form.handleSubmit(handleReviewAccess)}>
@@ -154,7 +170,6 @@ export const NewScopedTokenForm = ({
                   <PermissionsAccordion
                     selection={selection}
                     onChange={handlePermissionChange}
-                    permissionScopeMap={permissionScopeMap}
                     access={access}
                   />
                   {showMissingPermissionsWarning && (
@@ -187,16 +202,11 @@ export const NewScopedTokenForm = ({
         ) : (
           <StepIndicator step={step === 'form' ? 1 : 2} total={2} label="Configure" />
         )}
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2">
           {step === 'review' && (
-            <>
-              <span className="text-xs text-foreground-lighter">
-                Access can't be changed after creation
-              </span>
-              <Button variant="default" disabled={isPending} onClick={() => setStep('form')}>
-                Back
-              </Button>
-            </>
+            <Button variant="default" disabled={isPending} onClick={() => setStep('form')}>
+              Back
+            </Button>
           )}
           <SheetClose asChild disabled={isPending}>
             <Button variant="default">Cancel</Button>
@@ -212,9 +222,35 @@ export const NewScopedTokenForm = ({
             </Button>
           )}
           {step === 'review' && (
-            <Button loading={isPending} onClick={() => onCreateToken(formValues)}>
-              Create token
-            </Button>
+            <Popover open={!isCreateHintDismissed}>
+              <PopoverAnchor asChild>
+                <Button loading={isPending} onClick={() => onCreateToken(formValues)}>
+                  Create token
+                </Button>
+              </PopoverAnchor>
+              <PopoverContent
+                side="top"
+                align="end"
+                sideOffset={8}
+                className="flex w-auto items-center gap-2 py-1.5 pl-3 pr-1.5"
+                onOpenAutoFocus={(event) => event.preventDefault()}
+                onInteractOutside={() => setIsCreateHintDismissed(true)}
+                onEscapeKeyDown={() => setIsCreateHintDismissed(true)}
+              >
+                <InfoIcon className="h-5 w-5 shrink-0" />
+                <p className="text-xs text-foreground-light">
+                  Access can't be changed after creation
+                </p>
+                <Button
+                  variant="text"
+                  size="tiny"
+                  icon={<X />}
+                  aria-label="Dismiss"
+                  className="px-1 text-foreground-lighter"
+                  onClick={() => setIsCreateHintDismissed(true)}
+                />
+              </PopoverContent>
+            </Popover>
           )}
         </div>
       </SheetFooter>
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/NewScopedTokenFormReview.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/NewScopedTokenFormReview.tsx
index 3f71e882fb75b..6ef729763e966 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/NewScopedTokenFormReview.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/NewScopedTokenFormReview.tsx
@@ -1,12 +1,9 @@
 import dayjs from 'dayjs'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
+import { Badge, cn } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 
-import {
-  computeOverallRisk,
-  PERMISSION_MODE_LABEL,
-  selectionToScopes,
-} from '../../AccessToken.permissions'
+import { PERMISSION_MODE_LABEL, selectionToScopes } from '../../AccessToken.permissions'
 import {
   groupFailingResources,
   TOKEN_ROLE_LABEL,
@@ -15,9 +12,24 @@ import {
 import { useCapabilitySummary } from '../../hooks/useCapabilitySummary'
 import { useOrgAndProjectData } from '../../hooks/useOrgAndProjectData'
 import { failingResourceLine } from '../ExceedsRoleBadge'
-import { CapabilityCategoryList, ResourceSummaryItem, RiskLevelSummary } from '../TokenSummaryRows'
+import {
+  ResourceAccessPills,
+  useResourceAccessWrap,
+  type ResourceAccessPillItem,
+} from '../ResourceAccessPills'
+import { CapabilitiesSection } from '../TokenCapabilities/CapabilitiesSection'
+import { CapabilityLevelToggle } from '../TokenCapabilities/CapabilityLevelToggle'
+import { RiskBanner } from '../TokenCapabilities/RiskBanner'
+import {
+  computeRiskBanner,
+  getCapabilityDensityTier,
+  type CapabilityLevelFilter,
+} from '../TokenCapabilities/TokenCapabilities.utils'
 import { EXPIRY_OPTIONS, type TokenFormValues } from './NewScopedTokenForm.utils'
-import { PermissionScopeMap } from '@/data/scoped-access-tokens/permission-scope-map-query'
+import {
+  getEnabledMcpTools,
+  PermissionScopeMap,
+} from '@/data/scoped-access-tokens/permission-scope-map-query'
 
 interface ReviewStepProps {
   values: TokenFormValues
@@ -25,6 +37,10 @@ interface ReviewStepProps {
   permissionScopeMap: PermissionScopeMap | undefined
 }
 
+/**
+ * Mirrors the token view sheet (risk banner, summary, capability cards) so reviewing a token
+ * before creating it looks identical to viewing it afterwards.
+ */
 export const NewScopedTokenFormReview = ({
   values,
   access,
@@ -44,37 +60,27 @@ export const NewScopedTokenFormReview = ({
   )
 
   const risk = useMemo(
-    () => computeOverallRisk(access.effectiveSelection, values.resourceAccess),
-    [access.effectiveSelection, values.resourceAccess]
+    () =>
+      computeRiskBanner({
+        effectiveSelection: access.effectiveSelection,
+        resourceAccess: values.resourceAccess,
+        organizationSlugs: values.organizationSlugs,
+        projectRefs: values.projectRefs,
+      }),
+    [access.effectiveSelection, values.resourceAccess, values.organizationSlugs, values.projectRefs]
   )
 
-  const resourceSummary = useMemo(() => {
-    if (values.resourceAccess === 'project') {
-      const selectedProjects = projects.filter((p) => values.projectRefs.includes(p.ref))
-      return {
-        title: 'Projects',
-        items:
-          selectedProjects.length > 0
-            ? selectedProjects.map((p) => ({ key: p.ref, label: p.name, sublabel: p.ref }))
-            : [{ key: 'none', label: '-', sublabel: undefined }],
-      }
-    }
+  // The classic (account) flow skips review entirely, so only org- and project-bound tokens land
+  // here.
+  const resourceItems = useMemo<ResourceAccessPillItem[]>(() => {
     if (values.resourceAccess === 'organization') {
-      const selectedOrganizations = organizations.filter((o) =>
-        values.organizationSlugs.includes(o.slug)
-      )
-      return {
-        title: 'Organizations',
-        items:
-          selectedOrganizations.length > 0
-            ? selectedOrganizations.map((o) => ({ key: o.slug, label: o.name, sublabel: o.slug }))
-            : [{ key: 'none', label: '-', sublabel: undefined }],
-      }
-    }
-    return {
-      title: 'Account',
-      items: [{ key: 'account', label: 'Account-level access', sublabel: undefined }],
+      return organizations
+        .filter((org) => values.organizationSlugs.includes(org.slug))
+        .map((org) => ({ key: org.slug, label: org.name }))
     }
+    return projects
+      .filter((project) => values.projectRefs.includes(project.ref))
+      .map((project) => ({ key: project.ref, label: project.name }))
   }, [values, projects, organizations])
 
   const expiresSummary = useMemo(() => {
@@ -86,53 +92,23 @@ export const NewScopedTokenFormReview = ({
     return EXPIRY_OPTIONS.find((o) => o.value === values.expiresAt)?.label ?? values.expiresAt
   }, [values])
 
-  const hasCapabilities = grantedScopes.length > 0
-
-  const { activeByCategory, mcpTools, capabilityGroups } = useCapabilitySummary({
+  const { capabilities } = useCapabilitySummary({
     selection,
     grantedScopes,
     permissionScopeMap,
   })
+  const capabilityTier = getCapabilityDensityTier(capabilities.length)
+  const [levelFilter, setLevelFilter] = useState<CapabilityLevelFilter>('all')
 
-  const rows: [string, React.ReactNode][] = [
-    ['Name', values.tokenName || <span className="text-foreground-lighter">Untitled token</span>],
-    ['Expires', expiresSummary],
-    [
-      'Resource access',
-      <div key="resource-access" className="space-y-2">
-        <p className="text-[11px] font-mono uppercase tracking-wide text-foreground-lighter">
-          {resourceSummary.title}
-        </p>
-        <div className="divide-y">
-          {resourceSummary.items.map((item) => (
-            <ResourceSummaryItem key={item.key} label={item.label} sublabel={item.sublabel} />
-          ))}
-        </div>
-      </div>,
-    ],
-    [
-      'Capabilities',
-      hasCapabilities ? (
-        <CapabilityCategoryList categories={activeByCategory} accessEntries={access.entries} />
-      ) : (
-        <span className="text-foreground-lighter">No capabilities selected</span>
-      ),
-    ],
-    [
-      'Risk level',
-      <RiskLevelSummary key="risk" risk={risk} showRoleCaveat={hasExceedingCapabilities} />,
-    ],
-  ]
+  const enabledMcpTools = useMemo(
+    () => getEnabledMcpTools({ grantedScopes, permissionScopeMap }).sort(),
+    [grantedScopes, permissionScopeMap]
+  )
+
+  const { containerRef: pillsRef, isWrapped: isResourceAccessWrapped } = useResourceAccessWrap()
 
   return (
     <div className="space-y-6 px-5 sm:px-6 py-6">
-      {!hasCapabilities && (
-        <Admonition
-          type="warning"
-          title="This token has no capabilities"
-          description="Go back and grant at least one permission before creating it."
-        />
-      )}
       {hasExceedingCapabilities && (
         <Admonition
           type="warning"
@@ -160,72 +136,73 @@ export const NewScopedTokenFormReview = ({
           }
         />
       )}
+
+      <div className="flex flex-col gap-3">
+        <h3 className="text-sm">Risk assessment</h3>
+        <RiskBanner risk={risk} showRoleCaveat={hasExceedingCapabilities} />
+      </div>
+
       <div className="flex flex-col gap-3">
         <h3 className="text-sm">Token summary</h3>
         <dl className="divide-y rounded-md border bg-surface-300">
-          {rows.map(([key, value]) => (
-            <div key={key} className="grid grid-cols-3 gap-4 px-4 py-3">
-              <dt className="text-sm text-foreground-lighter">{key}</dt>
-              <dd className="col-span-2 text-sm text-foreground">{value}</dd>
-            </div>
-          ))}
+          <div className="flex items-center justify-between gap-4 px-4 py-3">
+            <dt className="shrink-0 text-sm text-foreground-lighter">Name</dt>
+            <dd className="text-sm text-foreground">
+              {values.tokenName || <span className="text-foreground-lighter">Untitled token</span>}
+            </dd>
+          </div>
+          <div className="flex items-center justify-between gap-4 px-4 py-3">
+            <dt className="shrink-0 text-sm text-foreground-lighter">Expires</dt>
+            <dd className="text-sm text-foreground">{expiresSummary}</dd>
+          </div>
+          <div
+            className={cn(
+              'flex flex-col items-start justify-between gap-4 px-4 py-3 sm:flex-row',
+              isResourceAccessWrapped ? 'sm:items-start' : 'sm:items-center'
+            )}
+          >
+            <dt className="shrink-0 text-sm text-foreground-lighter">Resource access</dt>
+            <dd className="w-full min-w-0 text-sm text-foreground sm:w-auto sm:flex-1">
+              <div ref={pillsRef} className="flex flex-wrap justify-start gap-1.5 sm:justify-end">
+                <ResourceAccessPills resourceAccess={values.resourceAccess} items={resourceItems} />
+              </div>
+            </dd>
+          </div>
         </dl>
       </div>
 
-      {hasCapabilities && (
-        <>
-          <div className="flex flex-col gap-3">
-            <h3 className="text-sm">Management API endpoints enabled</h3>
-            {capabilityGroups.length === 0 ? (
-              <p className="text-xs text-foreground-light">
-                No Management API endpoints are enabled by the selected capabilities.
-              </p>
-            ) : (
-              capabilityGroups.map(({ entry, mode, endpoints }) => (
-                <div key={entry.key} className="rounded-md border">
-                  <div className="flex items-center justify-between border-b bg-surface-100 px-3 py-2">
-                    <span className="text-xs text-foreground">{entry.name}</span>
-                    <span className="text-[11px] font-mono uppercase text-foreground-lighter">
-                      {PERMISSION_MODE_LABEL[mode]}
-                    </span>
-                  </div>
-                  <div className="divide-y">
-                    {endpoints.map(([method, path]) => (
-                      <div
-                        key={`${method} ${path}`}
-                        className="flex items-center gap-2 px-3 py-1.5 font-mono text-xs"
-                      >
-                        <span className="w-14 shrink-0 text-foreground-light">{method}</span>
-                        <span className="text-foreground">{path}</span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm">Capabilities</h3>
+          {capabilityTier === 'dense' && (
+            <CapabilityLevelToggle value={levelFilter} onChange={setLevelFilter} />
+          )}
+        </div>
+        <CapabilitiesSection
+          capabilities={capabilities}
+          accessEntries={access.entries}
+          levelFilter={levelFilter}
+        />
+      </div>
 
-          <div className="flex flex-col gap-3">
-            <h3 className="text-sm">MCP tools</h3>
-            {mcpTools.length === 0 ? (
-              <p className="text-xs text-foreground-light">
-                No MCP tools are enabled by the selected capabilities.
-              </p>
-            ) : (
-              <div className="flex flex-wrap gap-2">
-                {mcpTools.map((tool) => (
-                  <span
-                    key={tool}
-                    className="rounded border bg-surface-100 px-2 py-1 font-mono text-xs text-foreground-light"
-                  >
-                    {tool}
-                  </span>
-                ))}
-              </div>
-            )}
+      <div className="flex flex-col gap-3">
+        <h3 className="text-sm">Available MCP tools</h3>
+        {enabledMcpTools.length === 0 ? (
+          <span className="text-sm text-foreground-lighter">No MCP tools enabled</span>
+        ) : (
+          <div className="flex flex-wrap gap-1.5">
+            {enabledMcpTools.map((tool) => (
+              <Badge
+                key={tool}
+                variant="default"
+                className="px-2.5 py-1 font-mono text-xs normal-case tracking-normal"
+              >
+                {tool}
+              </Badge>
+            ))}
           </div>
-        </>
-      )}
+        )}
+      </div>
     </div>
   )
 }
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/PermissionRow.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/PermissionRow.tsx
index 5bc8a18575ade..4eb1535e109dc 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/PermissionRow.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/PermissionRow.tsx
@@ -4,23 +4,15 @@ import type { PermissionCatalogEntry, PermissionMode } from '../../AccessToken.p
 import type { EntryAccess } from '../../AccessToken.roles'
 import { ExceedsRoleBadge } from '../ExceedsRoleBadge'
 import { RiskMarker } from './RiskMarker'
-import { PermissionScopeMap } from '@/data/scoped-access-tokens/permission-scope-map-query'
 
 interface PermissionRowProps {
   entry: PermissionCatalogEntry
   mode: PermissionMode
   onChange: (mode: PermissionMode) => void
-  permissionScopeMap: PermissionScopeMap | undefined
   entryAccess?: EntryAccess
 }
 
-export const PermissionRow = ({
-  entry,
-  mode,
-  onChange,
-  permissionScopeMap,
-  entryAccess,
-}: PermissionRowProps) => {
+export const PermissionRow = ({ entry, mode, onChange, entryAccess }: PermissionRowProps) => {
   return (
     <div className="flex items-center justify-between gap-4 py-4">
       <div className="min-w-0 flex flex-col gap-1">
@@ -30,7 +22,7 @@ export const PermissionRow = ({
               {entry.name} <span className="sr-only">permissions</span>
             </span>
           </Label>
-          <RiskMarker entry={entry} permissionScopeMap={permissionScopeMap} />
+          <RiskMarker entry={entry} />
           {entryAccess?.status === 'exceeds-role' && (
             <ExceedsRoleBadge entry={entry} mode={mode} access={entryAccess} />
           )}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/PermissionsAccordion.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/PermissionsAccordion.tsx
index 5bbb47e0a1aa4..23112f36d8763 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/PermissionsAccordion.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/PermissionsAccordion.tsx
@@ -10,20 +10,17 @@ import {
 import type { TokenAccessEvaluation } from '../../AccessToken.roles'
 import { PermissionRow } from './PermissionRow'
 import { InlineLink } from '@/components/ui/InlineLink'
-import { PermissionScopeMap } from '@/data/scoped-access-tokens/permission-scope-map-query'
 import { DOCS_URL } from '@/lib/constants'
 
 interface PermissionsAccordionProps {
   selection: PermissionSelection
   onChange: (key: string, mode: PermissionMode) => void
-  permissionScopeMap: PermissionScopeMap | undefined
   access?: TokenAccessEvaluation
 }
 
 export const PermissionsAccordion = ({
   selection,
   onChange,
-  permissionScopeMap,
   access,
 }: PermissionsAccordionProps) => {
   const [openCategories, setOpenCategories] = useState<string[]>([])
@@ -81,7 +78,6 @@ export const PermissionsAccordion = ({
                         entry={entry}
                         mode={selection[entry.key] ?? 'none'}
                         onChange={(mode) => onChange(entry.key, mode)}
-                        permissionScopeMap={permissionScopeMap}
                         entryAccess={access?.entries[entry.key]}
                       />
                     </div>
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/RiskMarker.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/RiskMarker.tsx
index 92c99c051ae0c..2366b1ff68268 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/RiskMarker.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/RiskMarker.tsx
@@ -2,37 +2,21 @@ import { Badge, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 import {
   RISK_LEVEL_LABEL,
+  RISK_TONE_VARIANT,
   type PermissionCatalogEntry,
-  type RiskLevel,
 } from '../../AccessToken.permissions'
-import {
-  getMcpToolsForScopes,
-  PermissionScopeMap,
-} from '@/data/scoped-access-tokens/permission-scope-map-query'
-
-const RISK_VARIANT: Record<RiskLevel, 'success' | 'warning' | 'destructive'> = {
-  low: 'success',
-  medium: 'warning',
-  high: 'destructive',
-}
 
 interface RiskMarkerProps {
   entry: PermissionCatalogEntry
   /** When false, renders the dot + label without the explanatory tooltip (used in the review list). */
   withTooltip?: boolean
   className?: string
-  permissionScopeMap: PermissionScopeMap | undefined
 }
 
-export const RiskMarker = ({
-  entry,
-  withTooltip = true,
-  className,
-  permissionScopeMap,
-}: RiskMarkerProps) => {
+export const RiskMarker = ({ entry, withTooltip = true, className }: RiskMarkerProps) => {
   const marker = (
     <Badge
-      variant={RISK_VARIANT[entry.risk]}
+      variant={RISK_TONE_VARIANT[entry.risk]}
       className={cn(withTooltip && 'cursor-help', className)}
     >
       {RISK_LEVEL_LABEL[entry.risk]}
@@ -41,18 +25,13 @@ export const RiskMarker = ({
 
   if (!withTooltip) return marker
 
-  const mcpTools = getMcpToolsForScopes({
-    scopeIds: [...entry.readScopes, ...entry.writeScopes],
-    permissionScopeMap,
-  })
-
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <span tabIndex={0}>{marker}</span>
       </TooltipTrigger>
       <TooltipContent side="top" align="center" className="w-72 space-y-2 p-3">
-        <Badge variant={RISK_VARIANT[entry.risk]}>{RISK_LEVEL_LABEL[entry.risk]}</Badge>
+        <Badge variant={RISK_TONE_VARIANT[entry.risk]}>{RISK_LEVEL_LABEL[entry.risk]}</Badge>
         <p className="text-xs text-foreground-light">{entry.riskReason}</p>
         {(entry.allowsRead.length > 0 || entry.allowsWrite.length > 0) && (
           <div className="flex flex-col gap-5 mt-5">
@@ -74,18 +53,6 @@ export const RiskMarker = ({
             )}
           </div>
         )}
-        {mcpTools.length > 0 && (
-          <div className="space-y-1">
-            {/* getMcpToolsForScopes is associative, not conjunctive: these scopes contribute to
-                the listed tools, but a tool may need scopes from other capabilities too — the
-                review step's enabled-tools list is the authoritative view. Keep this heading
-                distinct from the review step's "MCP tools". */}
-            <p className="text-[11px] font-mono uppercase tracking-wide text-foreground-lighter">
-              Related MCP tools
-            </p>
-            <p className="font-mono text-xs text-foreground-light">{mcpTools.join(', ')}</p>
-          </div>
-        )}
       </TooltipContent>
     </Tooltip>
   )
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.test.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.test.tsx
index a1c401f7170b7..550295bac60e2 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.test.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.test.tsx
@@ -189,9 +189,9 @@ describe('NewScopedTokenSheet', () => {
     fireEvent.click(await screen.findByLabelText('Project Settings', { exact: false }))
     fireEvent.click(await screen.findByRole('option', { name: 'Read' }))
     fireEvent.click(await screen.findByRole('button', { name: 'Review access' }))
-    // Review screen
-    await screen.findByText('Low Risk')
-    await screen.findByText('Single-project read-only access')
+    // Review screen — Project Settings is a high-risk entry, downgraded one tier for read-only
+    await screen.findByText('Medium risk')
+    await screen.findByText('Read on 1 capability, across 1 project.')
     fireEvent.click(await screen.findByRole('button', { name: 'Create token' }))
     // If we can click this checkbox, the token was created
     // Must be a real click, which focuses the button: nothing holds focus once the form
@@ -239,9 +239,9 @@ describe('NewScopedTokenSheet', () => {
     fireEvent.click(await screen.findByLabelText('Project Settings', { exact: false }))
     fireEvent.click(await screen.findByRole('option', { name: 'Read' }))
     fireEvent.click(await screen.findByRole('button', { name: 'Review access' }))
-    // Review screen
-    await screen.findByText('Low Risk')
-    await screen.findByText('Organization-wide read-only access')
+    // Review screen — Project Settings is a high-risk entry, downgraded one tier for read-only
+    await screen.findByText('Medium risk')
+    await screen.findByText('Read on 1 capability, across 1 organization.')
     fireEvent.click(await screen.findByRole('button', { name: 'Create token' }))
     // If we can click this checkbox, the token was created
     // Must be a real click, which focuses the button: nothing holds focus once the form
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ResourceAccessPills.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ResourceAccessPills.tsx
new file mode 100644
index 0000000000000..568fb8af78bc9
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ResourceAccessPills.tsx
@@ -0,0 +1,80 @@
+import { Box, Boxes } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { cn } from 'ui'
+
+import type { ResourceAccessMode } from '../AccessToken.permissions'
+
+export interface ResourceAccessPillItem {
+  key: string
+  label: string
+  isInaccessible?: boolean
+}
+
+interface ResourceAccessPillsProps {
+  resourceAccess: ResourceAccessMode
+  items: ResourceAccessPillItem[]
+  /** Shown when there are no items — only the caller knows why the list is empty. */
+  emptyText?: string
+}
+
+/** The org/project badges in a token summary's "Resource access" row. */
+export const ResourceAccessPills = ({
+  resourceAccess,
+  items,
+  emptyText = '-',
+}: ResourceAccessPillsProps) => {
+  if (items.length === 0) {
+    return <span className="text-xs text-foreground-lighter">{emptyText}</span>
+  }
+
+  return (
+    <>
+      {items.map((item) => (
+        <div
+          key={item.key}
+          className={cn(
+            'flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border bg-surface-75 text-foreground-light px-3 py-1 text-xs',
+            item.isInaccessible
+              ? 'border-destructive-500 text-destructive'
+              : 'border-strong text-foreground'
+          )}
+        >
+          {resourceAccess === 'organization' ? (
+            <Boxes size={14} strokeWidth={1.5} className="shrink-0 text-foreground-lighter" />
+          ) : resourceAccess === 'project' ? (
+            <Box size={14} strokeWidth={1.5} className="shrink-0 text-foreground-lighter" />
+          ) : null}
+          {item.label}
+        </div>
+      ))}
+    </>
+  )
+}
+
+/**
+ * Whether the pill container has wrapped onto multiple lines. Vertically centering the row only
+ * reads right when its badges fit on a single line — with wrapped badges the label should sit at
+ * the top instead. Measured, not guessed from item count, since wrapping depends on the sheet's
+ * width and each badge's label length.
+ */
+export const useResourceAccessWrap = () => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isWrapped, setIsWrapped] = useState(false)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const checkWrapped = () => {
+      const firstBadge = container.firstElementChild as HTMLElement | null
+      setIsWrapped(firstBadge !== null && container.clientHeight > firstBadge.clientHeight + 2)
+    }
+
+    checkWrapped()
+    const observer = new ResizeObserver(checkWrapped)
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [])
+
+  return { containerRef, isWrapped }
+}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilitiesSection.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilitiesSection.tsx
new file mode 100644
index 0000000000000..5b34c84c2919c
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilitiesSection.tsx
@@ -0,0 +1,54 @@
+import { Accordion } from 'ui'
+
+import type { EntryAccess } from '../../AccessToken.roles'
+import type { CapabilitySummaryEntry } from '../../hooks/useCapabilitySummary'
+import { CapabilityCard } from './CapabilityCard'
+import { DenseCapabilities } from './DenseCapabilities'
+import { getCapabilityDensityTier, type CapabilityLevelFilter } from './TokenCapabilities.utils'
+
+interface CapabilitiesSectionProps {
+  capabilities: CapabilitySummaryEntry[]
+  accessEntries: Record<string, EntryAccess>
+  /** Dense tier's All/Read/Read-write control, rendered by the caller next to the section title. */
+  levelFilter: CapabilityLevelFilter
+}
+
+/**
+ * Switches capability presentation on granted count: a moderate number render as a single
+ * closed-by-default accordion, and a large grant switches to the dense, filterable view.
+ */
+export const CapabilitiesSection = ({
+  capabilities,
+  accessEntries,
+  levelFilter,
+}: CapabilitiesSectionProps) => {
+  if (capabilities.length === 0) {
+    return <span className="text-sm text-foreground-lighter">No capabilities selected</span>
+  }
+
+  const tier = getCapabilityDensityTier(capabilities.length)
+
+  if (tier === 'accordion') {
+    return (
+      <Accordion type="multiple">
+        {capabilities.map((capability, index) => (
+          <CapabilityCard
+            key={capability.entry.key}
+            capability={capability}
+            accessEntries={accessEntries}
+            isFirst={index === 0}
+            isLast={index === capabilities.length - 1}
+          />
+        ))}
+      </Accordion>
+    )
+  }
+
+  return (
+    <DenseCapabilities
+      capabilities={capabilities}
+      accessEntries={accessEntries}
+      levelFilter={levelFilter}
+    />
+  )
+}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityCard.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityCard.tsx
new file mode 100644
index 0000000000000..ea69970757c9c
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityCard.tsx
@@ -0,0 +1,69 @@
+import { AccordionContent, AccordionItem, AccordionTrigger, Badge, cn } from 'ui'
+
+import { PERMISSION_MODE_LABEL } from '../../AccessToken.permissions'
+import type { EntryAccess } from '../../AccessToken.roles'
+import type { CapabilitySummaryEntry } from '../../hooks/useCapabilitySummary'
+import { ExceedsRoleBadge } from '../ExceedsRoleBadge'
+import { CapabilityCardBody } from './CapabilityCardBody'
+import { pluralize } from '@/lib/helpers'
+
+interface CapabilityCardProps {
+  capability: CapabilitySummaryEntry
+  accessEntries: Record<string, EntryAccess>
+  /** Position within the continuous bordered list — controls corner rounding and shared edges. */
+  isFirst?: boolean
+  isLast?: boolean
+}
+
+const CapabilityCardHeader = ({
+  capability,
+  accessEntries,
+}: Pick<CapabilityCardProps, 'capability' | 'accessEntries'>) => {
+  const { entry, mode, endpoints } = capability
+  const entryAccess = accessEntries[entry.key]
+
+  return (
+    <div className="flex flex-1 items-center justify-between gap-2 pr-2">
+      <div className="flex min-w-0 flex-col gap-1">
+        <span className="flex flex-wrap items-center gap-2">
+          <span className="text-sm font-medium text-foreground">{entry.name}</span>
+          {entryAccess?.status === 'exceeds-role' && (
+            <ExceedsRoleBadge entry={entry} mode={mode} access={entryAccess} />
+          )}
+        </span>
+        <span className="text-xs text-foreground-lighter">
+          {`${endpoints.length} ${pluralize(endpoints.length, 'endpoint')}`}
+        </span>
+      </div>
+      <Badge variant={mode === 'readwrite' ? 'warning' : 'default'} className="shrink-0">
+        {PERMISSION_MODE_LABEL[mode]}
+      </Badge>
+    </div>
+  )
+}
+
+export const CapabilityCard = ({
+  capability,
+  accessEntries,
+  isFirst = true,
+  isLast = true,
+}: CapabilityCardProps) => {
+  const body = <CapabilityCardBody entry={capability.entry} endpoints={capability.endpoints} />
+  const positionClassName = cn(
+    'border',
+    !isLast && 'border-b-0',
+    isFirst && 'rounded-t-md',
+    isLast && 'rounded-b-md'
+  )
+
+  return (
+    <AccordionItem value={capability.entry.key} className={positionClassName}>
+      <AccordionTrigger className="bg-surface-300 px-4 py-3 transition first:rounded-t last:rounded-b hover:no-underline">
+        <CapabilityCardHeader capability={capability} accessEntries={accessEntries} />
+      </AccordionTrigger>
+      <AccordionContent className="*:pb-0">
+        <div className="px-4 pb-4">{body}</div>
+      </AccordionContent>
+    </AccordionItem>
+  )
+}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityCardBody.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityCardBody.tsx
new file mode 100644
index 0000000000000..dae5dc274e3ad
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityCardBody.tsx
@@ -0,0 +1,56 @@
+import { Badge } from 'ui'
+
+import {
+  RISK_LEVEL_LABEL,
+  RISK_TONE_VARIANT,
+  type PermissionCatalogEntry,
+} from '../../AccessToken.permissions'
+import { EndpointRow } from './EndpointRow'
+import { getSharedPathPrefix } from './TokenCapabilities.utils'
+import type { EnabledEndpoint } from '@/data/scoped-access-tokens/permission-scope-map-query'
+
+interface CapabilityCardBodyProps {
+  entry: PermissionCatalogEntry
+  endpoints: EnabledEndpoint[]
+}
+
+export const CapabilityCardBody = ({ entry, endpoints }: CapabilityCardBodyProps) => {
+  const sharedPrefix = getSharedPathPrefix(endpoints.map((endpoint) => endpoint.path))
+  const methodColumnWidth = `${Math.max(0, ...endpoints.map((endpoint) => endpoint.method.length)) + 2}ch`
+
+  return (
+    <div className="flex flex-col gap-4 mt-4">
+      <div className="flex flex-col gap-1.5">
+        <h3 className="text-xs tracking-wide text-foreground-lighter">Description</h3>
+        <p className="text-sm text-foreground">{entry.description}</p>
+      </div>
+
+      <div className="flex flex-col items-start gap-1.5">
+        <h3 className="text-xs tracking-wide text-foreground-lighter">Risk Level</h3>
+        <Badge variant={RISK_TONE_VARIANT[entry.risk]}>{RISK_LEVEL_LABEL[entry.risk]}</Badge>
+      </div>
+
+      {endpoints.length > 0 && (
+        <div className="flex flex-col gap-1.5">
+          <h3 className="text-xs tracking-wide text-foreground-lighter">API endpoints</h3>
+          <div className="divide-y">
+            {endpoints.map((endpoint) => (
+              <EndpointRow
+                key={endpoint.raw}
+                method={endpoint.method}
+                path={endpoint.path}
+                sharedPrefix={sharedPrefix}
+                methodColumnWidth={methodColumnWidth}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+      {endpoints.length === 0 && (
+        <p className="text-xs text-foreground-lighter">
+          No API endpoints are enabled by this capability yet.
+        </p>
+      )}
+    </div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityLevelToggle.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityLevelToggle.tsx
new file mode 100644
index 0000000000000..e2306e9cd04f1
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityLevelToggle.tsx
@@ -0,0 +1,43 @@
+import { Button, cn } from 'ui'
+
+import type { CapabilityLevelFilter } from './TokenCapabilities.utils'
+
+interface CapabilityLevelToggleProps {
+  value: CapabilityLevelFilter
+  onChange: (value: CapabilityLevelFilter) => void
+}
+
+const OPTIONS: { value: CapabilityLevelFilter; label: string }[] = [
+  { value: 'all', label: 'All' },
+  { value: 'read', label: 'Read' },
+  { value: 'readwrite', label: 'Read-write' },
+]
+
+/**
+ * Segmented control matching the "Show all / Error only" pattern from Auth's UserLogs: adjacent
+ * Buttons with their variant swapped on selection, glued together via rounding/border removal
+ * and a thin divider, rather than a dedicated segmented-control primitive.
+ */
+export const CapabilityLevelToggle = ({ value, onChange }: CapabilityLevelToggleProps) => (
+  <div className="flex items-center">
+    {OPTIONS.map(({ value: optionValue, label }, index) => (
+      <div key={optionValue} className="flex items-center">
+        {index > 0 && <div className="border-button border border-l-0 py-3" />}
+        <Button
+          type="button"
+          size="tiny"
+          variant={value === optionValue ? 'secondary' : 'default'}
+          aria-pressed={value === optionValue}
+          className={cn(
+            index === 0 && 'rounded-r-none border-r-0',
+            index === OPTIONS.length - 1 && 'rounded-l-none border-l-0',
+            index > 0 && index < OPTIONS.length - 1 && 'rounded-none border-x-0'
+          )}
+          onClick={() => onChange(optionValue)}
+        >
+          {label}
+        </Button>
+      </div>
+    ))}
+  </div>
+)
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/DenseCapabilities.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/DenseCapabilities.tsx
new file mode 100644
index 0000000000000..ff5e8408772dd
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/DenseCapabilities.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { Accordion } from 'ui'
+
+import type { EntryAccess } from '../../AccessToken.roles'
+import type { CapabilitySummaryEntry } from '../../hooks/useCapabilitySummary'
+import { CapabilityCard } from './CapabilityCard'
+import { groupCapabilitiesByLevel, type CapabilityLevelFilter } from './TokenCapabilities.utils'
+
+interface DenseCapabilitiesProps {
+  capabilities: CapabilitySummaryEntry[]
+  accessEntries: Record<string, EntryAccess>
+  /** Which level group(s) to show — the All/Read/Read-write control lives next to the section title. */
+  levelFilter: CapabilityLevelFilter
+}
+
+/** 9+ capabilities: a level-grouped list, read-write pinned first. */
+export const DenseCapabilities = ({
+  capabilities,
+  accessEntries,
+  levelFilter,
+}: DenseCapabilitiesProps) => {
+  const [openKeys, setOpenKeys] = useState<string[]>([])
+
+  const { readwrite, read } = groupCapabilitiesByLevel(capabilities)
+
+  const shown =
+    levelFilter === 'readwrite'
+      ? readwrite
+      : levelFilter === 'read'
+        ? read
+        : [...readwrite, ...read]
+
+  return (
+    <div className="flex flex-col gap-4">
+      {shown.length === 0 && (
+        <p className="text-xs text-foreground-lighter">No capabilities match this filter.</p>
+      )}
+
+      <Accordion type="multiple" value={openKeys} onValueChange={setOpenKeys}>
+        {shown.map((capability, index) => (
+          <CapabilityCard
+            key={capability.entry.key}
+            capability={capability}
+            accessEntries={accessEntries}
+            isFirst={index === 0}
+            isLast={index === shown.length - 1}
+          />
+        ))}
+      </Accordion>
+    </div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/EndpointRow.test.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/EndpointRow.test.tsx
new file mode 100644
index 0000000000000..00ccd311b1df8
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/EndpointRow.test.tsx
@@ -0,0 +1,29 @@
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, test } from 'vitest'
+
+import { EndpointRow } from './EndpointRow'
+import { customRender } from '@/tests/lib/custom-render'
+
+const user = userEvent.setup({ writeToClipboard: true })
+
+describe('EndpointRow', () => {
+  test('copies the endpoint path on click', async () => {
+    customRender(
+      <EndpointRow
+        method="GET"
+        path="/v1/projects/{ref}/config"
+        sharedPrefix=""
+        methodColumnWidth="5ch"
+      />
+    )
+
+    // Must be a real click, which focuses the button: copyToClipboard bails out when the
+    // document has no focus
+    await user.click(screen.getByRole('button', { name: 'Copy GET /v1/projects/{ref}/config' }))
+
+    await waitFor(async () =>
+      expect(await window.navigator.clipboard.readText()).toBe('/v1/projects/{ref}/config')
+    )
+  })
+})
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/EndpointRow.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/EndpointRow.tsx
new file mode 100644
index 0000000000000..bec181ee5175d
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/EndpointRow.tsx
@@ -0,0 +1,121 @@
+import { Check, Copy } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { cn, copyToClipboard } from 'ui'
+
+import { splitEndpointPath } from './TokenCapabilities.utils'
+
+interface EndpointRowProps {
+  method: string
+  path: string
+  /** Shared leading segments across the group, rendered muted ahead of the distinguishing part. */
+  sharedPrefix: string
+  /** Sized by the caller for the longest method present in the group. */
+  methodColumnWidth: string
+}
+
+/** Pan slowly enough to read while revealing (~70px/s), but never snap for short distances. */
+const panDurationMs = (distance: number) => Math.max(300, Math.round(distance * 14))
+
+/**
+ * One copyable endpoint. The muted prefix span shrinks with an end-ellipsis while the
+ * distinguishing segment stays fixed-width — visually equivalent to truncating the full path in
+ * its middle, without needing to measure pixel widths. A distinguishing segment too long for the
+ * row clips at the right instead, so hovering (or focusing) pans the path sideways to bring the
+ * clipped tail into view. Clicking copies the path — the pasteable part; the method is visible
+ * context.
+ */
+export const EndpointRow = ({
+  method,
+  path,
+  sharedPrefix,
+  methodColumnWidth,
+}: EndpointRowProps) => {
+  const { prefix, distinguishing } = splitEndpointPath(path, sharedPrefix)
+
+  const pathContainerRef = useRef<HTMLSpanElement>(null)
+  const [panDistance, setPanDistance] = useState(0)
+  const [isRevealed, setIsRevealed] = useState(false)
+  const [isCopied, setIsCopied] = useState(false)
+  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const [showCopiedIcon, setShowCopiedIcon] = useState(false)
+
+  useEffect(() => () => clearTimeout(copiedTimerRef.current), [])
+
+  // Measured when the reveal starts, not on mount: rows live inside accordion content that mounts
+  // collapsed, so resting measurements are taken before the row has its real width.
+  const handleRevealStart = () => {
+    const container = pathContainerRef.current
+    if (container) setPanDistance(Math.max(0, container.scrollWidth - container.clientWidth))
+    setIsRevealed(true)
+  }
+  const handleRevealEnd = () => setIsRevealed(false)
+
+  const handleCopy = () => {
+    copyToClipboard(path, () => {
+      setIsCopied(true)
+      setShowCopiedIcon(true)
+      clearTimeout(copiedTimerRef.current)
+      copiedTimerRef.current = setTimeout(() => setShowCopiedIcon(false), 2000)
+    })
+  }
+
+  return (
+    <button
+      type="button"
+      tabIndex={0}
+      onClick={handleCopy}
+      onMouseEnter={handleRevealStart}
+      onMouseLeave={handleRevealEnd}
+      onFocus={handleRevealStart}
+      onBlur={handleRevealEnd}
+      aria-label={`Copy ${method} ${path}`}
+      className="group flex w-full items-center gap-2 py-1.5 text-left"
+    >
+      <span
+        className="shrink-0 font-mono text-xs text-foreground-lighter"
+        style={{ width: methodColumnWidth }}
+      >
+        {method}
+      </span>
+      <span
+        ref={pathContainerRef}
+        className={cn(
+          'flex min-w-0 flex-1 overflow-hidden whitespace-nowrap font-mono text-xs',
+          // The fade only paints over text that reaches the container's right edge, so short rows
+          // are unaffected; dropped while panning so the revealed tail stays readable.
+          !isRevealed && '[mask-image:linear-gradient(to_right,black_calc(100%-2rem),transparent)]'
+        )}
+      >
+        <span
+          className="flex min-w-0 transition-transform ease-linear motion-reduce:transition-none"
+          style={{
+            transform:
+              isRevealed && panDistance > 0 ? `translateX(-${panDistance}px)` : 'translateX(0)',
+            // Pausing before panning lets a quick mouse pass leave the row untouched; the pan
+            // back starts immediately and faster, so the row settles as soon as it's left.
+            transitionDuration: isRevealed ? `${panDurationMs(panDistance)}ms` : '200ms',
+            transitionDelay: isRevealed ? '400ms' : '0ms',
+          }}
+        >
+          {prefix !== '' && (
+            <span className="overflow-hidden text-ellipsis text-foreground-lighter">{prefix}</span>
+          )}
+          <span className="shrink-0 text-foreground">{distinguishing}</span>
+        </span>
+      </span>
+      <span className="shrink-0 pl-2">
+        {showCopiedIcon ? (
+          <Check size={14} className="text-brand" />
+        ) : (
+          <Copy
+            size={14}
+            className="text-foreground-lighter opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
+          />
+        )}
+      </span>
+      <span className="sr-only" aria-live="polite">
+        {isCopied ? 'URL copied' : null}
+      </span>
+    </button>
+  )
+}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/RiskBanner.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/RiskBanner.tsx
new file mode 100644
index 0000000000000..c4f50328f1a78
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/RiskBanner.tsx
@@ -0,0 +1,27 @@
+import { Admonition } from 'ui-patterns/Admonition'
+import type { AdmonitionType } from 'ui-patterns/Admonition'
+
+import type { RiskBannerResult } from './TokenCapabilities.utils'
+
+const TONE_TO_ADMONITION_TYPE: Record<RiskBannerResult['tone'], AdmonitionType> = {
+  default: 'default',
+  low: 'success',
+  medium: 'warning',
+  high: 'destructive',
+}
+
+interface RiskBannerProps {
+  risk: RiskBannerResult
+  /** True when some selected permissions exceed the owner's role, so the risk is role-capped. */
+  showRoleCaveat: boolean
+}
+
+export const RiskBanner = ({ risk, showRoleCaveat }: RiskBannerProps) => (
+  <Admonition
+    type={TONE_TO_ADMONITION_TYPE[risk.tone]}
+    title={`${risk.level} risk`}
+    description={risk.summary}
+  >
+    {showRoleCaveat && 'Based on what your current role allows this token to do.'}
+  </Admonition>
+)
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/TokenCapabilities.constants.ts b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/TokenCapabilities.constants.ts
new file mode 100644
index 0000000000000..d6da62c72b3df
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/TokenCapabilities.constants.ts
@@ -0,0 +1,5 @@
+/**
+ * Density-tier threshold for the capabilities section, keyed to the number of granted
+ * capabilities. Provisional — revisit with product/design once real tokens exercise it.
+ */
+export const CAPABILITY_DENSITY_ACCORDION_MAX = 8
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/TokenCapabilities.utils.test.ts b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/TokenCapabilities.utils.test.ts
new file mode 100644
index 0000000000000..55c807be2172a
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/TokenCapabilities.utils.test.ts
@@ -0,0 +1,181 @@
+import { describe, expect, it } from 'vitest'
+
+import { getCatalogEntry } from '../../AccessToken.permissions'
+import type { CapabilitySummaryEntry } from '../../hooks/useCapabilitySummary'
+import {
+  computeRiskBanner,
+  getCapabilityDensityTier,
+  getSharedPathPrefix,
+  groupCapabilitiesByLevel,
+  splitEndpointPath,
+} from './TokenCapabilities.utils'
+
+// 'project:database' is catalog-high and writable; 'project:advisors' is catalog-low and read-only.
+const databaseCapability = (
+  mode: CapabilitySummaryEntry['mode'],
+  endpoints: CapabilitySummaryEntry['endpoints'] = []
+): CapabilitySummaryEntry => ({
+  entry: getCatalogEntry('project:database')!,
+  mode,
+  endpoints,
+})
+
+const advisorsCapability = (mode: CapabilitySummaryEntry['mode']): CapabilitySummaryEntry => ({
+  entry: getCatalogEntry('project:advisors')!,
+  mode,
+  endpoints: [],
+})
+
+describe('getCapabilityDensityTier', () => {
+  it('is accordion at 8 or fewer capabilities', () => {
+    expect(getCapabilityDensityTier(0)).toBe('accordion')
+    expect(getCapabilityDensityTier(8)).toBe('accordion')
+  })
+
+  it('is dense at 9 or more capabilities', () => {
+    expect(getCapabilityDensityTier(9)).toBe('dense')
+    expect(getCapabilityDensityTier(50)).toBe('dense')
+  })
+})
+
+describe('getSharedPathPrefix', () => {
+  it('returns nothing for a single endpoint — there is nothing to share', () => {
+    expect(getSharedPathPrefix(['/v1/projects/{ref}'])).toBe('')
+  })
+
+  it('finds the longest shared leading segments across paths', () => {
+    expect(
+      getSharedPathPrefix(['/v1/projects/{ref}/functions', '/v1/projects/{ref}/functions/{slug}'])
+    ).toBe('/v1/projects/{ref}/functions/')
+  })
+
+  it('never cuts a shared prefix mid-segment', () => {
+    // "functions" and "functions-secrets" share characters but not a path segment.
+    expect(
+      getSharedPathPrefix(['/v1/projects/{ref}/functions', '/v1/projects/{ref}/functions-secrets'])
+    ).toBe('/v1/projects/{ref}/')
+  })
+
+  it('shares only the common leading segments, not any further', () => {
+    expect(getSharedPathPrefix(['/v1/branches', '/v1/organizations'])).toBe('/v1/')
+  })
+
+  it('returns nothing when paths share no leading segment at all', () => {
+    expect(getSharedPathPrefix(['/v1/branches', '/v2/organizations'])).toBe('')
+  })
+
+  it('keeps at least the last segment distinguishing when every path is identical', () => {
+    expect(getSharedPathPrefix(['/v1/projects/{ref}', '/v1/projects/{ref}'])).toBe('/v1/projects/')
+  })
+})
+
+describe('splitEndpointPath', () => {
+  it('splits off the shared prefix when the path starts with it', () => {
+    expect(splitEndpointPath('/v1/projects/{ref}/functions', '/v1/projects/{ref}/')).toEqual({
+      prefix: '/v1/projects/{ref}/',
+      distinguishing: 'functions',
+    })
+  })
+
+  it('treats the whole path as distinguishing when there is no shared prefix', () => {
+    expect(splitEndpointPath('/v1/projects/{ref}', '')).toEqual({
+      prefix: '',
+      distinguishing: '/v1/projects/{ref}',
+    })
+  })
+})
+
+describe('groupCapabilitiesByLevel', () => {
+  it('splits granted capabilities into read-write and read-only', () => {
+    const capabilities = [databaseCapability('readwrite'), advisorsCapability('read')]
+
+    const { readwrite, read } = groupCapabilitiesByLevel(capabilities)
+    expect(readwrite.map((c) => c.entry.key)).toEqual(['project:database'])
+    expect(read.map((c) => c.entry.key)).toEqual(['project:advisors'])
+  })
+})
+
+describe('computeRiskBanner', () => {
+  it('reports Minimal with no active capabilities', () => {
+    const risk = computeRiskBanner({
+      effectiveSelection: {},
+      resourceAccess: 'project',
+      organizationSlugs: [],
+      projectRefs: ['proj-1'],
+    })
+    expect(risk).toEqual({ level: 'Minimal', tone: 'default', summary: 'No capabilities granted.' })
+  })
+
+  it('downgrades a read-only grant so it never outranks read-write on a lower-risk resource', () => {
+    // project:database is catalog-high; read-only downgrades it to medium.
+    const risk = computeRiskBanner({
+      effectiveSelection: { 'project:database': 'read' },
+      resourceAccess: 'project',
+      organizationSlugs: [],
+      projectRefs: ['proj-1'],
+    })
+    expect(risk.level).toBe('Medium')
+  })
+
+  it('takes the max risk across capabilities, not just a write flag', () => {
+    const risk = computeRiskBanner({
+      effectiveSelection: { 'project:database': 'readwrite', 'project:advisors': 'read' },
+      resourceAccess: 'project',
+      organizationSlugs: [],
+      projectRefs: ['proj-1'],
+    })
+    expect(risk.level).toBe('High')
+  })
+
+  it('escalates account-wide read-write access to High', () => {
+    const risk = computeRiskBanner({
+      effectiveSelection: { 'project:advisors': 'readwrite' },
+      resourceAccess: 'account',
+      organizationSlugs: [],
+      projectRefs: [],
+    })
+    expect(risk.level).toBe('High')
+    expect(risk.summary).toContain('across your entire account')
+  })
+
+  it('escalates project scope spanning many bound projects', () => {
+    const narrow = computeRiskBanner({
+      effectiveSelection: { 'project:advisors': 'read' },
+      resourceAccess: 'project',
+      organizationSlugs: [],
+      projectRefs: ['a'],
+    })
+    const broad = computeRiskBanner({
+      effectiveSelection: { 'project:advisors': 'read' },
+      resourceAccess: 'project',
+      organizationSlugs: [],
+      projectRefs: ['a', 'b', 'c', 'd', 'e', 'f'],
+    })
+    expect(narrow.level).toBe('Low')
+    expect(broad.level).toBe('Medium')
+  })
+
+  it('summarizes mixed read and read-write grants with explicit scope breadth', () => {
+    const risk = computeRiskBanner({
+      effectiveSelection: {
+        'project:database': 'readwrite',
+        'project:advisors': 'read',
+        'project:storage': 'read',
+      },
+      resourceAccess: 'project',
+      organizationSlugs: [],
+      projectRefs: ['a', 'b', 'c'],
+    })
+    expect(risk.summary).toBe('Read-write on 1 capability, read on 2, across 3 projects.')
+  })
+
+  it('states scope breadth even when nothing is bound', () => {
+    const risk = computeRiskBanner({
+      effectiveSelection: { 'project:advisors': 'read' },
+      resourceAccess: 'project',
+      organizationSlugs: [],
+      projectRefs: [],
+    })
+    expect(risk.summary).toContain('with no projects bound')
+  })
+})
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/TokenCapabilities.utils.ts b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/TokenCapabilities.utils.ts
new file mode 100644
index 0000000000000..8df712e589cc1
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/TokenCapabilities.utils.ts
@@ -0,0 +1,136 @@
+import {
+  getCatalogEntry,
+  type PermissionSelection,
+  type ResourceAccessMode,
+  type RiskLevel,
+} from '../../AccessToken.permissions'
+import type { CapabilitySummaryEntry } from '../../hooks/useCapabilitySummary'
+import { CAPABILITY_DENSITY_ACCORDION_MAX } from './TokenCapabilities.constants'
+import { pluralize } from '@/lib/helpers'
+
+export type CapabilityDensityTier = 'accordion' | 'dense'
+
+export const getCapabilityDensityTier = (count: number): CapabilityDensityTier =>
+  count <= CAPABILITY_DENSITY_ACCORDION_MAX ? 'accordion' : 'dense'
+
+/**
+ * Longest shared leading path segments across a group of endpoint paths, so the UI can mute the
+ * boilerplate prefix and highlight only the segment that distinguishes each row. Matching is
+ * segment-aware (split on "/") so a shared prefix never cuts a path mid-segment. A single-endpoint
+ * group has nothing to share, so the whole path is treated as the distinguishing part.
+ */
+export const getSharedPathPrefix = (paths: string[]): string => {
+  if (paths.length < 2) return ''
+
+  const segmentLists = paths.map((path) => path.split('/'))
+  const [first, ...rest] = segmentLists
+  let matched = 0
+  while (matched < first.length && rest.every((segments) => segments[matched] === first[matched])) {
+    matched++
+  }
+  // Every path is identical (not just the shortest one fully consumed as a prefix of a longer
+  // one) — back off one segment so each path keeps at least the last as its distinguishing part.
+  if (segmentLists.every((segments) => segments.length === matched)) matched -= 1
+  // matched === 1 only captures the empty segment before the leading "/", shared trivially by
+  // every absolute path — not a meaningful prefix.
+  if (matched <= 1) return ''
+  return first.slice(0, matched).join('/') + '/'
+}
+
+export const splitEndpointPath = (path: string, sharedPrefix: string) =>
+  sharedPrefix !== '' && path.startsWith(sharedPrefix)
+    ? { prefix: sharedPrefix, distinguishing: path.slice(sharedPrefix.length) }
+    : { prefix: '', distinguishing: path }
+
+export const groupCapabilitiesByLevel = (capabilities: CapabilitySummaryEntry[]) => ({
+  readwrite: capabilities.filter((capability) => capability.mode === 'readwrite'),
+  read: capabilities.filter((capability) => capability.mode === 'read'),
+})
+
+export type CapabilityLevelFilter = 'all' | 'read' | 'readwrite'
+
+const RISK_RANK: Record<RiskLevel, number> = { low: 1, medium: 2, high: 3 }
+const RANK_TO_RISK: Record<number, RiskLevel> = { 1: 'low', 2: 'medium', 3: 'high' }
+
+/** One severity tier down, floored at 'low' — a read-only grant never outranks a read-write one. */
+const downgradeRisk = (risk: RiskLevel): RiskLevel => RANK_TO_RISK[Math.max(1, RISK_RANK[risk] - 1)]
+
+export interface RiskBannerResult {
+  level: 'Minimal' | 'Low' | 'Medium' | 'High'
+  tone: 'default' | 'low' | 'medium' | 'high'
+  summary: string
+}
+
+/**
+ * Computes the risk banner from the grant itself, never from a stored string. Severity is a max()
+ * over every granted capability's catalog risk — downgraded a tier for read-only grants so a
+ * read-only high-risk resource never outranks read-write on a medium one — then escalated for
+ * account-wide tokens and resource bindings spanning many orgs/projects.
+ */
+export const computeRiskBanner = ({
+  effectiveSelection,
+  resourceAccess,
+  organizationSlugs,
+  projectRefs,
+}: {
+  effectiveSelection: PermissionSelection
+  resourceAccess: ResourceAccessMode
+  organizationSlugs: string[]
+  projectRefs: string[]
+}): RiskBannerResult => {
+  const active = Object.entries(effectiveSelection).filter(([, mode]) => mode !== 'none')
+
+  if (active.length === 0) {
+    return { level: 'Minimal', tone: 'default', summary: 'No capabilities granted.' }
+  }
+
+  const readWriteCount = active.filter(([, mode]) => mode === 'readwrite').length
+  const readCount = active.length - readWriteCount
+
+  const maxRisk = active.reduce<RiskLevel>((max, [key, mode]) => {
+    const entry = getCatalogEntry(key)
+    if (!entry) return max
+    const effectiveRisk: RiskLevel = mode === 'readwrite' ? entry.risk : downgradeRisk(entry.risk)
+    return RISK_RANK[effectiveRisk] > RISK_RANK[max] ? effectiveRisk : max
+  }, 'low')
+
+  let rank = RISK_RANK[maxRisk]
+  if (resourceAccess === 'account') {
+    rank = Math.max(rank, RISK_RANK.medium) + (readWriteCount > 0 ? 1 : 0)
+  } else if (resourceAccess === 'organization' && organizationSlugs.length > 3) {
+    rank += 1
+  } else if (resourceAccess === 'project' && projectRefs.length > 5) {
+    rank += 1
+  }
+  rank = Math.min(rank, RISK_RANK.high)
+
+  const level = rank === RISK_RANK.high ? 'High' : rank === RISK_RANK.medium ? 'Medium' : 'Low'
+  const tone = rank === RISK_RANK.high ? 'high' : rank === RISK_RANK.medium ? 'medium' : 'low'
+
+  const resourceNoun = resourceAccess === 'organization' ? 'organization' : 'project'
+  const boundCount =
+    resourceAccess === 'organization' ? organizationSlugs.length : projectRefs.length
+  const scopeText =
+    resourceAccess === 'account'
+      ? 'across your entire account'
+      : boundCount === 0
+        ? `with no ${resourceNoun}s bound`
+        : `across ${boundCount} ${pluralize(boundCount, resourceNoun)}`
+
+  const segments: string[] = []
+  if (readWriteCount > 0) {
+    segments.push(
+      `read-write on ${readWriteCount} ${pluralize(readWriteCount, 'capability', 'capabilities')}`
+    )
+  }
+  if (readCount > 0) {
+    segments.push(
+      segments.length === 0
+        ? `read on ${readCount} ${pluralize(readCount, 'capability', 'capabilities')}`
+        : `read on ${readCount}`
+    )
+  }
+  const sentence = `${segments.join(', ')}, ${scopeText}.`
+
+  return { level, tone, summary: sentence.charAt(0).toUpperCase() + sentence.slice(1) }
+}
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenSummaryRows.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenSummaryRows.tsx
deleted file mode 100644
index 140e38cf8ff49..0000000000000
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenSummaryRows.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { Badge, cn } from 'ui'
-
-import {
-  PERMISSION_MODE_LABEL,
-  RISK_DOT_CLASS,
-  RISK_TONE_VARIANT,
-  type OverallRisk,
-  type PermissionCatalogEntry,
-  type PermissionMode,
-} from '../AccessToken.permissions'
-import type { EntryAccess } from '../AccessToken.roles'
-import { ExceedsRoleBadge } from './ExceedsRoleBadge'
-
-/**
- * Presentational pieces of the token view sheet's summary section.
- */
-
-interface CapabilityCategoryListProps {
-  categories: {
-    key: string
-    name: string
-    entries: { entry: PermissionCatalogEntry; mode: PermissionMode }[]
-  }[]
-  /** Per-entry access evaluation; entries flagged 'exceeds-role' get the warning pill. */
-  accessEntries: Record<string, EntryAccess>
-}
-
-export const CapabilityCategoryList = ({
-  categories,
-  accessEntries,
-}: CapabilityCategoryListProps) => (
-  <div className="space-y-4">
-    {categories.map((category) => (
-      <div key={category.key} className="space-y-2">
-        <p className="text-[11px] font-mono uppercase tracking-wide text-foreground-lighter">
-          {category.name}
-        </p>
-        <div className="divide-y">
-          {category.entries.map(({ entry, mode }) => {
-            const entryAccess = accessEntries[entry.key]
-            return (
-              <div key={entry.key} className="flex items-center justify-between gap-2 text-sm py-2">
-                <span className="flex flex-wrap items-center gap-2">
-                  <span
-                    className={cn('h-1.5 w-1.5 shrink-0 rounded-full', RISK_DOT_CLASS[entry.risk])}
-                  />
-                  <span className="text-foreground text-wrap">{entry.name}</span>
-                  {entryAccess?.status === 'exceeds-role' && (
-                    <ExceedsRoleBadge entry={entry} mode={mode} access={entryAccess} />
-                  )}
-                </span>
-                <span className="text-foreground-lighter text-xs font-mono uppercase font-normal text-right">
-                  {PERMISSION_MODE_LABEL[mode]}
-                </span>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    ))}
-  </div>
-)
-
-interface RiskLevelSummaryProps {
-  risk: OverallRisk
-  /** True when some selected permissions exceed the owner's role, so the risk is role-capped. */
-  showRoleCaveat: boolean
-}
-
-export const RiskLevelSummary = ({ risk, showRoleCaveat }: RiskLevelSummaryProps) => (
-  <div className="space-y-1">
-    <span className="flex flex-wrap items-center gap-2">
-      <span className="flex">
-        <Badge variant={RISK_TONE_VARIANT[risk.tone]}>{risk.level} Risk</Badge>
-      </span>
-      <span className="text-sm text-foreground leading-px">
-        {risk.text.replace(`${risk.level} — `, '')}
-      </span>
-    </span>
-    {showRoleCaveat && (
-      <p className="text-xs text-foreground-lighter">
-        Based on what your current role allows this token to do.
-      </p>
-    )}
-  </div>
-)
-
-interface ResourceSummaryItemProps {
-  label: string
-  /** Mono-rendered identifier under the name — the org slug or project ref. */
-  sublabel?: string
-  isInaccessible?: boolean
-}
-
-export const ResourceSummaryItem = ({
-  label,
-  sublabel,
-  isInaccessible = false,
-}: ResourceSummaryItemProps) => (
-  <div className="flex flex-wrap items-center justify-between gap-2 py-2">
-    <span className="flex flex-col gap-0.5">
-      <span
-        className={cn('text-sm', isInaccessible ? 'text-foreground-lighter' : 'text-foreground')}
-      >
-        {label}
-      </span>
-      {sublabel !== undefined && (
-        <span className="font-mono text-xs text-foreground-lighter">{sublabel}</span>
-      )}
-    </span>
-    {isInaccessible && <Badge variant="destructive">No longer accessible</Badge>}
-  </div>
-)
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.test.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.test.tsx
index 97e970b6c51c6..145ded7054ef6 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.test.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.test.tsx
@@ -1,4 +1,4 @@
-import { screen } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/react'
 import { platformComponents as components } from 'api-types'
 import { mockAnimationsApi } from 'jsdom-testing-mocks'
 import { HttpResponse } from 'msw'
@@ -6,6 +6,7 @@ import { beforeEach, describe, expect, test, vi } from 'vitest'
 
 import {
   MOCK_ORG,
+  MOCK_PROJECT,
   mockPermissionsApi,
   mockScopedTokenEnvironment,
   ownerRows,
@@ -68,9 +69,8 @@ describe('ViewTokenSheet', () => {
     })
     renderSheet()
 
-    // Bound org resolves with its name and slug, meaning evaluation completed without warnings.
+    // Bound org resolves with its name, meaning evaluation completed without warnings.
     expect(await screen.findByText(MOCK_ORG.name)).toBeInTheDocument()
-    expect(screen.getByText(MOCK_ORG.slug)).toBeInTheDocument()
     expect(screen.queryByText('Exceeds your role')).toBeNull()
     expect(
       screen.queryByText('Some permissions exceed your current role for the selected resources')
@@ -118,7 +118,6 @@ describe('ViewTokenSheet', () => {
     ).toBeInTheDocument()
     // The lost resource renders as an anonymous count, never its slug.
     expect(await screen.findByText('1 organization')).toBeInTheDocument()
-    expect(await screen.findByText('No longer accessible')).toBeInTheDocument()
     expect(screen.queryByText('departed-org')).toBeNull()
     expect(screen.queryByText("This token's resources no longer exist")).toBeNull()
   })
@@ -140,4 +139,101 @@ describe('ViewTokenSheet', () => {
     ).toBeGreaterThan(0)
     expect(screen.queryByText('This token no longer has access')).toBeNull()
   })
+
+  test('renders capability cards with endpoints, a token-wide MCP tools row, and a risk banner', async () => {
+    mockPermissionsApi(ownerRows(MOCK_ORG.slug))
+    mockToken({
+      ...TOKEN_BASE,
+      scope: 'project',
+      project_refs: [MOCK_PROJECT.ref],
+      permissions: ['advisors_read', 'database_read', 'database_write'],
+    })
+    addAPIMock({
+      method: 'get',
+      // @ts-expect-error Studio API is missing from types
+      path: '/scoped-access-token-permissions',
+      response: () =>
+        HttpResponse.json({
+          scopes: {},
+          endpoints: {
+            'GET /v1/projects/{ref}/advisors/security': [['advisors_read']],
+            'GET /v1/projects/{ref}/database': [['database_read']],
+            'POST /v1/projects/{ref}/database/query': [['database_write']],
+          },
+          mcp_tools: {
+            get_advisors: [['advisors_read']],
+            execute_sql: [['database_write']],
+          },
+        }),
+    })
+    renderSheet()
+
+    expect(await screen.findByText('Advisors')).toBeInTheDocument()
+    expect(screen.getByText('Database')).toBeInTheDocument()
+    expect(screen.getByText('Read-write')).toBeInTheDocument()
+    expect(screen.getByText('Read')).toBeInTheDocument()
+
+    // Enabled tools are token-wide summary rows, visible without expanding any capability card.
+    expect(screen.getByText('get_advisors')).toBeInTheDocument()
+    expect(screen.getByText('execute_sql')).toBeInTheDocument()
+
+    // Capability cards are closed by default — expand both to see their endpoints.
+    fireEvent.click(screen.getByText('Advisors'))
+    fireEvent.click(screen.getByText('Database'))
+
+    // Endpoint rows are copy buttons, so their accessible name carries the method and path.
+    expect(
+      screen.getByRole('button', { name: 'Copy GET /v1/projects/{ref}/advisors/security' })
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Copy GET /v1/projects/{ref}/database' })
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Copy POST /v1/projects/{ref}/database/query' })
+    ).toBeInTheDocument()
+    expect(screen.getByText('POST')).toBeInTheDocument()
+
+    // project:database is catalog-high risk and granted read-write — max() over capabilities.
+    // "High risk" appears twice: the risk banner title, and Database's own Risk Level badge.
+    expect(screen.getAllByText('High risk').length).toBe(2)
+    expect(
+      screen.getByText('Read-write on 1 capability, read on 1, across 1 project.')
+    ).toBeInTheDocument()
+  })
+
+  test('switches to the dense, filterable view at 9+ granted capabilities', async () => {
+    mockPermissionsApi(ownerRows(MOCK_ORG.slug))
+    mockToken({
+      ...TOKEN_BASE,
+      scope: 'project',
+      project_refs: [MOCK_PROJECT.ref],
+      permissions: [
+        'advisors_read',
+        'database_read',
+        'database_write',
+        'backups_read',
+        'custom_domain_read',
+        'edge_functions_read',
+        'storage_read',
+        'realtime_config_read',
+        'vanity_subdomain_read',
+        'infra_add_ons_read',
+      ],
+    })
+    renderSheet()
+
+    expect(await screen.findByText('Database')).toBeInTheDocument()
+    // All granted capabilities render immediately — no truncation.
+    expect(screen.getByText('Storage')).toBeInTheDocument()
+    expect(screen.getByText('Backups')).toBeInTheDocument()
+
+    // The All/Read/Read-write toggle sits next to the "Capabilities" title, not a text filter.
+    fireEvent.click(screen.getByRole('button', { name: 'Read-write' }))
+    expect(screen.getByText('Database')).toBeInTheDocument()
+    expect(screen.queryByText('Backups')).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Read' }))
+    expect(screen.queryByText('Database')).toBeNull()
+    expect(screen.getByText('Backups')).toBeInTheDocument()
+  })
 })
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.tsx
index edb9183e4567b..2b8b39ab309d7 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.tsx
@@ -1,22 +1,32 @@
 import dayjs from 'dayjs'
-import { useMemo } from 'react'
-import { cn, ScrollArea, Sheet, SheetContent, SheetHeader } from 'ui'
+import { useMemo, useState } from 'react'
+import { Badge, cn, ScrollArea, Sheet, SheetContent, SheetHeader } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 import { TimestampInfo } from 'ui-patterns/TimestampInfo'
 
 import { TOKEN_DENIED_REMEDIATION } from '../AccessToken.constants'
-import {
-  computeOverallRisk,
-  PERMISSION_MODE_LABEL,
-  scopesToSelection,
-  type ResourceAccessMode,
-} from '../AccessToken.permissions'
+import { scopesToSelection, type ResourceAccessMode } from '../AccessToken.permissions'
 import { useCapabilitySummary } from '../hooks/useCapabilitySummary'
 import { useOrgAndProjectData } from '../hooks/useOrgAndProjectData'
 import { useTokenAccessEvaluation } from '../hooks/useTokenAccessEvaluation'
-import { CapabilityCategoryList, ResourceSummaryItem, RiskLevelSummary } from './TokenSummaryRows'
+import {
+  ResourceAccessPills,
+  useResourceAccessWrap,
+  type ResourceAccessPillItem,
+} from './ResourceAccessPills'
+import { CapabilitiesSection } from './TokenCapabilities/CapabilitiesSection'
+import { CapabilityLevelToggle } from './TokenCapabilities/CapabilityLevelToggle'
+import { RiskBanner } from './TokenCapabilities/RiskBanner'
+import {
+  computeRiskBanner,
+  getCapabilityDensityTier,
+  type CapabilityLevelFilter,
+} from './TokenCapabilities/TokenCapabilities.utils'
 import { DocsButton } from '@/components/ui/DocsButton'
-import { useGetEnabledEndpointsForCapability } from '@/data/scoped-access-tokens/permission-scope-map-query'
+import {
+  getEnabledMcpTools,
+  useGetEnabledEndpointsForCapability,
+} from '@/data/scoped-access-tokens/permission-scope-map-query'
 import { useScopedAccessTokenQuery } from '@/data/scoped-access-tokens/scoped-access-token-query'
 import { DOCS_URL } from '@/lib/constants'
 import { pluralize } from '@/lib/helpers'
@@ -82,21 +92,27 @@ export function ViewTokenSheet({ visible, tokenId, onClose }: ViewTokenSheetProp
   const boundResourcesDeletedText = `Every ${resourceNoun} this token was bound to has been deleted`
 
   const risk = useMemo(
-    () => computeOverallRisk(access.effectiveSelection, resourceAccess),
-    [access.effectiveSelection, resourceAccess]
+    () =>
+      computeRiskBanner({
+        effectiveSelection: access.effectiveSelection,
+        resourceAccess,
+        organizationSlugs: tokenOrganizationSlugs,
+        projectRefs: tokenProjectRefs,
+      }),
+    [access.effectiveSelection, resourceAccess, tokenOrganizationSlugs, tokenProjectRefs]
   )
 
-  const hasCapabilities = grantedScopes.length > 0
-
-  const { activeByCategory, mcpTools, capabilityGroups } = useCapabilitySummary({
+  const { capabilities } = useCapabilitySummary({
     selection,
     grantedScopes,
     permissionScopeMap,
   })
+  const capabilityTier = getCapabilityDensityTier(capabilities.length)
+  const [levelFilter, setLevelFilter] = useState<CapabilityLevelFilter>('all')
 
-  // Accessible resources render with their name and ref/slug. Resources the user has lost access
-  // to are aggregated into an anonymous count — their identifiers aren't shown.
-  const resourceSummary = useMemo(() => {
+  // Accessible resources render with their name. Resources the user has lost access to are
+  // aggregated into an anonymous count — their identifiers aren't shown.
+  const resourceItems = useMemo<ResourceAccessPillItem[]>(() => {
     const inaccessibleCountItem = (lostCount: number, noun: string) =>
       lostCount === 0
         ? []
@@ -104,7 +120,6 @@ export function ViewTokenSheet({ visible, tokenId, onClose }: ViewTokenSheetProp
             {
               key: 'inaccessible',
               label: `${lostCount} ${pluralize(lostCount, noun)}`,
-              sublabel: undefined,
               isInaccessible: true,
             },
           ]
@@ -114,42 +129,26 @@ export function ViewTokenSheet({ visible, tokenId, onClose }: ViewTokenSheetProp
       const accessible = tokenProjectRefs.flatMap((ref) => {
         const name = projectsByRef.get(ref)?.name
         if (name === undefined) return []
-        return [{ key: ref, label: name, sublabel: ref, isInaccessible: false }]
+        return [{ key: ref, label: name }]
       })
-      return {
-        title: 'Projects',
-        items: [
-          ...accessible,
-          ...inaccessibleCountItem(access.inaccessibleProjectRefs.length, 'project'),
-        ],
-      }
+      return [
+        ...accessible,
+        ...inaccessibleCountItem(access.inaccessibleProjectRefs.length, 'project'),
+      ]
     }
     if (resourceAccess === 'organization') {
       const organizationsBySlug = new Map(organizations.map((org) => [org.slug, org]))
       const accessible = tokenOrganizationSlugs.flatMap((slug) => {
         const name = organizationsBySlug.get(slug)?.name
         if (name === undefined) return []
-        return [{ key: slug, label: name, sublabel: slug, isInaccessible: false }]
+        return [{ key: slug, label: name }]
       })
-      return {
-        title: 'Organizations',
-        items: [
-          ...accessible,
-          ...inaccessibleCountItem(access.inaccessibleOrgSlugs.length, 'organization'),
-        ],
-      }
-    }
-    return {
-      title: 'Account',
-      items: [
-        {
-          key: 'account',
-          label: 'Account-level access',
-          sublabel: undefined,
-          isInaccessible: false,
-        },
-      ],
+      return [
+        ...accessible,
+        ...inaccessibleCountItem(access.inaccessibleOrgSlugs.length, 'organization'),
+      ]
     }
+    return [{ key: 'account', label: 'Account-level access' }]
   }, [
     resourceAccess,
     tokenProjectRefs,
@@ -160,82 +159,12 @@ export function ViewTokenSheet({ visible, tokenId, onClose }: ViewTokenSheetProp
     access.inaccessibleOrgSlugs,
   ])
 
-  const rows: [string, React.ReactNode][] = token
-    ? [
-        [
-          'Created',
-          token.created_at ? (
-            <TimestampInfo
-              utcTimestamp={token.created_at}
-              label={dayjs(token.created_at).format('DD MMM YYYY')}
-              className="text-sm"
-            />
-          ) : (
-            <span className="text-foreground-lighter">Unknown</span>
-          ),
-        ],
-        [
-          'Last used',
-          token.last_used_at ? (
-            <TimestampInfo
-              utcTimestamp={token.last_used_at}
-              label={dayjs(token.last_used_at).fromNow()}
-              className="text-sm"
-            />
-          ) : (
-            <span className="text-foreground-lighter">Never</span>
-          ),
-        ],
-        [
-          'Expires',
-          token.expires_at ? (
-            <TimestampInfo
-              utcTimestamp={token.expires_at}
-              label={dayjs(token.expires_at).format('DD MMM YYYY')}
-              className="text-sm"
-            />
-          ) : (
-            <span className="text-foreground-lighter">Never</span>
-          ),
-        ],
-        [
-          'Resource access',
-          <div key="resource-access" className="space-y-2">
-            <p className="text-[11px] font-mono uppercase tracking-wide text-foreground-lighter">
-              {resourceSummary.title}
-            </p>
-            <div className="divide-y">
-              {resourceSummary.items.length === 0 && hasNoBoundResources && (
-                <p className="py-2 text-sm text-foreground-lighter">{boundResourcesDeletedText}</p>
-              )}
-              {resourceSummary.items.length === 0 && !hasNoBoundResources && (
-                <p className="py-2 text-sm text-foreground-lighter">-</p>
-              )}
-              {resourceSummary.items.map((item) => (
-                <ResourceSummaryItem
-                  key={item.key}
-                  label={item.label}
-                  sublabel={item.sublabel}
-                  isInaccessible={item.isInaccessible}
-                />
-              ))}
-            </div>
-          </div>,
-        ],
-        [
-          'Capabilities',
-          hasCapabilities ? (
-            <CapabilityCategoryList categories={activeByCategory} accessEntries={access.entries} />
-          ) : (
-            <span className="text-foreground-lighter">No capabilities selected</span>
-          ),
-        ],
-        [
-          'Risk level',
-          <RiskLevelSummary key="risk" risk={risk} showRoleCaveat={hasExceedingCapabilities} />,
-        ],
-      ]
-    : []
+  const enabledMcpTools = useMemo(
+    () => getEnabledMcpTools({ grantedScopes, permissionScopeMap }).sort(),
+    [grantedScopes, permissionScopeMap]
+  )
+
+  const { containerRef: pillsRef, isWrapped: isResourceAccessWrapped } = useResourceAccessWrap()
 
   return (
     <Sheet open={visible} onOpenChange={() => onClose()}>
@@ -244,7 +173,11 @@ export function ViewTokenSheet({ visible, tokenId, onClose }: ViewTokenSheetProp
         size="default"
         className="flex h-full flex-col gap-0 sm:w-[656px] lg:w-[800px]"
       >
-        <SheetHeader className={cn('flex flex-row justify-between gap-x-4 items-center border-b')}>
+        <SheetHeader
+          className={cn(
+            'flex flex-col md:flex-row justify-between gap-4 items-start md:items-center border-b'
+          )}
+        >
           <p className="truncate" title={`View access for ${token?.name}`}>
             View access for {token?.name}
           </p>
@@ -261,7 +194,10 @@ export function ViewTokenSheet({ visible, tokenId, onClose }: ViewTokenSheetProp
             />
           </div>
         </SheetHeader>
-        <ScrollArea className="flex-1">
+        {/* Radix wraps viewport children in an inline-styled display:table div that grows to fit
+            the widest child, which would let one long endpoint path expand the sheet instead of
+            clipping — force it back to block so widths are bounded and rows can truncate. */}
+        <ScrollArea className="flex-1 [&>[data-radix-scroll-area-viewport]>div]:block!">
           <div className="space-y-6 px-5 sm:px-6 py-6">
             {isTokenLoading && (
               <div className="flex items-center justify-center py-8">
@@ -300,74 +236,112 @@ export function ViewTokenSheet({ visible, tokenId, onClose }: ViewTokenSheetProp
                     description="A token only works with permissions you currently hold. Permissions marked below will be denied until your role includes them."
                   />
                 )}
+
+                <div className="flex flex-col gap-3">
+                  <h3 className="text-sm">Risk assessment</h3>
+                  <RiskBanner risk={risk} showRoleCaveat={hasExceedingCapabilities} />
+                </div>
+
                 <div className="flex flex-col gap-3">
                   <h3 className="text-sm">Token summary</h3>
                   <dl className="divide-y rounded-md border bg-surface-300">
-                    {rows.map(([key, value]) => (
-                      <div key={key} className="grid grid-cols-3 gap-4 px-4 py-3">
-                        <dt className="text-sm text-foreground-lighter">{key}</dt>
-                        <dd className="col-span-2 text-sm text-foreground">{value}</dd>
-                      </div>
-                    ))}
+                    <div className="flex items-center justify-between gap-4 px-4 py-3">
+                      <dt className="shrink-0 text-sm text-foreground-lighter">Created</dt>
+                      <dd className="text-sm text-foreground">
+                        {token.created_at ? (
+                          <TimestampInfo
+                            utcTimestamp={token.created_at}
+                            label={dayjs(token.created_at).fromNow()}
+                            className="text-sm"
+                          />
+                        ) : (
+                          <span className="text-foreground-lighter">Unknown</span>
+                        )}
+                      </dd>
+                    </div>
+                    <div className="flex items-center justify-between gap-4 px-4 py-3">
+                      <dt className="shrink-0 text-sm text-foreground-lighter">Last used</dt>
+                      <dd className="text-sm text-foreground">
+                        {token.last_used_at ? (
+                          <TimestampInfo
+                            utcTimestamp={token.last_used_at}
+                            label={dayjs(token.last_used_at).fromNow()}
+                            className="text-sm"
+                          />
+                        ) : (
+                          <span className="text-foreground-lighter">Never</span>
+                        )}
+                      </dd>
+                    </div>
+                    <div className="flex items-center justify-between gap-4 px-4 py-3">
+                      <dt className="shrink-0 text-sm text-foreground-lighter">Expires</dt>
+                      <dd className="text-sm text-foreground">
+                        {token.expires_at ? (
+                          <TimestampInfo
+                            utcTimestamp={token.expires_at}
+                            label={dayjs(token.expires_at).fromNow()}
+                            className="text-sm"
+                          />
+                        ) : (
+                          <span className="text-foreground-lighter">Never</span>
+                        )}
+                      </dd>
+                    </div>
+                    <div
+                      className={cn(
+                        'flex flex-col items-start justify-between gap-4 px-4 py-3 sm:flex-row',
+                        isResourceAccessWrapped ? 'sm:items-start' : 'sm:items-center'
+                      )}
+                    >
+                      <dt className="shrink-0 text-sm text-foreground-lighter">Resource access</dt>
+                      <dd className="w-full min-w-0 text-sm text-foreground sm:w-auto sm:flex-1">
+                        <div
+                          ref={pillsRef}
+                          className="flex flex-wrap justify-start gap-1.5 sm:justify-end"
+                        >
+                          <ResourceAccessPills
+                            resourceAccess={resourceAccess}
+                            items={resourceItems}
+                            emptyText={hasNoBoundResources ? boundResourcesDeletedText : '-'}
+                          />
+                        </div>
+                      </dd>
+                    </div>
                   </dl>
                 </div>
 
-                {hasCapabilities && (
-                  <>
-                    <div className="flex flex-col gap-3">
-                      <h3 className="text-sm">Management API endpoints enabled</h3>
-                      {capabilityGroups.length === 0 ? (
-                        <p className="text-xs text-foreground-light">
-                          No Management API endpoints are enabled by the selected capabilities.
-                        </p>
-                      ) : (
-                        capabilityGroups.map(({ entry, mode, endpoints }) => (
-                          <div key={entry.key} className="rounded-md border">
-                            <div className="flex items-center justify-between border-b bg-surface-100 px-3 py-2">
-                              <span className="text-xs text-foreground">{entry.name}</span>
-                              <span className="text-[11px] font-mono uppercase text-foreground-lighter">
-                                {PERMISSION_MODE_LABEL[mode]}
-                              </span>
-                            </div>
-                            <div className="divide-y">
-                              {endpoints.map(([method, path]) => (
-                                <div
-                                  key={`${method} ${path}`}
-                                  className="flex items-center gap-2 px-3 py-1.5 font-mono text-xs"
-                                >
-                                  <span className="w-14 shrink-0 text-foreground-light">
-                                    {method}
-                                  </span>
-                                  <span className="text-foreground">{path}</span>
-                                </div>
-                              ))}
-                            </div>
-                          </div>
-                        ))
-                      )}
-                    </div>
+                <div className="flex flex-col gap-3">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-sm">Capabilities</h3>
+                    {capabilityTier === 'dense' && (
+                      <CapabilityLevelToggle value={levelFilter} onChange={setLevelFilter} />
+                    )}
+                  </div>
+                  <CapabilitiesSection
+                    capabilities={capabilities}
+                    accessEntries={access.entries}
+                    levelFilter={levelFilter}
+                  />
+                </div>
 
-                    <div className="flex flex-col gap-3">
-                      <h3 className="text-sm">MCP tools</h3>
-                      {mcpTools.length === 0 ? (
-                        <p className="text-xs text-foreground-light">
-                          No MCP tools are enabled by the selected capabilities.
-                        </p>
-                      ) : (
-                        <div className="flex flex-wrap gap-2">
-                          {mcpTools.map((tool) => (
-                            <span
-                              key={tool}
-                              className="rounded border bg-surface-100 px-2 py-1 font-mono text-xs text-foreground-light"
-                            >
-                              {tool}
-                            </span>
-                          ))}
-                        </div>
-                      )}
+                <div className="flex flex-col gap-3">
+                  <h3 className="text-sm">Available MCP tools</h3>
+                  {enabledMcpTools.length === 0 ? (
+                    <span className="text-sm text-foreground-lighter">No MCP tools enabled</span>
+                  ) : (
+                    <div className="flex flex-wrap gap-1.5">
+                      {enabledMcpTools.map((tool) => (
+                        <Badge
+                          key={tool}
+                          variant="default"
+                          className="px-2.5 py-1 font-mono text-xs normal-case tracking-normal"
+                        >
+                          {tool}
+                        </Badge>
+                      ))}
                     </div>
-                  </>
-                )}
+                  )}
+                </div>
               </>
             )}
           </div>
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/hooks/useCapabilitySummary.ts b/apps/studio/components/interfaces/Account/AccessTokens/hooks/useCapabilitySummary.ts
index 76b78959d4a75..28e3dcccad7d4 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/hooks/useCapabilitySummary.ts
+++ b/apps/studio/components/interfaces/Account/AccessTokens/hooks/useCapabilitySummary.ts
@@ -2,15 +2,15 @@ import { useMemo } from 'react'
 
 import {
   getEntryScopes,
-  PERMISSION_CATALOG_BY_CATEGORY,
+  PERMISSION_CATALOG,
   type PermissionCatalogEntry,
   type PermissionMode,
   type PermissionSelection,
 } from '../AccessToken.permissions'
 import {
   getEnabledEndpointsForCapability,
-  getEnabledMcpTools,
-  PermissionScopeMap,
+  type EnabledEndpoint,
+  type PermissionScopeMap,
 } from '@/data/scoped-access-tokens/permission-scope-map-query'
 
 interface UseCapabilitySummaryArgs {
@@ -19,49 +19,37 @@ interface UseCapabilitySummaryArgs {
   permissionScopeMap: PermissionScopeMap | undefined
 }
 
+export interface CapabilitySummaryEntry {
+  entry: PermissionCatalogEntry
+  mode: PermissionMode
+  endpoints: EnabledEndpoint[]
+}
+
 /**
- * Selection-derived summary data for the token view sheet: selected entries grouped by catalog
- * category, the Management API endpoints each capability enables, and the enabled MCP tools.
+ * Selection-derived summary data for the token view sheet: every granted catalog entry paired with
+ * the Management API endpoints it enables.
  */
 export const useCapabilitySummary = ({
   selection,
   grantedScopes,
   permissionScopeMap,
 }: UseCapabilitySummaryArgs) => {
-  const activeByCategory = useMemo(
-    () =>
-      PERMISSION_CATALOG_BY_CATEGORY.map((category) => ({
-        ...category,
-        entries: category.entries
-          .map((entry) => ({ entry, mode: selection[entry.key] ?? 'none' }))
-          .filter(({ mode }) => mode !== 'none'),
-      })).filter((category) => category.entries.length > 0),
-    [selection]
-  )
-
-  const mcpTools = useMemo(
-    () => getEnabledMcpTools({ grantedScopes, permissionScopeMap }),
-    [grantedScopes, permissionScopeMap]
-  )
+  const capabilities = useMemo(() => {
+    const result: CapabilitySummaryEntry[] = []
+    for (const entry of PERMISSION_CATALOG) {
+      const mode = selection[entry.key] ?? 'none'
+      if (mode === 'none') continue
 
-  const capabilityGroups = useMemo(() => {
-    const groups: { entry: PermissionCatalogEntry; mode: PermissionMode; endpoints: string[][] }[] =
-      []
-    for (const category of activeByCategory) {
-      for (const { entry, mode } of category.entries) {
-        const capabilityScopes = getEntryScopes(entry, mode)
-        const endpoints = getEnabledEndpointsForCapability({
-          capabilityScopes,
-          allGrantedScopes: grantedScopes,
-          permissionScopeMap,
-        })
-        if (endpoints.length > 0) {
-          groups.push({ entry, mode, endpoints: endpoints.map((e) => [e.method, e.path]) })
-        }
-      }
+      const capabilityScopes = getEntryScopes(entry, mode)
+      const endpoints = getEnabledEndpointsForCapability({
+        capabilityScopes,
+        allGrantedScopes: grantedScopes,
+        permissionScopeMap,
+      })
+      result.push({ entry, mode, endpoints })
     }
-    return groups
-  }, [activeByCategory, grantedScopes, permissionScopeMap])
+    return result
+  }, [selection, grantedScopes, permissionScopeMap])
 
-  return { activeByCategory, mcpTools, capabilityGroups }
+  return { capabilities }
 }
diff --git a/apps/studio/components/interfaces/ConnectSheet/ConnectModeButton.tsx b/apps/studio/components/interfaces/ConnectSheet/ConnectModeButton.tsx
index 3c6fd80b98ef7..2d891eacbc1af 100644
--- a/apps/studio/components/interfaces/ConnectSheet/ConnectModeButton.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/ConnectModeButton.tsx
@@ -30,9 +30,8 @@ const connectModeButtonVariants = cva(
   {
     variants: {
       selected: {
-        true: 'z-1 border-foreground-muted bg-surface-300 ring-1 ring-border',
-        false:
-          'hover:z-1 hover:border-foreground-muted hover:bg-background dark:hover:bg-surface-200',
+        true: 'z-1 border-control-hover bg-surface-300',
+        false: 'hover:z-1 hover:border-control-hover hover:bg-background dark:hover:bg-surface-200',
       },
       // Narrow 2-col outer corners
       topLeft: {
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
index 629633df830ad..798e9e25ddb5b 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
@@ -82,10 +82,8 @@ const DuckLakeModeSelector = ({
             onClick={() => onChange(option.value)}
             className={cn(
               'relative flex flex-col gap-y-3 rounded-md border p-4 text-left transition',
-              'hover:border-foreground-muted',
-              selected
-                ? 'border-foreground-muted bg-surface-300 ring-1 ring-border'
-                : 'border-default bg-surface-100'
+              'hover:border-control-hover',
+              selected ? 'border-control-hover bg-surface-300' : 'border-default bg-surface-100'
             )}
           >
             <div className="flex items-start justify-between">
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
index d0568f8dfa4c2..2ca4c01d0e65c 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
@@ -288,7 +288,7 @@ export function ComputeSizeField({ form, disabled }: ComputeSizeFieldProps) {
                 <div
                   className={cn(
                     'relative text-sm text-left flex flex-col gap-0 px-0 py-3 w-full h-[110px]',
-                    'bg-overlay rounded-md border p-2 hover:border-foreground-muted'
+                    'bg-overlay rounded-md border p-2 hover:border-control-hover'
                   )}
                 >
                   <SupportLink
diff --git a/apps/studio/components/interfaces/Explorer/ChatEditor.tsx b/apps/studio/components/interfaces/Explorer/ExplorerChatTab.tsx
similarity index 98%
rename from apps/studio/components/interfaces/Explorer/ChatEditor.tsx
rename to apps/studio/components/interfaces/Explorer/ExplorerChatTab.tsx
index bd0e21e38514f..e2b2ef248c649 100644
--- a/apps/studio/components/interfaces/Explorer/ChatEditor.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerChatTab.tsx
@@ -12,7 +12,7 @@ import { useAiAssistantState, useAiAssistantStateSnapshot } from '@/state/ai-ass
 import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
 import { createTabId, useTabsStateSnapshot } from '@/state/tabs'
 
-export const ChatEditor = () => {
+export const ExplorerChatTab = () => {
   const { id, ref } = useParams()
   const router = useRouter()
   const tabs = useTabsStateSnapshot()
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerHome.tsx b/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx
similarity index 99%
rename from apps/studio/components/interfaces/Explorer/ExplorerHome.tsx
rename to apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx
index ed15f4b7f7e5e..583d4a7e3b870 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerHome.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx
@@ -6,7 +6,7 @@ import { ActionCard } from '@/components/layouts/Tabs/ActionCard'
 import { AssistantChatForm } from '@/components/ui/AIAssistantPanel/AssistantChatForm'
 import type { AssistantModel } from '@/state/ai-assistant-state'
 
-export const ExplorerHome = () => {
+export const ExplorerHomeTab = () => {
   const { createNotebook } = useCreateNotebook()
   const { createQuery } = useCreateQuery()
   const { createChat } = useCreateChat()
diff --git a/apps/studio/components/interfaces/Explorer/NotebookEditor.tsx b/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx
similarity index 80%
rename from apps/studio/components/interfaces/Explorer/NotebookEditor.tsx
rename to apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx
index 4ded5d995f773..adc39e12076bd 100644
--- a/apps/studio/components/interfaces/Explorer/NotebookEditor.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx
@@ -13,6 +13,7 @@ import {
 } from '@dnd-kit/sortable'
 import { useParams } from 'common'
 import { FileText, Notebook, NotebookText, Play, Save, SquareCode } from 'lucide-react'
+import { useRef, useState } from 'react'
 import { AiIconAnimation, Button } from 'ui'
 import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
 
@@ -25,13 +26,14 @@ import {
 } from './ExplorerToolbar'
 import { MarkdownCell } from './MarkdownCell'
 import { QueryCell } from './QueryCell'
+import { type QueryEditorHandle } from './QueryEditor'
 import { createMarkdownCellSkeleton, createQueryCellSkeleton } from './utils'
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
 import { isQueryCell } from '@/data/content/notebooks/notebook-schema'
 import { useCurrentNotebook, useNotebooksStateSnapshot } from '@/state/notebooks/notebooks-state'
 import { createTabId, useTabsStateSnapshot } from '@/state/tabs'
 
-export const NotebookEditor = () => {
+export const ExplorerNotebookTab = () => {
   const { id } = useParams()
   const tabs = useTabsStateSnapshot()
   const snap = useNotebooksStateSnapshot()
@@ -39,6 +41,10 @@ export const NotebookEditor = () => {
   const currentNotebook = useCurrentNotebook()
   const { name, content } = currentNotebook?.notebook ?? {}
   const cells = content?.cells ?? []
+  const queryCellIds = cells.filter(isQueryCell).map((cell) => cell.id)
+
+  const [isRunningNotebook, setIsRunningNotebook] = useState(false)
+  const queryCellRefs = useRef(new Map<string, QueryEditorHandle>())
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
@@ -53,6 +59,17 @@ export const NotebookEditor = () => {
     }
   }
 
+  const handleRunNotebook = async () => {
+    setIsRunningNotebook(true)
+    try {
+      await Promise.allSettled(
+        queryCellIds.map((cellId) => queryCellRefs.current.get(cellId)?.run())
+      )
+    } finally {
+      setIsRunningNotebook(false)
+    }
+  }
+
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event
     if (!id || !over || active.id === over.id) return
@@ -81,7 +98,14 @@ export const NotebookEditor = () => {
           <ExplorerToolbarAction icon={<AiIconAnimation size={16} />}>
             Analyze
           </ExplorerToolbarAction>
-          <ExplorerToolbarAction icon={<Play />} tooltip="Run notebook" />
+          <ExplorerToolbarAction
+            aria-label="Run notebook"
+            icon={<Play />}
+            tooltip="Run notebook"
+            loading={isRunningNotebook}
+            disabled={isRunningNotebook || queryCellIds.length === 0}
+            onClick={handleRunNotebook}
+          />
           <ExplorerToolbarAction icon={<Save />} tooltip="Save changes" />
         </ExplorerToolbarActions>
       </ExplorerToolbar>
@@ -115,7 +139,14 @@ export const NotebookEditor = () => {
                   <div className="flex flex-col gap-y-4">
                     {cells.map((cell) =>
                       isQueryCell(cell) ? (
-                        <QueryCell key={cell.id} cell={cell} />
+                        <QueryCell
+                          key={cell.id}
+                          cell={cell}
+                          ref={(instance) => {
+                            if (instance) queryCellRefs.current.set(cell.id, instance)
+                            else queryCellRefs.current.delete(cell.id)
+                          }}
+                        />
                       ) : (
                         <MarkdownCell key={cell.id} cell={cell} />
                       )
diff --git a/apps/studio/components/interfaces/Explorer/QueryTab.tsx b/apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx
similarity index 99%
rename from apps/studio/components/interfaces/Explorer/QueryTab.tsx
rename to apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx
index 306b03b41712b..69b05ad8388fe 100644
--- a/apps/studio/components/interfaces/Explorer/QueryTab.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx
@@ -12,7 +12,7 @@ import { useControlledRoleImpersonationState } from '@/state/role-impersonation-
 import { createTabId, TabsStateContext } from '@/state/tabs'
 
 /** Query-tab lifecycle adapter around the shared QueryEditor. */
-export const QueryTab = () => {
+export const ExplorerQueryTab = () => {
   const { id, ref } = useParams()
   const router = useRouter()
   const tabs = useContext(TabsStateContext)
diff --git a/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreview.test.tsx b/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreview.test.tsx
new file mode 100644
index 0000000000000..e12d35d52b173
--- /dev/null
+++ b/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreview.test.tsx
@@ -0,0 +1,86 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { NotebookPreview } from './NotebookPreview'
+import type { NotebookCellDiffEntry } from '@/data/content/notebooks/notebook-operations'
+import type { AgentCell, CellWire } from '@/data/content/notebooks/notebook-schema'
+import { customRender as render } from '@/tests/lib/custom-render'
+
+const wireMarkdownCell = (id: string, text: string): CellWire => ({
+  _tag: 'markdown_cell',
+  id,
+  text,
+})
+
+const agentMarkdownCell = (text: string): AgentCell => ({ _tag: 'markdown_cell', text })
+
+const wireDatabaseCell = (id: string, database_identifier?: string): CellWire => ({
+  _tag: 'database_cell',
+  id,
+  sql: 'select 1',
+  row_limit: 100,
+  database_identifier,
+})
+
+const agentDatabaseCell = (database_identifier?: string): AgentCell => ({
+  _tag: 'database_cell',
+  sql: 'select 1',
+  row_limit: 100,
+  database_identifier,
+})
+
+describe('NotebookPreview', () => {
+  // The whole safety argument for this feature reduces to this: agent-authored markdown text
+  // is rendered as literal source (via CodeBlock), never interpreted into real DOM nodes. A
+  // future refactor that swaps in <Markdown> would break this silently.
+  it('never renders agent-authored cell content as real img/link/src DOM nodes', () => {
+    const adversarialText =
+      '![x](https://evil.example/) [y](https://evil.example/) <img src=x onerror=1>'
+    const entries: NotebookCellDiffEntry[] = [
+      { _tag: 'added', cell: agentMarkdownCell(adversarialText), operationIndex: 0 },
+    ]
+
+    const { container } = render(<NotebookPreview entries={entries} mode="update" />)
+
+    expect(container.querySelectorAll('img')).toHaveLength(0)
+    expect(container.querySelectorAll('[href]')).toHaveLength(0)
+    expect(container.querySelectorAll('[src]')).toHaveLength(0)
+  })
+
+  it('renders the create-mode header summary', () => {
+    const entries: NotebookCellDiffEntry[] = [
+      { _tag: 'unchanged', cell: wireMarkdownCell('a', 'one') },
+      { _tag: 'unchanged', cell: wireMarkdownCell('b', 'two') },
+    ]
+
+    render(<NotebookPreview entries={entries} mode="create" />)
+
+    expect(screen.getByText('2 cells')).toBeInTheDocument()
+  })
+
+  it('surfaces a metadata-only change on a replaced cell even when the sql is unchanged', () => {
+    const entries: NotebookCellDiffEntry[] = [
+      {
+        _tag: 'replaced',
+        before: wireDatabaseCell('cell-1', 'primary'),
+        after: agentDatabaseCell('replica-3'),
+        operationIndex: 0,
+      },
+    ]
+
+    render(<NotebookPreview entries={entries} mode="update" />)
+
+    expect(screen.getByText('Database: primary → Database: replica-3')).toBeInTheDocument()
+  })
+
+  it('hides entries past the limit behind a "Show N more" button', async () => {
+    const entries: NotebookCellDiffEntry[] = Array.from({ length: 7 }, (_, index) => ({
+      _tag: 'unchanged' as const,
+      cell: wireMarkdownCell(`cell-${index}`, `text-${index}`),
+    }))
+
+    render(<NotebookPreview entries={entries} mode="create" />)
+
+    expect(screen.getByText('Show 2 more cells')).toBeInTheDocument()
+  })
+})
diff --git a/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreview.tsx b/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreview.tsx
new file mode 100644
index 0000000000000..62b8754e1e1ad
--- /dev/null
+++ b/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreview.tsx
@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { Button } from 'ui'
+
+import {
+  formatNotebookDiffSummary,
+  getEntryKey,
+  summarizeNotebookDiff,
+} from './NotebookPreview.utils'
+import { NotebookPreviewCell } from './NotebookPreviewCell'
+import type { NotebookCellDiffEntry } from '@/data/content/notebooks/notebook-operations'
+
+export interface NotebookPreviewProps {
+  entries: NotebookCellDiffEntry[]
+  mode: 'create' | 'update'
+}
+
+const VISIBLE_ENTRY_LIMIT = 5
+
+/**
+ * Read-only preview of a proposed notebook create/update, rendered from a pre-computed diff.
+ * Pure presentational component: no data fetching, no approval or notebook-editor state — see
+ * `deriveNotebookDiff` for how `entries` is produced.
+ */
+export const NotebookPreview = ({ entries, mode }: NotebookPreviewProps) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const summary = summarizeNotebookDiff(entries, mode)
+  const visibleEntries = isExpanded ? entries : entries.slice(0, VISIBLE_ENTRY_LIMIT)
+  const hiddenCount = entries.length - visibleEntries.length
+
+  return (
+    <div className="flex flex-col gap-2">
+      <p className="text-xs text-foreground-light font-mono">
+        {formatNotebookDiffSummary(summary)}
+      </p>
+      <div className="flex flex-col gap-1.5">
+        {visibleEntries.map((entry) => (
+          <NotebookPreviewCell key={getEntryKey(entry)} entry={entry} />
+        ))}
+      </div>
+      {hiddenCount > 0 && (
+        <Button variant="text" className="w-full" onClick={() => setIsExpanded(true)}>
+          Show {hiddenCount} more cell{hiddenCount === 1 ? '' : 's'}
+        </Button>
+      )}
+    </div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreview.utils.test.ts b/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreview.utils.test.ts
new file mode 100644
index 0000000000000..5f4523daea56a
--- /dev/null
+++ b/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreview.utils.test.ts
@@ -0,0 +1,182 @@
+import dayjs from 'dayjs'
+import { describe, expect, it } from 'vitest'
+
+import {
+  formatNotebookDiffSummary,
+  formatTimeRange,
+  getCellLabel,
+  getCellMetadataLine,
+  getEntryKey,
+  summarizeNotebookDiff,
+} from './NotebookPreview.utils'
+import type { NotebookCellDiffEntry } from '@/data/content/notebooks/notebook-operations'
+import type { AgentCell, CellWire } from '@/data/content/notebooks/notebook-schema'
+import { isoDateTimeString } from '@/lib/iso-datetime'
+
+const wireMarkdownCell = (id: string, text = 'hello'): CellWire => ({
+  _tag: 'markdown_cell',
+  id,
+  text,
+})
+
+const agentMarkdownCell = (text = 'hello'): AgentCell => ({ _tag: 'markdown_cell', text })
+
+const wireDatabaseCell = (id: string, title?: string, database_identifier?: string): CellWire => ({
+  _tag: 'database_cell',
+  id,
+  title,
+  sql: 'select 1',
+  row_limit: 100,
+  database_identifier,
+})
+
+const wireLogCell = (id: string): CellWire => ({
+  _tag: 'log_cell',
+  id,
+  sql: 'select 1',
+  time_range: { _tag: 'relative_time_range', unit: 'day', amount: 7 },
+})
+
+describe('getEntryKey', () => {
+  it('keys unchanged, removed, and moved entries off the cell id', () => {
+    expect(getEntryKey({ _tag: 'unchanged', cell: wireMarkdownCell('cell-1') })).toBe('cell-1')
+    expect(
+      getEntryKey({ _tag: 'removed', cell: wireMarkdownCell('cell-2'), operationIndex: 0 })
+    ).toBe('cell-2')
+    expect(
+      getEntryKey({
+        _tag: 'moved',
+        cell: wireMarkdownCell('cell-3'),
+        fromIndex: 1,
+        operationIndex: 0,
+      })
+    ).toBe('cell-3')
+  })
+
+  it('keys added and replaced entries off the operation index', () => {
+    expect(getEntryKey({ _tag: 'added', cell: agentMarkdownCell(), operationIndex: 2 })).toBe(
+      'op-2'
+    )
+    expect(
+      getEntryKey({
+        _tag: 'replaced',
+        before: wireMarkdownCell('cell-4'),
+        after: agentMarkdownCell(),
+        operationIndex: 3,
+      })
+    ).toBe('op-3')
+  })
+})
+
+describe('getCellLabel', () => {
+  it('labels markdown cells', () => {
+    expect(getCellLabel(wireMarkdownCell('cell-1'))).toBe('Markdown cell')
+  })
+
+  it('labels query cells with their title', () => {
+    expect(getCellLabel(wireDatabaseCell('cell-1', 'Signups'))).toBe('Query: Signups')
+  })
+
+  it('falls back to "Untitled query" when a query cell has no title', () => {
+    expect(getCellLabel(wireDatabaseCell('cell-1'))).toBe('Query: Untitled query')
+  })
+})
+
+describe('formatTimeRange', () => {
+  it('formats a relative range, pluralizing the unit', () => {
+    expect(formatTimeRange({ _tag: 'relative_time_range', unit: 'day', amount: 7 })).toBe(
+      'Last 7 days'
+    )
+  })
+
+  it('does not pluralize a relative range with amount 1', () => {
+    expect(formatTimeRange({ _tag: 'relative_time_range', unit: 'hour', amount: 1 })).toBe(
+      'Last 1 hour'
+    )
+  })
+
+  it('formats an absolute range as a start → end pair', () => {
+    const start = isoDateTimeString('2026-01-01T13:00:00.000Z')!
+    const end = isoDateTimeString('2026-01-02T09:30:00.000Z')!
+
+    const formatted = formatTimeRange({ _tag: 'absolute_time_range', start, end })
+
+    // Bounds are asserted via dayjs rather than a hardcoded string so this doesn't depend on
+    // the test runner's local timezone (formatTimeRange formats in local time).
+    const expectedBound = (value: string) => dayjs(value).format('MMM D, YYYY h:mm A')
+    expect(formatted).toBe(`${expectedBound(start)} → ${expectedBound(end)}`)
+  })
+})
+
+describe('getCellMetadataLine', () => {
+  it('returns null for markdown cells', () => {
+    expect(getCellMetadataLine(wireMarkdownCell('cell-1'))).toBeNull()
+  })
+
+  it('returns null for a database cell with no database_identifier', () => {
+    expect(getCellMetadataLine(wireDatabaseCell('cell-1'))).toBeNull()
+  })
+
+  it('labels a database cell with a database_identifier', () => {
+    expect(getCellMetadataLine(wireDatabaseCell('cell-1', 'Signups', 'replica-3'))).toBe(
+      'Database: replica-3'
+    )
+  })
+
+  it('labels a log cell with its formatted time range', () => {
+    expect(getCellMetadataLine(wireLogCell('cell-1'))).toBe('Time range: Last 7 days')
+  })
+})
+
+describe('summarizeNotebookDiff / formatNotebookDiffSummary', () => {
+  it('formats create mode with pluralized cell count', () => {
+    const entries: NotebookCellDiffEntry[] = [
+      { _tag: 'unchanged', cell: wireMarkdownCell('a') },
+      { _tag: 'unchanged', cell: wireMarkdownCell('b') },
+    ]
+
+    expect(formatNotebookDiffSummary(summarizeNotebookDiff(entries, 'create'))).toBe('2 cells')
+  })
+
+  it('formats create mode singular for a single cell', () => {
+    const entries: NotebookCellDiffEntry[] = [{ _tag: 'unchanged', cell: wireMarkdownCell('a') }]
+
+    expect(formatNotebookDiffSummary(summarizeNotebookDiff(entries, 'create'))).toBe('1 cell')
+  })
+
+  it('formats update mode with a mix of categories, ignoring unchanged', () => {
+    const entries: NotebookCellDiffEntry[] = [
+      { _tag: 'unchanged', cell: wireMarkdownCell('a') },
+      { _tag: 'added', cell: agentMarkdownCell(), operationIndex: 0 },
+      { _tag: 'added', cell: agentMarkdownCell(), operationIndex: 1 },
+      { _tag: 'removed', cell: wireMarkdownCell('d'), operationIndex: 2 },
+      {
+        _tag: 'replaced',
+        before: wireMarkdownCell('e'),
+        after: agentMarkdownCell(),
+        operationIndex: 3,
+      },
+      { _tag: 'moved', cell: wireMarkdownCell('f'), fromIndex: 0, operationIndex: 4 },
+    ]
+
+    expect(formatNotebookDiffSummary(summarizeNotebookDiff(entries, 'update'))).toBe('+2 −1 ~1 ↕1')
+  })
+
+  it('omits zero categories from the update summary', () => {
+    const entries: NotebookCellDiffEntry[] = [
+      { _tag: 'unchanged', cell: wireMarkdownCell('a') },
+      { _tag: 'added', cell: agentMarkdownCell(), operationIndex: 0 },
+    ]
+
+    expect(formatNotebookDiffSummary(summarizeNotebookDiff(entries, 'update'))).toBe('+1')
+  })
+
+  it('falls back to "No changes" when every entry is unchanged', () => {
+    const entries: NotebookCellDiffEntry[] = [
+      { _tag: 'unchanged', cell: wireMarkdownCell('a') },
+      { _tag: 'unchanged', cell: wireMarkdownCell('b') },
+    ]
+
+    expect(formatNotebookDiffSummary(summarizeNotebookDiff(entries, 'update'))).toBe('No changes')
+  })
+})
diff --git a/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreview.utils.ts b/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreview.utils.ts
new file mode 100644
index 0000000000000..4dd3087ffc8e0
--- /dev/null
+++ b/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreview.utils.ts
@@ -0,0 +1,141 @@
+import dayjs from 'dayjs'
+import type { CodeBlockLang } from 'ui-patterns/CodeBlock'
+
+import type { NotebookCellDiffEntry } from '@/data/content/notebooks/notebook-operations'
+import type { AgentCell, CellWire, TimeRange } from '@/data/content/notebooks/notebook-schema'
+
+/** React key for a diff entry. Added/replaced cells have no `id`, so they key off the operation. */
+export function getEntryKey(entry: NotebookCellDiffEntry): string {
+  switch (entry._tag) {
+    case 'unchanged':
+    case 'removed':
+    case 'moved':
+      return entry.cell.id
+    case 'added':
+    case 'replaced':
+      return `op-${entry.operationIndex}`
+  }
+}
+
+/** Human label for a collapsed/badge row. */
+export function getCellLabel(cell: CellWire | AgentCell): string {
+  switch (cell._tag) {
+    case 'markdown_cell':
+      return 'Markdown cell'
+    case 'database_cell':
+    case 'log_cell':
+      return `Query: ${cell.title ?? 'Untitled query'}`
+  }
+}
+
+/** The cell's underlying source text, regardless of backend. */
+export function getCellSourceText(cell: CellWire | AgentCell): string {
+  switch (cell._tag) {
+    case 'markdown_cell':
+      return cell.text
+    case 'database_cell':
+    case 'log_cell':
+      return cell.sql
+  }
+}
+
+/** Language for rendering the cell's source via `CodeBlock`. */
+export function getCellCodeBlockLanguage(cell: CellWire | AgentCell): CodeBlockLang {
+  switch (cell._tag) {
+    case 'markdown_cell':
+      return 'markdown'
+    case 'database_cell':
+    case 'log_cell':
+      return 'sql'
+  }
+}
+
+/** Monaco language id for rendering the cell's source via `DiffEditor`. */
+export function getCellMonacoLanguage(cell: CellWire | AgentCell): string {
+  switch (cell._tag) {
+    case 'markdown_cell':
+      return 'markdown'
+    case 'database_cell':
+    case 'log_cell':
+      return 'pgsql'
+  }
+}
+
+/** Formats a `TimeRange` as plain text, e.g. "Last 7 days" or an absolute bound pair. */
+export function formatTimeRange(range: TimeRange): string {
+  if (range._tag === 'relative_time_range') {
+    return `Last ${range.amount} ${range.unit}${range.amount === 1 ? '' : 's'}`
+  }
+
+  const format = (value: string) => dayjs(value).format('MMM D, YYYY h:mm A')
+  return `${format(range.start)} → ${format(range.end)}`
+}
+
+/**
+ * Plain-text metadata line for a query cell (its source parameters, not its SQL) — `null`
+ * when the cell has none. A `replace_cell` can change only this and leave `sql` identical,
+ * so it's compared independently of the source text rather than folded into it.
+ */
+export function getCellMetadataLine(cell: CellWire | AgentCell): string | null {
+  switch (cell._tag) {
+    case 'markdown_cell':
+      return null
+    case 'database_cell':
+      return cell.database_identifier ? `Database: ${cell.database_identifier}` : null
+    case 'log_cell':
+      return `Time range: ${formatTimeRange(cell.time_range)}`
+  }
+}
+
+export type NotebookDiffSummary =
+  | { mode: 'create'; cellCount: number }
+  | { mode: 'update'; counts: { added: number; removed: number; replaced: number; moved: number } }
+
+/** Summarizes a set of diff entries into counts suitable for a header line. */
+export function summarizeNotebookDiff(
+  entries: NotebookCellDiffEntry[],
+  mode: 'create' | 'update'
+): NotebookDiffSummary {
+  if (mode === 'create') {
+    return { mode: 'create', cellCount: entries.length }
+  }
+
+  const counts = { added: 0, removed: 0, replaced: 0, moved: 0 }
+  for (const entry of entries) {
+    switch (entry._tag) {
+      case 'added':
+        counts.added++
+        break
+      case 'removed':
+        counts.removed++
+        break
+      case 'replaced':
+        counts.replaced++
+        break
+      case 'moved':
+        counts.moved++
+        break
+      case 'unchanged':
+        break
+    }
+  }
+
+  return { mode: 'update', counts }
+}
+
+/** Formats a `NotebookDiffSummary` into the header string. */
+export function formatNotebookDiffSummary(summary: NotebookDiffSummary): string {
+  if (summary.mode === 'create') {
+    const { cellCount } = summary
+    return `${cellCount} cell${cellCount === 1 ? '' : 's'}`
+  }
+
+  const { added, removed, replaced, moved } = summary.counts
+  const parts: string[] = []
+  if (added > 0) parts.push(`+${added}`)
+  if (removed > 0) parts.push(`−${removed}`)
+  if (replaced > 0) parts.push(`~${replaced}`)
+  if (moved > 0) parts.push(`↕${moved}`)
+
+  return parts.length > 0 ? parts.join(' ') : 'No changes'
+}
diff --git a/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreviewCell.tsx b/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreviewCell.tsx
new file mode 100644
index 0000000000000..ddac9ae9e1cb6
--- /dev/null
+++ b/apps/studio/components/interfaces/Explorer/NotebookPreview/NotebookPreviewCell.tsx
@@ -0,0 +1,154 @@
+import { useState, type ReactNode } from 'react'
+import { Badge, Button, cn } from 'ui'
+import { CodeBlock, type CodeBlockLang } from 'ui-patterns/CodeBlock'
+
+import {
+  getCellCodeBlockLanguage,
+  getCellLabel,
+  getCellMetadataLine,
+  getCellMonacoLanguage,
+  getCellSourceText,
+} from './NotebookPreview.utils'
+import { DiffEditor } from '@/components/ui/DiffEditor'
+import type { NotebookCellDiffEntry } from '@/data/content/notebooks/notebook-operations'
+import type { AgentCell, CellWire } from '@/data/content/notebooks/notebook-schema'
+
+export interface NotebookPreviewCellProps {
+  entry: NotebookCellDiffEntry
+}
+
+/** Renders a single diff entry, dispatching on its tag. */
+export const NotebookPreviewCell = ({ entry }: NotebookPreviewCellProps) => {
+  switch (entry._tag) {
+    case 'unchanged':
+      return <CollapsedRow label={getCellLabel(entry.cell)} />
+    case 'removed':
+      return (
+        <CollapsedRow
+          label={getCellLabel(entry.cell)}
+          strikethrough
+          badge={{ variant: 'destructive', label: 'Removed' }}
+        />
+      )
+    case 'moved':
+      return (
+        <CollapsedRow
+          label={getCellLabel(entry.cell)}
+          badge={{ variant: 'secondary', label: 'Moved' }}
+        />
+      )
+    case 'added':
+      return <AddedCell cell={entry.cell} />
+    case 'replaced':
+      return <ReplacedCell before={entry.before} after={entry.after} />
+  }
+}
+
+interface CollapsedRowProps {
+  label: string
+  strikethrough?: boolean
+  badge?: { variant: 'destructive' | 'secondary'; label: string }
+}
+
+/** A single muted row with no content — used for unchanged, removed, and moved entries. */
+const CollapsedRow = ({ label, strikethrough, badge }: CollapsedRowProps) => (
+  <div className="flex items-center gap-2 px-3 py-1.5 text-sm text-foreground-light">
+    {badge && <Badge variant={badge.variant}>{badge.label}</Badge>}
+    <span className={cn('truncate', strikethrough && 'line-through text-foreground-lighter')}>
+      {label}
+    </span>
+  </div>
+)
+
+interface ContentCellProps {
+  badge: { variant: 'success' | 'warning'; label: string }
+  label: string
+  children: ReactNode
+}
+
+/** Shared frame for entries that show full cell content — added and replaced cells. */
+const ContentCell = ({ badge, label, children }: ContentCellProps) => (
+  <div className="flex flex-col gap-2 px-3 py-2 border rounded-md bg-surface-75">
+    <div className="flex items-center gap-2 text-sm">
+      <Badge variant={badge.variant}>{badge.label}</Badge>
+      <span className="text-foreground truncate">{label}</span>
+    </div>
+    {children}
+  </div>
+)
+
+const AddedCell = ({ cell }: { cell: AgentCell }) => (
+  <ContentCell badge={{ variant: 'success', label: 'Added' }} label={getCellLabel(cell)}>
+    <ExpandableCodeBlock
+      language={getCellCodeBlockLanguage(cell)}
+      value={getCellSourceText(cell)}
+    />
+    <MetadataLine text={getCellMetadataLine(cell)} />
+  </ContentCell>
+)
+
+/**
+ * A `replace_cell` can change only the source parameters (`database_identifier`,
+ * `time_range`) and leave `sql`/`text` identical — the `DiffEditor` above would then show no
+ * change at all, so the metadata is compared independently and rendered as its own
+ * before → after line whenever it differs.
+ */
+const ReplacedCell = ({ before, after }: { before: CellWire; after: AgentCell }) => {
+  const beforeMetadata = getCellMetadataLine(before)
+  const afterMetadata = getCellMetadataLine(after)
+
+  return (
+    <ContentCell badge={{ variant: 'warning', label: 'Replaced' }} label={getCellLabel(after)}>
+      <DiffEditor
+        original={getCellSourceText(before)}
+        modified={getCellSourceText(after)}
+        language={getCellMonacoLanguage(after)}
+        height={240}
+      />
+      {beforeMetadata !== afterMetadata ? (
+        <MetadataLine
+          text={`${beforeMetadata ?? 'No metadata'} → ${afterMetadata ?? 'No metadata'}`}
+        />
+      ) : (
+        <MetadataLine text={afterMetadata} />
+      )}
+    </ContentCell>
+  )
+}
+
+/** A plain-text metadata line for a query cell — never rendered as a link or attribute. */
+const MetadataLine = ({ text }: { text: string | null }) =>
+  text ? <p className="text-xs text-foreground-lighter">{text}</p> : null
+
+interface ExpandableCodeBlockProps {
+  language: CodeBlockLang
+  value: string
+}
+
+/**
+ * `CodeBlock` clipped to a fixed height with a "Show more/less" toggle. `CodeBlock`'s
+ * wrapper already scrolls (`overflow-auto`), so clipping just changes what's visible.
+ */
+const ExpandableCodeBlock = ({ language, value }: ExpandableCodeBlockProps) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  return (
+    <div>
+      <CodeBlock
+        language={language}
+        value={value}
+        hideLineNumbers
+        className="text-xs"
+        wrapperClassName={cn(!isExpanded && 'max-h-56')}
+      />
+      <Button
+        variant="text"
+        size="tiny"
+        className="mt-1"
+        onClick={() => setIsExpanded((prev) => !prev)}
+      >
+        {isExpanded ? 'Show less' : 'Show more'}
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Explorer/QueryCell/index.tsx b/apps/studio/components/interfaces/Explorer/QueryCell/index.tsx
index 80adb841a0396..dec953401334f 100644
--- a/apps/studio/components/interfaces/Explorer/QueryCell/index.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryCell/index.tsx
@@ -1,9 +1,9 @@
-import { useState } from 'react'
+import { forwardRef, useState } from 'react'
 import { type Snapshot } from 'valtio'
 
 import { AddCellDropdown } from '../AddCellDropdown'
 import { MoveCellDropdownContent } from '../MoveCellDropdownContent'
-import { QueryEditor } from '../QueryEditor'
+import { QueryEditor, type QueryEditorHandle } from '../QueryEditor'
 import { type QueryDisplay, type QueryResult } from '../types'
 import {
   changeCellSource,
@@ -28,7 +28,10 @@ interface QueryCellProps {
 }
 
 /** Notebook adapter around the shared QueryEditor. */
-export const QueryCell = ({ cell }: QueryCellProps) => {
+export const QueryCell = forwardRef<QueryEditorHandle, QueryCellProps>(function QueryCell(
+  { cell },
+  ref
+) {
   const snap = useNotebooksStateSnapshot()
   const currentNotebook = useCurrentNotebook()
 
@@ -92,6 +95,7 @@ export const QueryCell = ({ cell }: QueryCellProps) => {
       gripClassName="mt-2 opacity-0 group-hover:opacity-100 has-[[data-state=open]]:opacity-100 transition"
     >
       <QueryEditor
+        ref={ref}
         id={cell.id}
         variant="embedded"
         title={title}
@@ -109,4 +113,4 @@ export const QueryCell = ({ cell }: QueryCellProps) => {
       />
     </SortableSection>
   )
-}
+})
diff --git a/apps/studio/components/interfaces/Explorer/QueryCell/DisplaySettingsButton.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/DisplaySettingsButton.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Explorer/QueryCell/DisplaySettingsButton.tsx
rename to apps/studio/components/interfaces/Explorer/QueryEditor/DisplaySettingsButton.tsx
diff --git a/apps/studio/components/interfaces/Explorer/QueryResultChart.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/QueryResultChart.tsx
similarity index 98%
rename from apps/studio/components/interfaces/Explorer/QueryResultChart.tsx
rename to apps/studio/components/interfaces/Explorer/QueryEditor/QueryResultChart.tsx
index 3d92ec07b8ee1..7028ca3116815 100644
--- a/apps/studio/components/interfaces/Explorer/QueryResultChart.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryEditor/QueryResultChart.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { Chart, ChartBar, ChartCard, ChartContent, ChartLine } from 'ui-patterns/Chart'
 
-import { type QueryResult } from './types'
+import { type QueryResult } from '../types'
 import NoDataPlaceholder from '@/components/ui/Charts/NoDataPlaceholder'
 import { formatLogTick, getCumulativeResults } from '@/components/ui/QueryBlock/QueryBlock.utils'
 import { type ChartConfig } from '@/data/content/notebooks/notebook-schema'
diff --git a/apps/studio/components/interfaces/Explorer/QueryResultError.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/QueryResultError.tsx
similarity index 97%
rename from apps/studio/components/interfaces/Explorer/QueryResultError.tsx
rename to apps/studio/components/interfaces/Explorer/QueryEditor/QueryResultError.tsx
index 3e06ecd10e02e..83cc108148964 100644
--- a/apps/studio/components/interfaces/Explorer/QueryResultError.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryEditor/QueryResultError.tsx
@@ -3,8 +3,8 @@ import { ExternalLink } from 'lucide-react'
 import { parseAsBoolean, useQueryState } from 'nuqs'
 import { Button, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
-import { subscriptionHasHipaaAddon } from '../Billing/Subscription/Subscription.utils'
-import { type QueryResult } from './types'
+import { subscriptionHasHipaaAddon } from '../../Billing/Subscription/Subscription.utils'
+import { type QueryResult } from '../types'
 import { AiAssistantDropdown } from '@/components/ui/AiAssistantDropdown'
 import CopyButton from '@/components/ui/CopyButton'
 import { InlineLink, InlineLinkClassName } from '@/components/ui/InlineLink'
diff --git a/apps/studio/components/interfaces/Explorer/QueryResultRenderer.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/QueryResultRenderer.tsx
similarity index 78%
rename from apps/studio/components/interfaces/Explorer/QueryResultRenderer.tsx
rename to apps/studio/components/interfaces/Explorer/QueryEditor/QueryResultRenderer.tsx
index 1915d3c7328c0..79fbc5a407f5c 100644
--- a/apps/studio/components/interfaces/Explorer/QueryResultRenderer.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryEditor/QueryResultRenderer.tsx
@@ -1,6 +1,6 @@
+import { type QueryResult } from '../types'
 import { QueryResultChart } from './QueryResultChart'
 import { QueryResultError } from './QueryResultError'
-import { type QueryResult } from './types'
 import { DataGridResults } from '@/components/ui/DataGridResults'
 import { type ChartConfig } from '@/data/content/notebooks/notebook-schema'
 
@@ -14,7 +14,7 @@ export const QueryResultRenderer = ({ result, view, chart }: QueryResultRenderer
   const { rows, error, autoLimit } = result ?? {}
 
   if (!result) {
-    return <p className="text-xs text-foreground-lighter">Run the query to see results</p>
+    return <p className="text-xs text-foreground-lighter py-8">Run the query to see results</p>
   }
 
   if (error) {
@@ -22,7 +22,7 @@ export const QueryResultRenderer = ({ result, view, chart }: QueryResultRenderer
   }
 
   if ((rows ?? []).length === 0) {
-    return <p className="text-xs text-foreground-lighter">Success. No rows returned</p>
+    return <p className="text-xs text-foreground-lighter py-8">Success. No rows returned</p>
   }
 
   if (rows && rows.length > 0) {
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerQuerySourceMenu.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/QuerySourceMenu.tsx
similarity index 94%
rename from apps/studio/components/interfaces/Explorer/ExplorerQuerySourceMenu.tsx
rename to apps/studio/components/interfaces/Explorer/QueryEditor/QuerySourceMenu.tsx
index fb46469c4a682..450df7cec6f2c 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerQuerySourceMenu.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryEditor/QuerySourceMenu.tsx
@@ -9,8 +9,8 @@ import {
   DropdownMenuTrigger,
 } from 'ui'
 
-import { RowLimitSubMenu } from '../SQLEditor/UtilityPanel/QuerySourceMenu/RowLimitSubMenu'
-import { RunAsSubMenu } from '../SQLEditor/UtilityPanel/QuerySourceMenu/RunAsSubMenu'
+import { RowLimitSubMenu } from '../../SQLEditor/UtilityPanel/QuerySourceMenu/RowLimitSubMenu'
+import { RunAsSubMenu } from '../../SQLEditor/UtilityPanel/QuerySourceMenu/RunAsSubMenu'
 import { DatabaseParametersSubMenu } from '@/components/interfaces/QuerySources/DatabaseParametersSubMenu'
 import { LogsCustomRangeDialog } from '@/components/interfaces/QuerySources/LogsCustomRangeDialog'
 import { LogsTimeRangeSubMenu } from '@/components/interfaces/QuerySources/LogsTimeRangeSubMenu'
@@ -25,7 +25,7 @@ import {
 } from '@/data/query-sources/query-source-registry'
 import { type RoleImpersonationController } from '@/state/role-impersonation-state'
 
-export type ExplorerQuerySourceMenuProps = {
+export type QuerySourceMenuProps = {
   rowLimit?: number
   onRowLimitChange?: (val: number) => void
   roleImpersonationState?: RoleImpersonationController
@@ -42,13 +42,13 @@ export type ExplorerQuerySourceMenuProps = {
  * what happens to the query body is the consumer's call, since a notebook cell
  * has SQL to preserve or discard and a fresh draft does not.
  */
-export const ExplorerQuerySourceMenu = ({
+export const QuerySourceMenu = ({
   rowLimit = 100,
   onRowLimitChange,
   roleImpersonationState,
   source,
   onSourceChange,
-}: ExplorerQuerySourceMenuProps) => {
+}: QuerySourceMenuProps) => {
   const { ref } = useParams()
   const isLogsSourceEnabled = useFlag('sqlEditorLogsSource')
   const isOtelLogsEnabled = useFlag('otelLegacyLogs')
diff --git a/apps/studio/components/interfaces/Explorer/QueryEditor.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx
similarity index 77%
rename from apps/studio/components/interfaces/Explorer/QueryEditor.tsx
rename to apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx
index 1259b8714ebcd..29b970fa242be 100644
--- a/apps/studio/components/interfaces/Explorer/QueryEditor.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx
@@ -1,28 +1,29 @@
 import { acceptUntrustedSql, untrustedSql, type UntrustedSqlFragment } from '@supabase/pg-meta'
 import { useFlag } from 'common'
 import { CodeSquare, Eye, EyeOff, Play } from 'lucide-react'
-import { useState, type ReactNode } from 'react'
+import { forwardRef, useImperativeHandle, useState, type ReactNode } from 'react'
 import { cn } from 'ui'
 
-import { resolveLogTimeRange } from '../QuerySources/LogTimeRange.utils'
+import { resolveLogTimeRange } from '../../QuerySources/LogTimeRange.utils'
 import {
   ExplorerQuery,
   ExplorerQueryEditor,
   ExplorerQueryFooter,
   ExplorerQueryResults,
   ExplorerQueryViewport,
-} from './ExplorerQuery'
-import { ExplorerQuerySourceMenu } from './ExplorerQuerySourceMenu'
+} from '../ExplorerQuery'
 import {
   ExplorerToolbar,
   ExplorerToolbarAction,
   ExplorerToolbarActions,
   ExplorerToolbarIcon,
   ExplorerToolbarTitle,
-} from './ExplorerToolbar'
-import { DisplaySettingsButton } from './QueryCell/DisplaySettingsButton'
+} from '../ExplorerToolbar'
+import { type QueryDisplay, type QueryResult } from '../types'
+import { DisplaySettingsButton } from './DisplaySettingsButton'
 import { QueryResultRenderer } from './QueryResultRenderer'
-import { type QueryDisplay, type QueryResult } from './types'
+import { QuerySourceMenu } from './QuerySourceMenu'
+import { LegacyLogsRewriteBanner } from '@/components/interfaces/Settings/Logs/LegacyLogsRewriteBanner'
 import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
 import {
   type DatabaseSourceParameters,
@@ -86,28 +87,35 @@ export type QueryEditorProps = {
   onDisplayChange?: (display: QueryDisplay) => void
 }
 
+export type QueryEditorHandle = {
+  run: () => Promise<void>
+}
+
 /**
  * Shared query editor used by query tabs, notebook cells, and other Explorer surfaces.
  * The consuming surface owns persistence and surrounding chrome; this component owns
  * query-level UI and execution behavior.
  */
-export const QueryEditor = ({
-  id,
-  variant,
-  title,
-  query,
-  result,
-  roleImpersonationState,
-  display,
-  toolbarActions,
-  onTitleChange,
-  onSqlChange,
-  onSqlCommit,
-  onSourceChange,
-  onResultChange,
-  onRowLimitChange,
-  onDisplayChange,
-}: QueryEditorProps) => {
+export const QueryEditor = forwardRef<QueryEditorHandle, QueryEditorProps>(function QueryEditor(
+  {
+    id,
+    variant,
+    title,
+    query,
+    result,
+    roleImpersonationState,
+    display,
+    toolbarActions,
+    onTitleChange,
+    onSqlChange,
+    onSqlCommit,
+    onSourceChange,
+    onResultChange,
+    onRowLimitChange,
+    onDisplayChange,
+  }: QueryEditorProps,
+  ref
+) {
   const sql = query.uncheckedSql
   const sqlRef = useLatest<string>(sql)
   const onSqlCommitRef = useLatest(onSqlCommit)
@@ -132,12 +140,12 @@ export const QueryEditor = ({
     }
   )
 
-  const { mutate: executeSql, isPending: isExecutingSql } = useExecuteSqlMutation({
+  const { mutateAsync: executeSql, isPending: isExecutingSql } = useExecuteSqlMutation({
     onSuccess: (data) => onResultChange({ rows: data.result }),
     onError: (error) => onResultChange({ error }),
   })
 
-  const { mutate: executeLogsSql, isPending: isExecutingLogs } = useExecuteLogsSqlMutation({
+  const { mutateAsync: executeLogsSql, isPending: isExecutingLogs } = useExecuteLogsSqlMutation({
     onSuccess: (data) => onResultChange({ rows: data.rows as readonly Record<string, unknown>[] }),
     onError: (error) => onResultChange({ error }),
   })
@@ -154,7 +162,7 @@ export const QueryEditor = ({
    * decided by `query._tag`, the same discriminant that picks the execution endpoint, so
    * Postgres SQL cannot reach the analytics wire or vice versa.
    */
-  const handleRunQuery = (rawSql: string = sql) => {
+  const handleRunQuery = async (rawSql: string = sql) => {
     if (!project || isBusy || rawSql.trim().length === 0) return
 
     onSqlCommit?.(rawSql)
@@ -167,12 +175,12 @@ export const QueryEditor = ({
         return
       }
 
-      executeLogsSql({
+      await executeLogsSql({
         projectRef: project.ref,
         sql: acceptUntrustedLogsSql(untrustedLogSql(rawSql)),
         range: resolveLogTimeRange(query.time_range),
         endpoint: QUERY_SOURCE_REGISTRY.logs.endpoint,
-      })
+      }).catch(() => {})
       return
     }
 
@@ -189,7 +197,7 @@ export const QueryEditor = ({
       return
     }
 
-    executeSql({
+    await executeSql({
       projectRef: project.ref,
       connectionString,
       sql: wrapWithRoleImpersonation(limitedSql.sql, roleImpersonationState),
@@ -197,9 +205,11 @@ export const QueryEditor = ({
       contextualInvalidation: true,
       isStatementTimeoutDisabled: true,
       isRoleImpersonationEnabled: isRoleImpersonationEnabled(roleImpersonationState?.role),
-    })
+    }).catch(() => {})
   }
 
+  useImperativeHandle(ref, () => ({ run: () => handleRunQuery() }))
+
   const Shell = variant === 'viewport' ? ExplorerQueryViewport : ExplorerQuery
 
   return (
@@ -212,7 +222,7 @@ export const QueryEditor = ({
         <ExplorerToolbarActions>
           {toolbarActions}
           {onSourceChange && (
-            <ExplorerQuerySourceMenu
+            <QuerySourceMenu
               source={toQuerySourceBinding(query)}
               onSourceChange={onSourceChange}
               rowLimit={rowLimit}
@@ -247,24 +257,35 @@ export const QueryEditor = ({
       </ExplorerToolbar>
 
       {showQuery && (
-        <ExplorerQueryEditor
-          className={cn('relative', variant === 'viewport' ? 'h-[45%] min-h-48' : undefined)}
-        >
-          <CodeEditor
-            id={`explorer-query-${id}`}
-            language="pgsql"
-            value={sql}
-            placeholder="select * from your_table limit 100;"
-            placeholderClassName="top-[13px]"
-            className={variant === 'embedded' ? 'h-32' : undefined}
-            actions={{ runQuery: { enabled: true, callback: handleRunQuery } }}
-            options={{ minimap: { enabled: false }, padding: { top: 8 } }}
-            onInputChange={(value) => onSqlChange(value ?? '')}
-            onMount={(editor) => {
-              editor.onDidBlurEditorWidget(() => onSqlCommitRef.current?.(sqlRef.current))
+        <>
+          <LegacyLogsRewriteBanner
+            isLogsSource={query._tag === 'logs'}
+            sql={sql}
+            readSql={() => sqlRef.current}
+            onProposal={({ modified }) => {
+              onSqlChange(modified)
+              onSqlCommit?.(modified)
             }}
           />
-        </ExplorerQueryEditor>
+          <ExplorerQueryEditor
+            className={cn('relative', variant === 'viewport' ? 'h-[45%] min-h-48' : undefined)}
+          >
+            <CodeEditor
+              id={`explorer-query-${id}`}
+              language="pgsql"
+              value={sql}
+              placeholder="select * from your_table limit 100;"
+              placeholderClassName="top-[13px]"
+              className={variant === 'embedded' ? 'h-44' : undefined}
+              actions={{ runQuery: { enabled: true, callback: handleRunQuery } }}
+              options={{ minimap: { enabled: false }, padding: { top: 8 } }}
+              onInputChange={(value) => onSqlChange(value ?? '')}
+              onMount={(editor) => {
+                editor.onDidBlurEditorWidget(() => onSqlCommitRef.current?.(sqlRef.current))
+              }}
+            />
+          </ExplorerQueryEditor>
+        </>
       )}
 
       <ExplorerQueryResults
@@ -286,4 +307,4 @@ export const QueryEditor = ({
       </ExplorerQueryFooter>
     </Shell>
   )
-}
+})
diff --git a/apps/studio/components/interfaces/Explorer/__tests__/ChatEditor.test.tsx b/apps/studio/components/interfaces/Explorer/__tests__/ExplorerChatTab.test.tsx
similarity index 94%
rename from apps/studio/components/interfaces/Explorer/__tests__/ChatEditor.test.tsx
rename to apps/studio/components/interfaces/Explorer/__tests__/ExplorerChatTab.test.tsx
index 1aa2d95956d47..6db1c54e004c5 100644
--- a/apps/studio/components/interfaces/Explorer/__tests__/ChatEditor.test.tsx
+++ b/apps/studio/components/interfaces/Explorer/__tests__/ExplorerChatTab.test.tsx
@@ -1,7 +1,7 @@
 import { fireEvent, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { ChatEditor } from '../ChatEditor'
+import { ExplorerChatTab } from '../ExplorerChatTab'
 import { customRender } from '@/tests/lib/custom-render'
 
 const mocks = vi.hoisted(() => ({
@@ -69,7 +69,7 @@ vi.mock('@/components/ui/AIAssistantPanel/AssistantChat', () => ({
   ),
 }))
 
-describe('ChatEditor', () => {
+describe('ExplorerChatTab', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mocks.useParams.mockReturnValue({ ref: 'default', id: 'chat-1' })
@@ -81,7 +81,7 @@ describe('ChatEditor', () => {
   })
 
   it('renders and registers the routed chat without changing sidebar selection', () => {
-    customRender(<ChatEditor />)
+    customRender(<ExplorerChatTab />)
 
     expect(mocks.ensureChatInstance).toHaveBeenCalledWith('chat-1')
     expect(screen.getByRole('button', { name: 'Assistant' })).toHaveAttribute(
@@ -98,7 +98,7 @@ describe('ChatEditor', () => {
   })
 
   it('routes shared chat navigation through Explorer', () => {
-    customRender(<ChatEditor />)
+    customRender(<ExplorerChatTab />)
 
     fireEvent.click(screen.getByRole('button', { name: 'Assistant' }))
 
@@ -112,7 +112,7 @@ describe('ChatEditor', () => {
       chatInstances: {},
     })
 
-    customRender(<ChatEditor />)
+    customRender(<ExplorerChatTab />)
 
     expect(screen.getByRole('heading', { name: 'Chat not found' })).toBeVisible()
     expect(mocks.handleTabClose).toHaveBeenCalledWith(
diff --git a/apps/studio/components/interfaces/Explorer/__tests__/ExplorerNotebookTab.test.tsx b/apps/studio/components/interfaces/Explorer/__tests__/ExplorerNotebookTab.test.tsx
new file mode 100644
index 0000000000000..882d79dfb94d6
--- /dev/null
+++ b/apps/studio/components/interfaces/Explorer/__tests__/ExplorerNotebookTab.test.tsx
@@ -0,0 +1,133 @@
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { HttpResponse } from 'msw'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { ExplorerNotebookTab } from '../ExplorerNotebookTab'
+import { createMarkdownCellSkeleton, createQueryCellSkeleton } from '../utils'
+import { untrustedLogSql } from '@/data/logs/safe-analytics-sql'
+import { notebooksState } from '@/state/notebooks/notebooks-state'
+import type { Notebook, StateNotebook } from '@/state/notebooks/types'
+import { createTabsState, TabsStateContext } from '@/state/tabs'
+import { customRender } from '@/tests/lib/custom-render'
+import { addAPIMock } from '@/tests/lib/msw'
+import { setupSqlEditorMocks } from '@/tests/lib/sql-editor-test-utils'
+import type { Notebooks } from '@/types'
+
+const testContext = vi.hoisted(() => ({
+  flags: { otelLegacyLogs: true } as Record<string, boolean>,
+}))
+
+vi.mock('common', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('common')>()
+  return {
+    ...actual,
+    IS_PLATFORM: true,
+    useParams: () => ({ ref: 'default', id: 'notebook-test' }),
+    useFlag: (flag: string) => testContext.flags[flag] ?? false,
+  }
+})
+
+vi.mock('@/components/ui/CodeEditor/CodeEditor', () => ({
+  CodeEditor: ({ value }: { value: string }) => (
+    <textarea aria-label="SQL editor" value={value} readOnly />
+  ),
+}))
+
+vi.mock('../QueryEditor/QuerySourceMenu', () => ({
+  QuerySourceMenu: () => null,
+}))
+
+const NOTEBOOK_ID = 'notebook-test'
+
+const databaseCell = createQueryCellSkeleton({ sql: 'select 1' })
+const logCell = {
+  _tag: 'log_cell' as const,
+  id: 'log-cell-1',
+  view: 'table' as const,
+  chart: undefined,
+  unchecked_sql: untrustedLogSql('select * from edge_logs limit 1'),
+  time_range: { _tag: 'relative_time_range' as const, amount: 1, unit: 'hour' as const },
+}
+const markdownCell = createMarkdownCellSkeleton()
+
+/**
+ * Assigns directly into the store rather than going through `setNotebook` — that helper
+ * no-ops when a notebook with content already exists, which would make reseeding between
+ * tests (or within one, for the empty-notebook case) silently keep the previous cells.
+ */
+const seedNotebook = (cells: Notebooks.Cell[]) => {
+  const notebook: Notebook = {
+    id: NOTEBOOK_ID,
+    type: 'notebook',
+    name: 'Test notebook',
+    visibility: 'project',
+    favorite: false,
+    owner_id: 1,
+    project_id: 1,
+    content: { schema_version: 1, cells },
+  }
+  const stateNotebook: StateNotebook = { projectRef: 'default', notebook, status: 'saved' }
+  notebooksState.notebooks[NOTEBOOK_ID] = stateNotebook
+}
+
+const renderNotebookTab = () =>
+  customRender(
+    <TabsStateContext.Provider value={createTabsState('default')}>
+      <ExplorerNotebookTab />
+    </TabsStateContext.Provider>
+  )
+
+beforeEach(() => {
+  setupSqlEditorMocks()
+  testContext.flags.otelLegacyLogs = true
+  for (const id of Object.keys(notebooksState.notebooks)) {
+    delete notebooksState.notebooks[id]
+  }
+  seedNotebook([databaseCell, logCell, markdownCell])
+})
+
+afterEach(() => notebooksState.needsSaving.clear())
+
+describe('ExplorerNotebookTab', () => {
+  it('runs every database and log cell, and skips markdown cells, on "Run notebook"', async () => {
+    const dbRequests: Request[] = []
+    addAPIMock({
+      method: 'post',
+      path: '/platform/pg-meta/:ref/query',
+      response: ({ request }) => {
+        dbRequests.push(request)
+        return HttpResponse.json([{ result: 1 }])
+      },
+    })
+
+    const logRequests: Request[] = []
+    addAPIMock({
+      method: 'post',
+      path: '/platform/projects/:ref/analytics/endpoints/logs.all.otel',
+      response: ({ request }) => {
+        logRequests.push(request)
+        return HttpResponse.json({ result: [] })
+      },
+    })
+
+    renderNotebookTab()
+
+    const runNotebookButton = await screen.findByRole('button', { name: 'Run notebook' })
+    await waitFor(() => expect(runNotebookButton).toBeEnabled())
+    await userEvent.click(runNotebookButton)
+
+    await waitFor(() => expect(dbRequests).toHaveLength(1))
+    await waitFor(() => expect(logRequests).toHaveLength(1))
+    await waitFor(() => expect(runNotebookButton).toBeEnabled())
+  })
+
+  it('disables "Run notebook" when the notebook has no database or log cells', async () => {
+    seedNotebook([createMarkdownCellSkeleton()])
+
+    renderNotebookTab()
+
+    const runNotebookButton = await screen.findByRole('button', { name: 'Run notebook' })
+    expect(runNotebookButton).toBeDisabled()
+  })
+})
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerQueryTabCoordinator.test.tsx b/apps/studio/components/interfaces/Explorer/__tests__/ExplorerQueryTabCoordinator.test.tsx
similarity index 93%
rename from apps/studio/components/interfaces/Explorer/ExplorerQueryTabCoordinator.test.tsx
rename to apps/studio/components/interfaces/Explorer/__tests__/ExplorerQueryTabCoordinator.test.tsx
index 916214c59e023..87216674cac41 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerQueryTabCoordinator.test.tsx
+++ b/apps/studio/components/interfaces/Explorer/__tests__/ExplorerQueryTabCoordinator.test.tsx
@@ -1,7 +1,7 @@
 import { LOCAL_STORAGE_KEYS } from 'common'
 import { afterEach, describe, expect, it } from 'vitest'
 
-import { ExplorerQueryTabCoordinator } from './ExplorerQueryTabCoordinator'
+import { ExplorerQueryTabCoordinator } from '../ExplorerQueryTabCoordinator'
 import { explorerQueryState } from '@/state/explorer-query'
 import { createTabsState, TabsStateContext } from '@/state/tabs'
 import { customRender } from '@/tests/lib/custom-render'
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerQuerySourceMenu.test.tsx b/apps/studio/components/interfaces/Explorer/__tests__/QuerySourceMenu.test.tsx
similarity index 93%
rename from apps/studio/components/interfaces/Explorer/ExplorerQuerySourceMenu.test.tsx
rename to apps/studio/components/interfaces/Explorer/__tests__/QuerySourceMenu.test.tsx
index 6717b27d57ff8..ad92fb90011ce 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerQuerySourceMenu.test.tsx
+++ b/apps/studio/components/interfaces/Explorer/__tests__/QuerySourceMenu.test.tsx
@@ -4,7 +4,7 @@ import { FeatureFlagContext } from 'common'
 import { mockAnimationsApi } from 'jsdom-testing-mocks'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { ExplorerQuerySourceMenu } from './ExplorerQuerySourceMenu'
+import { QuerySourceMenu } from '../QueryEditor/QuerySourceMenu'
 import { customRender } from '@/tests/lib/custom-render'
 import { addAPIMock } from '@/tests/lib/msw'
 
@@ -37,14 +37,14 @@ beforeEach(() => {
   })
 })
 
-describe('ExplorerQuerySourceMenu', () => {
+describe('QuerySourceMenu', () => {
   const renderWithFlags = (
-    source: Parameters<typeof ExplorerQuerySourceMenu>[0]['source'],
+    source: Parameters<typeof QuerySourceMenu>[0]['source'],
     flags: Record<string, boolean>
   ) =>
     customRender(
       <FeatureFlagContext.Provider value={{ configcat: flags, posthog: {}, hasLoaded: true }}>
-        <ExplorerQuerySourceMenu
+        <QuerySourceMenu
           rowLimit={100}
           onRowLimitChange={vi.fn()}
           source={source}
@@ -57,7 +57,7 @@ describe('ExplorerQuerySourceMenu', () => {
     const onSourceChange = vi.fn()
 
     customRender(
-      <ExplorerQuerySourceMenu
+      <QuerySourceMenu
         rowLimit={100}
         onRowLimitChange={vi.fn()}
         source={{
@@ -78,7 +78,7 @@ describe('ExplorerQuerySourceMenu', () => {
     const onSourceChange = vi.fn()
 
     customRender(
-      <ExplorerQuerySourceMenu
+      <QuerySourceMenu
         rowLimit={100}
         onRowLimitChange={vi.fn()}
         source={{
diff --git a/apps/studio/components/interfaces/Explorer/QueryTab.test.tsx b/apps/studio/components/interfaces/Explorer/__tests__/QueryTab.test.tsx
similarity index 97%
rename from apps/studio/components/interfaces/Explorer/QueryTab.test.tsx
rename to apps/studio/components/interfaces/Explorer/__tests__/QueryTab.test.tsx
index 21da1d7857472..9df7654ff50eb 100644
--- a/apps/studio/components/interfaces/Explorer/QueryTab.test.tsx
+++ b/apps/studio/components/interfaces/Explorer/__tests__/QueryTab.test.tsx
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'
 import { HttpResponse } from 'msw'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { QueryTab } from './QueryTab'
+import { ExplorerQueryTab } from '../ExplorerQueryTab'
 import type { ReadReplicasData } from '@/data/read-replicas/replicas-query'
 import { explorerQueryState } from '@/state/explorer-query'
 import { createTabsState, TabsStateContext } from '@/state/tabs'
@@ -32,8 +32,8 @@ vi.mock('@/components/ui/CodeEditor/CodeEditor', () => ({
   ),
 }))
 
-vi.mock('./ExplorerQuerySourceMenu', () => ({
-  ExplorerQuerySourceMenu: ({
+vi.mock('../QueryEditor/QuerySourceMenu', () => ({
+  QuerySourceMenu: ({
     roleImpersonationState,
   }: {
     roleImpersonationState?: { role?: { type: string; role?: string } }
@@ -49,7 +49,7 @@ vi.mock('./ExplorerQuerySourceMenu', () => ({
 const renderQueryTab = () =>
   customRender(
     <TabsStateContext.Provider value={createTabsState('default')}>
-      <QueryTab />
+      <ExplorerQueryTab />
     </TabsStateContext.Provider>
   )
 
@@ -196,7 +196,7 @@ describe('QueryTab execution', () => {
     testContext.params = { ref: 'default', id: 'query-test-2' }
     rerender(
       <TabsStateContext.Provider value={createTabsState('default')}>
-        <QueryTab />
+        <ExplorerQueryTab />
       </TabsStateContext.Provider>
     )
 
diff --git a/apps/studio/components/interfaces/Functions/Functions.templates.ts b/apps/studio/components/interfaces/Functions/Functions.templates.ts
index cbc555527cbab..35783543062bb 100644
--- a/apps/studio/components/interfaces/Functions/Functions.templates.ts
+++ b/apps/studio/components/interfaces/Functions/Functions.templates.ts
@@ -146,7 +146,12 @@ app.listen(8000);`,
 import "jsr:@supabase/functions-js/edge-runtime.d.ts";
 import { withSupabase } from "jsr:@supabase/server@^1";
 import { createOpenAI } from "npm:@ai-sdk/openai";
-import { convertToModelMessages, streamText } from "npm:ai";
+import {
+  convertToModelMessages,
+  createUIMessageStreamResponse,
+  streamText,
+  toUIMessageStream,
+} from "npm:ai";
 
 const cors = {
   "Access-Control-Allow-Origin": "*",
@@ -186,13 +191,16 @@ export default {
       const result = streamText({
         model,
         messages: normalizedMessages,
-        system: SYSTEM_PROMPT,
+        instructions: SYSTEM_PROMPT,
       });
 
-      return result.toUIMessageStreamResponse({
+      const stream = toUIMessageStream({
+        stream: result.stream,
         sendReasoning: true,
         sendSources: true,
       });
+
+      return createUIMessageStreamResponse({ stream });
     } catch (err) {
       if (err instanceof ClientError) {
         return Response.json({ error: err.message }, { status: 400 });
@@ -268,7 +276,7 @@ export default {
 
       const result = await generateText({
         model,
-        system: SYSTEM_PROMPT,
+        instructions: SYSTEM_PROMPT,
         prompt,
         output: Output.object({
           schema: RecipeSchema,
diff --git a/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationRadio.tsx b/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationRadio.tsx
index e176e4ccfb9ec..74f182e7dc611 100644
--- a/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationRadio.tsx
+++ b/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationRadio.tsx
@@ -23,9 +23,9 @@ export function RoleImpersonationRadio<T extends string>({
   return (
     <label
       className={cn(
-        'border border-default rounded-md bg-surface-200 hover:bg-overlay-hover hover:border-control px-4 py-3 cursor-pointer transition-colors',
+        'border border-default rounded-md bg-surface-200 hover:bg-overlay-hover hover:border-control-hover px-4 py-3 cursor-pointer transition-colors',
         fullWidth ? 'w-full' : 'w-44',
-        isSelected && 'border-foreground-muted hover:border-foreground-muted bg-surface-300'
+        isSelected && 'border-control-hover hover:border-control-hover bg-surface-300'
       )}
       tabIndex={0}
       onKeyDown={(e) => {
diff --git a/apps/studio/components/interfaces/SQLEditor/LegacyLogsRewriteBanner.tsx b/apps/studio/components/interfaces/SQLEditor/LegacyLogsRewriteBanner.tsx
index 84a5b1152bd10..35fbaa22d81ac 100644
--- a/apps/studio/components/interfaces/SQLEditor/LegacyLogsRewriteBanner.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/LegacyLogsRewriteBanner.tsx
@@ -1,31 +1,18 @@
-import { useDebounce } from '@uidotdev/usehooks'
-import { useFlag } from 'common'
-import { useMemo } from 'react'
-
 import { DiffType } from './SQLEditor.types'
 import { useSqlEditorAssistant, useSqlEditorRun, useSqlEditorSnippet } from './SQLEditorControllers'
-import { LegacyLogsRewriteAdmonition } from '@/components/interfaces/Settings/Logs/LegacyLogsRewriteAdmonition'
-import {
-  LEGACY_LOGS_DIALECT_CHECK_DEBOUNCE_MS,
-  shouldOfferLegacyLogsRewrite,
-} from '@/data/logs/logs-sql-rewrite'
-import { useLegacyLogsRewrite } from '@/hooks/analytics/useLegacyLogsRewrite'
+import { LegacyLogsRewriteBanner as SharedLegacyLogsRewriteBanner } from '@/components/interfaces/Settings/Logs/LegacyLogsRewriteBanner'
 import {
   getSqlEditorV2StateSnapshot,
   useSqlEditorV2StateSnapshot,
 } from '@/state/sql-editor/sql-editor-state'
 
 /**
- * Offers to rewrite a logs snippet still written in the old BigQuery dialect
- * (per-service `FROM` tables, `unnest(metadata)` joins) to ClickHouse SQL. Legacy
- * Logs Explorer saved queries open in the SQL editor as `log_sql` snippets, and
- * those queries error against the ClickHouse-backed endpoint the editor runs them
- * on — this is the in-editor path out.
- *
- * The request itself is `useLegacyLogsRewrite` (shared with the Logs Explorer);
- * this decides when to offer it and routes the result into the editor's existing
- * AI diff view, so the user accepts or discards it the same way as any other AI
- * edit rather than having the snippet rewritten under them.
+ * Legacy Logs Explorer saved queries open in the SQL editor as `log_sql` snippets,
+ * and those queries error against the ClickHouse-backed endpoint the editor runs
+ * them on. This adapts the shared rewrite offer to the SQL editor's snippet store
+ * and routes an accepted rewrite into the editor's existing AI diff view, so the
+ * user accepts or discards it the same way as any other AI edit rather than
+ * having the snippet rewritten under them.
  *
  * Mount with `key={id}` so the offer resets when the user switches snippets. This
  * component must NOT be conditionally mounted by its parent — it hides itself, so
@@ -38,40 +25,23 @@ export const LegacyLogsRewriteBanner = () => {
     diff: { isDiffOpen, setSourceSqlDiff, setSelectedDiffType },
   } = useSqlEditorAssistant()
 
-  const isOtelLogsEnabled = useFlag('otelLegacyLogs')
   const snapV2 = useSqlEditorV2StateSnapshot()
-
-  // The store is written on every keystroke, so debounce before running the
-  // dialect heuristics — the banner's visibility doesn't need per-character
-  // precision, and a settled value avoids flapping mid-edit.
-  const liveSql = snapV2.snippets[id]?.snippet.content?.unchecked_sql ?? ''
-  const settledSql = useDebounce(liveSql, LEGACY_LOGS_DIALECT_CHECK_DEBOUNCE_MS)
-
-  const isLogsSnippetNeedingRewrite = useMemo(
-    () =>
-      runSource._tag === 'logs' &&
-      shouldOfferLegacyLogsRewrite({ sql: settledSql, isClickhouseLogsEnabled: isOtelLogsEnabled }),
-    [runSource._tag, settledSql, isOtelLogsEnabled]
-  )
-
-  const { state, requestRewrite, dismiss } = useLegacyLogsRewrite({
-    // Rewrite exactly what's in the editor now, not the debounced value the
-    // visibility check used — they differ if the user clicked mid-edit.
-    readSql: () => getSqlEditorV2StateSnapshot().snippets[id]?.snippet.content?.unchecked_sql ?? '',
-    onProposal: ({ original, modified }) => {
-      setSourceSqlDiff({ original, modified })
-      setSelectedDiffType(DiffType.Modification)
-    },
-  })
-
-  // An outcome the user hasn't acknowledged stays up even once the query no longer
-  // looks legacy — otherwise a successful proposal would yank its own result away.
-  const hasUnacknowledgedOutcome = state.status === 'failed' || state.status === 'noRewriteNeeded'
-  const canShowBanner = !isDiffOpen && (isLogsSnippetNeedingRewrite || hasUnacknowledgedOutcome)
-
-  if (!canShowBanner) return null
+  const sql = snapV2.snippets[id]?.snippet.content?.unchecked_sql ?? ''
 
   return (
-    <LegacyLogsRewriteAdmonition state={state} onRewrite={requestRewrite} onDismiss={dismiss} />
+    <SharedLegacyLogsRewriteBanner
+      isLogsSource={runSource._tag === 'logs'}
+      sql={sql}
+      // Rewrite exactly what's in the editor now, not the debounced value the
+      // visibility check used — they differ if the user clicked mid-edit.
+      readSql={() =>
+        getSqlEditorV2StateSnapshot().snippets[id]?.snippet.content?.unchecked_sql ?? ''
+      }
+      onProposal={({ original, modified }) => {
+        setSourceSqlDiff({ original, modified })
+        setSelectedDiffType(DiffType.Modification)
+      }}
+      hidden={isDiffOpen}
+    />
   )
 }
diff --git a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLink.utils.test.ts b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLink.utils.test.ts
index 5e184b8399e62..753f200f5f595 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLink.utils.test.ts
+++ b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLink.utils.test.ts
@@ -60,14 +60,16 @@ describe('getConnectionsAttentionCopy', () => {
     const copy = getConnectionsAttentionCopy({ waitingCount: 1, expiredCount: 0 })
     expect(copy?.type).toBe('warning')
     expect(copy?.title).toBe('Waiting for the AWS account owner')
-    expect(copy?.showAcceptLink).toBe(true)
+    expect(copy?.description).toBe('Accept the resource share in AWS within 12 hours.')
+    expect(copy?.shouldShowAcceptLink).toBe(true)
   })
 
   it('uses destructive copy when only expired', () => {
     const copy = getConnectionsAttentionCopy({ waitingCount: 0, expiredCount: 2 })
     expect(copy?.type).toBe('destructive')
     expect(copy?.title).toBe('Connection requests expired')
-    expect(copy?.showAcceptLink).toBe(false)
+    expect(copy?.description).toBe('AWS can no longer accept these shares.')
+    expect(copy?.shouldShowAcceptLink).toBe(false)
   })
 
   it('counts statuses from a list', () => {
diff --git a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLink.utils.ts b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLink.utils.ts
index 8820e95f2877a..74fe7930ab9a5 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLink.utils.ts
+++ b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLink.utils.ts
@@ -73,7 +73,7 @@ export function getConnectionsAttentionCopy(attention: ConnectionsAttention): {
   type: 'warning' | 'destructive'
   title: string
   description: string
-  showAcceptLink: boolean
+  shouldShowAcceptLink: boolean
 } | null {
   const { waitingCount, expiredCount } = attention
   if (waitingCount === 0 && expiredCount === 0) return null
@@ -82,8 +82,8 @@ export function getConnectionsAttentionCopy(attention: ConnectionsAttention): {
     return {
       type: 'destructive',
       title: expiredCount === 1 ? 'A connection request expired' : 'Connection requests expired',
-      description: 'Add a new connection to try again. AWS can no longer accept this share.',
-      showAcceptLink: false,
+      description: `AWS can no longer accept ${expiredCount === 1 ? 'this share' : 'these shares'}.`,
+      shouldShowAcceptLink: false,
     }
   }
 
@@ -91,9 +91,8 @@ export function getConnectionsAttentionCopy(attention: ConnectionsAttention): {
     return {
       type: 'warning',
       title: 'Some connections need attention',
-      description:
-        'Accept waiting resource shares in AWS within 12 hours. Expired requests need a new connection.',
-      showAcceptLink: true,
+      description: `Accept the waiting resource share${waitingCount === 1 ? '' : 's'} in AWS within 12 hours.`,
+      shouldShowAcceptLink: true,
     }
   }
 
@@ -101,7 +100,7 @@ export function getConnectionsAttentionCopy(attention: ConnectionsAttention): {
     type: 'warning',
     title:
       waitingCount === 1 ? 'Waiting for the AWS account owner' : 'Waiting for AWS account owners',
-    description: 'Accept the resource share in AWS within 12 hours.',
-    showAcceptLink: true,
+    description: `Accept the resource share${waitingCount === 1 ? '' : 's'} in AWS within 12 hours.`,
+    shouldShowAcceptLink: true,
   }
 }
diff --git a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkAttentionAdmonition.tsx b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkAttentionAdmonition.tsx
index 70e00e5c023c5..f2d4258d9fc9f 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkAttentionAdmonition.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkAttentionAdmonition.tsx
@@ -25,7 +25,7 @@ export function AWSPrivateLinkAttentionAdmonition({
       description={copy.description}
       className={className}
       actions={
-        copy.showAcceptLink && (
+        copy.shouldShowAcceptLink && (
           <Button variant="default" className="w-min" icon={<SquareArrowOutUpRight />} asChild>
             <Link
               target="_blank"
diff --git a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx
index 97f1b0a28282d..e08aed7331549 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx
@@ -206,11 +206,16 @@ export const AWSPrivateLinkForm = ({
                 control={form.control}
                 name="accountName"
                 render={({ field }) => (
-                  <FormItemLayout label="Description" labelOptional="Optional">
+                  <FormItemLayout
+                    label="Name"
+                    labelOptional="Optional"
+                    description="Shown on the connections list. Defaults to the AWS account ID if left blank."
+                  >
                     <FormControl>
                       <Input
                         {...field}
                         readOnly={!isNew}
+                        placeholder="Production VPC"
                         onFocus={(e) => {
                           if (!isNew) e.target.blur()
                         }}
diff --git a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkSection.tsx b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkSection.tsx
index 3688e994d5409..0b70fb07b5a31 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkSection.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkSection.tsx
@@ -25,6 +25,7 @@ import {
 } from 'ui-patterns/PageSection'
 
 import { IntegrationSectionIcon } from '../IntegrationsSettings'
+import { getConnectionTitle } from './AWSPrivateLink.utils'
 import { AWSPrivateLinkAccountItem } from './AWSPrivateLinkAccountItem'
 import { AWSPrivateLinkAttentionAdmonition } from './AWSPrivateLinkAttentionAdmonition'
 import { AWSPrivateLinkForm } from './AWSPrivateLinkForm'
@@ -46,7 +47,7 @@ export const AWSPrivateLinkSection = () => {
   const [showForm, setShowForm] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
 
-  const { mutate: deleteAccount, isPending: isDeleting } = useAWSAccountDeleteMutation({
+  const { mutateAsync: deleteAccount, isPending: isDeleting } = useAWSAccountDeleteMutation({
     onSuccess: () => {
       toast.success('Connection will be deleted shortly')
       setShowDeleteModal(false)
@@ -68,25 +69,34 @@ export const AWSPrivateLinkSection = () => {
     setShowForm(true)
   }
 
-  const onConfirmDelete = () => {
-    if (selectedAccount && project) {
-      deleteAccount({
-        projectRef: project.ref,
-        awsAccountId: selectedAccount.aws_account_id,
-        databaseIdentifier:
-          selectedAccount.database_type === 'READ_REPLICA'
-            ? selectedAccount.database_identifier
-            : undefined,
-      })
-    }
+  const onConfirmDelete = async () => {
+    if (!selectedAccount || !project) return
+
+    await deleteAccount({
+      projectRef: project.ref,
+      awsAccountId: selectedAccount.aws_account_id,
+      databaseIdentifier:
+        selectedAccount.database_type === 'READ_REPLICA'
+          ? selectedAccount.database_identifier
+          : undefined,
+    })
+  }
+
+  let deleteDatabaseCopy = 'the primary database'
+  if (selectedAccount?.database_type === 'READ_REPLICA') {
+    deleteDatabaseCopy = selectedAccount.database_identifier
+      ? `the read replica (ID: ${formatDatabaseID(selectedAccount.database_identifier)})`
+      : 'the read replica (ID: Unknown identifier)'
   }
 
-  const deleteDatabaseCopy =
-    selectedAccount?.database_type === 'READ_REPLICA'
-      ? selectedAccount.database_identifier
-        ? `the read replica (ID: ${formatDatabaseID(selectedAccount.database_identifier)})`
-        : 'a read replica'
-      : 'the primary database'
+  const deleteConnectionTitle = selectedAccount
+    ? getConnectionTitle({
+        account_name: selectedAccount.account_name,
+        aws_account_id: selectedAccount.aws_account_id,
+      })
+    : ''
+  const showDeleteConnectionId =
+    !!selectedAccount && deleteConnectionTitle === selectedAccount.aws_account_id
 
   return (
     <>
@@ -161,8 +171,12 @@ export const AWSPrivateLinkSection = () => {
             <AlertDialogTitle>Delete connection</AlertDialogTitle>
             <AlertDialogDescription>
               This removes the PrivateLink connection for{' '}
-              <code className="text-code-inline">{selectedAccount?.aws_account_id}</code> on{' '}
-              {deleteDatabaseCopy}. Applications using this private path will lose access.
+              {showDeleteConnectionId ? (
+                <code className="text-code-inline">{deleteConnectionTitle}</code>
+              ) : (
+                deleteConnectionTitle
+              )}{' '}
+              on {deleteDatabaseCopy}. Applications using this private path will lose access.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
diff --git a/apps/studio/components/interfaces/Settings/Logs/LegacyLogsRewriteBanner.test.tsx b/apps/studio/components/interfaces/Settings/Logs/LegacyLogsRewriteBanner.test.tsx
new file mode 100644
index 0000000000000..0afc4614b4e06
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/Logs/LegacyLogsRewriteBanner.test.tsx
@@ -0,0 +1,152 @@
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { platformComponents } from 'api-types'
+import { FeatureFlagContext } from 'common'
+import { http, HttpResponse } from 'msw'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { LegacyLogsRewriteBanner } from './LegacyLogsRewriteBanner'
+import { API_URL } from '@/lib/constants'
+import { createMockOrganizationResponse } from '@/tests/helpers'
+import { customRender } from '@/tests/lib/custom-render'
+import { addAPIMock, mswServer } from '@/tests/lib/msw'
+
+type ProjectDetailResponse = platformComponents['schemas']['ProjectDetailResponse']
+
+const PROJECT_MOCK: ProjectDetailResponse = {
+  id: 1,
+  ref: 'default',
+  organization_id: 1,
+  name: 'Test Project',
+  status: 'ACTIVE_HEALTHY',
+  cloud_provider: 'AWS',
+  region: 'us-east-1',
+  db_host: 'db.default.supabase.co',
+  restUrl: 'https://default.supabase.co/rest/v1/',
+  inserted_at: '2024-01-01T00:00:00Z',
+  updated_at: '2024-01-01T00:00:00Z',
+  subscription_id: 'sub_123',
+  is_branch_enabled: false,
+  is_physical_backups_enabled: false,
+  high_availability: false,
+  integration_source: null,
+  connectionString: 'postgresql://postgres@localhost:5432/postgres',
+  is_hibernating: false,
+}
+
+const ORG_MOCK = createMockOrganizationResponse({ slug: 'test-org', name: 'Test Org' })
+
+const LEGACY_SQL = 'select event_message from edge_logs limit 10'
+
+const renderBanner = ({
+  sql = LEGACY_SQL,
+  isLogsSource = true,
+  isOtelLogsEnabled = true,
+  hidden = false,
+  onProposal = vi.fn(),
+}: {
+  sql?: string
+  isLogsSource?: boolean
+  isOtelLogsEnabled?: boolean
+  hidden?: boolean
+  onProposal?: (proposal: { original: string; modified: string }) => void
+} = {}) => {
+  const utils = customRender(
+    <FeatureFlagContext.Provider
+      value={{ configcat: { otelLegacyLogs: isOtelLogsEnabled }, posthog: {}, hasLoaded: true }}
+    >
+      <LegacyLogsRewriteBanner
+        isLogsSource={isLogsSource}
+        sql={sql}
+        readSql={() => sql}
+        onProposal={onProposal}
+        hidden={hidden}
+      />
+    </FeatureFlagContext.Provider>
+  )
+  return { ...utils, onProposal }
+}
+
+describe('LegacyLogsRewriteBanner', () => {
+  beforeEach(() => {
+    addAPIMock({ method: 'get', path: '/platform/projects/:ref', response: PROJECT_MOCK })
+    addAPIMock({ method: 'get', path: '/platform/organizations', response: [ORG_MOCK] })
+    addAPIMock({
+      method: 'post',
+      path: '/platform/projects/:ref/analytics/endpoints/logs.all.otel',
+      response: () =>
+        HttpResponse.json<platformComponents['schemas']['AnalyticsResponse']>({ result: [] }),
+    })
+  })
+
+  it('offers a rewrite for legacy logs SQL when the source is logs and the flag is on', async () => {
+    renderBanner()
+
+    expect(
+      await screen.findByText('Logs now run on a ClickHouse-backed engine')
+    ).toBeInTheDocument()
+  })
+
+  it('stays hidden when the source is not logs', () => {
+    renderBanner({ isLogsSource: false })
+
+    expect(screen.queryByText('Logs now run on a ClickHouse-backed engine')).not.toBeInTheDocument()
+  })
+
+  it('stays hidden when the SQL does not look legacy', () => {
+    renderBanner({ sql: 'select event_message from logs limit 10' })
+
+    expect(screen.queryByText('Logs now run on a ClickHouse-backed engine')).not.toBeInTheDocument()
+  })
+
+  it('stays hidden when the ClickHouse logs flag is off', () => {
+    renderBanner({ isOtelLogsEnabled: false })
+
+    expect(screen.queryByText('Logs now run on a ClickHouse-backed engine')).not.toBeInTheDocument()
+  })
+
+  it('stays hidden when a caller suppresses it via `hidden`, even for legacy SQL', () => {
+    renderBanner({ hidden: true })
+
+    expect(screen.queryByText('Logs now run on a ClickHouse-backed engine')).not.toBeInTheDocument()
+  })
+
+  it('hands an accepted rewrite to the caller via onProposal', async () => {
+    const rewritten = "select event_message from logs where source = 'edge_logs' limit 10"
+    mswServer.use(
+      http.post(`${API_URL}/ai/code/complete`, async () => HttpResponse.json(rewritten))
+    )
+
+    const { onProposal } = renderBanner()
+
+    await userEvent.click(await screen.findByRole('button', { name: 'Rewrite with Assistant' }))
+
+    await waitFor(() =>
+      expect(onProposal).toHaveBeenCalledWith({ original: LEGACY_SQL, modified: rewritten })
+    )
+  })
+
+  it('dismisses the offer', async () => {
+    renderBanner()
+
+    await userEvent.click(await screen.findByRole('button', { name: 'Dismiss' }))
+
+    await waitFor(() =>
+      expect(
+        screen.queryByText('Logs now run on a ClickHouse-backed engine')
+      ).not.toBeInTheDocument()
+    )
+  })
+
+  it('reports when the assistant found nothing to rewrite', async () => {
+    mswServer.use(
+      http.post(`${API_URL}/ai/code/complete`, async () => HttpResponse.json(LEGACY_SQL))
+    )
+
+    renderBanner()
+
+    await userEvent.click(await screen.findByRole('button', { name: 'Rewrite with Assistant' }))
+
+    expect(await screen.findByText('No rewrite needed')).toBeInTheDocument()
+  })
+})
diff --git a/apps/studio/components/interfaces/Settings/Logs/LegacyLogsRewriteBanner.tsx b/apps/studio/components/interfaces/Settings/Logs/LegacyLogsRewriteBanner.tsx
new file mode 100644
index 0000000000000..61756661b0a7f
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/Logs/LegacyLogsRewriteBanner.tsx
@@ -0,0 +1,62 @@
+import { useDebounce } from '@uidotdev/usehooks'
+import { useFlag } from 'common'
+import { useMemo } from 'react'
+
+import { LegacyLogsRewriteAdmonition } from './LegacyLogsRewriteAdmonition'
+import {
+  LEGACY_LOGS_DIALECT_CHECK_DEBOUNCE_MS,
+  shouldOfferLegacyLogsRewrite,
+} from '@/data/logs/logs-sql-rewrite'
+import {
+  useLegacyLogsRewrite,
+  type LegacyLogsRewriteProposal,
+} from '@/hooks/analytics/useLegacyLogsRewrite'
+
+export type LegacyLogsRewriteBannerProps = {
+  isLogsSource: boolean
+  sql: string
+  readSql: () => string
+  onProposal: (proposal: LegacyLogsRewriteProposal) => void
+  /** An extra hide condition layered on top of the offer's own visibility, for a
+   *  surface that has its own reason to suppress it (the SQL editor while a diff
+   *  is open). */
+  hidden?: boolean
+}
+
+/**
+ * Offers to rewrite a logs query still written in the old BigQuery dialect
+ * (per-service `FROM` tables, `unnest(metadata)` joins) to ClickHouse SQL.
+ * Shared by every surface that can run a logs query and wants to offer this —
+ * each one decides how to source `sql`/`readSql` and what an accepted
+ * `onProposal` does with the result (the SQL editor opens a diff, Explorer's
+ * query editor swaps the buffer directly).
+ */
+export const LegacyLogsRewriteBanner = ({
+  isLogsSource,
+  sql,
+  readSql,
+  onProposal,
+  hidden,
+}: LegacyLogsRewriteBannerProps) => {
+  const isOtelLogsEnabled = useFlag('otelLegacyLogs')
+
+  const settledSql = useDebounce(sql, LEGACY_LOGS_DIALECT_CHECK_DEBOUNCE_MS)
+
+  const needsRewrite = useMemo(
+    () =>
+      isLogsSource &&
+      shouldOfferLegacyLogsRewrite({ sql: settledSql, isClickhouseLogsEnabled: isOtelLogsEnabled }),
+    [isLogsSource, settledSql, isOtelLogsEnabled]
+  )
+
+  const { state, requestRewrite, dismiss } = useLegacyLogsRewrite({ readSql, onProposal })
+
+  const hasUnacknowledgedOutcome = state.status === 'failed' || state.status === 'noRewriteNeeded'
+  const isEligibleSurface = isLogsSource && isOtelLogsEnabled
+
+  if (hidden || !isEligibleSurface || !(needsRewrite || hasUnacknowledgedOutcome)) return null
+
+  return (
+    <LegacyLogsRewriteAdmonition state={state} onRewrite={requestRewrite} onDismiss={dismiss} />
+  )
+}
diff --git a/apps/studio/components/interfaces/SignIn/SignInWithCustom.tsx b/apps/studio/components/interfaces/SignIn/SignInWithCustom.tsx
index 19feedfb1c1c2..d767fc2184258 100644
--- a/apps/studio/components/interfaces/SignIn/SignInWithCustom.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInWithCustom.tsx
@@ -4,18 +4,16 @@ import { Button } from 'ui'
 
 import { BASE_PATH } from '@/lib/constants'
 import { captureCriticalError } from '@/lib/error-reporting'
+import { getProviderDisplay } from '@/lib/external-identity-providers'
 import { auth, buildPathWithParams } from '@/lib/gotrue'
 
 interface SignInWithCustomProps {
   providerName: string
 }
 
-const formatProviderName = (name: string) => {
-  return name.replace('custom:', '')
-}
-
 export const SignInWithCustom = ({ providerName }: SignInWithCustomProps) => {
   const [loading, setLoading] = useState(false)
+  const displayName = getProviderDisplay(providerName).displayName
 
   async function handleCustomSignIn() {
     setLoading(true)
@@ -38,7 +36,7 @@ export const SignInWithCustom = ({ providerName }: SignInWithCustomProps) => {
 
       if (error) throw error
     } catch (error: any) {
-      toast.error(`Failed to sign in via ${providerName}: ${error.message}`)
+      toast.error(`Failed to sign in via ${displayName}: ${error.message}`)
       captureCriticalError(error, `sign in via ${providerName}`)
       setLoading(false)
     }
@@ -46,7 +44,7 @@ export const SignInWithCustom = ({ providerName }: SignInWithCustomProps) => {
 
   return (
     <Button block onClick={handleCustomSignIn} size="large" variant="default" loading={loading}>
-      Continue with <span className="capitalize">{formatProviderName(providerName)}</span>
+      Continue with {displayName}
     </Button>
   )
 }
diff --git a/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx b/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx
index b1806a2449791..843bbedc8756b 100644
--- a/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx
+++ b/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx
@@ -91,7 +91,11 @@ function CategorySelector({ form }: CategorySelectorProps) {
           <FormItemLayout hideMessage layout="vertical" label="What issue are you having?">
             <FormControl>
               <Select {...fieldWithoutRef} defaultValue={field.value} onValueChange={onValueChange}>
-                <SelectTrigger aria-label="Select an issue" className="w-full">
+                <SelectTrigger
+                  data-support-field="category"
+                  aria-label="Select an issue"
+                  className="w-full"
+                >
                   <SelectValue placeholder="Select an issue">
                     {field.value
                       ? CATEGORY_OPTIONS.find((o) => o.value === field.value)?.label
diff --git a/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx b/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx
index 43a644c0fc01c..e60259a8f7fc8 100644
--- a/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx
+++ b/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx
@@ -43,7 +43,11 @@ export function ClientLibraryInfo({ form, category, library }: ClientLibraryInfo
           <FormItemLayout layout="vertical" label="Which library are you having issues with">
             <FormControl>
               <Select {...field} defaultValue={field.value} onValueChange={field.onChange}>
-                <SelectTrigger className="w-full" aria-label="Select a library">
+                <SelectTrigger
+                  data-support-field="library"
+                  className="w-full"
+                  aria-label="Select a library"
+                >
                   <SelectValue placeholder="Select a library" />
                 </SelectTrigger>
                 <SelectContent>
diff --git a/apps/studio/components/interfaces/Support/SupportForm.utils.tsx b/apps/studio/components/interfaces/Support/SupportForm.utils.tsx
index b072b3f5fc116..6a7ecbb705d76 100644
--- a/apps/studio/components/interfaces/Support/SupportForm.utils.tsx
+++ b/apps/studio/components/interfaces/Support/SupportForm.utils.tsx
@@ -224,3 +224,34 @@ export async function selectInitialOrgAndProject({
     orgSlug: orgs[0]?.slug ?? null,
   }
 }
+
+// Chrome blocks scrollIntoView (triggered by .focus()) when overflow-x: hidden and
+// overflow-y: auto are on the same element. Manually scroll the sidebar instead.
+export function scrollToRequiredField(formId: string, fieldName: string) {
+  const form = document.getElementById(formId)
+  if (!form) return
+
+  // Selects use data-support-field since they have no name attr; inputs/textareas use name.
+  const el =
+    form.querySelector(`[data-support-field="${fieldName}"]`) ??
+    form.querySelector(`[name="${fieldName}"]`)
+  if (!(el instanceof HTMLElement)) return
+
+  const scrollContainer = findScrollableParent(el)
+  if (scrollContainer) {
+    const offset = el.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top - 80
+    scrollContainer.scrollTo({ top: scrollContainer.scrollTop + offset, behavior: 'smooth' })
+  }
+
+  el.focus({ preventScroll: true })
+}
+
+function findScrollableParent(el: HTMLElement): HTMLElement | null {
+  let parent = el.parentElement
+  while (parent && parent !== document.body) {
+    const { overflowY } = window.getComputedStyle(parent)
+    if (overflowY === 'auto' || overflowY === 'scroll') return parent
+    parent = parent.parentElement
+  }
+  return null
+}
diff --git a/apps/studio/components/interfaces/Support/SupportFormV3.tsx b/apps/studio/components/interfaces/Support/SupportFormV3.tsx
index 764dc5959eb4c..d3d86d97e6872 100644
--- a/apps/studio/components/interfaces/Support/SupportFormV3.tsx
+++ b/apps/studio/components/interfaces/Support/SupportFormV3.tsx
@@ -36,6 +36,7 @@ import {
   getOrgSubscriptionPlan,
   NO_ORG_MARKER,
   NO_PROJECT_MARKER,
+  scrollToRequiredField,
 } from './SupportForm.utils'
 import { SupportFormDirectEmailContent } from './SupportFormDirectEmailInfo'
 import { getProjectAuthConfig } from '@/data/auth/auth-config-query'
@@ -148,6 +149,8 @@ export const SupportFormV3 = ({
         type: 'manual',
         message: "Please select the library that you're facing issues with",
       })
+      // setError triggers a re-render; wait for it before querying aria-invalid
+      requestAnimationFrame(() => scrollToRequiredField('support-form', 'library'))
       return
     }
 
@@ -223,7 +226,9 @@ export const SupportFormV3 = ({
     submitSupportTicket(payload)
   }
 
-  const handleFormSubmit = form.handleSubmit(onSubmit)
+  const handleFormSubmit = form.handleSubmit(onSubmit, (errors) => {
+    scrollToRequiredField('support-form', Object.keys(errors)[0])
+  })
 
   const handleSubmitButtonClick: MouseEventHandler<HTMLButtonElement> = (event) => {
     handleFormSubmit(event)
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
index c0c8d8687b40a..cba1129e2ad56 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
@@ -59,6 +59,7 @@ interface ColumnProps {
   isNewRecord: boolean
   hasForeignKeys: boolean
   hasImportContent: boolean
+  shouldAutoFocusName?: boolean
   onUpdateColumn: (changes: Partial<ColumnField>) => void
   onRemoveColumn: () => void
   onEditForeignKey: (relation?: ForeignKey) => void
@@ -71,6 +72,7 @@ export const Column = ({
   isNewRecord = false,
   hasForeignKeys = false,
   hasImportContent = false,
+  shouldAutoFocusName = false,
   onUpdateColumn,
   onRemoveColumn,
   onEditForeignKey,
@@ -137,6 +139,7 @@ export const Column = ({
         <div className="flex w-[95%] items-center justify-between">
           <div className="h-4 w-px bg-border" />
           <Input
+            autoFocus={shouldAutoFocusName}
             aria-label="Column name"
             size="small"
             value={column.name}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
index 737e78921f323..0354611ea99d7 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
@@ -69,6 +69,7 @@ export const ColumnManagement = ({
   const [open, setOpen] = useState(false)
   const [selectedColumn, setSelectedColumn] = useState<ColumnField>()
   const [selectedFk, setSelectedFk] = useState<ForeignKey>()
+  const [columnIdToFocus, setColumnIdToFocus] = useState<string | null>(null)
 
   const hasImportContent = !isEmpty(importContent)
   const [primaryKeyColumns, otherColumns] = partition(
@@ -109,6 +110,7 @@ export const ColumnManagement = ({
   const onAddColumn = () => {
     const defaultColumn = generateColumnField()
     const updatedColumns = columns.concat(defaultColumn)
+    setColumnIdToFocus(defaultColumn.id)
     onColumnsUpdated(updatedColumns)
   }
 
@@ -285,6 +287,7 @@ export const ColumnManagement = ({
                       hasForeignKeys={checkIfHaveForeignKeys(column)}
                       isNewRecord={isNewRecord}
                       hasImportContent={hasImportContent}
+                      shouldAutoFocusName={column.id === columnIdToFocus}
                       onUpdateColumn={(changes) => onUpdateColumn(column, changes)}
                       onRemoveColumn={() => onRemoveColumn(column)}
                       onEditForeignKey={(fk) => {
@@ -316,6 +319,7 @@ export const ColumnManagement = ({
                     isNewRecord={isNewRecord}
                     hasForeignKeys={checkIfHaveForeignKeys(column)}
                     hasImportContent={hasImportContent}
+                    shouldAutoFocusName={column.id === columnIdToFocus}
                     onUpdateColumn={(changes) => onUpdateColumn(column, changes)}
                     onRemoveColumn={() => onRemoveColumn(column)}
                     onEditForeignKey={(fk) => {
diff --git a/apps/studio/components/ui/AIAssistantPanel/Message.Parts.tsx b/apps/studio/components/ui/AIAssistantPanel/Message.Parts.tsx
index 047b51b635690..fc3132f9b5e17 100644
--- a/apps/studio/components/ui/AIAssistantPanel/Message.Parts.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/Message.Parts.tsx
@@ -13,6 +13,7 @@ import {
   parseExecuteSqlChartResult,
 } from './Message.utils'
 import { MessageMarkdown } from './MessageMarkdown'
+import { NotebookProposalRenderer, type NotebookProposalMode } from './NotebookProposalRenderer'
 import { parseSupportRequestMessage, SupportRequestMessage } from './SupportRequestMessage'
 
 function MessagePartText({ textPart }: { textPart: TextUIPart }) {
@@ -232,6 +233,59 @@ function MessagePartDeployEdgeFunction({ toolPart }: { toolPart: ToolUIPart }) {
   )
 }
 
+const NOTEBOOK_DRAFTING_LABEL: Record<NotebookProposalMode, string> = {
+  create: 'Drafting notebook...',
+  update: 'Drafting notebook update...',
+}
+
+const NOTEBOOK_FAILED_LABEL: Record<NotebookProposalMode, string> = {
+  create: 'Failed to create notebook.',
+  update: 'Failed to update notebook.',
+}
+
+function MessagePartNotebookProposal({
+  toolPart,
+  mode,
+}: {
+  toolPart: ToolUIPart
+  mode: NotebookProposalMode
+}) {
+  const { state, input, output } = toolPart
+  const { addToolApprovalResponse } = useMessageActionsContext()
+
+  if (state === 'input-streaming') {
+    return (
+      <div className="my-4 mx-4 rounded-lg border bg-surface-75 heading-meta h-9 px-3 text-foreground-light flex items-center gap-2">
+        <Loader2 className="w-4 h-4 animate-spin" />
+        {NOTEBOOK_DRAFTING_LABEL[mode]}
+      </div>
+    )
+  }
+
+  if (state === 'output-error') {
+    return <p className="text-xs text-danger px-4">{NOTEBOOK_FAILED_LABEL[mode]}</p>
+  }
+
+  const approvalId = state === 'approval-requested' ? toolPart.approval?.id : undefined
+
+  return (
+    <NotebookProposalRenderer
+      mode={mode}
+      state={state}
+      input={input}
+      output={output}
+      onApprove={
+        approvalId ? () => addToolApprovalResponse?.({ id: approvalId, approved: true }) : undefined
+      }
+      onDeny={
+        approvalId
+          ? () => addToolApprovalResponse?.({ id: approvalId, approved: false })
+          : undefined
+      }
+    />
+  )
+}
+
 const MessagePart = {
   Text: MessagePartText,
   Dynamic: MessagePartDynamicTool,
@@ -239,6 +293,7 @@ const MessagePart = {
   Reasoning: MessagePartReasoning,
   ExecuteSql: MessagePartExecuteSql,
   DeployEdgeFunction: MessagePartDeployEdgeFunction,
+  NotebookProposal: MessagePartNotebookProposal,
 } as const
 
 export function MessagePartSwitcher({
@@ -269,6 +324,12 @@ export function MessagePartSwitcher({
     case 'tool-deploy_edge_function': {
       return <MessagePart.DeployEdgeFunction toolPart={part} />
     }
+    case 'tool-create_notebook': {
+      return <MessagePart.NotebookProposal toolPart={part} mode="create" />
+    }
+    case 'tool-update_notebook': {
+      return <MessagePart.NotebookProposal toolPart={part} mode="update" />
+    }
 
     case 'source-url':
     case 'source-document':
diff --git a/apps/studio/components/ui/AIAssistantPanel/Message.utils.ts b/apps/studio/components/ui/AIAssistantPanel/Message.utils.ts
index 932864198f79a..9867cc27511cf 100644
--- a/apps/studio/components/ui/AIAssistantPanel/Message.utils.ts
+++ b/apps/studio/components/ui/AIAssistantPanel/Message.utils.ts
@@ -1,6 +1,9 @@
 import { untrustedSql } from '@supabase/pg-meta'
 import { z, type SafeParseReturnType } from 'zod'
 
+import { notebookOperationsSchema } from '@/data/content/notebooks/notebook-operations'
+import { agentNotebookSchema } from '@/data/content/notebooks/notebook-schema'
+
 // Splits markdown into alternating [plain, code, plain, code, ...] segments.
 // Odd-indexed segments are already inside code spans/fences and should be left alone.
 const CODE_SEGMENT_REGEX = /(```[\s\S]*?```|`[^`]*`)/g
@@ -126,6 +129,20 @@ export const deployEdgeFunctionOutputSchema = z
   .object({ success: z.boolean().optional() })
   .passthrough()
 
+export const createNotebookInputSchema = z.object({
+  name: z.string(),
+  description: z.string().optional(),
+  content: agentNotebookSchema,
+})
+
+export const updateNotebookInputSchema = z.object({
+  id: z.string(),
+  expected_updated_at: z.string(),
+  operations: notebookOperationsSchema,
+})
+
+export const notebookToolOutputSchema = z.object({ id: z.string(), name: z.string() })
+
 export const rateMessageResponseSchema = z.object({
   category: z.enum([
     'sql_generation',
diff --git a/apps/studio/components/ui/AIAssistantPanel/NotebookProposalRenderer.test.tsx b/apps/studio/components/ui/AIAssistantPanel/NotebookProposalRenderer.test.tsx
new file mode 100644
index 0000000000000..ba4d765cc1756
--- /dev/null
+++ b/apps/studio/components/ui/AIAssistantPanel/NotebookProposalRenderer.test.tsx
@@ -0,0 +1,164 @@
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { HttpResponse } from 'msw'
+import { describe, expect, it, vi } from 'vitest'
+
+import { NotebookProposalRenderer } from './NotebookProposalRenderer'
+import type { components } from '@/data/api'
+import { customRender as render } from '@/tests/lib/custom-render'
+import { addAPIMock } from '@/tests/lib/msw'
+
+const NOTEBOOK_ID = 'd3aadd77-7c3c-4de7-aa5c-5aa8ac270b44'
+
+const mockNotebookRow = (overrides: Partial<Record<string, unknown>> = {}) => ({
+  id: NOTEBOOK_ID,
+  type: 'notebook',
+  name: 'Signup funnel',
+  description: '',
+  favorite: false,
+  folder_id: null,
+  inserted_at: '2024-01-01T00:00:00.000Z',
+  updated_at: '2024-01-01T00:00:00.000Z',
+  visibility: 'project',
+  owner_id: 1,
+  project_id: 1,
+  content: {
+    schema_version: 1,
+    cells: [
+      { _tag: 'markdown_cell', id: 'cell-1', text: 'hello' },
+      { _tag: 'markdown_cell', id: 'cell-2', text: 'world' },
+    ],
+  },
+  ...overrides,
+})
+
+const mockContentItem = (row: ReturnType<typeof mockNotebookRow>) =>
+  addAPIMock({
+    method: 'get',
+    path: '/platform/projects/:ref/content/item/:id',
+    response: () =>
+      HttpResponse.json<components['schemas']['GetUserContentByIdResponse']>(
+        row as unknown as components['schemas']['GetUserContentByIdResponse']
+      ),
+  })
+
+describe('NotebookProposalRenderer', () => {
+  it('renders the create-mode preview and approves on confirm', async () => {
+    const user = userEvent.setup()
+    const onApprove = vi.fn()
+
+    render(
+      <NotebookProposalRenderer
+        mode="create"
+        state="approval-requested"
+        input={{
+          name: 'New notebook',
+          content: {
+            schema_version: 1,
+            cells: [{ _tag: 'markdown_cell', text: 'hello' }],
+          },
+        }}
+        output={undefined}
+        onApprove={onApprove}
+        onDeny={vi.fn()}
+      />
+    )
+
+    expect(screen.getByText('1 cell')).toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'Create' }))
+    expect(onApprove).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders the update-mode diff once the notebook is fetched and approves on confirm', async () => {
+    const user = userEvent.setup()
+    const onApprove = vi.fn()
+    mockContentItem(mockNotebookRow())
+
+    render(
+      <NotebookProposalRenderer
+        mode="update"
+        state="approval-requested"
+        input={{
+          id: NOTEBOOK_ID,
+          expected_updated_at: '2024-01-01T00:00:00.000Z',
+          operations: [{ _tag: 'delete_cell', cell_id: 'cell-1' }],
+        }}
+        output={undefined}
+        onApprove={onApprove}
+        onDeny={vi.fn()}
+      />
+    )
+
+    expect(await screen.findByText('−1')).toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'Apply changes' }))
+    expect(onApprove).toHaveBeenCalledTimes(1)
+  })
+
+  it('warns and withholds the diff when the notebook changed since expected_updated_at', async () => {
+    const onApprove = vi.fn()
+    mockContentItem(mockNotebookRow({ updated_at: '2024-06-01T00:00:00.000Z' }))
+
+    render(
+      <NotebookProposalRenderer
+        mode="update"
+        state="approval-requested"
+        input={{
+          id: NOTEBOOK_ID,
+          expected_updated_at: '2024-01-01T00:00:00.000Z',
+          operations: [{ _tag: 'delete_cell', cell_id: 'cell-1' }],
+        }}
+        output={undefined}
+        onApprove={onApprove}
+        onDeny={vi.fn()}
+      />
+    )
+
+    expect(
+      await screen.findByText('This notebook changed since the assistant planned this update')
+    ).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Refresh' })).toBeInTheDocument()
+    expect(onApprove).not.toHaveBeenCalled()
+  })
+
+  it('falls back to a raw-input admonition without dropping the confirm footer on a parse failure', async () => {
+    const user = userEvent.setup()
+    const onDeny = vi.fn()
+
+    render(
+      <NotebookProposalRenderer
+        mode="create"
+        state="approval-requested"
+        input={{ nonsense: true }}
+        output={undefined}
+        onApprove={vi.fn()}
+        onDeny={onDeny}
+      />
+    )
+
+    expect(screen.getByText("Couldn't render a preview for this notebook")).toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'Skip' }))
+    expect(onDeny).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders an Open notebook link once output is available', () => {
+    render(
+      <NotebookProposalRenderer
+        mode="create"
+        state="output-available"
+        input={{}}
+        output={{ id: NOTEBOOK_ID, name: 'Signup funnel' }}
+      />
+    )
+
+    const link = screen.getByRole('link', { name: 'Open notebook' })
+    expect(link).toHaveAttribute('href', `/project/default/explorer/notebook/${NOTEBOOK_ID}`)
+  })
+
+  it('renders a muted skipped summary when output-denied', () => {
+    render(
+      <NotebookProposalRenderer mode="update" state="output-denied" input={{}} output={undefined} />
+    )
+
+    expect(screen.getByText('Skipped notebook update')).toBeInTheDocument()
+  })
+})
diff --git a/apps/studio/components/ui/AIAssistantPanel/NotebookProposalRenderer.tsx b/apps/studio/components/ui/AIAssistantPanel/NotebookProposalRenderer.tsx
new file mode 100644
index 0000000000000..b644d8aeafb67
--- /dev/null
+++ b/apps/studio/components/ui/AIAssistantPanel/NotebookProposalRenderer.tsx
@@ -0,0 +1,308 @@
+import { useParams } from 'common'
+import { Loader2 } from 'lucide-react'
+import Link from 'next/link'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/Admonition'
+import { CodeBlock } from 'ui-patterns/CodeBlock'
+
+import { ConfirmFooter } from './ConfirmFooter'
+import {
+  createNotebookInputSchema,
+  notebookToolOutputSchema,
+  updateNotebookInputSchema,
+} from './Message.utils'
+import { NotebookPreview } from '@/components/interfaces/Explorer/NotebookPreview/NotebookPreview'
+import { AlertError } from '@/components/ui/AlertError'
+import {
+  deriveNotebookDiff,
+  describeNotebookOperationError,
+  type NotebookCellDiffEntry,
+} from '@/data/content/notebooks/notebook-operations'
+import { useNotebookQuery } from '@/data/content/notebooks/notebook-query'
+import { toWireNotebook } from '@/data/content/notebooks/notebook-schema'
+
+export type NotebookProposalMode = 'create' | 'update'
+
+// input-streaming and output-error are handled by the caller before this component is
+// rendered — see MessagePartCreateNotebook / MessagePartUpdateNotebook in Message.Parts.tsx.
+export type NotebookProposalState =
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-denied'
+  | 'output-available'
+
+export interface NotebookProposalRendererProps {
+  mode: NotebookProposalMode
+  state: NotebookProposalState
+  input: unknown
+  output: unknown
+  onApprove?: () => void
+  onDeny?: () => void
+}
+
+type NotebookProposalStepProps = Omit<NotebookProposalRendererProps, 'mode' | 'output'>
+
+const MODE_COPY = {
+  create: {
+    confirmMessage: 'Assistant wants to create this notebook',
+    confirmLabel: 'Create',
+    confirmLabelLoading: 'Creating...',
+    skippedLabel: 'Skipped notebook creation',
+    outputLabel: 'Notebook created',
+  },
+  update: {
+    confirmMessage: 'Assistant wants to update this notebook',
+    confirmLabel: 'Apply changes',
+    confirmLabelLoading: 'Applying changes...',
+    skippedLabel: 'Skipped notebook update',
+    outputLabel: 'Notebook updated',
+  },
+} as const
+
+/**
+ * Renders the create/update notebook tool across all approval states. Owns input parsing
+ * (via the shared `agentNotebookSchema` / `notebookOperationsSchema`), the update-mode diff
+ * fetch, and the `expected_updated_at` version check.
+ */
+export const NotebookProposalRenderer = (props: NotebookProposalRendererProps) => {
+  const { mode, state, output } = props
+
+  if (state === 'output-denied') {
+    return (
+      <p className="text-xs text-foreground-lighter my-2 px-4">{MODE_COPY[mode].skippedLabel}</p>
+    )
+  }
+
+  if (state === 'output-available') {
+    return <NotebookOutputSummary mode={mode} output={output} />
+  }
+
+  const { input, onApprove, onDeny } = props
+  return mode === 'create' ? (
+    <CreateNotebookProposal state={state} input={input} onApprove={onApprove} onDeny={onDeny} />
+  ) : (
+    <UpdateNotebookProposal state={state} input={input} onApprove={onApprove} onDeny={onDeny} />
+  )
+}
+
+function NotebookOutputSummary({ mode, output }: { mode: NotebookProposalMode; output: unknown }) {
+  const { ref } = useParams()
+  const parsedOutput = notebookToolOutputSchema.safeParse(output)
+  const label = MODE_COPY[mode].outputLabel
+
+  return (
+    <div className="flex items-center justify-between gap-2 my-2 mx-4 px-3 py-1.5 text-sm border rounded-md bg-surface-75">
+      <span className="text-foreground-light truncate">
+        {parsedOutput.success ? `${label}: ${parsedOutput.data.name}` : label}
+      </span>
+      {parsedOutput.success && ref && (
+        <Button asChild variant="default" size="tiny">
+          <Link href={`/project/${ref}/explorer/notebook/${parsedOutput.data.id}`}>
+            Open notebook
+          </Link>
+        </Button>
+      )}
+    </div>
+  )
+}
+
+interface NotebookConfirmFooterProps {
+  mode: NotebookProposalMode
+  state: NotebookProposalState
+  message?: string
+  confirmLabel?: string
+  confirmLabelLoading?: string
+  extraLoading?: boolean
+  onApprove?: () => void
+  onDeny?: () => void
+}
+
+/** The footer morphs (label + disabled) across approval-requested/approval-responded and is absent otherwise. */
+function NotebookConfirmFooter({
+  mode,
+  state,
+  message,
+  confirmLabel,
+  confirmLabelLoading,
+  extraLoading = false,
+  onApprove,
+  onDeny,
+}: NotebookConfirmFooterProps) {
+  if (state !== 'approval-requested' && state !== 'approval-responded') return null
+
+  const copy = MODE_COPY[mode]
+  const isApprovalRequested = state === 'approval-requested'
+
+  return (
+    <ConfirmFooter
+      message={message ?? copy.confirmMessage}
+      cancelLabel="Skip"
+      confirmLabel={confirmLabel ?? copy.confirmLabel}
+      confirmLabelLoading={confirmLabelLoading ?? copy.confirmLabelLoading}
+      isLoading={!isApprovalRequested || extraLoading}
+      onCancel={isApprovalRequested ? onDeny : undefined}
+      onConfirm={isApprovalRequested ? onApprove : undefined}
+    />
+  )
+}
+
+function NotebookParseFailure({
+  mode,
+  state,
+  input,
+  onApprove,
+  onDeny,
+}: Pick<NotebookProposalRendererProps, 'mode' | 'state' | 'input' | 'onApprove' | 'onDeny'>) {
+  return (
+    <div className="w-auto overflow-x-hidden my-4 px-4 flex flex-col gap-2">
+      <Admonition
+        type="warning"
+        title="Couldn't render a preview for this notebook"
+        description="The assistant's proposed input didn't match the expected shape. You can still review the raw input below."
+      />
+      <CodeBlock
+        language="json"
+        value={JSON.stringify(input, null, 2)}
+        hideLineNumbers
+        className="text-xs"
+        wrapperClassName="max-h-56"
+      />
+      <NotebookConfirmFooter mode={mode} state={state} onApprove={onApprove} onDeny={onDeny} />
+    </div>
+  )
+}
+
+function CreateNotebookProposal({ state, input, onApprove, onDeny }: NotebookProposalStepProps) {
+  const parsedInput = createNotebookInputSchema.safeParse(input)
+
+  if (!parsedInput.success) {
+    return (
+      <NotebookParseFailure
+        mode="create"
+        state={state}
+        input={input}
+        onApprove={onApprove}
+        onDeny={onDeny}
+      />
+    )
+  }
+
+  const entries: NotebookCellDiffEntry[] = parsedInput.data.content.cells.map(
+    (cell, operationIndex) => ({
+      _tag: 'added',
+      cell,
+      operationIndex,
+    })
+  )
+
+  return (
+    <div className="w-auto overflow-x-hidden my-4 px-4 flex flex-col gap-2">
+      <NotebookPreview entries={entries} mode="create" />
+      <NotebookConfirmFooter mode="create" state={state} onApprove={onApprove} onDeny={onDeny} />
+    </div>
+  )
+}
+
+function UpdateNotebookProposal({ state, input, onApprove, onDeny }: NotebookProposalStepProps) {
+  const { ref } = useParams()
+  const parsedInput = updateNotebookInputSchema.safeParse(input)
+
+  const {
+    data: notebook,
+    isLoading,
+    isError,
+    error,
+    refetch,
+    isFetching,
+  } = useNotebookQuery(
+    { projectRef: ref, id: parsedInput.success ? parsedInput.data.id : undefined },
+    { enabled: parsedInput.success }
+  )
+
+  if (!parsedInput.success) {
+    return (
+      <NotebookParseFailure
+        mode="update"
+        state={state}
+        input={input}
+        onApprove={onApprove}
+        onDeny={onDeny}
+      />
+    )
+  }
+
+  if (isLoading) {
+    return (
+      <div className="my-4 mx-4 rounded-lg border bg-surface-75 heading-meta h-9 px-3 text-foreground-light flex items-center gap-2">
+        <Loader2 className="w-4 h-4 animate-spin" />
+        Loading notebook...
+      </div>
+    )
+  }
+
+  if (isError || !notebook) {
+    return (
+      <div className="w-auto overflow-x-hidden my-4 px-4 flex flex-col gap-2">
+        <AlertError error={error} subject="Failed to load notebook" />
+        {(state === 'approval-requested' || state === 'approval-responded') && (
+          <Button
+            variant="outline"
+            size="tiny"
+            className="w-fit"
+            disabled={state === 'approval-responded'}
+            onClick={onDeny}
+          >
+            Skip
+          </Button>
+        )}
+      </div>
+    )
+  }
+
+  const isStale = notebook.updated_at !== parsedInput.data.expected_updated_at
+
+  if (isStale) {
+    return (
+      <div className="w-auto overflow-x-hidden my-4 px-4 flex flex-col gap-2">
+        <Admonition
+          type="warning"
+          title="This notebook changed since the assistant planned this update"
+          description={`"${notebook.name}" was updated after the assistant read it. Refresh to see the latest version before deciding.`}
+        />
+        <NotebookConfirmFooter
+          mode="update"
+          state={state}
+          confirmLabel="Refresh"
+          confirmLabelLoading="Refreshing..."
+          extraLoading={isFetching}
+          onDeny={onDeny}
+          onApprove={() => refetch()}
+        />
+      </div>
+    )
+  }
+
+  const diff = deriveNotebookDiff(toWireNotebook(notebook.content), parsedInput.data.operations)
+
+  return (
+    <div className="w-auto overflow-x-hidden my-4 px-4 flex flex-col gap-2">
+      {diff.success ? (
+        <NotebookPreview entries={diff.entries} mode="update" />
+      ) : (
+        <Admonition
+          type="warning"
+          title="This update can't be applied as written"
+          description={describeNotebookOperationError(diff.error)}
+        />
+      )}
+      <NotebookConfirmFooter
+        mode="update"
+        state={state}
+        message={`Assistant wants to update "${notebook.name}"`}
+        onApprove={onApprove}
+        onDeny={onDeny}
+      />
+    </div>
+  )
+}
diff --git a/apps/studio/data/content/notebooks/notebook-schema.ts b/apps/studio/data/content/notebooks/notebook-schema.ts
index 6e563a6ae1510..8a1e1332ed609 100644
--- a/apps/studio/data/content/notebooks/notebook-schema.ts
+++ b/apps/studio/data/content/notebooks/notebook-schema.ts
@@ -190,6 +190,29 @@ export const notebookDomainSchema = z.object({
 
 export type NotebookContent = z.infer<typeof notebookDomainSchema>
 export type Cell = z.infer<typeof cellDomainSchema>
+
+// Reverse of cellDomainSchema's transform, for display-only conversions (e.g. deriving a
+// diff preview client-side). Never promoted or executed — writes still go through
+// acceptUntrustedSql/acceptUntrustedLogsSql at the point of user action.
+export function toWireCell(cell: Cell): CellWire {
+  switch (cell._tag) {
+    case 'markdown_cell':
+      return cell
+    case 'database_cell': {
+      const { unchecked_sql, ...rest } = cell
+      return { ...rest, sql: unchecked_sql }
+    }
+    case 'log_cell': {
+      const { unchecked_sql, ...rest } = cell
+      return { ...rest, sql: unchecked_sql }
+    }
+  }
+}
+
+export function toWireNotebook(content: NotebookContent): NotebookWire {
+  return { schema_version: content.schema_version, cells: content.cells.map(toWireCell) }
+}
+
 export type MarkdownCell = Extract<Cell, { _tag: 'markdown_cell' }>
 export type DatabaseCell = Extract<Cell, { _tag: 'database_cell' }>
 export type LogCell = Extract<Cell, { _tag: 'log_cell' }>
diff --git a/apps/studio/data/scoped-access-tokens/permission-scope-map-query.ts b/apps/studio/data/scoped-access-tokens/permission-scope-map-query.ts
index 604cc8d68ebf3..e652a95652364 100644
--- a/apps/studio/data/scoped-access-tokens/permission-scope-map-query.ts
+++ b/apps/studio/data/scoped-access-tokens/permission-scope-map-query.ts
@@ -154,27 +154,6 @@ export const getEnabledEndpointsForCapability = ({
     .map(([raw]) => splitEndpoint(raw))
 }
 
-/**
- * Informational lookup for the per-permission risk tooltip: the MCP tools associated with any of
- * the given scopes. Unlike getEnabledMcpTools this is not conjunctive — it surfaces every tool that
- * lists one of these scopes, so users can see what a capability relates to before granting it.
- */
-export const getMcpToolsForScopes = ({
-  scopeIds,
-  permissionScopeMap,
-}: {
-  scopeIds: Iterable<string>
-  permissionScopeMap: PermissionScopeMap | undefined
-}): string[] => {
-  if (permissionScopeMap == null) return []
-
-  const tools = new Set<string>()
-  for (const id of scopeIds) {
-    permissionScopeMap.scopes[id]?.mcp_tools.forEach((tool) => tools.add(tool))
-  }
-  return Array.from(tools)
-}
-
 /**
  * The endpoint's payload changed endpoint/tool requirements from a flat conjunctive scope list
  * (string[]) to alternative groups (string[][], ScopeGroupAlternatives) at the same URL, and the
diff --git a/apps/studio/evals/assistant.eval.ts b/apps/studio/evals/assistant.eval.ts
index c4500caec4f7d..740ce88eb5ef3 100644
--- a/apps/studio/evals/assistant.eval.ts
+++ b/apps/studio/evals/assistant.eval.ts
@@ -14,6 +14,7 @@ import {
   urlValidityScorer,
 } from './scorer'
 import { sqlIdentifierQuotingScorer, sqlSyntaxScorer } from './scorer-wasm'
+import { buildTranscript } from './transcript'
 import { generateAssistantResponse } from '@/lib/ai/generate-assistant-response'
 import { getModel } from '@/lib/ai/model'
 import { DEFAULT_ASSISTANT_BASE_MODEL_ID, getAssistantModelEntry } from '@/lib/ai/model.utils'
@@ -52,7 +53,8 @@ Eval('Assistant', {
       })
 
       const finishReason = await result.finishReason
-      return { finishReason }
+      const steps = await result.steps
+      return { finishReason, transcript: buildTranscript(input.prompt, steps) }
     } finally {
       toolsAbortController.abort()
     }
diff --git a/apps/studio/evals/scorer-online.ts b/apps/studio/evals/scorer-online.ts
index f0d8386e65671..a7b33f6948615 100644
--- a/apps/studio/evals/scorer-online.ts
+++ b/apps/studio/evals/scorer-online.ts
@@ -8,7 +8,7 @@
  *   - correctnessScorer: requires ground truth (expected output), offline-eval-only.
  */
 
-import braintrust, { type EvalScorer } from 'braintrust'
+import braintrust from 'braintrust'
 
 import {
   completenessScorer,
@@ -17,9 +17,7 @@ import {
   goalCompletionScorer,
   safetyScorer,
   urlValidityScorer,
-  type AssistantEvalInput,
-  type AssistantEvalOutput,
-  type Expected,
+  type AssistantEvalScorer,
 } from './scorer'
 import manifest from './scorer-online-manifest.json'
 
@@ -47,7 +45,7 @@ const handlers = {
   // Online traces have no expected, so we wrap it to always run.
   safety: (args) =>
     safetyScorer({ ...args, expected: { ...args.expected, requiresSafetyCheck: true } }),
-} satisfies Record<string, EvalScorer<AssistantEvalInput, AssistantEvalOutput, Expected>>
+} satisfies Record<string, AssistantEvalScorer>
 
 // @ts-expect-error - Project ID is only required at build-time
 const project = braintrust.projects.create({ id: projectId })
diff --git a/apps/studio/evals/scorer-wasm.ts b/apps/studio/evals/scorer-wasm.ts
index 0856e8cd90482..b7c91ea119fc6 100644
--- a/apps/studio/evals/scorer-wasm.ts
+++ b/apps/studio/evals/scorer-wasm.ts
@@ -1,7 +1,7 @@
-import { EvalScorer, Trace } from 'braintrust'
+import { Trace } from 'braintrust'
 import { parse } from 'libpg-query'
 
-import { AssistantEvalInput, AssistantEvalOutput, Expected } from './scorer'
+import { AssistantEvalScorer } from './scorer'
 import { getParsedToolSpans } from './trace-utils'
 import { executeSqlInputSchema } from '@/lib/ai/tools/studio-tools'
 import { extractIdentifiers, isQuotedInSql, needsQuoting } from '@/lib/sql-identifier-quoting'
@@ -14,11 +14,7 @@ async function getSqlQueries(trace: Trace): Promise<string[]> {
   return spans.map((s) => s.input.sql)
 }
 
-export const sqlSyntaxScorer: EvalScorer<
-  AssistantEvalInput,
-  AssistantEvalOutput,
-  Expected
-> = async ({ trace }) => {
+export const sqlSyntaxScorer: AssistantEvalScorer = async ({ trace }) => {
   if (!trace) return null
 
   const sqlQueries = await getSqlQueries(trace)
@@ -44,11 +40,7 @@ export const sqlSyntaxScorer: EvalScorer<
   }
 }
 
-export const sqlIdentifierQuotingScorer: EvalScorer<
-  AssistantEvalInput,
-  AssistantEvalOutput,
-  Expected
-> = async ({ trace }) => {
+export const sqlIdentifierQuotingScorer: AssistantEvalScorer = async ({ trace }) => {
   if (!trace) return null
 
   const sqlQueries = await getSqlQueries(trace)
diff --git a/apps/studio/evals/scorer.test.ts b/apps/studio/evals/scorer.test.ts
new file mode 100644
index 0000000000000..a6150c369be07
--- /dev/null
+++ b/apps/studio/evals/scorer.test.ts
@@ -0,0 +1,69 @@
+import type { Trace } from 'braintrust'
+import { describe, expect, it, vi } from 'vitest'
+
+import { urlValidityScorer, type AssistantEvalOutput } from './scorer'
+import type { Transcript } from './transcript'
+
+const DOCS_URL = 'https://supabase.com/docs/guides/auth'
+
+/**
+ * Minimal stand-in for a live Trace. Only getThread is exercised by the online
+ * fallback path (see resolveTranscript in scorer.ts).
+ */
+const mockTrace = (thread: unknown[]) => {
+  const getThread = vi.fn().mockResolvedValue(thread)
+  return { trace: { getThread } as unknown as Trace, getThread }
+}
+
+const THREAD_WITH_DOCS_URL = [
+  { role: 'user', content: 'Where are the auth docs?' },
+  { role: 'assistant', content: [{ type: 'text', text: `See ${DOCS_URL} for details.` }] },
+]
+
+const transcript = (lastAssistantTurn: string): Transcript => ({
+  currentUserInput: 'Where are the auth docs?',
+  priorConversation: null,
+  lastAssistantTurn,
+  lastAssistantTurnWithToolInputs: lastAssistantTurn,
+})
+
+const runUrlValidityScorer = (output: AssistantEvalOutput | null, trace?: Trace) =>
+  urlValidityScorer({
+    input: { prompt: 'Where are the auth docs?' },
+    expected: {},
+    output,
+    trace,
+  })
+
+describe('scorers with online (null) output', () => {
+  // Online scorers run against live production logs, which have no eval task
+  // and therefore no output at all — Braintrust passes null.
+  it('returns null instead of throwing when there is neither output nor trace', async () => {
+    await expect(runUrlValidityScorer(null)).resolves.toBeNull()
+  })
+
+  it('derives the transcript from the trace when output is null', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({ ok: true, status: 200 })
+    vi.stubGlobal('fetch', fetchMock)
+
+    const { trace, getThread } = mockTrace(THREAD_WITH_DOCS_URL)
+    const result = await runUrlValidityScorer(null, trace)
+
+    expect(getThread).toHaveBeenCalled()
+    expect(result).toMatchObject({ name: 'URL Validity', score: 1, metadata: { urls: [DOCS_URL] } })
+
+    vi.unstubAllGlobals()
+  })
+
+  it('prefers the offline task transcript over the trace when both are present', async () => {
+    const { trace, getThread } = mockTrace(THREAD_WITH_DOCS_URL)
+    const output = {
+      finishReason: 'stop' as const,
+      transcript: transcript('No links here, just prose.'),
+    }
+
+    // No supabase URLs in the offline transcript, so the scorer opts out.
+    await expect(runUrlValidityScorer(output, trace)).resolves.toBeNull()
+    expect(getThread).not.toHaveBeenCalled()
+  })
+})
diff --git a/apps/studio/evals/scorer.ts b/apps/studio/evals/scorer.ts
index 43b4080ce08a6..998e856a013ee 100644
--- a/apps/studio/evals/scorer.ts
+++ b/apps/studio/evals/scorer.ts
@@ -1,10 +1,11 @@
 import { FinishReason } from 'ai'
 import { LLMClassifierFromTemplate } from 'autoevals'
-import { EvalCase, EvalScorer } from 'braintrust'
+import { EvalCase, EvalScorer, type Trace } from 'braintrust'
 import { stripIndent } from 'common-tags'
 import { z } from 'zod'
 
 import { getParsedToolSpans, getThreadParts, getToolSpans } from './trace-utils'
+import type { Transcript } from './transcript'
 import { loadKnowledgeInputSchema } from '@/lib/ai/tools/studio-tools'
 import { extractUrls } from '@/lib/helpers'
 
@@ -22,8 +23,10 @@ export type AssistantEvalInput = {
   >
 }
 
+/** What the offline eval task in assistant.eval.ts returns. */
 export type AssistantEvalOutput = {
   finishReason: FinishReason
+  transcript: Transcript
 }
 
 type ToolInputExactValue = string | number | boolean | null | string[]
@@ -56,12 +59,38 @@ export type AssistantEvalCaseMetadata = {
 
 export type AssistantEvalCase = EvalCase<AssistantEvalInput, Expected, AssistantEvalCaseMetadata>
 
+/**
+ * Note the nullable output: offline, scorers get the eval task's
+ * AssistantEvalOutput, but online scorers run against live production logs that
+ * have no eval task behind them, so Braintrust passes `null`. Those scorers
+ * derive an equivalent Transcript from `trace` instead — see resolveTranscript.
+ */
+export type AssistantEvalScorer = EvalScorer<
+  AssistantEvalInput,
+  AssistantEvalOutput | null,
+  Expected
+>
+
 // --- Trace helpers ---
 
 const mcpTextContentSpanOutputSchema = z.object({
   content: z.array(z.object({ type: z.literal('text').optional(), text: z.string() })),
 })
 
+/**
+ * Prefers the offline eval task's in-memory transcript (untruncated); falls
+ * back to deriving one from the live trace for online scorers, which have no
+ * such task output to read.
+ */
+async function resolveTranscript(
+  output: AssistantEvalOutput | null,
+  trace: Trace | undefined
+): Promise<Transcript | null> {
+  if (output?.transcript) return output.transcript
+  if (!trace) return null
+  return getThreadParts(trace)
+}
+
 // --- Scorers ---
 
 const matchesToolInputField = (actual: unknown, expected: ToolInputFieldExpectation) => {
@@ -83,11 +112,7 @@ const matchesExpectedToolInput = (
   })
 }
 
-export const toolUsageScorer: EvalScorer<
-  AssistantEvalInput,
-  AssistantEvalOutput,
-  Expected
-> = async ({ expected, trace }) => {
+export const toolUsageScorer: AssistantEvalScorer = async ({ expected, trace }) => {
   if (!expected.requiredTools || !trace) return null
 
   const toolSpans = await getToolSpans(trace)
@@ -113,11 +138,7 @@ export const toolUsageScorer: EvalScorer<
   }
 }
 
-export const knowledgeUsageScorer: EvalScorer<
-  AssistantEvalInput,
-  AssistantEvalOutput,
-  Expected
-> = async ({ expected, trace }) => {
+export const knowledgeUsageScorer: AssistantEvalScorer = async ({ expected, trace }) => {
   if (!expected.requiredKnowledge || !trace) return null
 
   const knowledgeSpans = await getParsedToolSpans(trace, 'load_knowledge', {
@@ -157,17 +178,12 @@ const concisenessEvaluator = LLMClassifierFromTemplate<{ input: string }>({
   model: LLM_AS_A_JUDGE_MODEL,
 })
 
-export const concisenessScorer: EvalScorer<
-  AssistantEvalInput,
-  AssistantEvalOutput,
-  Expected
-> = async ({ trace }) => {
-  if (!trace) return null
-  const parts = await getThreadParts(trace)
-  if (!parts.currentUserInput || !parts.lastAssistantTurn) return null
+export const concisenessScorer: AssistantEvalScorer = async ({ output, trace }) => {
+  const transcript = await resolveTranscript(output, trace)
+  if (!transcript?.lastAssistantTurn) return null
   return await concisenessEvaluator({
-    input: parts.currentUserInput,
-    output: parts.lastAssistantTurn,
+    input: transcript.currentUserInput,
+    output: transcript.lastAssistantTurn,
   })
 }
 
@@ -188,17 +204,12 @@ const completenessEvaluator = LLMClassifierFromTemplate<{ input: string }>({
   model: LLM_AS_A_JUDGE_MODEL,
 })
 
-export const completenessScorer: EvalScorer<
-  AssistantEvalInput,
-  AssistantEvalOutput,
-  Expected
-> = async ({ trace }) => {
-  if (!trace) return null
-  const parts = await getThreadParts(trace, { includeToolCallInputs: true })
-  if (!parts.currentUserInput || !parts.lastAssistantTurn) return null
+export const completenessScorer: AssistantEvalScorer = async ({ output, trace }) => {
+  const transcript = await resolveTranscript(output, trace)
+  if (!transcript?.lastAssistantTurnWithToolInputs) return null
   return await completenessEvaluator({
-    input: parts.currentUserInput,
-    output: parts.lastAssistantTurn,
+    input: transcript.currentUserInput,
+    output: transcript.lastAssistantTurnWithToolInputs,
   })
 }
 
@@ -229,18 +240,13 @@ const goalCompletionEvaluator = LLMClassifierFromTemplate<{
   model: LLM_AS_A_JUDGE_MODEL,
 })
 
-export const goalCompletionScorer: EvalScorer<
-  AssistantEvalInput,
-  AssistantEvalOutput,
-  Expected
-> = async ({ trace }) => {
-  if (!trace) return null
-  const parts = await getThreadParts(trace, { includeToolCallInputs: true })
-  if (!parts.currentUserInput || !parts.lastAssistantTurn) return null
+export const goalCompletionScorer: AssistantEvalScorer = async ({ output, trace }) => {
+  const transcript = await resolveTranscript(output, trace)
+  if (!transcript?.lastAssistantTurnWithToolInputs) return null
   return await goalCompletionEvaluator({
-    input: parts.currentUserInput,
-    priorConversation: parts.priorConversation ?? 'None',
-    output: parts.lastAssistantTurn,
+    input: transcript.currentUserInput,
+    priorConversation: transcript.priorConversation ?? 'None',
+    output: transcript.lastAssistantTurnWithToolInputs,
   })
 }
 
@@ -265,11 +271,7 @@ const docsFaithfulnessEvaluator = LLMClassifierFromTemplate<{ docs: string }>({
   model: LLM_AS_A_JUDGE_MODEL,
 })
 
-export const docsFaithfulnessScorer: EvalScorer<
-  AssistantEvalInput,
-  AssistantEvalOutput,
-  Expected
-> = async ({ trace }) => {
+export const docsFaithfulnessScorer: AssistantEvalScorer = async ({ output, trace }) => {
   if (!trace) return null
 
   const docsSpans = await getToolSpans(trace, 'search_docs')
@@ -290,12 +292,12 @@ export const docsFaithfulnessScorer: EvalScorer<
 
   if (docs.length === 0) return null
 
-  const parts = await getThreadParts(trace, { includeToolCallInputs: true })
-  if (!parts.lastAssistantTurn) return null
+  const transcript = await resolveTranscript(output, trace)
+  if (!transcript?.lastAssistantTurnWithToolInputs) return null
 
   return await docsFaithfulnessEvaluator({
     docs: docs.join('\n\n'),
-    output: parts.lastAssistantTurn,
+    output: transcript.lastAssistantTurnWithToolInputs,
   })
 }
 
@@ -328,19 +330,17 @@ const correctnessEvaluator = LLMClassifierFromTemplate<{ input: string; expected
   model: LLM_AS_A_JUDGE_MODEL,
 })
 
-export const correctnessScorer: EvalScorer<
-  AssistantEvalInput,
-  AssistantEvalOutput,
-  Expected
-> = async ({ expected, trace }) => {
-  if (!expected.correctAnswer || !trace) return null
-  const parts = await getThreadParts(trace, { includeToolCallInputs: true })
-  if (!parts.currentUserInput || !parts.lastAssistantTurn) return null
+export const correctnessScorer: AssistantEvalScorer = async ({ expected, output }) => {
+  if (!expected.correctAnswer) return null
+  // Correctness needs ground truth, so it only ever runs offline where the eval
+  // task's transcript is present — no trace fallback needed.
+  const transcript = output?.transcript
+  if (!transcript?.lastAssistantTurnWithToolInputs) return null
 
   return await correctnessEvaluator({
-    input: parts.currentUserInput,
+    input: transcript.currentUserInput,
     expected: expected.correctAnswer,
-    output: parts.lastAssistantTurn,
+    output: transcript.lastAssistantTurnWithToolInputs,
   })
 }
 
@@ -371,32 +371,24 @@ const safetyEvaluator = LLMClassifierFromTemplate<{ input: string; priorConversa
   model: LLM_AS_A_JUDGE_MODEL,
 })
 
-export const safetyScorer: EvalScorer<AssistantEvalInput, AssistantEvalOutput, Expected> = async ({
-  expected,
-  trace,
-}) => {
-  if (!expected.requiresSafetyCheck || !trace) return null
+export const safetyScorer: AssistantEvalScorer = async ({ expected, output, trace }) => {
+  if (!expected.requiresSafetyCheck) return null
 
-  const parts = await getThreadParts(trace, { includeToolCallInputs: true })
-  if (!parts.currentUserInput || !parts.lastAssistantTurn) return null
+  const transcript = await resolveTranscript(output, trace)
+  if (!transcript?.lastAssistantTurnWithToolInputs) return null
 
   return await safetyEvaluator({
-    input: parts.currentUserInput,
-    priorConversation: parts.priorConversation ?? 'None',
-    output: parts.lastAssistantTurn,
+    input: transcript.currentUserInput,
+    priorConversation: transcript.priorConversation ?? 'None',
+    output: transcript.lastAssistantTurnWithToolInputs,
   })
 }
 
-export const urlValidityScorer: EvalScorer<
-  AssistantEvalInput,
-  AssistantEvalOutput,
-  Expected
-> = async ({ trace }) => {
-  if (!trace) return null
-  const parts = await getThreadParts(trace)
-  if (!parts.lastAssistantTurn) return null
+export const urlValidityScorer: AssistantEvalScorer = async ({ output, trace }) => {
+  const transcript = await resolveTranscript(output, trace)
+  if (!transcript?.lastAssistantTurn) return null
 
-  const allUrls = extractUrls(parts.lastAssistantTurn, {
+  const allUrls = extractUrls(transcript.lastAssistantTurn, {
     excludeCodeBlocks: true,
     excludeTemplates: true,
   })
diff --git a/apps/studio/evals/trace-utils.test.ts b/apps/studio/evals/trace-utils.test.ts
index 60c47409cae33..e74aab1fb22fe 100644
--- a/apps/studio/evals/trace-utils.test.ts
+++ b/apps/studio/evals/trace-utils.test.ts
@@ -116,20 +116,14 @@ const MOCK_THREAD = [
 ]
 
 describe('getThreadPartsFromThread', () => {
-  it('parses a sanitized Braintrust trace.getThread payload', () => {
+  it('parses a sanitized Braintrust trace.getThread payload, computing both tool-input variants', () => {
     expect(getThreadPartsFromThread(MOCK_THREAD)).toEqual({
-      projectContext: "The user's current project is Acme Analytics.",
+      currentUserInput: 'Can you create that orders table now?',
       priorConversation:
         '[user]\nWhat did we decide earlier?\n\n[assistant]\nWe decided to add an orders table with RLS policies before generating sample data.',
-      currentUserInput: 'Can you create that orders table now?',
       lastAssistantTurn:
         '[assistant]\n[called rename_chat]\n\n[assistant]\n[called load_knowledge]\n[called execute_sql]\n\n[assistant]\nI created the public.orders table. You should add RLS policies before exposing it to users.',
-    })
-  })
-
-  it('can include tool call inputs in serialized assistant turns', () => {
-    expect(getThreadPartsFromThread(MOCK_THREAD, { includeToolCallInputs: true })).toMatchObject({
-      lastAssistantTurn: `\
+      lastAssistantTurnWithToolInputs: `\
 [assistant]
 [called rename_chat]
 {
@@ -151,21 +145,24 @@ I created the public.orders table. You should add RLS policies before exposing i
     })
   })
 
-  it('uses the most recent project context message', () => {
-    expect(
-      getThreadPartsFromThread([
-        {
-          role: 'assistant',
-          content: "The user's current project is Old Project.",
-        },
-        ...MOCK_THREAD,
-      ])
-    ).toMatchObject({
-      projectContext: "The user's current project is Acme Analytics.",
-    })
+  it('filters out project-context messages so they never leak into prior conversation', () => {
+    const threadWithExtraProjectContext = [
+      {
+        role: 'assistant',
+        content: "The user's current project is Old Project.",
+      },
+      ...MOCK_THREAD,
+    ]
+
+    expect(getThreadPartsFromThread(threadWithExtraProjectContext)).toEqual(
+      getThreadPartsFromThread(MOCK_THREAD)
+    )
+    expect(getThreadPartsFromThread(threadWithExtraProjectContext).priorConversation).not.toContain(
+      'Old Project'
+    )
   })
 
-  it('returns prior conversation without current turn parts when there is no user message', () => {
+  it('treats all messages as prior conversation when there is no user message', () => {
     expect(
       getThreadPartsFromThread([
         {
@@ -174,10 +171,10 @@ I created the public.orders table. You should add RLS policies before exposing i
         },
       ])
     ).toEqual({
-      projectContext: null,
+      currentUserInput: '',
       priorConversation: '[assistant]\nI can help with your Supabase project.',
-      currentUserInput: null,
       lastAssistantTurn: null,
+      lastAssistantTurnWithToolInputs: null,
     })
   })
 })
diff --git a/apps/studio/evals/trace-utils.ts b/apps/studio/evals/trace-utils.ts
index 94114491382ab..3a7aef8ea7f79 100644
--- a/apps/studio/evals/trace-utils.ts
+++ b/apps/studio/evals/trace-utils.ts
@@ -1,7 +1,7 @@
 import type { SpanData, Trace } from 'braintrust'
 import { z } from 'zod'
 
-const projectContextPrefix = "The user's current project is "
+import type { Transcript } from './transcript'
 
 /**
  * Matches AI SDK tool spans as Braintrust records them: tool args first,
@@ -17,35 +17,6 @@ const aiSdkToolSpanInputSchema = z.tuple([
     .passthrough(),
 ])
 
-const threadTextBlockSchema = z.object({ type: z.literal('text'), text: z.string() })
-const threadToolCallArgumentsSchema = z.object({ type: z.literal('valid'), value: z.unknown() })
-const threadToolCallBlockSchema = z.object({
-  type: z.literal('tool_call'),
-  tool_name: z.string(),
-  arguments: z.unknown().optional(),
-})
-const threadContentBlockSchema = z.union([threadTextBlockSchema, threadToolCallBlockSchema])
-const threadContentSchema = z.union([
-  z.string(),
-  z.array(z.unknown()).transform((blocks) =>
-    blocks.flatMap((block) => {
-      const result = threadContentBlockSchema.safeParse(block)
-      return result.success ? [result.data] : []
-    })
-  ),
-])
-const threadMessageSchema = z.object({
-  role: z.enum(['system', 'user', 'assistant', 'tool']),
-  content: threadContentSchema,
-})
-
-type ThreadMessage = z.infer<typeof threadMessageSchema>
-type ThreadContentBlock = z.infer<typeof threadContentBlockSchema>
-
-export type ThreadSerializationOptions = {
-  includeToolCallInputs?: boolean
-}
-
 /** Normalized Braintrust tool span with unwrapped tool input and raw output. */
 export type ToolSpan = {
   span: SpanData
@@ -53,13 +24,6 @@ export type ToolSpan = {
   output: unknown
 }
 
-export type ThreadParts = {
-  projectContext: string | null
-  priorConversation: string | null
-  currentUserInput: string | null
-  lastAssistantTurn: string | null
-}
-
 /** Optional schemas used to validate and type a tool span's input and output. */
 type ToolSpanSchemas<
   TInputSchema extends z.ZodType | undefined,
@@ -85,41 +49,118 @@ function getToolSpanInput(span: SpanData): unknown {
   return result.success ? result.data[0] : span.input
 }
 
+/** Returns normalized tool spans from the trace, optionally filtered to a specific tool name. */
+export async function getToolSpans(trace: Trace, toolName?: string): Promise<ToolSpan[]> {
+  const spans = await trace.getSpans({ spanType: ['tool'] })
+  const toolSpans = spans.map((span) => ({
+    span,
+    input: getToolSpanInput(span),
+    output: span.output,
+  }))
+  if (!toolName) return toolSpans
+  return toolSpans.filter((s) => s.span.span_attributes?.name === toolName)
+}
+
+/** Returns only tool spans whose normalized input/output match the provided schemas. */
+export async function getParsedToolSpans<
+  TInputSchema extends z.ZodType | undefined = undefined,
+  TOutputSchema extends z.ZodType | undefined = undefined,
+>(
+  trace: Trace,
+  toolName: string,
+  schemas: ToolSpanSchemas<TInputSchema, TOutputSchema> = {}
+): Promise<Array<ParsedToolSpan<TInputSchema, TOutputSchema>>> {
+  const spans = await getToolSpans(trace, toolName)
+
+  return spans.flatMap(({ span, input, output }) => {
+    const parsedInput = schemas.inputSchema?.safeParse(input)
+    if (parsedInput && !parsedInput.success) return []
+
+    const parsedOutput = schemas.outputSchema?.safeParse(output)
+    if (parsedOutput && !parsedOutput.success) return []
+
+    return [
+      {
+        span,
+        input: parsedInput ? parsedInput.data : input,
+        output: parsedOutput ? parsedOutput.data : output,
+      } as ParsedToolSpan<TInputSchema, TOutputSchema>,
+    ]
+  })
+}
+
+// --- Thread parsing (fallback path for online scorers) ---
+//
+// Online scorers run against live production traces, which have no in-memory
+// transcript to read (that only exists inside the offline eval task — see
+// buildTranscript in transcript.ts). trace.getThread() is the only source of
+// the full conversation available to them there, so we derive an equivalent
+// Transcript from it. This is subject to Braintrust's getThread()
+// preview-length truncation, unlike buildTranscript's in-memory path — that's
+// a known, pre-existing limitation of the online-scoring path, not something
+// this fallback introduces.
+
+const projectContextPrefix = "The user's current project is "
+
+const threadTextBlockSchema = z.object({ type: z.literal('text'), text: z.string() })
+const threadToolCallArgumentsSchema = z.object({ type: z.literal('valid'), value: z.unknown() })
+const threadToolCallBlockSchema = z.object({
+  type: z.literal('tool_call'),
+  tool_name: z.string(),
+  arguments: z.unknown().optional(),
+})
+const threadContentBlockSchema = z.union([threadTextBlockSchema, threadToolCallBlockSchema])
+const threadContentSchema = z.union([
+  z.string(),
+  z.array(z.unknown()).transform((blocks) =>
+    blocks.flatMap((block) => {
+      const result = threadContentBlockSchema.safeParse(block)
+      return result.success ? [result.data] : []
+    })
+  ),
+])
+const threadMessageSchema = z.object({
+  role: z.enum(['system', 'user', 'assistant', 'tool']),
+  content: threadContentSchema,
+})
+
+type ThreadMessage = z.infer<typeof threadMessageSchema>
+type ThreadContentBlock = z.infer<typeof threadContentBlockSchema>
+
 function unwrapToolCallArguments(args: unknown): unknown {
   const result = threadToolCallArgumentsSchema.safeParse(args)
   return result.success ? result.data.value : args
 }
 
-function serializeContentBlock(
-  block: ThreadContentBlock,
-  options: ThreadSerializationOptions
-): string {
+function serializeContentBlock(block: ThreadContentBlock, includeToolCallInputs: boolean): string {
   if (block.type === 'text') return block.text
 
   const marker = `[called ${block.tool_name}]`
-  if (!options.includeToolCallInputs || typeof block.arguments === 'undefined') return marker
+  if (!includeToolCallInputs || typeof block.arguments === 'undefined') return marker
 
   return `${marker}\n${JSON.stringify(unwrapToolCallArguments(block.arguments), null, 2)}`
 }
 
 function serializeMessageContent(
   message: ThreadMessage | undefined,
-  options: ThreadSerializationOptions = {}
+  includeToolCallInputs: boolean
 ): string | null {
   if (!message) return null
   if (typeof message.content === 'string') return message.content || null
 
-  const content = message.content.map((block) => serializeContentBlock(block, options)).join('\n')
+  const content = message.content
+    .map((block) => serializeContentBlock(block, includeToolCallInputs))
+    .join('\n')
 
   return content || null
 }
 
 function serializeMessages(
   messages: ThreadMessage[],
-  options: ThreadSerializationOptions = {}
+  includeToolCallInputs: boolean
 ): string | null {
   const parts = messages.flatMap((message) => {
-    const content = serializeMessageContent(message, options)
+    const content = serializeMessageContent(message, includeToolCallInputs)
     return content ? [`[${message.role}]\n${content}`] : []
   })
 
@@ -129,7 +170,7 @@ function serializeMessages(
 function isProjectContextMessage(message: ThreadMessage): boolean {
   return (
     message.role === 'assistant' &&
-    Boolean(serializeMessageContent(message)?.startsWith(projectContextPrefix))
+    Boolean(serializeMessageContent(message, false)?.startsWith(projectContextPrefix))
   )
 }
 
@@ -140,86 +181,47 @@ function findLastUserIndex(messages: ThreadMessage[]): number {
   return -1
 }
 
-export function getThreadPartsFromThread(
-  thread: unknown[],
-  options: ThreadSerializationOptions = {}
-): ThreadParts {
+/**
+ * Parses a raw trace.getThread() payload into a Transcript. Pulled out from
+ * getThreadParts so it can be unit tested without a live Trace.
+ */
+export function getThreadPartsFromThread(thread: unknown[]): Transcript {
   const messages = thread.flatMap((message) => {
     const result = threadMessageSchema.safeParse(message)
     if (!result.success || result.data.role === 'system' || result.data.role === 'tool') return []
     return [result.data]
   })
 
-  const projectContextMessages = messages.filter(isProjectContextMessage)
   const chatMessages = messages.filter((message) => !isProjectContextMessage(message))
   const lastUserIdx = findLastUserIndex(chatMessages)
-  const projectContext = serializeMessageContent(
-    projectContextMessages[projectContextMessages.length - 1]
-  )
 
   if (lastUserIdx === -1) {
     return {
-      projectContext,
-      priorConversation: serializeMessages(chatMessages, options),
-      currentUserInput: null,
+      currentUserInput: '',
+      priorConversation: serializeMessages(chatMessages, true),
       lastAssistantTurn: null,
+      lastAssistantTurnWithToolInputs: null,
     }
   }
 
+  const assistantMessages = chatMessages
+    .slice(lastUserIdx + 1)
+    .filter((message) => message.role === 'assistant')
+
   return {
-    projectContext,
-    priorConversation: serializeMessages(chatMessages.slice(0, lastUserIdx), options),
-    currentUserInput: serializeMessageContent(chatMessages[lastUserIdx]),
-    lastAssistantTurn: serializeMessages(
-      chatMessages.slice(lastUserIdx + 1).filter((message) => message.role === 'assistant'),
-      options
-    ),
+    currentUserInput: serializeMessageContent(chatMessages[lastUserIdx], false) ?? '',
+    priorConversation: serializeMessages(chatMessages.slice(0, lastUserIdx), true),
+    lastAssistantTurn: serializeMessages(assistantMessages, false),
+    lastAssistantTurnWithToolInputs: serializeMessages(assistantMessages, true),
   }
 }
 
-export async function getThreadParts(
-  trace: Trace,
-  options: ThreadSerializationOptions = {}
-): Promise<ThreadParts> {
-  return getThreadPartsFromThread(await trace.getThread(), options)
-}
-
-/** Returns normalized tool spans from the trace, optionally filtered to a specific tool name. */
-export async function getToolSpans(trace: Trace, toolName?: string): Promise<ToolSpan[]> {
-  const spans = await trace.getSpans({ spanType: ['tool'] })
-  const toolSpans = spans.map((span) => ({
-    span,
-    input: getToolSpanInput(span),
-    output: span.output,
-  }))
-  if (!toolName) return toolSpans
-  return toolSpans.filter((s) => s.span.span_attributes?.name === toolName)
-}
-
-/** Returns only tool spans whose normalized input/output match the provided schemas. */
-export async function getParsedToolSpans<
-  TInputSchema extends z.ZodType | undefined = undefined,
-  TOutputSchema extends z.ZodType | undefined = undefined,
->(
-  trace: Trace,
-  toolName: string,
-  schemas: ToolSpanSchemas<TInputSchema, TOutputSchema> = {}
-): Promise<Array<ParsedToolSpan<TInputSchema, TOutputSchema>>> {
-  const spans = await getToolSpans(trace, toolName)
-
-  return spans.flatMap(({ span, input, output }) => {
-    const parsedInput = schemas.inputSchema?.safeParse(input)
-    if (parsedInput && !parsedInput.success) return []
-
-    const parsedOutput = schemas.outputSchema?.safeParse(output)
-    if (parsedOutput && !parsedOutput.success) return []
-
-    return [
-      {
-        span,
-        input: parsedInput ? parsedInput.data : input,
-        output: parsedOutput ? parsedOutput.data : output,
-      } as ParsedToolSpan<TInputSchema, TOutputSchema>,
-    ]
-  })
+/**
+ * Derives a Transcript from a live trace's thread. Used as the fallback for
+ * online scorers, which have no in-memory transcript to read (see
+ * getThreadPartsFromThread above for why, and why this is truncation-prone
+ * in a way the offline path isn't).
+ */
+export async function getThreadParts(trace: Trace): Promise<Transcript> {
+  return getThreadPartsFromThread(await trace.getThread())
 }
diff --git a/apps/studio/evals/transcript.test.ts b/apps/studio/evals/transcript.test.ts
new file mode 100644
index 0000000000000..a889d6507d743
--- /dev/null
+++ b/apps/studio/evals/transcript.test.ts
@@ -0,0 +1,79 @@
+import type { StepResult, ToolSet } from 'ai'
+import { describe, expect, it } from 'vitest'
+
+import { buildTranscript } from './transcript'
+
+// Minimal fixtures matching only the `content` shape buildTranscript reads —
+// no need to fully populate the rest of StepResult's fields.
+const makeStep = (content: unknown[]): StepResult<ToolSet> =>
+  ({ content }) as unknown as StepResult<ToolSet>
+
+describe('buildTranscript', () => {
+  it('serializes a single step with only a text part', () => {
+    const steps = [makeStep([{ type: 'text', text: 'Here is your answer.' }])]
+
+    const transcript = buildTranscript('What is the answer?', steps)
+
+    expect(transcript.currentUserInput).toBe('What is the answer?')
+    expect(transcript.priorConversation).toBeNull()
+    expect(transcript.lastAssistantTurn).toBe('Here is your answer.')
+    expect(transcript.lastAssistantTurnWithToolInputs).toBe('Here is your answer.')
+  })
+
+  it('serializes a single step with only a tool-call part', () => {
+    const steps = [
+      makeStep([{ type: 'tool-call', toolName: 'execute_sql', input: { sql: 'select 1;' } }]),
+    ]
+
+    const transcript = buildTranscript('Run a query.', steps)
+
+    expect(transcript.lastAssistantTurn).toBe('[called execute_sql]')
+    expect(transcript.lastAssistantTurnWithToolInputs).toBe(
+      '[called execute_sql]\n' + JSON.stringify({ sql: 'select 1;' }, null, 2)
+    )
+  })
+
+  it('joins multiple steps in order with a blank line between them', () => {
+    const steps = [
+      makeStep([{ type: 'text', text: 'Let me check that.' }]),
+      makeStep([{ type: 'tool-call', toolName: 'execute_sql', input: { sql: 'select 1;' } }]),
+      makeStep([{ type: 'text', text: 'The answer is 1.' }]),
+    ]
+
+    const transcript = buildTranscript('What is 1?', steps)
+
+    expect(transcript.lastAssistantTurn).toBe(
+      'Let me check that.\n\n[called execute_sql]\n\nThe answer is 1.'
+    )
+    expect(transcript.lastAssistantTurnWithToolInputs).toBe(
+      'Let me check that.\n\n[called execute_sql]\n' +
+        JSON.stringify({ sql: 'select 1;' }, null, 2) +
+        '\n\nThe answer is 1.'
+    )
+    expect(transcript.lastAssistantTurn?.endsWith('The answer is 1.')).toBe(true)
+  })
+
+  it('skips reasoning and tool-result content parts', () => {
+    const steps = [
+      makeStep([
+        { type: 'reasoning', text: 'Thinking about the best approach...' },
+        { type: 'tool-call', toolName: 'execute_sql', input: { sql: 'select 1;' } },
+        { type: 'tool-result', toolName: 'execute_sql', output: { rows: [{ '1': 1 }] } },
+        { type: 'text', text: 'The result is 1.' },
+      ]),
+    ]
+
+    const transcript = buildTranscript('What is 1?', steps)
+
+    expect(transcript.lastAssistantTurn).toBe('[called execute_sql]\nThe result is 1.')
+    expect(transcript.lastAssistantTurn).not.toContain('Thinking about the best approach')
+    expect(transcript.lastAssistantTurn).not.toContain('rows')
+  })
+
+  it('returns null transcripts for an empty steps array', () => {
+    const transcript = buildTranscript('Hello', [])
+
+    expect(transcript.lastAssistantTurn).toBeNull()
+    expect(transcript.lastAssistantTurnWithToolInputs).toBeNull()
+  })
+})
diff --git a/apps/studio/evals/transcript.ts b/apps/studio/evals/transcript.ts
new file mode 100644
index 0000000000000..13ed3a0e0b7fa
--- /dev/null
+++ b/apps/studio/evals/transcript.ts
@@ -0,0 +1,52 @@
+import type { StepResult, ToolSet } from 'ai'
+
+export type Transcript = {
+  /** The user's prompt for this eval case. Always available locally — no reconstruction needed. */
+  currentUserInput: string
+  /**
+   * Serialized prior conversation before the current turn, or null.
+   */
+  priorConversation: string | null
+  /** Text-only serialization of the assistant's turn: prose only, no tool call markers. */
+  lastAssistantTurn: string | null
+  /** Same as lastAssistantTurn, but with `[called toolName]` markers (and JSON args) for each tool call, interleaved in order. */
+  lastAssistantTurnWithToolInputs: string | null
+}
+
+/**
+ * Builds a Transcript directly from the AI SDK's step history — no trace/network round-trip.
+ * Mirrors the marker format the old trace.getThread()-based serialization used
+ * (`[called toolName]\n<json args>`), so scorer prompts don't need to change:
+ * only text and tool-call content parts are represented; reasoning/source/file/tool-result/
+ * tool-error parts are skipped, exactly as the old serializeContentBlock did.
+ */
+export function buildTranscript(
+  currentUserInput: string,
+  steps: ReadonlyArray<StepResult<ToolSet>>
+): Transcript {
+  const renderStep = (step: StepResult<ToolSet>, includeToolInputs: boolean): string =>
+    step.content
+      .flatMap((part) => {
+        if (part.type === 'text') return part.text ? [part.text] : []
+        if (part.type === 'tool-call') {
+          const marker = `[called ${part.toolName}]`
+          return [includeToolInputs ? `${marker}\n${JSON.stringify(part.input, null, 2)}` : marker]
+        }
+        return []
+      })
+      .join('\n')
+
+  const joinSteps = (includeToolInputs: boolean): string | null => {
+    const rendered = steps
+      .map((step) => renderStep(step, includeToolInputs))
+      .filter((s) => s.length > 0)
+    return rendered.length > 0 ? rendered.join('\n\n') : null
+  }
+
+  return {
+    currentUserInput,
+    priorConversation: null,
+    lastAssistantTurn: joinSteps(false),
+    lastAssistantTurnWithToolInputs: joinSteps(true),
+  }
+}
diff --git a/apps/studio/lib/ai/generate-assistant-response.ts b/apps/studio/lib/ai/generate-assistant-response.ts
index 7d949003a22c7..9f457df4bc53f 100644
--- a/apps/studio/lib/ai/generate-assistant-response.ts
+++ b/apps/studio/lib/ai/generate-assistant-response.ts
@@ -1,8 +1,8 @@
 import * as ai from 'ai'
 import {
   convertToModelMessages,
+  isStepCount,
   isToolUIPart,
-  stepCountIs,
   type LanguageModel,
   type ModelMessage,
   type SystemModelMessage,
@@ -153,14 +153,14 @@ export async function generateAssistantResponse({
 
     return streamTextFn({
       model,
-      system: systemMessage,
-      stopWhen: stepCountIs(10),
+      instructions: systemMessage,
+      stopWhen: isStepCount(10),
       messages: coreMessages,
       ...(providerOptions && { providerOptions }),
       tools,
       ...(abortSignal && { abortSignal }),
       ...(span && {
-        onFinish: ({ steps, finishReason }) => {
+        onEnd: ({ steps, finishReason }) => {
           const metadata: Record<string, unknown> = {
             isFinalStep: finishReason === 'stop',
           }
@@ -180,7 +180,7 @@ export async function generateAssistantResponse({
   }
 
   if (shouldTrace) {
-    // startSpan instead of traced() so we control when the span closes via onFinish.
+    // startSpan instead of traced() so we control when the span closes via onEnd.
     // Scorers read from child spans (LLM + tool) in the trace rather than a root span output field.
     const span = startSpan({ name: 'generateAssistantResponse', type: 'function' })
     onSpanCreated?.(span.id)
diff --git a/apps/studio/lib/ai/tool-filter.test.ts b/apps/studio/lib/ai/tool-filter.test.ts
index dfd026ed96f63..c681d7544936c 100644
--- a/apps/studio/lib/ai/tool-filter.test.ts
+++ b/apps/studio/lib/ai/tool-filter.test.ts
@@ -42,7 +42,8 @@ describe('tool allowance by opt-in level', () => {
 
     Object.entries(filtered).forEach(([toolName, tool]) => {
       // Check if tool is actually allowed (not stubbed)
-      const isStubbed = tool.description?.includes('Requires opting in')
+      const isStubbed =
+        typeof tool.description === 'string' && tool.description.includes('Requires opting in')
       if (!isStubbed) {
         allowedTools.push(toolName)
       }
diff --git a/apps/studio/lib/ai/tool-filter.ts b/apps/studio/lib/ai/tool-filter.ts
index a2256aa5e2491..9b296d0c0da0e 100644
--- a/apps/studio/lib/ai/tool-filter.ts
+++ b/apps/studio/lib/ai/tool-filter.ts
@@ -163,10 +163,16 @@ export function createPrivacyMessageTool(toolInstance: Tool<any, any>) {
     "You don't have permission to use this tool. This is an organization-wide setting requiring you to opt-in. Please choose your preferred data sharing level in your organization's settings. Supabase Assistant uses Amazon Bedrock, which does not store or log your prompts and completions, use them to train AWS models, or distribute them to third parties. By default, no data is shared. Granting permission allows Supabase to send information (like schema, logs, or data, depending on your chosen level) to Bedrock solely to generate responses."
   const condensedPrivacyMessage =
     'Requires opting in to sending data to Bedrock which does not store, train on, or distribute it. You can opt in via organization settings.'
+  const toolDescription = toolInstance.description
+  const description =
+    typeof toolDescription === 'function'
+      ? (...args: Parameters<typeof toolDescription>) =>
+          `${toolDescription(...args)} (Note: ${condensedPrivacyMessage})`
+      : `${toolDescription ?? ''} (Note: ${condensedPrivacyMessage})`
 
   return {
     ...toolInstance,
-    description: `${toolInstance.description} (Note: ${condensedPrivacyMessage})`,
+    description,
     execute: async (_args: any, _context: any) => ({ status: privacyMessage }),
   }
 }
diff --git a/apps/studio/lib/ai/tools/incident-tools.test.ts b/apps/studio/lib/ai/tools/incident-tools.test.ts
index dee4afe52c9b7..056b57c0bac5b 100644
--- a/apps/studio/lib/ai/tools/incident-tools.test.ts
+++ b/apps/studio/lib/ai/tools/incident-tools.test.ts
@@ -73,7 +73,10 @@ describe('ai/tools/incident-tools', () => {
 
         const tools = getIncidentTools({ baseUrl: 'https://example.com/dashboard' })
         if (!tools.get_active_incidents.execute) throw new Error('execute is undefined')
-        await tools.get_active_incidents.execute({}, { toolCallId: 'test', messages: [] })
+        await tools.get_active_incidents.execute(
+          {},
+          { toolCallId: 'test', messages: [], context: {} }
+        )
 
         expect(mockFetch).toHaveBeenCalledWith(
           'https://example.com/dashboard/api/incident-status',
@@ -210,7 +213,10 @@ describe('ai/tools/incident-tools', () => {
 
         const tools = getIncidentTools({ baseUrl: 'https://supabase.com/dashboard' })
         if (!tools.get_active_incidents.execute) throw new Error('execute is undefined')
-        await tools.get_active_incidents.execute({}, { toolCallId: 'test', messages: [] })
+        await tools.get_active_incidents.execute(
+          {},
+          { toolCallId: 'test', messages: [], context: {} }
+        )
 
         const callArgs = mockFetch.mock.calls[0]
         expect(callArgs[1].signal).toBeInstanceOf(AbortSignal)
diff --git a/apps/studio/lib/ai/tools/mock-tools.test.ts b/apps/studio/lib/ai/tools/mock-tools.test.ts
index bbd437a5add38..1cd7f5ee1015b 100644
--- a/apps/studio/lib/ai/tools/mock-tools.test.ts
+++ b/apps/studio/lib/ai/tools/mock-tools.test.ts
@@ -74,7 +74,7 @@ describe('ai/tools/mock-tools getMockTools', () => {
 
       const result = await mockTools.list_notebooks.execute(
         { limit: 20 },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       expect(result.notebooks.map((notebook) => notebook.name)).toEqual([
@@ -92,7 +92,7 @@ describe('ai/tools/mock-tools getMockTools', () => {
 
       const result = await mockTools.get_notebook.execute(
         { id: AUTH_HEALTH_NOTEBOOK_ID },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       expect(result.cells.map((cell) => cell._tag)).toEqual([
@@ -112,7 +112,7 @@ describe('ai/tools/mock-tools getMockTools', () => {
       await expect(
         mockTools.get_notebook.execute(
           { id: 'unknown-notebook-id' },
-          { toolCallId: 'test', messages: [] }
+          { toolCallId: 'test', messages: [], context: {} }
         )
       ).rejects.toThrow(/not found/i)
     })
@@ -140,20 +140,20 @@ describe('ai/tools/mock-tools getMockTools', () => {
 
       const created = await mockTools.create_notebook.execute(
         { name: 'New notebook', content },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
       expect(created).toEqual({ id: expect.any(String), name: 'New notebook' })
 
       const fetched = await mockTools.get_notebook.execute(
         { id: created.id },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
       expect(fetched.cells).toHaveLength(2)
       expect(fetched.cells.every((cell) => typeof cell.id === 'string')).toBe(true)
 
       const listed = await mockTools.list_notebooks.execute(
         { limit: 20 },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
       expect(listed.notebooks).toHaveLength(3)
       const newEntry = listed.notebooks.find((notebook) => notebook.id === created.id)
@@ -175,7 +175,7 @@ describe('ai/tools/mock-tools getMockTools', () => {
 
       const before = await mockTools.get_notebook.execute(
         { id: AUTH_HEALTH_NOTEBOOK_ID },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
       const [markdownCell, , logCell] = before.cells
 
@@ -192,13 +192,13 @@ describe('ai/tools/mock-tools getMockTools', () => {
             { _tag: 'delete_cell', cell_id: logCell.id },
           ],
         },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
       expect(result).toEqual({ id: AUTH_HEALTH_NOTEBOOK_ID, name: 'Auth health check' })
 
       const after = await mockTools.get_notebook.execute(
         { id: AUTH_HEALTH_NOTEBOOK_ID },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
       expect(after.cells.map((cell) => cell._tag)).toEqual([
         'markdown_cell',
@@ -208,7 +208,7 @@ describe('ai/tools/mock-tools getMockTools', () => {
 
       const listed = await mockTools.list_notebooks.execute(
         { limit: 20 },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
       const entry = listed.notebooks.find((notebook) => notebook.id === AUTH_HEALTH_NOTEBOOK_ID)
       expect(entry?.cell_count).toBe(3)
@@ -221,7 +221,7 @@ describe('ai/tools/mock-tools getMockTools', () => {
 
       const before = await mockTools.get_notebook.execute(
         { id: EDGE_FUNCTION_NOTEBOOK_ID },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       await expect(
@@ -231,13 +231,13 @@ describe('ai/tools/mock-tools getMockTools', () => {
             expected_updated_at: before.updated_at,
             operations: [{ _tag: 'delete_cell', cell_id: 'does-not-exist' }],
           },
-          { toolCallId: 'test', messages: [] }
+          { toolCallId: 'test', messages: [], context: {} }
         )
       ).rejects.toThrow(/does-not-exist/)
 
       const after = await mockTools.get_notebook.execute(
         { id: EDGE_FUNCTION_NOTEBOOK_ID },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
       expect(after.cells.map((cell) => cell._tag)).toEqual(['markdown_cell', 'log_cell'])
     })
@@ -251,7 +251,7 @@ describe('ai/tools/mock-tools getMockTools', () => {
           name: 'Ephemeral notebook',
           content: { schema_version: 1, cells: [{ _tag: 'markdown_cell', text: 'hi' }] },
         },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       const secondCall = await getMockTools(undefined, new AbortController().signal)
@@ -259,7 +259,7 @@ describe('ai/tools/mock-tools getMockTools', () => {
 
       const result = await secondCall.list_notebooks.execute(
         { limit: 20 },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
       expect(result.notebooks.map((notebook) => notebook.name)).toEqual([
         'Auth health check',
diff --git a/apps/studio/lib/ai/tools/mock-tools.ts b/apps/studio/lib/ai/tools/mock-tools.ts
index 0c06860d0f712..69b959e033751 100644
--- a/apps/studio/lib/ai/tools/mock-tools.ts
+++ b/apps/studio/lib/ai/tools/mock-tools.ts
@@ -1,5 +1,5 @@
 import assert from 'node:assert'
-import { tool, type ToolCallOptions, type ToolSet } from 'ai'
+import { tool, type ToolExecutionOptions, type ToolSet } from 'ai'
 import { z } from 'zod'
 
 import { getStudioTools } from '../tools/studio-tools'
@@ -423,7 +423,7 @@ function createMockNotebookTools(store: MockNotebookStore) {
       ...list_notebooks,
       execute: async (
         { limit = 20 }: { cursor?: string; limit?: number },
-        _options: ToolCallOptions
+        _options: ToolExecutionOptions<unknown>
       ) => ({
         notebooks: store
           .list()
@@ -442,7 +442,7 @@ function createMockNotebookTools(store: MockNotebookStore) {
     },
     get_notebook: {
       ...get_notebook,
-      execute: async ({ id }: { id: string }, _options: ToolCallOptions) => {
+      execute: async ({ id }: { id: string }, _options: ToolExecutionOptions<unknown>) => {
         const notebook = store.get(id)
         if (!notebook) throw new Error(`Notebook ${id} not found.`)
 
@@ -475,7 +475,7 @@ function createMockNotebookTools(store: MockNotebookStore) {
           description?: string
           content: AgentNotebook
         },
-        _options: ToolCallOptions
+        _options: ToolExecutionOptions<unknown>
       ) => {
         const created = store.create({ name, description, content })
         return { id: created.id, name: created.name }
@@ -493,7 +493,7 @@ function createMockNotebookTools(store: MockNotebookStore) {
           id,
           operations,
         }: { id: string; expected_updated_at: string; operations: NotebookOperation[] },
-        _options: ToolCallOptions
+        _options: ToolExecutionOptions<unknown>
       ) => {
         const notebook = store.get(id)
         if (!notebook) throw new Error(`Notebook ${id} not found.`)
diff --git a/apps/studio/lib/ai/tools/notebook-tools.test.ts b/apps/studio/lib/ai/tools/notebook-tools.test.ts
index 3185c8315a994..81f080b4c89a7 100644
--- a/apps/studio/lib/ai/tools/notebook-tools.test.ts
+++ b/apps/studio/lib/ai/tools/notebook-tools.test.ts
@@ -114,7 +114,7 @@ describe('ai/tools/notebook-tools', () => {
 
       const result = await tools.list_notebooks.execute(
         { limit: 20, cursor: 'prev-page' },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       expect(capturedRequest?.headers.get('authorization')).toBe('Bearer token')
@@ -159,7 +159,7 @@ describe('ai/tools/notebook-tools', () => {
 
       await tools.list_notebooks.execute(
         { limit: 1, sort_by: 'inserted_at' },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       const url = new URL(capturedRequest!.url)
@@ -194,7 +194,7 @@ describe('ai/tools/notebook-tools', () => {
 
       const result = await tools.get_notebook.execute(
         { id: 'notebook-1' },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       expect(result).toEqual({
@@ -248,7 +248,10 @@ describe('ai/tools/notebook-tools', () => {
       if (!tools.get_notebook.execute) throw new Error('execute is undefined')
 
       await expect(
-        tools.get_notebook.execute({ id: 'snippet-1' }, { toolCallId: 'test', messages: [] })
+        tools.get_notebook.execute(
+          { id: 'snippet-1' },
+          { toolCallId: 'test', messages: [], context: {} }
+        )
       ).rejects.toThrow('is not a notebook')
     })
 
@@ -263,7 +266,10 @@ describe('ai/tools/notebook-tools', () => {
       if (!tools.get_notebook.execute) throw new Error('execute is undefined')
 
       await expect(
-        tools.get_notebook.execute({ id: 'missing' }, { toolCallId: 'test', messages: [] })
+        tools.get_notebook.execute(
+          { id: 'missing' },
+          { toolCallId: 'test', messages: [], context: {} }
+        )
       ).rejects.toThrow()
     })
   })
@@ -317,7 +323,7 @@ describe('ai/tools/notebook-tools', () => {
 
       await tools.create_notebook.execute(
         { name: 'Signup funnel', content: VALID_AGENT_CONTENT },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       expect(sentBody?.type).toBe('notebook')
@@ -351,7 +357,7 @@ describe('ai/tools/notebook-tools', () => {
 
       const result = await tools.create_notebook.execute(
         { name: 'Signup funnel', content: VALID_AGENT_CONTENT },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       expect(typeof sentBody?.id).toBe('string')
@@ -410,7 +416,7 @@ describe('ai/tools/notebook-tools', () => {
             },
           ],
         },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       expect(sentBody?.id).toBe('notebook-1')
@@ -439,7 +445,7 @@ describe('ai/tools/notebook-tools', () => {
             expected_updated_at: '2026-01-01T00:00:00.000Z',
             operations: [{ _tag: 'delete_cell', cell_id: 'missing-cell' }],
           },
-          { toolCallId: 'test', messages: [] }
+          { toolCallId: 'test', messages: [], context: {} }
         )
       ).rejects.toThrow('No cell with id "missing-cell"')
     })
@@ -457,7 +463,7 @@ describe('ai/tools/notebook-tools', () => {
             expected_updated_at: '2025-12-31T00:00:00.000Z',
             operations: [{ _tag: 'delete_cell', cell_id: 'cell-3' }],
           },
-          { toolCallId: 'test', messages: [] }
+          { toolCallId: 'test', messages: [], context: {} }
         )
       ).rejects.toThrow(/changed since expected_updated_at/)
     })
diff --git a/apps/studio/lib/ai/tools/report-tools.test.ts b/apps/studio/lib/ai/tools/report-tools.test.ts
index 33cd0a6d20221..8dd6dea1524c0 100644
--- a/apps/studio/lib/ai/tools/report-tools.test.ts
+++ b/apps/studio/lib/ai/tools/report-tools.test.ts
@@ -66,7 +66,7 @@ describe('ai/tools/report-tools', () => {
 
       const result = await tools.list_reports.execute(
         { limit: 20 },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       expect(capturedRequest?.headers.get('authorization')).toBe('Bearer token')
@@ -169,7 +169,7 @@ describe('ai/tools/report-tools', () => {
 
       const result = (await tools.get_report.execute(
         { id: 'report-1' },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )) as { layout: Array<{ id: string; attribute: string; sql?: string }> }
 
       expect(result.layout).toEqual([
@@ -208,7 +208,10 @@ describe('ai/tools/report-tools', () => {
       if (!tools.get_report.execute) throw new Error('execute is undefined')
 
       await expect(
-        tools.get_report.execute({ id: 'snippet-1' }, { toolCallId: 'test', messages: [] })
+        tools.get_report.execute(
+          { id: 'snippet-1' },
+          { toolCallId: 'test', messages: [], context: {} }
+        )
       ).rejects.toThrow('is not a report')
     })
   })
diff --git a/apps/studio/lib/ai/tools/studio-tools.test.ts b/apps/studio/lib/ai/tools/studio-tools.test.ts
index 4a090a884c12a..24a3c644284fb 100644
--- a/apps/studio/lib/ai/tools/studio-tools.test.ts
+++ b/apps/studio/lib/ai/tools/studio-tools.test.ts
@@ -89,7 +89,7 @@ describe('ai/tools/studio-tools', () => {
       if (!renameTool.execute) throw new Error('execute is undefined')
       const result = await renameTool.execute(
         { newName: 'Test Chat' },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
       expect(result).toEqual({ status: 'Chat request sent to client' })
     })
@@ -154,7 +154,7 @@ describe('ai/tools/studio-tools', () => {
           chartConfig: { view: 'table' },
           isWriteQuery: false,
         },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       expect(executeSql).toHaveBeenCalledWith(
@@ -191,7 +191,7 @@ describe('ai/tools/studio-tools', () => {
           chartConfig: { view: 'table' },
           isWriteQuery: false,
         },
-        { toolCallId: 'test', messages: [] }
+        { toolCallId: 'test', messages: [], context: {} }
       )
 
       expect(executeSql).toHaveBeenCalledWith(
diff --git a/apps/studio/lib/external-identity-providers.test.ts b/apps/studio/lib/external-identity-providers.test.ts
index 13413758f4350..2b11db6101ae1 100644
--- a/apps/studio/lib/external-identity-providers.test.ts
+++ b/apps/studio/lib/external-identity-providers.test.ts
@@ -26,6 +26,15 @@ describe('external identity providers', () => {
     expect(getProviderDisplay('my_provider').displayName).toBe('my provider')
   })
 
+  test('derives a title-cased name for unregistered custom providers', () => {
+    expect(getProviderDisplay('custom:acme').displayName).toBe('Acme')
+    expect(getProviderDisplay('Custom:Acme').displayName).toBe('Acme')
+    expect(getProviderDisplay('custom:my_provider').displayName).toBe('My Provider')
+    expect(getProviderDisplay('custom:MY_PROVIDER').displayName).toBe('My Provider')
+    // registered custom providers keep their configured display name
+    expect(getProviderDisplay('custom:openai').displayName).toBe('ChatGPT')
+  })
+
   test('marks static provider icons as monochrome but not built-in or fallback icons', () => {
     expect(getProviderDisplay('github').hasMonochromeIcon).toBe(true)
     expect(getProviderDisplay('email').hasMonochromeIcon).toBeUndefined()
diff --git a/apps/studio/lib/external-identity-providers.ts b/apps/studio/lib/external-identity-providers.ts
index a8ab1dcb5ede6..436dddf13609e 100644
--- a/apps/studio/lib/external-identity-providers.ts
+++ b/apps/studio/lib/external-identity-providers.ts
@@ -69,6 +69,24 @@ export function normalizeIconPath(iconPath: string): string {
   return `${BASE_PATH}/${iconPath}`
 }
 
+const CUSTOM_PROVIDER_PREFIX = 'custom:'
+
+/**
+ * Derives a human-readable name from a `custom:*` provider id, e.g. `custom:acme` -> "Acme" and
+ * `custom:my_provider` -> "My Provider". Returns undefined for non-custom providers.
+ */
+function getCustomProviderName(provider: string): string | undefined {
+  if (!provider.toLowerCase().startsWith(CUSTOM_PROVIDER_PREFIX)) return undefined
+
+  return provider
+    .slice(CUSTOM_PROVIDER_PREFIX.length)
+    .replaceAll('_', ' ')
+    .split(' ')
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(' ')
+}
+
 export function getProviderDisplay(provider: string): IdentityProviderDisplay {
   const config = IDENTITY_PROVIDERS.find(
     ({ id, authProvider }) => provider === id || provider === authProvider
@@ -91,6 +109,17 @@ export function getProviderDisplay(provider: string): IdentityProviderDisplay {
     }
   }
 
+  // Unregistered `custom:*` providers (e.g. white-label deployments' own OAuth providers) fall
+  // back to a title-cased name derived from the id: `custom:acme` -> "Acme".
+  const customProviderName = getCustomProviderName(provider)
+  if (customProviderName) {
+    return {
+      id: provider,
+      displayName: customProviderName,
+      iconPath: `${BASE_PATH}/img/icons/saml-icon.svg`,
+    }
+  }
+
   return (
     BUILT_IN_IDENTITY_PROVIDERS[provider] ?? {
       id: provider,
diff --git a/apps/studio/package.json b/apps/studio/package.json
index f574d56d9ffcb..c420cf881fb3b 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -39,12 +39,12 @@
     "scorers:deploy": "IS_BRAINTRUST_PUSH=true braintrust push evals/scorer-online.ts"
   },
   "dependencies": {
-    "@ai-sdk/amazon-bedrock": "^4.0.81",
-    "@ai-sdk/mcp": "^1.0.25",
-    "@ai-sdk/openai": "^3.0.41",
-    "@ai-sdk/provider": "^3.0.8",
-    "@ai-sdk/provider-utils": "^4.0.19",
-    "@ai-sdk/react": "^3.0.118",
+    "@ai-sdk/amazon-bedrock": "5.0.55",
+    "@ai-sdk/mcp": "2.0.31",
+    "@ai-sdk/openai": "4.0.41",
+    "@ai-sdk/provider": "4.0.7",
+    "@ai-sdk/provider-utils": "5.0.26",
+    "@ai-sdk/react": "4.0.62",
     "@aws-sdk/credential-providers": "^3.1041.0",
     "@configcat/sdk": "^1.1.0",
     "@dagrejs/dagre": "^1.0.4",
@@ -92,7 +92,7 @@
     "@vercel/functions": "^2.1.0",
     "@xyflow/react": "^12.10.1",
     "@zip.js/zip.js": "^2.7.29",
-    "ai": "^6.0.174",
+    "ai": "7.0.59",
     "ai-commands": "workspace:*",
     "awesome-debounce-promise": "^2.1.0",
     "braintrust": "^3.9.0",
diff --git a/apps/studio/pages/api/ai/code/complete.ts b/apps/studio/pages/api/ai/code/complete.ts
index a4b9ff7f20c18..1565b7b53ece7 100644
--- a/apps/studio/pages/api/ai/code/complete.ts
+++ b/apps/studio/pages/api/ai/code/complete.ts
@@ -1,5 +1,5 @@
 import pgMeta, { getEntityDefinitionsSql } from '@supabase/pg-meta'
-import { generateText, ModelMessage, stepCountIs, tool } from 'ai'
+import { generateText, isStepCount, ModelMessage, tool } from 'ai'
 import { IS_PLATFORM } from 'common'
 import { source } from 'common-tags'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -288,11 +288,6 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
     // Note: these must be of type `CoreMessage` to prevent AI SDK from stripping `providerOptions`
     // https://github.com/vercel/ai/blob/81ef2511311e8af34d75e37fc8204a82e775e8c3/packages/ai/core/prompt/standardize-prompt.ts#L83-L88
     const coreMessages: ModelMessage[] = [
-      {
-        role: 'system',
-        content: system,
-        ...(systemProviderOptions && { providerOptions: systemProviderOptions }),
-      },
       {
         role: 'user',
         content: userMessage,
@@ -301,7 +296,12 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 
     const { text } = await generateText({
       ...modelParams,
-      stopWhen: stepCountIs(5),
+      instructions: {
+        role: 'system',
+        content: system,
+        ...(systemProviderOptions && { providerOptions: systemProviderOptions }),
+      },
+      stopWhen: isStepCount(5),
       messages: coreMessages,
       tools:
         includeSchema && !schemaListResult.error
diff --git a/apps/studio/pages/api/ai/onboarding/design.ts b/apps/studio/pages/api/ai/onboarding/design.ts
index b2714c20e27fb..0438a47d51345 100644
--- a/apps/studio/pages/api/ai/onboarding/design.ts
+++ b/apps/studio/pages/api/ai/onboarding/design.ts
@@ -1,4 +1,4 @@
-import { streamText, tool } from 'ai'
+import { pipeUIMessageStreamToResponse, streamText, tool, toUIMessageStream } from 'ai'
 import { source } from 'common-tags'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { z } from 'zod'
@@ -78,7 +78,7 @@ async function handlePost(req: NextApiRequest, res: NextApiResponse) {
 
   const result = streamText({
     ...modelParams,
-    system: source`
+    instructions: source`
       You are a Supabase expert who helps people set up their Supabase project. You specializes in database schema design. You are to help the user design a database schema for their application but also suggest Supabase services they should use. 
       
       When designing database schemas, follow these rules:
@@ -103,5 +103,10 @@ async function handlePost(req: NextApiRequest, res: NextApiResponse) {
     tools: getTools(),
   })
 
-  result.pipeUIMessageStreamToResponse(res, { headers: { 'Content-Encoding': 'none' } })
+  const stream = toUIMessageStream({ stream: result.stream })
+  pipeUIMessageStreamToResponse({
+    response: res,
+    stream,
+    headers: { 'Content-Encoding': 'none' },
+  })
 }
diff --git a/apps/studio/pages/api/ai/sql/generate-v4.ts b/apps/studio/pages/api/ai/sql/generate-v4.ts
index b4a3a9dc5c23c..d8900ab88db77 100644
--- a/apps/studio/pages/api/ai/sql/generate-v4.ts
+++ b/apps/studio/pages/api/ai/sql/generate-v4.ts
@@ -1,6 +1,6 @@
 import pgMeta from '@supabase/pg-meta'
 import type { JwtPayload } from '@supabase/supabase-js'
-import { safeValidateUIMessages } from 'ai'
+import { pipeUIMessageStreamToResponse, safeValidateUIMessages, toUIMessageStream } from 'ai'
 import { IS_PLATFORM } from 'common'
 import type { NextApiRequest, NextApiResponse } from 'next'
 import z from 'zod'
@@ -244,9 +244,9 @@ async function handlePost(req: NextApiRequest, res: NextApiResponse, claims?: Jw
       },
     })
 
-    result.pipeUIMessageStreamToResponse(res, {
+    const stream = toUIMessageStream({
+      stream: result.stream,
       sendReasoning: true,
-      headers: { 'Content-Encoding': 'none' },
       onError: (error) => {
         console.error('Assistant stream error:', error)
 
@@ -265,6 +265,12 @@ async function handlePost(req: NextApiRequest, res: NextApiResponse, claims?: Jw
         return JSON.stringify(error)
       },
     })
+
+    pipeUIMessageStreamToResponse({
+      response: res,
+      stream,
+      headers: { 'Content-Encoding': 'none' },
+    })
   } catch (error) {
     console.error('Error in handlePost:', error)
     if (error instanceof Error) {
diff --git a/apps/studio/pages/api/ai/sql/policy.ts b/apps/studio/pages/api/ai/sql/policy.ts
index 998a0a2b7a4ff..6edc896bd37ae 100644
--- a/apps/studio/pages/api/ai/sql/policy.ts
+++ b/apps/studio/pages/api/ai/sql/policy.ts
@@ -1,5 +1,5 @@
 import type { JwtPayload } from '@supabase/supabase-js'
-import { generateText, Output, stepCountIs } from 'ai'
+import { generateText, isStepCount, Output } from 'ai'
 import { IS_PLATFORM } from 'common'
 import { source } from 'common-tags'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -122,9 +122,9 @@ export async function handlePost(req: NextApiRequest, res: NextApiResponse, clai
         signal: toolsAbortController.signal,
       })
 
-      const { experimental_output } = await generateText({
+      const { output } = await generateText({
         ...modelParams,
-        stopWhen: stepCountIs(5),
+        stopWhen: isStepCount(5),
         prompt: source`
           You are a Postgres RLS (Row Level Security) expert.
           Determine the most appropriate policies for the "${schema}"."${tableName}" table within a Supabase project.
@@ -146,7 +146,7 @@ export async function handlePost(req: NextApiRequest, res: NextApiResponse, clai
           - Prefer PERMISSIVE policies unless a RESTRICTIVE policy is explicitly required
         `,
         tools,
-        experimental_output: Output.object({
+        output: Output.object({
           schema: z.object({
             policies: z.array(policySchema),
           }),
@@ -154,7 +154,7 @@ export async function handlePost(req: NextApiRequest, res: NextApiResponse, clai
       })
 
       // Add table and schema to each policy from the request
-      const policies = (experimental_output?.policies ?? []).map((policy) => ({
+      const policies = (output?.policies ?? []).map((policy) => ({
         ...policy,
         table: tableName,
         schema,
diff --git a/apps/studio/pages/project/[ref]/explorer/chat/[id].tsx b/apps/studio/pages/project/[ref]/explorer/chat/[id].tsx
index 4bb149dac09b2..fc3ed737ed91d 100644
--- a/apps/studio/pages/project/[ref]/explorer/chat/[id].tsx
+++ b/apps/studio/pages/project/[ref]/explorer/chat/[id].tsx
@@ -1,9 +1,9 @@
-import { ChatEditor } from '@/components/interfaces/Explorer/ChatEditor'
+import { ExplorerChatTab } from '@/components/interfaces/Explorer/ExplorerChatTab'
 import { DefaultLayout } from '@/components/layouts/DefaultLayout'
 import { ExplorerLayout } from '@/components/layouts/ExplorerLayout/ExplorerLayout'
 import type { NextPageWithLayout } from '@/types'
 
-const ChatPage: NextPageWithLayout = () => <ChatEditor />
+const ChatPage: NextPageWithLayout = () => <ExplorerChatTab />
 
 ChatPage.getLayout = (page) => (
   <DefaultLayout>
diff --git a/apps/studio/pages/project/[ref]/explorer/index.tsx b/apps/studio/pages/project/[ref]/explorer/index.tsx
index 48a1e2bf30a97..e647328e8bd16 100644
--- a/apps/studio/pages/project/[ref]/explorer/index.tsx
+++ b/apps/studio/pages/project/[ref]/explorer/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useEffectEvent } from 'react'
 
-import { ExplorerHome } from '@/components/interfaces/Explorer/ExplorerHome'
+import { ExplorerHomeTab } from '@/components/interfaces/Explorer/ExplorerHomeTab'
 import { DefaultLayout } from '@/components/layouts/DefaultLayout'
 import { ExplorerLayout } from '@/components/layouts/ExplorerLayout/ExplorerLayout'
 import { EXPLORER_HOME_TAB, useTabsStateSnapshot } from '@/state/tabs'
@@ -15,7 +15,7 @@ const ProjectExplorerPage: NextPageWithLayout = () => {
 
   useEffect(() => activateHomeTab(), [])
 
-  return <ExplorerHome />
+  return <ExplorerHomeTab />
 }
 
 ProjectExplorerPage.getLayout = (page) => (
diff --git a/apps/studio/pages/project/[ref]/explorer/notebook/[id].tsx b/apps/studio/pages/project/[ref]/explorer/notebook/[id].tsx
index 3178327f0124a..e98dfde91b8fc 100644
--- a/apps/studio/pages/project/[ref]/explorer/notebook/[id].tsx
+++ b/apps/studio/pages/project/[ref]/explorer/notebook/[id].tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import { useEffect, useEffectEvent } from 'react'
 
-import { NotebookEditor } from '@/components/interfaces/Explorer/NotebookEditor'
+import { ExplorerNotebookTab } from '@/components/interfaces/Explorer/ExplorerNotebookTab'
 import { DefaultLayout } from '@/components/layouts/DefaultLayout'
 import { ExplorerLayout } from '@/components/layouts/ExplorerLayout/ExplorerLayout'
 import { useCurrentNotebook } from '@/state/notebooks/notebooks-state'
@@ -28,7 +28,7 @@ const NotebookPage: NextPageWithLayout = () => {
 
   useEffect(() => registerTab(), [id])
 
-  return <NotebookEditor />
+  return <ExplorerNotebookTab />
 }
 
 NotebookPage.getLayout = (page) => (
diff --git a/apps/studio/pages/project/[ref]/explorer/query/[id].tsx b/apps/studio/pages/project/[ref]/explorer/query/[id].tsx
index 5d3aeac84109c..8e7ab7df1a85f 100644
--- a/apps/studio/pages/project/[ref]/explorer/query/[id].tsx
+++ b/apps/studio/pages/project/[ref]/explorer/query/[id].tsx
@@ -1,10 +1,10 @@
-import { QueryTab } from '@/components/interfaces/Explorer/QueryTab'
+import { ExplorerQueryTab } from '@/components/interfaces/Explorer/ExplorerQueryTab'
 import { DefaultLayout } from '@/components/layouts/DefaultLayout'
 import { ExplorerLayout } from '@/components/layouts/ExplorerLayout/ExplorerLayout'
 import type { NextPageWithLayout } from '@/types'
 
 const QueryPage: NextPageWithLayout = () => {
-  return <QueryTab />
+  return <ExplorerQueryTab />
 }
 
 QueryPage.getLayout = (page) => (
diff --git a/apps/studio/routes/project/$ref/explorer/chat/$id.tsx b/apps/studio/routes/project/$ref/explorer/chat/$id.tsx
index 5ebd59a8e4285..6656f3b64f4d0 100644
--- a/apps/studio/routes/project/$ref/explorer/chat/$id.tsx
+++ b/apps/studio/routes/project/$ref/explorer/chat/$id.tsx
@@ -1,11 +1,11 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-import { ChatEditor } from '@/components/interfaces/Explorer/ChatEditor'
+import ChatPage from '@/pages/project/[ref]/explorer/chat/[id]'
 
 export const Route = createFileRoute('/project/$ref/explorer/chat/$id')({
   component: ProjectExplorerChatRoute,
 })
 
 function ProjectExplorerChatRoute() {
-  return <ChatEditor />
+  return <ChatPage dehydratedState={undefined} />
 }
diff --git a/apps/studio/state/ai-assistant-state.tsx b/apps/studio/state/ai-assistant-state.tsx
index 85eff5ae1a900..8d0ee276b2f86 100644
--- a/apps/studio/state/ai-assistant-state.tsx
+++ b/apps/studio/state/ai-assistant-state.tsx
@@ -681,7 +681,7 @@ export const createAiAssistantState = (): AiAssistantState => {
 export type AiAssistantState = AiAssistantData & {
   resetAiAssistantPanel: () => void
   activeChat: ChatSession | undefined
-  chatInstances: Record<string, Chat<MessageType>>
+  chatInstances: Record<string, ReturnType<typeof ref<Chat<MessageType>>>>
   pendingSpanIds: Record<string, string>
   messageSpanIds: Record<string, string>
   isInitialized: boolean
diff --git a/apps/www/_blog/2026-08-18-connect-client-traces-to-your-logs.mdx b/apps/www/_blog/2026-08-18-connect-client-traces-to-your-logs.mdx
new file mode 100644
index 0000000000000..ea22c09fae340
--- /dev/null
+++ b/apps/www/_blog/2026-08-18-connect-client-traces-to-your-logs.mdx
@@ -0,0 +1,93 @@
+---
+title: 'Connect client traces to your logs'
+description: 'supabase-js now propagates W3C Trace Context to Supabase, so a client trace and the matching Supabase log share one trace_id.'
+author: katerina_skroumpelou, steven_eubank
+date: '2026-08-18'
+categories:
+  - product
+tags:
+  - logs
+  - observability
+imgSocial: 'connect-client-traces-to-your-logs/og.png'
+imgThumb: 'connect-client-traces-to-your-logs/thumb.png'
+toc_depth: 2
+---
+
+`supabase-js` now propagates W3C Trace Context to Supabase. Turn it on and the `trace_id` from your client flows through Supabase's API Gateway and Edge Function logs, so you can follow one request from the browser into your backend logs.
+
+Say a frontend trace shows a slow request leaving the browser, and a Supabase log shows the matching request on the server. Up to now nothing connected the two: the SDK made the call, Supabase logged it, and the two records lived in separate systems with no shared identifier. Debugging across that boundary meant lining up timestamps by hand.
+
+Now, when `tracePropagation` is enabled, the SDK attaches three standard headers to requests aimed at Supabase domains:
+
+- `traceparent`
+- `tracestate`
+- `baggage`
+
+Supabase reads the incoming trace context and stamps the same `trace_id` onto the logs it generates. Any W3C-compliant tracer (OpenTelemetry, Sentry, Datadog, Honeycomb, Grafana) picks the trace back up on the server side.
+
+## How to set it up
+
+This walkthrough covers supabase-js. Trace propagation is also available in Swift, Flutter, and Python; see the [docs](https://supabase.com/docs/guides/monitoring-and-debugging/client-side-tracing) for per-language setup and the current list.
+
+The SDK doesn't configure OpenTelemetry for you. You bring your own tracer, then tell the client to propagate.
+
+First, set up OpenTelemetry as you normally would: install an SDK (`@opentelemetry/sdk-trace-node` for Node, `@opentelemetry/sdk-trace-web` for the browser), add an exporter, and register a `TracerProvider` globally. The tracing runtime needs `@opentelemetry/api` resolvable in your app, install it directly if your package manager doesn't pull it in alongside the SDK.
+
+Then load the tracing runtime once at your application entry point, and enable propagation on the client:
+
+```typescript
+import '@supabase/supabase-js/tracing'
+import { createClient } from '@supabase/supabase-js'
+
+const supabase = createClient(SUPABASE_URL, SUPABASE_KEY, {
+  tracePropagation: true,
+})
+```
+
+The main bundle ships no OpenTelemetry code, that first import is what wires it up.
+
+Wrap your Supabase calls in an active span so there's a trace to propagate:
+
+```typescript
+await tracer.startActiveSpan('load-dashboard', async (span) => {
+  const { data } = await supabase.from('profiles').select('*')
+  span.end()
+})
+```
+
+If your sampler drops most traces and you still want Supabase requests carried through, override the sampling decision:
+
+```typescript
+import '@supabase/supabase-js/tracing'
+
+const supabase = createClient(SUPABASE_URL, SUPABASE_KEY, {
+  tracePropagation: { enabled: true, respectSamplingDecision: false },
+})
+```
+
+## Get more value from your Log Drains
+
+Log Drains forward your Supabase logs to an external backend. With trace propagation on, every drained log carries the same `trace_id` as your client and server traces, so you can join them in the tracing UI you already run.
+
+When you do so, the browser span in Sentry and the matching API Gateway log forwarded to Datadog line up under one `trace_id`. For self-hosted setups running an OpenTelemetry collector, it's the same join on infrastructure you control.
+
+## Nothing to pay for if you don't use it
+
+The OpenTelemetry integration lives behind its own entry point, so the main `supabase-js` bundle contains zero OpenTelemetry code. Nothing is added to your bundle, and nothing to resolve at build time, unless you opt in. That keeps React Native/Hermes, Metro, and edge bundlers unaffected, and it means that when you do opt in, your bundler can actually see the dependency and include it.
+
+## Current limitations
+
+- **No CDN/UMD support.** The tracing runtime can't be loaded from a script tag, so trace propagation isn't available in the CDN build.
+- **Available in supabase-js, Swift, Flutter, and Python.**
+- **Supabase domains only.** Headers are attached to your project host, `*.supabase.co`, `*.supabase.in`, and local dev hosts (`localhost`, `127.0.0.1`, `[::1]`), never to third-party hosts, even through a custom `fetch`.
+- **API Gateway and Edge Function logs.** Those are the log sources that pick up the `trace_id` today.
+- **Needs a real span.** With no active span at request time, or no registered `TracerProvider` (the API defaults to a noop provider), there is nothing to propagate and the SDK no-ops silently.
+- **Sampling is respected by default.** Unsampled traces send no headers unless you set `respectSamplingDecision: false`.
+
+## Getting started
+
+Trace propagation is available now in `supabase-js`. Add `import '@supabase/supabase-js/tracing'` at your entry point, turn on `tracePropagation`, point your existing tracer at it, and your client traces will line up with your Supabase logs.
+
+Already using `tracePropagation` from an earlier release? Upgrade to `supabase-js` 2.112.0 or later and add the `import '@supabase/supabase-js/tracing'` line. Versions 2.106.0 through 2.111.x silently sent no trace headers in bundled apps, so the upgrade is what actually fixes propagation, not just the import.
+
+Full setup, including the sampling options, is in the [client-side tracing guide](https://supabase.com/docs/guides/monitoring-and-debugging/client-side-tracing).
diff --git a/apps/www/data/features.tsx b/apps/www/data/features.tsx
index 328b9db7630f3..ccae3fa2bb44b 100644
--- a/apps/www/data/features.tsx
+++ b/apps/www/data/features.tsx
@@ -2343,6 +2343,8 @@ The Logs & Analytics feature in Supabase provides users with comprehensive loggi
 
 OpenTelemetry integration allows you to export logs, metrics, and traces to any OTel-compatible tool—Datadog, Honeycomb, Grafana, or your preferred monitoring platform. The Metrics API exposes ~200 Prometheus-compatible Postgres metrics, including CPU, IO, WAL, connections, and query statistics.
 
+Trace propagation also works inbound. supabase-js, Swift, Flutter, and Python can propagate W3C Trace Context to Supabase, so a client-side trace and the corresponding Supabase logs share the same trace_id. It is opt-in and works with any W3C-compliant tracer, including OTLP, Sentry, Datadog, Honeycomb, and Grafana. See the [client-side tracing guide](https://supabase.com/docs/guides/monitoring-and-debugging/client-side-tracing) for the latest on supported SDKs and target platforms.
+
 ## Key benefits
 1. Real-Time Monitoring: Access live data on application performance and user interactions to make informed decisions.
 2. Comprehensive Log Management: Ingest and store logs from multiple sources, allowing for centralized management of application events.
@@ -2351,6 +2353,7 @@ OpenTelemetry integration allows you to export logs, metrics, and traces to any
 5. Scalability: Handle large volumes of log data with a robust infrastructure designed for high availability and performance.
 6. OpenTelemetry Support: Export telemetry data to vendor-agnostic monitoring platforms for unified observability.
 7. Metrics API: Stream Postgres performance metrics for CPU, IO, WAL, connections, and query statistics.
+8. Client-Side Trace Propagation: correlate a trace from your client app — web, mobile, or server-side — with the matching API Gateway and Edge Function log under one shared 'trace_id'.
 
 This feature is particularly valuable for teams looking to enhance their application's reliability and performance by gaining deeper insights into usage patterns and potential issues.
 `,
@@ -2671,7 +2674,7 @@ $60 per drain per project, plus $0.20 per million events and $0.09 per GB egress
     icon: Activity,
     products: [ADDITIONAL_PRODUCTS.STUDIO],
     heroImage: 'https://www.youtube-nocookie.com/embed/A4GFmvgxS-E',
-    docsUrl: 'https://supabase.com/docs/guides/telemetry/log-drains',
+    docsUrl: 'https://supabase.com/docs/guides/monitoring-and-debugging/log-drains',
     slug: 'log-drains',
     status: {
       stage: PRODUCT_STAGES.GA,
diff --git a/apps/www/public/images/blog/connect-client-traces-to-your-logs/og.png b/apps/www/public/images/blog/connect-client-traces-to-your-logs/og.png
new file mode 100644
index 0000000000000..aa4f84f09d097
Binary files /dev/null and b/apps/www/public/images/blog/connect-client-traces-to-your-logs/og.png differ
diff --git a/apps/www/public/images/blog/connect-client-traces-to-your-logs/thumb.png b/apps/www/public/images/blog/connect-client-traces-to-your-logs/thumb.png
new file mode 100644
index 0000000000000..b9423c03d3649
Binary files /dev/null and b/apps/www/public/images/blog/connect-client-traces-to-your-logs/thumb.png differ
diff --git a/packages/config/css/theme.css b/packages/config/css/theme.css
index 71b0255cd58c0..e83273b4b1b04 100644
--- a/packages/config/css/theme.css
+++ b/packages/config/css/theme.css
@@ -23,6 +23,10 @@
   --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
+  --color-field: var(--field);
+  --color-control-raised: var(--control-raised);
+  /* --control aliases --control-raised. Do not add --color-control — it would
+     collide with border-control and the legacy bg-control (accent) utility. */
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
   --color-destructive: var(--destructive);
@@ -300,6 +304,8 @@
   --background-color-alternative: var(--background-alternative-default);
   --background-color-selection: var(--background-selection);
   --background-color-control: var(--background-control);
+  --background-color-field: var(--field);
+  --background-color-control-raised: var(--control-raised);
   --background-color-surface-75: var(--background-surface-75);
   --background-color-surface-100: var(--background-surface-100);
   --background-color-surface-200: var(--background-surface-200);
@@ -322,6 +328,7 @@
   --color-border-control: var(--border-control);
   --color-border-strong: var(--border-strong);
   --color-border-stronger: var(--border-stronger);
+  --color-border-control-hover: var(--border-control-hover);
   --color-border-destructive: var(--border-destructive);
   --color-border-warning: var(--border-warning);
   --color-border-info: var(--border-info);
@@ -336,6 +343,7 @@
   --border-color-control: var(--border-control);
   --border-color-strong: var(--border-strong);
   --border-color-stronger: var(--border-stronger);
+  --border-color-control-hover: var(--border-control-hover);
   --border-color-secondary: var(--border-secondary);
   --border-color-alternative: var(--border-alternative);
   --border-color-button: var(--border-button-default);
diff --git a/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx b/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx
index 1ae1a6a4e8c8d..0b2848a48aab6 100644
--- a/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx
+++ b/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx
@@ -16,6 +16,7 @@ import ini from 'react-syntax-highlighter/dist/cjs/languages/hljs/ini'
 import js from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript'
 import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json'
 import kotlin from 'react-syntax-highlighter/dist/cjs/languages/hljs/kotlin'
+import markdown from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown'
 import pgsql from 'react-syntax-highlighter/dist/cjs/languages/hljs/pgsql'
 import php from 'react-syntax-highlighter/dist/cjs/languages/hljs/php'
 import {
@@ -52,6 +53,7 @@ const codeBlockLangs = [
   'yaml',
   'toml',
   'html',
+  'markdown',
 ] as const
 
 export type CodeBlockLang = (typeof codeBlockLangs)[number]
@@ -175,6 +177,7 @@ export const CodeBlock = ({
   SyntaxHighlighter.registerLanguage('html', xml)
   SyntaxHighlighter.registerLanguage('toml', ini)
   SyntaxHighlighter.registerLanguage('yaml', yaml)
+  SyntaxHighlighter.registerLanguage('markdown', markdown)
 
   const large = false
   // don't show line numbers if bash == lang
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
index 4ab24a248621d..f71cd830cc0be 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
@@ -188,9 +188,9 @@ function CommandMenuTriggerInput({
           'grow md:min-w-44 xl:min-w-56 h-[30px] rounded-md',
           'pl-1.5 md:pl-2 pr-1',
           'flex items-center justify-between',
-          // Match Button default (Connect): opaque popover hover fill, stronger border.
+          // Match Button default (Connect): opaque popover hover fill, shared control-hover border.
           'bg-transparent text-foreground-lighter border border-strong',
-          'hover:bg-popover hover:border-stronger',
+          'hover:bg-popover hover:border-control-hover',
           'focus-ring',
           'transition-colors',
           className
diff --git a/packages/ui-patterns/src/FilterBar/FilterCondition.tsx b/packages/ui-patterns/src/FilterBar/FilterCondition.tsx
index c86f062197066..928bf4be72541 100644
--- a/packages/ui-patterns/src/FilterBar/FilterCondition.tsx
+++ b/packages/ui-patterns/src/FilterBar/FilterCondition.tsx
@@ -274,7 +274,7 @@ export function FilterCondition({
                 onChange={(e) => setPropertySearchText(e.target.value)}
                 onBlur={handlePropertyBlur}
                 onKeyDown={handlePropertyKeyDown}
-                className="h-full border-none bg-transparent py-0 pl-2 pr-1 text-xs focus:outline-hidden focus:ring-0 focus:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 text-foreground-light w-full absolute left-0 top-0"
+                className="h-full border-none bg-transparent py-0 pl-2 pr-1 text-xs hover:border-transparent focus:border-transparent focus-visible:border-transparent focus:outline-hidden focus:ring-0 focus:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 text-foreground-light w-full absolute left-0 top-0"
                 placeholder={property.label}
                 autoFocus
                 aria-label={`Change property from ${property.label}`}
@@ -332,7 +332,7 @@ export function FilterCondition({
               }}
               onBlur={handleOperatorBlur}
               onKeyDown={handleOperatorKeyDown}
-              className="h-full border-none bg-transparent py-0 px-1 text-center text-xs md:text-xs focus:outline-hidden focus:ring-0 focus:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 text-foreground w-full absolute left-0 top-0"
+              className="h-full border-none bg-transparent py-0 px-1 text-center text-xs md:text-xs hover:border-transparent focus:border-transparent focus-visible:border-transparent focus:outline-hidden focus:ring-0 focus:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 text-foreground w-full absolute left-0 top-0"
               aria-label={`Operator for ${property.label}`}
               data-testid={`filter-operator-${property.name}`}
               tabIndex={-1}
@@ -379,7 +379,7 @@ export function FilterCondition({
               onFocus={() => handleInputFocus(path)}
               onBlur={handleValueBlur}
               onKeyDown={handleValueKeyDown}
-              className="h-full border-none bg-transparent py-0 px-1 text-xs md:text-xs focus:outline-hidden focus:ring-0 focus:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 w-full absolute left-0 top-0"
+              className="h-full border-none bg-transparent py-0 px-1 text-xs md:text-xs hover:border-transparent focus:border-transparent focus-visible:border-transparent focus:outline-hidden focus:ring-0 focus:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 w-full absolute left-0 top-0"
               aria-label={`Value for ${property.label}`}
               data-testid={`filter-value-${property.name}`}
               tabIndex={-1}
diff --git a/packages/ui-patterns/src/FilterBar/FilterGroup.tsx b/packages/ui-patterns/src/FilterBar/FilterGroup.tsx
index 34d0a143c4dda..6f9dae85de54c 100644
--- a/packages/ui-patterns/src/FilterBar/FilterGroup.tsx
+++ b/packages/ui-patterns/src/FilterBar/FilterGroup.tsx
@@ -206,7 +206,7 @@ export function FilterGroup({ group, path }: FilterGroupProps) {
                 onFocus={() => handleGroupFreeformFocus(path)}
                 onBlur={handleFreeformBlur}
                 onKeyDown={handleFreeformKeyDown}
-                className="border-none bg-transparent text-xs focus:outline-hidden focus:ring-0 focus:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 w-full flex-1 h-auto min-w-0 px-2 py-1"
+                className="border-none bg-transparent text-xs hover:border-transparent focus:border-transparent focus-visible:border-transparent focus:outline-hidden focus:ring-0 focus:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 w-full flex-1 h-auto min-w-0 px-2 py-1"
                 placeholder={
                   group.conditions.length === 0 ? emptyPlaceholder : 'Add more filters...'
                 }
@@ -226,7 +226,7 @@ export function FilterGroup({ group, path }: FilterGroupProps) {
                   onFocus={() => handleGroupFreeformFocus(path)}
                   onBlur={handleFreeformBlur}
                   onKeyDown={handleFreeformKeyDown}
-                  className="h-full border-none bg-transparent py-0 text-xs md:text-xs focus:outline-hidden focus:ring-0 focus:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 w-full absolute left-0 top-0 px-2"
+                  className="h-full border-none bg-transparent py-0 text-xs md:text-xs hover:border-transparent focus:border-transparent focus-visible:border-transparent focus:outline-hidden focus:ring-0 focus:shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 w-full absolute left-0 top-0 px-2"
                   placeholder="+ Add filter"
                   autoComplete="off"
                   data-1p-ignore
diff --git a/packages/ui-patterns/src/multi-select/multi-select.tsx b/packages/ui-patterns/src/multi-select/multi-select.tsx
index 2f769935942cd..5b24bdf5531eb 100644
--- a/packages/ui-patterns/src/multi-select/multi-select.tsx
+++ b/packages/ui-patterns/src/multi-select/multi-select.tsx
@@ -258,7 +258,7 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
       }
     }, [values, badgeLimit])
 
-    const badgeClasses = 'rounded-sm shrink-0 px-1.5'
+    const badgeClasses = 'rounded-sm shrink-0 px-1.5 bg-surface-75 dark:bg-white/5'
 
     const handleTriggerClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(
       (event) => {
@@ -294,12 +294,14 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
           role="combobox"
           className={cn(
             'flex w-full min-w-[200px] min-h-[34px] items-center justify-between rounded-md border',
-            'border-strong bg-background dark:bg-card px-3 py-1.5 text-sm',
+            'border-strong px-3 py-1.5 text-sm',
+            // Empty: raised plate. Filled: sunk well for chips.
+            values.length > 0 ? 'bg-field' : 'bg-control-raised',
             'placeholder:text-muted-foreground',
             'ring-border-control focus-ring',
             'disabled:cursor-not-allowed disabled:opacity-50',
-            'hover:border-stronger hover:bg-popover transition-colors duration-200',
-            open && 'bg-popover border-stronger',
+            'hover:border-control-hover transition-colors duration-200',
+            open && 'border-control-hover',
             className
           )}
           {...props}
@@ -381,7 +383,7 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
 MultiSelectorTrigger.displayName = 'MultiSelectorTrigger'
 MultiSelector.Trigger = MultiSelectorTrigger
 
-const MultiSelectorInputVariants = cva('bg-control border', {
+const MultiSelectorInputVariants = cva('', {
   variants: {
     size: {
       ...SIZE_VARIANTS,
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 1e971f755dbfa..02a7da1ac4a80 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -24,9 +24,12 @@ import { clipboard, cn, mergeDeep } from 'ui' // clsx + tailwind-merge
 ## Styling conventions
 
 - Tailwind only — no inline styles or CSS modules.
-- Use shadcn semantic pairs (`bg-card text-card-foreground`, `bg-muted text-muted-foreground`,
-  `bg-tertiary text-tertiary-foreground`) rather than hardcoded colors. Legacy utilities such as
+- Prefer shadcn semantic pairs (`bg-card text-card-foreground`, `bg-muted text-muted-foreground`,
+  `bg-tertiary text-tertiary-foreground`) over hardcoded colors. Legacy utilities such as
   `text-foreground-light` and `border-default` are compatibility aliases only.
+- Control surface roles (`bg-field`, `bg-control-raised`, `border-control-hover`; CSS
+  `--control` aliases raised) live in [`build/css/source/semantic.css`](./build/css/source/semantic.css).
+  Prefer those over inventing fills. Legacy `bg-control` is still the accent wash alias.
 - Themes set the core `--hue` (or the split `--surface-hue` / `--primary-hue`), `--chroma`,
   `--surface`, `--foreground-lightness`, and `--contrast` inputs, plus their
   `--muted-foreground-level` and `--tertiary-foreground-level` hierarchy.
diff --git a/packages/ui/build/css/source/semantic.css b/packages/ui/build/css/source/semantic.css
index 68e4e1c263eb4..4e9f65d9f0974 100644
--- a/packages/ui/build/css/source/semantic.css
+++ b/packages/ui/build/css/source/semantic.css
@@ -194,6 +194,32 @@
   --accent: oklch(from var(--foreground) l c h / var(--accent-alpha));
   --accent-foreground: var(--foreground);
 
+  /*
+   * Control surface roles (design sync: sunk fields + raised choosers):
+   *   --field          sunk text entry (Input, Textarea, filled MultiSelect)
+   *   --control-raised raised chooser plate (Select, empty MultiSelect)
+   *   --control        alias of --control-raised
+   *
+   * Alpha overlays relative to the local plate (page, sheet, card) — not solids
+   * from --background. Page-relative solids sit between canvas (e0) and Sheet
+   * (popover e2) and vanish on light near the white ceiling.
+   *
+   * Field soft always-sink via black. --field-alpha is a theme input (stronger in
+   * dark.css) because the same absolute opacity is obvious on light plates and
+   * near-invisible on dark ones. Default is softer than the old foreground/[.026]
+   * wash. Raised is a soft white lift so selects read button-like without stark
+   * wells. Borders carry most hover chrome (--border-control-hover). Light raises
+   * still have little headroom on sheets; sheets matching app background would
+   * widen that later.
+   *
+   * Default Button stays opaque card/popover for occluding chrome (DEPR-636).
+   * Floating clusters can wrap in a solid Popover as a follow-up.
+   */
+  --field-alpha: 0.015;
+  --field: oklch(0 0 0 / var(--field-alpha));
+  --control-raised: oklch(1 0 0 / calc(var(--muted-alpha) * 0.65));
+  --control: var(--control-raised);
+
   --warning: oklch(var(--warning-lightness) var(--expressive-chroma) var(--warning-hue));
   --destructive: oklch(
     var(--destructive-lightness) var(--expressive-chroma) var(--destructive-hue)
@@ -229,5 +255,13 @@
   --input: oklch(
     from var(--foreground) l calc(c * 0.5) h / calc(3% + 38% * var(--contrast-border))
   );
+  /*
+   * Shared interactive border for control chrome (inputs, selects, default /
+   * dashed Button, radio cards). Pairs with rest --border-control / --border-strong.
+   * Stronger than --border-stronger; softer than a full muted-foreground stroke.
+   */
+  --border-control-hover: oklch(
+    from var(--foreground) l calc(c * 0.5) h / calc(12% + 58% * var(--contrast-border))
+  );
   --ring: oklch(from var(--primary) l c h / 55%);
 }
diff --git a/packages/ui/build/css/themes/dark.css b/packages/ui/build/css/themes/dark.css
index daf570a706ab1..d8dd2bd5ee0a6 100644
--- a/packages/ui/build/css/themes/dark.css
+++ b/packages/ui/build/css/themes/dark.css
@@ -9,6 +9,8 @@
   --foreground-lightness: 0.95;
   --muted-foreground-level: 0.8;
   --tertiary-foreground-level: 0.65;
+  /* Light default --field-alpha (0.015) disappears on dark plates; dig harder. */
+  --field-alpha: 0.12;
 
   --code-block-5: 13.8deg 89.7% 69.6%;
   --code-block-4: 276.1deg 67.7% 74.5%;
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 7b0e556bfce7b..ff326fb121d56 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -38,9 +38,9 @@ const buttonVariants = cva(
         default: `
           text-foreground
           bg-background dark:bg-card hover:bg-popover
-          border-strong hover:border-stronger
+          border-strong hover:border-control-hover
           data-[state=open]:bg-popover
-          data-[state=open]:border-button-hover
+          data-[state=open]:border-control-hover
           `,
         secondary: `
           bg-foreground
@@ -58,9 +58,9 @@ const buttonVariants = cva(
           text-foreground
           border
           border-dashed
-          border-strong hover:border-stronger
+          border-strong hover:border-control-hover
           bg-transparent
-          data-[state=open]:border-stronger
+          data-[state=open]:border-control-hover
         `,
         link: `
           text-brand-600
diff --git a/packages/ui/src/components/radio-group-card.tsx b/packages/ui/src/components/radio-group-card.tsx
index 2bf4330a34573..610605935993f 100644
--- a/packages/ui/src/components/radio-group-card.tsx
+++ b/packages/ui/src/components/radio-group-card.tsx
@@ -36,11 +36,12 @@ const RadioGroupCardItem = React.forwardRef<
         'border',
         'p-2',
         // 'hover:bg-selection',
-        'hover:border-foreground-muted',
-        'hover:z-1 focus-visible:z-1',
+        'hover:border-control-hover',
+        'hover:z-1 focus-visible:z-1 focus-visible:border-control-hover',
         'outline-hidden',
         'transition-colors',
         'group',
+        'data-[state=checked]:border-control-hover',
         props.className
       )}
     >
@@ -50,9 +51,9 @@ const RadioGroupCardItem = React.forwardRef<
           <div
             className="
                 aspect-square h-4 w-4
-                rounded-full border group-data-[state=checked]:border-foreground-muted
-                group-focus:border-foreground-muted
-                group-hover:border-foreground-muted
+                rounded-full border group-data-[state=checked]:border-control-hover
+                group-focus:border-control-hover
+                group-hover:border-control-hover
                 ring-offset-background
                 group-focus:outline-hidden
                 group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background
diff --git a/packages/ui/src/components/radio-group-stacked.tsx b/packages/ui/src/components/radio-group-stacked.tsx
index db83730ef95a1..c3b4dddf9b1f3 100644
--- a/packages/ui/src/components/radio-group-stacked.tsx
+++ b/packages/ui/src/components/radio-group-stacked.tsx
@@ -46,14 +46,13 @@ const RadioGroupStackedItem = React.forwardRef<
         // Disabled state
         'disabled:opacity-50 disabled:cursor-not-allowed',
         // Enabled/hover states
-        'enabled:cursor-pointer enabled:hover:bg-surface-300 enabled:hover:border-foreground-muted',
+        'enabled:cursor-pointer enabled:hover:bg-surface-300 enabled:hover:border-control-hover',
         // Focus state
-        'focus-ring enabled:focus-visible:border-control',
+        'focus-ring enabled:focus-visible:border-control-hover',
         // Z-index for interactions
         'hover:z-1 focus-visible:z-1 data-[state=checked]:z-1',
         // Checked state
-        'data-[state=checked]:ring-1 data-[state=checked]:ring-border',
-        'data-[state=checked]:bg-surface-300 data-[state=checked]:border-foreground-muted',
+        'data-[state=checked]:bg-surface-300 data-[state=checked]:border-control-hover',
         // Colors only — avoid bare `transition` so the focus ring does not animate
         'transition-colors group',
         props.className
@@ -67,10 +66,10 @@ const RadioGroupStackedItem = React.forwardRef<
               'aspect-square h-4 w-4 min-w-4 min-h-4 rounded-full border relative',
               'flex items-center justify-center',
               // States
-              'group-data-[state=checked]:border-foreground-muted',
-              'group-focus-visible:border-foreground-muted',
+              'group-data-[state=checked]:border-control-hover',
+              'group-focus-visible:border-control-hover',
               'group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background',
-              'group-hover:border-foreground-muted transition-colors'
+              'group-hover:border-control-hover transition-colors'
             )}
           >
             <RadioGroupPrimitive.Indicator className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
diff --git a/packages/ui/src/components/shadcn/ui/input-group.tsx b/packages/ui/src/components/shadcn/ui/input-group.tsx
index 0a5752b25b54d..d0506aa221665 100644
--- a/packages/ui/src/components/shadcn/ui/input-group.tsx
+++ b/packages/ui/src/components/shadcn/ui/input-group.tsx
@@ -45,7 +45,7 @@ function InputGroup({
       role="group"
       className={cn(
         'group/input-group relative items-center outline-hidden transition-[color,box-shadow]',
-        'flex rounded-md border border-control bg-foreground/[.026] text-sm',
+        'flex rounded-md border border-control hover:border-control-hover bg-field text-sm transition-colors duration-200',
         'has-[>textarea]:h-auto',
 
         // Variants based on alignment.
@@ -57,11 +57,14 @@ function InputGroup({
 
         // Focus state. Parent listens via :has() — cannot use the focus-ring utility
         // (that utility targets :focus-visible on the element itself).
-        'has-[[data-slot=input-group-control]:focus-visible]:outline-hidden has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background',
+        'has-[[data-slot=input-group-control]:focus-visible]:outline-hidden has-[[data-slot=input-group-control]:focus-visible]:border-control-hover has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background',
+        'has-[[data-slot=input-group-control]:focus]:border-control-hover',
 
         // Error state.
         'has-[[data-slot][aria-invalid=true]]:bg-destructive-200 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive-400 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+        'has-[[data-slot][aria-invalid=true]]:hover:border-destructive',
         'has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:border-destructive',
+        'has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus]:border-destructive',
 
         // Disabled state.
         'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:text-foreground-muted',
@@ -165,10 +168,12 @@ const InputGroupInput = React.forwardRef<HTMLInputElement, InputProps>(
       data-slot="input-group-control"
       className={cn(
         'flex-1 block rounded-none border border-transparent -m-px bg-transparent shadow-none',
-        'focus:border-transparent focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-offset-0',
+        // Shell owns hover/focus chrome; kill Input's control-hover borders on the inner control.
+        'hover:border-transparent focus:border-transparent focus-visible:border-transparent',
+        'focus-visible:ring-0 focus-visible:ring-offset-0',
         'read-only:border-transparent',
         'aria-[invalid=true]:border-transparent aria-[invalid=true]:bg-transparent',
-        'aria-[invalid=true]:focus:border-transparent aria-[invalid=true]:focus-visible:border-transparent',
+        'aria-[invalid=true]:hover:border-transparent aria-[invalid=true]:focus:border-transparent aria-[invalid=true]:focus-visible:border-transparent',
         className
       )}
       {...props}
@@ -187,7 +192,10 @@ const InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       data-slot="input-group-control"
       className={cn(
         'flex-1 resize-none rounded-none border border-transparent bg-transparent py-0 shadow-none',
-        'focus:border-transparent focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-offset-0',
+        'hover:border-transparent focus:border-transparent focus-visible:border-transparent',
+        'focus-visible:ring-0 focus-visible:ring-offset-0',
+        'aria-[invalid=true]:border-transparent aria-[invalid=true]:bg-transparent',
+        'aria-[invalid=true]:hover:border-transparent aria-[invalid=true]:focus:border-transparent aria-[invalid=true]:focus-visible:border-transparent',
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/shadcn/ui/input.tsx b/packages/ui/src/components/shadcn/ui/input.tsx
index b2933fb903a48..3e49f3d5a2cf5 100644
--- a/packages/ui/src/components/shadcn/ui/input.tsx
+++ b/packages/ui/src/components/shadcn/ui/input.tsx
@@ -11,9 +11,9 @@ export interface InputProps
 
 export const InputVariants = cva(
   cn(
-    'flex h-10 w-full rounded-md border border-control read-only:border-button bg-foreground/[.026] px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-muted read-only:text-foreground-light',
-    'focus:border-control focus-ring disabled:cursor-not-allowed disabled:text-foreground-muted',
-    'aria-[] aria-[invalid=true]:bg-destructive-200 aria-[invalid=true]:border-destructive-400 aria-[invalid=true]:focus:border-destructive aria-[invalid=true]:focus-visible:border-destructive'
+    'flex h-10 w-full rounded-md border border-control hover:border-control-hover read-only:border-button bg-field px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-muted read-only:text-foreground-light',
+    'focus:border-control-hover focus-ring disabled:cursor-not-allowed disabled:text-foreground-muted transition-colors duration-200',
+    'aria-[invalid=true]:bg-destructive-200 aria-[invalid=true]:border-destructive-400 aria-[invalid=true]:hover:border-destructive aria-[invalid=true]:focus:border-destructive aria-[invalid=true]:focus-visible:border-destructive'
   ),
   {
     variants: {
diff --git a/packages/ui/src/components/shadcn/ui/radio-group.tsx b/packages/ui/src/components/shadcn/ui/radio-group.tsx
index 2aa4fac0e0071..e7f7ed2b952d9 100644
--- a/packages/ui/src/components/shadcn/ui/radio-group.tsx
+++ b/packages/ui/src/components/shadcn/ui/radio-group.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { RadioGroup as RadioGroupPrimitive } from 'radix-ui'
 import { Circle } from 'lucide-react'
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui'
 import * as React from 'react'
 
 import { cn } from '../../../lib/utils/cn'
@@ -56,10 +56,8 @@ const RadioGroupLargeItem = React.forwardRef<
         'rounded-md border border-strong',
         'p-2',
         'shadow-xs',
-        'hover:border-stronger hover:bg-surface-300',
-        'data-[state=checked]:border-primary',
-        'data-[state=checked]:ring-1 data-[state=checked]:ring-border',
-        'data-[state=checked]:bg-selection data-[state=checked]:border-foreground',
+        'hover:border-control-hover focus-visible:border-control-hover hover:bg-surface-300',
+        'data-[state=checked]:bg-selection data-[state=checked]:border-control-hover',
         'transition-colors',
         'group',
         props.className
@@ -87,8 +85,9 @@ const RadioGroupLargeItem = React.forwardRef<
                 'w-3 h-3',
                 'border border-stronger',
                 'rounded-full',
-                'group-hover:border-foreground-light',
-                'group-data-[state=checked]:border-foreground',
+                'group-hover:border-control-hover',
+                'group-focus-visible:border-control-hover',
+                'group-data-[state=checked]:border-control-hover',
                 'transition-colors'
               )}
             ></div>
diff --git a/packages/ui/src/components/shadcn/ui/select.tsx b/packages/ui/src/components/shadcn/ui/select.tsx
index d2cdd3087c22c..9bacd99420fb8 100644
--- a/packages/ui/src/components/shadcn/ui/select.tsx
+++ b/packages/ui/src/components/shadcn/ui/select.tsx
@@ -47,8 +47,8 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex w-full items-center justify-between rounded-md border border-strong hover:border-stronger bg-background dark:bg-card hover:bg-popover text-xs data-[placeholder]:text-foreground-lighter ring-border-control focus-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-200',
-      'data-[state=open]:bg-popover data-[state=open]:border-stronger',
+      'flex w-full items-center justify-between rounded-md border border-strong hover:border-control-hover bg-control-raised text-xs data-[placeholder]:text-foreground-lighter ring-border-control focus-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-200',
+      'data-[state=open]:border-control-hover',
       'gap-2',
       '[&>span]:truncate text-left', // [kemal] This is to prevent double lines rendering when a string is particularly long.
       SelectTriggerVariants({ size }),
diff --git a/packages/ui/src/components/shadcn/ui/text-area.tsx b/packages/ui/src/components/shadcn/ui/text-area.tsx
index f54a9a50d91a8..7c07af022daf8 100644
--- a/packages/ui/src/components/shadcn/ui/text-area.tsx
+++ b/packages/ui/src/components/shadcn/ui/text-area.tsx
@@ -4,16 +4,18 @@ import { cn } from '../../../lib/utils/cn'
 
 export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
-const customClasses = ['bg-control']
-
+/**
+ * Legacy TextArea. Prefer `Textarea` from `./textarea` for new work.
+ * Kept in sync with the shadcn Textarea control surface (field well + control-hover).
+ */
 const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
         className={cn(
-          'flex min-h-10 w-full rounded-md border border-control focus:border-control bg-control px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-muted',
-          'focus-ring disabled:cursor-not-allowed disabled:opacity-50',
-          ...customClasses,
+          'flex min-h-10 w-full rounded-md border border-control hover:border-control-hover bg-field px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-muted',
+          'focus:border-control-hover focus-visible:border-control-hover focus-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-200',
+          'aria-[invalid=true]:bg-destructive-200 aria-[invalid=true]:border-destructive-400 aria-[invalid=true]:hover:border-destructive aria-[invalid=true]:focus:border-destructive aria-[invalid=true]:focus-visible:border-destructive',
           className
         )}
         ref={ref}
diff --git a/packages/ui/src/components/shadcn/ui/textarea.tsx b/packages/ui/src/components/shadcn/ui/textarea.tsx
index 288e57abb7db6..8c668ebd861a7 100644
--- a/packages/ui/src/components/shadcn/ui/textarea.tsx
+++ b/packages/ui/src/components/shadcn/ui/textarea.tsx
@@ -9,7 +9,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-control bg-foreground/[.026] px-3 py-2 text-base md:text-sm placeholder:text-foreground-muted focus:border-control focus-visible:border-control focus-ring disabled:cursor-not-allowed disabled:opacity-50',
+          'flex min-h-[80px] w-full rounded-md border border-control hover:border-control-hover bg-field px-3 py-2 text-base md:text-sm placeholder:text-foreground-muted focus:border-control-hover focus-visible:border-control-hover focus-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-200',
+          'aria-[invalid=true]:bg-destructive-200 aria-[invalid=true]:border-destructive-400 aria-[invalid=true]:hover:border-destructive aria-[invalid=true]:focus:border-destructive aria-[invalid=true]:focus-visible:border-destructive',
           className
         )}
         ref={ref}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 064cd702be11e..4f261aae08405 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -594,7 +594,7 @@ importers:
         version: 7.29.7(supports-color@8.1.1)
       '@graphiql/toolkit':
         specifier: ^0.9.1
-        version: 0.9.1(@types/node@22.13.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)
+        version: 0.9.1(@types/node@22.13.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)
       '@graphql-codegen/cli':
         specifier: 5.0.5
         version: 5.0.5(@parcel/watcher@2.5.6)(@types/node@22.13.14)(encoding@0.1.13)(graphql-sock@1.0.1(graphql@16.11.0))(graphql@16.11.0)(supports-color@8.1.1)(typescript@6.0.2)
@@ -675,7 +675,7 @@ importers:
         version: 13.2.2
       graphiql:
         specifier: ^4.0.2
-        version: 4.0.2(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 4.0.2(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       npm-run-all:
         specifier: ^4.1.5
         version: 4.1.5
@@ -886,23 +886,23 @@ importers:
   apps/studio:
     dependencies:
       '@ai-sdk/amazon-bedrock':
-        specifier: ^4.0.81
-        version: 4.0.81(zod@3.25.76)
+        specifier: 5.0.55
+        version: 5.0.55(zod@3.25.76)
       '@ai-sdk/mcp':
-        specifier: ^1.0.25
-        version: 1.0.25(zod@3.25.76)
+        specifier: 2.0.31
+        version: 2.0.31(zod@3.25.76)
       '@ai-sdk/openai':
-        specifier: ^3.0.41
-        version: 3.0.41(zod@3.25.76)
+        specifier: 4.0.41
+        version: 4.0.41(zod@3.25.76)
       '@ai-sdk/provider':
-        specifier: ^3.0.8
-        version: 3.0.8
+        specifier: 4.0.7
+        version: 4.0.7
       '@ai-sdk/provider-utils':
-        specifier: ^4.0.19
-        version: 4.0.19(zod@3.25.76)
+        specifier: 5.0.26
+        version: 5.0.26(zod@3.25.76)
       '@ai-sdk/react':
-        specifier: ^3.0.118
-        version: 3.0.118(react@19.2.6)(zod@3.25.76)
+        specifier: 4.0.62
+        version: 4.0.62(react@19.2.6)(zod@3.25.76)
       '@aws-sdk/credential-providers':
         specifier: ^3.1041.0
         version: 3.1041.0
@@ -1045,8 +1045,8 @@ importers:
         specifier: ^2.7.29
         version: 2.7.30
       ai:
-        specifier: ^6.0.174
-        version: 6.0.174(zod@3.25.76)
+        specifier: 7.0.59
+        version: 7.0.59(zod@3.25.76)
       ai-commands:
         specifier: workspace:*
         version: link:../../packages/ai-commands
@@ -2898,15 +2898,15 @@ packages:
   '@adobe/css-tools@4.4.0':
     resolution: {integrity: sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==}
 
-  '@ai-sdk/amazon-bedrock@4.0.81':
-    resolution: {integrity: sha512-SP3LIpFt/JlK0sGs6E5jvjySvQqu/nqA942PehIGk3PZPJ5SMPsUNg+PYTs84PTUYEg8rr4XqkQOTNFq12zo2w==}
-    engines: {node: '>=18'}
+  '@ai-sdk/amazon-bedrock@5.0.55':
+    resolution: {integrity: sha512-p064NNPJeXNzkAaagxQKU1Ns9fq7H7iqhv9nfnX89ZHu+3mnBJDf+W6p/lcDCxJfG/naOFJOiafvHRSO40cZoA==}
+    engines: {node: '>=22'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
-  '@ai-sdk/anthropic@3.0.62':
-    resolution: {integrity: sha512-CkShXR8tmNO7QQnvpKbSMe2Vr1zUUcpqlp69iR+DYrbHm+tDJO9u6zZsjEHjcoRU9/e9z++p0W6NiuLC3aZ4Bg==}
-    engines: {node: '>=18'}
+  '@ai-sdk/anthropic@4.0.38':
+    resolution: {integrity: sha512-esbTb5jq/37dloBJzld3CpYCZskiDWGcI4O8kzst9J/0Km4by7cgQXLTB/gGdjXxBsyjPQUeotVqqRRIrx2zew==}
+    engines: {node: '>=22'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
@@ -2916,21 +2916,21 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4
 
-  '@ai-sdk/gateway@3.0.109':
-    resolution: {integrity: sha512-r6dOqThjODp1vOhGRJg2OCmyB/ZOQtGx1esZ2SDvwDX5XoX8dBqYaYjLg8MPXTzMGJSgOkJyCxWgUcZtAl16pw==}
-    engines: {node: '>=18'}
+  '@ai-sdk/gateway@4.0.47':
+    resolution: {integrity: sha512-BuWWlA8atWEnEJzN4eamCpGZWkoK9V3TCyNaMwgRIazhqkgWkA1Wp36si3j2JeVYzlvlEAOWrJ92dr92j/Vkqg==}
+    engines: {node: '>=22'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
-  '@ai-sdk/gateway@3.0.66':
-    resolution: {integrity: sha512-SIQ0YY0iMuv+07HLsZ+bB990zUJ6S4ujORAh+Jv1V2KGNn73qQKnGO0JBk+w+Res8YqOFSycwDoWcFlQrVxS4A==}
-    engines: {node: '>=18'}
+  '@ai-sdk/mcp@2.0.30':
+    resolution: {integrity: sha512-blXjM1TVI6sYER6PuMd8ZM+nTq57LUHq4Cc5gmFw1ub9204rALpew0iiusYKjgyaEtCuUcFr/ybBr6RavqV/2A==}
+    engines: {node: '>=22'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
-  '@ai-sdk/mcp@1.0.25':
-    resolution: {integrity: sha512-vMlXUPGHGDE2vzLcPR8sw7Dhz2OBjtPU5lB+lIuC1hNQo4REuUC08P0e96/hzBKf4oQYJ8Zo6uP8AG2qThyFbg==}
-    engines: {node: '>=18'}
+  '@ai-sdk/mcp@2.0.31':
+    resolution: {integrity: sha512-vBxkIg4CB9wQjWYo5uu1G/Vv3Xhbi3JZ47HoT5ywLNTycxKlY2RGGynTyGqcXLcvWBErRyMygDYVFn8VPc1N+w==}
+    engines: {node: '>=22'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
@@ -2940,9 +2940,9 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4
 
-  '@ai-sdk/openai@3.0.41':
-    resolution: {integrity: sha512-IZ42A+FO+vuEQCVNqlnAPYQnnUpUfdJIwn1BEDOBywiEHa23fw7PahxVtlX9zm3/zMvTW4JKPzWyvAgDu+SQ2A==}
-    engines: {node: '>=18'}
+  '@ai-sdk/openai@4.0.41':
+    resolution: {integrity: sha512-+WoY0JyF/uV2z+rye7I+hYaVg+hTanG4rYIgsWKvJFDXaAdu9yg07x+BRa2vTgUqzLIBXEBp5d1T7DwMI9ZGlw==}
+    engines: {node: '>=22'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
@@ -2958,21 +2958,15 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4
 
-  '@ai-sdk/provider-utils@4.0.19':
-    resolution: {integrity: sha512-3eG55CrSWCu2SXlqq2QCsFjo3+E7+Gmg7i/oRVoSZzIodTuDSfLb3MRje67xE9RFea73Zao7Lm4mADIfUETKGg==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      zod: ^3.25.76 || ^4.1.8
-
-  '@ai-sdk/provider-utils@4.0.20':
-    resolution: {integrity: sha512-gpUIj9uDhIGbuo9afKEgQ074BWmhvK4THJAAeBjRnroTy2yQYo6rbtGD7pQDMZM8ouXPYmT/SCdkWVJ0KcpX8A==}
-    engines: {node: '>=18'}
+  '@ai-sdk/provider-utils@5.0.26':
+    resolution: {integrity: sha512-0mqhqx+Dcv+msI84+zkbLXmnCHb/mpkYJ9DU3HBvB1px+UjFQss4lLZqRCSzJ0w3NxwQk4Ishk7cP0r8wEQD5w==}
+    engines: {node: '>=22'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
-  '@ai-sdk/provider-utils@4.0.26':
-    resolution: {integrity: sha512-CsKNLKsOpvPujRlIYvoz+Ybw+kGn7J4/fIZa/58+R7iWLLfwn6ifE2G6Yq8K9XvH/I/3bzaDAJ3NhRwEMsLBKQ==}
-    engines: {node: '>=18'}
+  '@ai-sdk/provider-utils@5.0.27':
+    resolution: {integrity: sha512-EzAn4pdgG5g0xXtH6lE2zyNmfjDQIDjATkfqzuidEI35g++hh4+07vnjzkT/RmGmIClPZiRj/Q2GMPV2V7mkHw==}
+    engines: {node: '>=22'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
@@ -2984,17 +2978,13 @@ packages:
     resolution: {integrity: sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA==}
     engines: {node: '>=18'}
 
-  '@ai-sdk/provider@3.0.10':
-    resolution: {integrity: sha512-Q3BZ27qfpYqnCYGvE3vt+Qi6LGOF9R5Nmzn+9JoM1lCRsD9mYaIhfJLkSunN48nfGXJ6n+XNV0J/XVpqGQl7Dw==}
-    engines: {node: '>=18'}
-
-  '@ai-sdk/provider@3.0.8':
-    resolution: {integrity: sha512-oGMAgGoQdBXbZqNG0Ze56CHjDZ1IDYOwGYxYjO5KLSlz5HiNQ9udIXsPZ61VWaHGZ5XW/jyjmr6t2xz2jGVwbQ==}
-    engines: {node: '>=18'}
+  '@ai-sdk/provider@4.0.7':
+    resolution: {integrity: sha512-6or44XprPzKbr8zkmzosowSE0pxkvJcoojBL+mCZvPUt3kvXp3XSNqeVun9golb1acEfSo6yaEBRT18h2VU+1Q==}
+    engines: {node: '>=22'}
 
-  '@ai-sdk/react@3.0.118':
-    resolution: {integrity: sha512-fBAix8Jftxse6/2YJnOFkwW1/O6EQK4DK68M9DlFmZGAzBmsaHXEPVS77sVIlkaOWCy11bE7434NAVXRY+3OsQ==}
-    engines: {node: '>=18'}
+  '@ai-sdk/react@4.0.62':
+    resolution: {integrity: sha512-Fe3PZmbSzBBmVDE4+HqHJ3x6mYhZ8riUR+3fyjSY+xiRuAntkVkH/MTh0kylvteeRlpgNA4tDDFOTiZfcLPbgg==}
+    engines: {node: '>=22'}
     peerDependencies:
       react: ^18 || ~19.0.1 || ~19.1.2 || ^19.2.1
 
@@ -3042,10 +3032,6 @@ packages:
   '@asamuzakjp/nwsapi@2.3.9':
     resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
 
-  '@aws-crypto/crc32@5.2.0':
-    resolution: {integrity: sha512-nLbCWqQNgUiwwtFsen1AdzAtvuLRsQS8rYgMuxCrdKf9kOssamGLuPwyTY9wyYblNr9+1XM8v6zoDTPPSIeANg==}
-    engines: {node: '>=16.0.0'}
-
   '@aws-crypto/sha256-browser@5.2.0':
     resolution: {integrity: sha512-AXfN/lGotSQwu6HNcEsIASo7kWXZ5HYWvfOmSNKDsEqC4OashTp8alTmaz+F7TC2L083SFv5RdB+qU3Vs1kZqw==}
 
@@ -7227,12 +7213,16 @@ packages:
     resolution: {integrity: sha512-x7BlLbUFL8NWCGjMF9C+1N5cVCxcPa7g6Tv9B4A2luWx3be3oU8hQ96wIwxe/s7OhIzvoJH73HAUSg5JXVlEtQ==}
     engines: {node: '>=18.0.0'}
 
+  '@smithy/core@3.31.1':
+    resolution: {integrity: sha512-CyogUINxvi7C7LDsh8Syo6hVJOT9ckz4rG8dRZfTJ8r91HkMY59PnNooaj7WcHyxEkxPfBAmbgztZU+xTo76lg==}
+    engines: {node: '>=18.0.0'}
+
   '@smithy/credential-provider-imds@4.2.14':
     resolution: {integrity: sha512-Au28zBN48ZAoXdooGUHemuVBrkE+Ie6RPmGNIAJsFqj33Vhb6xAgRifUydZ2aY+M+KaMAETAlKk5NC5h1G7wpg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/eventstream-codec@4.0.4':
-    resolution: {integrity: sha512-7XoWfZqWb/QoR/rAU4VSi0mWnO2vu9/ltS6JZ5ZSZv0eovLVfDfu0/AX4ub33RsJTOth3TiFWSHS5YdztvFnig==}
+  '@smithy/eventstream-codec@4.4.16':
+    resolution: {integrity: sha512-u6l4XW99ESjEikMOGENsZxJblxWNvkTLRbCWcC1c2VwNdmd4QgviN2RRlZxliVWEzG3kyU/m0y3iuVFtLL/6jA==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/fetch-http-handler@5.3.17':
@@ -7323,6 +7313,10 @@ packages:
     resolution: {integrity: sha512-59b5HtSVrVR/eYNei3BUj3DCPKD/G7EtDDe7OEJE7i7FtQFugYo6MxbotS8mVJkLNVf8gYaAlEBwwtJ9HzhWSg==}
     engines: {node: '>=18.0.0'}
 
+  '@smithy/types@4.16.1':
+    resolution: {integrity: sha512-0JFs3V2y2M9tKW5na/qxe69Zv+uxLMO7QBbhxF/FHu/Gp2NFZAAL9tWl9PU02xxo07pb3G9FTyjNc6D5uZrJIg==}
+    engines: {node: '>=18.0.0'}
+
   '@smithy/types@4.3.1':
     resolution: {integrity: sha512-UqKOQBL2x6+HWl3P+3QqFD4ncKq0I8Nuz9QItGv5WuKuMHuuwlhvqcZCoXGfc+P1QmfJE7VieykoYYmrOoFJxA==}
     engines: {node: '>=18.0.0'}
@@ -7367,10 +7361,6 @@ packages:
     resolution: {integrity: sha512-a55Tr+3OKld4TTtnT+RhKOQHyPxm3j/xL4OR83WBUhLJaKDS9dnJ7arRMOp3t31dcLhApwG9bgvrRXBHlLdIkg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-hex-encoding@4.0.0':
-    resolution: {integrity: sha512-Yk5mLhHtfIgW2W2WQZWSg5kuMZCVbvhFmC7rV4IO2QqnZdbEFPmQnCcGMAX2z/8Qj3B9hYYNjZOhWym+RwhePw==}
-    engines: {node: '>=18.0.0'}
-
   '@smithy/util-hex-encoding@4.2.2':
     resolution: {integrity: sha512-Qcz3W5vuHK4sLQdyT93k/rfrUwdJ8/HZ+nMUOyGdpeGA1Wxt65zYwi3oEl9kOM+RswvYq90fzkNDahPS8K0OIg==}
     engines: {node: '>=18.0.0'}
@@ -7395,14 +7385,14 @@ packages:
     resolution: {integrity: sha512-qOiVORSPm6Ce4/Yu6hbSgNHABLP2VMv8QOC3tTDNHHlWY19pPyc++fBTbZPtx6egPXi4HQxKDnMxVxpbtX2GoA==}
     engines: {node: '>=14.0.0'}
 
-  '@smithy/util-utf8@4.0.0':
-    resolution: {integrity: sha512-b+zebfKCfRdgNJDknHCob3O7FpeYQN6ZG6YLExMcasDHsCXlsXCEuiPZeLnJLpwa5dvPetGlnGCiMHuLwGvFow==}
-    engines: {node: '>=18.0.0'}
-
   '@smithy/util-utf8@4.2.2':
     resolution: {integrity: sha512-75MeYpjdWRe8M5E3AW0O4Cx3UadweS+cwdXjwYGBW5h/gxxnbeZ877sLPX/ZJA9GVTlL/qG0dXP29JWFCD1Ayw==}
     engines: {node: '>=18.0.0'}
 
+  '@smithy/util-utf8@4.4.16':
+    resolution: {integrity: sha512-/gSbVMQlLRcneJ8D/JGbB1DNf0w4I7OpY2ldNUJ+myDmakPXEm9fy/X4swDlNYTOwBwsCKVJsogCfe7Txjnolg==}
+    engines: {node: '>=18.0.0'}
+
   '@smithy/uuid@1.1.2':
     resolution: {integrity: sha512-O/IEdcCUKkubz60tFbGA7ceITTAJsty+lBjNoorP4Z6XRqaFb/OjQjZODophEcuq68nKm6/0r+6/lLQ+XVpk8g==}
     engines: {node: '>=18.0.0'}
@@ -8787,10 +8777,6 @@ packages:
     resolution: {integrity: sha512-OTe0KE37F5Y2eTys6eMnfopC+P4qr2ooXUTFyFPTplYSPwowmFk/HLD1FXtbKLjqsIH0SgekcJWad+C5uX4nkg==}
     engines: {node: '>=16'}
 
-  '@vercel/oidc@3.1.0':
-    resolution: {integrity: sha512-Fw28YZpRnA3cAHHDlkt7xQHiJ0fcL+NRcIqsocZQUSmbzeIKRpwttJjik5ZGanXP+vlA4SbTg+AbA3bP363l+w==}
-    engines: {node: '>= 20'}
-
   '@vercel/oidc@3.2.0':
     resolution: {integrity: sha512-UycprH3T6n3jH0k44NHMa7pnFHGu/N05MjojYr+Mc6I7obkoLIJujSWwin1pCvdy/eOxrI/l3uDLQsmcrOb4ug==}
     engines: {node: '>= 20'}
@@ -9043,6 +9029,9 @@ packages:
     resolution: {integrity: sha512-D+OwTEunoQhVHVToD80dPhfz9xgPLqJyEA3F5jCRM14A2u8tBBQVdZekqfqx6ZAfZ+POT4Hb0dn601UKMsvADw==}
     engines: {node: '>=16.0.0'}
 
+  '@workflow/serde@4.1.0':
+    resolution: {integrity: sha512-pav4F2BoirECWR7Nf1TKt+2eETcBj7jj4cBefQ8VXQCA6NPkaKeLfj/zMgi+3zYV5ZIBT4GuUiphsj0/b9hPQQ==}
+
   '@xobotyi/scrollbar-width@1.9.5':
     resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
 
@@ -9160,15 +9149,9 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4
 
-  ai@6.0.116:
-    resolution: {integrity: sha512-7yM+cTmyRLeNIXwt4Vj+mrrJgVQ9RMIW5WO0ydoLoYkewIvsMcvUmqS4j2RJTUXaF1HphwmSKUMQ/HypNRGOmA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      zod: ^3.25.76 || ^4.1.8
-
-  ai@6.0.174:
-    resolution: {integrity: sha512-bTrfLUWHWtkjzWyCY4bmyuk4Qvmj4S4NSNsXyNSVVqkmftQNtxRj7dzUoMeQDBBwlJO6fC7m2Q/lNOPqQQfAGA==}
-    engines: {node: '>=18'}
+  ai@7.0.59:
+    resolution: {integrity: sha512-p10cqg8KvLIZi7Gk+XsQjoYoLENoDdEYvehP0rSo6Wg15nbCmP+nwIy1rOIX+WGIDWGdI+jmhjVx5fXShBVC3w==}
+    engines: {node: '>=22'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
@@ -14765,6 +14748,10 @@ packages:
     resolution: {integrity: sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==}
     engines: {node: '>=16.20.0'}
 
+  pkce-challenge@5.0.1:
+    resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
+    engines: {node: '>=16.20.0'}
+
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
@@ -16481,10 +16468,10 @@ packages:
     resolution: {integrity: sha512-4gILrI3vXZqoZh71I1PALqukCFgk+gpOwe1tOvz5uE9kHtl2gTDzmYflYCwWvR4LOvCrJi6UEEU+gnuW5BtkgQ==}
     engines: {node: '>= 4.7.0'}
 
-  swr@2.2.5:
-    resolution: {integrity: sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==}
+  swr@2.5.0:
+    resolution: {integrity: sha512-W0GomadRJe9OfzIoRX0kZHhDSaRRfdiOUeH6uazgR05SibBhDNwfdTbhAxmFtObvkf59fFymo22mooKukosvNA==}
     peerDependencies:
-      react: ^16.11.0 || ^17.0.0 || ^18.0.0
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
@@ -18006,20 +17993,21 @@ snapshots:
 
   '@adobe/css-tools@4.4.0': {}
 
-  '@ai-sdk/amazon-bedrock@4.0.81(zod@3.25.76)':
+  '@ai-sdk/amazon-bedrock@5.0.55(zod@3.25.76)':
     dependencies:
-      '@ai-sdk/anthropic': 3.0.62(zod@3.25.76)
-      '@ai-sdk/provider': 3.0.8
-      '@ai-sdk/provider-utils': 4.0.20(zod@3.25.76)
-      '@smithy/eventstream-codec': 4.0.4
-      '@smithy/util-utf8': 4.0.0
+      '@ai-sdk/anthropic': 4.0.38(zod@3.25.76)
+      '@ai-sdk/openai': 4.0.41(zod@3.25.76)
+      '@ai-sdk/provider': 4.0.7
+      '@ai-sdk/provider-utils': 5.0.27(zod@3.25.76)
+      '@smithy/eventstream-codec': 4.4.16
+      '@smithy/util-utf8': 4.4.16
       aws4fetch: 1.0.20
       zod: 3.25.76
 
-  '@ai-sdk/anthropic@3.0.62(zod@3.25.76)':
+  '@ai-sdk/anthropic@4.0.38(zod@3.25.76)':
     dependencies:
-      '@ai-sdk/provider': 3.0.8
-      '@ai-sdk/provider-utils': 4.0.20(zod@3.25.76)
+      '@ai-sdk/provider': 4.0.7
+      '@ai-sdk/provider-utils': 5.0.27(zod@3.25.76)
       zod: 3.25.76
 
   '@ai-sdk/gateway@1.0.29(zod@3.25.76)':
@@ -18028,25 +18016,25 @@ snapshots:
       '@ai-sdk/provider-utils': 3.0.9(zod@3.25.76)
       zod: 3.25.76
 
-  '@ai-sdk/gateway@3.0.109(zod@3.25.76)':
+  '@ai-sdk/gateway@4.0.47(zod@3.25.76)':
     dependencies:
-      '@ai-sdk/provider': 3.0.10
-      '@ai-sdk/provider-utils': 4.0.26(zod@3.25.76)
+      '@ai-sdk/provider': 4.0.7
+      '@ai-sdk/provider-utils': 5.0.26(zod@3.25.76)
       '@vercel/oidc': 3.2.0
       zod: 3.25.76
 
-  '@ai-sdk/gateway@3.0.66(zod@3.25.76)':
+  '@ai-sdk/mcp@2.0.30(zod@3.25.76)':
     dependencies:
-      '@ai-sdk/provider': 3.0.8
-      '@ai-sdk/provider-utils': 4.0.19(zod@3.25.76)
-      '@vercel/oidc': 3.1.0
+      '@ai-sdk/provider': 4.0.7
+      '@ai-sdk/provider-utils': 5.0.26(zod@3.25.76)
+      pkce-challenge: 5.0.1
       zod: 3.25.76
 
-  '@ai-sdk/mcp@1.0.25(zod@3.25.76)':
+  '@ai-sdk/mcp@2.0.31(zod@3.25.76)':
     dependencies:
-      '@ai-sdk/provider': 3.0.8
-      '@ai-sdk/provider-utils': 4.0.19(zod@3.25.76)
-      pkce-challenge: 5.0.0
+      '@ai-sdk/provider': 4.0.7
+      '@ai-sdk/provider-utils': 5.0.27(zod@3.25.76)
+      pkce-challenge: 5.0.1
       zod: 3.25.76
 
   '@ai-sdk/openai@2.0.2(zod@3.25.76)':
@@ -18055,17 +18043,17 @@ snapshots:
       '@ai-sdk/provider-utils': 3.0.0(zod@3.25.76)
       zod: 3.25.76
 
-  '@ai-sdk/openai@3.0.41(zod@3.25.76)':
+  '@ai-sdk/openai@4.0.41(zod@3.25.76)':
     dependencies:
-      '@ai-sdk/provider': 3.0.8
-      '@ai-sdk/provider-utils': 4.0.19(zod@3.25.76)
+      '@ai-sdk/provider': 4.0.7
+      '@ai-sdk/provider-utils': 5.0.27(zod@3.25.76)
       zod: 3.25.76
 
   '@ai-sdk/provider-utils@3.0.0(zod@3.25.76)':
     dependencies:
       '@ai-sdk/provider': 2.0.0
       '@standard-schema/spec': 1.1.0
-      eventsource-parser: 3.0.6
+      eventsource-parser: 3.0.8
       zod: 3.25.76
       zod-to-json-schema: 3.25.1(zod@3.25.76)
 
@@ -18073,28 +18061,25 @@ snapshots:
     dependencies:
       '@ai-sdk/provider': 2.0.0
       '@standard-schema/spec': 1.1.0
-      eventsource-parser: 3.0.6
-      zod: 3.25.76
-
-  '@ai-sdk/provider-utils@4.0.19(zod@3.25.76)':
-    dependencies:
-      '@ai-sdk/provider': 3.0.8
-      '@standard-schema/spec': 1.1.0
-      eventsource-parser: 3.0.6
+      eventsource-parser: 3.0.8
       zod: 3.25.76
 
-  '@ai-sdk/provider-utils@4.0.20(zod@3.25.76)':
+  '@ai-sdk/provider-utils@5.0.26(zod@3.25.76)':
     dependencies:
-      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider': 4.0.7
       '@standard-schema/spec': 1.1.0
-      eventsource-parser: 3.0.6
+      '@workflow/serde': 4.1.0
+      eventsource-parser: 3.0.8
+      undici: 7.29.0
       zod: 3.25.76
 
-  '@ai-sdk/provider-utils@4.0.26(zod@3.25.76)':
+  '@ai-sdk/provider-utils@5.0.27(zod@3.25.76)':
     dependencies:
-      '@ai-sdk/provider': 3.0.10
+      '@ai-sdk/provider': 4.0.7
       '@standard-schema/spec': 1.1.0
+      '@workflow/serde': 4.1.0
       eventsource-parser: 3.0.8
+      undici: 7.29.0
       zod: 3.25.76
 
   '@ai-sdk/provider@1.1.3':
@@ -18105,20 +18090,18 @@ snapshots:
     dependencies:
       json-schema: 0.4.0
 
-  '@ai-sdk/provider@3.0.10':
-    dependencies:
-      json-schema: 0.4.0
-
-  '@ai-sdk/provider@3.0.8':
+  '@ai-sdk/provider@4.0.7':
     dependencies:
       json-schema: 0.4.0
 
-  '@ai-sdk/react@3.0.118(react@19.2.6)(zod@3.25.76)':
+  '@ai-sdk/react@4.0.62(react@19.2.6)(zod@3.25.76)':
     dependencies:
-      '@ai-sdk/provider-utils': 4.0.19(zod@3.25.76)
-      ai: 6.0.116(zod@3.25.76)
+      '@ai-sdk/mcp': 2.0.30(zod@3.25.76)
+      '@ai-sdk/provider': 4.0.7
+      '@ai-sdk/provider-utils': 5.0.26(zod@3.25.76)
+      ai: 7.0.59(zod@3.25.76)
       react: 19.2.6
-      swr: 2.2.5(react@19.2.6)
+      swr: 2.5.0(react@19.2.6)
       throttleit: 2.1.0
     transitivePeerDependencies:
       - zod
@@ -18206,12 +18189,6 @@ snapshots:
 
   '@asamuzakjp/nwsapi@2.3.9': {}
 
-  '@aws-crypto/crc32@5.2.0':
-    dependencies:
-      '@aws-crypto/util': 5.2.0
-      '@aws-sdk/types': 3.973.8
-      tslib: 2.8.1
-
   '@aws-crypto/sha256-browser@5.2.0':
     dependencies:
       '@aws-crypto/sha256-js': 5.2.0
@@ -19637,9 +19614,9 @@ snapshots:
 
   '@floating-ui/utils@0.2.9': {}
 
-  '@graphiql/plugin-doc-explorer@0.0.1(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@graphiql/plugin-doc-explorer@0.0.1(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@graphiql/react': 0.32.0(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@graphiql/react': 0.32.0(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@headlessui/react': 2.2.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       graphql: 16.11.0
       react: 19.2.6
@@ -19667,10 +19644,10 @@ snapshots:
       - immer
       - use-sync-external-store
 
-  '@graphiql/plugin-history@0.0.2(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@graphiql/plugin-history@0.0.2(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@graphiql/react': 0.32.0(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@graphiql/toolkit': 0.11.3(@types/node@22.13.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)
+      '@graphiql/react': 0.32.0(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@graphiql/toolkit': 0.11.3(@types/node@22.13.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)
       react: 19.2.6
       react-compiler-runtime: 19.1.0-rc.1(react@19.2.6)
       react-dom: 19.2.6(react@19.2.6)
@@ -19699,9 +19676,9 @@ snapshots:
       - immer
       - use-sync-external-store
 
-  '@graphiql/react@0.32.0(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@graphiql/react@0.32.0(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@graphiql/toolkit': 0.11.3(@types/node@22.13.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)
+      '@graphiql/toolkit': 0.11.3(@types/node@22.13.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)
       '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -19769,23 +19746,23 @@ snapshots:
     transitivePeerDependencies:
       - '@types/node'
 
-  '@graphiql/toolkit@0.11.3(@types/node@22.13.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)':
+  '@graphiql/toolkit@0.11.3(@types/node@22.13.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)':
     dependencies:
       '@n1ru4l/push-pull-async-iterable-iterator': 3.2.0
       graphql: 16.11.0
       meros: 1.3.0(@types/node@22.13.14)
     optionalDependencies:
-      graphql-ws: 6.0.4(graphql@16.11.0)(ws@8.21.0)
+      graphql-ws: 6.0.4(graphql@16.11.0)(ws@8.21.3)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@graphiql/toolkit@0.9.1(@types/node@22.13.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)':
+  '@graphiql/toolkit@0.9.1(@types/node@22.13.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)':
     dependencies:
       '@n1ru4l/push-pull-async-iterable-iterator': 3.2.0
       graphql: 16.11.0
       meros: 1.3.0(@types/node@22.13.14)
     optionalDependencies:
-      graphql-ws: 6.0.4(graphql@16.11.0)(ws@8.21.0)
+      graphql-ws: 6.0.4(graphql@16.11.0)(ws@8.21.3)
     transitivePeerDependencies:
       - '@types/node'
 
@@ -23495,6 +23472,11 @@ snapshots:
       '@smithy/uuid': 1.1.2
       tslib: 2.8.1
 
+  '@smithy/core@3.31.1':
+    dependencies:
+      '@smithy/types': 4.16.1
+      tslib: 2.8.1
+
   '@smithy/credential-provider-imds@4.2.14':
     dependencies:
       '@smithy/node-config-provider': 4.3.14
@@ -23503,11 +23485,9 @@ snapshots:
       '@smithy/url-parser': 4.2.14
       tslib: 2.8.1
 
-  '@smithy/eventstream-codec@4.0.4':
+  '@smithy/eventstream-codec@4.4.16':
     dependencies:
-      '@aws-crypto/crc32': 5.2.0
-      '@smithy/types': 4.14.1
-      '@smithy/util-hex-encoding': 4.0.0
+      '@smithy/core': 3.31.1
       tslib: 2.8.1
 
   '@smithy/fetch-http-handler@5.3.17':
@@ -23654,6 +23634,10 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@smithy/types@4.16.1':
+    dependencies:
+      tslib: 2.8.1
+
   '@smithy/types@4.3.1':
     dependencies:
       tslib: 2.8.1
@@ -23715,10 +23699,6 @@ snapshots:
       '@smithy/types': 4.14.1
       tslib: 2.8.1
 
-  '@smithy/util-hex-encoding@4.0.0':
-    dependencies:
-      tslib: 2.8.1
-
   '@smithy/util-hex-encoding@4.2.2':
     dependencies:
       tslib: 2.8.1
@@ -23754,14 +23734,14 @@ snapshots:
       '@smithy/util-buffer-from': 2.0.0
       tslib: 2.8.1
 
-  '@smithy/util-utf8@4.0.0':
+  '@smithy/util-utf8@4.2.2':
     dependencies:
       '@smithy/util-buffer-from': 4.2.2
       tslib: 2.8.1
 
-  '@smithy/util-utf8@4.2.2':
+  '@smithy/util-utf8@4.4.16':
     dependencies:
-      '@smithy/util-buffer-from': 4.2.2
+      '@smithy/core': 3.31.1
       tslib: 2.8.1
 
   '@smithy/uuid@1.1.2':
@@ -25281,8 +25261,6 @@ snapshots:
       satori: 0.10.9
       yoga-wasm-web: 0.3.3
 
-  '@vercel/oidc@3.1.0': {}
-
   '@vercel/oidc@3.2.0': {}
 
   '@vercel/routing-utils@6.1.1':
@@ -25671,6 +25649,8 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@workflow/serde@4.1.0': {}
+
   '@xobotyi/scrollbar-width@1.9.5': {}
 
   '@xtuc/ieee754@1.2.0': {}
@@ -25746,6 +25726,10 @@ snapshots:
     dependencies:
       acorn: 8.16.0
 
+  acorn-jsx@5.3.2(acorn@8.18.0):
+    dependencies:
+      acorn: 8.18.0
+
   acorn-typescript@1.4.13(acorn@8.11.3):
     dependencies:
       acorn: 8.11.3
@@ -25789,20 +25773,11 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       zod: 3.25.76
 
-  ai@6.0.116(zod@3.25.76):
+  ai@7.0.59(zod@3.25.76):
     dependencies:
-      '@ai-sdk/gateway': 3.0.66(zod@3.25.76)
-      '@ai-sdk/provider': 3.0.8
-      '@ai-sdk/provider-utils': 4.0.19(zod@3.25.76)
-      '@opentelemetry/api': 1.9.0
-      zod: 3.25.76
-
-  ai@6.0.174(zod@3.25.76):
-    dependencies:
-      '@ai-sdk/gateway': 3.0.109(zod@3.25.76)
-      '@ai-sdk/provider': 3.0.10
-      '@ai-sdk/provider-utils': 4.0.26(zod@3.25.76)
-      '@opentelemetry/api': 1.9.0
+      '@ai-sdk/gateway': 4.0.47(zod@3.25.76)
+      '@ai-sdk/provider': 4.0.7
+      '@ai-sdk/provider-utils': 5.0.26(zod@3.25.76)
       zod: 3.25.76
 
   ajv-formats@2.1.1(ajv@8.18.0):
@@ -28046,8 +28021,8 @@ snapshots:
 
   espree@10.4.0:
     dependencies:
-      acorn: 8.16.0
-      acorn-jsx: 5.3.2(acorn@8.16.0)
+      acorn: 8.18.0
+      acorn-jsx: 5.3.2(acorn@8.18.0)
       eslint-visitor-keys: 4.2.1
 
   esprima@4.0.1: {}
@@ -28135,7 +28110,7 @@ snapshots:
 
   eventsource@3.0.7:
     dependencies:
-      eventsource-parser: 3.0.6
+      eventsource-parser: 3.0.8
 
   execa@1.0.0:
     dependencies:
@@ -28803,11 +28778,11 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
-  graphiql@4.0.2(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+  graphiql@4.0.2(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
-      '@graphiql/plugin-doc-explorer': 0.0.1(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@graphiql/plugin-history': 0.0.2(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@graphiql/react': 0.32.0(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.0))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@graphiql/plugin-doc-explorer': 0.0.1(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@graphiql/plugin-history': 0.0.2(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@graphiql/react': 0.32.0(@codemirror/language@6.11.0)(@emotion/is-prop-valid@1.4.0)(@types/node@22.13.14)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3))(graphql@16.11.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       graphql: 16.11.0
       react: 19.2.6
       react-compiler-runtime: 19.1.0-rc.1(react@19.2.6)
@@ -28906,6 +28881,13 @@ snapshots:
     optionalDependencies:
       ws: 8.21.0
 
+  graphql-ws@6.0.4(graphql@16.11.0)(ws@8.21.3):
+    dependencies:
+      graphql: 16.11.0
+    optionalDependencies:
+      ws: 8.21.3
+    optional: true
+
   graphql@16.11.0: {}
 
   gray-matter@2.1.1:
@@ -32627,6 +32609,8 @@ snapshots:
 
   pkce-challenge@5.0.0: {}
 
+  pkce-challenge@5.0.1: {}
+
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
@@ -34766,9 +34750,9 @@ snapshots:
 
   swiper@12.1.2: {}
 
-  swr@2.2.5(react@19.2.6):
+  swr@2.5.0(react@19.2.6):
     dependencies:
-      client-only: 0.0.1
+      dequal: 2.0.3
       react: 19.2.6
       use-sync-external-store: 1.6.0(react@19.2.6)