dsh-remote-control-plugin 0.0.0-stage → 0.3.0

package/web/app.js

@@ -0,0 +1,594 @@
+const $ = (id) => document.getElementById(id)
+
+const el = {
+  login: $('login'),
+  app: $('app'),
+  pairForm: $('pair-form'),
+  code: $('code'),
+  pairSubmit: $('pair-submit'),
+  pairError: $('pair-error'),
+  menu: $('menu'),
+  drawer: $('drawer'),
+  scrim: $('scrim'),
+  sessionList: $('session-list'),
+  newSession: $('new-session'),
+  logout: $('logout'),
+  title: $('session-title'),
+  meta: $('session-meta'),
+  status: $('status'),
+  log: $('log'),
+  empty: $('empty'),
+  composer: $('composer'),
+  input: $('input'),
+  send: $('send'),
+  stop: $('stop'),
+}
+
+const state = {
+  sessions: [],
+  sessionId: null,
+  source: null,
+  seen: new Set(),
+  lastSeq: 0,
+  running: false,
+  pinned: true,
+  live: null,
+  liveText: '',
+  tools: new Map(),
+}
+
+/* ---------------- transport ---------------- */
+
+async function request(path, body) {
+  const response = await fetch(path, {
+    method: body === undefined ? 'GET' : 'POST',
+    credentials: 'same-origin',
+    headers: body === undefined ? undefined : { 'content-type': 'application/json' },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  })
+  const data = await response.json().catch(() => ({}))
+  if (!response.ok) {
+    const error = new Error(data.message || data.error || `HTTP ${response.status}`)
+    error.status = response.status
+    throw error
+  }
+  return data
+}
+
+/* ---------------- boot ---------------- */
+
+boot()
+
+async function boot() {
+  try {
+    const me = await request('/api/me')
+    if (me.authenticated) startApp()
+    else showLogin()
+  } catch {
+    showLogin()
+  }
+}
+
+function showLogin() {
+  el.app.hidden = true
+  el.login.hidden = false
+  el.code.focus()
+}
+
+el.pairForm.addEventListener('submit', async (event) => {
+  event.preventDefault()
+  el.pairError.hidden = true
+  el.pairSubmit.disabled = true
+  try {
+    await request('/api/pair', { code: el.code.value.trim() })
+    location.reload()
+  } catch (error) {
+    el.pairError.textContent = error.message
+    el.pairError.hidden = false
+    el.code.select()
+  } finally {
+    el.pairSubmit.disabled = false
+  }
+})
+
+function startApp() {
+  el.login.hidden = true
+  el.app.hidden = false
+
+  el.menu.addEventListener('click', openDrawer)
+  el.scrim.addEventListener('click', closeDrawer)
+  el.newSession.addEventListener('click', createSession)
+  el.logout.addEventListener('click', async () => {
+    try { await request('/api/logout', {}) } catch { /* ignore */ }
+    location.reload()
+  })
+  el.composer.addEventListener('submit', send)
+  el.input.addEventListener('input', autosize)
+  el.input.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter' && !event.shiftKey && !isTouch()) {
+      event.preventDefault()
+      send(event)
+    }
+  })
+  el.stop.addEventListener('click', stopTurn)
+  el.log.addEventListener('scroll', () => {
+    state.pinned = el.log.scrollHeight - el.log.scrollTop - el.log.clientHeight < 60
+  })
+
+  autosize()
+  loadSessions().catch((error) => addStrip(error.message))
+}
+
+function isTouch() {
+  return window.matchMedia('(pointer: coarse)').matches
+}
+
+/* ---------------- sessions ---------------- */
+
+async function loadSessions() {
+  const value = await request('/api/sessions')
+  state.sessions = Array.isArray(value.items) ? value.items : []
+  renderSessions()
+  if (!state.sessionId && state.sessions.length > 0) {
+    const preferred = state.sessions.find((session) => session.running) || state.sessions[0]
+    selectSession(preferred.id)
+  } else if (state.sessionId) {
+    updateMeta()
+  }
+}
+
+function renderSessions() {
+  el.sessionList.textContent = ''
+  if (state.sessions.length === 0) {
+    const empty = document.createElement('p')
+    empty.className = 'muted tiny'
+    empty.style.padding = '10px 12px'
+    empty.textContent = 'No sessions yet.'
+    el.sessionList.append(empty)
+    return
+  }
+  for (const session of state.sessions) {
+    const button = document.createElement('button')
+    button.type = 'button'
+    button.className = 'session-item'
+    button.setAttribute('aria-current', String(session.id === state.sessionId))
+
+    const row1 = document.createElement('div')
+    row1.className = 'row1'
+    const name = document.createElement('span')
+    name.textContent = titleOf(session)
+    row1.append(name)
+    if (session.running) {
+      const dot = document.createElement('span')
+      dot.className = 'dot'
+      row1.append(dot)
+    }
+
+    const row2 = document.createElement('div')
+    row2.className = 'row2'
+    row2.textContent = subtitleOf(session)
+
+    button.append(row1, row2)
+    button.addEventListener('click', () => {
+      selectSession(session.id)
+      closeDrawer()
+    })
+    el.sessionList.append(button)
+  }
+}
+
+function titleOf(session) {
+  if (session.title) return session.title
+  if (session.cwd) return baseName(session.cwd)
+  return 'Untitled session'
+}
+
+function subtitleOf(session) {
+  const parts = []
+  if (session.cwd) parts.push(baseName(session.cwd))
+  if (session.updatedAt) parts.push(relativeTime(session.updatedAt))
+  if (session.running) parts.push('running')
+  return parts.join(' · ') || session.id
+}
+
+function baseName(value) {
+  const parts = String(value).split(/[\\/]/).filter(Boolean)
+  return parts[parts.length - 1] || String(value)
+}
+
+function relativeTime(value) {
+  const delta = Date.now() - Number(value)
+  if (!Number.isFinite(delta)) return ''
+  const minutes = Math.round(delta / 60000)
+  if (minutes < 1) return 'just now'
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.round(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.round(hours / 24)
+  return `${days}d ago`
+}
+
+async function createSession() {
+  closeDrawer()
+  try {
+    const value = await request('/api/new-session', {})
+    if (value?.sessionId) {
+      await loadSessions()
+      selectSession(value.sessionId)
+      el.input.focus()
+    }
+  } catch (error) {
+    addStrip(`Could not create a session: ${error.message}`)
+  }
+}
+
+function selectSession(id) {
+  if (state.sessionId === id && state.source) return
+  state.sessionId = id
+  state.seen.clear()
+  state.lastSeq = 0
+  state.tools.clear()
+  state.live = null
+  state.liveText = ''
+  state.running = false
+  el.log.textContent = ''
+  el.log.append(el.empty)
+  el.empty.hidden = true
+  setRunning(false)
+  updateMeta()
+  for (const button of el.sessionList.children) {
+    button.setAttribute?.('aria-current', 'false')
+  }
+  renderSessions()
+  openStream()
+}
+
+function updateMeta() {
+  const session = state.sessions.find((entry) => entry.id === state.sessionId)
+  el.title.textContent = session ? titleOf(session) : 'No session'
+  el.meta.textContent = session ? subtitleOf(session) : ''
+}
+
+/* ---------------- stream ---------------- */
+
+function openStream() {
+  state.source?.close()
+  setStatus('connecting')
+  const source = new EventSource(`/api/stream?sessionId=${encodeURIComponent(state.sessionId)}`)
+  state.source = source
+  source.onopen = () => setStatus('live')
+  source.onerror = () => setStatus('error')
+  source.onmessage = (event) => {
+    let frame
+    try { frame = JSON.parse(event.data) } catch { return }
+    handleFrame(frame)
+  }
+}
+
+function handleFrame(frame) {
+  if (!frame || typeof frame !== 'object') return
+  if (frame.type === 'snapshot') {
+    setStatus('live')
+    if (typeof frame.cursor === 'number') state.lastSeq = Math.max(state.lastSeq, frame.cursor)
+    for (const record of frame.records || []) {
+      if (record?.type === 'event' && record.event) appendEvent(record.event)
+    }
+    return
+  }
+  if (frame.type === 'event') {
+    appendEvent(frame.event)
+    return
+  }
+  if (frame.type === 'assistant-stream') {
+    handleLive(frame.frame)
+    return
+  }
+  if (frame.type === 'remote-error') {
+    addStrip(`${frame.code || 'error'}: ${frame.message || 'stream failed'}`)
+    setStatus('error')
+  }
+}
+
+function setStatus(value) {
+  const labels = { live: 'live', connecting: 'connecting', error: 'offline', idle: 'idle' }
+  el.status.dataset.state = value
+  el.status.lastElementChild.textContent = labels[value] || value
+}
+
+/* ---------------- rendering ---------------- */
+
+function appendEvent(event) {
+  if (!event || typeof event.seq !== 'number' || state.seen.has(event.seq)) return
+  state.seen.add(event.seq)
+  state.lastSeq = Math.max(state.lastSeq, event.seq)
+
+  const data = event.data || {}
+  switch (event.type) {
+    case 'user/message': {
+      // Harness-injected context (runtime context, skill catalog, time context)
+      // is also stored as user/message; only genuine prompts belong in the chat.
+      const kind = data.source?.kind
+      if (kind && kind !== 'user') break
+      const text = blocksText(data.content ?? data.message?.content)
+      const images = Array.isArray(data.content)
+        ? data.content.filter((block) => block && block.type === 'image').length
+        : 0
+      if (text) addBubble('user', text)
+      else if (images > 0) addBubble('user', `[${images} image${images > 1 ? 's' : ''}]`)
+      break
+    }
+    case 'session/title': {
+      const title = typeof data.title === 'string' ? data.title.trim() : ''
+      if (title) {
+        el.title.textContent = title
+        const session = state.sessions.find((entry) => entry.id === state.sessionId)
+        if (session) session.title = title
+      }
+      break
+    }
+    case 'assistant/message': {
+      clearLive()
+      const text = blocksText(data.message?.content)
+      const reasoning = blocksReasoning(data.message?.content)
+      if (text || reasoning) addAssistant(text, reasoning, data.interrupted === true)
+      break
+    }
+    case 'assistant/attempt':
+      clearLive()
+      break
+    case 'tool/call':
+      addToolCall(data)
+      break
+    case 'tool/result':
+      addToolResult(data)
+      break
+    case 'turn/start':
+      setRunning(true)
+      break
+    case 'turn/end': {
+      setRunning(false)
+      const reason = data.reason || {}
+      if (reason.kind === 'error') {
+        addStrip(`Turn failed: ${reason.error?.message || reason.error?.code || 'unknown error'}`)
+      } else if (reason.kind === 'aborted') {
+        addNote('Stopped')
+      } else if (reason.kind === 'max-tokens') {
+        addNote('Stopped at the token limit')
+      }
+      break
+    }
+    default:
+      break
+  }
+}
+
+function blocksText(content) {
+  if (typeof content === 'string') return content
+  if (!Array.isArray(content)) return ''
+  return content
+    .map((block) => (block && block.type === 'text' ? String(block.text ?? '') : ''))
+    .join('')
+}
+
+function blocksReasoning(content) {
+  if (!Array.isArray(content)) return ''
+  return content
+    .map((block) => (block && block.type === 'reasoning' ? String(block.text ?? '') : ''))
+    .join('\n')
+}
+
+function addBubble(kind, text) {
+  const bubble = document.createElement('div')
+  bubble.className = `bubble ${kind}`
+  bubble.textContent = text
+  push(bubble)
+  return bubble
+}
+
+function addAssistant(text, reasoning, interrupted) {
+  const bubble = document.createElement('div')
+  bubble.className = 'bubble assistant'
+  if (interrupted) bubble.classList.add('interrupted')
+  if (reasoning) {
+    const details = document.createElement('details')
+    details.className = 'tool'
+    const summary = document.createElement('summary')
+    summary.textContent = 'Reasoning'
+    const pre = document.createElement('pre')
+    pre.textContent = reasoning
+    details.append(summary, pre)
+    bubble.append(details)
+  }
+  if (text) {
+    const body = document.createElement('div')
+    body.textContent = text
+    bubble.append(body)
+  }
+  if (interrupted) {
+    const note = document.createElement('span')
+    note.className = 'label'
+    note.textContent = 'interrupted'
+    bubble.append(note)
+  }
+  push(bubble)
+}
+
+function addToolCall(data) {
+  const name = String(data.name || 'tool')
+  let hint = ''
+  try {
+    const args = JSON.parse(data.arguments || '{}')
+    hint = args.command || args.path || args.query || args.description || args.file_path || ''
+  } catch {
+    hint = String(data.arguments || '')
+  }
+  const details = document.createElement('details')
+  details.className = 'tool'
+
+  const summary = document.createElement('summary')
+  const toolName = document.createElement('span')
+  toolName.className = 'tool-name'
+  toolName.textContent = name
+  const toolHint = document.createElement('span')
+  toolHint.className = 'tool-hint'
+  toolHint.textContent = String(hint).replace(/\s+/g, ' ').slice(0, 120)
+  summary.append('⚙', toolName, toolHint)
+
+  const pre = document.createElement('pre')
+  pre.textContent = prettyJson(data.arguments)
+  details.append(summary, pre)
+
+  if (data.callId) state.tools.set(data.callId, details)
+  push(details)
+}
+
+function addToolResult(data) {
+  const details = data.message?.toolCallId ? state.tools.get(data.message.toolCallId) : undefined
+  const output = blocksText(data.message?.content)
+  const failed = Boolean(data.error) || data.message?.isError === true
+  const target = details || document.createElement('details')
+
+  if (!details) {
+    target.className = 'tool'
+    const summary = document.createElement('summary')
+    summary.textContent = 'tool result'
+    target.append(summary)
+    push(target)
+  }
+  if (failed) target.classList.add('error')
+
+  const pre = document.createElement('pre')
+  if (failed && data.error) {
+    pre.textContent = `${data.error.name || 'error'}: ${data.error.reason || data.error.code || ''}`
+    if (output) pre.textContent += `\n\n${output}`
+  } else {
+    pre.textContent = output || '(no output)'
+  }
+  target.append(pre)
+}
+
+function addNote(text) {
+  const note = document.createElement('div')
+  note.className = 'note'
+  note.textContent = text
+  push(note)
+}
+
+function addStrip(text) {
+  const strip = document.createElement('div')
+  strip.className = 'strip'
+  strip.textContent = text
+  push(strip)
+}
+
+function push(node) {
+  el.empty.hidden = true
+  el.log.append(node)
+  if (state.pinned) {
+    requestAnimationFrame(() => { el.log.scrollTop = el.log.scrollHeight })
+  }
+}
+
+function prettyJson(value) {
+  if (typeof value !== 'string') return JSON.stringify(value, null, 2) ?? ''
+  try { return JSON.stringify(JSON.parse(value), null, 2) } catch { return value }
+}
+
+/* ---------------- live assistant stream ---------------- */
+
+function handleLive(frame) {
+  if (!frame || typeof frame !== 'object') return
+  if (frame.type === 'start') {
+    clearLive()
+    state.live = document.createElement('div')
+    state.live.className = 'bubble assistant live'
+    state.liveText = ''
+    const body = document.createElement('div')
+    body.className = 'live-body'
+    state.live.append(body)
+    push(state.live)
+    return
+  }
+  if (frame.type === 'chunk') {
+    const chunk = frame.chunk || {}
+    if (!state.live) return
+    const body = state.live.querySelector('.live-body')
+    if (chunk.type === 'text-delta') {
+      state.liveText += String(chunk.text ?? '')
+      body.textContent = state.liveText
+    } else if (chunk.type === 'block-end' && chunk.block?.type === 'text') {
+      state.liveText = String(chunk.block.text ?? '')
+      body.textContent = state.liveText
+    }
+    if (state.pinned) requestAnimationFrame(() => { el.log.scrollTop = el.log.scrollHeight })
+    return
+  }
+  if (frame.type === 'end') {
+    const live = state.live
+    setTimeout(() => {
+      if (state.live === live) clearLive()
+    }, 800)
+  }
+}
+
+function clearLive() {
+  if (state.live) {
+    state.live.remove()
+    state.live = null
+    state.liveText = ''
+  }
+}
+
+/* ---------------- actions ---------------- */
+
+function setRunning(value) {
+  state.running = value
+  el.stop.hidden = !value
+  el.send.disabled = false
+}
+
+async function send(event) {
+  event?.preventDefault()
+  const text = el.input.value.trim()
+  if (!text || !state.sessionId) return
+  el.input.value = ''
+  autosize()
+  try {
+    await request('/api/prompt', { sessionId: state.sessionId, text })
+    if (state.pinned) requestAnimationFrame(() => { el.log.scrollTop = el.log.scrollHeight })
+  } catch (error) {
+    el.input.value = text
+    autosize()
+    addStrip(`Could not send: ${error.message}`)
+  }
+}
+
+async function stopTurn() {
+  if (!state.sessionId) return
+  el.stop.disabled = true
+  try {
+    await request('/api/cancel', { sessionId: state.sessionId })
+  } catch (error) {
+    addStrip(`Could not stop: ${error.message}`)
+  } finally {
+    el.stop.disabled = false
+  }
+}
+
+function autosize() {
+  el.input.style.height = 'auto'
+  el.input.style.height = `${Math.min(el.input.scrollHeight, window.innerHeight * 0.4)}px`
+}
+
+/* ---------------- drawer ---------------- */
+
+function openDrawer() {
+  el.drawer.hidden = false
+  el.scrim.hidden = false
+  loadSessions().catch(() => {})
+}
+
+function closeDrawer() {
+  el.drawer.hidden = true
+  el.scrim.hidden = true
+}

package/web/icon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="Remote Control">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#2f6bff"/>
+      <stop offset="1" stop-color="#7a3cff"/>
+    </linearGradient>
+  </defs>
+  <rect x="2" y="2" width="60" height="60" rx="16" fill="url(#bg)"/>
+  <rect x="20" y="12" width="24" height="40" rx="6" fill="none" stroke="#ffffff" stroke-width="3.2"/>
+  <line x1="28" y1="17" x2="36" y2="17" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M27 30l-4 5 4 5" fill="none" stroke="#dce6ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="35" y1="29" x2="35" y2="41" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
+  <path d="M44 24c3 2.5 3 13.5 0 16" fill="none" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round" opacity="0.9"/>
+  <path d="M49 19c5.5 4.5 5.5 21.5 0 26" fill="none" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round" opacity="0.55"/>
+</svg>

package/web/index.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="color-scheme" content="dark light" />
+    <meta name="theme-color" content="#0b0d12" />
+    <title>DSH Remote Control</title>
+    <link rel="icon" href="/icon.svg" />
+    <link rel="stylesheet" href="/app.css" />
+  </head>
+  <body>
+    <section id="login" class="login" hidden>
+      <div class="login-card">
+        <img class="login-logo" src="/icon.svg" alt="" width="64" height="64" />
+        <h1>Remote Control</h1>
+        <p class="muted">
+          Enter the pairing code printed by the DeepSeek Harness Host. The code is
+          stored in <code>remote-control.json</code> inside your DSH home directory.
+        </p>
+        <form id="pair-form" autocomplete="off">
+          <label class="sr-only" for="code">Pairing code</label>
+          <input
+            id="code"
+            name="code"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            maxlength="12"
+            placeholder="000000"
+            autocomplete="one-time-code"
+            spellcheck="false"
+            required
+          />
+          <button type="submit" id="pair-submit">Pair this device</button>
+        </form>
+        <p id="pair-error" class="error" role="alert" hidden></p>
+        <p class="muted tiny">
+          This page can send prompts and stop turns on the paired Host. Keep the URL
+          and code to yourself.
+        </p>
+      </div>
+    </section>
+
+    <section id="app" class="app" hidden>
+      <header class="bar">
+        <button id="menu" class="icon-button" type="button" aria-label="Sessions">
+          <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
+            <path d="M4 7h16M4 12h16M4 17h16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div class="bar-title">
+          <span id="session-title">No session</span>
+          <span id="session-meta" class="muted tiny"></span>
+        </div>
+        <span id="status" class="status" title="Stream status"><i></i><span>idle</span></span>
+      </header>
+
+      <div id="scrim" class="scrim" hidden></div>
+      <aside id="drawer" class="drawer" hidden>
+        <div class="drawer-head">
+          <strong>Sessions</strong>
+          <button id="new-session" class="ghost-button" type="button">New</button>
+        </div>
+        <div id="session-list" class="session-list"></div>
+        <div class="drawer-foot">
+          <button id="logout" class="link-button" type="button">Forget this device</button>
+        </div>
+      </aside>
+
+      <main id="log" class="log" aria-live="polite">
+        <div id="empty" class="empty">
+          <p>Pick a session from the list, or create a new one.</p>
+        </div>
+      </main>
+
+      <form id="composer" class="composer">
+        <textarea id="input" rows="1" placeholder="Message the agent…" enterkeyhint="send"></textarea>
+        <button id="stop" class="stop" type="button" hidden>Stop</button>
+        <button id="send" class="send" type="submit">Send</button>
+      </form>
+    </section>
+
+    <script type="module" src="/app.js"></script>
+  </body>
+</html>