hermes-web-ui 0.0.1

package/src/components/chat/MarkdownRenderer.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import MarkdownIt from 'markdown-it'
+import hljs from 'highlight.js'
+
+const props = defineProps<{ content: string }>()
+
+const md: MarkdownIt = new MarkdownIt({
+  html: false,
+  linkify: true,
+  typographer: true,
+  highlight(str: string, lang: string): string {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return `<pre class="hljs-code-block"><div class="code-header"><span class="code-lang">${lang}</span><button class="copy-btn" onclick="navigator.clipboard.writeText(this.closest('.hljs-code-block').querySelector('code').textContent)">Copy</button></div><code class="hljs language-${lang}">${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`
+      } catch {
+        // fall through
+      }
+    }
+    return `<pre class="hljs-code-block"><div class="code-header"><button class="copy-btn" onclick="navigator.clipboard.writeText(this.closest('.hljs-code-block').querySelector('code').textContent)">Copy</button></div><code class="hljs">${md.utils.escapeHtml(str)}</code></pre>`
+  },
+})
+
+const renderedHtml = computed(() => md.render(props.content))
+</script>
+
+<template>
+  <div class="markdown-body" v-html="renderedHtml"></div>
+</template>
+
+<style lang="scss">
+@use '@/styles/variables' as *;
+
+.markdown-body {
+  font-size: 14px;
+  line-height: 1.65;
+
+  p {
+    margin: 0 0 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  ul, ol {
+    padding-left: 20px;
+    margin: 4px 0 8px;
+  }
+
+  li {
+    margin: 2px 0;
+  }
+
+  strong {
+    color: $text-primary;
+    font-weight: 600;
+  }
+
+  em {
+    color: $text-secondary;
+  }
+
+  a {
+    color: $accent-primary;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+
+    &:hover {
+      color: $accent-hover;
+    }
+  }
+
+  blockquote {
+    margin: 8px 0;
+    padding: 4px 12px;
+    border-left: 3px solid $border-color;
+    color: $text-secondary;
+  }
+
+  code:not(.hljs) {
+    background: $code-bg;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: $font-code;
+    font-size: 13px;
+    color: $accent-primary;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 8px 0;
+
+    th, td {
+      padding: 6px 12px;
+      border: 1px solid $border-color;
+      text-align: left;
+      font-size: 13px;
+    }
+
+    th {
+      background: rgba($accent-primary, 0.08);
+      color: $text-primary;
+      font-weight: 600;
+    }
+
+    td {
+      color: $text-secondary;
+    }
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid $border-color;
+    margin: 12px 0;
+  }
+}
+
+.hljs-code-block {
+  margin: 8px 0;
+  border-radius: $radius-sm;
+  overflow: hidden;
+  background: $code-bg;
+  border: 1px solid $border-color;
+
+  .code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 12px;
+    background: rgba(0, 0, 0, 0.03);
+    border-bottom: 1px solid $border-color;
+
+    .code-lang {
+      font-size: 11px;
+      color: $text-muted;
+      text-transform: uppercase;
+    }
+
+    .copy-btn {
+      font-size: 11px;
+      color: $text-muted;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 2px 6px;
+      border-radius: 3px;
+      transition: all $transition-fast;
+
+      &:hover {
+        color: $text-primary;
+        background: rgba(0, 0, 0, 0.05);
+      }
+    }
+  }
+
+  code.hljs {
+    display: block;
+    padding: 12px;
+    font-family: $font-code;
+    font-size: 13px;
+    line-height: 1.5;
+    overflow-x: auto;
+  }
+}
+
+// highlight.js theme override — pure ink B&W
+.hljs {
+  color: #2a2a2a;
+  background: none;
+}
+
+.hljs-keyword,
+.hljs-selector-tag { color: #1a1a1a; font-weight: 600; }
+.hljs-string,
+.hljs-attr { color: #555555; }
+.hljs-number { color: #333333; }
+.hljs-comment { color: #999999; font-style: italic; }
+.hljs-built_in { color: #444444; }
+.hljs-type { color: #3a3a3a; }
+.hljs-variable { color: #1a1a1a; }
+.hljs-title,
+.hljs-title\.function_ { color: #1a1a1a; }
+.hljs-params { color: #2a2a2a; }
+.hljs-meta { color: #999999; }
+</style>

package/src/components/chat/MessageItem.vue

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

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

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