Commit Graph
1 Commits
Author SHA1 Message Date
e4d9f903ff feat(web-studio): add frontend console workspace (#2128)
* feat: 新前端项目初始化

* style: 切换到vega风格

* feat: 新增定制化的 openapi codegen

* chore: 把openapi生成的ov-client移到src/gen底下

* feat: 生成 openviking-server 的 client

* feat: 搭建 openviking client 的适配层

* docs: 新增 ov-client 适配层描述

* chore: 清理项目模板

* clean: 清理模板样式

* deps: 新增 tanstack query 依赖

* style: 调整 shadcn 风格

* feat: 导入基础的shadcn组件

* feat: 复刻旧的 webconsole

* fix: 修复legacy代码commit不完整的问题

* docs: readme

* feat: 允许不显示传递自定义client

* feat: 三段式布局 + 功能页拆分

- 新增顶栏(全宽) + 左侧边栏 + 右侧内容区的三段式布局
- 将 Data 大页面拆分为独立路由: FileSystem、Find、Add Memory
- 将 Access 页面迁移为独立的 Settings 页面
- 侧边栏按 Data/Ops/Access 分组显示导航项
- 提取共享工具函数到 data-utils.ts
- 修复 .gitignore 中 data/ 规则误匹配子目录的问题

* feat(web-studio): add i18n support and dark/light theme toggle

- Add i18next with browser language detection (zh-CN / en)
- Add language switcher dropdown in header bar
- Add dark/light theme toggle with animated Sun/Moon icons
- Wire up next-themes ThemeProvider with class-based dark mode
- Replace shadcn dark theme with default Zinc (neutral gray)
- Connect sidebar labels to i18n translation keys
- Fix dropdown menu forced dark styling

* clean: 项目清理

* clean: 清理项目

* feat: 添加应用程序外壳、连接对话框和多个路由组件

* feat: 添加产品结构文档,更新侧边栏状态管理逻辑

* feat: 规范化目录结构

* feat(i18n): integrate translation for various components and routes

- Added translation support for the PlaceholderPage component, including layout notes and current status descriptions.
- Updated use-app-connection hook to return connection identity summaries with translation keys.
- Enhanced server mode descriptions with translation keys in the use-server-mode hook.
- Introduced a new resources file for managing translations in English and Chinese.
- Updated admin, operations, resources, and sessions routes to utilize translations for titles, descriptions, and highlights.
- Refactored error handling in the ov-client to improve clarity and maintainability.
- Improved utility functions for better type handling and code readability.

* feat: 添加 AGENTS.md 文件,定义前端工作区的实施规则

* fix: mpn audit fix

* feat: 更新国际化支持,添加英文和中文语言文件,移除占位页面组件

* feat: 添加语言选择功能和错误边界处理,更新国际化文本

* feat: 移除管理员路由及相关组件,清理不必要的代码

* feat: 移除管理相关路由及翻译,更新 AGENTS.md 和 README.md 文档

* feat: 更新会话工作区占位文本,增加 Bot 相关描述

* feat(web-studio): add homepage dashboard with system overview

- Add /home route with system health, memory stats, token usage,
  recent tasks, and sessions cards
- System health breathing dot animation for healthy components
- Memory stats donut chart with monochrome gradient palette
- Dark mode support with reactive theme detection and proper contrast
- Morandi-style status colors for tasks and session badges
- Sidebar navigation updated with Home entry
- Root route redirects to /home

* fix(web-studio): respect VITE_OV_BASE_URL env var in default ovClient

* refactor: extract shared ENV_BASE_URL constant to avoid duplication

* style(web-studio): delete the max-w-7 in app-shell.tsx

* feat: implement Viking file manager with file tree and hooks

- Add FileTree component for displaying directory structure.
- Create VikingFileManager component to manage file navigation and selection.
- Implement hooks for fetching file system data and handling file previews.
- Introduce API functions for interacting with the file system.
- Normalize file URIs and entries for consistent handling.
- Update route to integrate VikingFileManager and manage URI changes.

* feat(web-studio): add theme toggle button to header

* style(web-studio): unify layout colors and simplify header UI

- Remove SidebarRail and sidebar border for seamless layout
- Unify all backgrounds to bg-sidebar to eliminate dark mode color gaps
- Remove header page title, language label, and outline borders
- Enlarge sidebar nav icons and fonts
- Fix file manager negative margins to fully cover parent padding

* fix(web-studio): 隐藏无子文件夹目录的展开按钮

当文件夹下只有文件没有子文件夹时,不再显示展开箭头,
避免用户点击后看到空白内容。数据未加载时仍显示箭头以防闪烁。

* feat(web-studio): add i18n support to home page and gsap entrance animation

- Replace all hardcoded dual Chinese/English titles with i18n keys
- Add home namespace to en.ts and zh-CN.ts locale files
- Add memory category translations (profile, preferences, etc.)
- Add gsap staggered fade-in-up animation on home page mount
- Show language shortLabel in header language switcher
- Remove mx-auto from content wrapper for full-width layout

* feat(web-studio): 重构资源上传流程并修复单文件解析兜底

- 将 Add Resource 入口迁移到 /resources/add-resource
- 新增上传状态 hook、上传页面和目录选择器
- 支持拖拽上传、远程 URL 导入、进度展示和完成态反馈
- 补充上传相关 i18n、依赖和 .vite 忽略规则
- 修复单文件上传时未知二进制文件误回退为文本解析的问题

* fix(web-studio): 修复上传页进度显示与侧边栏展开逻辑

- 将上传进度文案移出 Progress 组件,避免子节点不渲染
- 将资源分组侧边栏改为受控展开,确保路由激活时自动展开
- 将导航项展平结果提到组件外,避免重复计算
- 将上传页支持格式提示从 PPT 调整为更准确的 PPTX

* Merge new-frontend into feat/home-i18n-animation and resolve conflicts

* feat(web-studio): add semantic search to file manager

Embed find/search functionality directly into the /resources file manager:
- Search bar in toolbar with Enter-to-search, supports ?q= deep linking
- Results grouped by Resources/Memories/Skills with clickable URI navigation
- Parallel search per context_type at root to ensure all types are represented
- Support ?file= param for auto-selecting files from search results

* feat(web-studio): command palette search with preview and keybinding

- Replace inline search bar with ⌘K command palette overlay
- Three-column layout for root search (Resources/Memories/Skills)
- Right-side preview pane showing abstract/overview on selection
- Full keyboard navigation: ↑↓ within column, ←→ across columns, Enter/Esc
- Folder button on each result to jump to parent directory
- 300ms debounce, React Query cache with 5min gcTime, placeholderData
- Consolidated typography to text-sm/text-xs two-tier scale

* feat(web-studio): palette animations, IME compat, file preview, search debounce

- Palette open: backdrop fade + panel slide-in + staggered row entrance
- Preview pane slide-right animation, reuse FilePreview for real content
- IME composition guard: pinyin Enter no longer triggers search navigation
- 300ms debounce with placeholderData to avoid flicker between queries
- Column header bg opacity 8% → 15%, kbd tags with muted background
- Typography consolidated to text-sm/text-xs scale

* feat(web-studio): directory browser with / command in search palette

Type / in the palette to enter directory browse mode:
- Two-column Miller layout: left = siblings, right = children
- Arrow keys navigate within and across columns
- Left arrow goes up one level, right drills into subdirectory
- Enter selects directory as search scope, Backspace exits to search
- Document-level keyboard listener so input retains focus

* fix(web-studio): resolve review issues in search palette

- Remove duplicate Cmd+K handler from FindPalette (single owner in VikingFileManager)
- DirBrowser: keep document keydown listener but remove stale Backspace handler
- Memoize effectiveReadOptions to fix preview memo invalidation on every render
- Reset activeIndex on data change instead of flatItems.length
- Wrap updateUri/handleNavigateFromSearch in useCallback
- Use ref for treeWidth in handleResizeStart to avoid recreation during drag
- Add ARIA role="dialog" and aria-modal to palette overlay

* feat(web-studio): add delight micro-interactions to search palette

- Empty state: centered Search icon + two-line guide with fade-in
- Loading state: rotating contextual hints (vector index, hierarchy scan, rerank)
- No results: empathetic message with suggestion
- Active row: 2px primary accent bar on left edge
- Scope badge: pulse flash on scope change
- Search trigger button: hover lift + shadow, active press-down

* refactor(web-studio): remove hover selection and scope flash from palette

- Remove onHover/onMouseEnter from result rows, keyboard-only selection
- Remove scope badge flash animation and related state
- Clean up unused CSS keyframes

* feat(web-studio): show file metadata in preview, move search to tree toolbar

- Add fetchFsStat API and useVikingFsStat hook to fetch file size/modTime
- Palette preview pane now shows real file size and modification date
- Move search button from breadcrumb toolbar to tree sidebar button area
- Root view (no tree) also has search button alongside parent/refresh

* fix(web-studio): remove dir browser hover, fix date formatting

- Remove onHover/onMouseEnter from DirBrowser columns, keyboard-only
- Format ISO 8601 dates (e.g. 2026-04-07T01:34:33+08:00) to readable
  "YYYY-MM-DD HH:mm" in fetchFsStat

* refactor(web-studio): unify date formatting across file list and preview

- Move formatModTime to normalize.ts as shared utility
- normalizeFsEntry now formats dates consistently (YYYY-MM-DD HH:mm)
- fetchFsStat reuses the same formatModTime
- Remove duplicate implementation from api.ts

* Refine resources search palette workflow

* feat(web-studio): enhance FindPalette keyboard navigation with Enter key support

* fix:补充目录文件预览与全局范围提示

* fix:补充搜索面板与目录浏览国际化文案

* feat(i18n): add homepage redesign translation keys

* feat(home): upgrade StatCard with color accents, icons, subtitles and countUp

* feat(home): restructure system health to vertical list layout

* feat(home): redesign error details dialog with status bar and collapsible sections

* feat(home): upgrade memory stats to low-saturation color palette

* feat(home): enhance panels, tables, and empty states

* fix(home): address review findings — TS type, i18n hardcoded strings, clipboard error handling

* style(home): remove StatCard left accent border

* style(home): increase card-background contrast and fix countUp for zero values

* style(home): unify hover shadow between StatCard and Panel

* fix(home): align system health row text by applying consistent padding

* fix(home): align System row padding with component rows

* fix(home): remove redundant System row from health list

* fix(home): remove first/last padding overrides for consistent row spacing

* style(home): remove left border from error items in dialog

* style(home): remove gradient status bar from error dialog

* feat(web-studio): implement VikingBot sessions chat UI

- Chat interface with assistant-ui runtime (SSE streaming, message history)
- Session title system: localStorage + AI-generated titles via sendChat
- Session list with search/filter (Cmd+K), new session (Cmd+N)
- Tool call collapsible cards with input/output display
- Reasoning expandable blocks with running/complete states
- Iteration badge for multi-step agent responses
- User/Assistant avatars, active session highlight
- Loading skeleton, error states, empty state with keyboard hints

* refactor(web-studio): replace assistant-ui with Streamdown + custom chat components

## Chat UI Architecture
- Remove @assistant-ui/react and @assistant-ui/react-markdown dependencies
- Remove adapter layer: use-assistant-runtime, use-thread-list-adapter, convert-message
- Delete assistant-ui primitives: thread.tsx, thread-list.tsx
- Components now consume useChat() directly without runtime conversion

## New Components (src/components/chat/)
- message-parts.tsx: MarkdownContent (Streamdown), ReasoningBlock, ToolCallBlock
- composer.tsx: floating frosted-glass input with backdrop-blur, file attachment support
- message-list.tsx: message bubbles with frosted-glass backgrounds (bg-background/70)
- thread.tsx: main chat area with PixelBlast background and auto-scroll

## Streaming Markdown
- Add streamdown, @streamdown/code, @streamdown/cjk for flicker-free streaming
- Incremental DOM updates instead of full re-parse on each token
- Shiki syntax highlighting and CJK text support

## Session Navigation
- Move session list into app-shell sidebar as collapsible sub-menu (NavSessionsItem)
- Session switching via URL search params (?s=sessionId), supports browser back/forward
- Remove embedded 260px thread-list panel from sessions page

## Visual Design
- PixelBlast (Three.js) particle background at 40% opacity with edge fade
- Frosted-glass message bubbles and composer (backdrop-blur-xl)
- Message width increased to max-w-3xl
- All user-facing text localized to Chinese

## Other
- Add use-file-attachment hook for file upload in composer
- Add pixel-blast.tsx (react-bits) as UI component
- bot: minor changes to ov_file.py and ov_server.py

* perf(web-studio): optimize chat rendering and background loading

- PixelBlast: defer mount until browser idle via requestIdleCallback,
  avoids blocking chat UI interactivity with 538KB Three.js chunk
- Auto-scroll: throttle via requestAnimationFrame, cancel pending
  scroll before scheduling new one (was firing per-token)
- UserMessage/AssistantMessage: wrap with React.memo to skip
  re-renders when streaming state changes (only streaming message
  needs updates, history messages are stable)
- NavSessionsItem: select only `s` param from router state instead
  of entire search object, prevents re-render on unrelated route changes

* feat(web-studio): add copy button to messages, cache session history

- Add hover-reveal copy button to both user and assistant messages
  (copies text content to clipboard, shows checkmark on success)
- Cache session message history for 30s (staleTime) to avoid
  flash/refetch when switching between sessions quickly

* polish(web-studio): refine chat UI cards, markdown, and interactions

## Message Cards
- Same-role consecutive messages use compact spacing (mb-1.5 vs mb-5)
- User bubble: solid primary bg, tighter rounded-br-sm corner
- Assistant bubble: subtle ring-1 ring-border/30 for edge definition
- Avatar hidden for consecutive same-role messages (spacer preserves alignment)

## Brand Avatar
- Replace generic BotIcon with gradient ring avatar (from-primary/20 to-primary/5)
- Ring-1 ring-primary/10 for subtle brand color presence

## Markdown Prose
- Refined heading sizes: h1=lg, h2=base, h3=sm with proper spacing
- Inline code: muted bg, rounded, no backtick pseudo-elements
- Blockquote: primary left border + muted bg + rounded-r-lg
- Links: primary color, no underline by default, underline on hover
- Tables: uppercase tracking-wider th headers
- Relaxed line-height for paragraphs and lists

## Typing Indicator
- 3-dot bounce animation when streaming starts before content arrives
- Shows only when no content/reasoning/toolCalls yet

## Timestamps
- Hover-reveal relative time on each message (刚刚/分钟前/小时前)
- 10px muted text, positioned beside copy button

## Iteration Badge
- Changed from English "Iteration N" to "第 N 轮"
- Pill style: rounded-full, primary/10 bg, primary text

## Empty State
- Product name "OpenViking" with gradient icon container
- Suggestion pills: 3 quick-start prompts as rounded buttons

## Tool/Reasoning Blocks
- Softer borders (border/30), lighter backgrounds (muted/20)
- Smaller label text (10px) with wider tracking

* fix(web-studio): correct bubble corner radius and remove suggestion pills

- User bubble: rounded-tr-sm (top-right near avatar), was wrongly br
- Remove quick-start suggestion pills from empty state

* feat(web-studio): use OpenViking logo as assistant avatar

Replace generic BotIcon with ov-logo.png in chat message bubbles.

* perf(web-studio): fix chat page jank — reduce GPU load significantly

## PixelBlast background
- Cap frame rate at 30fps (was uncapped 60fps) via frame budget throttle
- Set pixelRatio to 1 (was 2x on Retina), reduces render pixels by 4x
- Combined: ~8x less GPU work for the background animation

## Remove backdrop-blur from chat elements
- Message bubbles: bg-background/70 backdrop-blur-xl → bg-background/95
- Composer: bg-background/50 backdrop-blur-xl → bg-background/95
- Title bar: bg-background/80 backdrop-blur-sm → bg-background/95
- Each backdrop-blur created a compositing layer that re-blurred the
  animated canvas every frame — this was the main source of jank

## Logo compression
- Resize ov-logo.png from 1000x1000 (large) to 56x56 (2x render size)
- File size reduced to 2.2KB

## Scroll optimization
- Remove CSS scroll-smooth (conflicts with JS scrollIntoView smooth)

* fix(web-studio): add missing text-base class to sessions nav title

* fix(web-studio): improve sidebar vs content area contrast

Change SidebarInset background from bg-sidebar to bg-background so the
main content area is visually distinct from the sidebar in both light
and dark modes.

* style: update CSS variables for Ocean Warmth theme

* style: replace all hardcoded colors in home page with theme palette

* style: replace all hardcoded colors in home page with theme palette

- Category colors: cyan-to-purple spectrum (hue 200-292)
- Heatmap: green → blue gradient
- Token trend: cyan/blue/lavender
- Status indicators: semantic oklch colors
- System health: oklch with alpha
- Session badges: oklch with alpha
- Stat card accents: brand blue
- Pie chart: theme-aware stroke/label
- Fix accentColor alpha to use color-mix (hex append doesn't work with oklch)

* feat(web-studio): add new user onboarding dialog and empty states

Add a welcome dialog on first visit showing OpenViking value proposition
and slogan, with CTA navigating to context management upload. Add empty
states for context management, retrieval, and request logs pages.

* feat: add upload task dialog and resource upload handling

- Implemented UploadTaskDialog component to display ongoing upload tasks with status and error details.
- Integrated UploadTaskDialog into VikingFileManager for managing upload tasks.
- Added logic to track completed upload tasks and show processing notices.
- Introduced utility functions for file size formatting and upload error parsing.
- Defined constants for upload limits and blocked file extensions.

* feat: update VikingFileManager to use toast for processing notices

* fix: remove 'Add Resource' button text and update remote URL handling in AddResourceForm

* fix: update sidebar header and improve layout in app shell; refine request logs and retrieval page structure

* feat(web-studio): dynamic import hljs languages and expand coverage

Switch from static imports to dynamic import() for highlight.js
languages, so each language chunk loads only on first use. Expanded
from 14 to 42 languages (added toml/ini, kotlin, swift, ruby, etc).
Added markdown source mode syntax highlighting and dark mode token
colors (github-dark).

* feat(web-studio): show files in FileTree sidebar and support file selection

FileTree previously only displayed directories. Now it renders both
files and directories with proper visual hierarchy, selection state,
and semantic color tokens replacing hardcoded Tailwind grays.

* feat(web-studio): add inline code editor with UI polish

Add CodeMirror-based file editing in the resource preview panel.
Move edit/save controls to the left (next to filename), enlarge close
button hit area to 40px, add press-scale feedback on save, and replace
image borders with outline for cleaner depth.

* feat(web-studio): add empty state upload guidance for retrieval and request logs pages

Fix incorrect retrieval empty state copy (was duplicating request logs text) and add
"Upload File" CTA buttons that navigate to the resource upload dialog, guiding new
users toward their first context upload.

* refactor(web-studio): move upload search param to index route only

Parent route should only declare shared params (uri). The upload param
is only used by the index route to control the upload dialog, so it
belongs exclusively in index.tsx for better separation of concerns.

* fix(web-studio): use correct mode 'replace' for saveFileContent API

The API expects 'replace' instead of 'overwrite' for file content updates.

* fix(web-studio): preserve upload search param in resources layout route

The layout route's validateSearch was stripping the upload param before
it could reach the index route, breaking navigation from empty states.

* docs(web-studio): add merge plan

* feat(web-studio): enhance retrieval page

* feat: update home dashboard

* feat: update request logs

* feat: update app icon

* feat: improve resource search

* refactor(web-studio): split home and retrieval routes

* chore(web-studio): regenerate ov client from target api

* feat(web-studio): add scoped ov server contracts

* fix(web-studio): route api calls through generated client

* fix(web-studio): trim unsupported resources and chat features

* chore(web-studio): restore local validation baseline

* chore(web-studio): resolve i18next lint warnings

* chore(web-studio): drop local request log store

* chore(web-studio): add task result types

* feat(web-studio): restore resource upload tasks

* docs(web-studio): document upload task recovery

* fix(web-studio): parse structured chat stream payloads

* fix(web-studio): ignore composing enter in chat composer

* fix(web-studio): render chat stream events as they arrive

* fix(web-studio): remove upload task refresh button

* fix(web-studio): use neutral text for failed upload tasks

* docs(web-studio): rewrite developer readme

* docs(web-studio): document subpath deployment

* docs(web-studio): add english readme entry

* docs(web-studio): remove old docs

* refactor(web-studio): split request logs route

* feat(web-studio): add request log page size control

* refactor(web-studio): keep chat components under sessions

* refactor(web-studio): align route ownership boundaries

* chore(web-studio): align format scope with lint

* chore: remove test file

* style(web-studio): format source files

* chore: remove old placeholder

* chore: remove unused icons

* chore: delete merge plan

---------

Co-authored-by: Jye10032 <736891807@qq.com>
Co-authored-by: ponsde <2126824294@qq.com>
Co-authored-by: ifeichuan <feichuan05@gmail.com>
Co-authored-by: tins0 <1537604848@qq.com>
2026-05-20 15:55:38 +08:00