hermes-web-ui 0.0.1 → 0.1.0

package/src/components/chat/MessageItem.vue

@@ -1,189 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { Message } from '@/stores/chat'
-import MarkdownRenderer from './MarkdownRenderer.vue'
-
-const props = defineProps<{ message: Message }>()
-
-const isSystem = computed(() => props.message.role === 'system')
-
-const timeStr = computed(() => {
-  const d = new Date(props.message.timestamp)
-  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-})
-</script>
-
-<template>
-  <div class="message" :class="[message.role]">
-    <template v-if="message.role === 'tool'">
-      <div class="tool-line">
-        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="tool-icon"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
-        <span class="tool-name">{{ message.toolName }}</span>
-        <span v-if="message.toolPreview" class="tool-preview">{{ message.toolPreview }}</span>
-      </div>
-    </template>
-    <template v-else>
-      <div class="msg-body">
-        <img v-if="message.role === 'assistant'" src="/assets/logo.png" alt="Hermes" class="msg-avatar" />
-        <div class="msg-content" :class="message.role">
-          <div class="message-bubble" :class="{ system: isSystem }">
-            <MarkdownRenderer v-if="message.content" :content="message.content" />
-            <span v-if="message.isStreaming" class="streaming-cursor"></span>
-            <div v-if="message.isStreaming && !message.content" class="streaming-dots">
-              <span></span><span></span><span></span>
-            </div>
-          </div>
-          <div class="message-time">{{ timeStr }}</div>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped lang="scss">
-@use '@/styles/variables' as *;
-
-.message {
-  display: flex;
-  flex-direction: column;
-
-  &.user {
-    align-items: flex-end;
-
-    .msg-body {
-      max-width: 75%;
-    }
-
-    .msg-content.user {
-      align-items: flex-end;
-    }
-
-    .message-bubble {
-      background-color: $msg-user-bg;
-      border-radius: $radius-md $radius-md 4px $radius-md;
-    }
-  }
-
-  &.assistant {
-    flex-direction: row;
-    align-items: flex-start;
-    gap: 8px;
-
-    .msg-body {
-      max-width: 80%;
-    }
-
-    .msg-avatar {
-      width: 28px;
-      height: 28px;
-      border-radius: 4px;
-      flex-shrink: 0;
-      margin-top: 2px;
-    }
-
-    .message-bubble {
-      background-color: $msg-assistant-bg;
-      border-radius: $radius-md $radius-md $radius-md 4px;
-    }
-  }
-
-  &.tool {
-    align-items: flex-start;
-  }
-
-  &.system {
-    align-items: flex-start;
-
-    .message-bubble.system {
-      border-left: 3px solid $warning;
-      border-radius: $radius-sm;
-      max-width: 80%;
-      background-color: rgba($warning, 0.06);
-    }
-  }
-}
-
-.msg-body {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  max-width: 85%;
-}
-
-.msg-content {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.message-bubble {
-  padding: 10px 14px;
-  font-size: 14px;
-  line-height: 1.65;
-  word-break: break-word;
-}
-
-.message-time {
-  font-size: 11px;
-  color: $text-muted;
-  margin-top: 4px;
-  padding: 0 4px;
-}
-
-.tool-line {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  color: $text-muted;
-  padding: 0 4px;
-
-  .tool-name {
-    font-family: $font-code;
-  }
-
-  .tool-preview {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 400px;
-  }
-}
-
-.streaming-cursor {
-  display: inline-block;
-  width: 2px;
-  height: 1em;
-  background-color: $text-muted;
-  margin-left: 2px;
-  vertical-align: text-bottom;
-  animation: blink 0.8s infinite;
-}
-
-.streaming-dots {
-  display: flex;
-  gap: 4px;
-  padding: 4px 0;
-
-  span {
-    width: 6px;
-    height: 6px;
-    background-color: $text-muted;
-    border-radius: 50%;
-    animation: pulse 1.4s infinite ease-in-out;
-
-    &:nth-child(2) { animation-delay: 0.2s; }
-    &:nth-child(3) { animation-delay: 0.4s; }
-  }
-}
-
-@keyframes blink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
-}
-
-@keyframes pulse {
-  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
-  40% { opacity: 1; transform: scale(1); }
-}
-</style>

package/src/components/chat/MessageList.vue

@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, nextTick } from 'vue'
-import MessageItem from './MessageItem.vue'
-import { useChatStore } from '@/stores/chat'
-
-const chatStore = useChatStore()
-const listRef = ref<HTMLElement>()
-
-function scrollToBottom() {
-  nextTick(() => {
-    if (listRef.value) {
-      listRef.value.scrollTop = listRef.value.scrollHeight
-    }
-  })
-}
-
-watch(() => chatStore.messages.length, scrollToBottom)
-watch(() => chatStore.messages[chatStore.messages.length - 1]?.content, scrollToBottom)
-watch(() => chatStore.isStreaming, (v) => { if (v) scrollToBottom() })
-</script>
-
-<template>
-  <div ref="listRef" class="message-list">
-    <div v-if="chatStore.messages.length === 0" class="empty-state">
-      <img src="/assets/logo.png" alt="Hermes" class="empty-logo" />
-      <p>Start a conversation with Hermes Agent</p>
-    </div>
-    <MessageItem
-      v-for="msg in chatStore.messages"
-      :key="msg.id"
-      :message="msg"
-    />
-    <div v-if="chatStore.isStreaming" class="streaming-indicator">
-      <span></span><span></span><span></span>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-@use '@/styles/variables' as *;
-
-.message-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.empty-state {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: $text-muted;
-  gap: 12px;
-
-  .empty-logo {
-    width: 48px;
-    height: 48px;
-    opacity: 0.25;
-  }
-
-  p {
-    font-size: 14px;
-  }
-}
-
-.streaming-indicator {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  color: $text-muted;
-
-  span {
-    width: 5px;
-    height: 5px;
-    background-color: $text-muted;
-    border-radius: 50%;
-    animation: stream-pulse 1.4s infinite ease-in-out;
-
-    &:nth-child(2) { animation-delay: 0.2s; }
-    &:nth-child(3) { animation-delay: 0.4s; }
-  }
-}
-
-@keyframes stream-pulse {
-  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
-  40% { opacity: 1; transform: scale(1); }
-}
-</style>

package/src/components/jobs/JobCard.vue

@@ -1,244 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { NButton, NTooltip, useMessage } from 'naive-ui'
-import type { Job } from '@/api/jobs'
-import { useJobsStore } from '@/stores/jobs'
-
-const props = defineProps<{ job: Job }>()
-const emit = defineEmits<{
-  edit: [jobId: string]
-}>()
-
-const jobsStore = useJobsStore()
-const message = useMessage()
-
-const jobId = computed(() => props.job.job_id || props.job.id)
-
-const statusLabel = computed(() => {
-  if (props.job.state === 'running') return 'Running'
-  if (props.job.state === 'paused') return 'Paused'
-  if (!props.job.enabled) return 'Disabled'
-  return 'Scheduled'
-})
-
-const statusType = computed(() => {
-  if (props.job.state === 'running') return 'info' as const
-  if (props.job.state === 'paused') return 'warning' as const
-  if (!props.job.enabled) return 'error' as const
-  return 'success' as const
-})
-
-const scheduleExpr = computed(() => {
-  const s = props.job.schedule
-  if (typeof s === 'string') return s
-  return s?.expr || props.job.schedule_display || '—'
-})
-
-const formatTime = (t?: string | null) => {
-  if (!t) return '—'
-  return new Date(t).toLocaleString()
-}
-
-async function handlePause() {
-  try {
-    await jobsStore.pauseJob(jobId.value)
-    message.success('Job paused')
-  } catch (e: any) {
-    message.error(e.message)
-  }
-}
-
-async function handleResume() {
-  try {
-    await jobsStore.resumeJob(jobId.value)
-    message.success('Job resumed')
-  } catch (e: any) {
-    message.error(e.message)
-  }
-}
-
-async function handleRun() {
-  try {
-    await jobsStore.runJob(jobId.value)
-    message.info('Job triggered')
-  } catch (e: any) {
-    message.error(e.message)
-  }
-}
-
-async function handleDelete() {
-  try {
-    await jobsStore.deleteJob(jobId.value)
-    message.success('Job deleted')
-  } catch (e: any) {
-    message.error(e.message)
-  }
-}
-</script>
-
-<template>
-  <div class="job-card">
-    <div class="card-header">
-      <h3 class="job-name">{{ job.name }}</h3>
-      <span class="status-badge" :class="statusType">{{ statusLabel }}</span>
-    </div>
-
-    <div class="card-body">
-      <div class="info-row">
-        <span class="info-label">Schedule</span>
-        <code class="info-value mono">{{ scheduleExpr }}</code>
-      </div>
-      <div class="info-row">
-        <span class="info-label">Last Run</span>
-        <span class="info-value">
-          {{ formatTime(job.last_run_at) }}
-          <span v-if="job.last_status" class="run-status" :class="{ ok: job.last_status === 'ok', err: job.last_status !== 'ok' }">
-            {{ job.last_status === 'ok' ? 'OK' : job.last_status }}
-          </span>
-        </span>
-      </div>
-      <div class="info-row">
-        <span class="info-label">Next Run</span>
-        <span class="info-value">{{ formatTime(job.next_run_at) }}</span>
-      </div>
-      <div class="info-row">
-        <span class="info-label">Deliver</span>
-        <span class="info-value">{{ job.deliver }}<template v-if="job.origin"> ({{ job.origin.platform }})</template></span>
-      </div>
-      <div v-if="job.repeat" class="info-row">
-        <span class="info-label">Repeat</span>
-        <span class="info-value">
-          <template v-if="typeof job.repeat === 'string'">{{ job.repeat }}</template>
-          <template v-else>{{ job.repeat.completed }} / {{ job.repeat.times ?? '∞' }}</template>
-        </span>
-      </div>
-    </div>
-
-    <div class="card-actions">
-      <NTooltip v-if="job.state !== 'paused' && job.enabled">
-        <template #trigger>
-          <NButton size="tiny" quaternary @click="handlePause">Pause</NButton>
-        </template>
-        Pause job
-      </NTooltip>
-      <NTooltip v-else-if="job.state === 'paused'">
-        <template #trigger>
-          <NButton size="tiny" quaternary @click="handleResume">Resume</NButton>
-        </template>
-        Resume job
-      </NTooltip>
-      <NTooltip>
-        <template #trigger>
-          <NButton size="tiny" quaternary @click="handleRun">Run Now</NButton>
-        </template>
-        Trigger immediately
-      </NTooltip>
-      <NButton size="tiny" quaternary @click="emit('edit', jobId)">Edit</NButton>
-      <NButton size="tiny" quaternary type="error" @click="handleDelete">Delete</NButton>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-@use '@/styles/variables' as *;
-
-.job-card {
-  background-color: $bg-card;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  padding: 16px;
-  transition: border-color $transition-fast;
-
-  &:hover {
-    border-color: rgba($accent-primary, 0.3);
-  }
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-
-.job-name {
-  font-size: 15px;
-  font-weight: 600;
-  color: $text-primary;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 70%;
-}
-
-.status-badge {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-weight: 500;
-
-  &.success {
-    background: rgba($success, 0.12);
-    color: $success;
-  }
-
-  &.info {
-    background: rgba($accent-primary, 0.12);
-    color: $accent-primary;
-  }
-
-  &.warning {
-    background: rgba($warning, 0.12);
-    color: $warning;
-  }
-
-  &.error {
-    background: rgba($error, 0.12);
-    color: $error;
-  }
-}
-
-.card-body {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 14px;
-}
-
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.info-label {
-  font-size: 12px;
-  color: $text-muted;
-}
-
-.info-value {
-  font-size: 12px;
-  color: $text-secondary;
-}
-
-.run-status {
-  margin-left: 6px;
-  font-size: 11px;
-  font-weight: 500;
-
-  &.ok { color: $success; }
-  &.err { color: $error; }
-}
-
-.mono {
-  font-family: $font-code;
-  font-size: 12px;
-}
-
-.card-actions {
-  display: flex;
-  gap: 4px;
-  border-top: 1px solid $border-light;
-  padding-top: 10px;
-}
-</style>

package/src/components/jobs/JobFormModal.vue

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