πŸ€– HOWL Bot Widget Wireframes

First-draft SVG sketches for inline companion chat widgets β€” pymc_console

Tier 1 β€” Rich Visual Widgets

WeatherWidget

iOS-style weather card with condition gradient, large temp, detail pills, hi/lo bar, tomorrow preview.

wx gwx

πŸ€–
HowlBot πŸ€– bot
πŸ€– Portland, OR β˜€οΈ 75Β° Sunny πŸ’¨ NW 10 πŸ’§ 45% πŸ‘οΈ 10mi πŸ“Š 30.12 L 55Β° H 78Β° Tomorrow ☁️ Cloudy 70Β° / 58Β°

WeatherMultidayWidget

Horizontal scrollable day forecast cards. Each day: abbreviation, emoji, hi/lo temps.

wx 3 gwx 5

πŸ€–
HowlBot πŸ€– bot
πŸ€– Mon β˜€οΈ 75Β° 55Β° Tue β›… 68Β° 52Β° Wed 🌧️ 62Β° 48Β° Thu ☁️ 65Β° 50Β° Fri β˜€οΈ 72Β° 54Β°

WeatherHourlyWidget

Horizontal hour pills: time, emoji, temp, precip%. Optional signal score overlay.

wx hourly

πŸ€–
HowlBot πŸ€– bot
πŸ€– 10AM 🌦️ 49Β° 26% 11AM ☁️ 51Β° 12% 12PM β›… 54Β° 5% 1PM β˜€οΈ 57Β° β€” 2PM β˜€οΈ 59Β° β€” 3PM β˜€οΈ 58Β° β€”

AqiWidget

Arc gauge with AQI value + EPA color. Category label. Pollutant breakdown pills below.

aqi

πŸ€–
HowlBot πŸ€– bot
πŸ€– Portland, OR 42 Good PM2.5: 10 PM10: 15 O₃: 28 NOβ‚‚: 5 CO: 200 Good Mod USG Unhl VUnhl Haz

SolarWidget

Key-value grid for solar indices. K-Index gets color coding (green→red).

solar

πŸ€–
HowlBot πŸ€– bot
πŸ€– β˜€οΈ Solar Conditions A-Index 5 K-Index 2 Sunspots 120 X-Ray Flux C1.5 Solar Flux 150 Signal Noise S3

HfCondWidget

Two-column day/night HF band conditions. Each band as a colored status pill.

hfcond

πŸ€–
HowlBot πŸ€– bot
πŸ€– πŸ“‘ HF Band Conditions β˜€οΈ DAY 80m–40m Good 30m–20m Good 17m–15m Fair πŸŒ™ NIGHT 80m–40m Poor 30m–20m Poor 17m–15m Poor

SunWidget

Sun arc SVG showing current position along the rise→set trajectory. Daylight + remaining readout.

sun

πŸ€–
HowlBot πŸ€– bot
πŸ€– β˜€οΈ πŸŒ… 6:42a πŸŒ‡ 7:15p β˜€οΈ 12h 33m ⏳ 5h 22m left Az 245Β° Alt 35Β°

MoonWidget

Large moon phase emoji + illumination ring. Rise/set, next full/new moon dates.

moon

πŸ€–
HowlBot πŸ€– bot
πŸ€– πŸŒ– 68% Waning Gibbous Rise Mon 6:47 PM Set Tue 3:43 AM πŸŒ• Full Mon Sep 7 9:15p πŸŒ‘ New Sun Sep 21 3:30a

SatPassWidget

Satellite pass arc with compass directions. Rise→peak→set timeline. Max elevation callout.

satpass

πŸ€–
HowlBot πŸ€– bot
πŸ€– πŸ›°οΈ ISS Mon 15 Β· 12m 15s pass 75Β° NW N SE 6:42 PM 6:54 PM

AuroraWidget

KP index with color scale gauge. Probability bar + location. Aurora-themed gradient.

aurora

πŸ€–
HowlBot πŸ€– bot
πŸ€– 🌌 Aurora Forecast Β· Seattle Mar 15 2PM 3.2 KP Index Quiet 0 3 5 7 9 Probability 18%

PathWidget

Reuses existing CompanionPathMap auto-expanded. Hop badges with confidence indicators above the map.

path decode

πŸ€–
HowlBot πŸ€– bot
πŸ€– πŸ—ΊοΈ Path Decode AB β†’ Hilltop 🎯 β€Ί CD β†’ MtHood πŸ“ β€Ί EF β†’ ? CompanionPathMap

TestWidget

Signal quality card with SNR bars, hop count, path, distance. Clean data-box layout.

test t

πŸ€–
HowlBot πŸ€– bot
πŸ€– πŸ“Ά Link Test +6.5 SNR dB -82 dBm Echo phrase "Hello mesh!" Hops 3 Path AB β†’ CD β†’ EF Distance 14.2 km

StatsWidget

Two modes: summary counts (cmds/replies/top) or leaderboard with micro bar chart.

stats

πŸ€–
HowlBot πŸ€– bot
πŸ€– πŸ“Š Bot Stats (24h) Commands 42 Replies 40 Top Cmd wx (15) Top Users 1. NodeAlpha 8 2. BetaNode 5 3. GammaRepeater 3

SportsWidget

Game score cards stacked vertically. Live games pulse, final games badge, scheduled show time.

sports scores

πŸ€–
HowlBot πŸ€– bot
πŸ€– πŸ† Scores 🏈 SEA 24 – SF 17 4th Β· 8:42 ⚾ SEA 5 – OAK 3 Final W

Tier 2 β€” Enhanced Text Widgets

WeatherAlertWidget

Amber/red gradient banner. Severity-colored left border. Expandable truncation for long alerts.

⚠️ alert response

πŸ€–
HowlBot πŸ€– bot
πŸ€– ⚠️ WIND ADVISORY NW winds 25-35 mph with gusts to 50 mph until 6PM PST tap to expand β€Ί

AlertWidget

Standalone NWS alert card (from alert command). Red variant for severe.

alert

πŸ€–
HowlBot πŸ€– bot
πŸ€– 🚨 TORNADO WARNING Take shelter immediately. Tornado confirmed in your area until 4:30 PM.

JokeWidget

Card with emoji header. Two-part jokes: setup visible, delivery revealed on tap with a subtle slide animation.

joke dadjoke

πŸ€–
HowlBot πŸ€– bot
πŸ€– 🎭 Joke Why do programmers prefer dark mode? Because light attracts bugs! πŸ›

DiceWidget

Dice emoji + die type label, individual results in circles, total. Supports mixed dice.

dice roll

πŸ€–
HowlBot πŸ€– bot
πŸ€– 🎲 2d6 3 + 5 = 8

CatFactWidget

Subtle cat-themed card with paw print motif. Fact text + trailing emoji preserved.

catfact meow

πŸ€–
HowlBot πŸ€– bot
πŸ€– 🐾 🐱 Cat Fact Cats can rotate their ears 180Β° independently to pinpoint sounds. πŸ‘‚

Tier 3 β€” Styled Bot Text Fallback

BotTextWidget

For ping, magic8, and any unclassified bot response. Visually distinct from normal bubbles with subtle bot indicator + glass card treatment.

ping magic8 fallback

πŸ€–
HowlBot πŸ€– bot
πŸ€– bot response Pong! πŸ€– bot response 🎱 Signs point to yes

Unified Container β€” BotWidgetContainer

Container Anatomy

Every widget sits inside this container. Provides: glass card, πŸ€– badge, consistent padding, rounded corners matching ChatBubble's rounded-2xl rounded-tl-md.

Replaces ChatBubble's inner <div> β€” avatar + sender name row stays from the existing layout.

πŸ€–
HowlBot πŸ€– bot
πŸ€– bot Widget Content Area SVGs Β· Custom Fonts Β· Canvas Β· HTML padding 16px radius-inset (12px) Β· bg-surface/80 Β· backdrop-blur Β· ring-edge-subtle

HOWL Bot Wireframes v0.1 β€” First-draft sketches for collaboration. All colors reference pymc_console CSS variables (sys-*, zinc-*). Open this file in a browser to preview.