hermes-web-ui 0.0.1

package/src/stores/chat.ts

@@ -0,0 +1,344 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { startRun, streamRunEvents, type ChatMessage, type RunEvent } from '@/api/chat'
+import { useAppStore } from './app'
+
+export interface Message {
+  id: string
+  role: 'user' | 'assistant' | 'system' | 'tool'
+  content: string
+  timestamp: number
+  toolName?: string
+  toolPreview?: string
+  toolStatus?: 'running' | 'done' | 'error'
+  isStreaming?: boolean
+}
+
+interface Session {
+  id: string
+  title: string
+  messages: Message[]
+  createdAt: number
+  updatedAt: number
+}
+
+function uid(): string {
+  return Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
+}
+
+const SESSIONS_KEY = 'hermes_chat_sessions'
+const ACTIVE_SESSION_KEY = 'hermes_active_session'
+
+function loadSessions(): Session[] {
+  try {
+    return JSON.parse(localStorage.getItem(SESSIONS_KEY) || '[]')
+  } catch {
+    return []
+  }
+}
+
+function saveSessions(sessions: Session[]) {
+  localStorage.setItem(SESSIONS_KEY, JSON.stringify(sessions))
+}
+
+function loadActiveSessionId(): string | null {
+  return localStorage.getItem(ACTIVE_SESSION_KEY)
+}
+
+export const useChatStore = defineStore('chat', () => {
+  const appStore = useAppStore()
+  const sessions = ref<Session[]>(loadSessions())
+  const activeSessionId = ref<string | null>(loadActiveSessionId())
+  const isStreaming = ref(false)
+  const abortController = ref<AbortController | null>(null)
+
+  const activeSession = ref<Session | null>(
+    sessions.value.find(s => s.id === activeSessionId.value) || null,
+  )
+
+  const messages = ref<Message[]>(activeSession.value?.messages || [])
+
+  function createSession(): Session {
+    const session: Session = {
+      id: uid(),
+      title: 'New Chat',
+      messages: [],
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    }
+    sessions.value.unshift(session)
+    saveSessions(sessions.value)
+    return session
+  }
+
+  function switchSession(sessionId: string) {
+    activeSessionId.value = sessionId
+    localStorage.setItem(ACTIVE_SESSION_KEY, sessionId)
+    activeSession.value = sessions.value.find(s => s.id === sessionId) || null
+    messages.value = activeSession.value ? [...activeSession.value.messages] : []
+  }
+
+  function newChat() {
+    if (isStreaming.value) return
+    const session = createSession()
+    switchSession(session.id)
+  }
+
+  function deleteSession(sessionId: string) {
+    sessions.value = sessions.value.filter(s => s.id !== sessionId)
+    saveSessions(sessions.value)
+    if (activeSessionId.value === sessionId) {
+      if (sessions.value.length > 0) {
+        switchSession(sessions.value[0].id)
+      } else {
+        const session = createSession()
+        switchSession(session.id)
+      }
+    }
+  }
+
+  function persistMessages() {
+    if (!activeSession.value || !appStore.sessionPersistence) return
+    activeSession.value.messages = [...messages.value]
+    activeSession.value.updatedAt = Date.now()
+
+    if (activeSession.value.title === 'New Chat') {
+      const firstUser = messages.value.find(m => m.role === 'user')
+      if (firstUser) {
+        activeSession.value.title = firstUser.content.slice(0, 40) + (firstUser.content.length > 40 ? '...' : '')
+      }
+    }
+
+    const idx = sessions.value.findIndex(s => s.id === activeSession.value!.id)
+    if (idx !== -1) sessions.value[idx] = activeSession.value
+    saveSessions(sessions.value)
+  }
+
+  function addMessage(msg: Message) {
+    messages.value.push(msg)
+  }
+
+  function updateMessage(id: string, update: Partial<Message>) {
+    const idx = messages.value.findIndex(m => m.id === id)
+    if (idx !== -1) {
+      messages.value[idx] = { ...messages.value[idx], ...update }
+    }
+  }
+
+  async function sendMessage(content: string) {
+    if (!content.trim() || isStreaming.value) return
+
+    if (!activeSession.value) {
+      const session = createSession()
+      switchSession(session.id)
+    }
+
+    const userMsg: Message = {
+      id: uid(),
+      role: 'user',
+      content: content.trim(),
+      timestamp: Date.now(),
+    }
+    addMessage(userMsg)
+    persistMessages()
+
+    isStreaming.value = true
+
+    try {
+      // Build conversation history from past messages
+      const history: ChatMessage[] = messages.value
+        .filter(m => (m.role === 'user' || m.role === 'assistant') && m.content.trim())
+        .map(m => ({ role: m.role as 'user' | 'assistant' | 'system', content: m.content }))
+
+      const run = await startRun({
+        input: content.trim(),
+        conversation_history: history,
+        session_id: activeSession.value?.id,
+      })
+
+      const runId = (run as any).run_id || (run as any).id
+      if (!runId) {
+        addMessage({
+          id: uid(),
+          role: 'system',
+          content: `Error: startRun returned no run ID. Response: ${JSON.stringify(run)}`,
+          timestamp: Date.now(),
+        })
+        isStreaming.value = false
+        persistMessages()
+        return
+      }
+
+      // Listen to SSE events
+      abortController.value = streamRunEvents(
+        runId,
+        // onEvent
+        (evt: RunEvent) => {
+          switch (evt.event) {
+            case 'run.started':
+              // run started, nothing to render yet
+              break
+
+            case 'message.delta': {
+              // Find or create the assistant message
+              const last = messages.value[messages.value.length - 1]
+              if (last?.role === 'assistant' && last.isStreaming) {
+                last.content += evt.delta || ''
+              } else {
+                addMessage({
+                  id: uid(),
+                  role: 'assistant',
+                  content: evt.delta || '',
+                  timestamp: Date.now(),
+                  isStreaming: true,
+                })
+              }
+              break
+            }
+
+            case 'tool.started': {
+              // Close any streaming assistant message first
+              const last = messages.value[messages.value.length - 1]
+              if (last?.isStreaming) {
+                updateMessage(last.id, { isStreaming: false })
+              }
+              // Add tool message
+              addMessage({
+                id: uid(),
+                role: 'tool',
+                content: '',
+                timestamp: Date.now(),
+                toolName: evt.tool || evt.name,
+                toolPreview: evt.preview,
+                toolStatus: 'running',
+              })
+              break
+            }
+
+            case 'tool.completed': {
+              // Find the running tool message and mark done
+              const toolMsgs = messages.value.filter(
+                m => m.role === 'tool' && m.toolStatus === 'running',
+              )
+              if (toolMsgs.length > 0) {
+                const last = toolMsgs[toolMsgs.length - 1]
+                updateMessage(last.id, { toolStatus: 'done' })
+              }
+              break
+            }
+
+            case 'run.completed':
+              // Close any streaming message
+              const lastMsg = messages.value[messages.value.length - 1]
+              if (lastMsg?.isStreaming) {
+                updateMessage(lastMsg.id, { isStreaming: false })
+              }
+              isStreaming.value = false
+              abortController.value = null
+              persistMessages()
+              break
+
+            case 'run.failed':
+              // Mark error
+              const lastErr = messages.value[messages.value.length - 1]
+              if (lastErr?.isStreaming) {
+                updateMessage(lastErr.id, {
+                  isStreaming: false,
+                  content: evt.error ? `Error: ${evt.error}` : 'Run failed',
+                  role: 'system',
+                })
+              } else {
+                addMessage({
+                  id: uid(),
+                  role: 'system',
+                  content: evt.error ? `Error: ${evt.error}` : 'Run failed',
+                  timestamp: Date.now(),
+                })
+              }
+              // Mark any running tools as error
+              messages.value.forEach((m, i) => {
+                if (m.role === 'tool' && m.toolStatus === 'running') {
+                  messages.value[i] = { ...m, toolStatus: 'error' }
+                }
+              })
+              isStreaming.value = false
+              abortController.value = null
+              persistMessages()
+              break
+          }
+        },
+        // onDone
+        () => {
+          const last = messages.value[messages.value.length - 1]
+          if (last?.isStreaming) {
+            updateMessage(last.id, { isStreaming: false })
+          }
+          isStreaming.value = false
+          abortController.value = null
+          persistMessages()
+        },
+        // onError
+        (err) => {
+          const last = messages.value[messages.value.length - 1]
+          if (last?.isStreaming) {
+            updateMessage(last.id, {
+              isStreaming: false,
+              content: `Error: ${err.message}`,
+              role: 'system',
+            })
+          } else {
+            addMessage({
+              id: uid(),
+              role: 'system',
+              content: `Error: ${err.message}`,
+              timestamp: Date.now(),
+            })
+          }
+          isStreaming.value = false
+          abortController.value = null
+          persistMessages()
+        },
+      )
+    } catch (err: any) {
+      addMessage({
+        id: uid(),
+        role: 'system',
+        content: `Error: ${err.message}`,
+        timestamp: Date.now(),
+      })
+      isStreaming.value = false
+      abortController.value = null
+      persistMessages()
+    }
+  }
+
+  function stopStreaming() {
+    abortController.value?.abort()
+    isStreaming.value = false
+    const lastMsg = messages.value[messages.value.length - 1]
+    if (lastMsg?.isStreaming) {
+      updateMessage(lastMsg.id, { isStreaming: false })
+    }
+    abortController.value = null
+  }
+
+  if (sessions.value.length === 0) {
+    const session = createSession()
+    switchSession(session.id)
+  } else if (!activeSession.value) {
+    switchSession(sessions.value[0].id)
+  }
+
+  return {
+    sessions,
+    activeSessionId,
+    activeSession,
+    messages,
+    isStreaming,
+    newChat,
+    switchSession,
+    deleteSession,
+    sendMessage,
+    stopStreaming,
+  }
+})

package/src/stores/jobs.ts

@@ -0,0 +1,72 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import * as jobsApi from '@/api/jobs'
+import type { Job, CreateJobRequest, UpdateJobRequest } from '@/api/jobs'
+
+function matchId(job: Job, id: string): boolean {
+  return job.job_id === id || job.id === id
+}
+
+export const useJobsStore = defineStore('jobs', () => {
+  const jobs = ref<Job[]>([])
+  const loading = ref(false)
+
+  async function fetchJobs() {
+    loading.value = true
+    try {
+      jobs.value = await jobsApi.listJobs()
+    } catch (err) {
+      console.error('Failed to fetch jobs:', err)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function createJob(data: CreateJobRequest): Promise<Job> {
+    const job = await jobsApi.createJob(data)
+    jobs.value.unshift(job)
+    return job
+  }
+
+  async function updateJob(jobId: string, data: UpdateJobRequest): Promise<Job> {
+    const job = await jobsApi.updateJob(jobId, data)
+    const idx = jobs.value.findIndex(j => matchId(j, jobId))
+    if (idx !== -1) jobs.value[idx] = job
+    return job
+  }
+
+  async function deleteJob(jobId: string) {
+    await jobsApi.deleteJob(jobId)
+    jobs.value = jobs.value.filter(j => !matchId(j, jobId))
+  }
+
+  async function pauseJob(jobId: string) {
+    const job = await jobsApi.pauseJob(jobId)
+    const idx = jobs.value.findIndex(j => matchId(j, jobId))
+    if (idx !== -1) jobs.value[idx] = job
+  }
+
+  async function resumeJob(jobId: string) {
+    const job = await jobsApi.resumeJob(jobId)
+    const idx = jobs.value.findIndex(j => matchId(j, jobId))
+    if (idx !== -1) jobs.value[idx] = job
+  }
+
+  async function runJob(jobId: string) {
+    const job = await jobsApi.runJob(jobId)
+    const idx = jobs.value.findIndex(j => matchId(j, jobId))
+    if (idx !== -1) jobs.value[idx] = job
+  }
+
+  return {
+    jobs,
+    loading,
+    fetchJobs,
+    createJob,
+    updateJob,
+    deleteJob,
+    pauseJob,
+    resumeJob,
+    runJob,
+  }
+})

package/src/styles/global.scss

@@ -0,0 +1,60 @@
+@use 'variables' as *;
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: $font-ui;
+  background-color: $bg-primary;
+  color: $text-primary;
+  font-size: 14px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code, pre, .mono {
+  font-family: $font-code;
+}
+
+a {
+  color: $accent-primary;
+  text-decoration: none;
+
+  &:hover {
+    color: $accent-hover;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: $border-color;
+  border-radius: 3px;
+
+  &:hover {
+    background: $text-muted;
+  }
+}
+
+::selection {
+  background: rgba($accent-primary, 0.3);
+}

package/src/styles/theme.ts

@@ -0,0 +1,71 @@
+import type { GlobalThemeOverrides } from 'naive-ui'
+
+export const themeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#333333',
+    primaryColorHover: '#1a1a1a',
+    primaryColorPressed: '#000000',
+    primaryColorSuppl: '#333333',
+    bodyColor: '#fafafa',
+    cardColor: '#ffffff',
+    modalColor: '#ffffff',
+    popoverColor: '#ffffff',
+    tableColor: '#ffffff',
+    inputColor: '#ffffff',
+    actionColor: '#f0f0f0',
+    textColorBase: '#1a1a1a',
+    textColor1: '#1a1a1a',
+    textColor2: '#666666',
+    textColor3: '#999999',
+    dividerColor: '#e0e0e0',
+    borderColor: '#e0e0e0',
+    hoverColor: 'rgba(0, 0, 0, 0.04)',
+    borderRadius: '8px',
+    borderRadiusSmall: '6px',
+    fontSize: '14px',
+    fontSizeMedium: '14px',
+    heightMedium: '36px',
+    fontFamily: 'Inter, system-ui, -apple-system, sans-serif',
+    fontFamilyMono: 'JetBrains Mono, Fira Code, Consolas, monospace',
+  },
+  Layout: {
+    color: '#fafafa',
+    siderColor: '#f5f5f5',
+    headerColor: '#fafafa',
+  },
+  Menu: {
+    itemTextColorActive: '#1a1a1a',
+    itemTextColorActiveHover: '#1a1a1a',
+    itemTextColorChildActive: '#1a1a1a',
+    itemIconColorActive: '#1a1a1a',
+    itemIconColorActiveHover: '#000000',
+    itemColorActive: 'rgba(0, 0, 0, 0.06)',
+    itemColorActiveHover: 'rgba(0, 0, 0, 0.1)',
+    arrowColorActive: '#1a1a1a',
+  },
+  Button: {
+    textColorPrimary: '#ffffff',
+    colorPrimary: '#333333',
+    colorHoverPrimary: '#1a1a1a',
+    colorPressedPrimary: '#000000',
+  },
+  Input: {
+    color: '#ffffff',
+    colorFocus: '#ffffff',
+    border: '1px solid #e0e0e0',
+    borderHover: '1px solid #999999',
+    borderFocus: '1px solid #333333',
+    placeholderColor: '#999999',
+    caretColor: '#1a1a1a',
+  },
+  Card: {
+    color: '#ffffff',
+    borderColor: '#e0e0e0',
+  },
+  Modal: {
+    color: '#ffffff',
+  },
+  Tag: {
+    borderRadius: '6px',
+  },
+}

package/src/styles/variables.scss

@@ -0,0 +1,56 @@
+// 黑白水墨 — Pure Ink
+// 纯黑白灰，无彩色
+
+// Backgrounds
+$bg-primary: #fafafa;
+$bg-secondary: #f0f0f0;
+$bg-sidebar: #f5f5f5;
+$bg-card: #ffffff;
+$bg-card-hover: #fafafa;
+$bg-input: #ffffff;
+
+// Borders
+$border-color: #e0e0e0;
+$border-light: #ebebeb;
+
+// Accent
+$accent-primary: #333333;
+$accent-hover: #1a1a1a;
+$accent-muted: #888888;
+
+// Text
+$text-primary: #1a1a1a;
+$text-secondary: #666666;
+$text-muted: #999999;
+
+// Status
+$success: #2e7d32;
+$error: #c62828;
+$warning: #f57f17;
+$info: $accent-primary;
+
+// Message bubbles
+$msg-user-bg: #e8e8e8;
+$msg-assistant-bg: #f5f5f5;
+$msg-system-border: #bdbdbd;
+
+// Code
+$code-bg: #f4f4f4;
+
+// Typography
+$font-ui: 'Inter', system-ui, -apple-system, sans-serif;
+$font-code: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+
+// Layout
+$sidebar-width: 240px;
+$sidebar-collapsed-width: 64px;
+$header-height: 56px;
+
+// Radius
+$radius-sm: 6px;
+$radius-md: 10px;
+$radius-lg: 14px;
+
+// Transition
+$transition-fast: 0.15s ease;
+$transition-normal: 0.25s ease;

package/src/views/ChatView.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import ChatPanel from '@/components/chat/ChatPanel.vue'
+import { useAppStore } from '@/stores/app'
+
+const appStore = useAppStore()
+
+onMounted(() => {
+  appStore.loadModels()
+})
+</script>
+
+<template>
+  <div class="chat-view">
+    <ChatPanel />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.chat-view {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+</style>