Frontend Status Verification (Verified 2026-07-23 23:16, planning prerequisite)

Purpose: Before planning "interface optimization," first clarify the actual running frontend. This document is based on actual code verification, correcting earlier misjudgments based on the old index-vue.html.

I. The Truth About the Tech Stack (Important Correction)

| Item | Actual Situation |

|---|---|

| Default / Which Interface Loads | Modern Vite version: dist/index.html → references real build artifacts like /assets/index-mclj9IVm.js (180 files in dist/assets/, complete and usable) |

| Actual Maintainable Source Code Location | src/ —— Vue 3 + Vite + Vue Router(hash) + Pinia, 80+ views, 200+ components/composables |

| What is index-vue.html | Old fallback version, accessible only via /old or /legacy; its dependency frontend/app.js (14,776 lines) coexists with but is unrelated to the modern src/ |

| frontend/ directory | Legacy dead code area (except i18n.js reused by src/App.vue, the rest should not be modified) |

| Server Version Selection | server.js: / and /modern first try dist/index.html; /old /legacy use index-vue.html |

Conclusion: Planning and modifications should be based on src/ (Vite project), not frontend/index-vue.html (old global build).

II. Current Layout (src/App.vue)

Login layer → main-layout:

• sidebar (200px, collapsible, collapses to 56px icon state)
• 5 navigation groups (src/constants/navGroups.js):

1. AI Agents (ai-workbench / digital-staff / anysearch / content-center / help-center)
2. Customization Center
3. Business (dashboard / product-list / bom-assistant / process-management / private-library / change-management / vendor / customer / order / project / inventory / quality / document-center / chipwise-engine / file-business / workflow / itemtype-management, 17 items in total)
4. Data Assets (industrial-asset-overview / data-scattered / metadata-collection / relation-graph / process-spec-studio / data-asset-dashboard / data-asset-platform / process-optimization / cross-industry-validation / vision-closing, 10 items in total)
5. System (modeling-center / system-objects / rules-templates / inspection-history / staff-capabilities / llm-config / feishu-config / system-log, 8 items in total)

• Approximately 45 navigation items in total, with business/data assets constituting the vast majority.
• content-wrapper (top bar + router-view):
• Top bar: brand + breadcrumb + Samsung/Phosphorus Chemical Demo toggle + language switch + theme switch + connection status + avatar + import/export + logout.
• Floating AI assistant button in the lower right corner (⚡, click to jump to /ai-workbench).
• Additionally, there are global AnySearch modal, global import/export, and Onboarding guidance.

III. Current Default Entry Status (Key Findings)

• src/router/index.js: path: '/' → redirect: '/ai-workbench'.
• src/App.vue: Both handleLogin and handleRegister, upon success, execute router.push('/ai-workbench').
• Thus, the current status is already "default entry to the chat interface" — src/views/AiWorkbench.vue (line 3205).

Capabilities already present in AiWorkbench.vue (no need to build from scratch)

• Left session list (session-sidebar): Sessions grouped by source (feishu / web), displaying count/time, with switch/new session functionality.
• Main chat area: Tab switching (Chat / Logs / Skills / Integration), chat header, clear chat, and online staff count.
• Quick staff toolbar (quick-staff-bar): One-click summoning of 6 digital employees.
• Inline summoning parameter panel (summon-panel): Replaces prompt(), supports intent input + dynamic parameter forms.
• Conversation-driven execution flow (confirm/cancel) capability already exists.

IV. User Needs vs. Current State Gap

| User Needs | Current State |

|---|---|

| Clean chat interface (similar to general LLM/agent applications) | ✅ Already exists (/ai-workbench is the default entry, with session list + chat area + quick staff) |

| Conversation history | ✅ Already exists (session list, grouped by Feishu/web; persistence mechanism to be verified) |

| Business / Settings opened separately (not permanently in main navigation) | ⚠️ Current state: 45-item massive business sidebar is permanently expanded, AI is just one item among them |

| QClaw-like left panel: Top navigation + bottom conversation history | ❌ Current state is "traditional sidebar grouped navigation + content area", AI chat is buried within the navigation system |

| Default direct entry to chat, buttons to invoke business/settings | ⚠️ Default entry is indeed chat, but the layout remains "sidebar-dominant", lacking the information architecture of "chat as primary, business as secondary" |

Core judgment: The issue is not the lack of a chat interface, but the information architecture—the entire product is dominated by a 45-item business/data/system sidebar, with the AI conversation being just one view, not "clean/chat-centric" enough. What's needed is an information architecture redesign (conversation as primary, business/settings can be summoned), not rebuilding chat capabilities (the chat engine already exists and is relatively complete).

V. Open questions to confirm before planning (pending user approval)

1. Which architecture to adopt?

• A. QClaw-like left sidebar dual-state: Narrow left sidebar (top brand/chat/business/settings 4 icons + bottom session history list), main area defaults to chat, can switch to "business/settings" full-screen to host the existing 45 views.
• B. Dual-window/dual-route: Default full-screen clean chat; button opens a new traditional interface (the existing sidebar layout as a whole serves as the "workbench").

1. Session history persistence: Reuse the existing AiWorkbench session mechanism (persistence method to be checked, possibly localStorage or backend), or does it need server-side integration?
2. The existing 45 business views must be 100% retained and usable (customer focus is on the 2 million asset library + six digital staff demos)—the redesign must not break them. The solution should "add a shell without modifying the views."
3. Does the frontend/ legacy old version (index-vue.html + app.js) still serve certain entry points? Need to confirm if it can be deprecated after the redesign to avoid long-term coexistence of dual frontends.

VI. Key file index

• Layout shell: src/App.vue
• Navigation configuration: src/constants/navGroups.js
• Routing: src/router/index.js
• Default chat interface: src/views/AiWorkbench.vue (contains sessions/session/multi-staff summoning)
• Digital staff page: src/views/DigitalStaff.vue, src/components/ai/AiStaffPanel.vue, src/components/ai/AiCapabilityBar.vue
• Modern version entry HTML: dist/index.html (build artifact); source entry src/main.js
• Old version (do not modify baseline): index-vue.html, frontend/app.js (unless confirmed for deprecation)