Problem
When developing a web app with Kimi Code, there's no way to see the app
alongside the conversation. Users have to switch between the browser tab
showing Kimi Code and the tab showing their app, losing context each time.
Proposed solution
Add a new right-side panel (like the existing "Changes" panel) that embeds
an iframe of the user's app:
- A monitor icon button in the chat header opens the panel
- The URL is configurable via a pencil/edit button in the panel header
- Each session has its own URL, persisted in localStorage
- A reload button refreshes the iframe
- On mobile, the panel opens as a full-screen overlay
- The panel's open/close state is also persisted per-session
Why this fits Kimi Code
The web UI already has a side-panel system (Changes, Thinking, Agent Detail,
Side Chat). This adds one more slot following the exact same architecture
(DetailTarget, useDetailPanel, <aside> rendering). No new APIs or
backend changes are needed — it's purely a frontend feature.
Scope
- New
EmbedPanel.vue component
- State management in
useDetailPanel.ts
- Trigger buttons in
ChatHeader.vue (desktop) and MobileTopBar.vue
- Per-session localStorage persistence
- i18n for en and zh
Problem
When developing a web app with Kimi Code, there's no way to see the app
alongside the conversation. Users have to switch between the browser tab
showing Kimi Code and the tab showing their app, losing context each time.
Proposed solution
Add a new right-side panel (like the existing "Changes" panel) that embeds
an iframe of the user's app:
Why this fits Kimi Code
The web UI already has a side-panel system (Changes, Thinking, Agent Detail,
Side Chat). This adds one more slot following the exact same architecture
(
DetailTarget,useDetailPanel,<aside>rendering). No new APIs orbackend changes are needed — it's purely a frontend feature.
Scope
EmbedPanel.vuecomponentuseDetailPanel.tsChatHeader.vue(desktop) andMobileTopBar.vue