Files

zidane-ui/files holds the desktop app's Files and Diffs tabs. FilesTab shows a folder's tree beside its open files. A file opens in the viewer, or in the editor when the host can write, and a changed file opens on its working-tree diff. The tab searches file names and contents, finds in the file on screen, and shows project-tool and language-server findings. DiffsTab shows what changed: the session's edits and the working tree against HEAD, a file tree beside virtualised diffs you can comment on. A FilesHost provides the files, the git state and the editor preferences. The previews below run on a fixture host.

Mount it#

import { createServerClient, createServerFilesHost } from 'zidane-ui/adapters'
import { FilesProvider, FilesTab } from 'zidane-ui/files'

const client = createServerClient({ url, token })
const files = createServerFilesHost({ client, sessionOf: cwd => openSessionFor(cwd), storage: localStorage })

export function FilesPanel({ session }) {
  return (
    <FilesProvider host={files}>
      <FilesTab scope={{ root: session.cwd, cwd: session.cwd, session: session.id }} />
    </FilesProvider>
  )
}

AppHostProvider (zidane-ui/app) puts host.files in a FilesProvider for you. The tabs fill their parent (flex-1 min-h-0): give them a sized frame, like a side panel's slot.

What the app plugs in#

The tabs read data from the host, and take what only the app knows as props:

Pick a host#

The server host does not read the handshake: every member is there whatever the token may call. Gate it yourself, and leave files out of the AppHost unless client.can('sessions.workspaceListFiles'). Built without that check, a server or token without the workspace methods shows a Files tab whose every listing fails. Build your own remote app shows it with the other hosts.

Test your host#

import { describeFilesHostContract } from 'zidane-ui/files/testing/contract'

describeFilesHostContract('my host', backend => makeHarness(backend), ['list', 'read', 'write'])