nastechai-desktop 18.1.0

package/src/app/shell/statusbar-controls.tsx

@@ -0,0 +1,185 @@
+import type { ComponentProps, ReactNode } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { cn } from '@/lib/utils'
+
+// Shared chrome styling for interactive statusbar items (button / link / menu
+// trigger). The 'text' variant intentionally omits hover/transition/disabled.
+const STATUSBAR_ACTION_CLASS =
+  'inline-flex h-full items-center gap-1 rounded-none px-1.5 text-[0.6875rem] text-(--ui-text-tertiary) transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground disabled:cursor-default disabled:opacity-45'
+
+export interface StatusbarMenuItem {
+  id: string
+  icon?: ReactNode
+  label: string
+  className?: string
+  disabled?: boolean
+  hidden?: boolean
+  href?: string
+  onSelect?: () => void
+  title?: string
+  to?: string
+}
+
+export interface StatusbarItem {
+  id: string
+  label?: ReactNode
+  detail?: ReactNode
+  icon?: ReactNode
+  className?: string
+  disabled?: boolean
+  hidden?: boolean
+  href?: string
+  menuAlign?: 'center' | 'end' | 'start'
+  menuClassName?: string
+  menuContent?: ReactNode
+  menuItems?: readonly StatusbarMenuItem[]
+  onSelect?: () => void
+  title?: string
+  to?: string
+  variant?: 'action' | 'link' | 'menu' | 'text'
+}
+
+export type StatusbarItemSide = 'left' | 'right'
+export type SetStatusbarItemGroup = (id: string, items: readonly StatusbarItem[], side?: StatusbarItemSide) => void
+
+interface StatusbarControlsProps extends ComponentProps<'footer'> {
+  leftItems?: readonly StatusbarItem[]
+  items?: readonly StatusbarItem[]
+}
+
+export function StatusbarControls({ className, leftItems = [], items = [], ...props }: StatusbarControlsProps) {
+  const navigate = useNavigate()
+
+  return (
+    <footer
+      className={cn(
+        'flex h-5 shrink-0 items-stretch justify-between gap-2 border-t border-(--ui-stroke-tertiary) bg-(--ui-sidebar-surface-background) px-1 py-0 text-(--ui-text-tertiary) [-webkit-app-region:no-drag]',
+        className
+      )}
+      {...props}
+    >
+      {/* `overflow-x-clip` (not `overflow-x-auto`) so a wide status item — for
+          example "Connecting…" on a fresh/untitled session — can't paint a
+          horizontal scrollbar across the bottom of the window. Items already
+          `truncate` their labels, so clipping is the right behavior. */}
+      <div className="flex min-w-0 items-stretch gap-0.5 overflow-x-clip">
+        {leftItems
+          .filter(item => !item.hidden)
+          .map(item => (
+            <StatusbarItemView item={item} key={`left:${item.id}`} navigate={navigate} />
+          ))}
+      </div>
+      <div className="flex min-w-0 items-stretch gap-0.5 overflow-x-clip">
+        {items
+          .filter(item => !item.hidden)
+          .map(item => (
+            <StatusbarItemView item={item} key={`right:${item.id}`} navigate={navigate} />
+          ))}
+      </div>
+    </footer>
+  )
+}
+
+function StatusbarItemView({ item, navigate }: { item: StatusbarItem; navigate: ReturnType<typeof useNavigate> }) {
+  const content = (
+    <>
+      {item.icon}
+      {item.label && <span className="truncate">{item.label}</span>}
+      {item.detail && <span className="truncate text-muted-foreground/80">{item.detail}</span>}
+    </>
+  )
+
+  if (item.variant === 'menu' && (item.menuContent || (item.menuItems && item.menuItems.length > 0))) {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className={cn(STATUSBAR_ACTION_CLASS, item.className)} disabled={item.disabled} type="button">
+            {content}
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align={item.menuAlign ?? 'start'}
+          className={cn('w-56', item.menuContent && 'p-0', item.menuClassName)}
+          side="top"
+          sideOffset={8}
+        >
+          {item.menuContent
+            ? item.menuContent
+            : (item.menuItems ?? [])
+                .filter(menuItem => !menuItem.hidden)
+                .map(menuItem => (
+                  <DropdownMenuItem
+                    className={cn('gap-2 text-foreground focus:bg-accent [&_svg]:size-4', menuItem.className)}
+                    disabled={menuItem.disabled}
+                    key={menuItem.id}
+                    onSelect={() => {
+                      if (menuItem.to) {
+                        navigate(menuItem.to)
+                      }
+
+                      menuItem.onSelect?.()
+                    }}
+                  >
+                    {menuItem.href ? (
+                      <a
+                        className="inline-flex w-full items-center gap-2"
+                        href={menuItem.href}
+                        rel="noreferrer"
+                        target="_blank"
+                      >
+                        {menuItem.icon}
+                        <span className="truncate">{menuItem.label}</span>
+                      </a>
+                    ) : (
+                      <>
+                        {menuItem.icon}
+                        <span className="truncate">{menuItem.label}</span>
+                      </>
+                    )}
+                  </DropdownMenuItem>
+                ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+  }
+
+  if (item.variant === 'text' && !item.onSelect && !item.to && !item.href) {
+    return (
+      <div
+        className={cn(
+          'inline-flex h-full items-center gap-1 px-1.5 text-[0.6875rem] text-(--ui-text-tertiary)',
+          item.className
+        )}
+      >
+        {content}
+      </div>
+    )
+  }
+
+  if (item.href || item.variant === 'link') {
+    return (
+      <a className={cn(STATUSBAR_ACTION_CLASS, item.className)} href={item.href} rel="noreferrer" target="_blank">
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <button
+      className={cn(STATUSBAR_ACTION_CLASS, item.className)}
+      disabled={item.disabled}
+      onClick={() => {
+        if (item.to) {
+          navigate(item.to)
+        }
+
+        item.onSelect?.()
+      }}
+      type="button"
+    >
+      {content}
+    </button>
+  )
+}

package/src/app/shell/titlebar-controls.tsx

@@ -0,0 +1,244 @@
+import { useStore } from '@nanostores/react'
+import type { ComponentProps, ReactNode } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { cn } from '@/lib/utils'
+import { $hapticsMuted, toggleHapticsMuted } from '@/store/haptics'
+import { toggleKeybindPanel } from '@/store/keybinds'
+import {
+  $fileBrowserOpen,
+  $panesFlipped,
+  $sidebarOpen,
+  toggleFileBrowserOpen,
+  togglePanesFlipped,
+  toggleSidebarOpen
+} from '@/store/layout'
+
+import { appViewForPath, isOverlayView } from '../routes'
+
+import { titlebarButtonClass } from './titlebar'
+
+export interface TitlebarTool {
+  id: string
+  label: string
+  active?: boolean
+  className?: string
+  disabled?: boolean
+  hidden?: boolean
+  href?: string
+  icon: ReactNode
+  onSelect?: () => void
+  title?: string
+  to?: string
+}
+
+export type TitlebarToolSide = 'left' | 'right'
+export type SetTitlebarToolGroup = (id: string, tools: readonly TitlebarTool[], side?: TitlebarToolSide) => void
+
+interface TitlebarControlsProps extends ComponentProps<'div'> {
+  leftTools?: readonly TitlebarTool[]
+  tools?: readonly TitlebarTool[]
+  onOpenSettings: () => void
+}
+
+export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }: TitlebarControlsProps) {
+  const { t } = useI18n()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const hapticsMuted = useStore($hapticsMuted)
+  const fileBrowserOpen = useStore($fileBrowserOpen)
+  const sidebarOpen = useStore($sidebarOpen)
+  const panesFlipped = useStore($panesFlipped)
+
+  const toggleHaptics = () => {
+    if (!hapticsMuted) {
+      triggerHaptic('tap')
+    }
+
+    toggleHapticsMuted()
+
+    if (hapticsMuted) {
+      window.requestAnimationFrame(() => triggerHaptic('success'))
+    }
+  }
+
+  // Each titlebar button controls the pane physically on its side, so a flip
+  // swaps which pane each one toggles. Default: sessions left, file browser
+  // right. Flipped: file browser left, sessions right. Sidebar toggles never
+  // carry an active highlight — they're plain show/hide affordances.
+  const fileBrowserEdge = { open: fileBrowserOpen, toggle: toggleFileBrowserOpen }
+  const sessionsEdge = { open: sidebarOpen, toggle: toggleSidebarOpen }
+  const leftEdge = panesFlipped ? fileBrowserEdge : sessionsEdge
+  const rightEdge = panesFlipped ? sessionsEdge : fileBrowserEdge
+
+  const leftToolbarTools: TitlebarTool[] = [
+    {
+      icon: <Codicon name="layout-sidebar-left" />,
+      id: 'sidebar',
+      label: leftEdge.open ? t.titlebar.hideSidebar : t.titlebar.showSidebar,
+      onSelect: () => {
+        triggerHaptic('tap')
+        leftEdge.toggle()
+      }
+    },
+    {
+      icon: <Codicon name="arrow-swap" />,
+      id: 'flip-panes',
+      label: t.titlebar.swapSidebarSides,
+      onSelect: () => {
+        triggerHaptic('tap')
+        togglePanesFlipped()
+      },
+      title: t.titlebar.swapSidebarSidesTitle
+    },
+    ...leftTools
+  ]
+
+  const rightSidebarTool: TitlebarTool = {
+    icon: <Codicon name="layout-sidebar-right" />,
+    id: 'right-sidebar',
+    label: rightEdge.open ? t.titlebar.hideRightSidebar : t.titlebar.showRightSidebar,
+    onSelect: () => {
+      triggerHaptic('tap')
+      rightEdge.toggle()
+    }
+  }
+
+  // Static system tools — always pinned to the screen's right edge.
+  const systemTools: TitlebarTool[] = [
+    {
+      active: hapticsMuted,
+      icon: <Codicon name={hapticsMuted ? 'mute' : 'unmute'} />,
+      id: 'haptics',
+      label: hapticsMuted ? t.titlebar.unmuteHaptics : t.titlebar.muteHaptics,
+      onSelect: toggleHaptics
+    },
+    {
+      icon: <Codicon name="keyboard" />,
+      id: 'keybinds',
+      label: t.titlebar.openKeybinds,
+      onSelect: () => {
+        triggerHaptic('open')
+        toggleKeybindPanel()
+      }
+    },
+    {
+      icon: <Codicon name="settings-gear" />,
+      id: 'settings',
+      label: t.titlebar.openSettings,
+      onSelect: () => {
+        triggerHaptic('open')
+        onOpenSettings()
+      }
+    }
+  ]
+
+  // While a full-screen overlay (settings, command center, …) is open it should
+  // visually own the window. These control clusters are `fixed` at a higher
+  // z-index than the overlay card, so they'd otherwise bleed over it — hide them
+  // and let the overlay's own chrome (close button, drag region) take over.
+  if (isOverlayView(appViewForPath(location.pathname))) {
+    return null
+  }
+
+  const visibleSystemTools = systemTools.filter(tool => !tool.hidden)
+  const settingsTool = visibleSystemTools.find(tool => tool.id === 'settings')
+  const visibleSystemToolsBeforeSettings = visibleSystemTools.filter(tool => tool.id !== 'settings')
+  const visiblePaneTools = tools.filter(tool => !tool.hidden)
+
+  return (
+    <>
+      <div
+        aria-label={t.shell.windowControls}
+        className="fixed left-(--titlebar-controls-left) top-(--titlebar-controls-top) z-70 flex translate-y-0.5 flex-row items-center gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
+      >
+        {leftToolbarTools
+          .filter(tool => !tool.hidden)
+          .map(tool => (
+            <TitlebarToolButton key={tool.id} navigate={navigate} tool={tool} />
+          ))}
+      </div>
+
+      {/*
+        Pane-scoped tools (preview's monitor / devtools / refresh / X) render
+        as their own fixed cluster. AppShell sets --shell-preview-toolbar-gap
+        to either the static cluster's width (file-browser closed → cluster
+        sits flush against system tools) or the file-browser pane's width
+        (file-browser open → cluster sits flush against the file-browser pane,
+        i.e. at the preview pane's right edge). No margin hacks needed.
+      */}
+      {visiblePaneTools.length > 0 && (
+        <div
+          aria-label={t.shell.paneControls}
+          className="fixed top-(--titlebar-controls-top) right-[calc(var(--titlebar-tools-right)+var(--shell-preview-toolbar-gap,0))] z-70 flex flex-row items-center gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
+        >
+          {visiblePaneTools.map(tool => (
+            <TitlebarToolButton key={tool.id} navigate={navigate} tool={tool} />
+          ))}
+        </div>
+      )}
+
+      <div
+        aria-label={t.shell.appControls}
+        className="fixed right-(--titlebar-tools-right) top-(--titlebar-controls-top) z-70 flex flex-row items-center justify-end gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
+      >
+        {visibleSystemToolsBeforeSettings.map(tool => (
+          <TitlebarToolButton key={tool.id} navigate={navigate} tool={tool} />
+        ))}
+        {settingsTool && <TitlebarToolButton navigate={navigate} tool={settingsTool} />}
+        <TitlebarToolButton navigate={navigate} tool={rightSidebarTool} />
+      </div>
+    </>
+  )
+}
+
+function TitlebarToolButton({ navigate, tool }: { navigate: ReturnType<typeof useNavigate>; tool: TitlebarTool }) {
+  // Titlebar actions never show an active background — state reads from the
+  // icon itself (e.g. the mute/unmute glyph). aria-pressed still carries it
+  // for a11y.
+  const className = cn(titlebarButtonClass, 'bg-transparent select-none', tool.className)
+
+  if (tool.href) {
+    return (
+      <Button asChild className={className} size="icon-titlebar" variant="ghost">
+        <a
+          aria-label={tool.label}
+          href={tool.href}
+          onPointerDown={event => event.stopPropagation()}
+          rel="noreferrer"
+          target="_blank"
+          title={tool.title ?? tool.label}
+        >
+          {tool.icon}
+        </a>
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      aria-label={tool.label}
+      aria-pressed={tool.active ?? undefined}
+      className={className}
+      disabled={tool.disabled}
+      onClick={() => {
+        if (tool.to) {
+          navigate(tool.to)
+        }
+
+        tool.onSelect?.()
+      }}
+      onPointerDown={event => event.stopPropagation()}
+      size="icon-titlebar"
+      title={tool.title ?? tool.label}
+      type="button"
+      variant="ghost"
+    >
+      {tool.icon}
+    </Button>
+  )
+}

package/src/app/shell/titlebar.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  TITLEBAR_CONTROL_OFFSET_X,
+  TITLEBAR_EDGE_INSET,
+  TITLEBAR_FALLBACK_WINDOW_BUTTON_X,
+  titlebarControlsPosition
+} from './titlebar'
+
+describe('titlebarControlsPosition', () => {
+  it('offsets controls from visible traffic lights', () => {
+    expect(titlebarControlsPosition({ x: 24, y: 10 }).left).toBe(24 + TITLEBAR_CONTROL_OFFSET_X)
+  })
+
+  it('pins to the edge when macOS fullscreen hides traffic lights', () => {
+    expect(titlebarControlsPosition({ x: 24, y: 10 }, true).left).toBe(TITLEBAR_EDGE_INSET)
+  })
+
+  it('pins to the edge on Windows/Linux where native controls render on the right', () => {
+    expect(titlebarControlsPosition(null).left).toBe(TITLEBAR_EDGE_INSET)
+  })
+
+  it('uses the macOS fallback while the initial window state is unknown', () => {
+    expect(titlebarControlsPosition(undefined).left).toBe(TITLEBAR_FALLBACK_WINDOW_BUTTON_X + TITLEBAR_CONTROL_OFFSET_X)
+  })
+})

package/src/app/shell/titlebar.ts

@@ -0,0 +1,45 @@
+import type { NasTechConnection } from '@/global'
+
+export const TITLEBAR_HEIGHT = 34
+export const MACOS_TRAFFIC_LIGHTS_HEIGHT = 14
+export const TITLEBAR_ICON_SIZE = 12
+export const TITLEBAR_CONTROL_OFFSET_X = 74
+export const TITLEBAR_CONTROL_HEIGHT = 22
+export const TITLEBAR_CONTROLS_TOP = (TITLEBAR_HEIGHT - TITLEBAR_CONTROL_HEIGHT) / 2
+export const TITLEBAR_FALLBACK_WINDOW_BUTTON_X = 24
+// Edge inset used when no left-side native controls take up that space —
+// Windows/Linux (native overlay is on the right) and macOS fullscreen
+// (traffic lights are hidden). Matches the right-cluster's 0.75rem padding.
+export const TITLEBAR_EDGE_INSET = 14
+
+// Titlebar palette only. All sizing/radius/cursor/centering come from the
+// shared <Button size="icon-titlebar"> (used polymorphically via asChild) —
+// Button is the single source of button styling.
+export const titlebarButtonClass =
+  'text-muted-foreground/85 hover:bg-(--ui-control-hover-background) hover:text-foreground'
+
+export const titlebarHeaderBaseClass =
+  'pointer-events-none relative z-3 flex h-(--titlebar-height) shrink-0 items-center justify-start gap-3 border-b border-(--ui-stroke-tertiary) bg-(--ui-chat-surface-background) px-[max(0.75rem,var(--titlebar-content-inset,0rem))]'
+
+export const titlebarHeaderShadowClass =
+  "after:pointer-events-none after:absolute after:left-0 after:right-0 after:top-full after:h-4 after:bg-linear-to-b after:from-(--ui-chat-surface-background) after:to-transparent after:content-['']"
+
+export function titlebarControlsPosition(
+  windowButtonPosition: NasTechConnection['windowButtonPosition'] | undefined,
+  isFullscreen = false
+) {
+  const top = Math.max(0, TITLEBAR_CONTROLS_TOP)
+
+  // No left-side native controls to dodge:
+  //   - Windows/Linux: native min/max/close render on the right via titleBarOverlay.
+  //   - macOS fullscreen: traffic lights are hidden.
+  // In both cases, pin the cluster to the edge with a small inset.
+  if (windowButtonPosition === null || isFullscreen) {
+    return { left: TITLEBAR_EDGE_INSET, top }
+  }
+
+  return {
+    left: (windowButtonPosition?.x ?? TITLEBAR_FALLBACK_WINDOW_BUTTON_X) + TITLEBAR_CONTROL_OFFSET_X,
+    top
+  }
+}

package/src/app/shell/use-group-registry.ts

@@ -0,0 +1,39 @@
+import { useCallback, useMemo, useState } from 'react'
+
+type Side = 'left' | 'right'
+type Groups<T> = Record<Side, Record<string, readonly T[]>>
+
+export type GroupSetter<T> = (id: string, items: readonly T[], side?: Side) => void
+
+interface GroupRegistry<T> {
+  flat: { left: T[]; right: T[] }
+  set: GroupSetter<T>
+}
+
+export function useGroupRegistry<T>(): GroupRegistry<T> {
+  const [groups, setGroups] = useState<Groups<T>>({ left: {}, right: {} })
+
+  const set = useCallback<GroupSetter<T>>((id, items, side = 'right') => {
+    setGroups(current => {
+      const next = { ...current, [side]: { ...current[side] } }
+
+      if (items.length === 0) {
+        delete next[side][id]
+      } else {
+        next[side][id] = items
+      }
+
+      return next
+    })
+  }, [])
+
+  const flat = useMemo(
+    () => ({
+      left: Object.values(groups.left).flat(),
+      right: Object.values(groups.right).flat()
+    }),
+    [groups]
+  )
+
+  return { flat, set }
+}

package/src/app/skills/index.test.tsx

@@ -0,0 +1,103 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const getSkills = vi.fn()
+const getToolsets = vi.fn()
+const toggleSkill = vi.fn()
+const toggleToolset = vi.fn()
+const getToolsetConfig = vi.fn()
+const selectToolsetProvider = vi.fn()
+
+vi.mock('@/nastech', () => ({
+  getSkills: () => getSkills(),
+  getToolsets: () => getToolsets(),
+  toggleSkill: (name: string, enabled: boolean) => toggleSkill(name, enabled),
+  toggleToolset: (name: string, enabled: boolean) => toggleToolset(name, enabled),
+  getToolsetConfig: (name: string) => getToolsetConfig(name),
+  selectToolsetProvider: (toolset: string, provider: string) => selectToolsetProvider(toolset, provider),
+  deleteEnvVar: vi.fn(),
+  revealEnvVar: vi.fn(),
+  setEnvVar: vi.fn()
+}))
+
+// Notifications hit nanostores/timers we don't care about here.
+vi.mock('@/store/notifications', () => ({
+  notify: vi.fn(),
+  notifyError: vi.fn()
+}))
+
+function toolset(overrides: Record<string, unknown> = {}) {
+  return {
+    name: 'web',
+    label: 'Web Search',
+    description: 'web_search, web_extract',
+    enabled: true,
+    available: true,
+    configured: true,
+    tools: ['web_search', 'web_extract'],
+    ...overrides
+  }
+}
+
+function renderSkills() {
+  return import('./index').then(({ SkillsView }) =>
+    render(
+      <MemoryRouter initialEntries={['/skills?tab=toolsets']}>
+        <SkillsView />
+      </MemoryRouter>
+    )
+  )
+}
+
+beforeEach(() => {
+  getSkills.mockResolvedValue([])
+  getToolsets.mockResolvedValue([toolset()])
+  toggleToolset.mockResolvedValue({ ok: true, name: 'web', enabled: false })
+  getToolsetConfig.mockResolvedValue({ has_category: false, active_provider: null, providers: [] })
+})
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+describe('SkillsView toolset management', () => {
+  it('renders a switch for each toolset and toggles it off', async () => {
+    await renderSkills()
+
+    const sw = await screen.findByRole('switch', { name: 'Toggle Web Search toolset' })
+    expect(sw.getAttribute('aria-checked')).toBe('true')
+
+    fireEvent.click(sw)
+
+    await waitFor(() => expect(toggleToolset).toHaveBeenCalledWith('web', false))
+  })
+
+  it('renders toolset titles without leading emoji', async () => {
+    getToolsets.mockResolvedValue([
+      toolset({ name: 'cronjob', label: '⏰ Cron Jobs', description: 'cron tools' })
+    ])
+
+    await renderSkills()
+
+    expect(await screen.findByText('Cron Jobs')).toBeTruthy()
+    expect(screen.queryByText(/⏰/)).toBeNull()
+  })
+
+  it('keeps the configured pill alongside the switch', async () => {
+    await renderSkills()
+
+    await screen.findByRole('switch', { name: 'Toggle Web Search toolset' })
+    expect(screen.getByText('Configured')).toBeTruthy()
+  })
+
+  it('expands the provider config panel when the configured pill is clicked', async () => {
+    await renderSkills()
+
+    const configureBtn = await screen.findByRole('button', { name: 'Configure Web Search' })
+    fireEvent.click(configureBtn)
+
+    await waitFor(() => expect(getToolsetConfig).toHaveBeenCalledWith('web'))
+  })
+})