nastechai-desktop 18.1.0

package/src/app/gateway/hooks/use-gateway-request.ts

@@ -0,0 +1,138 @@
+import { useStore } from '@nanostores/react'
+import { useCallback, useEffect, useRef } from 'react'
+
+import type { NasTechGateway } from '@/nastech'
+import { isGatewayReauthRequired, resolveGatewayWsUrl } from '@/lib/gateway-ws-url'
+import { $gateway, ensureActiveGatewayOpen, isActivePrimary } from '@/store/gateway'
+import { $activeGatewayProfile } from '@/store/profile'
+import { $gatewayState, setConnection } from '@/store/session'
+
+export function useGatewayRequest() {
+  const gatewayState = useStore($gatewayState)
+  const gatewayRef = useRef<NasTechGateway | null>(null)
+
+  const connectionRef = useRef<Awaited<ReturnType<NonNullable<typeof window.NASTECHDesktop>['getConnection']>> | null>(
+    null
+  )
+
+  const gatewayStateRef = useRef(gatewayState)
+  const reconnectingRef = useRef<Promise<NasTechGateway | null> | null>(null)
+  // Holds the reauth error from the most recent failed reconnect so
+  // requestGateway can surface the gateway's "session expired, sign in again"
+  // message instead of the opaque "connection closed" that triggered the retry.
+  const reauthErrorRef = useRef<unknown>(null)
+
+  useEffect(() => {
+    gatewayStateRef.current = gatewayState
+  }, [gatewayState])
+
+  // Track the active gateway (primary or a background profile's socket) so
+  // outbound requests and overlay props always target the focused profile.
+  useEffect(
+    () =>
+      $gateway.subscribe(gateway => {
+        gatewayRef.current = gateway as NasTechGateway | null
+      }),
+    []
+  )
+
+  const ensureGatewayOpen = useCallback(async () => {
+    const existing = gatewayRef.current
+
+    if (!existing) {
+      return null
+    }
+
+    if (gatewayStateRef.current === 'open') {
+      return existing
+    }
+
+    if (reconnectingRef.current) {
+      return reconnectingRef.current
+    }
+
+    reconnectingRef.current = (async () => {
+      const desktop = window.NASTECHDesktop
+
+      if (!desktop) {
+        return null
+      }
+
+      reauthErrorRef.current = null
+
+      try {
+        // Reconnect to whichever profile the gateway is currently routed to (not
+        // always the primary), so a sleep/wake reconnect keeps the user on the
+        // profile they were chatting in.
+        const conn = await desktop.getConnection($activeGatewayProfile.get())
+        connectionRef.current = conn
+        setConnection(conn)
+        // Re-mint the WS URL before reconnecting. OAuth tickets are single-use
+        // and short-lived, so the cached conn.wsUrl ticket is dead here;
+        // resolveGatewayWsUrl() throws a reauth error in OAuth mode rather than
+        // connecting with a stale ticket. Stash it so requestGateway can show
+        // the actionable "sign in again" message.
+        const wsUrl = await resolveGatewayWsUrl(desktop, conn)
+        await existing.connect(wsUrl)
+
+        return existing
+      } catch (error) {
+        if (isGatewayReauthRequired(error)) {
+          reauthErrorRef.current = error
+        }
+
+        connectionRef.current = null
+        setConnection(null)
+
+        return null
+      } finally {
+        reconnectingRef.current = null
+      }
+    })()
+
+    return reconnectingRef.current
+  }, [])
+
+  const requestGateway = useCallback(
+    async <T>(method: string, params: Record<string, unknown> = {}) => {
+      const gateway = gatewayRef.current
+
+      if (!gateway) {
+        throw new Error('NasTech gateway unavailable')
+      }
+
+      try {
+        return await gateway.request<T>(method, params)
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error)
+
+        if (!/not connected|connection closed/i.test(message)) {
+          throw error
+        }
+
+        // Primary keeps the OAuth-aware reconnect (remote gateways re-mint a
+        // single-use ticket); background profiles are always local pool
+        // backends, so the registry handles their reconnect with no reauth.
+        const recovered = isActivePrimary() ? await ensureGatewayOpen() : await ensureActiveGatewayOpen()
+
+        if (!recovered) {
+          // Prefer the reauth error from the failed reconnect (OAuth session
+          // expired) over the generic transport error that triggered the retry.
+          const reauthError = reauthErrorRef.current
+          reauthErrorRef.current = null
+
+          if (reauthError) {
+            throw reauthError
+          }
+
+          throw error
+        }
+
+        return recovered.request<T>(method, params)
+      }
+    },
+    [ensureGatewayOpen]
+  )
+
+  return { connectionRef, gatewayRef, requestGateway }
+}

package/src/app/hooks/use-keybinds.ts

@@ -0,0 +1,186 @@
+import { useEffect, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { setRightSidebarTab } from '@/app/right-sidebar/store'
+import { PROFILE_SLOT_COUNT } from '@/lib/keybinds/actions'
+import { comboAllowedInInput, comboFromEvent, isEditableTarget } from '@/lib/keybinds/combo'
+import { toggleCommandPalette } from '@/store/command-palette'
+import { $capture, $comboIndex, endCapture, setBinding, toggleKeybindPanel } from '@/store/keybinds'
+import {
+  requestSessionSearchFocus,
+  setFileBrowserOpen,
+  toggleFileBrowserOpen,
+  togglePanesFlipped,
+  toggleSidebarOpen
+} from '@/store/layout'
+import {
+  cycleProfile,
+  requestProfileCreate,
+  switchProfileToSlot,
+  switchToDefaultProfile,
+  toggleShowAllProfiles
+} from '@/store/profile'
+import { $activeSessionId, $sessions, setModelPickerOpen } from '@/store/session'
+import { useTheme } from '@/themes/context'
+
+import { requestComposerFocus } from '../chat/composer/focus'
+import {
+  AGENTS_ROUTE,
+  ARTIFACTS_ROUTE,
+  CRON_ROUTE,
+  MESSAGING_ROUTE,
+  PROFILES_ROUTE,
+  sessionRoute,
+  SETTINGS_ROUTE,
+  SKILLS_ROUTE
+} from '../routes'
+
+export interface KeybindRuntimeDeps {
+  /** Open/close the command center overlay (sessions / system / usage). */
+  toggleCommandCenter: () => void
+  /** Drop to a fresh new-session draft. */
+  startFreshSession: () => void
+  /** Pin/unpin the active session. */
+  toggleSelectedPin: () => void
+}
+
+type HandlerMap = Record<string, () => void>
+
+// Mount once near the top of the app. Owns the single global keydown listener
+// for every rebindable hotkey: it runs the matched action, or — while capture
+// mode is active (edit overlay / panel rebind) — records the pressed combo.
+export function useKeybinds(deps: KeybindRuntimeDeps): void {
+  const navigate = useNavigate()
+  const { resolvedMode, setMode } = useTheme()
+
+  // Keep the latest closures without re-subscribing the listener.
+  const handlersRef = useRef<HandlerMap>({})
+
+  const profileSwitchHandlers: HandlerMap = {}
+
+  for (let slot = 1; slot <= PROFILE_SLOT_COUNT; slot += 1) {
+    profileSwitchHandlers[`profile.switch.${slot}`] = () => switchProfileToSlot(slot)
+  }
+
+  // Move to the adjacent session in recency order, wrapping at the ends.
+  const cycleSession = (direction: 1 | -1) => {
+    const sessions = $sessions.get()
+
+    if (sessions.length < 2) {
+      return
+    }
+
+    const current = sessions.findIndex(session => session.id === $activeSessionId.get())
+    const start = current === -1 ? (direction === 1 ? -1 : 0) : current
+    const next = sessions[(start + direction + sessions.length) % sessions.length]
+
+    if (next) {
+      navigate(sessionRoute(next.id))
+    }
+  }
+
+  const showRightSidebarTab = (tab: 'files' | 'terminal') => {
+    setFileBrowserOpen(true)
+    setRightSidebarTab(tab)
+  }
+
+  handlersRef.current = {
+    'keybinds.openPanel': toggleKeybindPanel,
+
+    'composer.focus': () => requestComposerFocus('main'),
+    'composer.modelPicker': () => setModelPickerOpen(true),
+
+    'nav.commandPalette': toggleCommandPalette,
+    'nav.commandCenter': deps.toggleCommandCenter,
+    'nav.settings': () => navigate(SETTINGS_ROUTE),
+    'nav.profiles': () => navigate(PROFILES_ROUTE),
+    'nav.skills': () => navigate(SKILLS_ROUTE),
+    'nav.messaging': () => navigate(MESSAGING_ROUTE),
+    'nav.artifacts': () => navigate(ARTIFACTS_ROUTE),
+    'nav.cron': () => navigate(CRON_ROUTE),
+    'nav.agents': () => navigate(AGENTS_ROUTE),
+
+    'session.new': () => {
+      deps.startFreshSession()
+      window.dispatchEvent(new CustomEvent('NASTECH:new-session-shortcut'))
+    },
+    'session.next': () => cycleSession(1),
+    'session.prev': () => cycleSession(-1),
+    'session.focusSearch': requestSessionSearchFocus,
+    'session.togglePin': deps.toggleSelectedPin,
+
+    'view.toggleSidebar': toggleSidebarOpen,
+    'view.toggleRightSidebar': toggleFileBrowserOpen,
+    'view.showFiles': () => showRightSidebarTab('files'),
+    'view.showTerminal': () => showRightSidebarTab('terminal'),
+    'view.flipPanes': togglePanesFlipped,
+
+    'appearance.toggleMode': () => setMode(resolvedMode === 'dark' ? 'light' : 'dark'),
+
+    'profile.default': switchToDefaultProfile,
+    ...profileSwitchHandlers,
+    'profile.next': () => cycleProfile(1),
+    'profile.prev': () => cycleProfile(-1),
+    'profile.toggleAll': toggleShowAllProfiles,
+    'profile.create': requestProfileCreate
+  }
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      // Capture mode: the next real key becomes the binding. Swallow everything
+      // so e.g. ⌘K rebinds instead of opening the palette.
+      const capturing = $capture.get()
+
+      if (capturing) {
+        event.preventDefault()
+        event.stopPropagation()
+
+        if (event.key === 'Escape') {
+          endCapture()
+
+          return
+        }
+
+        const combo = comboFromEvent(event)
+
+        if (!combo) {
+          return
+        }
+
+        setBinding(capturing, [combo])
+        endCapture()
+
+        return
+      }
+
+      const combo = comboFromEvent(event)
+
+      if (!combo) {
+        return
+      }
+
+      const actionId = $comboIndex.get().get(combo)
+
+      if (!actionId) {
+        return
+      }
+
+      if (isEditableTarget(event.target) && !comboAllowedInInput(combo)) {
+        return
+      }
+
+      const handler = handlersRef.current[actionId]
+
+      if (!handler) {
+        return
+      }
+
+      event.preventDefault()
+      handler()
+    }
+
+    window.addEventListener('keydown', onKeyDown, { capture: true })
+
+    return () => window.removeEventListener('keydown', onKeyDown, { capture: true })
+  }, [])
+}

package/src/app/hooks/use-refresh-hotkey.ts

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react'
+
+/**
+ * Binds the bare `r` key to a refresh action while the calling view is mounted.
+ * Ignored when a modifier is held, the event repeats, or focus is in an
+ * editable field (so typing "r" in a search/input never triggers it).
+ */
+export function useRefreshHotkey(onRefresh: () => void, enabled = true) {
+  const ref = useRef(onRefresh)
+  ref.current = onRefresh
+
+  useEffect(() => {
+    if (!enabled) {
+      return
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'r' && event.key !== 'R') {
+        return
+      }
+
+      if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey || event.repeat) {
+        return
+      }
+
+      const target = event.target as HTMLElement | null
+
+      if (
+        target?.isContentEditable ||
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement
+      ) {
+        return
+      }
+
+      event.preventDefault()
+      ref.current()
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [enabled])
+}

package/src/app/hooks/use-route-enum-param.ts

@@ -0,0 +1,38 @@
+import { useCallback, useMemo } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+// Read/write an enum-shaped URL search param (e.g. ?tab=foo). Used to make
+// tabbed views survive a refresh. Always navigates with replace so tab clicks
+// don't pile up in history.
+export function useRouteEnumParam<T extends string>(
+  key: string,
+  values: readonly T[],
+  fallback: T
+): [T, (next: T) => void] {
+  const { hash, pathname, search } = useLocation()
+  const navigate = useNavigate()
+
+  const value = useMemo<T>(() => {
+    const raw = new URLSearchParams(search).get(key)
+
+    return raw && values.includes(raw as T) ? (raw as T) : fallback
+  }, [fallback, key, search, values])
+
+  const setValue = useCallback(
+    (next: T) => {
+      const params = new URLSearchParams(search)
+
+      if (next === fallback) {
+        params.delete(key)
+      } else {
+        params.set(key, next)
+      }
+
+      const qs = params.toString()
+      navigate({ hash, pathname, search: qs ? `?${qs}` : '' }, { replace: true })
+    },
+    [fallback, hash, key, navigate, pathname, search]
+  )
+
+  return [value, setValue]
+}

package/src/app/index.tsx

@@ -0,0 +1 @@
+export { DesktopController as default } from './desktop-controller'

package/src/app/layout-constants.ts

@@ -0,0 +1,13 @@
+// Responsive horizontal gutter for primary content bodies (settings right side,
+// skills, artifacts, command center / sessions). Ratio-based so it scales with
+// the window, but clamped so it never collapses on narrow widths or runs away
+// on ultrawide displays. Headers/tabs intentionally keep their own tighter
+// padding.
+//
+// NOTE: these must stay literal strings — Tailwind's scanner only picks up
+// complete class names, so do not build them via template interpolation.
+export const PAGE_INSET_X = 'px-[clamp(1.25rem,4vw,4rem)]'
+
+// Matching negative inline-margin to bleed an element (e.g. a sticky header bar)
+// out to the gutter edges before re-applying PAGE_INSET_X.
+export const PAGE_INSET_NEG_X = '-mx-[clamp(1.25rem,4vw,4rem)]'