# Benweatherall Vscode Python Ast Extension AI Context Webview UI

> ---

- Skill: `tomevault-io/benweatherall-vscode-python-ast-extension-ai-context-webview` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/benweatherall-vscode-python-ast-extension-ai-context-webview`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/benweatherall-vscode-python-ast-extension-ai-context-webview/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/benweatherall-vscode-python-ast-extension-ai-context-webview

---

---
name: ai-context-webview-ui
description: Guides the ai-context-writer subagent in generating and maintaining AI_CONTEXT_WEBVIEW_UI.md, documenting the webview-ui React + Rete.js architecture, message handling, node components, styling, and testing approach for the python-vis project. Use when creating or updating the webview UI AI context file.
---

# AI Context Webview UI Skill

## Purpose

Help the `ai-context-writer` subagent create and maintain `docs/AI_CONTEXT/AI_CONTEXT_WEBVIEW_UI.md` as the **component-level reference** for the `webview-ui/` React + Rete graph editor:

- How the webview is bootstrapped
- How messages are handled
- How graphs are rendered and updated
- How node components map to AST node types
- How styling and theming work

## Sources to Read

Before updating the webview UI context, read:

- `@webview-ui/src/index.tsx`
- `@webview-ui/src/App.tsx`
- `@webview-ui/src/editor.tsx`
- `@webview-ui/src/types.ts`
- `@webview-ui/src/conversion.ts` (if used)
- `@webview-ui/src/nodes/` components and `nodes/index.ts`
- `@webview-ui/src/index.css` and `@webview-ui/src/components/NodeStyles.css`
- Relevant tests under `@tests/` (if any target webview behavior)

Optionally cross-check with:

- `@src/types.ts` for shared message and graph types.

## Required Sections in AI_CONTEXT_WEBVIEW_UI.md

Include at least:

1. **Metadata**
   - Version
   - Last Updated (ISO date)
   - Tags including `webview-ui`, `react`, `rete`
   - Cross-References to repository and extension-host AI_CONTEXT docs

2. **Module Overview**
   - Roles of:
     - `index.tsx`
     - `App.tsx`
     - `editor.tsx`
     - `types.ts`
     - `nodes/` and `components/`

3. **Bootstrap & Lifecycle**
   - How `index.tsx` sets up the React root and connects to VS Code’s `acquireVsCodeApi`.
   - How `App.tsx` initializes `ReteASTEditor` and listens for messages via `window.addEventListener("message", ...)`.

4. **Message Handling**
   - Types of messages expected from the extension:
     - `updateGraph`
     - `error`
     - `loading`
   - Messages the webview sends back:
     - `navigateToSource`
     - `retry`
   - How each message affects local React state and the editor.

5. **Graph Rendering (editor.tsx)**
   - How `ReteASTEditor`:
     - Initializes the Rete editor, area, connection, and React plugins.
     - Transforms `ReteGraph` into Rete nodes and connections.
     - Applies node positions and zoom-to-fit behavior.
   - How node click handlers are wired to send `navigateToSource` messages.

6. **Node Components (nodes/)**
   - How `ASTNode.tsx` serves as the base visual component.
   - How specialized nodes (`BinOpNode`, `CallNode`, `ClassDefNode`, `FunctionDefNode`, `NameNode`, etc.) extend the base.
   - How `nodes/index.ts` maps `ast_type` strings to concrete components.

7. **Styling & Theming**
   - Use of VS Code theme variables for colors.
   - Role of `index.css` and `NodeStyles.css`.
   - Any important class names (e.g. `.ast-node-wrapper`) that other agents might rely on.

8. **Testing & Diagnostics (if available)**
   - Describe how UI behavior is tested (if tests exist).
   - Mention how to debug message flow or graph rendering from within the webview.

## Style & Constraints

- Focus on **behavior and integration** rather than React basics.
- Use concise descriptions and reference actual prop names and type names from `types.ts`.
- Provide small code snippets for message payload shapes and example message handlers.
- Keep the file within the content length limit; split into sub-documents if the webview grows significantly.

## Update Strategy

When the webview UI changes:

1. Update message type lists and their behavior.
2. Add or update node component mappings.
3. Refresh styling/theming notes if CSS structure changes.
4. Adjust descriptions of initialization and lifecycle to match the current `App.tsx` and `editor.tsx`.
5. Bump version and last-updated metadata.


---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/benweatherall) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-14 -->