@demicodes/web-ui 0.3.1

package/src/composables/useTerminalTheme.ts

@@ -0,0 +1,75 @@
+import { computed, type ComputedRef } from 'vue'
+import { useTheme } from '../theme/appTheme'
+
+export interface TerminalTheme {
+  foreground: string
+  background: string
+  black: string
+  red: string
+  green: string
+  yellow: string
+  blue: string
+  magenta: string
+  cyan: string
+  white: string
+  brightBlack: string
+  brightRed: string
+  brightGreen: string
+  brightYellow: string
+  brightBlue: string
+  brightMagenta: string
+  brightCyan: string
+  brightWhite: string
+}
+
+const darkTheme: TerminalTheme = {
+  background: '#171717',
+  foreground: '#d4d4d8',
+  black: '#171717',
+  red: '#f87171',
+  green: '#4ade80',
+  yellow: '#facc15',
+  blue: '#60a5fa',
+  magenta: '#c084fc',
+  cyan: '#22d3ee',
+  white: '#d4d4d8',
+  brightBlack: '#525252',
+  brightRed: '#fca5a5',
+  brightGreen: '#86efac',
+  brightYellow: '#fde68a',
+  brightBlue: '#93c5fd',
+  brightMagenta: '#d8b4fe',
+  brightCyan: '#67e8f9',
+  brightWhite: '#fafafa',
+}
+
+const lightTheme: TerminalTheme = {
+  background: '#f9fafb',
+  foreground: '#1e1e1e',
+  black: '#1e1e1e',
+  red: '#dc2626',
+  green: '#16a34a',
+  yellow: '#a16207',
+  blue: '#2563eb',
+  magenta: '#9333ea',
+  cyan: '#0891b2',
+  white: '#d4d4d8',
+  brightBlack: '#737373',
+  brightRed: '#ef4444',
+  brightGreen: '#22c55e',
+  brightYellow: '#ca8a04',
+  brightBlue: '#3b82f6',
+  brightMagenta: '#a855f7',
+  brightCyan: '#06b6d4',
+  brightWhite: '#f5f5f5',
+}
+
+let terminalTheme: ComputedRef<TerminalTheme> | undefined
+
+export function useTerminalTheme(): { terminalTheme: ComputedRef<TerminalTheme> } {
+  if (!terminalTheme) {
+    const { theme } = useTheme()
+    terminalTheme = computed<TerminalTheme>(() => (theme.value === 'dark' ? darkTheme : lightTheme))
+  }
+  return { terminalTheme }
+}

package/src/env.d.ts

@@ -0,0 +1,10 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}
+
+declare module '*.svg?raw' {
+  const content: string
+  export default content
+}

package/src/infra/errors.ts

@@ -0,0 +1,29 @@
+import { reactive } from 'vue'
+
+export interface Toast {
+  id: string
+  title: string
+  message: string
+}
+
+export interface ReportErrorOptions {
+  userVisible?: boolean
+  expected?: boolean
+  detail?: string
+}
+
+export const toasts = reactive<Toast[]>([])
+
+export function reportError(title: string, error: unknown, options: ReportErrorOptions = {}): void {
+  const message = error instanceof Error ? error.message : String(error)
+  if (!options.expected) console.error(`[demi] ${title}: ${message}`, options.detail ?? '')
+  if (!options.userVisible) return
+  const id = globalThis.crypto.randomUUID()
+  toasts.push({ id, title, message })
+  setTimeout(() => dismissToast(id), 6000)
+}
+
+export function dismissToast(id: string): void {
+  const index = toasts.findIndex((toast) => toast.id === id)
+  if (index >= 0) toasts.splice(index, 1)
+}

package/src/infra/i18n.ts

@@ -0,0 +1,41 @@
+// Minimal English string table. Keys mirror agent-gui's i18n keys for the ported
+// tab/list/input surfaces; unmapped keys fall back to the key itself.
+
+const messages: Record<string, string> = {
+  'common.rename': 'Rename',
+  'common.close': 'Close',
+  'agent.noWorkspace': 'No workspace open',
+  'agent.newConversation': 'New conversation',
+  'agent.tab.newTabRight': 'New tab to the right',
+  'agent.tab.closeOthers': 'Close others',
+  'agent.tab.closeToLeft': 'Close tabs to the left',
+  'agent.tab.closeToRight': 'Close tabs to the right',
+  'agent.tab.closeAll': 'Close all tabs',
+  'agent.tab.copyConversationId': 'Copy conversation ID',
+  'common.continue': 'Continue',
+  'agent.block.thinking': 'Thinking',
+  'agent.block.thinkingFor': 'Thinking for',
+  'agent.block.thoughtFor': 'Thought for',
+  'agent.block.error': 'Error',
+  'agent.block.stackTrace': 'Stack trace',
+  'agent.block.aborted': 'Aborted',
+  'agent.stats.contextWindow': 'Context window',
+  'agent.stats.cacheRead': 'Cache read',
+  'agent.stats.input': 'Input',
+  'agent.stats.output': 'Output',
+  'agent.stats.cacheWrite': 'Cache write',
+  'agent.stats.totalUsage': 'Total usage',
+  'agent.stats.unavailable': 'N/A',
+  'providers.model.thinking': 'Thinking',
+  'providers.reasoning': 'Reasoning effort',
+  'agent.context.compacting': 'Compacting context…',
+  'agent.context.noUsage': 'No usage recorded yet',
+  'agent.context.unavailable': 'Context usage unavailable',
+  'agent.context.compactHint': 'Click to compact context',
+  'agent.conversationList.placeholder': 'Search conversations…',
+  'agent.conversationList.empty': 'No conversations',
+}
+
+export function t(key: string): string {
+  return messages[key] ?? key
+}

package/src/markdown/filePath.ts

@@ -0,0 +1,54 @@
+const LINE_RANGE_SUFFIX_RE = /:\d+(?:-\d+)?$/
+
+function joinPath(cwd: string, path: string): string {
+  const trimmedCwd = cwd.endsWith('/') ? cwd.slice(0, -1) : cwd
+  const trimmedPath = path.replace(/^\.\/+/, '')
+  return `${trimmedCwd}/${trimmedPath}`.replace(/\/{2,}/g, '/')
+}
+
+export function normalizeFilePath(rawPath: string): string {
+  const trimmedPath = rawPath.trim()
+  if (!trimmedPath) return ''
+
+  const withoutScheme = trimmedPath.startsWith('file://')
+    ? trimmedPath.slice('file://'.length)
+    : trimmedPath
+  const withoutLineRange = withoutScheme.replace(LINE_RANGE_SUFFIX_RE, '')
+  const withoutCurrentDirPrefix = withoutLineRange.replace(/^\.\/+/, '')
+
+  if (withoutCurrentDirPrefix.length > 1 && withoutCurrentDirPrefix.endsWith('/')) {
+    return withoutCurrentDirPrefix.slice(0, -1)
+  }
+  return withoutCurrentDirPrefix
+}
+
+export function resolveAbsolutePath(cwd: string, rawPath: string): string {
+  const normalizedPath = normalizeFilePath(rawPath)
+  if (!normalizedPath) return ''
+  return normalizedPath.startsWith('/') ? normalizedPath : joinPath(cwd, normalizedPath)
+}
+
+export function isHttpUrl(path: string): boolean {
+  return path.startsWith('http://') || path.startsWith('https://')
+}
+
+export function isLikelyFilePath(rawPath: string): boolean {
+  const trimmedPath = rawPath.trim()
+  const normalizedPath = normalizeFilePath(trimmedPath)
+  if (!normalizedPath) return false
+  if (normalizedPath.startsWith('#')) return false
+  if (normalizedPath.startsWith('mailto:')) return false
+  if (isHttpUrl(normalizedPath)) return false
+
+  if (trimmedPath.endsWith('/')) return true
+
+  return normalizedPath.startsWith('/')
+    || normalizedPath.startsWith('./')
+    || normalizedPath.startsWith('../')
+    || normalizedPath.includes('/')
+    || /^[^/\\\s]+\.[^/\\\s]+$/.test(normalizedPath)
+}
+
+export function toLocalFileUrl(filePath: string): string {
+  return `local-file://${encodeURI(filePath)}`
+}

package/src/markdown/highlight.ts

@@ -0,0 +1,139 @@
+import { readonly, shallowRef } from 'vue'
+import { createHighlighter, type BundledLanguage, type BundledTheme, type Highlighter } from 'shiki'
+import { codeThemes, findCodeTheme } from '../theme/codeThemes'
+import type { MarkdownThemeSnapshot } from './types'
+
+const ALL_SHIKI_THEMES: BundledTheme[] = [
+  ...new Set(codeThemes.flatMap((theme) => [theme.dark.shikiTheme, theme.light.shikiTheme])),
+]
+
+const LANGS = [
+  'typescript', 'javascript', 'tsx', 'jsx', 'json', 'jsonc',
+  'html', 'css', 'scss', 'less', 'vue',
+  'python', 'ruby', 'rust', 'go', 'java', 'kotlin', 'swift', 'dart', 'php',
+  'c', 'cpp', 'csharp',
+  'bash',
+  'yaml', 'toml', 'ini', 'xml', 'sql', 'graphql',
+  'markdown', 'dockerfile', 'makefile',
+] as const
+
+const LANG_ALIASES: Record<string, string> = {
+  shell: 'bash',
+  sh: 'bash',
+  zsh: 'bash',
+  js: 'javascript',
+  ts: 'typescript',
+  py: 'python',
+  rb: 'ruby',
+  rs: 'rust',
+  cs: 'csharp',
+  yml: 'yaml',
+}
+
+const highlighter = shallowRef<Highlighter | null>(null)
+const renderVersion = shallowRef(0)
+
+const highlighterReady = createHighlighter({ themes: ALL_SHIKI_THEMES, langs: [...LANGS] }).then((instance) => {
+  highlighter.value = instance
+  renderVersion.value += 1
+})
+
+function escapeHtml(str: string): string {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+function detectThemeMode(): 'light' | 'dark' {
+  if (typeof document === 'undefined') return 'dark'
+  return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark'
+}
+
+function getShikiTheme(theme?: MarkdownThemeSnapshot): BundledTheme {
+  const snapshot = theme ?? { mode: detectThemeMode(), codeThemeId: codeThemes[0]?.id ?? 'one' }
+  const definition = findCodeTheme(snapshot.codeThemeId)
+  return snapshot.mode === 'light' ? definition.light.shikiTheme : definition.dark.shikiTheme
+}
+
+function resolveLang(lang: string): string {
+  if (!lang || lang === 'text' || lang === 'plaintext') return 'text'
+  const instance = highlighter.value
+  if (!instance) return 'text'
+  const resolved = LANG_ALIASES[lang] ?? lang
+  return instance.getLoadedLanguages().includes(resolved as BundledLanguage) ? resolved : 'text'
+}
+
+export function codeToHtml(code: string, lang: string, theme?: MarkdownThemeSnapshot): string {
+  const instance = highlighter.value
+  if (!instance) return `<pre><code>${escapeHtml(code)}</code></pre>`
+
+  return instance.codeToHtml(code, {
+    lang: resolveLang(lang),
+    theme: getShikiTheme(theme),
+    transformers: [{
+      pre(node) {
+        const style = String(node.properties?.['style'] ?? '')
+        node.properties['style'] = style.replace(/background-color:[^;]+;?\s*/g, '').trim() || undefined
+      },
+    }],
+  })
+}
+
+export interface TokenSpan {
+  content: string
+  color?: string
+}
+
+export function codeToTokenLines(code: string, lang: string, theme?: MarkdownThemeSnapshot): TokenSpan[][] {
+  const instance = highlighter.value
+  if (!instance) {
+    return splitLines(code).map((line) => [{ content: line }])
+  }
+  const resolved = resolveLang(lang) as BundledLanguage
+  const { tokens } = instance.codeToTokens(code, { lang: resolved, theme: getShikiTheme(theme) })
+  return tokens.map((line) => line.map((t): TokenSpan => t.color ? { content: t.content, color: t.color } : { content: t.content }))
+}
+
+const EXT_TO_LANG: Record<string, string> = {
+  '.ts': 'typescript', '.tsx': 'tsx', '.js': 'javascript', '.jsx': 'jsx',
+  '.cjs': 'javascript', '.mjs': 'javascript',
+  '.json': 'json', '.jsonc': 'jsonc',
+  '.vue': 'vue', '.html': 'html', '.htm': 'html',
+  '.css': 'css', '.scss': 'scss', '.less': 'less',
+  '.md': 'markdown',
+  '.py': 'python', '.rb': 'ruby', '.rs': 'rust', '.go': 'go',
+  '.java': 'java', '.kt': 'kotlin', '.swift': 'swift', '.dart': 'dart', '.php': 'php',
+  '.c': 'c', '.h': 'c', '.cpp': 'cpp', '.cc': 'cpp', '.hpp': 'cpp', '.cs': 'csharp',
+  '.sh': 'bash', '.zsh': 'bash', '.bash': 'bash',
+  '.yml': 'yaml', '.yaml': 'yaml',
+  '.xml': 'xml', '.svg': 'xml',
+  '.sql': 'sql', '.graphql': 'graphql',
+  '.toml': 'toml', '.ini': 'ini', '.env': 'ini',
+}
+
+const FILENAME_TO_LANG: Record<string, string> = {
+  Dockerfile: 'dockerfile',
+  Makefile: 'makefile',
+  '.gitignore': 'ini',
+}
+
+export function getLanguageFromPath(filepath: string): string {
+  const filename = filepath.split('/').pop() ?? ''
+  const byName = FILENAME_TO_LANG[filename]
+  if (byName) return byName
+  const dotIndex = filename.lastIndexOf('.')
+  if (dotIndex <= 0) return 'text'
+  return EXT_TO_LANG[filename.slice(dotIndex).toLowerCase()] ?? 'text'
+}
+
+export function useMarkdownRenderVersion() {
+  return readonly(renderVersion)
+}
+
+export async function waitForMarkdownHighlighter() {
+  await highlighterReady
+}
+
+function splitLines(code: string): string[] {
+  const lines = code.split('\n')
+  if (lines.at(-1) === '') lines.pop()
+  return lines
+}

package/src/markdown/md.ts

@@ -0,0 +1,58 @@
+import { Marked } from 'marked'
+import DOMPurify from 'dompurify'
+import { renderMarkdown } from './render'
+import { isHttpUrl } from './filePath'
+import { codeToHtml } from './highlight'
+import type { MarkdownRenderOptions } from './types'
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+const userMarked = new Marked({
+  gfm: true,
+  breaks: true,
+  renderer: {
+    html({ text }) {
+      return escapeHtml(text)
+    },
+    code({ text, lang }) {
+      return codeToHtml(text, lang ?? '')
+    },
+    codespan({ text }) {
+      return `<code>${escapeHtml(text)}</code>`
+    },
+    link(token) {
+      const href = token.href
+      const body = this.parser.parseInline(token.tokens)
+      if (isHttpUrl(href)) {
+        return `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${body}</a>`
+      }
+      return body
+    },
+  },
+})
+// Deliberately no KaTeX on user content: people type `$` for shell vars ($PATH), prices,
+// and when discussing LaTeX itself, so rendering math here causes far more false positives
+// than it's worth. Math rendering applies to assistant output only (see render.ts).
+
+function escapeBlockSyntax(src: string): string {
+  return src
+    .replace(/^(\d+)([.)]) /gm, '$1\\$2 ')
+    .replace(/^([-*+]) /gm, '\\$1 ')
+    .replace(/^(#{1,6}) /gm, '\\$1 ')
+    .replace(/^(>)/gm, '\\$1')
+}
+
+export const md = {
+  render(src: string, options?: MarkdownRenderOptions): string {
+    return DOMPurify.sanitize(renderMarkdown(src, options), { ADD_ATTR: ['style', 'data-file-link'] })
+  },
+  renderUser(src: string): string {
+    return DOMPurify.sanitize(userMarked.parse(escapeBlockSyntax(src), { async: false }) as string)
+  },
+}

package/src/markdown/render.ts

@@ -0,0 +1,117 @@
+import { Marked } from 'marked'
+import markedKatex from 'marked-katex-extension'
+import type { MarkdownRenderOptions } from './types'
+import { codeToHtml } from './highlight'
+import { isHttpUrl, isLikelyFilePath, normalizeFilePath, resolveAbsolutePath, toLocalFileUrl } from './filePath'
+
+// `$...$` inline / `$$...$$` block LaTeX, rendered to self-contained HTML (KaTeX CSS is loaded
+// by the app). `nonStandard` lets inline math sit flush against CJK text the model writes;
+// `throwOnError` keeps malformed math from blowing up the whole message.
+const katexExtension = markedKatex({ throwOnError: false, nonStandard: true, output: 'html' })
+
+const INLINE_CODE_RE = /`([^`\n]+)`/g
+const MARKDOWN_LINK_RE = /\[[^\]]*]\(([^)]+)\)/g
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function extractLinkHref(rawTarget: string): string {
+  const trimmed = rawTarget.trim()
+  if (!trimmed) return ''
+
+  const unwrapped = trimmed.startsWith('<') && trimmed.endsWith('>')
+    ? trimmed.slice(1, -1)
+    : trimmed
+  const separatorIndex = unwrapped.search(/\s/)
+  return separatorIndex === -1 ? unwrapped : unwrapped.slice(0, separatorIndex)
+}
+
+export function extractFilePathCandidates(src: string): Set<string> {
+  const candidates = new Set<string>()
+
+  for (const match of src.matchAll(INLINE_CODE_RE)) {
+    const codeText = match[1]
+    if (!codeText || !isLikelyFilePath(codeText)) continue
+    const normalizedPath = normalizeFilePath(codeText)
+    if (normalizedPath) candidates.add(normalizedPath)
+  }
+
+  for (const match of src.matchAll(MARKDOWN_LINK_RE)) {
+    const rawHref = match[1]
+    if (!rawHref) continue
+    const href = extractLinkHref(rawHref)
+    if (!isLikelyFilePath(href)) continue
+    const normalizedPath = normalizeFilePath(href)
+    if (normalizedPath) candidates.add(normalizedPath)
+  }
+
+  return candidates
+}
+
+function resolveImageSource(href: string, basePath?: string): string {
+  const trimmedHref = href.trim()
+  if (!trimmedHref) return ''
+  if (isHttpUrl(trimmedHref) || trimmedHref.startsWith('data:') || trimmedHref.startsWith('local-file:')) return trimmedHref
+  if (!basePath) return trimmedHref
+  const absPath = resolveAbsolutePath(basePath, trimmedHref)
+  return absPath ? toLocalFileUrl(absPath) : trimmedHref
+}
+
+function createMarked(options?: MarkdownRenderOptions) {
+  const knownPaths = options?.knownPaths
+  const basePath = options?.basePath
+
+  const marked = new Marked({
+    gfm: true,
+    breaks: true,
+    renderer: {
+      html({ text }) {
+        return escapeHtml(text)
+      },
+      code({ text, lang }) {
+        return codeToHtml(text, lang ?? '', options?.theme)
+      },
+      codespan({ text }) {
+        const normalizedPath = normalizeFilePath(text)
+        if (isLikelyFilePath(text) && knownPaths?.has(normalizedPath)) {
+          return `<a class="file-link" href="${escapeHtml(normalizedPath)}" data-file-link>${escapeHtml(text)}</a>`
+        }
+        return `<code>${escapeHtml(text)}</code>`
+      },
+      link(token) {
+        const href = extractLinkHref(token.href)
+        const body = this.parser.parseInline(token.tokens)
+        if (isHttpUrl(href)) {
+          return `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${body}</a>`
+        }
+        if (isLikelyFilePath(href)) {
+          const normalizedPath = normalizeFilePath(href)
+          if (!knownPaths || knownPaths.has(normalizedPath)) {
+            return `<a href="${escapeHtml(normalizedPath)}" data-file-link>${body}</a>`
+          }
+        }
+        return body
+      },
+      image(token) {
+        const href = extractLinkHref(token.href)
+        const safeSrc = resolveImageSource(href, basePath)
+        if (!safeSrc) return escapeHtml(token.text)
+
+        const title = token.title ? ` title="${escapeHtml(token.title)}"` : ''
+        const alt = escapeHtml(token.text)
+        return `<img src="${escapeHtml(safeSrc)}" alt="${alt}"${title} />`
+      },
+    },
+  })
+  marked.use(katexExtension)
+  return marked
+}
+
+export function renderMarkdown(src: string, options?: MarkdownRenderOptions): string {
+  return createMarked(options).parse(src, { async: false }) as string
+}

package/src/markdown/types.ts

@@ -0,0 +1,20 @@
+export interface MarkdownThemeSnapshot {
+  mode: 'light' | 'dark'
+  codeThemeId: string
+}
+
+export interface MarkdownRenderOptions {
+  knownPaths?: Set<string>
+  basePath?: string
+  theme?: MarkdownThemeSnapshot
+}
+
+export type MarkdownRenderer = (src: string, options?: MarkdownRenderOptions) => string
+
+export interface MarkdownLinkClick {
+  href: string
+  event: MouseEvent
+  basePath?: string
+}
+
+export type MarkdownLinkHandler = (payload: MarkdownLinkClick) => void

package/src/overlay/appOverlay.ts

@@ -0,0 +1,3 @@
+import { createOverlayStore } from './overlayStore'
+
+export const appOverlayStore = createOverlayStore()

package/src/overlay/overlayStore.ts

@@ -0,0 +1,54 @@
+import { createStore } from '../store/createStore'
+
+export interface OverlayEntry {
+  id: string
+  close: () => void
+}
+
+export interface OverlayStore {
+  state: {
+    entries: OverlayEntry[]
+  }
+  hasEntries(): boolean
+  closeTop(): void
+  push(id: string, close: () => void): () => void
+  remove(id: string): void
+  subscribe(listener: () => void): () => void
+}
+
+export function createOverlayStore(): OverlayStore {
+  const store = createStore<{ entries: OverlayEntry[] }>({ entries: [] })
+
+  return {
+    state: store.state,
+    subscribe: store.subscribe,
+    hasEntries() {
+      return store.state.entries.length > 0
+    },
+    closeTop() {
+      const top = store.state.entries[store.state.entries.length - 1]
+      if (!top) return
+      top.close()
+    },
+    push(id, close) {
+      store.update((state) => {
+        state.entries.push({ id, close })
+      })
+
+      return () => {
+        const index = store.state.entries.findIndex((entry) => entry.id === id)
+        if (index < 0) return
+        store.update((state) => {
+          state.entries.splice(index, 1)
+        })
+      }
+    },
+    remove(id) {
+      const index = store.state.entries.findIndex((entry) => entry.id === id)
+      if (index < 0) return
+      store.update((state) => {
+        state.entries.splice(index, 1)
+      })
+    },
+  }
+}

package/src/store/createStore.ts

@@ -0,0 +1,33 @@
+import { reactive } from 'vue'
+
+export interface Store<T extends object> {
+  state: T
+  patch(partial: Partial<T>): void
+  update(mutator: (state: T) => void): void
+  subscribe(listener: () => void): () => void
+}
+
+export function createStore<T extends object>(initialState: T): Store<T> {
+  const state = reactive(initialState) as T
+  const listeners = new Set<() => void>()
+
+  function notify() {
+    for (const listener of listeners) listener()
+  }
+
+  return {
+    state,
+    patch(partial) {
+      Object.assign(state, partial)
+      notify()
+    },
+    update(mutator) {
+      mutator(state)
+      notify()
+    },
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+  }
+}

package/src/store/useStore.ts

@@ -0,0 +1,7 @@
+export interface StoreStateSource<T extends object> {
+  state: T
+}
+
+export function useStore<T extends object>(store: StoreStateSource<T>): T {
+  return store.state
+}