Skip to content

feat: live browser panel, Opus 4.8, and template format#1

Merged
ShawnPana merged 2 commits into
mainfrom
add-browser-panel-and-format
Jun 18, 2026
Merged

feat: live browser panel, Opus 4.8, and template format#1
ShawnPana merged 2 commits into
mainfrom
add-browser-panel-and-format

Conversation

@ShawnPana

@ShawnPana ShawnPana commented Jun 18, 2026

Copy link
Copy Markdown
Collaborator

Polishes the scaffold into a real, deployable template.

Changes

  • Live browser panelapp/_components/browser-panel.tsx embeds the agent's cloud browser (<iframe src={liveUrl}>); agent-chat.tsx extracts the liveUrl and shows a split chat/browser layout (like chat-ui-example).
  • Modelanthropic/claude-opus-4.8; @browser_use/eve^0.0.4.
  • Format (mirrors vercel-labs/personal-agent-template): README with banner/badges/Deploy button/Features/Architecture/Quick Start, docs/ (ARCHITECTURE, ENVIRONMENT, CUSTOMIZATION), .github/ (CI, issue/PR templates), CONTRIBUTING, CODE_OF_CONDUCT, .editorconfig.

Verified

  • npm run typecheck + next build pass.
  • Browse + the panel confirmed working live (clean HN/example.com runs).

🤖 Generated with Claude Code


Summary by cubic

Adds a live browser panel next to chat and reshapes the repo into a deployable template with docs and CI. Sets the default model to anthropic/claude-opus-4.8, bumps @browser_use/eve to ^0.0.4, and hardens the live view with origin-safe liveUrl parsing and a sandboxed iframe.

  • New Features

    • Split chat/browser layout with an embedded live view via BrowserPanel (<iframe src={liveUrl}>).
    • AgentChat extracts the latest liveUrl from messages and renders the panel when available.
  • Refactors

    • Security hardening: origin-safe liveUrl regex and watch-only iframe (sandbox="allow-scripts allow-same-origin").
    • Default model → anthropic/claude-opus-4.8; bump @browser_use/eve^0.0.4; adopt template format (README, docs/—Architecture/Environment/Customization, .github/ CI and templates, CONTRIBUTING, CODE_OF_CONDUCT, .editorconfig, .env.local docs, fixed project tree).

Written for commit 1d53e6c. Summary will update on new commits.

Review in cubic

- app/_components/browser-panel.tsx: iframe live view of the agent's cloud
  browser; agent-chat extracts the liveUrl and shows a split layout
- model -> anthropic/claude-opus-4.8; @browser_use/eve -> ^0.0.4
- README + docs/ (ARCHITECTURE, ENVIRONMENT, CUSTOMIZATION) and .github/
  (CI, issue/PR templates) in the personal-agent-template format

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@ShawnPana ShawnPana changed the title Live browser panel, Opus 4.8, and template format feat: live browser panel, Opus 4.8, and template format Jun 18, 2026

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

4 issues found across 20 files

Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic

Comment thread app/_components/agent-chat.tsx Outdated
Comment thread CONTRIBUTING.md
Comment thread CONTRIBUTING.md Outdated
Comment thread app/_components/browser-panel.tsx
- agent-chat: origin-safe liveUrl regex (reject userinfo bypass)
- browser-panel: sandbox the watch-only iframe (allow-scripts allow-same-origin)
- CONTRIBUTING: .env -> .env.local; correct the project-structure tree

Issues identified by cubic.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@ShawnPana ShawnPana merged commit c75e87a into main Jun 18, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant