feat(web): show the Inspector version in the lower-right corner (#1639)

Display the single-source version (root package.json) in the web UI's
lower-right corner, in grey — matching the CLI and TUI. The browser can't read
the filesystem, so the version flows backend → browser via GET /api/config:

- Add `version?: string` to InitialConfigPayload; the web backend
  (webServerConfigToInitialPayload) reads it once via the shared
  readInspectorVersion() and tags it onto the payload.
- Add a `useInspectorVersion` hook mirroring useSandboxUrl/useServerListWritable.
- Add a presentational `VersionBadge` element rendered fixed lower-right, grey,
  non-interactive; styling lives in a `versionBadge` Text theme variant (no
  inline styles, --inspector-* tokens).
- Wire it into App.tsx.

Verified live: /api/config serves `version: "2.0.0"` and the badge renders
`v2.0.0` fixed at the lower-right in grey. Tests: useInspectorVersion (full
branch coverage), VersionBadge (unit + Storybook), web-server-config payload.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BrihGWcrM9JGRyu41nzZYw
This commit is contained in:
cliffhall 2026-07-10 19:07:31 -04:00
commit 650e5bd020

View file

@ -98,8 +98,10 @@ import { useFetchRequestLog } from "@inspector/core/react/useFetchRequestLog.js"
import { useStderrLog } from "@inspector/core/react/useStderrLog.js";
import { useSandboxUrl } from "@inspector/core/react/useSandboxUrl.js";
import { useServerListWritable } from "@inspector/core/react/useServerListWritable.js";
import { useInspectorVersion } from "@inspector/core/react/useInspectorVersion.js";
import { usePendingClientRequests } from "@inspector/core/react/usePendingClientRequests.js";
import { InspectorView } from "./components/views/InspectorView/InspectorView";
import { VersionBadge } from "./components/elements/VersionBadge/VersionBadge";
import type {
ToolCallState,
ToolsUiState,
@ -669,6 +671,12 @@ function App() {
baseUrl: configBaseUrl,
authToken: getAuthToken(),
});
// The Inspector version (root package.json), shown in the lower-right corner.
// The browser can't read it off disk, so the backend sends it via /api/config.
const { version: inspectorVersion } = useInspectorVersion({
baseUrl: configBaseUrl,
authToken: getAuthToken(),
});
const [clientConfig, setClientConfig] = useState<ClientConfig>({});
useEffect(() => {
@ -3816,6 +3824,7 @@ function App() {
onRefreshApps={onRefreshTools}
/>
</Box>
<VersionBadge version={inspectorVersion} />
<ServerConfigModal
opened={configModal !== null}
mode={configModal?.mode ?? "add"}