zidane-ui/session holds the desktop app's session surfaces: the Todos, Queue and Artifacts panels, the read-only todo list a todowrite call shows, the Diffs panel's changed-files tree, the session header, the welcome screen, and the dialogs for session details, turn details, running work and usage. They read a SessionHost. The Todos panel shows the session's plan: the one the agent applies, else the one that stopped, else the last that closed (a proposal waiting for a decision shows in the Inbox). The previews below run on the fixture host. Click a step to rename it, cancel or retry it, add one, or stop and drop the plan.

Mount it#

Wrap the panels in a SessionProvider and pass the session id. The data and the actions come from the host.

import 'zidane-ui/styles.css'
import { SessionProvider, TodosPanel } from 'zidane-ui/session'

export function Todos({ host, sessionId }) {
  return (
    <SessionProvider host={host}>
      <TodosPanel sessionId={sessionId} />
    </SessionProvider>
  )
}

AppHostProvider (zidane-ui/app) puts host.session in a SessionProvider for you.

Pick a host#

zidane-server answers stored artifacts, not rendered rows, so the server host shows each artifact's label under its raw kind. The server renders a transcript export (sessions.export) and the server host hands it to saveExport (a browser download, say), offering details.export only with one. The side chat is sessions.sideSession, sessions.create with sideOf and sessions.delete. A row re-resolves on the server (artifacts.refresh, with the extensions of the artifact's folder), a title's status is the server's (sessions.titleStatus) the welcome screen sums the server's store (usage.summary, the server's local days) and the usage panel shows the providers' subscription windows, probed with the server's credentials (usage.providers), and GitHub's API limits as the server sees them (usage.github); each is offered when the connection may call it.

What a host offers#

Every member is optional. A panel hides what needs a member the host leaves out.

useSessionPlans(id), useSessionQueue(id), useSessionArtifacts(id) and useSessionRunningWork(id) read one session and re-render only when that session changes. useUsageSummary(range) keeps the last summary across mounts (and in localStorage), so the welcome screen paints its numbers on the first frame. useProviderUsage() reads the subscription windows; a ProviderUsageProvider above it probes every minute while the page is visible and focused, and catches up when it gets focus back (autoLoad={false} leaves only the manual refresh).

Parts#

The Inbox is the chat area's InboxPanel (zidane-ui/chat/interactions): what the agent waits on in a session (ChatHost.interactions), the head request open as a card, the older ones collapsed under it. A resolved card leaves on the exit motion. focus hands keyboard focus to the head card once, and onEscape gives the keyboard back. useInteractionHead(id), usePendingInteractions(id) and useAllInteractions() read the same requests for badges and dots; useAllInteractions needs interactions.all, which the server host leaves out.

collectSessionDiffs turns a transcript's edit events into one patch per change, and groupByPath groups them by file. The desktop app's Diffs tab reads both.

Reminders#

RemindersPanel is the desktop app's Reminders tab: the reminders of the session beside it, or all of them. It has the create form (the time words, read in the browser's time zone, with a preview of when it sends), and each row's actions: pause and resume, run now, delete, keep a repeat the agent set, and its fire history. It says so when Reminders is off, and renders nothing when the host has no schedules.

import { RemindersPanel, SessionProvider } from 'zidane-ui/session'

<SessionProvider host={host}>
  <RemindersPanel sessionId={sessionId} />
</SessionProvider>

useSchedulesStatus(), useSessionSchedules(id) and useAllSchedules() read them. createSchedulesState (zidane-ui/session/headless) is the store a host builds on, and readReminderWhen(text, now) reads the time words with a typed reason when it fails. createServerSessionHost offers schedules over schedules.* and reads again on schedules:changed. On the fixture host, control.setSchedules(list) stands in for the agent setting one, and control.setSchedulesEnabled(on) for the setting.

Two more places show reminders. The composer's reminders badge counts the session's reminders that will fire and shows the next time (Next 09:00). It opens the reminders tab when your app has one. A sidebar row with scheduleId (SessionRow.scheduleId) shows a clock mark, and SidebarFilterMenu's origin prop adds the Origin row (All, Scheduled, Not scheduled). Pass origin while Reminders is on.

Session actions#

createSessionActions(deps) (zidane-ui/session/headless) is what the keys, menus and palette do to a session: generateTitle, compact, exportMarkdown / exportJson, remove (asks confirm first, in the sidebar's wording), toggleFavorite, copyId, and fork(sessionId, turnId). It runs over session (SessionHost.details, turns) and sessions (ChatHost.sessions or your directory); each action whose capability is missing is absent. refresh, open, copyText, idOf and onError are your app's. Actions never reject except fork: a failure goes to onError.

sessionKeyCommands(actions, session) binds them to the catalog's session keys for useKeyCommands (zidane-ui/keybindings): none without a session, no favorite on the main session.

const actions = createSessionActions({ session: host.session, sessions: host.chat.sessions, confirm, copyText: (t) => navigator.clipboard.writeText(t) })
useKeyCommands(sessionKeyCommands(actions, session))

Test your host#

zidane-ui/session/testing/contract is the suite every host runs, in your own vitest. Build your host over a backend that holds the data it is given, and list the members it offers.

import { describeSessionHostContract } from 'zidane-ui/session/testing/contract'

describeSessionHostContract('my host', backend => makeHarness(backend), ['plans', 'plans.edit', 'plans.control', 'queue', 'artifacts'])