dsh-side-chat-plus 0.3.1

package/src/client/api.ts

@@ -0,0 +1,112 @@
+/**
+ * Client API client for the /sidechat JSON routes (same fetch pattern the
+ * better-sidebar built-ins use). All requests are same-origin POSTs; the host
+ * fence (loopback/trusted authority) passes them naturally.
+ */
+
+/** One API failure envelope. */
+export interface SidechatApiError {
+  code: string
+  message: string
+}
+
+/** The unwrapped success value of one API method. */
+export type SidechatResult<T> = { ok: true; value: T } | { ok: false; error: SidechatApiError }
+
+/** Side-chat list row. */
+export interface SidechatListItem {
+  childId: string
+  running: boolean
+  runningSince?: number
+}
+
+/** Browser-submitted prompt content part (text or base64 image). */
+export type PromptContentPart = { type: 'text'; text: string } | { type: 'image'; mediaType: string; data: string; name?: string }
+
+/** One durable image reference returned by the host transcript. */
+export interface SidechatImageRef {
+  attachmentId: string
+  mediaType: string
+  bytes: number
+  width: number
+  height: number
+  name?: string
+}
+
+/** One transcript message block. */
+export type SidechatMessageBlock = { type: 'text'; text: string } | { type: 'image'; ref: SidechatImageRef } | { type: 'reasoning'; text: string }
+
+/** One transcript message. */
+export interface SidechatMessage {
+  role: 'user' | 'assistant'
+  blocks: SidechatMessageBlock[]
+}
+
+/** Model / effort directory (provider groups → models → reasoning efforts). */
+export interface SidechatDirectory {
+  groups: Array<{
+    id: string
+    name: string
+    models: Array<{
+      id: string
+      name: string
+      description?: string
+      reasoning?: { efforts: Array<{ id: string; name: string }>; defaultEffort?: string }
+    }>
+  }>
+}
+
+/** Permission options. */
+export interface SidechatPermissions {
+  options: Array<{ value: string; name: string; description?: string }>
+  current: string
+}
+
+/** Call one /sidechat/api method. */
+async function call<T>(method: string, payload: Record<string, unknown>): Promise<SidechatResult<T>> {
+  const res = await fetch(`/sidechat/api/${method}`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(payload),
+  })
+  return (await res.json()) as SidechatResult<T>
+}
+
+export const api = {
+  start: (args: { parentSessionId: string; content: PromptContentPart[]; lookupEnabled: boolean; provider?: string; model?: string; reasoningEffort?: string; preset?: string }) =>
+    call<{ childId: string; provider: string; model: string; reasoningEffort?: string }>('sidechat.start', args),
+  followup: (args: { childId: string; content: PromptContentPart[]; lookupEnabled: boolean }) =>
+    call<{ accepted: true }>('sidechat.followup', args),
+  list: (args: { parentSessionId: string }) =>
+    call<{ items: SidechatListItem[] }>('sidechat.list', args),
+  history: (args: { childId: string }) =>
+    call<{ messages: SidechatMessage[] }>('sidechat.history', args),
+  stop: (args: { childId: string }) =>
+    call<{ accepted: true }>('sidechat.stop', args),
+  selectModel: (args: { childId: string; provider: string; model: string; reasoningEffort?: string }) =>
+    call<{ accepted: true }>('sidechat.selectModel', args),
+  selectPermission: (args: { childId: string; presetName: string }) =>
+    call<{ accepted: true }>('sidechat.selectPermission', args),
+  summarize: (args: { parentSessionId: string; text: string; provider?: string; model?: string; reasoningEffort?: string; locale?: string }) =>
+    call<{ summary: string }>('sidechat.summarize', args),
+  inject: (args: { parentSessionId: string; text: string; summary?: string }) =>
+    call<{ accepted: true }>('sidechat.inject', args),
+  directory: () => call<SidechatDirectory>('sidechat.directory', {}),
+  permissions: () => call<SidechatPermissions>('sidechat.permissions', {}),
+  limits: () => call<{ mediaTypes: string[]; maxImageBytes: number; maxImagesPerMessage: number; maxMessageImageBytes: number; maxImagePixels: number }>('sidechat.limits', {}),
+  attachment: (args: { childId: string; attachmentId: string }) =>
+    call<{ mediaType: string; data: string }>('sidechat.attachment', args),
+  inherit: (args: { parentSessionId: string }) =>
+    call<{ provider: string; model: string; reasoningEffort?: string }>('sidechat.inherit', args),
+  commands: (args: { childId: string }) =>
+    call<{ commands: Array<{ name: string; description: string }> }>('sidechat.commands', args),
+  command: (args: { childId: string; line: string }) =>
+    call<{ executed: boolean }>('sidechat.command', args),
+  state: (args: { childId: string }) =>
+    call<{ plan: { active: boolean; pending: boolean }; goal: { id: string; objective: string } | null }>('sidechat.state', args),
+  settingsGet: () => call<{ value?: unknown; revision?: number }>('settings.get', {}),
+  settingsUpdate: (patch: Record<string, unknown>, expectedRevision?: number) =>
+    call<{ value?: unknown; revision?: number }>('settings.update', { patch, expectedRevision }),
+  dispose: (args: { childId: string }) =>
+    call<{ accepted: true }>('sidechat.dispose', args),
+}

package/src/client/attachments/AttachmentRail.module.css

@@ -0,0 +1,89 @@
+.root {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.rail {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding: 2px;
+}
+
+.rail::-webkit-scrollbar {
+  display: none;
+}
+
+.item {
+  position: relative;
+  flex: none;
+}
+
+.thumbnail {
+  display: block;
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-color-border, rgba(0, 0, 0, 0.1));
+  border-radius: 8px;
+  background: none;
+  cursor: pointer;
+}
+
+.thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--dsw-color-surface-raised, #fff);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  color: var(--dsw-color-text-secondary, #646a73);
+  cursor: pointer;
+  opacity: 0;
+}
+
+.item:hover .remove,
+.remove:focus-visible {
+  opacity: 1;
+}
+
+.arrow {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid var(--dsw-color-border, rgba(0, 0, 0, 0.1));
+  border-radius: 50%;
+  background: var(--dsw-color-surface-raised, #fff);
+  color: var(--dsw-color-text-secondary, #646a73);
+  cursor: pointer;
+}
+
+.arrowLeft {
+  left: -10px;
+}
+
+.arrowRight {
+  right: -10px;
+}

package/src/client/attachments/AttachmentRail.tsx

@@ -0,0 +1,173 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import {
+  IconChevronLeftOutline14,
+  IconChevronRightOutline14,
+  IconCloseFill14,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './AttachmentRail.module.css'
+
+/** One rail thumbnail; strings arrive resolved (zero-cordis atom). */
+export interface AttachmentRailItem {
+  /** Stable identity for the React key. */
+  id: string
+  /** Object or data URL rendered as the thumbnail. */
+  previewUrl: string
+  /** Image alt text (display name with the owner's fallback applied). */
+  alt: string
+  /** Accessible label of the item's remove control. */
+  removeLabel: string
+}
+
+/** Rail-level strings the owner resolves from its own locale namespace. */
+export interface AttachmentRailLabels {
+  /** Accessible name of the rail group. */
+  group: string
+  /** Thumbnail tooltip inviting the original-image preview. */
+  open: string
+  /** Accessible label of the left paging arrow. */
+  scrollLeft: string
+  /** Accessible label of the right paging arrow. */
+  scrollRight: string
+}
+
+/** Approximate pixels per wheel step for `deltaMode` LINE deltas (Firefox notch wheels report lines). */
+const WHEEL_LINE_PX = 16
+
+/** Smooth paging unless the user asked for reduced motion. */
+function pageBehavior(): ScrollBehavior {
+  return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth'
+}
+
+/**
+ * Horizontal thumbnail rail over the caller's draft attachments.
+ *
+ * The rail scrolls with its scrollbar hidden; overflow is announced by edge
+ * arrows recomputed from scroll geometry on scroll, item-count changes, and
+ * rail size changes (a ResizeObserver on the rail element, so sidebar or panel
+ * resizes count, not only window resizes). A vertical wheel pans the rail
+ * horizontally and is consumed exclusively, a newly added item is revealed at
+ * the rail's end, and each thumbnail opens on a single click while its remove
+ * control sits inside the card. The owner decides mounting.
+ */
+export function AttachmentRail<T extends AttachmentRailItem>({ items, labels, onOpen, onRemove }: {
+  items: readonly T[]
+  labels: AttachmentRailLabels
+  onOpen: (item: T) => void
+  onRemove: (item: T) => void
+}) {
+  const railRef = useRef<HTMLDivElement | null>(null)
+  // null marks the first layout pass: a rail that MOUNTS over an existing
+  // draft is initial display, not growth, and must not jump to the end.
+  const countRef = useRef<number | null>(null)
+  const [edges, setEdges] = useState({ left: false, right: false })
+  const updateEdges = useCallback(() => {
+    const el = railRef.current
+    if (el === null) return
+    // 1px slack: engines report fractional scroll positions at the edges.
+    const left = el.scrollLeft > 1
+    const right = el.scrollLeft < el.scrollWidth - el.clientWidth - 1
+    setEdges(prev => prev.left === left && prev.right === right ? prev : { left, right })
+  }, [])
+  useLayoutEffect(() => {
+    const grew = countRef.current !== null && items.length > countRef.current
+    countRef.current = items.length
+    const el = railRef.current
+    if (el === null) return
+    // A newly added attachment lands at the rail's end: reveal it.
+    if (grew) el.scrollLeft = el.scrollWidth - el.clientWidth
+    updateEdges()
+  }, [items.length, updateEdges])
+  useEffect(() => {
+    const el = railRef.current
+    if (el === null) return
+    // The rail's width follows the composer, which resizes with sidebars and
+    // panels, not only the window — observe the element itself.
+    let disconnect = (): void => {}
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(updateEdges)
+      observer.observe(el)
+      disconnect = () => { observer.disconnect() }
+    }
+    // The rail scrolls horizontally ONLY: any wheel tick with a vertical
+    // component is consumed — without preventDefault it would also scroll the
+    // conversation behind the composer, and React's root wheel listener is
+    // passive, so the exclusion needs this manually attached non-passive
+    // listener.
+    const onWheel = (event: globalThis.WheelEvent): void => {
+      if (event.deltaY === 0) return
+      const scale = event.deltaMode === WheelEvent.DOM_DELTA_LINE
+        ? WHEEL_LINE_PX
+        : event.deltaMode === WheelEvent.DOM_DELTA_PAGE ? el.clientWidth : 1
+      event.preventDefault()
+      el.scrollBy({
+        left: event.deltaX !== 0
+          ? event.deltaX * scale
+          : Math.sign(event.deltaY) * Math.min(Math.abs(event.deltaY) * scale, 60),
+        behavior: 'auto',
+      })
+    }
+    el.addEventListener('wheel', onWheel, { passive: false })
+    return () => {
+      disconnect()
+      el.removeEventListener('wheel', onWheel)
+    }
+  }, [updateEdges])
+  const page = (direction: -1 | 1): void => {
+    const el = railRef.current
+    if (el === null) return
+    // One viewport minus a card keeps the last visible thumbnail as context.
+    el.scrollBy({ left: direction * Math.max(el.clientWidth - 64, 200), behavior: pageBehavior() })
+  }
+  return (
+    <div className={css.root}>
+      {edges.left && (
+        <button
+          type="button"
+          className={`${css.arrow} ${css.arrowLeft}`}
+          aria-label={labels.scrollLeft}
+          onClick={() => { page(-1) }}
+        >
+          <IconChevronLeftOutline14 />
+        </button>
+      )}
+      <div
+        ref={railRef}
+        className={css.rail}
+        role="group"
+        aria-label={labels.group}
+        onScroll={updateEdges}
+      >
+        {items.map(item => (
+          <div key={item.id} className={css.item}>
+            <button
+              type="button"
+              className={css.thumbnail}
+              title={labels.open}
+              onClick={() => { onOpen(item) }}
+            >
+              <img src={item.previewUrl} alt={item.alt} />
+            </button>
+            <button
+              type="button"
+              className={css.remove}
+              aria-label={item.removeLabel}
+              onClick={() => { onRemove(item) }}
+            >
+              <IconCloseFill14 size={12} />
+            </button>
+          </div>
+        ))}
+      </div>
+      {edges.right && (
+        <button
+          type="button"
+          className={`${css.arrow} ${css.arrowRight}`}
+          aria-label={labels.scrollRight}
+          onClick={() => { page(1) }}
+        >
+          <IconChevronRightOutline14 />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/client/attachments/DropOverlay.module.css

@@ -0,0 +1,38 @@
+.mask {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Decoration only: drag targeting must stay on the page below. */
+  pointer-events: none;
+  background: rgba(255, 255, 255, 0.72);
+  border: 2px dashed var(--dsw-color-border-strong, #4d6bfe);
+  border-radius: 12px;
+}
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+}
+
+.illustration {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--dsw-color-text, #1f2329);
+}
+
+.desc {
+  font-size: 13px;
+  color: var(--dsw-color-text-secondary, #646a73);
+}

package/src/client/attachments/DropOverlay.tsx

@@ -0,0 +1,62 @@
+import { createPortal } from 'react-dom'
+import css from './DropOverlay.module.css'
+
+/** Drop-overlay strings the owner resolves from its own locale namespace. */
+export interface DropOverlayLabels {
+  /** Headline inviting the drop, or naming why it is unavailable. */
+  title: string
+  /** Limits line under the title; shown only while drops are accepted. */
+  desc?: string | undefined
+}
+
+/**
+ * Full-viewport invitation shown while a file drag is over the page.
+ * Decoration only: `pointer-events: none` keeps drag targeting on the page
+ * below, so the owner's document-level listeners keep an accurate enter/leave
+ * count and own accept/reject. Rendered through a body portal for the same
+ * transformed-ancestor reason as the lightbox.
+ */
+export function DropOverlay({ disabled, labels }: {
+  disabled: boolean
+  labels: DropOverlayLabels
+}) {
+  return createPortal(
+    <div className={css.mask} role="status">
+      <div className={css.wrap}>
+        <div className={css.illustration} aria-hidden="true">
+          {disabled ? <BlockedIllustration /> : <UploadIllustration />}
+        </div>
+        <div className={css.title}>{labels.title}</div>
+        {!disabled && labels.desc !== undefined && <div className={css.desc}>{labels.desc}</div>}
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+/** Tilted photo-and-note cards. */
+const UploadIllustration = () => (
+  <svg width="96" height="72" viewBox="0 0 96 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect y="14" width="38" height="38" rx="10" transform="rotate(-22 0 14)" fill="#9ce5ed" />
+    <rect x="62" y="7" width="37" height="43" rx="8" transform="rotate(17 62 7)" fill="#679efe" />
+    <rect x="26" y="30" width="38" height="38" rx="10" fill="#3964fe" />
+    <path
+      d="M33 62c1-2 4-8 7-14 1-2 5-2 6 1 2 5 5 9 7 10 3 1 7-9 17 2"
+      stroke="#fff"
+      strokeWidth="3"
+      fill="none"
+    />
+    <circle cx="53" cy="43" r="4" fill="#fff" />
+  </svg>
+)
+
+/** Greyed cards with a blocked badge. */
+const BlockedIllustration = () => (
+  <svg width="96" height="72" viewBox="0 0 96 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect y="14" width="38" height="38" rx="10" transform="rotate(-22 0 14)" fill="#c4c9d0" />
+    <rect x="62" y="7" width="37" height="43" rx="8" transform="rotate(17 62 7)" fill="#b0b6be" />
+    <rect x="26" y="30" width="38" height="38" rx="10" fill="#d8dce1" />
+    <circle cx="45" cy="49" r="12" stroke="#fff" strokeWidth="3" fill="none" />
+    <path d="M36 40l18 18" stroke="#fff" strokeWidth="3" strokeLinecap="round" />
+  </svg>
+)

package/src/client/attachments/ImageLightbox.module.css

@@ -0,0 +1,44 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+}
+
+.mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.72);
+}
+
+.image {
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.16);
+  color: #fff;
+  cursor: pointer;
+}
+
+.close:hover {
+  background: rgba(255, 255, 255, 0.28);
+}

package/src/client/attachments/ImageLightbox.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { IconCloseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './ImageLightbox.module.css'
+
+/** Preview strings the owner resolves from its own locale namespace. */
+export interface ImageLightboxLabels {
+  /** Accessible name of the preview dialog. */
+  dialog: string
+  /** Accessible label of the close control. */
+  close: string
+}
+
+/**
+ * Document-level original-image preview opened by clicking a thumbnail.
+ * Closes on Escape, backdrop press, or the close control, and restores focus
+ * to the opener on unmount. Rendered through a body portal: an opener inside
+ * a transformed or filtered ancestor would otherwise trap the fixed backdrop
+ * in that ancestor's box instead of covering the viewport.
+ */
+export function ImageLightbox({ src, alt, labels, onClose }: {
+  src: string
+  alt: string
+  labels: ImageLightboxLabels
+  onClose: () => void
+}) {
+  const closeRef = useRef<HTMLButtonElement | null>(null)
+  const restoreRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    restoreRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null
+    closeRef.current?.focus()
+    const onKeyDown = (event: globalThis.KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      restoreRef.current?.focus()
+    }
+  }, [onClose])
+
+  return createPortal(
+    <div
+      className={css.backdrop}
+      role="dialog"
+      aria-modal="true"
+      aria-label={labels.dialog}
+    >
+      <div className={css.mask} aria-hidden="true" onMouseDown={onClose} />
+      <img className={css.image} src={src} alt={alt} />
+      <button ref={closeRef} type="button" className={css.close} aria-label={labels.close} onClick={onClose}>
+        <IconCloseOutline16 size={16} />
+      </button>
+    </div>,
+    document.body,
+  )
+}

package/src/client/attachments/MessageImage.module.css

@@ -0,0 +1,61 @@
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 100%;
+}
+
+.gallery[data-align='start'] {
+  justify-content: flex-start;
+}
+
+.gallery[data-align='end'] {
+  justify-content: flex-end;
+}
+
+.frame {
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-color-border, rgba(0, 0, 0, 0.08));
+  border-radius: 8px;
+  background: none;
+  cursor: pointer;
+}
+
+.frame[data-variant='tile'] {
+  width: 64px;
+  height: 64px;
+}
+
+.frame img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-width: 64px;
+  min-height: 64px;
+  font-size: 12px;
+  color: var(--dsw-color-text-secondary, #646a73);
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 64px;
+  min-height: 64px;
+  padding: 0 8px;
+  border: 1px dashed var(--dsw-color-border, rgba(0, 0, 0, 0.16));
+  border-radius: 8px;
+  background: none;
+  font-size: 12px;
+  color: var(--dsw-color-text-secondary, #646a73);
+  cursor: pointer;
+}