From bf7f53c55312ce2c133f5538ce84ebd0afafe1c0 Mon Sep 17 00:00:00 2001 From: Juan Denis Date: Sat, 7 Nov 2026 22:26:39 -0500 Subject: [PATCH] feat(ui): short App Map, Servers and Terminal hints with InfoTips Swap the long helper sentences on the App Map view line, the empty Servers list and the Terminal no-server pane for a short line plus an (i) InfoTip holding the full text. The App Map line stays one row on phone. --- frontend/src/i18n/locales/en.json | 5 +++++ frontend/src/pages/AppMap.jsx | 8 +++++++- frontend/src/pages/Servers.jsx | 2 +- frontend/src/pages/Terminal.jsx | 3 ++- frontend/src/styles/pages/_app-map.scss | 15 +++++++++++++++ 5 files changed, 30 insertions(+), 3 deletions(-) diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json index e1db4217..e70d9c64 100644 --- a/frontend/src/i18n/locales/en.json +++ b/frontend/src/i18n/locales/en.json @@ -462,9 +462,12 @@ "howThePanelConnectsToServers": "How the panel connects to servers, agents and services in production.", "requestStack": "Request stack", "routesApis": "Routes and APIs", + "routesShort": "Pages and the APIs they call.", "runtimeTopology": "Runtime topology", "showLegend": "Show legend", "sidebarNavigationPagesBackendApiBlueprints": "Sidebar navigation → pages → backend API blueprints they call.", + "stackShort": "Browser through to the database.", + "topologyShort": "How the panel reaches servers.", "views": "Views" }, "appWafPanel": { @@ -5809,6 +5812,7 @@ "pairAgentAction": "Pair agent", "pairAnAgentAndTheMachine": "Pair an agent and the server shows up here with its CPU, memory and disk alongside every other server you run.", "pairCode": "Pair code", + "pairShort": "Pair an agent to add it.", "pairing": "Pairing…", "passphrase": "Passphrase *", "pasteThisIntoTheAgentOr": "Paste this into the agent, or run the installer.", @@ -7556,6 +7560,7 @@ "norTheWindowsEventLogAre": ", nor the Windows Event Log are available.", "notice": "Notice", "openAShellOn": "Open a shell on {{name}}", + "pairShort": "Pair a server with shell access.", "phpFpm": "PHP-FPM", "pickServerToOpenShell": "Pick a server on the left to open a shell.", "pid": "PID {{pid}} · {{value}}", diff --git a/frontend/src/pages/AppMap.jsx b/frontend/src/pages/AppMap.jsx index 7e5892d1..00753d0a 100644 --- a/frontend/src/pages/AppMap.jsx +++ b/frontend/src/pages/AppMap.jsx @@ -10,6 +10,7 @@ import '@xyflow/react/dist/style.css'; import { Map as MapIcon, Layers, Compass, Network, Info, } from 'lucide-react'; +import InfoTip from '@/components/InfoTip'; import { Tip } from '@/components/ui/tooltip'; import PageLayout from '../layouts/PageLayout'; import useTabParam from '../hooks/useTabParam'; @@ -289,6 +290,11 @@ export default function AppMap() { routes: t('app.appMap.routesApis', 'Routes and APIs'), topology: t('app.appMap.runtimeTopology', 'Runtime topology'), }; + const viewShort = { + stack: t('app.appMap.stackShort', 'Browser through to the database.'), + routes: t('app.appMap.routesShort', 'Pages and the APIs they call.'), + topology: t('app.appMap.topologyShort', 'How the panel reaches servers.'), + }; const viewDescriptions = { stack: t('app.appMap.howARequestFlowsFromThe', 'How a request flows from the browser through the frontend, backend, services and database.'), routes: t('app.appMap.sidebarNavigationPagesBackendApiBlueprints', 'Sidebar navigation → pages → backend API blueprints they call.'), @@ -325,7 +331,7 @@ export default function AppMap() { )} > -

{viewDescriptions[view.id]}

+

{viewShort[view.id]}{viewDescriptions[view.id]}

{showLegend && (
diff --git a/frontend/src/pages/Servers.jsx b/frontend/src/pages/Servers.jsx index b6ea9567..6c6d458d 100644 --- a/frontend/src/pages/Servers.jsx +++ b/frontend/src/pages/Servers.jsx @@ -464,7 +464,7 @@ const Servers = () => { icon={ServerLucideIcon} title={servers.length === 0 ? t('app.servers.noServersYet', 'No servers yet') : t('app.servers.noServersMatchTheseFilters', 'No servers match these filters')} description={servers.length === 0 - ? t('app.servers.pairAnAgentAndTheMachine', 'Pair an agent and the server shows up here with its CPU, memory and disk alongside every other server you run.') + ? <>{t('app.servers.pairShort', 'Pair an agent to add it.')} {t('app.servers.pairAnAgentAndTheMachine', 'Pair an agent and the server shows up here with its CPU, memory and disk alongside every other server you run.')} : t('app.servers.adjustTheSearchOrClearThe', 'Adjust the search or clear the column filters to see your servers.')} action={servers.length === 0 ? (
)} diff --git a/frontend/src/styles/pages/_app-map.scss b/frontend/src/styles/pages/_app-map.scss index 0ba5e0fc..2e682673 100644 --- a/frontend/src/styles/pages/_app-map.scss +++ b/frontend/src/styles/pages/_app-map.scss @@ -12,6 +12,21 @@ margin: 0 0 $space-3; font-size: $text-sm; color: $text-secondary; + display: flex; + align-items: center; + gap: 0.25rem; + min-width: 0; + + &-text { + min-width: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + > :not(.app-map__viewmeta-text) { + flex-shrink: 0; + } } &__legend {