# HOWL Bot Widget Wireframes — pymc_console

# 🤖 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

### WeatherMultidayWidget

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

`wx 3` `gwx 5`

🤖
HowlBot 🤖 bot

### WeatherHourlyWidget

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

`wx hourly`

🤖
HowlBot 🤖 bot

### AqiWidget

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

`aqi`

🤖
HowlBot 🤖 bot

### SolarWidget

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

`solar`

🤖
HowlBot 🤖 bot

### HfCondWidget

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

`hfcond`

🤖
HowlBot 🤖 bot

### SunWidget

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

`sun`

🤖
HowlBot 🤖 bot

### MoonWidget

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

`moon`

🤖
HowlBot 🤖 bot

### SatPassWidget

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

`satpass`

🤖
HowlBot 🤖 bot

### AuroraWidget

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

`aurora`

🤖
HowlBot 🤖 bot

### PathWidget

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

`path` `decode`

🤖
HowlBot 🤖 bot

### TestWidget

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

`test` `t`

🤖
HowlBot 🤖 bot

### StatsWidget

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

`stats`

🤖
HowlBot 🤖 bot

### SportsWidget

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

`sports` `scores`

🤖
HowlBot 🤖 bot

## Tier 2 — Enhanced Text Widgets

### WeatherAlertWidget

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

`⚠️ alert response`

🤖
HowlBot 🤖 bot

### AlertWidget

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

`alert`

🤖
HowlBot 🤖 bot

### JokeWidget

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

`joke` `dadjoke`

🤖
HowlBot 🤖 bot

### DiceWidget

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

`dice` `roll`

🤖
HowlBot 🤖 bot

### CatFactWidget

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

`catfact` `meow`

🤖
HowlBot 🤖 bot

## 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

## 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

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.