hermes-web-ui 0.0.1

package/src/api/chat.ts

@@ -0,0 +1,87 @@
+import { request, getBaseUrlValue } from './client'
+
+export interface ChatMessage {
+  role: 'user' | 'assistant' | 'system'
+  content: string
+}
+
+export interface StartRunRequest {
+  input: string | ChatMessage[]
+  instructions?: string
+  conversation_history?: ChatMessage[]
+  session_id?: string
+}
+
+export interface StartRunResponse {
+  run_id: string
+  status: string
+}
+
+// SSE event types from /v1/runs/{id}/events
+export interface RunEvent {
+  event: string
+  run_id?: string
+  delta?: string
+  tool?: string
+  name?: string
+  preview?: string
+  timestamp?: number
+  error?: string
+}
+
+export async function startRun(body: StartRunRequest): Promise<StartRunResponse> {
+  return request<StartRunResponse>('/v1/runs', {
+    method: 'POST',
+    body: JSON.stringify(body),
+  })
+}
+
+export function streamRunEvents(
+  runId: string,
+  onEvent: (event: RunEvent) => void,
+  onDone: () => void,
+  onError: (err: Error) => void,
+) {
+  const baseUrl = getBaseUrlValue()
+  const url = `${baseUrl}/v1/runs/${runId}/events`
+
+  let closed = false
+  const source = new EventSource(url)
+
+  source.onmessage = (e) => {
+    if (closed) return
+    try {
+      const parsed = JSON.parse(e.data)
+      onEvent(parsed)
+
+      if (parsed.event === 'run.completed' || parsed.event === 'run.failed') {
+        closed = true
+        source.close()
+        onDone()
+      }
+    } catch {
+      onEvent({ event: 'message', delta: e.data })
+    }
+  }
+
+  source.onerror = () => {
+    if (closed) return
+    closed = true
+    source.close()
+    onError(new Error('SSE connection error'))
+  }
+
+  // Return AbortController-compatible object
+  return {
+    abort: () => {
+      if (!closed) {
+        closed = true
+        source.close()
+      }
+    },
+  } as unknown as AbortController
+}
+
+export async function fetchModels(): Promise<{ data: Array<{ id: string }> }> {
+  return request('/v1/models')
+}

package/src/api/client.ts

@@ -0,0 +1,44 @@
+const DEFAULT_BASE_URL = ''
+
+function getBaseUrl(): string {
+  return localStorage.getItem('hermes_server_url') || DEFAULT_BASE_URL
+}
+
+function getApiKey(): string {
+  return localStorage.getItem('hermes_api_key') || ''
+}
+
+export function setServerUrl(url: string) {
+  localStorage.setItem('hermes_server_url', url)
+}
+
+export function setApiKey(key: string) {
+  localStorage.setItem('hermes_api_key', key)
+}
+
+export async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
+  const base = getBaseUrl()
+  const url = `${base}${path}`
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    ...options.headers as Record<string, string>,
+  }
+
+  const apiKey = getApiKey()
+  if (apiKey) {
+    headers['Authorization'] = `Bearer ${apiKey}`
+  }
+
+  const res = await fetch(url, { ...options, headers })
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => '')
+    throw new Error(`API Error ${res.status}: ${text || res.statusText}`)
+  }
+
+  return res.json()
+}
+
+export function getBaseUrlValue(): string {
+  return getBaseUrl()
+}

package/src/api/jobs.ts

@@ -0,0 +1,100 @@
+import { request } from './client'
+
+export interface Job {
+  job_id: string
+  id: string
+  name: string
+  prompt: string
+  prompt_preview?: string
+  skills: string[]
+  skill: string | null
+  model: string | null
+  provider: string | null
+  base_url: string | null
+  script: string | null
+  schedule: string | { kind: string; expr: string; display: string }
+  schedule_display: string
+  repeat: string | { times: number | null; completed: number }
+  enabled: boolean
+  state: string
+  paused_at: string | null
+  paused_reason: string | null
+  created_at: string
+  next_run_at: string | null
+  last_run_at: string | null
+  last_status: string | null
+  last_error: string | null
+  deliver: string
+  origin: {
+    platform: string
+    chat_id: string
+    chat_name: string
+    thread_id: string | null
+  } | null
+  last_delivery_error: string | null
+}
+
+export interface CreateJobRequest {
+  name: string
+  schedule: string
+  prompt?: string
+  deliver?: string
+  skills?: string[]
+  repeat?: number
+}
+
+export interface UpdateJobRequest {
+  name?: string
+  schedule?: string
+  prompt?: string
+  deliver?: string
+  skills?: string[]
+  skill?: string
+  repeat?: number
+  enabled?: boolean
+}
+
+function unwrap(res: { job: Job }): Job {
+  return res.job
+}
+
+export async function listJobs(): Promise<Job[]> {
+  const res = await request<{ jobs: Job[] }>('/api/jobs?include_disabled=true')
+  return res.jobs
+}
+
+export async function getJob(jobId: string): Promise<Job> {
+  return unwrap(await request<{ job: Job }>(`/api/jobs/${jobId}`))
+}
+
+export async function createJob(data: CreateJobRequest): Promise<Job> {
+  return unwrap(await request<{ job: Job }>('/api/jobs', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  }))
+}
+
+export async function updateJob(jobId: string, data: UpdateJobRequest): Promise<Job> {
+  return unwrap(await request<{ job: Job }>(`/api/jobs/${jobId}`, {
+    method: 'PATCH',
+    body: JSON.stringify(data),
+  }))
+}
+
+export async function deleteJob(jobId: string): Promise<{ ok: boolean }> {
+  return request<{ ok: boolean }>(`/api/jobs/${jobId}`, {
+    method: 'DELETE',
+  })
+}
+
+export async function pauseJob(jobId: string): Promise<Job> {
+  return unwrap(await request<{ job: Job }>(`/api/jobs/${jobId}/pause`, { method: 'POST' }))
+}
+
+export async function resumeJob(jobId: string): Promise<Job> {
+  return unwrap(await request<{ job: Job }>(`/api/jobs/${jobId}/resume`, { method: 'POST' }))
+}
+
+export async function runJob(jobId: string): Promise<Job> {
+  return unwrap(await request<{ job: Job }>(`/api/jobs/${jobId}/run`, { method: 'POST' }))
+}

package/src/api/system.ts

@@ -0,0 +1,25 @@
+import { request } from './client'
+
+export interface HealthResponse {
+  status: string
+  version?: string
+}
+
+export interface Model {
+  id: string
+  object: string
+  owned_by: string
+}
+
+export interface ModelsResponse {
+  object: string
+  data: Model[]
+}
+
+export async function checkHealth(): Promise<HealthResponse> {
+  return request<HealthResponse>('/health')
+}
+
+export async function fetchModels(): Promise<ModelsResponse> {
+  return request<ModelsResponse>('/v1/models')
+}

package/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>

package/src/components/chat/ChatInput.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NButton } from 'naive-ui'
+import { useChatStore } from '@/stores/chat'
+
+const chatStore = useChatStore()
+const inputText = ref('')
+const textareaRef = ref<HTMLTextAreaElement>()
+
+function handleSend() {
+  const text = inputText.value.trim()
+  if (!text) return
+
+  chatStore.sendMessage(text)
+  inputText.value = ''
+
+  // Reset textarea height
+  if (textareaRef.value) {
+    textareaRef.value.style.height = 'auto'
+  }
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    handleSend()
+  }
+}
+
+function handleInput(e: Event) {
+  const el = e.target as HTMLTextAreaElement
+  el.style.height = 'auto'
+  el.style.height = Math.min(el.scrollHeight, 100) + 'px'
+}
+</script>
+
+<template>
+  <div class="chat-input-area">
+    <div class="input-wrapper">
+      <textarea
+        ref="textareaRef"
+        v-model="inputText"
+        class="input-textarea"
+        placeholder="Type a message... (Enter to send, Shift+Enter for new line)"
+        rows="1"
+        @keydown="handleKeydown"
+        @input="handleInput"
+      ></textarea>
+      <div class="input-actions">
+        <NButton
+          v-if="chatStore.isStreaming"
+          size="small"
+          type="error"
+          @click="chatStore.stopStreaming()"
+        >
+          Stop
+        </NButton>
+        <NButton
+          size="small"
+          type="primary"
+          :disabled="!inputText.trim() || chatStore.isStreaming"
+          @click="handleSend"
+        >
+          <template #icon>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+          </template>
+          Send
+        </NButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as *;
+
+.chat-input-area {
+  padding: 12px 20px 16px;
+  border-top: 1px solid $border-color;
+  flex-shrink: 0;
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background-color: $bg-input;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  padding: 10px 12px;
+  transition: border-color $transition-fast;
+
+  &:focus-within {
+    border-color: $accent-primary;
+  }
+}
+
+.input-textarea {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  color: $text-primary;
+  font-family: $font-ui;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: none;
+  max-height: 100px;
+  min-height: 20px;
+  overflow-y: auto;
+
+  &::placeholder {
+    color: $text-muted;
+  }
+}
+
+.input-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+  align-items: center;
+}
+</style>

package/src/components/chat/ChatPanel.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { NButton, NTooltip, NPopconfirm, useMessage } from 'naive-ui'
+import MessageList from './MessageList.vue'
+import ChatInput from './ChatInput.vue'
+import { useChatStore } from '@/stores/chat'
+import { useAppStore } from '@/stores/app'
+
+const chatStore = useChatStore()
+const appStore = useAppStore()
+const message = useMessage()
+
+const showSessions = ref(true)
+
+const sortedSessions = computed(() => {
+  return [...chatStore.sessions].sort((a, b) => b.updatedAt - a.updatedAt)
+})
+
+const activeSessionLabel = computed(() =>
+  chatStore.activeSession?.title || 'New Chat',
+)
+
+function handleNewChat() {
+  chatStore.newChat()
+}
+
+function copySessionId() {
+  if (chatStore.activeSessionId) {
+    navigator.clipboard.writeText(chatStore.activeSessionId)
+    message.success('Copied')
+  }
+}
+
+function handleDeleteSession(id: string) {
+  chatStore.deleteSession(id)
+  message.success('Session deleted')
+}
+
+function formatTime(ts: number) {
+  const d = new Date(ts)
+  const now = new Date()
+  const isToday = d.toDateString() === now.toDateString()
+  if (isToday) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  return d.toLocaleDateString([], { month: 'short', day: 'numeric' })
+}
+</script>
+
+<template>
+  <div class="chat-panel">
+    <!-- Session List -->
+    <aside class="session-list" :class="{ collapsed: !showSessions }">
+      <div class="session-list-header">
+        <span v-if="showSessions" class="session-list-title">Sessions</span>
+        <NButton quaternary size="tiny" @click="handleNewChat" circle>
+          <template #icon>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          </template>
+        </NButton>
+      </div>
+      <div v-if="showSessions" class="session-items">
+        <button
+          v-for="s in sortedSessions"
+          :key="s.id"
+          class="session-item"
+          :class="{ active: s.id === chatStore.activeSessionId }"
+          @click="chatStore.switchSession(s.id)"
+        >
+          <div class="session-item-content">
+            <span class="session-item-title">{{ s.title }}</span>
+            <span class="session-item-time">{{ formatTime(s.updatedAt) }}</span>
+          </div>
+          <NPopconfirm
+            v-if="s.id !== chatStore.activeSessionId || sortedSessions.length > 1"
+            @positive-click="handleDeleteSession(s.id)"
+          >
+            <template #trigger>
+              <button class="session-item-delete" @click.stop>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            </template>
+            Delete this session?
+          </NPopconfirm>
+        </button>
+      </div>
+    </aside>
+
+    <!-- Chat Area -->
+    <div class="chat-main">
+      <header class="chat-header">
+        <div class="header-left">
+          <NButton quaternary size="small" @click="showSessions = !showSessions" circle>
+            <template #icon>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+            </template>
+          </NButton>
+          <span class="header-session-title">{{ activeSessionLabel }}</span>
+          <span class="model-badge">{{ appStore.selectedModel }}</span>
+        </div>
+        <div class="header-actions">
+          <NTooltip trigger="hover">
+            <template #trigger>
+              <NButton quaternary size="small" @click="copySessionId" circle>
+                <template #icon>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+                </template>
+              </NButton>
+            </template>
+            Copy Session ID
+          </NTooltip>
+          <NButton size="small" @click="handleNewChat">
+            <template #icon>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+            </template>
+            New Chat
+          </NButton>
+        </div>
+      </header>
+
+      <MessageList />
+      <ChatInput />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as *;
+
+.chat-panel {
+  display: flex;
+  height: 100%;
+}
+
+.session-list {
+  width: 220px;
+  border-right: 1px solid $border-color;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  transition: width $transition-normal, opacity $transition-normal;
+  overflow: hidden;
+
+  &.collapsed {
+    width: 0;
+    border-right: none;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.session-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  flex-shrink: 0;
+}
+
+.session-list-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.session-items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px 12px;
+}
+
+.session-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: none;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  text-align: left;
+  color: $text-secondary;
+  transition: all $transition-fast;
+  margin-bottom: 2px;
+
+  &:hover {
+    background: rgba($accent-primary, 0.06);
+    color: $text-primary;
+
+    .session-item-delete {
+      opacity: 1;
+    }
+  }
+
+  &.active {
+    background: rgba($accent-primary, 0.1);
+    color: $text-primary;
+    font-weight: 500;
+  }
+}
+
+.session-item-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.session-item-title {
+  display: block;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.session-item-time {
+  display: block;
+  font-size: 11px;
+  color: $text-muted;
+  margin-top: 2px;
+}
+
+.session-item-delete {
+  flex-shrink: 0;
+  opacity: 0;
+  padding: 2px;
+  border: none;
+  background: none;
+  color: $text-muted;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: all $transition-fast;
+
+  &:hover {
+    color: $error;
+    background: rgba($error, 0.1);
+  }
+}
+
+.chat-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid $border-color;
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.header-session-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.model-badge {
+  font-size: 11px;
+  color: $text-muted;
+  background: rgba($accent-primary, 0.1);
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid $border-color;
+  flex-shrink: 0;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+</style>