Skip to content

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

Description

@QYongHao

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions