nastechai-desktop 18.1.0

package/src/app/right-sidebar/index.test.tsx

@@ -0,0 +1,75 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { NasTechReadDirResult } from '@/global'
+import { $connection, setCurrentCwd } from '@/store/session'
+
+import { resetProjectTreeState } from './files/use-project-tree'
+
+import { RightSidebarPane } from './index'
+
+const readDir = vi.fn<(path: string) => Promise<NasTechReadDirResult>>()
+const selectPaths = vi.fn()
+
+function ok(entries: { name: string; path: string; isDirectory: boolean }[]): NasTechReadDirResult {
+  return { entries }
+}
+
+function installBridge() {
+  ;(
+    window as unknown as {
+      nastechDesktop: {
+        readDir: typeof readDir
+        selectPaths: typeof selectPaths
+      }
+    }
+  ).nastechDesktop = { readDir, selectPaths }
+}
+
+describe('RightSidebarPane', () => {
+  beforeEach(() => {
+    $connection.set(null)
+    resetProjectTreeState()
+    setCurrentCwd('/repo')
+    readDir.mockReset()
+    selectPaths.mockReset()
+    readDir.mockResolvedValue(ok([{ name: 'README.md', path: '/repo/README.md', isDirectory: false }]))
+    selectPaths.mockResolvedValue(['/repo-next'])
+    installBridge()
+  })
+
+  afterEach(() => {
+    cleanup()
+    $connection.set(null)
+    setCurrentCwd('')
+    resetProjectTreeState()
+    delete (window as unknown as { nastechDesktop?: unknown }).nastechDesktop
+  })
+
+  it('refreshes the current tree without opening the folder picker', async () => {
+    const onChangeCwd = vi.fn()
+
+    render(<RightSidebarPane onActivateFile={vi.fn()} onActivateFolder={vi.fn()} onChangeCwd={onChangeCwd} />)
+
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Refresh tree' }).hasAttribute('disabled')).toBe(false))
+
+    readDir.mockClear()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Refresh tree' }))
+
+    await waitFor(() => expect(readDir).toHaveBeenCalledWith('/repo'))
+    expect(selectPaths).not.toHaveBeenCalled()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open folder' }))
+
+    await waitFor(() =>
+      expect(selectPaths).toHaveBeenCalledWith({
+        defaultPath: '/repo',
+        directories: true,
+        multiple: false,
+        title: 'Change working directory'
+      })
+    )
+    await waitFor(() => expect(onChangeCwd).toHaveBeenCalledWith('/repo-next'))
+  })
+})

package/src/app/right-sidebar/index.tsx

@@ -0,0 +1,395 @@
+import { useStore } from '@nanostores/react'
+import type { ReactNode } from 'react'
+
+import { ErrorBoundary } from '@/components/error-boundary'
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { useI18n } from '@/i18n'
+import { Loader } from '@/components/ui/loader'
+import { Tip } from '@/components/ui/tooltip'
+import { normalizeOrLocalPreviewTarget } from '@/lib/local-preview'
+import { cn } from '@/lib/utils'
+import { $panesFlipped } from '@/store/layout'
+import { notifyError } from '@/store/notifications'
+import { setCurrentSessionPreviewTarget } from '@/store/preview'
+import { $currentBranch, $currentCwd } from '@/store/session'
+
+import { SidebarPanelLabel } from '../shell/sidebar-label'
+
+import { ProjectTree } from './files/tree'
+import { useProjectTree } from './files/use-project-tree'
+import { $rightSidebarTab, $terminalTakeover, type RightSidebarTabId, setRightSidebarTab } from './store'
+import { TerminalSlot } from './terminal/persistent'
+
+interface RightSidebarPaneProps {
+  onActivateFile: (path: string) => void
+  onActivateFolder: (path: string) => void
+  onChangeCwd: (path: string) => Promise<void> | void
+}
+
+interface RightSidebarTab {
+  icon: string
+  id: RightSidebarTabId
+  labelKey: 'files' | 'terminal'
+}
+
+const RIGHT_SIDEBAR_TABS: readonly RightSidebarTab[] = [
+  { id: 'files', labelKey: 'files', icon: 'list-tree' },
+  { id: 'terminal', labelKey: 'terminal', icon: 'terminal' }
+]
+
+export function RightSidebarPane({ onActivateFile, onActivateFolder, onChangeCwd }: RightSidebarPaneProps) {
+  const { t } = useI18n()
+  const r = t.rightSidebar
+  const activeTab = useStore($rightSidebarTab)
+  const terminalTakeover = useStore($terminalTakeover)
+  const panesFlipped = useStore($panesFlipped)
+  const currentBranch = useStore($currentBranch).trim()
+  const currentCwd = useStore($currentCwd).trim()
+  const hasCwd = currentCwd.length > 0
+
+  const cwdName = hasCwd
+    ? (currentCwd
+        .split(/[\\/]+/)
+        .filter(Boolean)
+        .pop() ?? currentCwd)
+    : r.noFolderSelected
+
+  const {
+    collapseAll,
+    collapseNonce,
+    data,
+    loadChildren,
+    openState,
+    refreshRoot,
+    rootError,
+    rootLoading,
+    setNodeOpen
+  } = useProjectTree(currentCwd)
+
+  const canCollapse = Object.values(openState).some(Boolean)
+  const effectiveTab: RightSidebarTabId = terminalTakeover ? 'files' : activeTab
+
+  const chooseFolder = async () => {
+    const selected = await window.NASTECHDesktop?.selectPaths({
+      defaultPath: hasCwd ? currentCwd : undefined,
+      directories: true,
+      multiple: false,
+      title: r.changeCwdTitle
+    })
+
+    if (selected?.[0]) {
+      await onChangeCwd(selected[0])
+    }
+  }
+
+  const previewFile = async (path: string) => {
+    try {
+      const preview = await normalizeOrLocalPreviewTarget(path, currentCwd || undefined)
+
+      if (!preview) {
+        throw new Error(r.couldNotPreview(path))
+      }
+
+      setCurrentSessionPreviewTarget(preview, 'file-browser', path)
+    } catch (error) {
+      notifyError(error, r.previewUnavailable)
+    }
+  }
+
+  const tabs = terminalTakeover ? RIGHT_SIDEBAR_TABS.filter(tab => tab.id !== 'terminal') : RIGHT_SIDEBAR_TABS
+
+  return (
+    <aside
+      aria-label={r.aria}
+      className={cn(
+        'before:pointer-events-none relative flex h-full w-full min-w-0 flex-col overflow-hidden border-(--ui-stroke-secondary) bg-(--ui-sidebar-surface-background) pt-(--titlebar-height) text-(--ui-text-tertiary)',
+        panesFlipped
+          ? 'border-r shadow-[inset_-0.0625rem_0_0_color-mix(in_srgb,white_18%,transparent)]'
+          : 'border-l shadow-[inset_0.0625rem_0_0_color-mix(in_srgb,white_18%,transparent)]'
+      )}
+    >
+      <RightSidebarChrome activeTab={effectiveTab} branch={currentBranch} tabs={tabs} />
+
+      {effectiveTab === 'terminal' ? (
+        <TerminalSlot />
+      ) : (
+        <FilesystemTab
+          canCollapse={canCollapse}
+          collapseNonce={collapseNonce}
+          cwd={currentCwd}
+          cwdName={cwdName}
+          data={data}
+          error={rootError}
+          hasCwd={hasCwd}
+          loading={rootLoading}
+          onActivateFile={onActivateFile}
+          onActivateFolder={onActivateFolder}
+          onChangeFolder={chooseFolder}
+          onCollapseAll={collapseAll}
+          onLoadChildren={loadChildren}
+          onNodeOpenChange={setNodeOpen}
+          onPreviewFile={previewFile}
+          onRefresh={() => void refreshRoot()}
+          openState={openState}
+        />
+      )}
+    </aside>
+  )
+}
+
+function RightSidebarChrome({
+  activeTab,
+  branch,
+  tabs
+}: {
+  activeTab: RightSidebarTabId
+  branch: string
+  tabs: readonly RightSidebarTab[]
+}) {
+  const { t } = useI18n()
+  const r = t.rightSidebar
+
+  return (
+    <header className="shrink-0 bg-transparent text-[0.75rem]">
+      <div className="flex items-center gap-2 px-2.5 py-1">
+        <nav aria-label={r.panelsAria} className="flex min-w-0 items-center gap-1">
+          {tabs.map(tab => {
+            const label = r[tab.labelKey]
+
+            return (
+              <Tip key={tab.id} label={label}>
+                <Button
+                  aria-label={label}
+                  aria-pressed={tab.id === activeTab}
+                  className={cn(
+                    'text-(--ui-text-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground',
+                    tab.id === activeTab && 'bg-(--ui-control-active-background) text-foreground'
+                  )}
+                  onClick={() => setRightSidebarTab(tab.id)}
+                  size="icon-xs"
+                  variant="ghost"
+                >
+                  <Codicon name={tab.icon} size="0.875rem" />
+                </Button>
+              </Tip>
+            )
+          })}
+        </nav>
+
+        {branch && (
+          <span className="ml-auto flex min-w-0 items-center gap-1 text-[0.6875rem] text-(--ui-text-tertiary)">
+            <Codicon className="shrink-0" name="git-branch" size="0.75rem" />
+            <span className="truncate">{branch}</span>
+          </span>
+        )}
+      </div>
+    </header>
+  )
+}
+
+interface FilesystemTabProps extends FileTreeBodyProps {
+  canCollapse: boolean
+  cwdName: string
+  hasCwd: boolean
+  onChangeFolder: () => Promise<void> | void
+  onCollapseAll: () => void
+  onRefresh: () => void
+}
+
+// Sidebar-specific color/hover treatment only — size, radius, cursor and the
+// base focus ring come from <Button size="icon-xs">. This constant exists
+// purely to share the sidebar palette + the hover-reveal behavior below.
+const HEADER_ACTION_CLASS =
+  'text-sidebar-foreground/70 hover:bg-sidebar-accent! hover:text-sidebar-accent-foreground! focus-visible:ring-sidebar-ring'
+
+const HEADER_ACTION_REVEAL_CLASS = `${HEADER_ACTION_CLASS} pointer-events-none opacity-0 transition-opacity focus-visible:opacity-100 group-focus-within/project-header:pointer-events-auto group-focus-within/project-header:opacity-100 group-hover/project-header:pointer-events-auto group-hover/project-header:opacity-100`
+
+function FilesystemTab({
+  canCollapse,
+  collapseNonce,
+  cwd,
+  cwdName,
+  data,
+  error,
+  hasCwd,
+  loading,
+  onActivateFile,
+  onActivateFolder,
+  onChangeFolder,
+  onCollapseAll,
+  onLoadChildren,
+  onNodeOpenChange,
+  onPreviewFile,
+  onRefresh,
+  openState
+}: FilesystemTabProps) {
+  const { t } = useI18n()
+  const r = t.rightSidebar
+
+  return (
+    <div className="group/project-header flex min-h-0 flex-1 flex-col">
+      <RightSidebarSectionHeader>
+        <Tip label={hasCwd ? r.folderTip(cwd) : r.openFolder}>
+          <button
+            className="flex min-w-0 flex-1 items-center rounded-md text-left hover:text-(--ui-text-secondary)"
+            onClick={() => void onChangeFolder()}
+            type="button"
+          >
+            <SidebarPanelLabel>{cwdName}</SidebarPanelLabel>
+          </button>
+        </Tip>
+        <Button
+          aria-label={r.refreshTree}
+          className={HEADER_ACTION_CLASS}
+          disabled={!hasCwd || loading}
+          onClick={onRefresh}
+          size="icon-xs"
+          variant="ghost"
+        >
+          <Codicon name="refresh" size="0.8125rem" spinning={loading} />
+        </Button>
+        <Button
+          aria-label={r.openFolder}
+          className={HEADER_ACTION_CLASS}
+          onClick={() => void onChangeFolder()}
+          size="icon-xs"
+          variant="ghost"
+        >
+          <Codicon name="folder-opened" size="0.8125rem" />
+        </Button>
+        <Button
+          aria-label={r.collapseAll}
+          className={HEADER_ACTION_REVEAL_CLASS}
+          disabled={!hasCwd || !canCollapse}
+          onClick={onCollapseAll}
+          size="icon-xs"
+          variant="ghost"
+        >
+          <Codicon name="collapse-all" size="0.8125rem" />
+        </Button>
+      </RightSidebarSectionHeader>
+      <FileTreeBody
+        collapseNonce={collapseNonce}
+        cwd={cwd}
+        data={data}
+        error={error}
+        loading={loading}
+        onActivateFile={onActivateFile}
+        onActivateFolder={onActivateFolder}
+        onLoadChildren={onLoadChildren}
+        onNodeOpenChange={onNodeOpenChange}
+        onPreviewFile={onPreviewFile}
+        openState={openState}
+      />
+    </div>
+  )
+}
+
+export function RightSidebarSectionHeader({ children }: { children: ReactNode }) {
+  return <div className="flex h-7 shrink-0 items-center px-2.5">{children}</div>
+}
+
+interface FileTreeBodyProps {
+  collapseNonce: number
+  cwd: string
+  data: ReturnType<typeof useProjectTree>['data']
+  error: string | null
+  loading: boolean
+  onActivateFile: (path: string) => void
+  onActivateFolder: (path: string) => void
+  onLoadChildren: (id: string) => void | Promise<void>
+  onNodeOpenChange: (id: string, open: boolean) => void
+  onPreviewFile?: (path: string) => void
+  openState: ReturnType<typeof useProjectTree>['openState']
+}
+
+function FileTreeBody({
+  collapseNonce,
+  cwd,
+  data,
+  error,
+  loading,
+  onActivateFile,
+  onActivateFolder,
+  onLoadChildren,
+  onNodeOpenChange,
+  onPreviewFile,
+  openState
+}: FileTreeBodyProps) {
+  const { t } = useI18n()
+  const r = t.rightSidebar
+
+  if (!cwd) {
+    return <EmptyState body={r.noProjectBody} title={r.noProjectTitle} />
+  }
+
+  if (error) {
+    return <EmptyState body={r.unreadableBody(error)} title={r.unreadableTitle} />
+  }
+
+  if (loading && data.length === 0) {
+    return <FileTreeLoadingState />
+  }
+
+  if (data.length === 0) {
+    return <EmptyState body={r.emptyBody} title={r.emptyTitle} />
+  }
+
+  return (
+    <ErrorBoundary
+      fallback={({ reset }) => (
+        <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-4 text-center">
+          <EmptyState body={r.treeErrorBody} title={r.treeErrorTitle} />
+          <button
+            className="text-[0.68rem] font-medium text-muted-foreground transition hover:text-foreground"
+            onClick={reset}
+            type="button"
+          >
+            {r.tryAgain}
+          </button>
+        </div>
+      )}
+      key={cwd}
+      label="file-tree"
+    >
+      <ProjectTree
+        collapseNonce={collapseNonce}
+        cwd={cwd}
+        data={data}
+        onActivateFile={onActivateFile}
+        onActivateFolder={onActivateFolder}
+        onLoadChildren={onLoadChildren}
+        onNodeOpenChange={onNodeOpenChange}
+        onPreviewFile={onPreviewFile}
+        openState={openState}
+      />
+    </ErrorBoundary>
+  )
+}
+
+function FileTreeLoadingState() {
+  const { t } = useI18n()
+
+  return (
+    <div aria-label={t.rightSidebar.loadingTree} className="grid min-h-0 flex-1 place-items-center px-3" role="status">
+      <Loader
+        aria-hidden="true"
+        className="size-8 text-(--ui-text-tertiary)"
+        pathSteps={180}
+        role="presentation"
+        strokeScale={0.68}
+        type="spiral-search"
+      />
+    </div>
+  )
+}
+
+function EmptyState({ body, title }: { body: string; title: string }) {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-1 px-4 text-center">
+      <div className="text-[0.7rem] font-semibold uppercase tracking-[0.07em] text-muted-foreground/75">{title}</div>
+      <div className="text-[0.68rem] leading-relaxed text-muted-foreground/65">{body}</div>
+    </div>
+  )
+}

package/src/app/right-sidebar/store.ts

@@ -0,0 +1,15 @@
+import { atom } from 'nanostores'
+
+import { persistBoolean, storedBoolean } from '@/lib/storage'
+
+export type RightSidebarTabId = 'files' | 'git' | 'terminal' | 'web'
+
+const TAKEOVER_KEY = 'NASTECH.desktop.terminalTakeover'
+
+export const $rightSidebarTab = atom<RightSidebarTabId>('files')
+export const $terminalTakeover = atom(storedBoolean(TAKEOVER_KEY, false))
+
+$terminalTakeover.subscribe(active => persistBoolean(TAKEOVER_KEY, active))
+
+export const setRightSidebarTab = (tab: RightSidebarTabId) => $rightSidebarTab.set(tab)
+export const setTerminalTakeover = (active: boolean) => $terminalTakeover.set(active)

package/src/app/right-sidebar/terminal/buffer.ts

@@ -0,0 +1,65 @@
+import type { Terminal } from '@xterm/xterm'
+
+// Serialized view of the in-app terminal, handed to the agent's `read_terminal`
+// tool. Line indices are absolute into xterm's buffer (0 = oldest scrollback
+// line), so the agent can page with start_line/count against `total_lines`.
+export interface TerminalReadResult {
+  total_lines: number
+  start: number
+  end: number
+  viewport_rows: number
+  cursor_row: number
+  text: string
+}
+
+export interface TerminalReadOptions {
+  start?: number
+  count?: number
+}
+
+type Reader = (opts: TerminalReadOptions) => TerminalReadResult
+
+// The persistent terminal is a singleton (one xterm mounted forever), so a
+// module-level slot is enough — set while the session is live, cleared on
+// dispose. The gateway `terminal.read.request` handler reads through this.
+let activeReader: Reader | null = null
+
+export function setActiveTerminalReader(reader: Reader | null): void {
+  activeReader = reader
+}
+
+export function readActiveTerminal(opts: TerminalReadOptions = {}): TerminalReadResult | null {
+  return activeReader ? activeReader(opts) : null
+}
+
+export function makeTerminalReader(term: Terminal): Reader {
+  return ({ start, count }) => {
+    const buf = term.buffer.active
+    const total = buf.length
+    const rows = term.rows
+    // Default window = the visible screen; baseY is the viewport's top row.
+    const from = Math.max(0, Math.min(start ?? buf.baseY, total))
+    const to = Math.max(from, Math.min(from + Math.max(1, count ?? rows), total))
+
+    const lines: string[] = []
+
+    // translateToString(true) right-trims and resolves wide chars, dropping SGR
+    // colors — exactly what the agent wants.
+    for (let i = from; i < to; i += 1) {
+      lines.push(buf.getLine(i)?.translateToString(true) ?? '')
+    }
+
+    while (lines.length && !lines[lines.length - 1].trim()) {
+      lines.pop()
+    }
+
+    return {
+      total_lines: total,
+      start: from,
+      end: to,
+      viewport_rows: rows,
+      cursor_row: buf.baseY + buf.cursorY,
+      text: lines.join('\n')
+    }
+  }
+}

package/src/app/right-sidebar/terminal/index.tsx

@@ -0,0 +1,98 @@
+import '@xterm/xterm/css/xterm.css'
+
+import { useStore } from '@nanostores/react'
+
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { Loader } from '@/components/ui/loader'
+import { Tip } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
+
+import { SidebarPanelLabel } from '../../shell/sidebar-label'
+import { $terminalTakeover, setRightSidebarTab, setTerminalTakeover } from '../store'
+
+import { addSelectionShortcutLabel } from './selection'
+import { useTerminalSession } from './use-terminal-session'
+
+interface TerminalTabProps {
+  cwd: string
+  onAddSelectionToChat: (text: string, label?: string) => void
+}
+
+export function TerminalTab({ cwd, onAddSelectionToChat }: TerminalTabProps) {
+  const { t } = useI18n()
+  const { addSelectionToChat, hostRef, selection, selectionStyle, shellName, status } = useTerminalSession({
+    cwd,
+    onAddSelectionToChat
+  })
+
+  const takeover = useStore($terminalTakeover)
+  const label = takeover ? t.rightSidebar.terminalSplit : t.rightSidebar.terminalFocus
+
+  const toggleTakeover = () => {
+    // Pre-select the Terminal tab so the slot is ready to host us on return.
+    if (takeover) {
+      setRightSidebarTab('terminal')
+    }
+
+    setTerminalTakeover(!takeover)
+  }
+
+  return (
+    <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
+      <div className="flex h-8 shrink-0 items-center gap-2 px-2.5">
+        <SidebarPanelLabel className="text-white!">{shellName}</SidebarPanelLabel>
+        <Tip label={label}>
+          <Button
+            aria-label={label}
+            className="ml-auto size-6 rounded-md text-white!"
+            onClick={toggleTakeover}
+            size="icon"
+            type="button"
+            variant="ghost"
+          >
+            <Codicon name={takeover ? 'screen-normal' : 'screen-full'} size="0.875rem" />
+          </Button>
+        </Tip>
+      </div>
+      <div className="relative min-h-0 flex-1 bg-[#002b36] p-2">
+        {status === 'starting' && (
+          <div className="pointer-events-none absolute inset-0 z-10 grid place-items-center">
+            <Loader
+              className="size-8 text-(--ui-text-tertiary)"
+              pathSteps={180}
+              strokeScale={0.68}
+              type="spiral-search"
+            />
+          </div>
+        )}
+        {selection.trim() && (
+          <div className="absolute z-50 flex items-center gap-1" style={selectionStyle ?? { right: 12, top: 8 }}>
+            <Button
+              className="h-6 rounded-md px-2 text-[0.68rem] shadow-md backdrop-blur-md"
+              onClick={event => event.preventDefault()}
+              onMouseDown={event => {
+                event.preventDefault()
+                event.stopPropagation()
+                addSelectionToChat()
+              }}
+              type="button"
+              variant="secondary"
+            >
+              {t.rightSidebar.addToChat}
+              <span className="ml-1 text-[0.6rem] text-(--ui-text-tertiary)">{addSelectionShortcutLabel()}</span>
+            </Button>
+          </div>
+        )}
+        {/* Outer div paints the dark inset; inner div is the xterm host so the
+            canvas sizes to the *content* area and p-2 shows as terminal padding.
+            Forcing screen/viewport bg avoids xterm's default black peeking
+            through the unused pixels below the last full row. */}
+        <div
+          className="h-full min-h-0 overflow-hidden text-(--ui-text-secondary) [&_.xterm]:h-full [&_.xterm-screen]:bg-[#002b36]! [&_.xterm-viewport]:bg-[#002b36]!"
+          ref={hostRef}
+        />
+      </div>
+    </div>
+  )
+}