@agent-native/core 0.98.4 → 0.98.5

package/corpus/templates/analytics/server/lib/analytics-connector-catalog.ts

@@ -0,0 +1,14 @@
+/**
+ * The deliberately small authenticated MCP surface for Analytics.
+ *
+ * Keep this list read-only and incident-focused. In particular, do not add
+ * replay-event/blob actions or dashboard/data mutation actions here.
+ */
+export const ANALYTICS_CONNECTOR_CATALOG = [
+  "list-session-recordings",
+  "get-session-replay-summary",
+  "get-session-replay-events",
+  "query-agent-native-analytics",
+  "list-error-issues",
+  "get-error-issue",
+] as const;

package/corpus/templates/analytics/server/lib/error-capture.ts

@@ -18,6 +18,7 @@ import { fileURLToPath } from "node:url";
  * reads go through `accessFilter` so an org-scoped key surfaces its issues to
  * the whole org exactly like session recordings.
  */
+import { readAppState } from "@agent-native/core/application-state";
 import { notifyWithDelivery } from "@agent-native/core/notifications";
 import { recordChange } from "@agent-native/core/server";
 import { accessFilter } from "@agent-native/core/sharing";
@@ -1076,6 +1077,52 @@ export interface ListErrorIssuesFilters {
   limit?: number;
 }
 
+export const ERROR_REPORTING_ANONYMOUS_EMAIL = "anonymous@builder.io";
+const ERROR_REPORTING_EMAIL_PATTERN = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/gi;
+
+/**
+ * Error reports contain emails in identity fields, messages, stacks, URLs,
+ * tags, extra context, and breadcrumbs. Redact every string at this owning
+ * read seam so demo mode never depends on browser interception timing.
+ */
+export function anonymizeErrorReportingEmails<T>(value: T): T {
+  if (typeof value === "string") {
+    return value.replace(
+      ERROR_REPORTING_EMAIL_PATTERN,
+      ERROR_REPORTING_ANONYMOUS_EMAIL,
+    ) as T;
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => anonymizeErrorReportingEmails(item)) as T;
+  }
+  if (value && typeof value === "object") {
+    if (value instanceof Date) return value;
+    const output: Record<string, unknown> = {};
+    for (const [key, entry] of Object.entries(value)) {
+      output[key] = anonymizeErrorReportingEmails(entry);
+    }
+    return output as T;
+  }
+  return value;
+}
+
+async function isErrorDemoModeEnabled(): Promise<boolean> {
+  if (process.env.DEMO_MODE === "true") return true;
+  try {
+    const state = await readAppState("demo-mode");
+    return state?.enabled === true;
+  } catch {
+    return false;
+  }
+}
+
+function anonymizeErrorReportingEmailsInDemoMode<T>(
+  value: T,
+  enabled: boolean,
+): T {
+  return enabled ? anonymizeErrorReportingEmails(value) : value;
+}
+
 export interface ErrorIssueSummary {
   id: string;
   fingerprint: string;
@@ -1148,6 +1195,7 @@ export async function listErrorIssues(
   scope: ErrorReadScope,
   filters: ListErrorIssuesFilters = {},
 ): Promise<ErrorIssueSummary[]> {
+  const demoModeEnabled = isErrorDemoModeEnabled();
   const db = getDb() as any;
   const limit = Math.min(
     MAX_ISSUE_LIMIT,
@@ -1184,7 +1232,7 @@ export async function listErrorIssues(
     .limit(limit);
 
   const sparklines = await sparklinesForIssues(rows.map((row: any) => row.id));
-  return rows.map((row: any) => ({
+  const issues = rows.map((row: any) => ({
     id: row.id,
     fingerprint: row.fingerprint,
     type: row.type,
@@ -1203,6 +1251,7 @@ export async function listErrorIssues(
     template: row.template ?? null,
     sparkline: sparklines.get(row.id) ?? new Array(SPARKLINE_DAYS).fill(0),
   }));
+  return anonymizeErrorReportingEmailsInDemoMode(issues, await demoModeEnabled);
 }
 
 export interface ErrorEventDetail {
@@ -1294,6 +1343,7 @@ export async function getErrorIssue(
   issueId: string,
   options: { eventsLimit?: number } = {},
 ): Promise<ErrorIssueDetail> {
+  const demoModeEnabled = isErrorDemoModeEnabled();
   const db = getDb() as any;
   const [issueRow] = await db
     .select()
@@ -1419,7 +1469,14 @@ export async function getErrorIssue(
     sparkline: sparklines.get(issueId) ?? new Array(SPARKLINE_DAYS).fill(0),
   };
 
-  return { issue, events, sessions: Array.from(sessions.values()) };
+  return anonymizeErrorReportingEmailsInDemoMode(
+    {
+      issue,
+      events,
+      sessions: Array.from(sessions.values()),
+    },
+    await demoModeEnabled,
+  );
 }
 
 export interface UpdateErrorIssueInput {

package/corpus/templates/analytics/server/lib/real-data-actions.ts

@@ -8,6 +8,7 @@ const INJECTED_CONTEXT_BLOCKS = [
   "available-agents",
   "available-jobs",
   "plan-mode-note",
+  "non-analytics-retry",
 ];
 
 export const DATA_QUERY_ACTIONS = new Set([
@@ -231,12 +232,35 @@ export function looksLikeAnalyticsDataRequest(text: string): boolean {
 const UNSUPPORTED_RESULT_CLAIM =
   /(?:\b\d[\d,.]*(?:\.\d+)?\s*(?:%|percent|users?|customers?|accounts?|sessions?|events?|deals?|tickets?|issues?|calls?|messages?|signups?|pageviews?)\b|\$\s*\d|\b(?:data|query|results?)\s+(?:shows?|showed|indicates?|returned|found)\b|\b(?:i found|the top|the bottom|highest|lowest|increased|decreased|grew|declined|converted|churned|retained|averaged|total(?:ed)?|count(?:ed)?)\b)/i;
 
+export const GENERIC_NO_DATA_FALLBACK_MESSAGE =
+  "I can't provide a grounded analytics result yet because no real data-source query ran successfully. Tell me which source to use or connect the missing source, and I'll run it before giving numbers or source-record conclusions.";
+
+// The first sentence of the canned fallback, lowercased, with the trailing
+// period dropped. Matching this prefix (rather than the whole message) still
+// catches a model paraphrase that continues differently after "successfully".
+const GENERIC_NO_DATA_FALLBACK_FIRST_SENTENCE =
+  GENERIC_NO_DATA_FALLBACK_MESSAGE.slice(
+    0,
+    GENERIC_NO_DATA_FALLBACK_MESSAGE.indexOf(". ") + 1,
+  ).toLowerCase();
+
+export function isGenericNoDataFallback(text: string): boolean {
+  return text
+    .trim()
+    .toLowerCase()
+    .startsWith(GENERIC_NO_DATA_FALLBACK_FIRST_SENTENCE.slice(0, -1));
+}
+
 const SAFE_NO_DATA_RESPONSE =
   /\b(?:i can't|i cannot|can't retrieve|cannot retrieve|couldn't retrieve|unable to retrieve|don't have access|do not have access|not configured|missing credentials?|need (?:a|the)? ?data source|need to know which source|which source|which data source|clarify|can you|once (?:that'?s|it is) (?:connected|configured|available)|no data source|without a successful|query failed|source query failed|sql failed|error running|before (?:i|we) can (?:calculate|report|answer|analyze)|i need to query)\b/i;
 
 export function isSafeNoDataAnalyticsResponse(text: string): boolean {
   const trimmed = text.trim();
   if (!trimmed) return false;
+  // This is the guard's own last-resort fallback. If a model emits it before
+  // attempting a query, it must go through the retry path instead of being
+  // accepted as an explicit unavailable-source or clarification response.
+  if (isGenericNoDataFallback(trimmed)) return false;
   if (UNSUPPORTED_RESULT_CLAIM.test(trimmed)) return false;
   if (SAFE_NO_DATA_RESPONSE.test(trimmed)) return true;
   return /\?\s*$/.test(trimmed) && !UNSUPPORTED_RESULT_CLAIM.test(trimmed);

package/corpus/templates/analytics/server/lib/session-replay.ts

@@ -255,6 +255,7 @@ const RETENTION_DELETE_BATCH_SIZE = 500;
 const REPLAY_PRIVATE_BLOB_REF_KIND = "agent-native.session-replay.private-blob";
 const REPLAY_PRIVATE_BLOB_REF_VERSION = 1;
 const SESSION_DEMO_EMAIL_PATTERN = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/gi;
+const SESSION_DEMO_ANONYMOUS_EMAIL = "anonymous@builder.io";
 let inlineReplayFallbackWarned = false;
 
 function replayError(message: string, statusCode: number): Error {
@@ -318,20 +319,12 @@ function demoBuilderSessionCondition() {
 }
 
 class SessionDemoAnonymizer {
-  private readonly aliases = new Map<string, string>();
-
   aliasFor(value: unknown): string | null {
     const raw = replayString(value);
     if (!raw || raw.match(SESSION_DEMO_EMAIL_PATTERN)?.[0] !== raw) {
       return null;
     }
-    const email = raw.toLowerCase();
-    let alias = this.aliases.get(email);
-    if (!alias) {
-      alias = `anonymized-${this.aliases.size + 1}@builder.io`;
-      this.aliases.set(email, alias);
-    }
-    return alias;
+    return SESSION_DEMO_ANONYMOUS_EMAIL;
   }
 
   summarize(row: any, role?: SessionReplayAccessRole): SessionRecordingSummary {

package/corpus/templates/analytics/server/plugins/agent-chat.ts

@@ -10,12 +10,15 @@ import {
   applyAnalyticsPlanModePolicy,
   INITIAL_TOOL_NAMES,
 } from "../lib/agent-chat-plan-mode";
+import { ANALYTICS_CONNECTOR_CATALOG } from "../lib/analytics-connector-catalog";
 import {
   failedDataQueryAttemptMessage,
+  GENERIC_NO_DATA_FALLBACK_MESSAGE,
   hasExplicitPartialDisclosure,
   hasFailedCorpusWorkflowEvidence,
   hasDataQueryAttempt,
   hasIncompleteDataEvidence,
+  isGenericNoDataFallback,
   isSafeNoDataAnalyticsResponse,
   hasOverstatedCoverageConfidenceClaim,
   looksLikeCoverageSensitiveAnalyticsRequest,
@@ -24,16 +27,34 @@ import {
   needsCorpusWorkflowForCoverageSensitiveRequest,
   needsSourceRecordBodyWorkflowForCoverageSensitiveRequest,
 } from "../lib/real-data-actions";
-const ANALYTICS_BACKGROUND_RUN_SOFT_TIMEOUT_MS = 13 * 60_000;
-
 export const SIMPLE_TIME_BOUNDED_METRIC_FAST_PATH_GUIDANCE =
   "SIMPLE TIME-BOUNDED METRIC FAST PATH — When the data dictionary or a known canonical source identifies the metric, run one bounded aggregate. Once it returns a valid result, answer the explicit question immediately with the source, time window, row count, and only necessary caveats. Do not schema-discover, retry, enrich, cross-check, or add breakdowns after that successful result unless the query failed or the result conflicts with the known metric definition. This does not waive the real-data requirement: never answer from a guess, stale value, or unverified result. ";
 
+export const ANALYTICS_OBSERVABILITY_INCIDENT_GUIDANCE =
+  "OBSERVABILITY INCIDENT WORKFLOW — For a named user's session or error question, resolve the user's email from context, then use list-session-recordings with userId and hasErrors=true over a bounded recent window. Use list-error-issues with userId or sessionRecordingId to identify the grouped issue, then get-error-issue for stack, breadcrumbs, occurrences, and linked recordings. When the timeline, page navigation, console diagnostics, failed network requests, or clicks are needed, use create-session-replay-agent-link and follow its bounded diagnostics/context APIs. Prefer these first-party actions over generic SQL; use query-agent-native-analytics only to correlate first-party events. Report the matching evidence and do not claim a root cause without a corroborating error or replay signal. ";
+
+export const NON_ANALYTICS_REQUEST_GUIDANCE =
+  "NON-ANALYTICS REQUESTS — If the user is not asking for a live metric, source record, or derived analytics claim, answer normally in chat. Greetings, general-knowledge questions, math, writing, coding, and conceptual questions do not need a data-source call. Do not use the no-grounded-data fallback for those requests. ";
+
+// Deterministic backstop for the soft NON_ANALYTICS_REQUEST_GUIDANCE prompt
+// above: if a model still parrots the canned no-grounded-data fallback on a
+// non-analytics turn, retry once with this synthetic user message instead of
+// letting the canned sentence reach the user. Wrapped in an injected-context
+// tag (registered in INJECTED_CONTEXT_BLOCKS) so `looksLikeAnalyticsDataRequest`
+// never classifies the guard's own retry turn as a data request and loops.
+export const NON_ANALYTICS_FALLBACK_RETRY_MESSAGE =
+  "<non-analytics-retry>\nThe user's latest message is ordinary conversation. Reply to it directly and naturally. Never answer it with the no-grounded-data disclaimer.\n</non-analytics-retry>";
+
+export const NON_ANALYTICS_FALLBACK_FINAL_MESSAGE =
+  "I got stuck generating a reply to that message. Please try again or rephrase it.";
+
 export function analyticsSourceGuidanceOpening(): string {
   return (
     "<data-source-guidance>\n" +
     "Apply real-data requirements only when presenting analytics results, source records, or derived metrics. Do not call data-source tools for workflow migration, recurring-job setup, UI/code fixes, settings help, conceptual planning, or other non-data tasks unless the user explicitly asks for data. " +
+    NON_ANALYTICS_REQUEST_GUIDANCE +
     SIMPLE_TIME_BOUNDED_METRIC_FAST_PATH_GUIDANCE +
+    ANALYTICS_OBSERVABILITY_INCIDENT_GUIDANCE +
     "SURFACE DIFFERENTIATION — You are the analytics assistant for definitions, deep-dive analysis, and action. For questions about what a metric, model, or table means, use the Data Dictionary and configured schema tools first. For trends, comparisons, anomalies, current data, or anything that requires querying live data, answer directly in chat with the relevant provider query, dashboard analysis, and inline charts when useful. "
   );
 }
@@ -124,7 +145,20 @@ export function realDataFinalGuard(
     return null;
   }
   const userText = latestUserText(context.messages ?? []);
-  if (!looksLikeAnalyticsDataRequest(userText)) return null;
+  if (!looksLikeAnalyticsDataRequest(userText)) {
+    // Deterministic backstop: the soft NON_ANALYTICS_REQUEST_GUIDANCE prompt
+    // sentence is not always enough, and a model occasionally parrots the
+    // canned no-grounded-data fallback even for ordinary conversation. Catch
+    // that case here instead of letting it reach the user.
+    if (isGenericNoDataFallback(context.text)) {
+      return {
+        retryMessage: NON_ANALYTICS_FALLBACK_RETRY_MESSAGE,
+        fallbackMessage: NON_ANALYTICS_FALLBACK_FINAL_MESSAGE,
+        maxRetries: 2,
+      };
+    }
+    return null;
+  }
   const incompleteEvidence = hasIncompleteDataEvidence(context.toolResults);
   if (
     hasFailedCorpusWorkflowEvidence(context.toolResults) &&
@@ -200,7 +234,7 @@ export function realDataFinalGuard(
       " If the right response is a clarification, plan, or explicit unavailable/credentials-missing message with no metrics or source-record claims, finalize that directly instead.",
     fallbackMessage: configuredSources.length
       ? `I found connected data sources (${configuredSources.join(", ")}), but the model still did not run a real source query. Please retry the request; you do not need to reconnect those sources.`
-      : "I can't provide a grounded analytics result yet because no real data-source query ran successfully. Tell me which source to use or connect the missing source, and I'll run it before giving numbers or source-record conclusions.",
+      : GENERIC_NO_DATA_FALLBACK_MESSAGE,
     // Some models use separate turns for status, schema discovery, and the
     // actual query. One corrective turn was enough for Sonnet but caused Luna
     // to hit the fallback before it reached the query.
@@ -223,8 +257,7 @@ export default createAgentChatPlugin({
   // Operators deploying to trusted internal environments can set
   // AGENT_PROD_CODE_EXECUTION=trusted to also enable bash/read/edit/write.
   codeExecution: { production: "sandboxed" },
-  durableBackgroundRuns: true,
-  runSoftTimeoutMs: ANALYTICS_BACKGROUND_RUN_SOFT_TIMEOUT_MS,
+  connectorCatalog: [...ANALYTICS_CONNECTOR_CATALOG],
   resolveOrgId: async (event) => {
     const ctx = await getOrgContext(event);
     return ctx.orgId;

package/corpus/templates/assets/app/global.css

@@ -257,7 +257,7 @@
   [data-agent-empty-state="centered"]
   .agent-composer-area {
   width: 100%;
-  max-width: min(570px, 90%);
+  max-width: min(684px, 90%);
   padding: 0;
 }
 

package/corpus/templates/brain/app/global.css

@@ -135,7 +135,7 @@
 .brain-chat-panel [data-agent-empty-state="centered"] .brain-chat-intro {
   display: grid;
   width: 100%;
-  max-width: min(570px, 90%);
+  max-width: min(684px, 90%);
   gap: 0.5rem;
   margin: 0 auto 1rem;
   text-align: center;
@@ -165,7 +165,7 @@
 
 .brain-chat-panel [data-agent-empty-state="centered"] .agent-composer-area {
   width: 100%;
-  max-width: min(570px, 90%);
+  max-width: min(684px, 90%);
   padding: 0;
 }
 

package/corpus/templates/brain/changelog/2026-07-12-fix-long-response-progress.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-12
+---
+
+Long AI responses now stay visibly in progress and automatically follow new output until you scroll away.

package/corpus/templates/forms/app/components/CloudUpgrade.tsx

@@ -168,7 +168,7 @@ export function CloudUpgrade({
               key={p.id}
               onClick={() => setSelectedProvider(p.id)}
               className={cn(
-                "flex flex-col items-start rounded-lg border px-3 py-2.5 text-left min-h-[44px]",
+                "flex flex-col items-start rounded-lg border px-3 py-2.5 text-left min-h-[44px] transition-[border-color,background-color,scale] duration-150 ease-out active:scale-[0.96] motion-reduce:active:scale-100",
                 selectedProvider === p.id
                   ? "border-primary bg-primary/5"
                   : "border-border hover:border-primary/30",

package/corpus/templates/forms/app/components/ThemeToggle.tsx

@@ -22,13 +22,29 @@ export function ThemeToggle({ className }: { className?: string }) {
           variant="ghost"
           size="icon"
           onClick={() => setTheme(isDark ? "light" : "dark")}
-          className={cn("text-muted-foreground", className)}
-        >
-          {isDark ? (
-            <IconSun className="h-4 w-4" />
-          ) : (
-            <IconMoon className="h-4 w-4" />
+          className={cn(
+            "relative text-muted-foreground before:absolute before:-inset-1.5",
+            className,
           )}
+        >
+          <span className="relative inline-flex h-4 w-4 items-center justify-center">
+            <IconSun
+              className={cn(
+                "absolute inset-0 h-4 w-4 transition-[opacity,filter,scale] duration-200 ease-[cubic-bezier(0.2,0,0,1)]",
+                isDark
+                  ? "scale-100 opacity-100 blur-none"
+                  : "scale-[0.25] opacity-0 blur-[4px]",
+              )}
+            />
+            <IconMoon
+              className={cn(
+                "absolute inset-0 h-4 w-4 transition-[opacity,filter,scale] duration-200 ease-[cubic-bezier(0.2,0,0,1)]",
+                isDark
+                  ? "scale-[0.25] opacity-0 blur-[4px]"
+                  : "scale-100 opacity-100 blur-none",
+              )}
+            />
+          </span>
         </Button>
       </TooltipTrigger>
       <TooltipContent>{t("root.toggleTheme")}</TooltipContent>

package/corpus/templates/forms/app/components/builder/FieldPropertiesPanel.tsx

@@ -70,7 +70,7 @@ export function FieldPropertiesPanel({
         <Button
           variant="ghost"
           size="sm"
-          className="text-destructive h-7 px-2 text-xs"
+          className="h-10 px-3 text-xs text-destructive active:scale-[0.96]"
           onClick={onDelete}
         >
           {t("common.delete")}
@@ -181,13 +181,13 @@ export function FieldPropertiesPanel({
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-7 w-7 p-0"
+                    className="relative h-10 w-10 shrink-0 p-0 transition-transform duration-150 ease-out before:absolute before:-inset-1 active:scale-[0.96] motion-reduce:active:scale-100 sm:h-7 sm:w-7"
                     onClick={() => removeOption(i)}
                     aria-label={t("fieldProperties.removeOption", {
                       option: opt,
                     })}
                   >
-                    <IconX className="h-3 w-3" />
+                    <IconX className="h-3.5 w-3.5 translate-y-px" />
                   </Button>
                 </div>
               ))}
@@ -202,11 +202,11 @@ export function FieldPropertiesPanel({
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-7 w-7 p-0"
+                  className="relative h-10 w-10 shrink-0 p-0 transition-transform duration-150 ease-out before:absolute before:-inset-1 active:scale-[0.96] motion-reduce:active:scale-100 sm:h-7 sm:w-7"
                   onClick={addOption}
                   aria-label={t("fieldProperties.addOption")}
                 >
-                  <IconPlus className="h-3 w-3" />
+                  <IconPlus className="h-3.5 w-3.5 translate-y-px" />
                 </Button>
               </div>
             </div>

package/corpus/templates/forms/app/components/builder/FieldRenderer.tsx

@@ -204,14 +204,14 @@ export function FieldRenderer({
               key={star}
               type="button"
               onClick={() => !disabled && handleChange(star)}
-              className="cursor-pointer p-2 sm:p-1.5 disabled:cursor-not-allowed"
+              className="flex size-11 cursor-pointer items-center justify-center rounded-md p-2 transition-[color,transform] duration-150 ease-out active:scale-[0.96] motion-reduce:active:scale-100 disabled:cursor-not-allowed sm:size-10 sm:p-1.5"
               disabled={disabled}
               aria-label={`${star} star${star !== 1 ? "s" : ""}`}
             >
               {(value as number) >= star ? (
-                <IconStarFilled className="h-7 w-7 sm:h-6 sm:w-6 text-amber-400" />
+                <IconStarFilled className="h-7 w-7 text-amber-400 sm:h-6 sm:w-6" />
               ) : (
-                <IconStar className="h-7 w-7 sm:h-6 sm:w-6 text-muted-foreground/30" />
+                <IconStar className="h-7 w-7 text-muted-foreground/30 sm:h-6 sm:w-6" />
               )}
             </button>
           ))}

package/corpus/templates/forms/app/components/layout/Sidebar.tsx

@@ -131,7 +131,7 @@ export function Sidebar() {
 
   const newFormButton = (
     <PopoverTrigger asChild>
-      <button className="flex min-h-[44px] w-full cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground">
+      <button className="forms-sidebar-nav-item flex min-h-[44px] w-full cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-muted-foreground active:scale-[0.96] transition-[background-color,box-shadow,color,transform] hover:bg-accent/50 hover:text-foreground">
         <IconPlus className="h-4 w-4 shrink-0" />
         <span>{t("sidebar.newForm")}</span>
       </button>
@@ -143,7 +143,7 @@ export function Sidebar() {
       side="right"
       align="start"
       sideOffset={8}
-      className="w-80 p-0 rounded-xl"
+      className="forms-new-form-popover w-80 rounded-2xl p-0"
     >
       <div className="p-4 pb-3">
         <p className="text-sm font-semibold">{t("sidebar.newForm")}</p>
@@ -168,7 +168,7 @@ export function Sidebar() {
           <Button
             variant="link"
             size="sm"
-            className="h-auto p-0 text-xs text-muted-foreground"
+            className="min-h-10 px-2 text-xs text-muted-foreground active:scale-[0.96] transition-[background-color,color,transform]"
             onClick={handleSkip}
           >
             {t("sidebar.skipPrompt")}
@@ -180,7 +180,7 @@ export function Sidebar() {
           <Button
             variant="secondary"
             size="icon"
-            className="h-7 w-7"
+            className="size-10 rounded-lg transition-[background-color,box-shadow,transform] active:scale-[0.96] motion-reduce:active:scale-100"
             onClick={handleSubmitPrompt}
             disabled={!prompt.trim() || promptRun.isActivePrompt(prompt)}
             aria-label={t("sidebar.sendPrompt")}
@@ -200,7 +200,7 @@ export function Sidebar() {
             <button
               type="button"
               onClick={() => setCollapsed(false)}
-              className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground/55 transition-colors hover:bg-accent/50 hover:text-muted-foreground"
+              className="forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg text-muted-foreground/55 transition-[background-color,box-shadow,color,transform] duration-150 ease-out hover:bg-accent/50 hover:text-muted-foreground active:scale-[0.96] motion-reduce:active:scale-100"
               aria-label={t("sidebar.expandSidebar")}
             >
               <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
@@ -219,7 +219,7 @@ export function Sidebar() {
                 onClick={navigateHomeChat}
                 aria-label={t("navigation.askForms")}
                 className={cn(
-                  "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+                  "forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg active:scale-[0.96] transition-[background-color,box-shadow,color,transform]",
                   location.pathname === "/ask" || location.pathname === "/"
                     ? "bg-accent text-accent-foreground"
                     : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -239,7 +239,7 @@ export function Sidebar() {
                 to="/forms"
                 aria-label={t("navigation.allForms")}
                 className={cn(
-                  "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+                  "forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg active:scale-[0.96] transition-[background-color,box-shadow,color,transform]",
                   location.pathname.startsWith("/forms")
                     ? "bg-accent text-accent-foreground"
                     : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -260,7 +260,7 @@ export function Sidebar() {
                   <button
                     type="button"
                     aria-label={t("sidebar.newForm")}
-                    className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+                    className="forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg text-muted-foreground transition-[background-color,box-shadow,color,transform] duration-150 ease-out hover:bg-accent/50 hover:text-foreground active:scale-[0.96] motion-reduce:active:scale-100"
                   >
                     <IconPlus className="h-4 w-4" />
                   </button>
@@ -279,7 +279,7 @@ export function Sidebar() {
                 to="/settings"
                 aria-label={t("navigation.settings")}
                 className={cn(
-                  "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+                  "forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg active:scale-[0.96] transition-[background-color,box-shadow,color,transform]",
                   location.pathname === "/settings"
                     ? "bg-accent text-accent-foreground"
                     : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -310,7 +310,7 @@ export function Sidebar() {
               <button
                 type="button"
                 aria-label={t("sidebar.openAskFullScreen")}
-                className="flex min-w-0 items-center gap-2 rounded-md text-base font-semibold tracking-tight text-muted-foreground/80 transition-colors hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="flex min-h-10 min-w-0 items-center gap-2 rounded-lg px-2 text-base font-semibold tracking-tight text-muted-foreground/80 active:scale-[0.96] transition-[color,transform] hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 onClick={toggleLogoView}
               >
                 <img
@@ -337,7 +337,7 @@ export function Sidebar() {
           <Button
             variant="ghost"
             size="icon"
-            className="h-8 w-8"
+            className="size-10 transition-[background-color,box-shadow,transform] active:scale-[0.96] motion-reduce:active:scale-100"
             onClick={() => setMobileOpen(false)}
           >
             <IconX size={18} />
@@ -349,7 +349,7 @@ export function Sidebar() {
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-8 w-8 text-muted-foreground/55 hover:bg-accent/50 hover:text-muted-foreground"
+                className="size-10 text-muted-foreground/55 transition-[background-color,box-shadow,color,transform] hover:bg-accent/50 hover:text-muted-foreground active:scale-[0.96] motion-reduce:active:scale-100"
                 onClick={() => setCollapsed(true)}
                 aria-label={t("sidebar.collapseSidebar")}
               >
@@ -374,7 +374,7 @@ export function Sidebar() {
             to="/ask"
             onClick={navigateHomeChat}
             className={cn(
-              "flex min-h-[44px] w-full min-w-0 max-w-full items-center gap-2.5 overflow-hidden rounded-md px-3 py-2 text-sm transition-colors hover:text-primary",
+              "forms-sidebar-nav-item flex min-h-[44px] w-full min-w-0 max-w-full items-center gap-2.5 overflow-hidden rounded-lg px-3 py-2 text-sm active:scale-[0.96] transition-[background-color,box-shadow,color,transform] hover:text-primary",
               location.pathname === "/ask" || location.pathname === "/"
                 ? "bg-accent text-accent-foreground"
                 : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -390,7 +390,7 @@ export function Sidebar() {
             to="/forms"
             onClick={() => isMobile && setMobileOpen(false)}
             className={cn(
-              "flex min-h-[44px] w-full min-w-0 max-w-full items-center gap-2.5 overflow-hidden rounded-md px-3 py-2 text-sm transition-colors hover:text-primary",
+              "forms-sidebar-nav-item flex min-h-[44px] w-full min-w-0 max-w-full items-center gap-2.5 overflow-hidden rounded-lg px-3 py-2 text-sm active:scale-[0.96] transition-[background-color,box-shadow,color,transform] hover:text-primary",
               location.pathname.startsWith("/forms")
                 ? "bg-accent text-accent-foreground"
                 : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -415,7 +415,7 @@ export function Sidebar() {
           to="/settings"
           onClick={() => isMobile && setMobileOpen(false)}
           className={cn(
-            "flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm min-h-[44px]",
+            "forms-sidebar-nav-item flex min-h-[44px] w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm active:scale-[0.96] transition-[background-color,box-shadow,color,transform]",
             location.pathname === "/settings"
               ? "bg-accent text-accent-foreground"
               : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -449,7 +449,7 @@ export function Sidebar() {
         <Button
           variant="ghost"
           size="icon"
-          className="fixed top-2 start-2 z-40 h-10 w-10 md:hidden"
+          className="fixed top-2 start-2 z-40 size-10 active:scale-[0.96] transition-[background-color,box-shadow,transform] md:hidden"
           onClick={() => setMobileOpen(true)}
           aria-label={t("sidebar.openSidebar")}
         >