OpenCode Spend Joins Your AI Dashboard, Groups Accept Folder Drops, HTML Previews in One Click

Three independent workflows got meaningfully better in v1.21.4 — and all three solve the same underlying problem: information that should be visible inside 1DevTool was ending up outside it.

If you were using OpenCode alongside Claude or Codex, your AI spend tracking was incomplete. If you were adding projects that belonged in a group, you were doing it in two steps instead of one. And if you were working on HTML files, you were opening a browser window to see what you wrote.

OpenCode sessions now show up in AI Usage

The AI Usage dashboard tracks token counts, session costs, and per-model breakdowns for Claude, Codex, Gemini, and Qwen. As of v1.21.4, OpenCode joins that list.

How it works

1DevTool reads OpenCode's shared opencode.db file once and splits it into individual session records — the same structure used for every other agent. Each record includes the model used, token counts for that session, and cost calculated against the actual pricing for that model (not a per-provider estimate). Switch between projects and the OpenCode history for each one loads correctly.

Why this matters

If you are evaluating whether OpenCode is worth running alongside Claude on a given project, the comparison belongs in a single dashboard. Before this change, the only way to see OpenCode costs was to check the OpenCode interface directly — a separate context switch that most people skip. Now the comparison is visible without leaving 1DevTool.

Drag folders directly into project groups

Dropping a folder from Finder or Explorer onto 1DevTool has always created a new project. But it always landed ungrouped at the top level — a second manual step was needed to move it into the right group.

Now you can drag the folder onto any group surface — the group header, the empty "Drag projects here" placeholder, or any existing project inside a group — and the new project is added directly to that group. A live highlight shows which group will receive the drop before you release, so you can confirm before committing.

Dropping in the empty sidebar area still adds at the top level. The existing behavior for ungrouped projects is unchanged.

Preview any HTML file in the built-in browser with one click

When an .html or .htm file is active in the editor, a globe button appears in the editor toolbar. Clicking it renders the file in the built-in browser panel — no dev server required, no external browser to open.

The button is visible only when an HTML file is active, so it does not clutter the toolbar for other file types. It complements the existing right-click "Open in 1DevTool's Browser" option from the file tree — the toolbar button is the faster path when you are already in the editor.

Before vs After

Task	Before v1.21.4	After v1.21.4
See OpenCode session costs	Check the OpenCode interface separately	Visible in AI Usage alongside Claude/Codex
Add a project to a specific group	Add ungrouped, then drag into group	Drag folder directly onto the target group
Preview an HTML file	Open external browser, navigate to file	Click globe button in editor toolbar

Try it

Update to v1.21.4 or later. AI Usage is in the left sidebar under the usage icon. Project groups accept folder drops immediately — no settings to toggle. The HTML preview button appears automatically in the editor toolbar when an HTML file is open.