@demicodes/web-ui 0.3.1

package/src/agent/workspace.ts

@@ -0,0 +1,355 @@
+import { computed, inject, provide, reactive, ref, type ComputedRef, type InjectionKey } from 'vue'
+import type { UserContentBlock } from '@demicodes/core'
+import type { ConversationSummary } from '@demicodes/agent'
+import type { ControlApi, ModelInfo, ProviderInfo } from '../transport/protocol'
+import { agentSocketUrl, connectAgentClient } from '../transport/agent-socket'
+import { ConversationRuntime } from './conversation-runtime'
+import type { ConversationState, ModelIntent } from './types'
+
+export interface AgentWorkspaceParams {
+  baseUrl: string
+  control: ControlApi
+  cwd: string
+  idFactory?: () => string
+}
+
+interface PersistedWorkspace {
+  order: string[]
+  activeId: string | null
+  conversations: { id: string; title: string; createdAt: string; model: ModelIntent }[]
+}
+
+function workspaceStorage(): Storage | null {
+  try {
+    return typeof localStorage !== 'undefined' ? localStorage : null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Client-side workspace store. Owns the open conversations (tabs), their
+ * reactive state, and the AgentClient runtimes. Replaces agent-gui's
+ * server-synced `rpc.agent`/`rpc.project` state.
+ */
+export class AgentWorkspace {
+  readonly sessions = reactive<Record<string, ConversationState>>({})
+  readonly order = ref<string[]>([])
+  readonly activeId = ref<string | null>(null)
+  readonly providers = ref<ProviderInfo[]>([])
+  readonly models = reactive<Record<string, ModelInfo[]>>({})
+  // All persisted conversations for this cwd, from the server (the history list,
+  // independent of which tabs are open or of localStorage).
+  readonly serverConversations = ref<ConversationSummary[]>([])
+
+  readonly tabs: ComputedRef<ConversationState[]> = computed(() =>
+    this.order.value.map((id) => this.sessions[id]).filter((state): state is ConversationState => !!state),
+  )
+  readonly activeSession: ComputedRef<ConversationState | null> = computed(() =>
+    this.activeId.value ? this.sessions[this.activeId.value] ?? null : null,
+  )
+
+  private readonly runtimes = new Map<string, ConversationRuntime>()
+  private readonly baseUrl: string
+  private readonly control: ControlApi
+  private readonly cwd: string
+  private readonly idFactory: () => string
+  private defaultModel: ModelIntent | null = null
+  private titleCounter = 0
+
+  private readonly storageKey: string
+
+  constructor(params: AgentWorkspaceParams) {
+    this.baseUrl = params.baseUrl
+    this.control = params.control
+    this.cwd = params.cwd
+    this.idFactory = params.idFactory ?? (() => globalThis.crypto.randomUUID())
+    this.storageKey = `demi.conversations.${params.cwd}`
+  }
+
+  async init(): Promise<void> {
+    await this.loadCatalog()
+    // Restore previously open conversations (their transcripts come back from
+    // the server on connect, keyed by the conversation id). Fall back to a
+    // fresh one when nothing is persisted.
+    const restored = this.restorePersisted()
+    // The server owns the full conversation list (survives a cleared browser).
+    this.serverConversations.value = await this.loadServerConversations()
+    if (!restored) {
+      // Nothing remembered locally — recover the most recent conversation from
+      // the server, or start fresh if there is none.
+      const recent = this.serverConversations.value[0]
+      if (recent) this.openConversation(recent)
+      else this.createConversation()
+    }
+    // Connect the visible conversation so a restored transcript loads on open.
+    this.connectActive()
+  }
+
+  /** Re-fetch the server conversation list (e.g. when the history menu opens). */
+  async refreshServerConversations(): Promise<void> {
+    this.serverConversations.value = await this.loadServerConversations()
+  }
+
+  /** Open a conversation by id (an existing tab, or one from the history list). */
+  openConversation(summary: { id: string; title?: string }): void {
+    if (!this.sessions[summary.id]) {
+      this.materializeConversation({
+        id: summary.id,
+        title: summary.title || this.nextTitle(),
+        createdAt: new Date().toISOString(),
+        model: this.defaultModel ?? this.fallbackModel(),
+      })
+      this.persist()
+    }
+    this.setActive(summary.id)
+    this.connectActive()
+  }
+
+  private async loadServerConversations(): Promise<ConversationSummary[]> {
+    try {
+      const client = await connectAgentClient(agentSocketUrl(this.baseUrl, this.cwd))
+      try {
+        return await client.listConversations(this.cwd)
+      } finally {
+        await client.close().catch(() => {})
+      }
+    } catch {
+      return this.serverConversations.value
+    }
+  }
+
+  private connectActive(): void {
+    const id = this.activeId.value
+    if (id) void this.runtimes.get(id)?.connect().catch(() => {})
+  }
+
+  async loadCatalog(): Promise<void> {
+    const providers = await this.control.listProviders()
+    this.providers.value = providers
+    for (const provider of providers) {
+      if (!provider.isAvailable) continue
+      try {
+        this.models[provider.id] = await this.control.listModels({ providerId: provider.id })
+      } catch {
+        this.models[provider.id] = []
+      }
+    }
+    this.defaultModel = this.resolveDefaultModel()
+  }
+
+  createConversation(options: { afterId?: string; title?: string } = {}): string {
+    const id = this.materializeConversation(
+      {
+        id: this.idFactory(),
+        title: options.title ?? this.nextTitle(),
+        createdAt: new Date().toISOString(),
+        model: this.defaultModel ?? this.fallbackModel(),
+      },
+      options.afterId,
+    )
+    this.activeId.value = id
+    this.persist()
+    return id
+  }
+
+  // Create the reactive state + runtime for a conversation and slot it into the
+  // tab order. Shared by new conversations and persistence restore.
+  private materializeConversation(
+    meta: { id: string; title: string; createdAt: string; model: ModelIntent },
+    afterId?: string,
+  ): string {
+    const state = reactive<ConversationState>({
+      id: meta.id,
+      cwd: this.cwd,
+      title: meta.title,
+      createdAt: meta.createdAt,
+      blocks: [],
+      phase: 'idle',
+      queue: [],
+      pendingSteers: [],
+      model: meta.model,
+      draft: null,
+      isResultSeen: true,
+      hasContent: false,
+      lastError: null,
+    })
+    this.sessions[meta.id] = state
+    this.runtimes.set(meta.id, new ConversationRuntime(state, this.baseUrl, this.control))
+    const index = afterId ? this.order.value.indexOf(afterId) + 1 : this.order.value.length
+    this.order.value = [...this.order.value.slice(0, index), meta.id, ...this.order.value.slice(index)]
+    return meta.id
+  }
+
+  async closeConversation(id: string): Promise<void> {
+    this.order.value = this.order.value.filter((entry) => entry !== id)
+    delete this.sessions[id]
+    if (this.activeId.value === id) this.activeId.value = this.order.value[0] ?? null
+    const runtime = this.runtimes.get(id)
+    this.runtimes.delete(id)
+    this.persist()
+    await runtime?.dispose()
+  }
+
+  setActive(id: string): void {
+    if (!this.sessions[id]) return
+    this.activeId.value = id
+    const state = this.sessions[id]
+    if (state) state.isResultSeen = true
+    this.connectActive()
+    this.persist()
+  }
+
+  reorderTabs(ids: string[]): void {
+    this.order.value = ids
+    this.persist()
+  }
+
+  renameConversation(id: string, title: string): void {
+    const state = this.sessions[id]
+    if (state) state.title = title
+    this.persist()
+  }
+
+  setModel(id: string, model: ModelIntent): void {
+    const state = this.sessions[id]
+    if (state) state.model = model
+    // Push to an open session so the next turn uses the new model; no-op until it opens.
+    void this.runtimes.get(id)?.setModel()
+    this.persist()
+  }
+
+  send(id: string, content: UserContentBlock[]): Promise<void> {
+    return this.runtime(id).send(content)
+  }
+
+  dequeueMessage(id: string, messageId: string): void {
+    this.runtimes.get(id)?.dequeueMessage(messageId)
+  }
+
+  sendQueuedMessage(id: string, messageId: string): void {
+    this.runtimes.get(id)?.sendQueuedMessage(messageId)
+  }
+
+  steerQueuedMessage(id: string, messageId: string): Promise<void> {
+    return this.runtime(id).steerQueuedMessage(messageId)
+  }
+
+  clearMessageQueue(id: string): void {
+    const messageIds = this.sessions[id]?.queue.map((message) => message.id) ?? []
+    this.runtimes.get(id)?.clearMessageQueue(messageIds)
+  }
+
+  steer(id: string, content: UserContentBlock[]): Promise<void> {
+    return this.runtime(id).steer(content)
+  }
+
+  deletePendingSteer(id: string, steerId: string): void {
+    this.runtimes.get(id)?.deletePendingSteer(steerId)
+  }
+
+  abort(id: string): Promise<void> {
+    return this.runtime(id).abort()
+  }
+
+  retry(id: string): Promise<void> {
+    return this.runtime(id).retry()
+  }
+
+  resume(id: string): Promise<void> {
+    return this.runtime(id).resume()
+  }
+
+  compact(id: string): Promise<void> {
+    return this.runtime(id).compact()
+  }
+
+  async dispose(): Promise<void> {
+    const runtimes = [...this.runtimes.values()]
+    this.runtimes.clear()
+    await Promise.all(runtimes.map((runtime) => runtime.dispose()))
+  }
+
+  private runtime(id: string): ConversationRuntime {
+    const runtime = this.runtimes.get(id)
+    if (!runtime) throw new Error(`No conversation runtime for ${id}`)
+    return runtime
+  }
+
+  // Persist the conversation list (ids/titles/models/order) per cwd. Transcripts
+  // are not stored here — they are restored from the server by conversation id.
+  private persist(): void {
+    const storage = workspaceStorage()
+    if (!storage) return
+    const conversations = this.order.value
+      .map((id) => this.sessions[id])
+      .filter((state): state is ConversationState => !!state)
+      .map((state) => ({ id: state.id, title: state.title, createdAt: state.createdAt, model: state.model }))
+    const payload: PersistedWorkspace = { order: this.order.value, activeId: this.activeId.value, conversations }
+    try {
+      storage.setItem(this.storageKey, JSON.stringify(payload))
+    } catch {
+      // Storage full or unavailable — persistence is best-effort.
+    }
+  }
+
+  // Returns true if conversations were restored from storage.
+  private restorePersisted(): boolean {
+    const storage = workspaceStorage()
+    if (!storage) return false
+    let payload: PersistedWorkspace | null = null
+    try {
+      const raw = storage.getItem(this.storageKey)
+      payload = raw ? (JSON.parse(raw) as PersistedWorkspace) : null
+    } catch {
+      payload = null
+    }
+    const conversations = payload?.conversations ?? []
+    if (conversations.length === 0) return false
+    const byId = new Map(conversations.map((conversation) => [conversation.id, conversation]))
+    const order = (payload?.order ?? []).filter((id) => byId.has(id))
+    for (const id of order) {
+      const meta = byId.get(id)!
+      this.materializeConversation({ id: meta.id, title: meta.title, createdAt: meta.createdAt, model: meta.model })
+    }
+    this.titleCounter = order.length
+    this.activeId.value = payload?.activeId && byId.has(payload.activeId) ? payload.activeId : order[0] ?? null
+    return order.length > 0
+  }
+
+  private resolveDefaultModel(): ModelIntent | null {
+    for (const provider of this.providers.value) {
+      const model = this.models[provider.id]?.[0]
+      if (model) {
+        return {
+          providerId: provider.id,
+          modelId: model.id,
+          thinkingEffort: model.reasoning?.defaultEffort ?? null,
+          serviceTierId: null,
+        }
+      }
+    }
+    return null
+  }
+
+  private fallbackModel(): ModelIntent {
+    return { providerId: 'claude-code', modelId: 'default', thinkingEffort: null, serviceTierId: null }
+  }
+
+  private nextTitle(): string {
+    this.titleCounter += 1
+    return `Conversation ${this.titleCounter}`
+  }
+}
+
+const AGENT_WORKSPACE_KEY: InjectionKey<AgentWorkspace> = Symbol('demi.agent-workspace')
+
+export function provideAgentWorkspace(workspace: AgentWorkspace): void {
+  provide(AGENT_WORKSPACE_KEY, workspace)
+}
+
+export function useAgentWorkspace(): AgentWorkspace {
+  const workspace = inject(AGENT_WORKSPACE_KEY)
+  if (!workspace) throw new Error('AgentWorkspace is not provided')
+  return workspace
+}

package/src/composables/useBlockVirtualizer.ts

@@ -0,0 +1,290 @@
+import { computed, nextTick, ref, type Ref, watch } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+
+type ScrollIntent = 'up' | 'down' | null
+interface VirtualizedBlock {
+  id: string
+  type: string
+}
+
+const OVERSCAN = 8
+const BLOCK_GAP = 4
+const BOTTOM_THRESHOLD = 100
+const AUTO_SCROLL_REENGAGE_THRESHOLD = 1
+
+const BLOCK_HEIGHT_ESTIMATES: Record<string, number> = {
+  user: 40,
+  steer: 40,
+  pending_steer: 40,
+  resume: 0,
+  thinking: 20,
+  redacted_thinking: 0,
+  text: 40,
+  response: 24,
+  tool_call: 28,
+  error: 28,
+  abort: 0,
+  compaction_boundary: 36,
+  compaction_marker: 0,
+  extension_state_snapshot: 0,
+}
+
+export interface ScrollAnchor {
+  blockId: string
+  anchorIndex: number
+  offsetPx: number
+  scrollTop: number
+}
+
+export interface PersistedScrollState {
+  anchor: ScrollAnchor
+  heightCache: Map<string, number>
+}
+
+export function useBlockVirtualizer(
+  scrollContainer: Ref<HTMLDivElement | undefined>,
+  blocks: Ref<VirtualizedBlock[]>,
+  persistedState: PersistedScrollState | undefined,
+) {
+  const heightCache = new Map<string, number>(persistedState?.heightCache ?? [])
+
+  const scrollOffset = ref(0)
+  const isAtBottom = ref(true)
+  const isRestored = ref(false)
+
+  const virtualizer = useVirtualizer<HTMLDivElement, HTMLElement>(
+    computed(() => ({
+      count: blocks.value.length,
+      getScrollElement: () => scrollContainer.value ?? null,
+      estimateSize: (index: number) => {
+        const block = blocks.value[index]
+        if (!block) return 40
+        return heightCache.get(block.id) ?? (BLOCK_HEIGHT_ESTIMATES[block.type] ?? 40)
+      },
+      overscan: OVERSCAN,
+      gap: BLOCK_GAP,
+      getItemKey: (index: number) => {
+        const block = blocks.value[index]
+        return block ? block.id : index
+      },
+    })),
+  )
+
+  const virtualItems = computed(() => virtualizer.value.getVirtualItems())
+  const totalSize = computed(() => virtualizer.value.getTotalSize())
+
+  function measureElement(el: Element | null) {
+    if (!el) return
+    const index = Number((el as HTMLElement).dataset['index'])
+    const block = blocks.value[index]
+    virtualizer.value.measureElement(el as HTMLElement)
+    const nextMeasurement = virtualizer.value.measurementsCache[index]
+    if (block && nextMeasurement) heightCache.set(block.id, nextMeasurement.size)
+  }
+
+  const shouldAutoScroll = ref(true)
+  let isProgrammaticScroll = false
+  let pendingIntent: ScrollIntent = null
+  let touchStartY = 0
+  let furthestDistanceSinceDisengage = 0
+
+  function scrollToBottom() {
+    isProgrammaticScroll = true
+    virtualizer.value.scrollToIndex(blocks.value.length - 1, { align: 'end' })
+    isProgrammaticScroll = false
+    furthestDistanceSinceDisengage = 0
+  }
+
+  function scrollToBottomExplicit() {
+    shouldAutoScroll.value = true
+    scrollToBottom()
+  }
+
+  function updateAutoScrollState(dist: number, threshold: number) {
+    if (pendingIntent === 'up' || !shouldAutoScroll.value) {
+      furthestDistanceSinceDisengage = Math.max(furthestDistanceSinceDisengage, dist)
+    }
+    if (isProgrammaticScroll) return
+    if (pendingIntent === 'up') {
+      shouldAutoScroll.value = false
+    } else if (pendingIntent === 'down' && dist <= threshold && furthestDistanceSinceDisengage > threshold) {
+      shouldAutoScroll.value = true
+      furthestDistanceSinceDisengage = 0
+    } else if (dist <= AUTO_SCROLL_REENGAGE_THRESHOLD) {
+      shouldAutoScroll.value = true
+      furthestDistanceSinceDisengage = 0
+    } else if (dist > threshold) {
+      shouldAutoScroll.value = false
+    }
+  }
+
+  watch(
+    scrollContainer,
+    (el, _, onCleanup) => {
+      if (!el) return
+      const onWheel = (e: WheelEvent) => {
+        if (e.deltaY < 0) pendingIntent = 'up'
+        if (e.deltaY > 0) pendingIntent = 'down'
+      }
+      const onTouchStart = (e: TouchEvent) => {
+        touchStartY = e.touches[0]?.clientY ?? 0
+      }
+      const onTouchMove = (e: TouchEvent) => {
+        const touchY = e.touches[0]?.clientY ?? touchStartY
+        if (touchY > touchStartY) pendingIntent = 'up'
+        if (touchY < touchStartY) pendingIntent = 'down'
+        touchStartY = touchY
+      }
+      el.addEventListener('wheel', onWheel, { passive: true })
+      el.addEventListener('touchstart', onTouchStart, { passive: true })
+      el.addEventListener('touchmove', onTouchMove, { passive: true })
+      onCleanup(() => {
+        el.removeEventListener('wheel', onWheel)
+        el.removeEventListener('touchstart', onTouchStart)
+        el.removeEventListener('touchmove', onTouchMove)
+      })
+    },
+    { immediate: true },
+  )
+
+  watch(
+    () => virtualizer.value.getTotalSize(),
+    () => {
+      if (!isRestored.value || !shouldAutoScroll.value) return
+      scrollToBottom()
+    },
+    { flush: 'post' },
+  )
+
+  watch(
+    virtualizer,
+    (instance) => {
+      instance.shouldAdjustScrollPositionOnItemSizeChange = (item, _delta, currentInstance) => {
+        const internalInstance = currentInstance as unknown as { getScrollOffset(): number; scrollAdjustments: number }
+        const offset = internalInstance.getScrollOffset()
+        const isStreamingTail = item.index === blocks.value.length - 1
+        const allowCorrection = shouldAutoScroll.value || !isStreamingTail
+        return allowCorrection && item.start < offset + internalInstance.scrollAdjustments
+      }
+    },
+    { immediate: true },
+  )
+
+  let lastAnchor: ScrollAnchor | null = null
+
+  function updateAnchor() {
+    const el = scrollContainer.value
+    if (!el || blocks.value.length === 0) return
+    const st = el.scrollTop
+    const containerTop = el.getBoundingClientRect().top
+    for (const item of virtualizer.value.getVirtualItems()) {
+      if (item.start + item.size > st) {
+        const anchorEl = el.querySelector(`[data-index="${item.index}"]`) as HTMLElement | null
+        if (!anchorEl) return
+        lastAnchor = {
+          blockId: blocks.value[item.index]!.id,
+          anchorIndex: item.index,
+          offsetPx: anchorEl.getBoundingClientRect().top - containerTop,
+          scrollTop: st,
+        }
+        return
+      }
+    }
+  }
+
+  function onScroll() {
+    const el = scrollContainer.value
+    if (el) {
+      scrollOffset.value = el.scrollTop
+      const dist = el.scrollHeight - el.scrollTop - el.clientHeight
+      isAtBottom.value = dist <= BOTTOM_THRESHOLD
+      updateAutoScrollState(dist, BOTTOM_THRESHOLD)
+      pendingIntent = null
+    }
+    updateAnchor()
+  }
+
+  function restoreScroll() {
+    const el = scrollContainer.value
+    if (!el || blocks.value.length === 0 || isRestored.value) return
+    isRestored.value = true
+
+    if (!persistedState) {
+      scrollToBottom()
+      nextTick(() => updateAnchor())
+      return
+    }
+
+    const anchorIndex = blocks.value.findIndex((b) => b.id === persistedState.anchor.blockId)
+    if (anchorIndex < 0) {
+      scrollToBottom()
+      nextTick(() => updateAnchor())
+      return
+    }
+
+    el.scrollTop = persistedState.anchor.scrollTop
+    correctUntilConverged(el, anchorIndex, persistedState.anchor.offsetPx, 3)
+  }
+
+  function correctUntilConverged(el: HTMLElement, anchorIndex: number, targetOffset: number, maxPasses: number) {
+    waitForScrollStable(el, () => {
+      const anchorEl = el.querySelector(`[data-index="${anchorIndex}"]`) as HTMLElement | null
+      if (!anchorEl) {
+        updateAnchor()
+        return
+      }
+      const correction = anchorEl.getBoundingClientRect().top - el.getBoundingClientRect().top - targetOffset
+      if (Math.abs(correction) > 1 && maxPasses > 0) {
+        el.scrollTop += correction
+        correctUntilConverged(el, anchorIndex, targetOffset, maxPasses - 1)
+      } else {
+        updateAnchor()
+      }
+    })
+  }
+
+  watch(
+    () => [blocks.value.length, scrollContainer.value] as const,
+    ([len, el]) => {
+      if (!isRestored.value && len > 0 && el) {
+        nextTick(() => restoreScroll())
+      }
+    },
+    { immediate: true, flush: 'post' },
+  )
+
+  function getPersistedState(): PersistedScrollState | undefined {
+    if (!lastAnchor) return undefined
+    return {
+      anchor: { ...lastAnchor, scrollTop: scrollContainer.value?.scrollTop ?? lastAnchor.scrollTop },
+      heightCache: new Map(heightCache),
+    }
+  }
+
+  return {
+    virtualizer,
+    virtualItems,
+    totalSize,
+    measureElement,
+    scrollOffset,
+    isAtBottom,
+    scrollToBottom: scrollToBottomExplicit,
+    onScroll,
+    getPersistedState,
+  }
+}
+
+function waitForScrollStable(el: HTMLElement, callback: () => void) {
+  let prev = el.scrollTop
+  let stable = 0
+  function check() {
+    if (el.scrollTop === prev) {
+      if (++stable >= 2) return callback()
+    } else {
+      stable = 0
+      prev = el.scrollTop
+    }
+    requestAnimationFrame(check)
+  }
+  requestAnimationFrame(check)
+}

package/src/composables/useContextMenuOwner.ts

@@ -0,0 +1,44 @@
+import { computed, onScopeDispose, ref } from 'vue'
+
+const activeId = ref<symbol | null>(null)
+const anchorX = ref(0)
+const anchorY = ref(0)
+const menuKey = ref(0)
+
+const closeCallbacks = new Map<symbol, () => void>()
+
+function closeActive() {
+  if (activeId.value === null) return
+  const cb = closeCallbacks.get(activeId.value)
+  activeId.value = null
+  cb?.()
+}
+
+export function useContextMenuOwner(onClose?: () => void) {
+  const id = Symbol()
+  if (onClose) closeCallbacks.set(id, onClose)
+
+  const isOpen = computed(() => activeId.value === id)
+
+  function open(event: MouseEvent) {
+    closeActive()
+    event.preventDefault()
+    anchorX.value = event.clientX
+    anchorY.value = event.clientY
+    menuKey.value++
+    activeId.value = id
+  }
+
+  function close() {
+    if (activeId.value !== id) return
+    activeId.value = null
+    onClose?.()
+  }
+
+  onScopeDispose(() => {
+    closeCallbacks.delete(id)
+    if (activeId.value === id) activeId.value = null
+  })
+
+  return { isOpen, anchorX, anchorY, menuKey, open, close }
+}

package/src/composables/useOverlay.ts

@@ -0,0 +1,18 @@
+import { onBeforeUnmount, watch, type WatchSource } from 'vue'
+import type { OverlayStore } from '../overlay/overlayStore'
+
+export function useOverlay(store: OverlayStore, isOpen: WatchSource<boolean>, close: () => void): void {
+  const id = crypto.randomUUID()
+  let remove = () => {}
+
+  watch(isOpen, (open) => {
+    remove()
+    if (!open) return
+    remove = store.push(id, close)
+  }, { immediate: true })
+
+  onBeforeUnmount(() => {
+    remove()
+    store.remove(id)
+  })
+}