fix: auth bypass, SPA serving, and provider improvements (#97)

* feat(chat): polish syntax highlighting and tool payload rendering (#94) * [verified] feat(chat): polish syntax highlighting and tool payload rendering * [verified] fix(chat): tighten large tool payload rendering * docs: update data volume path in Docker docs Align documentation with docker-compose.yml change: hermes-web-ui-data -> hermes-web-ui, /app/dist/data -> /root/.hermes-web-ui Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: bundle server build and restructure service modules - Add build-server.mjs script for standalone server compilation - Add logger service with structured output - Restructure auth, gateway-manager, hermes-cli, hermes services - Update docker-compose volume mount path - Update tsconfig and entry point for bundled server Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: separate controllers from routes and centralize route registration - Extract business logic from route handlers into controllers/ - Add centralized route registry in routes/index.ts with public/auth/protected layers - Replace global auth whitelist with sequential middleware registration - Extract shared helpers to services/config-helpers.ts - Allow custom provider name to be user-editable in ProviderFormModal - Deduplicate custom providers by poolKey instead of base_url in getAvailable Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: auth bypass via path case, SPA serving, and provider improvements - Fix auth bypass: path case-insensitive check for /api, /v1, /upload - Fix SPA returning 401: skip auth for non-API paths (static files) - Fix profile switch: use local loading state instead of shared store ref - Auto-append /v1 to base_url when fetching models (frontend + backend) - Guard .env writing to built-in providers only - Add builtin field to provider presets, enable base_url input in form - Print auth token to console on startup (pino only writes to file) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Zhicheng Han <43314240+hanzckernel@users.noreply.github.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-21 12:35:48 +08:00
parent 21296a416b
commit 477af66232
65 changed files with 2743 additions and 2621 deletions
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import MarkdownIt from 'markdown-it'
-import hljs from 'highlight.js'
+import { handleCodeBlockCopyClick, renderHighlightedCodeBlock } from './highlight'

 const props = defineProps<{ content: string }>()
 const { t } = useI18n()
@@ -12,22 +12,19 @@ const md: MarkdownIt = new MarkdownIt({
  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)">${t('common.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)">${t('common.copy')}</button></div><code class="hljs">${md.utils.escapeHtml(str)}</code></pre>`
+    return renderHighlightedCodeBlock(str, lang, t('common.copy'))
  },
 })

 const renderedHtml = computed(() => md.render(props.content))
+
+function handleMarkdownClick(event: MouseEvent): void {
+  void handleCodeBlockCopyClick(event)
+}
 </script>

 <template>
-  <div class="markdown-body" v-html="renderedHtml"></div>
+  <div class="markdown-body" v-html="renderedHtml" @click="handleMarkdownClick"></div>
 </template>

 <style lang="scss">
@@ -121,88 +118,4 @@ const renderedHtml = computed(() => md.render(props.content))
    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; }
-
-// Dark mode highlight.js — inverted pure ink
-.dark .hljs { color: #d0d0d0; }
-.dark .hljs-keyword,
-.dark .hljs-selector-tag { color: #f0f0f0; font-weight: 600; }
-.dark .hljs-string,
-.dark .hljs-attr { color: #aaaaaa; }
-.dark .hljs-number { color: #cccccc; }
-.dark .hljs-comment { color: #666666; font-style: italic; }
-.dark .hljs-built_in { color: #bbbbbb; }
-.dark .hljs-type { color: #c6c6c6; }
-.dark .hljs-variable { color: #f0f0f0; }
-.dark .hljs-title,
-.dark .hljs-title\.function_ { color: #f0f0f0; }
-.dark .hljs-params { color: #d0d0d0; }
-.dark .hljs-meta { color: #666666; }
 </style>
@@ -3,6 +3,13 @@ import type { Message } from "@/stores/hermes/chat";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import MarkdownRenderer from "./MarkdownRenderer.vue";
+import {
+  copyTextToClipboard,
+  handleCodeBlockCopyClick,
+  renderHighlightedCodeBlock,
+} from "./highlight";
+
+const TOOL_PAYLOAD_DISPLAY_LIMIT = 2000;

 const props = defineProps<{ message: Message }>();
 const { t } = useI18n();
@@ -25,6 +32,66 @@ function formatSize(bytes: number): string {
  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
 }

+type ToolPayload = {
+  full: string;
+  display: string;
+  language?: string;
+};
+
+function formatToolPayload(raw?: string): ToolPayload {
+  if (!raw) {
+    return { full: "", display: "" };
+  }
+
+  try {
+    const full = JSON.stringify(JSON.parse(raw), null, 2);
+    return {
+      full,
+      display:
+        full.length > TOOL_PAYLOAD_DISPLAY_LIMIT
+          ? full.slice(0, TOOL_PAYLOAD_DISPLAY_LIMIT) + "\n" + t("chat.truncated")
+          : full,
+      language: "json",
+    };
+  } catch {
+    return {
+      full: raw,
+      display:
+        raw.length > TOOL_PAYLOAD_DISPLAY_LIMIT
+          ? raw.slice(0, TOOL_PAYLOAD_DISPLAY_LIMIT) + "\n" + t("chat.truncated")
+          : raw,
+    };
+  }
+}
+
+function renderToolPayload(content: string, language?: string): string {
+  return renderHighlightedCodeBlock(content, language, t("common.copy"), {
+    maxHighlightLength: TOOL_PAYLOAD_DISPLAY_LIMIT,
+  });
+}
+
+async function handleToolDetailClick(event: MouseEvent): Promise<void> {
+  const target = event.target;
+  if (!(target instanceof HTMLElement)) return;
+
+  const button = target.closest<HTMLElement>("[data-copy-code=\"true\"]");
+  if (!button) return;
+
+  event.preventDefault();
+
+  const source = button.closest<HTMLElement>("[data-copy-source]")?.dataset.copySource;
+  if (source === "tool-args" && fullToolArgs.value) {
+    await copyTextToClipboard(fullToolArgs.value);
+    return;
+  }
+  if (source === "tool-result" && fullToolResult.value) {
+    await copyTextToClipboard(fullToolResult.value);
+    return;
+  }
+
+  await handleCodeBlockCopyClick(event);
+}
+
 const hasAttachments = computed(
  () => (props.message.attachments?.length ?? 0) > 0,
 );
@@ -33,30 +100,28 @@ const hasToolDetails = computed(
  () => !!(props.message.toolArgs || props.message.toolResult),
 );

-const formattedToolArgs = computed(() => {
-  if (!props.message.toolArgs) return "";
-  try {
-    return JSON.stringify(JSON.parse(props.message.toolArgs), null, 2);
-  } catch {
-    return props.message.toolArgs;
-  }
+const toolArgsPayload = computed(() => formatToolPayload(props.message.toolArgs));
+const toolResultPayload = computed(() => formatToolPayload(props.message.toolResult));
+
+const fullToolArgs = computed(() => toolArgsPayload.value.full);
+const formattedToolArgs = computed(() => toolArgsPayload.value.display);
+const fullToolResult = computed(() => toolResultPayload.value.full);
+const formattedToolResult = computed(() => toolResultPayload.value.display);
+
+const renderedToolArgs = computed(() => {
+  if (!formattedToolArgs.value) return "";
+  return renderToolPayload(
+    formattedToolArgs.value,
+    toolArgsPayload.value.language,
+  );
 });

-const formattedToolResult = computed(() => {
-  if (!props.message.toolResult) return "";
-  try {
-    const parsed = JSON.parse(props.message.toolResult);
-    const str = JSON.stringify(parsed, null, 2);
-    // Truncate very long output
-    if (str.length > 2000)
-      return str.slice(0, 2000) + "\n" + t("chat.truncated");
-    return str;
-  } catch {
-    const raw = props.message.toolResult;
-    if (raw.length > 2000)
-      return raw.slice(0, 2000) + "\n" + t("chat.truncated");
-    return raw;
-  }
+const renderedToolResult = computed(() => {
+  if (!formattedToolResult.value) return "";
+  return renderToolPayload(
+    formattedToolResult.value,
+    toolResultPayload.value.language,
+  );
 });
 </script>

@@ -109,14 +174,14 @@ const formattedToolResult = computed(() => {
          t("chat.error")
        }}</span>
      </div>
-      <div v-if="toolExpanded && hasToolDetails" class="tool-details">
-        <div v-if="formattedToolArgs" class="tool-detail-section">
+      <div v-if="toolExpanded && hasToolDetails" class="tool-details" @click="handleToolDetailClick">
+        <div v-if="formattedToolArgs" class="tool-detail-section" data-copy-source="tool-args">
          <div class="tool-detail-label">{{ t("chat.arguments") }}</div>
-          <pre class="tool-detail-code">{{ formattedToolArgs }}</pre>
+          <div class="tool-detail-code-block" v-html="renderedToolArgs"></div>
        </div>
-        <div v-if="formattedToolResult" class="tool-detail-section">
+        <div v-if="formattedToolResult" class="tool-detail-section" data-copy-source="tool-result">
          <div class="tool-detail-label">{{ t("chat.result") }}</div>
-          <pre class="tool-detail-code">{{ formattedToolResult }}</pre>
+          <div class="tool-detail-code-block" v-html="renderedToolResult"></div>
        </div>
      </div>
    </template>
@@ -400,20 +465,22 @@ const formattedToolResult = computed(() => {
  margin-bottom: 2px;
 }

-.tool-detail-code {
-  font-family: $font-code;
-  font-size: 11px;
-  line-height: 1.5;
-  color: $text-secondary;
-  background: $code-bg;
-  border-radius: $radius-sm;
-  padding: 6px 8px;
-  margin: 0;
-  overflow-x: auto;
-  max-height: 300px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  word-break: break-all;
+.tool-detail-code-block {
+  :deep(.hljs-code-block) {
+    margin: 0;
+  }
+
+  :deep(.code-header) {
+    background: rgba(0, 0, 0, 0.02);
+  }
+
+  :deep(code.hljs) {
+    font-size: 11px;
+    max-height: 300px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
 }

@keyframes spin {
@@ -0,0 +1,106 @@
+import hljs from 'highlight.js'
+
+const LANGUAGE_ALIASES: Record<string, string> = {
+  shellscript: 'bash',
+  sh: 'bash',
+  zsh: 'bash',
+  yml: 'yaml',
+  vue: 'xml',
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+function sanitizeLanguageClass(value: string): string {
+  return value.replace(/[^a-z0-9_-]/gi, '-') || 'plain'
+}
+
+export function normalizeHighlightLanguage(lang?: string): string {
+  const normalized = lang?.trim().toLowerCase() || ''
+  return LANGUAGE_ALIASES[normalized] || normalized
+}
+
+export function inferStructuredLanguage(content: string): string | undefined {
+  try {
+    JSON.parse(content)
+    return 'json'
+  } catch {
+    return undefined
+  }
+}
+
+type RenderHighlightedCodeBlockOptions = {
+  maxHighlightLength?: number
+}
+
+export function renderHighlightedCodeBlock(
+  content: string,
+  lang: string | undefined,
+  copyLabel: string,
+  options: RenderHighlightedCodeBlockOptions = {},
+): string {
+  const requestedLanguage = lang?.trim().toLowerCase() || ''
+  const normalizedLanguage = normalizeHighlightLanguage(requestedLanguage)
+  const highlightLimit = options.maxHighlightLength ?? Number.POSITIVE_INFINITY
+
+  let highlighted = ''
+  let codeClassLanguage = normalizedLanguage || requestedLanguage || 'plain'
+  let labelLanguage = requestedLanguage
+
+  try {
+    if (normalizedLanguage && hljs.getLanguage(normalizedLanguage) && content.length <= highlightLimit) {
+      highlighted = hljs.highlight(content, {
+        language: normalizedLanguage,
+        ignoreIllegals: true,
+      }).value
+      codeClassLanguage = normalizedLanguage
+    } else {
+      highlighted = escapeHtml(content)
+      if (!labelLanguage) {
+        labelLanguage = 'text'
+      }
+    }
+  } catch {
+    highlighted = escapeHtml(content)
+    if (!labelLanguage) {
+      labelLanguage = 'text'
+    }
+  }
+
+  const languageLabelHtml = labelLanguage
+    ? `<span class="code-lang">${escapeHtml(labelLanguage)}</span>`
+    : ''
+
+  return `<pre class="hljs-code-block"><div class="code-header">${languageLabelHtml}<button type="button" class="copy-btn" data-copy-code="true">${escapeHtml(copyLabel)}</button></div><code class="hljs language-${sanitizeLanguageClass(codeClassLanguage)}">${highlighted}</code></pre>`
+}
+
+export async function copyTextToClipboard(text: string): Promise<void> {
+  try {
+    await navigator.clipboard?.writeText?.(text)
+  } catch {
+    // Ignore clipboard failures; the code block still renders safely.
+  }
+}
+
+export async function handleCodeBlockCopyClick(event: MouseEvent): Promise<void> {
+  const target = event.target
+  if (!(target instanceof HTMLElement)) return
+
+  const button = target.closest<HTMLElement>('[data-copy-code="true"]')
+  if (!button) return
+
+  event.preventDefault()
+
+  const block = button.closest('.hljs-code-block')
+  const code = block?.querySelector('code')
+  const text = code?.textContent ?? ''
+  if (!text) return
+
+  await copyTextToClipboard(text)
+}
@@ -64,7 +64,7 @@ watch(selectedPreset, (val) => {
 })

 watch(() => formData.value.base_url, (url) => {
-  if (providerType.value === 'custom' && url.trim()) {
+  if (providerType.value === 'custom' && url.trim() && !formData.value.name) {
    formData.value.name = autoGenerateName(url.trim())
  }
 })
@@ -90,7 +90,8 @@ async function fetchModels() {

  fetchingModels.value = true
  try {
-    const url = base_url.replace(/\/+$/, '') + '/models'
+    const base = base_url.replace(/\/+$/, '')
+    const url = base.endsWith('/v1') ? `${base}/models` : `${base}/v1/models`
    const headers: Record<string, string> = {}
    if (formData.value.api_key.trim()) {
      headers['Authorization'] = `Bearer ${formData.value.api_key.trim()}`
@@ -213,7 +214,6 @@ function handleClose() {
        <NInput
          v-model:value="formData.name"
          :placeholder="t('models.autoGeneratedName')"
-          disabled
        />
      </NFormItem>

@@ -16,6 +16,7 @@ const dialog = useDialog()
 const expanded = ref(false)
 const detailLoading = ref(false)
 const exporting = ref(false)
+const switching = ref(false)
 const detail = ref<HermesProfileDetail | null>(null)

 const isDefault = computed(() => props.profile.name === 'default')
@@ -34,14 +35,18 @@ async function toggleDetail() {
  }
 }

-function handleSwitch() {
-  profilesStore.switchProfile(props.profile.name).then(ok => {
+async function handleSwitch() {
+  switching.value = true
+  try {
+    const ok = await profilesStore.switchProfile(props.profile.name)
    if (ok) {
      window.location.reload()
    } else {
      message.error(t('profiles.switchFailed'))
    }
-  })
+  } finally {
+    switching.value = false
+  }
 }

 function handleDelete() {
@@ -139,7 +144,7 @@ async function handleExport() {
      <NButton
        v-if="!profile.active"
        size="tiny"
-        :loading="profilesStore.switching"
+        :loading="switching"
        quaternary
        type="primary"
        @click="handleSwitch"
@@ -0,0 +1,170 @@
+@use 'variables' as *;
+
+// Shared code-block styles used by markdown rendering and tool payload details.
+// Keep these global so v-html output in both MarkdownRenderer.vue and MessageItem.vue
+// stays styled even though the HTML is not compiled as Vue template content.
+
+.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 — higher-contrast, still calm
+.hljs-code-block {
+  .hljs {
+    color: #1f2937;
+    background: none;
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-meta .hljs-keyword {
+    color: #7c3aed;
+    font-weight: 600;
+  }
+
+  .hljs-string,
+  .hljs-attr,
+  .hljs-regexp,
+  .hljs-template-variable {
+    color: #0f766e;
+  }
+
+  .hljs-number,
+  .hljs-literal,
+  .hljs-symbol,
+  .hljs-bullet {
+    color: #b45309;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #6b7280;
+    font-style: italic;
+  }
+
+  .hljs-built_in,
+  .hljs-title.class_,
+  .hljs-title.function_ {
+    color: #2563eb;
+  }
+
+  .hljs-type,
+  .hljs-variable,
+  .hljs-property,
+  .hljs-params {
+    color: #b91c1c;
+  }
+
+  .hljs-tag,
+  .hljs-name,
+  .hljs-section,
+  .hljs-title {
+    color: #1f2937;
+  }
+
+  .hljs-meta {
+    color: #6b7280;
+  }
+}
+
+// Dark mode highlight.js — clearer separation without neon
+.dark .hljs-code-block {
+  .hljs {
+    color: #e5e7eb;
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-meta .hljs-keyword {
+    color: #c084fc;
+    font-weight: 600;
+  }
+
+  .hljs-string,
+  .hljs-attr,
+  .hljs-regexp,
+  .hljs-template-variable {
+    color: #5eead4;
+  }
+
+  .hljs-number,
+  .hljs-literal,
+  .hljs-symbol,
+  .hljs-bullet {
+    color: #fbbf24;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #94a3b8;
+    font-style: italic;
+  }
+
+  .hljs-built_in,
+  .hljs-title.class_,
+  .hljs-title.function_ {
+    color: #93c5fd;
+  }
+
+  .hljs-type,
+  .hljs-variable,
+  .hljs-property,
+  .hljs-params {
+    color: #fca5a5;
+  }
+
+  .hljs-tag,
+  .hljs-name,
+  .hljs-section,
+  .hljs-title {
+    color: #f3f4f6;
+  }
+
+  .hljs-meta {
+    color: #94a3b8;
+  }
+}
@@ -1,4 +1,5 @@
@use 'variables' as *;
+@use 'code-block';

 *,
 *::before,