Fixed tab naming to correspond to the web client. (#1780)

This commit is contained in:
Bob Dickinson 2026-07-25 17:11:52 -07:00 • committed by GitHub
commit d009fcca09
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 134 additions and 51 deletions

View file

@ -1289,7 +1289,7 @@ function App({
exit();
}
// Tab switching with accelerator keys (first character of tab name)
// Tab switching with accelerator keys (letter from the tab label)
const showAuthTab =
!!selectedServer &&
!!selectedServerConfig &&

View file

@ -109,11 +109,11 @@ export function HistoryTab({
bold
backgroundColor={focusedPane === "messages" ? "yellow" : undefined}
>
Messages ({messages.length})
Protocol ({messages.length})
</Text>
</Box>
{/* Messages list */}
{/* Protocol message list */}
{messages.length === 0 ? (
<Box paddingY={1}>
<Text dimColor>No messages</Text>

View file

@ -56,7 +56,7 @@ export function NotificationsTab({
<Box width={width} height={height} flexDirection="column" paddingX={1}>
<Box paddingY={1} flexShrink={0}>
<Text bold backgroundColor={focused ? "yellow" : undefined}>
Logging ({stderrLogs.length})
Console ({stderrLogs.length})
</Text>
</Box>
{stderrLogs.length === 0 ? (

View file

@ -117,7 +117,7 @@ export function RequestsTab({
bold
backgroundColor={focusedPane === "requests" ? "yellow" : undefined}
>
Requests ({requests.length})
Network ({requests.length})
</Text>
</Box>

View file

@ -2,6 +2,25 @@ import React from "react";
import { Box, Text } from "ink";
import { type TabType, tabs } from "./tabsConfig.js";
/**
* Split a tab label so the accelerator letter can be underlined wherever it
* appears (not only the first character — e.g. Pro**m**pts, C**o**nsole).
*/
export function splitLabelAtAccelerator(
label: string,
accelerator: string,
): { before: string; accel: string; after: string } {
const idx = label.toLowerCase().indexOf(accelerator.toLowerCase());
if (idx < 0) {
return { before: "", accel: label.slice(0, 1), after: label.slice(1) };
}
return {
before: label.slice(0, idx),
accel: label.slice(idx, idx + 1),
after: label.slice(idx + 1),
};
}
interface TabsProps {
activeTab: TabType;
onTabChange: (tab: TabType) => void;
@ -60,8 +79,10 @@ export function Tabs({
const isActive = activeTab === tab.id;
const count = counts[tab.id];
const countText = count !== undefined ? ` (${count})` : "";
const firstChar = tab.label[0];
const restOfLabel = tab.label.slice(1);
const { before, accel, after } = splitLabelAtAccelerator(
tab.label,
tab.accelerator,
);
return (
<Box key={tab.id} flexShrink={0}>
@ -73,8 +94,9 @@ export function Tabs({
backgroundColor={isActive && focused ? "yellow" : undefined}
>
{isActive ? "▶ " : " "}
<Text underline>{firstChar}</Text>
{restOfLabel}
{before}
<Text underline>{accel}</Text>
{after}
{countText}
</Text>
</Box>

View file

@ -8,13 +8,23 @@ export type TabType =
| "requests"
| "logging";
/**
* Tab bar labels + single-letter accelerators.
*
* Accelerators must be unique and appear in the label. Prefer the first letter;
* when that conflicts (Protocol vs Prompts both want `p`, Console vs Connect's
* global `c`), pick the earliest remaining letter in the word.
*
* Connect (`c`) / Disconnect (`d`) are global actions, not tab accelerators —
* Console therefore uses `o` (C**o**nsole).
*/
export const tabs: { id: TabType; label: string; accelerator: string }[] = [
{ id: "info", label: "Info", accelerator: "i" },
{ id: "auth", label: "Auth", accelerator: "a" },
{ id: "resources", label: "Resources", accelerator: "r" },
{ id: "prompts", label: "Prompts", accelerator: "p" },
{ id: "prompts", label: "Prompts", accelerator: "m" },
{ id: "tools", label: "Tools", accelerator: "t" },
{ id: "messages", label: "Messages", accelerator: "m" },
{ id: "requests", label: "HTTP Requests", accelerator: "h" },
{ id: "logging", label: "Logging", accelerator: "l" },
{ id: "messages", label: "Protocol", accelerator: "p" },
{ id: "requests", label: "Network", accelerator: "n" },
{ id: "logging", label: "Console", accelerator: "o" },
];