CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

dashboard-preview

Drive this checkout's dashboard (`ui/`) against the shared preview deployment's real threads, with no local backend. Use to verify a UI change in a browser, count the requests a page makes, or compare a page's behaviour before and after a change.

Quality

94%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Dashboard against preview

pnpm run dev:prod serves this checkout's ui/ from Vite and proxies the API to a deployment with a real session, so every page shows real threads. Point it at preview, never production:

DASHBOARD_API_URL=https://open-swe-preview-cc53e8fbe667565d843d0843f84ee92c.us.langgraph.app pnpm run dev:prod

The first run opens the user's browser for a GitHub handoff. When they are signed in to GitHub it completes on its own, and the session is cached in ~/.cache/open-swe/dev-session.json for a week. If pnpm fails with No version is set for shim: pnpm, run it as mise exec pnpm@<version> -- pnpm run dev:prod, taking the version from packageManager in package.json.

Browser pane

The in-app Browser pane needs a launch configuration that starts the server; one that only names a URL is refused. Write .claude/launch.json (leave it uncommitted), then preview_start dashboard-preview:

{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "dashboard-preview",
      "runtimeExecutable": "pnpm",
      "runtimeArgs": ["run", "dev:prod"],
      "env": { "DASHBOARD_API_URL": "https://open-swe-preview-cc53e8fbe667565d843d0843f84ee92c.us.langgraph.app" },
      "port": 3000
    }
  ]
}

Vite holds port 3000 strictly: stop any dev:prod you started from Bash first. The ego-browser skill works too, and it carries the user's real login for both preview and production.

The session is real

Reading is free. A message sent from the composer starts a real run, and opening a pull request's review page creates its chat thread. Ask the user before either.

Finding a thread to test on

Only threads with transcript: "v2" read the transcript log; older ones answer /transcript with 404 and go through the SDK stream. Rank candidates by size from the page:

const { items } = await (await fetch("/dashboard/api/threads/page?limit=40")).json()
for (const t of items.filter((t) => t.transcript === "v2")) {
  const s = await (await fetch(`/dashboard/api/threads/${t.id}/transcript`)).json()
  console.log(t.id, t.status, s.tool_calls.length, t.title)
}

Counting requests

Wrap fetch, then move with the router so the wrapper survives; a reload drops it. The dashboard's API calls all go through window.fetch at call time:

window.__origFetch ??= window.fetch
window.__hits = []
window.fetch = (input, init) => {
  window.__hits.push(typeof input === "string" ? input : input.url)
  return window.__origFetch(input, init)
}
await window.__TSR_ROUTER__.navigate({ to: "/agents/$threadId", params: { threadId } })
await new Promise((r) => setTimeout(r, 15000))
window.__hits.filter((u) => u.includes("/tool-calls/")).length

Each preview_eval times out after 30 seconds, so keep the wait under that.

Before and after

Measure the branch, then put the base branch's version of each changed file in place, reload, and measure again:

git diff main --name-only -- ui/src | grep -v test | while read f; do git show "main:$f" > "$f"; done

Vite picks the files up; navigate to /agents with a full reload before measuring. Restore with git checkout HEAD -- ui/src and check git status is clean before you commit.

Repository

langchain-ai/open-swe

Path

.claude/skills/dashboard-preview/SKILL.md

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.