{empty ? (
Budget spent — more adds to the bill
) : liveWatts === 0 ? (
Idle — budget holding steady
) : coasts ? (
Coasting — lasts all day
) : (
{fmt(runwayHrs)} left at this rate
)}
);
}
// StatusSheet — explains the daily-budget pace status when the chip is tapped.
function StatusSheet({ c, state, remaining, budget, spent, onClose }) {
const cfg = {
ontrack: { title: "You're on track", Icon: IcLeaf, fg: '#2F6147', bg: c.goodSoft,
line: "You've used less than expected for this time of day. Keep it up and you'll beat your monthly goal." },
watch: { title: 'Watch your pace', Icon: IcClock, fg: '#7C5A1B', bg: c.warnSoft,
line: "You're using power a little faster than planned. Ease off now and you'll still finish the day on budget." },
over: { title: "Today's budget is spent", Icon: IcWarn, fg: '#7A2A1F', bg: c.dangerSoft,
line: "You've used your full budget for today. Anything more adds to this month's bill — try a quick quest to claw it back." },
}[state];
const pct = Math.max(0, Math.min(100, Math.round((remaining / budget) * 100)));
return (
${remaining.toFixed(2)} of ${budget.toFixed(2)} left · {pct}%
{cfg.line}
Got it
);
}
function ExplainRow({ c, Icon, title, value, sub }) {
return (
{title}
{sub}
{value}
);
}
// Default device set for a 4-room HDB flat — three aircons across rooms,
// a water heater, and an always-on fridge.
const DEFAULT_DEVICES = [
{ key: 'ac-living', name: 'Living', kind: 'ac', watts: 1180, on: true },
{ key: 'ac-bed', name: 'Bedroom', kind: 'ac', watts: 1100, on: false },
{ key: 'ac-study', name: 'Study', kind: 'ac', watts: 980, on: false },
{ key: 'water', name: 'Heater', kind: 'water', watts: 2100, on: false },
{ key: 'fridge', name: 'Fridge', kind: 'fridge', watts: 95, on: true, lockedOn: true },
];
// TipHero — one clean visual tile: a thermostat ring showing the target temp,
// the action in a few words, reward badges, and a full-width Set button.
function TipHero({ c, onDo, onSkip }) {
const [pressed, setPressed] = React.useState(false);
const target = 25, now = 24;
// Full ring gauge (270° sweep), knob at the target position.
const size = 96, stroke = 9, R = (size - stroke) / 2, C = size / 2;
const circ = 2 * Math.PI * R;
const sweep = 0.75; // 270° visible
const gap = circ * (1 - sweep);
const rot = 90 + (1 - sweep) * 180;
// Map a temperature (18–30°C) onto the arc fraction.
const tempFrac = (temp) => (temp - 18) / (30 - 18);
const nowFrac = tempFrac(now), targetFrac = tempFrac(target);
return (
{/* header row */}
QUICK WIN
{/* body: simple temp visual + text */}
{/* clean thermostat chip: now → goal */}
{now}°NOW
{target}°GOAL
Aircon
One degree warmer
$0.90+25
{/* full-width action */}
);
}
// QuestTile — glanceable, visual quest chip for the Home preview. Mirrors the
// appliance tiles above it: one big icon, a 2-word action, the reward, and the
// whole tile is tappable to mark it done. No timers or long copy.
function QuestTile({ c, m, onComplete, wide }) {
const Icon = m.icon;
const done = m.state === 'done';
const expired = m.state === 'expired';
const active = m.state === 'active';
const tone = done ? { bg: c.primarySoft, fg: c.primary }
: active ? { bg: c.accentSoft, fg: c.accent }
: { bg: c.primarySoft, fg: c.primary };
const iconBox = (