@demicodes/web-ui 0.3.1

package/src/theme/codeThemes.ts

@@ -0,0 +1,454 @@
+import type { BundledTheme } from 'shiki'
+
+export interface CodeThemePalette {
+  // Editor UI
+  background: string
+  foreground: string
+  selection: string
+  lineHighlight: string
+  cursor: string
+  lineNumber: string
+  activeLineNumber: string
+  // Syntax highlighting
+  keyword: string
+  controlKeyword: string
+  string: string
+  number: string
+  comment: string
+  function: string
+  variable: string
+  type: string
+  constant: string
+  operator: string
+  punctuation: string
+  tag: string
+  attribute: string
+  regexp: string
+  invalid: string
+}
+
+export interface CodeThemeDefinition {
+  id: string
+  label: string
+  dark: {
+    palette: CodeThemePalette
+    shikiTheme: BundledTheme
+  }
+  light: {
+    palette: CodeThemePalette
+    shikiTheme: BundledTheme
+  }
+}
+
+export const codeThemes: CodeThemeDefinition[] = [
+  {
+    id: 'one',
+    label: 'One',
+    dark: {
+      shikiTheme: 'one-dark-pro',
+      palette: {
+        background: '#282c34',
+        foreground: '#abb2bf',
+        selection: '#67769660',
+        lineHighlight: '#2c313c',
+        cursor: '#528bff',
+        lineNumber: '#495162',
+        activeLineNumber: '#abb2bf',
+        keyword: '#c678dd',
+        controlKeyword: '#c678dd',
+        string: '#98c379',
+        number: '#d19a66',
+        comment: '#7f848e',
+        function: '#61afef',
+        variable: '#e06c75',
+        type: '#e5c07b',
+        constant: '#d19a66',
+        operator: '#56b6c2',
+        punctuation: '#abb2bf',
+        tag: '#e06c75',
+        attribute: '#d19a66',
+        regexp: '#56b6c2',
+        invalid: '#f44747',
+      },
+    },
+    light: {
+      shikiTheme: 'one-light',
+      palette: {
+        background: '#fafafa',
+        foreground: '#383a42',
+        selection: '#e5e5e6',
+        lineHighlight: '#383a420c',
+        cursor: '#526fff',
+        lineNumber: '#9d9d9f',
+        activeLineNumber: '#383a42',
+        keyword: '#a626a4',
+        controlKeyword: '#a626a4',
+        string: '#50a14f',
+        number: '#986801',
+        comment: '#a0a1a7',
+        function: '#4078f2',
+        variable: '#e45649',
+        type: '#c18401',
+        constant: '#986801',
+        operator: '#0184bc',
+        punctuation: '#383a42',
+        tag: '#e45649',
+        attribute: '#986801',
+        regexp: '#0184bc',
+        invalid: '#ff1414',
+      },
+    },
+  },
+  {
+    id: 'vitesse',
+    label: 'Vitesse',
+    dark: {
+      shikiTheme: 'vitesse-dark',
+      palette: {
+        background: '#121212',
+        foreground: '#dbd7caee',
+        selection: '#eeeeee18',
+        lineHighlight: '#181818',
+        cursor: '#dbd7ca',
+        lineNumber: '#444444',
+        activeLineNumber: '#888888',
+        keyword: '#4d9375',
+        controlKeyword: '#c98a7d',
+        string: '#c98a7d',
+        number: '#4c9a91',
+        comment: '#758575dd',
+        function: '#80a665',
+        variable: '#bd976a',
+        type: '#5da994',
+        constant: '#c99076',
+        operator: '#cb7676',
+        punctuation: '#666666',
+        tag: '#4d9375',
+        attribute: '#bd976a',
+        regexp: '#c4704f',
+        invalid: '#cb7676',
+      },
+    },
+    light: {
+      shikiTheme: 'vitesse-light',
+      palette: {
+        background: '#ffffff',
+        foreground: '#393a34',
+        selection: '#22222218',
+        lineHighlight: '#f7f7f7',
+        cursor: '#393a34',
+        lineNumber: '#a0a0a0',
+        activeLineNumber: '#555555',
+        keyword: '#1e754f',
+        controlKeyword: '#ab5959',
+        string: '#b56959',
+        number: '#2e808f',
+        comment: '#a0ada0',
+        function: '#59873a',
+        variable: '#b07d48',
+        type: '#2e8f82',
+        constant: '#a65e2b',
+        operator: '#ab5959',
+        punctuation: '#999999',
+        tag: '#1e754f',
+        attribute: '#b07d48',
+        regexp: '#ab5e3f',
+        invalid: '#ab5959',
+      },
+    },
+  },
+  {
+    id: 'github',
+    label: 'GitHub',
+    dark: {
+      shikiTheme: 'github-dark',
+      palette: {
+        background: '#0d1117',
+        foreground: '#e6edf3',
+        selection: '#264f78',
+        lineHighlight: '#161b22',
+        cursor: '#e6edf3',
+        lineNumber: '#484f58',
+        activeLineNumber: '#e6edf3',
+        keyword: '#ff7b72',
+        controlKeyword: '#ff7b72',
+        string: '#a5d6ff',
+        number: '#79c0ff',
+        comment: '#8b949e',
+        function: '#d2a8ff',
+        variable: '#ffa657',
+        type: '#79c0ff',
+        constant: '#79c0ff',
+        operator: '#ff7b72',
+        punctuation: '#e6edf3',
+        tag: '#7ee787',
+        attribute: '#79c0ff',
+        regexp: '#7ee787',
+        invalid: '#f85149',
+      },
+    },
+    light: {
+      shikiTheme: 'github-light',
+      palette: {
+        background: '#ffffff',
+        foreground: '#1f2328',
+        selection: '#add6ff',
+        lineHighlight: '#f6f8fa',
+        cursor: '#1f2328',
+        lineNumber: '#8c959f',
+        activeLineNumber: '#1f2328',
+        keyword: '#cf222e',
+        controlKeyword: '#cf222e',
+        string: '#0a3069',
+        number: '#0550ae',
+        comment: '#6e7781',
+        function: '#8250df',
+        variable: '#953800',
+        type: '#0550ae',
+        constant: '#0550ae',
+        operator: '#cf222e',
+        punctuation: '#1f2328',
+        tag: '#116329',
+        attribute: '#0550ae',
+        regexp: '#116329',
+        invalid: '#82071e',
+      },
+    },
+  },
+  {
+    id: 'catppuccin',
+    label: 'Catppuccin',
+    dark: {
+      shikiTheme: 'catppuccin-mocha',
+      palette: {
+        background: '#1e1e2e',
+        foreground: '#cdd6f4',
+        selection: '#585b7066',
+        lineHighlight: '#313244',
+        cursor: '#f5e0dc',
+        lineNumber: '#6c7086',
+        activeLineNumber: '#cdd6f4',
+        keyword: '#cba6f7',
+        controlKeyword: '#cba6f7',
+        string: '#a6e3a1',
+        number: '#fab387',
+        comment: '#6c7086',
+        function: '#89b4fa',
+        variable: '#cdd6f4',
+        type: '#f9e2af',
+        constant: '#fab387',
+        operator: '#89dceb',
+        punctuation: '#9399b2',
+        tag: '#cba6f7',
+        attribute: '#f9e2af',
+        regexp: '#f38ba8',
+        invalid: '#f38ba8',
+      },
+    },
+    light: {
+      shikiTheme: 'catppuccin-latte',
+      palette: {
+        background: '#eff1f5',
+        foreground: '#4c4f69',
+        selection: '#acb0be66',
+        lineHighlight: '#ccd0da',
+        cursor: '#dc8a78',
+        lineNumber: '#9ca0b0',
+        activeLineNumber: '#4c4f69',
+        keyword: '#8839ef',
+        controlKeyword: '#8839ef',
+        string: '#40a02b',
+        number: '#fe640b',
+        comment: '#9ca0b0',
+        function: '#1e66f5',
+        variable: '#4c4f69',
+        type: '#df8e1d',
+        constant: '#fe640b',
+        operator: '#04a5e5',
+        punctuation: '#7c7f93',
+        tag: '#8839ef',
+        attribute: '#df8e1d',
+        regexp: '#d20f39',
+        invalid: '#d20f39',
+      },
+    },
+  },
+  {
+    id: 'everforest',
+    label: 'Everforest',
+    dark: {
+      shikiTheme: 'everforest-dark',
+      palette: {
+        background: '#2d353b',
+        foreground: '#d3c6aa',
+        selection: '#475258c0',
+        lineHighlight: '#3d484d',
+        cursor: '#d3c6aa',
+        lineNumber: '#7f897d',
+        activeLineNumber: '#9aa79d',
+        keyword: '#e67e80',
+        controlKeyword: '#e69875',
+        string: '#dbbc7f',
+        number: '#d699b6',
+        comment: '#859289',
+        function: '#a7c080',
+        variable: '#d3c6aa',
+        type: '#83c092',
+        constant: '#d699b6',
+        operator: '#e69875',
+        punctuation: '#d3c6aa',
+        tag: '#e69875',
+        attribute: '#dbbc7f',
+        regexp: '#dbbc7f',
+        invalid: '#e67e80',
+      },
+    },
+    light: {
+      shikiTheme: 'everforest-light',
+      palette: {
+        background: '#fdf6e3',
+        foreground: '#5c6a72',
+        selection: '#edeae0c0',
+        lineHighlight: '#f0eed9',
+        cursor: '#5c6a72',
+        lineNumber: '#939f91',
+        activeLineNumber: '#708868',
+        keyword: '#f85552',
+        controlKeyword: '#f57d26',
+        string: '#dfa000',
+        number: '#df69ba',
+        comment: '#939f91',
+        function: '#8da101',
+        variable: '#5c6a72',
+        type: '#35a77c',
+        constant: '#df69ba',
+        operator: '#f57d26',
+        punctuation: '#5c6a72',
+        tag: '#f57d26',
+        attribute: '#dfa000',
+        regexp: '#dfa000',
+        invalid: '#f85552',
+      },
+    },
+  },
+  {
+    id: 'solarized',
+    label: 'Solarized',
+    dark: {
+      shikiTheme: 'solarized-dark',
+      palette: {
+        background: '#002b36',
+        foreground: '#839496',
+        selection: '#073642',
+        lineHighlight: '#073642',
+        cursor: '#839496',
+        lineNumber: '#586e75',
+        activeLineNumber: '#93a1a1',
+        keyword: '#859900',
+        controlKeyword: '#859900',
+        string: '#2aa198',
+        number: '#d33682',
+        comment: '#586e75',
+        function: '#268bd2',
+        variable: '#839496',
+        type: '#b58900',
+        constant: '#cb4b16',
+        operator: '#839496',
+        punctuation: '#839496',
+        tag: '#268bd2',
+        attribute: '#b58900',
+        regexp: '#d33682',
+        invalid: '#dc322f',
+      },
+    },
+    light: {
+      shikiTheme: 'solarized-light',
+      palette: {
+        background: '#fdf6e3',
+        foreground: '#657b83',
+        selection: '#eee8d5',
+        lineHighlight: '#eee8d5',
+        cursor: '#657b83',
+        lineNumber: '#93a1a1',
+        activeLineNumber: '#586e75',
+        keyword: '#859900',
+        controlKeyword: '#859900',
+        string: '#2aa198',
+        number: '#d33682',
+        comment: '#93a1a1',
+        function: '#268bd2',
+        variable: '#657b83',
+        type: '#b58900',
+        constant: '#cb4b16',
+        operator: '#657b83',
+        punctuation: '#657b83',
+        tag: '#268bd2',
+        attribute: '#b58900',
+        regexp: '#d33682',
+        invalid: '#dc322f',
+      },
+    },
+  },
+  {
+    id: 'rose-pine',
+    label: 'Rosé Pine',
+    dark: {
+      shikiTheme: 'rose-pine-moon',
+      palette: {
+        background: '#232136',
+        foreground: '#e0def4',
+        selection: '#817c9c26',
+        lineHighlight: '#817c9c14',
+        cursor: '#e0def4',
+        lineNumber: '#6e6a86',
+        activeLineNumber: '#e0def4',
+        keyword: '#3e8fb0',
+        controlKeyword: '#3e8fb0',
+        string: '#f6c177',
+        number: '#ea9a97',
+        comment: '#6e6a86',
+        function: '#eb6f92',
+        variable: '#e0def4',
+        type: '#9ccfd8',
+        constant: '#ea9a97',
+        operator: '#908caa',
+        punctuation: '#908caa',
+        tag: '#eb6f92',
+        attribute: '#c4a7e7',
+        regexp: '#3e8fb0',
+        invalid: '#eb6f92',
+      },
+    },
+    light: {
+      shikiTheme: 'rose-pine-dawn',
+      palette: {
+        background: '#faf4ed',
+        foreground: '#575279',
+        selection: '#6e6a8614',
+        lineHighlight: '#6e6a860d',
+        cursor: '#575279',
+        lineNumber: '#9893a5',
+        activeLineNumber: '#575279',
+        keyword: '#286983',
+        controlKeyword: '#286983',
+        string: '#ea9d34',
+        number: '#d7827e',
+        comment: '#9893a5',
+        function: '#b4637a',
+        variable: '#575279',
+        type: '#56949f',
+        constant: '#d7827e',
+        operator: '#797593',
+        punctuation: '#797593',
+        tag: '#b4637a',
+        attribute: '#907aa9',
+        regexp: '#286983',
+        invalid: '#b4637a',
+      },
+    },
+  },
+]
+
+export function findCodeTheme(id: string): CodeThemeDefinition {
+  return codeThemes.find((t) => t.id === id) ?? codeThemes[0]!
+}

package/src/theme/themeStore.ts

@@ -0,0 +1,33 @@
+import { createStore } from '../store/createStore'
+
+export interface ThemeStoreState {
+  mode: 'light' | 'dark'
+  codeThemeId: string
+}
+
+export interface ThemeStore {
+  state: ThemeStoreState
+  setMode(mode: ThemeStoreState['mode']): void
+  setCodeThemeId(codeThemeId: string): void
+  subscribe(listener: () => void): () => void
+}
+
+export function createThemeStore(initial: Partial<ThemeStoreState> = {}): ThemeStore {
+  const store = createStore<ThemeStoreState>({
+    mode: initial.mode ?? 'dark',
+    codeThemeId: initial.codeThemeId ?? 'one',
+  })
+
+  return {
+    state: store.state,
+    subscribe: store.subscribe,
+    setMode(mode) {
+      if (store.state.mode === mode) return
+      store.patch({ mode })
+    },
+    setCodeThemeId(codeThemeId) {
+      if (store.state.codeThemeId === codeThemeId) return
+      store.patch({ codeThemeId })
+    },
+  }
+}

package/src/transport/agent-socket.ts

@@ -0,0 +1,20 @@
+import { AgentClient, createWebSocketClientTransport, type JsonWebSocket } from '@demicodes/agent/client'
+
+export function agentSocketUrl(baseUrl: string, cwd: string): string {
+  const url = new URL('/agent', baseUrl)
+  url.protocol = url.protocol === 'https:' ? 'wss:' : url.protocol === 'http:' ? 'ws:' : url.protocol
+  url.searchParams.set('cwd', cwd)
+  return url.toString()
+}
+
+export function connectAgentClient(url: string): Promise<AgentClient> {
+  return new Promise((resolve, reject) => {
+    const socket = new WebSocket(url)
+    socket.addEventListener(
+      'open',
+      () => resolve(new AgentClient(createWebSocketClientTransport(socket as unknown as JsonWebSocket))),
+      { once: true },
+    )
+    socket.addEventListener('error', () => reject(new Error('Agent socket failed to connect')), { once: true })
+  })
+}

package/src/transport/control-client.ts

@@ -0,0 +1,64 @@
+import type { ProviderSelection } from '@demicodes/agent/client'
+import type {
+  ControlApi,
+  ControlMethod,
+  ControlRequest,
+  ControlResponse,
+  ModelInfo,
+  PrepareSessionParams,
+  ProviderInfo,
+  WorkspaceInfo,
+} from './protocol'
+
+interface PendingCall {
+  resolve: (value: unknown) => void
+  reject: (error: Error) => void
+}
+
+export function connectControlClient(url: string): Promise<ControlApi> {
+  return new Promise((resolve, reject) => {
+    const socket = new WebSocket(url)
+    const pending = new Map<number, PendingCall>()
+    let nextId = 1
+
+    socket.addEventListener('message', (event) => {
+      const text = typeof event.data === 'string' ? event.data : String(event.data)
+      const response = JSON.parse(text) as ControlResponse
+      const waiter = pending.get(response.id)
+      if (!waiter) return
+      pending.delete(response.id)
+      if (response.ok) waiter.resolve(response.result)
+      else waiter.reject(new Error(response.error))
+    })
+
+    socket.addEventListener('close', () => {
+      for (const waiter of pending.values()) waiter.reject(new Error('Control socket closed'))
+      pending.clear()
+    })
+
+    socket.addEventListener('error', () => reject(new Error('Control socket failed to connect')), { once: true })
+
+    function call(method: ControlMethod, params: unknown): Promise<unknown> {
+      return new Promise((settle, fail) => {
+        const id = nextId++
+        pending.set(id, { resolve: settle, reject: fail })
+        const request: ControlRequest = { id, method, params }
+        socket.send(JSON.stringify(request))
+      })
+    }
+
+    socket.addEventListener(
+      'open',
+      () => {
+        const api: ControlApi = {
+          listProviders: () => call('listProviders', undefined) as Promise<ProviderInfo[]>,
+          listModels: (params) => call('listModels', params) as Promise<ModelInfo[]>,
+          prepareSession: (params: PrepareSessionParams) => call('prepareSession', params) as Promise<ProviderSelection>,
+          defaultWorkspace: () => call('defaultWorkspace', undefined) as Promise<WorkspaceInfo>,
+        }
+        resolve(api)
+      },
+      { once: true },
+    )
+  })
+}

package/src/transport/protocol.ts

@@ -0,0 +1,57 @@
+import type { ProviderSelection } from '@demicodes/agent/client'
+
+// Control-plane protocol. Decoupled from @demicodes/provider so the component library stays
+// portable: hosts map their own catalogs onto these DTOs.
+
+export interface ProviderInfo {
+  id: string
+  label: string
+  isAvailable: boolean
+}
+
+export interface ModelReasoning {
+  efforts: string[]
+  defaultEffort: string | null
+  /** Whether thinking can be turned off entirely. When false, the UI offers only effort levels and
+   *  no "No reasoning" option (e.g. Claude Code, which can level thinking but never disable it). */
+  canDisable: boolean
+}
+
+export interface ModelInfo {
+  id: string
+  name: string
+  contextWindow: number | null
+  inputLimit: number | null
+  acceptedExtensions: string[]
+  reasoning: ModelReasoning | null
+}
+
+export interface PrepareSessionParams {
+  providerId: string
+  modelId: string
+  thinkingEffort?: string | null
+  serviceTierId?: string | null
+}
+
+export interface WorkspaceInfo {
+  cwd: string
+}
+
+export interface ControlApi {
+  listProviders(): Promise<ProviderInfo[]>
+  listModels(params: { providerId: string }): Promise<ModelInfo[]>
+  prepareSession(params: PrepareSessionParams): Promise<ProviderSelection>
+  defaultWorkspace(): Promise<WorkspaceInfo>
+}
+
+export type ControlMethod = keyof ControlApi
+
+export interface ControlRequest {
+  id: number
+  method: ControlMethod
+  params: unknown
+}
+
+export type ControlResponse =
+  | { id: number; ok: true; result: unknown }
+  | { id: number; ok: false; error: string }

package/src/ui/Button.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  size?: 'xs' | 'sm' | 'md'
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <span
+    class="btn inline-flex cursor-pointer items-center justify-center gap-1 rounded-md font-medium text-fg-body transition-all select-none hover:text-fg-emphasis active:translate-y-px active:brightness-90"
+    :class="[
+      size === 'md' ? 'px-3 py-1 text-[12px]' : size === 'xs' ? 'px-1.5 py-0.5 text-[11px]' : 'px-2.5 py-0.5 text-[11px]',
+      disabled ? 'pointer-events-none opacity-40' : '',
+    ]"
+  >
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.btn {
+  background: var(--btn-bg);
+  box-shadow: var(--shadow-btn);
+}
+
+.btn:hover {
+  background: var(--btn-bg-hover);
+  box-shadow: var(--shadow-btn-hover);
+}
+</style>

package/src/ui/Checkbox.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { CheckFill } from '@mingcute/vue/check'
+import { MinimizeLine } from '@mingcute/vue/minimize'
+
+defineProps<{
+  state: 'checked' | 'unchecked' | 'partial'
+}>()
+
+const emit = defineEmits<{
+  toggle: []
+}>()
+</script>
+
+<template>
+  <span
+    class="flex size-3.5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] transition-colors"
+    :class="state === 'unchecked'
+      ? 'bg-fg-subtle/10 hover:bg-fg-subtle/20'
+      : 'bg-fg-subtle/20 text-fg hover:bg-fg-subtle/30'"
+    @click.stop="emit('toggle')"
+  >
+    <MinimizeLine v-if="state === 'partial'" class="size-2.5" />
+    <CheckFill v-if="state === 'checked'" class="size-2.5" />
+  </span>
+</template>