Fixed tab naming to correspond to the web client. (#1780)
This commit is contained in:
parent
07d6316fba
commit
d009fcca09
6 changed files with 134 additions and 51 deletions
|
|
@ -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 &&
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 ? (
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ export function RequestsTab({
|
|||
bold
|
||||
backgroundColor={focusedPane === "requests" ? "yellow" : undefined}
|
||||
>
|
||||
Requests ({requests.length})
|
||||
Network ({requests.length})
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" },
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in a new issue