hermes-web-ui 0.0.1 → 0.1.0

package/src/components/jobs/JobsPanel.vue

@@ -1,58 +0,0 @@
-<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

@@ -1,169 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-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

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

package/src/main.ts

@@ -1,10 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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,
-  }
-})