--- name: pulsebot-app-builder description: Build real-time Timeplus data processing and analysis applications in Pulsebot. Creates pure frontend HTML/JavaScript apps that connect directly to Timeplus Proton via @timeplus/proton-javascript-driver (UMD), visualize live streaming data with @timeplus/vistral (UMD), and follow the Timeplus UI style guide. No npm build or bundler required — output is a single self-contained HTML file. license: Apache-2.0 compatibility: pulsebot>=0.1.0 allowed-tools: shell, workspace, file_ops --- # Pulsebot App Builder Use this skill whenever the user asks to build a data processing application, pipeline visualizer, real-time dashboard, streaming analytics app, or any frontend tool that queries or visualizes data from Timeplus Proton. ## Overview You will produce a **single self-contained HTML file** that: 1. Queries Timeplus Proton directly via `@timeplus/proton-javascript-driver` loaded from unpkg CDN 2. Visualizes streaming data using `@timeplus/vistral` loaded from unpkg CDN 3. Follows the **Timeplus App Style Guide** (dark theme, brand colors, clean layout) 4. Requires **no npm install, no build step** — open the HTML file directly in a browser > **Key architecture:** Both `@timeplus/proton-javascript-driver` and `@timeplus/vistral` ship UMD builds. Import them via `

My Stream App LIVE Connecting…

Live Stream

``` --- ### Step 3 — Proton Connection Read `references/PROTON_DRIVER.md` for the full driver API. The driver connects directly to the Proton proxy at `localhost:8001`. UMD global: `window.ProtonDriver`. ```javascript const { ProtonClient } = window.ProtonDriver; const client = new ProtonClient({ host: 'localhost', port: 8001 }); const { rows, abort } = await client.query('SELECT * FROM my_stream'); for await (const row of rows) { // row is a plain JavaScript object: { col1: val1, col2: val2, ... } console.log(row); } // To cancel a running streaming query: abort(); ``` --- ### Step 4 — Visualization with Vistral Read `references/VISTRAL_API.md` for the complete component reference. Vistral UMD global: `window.Vistral`. Key components: `StreamChart`, `SingleValueChart`, `DataTable`. All charts are rendered via React (`React.createElement`). Always pass `theme="dark"`. **Quick chart config reference:** | Chart type | `chartType` | Best for | temporal `mode` | |-----------|-------------|----------|-----------------| | Time series | `'line'` or `'area'` | Scrolling metrics over time | `'axis'` | | Horizontal bars | `'bar'` | Ranked categories, latest snapshot | `'frame'` | | Vertical bars | `'column'` | Categorical comparison | `'frame'` | | KPI tile | `'singleValue'` | One big number | `'frame'` | | Live table | `'table'` | Raw rows / mutable state | `'key'` | | Geo points | `'geo'` | Location data | `'key'` | --- ### Step 5 — Apply Timeplus Style Guide Read `references/STYLE_GUIDE.md` for full rules. Core rules always applied: - Dark background `#0f1117` for page, `#1e2235` for cards - Purple `#7c6af7` for primary accents - Inter font for UI, monospace for data values - Cards with `border-radius: 12px` and border `#2e3450` - Header 56px with LIVE badge and connection status indicator --- ### Step 6 — Deliver the App 1. Write the complete single-file HTML, filling in the correct SQL and chart config 2. use workspace_create_app to create the app 3. Present the file — it opens directly in a browser with no server or build step needed For PulseBot deployment: ```python workspace_create_app( session_id=session_id, task_name="My Stream App", html=open("my-app.html").read() ) ``` --- ## SQL Patterns Load the `timeplus-sql-guide` skill for all SQL questions: - Streaming vs historical queries - Window functions (tumble, hop, session) - Aggregations, joins, filters - Schema introspection (`DESCRIBE`, `SHOW STREAMS`) --- ## Checklist Before Delivering - [ ] Single HTML file — no separate JS/CSS files, no package.json, no build step - [ ] Script load order: React → ReactDOM → lodash → ramda → @antv/g2 → @antv/s2 → vistral → proton-javascript-driver - [ ] `window.ProtonDriver` destructured for `ProtonClient` - [ ] `window.Vistral` destructured for `StreamChart` (and other components as needed) - [ ] `ProtonClient` configured with `{ host: 'localhost', port: 8001 }` - [ ] SQL uses correct Proton streaming syntax - [ ] `columns` inferred from first received row using `inferColumns()` - [ ] Chart `config.temporal` uses correct `mode` for the query type - [ ] Status indicator updates on connect, stream end, and error - [ ] `abort()` stored on `window.stopQuery` or similar - [ ] CSS uses Timeplus design tokens (CSS variables) from the style template

Pulsebot App Builder

Description

Latest Changes

Install Pulsebot App Builder with One Click