fix(desktop): extra reqs

2 files changed, 107 insertions, 95 deletions

diff --git a/packages/desktop/src/components/header.tsx b/packages/desktop/src/components/header.tsx
index d70bfee24..fd4b2c439 100644
--- a/packages/desktop/src/components/header.tsx
+++ b/packages/desktop/src/components/header.tsx
@@ -24,11 +24,6 @@ export function Header(props: {
   const globalSDK = useGlobalSDK()
   const layout = useLayout()
   const params = useParams()
-  const currentDirectory = createMemo(() => base64Decode(params.dir ?? ""))
-  const store = createMemo(() => globalSync.child(currentDirectory())[0])
-  const sessions = createMemo(() => store().session ?? [])
-  const currentSession = createMemo(() => sessions().find((s) => s.id === params.id))
-  const shareEnabled = createMemo(() => store().config.share !== "disabled")
 
   return (
     <header class="h-12 shrink-0 bg-background-base border-b border-border-weak-base flex" data-tauri-drag-region>
@@ -45,101 +40,116 @@ export function Header(props: {
         <Mark class="shrink-0" />
       </A>
       <div class="pl-4 px-6 flex items-center justify-between gap-4 w-full">
-        <Show when={params.dir && layout.projects.list().length > 0}>
-          <div class="flex items-center gap-3">
-            <div class="flex items-center gap-2">
-              <Select
-                options={layout.projects.list().map((project) => project.worktree)}
-                current={currentDirectory()}
-                label={(x) => getFilename(x)}
-                onSelect={(x) => (x ? props.navigateToProject(x) : undefined)}
-                class="text-14-regular text-text-base"
-                variant="ghost"
-              >
-                {/* @ts-ignore */}
-                {(i) => (
+        <Show when={layout.projects.list().length > 0 && params.dir}>
+          {(directory) => {
+            const currentDirectory = createMemo(() => base64Decode(directory()))
+            const store = createMemo(() => globalSync.child(currentDirectory())[0])
+            const sessions = createMemo(() => store().session ?? [])
+            const currentSession = createMemo(() => sessions().find((s) => s.id === params.id))
+            const shareEnabled = createMemo(() => store().config.share !== "disabled")
+            return (
+              <>
+                <div class="flex items-center gap-3">
                   <div class="flex items-center gap-2">
-                    <Icon name="folder" size="small" />
-                    <div class="text-text-strong">{getFilename(i)}</div>
+                    <Select
+                      options={layout.projects.list().map((project) => project.worktree)}
+                      current={currentDirectory()}
+                      label={(x) => getFilename(x)}
+                      onSelect={(x) => (x ? props.navigateToProject(x) : undefined)}
+                      class="text-14-regular text-text-base"
+                      variant="ghost"
+                    >
+                      {/* @ts-ignore */}
+                      {(i) => (
+                        <div class="flex items-center gap-2">
+                          <Icon name="folder" size="small" />
+                          <div class="text-text-strong">{getFilename(i)}</div>
+                        </div>
+                      )}
+                    </Select>
+                    <div class="text-text-weaker">/</div>
+                    <Select
+                      options={sessions()}
+                      current={currentSession()}
+                      placeholder="New session"
+                      label={(x) => x.title}
+                      value={(x) => x.id}
+                      onSelect={props.navigateToSession}
+                      class="text-14-regular text-text-base max-w-md"
+                      variant="ghost"
+                    />
                   </div>
-                )}
-              </Select>
-              <div class="text-text-weaker">/</div>
-              <Select
-                options={sessions()}
-                current={currentSession()}
-                placeholder="New session"
-                label={(x) => x.title}
-                value={(x) => x.id}
-                onSelect={props.navigateToSession}
-                class="text-14-regular text-text-base max-w-md"
-                variant="ghost"
-              />
-            </div>
-            <Show when={currentSession()}>
-              <Button as={A} href={`/${params.dir}/session`} icon="plus-small">
-                New session
-              </Button>
-            </Show>
-          </div>
-          <div class="flex items-center gap-4">
-            <Tooltip
-              class="shrink-0"
-              value={
-                <div class="flex items-center gap-2">
-                  <span>Toggle terminal</span>
-                  <span class="text-icon-base text-12-medium">Ctrl `</span>
+                  <Show when={currentSession()}>
+                    <Button as={A} href={`/${params.dir}/session`} icon="plus-small">
+                      New session
+                    </Button>
+                  </Show>
                 </div>
-              }
-            >
-              <Button variant="ghost" class="group/terminal-toggle size-6 p-0" onClick={layout.terminal.toggle}>
-                <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
-                  <Icon
-                    size="small"
-                    name={layout.terminal.opened() ? "layout-bottom-full" : "layout-bottom"}
-                    class="group-hover/terminal-toggle:hidden"
-                  />
-                  <Icon
-                    size="small"
-                    name="layout-bottom-partial"
-                    class="hidden group-hover/terminal-toggle:inline-block"
-                  />
-                  <Icon
-                    size="small"
-                    name={layout.terminal.opened() ? "layout-bottom" : "layout-bottom-full"}
-                    class="hidden group-active/terminal-toggle:inline-block"
-                  />
-                </div>
-              </Button>
-            </Tooltip>
-            <Show when={shareEnabled() && currentSession()}>
-              <Popover
-                title="Share session"
-                trigger={
-                  <Tooltip class="shrink-0" value="Share session">
-                    <IconButton icon="share" variant="ghost" class="" />
+                <div class="flex items-center gap-4">
+                  <Tooltip
+                    class="shrink-0"
+                    value={
+                      <div class="flex items-center gap-2">
+                        <span>Toggle terminal</span>
+                        <span class="text-icon-base text-12-medium">Ctrl `</span>
+                      </div>
+                    }
+                  >
+                    <Button variant="ghost" class="group/terminal-toggle size-6 p-0" onClick={layout.terminal.toggle}>
+                      <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+                        <Icon
+                          size="small"
+                          name={layout.terminal.opened() ? "layout-bottom-full" : "layout-bottom"}
+                          class="group-hover/terminal-toggle:hidden"
+                        />
+                        <Icon
+                          size="small"
+                          name="layout-bottom-partial"
+                          class="hidden group-hover/terminal-toggle:inline-block"
+                        />
+                        <Icon
+                          size="small"
+                          name={layout.terminal.opened() ? "layout-bottom" : "layout-bottom-full"}
+                          class="hidden group-active/terminal-toggle:inline-block"
+                        />
+                      </div>
+                    </Button>
                   </Tooltip>
-                }
-              >
-                {iife(() => {
-                  const [url] = createResource(
-                    () => currentSession(),
-                    async (session) => {
-                      if (!session) return
-                      let shareURL = session.share?.url
-                      if (!shareURL) {
-                        shareURL = await globalSDK.client.session
-                          .share({ sessionID: session.id, directory: currentDirectory() })
-                          .then((r) => r.data?.share?.url)
+                  <Show when={shareEnabled() && currentSession()}>
+                    <Popover
+                      title="Share session"
+                      trigger={
+                        <Tooltip class="shrink-0" value="Share session">
+                          <IconButton icon="share" variant="ghost" class="" />
+                        </Tooltip>
                       }
-                      return shareURL
-                    },
-                  )
-                  return <Show when={url()}>{(url) => <TextField value={url()} readOnly copyable class="w-72" />}</Show>
-                })}
-              </Popover>
-            </Show>
-          </div>
+                    >
+                      {iife(() => {
+                        const [url] = createResource(
+                          () => currentSession(),
+                          async (session) => {
+                            if (!session) return
+                            let shareURL = session.share?.url
+                            if (!shareURL) {
+                              shareURL = await globalSDK.client.session
+                                .share({ sessionID: session.id, directory: currentDirectory() })
+                                .then((r) => r.data?.share?.url)
+                            }
+                            return shareURL
+                          },
+                        )
+                        return (
+                          <Show when={url()}>
+                            {(url) => <TextField value={url()} readOnly copyable class="w-72" />}
+                          </Show>
+                        )
+                      })}
+                    </Popover>
+                  </Show>
+                </div>
+              </>
+            )
+          }}
         </Show>
       </div>
     </header>
diff --git a/packages/desktop/src/context/global-sync.tsx b/packages/desktop/src/context/global-sync.tsx
index fa1a281dc..6c6a02432 100644
--- a/packages/desktop/src/context/global-sync.tsx
+++ b/packages/desktop/src/context/global-sync.tsx
@@ -72,6 +72,7 @@ function createGlobalSync() {
 
   const children: Record<string, ReturnType<typeof createStore<State>>> = {}
   function child(directory: string) {
+    if (!directory) console.error("No directory provided")
     if (!children[directory]) {
       setGlobalStore("children", directory, {
         project: "",
@@ -122,6 +123,7 @@ function createGlobalSync() {
   }
 
   async function bootstrapInstance(directory: string) {
+    if (!directory) return
     const [, setStore] = child(directory)
     const sdk = createOpencodeClient({
       baseUrl: globalSDK.url,