feat(webui): add workspace file tree with preview and chat attach

THIRD_PARTY_NOTICES.md

@@ -3,6 +3,10 @@
 This file records third-party attribution for assets bundled with OpenSquilla.
 It covers:
 
+- The workspace file-tree features in `opensquilla-webui/` (file tree model,
+  lazy per-directory loading store, and virtualized row layout), which are
+  adapted from anomalyco/opencode (MIT) — see the section below.
+
 - The bundled skill descriptors under `src/opensquilla/skills/bundled/`, which
   include OpenClaw-derived MIT descriptors and OpenSquilla-original descriptors.
 - The bundled pptx skill references the python-pptx and PptxGenJS libraries;
@@ -648,3 +652,38 @@ The SquillaRouter bundle contains `.pkl` and `.joblib` artifacts used by the
 current V4 Phase 3 runtime. Treat these artifacts as executable-code-equivalent
 inputs: load only assets shipped with a trusted OpenSquilla release or assets
 whose checksums match `artifact_manifest.json`.
+
+## Workspace File Tree (adapted from anomalyco/opencode)
+
+The Web UI's workspace file-tree model, virtualized row layout, and lazy
+per-directory loading store are adapted (re-implemented for Vue 3 / Pinia and
+OpenSquilla types) from [anomalyco/opencode](https://github.com/anomalyco/opencode),
+MIT License, Copyright (c) 2025 opencode:
+
+- `opensquilla-webui/src/lib/fileTreeModel.ts` ← `packages/app/src/components/file-tree-v2-model.ts`
+- `opensquilla-webui/src/stores/fileTree.ts` ← `packages/app/src/context/file/tree-store.ts`
+- `opensquilla-webui/src/components/SidebarFileTree.vue` ← `packages/app/src/components/file-tree-v2.tsx` (render approach)
+
+Full MIT license text:
+
+    MIT License
+
+    Copyright (c) 2025 opencode
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.

opensquilla-webui/package.json

@@ -24,6 +24,7 @@
     "node": ">=22.12.0"
   },
   "dependencies": {
+    "@tanstack/vue-virtual": "^3.13.36",
     "@types/dompurify": "^3.0.5",
     "dompurify": "^3.4.12",
     "highlight.js": "^11.11.1",

opensquilla-webui/src/App.vue

@@ -77,8 +77,10 @@
 
     <SidebarSetupBanner />
 
-    <!-- Recent conversations -->
+    <!-- Recent conversations (kept mounted while the file-tree view is
+         active so scroll/selection state survives the swap) -->
     <SidebarConversations
+      v-show="sidebarView === 'tasks'"
       :sections="sidebarSections"
       :session-order="sidebarSessionOrder"
       :error="sessionListError"
@@ -104,11 +106,21 @@
       @new-project-task="startProjectTask"
       @project-pin="onProjectPin"
       @project-edit="openProjectEditor"
+      @view-workspace-files="viewWorkspaceFiles"
       @project-delete-history="onProjectDeleteHistory"
       @project-remove="onProjectRemove"
       @search="openCommandPalette"
     />
 
+    <!-- Workspace file tree (swaps the conversation list in place) -->
+    <SidebarFileTree
+      v-if="fileTreeWorkspace"
+      :workspace="fileTreeWorkspace"
+      @close="closeWorkspaceFiles"
+      @preview="onFileTreePreview"
+      @attach="onFileTreeAttach"
+    />
+
     <!-- Fixed footer: settings + connection state -->
     <div class="sidebar-foot">
       <button
@@ -476,6 +488,11 @@ import DesktopUpdateIndicator from './components/DesktopUpdateIndicator.vue'
 import ChatSystemStatus from './components/chat/ChatSystemStatus.vue'
 import ChatHeaderActions from './components/chat/ChatHeaderActions.vue'
 import SidebarConversations from './components/SidebarConversations.vue'
+import SidebarFileTree from './components/SidebarFileTree.vue'
+import type { FileTreeWorkspace } from './stores/fileTree'
+import { useWorkbenchStore } from './workbench/store'
+import { createWorkspaceFileWorkbenchItem } from './workbench/workspaceFileItems'
+import { requestWorkspaceFileAttach } from './workbench/workspaceFileAttachEvent'
 import SidebarSetupBanner from './components/SidebarSetupBanner.vue'
 import SidebarResizer from './components/SidebarResizer.vue'
 import CommandPalette from './components/CommandPalette.vue'
@@ -548,6 +565,7 @@ const sessionLifecycle = injectedSessionLifecycle
 const injectedApprovalCenter = inject(APPROVAL_CENTER_KEY)
 if (!injectedApprovalCenter) throw new Error('ApprovalCenter was not provided')
 const approvalCenter = injectedApprovalCenter
+const workbenchStore = useWorkbenchStore()
 const shortcutsStore = useShortcutsStore()
 const artifactImageLightbox = provideArtifactImageLightbox()
 const { t } = useI18n()
@@ -1290,6 +1308,54 @@ function startProjectTask(workspaceId: string) {
   })
 }
 
+// ---- Workspace file-tree sidebar view -----------------------------------
+// The sidebar swaps its body between the task/conversation list and the
+// file tree of a project workspace. The list component is kept mounted
+// (v-show) so scroll position and selection state survive the swap.
+const fileTreeWorkspace = ref<FileTreeWorkspace | null>(null)
+const sidebarView = computed<'tasks' | 'files'>(() =>
+  fileTreeWorkspace.value ? 'files' : 'tasks',
+)
+
+function viewWorkspaceFiles(workspaceId: string) {
+  const item = projectWorkspaces.byId.value.get(workspaceId)
+  if (!item || !item.available) return
+  handleNavClick()
+  fileTreeWorkspace.value = { id: item.id, name: item.name, path: item.path }
+}
+
+function closeWorkspaceFiles() {
+  fileTreeWorkspace.value = null
+}
+
+function onFileTreePreview(payload: { workspace: FileTreeWorkspace; path: string }) {
+  const item = createWorkspaceFileWorkbenchItem({
+    workspaceId: payload.workspace.id,
+    workspaceName: payload.workspace.name,
+    workspacePath: payload.workspace.path,
+    path: payload.path,
+  })
+  workbenchStore.openItem(item)
+  workbenchStore.setExpanded(true)
+}
+
+function onFileTreeAttach(payload: {
+  workspace: FileTreeWorkspace
+  path: string
+  name: string
+  size?: number
+}) {
+  // The visible ChatView owns the composer attachment channel; it listens for
+  // this event and stages the file through the normal upload pipeline.
+  requestWorkspaceFileAttach({
+    workspaceId: payload.workspace.id,
+    workspacePath: payload.workspace.path,
+    path: payload.path,
+    name: payload.name,
+    size: payload.size,
+  })
+}
+
 function projectNameFromPath(path: string): string {
   const normalized = path.trim().replace(/[\\/]+$/, '')
   return normalized.split(/[\\/]/).pop() || normalized

opensquilla-webui/src/adapters/gateway/gatewayAdapters.test.ts

@@ -33,6 +33,7 @@ describe('Gateway Adapter composition', () => {
       'pendingInputQueue',
       'approvalCenter',
       'goalCenter',
+      'workspaceFiles',
     ])
     expect(adapters).not.toHaveProperty('rpc')
     expect(adapters).not.toHaveProperty('events')

opensquilla-webui/src/adapters/gateway/gatewayAdapters.ts

@@ -16,6 +16,8 @@ import type { ApprovalCenter } from '@/modules/approvalCenter'
 import type { HttpRequestOptions } from './privateHttpTransport'
 import type { GoalCenter } from '@/modules/goalCenter'
 import { createV4GoalCenter } from './goalCenterV4'
+import type { WorkspaceFiles } from '@/modules/workspaceFiles'
+import { createWorkspaceFiles } from './workspaceFiles'
 
 type RpcStoreTransportSource = Parameters<typeof createPrivateGatewayTransports>[0]
 
@@ -28,6 +30,7 @@ export interface GatewayAdapters {
   readonly pendingInputQueue: PendingInputQueuePort
   readonly approvalCenter: ApprovalCenter
   readonly goalCenter: GoalCenter
+  readonly workspaceFiles: WorkspaceFiles
 }
 
 interface GatewayHttpSource {
@@ -62,6 +65,7 @@ export function createGatewayAdapters(
     pendingInputQueue: createV4PendingInputQueue(transports.rpc),
     approvalCenter: createApprovalCenterV4(transports.rpc, transports.events, { http }),
     goalCenter: createV4GoalCenter(transports.rpc),
+    workspaceFiles: createWorkspaceFiles({ http }),
   }
   return adapters
 }

opensquilla-webui/src/adapters/gateway/workspaceFiles.test.ts

@@ -0,0 +1,113 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { WorkspaceFilesError } from '@/modules/workspaceFiles'
+import { HttpTransportError } from './privateHttpTransport'
+import { createWorkspaceFiles, type WorkspaceFilesHttpTransport } from './workspaceFiles'
+
+function harness() {
+  const requestJson = vi.fn(async (
+    _endpoint: string,
+    _options?: { method?: 'GET'; signal?: AbortSignal; timeoutMs?: number },
+  ): Promise<unknown> => {
+    if (_endpoint.startsWith('/api/v1/files/content?')) {
+      return {
+        path: 'README.md',
+        size: 11,
+        binary: false,
+        truncated: false,
+        content: 'README root\n',
+      }
+    }
+    return {
+      path: '',
+      entries: [
+        { name: 'src', path: 'src', type: 'directory' },
+        { name: 'README.md', path: 'README.md', type: 'file', size: 11, mtime: 123 },
+      ],
+    }
+  })
+  const http: WorkspaceFilesHttpTransport = {
+    requestJson: requestJson as unknown as WorkspaceFilesHttpTransport['requestJson'],
+  }
+  const adapter = createWorkspaceFiles({ http })
+  return { adapter, requestJson }
+}
+
+describe('workspaceFiles gateway adapter', () => {
+  it('lists a directory with the workspace query parameter', async () => {
+    const { adapter, requestJson } = harness()
+    const listing = await adapter.listDir('ws-1', '')
+
+    expect(requestJson).toHaveBeenCalledWith(
+      '/api/v1/files?workspace=ws-1',
+      expect.objectContaining({ method: 'GET' }),
+    )
+    expect(listing.entries.map((entry) => entry.path)).toEqual(['src', 'README.md'])
+    expect(listing.entries[1]).toMatchObject({ name: 'README.md', type: 'file', size: 11 })
+  })
+
+  it('includes the path parameter for nested directories', async () => {
+    const { adapter, requestJson } = harness()
+
+    await adapter.listDir('ws-1', 'src/lib')
+
+    expect(requestJson).toHaveBeenCalledWith(
+      '/api/v1/files?workspace=ws-1&path=src%2Flib',
+      expect.objectContaining({ method: 'GET' }),
+    )
+  })
+
+  it('reads bounded text content', async () => {
+    const { adapter, requestJson } = harness()
+    const content = await adapter.readFile('ws-1', 'README.md')
+
+    expect(requestJson).toHaveBeenCalledWith(
+      '/api/v1/files/content?workspace=ws-1&path=README.md',
+      expect.objectContaining({ method: 'GET' }),
+    )
+    expect(content).toMatchObject({
+      path: 'README.md',
+      binary: false,
+      truncated: false,
+      content: 'README root\n',
+    })
+  })
+
+  it('maps http-status failures onto domain error kinds with the gateway detail', async () => {
+    const { adapter, requestJson } = harness()
+    requestJson.mockImplementation(async () => {
+      throw new HttpTransportError(
+        'http-status',
+        'Gateway HTTP request failed with status 404.',
+        404,
+        { error: 'path not found' },
+      )
+    })
+
+    const error = await adapter.readFile('ws-1', 'missing.txt').catch(
+      (caught: unknown) => caught,
+    )
+    expect(error).toBeInstanceOf(WorkspaceFilesError)
+    expect(error).toMatchObject({ kind: 'not-found', message: 'path not found' })
+  })
+
+  it('maps non-status transport failures onto the unavailable kind', async () => {
+    const { adapter, requestJson } = harness()
+    requestJson.mockImplementation(async () => {
+      throw new HttpTransportError('network', 'Gateway HTTP transport is unavailable.')
+    })
+
+    const error = await adapter.listDir('ws-1', '').catch((caught: unknown) => caught)
+    expect(error).toBeInstanceOf(WorkspaceFilesError)
+    expect(error).toMatchObject({ kind: 'unavailable' })
+  })
+
+  it('rejects malformed listings with a domain error', async () => {
+    const { adapter, requestJson } = harness()
+    requestJson.mockImplementation(async () => ({ unexpected: true }))
+
+    const error = await adapter.listDir('ws-1', '').catch((caught: unknown) => caught)
+    expect(error).toBeInstanceOf(WorkspaceFilesError)
+    expect(error).toMatchObject({ kind: 'unavailable' })
+  })
+})