From 697dea21f8674ba8f3e90da0cd6f8b00747d5eaa Mon Sep 17 00:00:00 2001 From: VooDisss Date: Fri, 20 Feb 2026 14:09:54 +0200 Subject: [PATCH] Add informational tooltips to Status Panel sections --- .../shell/right-panel/tabs/StatusTab.tsx | 27 +++++++++- .../ui/src/lib/i18n/messages/en/instance.ts | 6 +++ .../ui/src/lib/i18n/messages/es/instance.ts | 6 +++ .../ui/src/lib/i18n/messages/fr/instance.ts | 6 +++ .../ui/src/lib/i18n/messages/ja/instance.ts | 6 +++ .../ui/src/lib/i18n/messages/ru/instance.ts | 6 +++ .../src/lib/i18n/messages/zh-Hans/instance.ts | 6 +++ packages/ui/src/styles/panels/right-panel.css | 52 ++++++++++++++++++- 8 files changed, 112 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx b/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx index 6786b455..e6839af6 100644 --- a/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx +++ b/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx @@ -1,8 +1,9 @@ import { For, Show, type Accessor, type Component } from "solid-js" import type { ToolState } from "@opencode-ai/sdk" import { Accordion } from "@kobalte/core" +import { Tooltip } from "@kobalte/core/tooltip" -import { ChevronDown, TerminalSquare, Trash2, XOctagon } from "lucide-solid" +import { ChevronDown, Info, TerminalSquare, Trash2, XOctagon } from "lucide-solid" import type { Instance } from "../../../../../types/instance" import type { BackgroundProcess } from "../../../../../../../server/src/api-types" @@ -206,21 +207,25 @@ const StatusTab: Component = (props) => { { id: "session-changes", labelKey: "instanceShell.rightPanel.sections.sessionChanges", + tooltipKey: "instanceShell.rightPanel.sections.sessionChanges.tooltip", render: renderStatusSessionChanges, }, { id: "plan", labelKey: "instanceShell.rightPanel.sections.plan", + tooltipKey: "instanceShell.rightPanel.sections.plan.tooltip", render: renderPlanSectionContent, }, { id: "background-processes", labelKey: "instanceShell.rightPanel.sections.backgroundProcesses", + tooltipKey: "instanceShell.rightPanel.sections.backgroundProcesses.tooltip", render: renderBackgroundProcesses, }, { id: "mcp", labelKey: "instanceShell.rightPanel.sections.mcp", + tooltipKey: "instanceShell.rightPanel.sections.mcp.tooltip", render: () => ( = (props) => { { id: "lsp", labelKey: "instanceShell.rightPanel.sections.lsp", + tooltipKey: "instanceShell.rightPanel.sections.lsp.tooltip", render: () => ( = (props) => { { id: "plugins", labelKey: "instanceShell.rightPanel.sections.plugins", + tooltipKey: "instanceShell.rightPanel.sections.plugins.tooltip", render: () => ( = (props) => { - {props.t(section.labelKey)} + + + e.stopPropagation()} + > + + + + + {props.t(section.tooltipKey)} + + + + {props.t(section.labelKey)} + diff --git a/packages/ui/src/lib/i18n/messages/en/instance.ts b/packages/ui/src/lib/i18n/messages/en/instance.ts index d8b02bbc..0fddda91 100644 --- a/packages/ui/src/lib/i18n/messages/en/instance.ts +++ b/packages/ui/src/lib/i18n/messages/en/instance.ts @@ -96,11 +96,17 @@ export const instanceMessages = { "instanceShell.rightPanel.tabs.ariaLabel": "Right panel tabs", "instanceShell.rightPanel.actions.refresh": "Refresh", "instanceShell.rightPanel.sections.sessionChanges": "Session Changes", + "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Files modified in the current session. Shows additions and deletions for each file.", "instanceShell.rightPanel.sections.plan": "Plan", + "instanceShell.rightPanel.sections.plan.tooltip": "The agent's roadmap for this session. Tracks tasks, subtasks, and their completion status.", "instanceShell.rightPanel.sections.backgroundProcesses": "Background Shells", + "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Long-running processes started by the agent. You can monitor their output, stop, or terminate them.", "instanceShell.rightPanel.sections.mcp": "MCP Servers", + "instanceShell.rightPanel.sections.mcp.tooltip": "Model Context Protocol servers that extend the agent's capabilities with external tools and services.", "instanceShell.rightPanel.sections.lsp": "LSP Servers", + "instanceShell.rightPanel.sections.lsp.tooltip": "Language Server Protocol servers providing code intelligence, diagnostics, and language-specific features.", "instanceShell.rightPanel.sections.plugins": "Plugins", + "instanceShell.rightPanel.sections.plugins.tooltip": "Plugins that customize the UI and server behavior, adding features beyond MCP and LSP.", "instanceShell.sessionChanges.noSessionSelected": "Select a session to view changes.", "instanceShell.sessionChanges.loading": "Fetching session changes...", diff --git a/packages/ui/src/lib/i18n/messages/es/instance.ts b/packages/ui/src/lib/i18n/messages/es/instance.ts index 7fa214eb..2faa0c20 100644 --- a/packages/ui/src/lib/i18n/messages/es/instance.ts +++ b/packages/ui/src/lib/i18n/messages/es/instance.ts @@ -94,11 +94,17 @@ export const instanceMessages = { "instanceShell.rightPanel.tabs.status": "Estado", "instanceShell.rightPanel.tabs.ariaLabel": "Pestañas del panel derecho", "instanceShell.rightPanel.sections.sessionChanges": "Cambios de sesion", + "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Archivos modificados en la sesion actual. Muestra adiciones y eliminaciones para cada archivo.", "instanceShell.rightPanel.sections.plan": "Plan", + "instanceShell.rightPanel.sections.plan.tooltip": "Hoja de ruta del agente para esta sesion. Seguimiento de tareas y su estado de completado.", "instanceShell.rightPanel.sections.backgroundProcesses": "Shells en segundo plano", + "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Procesos de larga duracion iniciados por el agente. Puedes monitorear su salida, detenerlos o terminarlos.", "instanceShell.rightPanel.sections.mcp": "Servidores MCP", + "instanceShell.rightPanel.sections.mcp.tooltip": "Servidores del Protocolo de Contexto de Modelo que extienden las capacidades del agente con herramientas externas.", "instanceShell.rightPanel.sections.lsp": "Servidores LSP", + "instanceShell.rightPanel.sections.lsp.tooltip": "Servidores del Protocolo de Servidor de Lenguaje que proporcionan inteligencia de codigo y diagnosticos.", "instanceShell.rightPanel.sections.plugins": "Plugins", + "instanceShell.rightPanel.sections.plugins.tooltip": "Plugins que personalizan el comportamiento de la UI y el servidor, anadiendo funciones mas alla de MCP y LSP.", "instanceShell.sessionChanges.noSessionSelected": "Selecciona una sesion para ver los cambios.", "instanceShell.sessionChanges.loading": "Obteniendo cambios de la sesion...", diff --git a/packages/ui/src/lib/i18n/messages/fr/instance.ts b/packages/ui/src/lib/i18n/messages/fr/instance.ts index 8d752464..42c56026 100644 --- a/packages/ui/src/lib/i18n/messages/fr/instance.ts +++ b/packages/ui/src/lib/i18n/messages/fr/instance.ts @@ -94,11 +94,17 @@ export const instanceMessages = { "instanceShell.rightPanel.tabs.status": "Statut", "instanceShell.rightPanel.tabs.ariaLabel": "Onglets du panneau droit", "instanceShell.rightPanel.sections.sessionChanges": "Changements de session", + "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Fichiers modifiés dans la session actuelle. Affiche les ajouts et suppressions pour chaque fichier.", "instanceShell.rightPanel.sections.plan": "Plan", + "instanceShell.rightPanel.sections.plan.tooltip": "Feuille de route de l'agent pour cette session. Suit les tâches et leur statut d'achèvement.", "instanceShell.rightPanel.sections.backgroundProcesses": "Shells en arrière-plan", + "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Processus longs démarrés par l'agent. Vous pouvez surveiller leur sortie, les arrêter ou les terminer.", "instanceShell.rightPanel.sections.mcp": "Serveurs MCP", + "instanceShell.rightPanel.sections.mcp.tooltip": "Serveurs du protocole Model Context Protocol qui étendent les capacités de l'agent avec des outils externes.", "instanceShell.rightPanel.sections.lsp": "Serveurs LSP", + "instanceShell.rightPanel.sections.lsp.tooltip": "Serveurs du protocole Language Server Protocol fournissant l'intelligence de code et les diagnostics.", "instanceShell.rightPanel.sections.plugins": "Plugins", + "instanceShell.rightPanel.sections.plugins.tooltip": "Plugins qui personnalisent le comportement de l'UI et du serveur, ajoutant des fonctionnalités au-delà de MCP et LSP.", "instanceShell.sessionChanges.noSessionSelected": "Sélectionnez une session pour voir les changements.", "instanceShell.sessionChanges.loading": "Récupération des changements...", diff --git a/packages/ui/src/lib/i18n/messages/ja/instance.ts b/packages/ui/src/lib/i18n/messages/ja/instance.ts index 9b24edc8..72005c33 100644 --- a/packages/ui/src/lib/i18n/messages/ja/instance.ts +++ b/packages/ui/src/lib/i18n/messages/ja/instance.ts @@ -94,11 +94,17 @@ export const instanceMessages = { "instanceShell.rightPanel.tabs.status": "ステータス", "instanceShell.rightPanel.tabs.ariaLabel": "右パネルのタブ", "instanceShell.rightPanel.sections.sessionChanges": "セッション変更", + "instanceShell.rightPanel.sections.sessionChanges.tooltip": "現在のセッションで変更されたファイル。各ファイルの追加と削除を表示します。", "instanceShell.rightPanel.sections.plan": "計画", + "instanceShell.rightPanel.sections.plan.tooltip": "このセッションにおけるエージェントのロードマップ。タスク及其の完了状態を追跡します。", "instanceShell.rightPanel.sections.backgroundProcesses": "バックグラウンドシェル", + "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "エージェントが開始した長時間実行プロセス。の出力を監視し、停止または終了できます。", "instanceShell.rightPanel.sections.mcp": "MCP サーバー", + "instanceShell.rightPanel.sections.mcp.tooltip": "Model Context Protocolサーバーで、外部ツールによりエージェントの機能を拡張します。", "instanceShell.rightPanel.sections.lsp": "LSP サーバー", + "instanceShell.rightPanel.sections.lsp.tooltip": "Language Server Protocolサーバーがコードインテリジェンス、診断、言語固有の機能を提供します。", "instanceShell.rightPanel.sections.plugins": "プラグイン", + "instanceShell.rightPanel.sections.plugins.tooltip": "UIとサーバの動作をカスタマイズし、MCPとLSPを超える機能を追加するプラグイン。", "instanceShell.sessionChanges.noSessionSelected": "変更を表示するにはセッションを選択してください。", "instanceShell.sessionChanges.loading": "変更を取得中...", diff --git a/packages/ui/src/lib/i18n/messages/ru/instance.ts b/packages/ui/src/lib/i18n/messages/ru/instance.ts index 90ca86f4..2471d370 100644 --- a/packages/ui/src/lib/i18n/messages/ru/instance.ts +++ b/packages/ui/src/lib/i18n/messages/ru/instance.ts @@ -94,11 +94,17 @@ export const instanceMessages = { "instanceShell.rightPanel.tabs.status": "Статус", "instanceShell.rightPanel.tabs.ariaLabel": "Вкладки правой панели", "instanceShell.rightPanel.sections.sessionChanges": "Изменения сессии", + "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Файлы, измененные в текущей сессии. Показывает добавления и удаления для каждого файла.", "instanceShell.rightPanel.sections.plan": "План", + "instanceShell.rightPanel.sections.plan.tooltip": "Дорожная карта агента для этой сессии. Отслеживает задачи и их статус выполнения.", "instanceShell.rightPanel.sections.backgroundProcesses": "Фоновые Shell", + "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Долгоработающие процессы, запущенные агентом. Вы можете следить за их выводом, останавливать или завершать их.", "instanceShell.rightPanel.sections.mcp": "MCP-серверы", + "instanceShell.rightPanel.sections.mcp.tooltip": "Серверы протокола Model Context Protocol, расширяющие возможности агента внешними инструментами.", "instanceShell.rightPanel.sections.lsp": "LSP-серверы", + "instanceShell.rightPanel.sections.lsp.tooltip": "Серверы протокола Language Server Protocol, обеспечивающие интеллектуальную поддержку кода и диагностику.", "instanceShell.rightPanel.sections.plugins": "Плагины", + "instanceShell.rightPanel.sections.plugins.tooltip": "Плагины, настраивающие поведение UI и сервера, добавляющие функции поверх MCP и LSP.", "instanceShell.sessionChanges.noSessionSelected": "Выберите сессию, чтобы просмотреть изменения.", "instanceShell.sessionChanges.loading": "Загрузка изменений...", diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts index 9143fb57..892f55e9 100644 --- a/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts +++ b/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts @@ -94,11 +94,17 @@ export const instanceMessages = { "instanceShell.rightPanel.tabs.status": "状态", "instanceShell.rightPanel.tabs.ariaLabel": "右侧面板标签页", "instanceShell.rightPanel.sections.sessionChanges": "会话更改", + "instanceShell.rightPanel.sections.sessionChanges.tooltip": "当前会话中修改的文件。显示每个文件的添加和删除。", "instanceShell.rightPanel.sections.plan": "计划", + "instanceShell.rightPanel.sections.plan.tooltip": "代理的路线图。跟踪任务、子任务及其完成状态。", "instanceShell.rightPanel.sections.backgroundProcesses": "后台 Shell", + "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "代理启动的后台进程。您可以监控其输出、停止或终止它们。", "instanceShell.rightPanel.sections.mcp": "MCP 服务器", + "instanceShell.rightPanel.sections.mcp.tooltip": "模型上下文协议服务器，使用外部工具和服务扩展代理能力。", "instanceShell.rightPanel.sections.lsp": "LSP 服务器", + "instanceShell.rightPanel.sections.lsp.tooltip": "语言服务器协议服务器，提供代码智能、诊断和语言特定功能。", "instanceShell.rightPanel.sections.plugins": "插件", + "instanceShell.rightPanel.sections.plugins.tooltip": "自定义UI和服务器行为的插件，添加超出MCP和LSP的功能。", "instanceShell.sessionChanges.noSessionSelected": "选择会话以查看更改。", "instanceShell.sessionChanges.loading": "正在获取会话更改...", diff --git a/packages/ui/src/styles/panels/right-panel.css b/packages/ui/src/styles/panels/right-panel.css index edf4f565..6b9d2fcd 100644 --- a/packages/ui/src/styles/panels/right-panel.css +++ b/packages/ui/src/styles/panels/right-panel.css @@ -412,7 +412,7 @@ } .right-panel-accordion-trigger { - @apply w-full flex items-center justify-between gap-3 px-3 py-2.5 text-[11px] font-semibold uppercase tracking-wide transition-colors duration-150; + @apply w-full flex items-center justify-between px-3 py-2.5 text-[11px] font-semibold uppercase tracking-wide transition-colors duration-150; color: var(--text-secondary); background-color: transparent; } @@ -422,6 +422,11 @@ color: var(--text-primary); } +.section-left { + @apply flex items-center; + flex-shrink: 0; +} + .right-panel-accordion-chevron { @apply h-4 w-4 transition-transform duration-200; color: var(--text-muted); @@ -441,6 +446,51 @@ min-height: 0; } +/* Section info tooltip */ +.section-info-trigger { + @apply inline-flex items-center justify-center p-0.5 rounded transition-all duration-150; + color: var(--text-muted); + flex-shrink: 0; +} + +.section-info-trigger:hover { + color: var(--text-primary); + background-color: var(--surface-hover); +} + +.section-label { + margin-left: 2px; +} + +.section-info-icon { + @apply w-3.5 h-3.5; +} + +.section-info-tooltip { + @apply max-w-xs px-3 py-2 text-xs rounded-lg border shadow-lg; + background-color: var(--surface-base); + border-color: var(--border-base); + color: var(--text-primary); + animation: tooltipShow 150ms ease-out; + transform-origin: var(--kb-tooltip-content-transform-origin); + z-index: 9999; +} + +.section-info-tooltip[data-expanded] { + animation: tooltipShow 150ms ease-out; +} + +@keyframes tooltipShow { + from { + opacity: 0; + transform: scale(0.95); + } + to { + opacity: 1; + transform: scale(1); + } +} + /* Background process cards in status panel */ .status-process-card { @apply rounded-lg border flex flex-col gap-2 p-3 transition-all duration-150;