MoonshotAI / MoonshotAI/kimi-code

Add an App Preview side panel with configurable iframe in the web UI

Open
#1,093 1 comment 0 reactions 0 assignees View on GitHub

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.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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.