Merge pull request #219 from jhd3197/feat/ux-appmap-servers-terminal-copy

feat(ui): short App Map, Servers and Terminal hints with InfoTips

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}}",

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() {
                 </Tip>
             )}
         >
-            <p className="app-map__viewmeta">{viewDescriptions[view.id]}</p>
+            <p className="app-map__viewmeta"><span className="app-map__viewmeta-text">{viewShort[view.id]}</span><InfoTip>{viewDescriptions[view.id]}</InfoTip></p>
 
             {showLegend && (
                 <div className="app-map__legend">

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.')} <InfoTip>{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.')}</InfoTip></>
                         : t('app.servers.adjustTheSearchOrClearThe', 'Adjust the search or clear the column filters to see your servers.')}
                     action={servers.length === 0 ? (
                         <Button onClick={() => setShowAddModal(true)}>

frontend/src/pages/Terminal.jsx

@@ -16,6 +16,7 @@ import ProcessTable from '../components/ProcessTable';
 import { procUser } from '../components/processData';
 import SystemdServicesTab from '../components/serverdetail/ServicesTab';
 import { useTableSort } from '@/hooks/useTableSort';
+import InfoTip from '@/components/InfoTip';
 import PageLayout from '../layouts/PageLayout';
 import { downloadBlob } from '@/utils/downloadBlob';
 import { usePolling } from '@/hooks/usePolling';
@@ -151,7 +152,7 @@ const TerminalShellTab = () => {
                         <p>
                             {anyOnline
                                 ? t('app.terminal.pickServerToOpenShell', 'Pick a server on the left to open a shell.')
-                                : t('app.terminal.shellsRunOverAgent', 'Interactive shells run over the ServerKit agent. Pair a server (Servers → Add server) with shell access and it shows up here.')}
+                                : <>{t('app.terminal.pairShort', 'Pair a server with shell access.')} <InfoTip>{t('app.terminal.shellsRunOverAgent', 'Interactive shells run over the ServerKit agent. Pair a server (Servers → Add server) with shell access and it shows up here.')}</InfoTip></>}
                         </p>
                     </div>
                 )}

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 {