MoonshotAI / MoonshotAI/kimi-code
Add an App Preview side panel with configurable iframe in the web UI
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.5k
- Forks
- 1.2k
- Avg merge
- 11h 53m
- Merged PRs (30d)
- 350
Description
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.vuecomponent - State management in
useDetailPanel.ts - Trigger buttons in
ChatHeader.vue(desktop) andMobileTopBar.vue - Per-session localStorage persistence
- i18n for en and zh
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the existing side-panel flow through useDetailPanel.ts and the DetailTarget usage, then inspect ChatHeader.vue and MobileTopBar.vue for trigger patterns. Add EmbedPanel.vue and the requested desktop/mobile controls, per-session localStorage state, and en/zh i18n; done means the iframe URL, reload, open/close state, and mobile overlay work as described.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 70/100