Merge branch 'dev' into fix/16323-keyed-show-callbacks

packages/app/src/components/dialog-select-provider.tsx

@@ -74,7 +74,9 @@ export const DialogSelectProvider: Component = () => {
             <Show when={i.id === "opencode"}>
               <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
             </Show>
-            <Show when={note(i.id)}>{(value) => <div class="text-14-regular text-text-weak">{value()}</div>}</Show>
+            <Show when={note(i.id)} keyed>
+              {(value) => <div class="text-14-regular text-text-weak">{value}</div>}
+            </Show>
             <Show when={i.id === "opencode-go"}>
               <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
             </Show>

packages/app/src/components/model-tooltip.tsx

@@ -77,10 +77,10 @@ export const ModelTooltip: Component<{ model: ModelInfo; latest?: boolean; free?
   return (
     <div class="flex flex-col gap-1 py-1">
       <div class="text-13-medium">{title()}</div>
-      <Show when={inputs()}>
+      <Show when={inputs()} keyed>
         {(value) => (
           <div class="text-12-regular text-text-invert-base">
-            {language.t("model.tooltip.allows", { inputs: value() })}
+            {language.t("model.tooltip.allows", { inputs: value })}
           </div>
         )}
       </Show>

packages/app/src/components/prompt-input/context-items.tsx

@@ -52,12 +52,10 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
                     <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" />
                     <div class="flex items-center text-11-regular min-w-0 font-medium">
                       <span class="text-text-strong whitespace-nowrap">{label}</span>
-                      <Show when={item.selection}>
+                      <Show when={item.selection} keyed>
                         {(sel) => (
                           <span class="text-text-weak whitespace-nowrap shrink-0">
-                            {sel().startLine === sel().endLine
+                            {sel.startLine === sel.endLine ? `:${sel.startLine}` : `:${sel.startLine}-${sel.endLine}`}
-                              ? `:${sel().startLine}`
-                              : `:${sel().startLine}-${sel().endLine}`}
                           </span>
                         )}
                       </Show>
@@ -74,8 +72,8 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
                       aria-label={props.t("prompt.context.removeFile")}
                     />
                   </div>
-                  <Show when={item.comment}>
+                  <Show when={item.comment} keyed>
-                    {(comment) => <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment()}</div>}
+                    {(comment) => <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment}</div>}
                   </Show>
                 </div>
               </Tooltip>

packages/app/src/components/server/server-row.tsx

@@ -78,6 +78,7 @@ export function ServerRow(props: ServerRowProps) {
             </span>
             <Show
               when={badge()}
+              keyed
               fallback={
                 <Show when={props.status?.version}>
                   <span ref={versionRef} class={props.versionClass ?? "text-text-weak text-14-regular truncate"}>
@@ -86,20 +87,20 @@ export function ServerRow(props: ServerRowProps) {
                 </Show>
               }
             >
-              {(badge) => badge()}
+              {(badge) => badge}
             </Show>
           </div>
-          <Show when={props.showCredentials && props.conn.type === "http" && props.conn}>
+          <Show when={props.showCredentials && props.conn.type === "http" && props.conn} keyed>
             {(conn) => (
               <div class="flex flex-row gap-3">
                 <span>
-                  {conn().http.username ? (
+                  {conn.http.username ? (
-                    <span class="text-text-weak">{conn().http.username}</span>
+                    <span class="text-text-weak">{conn.http.username}</span>
                   ) : (
                     <span class="text-text-weaker">no username</span>
                   )}
                 </span>
-                {conn().http.password && <span class="text-text-weak">••••••••</span>}
+                {conn.http.password && <span class="text-text-weak">••••••••</span>}
               </div>
             )}
           </Show>

packages/app/src/components/session-context-usage.tsx

@@ -73,15 +73,15 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
 
   const tooltipValue = () => (
     <div>
-      <Show when={context()}>
+      <Show when={context()} keyed>
         {(ctx) => (
           <>
             <div class="flex items-center gap-2">
-              <span class="text-text-invert-strong">{ctx().total.toLocaleString(language.intl())}</span>
+              <span class="text-text-invert-strong">{ctx.total.toLocaleString(language.intl())}</span>
               <span class="text-text-invert-base">{language.t("context.usage.tokens")}</span>
             </div>
             <div class="flex items-center gap-2">
-              <span class="text-text-invert-strong">{ctx().usage ?? 0}%</span>
+              <span class="text-text-invert-strong">{ctx.usage ?? 0}%</span>
               <span class="text-text-invert-base">{language.t("context.usage.usage")}</span>
             </div>
           </>

packages/app/src/components/session/session-context-tab.tsx

@@ -316,12 +316,12 @@ export function SessionContextTab() {
           </div>
         </Show>
 
-        <Show when={systemPrompt()}>
+        <Show when={systemPrompt()} keyed>
           {(prompt) => (
             <div class="flex flex-col gap-2">
               <div class="text-12-regular text-text-weak">{language.t("context.systemPrompt.title")}</div>
               <div class="border border-border-base rounded-md bg-surface-base px-3 py-2">
-                <Markdown text={prompt()} class="text-12-regular" />
+                <Markdown text={prompt} class="text-12-regular" />
               </div>
             </div>
           )}

packages/app/src/components/session/session-header.tsx

@@ -356,9 +356,9 @@ export function SessionHeader() {
 
   return (
     <>
-      <Show when={centerMount()}>
+      <Show when={centerMount()} keyed>
         {(mount) => (
-          <Portal mount={mount()}>
+          <Portal mount={mount}>
             <Button
               type="button"
               variant="ghost"
@@ -376,18 +376,16 @@ export function SessionHeader() {
                 </span>
               </div>
 
-              <Show when={hotkey()}>
+              <Show when={hotkey()} keyed>
-                {(keybind) => (
+                {(keybind) => <Keybind class="shrink-0 !border-0 !bg-transparent !shadow-none px-0">{keybind}</Keybind>}
-                  <Keybind class="shrink-0 !border-0 !bg-transparent !shadow-none px-0">{keybind()}</Keybind>
-                )}
               </Show>
             </Button>
           </Portal>
         )}
       </Show>
-      <Show when={rightMount()}>
+      <Show when={rightMount()} keyed>
         {(mount) => (
-          <Portal mount={mount()}>
+          <Portal mount={mount}>
             <div class="flex items-center gap-2">
               <StatusPopover />
               <Show when={projectDirectory()}>

packages/app/src/components/session/session-new-view.tsx

@@ -62,14 +62,14 @@ export function NewSessionView(props: NewSessionViewProps) {
         <Icon name="branch" size="small" class="mt-0.5 shrink-0" />
         <div class="text-12-medium text-text-weak select-text leading-5">{label(current())}</div>
       </div>
-      <Show when={sync.project}>
+      <Show when={sync.project} keyed>
         {(project) => (
           <div class="flex justify-center items-start gap-3 min-h-5">
             <Icon name="pencil-line" size="small" class="mt-0.5 shrink-0" />
             <div class="text-12-medium text-text-weak leading-5">
               {language.t("session.new.lastModified")}&nbsp;
               <span class="text-text-strong">
-                {DateTime.fromMillis(project().time.updated ?? project().time.created)
+                {DateTime.fromMillis(project.time.updated ?? project.time.created)
                   .setLocale(language.intl())
                   .toRelative()}
               </span>

packages/app/src/components/session/session-sortable-tab.tsx

@@ -62,7 +62,9 @@ export function SortableTab(props: { tab: string; onTabClose: (tab: string) => v
           hideCloseButton
           onMiddleClick={() => props.onTabClose(props.tab)}
         >
-          <Show when={content()}>{(value) => value()}</Show>
+          <Show when={content()} keyed>
+            {(value) => value}
+          </Show>
         </Tabs.Trigger>
       </div>
     </div>

packages/app/src/components/settings-general.tsx

@@ -473,7 +473,7 @@ export const SettingsGeneral: Component = () => {
 
         <SoundsSection />
 
-        {/*<Show when={platform.platform === "desktop" && platform.os === "windows" && platform.getWslEnabled}>
+        {/*<Show when={platform.platform === "desktop" && platform.os === "windows" && platform.getWslEnabled} keyed>
           {(_) => {
             const [enabledResource, actions] = createResource(() => platform.getWslEnabled?.())
             const enabled = () => (enabledResource.state === "pending" ? undefined : enabledResource.latest)
@@ -503,7 +503,7 @@ export const SettingsGeneral: Component = () => {
 
         <UpdatesSection />
 
-        <Show when={linux()}>
+        <Show when={linux()} keyed>
           {(_) => {
             const [valueResource, actions] = createResource(() => platform.getDisplayBackend?.())
             const value = () => (valueResource.state === "pending" ? undefined : valueResource.latest)

packages/app/src/components/settings-providers.tsx

@@ -189,8 +189,8 @@ export const SettingsProviders: Component = () => {
                         <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
                       </Show>
                     </div>
-                    <Show when={note(item.id)}>
+                    <Show when={note(item.id)} keyed>
-                      {(key) => <span class="text-12-regular text-text-weak pl-8">{language.t(key())}</span>}
+                      {(key) => <span class="text-12-regular text-text-weak pl-8">{language.t(key)}</span>}
                     </Show>
                   </div>
                   <Button

packages/app/src/pages/error.tsx

@@ -290,8 +290,8 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
             </Show>
           </Show>
         </div>
-        <Show when={store.actionError}>
+        <Show when={store.actionError} keyed>
-          {(message) => <p class="text-xs text-text-danger-base text-center max-w-2xl">{message()}</p>}
+          {(message) => <p class="text-xs text-text-danger-base text-center max-w-2xl">{message}</p>}
         </Show>
         <div class="flex flex-col items-center gap-2">
           <div class="flex items-center justify-center gap-1">
@@ -305,10 +305,8 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
               <Icon name="discord" class="text-text-interactive-base" />
             </button>
           </div>
-          <Show when={platform.version}>
+          <Show when={platform.version} keyed>
-            {(version) => (
+            {(version) => <p class="text-xs text-text-weak">{language.t("error.page.version", { version })}</p>}
-              <p class="text-xs text-text-weak">{language.t("error.page.version", { version: version() })}</p>
-            )}
           </Show>
         </div>
       </div>

packages/app/src/pages/layout/sidebar-project.tsx

@@ -43,10 +43,10 @@ export const ProjectDragOverlay = (props: {
 }): JSX.Element => {
   const project = createMemo(() => props.projects().find((p) => p.worktree === props.activeProject()))
   return (
-    <Show when={project()}>
+    <Show when={project()} keyed>
       {(p) => (
         <div class="bg-background-base rounded-xl p-1">
-          <ProjectIcon project={p()} />
+          <ProjectIcon project={p} />
         </div>
       )}
     </Show>

packages/app/src/pages/layout/sidebar-workspace.tsx

@@ -76,8 +76,8 @@ export const WorkspaceDragOverlay = (props: {
   })
 
   return (
-    <Show when={label()}>
+    <Show when={label()} keyed>
-      {(value) => <div class="bg-background-base rounded-md px-2 py-1 text-14-medium text-text-strong">{value()}</div>}
+      {(value) => <div class="bg-background-base rounded-md px-2 py-1 text-14-medium text-text-strong">{value}</div>}
     </Show>
   )
 }

packages/app/src/pages/session/message-timeline.tsx

@@ -731,12 +731,12 @@ export function MessageTimeline(props: {
                                           class="size-3.5 shrink-0"
                                         />
                                         <span class="truncate">{getFilename(comment().path)}</span>
-                                        <Show when={comment().selection}>
+                                        <Show when={comment().selection} keyed>
                                           {(selection) => (
                                             <span class="shrink-0 text-text-weak">
-                                              {selection().startLine === selection().endLine
+                                              {selection.startLine === selection.endLine
-                                                ? `:${selection().startLine}`
+                                                ? `:${selection.startLine}`
-                                                : `:${selection().startLine}-${selection().endLine}`}
+                                                : `:${selection.startLine}-${selection.endLine}`}
                                             </span>
                                           )}
                                         </Show>

packages/app/src/show-keyed-guard.test.ts

@@ -0,0 +1,61 @@
+import { describe, test } from "bun:test"
+import { join, relative, resolve } from "node:path"
+import * as ts from "typescript"
+
+const scan = async (dir: string) =>
+  Promise.all(
+    Array.from(new Bun.Glob("**/*.tsx").scanSync({ cwd: dir })).map(async (file) => {
+      const full = join(dir, file)
+      return {
+        file: full,
+        text: await Bun.file(full).text(),
+      }
+    }),
+  )
+
+const find = (file: string, text: string, root: string) => {
+  const hits: string[] = []
+  const source = ts.createSourceFile(file, text, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX)
+
+  const walk = (node: ts.Node): void => {
+    if (ts.isJsxElement(node) && node.openingElement.tagName.getText(source) === "Show") {
+      const keyed = node.openingElement.attributes.properties.some(
+        (prop) => ts.isJsxAttribute(prop) && prop.name.getText(source) === "keyed",
+      )
+      const child = node.children.find((child) => {
+        if (ts.isJsxText(child)) return child.getText(source).trim() !== ""
+        if (ts.isJsxExpression(child)) return child.expression !== undefined
+        return true
+      })
+
+      if (
+        !keyed &&
+        child &&
+        ts.isJsxExpression(child) &&
+        child.expression &&
+        ts.isArrowFunction(child.expression) &&
+        child.expression.parameters.length > 0
+      ) {
+        hits.push(`${relative(root, file)}:${source.getLineAndCharacterOfPosition(node.getStart(source)).line + 1}`)
+      }
+    }
+
+    ts.forEachChild(node, walk)
+  }
+
+  walk(source)
+  return hits
+}
+
+describe("show keyed guard", () => {
+  test("app and desktop show callbacks are keyed", async () => {
+    const root = resolve(import.meta.dir, "../../..")
+    const hits = (await Promise.all([scan(import.meta.dir), scan(resolve(import.meta.dir, "../../desktop/src"))]))
+      .flat()
+      .flatMap((item) => find(item.file, item.text, root))
+
+    if (hits.length > 0) {
+      throw new Error(`non-keyed <Show> callbacks found:\n${hits.join("\n")}`)
+    }
+  })
+})

packages/desktop/src/index.tsx

@@ -482,6 +482,7 @@ function ServerGate(props: { children: (data: ServerReadyData) => JSX.Element })
   return (
     <Show
       when={serverData.state !== "pending" && serverData()}
+      keyed
       fallback={
         <div class="h-screen w-screen flex flex-col items-center justify-center bg-background-base">
           <Splash class="w-16 h-20 opacity-50 animate-pulse" />
@@ -489,7 +490,7 @@ function ServerGate(props: { children: (data: ServerReadyData) => JSX.Element })
         </div>
       }
     >
-      {(data) => props.children(data())}
+      {(data) => props.children(data)}
     </Show>
   )
 }