Skip to content

Show the demo before workflow selection #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
timctho merged 1 commit into from
Oct 6, 2026
Merged

Show the demo before workflow selection #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,18 @@ use, with an optional desktop app for managing agent conversations.

[Documentation](https://timctho.github.io/focalet/) · [Releases](https://github.com/timctho/focalet/releases) · [Build from source](CONTRIBUTING.md)

## See visual context in action

Sketch a chart redesign, compare separate product listings, or select the part
of a dashboard that needs investigation.

[![Sketch a chart redesign and ask an agent to rebuild it](docs/demos/frontend-preview.webp)](docs/demos/frontend.mp4)

[Watch the chart demo](docs/demos/frontend.mp4) · [More recorded examples](docs/demos/README.md)

These historical recordings preserve their original UI and source provenance;
current builds display Focalet.

## Choose your workflow

| | Focalet Capture | Focalet Desktop |
Expand Down Expand Up @@ -66,18 +78,6 @@ credentials, tools, permissions and canonical history.
[Runtime support and setup](docs/install.md#2-choose-the-agent-you-already-have) ·
[Runtime commands](docs/runtime-commands.md) · [Chrome and Edge context](docs/guides/chrome-edge.md)

### See visual context in action

Sketch a chart redesign, compare separate product listings, or select the part
of a dashboard that needs investigation.

[![Sketch a chart redesign and ask an agent to rebuild it](docs/demos/frontend-preview.webp)](docs/demos/frontend.mp4)

[Watch the chart demo](docs/demos/frontend.mp4) · [More recorded examples](docs/demos/README.md)

These historical recordings preserve their original UI and source provenance;
current builds display Focalet.

## What gets shared

Capture starts when you invoke it. Selected pixels are retained; browser or
Expand Down
16 changes: 8 additions & 8 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@ description: Capture screen context into your existing tools, or work with your
**Show your agent what you mean.** Select and annotate screen regions, then share
the images with available text, links and structure.

<video controls autoplay muted loop playsinline preload="metadata" poster="demos/frontend-poster.webp" style="width: 100%; border-radius: 12px;" aria-label="Desktop demo: sketch a chart and ask an agent to rebuild it">
<source src="demos/frontend.mp4" type="video/mp4">
<a href="demos/frontend.mp4">Watch the Desktop demo</a>.
</video>

This is a historical Desktop recording from before the rename. Its original
footage is retained; new builds display Focalet.

## Choose your workflow

| | Focalet Capture | Focalet Desktop |
Expand Down Expand Up @@ -44,14 +52,6 @@ attachments in a dedicated window. Runtime support includes Codex, Claude Code,
OpenCode, Gemini CLI, Hermes, OpenClaw and Pi; features depend on each protocol.
The selected agent continues to own credentials, tools, permissions and history.

<video controls autoplay muted loop playsinline preload="metadata" poster="demos/frontend-poster.webp" style="width: 100%; border-radius: 12px;" aria-label="Desktop demo: sketch a chart and ask an agent to rebuild it">
<source src="demos/frontend.mp4" type="video/mp4">
<a href="demos/frontend.mp4">Watch the Desktop demo</a>.
</video>

This is a historical Desktop recording from before the rename. Its original
footage is retained; new builds display Focalet.

- [Install Desktop and connect an agent](install.md).
- [Share screen context with Claude Code from Desktop](guides/claude-code.md).
- [Connect Chrome and Edge for browser DOM context](guides/chrome-edge.md).
Expand Down