@chatcode/cco-better-sidebar 0.18.0-alpha.0

package/src/client/upload.ts

@@ -0,0 +1,187 @@
+/**
+ * File-upload plumbing for the files window: turn a file picker or a drag-drop
+ * into per-file raw-byte uploads through the sidebar's `/sidebar/upload` route.
+ *
+ * Folders keep their tree in both flows: the picker's `webkitdirectory`
+ * selection arrives as Files with `webkitRelativePath` filled, and dropped
+ * folders — which never surface in `dataTransfer.files` — are traversed via
+ * `webkitGetAsEntry`, so the relative path is preserved for every nested file
+ * and the host recreates the tree under the chosen directory. The File is
+ * streamed straight into the POST body (no base64 inflation); uploads run
+ * sequentially so one slow file cannot starve the others, and each result
+ * reports its own outcome (the tree keeps going after a failure). An
+ * optional `AbortSignal` stops the queue at the next item boundary and
+ * aborts the in-flight request; the host cleans up its temp file when the
+ * request stream dies.
+ */
+import { api, SidebarApiError, type SessionScope } from './api.ts'
+import { isAbsolutePath } from './paths.ts'
+import type { CopyKey } from './locales.ts'
+
+/** One pending file: the browser File plus the workspace-relative target path. */
+export interface UploadItem {
+  file: File
+  relativePath: string
+}
+
+/** One settled upload. */
+export interface UploadResult {
+  relativePath: string
+  ok: boolean
+  path?: string
+  /** Wire error code when the host refused the upload ('too-large', ...). */
+  code?: string
+  /** The host's error message (English wire text; localize via `code`). */
+  error?: string
+}
+
+/** Sanitize a relative target: absolute paths, traversal, and empty segments
+ *  are rejected (the host enforces the same rules with a 400). */
+function sanitizeRelativePath(rel: string): string | undefined {
+  if (rel === '' || isAbsolutePath(rel)) return undefined
+  if (rel.split(/[\\/]/).some((s) => s === '' || s === '.' || s === '..')) return undefined
+  return rel
+}
+
+/** The picker's relative path: webkitRelativePath when present, else the name. */
+function relativePathOf(file: File): string | undefined {
+  return sanitizeRelativePath(file.webkitRelativePath || file.name || '')
+}
+
+/** Collect a picker selection (webkitdirectory folders carry relative paths). */
+export function uploadItemsFromFiles(files: FileList | readonly File[]): UploadItem[] {
+  const items: UploadItem[] = []
+  for (const file of files) {
+    const rel = relativePathOf(file)
+    if (rel !== undefined) items.push({ file, relativePath: rel })
+  }
+  return items
+}
+
+/** Read one dropped file-system entry into upload items; directories
+ *  recurse, prefixing their name onto every descendant's relative path. */
+async function itemsFromEntry(entry: FileSystemEntry, prefix: string): Promise<UploadItem[]> {
+  if (entry.isFile) {
+    const file = await new Promise<File>((resolve, reject) => {
+      ;(entry as FileSystemFileEntry).file(resolve, reject)
+    })
+    const rel = sanitizeRelativePath(prefix + file.name)
+    return rel === undefined ? [] : [{ file, relativePath: rel }]
+  }
+  if (entry.isDirectory) {
+    const reader = (entry as FileSystemDirectoryEntry).createReader()
+    const entries: FileSystemEntry[] = []
+    // readEntries returns one BATCH per call; drain until an empty batch.
+    for (;;) {
+      const batch = await new Promise<FileSystemEntry[]>((resolve, reject) => {
+        reader.readEntries(resolve, reject)
+      })
+      if (batch.length === 0) break
+      entries.push(...batch)
+    }
+    const nested = await Promise.all(entries.map(child => itemsFromEntry(child, `${prefix}${entry.name}/`)))
+    return nested.flat()
+  }
+  return []
+}
+
+/**
+ * Collect a drag-drop payload. Dropped folders do NOT surface in
+ * `dataTransfer.files` — they arrive as directory items, so entries are
+ * captured via `webkitGetAsEntry` and traversed (draining readEntries
+ * batches), keeping each nested file's relative path. MUST be invoked
+ * synchronously from the drop handler: the dataTransfer enters protected
+ * mode once the event dispatch ends, while the captured entry handles stay
+ * readable asynchronously. Falls back to the flat file list when the entry
+ * API is unavailable; an entry that fails to read is skipped, not fatal.
+ */
+export async function uploadItemsFromDrop(data: DataTransfer | undefined): Promise<UploadItem[]> {
+  if (data === undefined) return []
+  // Synchronous section: capture every entry handle before returning.
+  const entries = [...data.items]
+    .map(item => (item.kind === 'file' ? item.webkitGetAsEntry() : null))
+    .filter((entry): entry is FileSystemEntry => entry !== null)
+  if (entries.length === 0) return uploadItemsFromFiles(data.files)
+  const nested = await Promise.all(entries.map(entry => itemsFromEntry(entry, '').catch(() => [])))
+  return nested.flat()
+}
+
+/**
+ * Client-side pre-check cap. Mirrors the host's default (config `uploadLimit`)
+ * only — the host enforces the real, configurable limit, so a lowered host
+ * limit surfaces as a `too-large` wire error, never as a silent pass.
+ */
+export const MAX_UPLOAD_BYTES = 128 * 1024 * 1024
+
+/** How long a success hint stays before fading (failures stay until the next action). */
+export const UPLOAD_HINT_MS = 3500
+
+/**
+ * One-line upload progress text: 'Uploading into {dir}…' while no file is in
+ * flight, then 'Uploading {done}/{total}: {name}' per file. Shared by the tree
+ * hint and the full-window upload overlay.
+ */
+export function uploadHintText(
+  done: number,
+  total: number,
+  current: string,
+  dir: string,
+  t: (key: CopyKey, params?: Record<string, string | number>) => string,
+): string {
+  return current === '' ? t('uploadingTo', { dir }) : t('uploadProgress', { done, total, name: current })
+}
+
+/**
+ * Upload every item into `dir` (absolute, inside the session workspace),
+ * sequentially, reporting progress as `(done, total, currentRelativePath)`.
+ * Resolves with one result per item — never rejects; `signal.aborted` stops
+ * the queue at the next item boundary (completed items stay uploaded).
+ */
+export async function uploadToDir(
+  scope: SessionScope,
+  dir: string,
+  items: UploadItem[],
+  onProgress?: (done: number, total: number, current: string) => void,
+  signal?: AbortSignal,
+): Promise<UploadResult[]> {
+  const results: UploadResult[] = []
+  let done = 0
+  for (const item of items) {
+    if (signal?.aborted) break
+    onProgress?.(done, items.length, item.relativePath)
+    try {
+      if (item.file.size > MAX_UPLOAD_BYTES) {
+        results.push({ relativePath: item.relativePath, ok: false, code: 'too-large' })
+      } else {
+        const res = await api.uploadFile(scope, dir, item.relativePath, item.file, signal)
+        results.push({ relativePath: item.relativePath, ok: true, path: res.path })
+      }
+    } catch (error) {
+      // An aborted in-flight request is a cancel, not a failure: stop quietly.
+      if (error instanceof DOMException && error.name === 'AbortError') break
+      results.push({
+        relativePath: item.relativePath,
+        ok: false,
+        code: error instanceof SidebarApiError ? error.code : undefined,
+        error: error instanceof Error ? error.message : String(error),
+      })
+    }
+    done++
+  }
+  onProgress?.(done, items.length, '')
+  return results
+}
+
+/** Fold a result list into a one-line status for the tree hint. */
+export function summarizeResults(
+  results: UploadResult[],
+  t: (key: CopyKey, params?: Record<string, string | number>) => string,
+): string {
+  const okCount = results.filter((r) => r.ok).length
+  const failed = results.find((r) => !r.ok)
+  if (failed !== undefined) {
+    const detail = failed.code === 'too-large' ? t('uploadTooLarge') : (failed.error ?? t('uploadFailedUnknown'))
+    return t('uploadFailed', { error: detail })
+  }
+  return t('uploadDone', { count: okCount })
+}

package/src/client/useChatcodeAccount.ts

@@ -0,0 +1,103 @@
+/** Browser lifecycle only; all account and credential decisions belong to the host service. */
+import { useEffect, useRef, useState } from 'react'
+import { api } from './api.ts'
+import type { ChatCodeAuthState } from './api.ts'
+
+export function useChatcodeAccount() {
+  const [chatcode, setChatcode] = useState<ChatCodeAuthState>()
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<'operation' | 'status'>()
+  const [loginUrl, setLoginUrl] = useState<string>()
+  const [revision, setRevision] = useState(0)
+  const busyRef = useRef(false)
+  const mounted = useRef(false)
+  const request = useRef<AbortController>()
+  const attempt = useRef<{ sessionId: string; popup: Window | null }>()
+
+  useEffect(() => {
+    mounted.current = true
+    return () => { mounted.current = false }
+  }, [])
+
+  useEffect(() => {
+    const controller = new AbortController()
+    request.current = controller
+    let timer: ReturnType<typeof setTimeout> | undefined
+    let running = false
+    const refresh = async (): Promise<void> => {
+      if (controller.signal.aborted || running || busyRef.current) return
+      clearTimeout(timer)
+      running = true
+      try {
+        const state = await api.chatcodeStatus(controller.signal)
+        if (controller.signal.aborted) return
+        setChatcode(state)
+        setError(current => current === 'status' ? undefined : current)
+        const local = attempt.current
+        if (local && state.login?.sessionId === local.sessionId && state.login.state === 'succeeded' && state.validation === 'valid') {
+          // COOP/browser policy may sever the handle. Returning focus is best effort.
+          try { local.popup?.close(); window.focus() } catch { /* Original DSH tab remains usable. */ }
+          attempt.current = undefined
+          setLoginUrl(undefined)
+        } else if (local && (state.login?.sessionId !== local.sessionId || state.login.state !== 'pending')) {
+          try { local.popup?.close() } catch { /* Detached window. */ }
+          attempt.current = undefined
+          setLoginUrl(undefined)
+        }
+      } catch {
+        if (!controller.signal.aborted) setError('status')
+      } finally {
+        running = false
+        if (!controller.signal.aborted) timer = setTimeout(() => { void refresh() }, 2_000)
+      }
+    }
+    void refresh()
+    const visible = (): void => { if (document.visibilityState === 'visible') void refresh() }
+    document.addEventListener('visibilitychange', visible)
+    return () => { controller.abort(); clearTimeout(timer); document.removeEventListener('visibilitychange', visible) }
+  }, [revision])
+
+  const operate = (action: () => Promise<void>): void => {
+    if (busyRef.current) return
+    busyRef.current = true
+    request.current?.abort() // Invalidate in-flight status BEFORE changing the account.
+    setBusy(true)
+    setError(undefined)
+    void action().catch(() => { if (mounted.current) setError('operation') }).finally(() => {
+      busyRef.current = false
+      if (mounted.current) { setBusy(false); setRevision(value => value + 1) }
+    })
+  }
+
+  const startLogin = (): void => {
+    if (busyRef.current) return
+    // Never reuse a named cross-origin window. Retain the user gesture for popup permission.
+    let popup: Window | null = null
+    try { popup = window.open('', '_blank'); if (popup) popup.opener = null } catch { popup = null }
+    operate(async () => {
+      try {
+        const start = await api.chatcodeStart()
+        if (!mounted.current) { popup?.close(); return }
+        try { attempt.current?.popup?.close() } catch { /* Detached window. */ }
+        attempt.current = { sessionId: start.sessionId, popup }
+        setLoginUrl(start.url) // Always provide a real link when popups are blocked.
+        setChatcode(current => ({ ...current, available: true, login: { sessionId: start.sessionId, state: 'pending', expiresAtMs: 0 } }))
+        try { if (popup && !popup.closed) popup.location.href = start.url } catch { /* The explicit link remains available. */ }
+      } catch (error) { try { popup?.close() } catch { /* Detached window. */ }; throw error }
+    })
+  }
+
+  const logout = (): void => operate(async () => {
+    await api.chatcodeLogout()
+    if (!mounted.current) return
+    try { attempt.current?.popup?.close() } catch { /* Detached window. */ }
+    attempt.current = undefined
+    setLoginUrl(undefined)
+    setChatcode({ available: true, configured: false, expired: false, validation: 'none' })
+  })
+  const cancelLogin = (): void => {
+    const sessionId = chatcode?.login?.sessionId
+    if (sessionId) operate(async () => { await api.chatcodeCancel(sessionId) })
+  }
+  return { chatcode, busy, error, loginUrl, startLogin, logout, cancelLogin }
+}

package/src/client/wco.ts

@@ -0,0 +1,120 @@
+/**
+ * Reactive Window Controls Overlay geometry — the STANDARD web mechanism
+ * for frameless Chromium shells that draw the native caption buttons
+ * (minimize / maximize / close) OVER the web content (Electron
+ * `titleBarOverlay` on Windows; issue #257). Feature-detected: absent in
+ * plain browsers, macOS, Tauri etc., where the snapshot stays `NONE` and
+ * the sidebar adapts nothing — this is the conservative "auto" signal.
+ *
+ * The API reports the real titlebar rect (CSS px), which differs between
+ * shells and Electron versions (32 / 36 …), and fires `geometrychange`
+ * when the window maximizes / restores / moves — so the strip must be
+ * reactive, not memoized like the URL stamps.
+ *
+ * Module-level store so the Sidebar shell can subscribe via
+ * `useSyncExternalStore`; `setWcoSourceForTests` swaps the source for unit
+ * tests (no real API exists in jsdom/headless).
+ */
+export interface WcoSource {
+  readonly visible: boolean
+  getTitlebarAreaRect(): { readonly x: number; readonly y: number; readonly width: number; readonly height: number }
+  addEventListener(type: 'geometrychange', listener: () => void): void
+  removeEventListener(type: 'geometrychange', listener: () => void): void
+}
+
+/** The current overlay geometry (present=false = API unavailable). */
+export interface WcoSnapshot {
+  readonly present: boolean
+  readonly height: number
+}
+
+/** Snapshot when the API is unavailable (plain browser / non-overlay shell). */
+export const WCO_NONE: WcoSnapshot = Object.freeze({ present: false, height: 0 })
+
+type Listener = () => void
+
+let source: WcoSource | undefined
+let snapshot: WcoSnapshot = WCO_NONE
+let attached = false
+let sourceListener: (() => void) | undefined
+const listeners = new Set<Listener>()
+
+function read(): WcoSnapshot {
+  if (source === undefined) return WCO_NONE
+  try {
+    // A present-but-NOT-visible API is a PHANTOM: headless Chromium and
+    // macOS builds expose the interface but draw no overlay (empty rect,
+    // visible=false). Only a genuinely visible overlay is authoritative —
+    // otherwise the resolution chain would trust a zero rect and silently
+    // skip the shell's real reserved space.
+    if (source.visible !== true) return { present: false, height: 0 }
+    const rect = source.getTitlebarAreaRect()
+    const height = Math.round(rect.height)
+    return Number.isFinite(height) && height > 0
+      ? { present: true, height }
+      : { present: true, height: 0 }
+  } catch {
+    // A hostile/racy API must never break the layout — treat as absent.
+    return { present: false, height: 0 }
+  }
+}
+
+function onGeometryChange(): void {
+  snapshot = read()
+  emit()
+}
+
+function emit(): void {
+  for (const listener of listeners) listener()
+}
+
+/** Attach the native geometrychange listener (once). */
+function attach(): void {
+  if (attached) return
+  attached = true
+  // The test hook may have installed a source already; otherwise attach to
+  // the real navigator API (absent in plain browsers → stay NONE).
+  const candidate = source ?? (navigator as unknown as { windowControlsOverlay?: WcoSource }).windowControlsOverlay
+  if (candidate === undefined) return
+  source = candidate
+  sourceListener = onGeometryChange
+  snapshot = read()
+  source.addEventListener('geometrychange', sourceListener)
+}
+
+/** Detach the native listener (last subscriber left or source swapped). */
+function detach(): void {
+  if (source !== undefined && sourceListener !== undefined) {
+    source.removeEventListener('geometrychange', sourceListener)
+  }
+  sourceListener = undefined
+  attached = false
+}
+
+/** Read the current snapshot (returns the frozen NONE when unavailable). */
+export function getWcoSnapshot(): WcoSnapshot {
+  return snapshot
+}
+
+/**
+ * Subscribe to overlay geometry changes. Attaches to the real
+ * `navigator.windowControlsOverlay` on first subscribe; the disposer
+ * detaches the native listener when the last subscriber leaves.
+ */
+export function subscribeWco(onChange: Listener): () => void {
+  listeners.add(onChange)
+  attach()
+  return () => {
+    listeners.delete(onChange)
+    if (listeners.size === 0) detach()
+  }
+}
+
+/** Test hook: swap the geometry source (undefined = API unavailable). */
+export function setWcoSourceForTests(next: WcoSource | undefined): void {
+  detach()
+  source = next
+  snapshot = next === undefined ? WCO_NONE : read()
+  if (next !== undefined && listeners.size > 0) attach()
+  emit()
+}

package/src/codingplan.ts

@@ -0,0 +1,146 @@
+/**
+ * CodingPlan model-catalogue client. It deliberately runs only in the host
+ * half of the sidebar plugin: CodingPlan connection details and any API key
+ * present in its response must never cross the `/sidebar/api` boundary.
+ */
+import type { ResolvedCodingPlanConfig } from './config.ts'
+
+/** The safe, display-only subset of one CodingPlan model. */
+export interface CodingPlanModel {
+  logicalModelId: string
+  displayName: string
+  description?: string
+  accessType?: string
+  maxToken?: number
+  contextWindow?: number
+}
+
+/** Browser-safe catalogue snapshot returned by the plugin route. */
+export interface CodingPlanCatalogueSnapshot {
+  status: 'loading' | 'ready' | 'unavailable'
+  models: CodingPlanModel[]
+  fetchedAt?: string
+}
+
+type FetchLike = typeof fetch
+
+const MAX_ID_LENGTH = 256
+const MAX_TEXT_LENGTH = 1024
+
+function text(value: unknown, maxLength = MAX_TEXT_LENGTH): string | undefined {
+  if (typeof value !== 'string') return undefined
+  const trimmed = value.trim()
+  return trimmed === '' ? undefined : trimmed.slice(0, maxLength)
+}
+
+function positiveInteger(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isSafeInteger(value) && value > 0 ? value : undefined
+}
+
+/** Strip an untrusted server item down to fields safe to show in the UI. */
+export function publicCodingPlanModel(value: unknown): CodingPlanModel | undefined {
+  if (value === null || typeof value !== 'object' || Array.isArray(value)) return undefined
+  const record = value as Record<string, unknown>
+  const logicalModelId = text(record.logicalModelId, MAX_ID_LENGTH)
+  const displayName = text(record.displayName, MAX_TEXT_LENGTH)
+  if (logicalModelId === undefined || displayName === undefined) return undefined
+  return {
+    logicalModelId,
+    displayName,
+    ...(text(record.description) !== undefined ? { description: text(record.description) } : {}),
+    ...(text(record.accessType, 64) !== undefined ? { accessType: text(record.accessType, 64) } : {}),
+    ...(positiveInteger(record.maxToken) !== undefined ? { maxToken: positiveInteger(record.maxToken) } : {}),
+    ...(positiveInteger(record.contextWindow) !== undefined ? { contextWindow: positiveInteger(record.contextWindow) } : {}),
+  }
+}
+
+function catalogueUrl(config: ResolvedCodingPlanConfig): URL {
+  const origin = new URL(config.baseUrl)
+  if (origin.protocol !== 'http:' && origin.protocol !== 'https:') {
+    throw new Error('CodingPlan endpoint must use HTTP(S)')
+  }
+  // The endpoint is fixed; deployments configure only its origin so a
+  // profile cannot accidentally turn this catalogue route into an arbitrary
+  // authenticated request target.
+  origin.pathname = '/api/cli/v1/model-runtime-configs'
+  origin.search = new URLSearchParams({
+    encryptApiKey: 'false',
+    userId: config.userId,
+    accountUuid: config.accountUuid,
+    userEmail: config.userEmail,
+    emailAddress: config.emailAddress,
+  }).toString()
+  return origin
+}
+
+/** Host-side, single-flight CodingPlan catalogue cache. */
+export class CodingPlanCatalogue {
+  private snapshotValue: CodingPlanCatalogueSnapshot = { status: 'loading', models: [] }
+  private inFlight: Promise<CodingPlanCatalogueSnapshot> | undefined
+
+  constructor(
+    private readonly config: ResolvedCodingPlanConfig,
+    private readonly request: FetchLike = fetch,
+  ) {}
+
+  snapshot(): CodingPlanCatalogueSnapshot {
+    return {
+      ...this.snapshotValue,
+      models: this.snapshotValue.models.map(model => ({ ...model })),
+    }
+  }
+
+  /** Refresh once; concurrent callers share the same outgoing request. */
+  refresh(): Promise<CodingPlanCatalogueSnapshot> {
+    if (this.inFlight !== undefined) return this.inFlight
+    this.inFlight = this.load().finally(() => { this.inFlight = undefined })
+    return this.inFlight
+  }
+
+  private async load(): Promise<CodingPlanCatalogueSnapshot> {
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), this.config.requestTimeoutMs)
+    try {
+      const response = await this.request(catalogueUrl(this.config), {
+        method: 'GET',
+        headers: { accept: 'application/json' },
+        signal: controller.signal,
+      })
+      if (!response.ok) throw new Error('CodingPlan catalogue request failed')
+      const payload: unknown = await response.json()
+      const record = payload !== null && typeof payload === 'object' && !Array.isArray(payload)
+        ? payload as Record<string, unknown>
+        : undefined
+      const data = record?.data
+      const models = data !== null && typeof data === 'object' && !Array.isArray(data)
+        ? (data as Record<string, unknown>).models
+        : undefined
+      if (record?.code !== '00000000' || !Array.isArray(models)) {
+        throw new Error('CodingPlan catalogue response is invalid')
+      }
+      const deduped = new Map<string, CodingPlanModel>()
+      for (const item of models) {
+        const model = publicCodingPlanModel(item)
+        if (model !== undefined) deduped.set(model.logicalModelId, model)
+      }
+      this.snapshotValue = {
+        status: 'ready',
+        models: [...deduped.values()],
+        fetchedAt: new Date().toISOString(),
+      }
+      return this.snapshot()
+    } catch {
+      // Keep a prior successful list usable during a temporary outage. No
+      // upstream response/message is preserved or surfaced: it could contain
+      // provider credentials or other deployment-only details.
+      this.snapshotValue = {
+        status: 'unavailable',
+        models: this.snapshotValue.models,
+        ...(this.snapshotValue.fetchedAt !== undefined ? { fetchedAt: this.snapshotValue.fetchedAt } : {}),
+      }
+      return this.snapshot()
+    } finally {
+      clearTimeout(timeout)
+    }
+  }
+}