Fix stale UI (#2027)

.github/workflows/claude-pr-review.yml

@@ -3,102 +3,102 @@ name: Claude PR Review
 # https://github.com/anthropics/claude-code-action/blob/main/examples/pr-review-comprehensive.yml
 
 on:
-    pull_request:
-        types: [opened, synchronize, ready_for_review, reopened]
+  pull_request:
+    types: [opened, synchronize, ready_for_review, reopened]
 
 jobs:
-    claude-review:
-        # Has Anthropic API key, etc.
-        environment: ai-bots
-        # Only review code from regular contributors since claude code has non-trivial costs
-        # https://github.com/anthropics/claude-code-action/blob/main/examples/pr-review-filtered-authors.yml
-        if: |
-            github.event.pull_request.user.login == 'wwwillchen' ||
-            github.event.pull_request.user.login == 'azizmejri1' ||
-            github.event.pull_request.user.login == 'princeaden1'
-        runs-on: ubuntu-latest
-        permissions:
-            contents: read
-            pull-requests: write
-            id-token: write
-        steps:
-            - name: Checkout repository
-              uses: actions/checkout@v5
-              with:
-                  fetch-depth: 1
-
-            - name: PR Review with Progress Tracking
-              uses: anthropics/claude-code-action@v1
-              with:
-                  anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
-
-                  # Enable progress tracking
-                  track_progress: true
-
-                  # Your custom review instructions
-                  # Using Code Review prompt based on https://github.com/openai/codex/blob/main/codex-rs/core/review_prompt.md?plain=1
-                  prompt: |
-                      REPO: ${{ github.repository }}
-                      PR NUMBER: ${{ github.event.pull_request.number }}
-
-                      You are acting as a reviewer for a proposed code change made by another engineer.
-
-                        Below are some default guidelines for determining whether the original author would appreciate the issue being flagged.
-
-                        These are not the final word in determining whether an issue is a bug. In many cases, you will encounter other, more specific guidelines. These may be present elsewhere in a developer message, a user message, a file, or even elsewhere in this system message.
-                        Those guidelines should be considered to override these general instructions.
-
-                        Here are the general guidelines for determining whether something is a bug and should be flagged.
-
-                        1. It meaningfully impacts the accuracy, performance, security, or maintainability of the code.
-                        2. The bug is discrete and actionable (i.e. not a general issue with the codebase or a combination of multiple issues).
-                        3. Fixing the bug does not demand a level of rigor that is not present in the rest of the codebase (e.g. one doesn't need very detailed comments and input validation in a repository of one-off scripts in personal projects)
-                        4. The bug was introduced in the commit (pre-existing bugs should not be flagged).
-                        5. The author of the original PR would likely fix the issue if they were made aware of it.
-                        6. The bug does not rely on unstated assumptions about the codebase or author's intent.
-                        7. It is not enough to speculate that a change may disrupt another part of the codebase, to be considered a bug, one must identify the other parts of the code that are provably affected.
-                        8. The bug is clearly not just an intentional change by the original author.
-
-                        When flagging a bug, you will also provide an accompanying comment. Once again, these guidelines are not the final word on how to construct a comment -- defer to any subsequent guidelines that you encounter.
-
-                        1. The comment should be clear about why the issue is a bug.
-                        2. The comment should appropriately communicate the severity of the issue. It should not claim that an issue is more severe than it actually is.
-                        3. The comment should be brief. The body should be at most 1 paragraph. It should not introduce line breaks within the natural language flow unless it is necessary for the code fragment.
-                        4. The comment should not include any chunks of code longer than 3 lines. Any code chunks should be wrapped in markdown inline code tags or a code block.
-                        5. The comment should clearly and explicitly communicate the scenarios, environments, or inputs that are necessary for the bug to arise. The comment should immediately indicate that the issue's severity depends on these factors.
-                        6. The comment's tone should be matter-of-fact and not accusatory or overly positive. It should read as a helpful AI assistant suggestion without sounding too much like a human reviewer.
-                        7. The comment should be written such that the original author can immediately grasp the idea without close reading.
-                        8. The comment should avoid excessive flattery and comments that are not helpful to the original author. The comment should avoid phrasing like "Great job ...", "Thanks for ...".
-
-                        Below are some more detailed guidelines that you should apply to this specific review.
-
-                        HOW MANY FINDINGS TO RETURN:
-
-                        Output all findings that the original author would fix if they knew about it. If there is no finding that a person would definitely love to see and fix, prefer outputting no findings. Do not stop at the first qualifying finding. Continue until you've listed every qualifying finding.
-
-                        GUIDELINES:
-
-                        - Ignore trivial style unless it obscures meaning or violates documented standards.
-                        - Use one comment per distinct issue (or a multi-line range if necessary).
-                        - Use ```suggestion blocks ONLY for concrete replacement code (minimal lines; no commentary inside the block).
-                        - In every ```suggestion block, preserve the exact leading whitespace of the replaced lines (spaces vs tabs, number of spaces).
-                        - Do NOT introduce or remove outer indentation levels unless that is the actual fix.
-
-                        The comments will be presented in the code review as inline comments. You should avoid providing unnecessary location details in the comment body. Always keep the line range as short as possible for interpreting the issue. Avoid ranges longer than 5–10 lines; instead, choose the most suitable subrange that pinpoints the problem.
-
-                        At the beginning of the finding title, tag the bug with priority level. For example "[P1] Un-padding slices along wrong tensor dimensions". [P0] – Drop everything to fix.  Blocking release, operations, or major usage. Only use for universal issues that do not depend on any assumptions about the inputs. · [P1] – Urgent. Should be addressed in the next cycle · [P2] – Normal. To be fixed eventually · [P3] – Low. Nice to have.
-
-                        At the end of your findings, output an "overall correctness" verdict of whether or not the patch should be considered "correct".
-                        
-                        Correct implies that existing code and tests will not break, and the patch is free of bugs and other blocking issues.
-                        Ignore non-blocking issues such as style, formatting, typos, documentation, and other nits.
-
-                        FORMATTING GUIDELINES:
-                        The finding description should be one paragraph.
-
-                  # Tools for comprehensive PR review
-                  claude_args: |
-                      --model claude-opus-4-5-20251101 --allowedTools "mcp__github_inline_comment__create_inline_comment,Bash(gh pr comment:*),Bash(gh pr diff:*),Bash(gh pr view:*)"
+  claude-review:
+    # Has Anthropic API key, etc.
+    environment: ai-bots
+    # Only review code from regular contributors since claude code has non-trivial costs
+    # https://github.com/anthropics/claude-code-action/blob/main/examples/pr-review-filtered-authors.yml
+    if: |
+      github.event.pull_request.user.login == 'wwwillchen' ||
+      github.event.pull_request.user.login == 'azizmejri1' ||
+      github.event.pull_request.user.login == 'princeaden1'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 1
+
+      - name: PR Review with Progress Tracking
+        uses: anthropics/claude-code-action@v1
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+
+          # Enable progress tracking
+          track_progress: true
+
+          # Your custom review instructions
+          # Using Code Review prompt based on https://github.com/openai/codex/blob/main/codex-rs/core/review_prompt.md?plain=1
+          prompt: |
+            REPO: ${{ github.repository }}
+            PR NUMBER: ${{ github.event.pull_request.number }}
+
+            You are acting as a reviewer for a proposed code change made by another engineer.
+
+              Below are some default guidelines for determining whether the original author would appreciate the issue being flagged.
+
+              These are not the final word in determining whether an issue is a bug. In many cases, you will encounter other, more specific guidelines. These may be present elsewhere in a developer message, a user message, a file, or even elsewhere in this system message.
+              Those guidelines should be considered to override these general instructions.
+
+              Here are the general guidelines for determining whether something is a bug and should be flagged.
+
+              1. It meaningfully impacts the accuracy, performance, security, or maintainability of the code.
+              2. The bug is discrete and actionable (i.e. not a general issue with the codebase or a combination of multiple issues).
+              3. Fixing the bug does not demand a level of rigor that is not present in the rest of the codebase (e.g. one doesn't need very detailed comments and input validation in a repository of one-off scripts in personal projects)
+              4. The bug was introduced in the commit (pre-existing bugs should not be flagged).
+              5. The author of the original PR would likely fix the issue if they were made aware of it.
+              6. The bug does not rely on unstated assumptions about the codebase or author's intent.
+              7. It is not enough to speculate that a change may disrupt another part of the codebase, to be considered a bug, one must identify the other parts of the code that are provably affected.
+              8. The bug is clearly not just an intentional change by the original author.
+
+              When flagging a bug, you will also provide an accompanying comment. Once again, these guidelines are not the final word on how to construct a comment -- defer to any subsequent guidelines that you encounter.
+
+              1. The comment should be clear about why the issue is a bug.
+              2. The comment should appropriately communicate the severity of the issue. It should not claim that an issue is more severe than it actually is.
+              3. The comment should be brief. The body should be at most 1 paragraph. It should not introduce line breaks within the natural language flow unless it is necessary for the code fragment.
+              4. The comment should not include any chunks of code longer than 3 lines. Any code chunks should be wrapped in markdown inline code tags or a code block.
+              5. The comment should clearly and explicitly communicate the scenarios, environments, or inputs that are necessary for the bug to arise. The comment should immediately indicate that the issue's severity depends on these factors.
+              6. The comment's tone should be matter-of-fact and not accusatory or overly positive. It should read as a helpful AI assistant suggestion without sounding too much like a human reviewer.
+              7. The comment should be written such that the original author can immediately grasp the idea without close reading.
+              8. The comment should avoid excessive flattery and comments that are not helpful to the original author. The comment should avoid phrasing like "Great job ...", "Thanks for ...".
+
+              Below are some more detailed guidelines that you should apply to this specific review.
+
+              HOW MANY FINDINGS TO RETURN:
+
+              Output all findings that the original author would fix if they knew about it. If there is no finding that a person would definitely love to see and fix, prefer outputting no findings. Do not stop at the first qualifying finding. Continue until you've listed every qualifying finding.
+
+              GUIDELINES:
+
+              - Ignore trivial style unless it obscures meaning or violates documented standards.
+              - Use one comment per distinct issue (or a multi-line range if necessary).
+              - Use ```suggestion blocks ONLY for concrete replacement code (minimal lines; no commentary inside the block).
+              - In every ```suggestion block, preserve the exact leading whitespace of the replaced lines (spaces vs tabs, number of spaces).
+              - Do NOT introduce or remove outer indentation levels unless that is the actual fix.
+
+              The comments will be presented in the code review as inline comments. You should avoid providing unnecessary location details in the comment body. Always keep the line range as short as possible for interpreting the issue. Avoid ranges longer than 5–10 lines; instead, choose the most suitable subrange that pinpoints the problem.
+
+              At the beginning of the finding title, tag the bug with priority level. For example "[P1] Un-padding slices along wrong tensor dimensions". [P0] – Drop everything to fix.  Blocking release, operations, or major usage. Only use for universal issues that do not depend on any assumptions about the inputs. · [P1] – Urgent. Should be addressed in the next cycle · [P2] – Normal. To be fixed eventually · [P3] – Low. Nice to have.
+
+              At the end of your findings, output an "overall correctness" verdict of whether or not the patch should be considered "correct".
+              
+              Correct implies that existing code and tests will not break, and the patch is free of bugs and other blocking issues.
+              Ignore non-blocking issues such as style, formatting, typos, documentation, and other nits.
+
+              FORMATTING GUIDELINES:
+              The finding description should be one paragraph.
+
+          # Tools for comprehensive PR review
+          claude_args: |
+            --model claude-opus-4-5-20251101 --allowedTools "mcp__github_inline_comment__create_inline_comment,Bash(gh pr comment:*),Bash(gh pr diff:*),Bash(gh pr view:*)"
 
 # When track_progress is enabled:
 # - Creates a tracking comment with progress checkboxes

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>
   );