Skip to content

docs: Add comprehensive Tingly-Box user guide with bilingual content and screenshots - #1112

Draft
0x0079 wants to merge 2 commits into
mainfrom
doc/guide
Draft

0x0079 wants to merge 2 commits into
mainfrom
doc/guide

Conversation

@0x0079

@0x0079 0x0079 commented Jun 3, 2026

Copy link
Copy Markdown
Collaborator

Summary

This PR adds a complete user guide for Tingly-Box Web UI, organized as bilingual (Chinese + English) markdown documentation with accompanying screenshots. The guide covers all major features and workflows, from initial setup through advanced configuration.

Key Changes

  • Documentation Structure (docs/guide/):

    • Bilingual organization: zh/ (Chinese) and en/ (English) directories with parallel content
    • 20 numbered topic files covering all UI features and workflows
    • Centralized screenshot repository in images/ directory
    • Language selector at root level (docs/guide/README.md)
  • Content Coverage:

    • Getting Started: Onboarding and provider setup
    • Agent Scenarios: Claude Code, Codex, OpenCode, VS Code, Xcode, Claude Desktop, OpenAI/Anthropic SDK proxies, Claw Agent, Embed, ImageGen, Playground
    • Core Features: Credentials, Virtual Models, API Tokens, Dashboard, Remote Coder, Remote Control, Prompt Management, MCP & Tools, Guardrails
    • Advanced Topics: Routing Rules & Extensions, System Settings, Access Control, Experimental Features
    • Each topic includes UI screenshots, tables, and step-by-step workflows
  • Tooling (.claude/skills/doc-guide/):

    • screenshot-docs.mjs: Automated screenshot capture script using Playwright
      • Auto-detects available Chromium binary from multiple fallback paths
      • Captures all guide images in a single pass from mock dev server
      • Handles headless browser setup with sandbox/memory constraints
    • SKILL.md: Comprehensive skill documentation with prerequisites, setup instructions, and maintenance guidelines
  • Git Configuration:

    • All docs/guide/ files force-added via git add -f (since docs/ is in .gitignore)
    • Includes instructions for maintaining the documentation tree

Implementation Details

  • Screenshots are referenced consistently across both language versions using relative paths (../images/<name>.png)
  • Documentation follows a numbered file convention (01–20) for reading order
  • Each topic is self-contained with clear section headers and tables for quick reference
  • The screenshot automation tool supports both pre-installed Playwright browsers and manual Chrome for Testing downloads
  • Documentation includes notes about Full Edition features and experimental toggles where applicable

https://claude.ai/code/session_01UTGPqjHogwsFY29k8dDeH4

@0x0079
0x0079 marked this pull request as draft June 3, 2026 06:28
@0x0079
0x0079 force-pushed the doc/guide branch 3 times, most recently from 5f384b3 to 3167860 Compare June 12, 2026 08:28
@0x0079
0x0079 force-pushed the doc/guide branch 2 times, most recently from 12a45df to a31e038 Compare July 21, 2026 03:19
Rebased doc/guide onto latest origin/main (178 commits since last sync)
and updated the guide for substantial upstream changes:

- Remote: "Remote Coder" (web chat) is retired; the old combined
  "Remote Control" page split into three: Bots (connect messaging
  accounts), Remote Control (route chat commands to an agent), and the
  new IM Notify (push outbound notifications). Rewrote 12-remote-control.md
  end to end and deleted 13-remote-coder.md.
- New scenarios: Pi and DeepSeek Harness (dsh, self-hosted Web UI) added
  to Other Coding Agents; "OpenClaw"/"Claw Agent" renamed to "Custom"
  (path /agent/agent -> /agent/custom) in Scenario Overview and its own
  doc.
- Dashboard: "Models by Token Usage" panel replaced by a new "Response
  Performance" TTFT/TPS/Latency percentile table; Usage-by-Model table
  now splits Cache Read/Write instead of one Cache Tokens column; new
  standalone "Team usage" page (/dashboard/users) documented.
- System Settings: card layout changed again — Version moved into
  Server Status, Quick Proxy and Respect Environment Proxy merged into
  one Proxy Settings card.
- Credentials: page-level bulk Import/Export removed (Connect AI is now
  the only entry point, itself gaining a "Paste & detect" card); OAuth
  and API Key tables restructured with live per-provider quota strips;
  sidebar sub-nav abbreviated to "VModel".
- Onboarding: the two-tab (Browse/Paste & detect) flow was replaced by
  the same unified Connect AI picker used everywhere else in the app.
  Rewrote 01-getting-started.md's onboarding section accordingly.
- Guardrails: new "Credential" sub-page (Protected Credentials / secret
  aliasing) documented; Policies page's registry section renamed
  "Download Management".
- Claude Code / Codex: routing section retitled "Model Rules" pattern
  now cross-referenced from Codex instead of duplicated; Quick Start's
  Reset moved to a header link with a new "How routing works" shortcut,
  and the Select-a-Model step is now skippable.
- Fixed a mock-data gap in the screenshot script: the guardrails/MCP/
  skills feature flags moved server-side and the mock has no handler
  for GET /api/v1/scenario/:scenario/flag/:flag, so those pages silently
  redirected to Experimental Settings. The script now intercepts that
  route via Playwright to force flags on for screenshot purposes only.

Screenshots: retook everything, added shots for the new/changed pages
(Bots, Remote Control, IM Notify, connect-a-bot dialog, DeepSeek Harness,
Pi, Custom, Guardrails Credential, Team usage), removed now-dead ones
(old Remote Coder / Remote Control combined page, standalone heatmap).
Compressed every PNG with pngquant (~63% reduction, 4.9MB -> 1.8MB) with
no visible quality loss.
… redesign

Updated the Web UI guide for the batch of upstream changes since the last
sync:

- New Cursor scenario page (/agent/cursor) with cloud-reachability
  guidance; added to Scenario Overview and cross-linked from other
  coding-agent docs.
- ImageGen + the old standalone Playground merged into one page
  (/agent/image, "Image Playground") — documented Generate/Edit modes,
  paste-to-edit reference images, view-original/copy-prompt, and the
  tile-splitting + ZIP download flow. Deleted the now-redundant
  07-scenario-playground.md.
- Multi-team workspace: new Team section (profile-style sidebar nav,
  per-team sharing keys with move/scope, enable toggle) in
  06-scenario-special.md, retitled "Custom / Embed / Image Playground /
  Team".
- Team usage dashboard: documented the new By account/By model/By
  provider view toggle, per-model/provider detail panel, and the
  RosterTopList ranked Top accounts/models/providers card. Added
  Reasoning Tokens column to both the main and team usage tables.
- Probe panel full redesign: new "Troubleshoot (Probe Panel)" section in
  Routing Rules & Plugins covering the left control-rail / right
  results-column layout, the quick-test pill, and the orthogonal request
  axes (shape, tool, scope, protocol, vision, thinking).
- New Tips & Help page (13-help.md) documenting the restructured
  accordion HelpPage (Desktop Shortcut / Providers / Routing & Tier
  Guides).
- DeepSeek Harness (dsh): documented the Auto Config primary-protocol and
  input-modality settings.
- Rewrote the SmartOp condition catalog against current source (added
  service_quota and the Time range condition; corrected service_ttft/
  service_capacity operators, which had drifted); added the new
  rule-level extra_headers flag under a "Request (protocol-agnostic)"
  category.
- Claude Code Auto Config: documented the showThinkingSummaries toggle.
- Credentials: documented the provider dialog's always-visible Name
  field and title-bar Enabled toggle (User-Agent field removed), the new
  import result list with inline edit, and the OAuth dialog's callback
  port / ssh -L hint.
- System Settings: documented the Update dialog's channel toggle
  (npx/npm/bundle/docker), the unified per-request log journey, and the
  Russian language option.
- Verified Remote Coder has no lingering references (already fully
  removed).
- Fixed a pre-existing broken cross-link in 04-scenario-codex.md, and
  swapped a stale duplicate Remote Control screenshot for a freshly
  captured one.

Screenshots: extended screenshot-docs.mjs with Cursor, Cursor config
modal, the merged Image Playground (generate + edit mode), Team
workspace, Help page, Team usage "By model" view, and the redesigned
probe panel; removed the dead Remote Coder captures and the old
imagegen/playground duplicates. Retook every existing shot so they match
current copy/layout. Compressed all PNGs with pngquant (~2.0MB, down
from 5.1MB pre-compression this run).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UTGPqjHogwsFY29k8dDeH4
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.

2 participants