feat(samples): add a complete TypeScript Agent SDK Web UI showcase

.github/workflows/ci.yml

@@ -20,6 +20,8 @@ jobs:
           cache-dependency-path: typescript/package-lock.json
       - run: npm ci
         working-directory: typescript
+      - run: npx playwright install --with-deps chromium
+        working-directory: typescript/web-ui-showcase
       - run: npm run check --workspaces
         working-directory: typescript
 

CONTRIBUTING.md

@@ -28,6 +28,8 @@ this repository.
 
 ## Sample requirements
 
+### Focused samples
+
 Every sample must:
 
 - Demonstrate one primary SDK concept.
@@ -63,6 +65,10 @@ Keep the TypeScript and Python versions behaviorally equivalent so readers can
 switch between languages. When one concept has multiple independently copyable
 variants, keep them in one sample directory and list every entry in its README.
 
+### Comprehensive application templates
+
+An application template may be language-specific when its framework and application architecture are part of what it teaches. It must demonstrate one coherent end-to-end application, keep SDK calls easy to locate, document module ownership, provide deterministic credential-free tests, and include an opt-in real-SDK smoke path.
+
 ## Running the checks
 
 Run the same checks CI runs, and make sure they pass before opening a pull

README.md

@@ -3,6 +3,12 @@
 Runnable, focused examples for building applications with the Qoder Agent SDK.
 Every sample is available in TypeScript and Python.
 
+## Application templates
+
+| Template | What it demonstrates | Language |
+| --- | --- | --- |
+| [Web UI showcase](typescript/web-ui-showcase) | A complete local project agent with Sessions, streaming, inline interactions, MCP, Hooks, Tasks, Credits, Checkpoints, errors, shutdown, and resume | TypeScript |
+
 ## Samples
 
 | Sample | What it demonstrates | TypeScript | Python |

README.zh-CN.md

@@ -3,6 +3,12 @@
 本仓库提供面向实际开发者的 Qoder Agent SDK 示例。每个场景同时提供
 TypeScript 和 Python 实现。
 
+## 应用样板
+
+| 样板 | 展示内容 | 语言 |
+| --- | --- | --- |
+| [Web UI showcase](typescript/web-ui-showcase) | 中文浅色界面的本地项目 Agent；连续流式消息聚合显示，审批位于主界面，并覆盖 Session、MCP、Hooks、Task、Credits、Checkpoint、错误、退出和恢复 | TypeScript |
+
 ## 示例列表
 
 | 示例 | 展示内容 | TypeScript | Python |

typescript/README.md

@@ -9,3 +9,7 @@ npm install
 
 Run a sample with the script documented in its README; most use `npm start`.
 Complete the repository-level setup before running a sample.
+
+## Application template
+
+[`web-ui-showcase`](web-ui-showcase) is a complete Fastify and React application template backed by the Qoder TypeScript SDK. Its Chinese light-theme product UI covers first-send Workspace selection, automatically available Sessions, SDK-backed Command and Skill discovery, project-scoped `@ Files`, semantic streaming, locally expandable Tool details, inline Approval and MCP elicitation, Task state, Credits, safe errors, snapshot recovery, and graceful shutdown. Model and Permission Mode are selected directly in the Composer; MCP, Hooks, and Raw Events live in the default-closed SDK Console, and `/mcp` opens its MCP tab. Eligible user messages expose a Checkpoint dry-run, impact review, and confirmed files/conversation rewind. Task state and server/API control adapters are included, but the current React product has no reachable Task controls. The Chinese sample README routes readers to copyable SDK examples, a source tour, deterministic acceptance tests, a product trial guide, and the optional real-account smoke.