hermes-web-ui 0.0.1

package/src/components/jobs/JobFormModal.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { NModal, NForm, NFormItem, NInput, NButton, NSelect, NInputNumber, useMessage } from 'naive-ui'
+import { useJobsStore } from '@/stores/jobs'
+
+const props = defineProps<{
+  jobId: string | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  saved: []
+}>()
+
+const jobsStore = useJobsStore()
+const message = useMessage()
+
+const showModal = ref(true)
+const loading = ref(false)
+
+const formData = ref({
+  name: '',
+  schedule: '',
+  prompt: '',
+  deliver: 'origin',
+  repeat_times: null as number | null,
+})
+
+const presetValue = ref<string | null>(null)
+
+const isEdit = computed(() => !!props.jobId)
+
+const schedulePresets = [
+  { label: 'Every minute', value: '* * * * *' },
+  { label: 'Every 5 minutes', value: '*/5 * * * *' },
+  { label: 'Every hour', value: '0 * * * *' },
+  { label: 'Every day at 00:00', value: '0 0 * * *' },
+  { label: 'Every day at 09:00', value: '0 9 * * *' },
+  { label: 'Every Monday at 09:00', value: '0 9 * * 1' },
+  { label: 'Every month 1st at 09:00', value: '0 9 1 * *' },
+]
+
+const targetOptions = [
+  { label: 'Origin', value: 'origin' },
+  { label: 'Local', value: 'local' },
+]
+
+onMounted(async () => {
+  if (props.jobId) {
+    try {
+      const { getJob } = await import('@/api/jobs')
+      const job = await getJob(props.jobId)
+      formData.value = {
+        name: job.name,
+        schedule: typeof job.schedule === 'string' ? job.schedule : (job.schedule?.expr || job.schedule_display || ''),
+        prompt: job.prompt,
+        deliver: job.deliver || 'origin',
+        repeat_times: typeof job.repeat === 'number' ? job.repeat : (typeof job.repeat === 'object' ? job.repeat.times : null),
+      }
+    } catch (e: any) {
+      message.error('Failed to load job: ' + e.message)
+    }
+  }
+})
+
+async function handleSave() {
+  if (!formData.value.name.trim()) {
+    message.warning('Name is required')
+    return
+  }
+  if (!formData.value.schedule.trim()) {
+    message.warning('Schedule is required')
+    return
+  }
+
+  loading.value = true
+  try {
+    const payload = {
+      name: formData.value.name,
+      schedule: formData.value.schedule,
+      prompt: formData.value.prompt,
+      deliver: formData.value.deliver,
+      repeat: formData.value.repeat_times ?? undefined,
+    }
+
+    if (isEdit.value) {
+      await jobsStore.updateJob(props.jobId!, payload)
+      message.success('Job updated')
+    } else {
+      await jobsStore.createJob(payload)
+      message.success('Job created')
+    }
+    emit('saved')
+  } catch (e: any) {
+    message.error(e.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleClose() {
+  showModal.value = false
+  setTimeout(() => emit('close'), 200)
+}
+</script>
+
+<template>
+  <NModal
+    v-model:show="showModal"
+    preset="card"
+    :title="isEdit ? 'Edit Job' : 'Create Job'"
+    :style="{ width: '520px' }"
+    :mask-closable="!loading"
+    @after-leave="emit('close')"
+  >
+    <NForm label-placement="top">
+      <NFormItem label="Name" required>
+        <NInput
+          v-model:value="formData.name"
+          placeholder="Job name"
+          maxlength="200"
+          show-count
+        />
+      </NFormItem>
+
+      <NFormItem label="Schedule (Cron Expression)" required>
+        <NInput
+          v-model:value="formData.schedule"
+          placeholder="e.g. 0 9 * * *"
+        />
+      </NFormItem>
+
+      <NFormItem label="Quick Presets">
+        <NSelect
+          v-model:value="presetValue"
+          :options="schedulePresets"
+          placeholder="Select a preset..."
+          @update:value="v => formData.schedule = v"
+        />
+      </NFormItem>
+
+      <NFormItem label="Prompt" required>
+        <NInput
+          v-model:value="formData.prompt"
+          type="textarea"
+          placeholder="The prompt to execute"
+          :rows="4"
+          maxlength="5000"
+          show-count
+        />
+      </NFormItem>
+
+      <NFormItem label="Deliver Target">
+        <NSelect
+          v-model:value="formData.deliver"
+          :options="targetOptions"
+        />
+      </NFormItem>
+
+      <NFormItem label="Repeat Count (optional)">
+        <NInputNumber
+          v-model:value="formData.repeat_times"
+          :min="1"
+          placeholder="Leave empty for infinite"
+          clearable
+          style="width: 100%"
+        />
+      </NFormItem>
+    </NForm>
+
+    <template #footer>
+      <div class="modal-footer">
+        <NButton @click="handleClose">Cancel</NButton>
+        <NButton type="primary" :loading="loading" @click="handleSave">
+          {{ isEdit ? 'Update' : 'Create' }}
+        </NButton>
+      </div>
+    </template>
+  </NModal>
+</template>
+
+<style scoped lang="scss">
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>

package/src/components/jobs/JobsPanel.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import JobCard from './JobCard.vue'
+import { useJobsStore } from '@/stores/jobs'
+
+const emit = defineEmits<{
+  edit: [jobId: string]
+}>()
+
+const jobsStore = useJobsStore()
+</script>
+
+<template>
+  <div v-if="jobsStore.jobs.length === 0" class="empty-state">
+    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="empty-icon">
+      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+      <line x1="16" y1="2" x2="16" y2="6"/>
+      <line x1="8" y1="2" x2="8" y2="6"/>
+      <line x1="3" y1="10" x2="21" y2="10"/>
+    </svg>
+    <p>No scheduled jobs yet. Create one to get started.</p>
+  </div>
+  <div v-else class="jobs-grid">
+    <JobCard
+      v-for="job in jobsStore.jobs"
+      :key="job.id"
+      :job="job"
+      @edit="emit('edit', job.id)"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as *;
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: $text-muted;
+  gap: 12px;
+
+  .empty-icon {
+    opacity: 0.3;
+  }
+
+  p {
+    font-size: 14px;
+  }
+}
+
+.jobs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  gap: 14px;
+}
+</style>

package/src/components/layout/AppSidebar.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAppStore } from '@/stores/app'
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+
+const selectedKey = computed(() => route.name as string)
+
+function handleNav(key: string) {
+  router.push({ name: key })
+}
+</script>
+
+<template>
+  <aside class="sidebar">
+    <div class="sidebar-logo" @click="router.push('/')">
+      <img src="/assets/logo.png" alt="Hermes" class="logo-img" />
+      <span class="logo-text">Hermes</span>
+    </div>
+
+    <nav class="sidebar-nav">
+      <button
+        class="nav-item"
+        :class="{ active: selectedKey === 'chat' }"
+        @click="handleNav('chat')"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+        <span>Chat</span>
+      </button>
+
+      <button
+        class="nav-item"
+        :class="{ active: selectedKey === 'jobs' }"
+        @click="handleNav('jobs')"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+          <line x1="16" y1="2" x2="16" y2="6" />
+          <line x1="8" y1="2" x2="8" y2="6" />
+          <line x1="3" y1="10" x2="21" y2="10" />
+        </svg>
+        <span>Jobs</span>
+      </button>
+    </nav>
+
+    <div class="sidebar-footer">
+      <div class="status-indicator" :class="{ connected: appStore.connected, disconnected: !appStore.connected }">
+        <span class="status-dot"></span>
+        <span class="status-text">{{ appStore.connected ? 'Connected' : 'Disconnected' }}</span>
+      </div>
+      <div class="version-info">Hermes {{ appStore.serverVersion || 'v0.1.0' }}</div>
+    </div>
+  </aside>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as *;
+
+.sidebar {
+  width: $sidebar-width;
+  height: 100vh;
+  background-color: $bg-sidebar;
+  border-right: 1px solid $border-color;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 12px;
+  flex-shrink: 0;
+  transition: width $transition-normal;
+}
+
+.logo-img {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 12px 20px;
+  color: $text-primary;
+  cursor: pointer;
+
+  .logo-text {
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+  }
+}
+
+.sidebar-nav {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: none;
+  background: none;
+  color: $text-secondary;
+  font-size: 14px;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  transition: all $transition-fast;
+  width: 100%;
+  text-align: left;
+
+  &:hover {
+    background-color: rgba($accent-primary, 0.06);
+    color: $text-primary;
+  }
+
+  &.active {
+    background-color: rgba($accent-primary, 0.12);
+    color: $accent-primary;
+  }
+}
+
+.sidebar-footer {
+  padding-top: 16px;
+  border-top: 1px solid $border-color;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 12px;
+
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  &.connected .status-dot {
+    background-color: $success;
+    box-shadow: 0 0 6px rgba($success, 0.5);
+  }
+
+  &.disconnected .status-dot {
+    background-color: $error;
+  }
+
+  .status-text {
+    color: $text-secondary;
+  }
+}
+
+.version-info {
+  padding: 4px 12px;
+  font-size: 11px;
+  color: $text-muted;
+}
+</style>

package/src/composables/useKeyboard.ts

@@ -0,0 +1,39 @@
+import { onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useChatStore } from '@/stores/chat'
+
+export function useKeyboard() {
+  const router = useRouter()
+  const chatStore = useChatStore()
+
+  function handleKeydown(e: KeyboardEvent) {
+    const mod = e.ctrlKey || e.metaKey
+
+    if (mod && e.key === 'n') {
+      e.preventDefault()
+      chatStore.newChat()
+    }
+
+    if (mod && e.key === 'j') {
+      e.preventDefault()
+      router.push({ name: 'jobs' })
+    }
+
+    if (e.key === 'Escape') {
+      // Close any open modals — naive-ui handles this internally
+      const modal = document.querySelector('.n-modal-mask')
+      if (modal) {
+        const closeBtn = modal.querySelector('.n-base-close') as HTMLElement
+        closeBtn?.click()
+      }
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('keydown', handleKeydown)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeydown)
+  })
+}

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/main.ts

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import router from './router'
+import App from './App.vue'
+import './styles/global.scss'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')

package/src/router/index.ts

@@ -0,0 +1,24 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'chat',
+      component: () => import('@/views/ChatView.vue'),
+    },
+    {
+      path: '/jobs',
+      name: 'jobs',
+      component: () => import('@/views/JobsView.vue'),
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      redirect: '/',
+    },
+  ],
+})
+
+export default router

package/src/stores/app.ts

@@ -0,0 +1,66 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { checkHealth, fetchModels } from '@/api/system'
+import type { Model } from '@/api/system'
+
+export const useAppStore = defineStore('app', () => {
+  const connected = ref(false)
+  const serverVersion = ref('')
+  const models = ref<Model[]>([])
+  const healthPollTimer = ref<ReturnType<typeof setInterval>>()
+
+  // Settings
+  const streamEnabled = ref(true)
+  const sessionPersistence = ref(true)
+  const maxTokens = ref(4096)
+  const selectedModel = ref('hermes-agent')
+
+  async function checkConnection() {
+    try {
+      const res = await checkHealth()
+      connected.value = true
+      if (res.version) serverVersion.value = res.version
+    } catch {
+      connected.value = false
+    }
+  }
+
+  async function loadModels() {
+    try {
+      const res = await fetchModels()
+      models.value = res.data || []
+      if (models.value.length > 0 && !models.value.find(m => m.id === selectedModel.value)) {
+        selectedModel.value = models.value[0].id
+      }
+    } catch {
+      // ignore
+    }
+  }
+
+  function startHealthPolling(interval = 30000) {
+    stopHealthPolling()
+    checkConnection()
+    healthPollTimer.value = setInterval(checkConnection, interval)
+  }
+
+  function stopHealthPolling() {
+    if (healthPollTimer.value) {
+      clearInterval(healthPollTimer.value)
+      healthPollTimer.value = undefined
+    }
+  }
+
+  return {
+    connected,
+    serverVersion,
+    models,
+    streamEnabled,
+    sessionPersistence,
+    maxTokens,
+    selectedModel,
+    checkConnection,
+    loadModels,
+    startHealthPolling,
+    stopHealthPolling,
+  }
+})