Hydrogen Tips & Tricks

@@ -1,19 +1,76 @@ --- name: hydrogen-tips-and-tricks-description: "Reference guide and idea tracker for YouTube videos highlighting cool things to do with Adom Hydrogen and Adom Bridge. Covers making custom Hydrogen widgets, building bridges with the Bridge SDK, generating AI avatars, using the built-in pencil markup tool for visual AI debugging, Adom Bridge mesh multi-machine control, and high-performance H.264/H.265 screen recording. Trigger words: hydrogen tips, cool things to do with hydrogen, hydrogen video, hydrogen tricks, hydrogen youtube, make a hydrogen widget, custom bridge, bridge sdk, ai avatar, pencil icon hydrogen, draw circles hydrogen, adom bridge mesh, record h264 h265."+description: "Reference guide and production tracker for YouTube video episodes and power-user tips on Adom Hydrogen and Adom Bridge. Use when the user asks for tips, tricks, demo ideas, or tutorials on Adom Hydrogen; when planning or authoring YouTube videos about Hydrogen; or when looking up how to build custom Hydrogen widgets, create custom bridges with the Bridge SDK, design AI vector avatars, use the built-in pencil markup tool for visual bug reporting, leverage Adom Bridge Mesh for multi-machine control, or record hardware-accelerated H.264/H.265 video. Trigger words: hydrogen tips, cool things to do with hydrogen, hydrogen video, hydrogen tricks, hydrogen youtube, make a hydrogen widget, custom bridge, bridge sdk, ai avatar, pencil icon hydrogen, draw circles hydrogen, adom bridge mesh, record h264 h265." --- -# Hydrogen Tips & Tricks+# Hydrogen Tips & Tricks: Cool Things to Do with Hydrogen -A reference guide and idea tracker for YouTube videos highlighting power features, developer tips, and creative workflows in Adom Hydrogen and Adom Bridge.+A comprehensive guide and topic tracker for YouTube video content and power-user demonstrations exploring the deepest features of **Adom Hydrogen** and **Adom Bridge**. -## Covered Topics+---++## 1. Custom Hydrogen Widgets+Build interactive, drop-in web components that integrate directly into Hydrogen's webviews and wiki pages.+- **Architecture:** Standard HTML Custom Elements (`customElements.define`) isolated via Shadow DOM.+- **Styling:** CSS variables referencing Hydrogen's theme palette (`--color-bg-primary`, `--color-text-primary`, `--color-accent`) ensuring automatic dark/light theme adaptation.+- **Data Feeding Models:**+  - *Inline JSON:* Enclosed in `<script type="application/json">` blocks within the custom element tag. Essential for sandboxed wiki `readme.html` iframes where outbound fetch is blocked.+  - *DOM Property Binding:* Setting `element.data = { ... }` directly from parent scripts.+  - *Fetch Mode:* Standard REST/JSON fetching when running inside unsandboxed Hydrogen tabs.+- **Wiki Markdown Tags:** Registered tags such as `::adom-pinout{}`, `::adom-molecule{}`, or custom widget tags allow authors to drop rich visuals into markdown with single-line tags.++---++## 2. Building Bridges with the Adom Bridge SDK+Extend Hydrogen's AI assistant with hands on the desktop to automate EDA software, 3D CAD, or local instruments.+- **Manifest (`bridge.json`):**+  - `verbPrefixes`: Namespace for commands exposed to the AI (e.g., `altium_*`, `kicad_*`, `scope_*`).+  - `spawn`: Execution runtime (`python`, `node`, `exe`, or `external-http`).+  - `persistent`: Keep processes running across multiple calls to preserve state.+  - `detect`: Automatic detection of target desktop applications.+- **The Verb Contract:**+  - Bridges receive JSON command payloads from the agent over local IPC or WebSocket relay.+  - Responses return `{ ok: true, data: ..., hint: ... }` with standard error codes and millisecond timing.++---++## 3. Creating AI Persona Avatars+Generate distinctive vector artwork and personal avatars directly inside Hydrogen with AI.+- **Styling Guidelines:** Prompt the AI to produce clean, hand-authored SVG illustrations (e.g. tech CEO, lab scientist, spiky hair, lab coat, electronics accessories).+- **Format:** Pure vector SVG source code with embedded CSS and discrete layers for scalability.+- **Packaging:** Store vector source in a dedicated app repository (such as `john/avatar`) and generate 512x512 profile renders for use across Hydrogen chat threads, wiki user cards, and documentation headers. -1. **Custom Hydrogen Widgets:** Web component architecture, Shadow DOM, dark/light theme support, inline JSON data feeding, and wiki integration.-2. **Bridge SDK Development:** `bridge.json` configuration, runtime lifecycle (python, node, exe), verb contracts, and desktop automation.-3. **AI Persona Avatars:** Crafting stylized vector SVG avatars using AI, SVG packaging, and profile integration.-4. **Hydrogen Pencil Markup:** The native pencil drawing tool for freehand colored annotations, grounding AI multimodal reasoning on specific layout/UI errors.-5. **Adom Bridge Mesh:** Peer discovery via Carbon KV + mDNS, direct QUIC connections, multi-machine `--target` execution, mirrored approval prompts, and the Mesh View UI.-6. **Native H.264 & H.265 Screen Recording:** Hardware-accelerated recording via Adom Bridge (`desktop_record_start`), HEVC compression benefits, and audio loopback.+---++## 4. Visual AI Bug Reporting with the Built-in Pencil Tool+Skip typing lengthy coordinate descriptions by drawing directly on screen for the AI.+- **The Pencil Tool:** Located in Hydrogen's interface to open an instant drawing and markup overlay.+- **Color Coding:** Use distinct colored strokes and circles to categorize feedback:+  - *Red:* Hard errors, DRC violations, trace shorts, collision points.+  - *Yellow/Orange:* Clearance warnings, layout concerns, thermal chokepoints.+  - *Green/Cyan:* Proposed routing corridors, preferred component placements.+- **Multimodal Context:** When sent, Hydrogen captures the annotated frame and binds it to the conversation context so the AI visually grounds its answer directly on the marked regions.++---++## 5. Adom Bridge Mesh: Multi-Machine Orchestration+Harness multiple physical workstations, laptops, and virtual machines simultaneously under one user account.+- **Node Identities:** Every bridge instance generates a unique Ed25519 identity key (`~/.adom/mesh/node.key`).+- **Discovery:** Machines on the same LAN discover each other over mDNS; remote machines sync via Carbon KV directory records.+- **Encrypted Transport:** Direct peer-to-peer QUIC streams via iroh with automatic TLS fallback over the Adom-hosted cloud relay.+- **Peer Operations:**+  - `--target <machine>` routes CLI verbs and AI tasks directly to remote hardware.+  - `pull_file --target <machine>` streams screenshots and artifacts peer-to-peer without cloud bandwidth limits.+  - **Mirrored Approvals:** Security prompt cards mirror across all fleet nodes; approve an operation running on a remote lab rig from your laptop.+  - **Mesh View Panel:** Launch `desktop_ui_panel {"panel":"mesh"}` to inspect live network topology, latencies, and container nodes.++--- -See `README.md` for full episode outlines and production flow.+## 6. High-Performance Screen Recording (H.264 & H.265 / HEVC)+Produce broadcast-quality demo recordings directly from Adom Bridge.+- **Native Recorder:** `desktop_record_start` records directly using Windows Graphics Capture and WASAPI loopback audio.+- **Codec Choices:**+  - `h264`: Default encoder for maximum universal compatibility.+  - `h265`: High Efficiency Video Coding (HEVC) providing ~40% file size reduction at identical quality.+- **Hardware Acceleration:** Leverages Media Foundation Transforms (MFT) mapped to GPU encoders (NVIDIA NVENC, Intel Quick Sync, AMD AMF).+- **Etiquette:** Features a non-distorting 4x4 pixel teal corner square as a minimal recording tell, with window-background capture options available.