From a3548035a8b6d25df9a11daab37a21daee1ef73f Mon Sep 17 00:00:00 2001 From: qer Date: Thu, 9 Jul 2026 19:51:53 +0800 Subject: [PATCH] feat(tui): add Kimi WebBridge install entry to /plugins panel (#1494) * feat(tui): add Kimi WebBridge install entry to /plugins panel Surface a hardcoded Kimi WebBridge entry at the top of the Official tab in the /plugins panel. Selecting it opens the WebBridge install page in the user's browser instead of going through the plugin install flow, since WebBridge is a browser extension plus local daemon rather than an installable plugin package. * fix(tui): restrict WebBridge open-url shortcut to the pinned row Match the hardcoded pinned WebBridge entry by object reference instead of by id. A curated or custom marketplace entry on the Third-party tab can legitimately reuse the kimi-webbridge id; routing by id hijacked Enter on those rows and opened the WebBridge page instead of installing. The Official tab still dedupes a same-id official catalog entry so the pinned row is not duplicated. * fix(tui): label WebBridge plugins row as "open in browser" The previous "webpage" status did not make it clear that selecting this row opens an external page rather than installing in-app. "open in browser" states the action directly and contrasts with the install label on regular plugin rows. * test(tui): navigate past pinned WebBridge row in marketplace install tests Two message-flow tests pressed Enter on the Official tab assuming index 0 was the Kimi Datasource entry. The hardcoded Kimi WebBridge row now leads that tab, so move down one row before installing. --- .changeset/tui-web-bridge-plugin-entry.md | 5 ++ apps/kimi-code/src/tui/commands/plugins.ts | 7 ++ .../components/dialogs/plugins-selector.ts | 55 +++++++++++-- .../dialogs/plugins-selector.test.ts | 81 +++++++++++++++++++ .../test/tui/kimi-tui-message-flow.test.ts | 6 ++ 5 files changed, 149 insertions(+), 5 deletions(-) create mode 100644 .changeset/tui-web-bridge-plugin-entry.md diff --git a/.changeset/tui-web-bridge-plugin-entry.md b/.changeset/tui-web-bridge-plugin-entry.md new file mode 100644 index 000000000..30708d971 --- /dev/null +++ b/.changeset/tui-web-bridge-plugin-entry.md @@ -0,0 +1,5 @@ +--- +"@moonshot-ai/kimi-code": patch +--- + +Add a Kimi WebBridge entry to the Official tab of the /plugins panel that opens the WebBridge install page in your browser. diff --git a/apps/kimi-code/src/tui/commands/plugins.ts b/apps/kimi-code/src/tui/commands/plugins.ts index ff90e4914..b69f0724a 100644 --- a/apps/kimi-code/src/tui/commands/plugins.ts +++ b/apps/kimi-code/src/tui/commands/plugins.ts @@ -22,6 +22,7 @@ import { UsagePanelComponent } from '../components/messages/usage-panel'; import { formatErrorMessage } from '../utils/event-payload'; import { formatPluginSourceLabel, isOfficialPluginSource } from '../utils/plugin-source-label'; import { loadPluginMarketplace } from '#/utils/plugin-marketplace'; +import { openUrl } from '#/utils/open-url'; import type { SlashCommandHost } from './dispatch'; interface ShowPluginsPickerOptions { @@ -411,6 +412,12 @@ async function handlePluginsPanelSelection( isOfficialPluginSource(selection.source), ); return; + case 'open-url': + host.restoreEditor(); + openUrl(selection.url); + host.showStatus(`Opening the ${selection.label} page in your browser…`, 'success'); + host.showStatus(`If it did not open, visit ${selection.url}`); + return; } } diff --git a/apps/kimi-code/src/tui/components/dialogs/plugins-selector.ts b/apps/kimi-code/src/tui/components/dialogs/plugins-selector.ts index c5769def6..d7066c77c 100644 --- a/apps/kimi-code/src/tui/components/dialogs/plugins-selector.ts +++ b/apps/kimi-code/src/tui/components/dialogs/plugins-selector.ts @@ -28,6 +28,27 @@ const INSTALL_TRUST_EXIT = 'exit'; const INSTALL_TRUST_TRUST = 'trust'; const ELLIPSIS = '…'; +// Hardcoded Web Bridge promotion: a built-in entry that always leads the +// Official tab, even when the marketplace catalog is unavailable. Selecting it +// opens the install page in the browser rather than installing from a source, +// because Web Bridge is a browser extension + daemon, not a plugin package. +const WEB_BRIDGE_URL = 'https://www.kimi.com/features/webbridge'; +const WEB_BRIDGE_ENTRY: PluginMarketplaceEntry = { + id: 'kimi-webbridge', + displayName: 'Kimi WebBridge', + source: WEB_BRIDGE_URL, + tier: 'official', + homepage: WEB_BRIDGE_URL, + description: 'Control your real browser from Kimi Code — navigate, click, type, and screenshot', +}; + +// Only the hardcoded pinned row should open the WebBridge install page. Match +// by reference (not id) so a catalog entry on another tab that happens to +// reuse the same id still installs normally instead of being hijacked. +function isPinnedWebBridgeEntry(entry: PluginMarketplaceEntry): boolean { + return entry === WEB_BRIDGE_ENTRY; +} + interface PluginsOverviewItem { readonly value: string; readonly kind: 'plugin' | 'action'; @@ -304,7 +325,8 @@ export type PluginsPanelSelection = | { readonly kind: 'details'; readonly id: string } | { readonly kind: 'reload' } | { readonly kind: 'install'; readonly entry: PluginMarketplaceEntry } - | { readonly kind: 'install-source'; readonly source: string }; + | { readonly kind: 'install-source'; readonly source: string } + | { readonly kind: 'open-url'; readonly url: string; readonly label: string }; export interface PluginsPanelOptions { readonly installed: readonly PluginSummary[]; @@ -402,7 +424,19 @@ export class PluginsPanelComponent extends Container implements Focusable { } private get officialEntries(): readonly PluginMarketplaceEntry[] { - return this.marketplaceEntries.filter((entry) => entry.tier === 'official'); + // The hardcoded Web Bridge entry always leads the Official tab, even when + // the catalog is loading or unreachable. Dedupe by id so a catalog that + // also lists it does not render a second row. + return [WEB_BRIDGE_ENTRY, ...this.officialCatalogEntries]; + } + + private get officialCatalogEntries(): readonly PluginMarketplaceEntry[] { + // Dedupe by id (not reference): if the official catalog also lists + // kimi-webbridge, the pinned row already represents it, so suppress the + // catalog copy to avoid a duplicate row on the Official tab. + return this.marketplaceEntries.filter( + (entry) => entry.tier === 'official' && entry.id !== WEB_BRIDGE_ENTRY.id, + ); } private get thirdPartyEntries(): readonly PluginMarketplaceEntry[] { @@ -516,6 +550,10 @@ export class PluginsPanelComponent extends Container implements Focusable { if (matchesKey(data, Key.enter)) { const entry = entries[this.selectedIndex]; if (entry === undefined) return; + if (isPinnedWebBridgeEntry(entry)) { + this.opts.onSelect({ kind: 'open-url', url: WEB_BRIDGE_URL, label: entry.displayName }); + return; + } this.opts.onSelect({ kind: 'install', entry }); } } @@ -622,6 +660,7 @@ export class PluginsPanelComponent extends Container implements Focusable { lines: string[], width: number, entries: readonly PluginMarketplaceEntry[], + indexOffset = 0, ): void { const colors = currentTheme.palette; if (this.market.status === 'loading' || this.market.status === 'idle') { @@ -637,7 +676,7 @@ export class PluginsPanelComponent extends Container implements Focusable { lines.push(chalk.hex(colors.textMuted)(' No plugins found.')); } else { for (let i = 0; i < entries.length; i++) { - lines.push(...this.renderMarketplaceRow(entries[i]!, i, width)); + lines.push(...this.renderMarketplaceRow(entries[i]!, i + indexOffset, width)); } } const installedCount = entries.filter((e) => this.opts.installedIds.has(e.id)).length; @@ -649,7 +688,11 @@ export class PluginsPanelComponent extends Container implements Focusable { } private renderOfficial(lines: string[], width: number): void { - this.renderMarketplaceTab(lines, width, this.officialEntries); + // Web Bridge is pinned above the catalog and stays visible while the + // catalog loads or errors, since it's built into the TUI rather than + // fetched. Catalog rows shift down by one index to match. + lines.push(...this.renderMarketplaceRow(WEB_BRIDGE_ENTRY, 0, width)); + this.renderMarketplaceTab(lines, width, this.officialCatalogEntries, 1); } private renderThirdParty(lines: string[], width: number): void { @@ -662,7 +705,9 @@ export class PluginsPanelComponent extends Container implements Focusable { const pointer = selected ? SELECT_POINTER : ' '; const labelStyle = selected ? chalk.hex(colors.primary).bold : chalk.hex(colors.text); const prefix = chalk.hex(selected ? colors.primary : colors.textDim)(` ${pointer} `); - const status = marketplaceEntryStatus(entry, this.installedVersions); + const status = isPinnedWebBridgeEntry(entry) + ? 'open in browser' + : marketplaceEntryStatus(entry, this.installedVersions); const line = prefix + labelStyle(entry.displayName) + ' ' + marketplaceStatusStyle(status, colors)(status); const descWidth = Math.max(1, width - 4); diff --git a/apps/kimi-code/test/tui/components/dialogs/plugins-selector.test.ts b/apps/kimi-code/test/tui/components/dialogs/plugins-selector.test.ts index 05a9b3bef..5bd80da5b 100644 --- a/apps/kimi-code/test/tui/components/dialogs/plugins-selector.test.ts +++ b/apps/kimi-code/test/tui/components/dialogs/plugins-selector.test.ts @@ -289,6 +289,87 @@ describe('plugins selector dialogs', () => { expect(out).toContain('0 installed · 1 available'); }); + it('renders the hardcoded Web Bridge entry on the Official tab while loading', () => { + const { panel } = makePanel({ initialTab: 'official' }); + // The catalog is still loading, but the built-in Web Bridge entry is shown + // immediately because it is baked into the TUI, not fetched. + const out = strip(renderRaw(panel)); + expect(out).toContain('Kimi WebBridge open in browser'); + expect(out).toContain('Loading marketplace'); + }); + + it('keeps the Web Bridge entry visible when the Official catalog errors', () => { + const { panel } = makePanel({ initialTab: 'official' }); + panel.setMarketplaceError('fetch failed'); + const out = strip(renderRaw(panel)); + expect(out).toContain('Kimi WebBridge open in browser'); + expect(out).toContain('Marketplace unavailable: fetch failed'); + }); + + it('opens the Web Bridge webpage on Enter instead of installing', () => { + const { panel, onSelect } = makePanel({ initialTab: 'official' }); + panel.setMarketplace(marketplaceEntries, '/tmp/marketplace.json'); + // Web Bridge is pinned at index 0, so Enter selects it directly. + panel.handleInput('\r'); + expect(onSelect).toHaveBeenCalledWith({ + kind: 'open-url', + url: 'https://www.kimi.com/features/webbridge', + label: 'Kimi WebBridge', + }); + }); + + it('installs a catalog official entry after navigating past Web Bridge', () => { + const { panel, onSelect } = makePanel({ initialTab: 'official' }); + panel.setMarketplace(marketplaceEntries, '/tmp/marketplace.json'); + panel.handleInput('\u001B[B'); // ↓ → kimi-datasource + panel.handleInput('\r'); + expect(onSelect).toHaveBeenCalledWith({ + kind: 'install', + entry: expect.objectContaining({ id: 'kimi-datasource' }), + }); + }); + + it('does not duplicate Web Bridge when the catalog also lists it', () => { + const entries = [ + { + id: 'kimi-webbridge', + tier: 'official' as const, + displayName: 'Kimi WebBridge', + source: 'https://x/w.zip', + }, + ...officialEntries, + ]; + const { panel } = makePanel({ initialTab: 'official' }); + panel.setMarketplace(entries, '/tmp/marketplace.json'); + const out = strip(renderRaw(panel)); + // The label should appear exactly once — the hardcoded row wins, the + // catalog copy is filtered out. + expect(out.split('Kimi WebBridge').length - 1).toBe(1); + }); + + it('installs a Third-party entry whose id matches the pinned WebBridge', () => { + // A curated/custom marketplace entry can legitimately reuse the + // kimi-webbridge id; on the Third-party tab it must install normally, not + // open the WebBridge page (that shortcut is reserved for the pinned row). + const entries = [ + { + id: 'kimi-webbridge', + tier: 'curated' as const, + displayName: 'Kimi WebBridge', + source: 'https://x/w.zip', + }, + ]; + const { panel, onSelect } = makePanel({ initialTab: 'third-party' }); + panel.setMarketplace(entries, '/tmp/marketplace.json'); + const out = strip(renderRaw(panel)); + expect(out).toContain('Kimi WebBridge install'); + panel.handleInput('\r'); + expect(onSelect).toHaveBeenCalledWith({ + kind: 'install', + entry: expect.objectContaining({ id: 'kimi-webbridge', source: 'https://x/w.zip' }), + }); + }); + it('installs the selected Third-party entry on Enter', () => { const { panel, onSelect } = makePanel({ installed: [superpowers], initialTab: 'third-party' }); panel.setMarketplace(marketplaceEntries, '/tmp/marketplace.json'); diff --git a/apps/kimi-code/test/tui/kimi-tui-message-flow.test.ts b/apps/kimi-code/test/tui/kimi-tui-message-flow.test.ts index 3503e4271..a014a4586 100644 --- a/apps/kimi-code/test/tui/kimi-tui-message-flow.test.ts +++ b/apps/kimi-code/test/tui/kimi-tui-message-flow.test.ts @@ -3781,6 +3781,9 @@ command = "vim" await vi.waitFor(() => { expect(stripSgr(panel.render(120).join('\n'))).toContain('Kimi Datasource'); }); + // The pinned Kimi WebBridge row leads the Official tab, so move down to + // the Kimi Datasource entry before installing. + panel.handleInput('\u001B[B'); panel.handleInput('\r'); await vi.waitFor(() => { @@ -3987,6 +3990,9 @@ command = "vim" await vi.waitFor(() => { expect(stripSgr(panel.render(120).join('\n'))).toContain('Kimi Datasource'); }); + // The pinned Kimi WebBridge row leads the Official tab, so move down to + // the Kimi Datasource entry before installing. + panel.handleInput('\u001B[B'); panel.handleInput('\r'); await vi.waitFor(() => {