@agent-native/core 0.84.28 → 0.84.30

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

@@ -14,6 +14,8 @@ import {
   IconReportAnalytics,
   IconSearch,
   IconArchive,
+  IconPin,
+  IconPlus,
   IconBuilding,
   IconLock,
   IconLink,
@@ -38,11 +40,13 @@ import {
   useRef,
   useMemo,
   Fragment,
+  type FormEvent,
 } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
 import { getIdToken } from "@/lib/auth";
+import { ANALYTICS_CHAT_STORAGE_KEY } from "@/lib/chat-handoff";
 import { cn, shortcutModifierLabel } from "@/lib/utils";
 import {
   dashboards,
@@ -70,9 +74,11 @@ import {
   callAction,
   appPath,
   navigateWithAgentChatViewTransition,
+  useChatThreads,
   useActionMutation,
   useChangeVersions,
   useT,
+  type ChatThreadSummary,
 } from "@agent-native/core/client";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import { OrgSwitcher } from "@agent-native/core/client/org";
@@ -94,6 +100,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
 import {
   Popover,
   PopoverTrigger,
@@ -1175,6 +1182,296 @@ async function fetchAnalysisDetailForPrefetch(id: string): Promise<unknown> {
   }
 }
 
+const ANALYTICS_ACTIVE_THREAD_KEY = `agent-chat-active-thread:${ANALYTICS_CHAT_STORAGE_KEY}`;
+
+function formatThreadAge(updatedAt: number) {
+  const diffMs = Math.max(0, Date.now() - updatedAt);
+  const minutes = Math.floor(diffMs / 60_000);
+  if (minutes < 1) return "now";
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d`;
+  return new Date(updatedAt).toLocaleDateString([], {
+    month: "short",
+    day: "numeric",
+  });
+}
+
+function threadTitle(thread: ChatThreadSummary, untitledLabel: string) {
+  return thread.title || thread.preview || untitledLabel;
+}
+
+function threadUpdatedAt(thread: ChatThreadSummary) {
+  return Number.isFinite(thread.updatedAt)
+    ? thread.updatedAt
+    : Number.isFinite(thread.createdAt)
+      ? thread.createdAt
+      : 0;
+}
+
+function compareThreads(a: ChatThreadSummary, b: ChatThreadSummary) {
+  const aPinned = a.pinnedAt ?? 0;
+  const bPinned = b.pinnedAt ?? 0;
+  if (aPinned || bPinned) return bPinned - aPinned;
+  return threadUpdatedAt(b) - threadUpdatedAt(a);
+}
+
+function persistedAnalyticsThreadId() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage.getItem(ANALYTICS_ACTIVE_THREAD_KEY);
+  } catch {
+    return null;
+  }
+}
+
+function AnalyticsChatsSection() {
+  const navigate = useNavigate();
+  const t = useT();
+  const {
+    threads,
+    activeThreadId,
+    createThread,
+    switchThread,
+    pinThread,
+    archiveThread,
+    renameThread,
+    refreshThreads,
+  } = useChatThreads(undefined, ANALYTICS_CHAT_STORAGE_KEY, undefined, {
+    autoCreate: false,
+    restoreActiveThread: false,
+  });
+  const [renamingThreadId, setRenamingThreadId] = useState<string | null>(null);
+  const [renameDraft, setRenameDraft] = useState("");
+  const renameInputRef = useRef<HTMLInputElement | null>(null);
+  const committingRenameRef = useRef(false);
+
+  const visibleThreads = useMemo(
+    () =>
+      threads
+        .filter((thread) => thread.messageCount > 0 && !thread.archivedAt)
+        .sort(compareThreads)
+        .slice(0, SIDEBAR_PREVIEW_COUNT),
+    [threads],
+  );
+
+  useEffect(() => {
+    const refresh = () => refreshThreads();
+    const handleRunning = (event: Event) => {
+      const detail = (event as CustomEvent).detail as
+        | { isRunning?: unknown }
+        | undefined;
+      if (typeof detail?.isRunning === "boolean") refreshThreads();
+    };
+
+    window.addEventListener("agent-chat:threads-updated", refresh);
+    window.addEventListener("agentNative.chatRunning", handleRunning);
+    window.addEventListener("focus", refresh);
+    return () => {
+      window.removeEventListener("agent-chat:threads-updated", refresh);
+      window.removeEventListener("agentNative.chatRunning", handleRunning);
+      window.removeEventListener("focus", refresh);
+    };
+  }, [refreshThreads]);
+
+  useEffect(() => {
+    if (!renamingThreadId) return;
+    requestAnimationFrame(() => {
+      renameInputRef.current?.focus();
+      renameInputRef.current?.select();
+    });
+  }, [renamingThreadId]);
+
+  function openThread(threadId: string, options?: { isNew?: boolean }) {
+    switchThread(threadId);
+    navigateWithAgentChatViewTransition(navigate, "/ask");
+    window.requestAnimationFrame(() => {
+      window.dispatchEvent(
+        new CustomEvent("agent-chat:open-thread", {
+          detail: { threadId, newThread: options?.isNew === true },
+        }),
+      );
+    });
+  }
+
+  async function handleNewChat() {
+    const threadId = await createThread();
+    if (threadId) openThread(threadId, { isNew: true });
+  }
+
+  async function handleArchiveThread(threadId: string) {
+    const wasActive =
+      threadId === activeThreadId || threadId === persistedAnalyticsThreadId();
+    const archived = await archiveThread(threadId);
+    if (!archived) {
+      toast.error(t("chat.archiveFailed"));
+      return;
+    }
+    if (wasActive) {
+      await handleNewChat();
+    }
+  }
+
+  function startRenameThread(thread: ChatThreadSummary) {
+    committingRenameRef.current = false;
+    setRenameDraft(threadTitle(thread, t("chat.untitledChat")));
+    setRenamingThreadId(thread.id);
+  }
+
+  function cancelRenameThread() {
+    committingRenameRef.current = true;
+    setRenamingThreadId(null);
+    setRenameDraft("");
+  }
+
+  async function commitRenameThread() {
+    if (committingRenameRef.current) return;
+    const threadId = renamingThreadId;
+    const title = renameDraft.trim();
+    if (!threadId) return;
+    committingRenameRef.current = true;
+    setRenamingThreadId(null);
+    setRenameDraft("");
+    if (title) {
+      const renamed = await renameThread(threadId, title);
+      if (!renamed) toast.error(t("chat.renameFailed"));
+    }
+    committingRenameRef.current = false;
+  }
+
+  function handleRenameSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    void commitRenameThread();
+  }
+
+  return (
+    <div className="ms-4 min-w-0 space-y-0.5">
+      <p className="min-w-0 truncate px-3 pb-0.5 pt-1 text-[11px] font-medium text-muted-foreground/70">
+        {t("chat.recentChats")}
+      </p>
+      {visibleThreads.map((thread) => {
+        const title = threadTitle(thread, t("chat.untitledChat"));
+        const isActive =
+          thread.id === activeThreadId ||
+          thread.id === persistedAnalyticsThreadId();
+        const isRenaming = thread.id === renamingThreadId;
+        return (
+          <div
+            key={thread.id}
+            className={cn(
+              "group/item relative flex min-w-0 items-center rounded-lg transition-colors",
+              isActive
+                ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-primary",
+            )}
+          >
+            {isRenaming ? (
+              <form
+                onSubmit={handleRenameSubmit}
+                className="flex min-w-0 flex-1 items-center px-1"
+              >
+                <Input
+                  ref={renameInputRef}
+                  value={renameDraft}
+                  onChange={(event) => setRenameDraft(event.target.value)}
+                  onBlur={() => void commitRenameThread()}
+                  onKeyDown={(event) => {
+                    if (event.key === "Escape") {
+                      event.preventDefault();
+                      cancelRenameThread();
+                    }
+                  }}
+                  maxLength={160}
+                  aria-label={t("chat.renameThread", { title })}
+                  className="h-6 min-w-0 rounded-sm border-sidebar-border bg-background px-1.5 text-xs"
+                />
+              </form>
+            ) : (
+              <>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={() => openThread(thread.id)}
+                      className="min-w-0 flex-1 px-2 py-1.5 pe-12 text-start text-xs outline-none transition-[padding] focus-visible:ring-2 focus-visible:ring-ring md:pe-2 md:group-hover/item:pe-12 md:group-focus-within/item:pe-12"
+                    >
+                      <span className="block truncate">{title}</span>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">{title}</TooltipContent>
+                </Tooltip>
+                <div className="pointer-events-none absolute end-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5">
+                  <span className="pointer-events-none pe-1 text-[11px] text-muted-foreground/60 transition-opacity group-hover/item:opacity-0 group-focus-within/item:opacity-0">
+                    {isActive ? "" : formatThreadAge(threadUpdatedAt(thread))}
+                  </span>
+                  <DropdownMenu>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <DropdownMenuTrigger asChild>
+                          <button
+                            type="button"
+                            aria-label={t("chat.optionsFor", { title })}
+                            className="pointer-events-auto rounded p-0.5 text-muted-foreground/50 opacity-0 transition-all hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/item:opacity-100 group-focus-within/item:opacity-100 data-[state=open]:opacity-100 data-[state=open]:text-foreground"
+                          >
+                            <IconDots className="h-3 w-3" />
+                          </button>
+                        </DropdownMenuTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent side="right">
+                        {t("chat.optionsFor", { title })}
+                      </TooltipContent>
+                    </Tooltip>
+                    <DropdownMenuContent
+                      side="right"
+                      align="start"
+                      className="w-44"
+                    >
+                      <DropdownMenuItem
+                        onSelect={() => startRenameThread(thread)}
+                      >
+                        <IconPencil className="me-2 h-3.5 w-3.5" />
+                        {t("chat.renameChat")}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onSelect={() =>
+                          void pinThread(thread.id, !thread.pinnedAt)
+                        }
+                      >
+                        <IconPin className="me-2 h-3.5 w-3.5" />
+                        {thread.pinnedAt
+                          ? t("chat.unpinChat")
+                          : t("chat.pinChat")}
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        onSelect={() => void handleArchiveThread(thread.id)}
+                        className="text-destructive focus:text-destructive"
+                      >
+                        <IconArchive className="me-2 h-3.5 w-3.5" />
+                        {t("chat.archiveChat")}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </>
+            )}
+          </div>
+        );
+      })}
+      <button
+        type="button"
+        onClick={() => void handleNewChat()}
+        className="flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-xs text-muted-foreground/60 hover:bg-sidebar-accent/50 hover:text-primary"
+      >
+        <IconPlus className="h-3 w-3" />
+        {t("chat.newChat")}
+      </button>
+    </div>
+  );
+}
+
 function getQuerySnapshots<T>(queryClient: QueryClient, queryKey: QueryKey) {
   return queryClient.getQueriesData<T>({ queryKey });
 }
@@ -2102,30 +2399,33 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
           <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden py-2">
             <nav className="grid min-w-0 items-start px-2 text-sm font-medium lg:px-4 space-y-1">
               {/* Ask link */}
-              <Link
-                to="/ask"
-                onClick={(event) => {
-                  if (
-                    location.pathname !== "/ask" &&
-                    !event.metaKey &&
-                    !event.ctrlKey &&
-                    !event.shiftKey &&
-                    !event.altKey
-                  ) {
-                    event.preventDefault();
-                    navigateWithAgentChatViewTransition(navigate, "/ask");
-                  }
-                }}
-                className={cn(
-                  "flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary",
-                  location.pathname === "/ask"
-                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                    : "text-muted-foreground hover:bg-sidebar-accent/50",
-                )}
-              >
-                <IconMessageCircle className="h-4 w-4" />
-                {t("navigation.ask")}
-              </Link>
+              <div className="min-w-0 space-y-1">
+                <Link
+                  to="/ask"
+                  onClick={(event) => {
+                    if (
+                      location.pathname !== "/ask" &&
+                      !event.metaKey &&
+                      !event.ctrlKey &&
+                      !event.shiftKey &&
+                      !event.altKey
+                    ) {
+                      event.preventDefault();
+                      navigateWithAgentChatViewTransition(navigate, "/ask");
+                    }
+                  }}
+                  className={cn(
+                    "flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary",
+                    location.pathname === "/ask"
+                      ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                      : "text-muted-foreground hover:bg-sidebar-accent/50",
+                  )}
+                >
+                  <IconMessageCircle className="h-4 w-4" />
+                  {t("navigation.ask")}
+                </Link>
+                {location.pathname === "/ask" && <AnalyticsChatsSection />}
+              </div>
 
               {/* Sessions link */}
               <Link

package/corpus/templates/analytics/app/i18n/zh-TW.ts

@@ -150,6 +150,17 @@ const messages = {
   },
   chat: {
     emptyState: "讓我分析儀表板、比較趨勢或深入檢視資料...",
+    recentChats: "最近聊天",
+    newChat: "新聊天",
+    untitledChat: "未命名聊天",
+    renameChat: "重新命名聊天",
+    renameThread: "重新命名 {{title}}",
+    renameFailed: "無法重新命名聊天",
+    optionsFor: "{{title}} 的選項",
+    pinChat: "釘選聊天",
+    unpinChat: "取消釘選聊天",
+    archiveChat: "封存聊天",
+    archiveFailed: "無法封存聊天",
     suggestionArrGrowth: "本季度 ARR 增長的驅動因素是什麼？",
     suggestionChurn: "顯示過去 6 個月的流失趨勢",
     suggestionAnomalies: "分析 HubSpot 銷售儀表板的異常",

package/corpus/templates/analytics/app/i18n-data.ts

@@ -187,6 +187,17 @@ const enUS = {
   chat: {
     emptyState:
       "Ask me to analyze a dashboard, compare trends, or dig into data...",
+    recentChats: "Recent chats",
+    newChat: "New chat",
+    untitledChat: "Untitled chat",
+    renameChat: "Rename chat",
+    renameThread: "Rename {{title}}",
+    renameFailed: "Couldn't rename chat",
+    optionsFor: "Options for {{title}}",
+    pinChat: "Pin chat",
+    unpinChat: "Unpin chat",
+    archiveChat: "Archive chat",
+    archiveFailed: "Couldn't archive chat",
     suggestionArrGrowth: "What's driving ARR growth this quarter?",
     suggestionChurn: "Show me churn trends over the last 6 months",
     suggestionAnomalies: "Analyze the HubSpot Sales dashboard for anomalies",
@@ -3562,6 +3573,17 @@ export const messagesByLocale = {
     },
     chat: {
       emptyState: "让我分析仪表板、比较趋势或深入查看数据...",
+      recentChats: "最近聊天",
+      newChat: "新聊天",
+      untitledChat: "未命名聊天",
+      renameChat: "重命名聊天",
+      renameThread: "重命名 {{title}}",
+      renameFailed: "无法重命名聊天",
+      optionsFor: "{{title}} 的选项",
+      pinChat: "置顶聊天",
+      unpinChat: "取消置顶聊天",
+      archiveChat: "归档聊天",
+      archiveFailed: "无法归档聊天",
       suggestionArrGrowth: "本季度 ARR 增长的驱动因素是什么？",
       suggestionChurn: "显示过去 6 个月的流失趋势",
       suggestionAnomalies: "分析 HubSpot 销售仪表板的异常",
@@ -3746,6 +3768,17 @@ export const messagesByLocale = {
     chat: {
       emptyState:
         "Pídeme que analice un panel, compare tendencias o investigue datos...",
+      recentChats: "Chats recientes",
+      newChat: "Nuevo chat",
+      untitledChat: "Chat sin título",
+      renameChat: "Cambiar nombre del chat",
+      renameThread: "Cambiar nombre de {{title}}",
+      renameFailed: "No se pudo cambiar el nombre del chat",
+      optionsFor: "Opciones para {{title}}",
+      pinChat: "Fijar chat",
+      unpinChat: "Desfijar chat",
+      archiveChat: "Archivar chat",
+      archiveFailed: "No se pudo archivar el chat",
       suggestionArrGrowth: "¿Qué impulsa el crecimiento de ARR este trimestre?",
       suggestionChurn: "Muéstrame la tendencia de bajas de los últimos 6 meses",
       suggestionAnomalies: "Analiza anomalías en el panel de ventas de HubSpot",
@@ -3931,6 +3964,17 @@ export const messagesByLocale = {
     chat: {
       emptyState:
         "Demandez-moi d'analyser un tableau de bord, de comparer des tendances ou d'explorer les données...",
+      recentChats: "Discussions récentes",
+      newChat: "Nouvelle discussion",
+      untitledChat: "Discussion sans titre",
+      renameChat: "Renommer la discussion",
+      renameThread: "Renommer {{title}}",
+      renameFailed: "Impossible de renommer la discussion",
+      optionsFor: "Options pour {{title}}",
+      pinChat: "Épingler la discussion",
+      unpinChat: "Désépingler la discussion",
+      archiveChat: "Archiver la discussion",
+      archiveFailed: "Impossible d'archiver la discussion",
       suggestionArrGrowth:
         "Qu'est-ce qui stimule la croissance de l'ARR ce trimestre ?",
       suggestionChurn: "Montre-moi les tendances de churn des 6 derniers mois",
@@ -4125,6 +4169,17 @@ export const messagesByLocale = {
     chat: {
       emptyState:
         "Bitte mich, ein Dashboard zu analysieren, Trends zu vergleichen oder Daten zu untersuchen...",
+      recentChats: "Neueste Chats",
+      newChat: "Neuer Chat",
+      untitledChat: "Unbenannter Chat",
+      renameChat: "Chat umbenennen",
+      renameThread: "{{title}} umbenennen",
+      renameFailed: "Chat konnte nicht umbenannt werden",
+      optionsFor: "Optionen für {{title}}",
+      pinChat: "Chat anheften",
+      unpinChat: "Chat lösen",
+      archiveChat: "Chat archivieren",
+      archiveFailed: "Chat konnte nicht archiviert werden",
       suggestionArrGrowth: "Was treibt das ARR-Wachstum in diesem Quartal?",
       suggestionChurn: "Zeige mir Churn-Trends der letzten 6 Monate",
       suggestionAnomalies: "Analysiere Anomalien im HubSpot-Sales-Dashboard",
@@ -4311,6 +4366,17 @@ export const messagesByLocale = {
     chat: {
       emptyState:
         "ダッシュボード分析、トレンド比較、データ調査を依頼できます...",
+      recentChats: "最近のチャット",
+      newChat: "新しいチャット",
+      untitledChat: "無題のチャット",
+      renameChat: "チャット名を変更",
+      renameThread: "{{title}} の名前を変更",
+      renameFailed: "チャット名を変更できませんでした",
+      optionsFor: "{{title}} のオプション",
+      pinChat: "チャットをピン留め",
+      unpinChat: "チャットのピン留めを解除",
+      archiveChat: "チャットをアーカイブ",
+      archiveFailed: "チャットをアーカイブできませんでした",
       suggestionArrGrowth: "今四半期の ARR 成長要因は？",
       suggestionChurn: "過去 6 か月の解約傾向を表示",
       suggestionAnomalies: "HubSpot Sales ダッシュボードの異常を分析",
@@ -4497,6 +4563,17 @@ export const messagesByLocale = {
     chat: {
       emptyState:
         "대시보드를 분석하거나 추세를 비교하거나 데이터를 파고들어 달라고 요청하세요...",
+      recentChats: "최근 채팅",
+      newChat: "새 채팅",
+      untitledChat: "제목 없는 채팅",
+      renameChat: "채팅 이름 바꾸기",
+      renameThread: "{{title}} 이름 바꾸기",
+      renameFailed: "채팅 이름을 바꾸지 못했습니다",
+      optionsFor: "{{title}} 옵션",
+      pinChat: "채팅 고정",
+      unpinChat: "채팅 고정 해제",
+      archiveChat: "채팅 보관",
+      archiveFailed: "채팅을 보관하지 못했습니다",
       suggestionArrGrowth: "이번 분기 ARR 성장을 이끄는 요인은?",
       suggestionChurn: "지난 6개월의 이탈 추세를 보여줘",
       suggestionAnomalies: "HubSpot Sales 대시보드의 이상 징후를 분석해줘",
@@ -4684,6 +4761,17 @@ export const messagesByLocale = {
     chat: {
       emptyState:
         "Peça para eu analisar um dashboard, comparar tendências ou investigar dados...",
+      recentChats: "Chats recentes",
+      newChat: "Novo chat",
+      untitledChat: "Chat sem título",
+      renameChat: "Renomear chat",
+      renameThread: "Renomear {{title}}",
+      renameFailed: "Não foi possível renomear o chat",
+      optionsFor: "Opções para {{title}}",
+      pinChat: "Fixar chat",
+      unpinChat: "Desafixar chat",
+      archiveChat: "Arquivar chat",
+      archiveFailed: "Não foi possível arquivar o chat",
       suggestionArrGrowth:
         "O que impulsiona o crescimento de ARR neste trimestre?",
       suggestionChurn: "Mostre tendências de churn dos últimos 6 meses",
@@ -4869,6 +4957,17 @@ export const messagesByLocale = {
     chat: {
       emptyState:
         "मुझसे डैशबोर्ड का विश्लेषण, ट्रेंड की तुलना या डेटा में गहराई से देखने को कहें...",
+      recentChats: "हाल की चैट",
+      newChat: "नई चैट",
+      untitledChat: "बिना शीर्षक वाली चैट",
+      renameChat: "चैट का नाम बदलें",
+      renameThread: "{{title}} का नाम बदलें",
+      renameFailed: "चैट का नाम नहीं बदला जा सका",
+      optionsFor: "{{title}} के विकल्प",
+      pinChat: "चैट पिन करें",
+      unpinChat: "चैट अनपिन करें",
+      archiveChat: "चैट आर्काइव करें",
+      archiveFailed: "चैट आर्काइव नहीं की जा सकी",
       suggestionArrGrowth: "इस तिमाही ARR वृद्धि को क्या चला रहा है?",
       suggestionChurn: "पिछले 6 महीनों के churn ट्रेंड दिखाएं",
       suggestionAnomalies: "HubSpot Sales डैशबोर्ड में anomalies का विश्लेषण करें",
@@ -5052,6 +5151,17 @@ export const messagesByLocale = {
     chat: {
       emptyState:
         "اطلب مني تحليل لوحة معلومات أو مقارنة الاتجاهات أو التعمق في البيانات...",
+      recentChats: "الدردشات الأخيرة",
+      newChat: "دردشة جديدة",
+      untitledChat: "دردشة بدون عنوان",
+      renameChat: "إعادة تسمية الدردشة",
+      renameThread: "إعادة تسمية {{title}}",
+      renameFailed: "تعذرت إعادة تسمية الدردشة",
+      optionsFor: "خيارات {{title}}",
+      pinChat: "تثبيت الدردشة",
+      unpinChat: "إلغاء تثبيت الدردشة",
+      archiveChat: "أرشفة الدردشة",
+      archiveFailed: "تعذرت أرشفة الدردشة",
       suggestionArrGrowth: "ما الذي يدفع نمو ARR هذا الربع؟",
       suggestionChurn: "اعرض اتجاهات فقدان العملاء خلال آخر 6 أشهر",
       suggestionAnomalies: "حلل الشذوذ في لوحة مبيعات HubSpot",

package/corpus/templates/design/app/pages/DesignEditor.tsx

@@ -67,7 +67,10 @@ import {
   type TweakSelections,
 } from "@shared/resolve-tweaks";
 import { utilityStem, widthToPrefix } from "@shared/responsive-classes";
-import { normalizeDesignSourceType } from "@shared/source-mode";
+import {
+  normalizeDesignSourceType,
+  type DesignSourceType,
+} from "@shared/source-mode";
 import {
   IconArrowLeft,
   IconArrowUpRight,
@@ -347,6 +350,28 @@ function getContentSignature(content: string): string {
   return `${content.length}:${hash.toString(36)}`;
 }
 
+export function getOverviewScreenRuntimeReplacementKey({
+  screenId,
+  updatedAt,
+  content,
+}: {
+  screenId: string;
+  updatedAt?: string | null;
+  content: string;
+}) {
+  return [screenId, updatedAt ?? "", getContentSignature(content)].join(":");
+}
+
+export function shouldUseOverviewRuntimeReplacement({
+  sourceType,
+  externalSnapshotHtml,
+}: {
+  sourceType?: DesignSourceType | null;
+  externalSnapshotHtml?: string | null;
+}) {
+  return sourceType === "inline" && !externalSnapshotHtml;
+}
+
 function dedupeStringIds(ids: string[]): string[] {
   return Array.from(new Set(ids.filter(Boolean)));
 }
@@ -17258,12 +17283,26 @@ ${serializedHtml}
                         const screenBridgeUrl = screen.bridgeUrl;
                         const screenSnapshot =
                           liveScreenSnapshotsById[screen.id]?.html;
+                        const screenContentSignature =
+                          getContentSignature(screenContent);
+                        const useRuntimeReplacement =
+                          shouldUseOverviewRuntimeReplacement({
+                            sourceType: screenSourceType,
+                            externalSnapshotHtml: screenSnapshot,
+                          });
+                        const runtimeReplacementKey = useRuntimeReplacement
+                          ? getOverviewScreenRuntimeReplacementKey({
+                              screenId: screen.id,
+                              updatedAt: screen.updatedAt,
+                              content: screenContent,
+                            })
+                          : undefined;
                         const screenContentKey = screenIsActive
                           ? [screen.id, contentRenderRevision].join(":")
                           : [
                               screen.id,
                               screen.updatedAt ?? "",
-                              getContentSignature(screenContent),
+                              screenContentSignature,
                               0,
                             ].join(":");
 
@@ -17271,6 +17310,10 @@ ${serializedHtml}
                           <DesignCanvas
                             content={screenContent}
                             contentKey={screenContentKey}
+                            runtimeReplacementContent={
+                              useRuntimeReplacement ? screenContent : undefined
+                            }
+                            runtimeReplacementKey={runtimeReplacementKey}
                             screenId={screen.id}
                             zoom={100}
                             deviceFrame="none"

package/corpus/templates/design/changelog/2026-07-01-design-previews-refresh-immediately-after-agent-screen-edits.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Design previews refresh immediately after agent screen edits.