Tiny Owl Kit — VS Code Extension
See your Tiny Owl Kit project's errors, warnings, and
recent events right in the editor, without leaving VS Code.
Status: Published on the
VS Code Marketplace
and Open VSX —
status bar indicator, sidebar tree view, and an in-editor master-detail
workbench (Monitor + Logs + Traces tabs) are all functional, sharing a
single poll/cache source; keyboard/a11y-polished; CI covers
lint/typecheck/test/audit/secret-scan/.vsix inspection. See
task 017 plan-v2.
Requirements
- A Tiny Owl Kit backend with
READ_KEY_ENABLED=true (currently a dogfood-only flag).
- A read key minted for your project via
npm run readkey:mint in tiny-owl-backend
(there is no in-product UI to generate one yet).
Features
- Status bar — live error/warning counts for the active project over the
selected time window, with a throttled spike notification and key-expiry warnings.
Clicking it opens the in-editor workbench, never the browser.
- Sidebar view — a dedicated "Tiny Owl Kit" activity-bar container with a
"Recent Events" tree. Primary actions live in the view toolbar (and the
⋯
overflow menu); you do not need the Command Palette for day-to-day use.
Clicking an event reveals it in the workbench's Logs tab.
- In-editor workbench (
Tiny Owl: Show Dashboard) — a hardened, strict-CSP
master-detail panel: a Monitor tab (severity counts, error rate, severity
mix, error-spike indicator), a Logs tab (filterable/searchable event list
- a detail pane with message/severity/timestamp/trace id), and a Traces
tab that reconstructs a
traceId's end-to-end flow as an oldest-first
timeline (e.g. a checkout: cart.created → payment.authorized → order.confirmed, or the exact step that failed) — reachable via "View flow"
on any event that has a trace id, or by pasting one directly. context/
requestMeta only appear when the project owner opted in server-side, and
stay hidden behind a per-field "Reveal" even then. The browser only opens
via the explicit "Open in Web ↗" action.
- Copy for AI — turns an event into a redacted, prompt-ready Markdown block.
For context-enabled projects it includes the redacted
context by
default; IP/user-agent (requestMeta) is never included unless you
explicitly tick "include IP/user-agent (PII)" for that copy. Prefer the
leanest possible clipboard content? Tiny Owl: Copy for AI (summary only)
always omits context.
Open the owl icon in the activity bar → Recent Events. The view title bar
exposes:
| Toolbar icon |
Action |
+ |
Add Project |
| swap |
Switch Project |
| history |
Change Time Window |
| dashboard |
Show Dashboard (in-editor) |
| refresh |
Refresh |
The view ⋯ menu also has Open Web Dashboard, Remove Project, and
Open Settings (poll interval, dashboard base URL). Command Palette entries
remain available under the Tiny Owl category.
Commands
| Command |
Description |
Tiny Owl: Add Project |
Paste a read key + project id to start tracking a project. The key is verified against the backend before being stored. |
Tiny Owl: Remove Project |
Stop tracking a project and delete its stored read key. |
Tiny Owl: Switch Project |
Change which added project is shown for the current workspace. |
Tiny Owl: Change Time Window |
Change the look-back window (24h / 7d / 14d / 30d) used for stats. |
Tiny Owl: Refresh |
Refresh the "Recent Events" sidebar view. |
Tiny Owl: Open Web Dashboard |
Open the full web dashboard in the browser (deep-links to the active project). |
Tiny Owl: Show Dashboard |
Open the in-editor master-detail workbench (Monitor + Logs + Traces tabs). |
Tiny Owl: Copy for AI |
Copy a redacted, prompt-ready Markdown block for a selected event (includes context by default when the project has it enabled). |
Tiny Owl: Copy for AI (summary only) |
Same, but always omits context — the leanest possible clipboard content. |
Tiny Owl: Open Settings |
Open this extension's settings in the VS Code Settings UI. |
"Open in Web Dashboard" (event context menu) deep-links to that specific event/trace
in the browser — the only path that leaves the editor for a single event.
Security
- Read keys are stored only in VS Code's
SecretStorage (OS keychain) — never
in settings, workspaceState, or logs.
- Read keys are read-only and project-scoped; they cannot write events or access
any other project.
- All API responses are treated as untrusted display data.
- See SECURITY.md for the full threat model, including how
context/requestMeta rendering and Copy-for-AI are contained, and how to
report a vulnerability.
- The master list is fully keyboard-navigable (Tab between rows, Enter/Space
to open the detail pane).
CI
Every push/PR runs type-check, lint, a repo-specific secret scan
(towl_<type>_<hex> and a few other high-signal shapes, excluding the
intentional test fixtures in src/test/**), the extension test suite,
npm audit, and a .vsix packaging + inspection step (see
.github/workflows/ci.yml).
Release
Releases are fully automated and version-driven, mirroring the SDKs:
- Bump
version in package.json and update CHANGELOG.md.
- Merge to
main → release.yml checks
whether v<version> is already tagged and whether that version is already
live on the Marketplace and on Open VSX.
- For anything still missing, it runs the full CI suite, packages the
.vsix, tags v<version>, and publishes to whichever registry (or both)
doesn't have that version yet.
No manual vsce publish / ovsx publish is needed. The workflow is
idempotent — re-running it (e.g. via workflow_dispatch) after a partial
failure only retries the registry that didn't succeed.
Setup requirements (one-time, done by a maintainer):
VSCE_PAT repo secret — an Azure DevOps PAT scoped to Marketplace ▸
Manage, for the tinyowlkit publisher.
OVSX_PAT repo secret — an Open VSX access token for the tinyowlkit
namespace.
Development
npm install
npm run watch # esbuild + tsc in watch mode
Press F5 in VS Code to launch an Extension Development Host.
Following extension guidelines
Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
Working with Markdown
You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
- Split the editor (
Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
- Toggle preview (
Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
- Press
Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.
Enjoy!