Fix stale UI (#2027)

e2e-tests/supabase_branch.spec.ts

@@ -13,6 +13,8 @@ testSkipIfWindows("supabase branch selection works", async ({ po }) => {
   await po.page.getByTestId("token-bar-toggle").click();
   // The default branch has a small context.
   await expect(po.page.getByTestId("token-bar")).toContainText("6% of 128K");
+  // We hide the token bar so we re-open it later to refresh the token count.
+  await po.page.getByTestId("token-bar-toggle").click();
 
   await po.getTitleBarAppNameButton().click();
   await po.page.getByTestId("supabase-branch-select").click();
@@ -21,5 +23,6 @@ testSkipIfWindows("supabase branch selection works", async ({ po }) => {
   await po.clickBackButton();
   // The test branch has a large context (200k tokens) so it'll hit the 100% limit.
   // This is to make sure we're connecting to the right supabase project for the branch.
+  await po.page.getByTestId("token-bar-toggle").click();
   await expect(po.page.getByTestId("token-bar")).toContainText("100% of 128K");
 });

src/components/AppUpgrades.tsx

@@ -46,6 +46,7 @@ export function AppUpgrades({ appId }: { appId: number | null }) {
         // query to show the new status.
         queryClient.invalidateQueries({ queryKey: ["is-capacitor", appId] });
       }
+      queryClient.invalidateQueries({ queryKey: ["versions", appId] });
     },
   });
 

src/components/chat/ChatInput.tsx

@@ -78,6 +78,8 @@ import { LexicalChatInput } from "./LexicalChatInput";
 import { useChatModeToggle } from "@/hooks/useChatModeToggle";
 import { VisualEditingChangesDialog } from "@/components/preview_panel/VisualEditingChangesDialog";
 import { useUserBudgetInfo } from "@/hooks/useUserBudgetInfo";
+import { useQueryClient } from "@tanstack/react-query";
+import { TOKEN_COUNT_QUERY_KEY } from "@/hooks/useCountTokens";
 
 const showTokenBarAtom = atom(false);
 
@@ -96,10 +98,11 @@ export function ChatInput({ chatId }: { chatId?: number }) {
   const setMessagesById = useSetAtom(chatMessagesByIdAtom);
   const setIsPreviewOpen = useSetAtom(isPreviewOpenAtom);
   const [showTokenBar, setShowTokenBar] = useAtom(showTokenBarAtom);
-  const toggleShowTokenBar = useCallback(
-    () => setShowTokenBar((prev) => !prev),
-    [setShowTokenBar],
-  );
+  const queryClient = useQueryClient();
+  const toggleShowTokenBar = useCallback(() => {
+    setShowTokenBar((prev) => !prev);
+    queryClient.invalidateQueries({ queryKey: TOKEN_COUNT_QUERY_KEY });
+  }, [setShowTokenBar, queryClient]);
   const [selectedComponents, setSelectedComponents] = useAtom(
     selectedComponentsPreviewAtom,
   );

src/hooks/useTemplates.ts

@@ -9,7 +9,7 @@ export function useTemplates() {
       const ipcClient = IpcClient.getInstance();
       return ipcClient.getTemplates();
     },
-    initialData: localTemplatesData,
+    placeholderData: localTemplatesData,
     meta: {
       showErrorToast: true,
     },

src/pages/hub.tsx

@@ -96,7 +96,7 @@ const HubPage: React.FC = () => {
       <CreateAppDialog
         open={isCreateDialogOpen}
         onOpenChange={setIsCreateDialogOpen}
-        template={templates.find((t) => t.id === settings?.selectedTemplateId)}
+        template={templates?.find((t) => t.id === settings?.selectedTemplateId)}
       />
     </div>
   );