fix: clean up tab titles and sidebar session display
- Remove useless document.title from handleOpen (it only changed the
caller page's title, not the new tab)
- Terminal tab title: simpler format without extra '— Headquarter' suffix
- Single session: '{name} — Terminal'
- Multiple sessions: '{name} · {session_name} — Terminal'
- Sidebar live sessions: show tool type in small muted text next to
display_name so sessions aren't indistinguishable when display_name
is just the workspace name
Quality gates: tsc --noEmit pass, npm run build pass, 82/82 tests pass
This commit is contained in:
@@ -63,7 +63,10 @@ const SessionItem = ({ session }: { session: Session }) => {
|
|||||||
>
|
>
|
||||||
<span className={`session-status ${isRunning ? "running" : ""}`} />
|
<span className={`session-status ${isRunning ? "running" : ""}`} />
|
||||||
<Icon name={session.tool_icon as IconName} size="sm" />
|
<Icon name={session.tool_icon as IconName} size="sm" />
|
||||||
<span className="session-name">{session.display_name}</span>
|
<span className="session-name">
|
||||||
|
{session.display_name}
|
||||||
|
<span className="session-tool">{session.tool_type_name}</span>
|
||||||
|
</span>
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -54,7 +54,6 @@ export function useInstanceActions(
|
|||||||
url = `/projects/${session.project_id}`;
|
url = `/projects/${session.project_id}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
document.title = `${session.display_name} — Headquarter`;
|
|
||||||
const w = window.open(url, `session-${session.id}`);
|
const w = window.open(url, `session-${session.id}`);
|
||||||
tabRefs.current.set(key, w);
|
tabRefs.current.set(key, w);
|
||||||
}, []);
|
}, []);
|
||||||
|
|||||||
@@ -9,7 +9,6 @@ import { useTerminalSessions } from "./use-terminal-sessions";
|
|||||||
import type { TerminalSession } from "../api/terminal";
|
import type { TerminalSession } from "../api/terminal";
|
||||||
import type { ModifierKey } from "./use-special-keys";
|
import type { ModifierKey } from "./use-special-keys";
|
||||||
|
|
||||||
|
|
||||||
const SESSIONS_TO_INFO = (sessions: TerminalSession[]): TerminalSessionInfo[] =>
|
const SESSIONS_TO_INFO = (sessions: TerminalSession[]): TerminalSessionInfo[] =>
|
||||||
sessions.map((s) => ({
|
sessions.map((s) => ({
|
||||||
id: s.id,
|
id: s.id,
|
||||||
@@ -92,13 +91,20 @@ export const useTerminalPage = () => {
|
|||||||
// Update document title based on active terminal session
|
// Update document title based on active terminal session
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!instanceId) {
|
if (!instanceId) {
|
||||||
document.title = "Terminal — Headquarter";
|
document.title = "Terminal";
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const active = sessions.find((s) => s.id === activeSessionId);
|
const active = sessions.find((s) => s.id === activeSessionId);
|
||||||
const sessionName = active?.name ?? "Session";
|
const baseName =
|
||||||
const baseName = instanceDisplayName ?? `Instance ${instanceId.slice(0, 8)}`;
|
instanceDisplayName ?? `Instance ${instanceId.slice(0, 8)}`;
|
||||||
document.title = `${baseName} ${sessionName} — Terminal — Headquarter`;
|
// Single session: just show "{name} — Terminal"
|
||||||
|
// Multiple sessions: "{name} · {session_name} — Terminal"
|
||||||
|
if (sessions.length <= 1) {
|
||||||
|
document.title = `${baseName} — Terminal`;
|
||||||
|
} else {
|
||||||
|
const sessionName = active?.name ?? "Session";
|
||||||
|
document.title = `${baseName} · ${sessionName} — Terminal`;
|
||||||
|
}
|
||||||
return () => {
|
return () => {
|
||||||
document.title = "Headquarter";
|
document.title = "Headquarter";
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -298,6 +298,14 @@ a.nav-item,
|
|||||||
max-width: 140px;
|
max-width: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.session-tool {
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-left: 4px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-divider {
|
.nav-divider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: var(--border);
|
background: var(--border);
|
||||||
|
|||||||
Reference in New Issue
Block a user