Web Workbench
AgentHub Web is the Hub-backed collaboration surface. Here a team can see projects, shared sessions, run history, review state, and integration-created tasks, without giving the browser direct access to a developer's local filesystem or local CLI processes.
Current status
The Web workbench is an active development surface. It can be previewed locally with Hub-backed product concepts, but full production Web + Hub + Edge routing, database-backed workbench views, and remote execution proof are still in development.
When To Use Web
Use AgentHub Web when the workflow needs shared visibility rather than direct local execution:
| Scenario | Use Web for | Use Desktop / Edge for |
|---|---|---|
| Team review | Shared transcript, review state, audit trail | Local file preview and local diff approval |
| Project overview | Project context, tasks, agents, devices, run history | Workspace allowlist and runtime process control |
| IM-created work | Hub task created from Feishu/Lark or an automation | Runtime execution after Hub authorization |
| Remote target planning | Target selection, authorization state, degraded state | Actual workspace access through an approved Edge |
Web should never silently start a local CLI, read local files, or bypass Hub authorization to reach Local Edge. Local execution belongs to Desktop plus Edge.
Surface Model
A complete Web workbench organizes the following surfaces without turning the page into a generic chat app:
| Surface | Purpose | Current public wording |
|---|---|---|
| Project list | Entry point for team-owned work | In progress |
| Project detail | Context, files, runs, agents, tasks, members | In progress |
| Shared session | Transcript, selected agent, target, events, approvals | In progress |
| Review view | Diff, artifacts, comments, approve/reject actions | In progress |
| Target/device view | Online state, authorization, last seen, capabilities | In development |
| Audit/status view | Product events, degraded state, failure reason | In progress |
The public site may describe the intended shape, but it should not claim that a database-backed Web workbench is production-ready until screenshots, route evidence, Hub API evidence, and Edge routing evidence exist.
Hub Contract
Web talks to Hub. Hub owns identity, product sessions, project membership, device routing, task creation, shared state, and audit.
A minimum useful Hub-backed Web session includes:
- TokenDance ID subject and AgentHub product session.
- Project id, role, and membership state.
- Task or run id.
- Selected Agent Profile and target Edge.
- Transcript events and run lifecycle events.
- Review state for artifacts, diffs, approvals, and failures.
- Audit events for who requested, approved, rejected, cancelled, or escalated work.
Web can render local execution state only after Hub has authorized the target and Edge has emitted safe events.
Local File Boundary
The most important Web rule is simple: Web does not own the local filesystem.
| Request | Correct behavior |
|---|---|
| User asks Web to inspect local files | Create a Hub task and route it to an authorized Edge target |
| User opens a diff produced by Edge | Render normalized artifact or diff data, not arbitrary local paths |
| User clicks approve | Send a Hub/Edge approval action with audit context |
| User asks for a terminal command | Require explicit policy and route through Edge approval |
| Edge is offline | Show unavailable or degraded state, not a fake success |
Public screenshots should avoid private absolute paths, secrets, provider keys, internal hostnames, and real user data.
Interaction States
Web should expose stable product states that read clearly across desktop and mobile layouts:
| State | Meaning | UI expectation |
|---|---|---|
| Empty | No project or run selected | Compact prompt to pick or create a task |
| Ready | Hub session and project context are loaded | Clear primary action, visible target state |
| Running | Edge has accepted the run and streams events | Event stream, progress, cancel affordance |
| Needs approval | Edge is waiting on user or reviewer action | Diff/artifact visible, decision controls clear |
| Completed | Run finished with result and artifacts | Summary, artifacts, next action |
| Failed | Runtime, policy, schema, auth, or network failure | Stable error code and recovery path |
| Degraded | Target, Hub, or integration is partially unavailable | Honest status, no hidden retries that change meaning |
Avoid jumpy layouts, heavy hover shadows, old purple accents, black footer blocks, and browser-default blue focus outlines in product mocks. Real controls still need accessible focus states, but purely decorative mock controls should not look like selected DOM.
Review Flow
A Web review flow should make the decision chain visible:
- A user, integration, or automation creates a Hub task.
- Hub resolves project membership, product authorization, Agent Profile, and target policy.
- Edge starts the runtime only after authorization and workspace policy pass.
- Edge streams normalized events and candidate artifacts.
- Web renders transcript, artifact, diff, and approval state.
- A reviewer approves, rejects, comments, escalates, or cancels.
- Hub records audit events and exposes final state.
Do not describe a Web review as complete unless it has evidence for task creation, event streaming, diff/artifact rendering, approval action, final state, and audit trail.
Design Requirements
Web should follow the same product direction as AgentHub Desktop and the public website:
- Light-first TokenDance Blue surfaces.
- Dense but readable tool layouts.
- Small radii and restrained glass effects.
- Icon-first controls where the meaning is familiar.
- No marketing cards inside tool panes.
- Tables and panels that do not overflow on mobile.
- zh/en text that describes the same capability and status.
- Motion that supports continuity without changing layout after hydration.
Evidence Checklist
Before promoting Web copy from "in progress" to a stronger claim, capture:
| Evidence | What to prove |
|---|---|
| Route screenshot | Project/session/review route renders in desktop and mobile |
| Hub API trace | Web reads Hub state through product session boundaries |
| Edge routing trace | Target selection and Edge events are authorized through Hub |
| Artifact/diff screenshot | Review surface is visible and does not expose private paths |
| Approval audit | Approve/reject/cancel actions produce recorded events |
| Failure screenshot | Offline target, unauthorized target, runtime unavailable, and timeout are readable |