Feat/shadcn sidebar and page views (#2084)

* feat(web): migrate sidebar to shadcn and convert entity editors to page views

* feat(web): enhance sidebar with sections, collapsible persistence, sub-item sorting/limiting, and UI polish

- Reorganize sidebar into Home and Extensions sections with collapsible groups
- Split plugins page into plugins, market, and mcp as separate routes
- Add sidebar sub-items sorted by updatedAt with max 5 visible and expand/collapse toggle
- Persist collapsible section state and sidebar open state in localStorage
- Fix page refresh stripping query params by splitting handleChildClick/selectChild
- Swap plugin detail layout (config left, readme right)
- Add fixed headers with internal scroll for all detail and list pages
- Remove entity form borders and sidebar rail
- Improve dark mode sidebar/content contrast
- Rename monitoring to Dashboard, move to first position
- Update breadcrumb to show Home or Extensions based on current route
- Add i18n translations for more/less toggle in all 4 locales

* fix(web): fix scroll behavior - constrain layout to viewport, fix fixed headers and independent scroll areas

- Change SidebarProvider wrapper from min-h-svh to h-svh overflow-hidden to constrain layout to viewport height (root cause of all scroll issues)
- Fix create mode pages (bot, pipeline, knowledge): extract title bar out of scroll container so only form content scrolls
- Fix plugin detail: add overflow-x-hidden on both config and readme panels to prevent horizontal overflow
- Add min-h-0 to all TabsContent in edit mode for cross-browser flex shrink safety
- Change nested <main> to <div> in layout to avoid invalid nested <main> tags (SidebarInset already renders as <main>)

* style(web): polish UI - dashboard i18n, sidebar create text, cursor-pointer tabs, remove cancel buttons

* feat(web): add plugin context menu to sidebar sub-items

- Add hover-reveal dropdown menu (Ellipsis icon) on plugin sidebar items
- Menu items: Update (marketplace only), View Source (marketplace/github), Delete
- Add confirmation dialog with async task polling for delete/update operations
- Extend SidebarEntityItem with installSource and installInfo fields
- Fix PipelineFormComponent optional onCancel invocation

* fix(web): prevent plugin sidebar text from overlapping menu button

Add right padding on plugin sub-items and explicit truncate on text
span so long plugin names never overlap the hover menu button.

* feat(web): show update indicator on sidebar plugin menu

- Fetch marketplace plugin versions in SidebarDataContext.refreshPlugins
- Compare with installed version using isNewerVersion to set hasUpdate
- Show red dot on menu trigger when update available (always visible)
- Show 'New' badge on Update menu item when update available
- Marketplace fetch failure is silently caught to avoid blocking sidebar

* refactor(web): remove entity list pages, back buttons, and make sidebar toggle collapse

- Remove card grid list views from bots, pipelines, knowledge pages
- Show empty state placeholder when no entity is selected
- Preserve KB migration dialog at page level
- Remove back (ArrowLeft) buttons from all detail pages (bots, pipelines, knowledge, plugins)
- Sidebar parent click for bots/pipelines/knowledge now toggles collapse instead of navigating
- Breadcrumb second level is now non-clickable (always BreadcrumbPage)
- Add selectFromSidebar i18n keys in all 4 locales

* feat(web): enhance bot session monitor with refresh functionality and improve log card UI

* refactor(web): optimize pipeline detail page with vertical config nav and debug chat polish

- Convert pipeline config tab's horizontal sub-tabs to vertical left-side navigation with icons
- Replace hardcoded colors in PipelineFormComponent and DebugDialog with theme-aware Tailwind classes
- Replace custom SVG icons with lucide-react (User, Users, ImageIcon, Send, Reply, etc.)
- Replace hardcoded Chinese strings with i18n keys (allMembers, file, voice, uploadImage, uploading)
- Modernize chat bubbles to use bg-primary/10 and bg-muted instead of hardcoded blue/gray
- Translate all Chinese comments to English in both components
- Delete unused pipelineFormStyle.module.css
- Remove max-w-2xl constraint from config tab container

* fix(web): improve dark mode contrast and relocate WebSocket status indicator

Bump dark mode --muted, --accent, --secondary from oklch(0.18) to oklch(0.24)
to fix invisible TabsList, message bubbles, and selected items against the
oklch(0.17) background. Move WebSocket connection dot from pipeline title
into the Debug Chat tab trigger so it is always visible. Replace hardcoded
Quote border colors with theme-aware border-muted-foreground/50.

* fix(web): increase dark mode contrast for muted/accent/secondary to oklch(0.27)

Previous value of oklch(0.24) was still not distinguishable enough against
the oklch(0.17) background. Bump to oklch(0.27) for a 0.10 lightness gap,
matching the contrast ratio of the default shadcn zinc dark theme.

* style(web): replace hardcoded colors with theme tokens in monitoring dashboard

Convert all monitoring page components from hardcoded gray/white colors
to theme-aware CSS variable tokens (bg-card, text-foreground,
text-muted-foreground, bg-muted, bg-background, bg-accent, border).
Semantic colors (red/green/blue/purple for status badges and error
styling) are intentionally preserved.

* feat(web): show debug indicator for debugging plugins in sidebar

Add orange Bug icon next to plugin name in sidebar sub-items when the
plugin is connected via WebSocket debug mode. Hide context menu for
debug plugins since delete/update operations are not supported.

* feat(web): show install source and debug badge on plugin detail page

Display a badge next to the plugin title indicating the install source
(GitHub blue, Local green, Marketplace purple) or debugging status
(orange with Bug icon), matching the existing plugin card convention.

* fix(web): resolve eslint errors for CI - remove unused imports and variables

* fix(web): remove stale setSubtitle call and fix prettier formatting

* Refactor code formatting and improve readability

- Updated HomeSidebar.tsx to enhance clarity in conditional assignment.
- Adjusted CSS formatting in github-markdown.css for better alignment.
- Cleaned up tsconfig.json by consolidating array formatting for consistency.

* fix(ci): use local prettier instead of mirrors-prettier to avoid version mismatch (3.1.0 vs 3.8.1)

web/src/i18n/locales/en-US.ts

@@ -1,4 +1,11 @@
 const enUS = {
+  sidebar: {
+    home: 'Home',
+    extensions: 'Extensions',
+    installedPlugins: 'Installed Plugins',
+    pluginMarket: 'Marketplace',
+    mcpServers: 'MCP Servers',
+  },
   common: {
     login: 'Login',
     logout: 'Logout',
@@ -136,6 +143,8 @@ const enUS = {
     apiKeyCreatedMessage:
       'Please copy this API key, if the button is invalid, please copy manually.',
     none: 'None',
+    more: 'More ({{count}})',
+    less: 'Less',
   },
   notFound: {
     title: 'Page not found',
@@ -251,6 +260,7 @@ const enUS = {
     description:
       'Create and manage bots, which are the entry points for LangBot to connect with various platforms',
     createBot: 'Create Bot',
+    selectFromSidebar: 'Select a bot from the sidebar',
     editBot: 'Edit Bot',
     getBotListError: 'Failed to get bot list: ',
     botName: 'Bot Name',
@@ -596,6 +606,7 @@ const enUS = {
     description:
       'Pipelines define the processing flow for message events, used to bind to bots',
     createPipeline: 'Create Pipeline',
+    selectFromSidebar: 'Select a pipeline from the sidebar',
     editPipeline: 'Edit Pipeline',
     chat: 'Chat',
     configuration: 'Configuration',
@@ -685,9 +696,14 @@ const enUS = {
       replyTo: 'Reply to',
       showMarkdown: 'Show Markdown',
       showRaw: 'Show Raw',
+      allMembers: 'All Members',
+      file: 'File',
+      voice: 'Voice',
+      uploadImage: 'Upload Image',
+      uploading: 'Uploading...',
     },
     monitoring: {
-      title: 'Monitoring',
+      title: 'Dashboard',
       description:
         'View execution logs and errors for this pipeline (last 24 hours)',
       detailedLogs: 'Detailed Logs',
@@ -696,6 +712,7 @@ const enUS = {
   knowledge: {
     title: 'Knowledge',
     createKnowledgeBase: 'Create Knowledge Base',
+    selectFromSidebar: 'Select a knowledge base from the sidebar',
     editKnowledgeBase: 'Edit Knowledge Base',
     selectKnowledgeBase: 'Select Knowledge Base',
     selectKnowledgeBases: 'Select Knowledge Bases',
@@ -901,7 +918,7 @@ const enUS = {
       'Space login email does not match the local account email',
   },
   monitoring: {
-    title: 'Monitoring',
+    title: 'Dashboard',
     description: 'Monitor bot activities, LLM calls, and system performance',
     overview: 'Overview',
     totalMessages: 'Total Messages',

web/src/i18n/locales/ja-JP.ts

@@ -1,4 +1,11 @@
 const jaJP = {
+  sidebar: {
+    home: 'ホーム',
+    extensions: '拡張機能',
+    installedPlugins: 'インストール済みプラグイン',
+    pluginMarket: 'プラグインマーケット',
+    mcpServers: 'MCPサーバー',
+  },
   common: {
     login: 'ログイン',
     logout: 'ログアウト',
@@ -138,6 +145,8 @@
     apiKeyCreatedMessage:
       'この API キーをコピーしてください。もしボタンが無効な場合は手動でコピーしてください。',
     none: 'なし',
+    more: 'もっと見る ({{count}})',
+    less: '折りたたむ',
   },
   notFound: {
     title: 'ページが見つかりません',
@@ -256,6 +265,7 @@
     description:
       'ボットの作成と管理を行います。LangBotと各プラットフォームを接続するためのエントリーポイントです',
     createBot: 'ボットを作成',
+    selectFromSidebar: 'サイドバーからボットを選択してください',
     editBot: 'ボットを編集',
     getBotListError: 'ボットリストの取得に失敗しました：',
     botName: 'ボット名',
@@ -597,6 +607,7 @@
     description:
       'メッセージイベントの処理フローを定義し、ボットに紐付けて使用するパイプラインです',
     createPipeline: 'パイプラインを作成',
+    selectFromSidebar: 'サイドバーからパイプラインを選択してください',
     editPipeline: 'パイプラインを編集',
     chat: 'チャット',
     configuration: '設定',
@@ -688,9 +699,14 @@
       replyTo: '返信先',
       showMarkdown: 'Markdownで表示',
       showRaw: '原文で表示',
+      allMembers: '全メンバー',
+      file: 'ファイル',
+      voice: '音声',
+      uploadImage: '画像をアップロード',
+      uploading: 'アップロード中...',
     },
     monitoring: {
-      title: 'モニタリング',
+      title: 'ダッシュボード',
       description: 'このパイプラインの実行ログとエラー情報を表示（過去24時間）',
       detailedLogs: '詳細ログ',
     },
@@ -698,6 +714,7 @@
   knowledge: {
     title: '知識ベース',
     createKnowledgeBase: '知識ベースを作成',
+    selectFromSidebar: 'サイドバーから知識ベースを選択してください',
     editKnowledgeBase: '知識ベースを編集',
     selectKnowledgeBase: '知識ベースを選択',
     selectKnowledgeBases: '知識ベースを選択',
@@ -894,7 +911,7 @@
       'Spaceログインのメールアドレスがローカルアカウントのメールアドレスと一致しません',
   },
   monitoring: {
-    title: 'モニタリング',
+    title: 'ダッシュボード',
     description:
       'ボットアクティビティ、LLM呼び出し、システムパフォーマンスを監視',
     overview: '概要',

web/src/i18n/locales/zh-Hans.ts

@@ -1,4 +1,11 @@
 const zhHans = {
+  sidebar: {
+    home: '首页',
+    extensions: '扩展',
+    installedPlugins: '已安装插件',
+    pluginMarket: '插件市场',
+    mcpServers: 'MCP 服务器',
+  },
   common: {
     login: '登录',
     logout: '退出登录',
@@ -127,6 +134,8 @@ const zhHans = {
     actions: '操作',
     apiKeyCreatedMessage: '请复制此 API 密钥，若按钮无效，请手动复制。',
     none: '无',
+    more: '更多 ({{count}})',
+    less: '收起',
   },
   notFound: {
     title: '页面不存在',
@@ -240,6 +249,7 @@ const zhHans = {
     title: '机器人',
     description: '创建和管理机器人，这是 LangBot 与各个平台连接的入口',
     createBot: '创建机器人',
+    selectFromSidebar: '从侧边栏选择一个机器人',
     editBot: '编辑机器人',
     getBotListError: '获取机器人列表失败：',
     botName: '机器人名称',
@@ -569,6 +579,7 @@ const zhHans = {
     title: '流水线',
     description: '流水线定义了对消息事件的处理流程，用于绑定到机器人',
     createPipeline: '创建流水线',
+    selectFromSidebar: '从侧边栏选择一个流水线',
     editPipeline: '编辑流水线',
     chat: '对话',
     configuration: '配置',
@@ -658,6 +669,11 @@ const zhHans = {
       replyTo: '回复给',
       showMarkdown: '渲染',
       showRaw: '原文',
+      allMembers: '全体成员',
+      file: '文件',
+      voice: '语音',
+      uploadImage: '上传图片',
+      uploading: '上传中...',
     },
     monitoring: {
       title: '监控日志',
@@ -668,6 +684,7 @@ const zhHans = {
   knowledge: {
     title: '知识库',
     createKnowledgeBase: '创建知识库',
+    selectFromSidebar: '从侧边栏选择一个知识库',
     editKnowledgeBase: '编辑知识库',
     selectKnowledgeBase: '选择知识库',
     selectKnowledgeBases: '选择知识库',
@@ -857,7 +874,7 @@ const zhHans = {
     spaceEmailMismatch: 'Space登录账号邮箱与本实例账号邮箱不匹配',
   },
   monitoring: {
-    title: '日志监控',
+    title: '仪表盘',
     description: '查看机器人活动、LLM调用和系统性能',
     overview: '概览',
     totalMessages: '总消息数',

web/src/i18n/locales/zh-Hant.ts

@@ -1,4 +1,11 @@
 const zhHant = {
+  sidebar: {
+    home: '首頁',
+    extensions: '擴展',
+    installedPlugins: '已安裝外掛',
+    pluginMarket: '外掛市場',
+    mcpServers: 'MCP 伺服器',
+  },
   common: {
     login: '登入',
     logout: '登出',
@@ -127,6 +134,8 @@ const zhHant = {
     actions: '操作',
     apiKeyCreatedMessage: '請複製此 API 金鑰，若按鈕無效，請手動複製。',
     none: '無',
+    more: '更多 ({{count}})',
+    less: '收起',
   },
   notFound: {
     title: '頁面不存在',
@@ -239,6 +248,7 @@ const zhHant = {
     title: '機器人',
     description: '建立和管理機器人，這是 LangBot 與各個平台連接的入口',
     createBot: '建立機器人',
+    selectFromSidebar: '從側邊欄選擇一個機器人',
     editBot: '編輯機器人',
     getBotListError: '取得機器人清單失敗：',
     botName: '機器人名稱',
@@ -562,6 +572,7 @@ const zhHant = {
     title: '流程線',
     description: '流程線定義了對訊息事件的處理流程，用於綁定到機器人',
     createPipeline: '建立流程線',
+    selectFromSidebar: '從側邊欄選擇一個流程線',
     editPipeline: '編輯流程線',
     chat: '對話',
     configuration: '設定',
@@ -651,6 +662,11 @@ const zhHant = {
       replyTo: '回覆給',
       showMarkdown: '渲染',
       showRaw: '原文',
+      allMembers: '全體成員',
+      file: '檔案',
+      voice: '語音',
+      uploadImage: '上傳圖片',
+      uploading: '上傳中...',
     },
     monitoring: {
       title: '監控日誌',
@@ -661,6 +677,7 @@ const zhHant = {
   knowledge: {
     title: '知識庫',
     createKnowledgeBase: '建立知識庫',
+    selectFromSidebar: '從側邊欄選擇一個知識庫',
     editKnowledgeBase: '編輯知識庫',
     selectKnowledgeBase: '選擇知識庫',
     selectKnowledgeBases: '選擇知識庫',
@@ -839,7 +856,7 @@ const zhHant = {
     spaceEmailMismatch: 'Space登入帳號電子郵件與本實例帳號電子郵件不匹配',
   },
   monitoring: {
-    title: '日誌監控',
+    title: '儀表盤',
     description: '監控機器人活動、LLM調用和系統效能',
     overview: '概覽',
     totalMessages: '總訊息數',