first commit - skeletal frame

2026-01-31 04:07:32 +00:00
parent 7d12f5fddf
commit a582e1f272
32 changed files with 2043 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,4 @@
+UDR_IP=192.168.1.1
+UDR_USER=admin
+UDR_PASSWORD=changeme
+APP_SECRET_KEY=changeme
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,8 @@
+node_modules/
+dist/
+.env
+data/*.json
+*.log
+.DS_Store
+CLAUDE.md
+.env
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -0,0 +1,7 @@
+FROM node:20-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm install --omit=dev
+COPY src/ ./src/
+EXPOSE 3001
+CMD ["node", "src/index.js"]
--- a/backend/package.json
+++ b/backend/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "barkwho-backend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "node --watch src/index.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "axios": "^1.6.7",
+    "node-cron": "^3.0.3",
+    "cors": "^2.8.5",
+    "uuid": "^9.0.0"
+  }
+}
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -0,0 +1,51 @@
+import express from 'express';
+import cors from 'cors';
+import { login } from './services/unifiClient.js';
+import { loadPolicies } from './services/policyEngine.js';
+import { loadTimers } from './services/timerService.js';
+import { loadCurfew } from './services/curfewService.js';
+import policiesRouter from './routes/policies.js';
+import devicesRouter from './routes/devices.js';
+import timersRouter from './routes/timers.js';
+import curfewRouter from './routes/curfew.js';
+import rulesRouter from './routes/rules.js';
+
+const app = express();
+const PORT = 3001;
+
+app.use(cors());
+app.use(express.json());
+
+app.use('/api/policies', policiesRouter);
+app.use('/api/devices', devicesRouter);
+app.use('/api/timers', timersRouter);
+app.use('/api/curfew', curfewRouter);
+app.use('/api/rules', rulesRouter);
+
+app.get('/api/health', (req, res) => {
+  res.json({ status: 'ok', timestamp: Date.now() });
+});
+
+async function startup() {
+  console.log('[BarkWho] Starting backend...');
+
+  // Load persistent state first
+  loadPolicies();
+  loadTimers();
+  loadCurfew();
+
+  // Attempt UDR authentication (non-blocking if no creds)
+  const authed = await login();
+  if (!authed) {
+    console.warn('[BarkWho] Running without UDR connection - configure .env to connect');
+  }
+
+  app.listen(PORT, '0.0.0.0', () => {
+    console.log(`[BarkWho] Backend listening on port ${PORT}`);
+  });
+}
+
+startup().catch((err) => {
+  console.error('[BarkWho] Startup failed:', err);
+  process.exit(1);
+});
--- a/backend/src/routes/curfew.js
+++ b/backend/src/routes/curfew.js
@@ -0,0 +1,34 @@
+import { Router } from 'express';
+import { getCurfew, updateCurfew, overrideCurfew } from '../services/curfewService.js';
+
+const router = Router();
+
+router.get('/', (req, res) => {
+  try {
+    res.json(getCurfew());
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.put('/', (req, res) => {
+  try {
+    const result = updateCurfew(req.body);
+    res.json(result);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post('/override', (req, res) => {
+  try {
+    const { minutes } = req.body;
+    if (!minutes) return res.status(400).json({ error: '"minutes" is required' });
+    const result = overrideCurfew(Number(minutes));
+    res.json(result);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+export default router;
--- a/backend/src/routes/devices.js
+++ b/backend/src/routes/devices.js
@@ -0,0 +1,35 @@
+import { Router } from 'express';
+import { getClients, blockClient, unblockClient } from '../services/unifiClient.js';
+
+const router = Router();
+
+router.get('/', async (req, res) => {
+  try {
+    const clients = await getClients();
+    res.json(clients);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post('/:mac/nuke', async (req, res) => {
+  try {
+    const { mac } = req.params;
+    const result = await blockClient(decodeURIComponent(mac));
+    res.json({ mac, blocked: true, result });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post('/:mac/unnuke', async (req, res) => {
+  try {
+    const { mac } = req.params;
+    const result = await unblockClient(decodeURIComponent(mac));
+    res.json({ mac, blocked: false, result });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+export default router;
--- a/backend/src/routes/policies.js
+++ b/backend/src/routes/policies.js
@@ -0,0 +1,63 @@
+import { Router } from 'express';
+import { getCategories, toggleCategory, assignRules, addCategory, deleteCategory } from '../services/policyEngine.js';
+
+const router = Router();
+
+router.get('/', async (req, res) => {
+  try {
+    const categories = await getCategories();
+    res.json(categories);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post('/:category/toggle', async (req, res) => {
+  try {
+    const { category } = req.params;
+    const { allowed } = req.body;
+    if (typeof allowed !== 'boolean') {
+      return res.status(400).json({ error: '"allowed" must be a boolean' });
+    }
+    const results = await toggleCategory(decodeURIComponent(category), allowed);
+    res.json({ category, allowed, results });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.put('/:category/rules', (req, res) => {
+  try {
+    const { category } = req.params;
+    const { ruleIds } = req.body;
+    if (!Array.isArray(ruleIds)) {
+      return res.status(400).json({ error: '"ruleIds" must be an array' });
+    }
+    const result = assignRules(decodeURIComponent(category), ruleIds);
+    res.json(result);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post('/', (req, res) => {
+  try {
+    const { name, icon } = req.body;
+    if (!name) return res.status(400).json({ error: '"name" is required' });
+    const result = addCategory(name, icon);
+    res.json(result);
+  } catch (err) {
+    res.status(400).json({ error: err.message });
+  }
+});
+
+router.delete('/:category', (req, res) => {
+  try {
+    deleteCategory(decodeURIComponent(req.params.category));
+    res.json({ success: true });
+  } catch (err) {
+    res.status(400).json({ error: err.message });
+  }
+});
+
+export default router;
--- a/backend/src/routes/rules.js
+++ b/backend/src/routes/rules.js
@@ -0,0 +1,16 @@
+import { Router } from 'express';
+import { getTrafficRules } from '../services/unifiClient.js';
+
+const router = Router();
+
+router.get('/', async (req, res) => {
+  try {
+    const rules = await getTrafficRules();
+    const list = Array.isArray(rules) ? rules : rules?.data || [];
+    res.json(list);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+export default router;
--- a/backend/src/routes/timers.js
+++ b/backend/src/routes/timers.js
@@ -0,0 +1,36 @@
+import { Router } from 'express';
+import { getTimers, createTimer, cancelTimer } from '../services/timerService.js';
+
+const router = Router();
+
+router.get('/', (req, res) => {
+  try {
+    res.json(getTimers());
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post('/', async (req, res) => {
+  try {
+    const { category, minutes } = req.body;
+    if (!category || !minutes) {
+      return res.status(400).json({ error: '"category" and "minutes" are required' });
+    }
+    const timer = await createTimer(category, Number(minutes));
+    res.json(timer);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.delete('/:id', (req, res) => {
+  try {
+    const timer = cancelTimer(req.params.id);
+    res.json({ cancelled: true, timer });
+  } catch (err) {
+    res.status(400).json({ error: err.message });
+  }
+});
+
+export default router;
--- a/backend/src/services/curfewService.js
+++ b/backend/src/services/curfewService.js
@@ -0,0 +1,124 @@
+import fs from 'fs';
+import path from 'path';
+import cron from 'node-cron';
+import { toggleCategory } from './policyEngine.js';
+
+const DATA_PATH = '/data/curfew.json';
+
+const DEFAULT_CURFEW = {
+  enabled: true,
+  blockTime: '21:00',
+  unblockTime: '07:00',
+  categories: ['Social Media', 'Streaming', 'Gaming'],
+  overrideUntil: null,
+};
+
+let curfewConfig = {};
+let blockJob = null;
+let unblockJob = null;
+
+export function loadCurfew() {
+  try {
+    if (fs.existsSync(DATA_PATH)) {
+      const raw = fs.readFileSync(DATA_PATH, 'utf-8');
+      curfewConfig = JSON.parse(raw);
+      console.log('[Curfew] Loaded curfew config from disk');
+    } else {
+      curfewConfig = { ...DEFAULT_CURFEW };
+      saveCurfew();
+      console.log('[Curfew] Created default curfew config');
+    }
+  } catch (err) {
+    console.error('[Curfew] Error loading curfew:', err.message);
+    curfewConfig = { ...DEFAULT_CURFEW };
+  }
+  scheduleCurfew();
+}
+
+function saveCurfew() {
+  const dir = path.dirname(DATA_PATH);
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(DATA_PATH, JSON.stringify(curfewConfig, null, 2));
+}
+
+function timeToCron(timeStr) {
+  const [hours, minutes] = timeStr.split(':').map(Number);
+  return `${minutes} ${hours} * * *`;
+}
+
+function scheduleCurfew() {
+  if (blockJob) { blockJob.stop(); blockJob = null; }
+  if (unblockJob) { unblockJob.stop(); unblockJob = null; }
+
+  if (!curfewConfig.enabled) {
+    console.log('[Curfew] Curfew is disabled');
+    return;
+  }
+
+  const blockCron = timeToCron(curfewConfig.blockTime);
+  const unblockCron = timeToCron(curfewConfig.unblockTime);
+
+  blockJob = cron.schedule(blockCron, async () => {
+    if (isOverrideActive()) {
+      console.log('[Curfew] Override active, skipping block');
+      return;
+    }
+    console.log('[Curfew] Bedtime! Blocking categories...');
+    for (const cat of curfewConfig.categories) {
+      try {
+        await toggleCategory(cat, false);
+      } catch (err) {
+        console.error(`[Curfew] Failed to block ${cat}:`, err.message);
+      }
+    }
+  });
+
+  unblockJob = cron.schedule(unblockCron, async () => {
+    console.log('[Curfew] Good morning! Unblocking categories...');
+    curfewConfig.overrideUntil = null;
+    saveCurfew();
+    for (const cat of curfewConfig.categories) {
+      try {
+        await toggleCategory(cat, true);
+      } catch (err) {
+        console.error(`[Curfew] Failed to unblock ${cat}:`, err.message);
+      }
+    }
+  });
+
+  console.log(`[Curfew] Scheduled: block at ${curfewConfig.blockTime}, unblock at ${curfewConfig.unblockTime}`);
+}
+
+function isOverrideActive() {
+  if (!curfewConfig.overrideUntil) return false;
+  if (Date.now() < curfewConfig.overrideUntil) return true;
+  curfewConfig.overrideUntil = null;
+  saveCurfew();
+  return false;
+}
+
+export function getCurfew() {
+  return {
+    ...curfewConfig,
+    overrideActive: isOverrideActive(),
+  };
+}
+
+export function updateCurfew(updates) {
+  Object.assign(curfewConfig, updates);
+  saveCurfew();
+  scheduleCurfew();
+  return getCurfew();
+}
+
+export function overrideCurfew(minutes) {
+  curfewConfig.overrideUntil = Date.now() + minutes * 60 * 1000;
+  saveCurfew();
+  // Unblock categories during override
+  for (const cat of curfewConfig.categories) {
+    toggleCategory(cat, true).catch((err) =>
+      console.error(`[Curfew] Override unblock failed for ${cat}:`, err.message)
+    );
+  }
+  return getCurfew();
+}
--- a/backend/src/services/policyEngine.js
+++ b/backend/src/services/policyEngine.js
@@ -0,0 +1,109 @@
+import fs from 'fs';
+import path from 'path';
+import { getTrafficRules, getTrafficRule, updateTrafficRule } from './unifiClient.js';
+
+const DATA_PATH = '/data/policy_map.json';
+
+const DEFAULT_CATEGORIES = {
+  'Social Media': { ruleIds: [], icon: 'social' },
+  'Streaming': { ruleIds: [], icon: 'streaming' },
+  'Adult Content': { ruleIds: [], icon: 'adult' },
+  'Gaming': { ruleIds: [], icon: 'gaming' },
+};
+
+let policyMap = {};
+
+export function loadPolicies() {
+  try {
+    if (fs.existsSync(DATA_PATH)) {
+      const raw = fs.readFileSync(DATA_PATH, 'utf-8');
+      policyMap = JSON.parse(raw);
+      console.log('[PolicyEngine] Loaded policy map from disk');
+    } else {
+      policyMap = structuredClone(DEFAULT_CATEGORIES);
+      savePolicies();
+      console.log('[PolicyEngine] Created default policy map');
+    }
+  } catch (err) {
+    console.error('[PolicyEngine] Error loading policies:', err.message);
+    policyMap = structuredClone(DEFAULT_CATEGORIES);
+  }
+}
+
+function savePolicies() {
+  const dir = path.dirname(DATA_PATH);
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(DATA_PATH, JSON.stringify(policyMap, null, 2));
+}
+
+export async function getCategories() {
+  const allRules = await getTrafficRules();
+  const ruleList = Array.isArray(allRules) ? allRules : allRules?.data || [];
+  const ruleMap = new Map(ruleList.map((r) => [r._id, r]));
+
+  const categories = {};
+  for (const [name, config] of Object.entries(policyMap)) {
+    const rules = config.ruleIds.map((id) => {
+      const rule = ruleMap.get(id);
+      return {
+        id,
+        name: rule?.description || rule?.name || id,
+        enabled: rule?.enabled ?? false,
+      };
+    });
+    // Category is "allowed" when ALL its rules are disabled (not blocking)
+    const allDisabled = rules.length === 0 || rules.every((r) => !r.enabled);
+    categories[name] = {
+      icon: config.icon,
+      ruleIds: config.ruleIds,
+      rules,
+      allowed: allDisabled,
+    };
+  }
+  return categories;
+}
+
+export async function toggleCategory(categoryName, allowed) {
+  const config = policyMap[categoryName];
+  if (!config) throw new Error(`Category "${categoryName}" not found`);
+
+  const results = [];
+  for (const ruleId of config.ruleIds) {
+    const rule = await getTrafficRule(ruleId);
+    if (!rule) {
+      results.push({ ruleId, success: false, error: 'Rule not found' });
+      continue;
+    }
+    // Inversion: UI "allowed" = rule disabled, UI "blocked" = rule enabled
+    rule.enabled = !allowed;
+    try {
+      await updateTrafficRule(ruleId, rule);
+      results.push({ ruleId, success: true });
+    } catch (err) {
+      results.push({ ruleId, success: false, error: err.message });
+    }
+  }
+  return results;
+}
+
+export function assignRules(categoryName, ruleIds) {
+  if (!policyMap[categoryName]) {
+    policyMap[categoryName] = { ruleIds: [], icon: 'custom' };
+  }
+  policyMap[categoryName].ruleIds = ruleIds;
+  savePolicies();
+  return policyMap[categoryName];
+}
+
+export function addCategory(name, icon = 'custom') {
+  if (policyMap[name]) throw new Error(`Category "${name}" already exists`);
+  policyMap[name] = { ruleIds: [], icon };
+  savePolicies();
+  return policyMap[name];
+}
+
+export function deleteCategory(name) {
+  if (!policyMap[name]) throw new Error(`Category "${name}" not found`);
+  delete policyMap[name];
+  savePolicies();
+}
--- a/backend/src/services/timerService.js
+++ b/backend/src/services/timerService.js
@@ -0,0 +1,116 @@
+import fs from 'fs';
+import path from 'path';
+import { v4 as uuidv4 } from 'uuid';
+import { toggleCategory } from './policyEngine.js';
+
+const DATA_PATH = '/data/timers.json';
+
+let activeTimers = [];
+let timeoutHandles = new Map();
+
+export function loadTimers() {
+  try {
+    if (fs.existsSync(DATA_PATH)) {
+      const raw = fs.readFileSync(DATA_PATH, 'utf-8');
+      activeTimers = JSON.parse(raw);
+      console.log(`[TimerService] Loaded ${activeTimers.length} timers from disk`);
+      resumeTimers();
+    } else {
+      activeTimers = [];
+      saveTimers();
+    }
+  } catch (err) {
+    console.error('[TimerService] Error loading timers:', err.message);
+    activeTimers = [];
+  }
+}
+
+function saveTimers() {
+  const dir = path.dirname(DATA_PATH);
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(DATA_PATH, JSON.stringify(activeTimers, null, 2));
+}
+
+function resumeTimers() {
+  const now = Date.now();
+  const expired = [];
+  const valid = [];
+
+  for (const timer of activeTimers) {
+    const remaining = timer.expiresAt - now;
+    if (remaining <= 0) {
+      expired.push(timer);
+    } else {
+      valid.push(timer);
+      scheduleTimeout(timer, remaining);
+    }
+  }
+
+  // Fire expired timers immediately
+  for (const timer of expired) {
+    console.log(`[TimerService] Timer ${timer.id} expired while offline, re-blocking ${timer.category}`);
+    onTimerExpire(timer);
+  }
+}
+
+function scheduleTimeout(timer, ms) {
+  const handle = setTimeout(() => onTimerExpire(timer), ms);
+  timeoutHandles.set(timer.id, handle);
+}
+
+async function onTimerExpire(timer) {
+  console.log(`[TimerService] Timer expired: ${timer.id} for ${timer.category}`);
+  try {
+    await toggleCategory(timer.category, false); // Re-block
+  } catch (err) {
+    console.error(`[TimerService] Failed to re-block ${timer.category}:`, err.message);
+  }
+  activeTimers = activeTimers.filter((t) => t.id !== timer.id);
+  timeoutHandles.delete(timer.id);
+  saveTimers();
+}
+
+export async function createTimer(category, minutes) {
+  const now = Date.now();
+  const expiresAt = now + minutes * 60 * 1000;
+  const timer = {
+    id: uuidv4(),
+    category,
+    minutes,
+    createdAt: now,
+    expiresAt,
+  };
+
+  // Allow the category during bonus time
+  await toggleCategory(category, true);
+
+  activeTimers.push(timer);
+  saveTimers();
+  scheduleTimeout(timer, minutes * 60 * 1000);
+
+  console.log(`[TimerService] Created timer ${timer.id}: ${category} for ${minutes}m`);
+  return timer;
+}
+
+export function getTimers() {
+  const now = Date.now();
+  return activeTimers.map((t) => ({
+    ...t,
+    remainingMs: Math.max(0, t.expiresAt - now),
+  }));
+}
+
+export function cancelTimer(id) {
+  const timer = activeTimers.find((t) => t.id === id);
+  if (!timer) throw new Error('Timer not found');
+
+  const handle = timeoutHandles.get(id);
+  if (handle) clearTimeout(handle);
+  timeoutHandles.delete(id);
+
+  activeTimers = activeTimers.filter((t) => t.id !== id);
+  saveTimers();
+
+  console.log(`[TimerService] Cancelled timer ${id}`);
+  return timer;
+}
--- a/backend/src/services/unifiClient.js
+++ b/backend/src/services/unifiClient.js
@@ -0,0 +1,123 @@
+import axios from 'axios';
+import https from 'https';
+
+const agent = new https.Agent({ rejectUnauthorized: false });
+
+let baseURL = '';
+let cookies = '';
+let csrfToken = '';
+
+function getEnvConfig() {
+  const ip = process.env.UDR_IP;
+  const user = process.env.UDR_USER;
+  const pass = process.env.UDR_PASSWORD;
+  if (!ip || !user || !pass) {
+    return null;
+  }
+  return { ip, user, pass };
+}
+
+const client = axios.create({ httpsAgent: agent, timeout: 10000 });
+
+client.interceptors.response.use(
+  (res) => res,
+  async (error) => {
+    const original = error.config;
+    if (error.response?.status === 401 && !original._retry) {
+      original._retry = true;
+      await login();
+      original.headers['Cookie'] = cookies;
+      original.headers['x-csrf-token'] = csrfToken;
+      return client(original);
+    }
+    return Promise.reject(error);
+  }
+);
+
+export async function login() {
+  const config = getEnvConfig();
+  if (!config) {
+    console.warn('[UniFi] No UDR credentials configured - running in demo mode');
+    return false;
+  }
+  baseURL = `https://${config.ip}`;
+  try {
+    const res = await axios.post(
+      `${baseURL}/api/auth/login`,
+      { username: config.user, password: config.pass },
+      { httpsAgent: agent, timeout: 10000 }
+    );
+    const setCookie = res.headers['set-cookie'];
+    if (setCookie) {
+      cookies = setCookie.map((c) => c.split(';')[0]).join('; ');
+    }
+    csrfToken = res.headers['x-csrf-token'] || '';
+    console.log('[UniFi] Authenticated successfully');
+    return true;
+  } catch (err) {
+    console.error('[UniFi] Login failed:', err.message);
+    return false;
+  }
+}
+
+function authHeaders() {
+  return {
+    Cookie: cookies,
+    'x-csrf-token': csrfToken,
+  };
+}
+
+export async function getTrafficRules() {
+  if (!baseURL) return [];
+  const res = await client.get(
+    `${baseURL}/proxy/network/v2/api/site/default/trafficrules`,
+    { headers: authHeaders() }
+  );
+  return res.data;
+}
+
+export async function getTrafficRule(ruleId) {
+  if (!baseURL) return null;
+  const rules = await getTrafficRules();
+  const list = Array.isArray(rules) ? rules : rules?.data || [];
+  return list.find((r) => r._id === ruleId) || null;
+}
+
+export async function updateTrafficRule(ruleId, rulePayload) {
+  if (!baseURL) return null;
+  const res = await client.put(
+    `${baseURL}/proxy/network/v2/api/site/default/trafficrules/${ruleId}`,
+    rulePayload,
+    { headers: { ...authHeaders(), 'Content-Type': 'application/json' } }
+  );
+  return res.data;
+}
+
+export async function getClients() {
+  if (!baseURL) return [];
+  const res = await client.get(
+    `${baseURL}/proxy/network/api/s/default/stat/sta`,
+    { headers: authHeaders() }
+  );
+  return res.data?.data || res.data || [];
+}
+
+export async function blockClient(mac) {
+  if (!baseURL) return null;
+  const res = await client.post(
+    `${baseURL}/proxy/network/api/s/default/cmd/stamgr`,
+    { cmd: 'block-sta', mac: mac.toLowerCase() },
+    { headers: { ...authHeaders(), 'Content-Type': 'application/json' } }
+  );
+  return res.data;
+}
+
+export async function unblockClient(mac) {
+  if (!baseURL) return null;
+  const res = await client.post(
+    `${baseURL}/proxy/network/api/s/default/cmd/stamgr`,
+    { cmd: 'unblock-sta', mac: mac.toLowerCase() },
+    { headers: { ...authHeaders(), 'Content-Type': 'application/json' } }
+  );
+  return res.data;
+}
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,18 @@
+services:
+  backend:
+    build: ./backend
+    ports:
+      - "3001:3001"
+    volumes:
+      - ./data:/data
+    env_file:
+      - .env
+    restart: unless-stopped
+
+  frontend:
+    build: ./frontend
+    ports:
+      - "5173:5173"
+    depends_on:
+      - backend
+    restart: unless-stopped
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,7 @@
+FROM node:20-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+EXPOSE 5173
+CMD ["npm", "run", "dev"]
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#2E473B" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>BarkWho</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "barkwho-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "framer-motion": "^10.16.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "^5.0.0"
+  }
+}
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -0,0 +1,10 @@
+{
+  "name": "BarkWho",
+  "short_name": "BarkWho",
+  "description": "Parental Control Dashboard",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#2E473B",
+  "theme_color": "#2E473B",
+  "icons": []
+}
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -0,0 +1,20 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import BottomNav from './components/BottomNav.jsx';
+import ControlDashboard from './pages/ControlDashboard.jsx';
+import DeviceLibrary from './pages/DeviceLibrary.jsx';
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <div className="app-container">
+        <div className="app-content">
+          <Routes>
+            <Route path="/" element={<ControlDashboard />} />
+            <Route path="/devices" element={<DeviceLibrary />} />
+          </Routes>
+        </div>
+        <BottomNav />
+      </div>
+    </BrowserRouter>
+  );
+}
--- a/frontend/src/components/BonusTimeDrawer.jsx
+++ b/frontend/src/components/BonusTimeDrawer.jsx
@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const PRESETS = [
+  { label: '15m', minutes: 15 },
+  { label: '30m', minutes: 30 },
+  { label: '60m', minutes: 60 },
+];
+
+export default function BonusTimeDrawer({ category, onSubmit, onClose }) {
+  const [custom, setCustom] = useState('');
+
+  const handleCustomSubmit = () => {
+    const mins = parseInt(custom, 10);
+    if (mins > 0) onSubmit(mins);
+  };
+
+  return (
+    <AnimatePresence>
+      <div className="drawer-overlay" onClick={onClose}>
+        <motion.div
+          className="drawer"
+          initial={{ y: '100%' }}
+          animate={{ y: 0 }}
+          exit={{ y: '100%' }}
+          transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="drawer-handle" />
+          <h3 className="drawer-title">Bonus Time: {category}</h3>
+
+          <div className="preset-buttons">
+            {PRESETS.map((p) => (
+              <button key={p.minutes} className="btn btn-allowed preset-btn" onClick={() => onSubmit(p.minutes)}>
+                {p.label}
+              </button>
+            ))}
+          </div>
+
+          <div className="custom-input">
+            <input
+              type="number"
+              placeholder="Custom minutes"
+              min="1"
+              max="480"
+              value={custom}
+              onChange={(e) => setCustom(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleCustomSubmit()}
+            />
+            <button className="btn btn-allowed" onClick={handleCustomSubmit} disabled={!custom}>
+              Set
+            </button>
+          </div>
+
+          <button className="btn btn-secondary drawer-close" onClick={onClose}>
+            Cancel
+          </button>
+        </motion.div>
+      </div>
+
+      <style>{`
+        .drawer-overlay {
+          position: fixed;
+          inset: 0;
+          background: rgba(0, 0, 0, 0.5);
+          z-index: 200;
+          display: flex;
+          align-items: flex-end;
+          justify-content: center;
+        }
+        .drawer {
+          background: var(--bg-secondary);
+          border-top: 1px solid var(--border);
+          border-radius: 20px 20px 0 0;
+          padding: 16px 24px 32px;
+          width: 100%;
+          max-width: 600px;
+        }
+        .drawer-handle {
+          width: 40px;
+          height: 4px;
+          background: var(--border);
+          border-radius: 2px;
+          margin: 0 auto 16px;
+        }
+        .drawer-title {
+          font-size: 1rem;
+          margin-bottom: 20px;
+          text-align: center;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+        }
+        .preset-buttons {
+          display: flex;
+          gap: 12px;
+          margin-bottom: 16px;
+        }
+        .preset-btn {
+          flex: 1;
+          padding: 14px;
+          font-size: 1rem;
+        }
+        .custom-input {
+          display: flex;
+          gap: 8px;
+          margin-bottom: 16px;
+        }
+        .custom-input input {
+          flex: 1;
+          padding: 10px 14px;
+          background: var(--bg-primary);
+          border: 1px solid var(--border);
+          border-radius: 8px;
+          color: var(--text-primary);
+          font-family: inherit;
+          font-size: 0.9rem;
+          outline: none;
+        }
+        .custom-input input:focus {
+          border-color: var(--accent);
+        }
+        .custom-input input::placeholder {
+          color: var(--text-muted);
+        }
+        .drawer-close {
+          width: 100%;
+        }
+      `}</style>
+    </AnimatePresence>
+  );
+}
--- a/frontend/src/components/BottomNav.jsx
+++ b/frontend/src/components/BottomNav.jsx
@@ -0,0 +1,63 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const tabs = [
+  { path: '/', label: 'Control', icon: '[ ]' },
+  { path: '/devices', label: 'Devices', icon: '{*}' },
+];
+
+export default function BottomNav() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  return (
+    <nav className="bottom-nav">
+      {tabs.map((tab) => (
+        <button
+          key={tab.path}
+          className={`bottom-nav-tab ${location.pathname === tab.path ? 'active' : ''}`}
+          onClick={() => navigate(tab.path)}
+        >
+          <span className="bottom-nav-icon">{tab.icon}</span>
+          <span className="bottom-nav-label">{tab.label}</span>
+        </button>
+      ))}
+      <style>{`
+        .bottom-nav {
+          position: fixed;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          display: flex;
+          background: var(--bg-secondary);
+          border-top: 1px solid var(--border);
+          padding-bottom: env(safe-area-inset-bottom);
+          z-index: 100;
+        }
+        .bottom-nav-tab {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 4px;
+          padding: 12px 0;
+          background: none;
+          border: none;
+          color: var(--text-muted);
+          font-family: inherit;
+          font-size: 0.7rem;
+          cursor: pointer;
+          transition: color 0.2s;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+        }
+        .bottom-nav-tab.active {
+          color: var(--status-allowed);
+        }
+        .bottom-nav-icon {
+          font-size: 1.2rem;
+          font-weight: bold;
+        }
+      `}</style>
+    </nav>
+  );
+}
--- a/frontend/src/components/CategoryCard.jsx
+++ b/frontend/src/components/CategoryCard.jsx
@@ -0,0 +1,103 @@
+export default function CategoryCard({ name, config, timers, onToggle, onBonusTime, onAssignRules }) {
+  const { allowed, rules } = config;
+  const activeTimer = timers?.[0];
+
+  const iconMap = {
+    social: '{ }',
+    streaming: '> |',
+    adult: '[X]',
+    gaming: '</>',
+    custom: '...',
+  };
+
+  const formatRemaining = (ms) => {
+    const mins = Math.ceil(ms / 60000);
+    if (mins >= 60) return `${Math.floor(mins / 60)}h ${mins % 60}m`;
+    return `${mins}m`;
+  };
+
+  return (
+    <div className={`card category-card ${allowed ? 'allowed' : 'blocked'}`}>
+      <div className="category-header">
+        <div className="category-info">
+          <span className="category-icon">{iconMap[config.icon] || iconMap.custom}</span>
+          <div>
+            <h3 className="category-name">{name}</h3>
+            <span className="category-meta">
+              {rules.length} rule{rules.length !== 1 ? 's' : ''}
+              {activeTimer && (
+                <span className="timer-badge">
+                  {' '}| Bonus: {formatRemaining(activeTimer.remainingMs)}
+                </span>
+              )}
+            </span>
+          </div>
+        </div>
+        <button
+          className={`toggle-switch ${allowed ? 'active' : ''}`}
+          onClick={() => onToggle(!allowed)}
+          title={allowed ? 'Click to block' : 'Click to allow'}
+        >
+          <div className="toggle-knob" />
+        </button>
+      </div>
+
+      <div className="category-actions">
+        <button className="btn btn-secondary btn-sm" onClick={onBonusTime}>
+          + Bonus Time
+        </button>
+        <button className="btn btn-secondary btn-sm" onClick={onAssignRules}>
+          Assign Rules
+        </button>
+      </div>
+
+      <style>{`
+        .category-card {
+          border-left: 4px solid var(--status-blocked);
+        }
+        .category-card.allowed {
+          border-left-color: var(--status-allowed);
+        }
+        .category-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 10px;
+        }
+        .category-info {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+        }
+        .category-icon {
+          font-size: 1.2rem;
+          font-weight: bold;
+          color: var(--accent);
+          width: 40px;
+          text-align: center;
+        }
+        .category-name {
+          font-size: 1rem;
+          font-weight: 600;
+          margin-bottom: 2px;
+        }
+        .category-meta {
+          font-size: 0.7rem;
+          color: var(--text-muted);
+          text-transform: uppercase;
+        }
+        .timer-badge {
+          color: var(--status-allowed);
+        }
+        .category-actions {
+          display: flex;
+          gap: 8px;
+        }
+        .btn-sm {
+          padding: 6px 12px;
+          font-size: 0.7rem;
+        }
+      `}</style>
+    </div>
+  );
+}
--- a/frontend/src/components/CurfewClock.jsx
+++ b/frontend/src/components/CurfewClock.jsx
@@ -0,0 +1,188 @@
+import { useState, useEffect } from 'react';
+import { apiFetch } from '../hooks/useApi.js';
+
+export default function CurfewClock({ curfew, timers, onCancelTimer, refetchCurfew }) {
+  const [now, setNow] = useState(Date.now());
+
+  useEffect(() => {
+    const interval = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  if (!curfew) return null;
+
+  const getNextEvent = () => {
+    const today = new Date();
+    const [blockH, blockM] = curfew.blockTime.split(':').map(Number);
+    const [unblockH, unblockM] = curfew.unblockTime.split(':').map(Number);
+
+    const blockToday = new Date(today);
+    blockToday.setHours(blockH, blockM, 0, 0);
+
+    const unblockTomorrow = new Date(today);
+    unblockTomorrow.setDate(unblockTomorrow.getDate() + 1);
+    unblockTomorrow.setHours(unblockH, unblockM, 0, 0);
+
+    const unblockToday = new Date(today);
+    unblockToday.setHours(unblockH, unblockM, 0, 0);
+
+    if (now < unblockToday.getTime()) {
+      return { label: 'Curfew ends in', target: unblockToday.getTime() };
+    } else if (now < blockToday.getTime()) {
+      return { label: 'Curfew starts in', target: blockToday.getTime() };
+    } else {
+      return { label: 'Curfew ends in', target: unblockTomorrow.getTime() };
+    }
+  };
+
+  const formatCountdown = (ms) => {
+    const totalSec = Math.max(0, Math.floor(ms / 1000));
+    const h = Math.floor(totalSec / 3600);
+    const m = Math.floor((totalSec % 3600) / 60);
+    const s = totalSec % 60;
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+  };
+
+  const handleOverride = async (minutes) => {
+    await apiFetch('/curfew/override', {
+      method: 'POST',
+      body: JSON.stringify({ minutes }),
+    });
+    refetchCurfew();
+  };
+
+  const event = curfew.enabled ? getNextEvent() : null;
+  const activeTimers = (timers || []).filter((t) => t.remainingMs > 0);
+
+  return (
+    <div className="card curfew-clock">
+      <div className="curfew-header">
+        <span className="curfew-label">CURFEW</span>
+        <span className={`curfew-status ${curfew.enabled ? 'active' : 'off'}`}>
+          {curfew.enabled ? 'ARMED' : 'OFF'}
+        </span>
+      </div>
+
+      {event && (
+        <div className="curfew-countdown">
+          <span className="countdown-label">{event.label}</span>
+          <span className="countdown-time">{formatCountdown(event.target - now)}</span>
+        </div>
+      )}
+
+      {curfew.overrideActive && (
+        <div className="curfew-override">Override active</div>
+      )}
+
+      {curfew.enabled && !curfew.overrideActive && (
+        <div className="curfew-actions">
+          <button className="btn btn-secondary btn-sm" onClick={() => handleOverride(30)}>
+            Override 30m
+          </button>
+          <button className="btn btn-secondary btn-sm" onClick={() => handleOverride(60)}>
+            Override 1h
+          </button>
+        </div>
+      )}
+
+      {activeTimers.length > 0 && (
+        <div className="active-timers">
+          <span className="timer-section-label">Active Bonus Timers</span>
+          {activeTimers.map((t) => (
+            <div key={t.id} className="timer-row">
+              <span>{t.category}: {formatCountdown(t.remainingMs)}</span>
+              <button className="btn btn-secondary btn-sm" onClick={() => onCancelTimer(t.id)}>
+                Cancel
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <style>{`
+        .curfew-clock {
+          background: var(--bg-secondary);
+          margin-bottom: 20px;
+        }
+        .curfew-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 8px;
+        }
+        .curfew-label {
+          font-size: 0.75rem;
+          letter-spacing: 2px;
+          color: var(--text-muted);
+        }
+        .curfew-status {
+          font-size: 0.7rem;
+          padding: 2px 8px;
+          border-radius: 4px;
+          font-weight: 700;
+          letter-spacing: 1px;
+        }
+        .curfew-status.active {
+          background: rgba(76, 175, 80, 0.2);
+          color: var(--status-allowed);
+        }
+        .curfew-status.off {
+          background: rgba(138, 138, 114, 0.2);
+          color: var(--text-muted);
+        }
+        .curfew-countdown {
+          text-align: center;
+          padding: 8px 0;
+        }
+        .countdown-label {
+          display: block;
+          font-size: 0.7rem;
+          color: var(--text-muted);
+          margin-bottom: 4px;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+        }
+        .countdown-time {
+          font-size: 2rem;
+          font-weight: 700;
+          letter-spacing: 4px;
+          color: var(--text-primary);
+        }
+        .curfew-override {
+          text-align: center;
+          color: var(--status-allowed);
+          font-size: 0.75rem;
+          padding: 4px 0;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+        }
+        .curfew-actions {
+          display: flex;
+          gap: 8px;
+          justify-content: center;
+          margin-top: 8px;
+        }
+        .active-timers {
+          margin-top: 12px;
+          padding-top: 12px;
+          border-top: 1px solid var(--border);
+        }
+        .timer-section-label {
+          display: block;
+          font-size: 0.7rem;
+          color: var(--text-muted);
+          text-transform: uppercase;
+          letter-spacing: 1px;
+          margin-bottom: 8px;
+        }
+        .timer-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 0.8rem;
+          padding: 4px 0;
+        }
+      `}</style>
+    </div>
+  );
+}
--- a/frontend/src/components/DeviceCard.jsx
+++ b/frontend/src/components/DeviceCard.jsx
@@ -0,0 +1,88 @@
+import { useState } from 'react';
+
+export default function DeviceCard({ device, onNuke, onUnnuke }) {
+  const [loading, setLoading] = useState(false);
+  const name = device.name || device.hostname || device.oui || 'Unknown Device';
+  const isOnline = device.is_wired !== undefined || device._uptime_by_ugw !== undefined;
+  const isBlocked = device.blocked === true;
+
+  const handleNuke = async () => {
+    setLoading(true);
+    try {
+      await onNuke();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUnnuke = async () => {
+    setLoading(true);
+    try {
+      await onUnnuke();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className={`card device-card ${isBlocked ? 'nuked' : ''}`}>
+      <div className="device-header">
+        <div className="device-info">
+          <span className={`status-dot ${isOnline ? 'online' : 'offline'}`} />
+          <div>
+            <h3 className="device-name">{name}</h3>
+            <div className="device-meta">
+              <span>{device.mac}</span>
+              {device.ip && <span> | {device.ip}</span>}
+            </div>
+          </div>
+        </div>
+
+        {isBlocked ? (
+          <button className="btn btn-allowed btn-sm" onClick={handleUnnuke} disabled={loading}>
+            Restore
+          </button>
+        ) : (
+          <button className="btn btn-nuke btn-sm" onClick={handleNuke} disabled={loading}>
+            NUKE
+          </button>
+        )}
+      </div>
+
+      <style>{`
+        .device-card.nuked {
+          border: 1px solid var(--status-nuke);
+          background: rgba(255, 23, 68, 0.08);
+        }
+        .device-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+        .device-info {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          min-width: 0;
+        }
+        .device-name {
+          font-size: 0.9rem;
+          font-weight: 600;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 200px;
+        }
+        .device-meta {
+          font-size: 0.65rem;
+          color: var(--text-muted);
+          font-family: 'Courier New', monospace;
+        }
+        .btn-sm {
+          padding: 6px 12px;
+          font-size: 0.7rem;
+        }
+      `}</style>
+    </div>
+  );
+}
--- a/frontend/src/components/RuleAssigner.jsx
+++ b/frontend/src/components/RuleAssigner.jsx
@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import { useApi } from '../hooks/useApi.js';
+
+export default function RuleAssigner({ category, currentRuleIds, onSave, onClose }) {
+  const { data: rules, loading, error } = useApi('/rules');
+  const [selected, setSelected] = useState(new Set(currentRuleIds));
+  const [saving, setSaving] = useState(false);
+
+  const toggleRule = (ruleId) => {
+    const next = new Set(selected);
+    if (next.has(ruleId)) {
+      next.delete(ruleId);
+    } else {
+      next.add(ruleId);
+    }
+    setSelected(next);
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await onSave([...selected]);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const ruleList = Array.isArray(rules) ? rules : [];
+
+  return (
+    <div className="drawer-overlay" onClick={onClose}>
+      <div className="assigner-modal" onClick={(e) => e.stopPropagation()}>
+        <h3 className="assigner-title">Assign Rules: {category}</h3>
+
+        {loading && <div className="loading-spinner">Loading rules...</div>}
+        {error && <div className="error-message">{error}</div>}
+
+        <div className="rule-list">
+          {ruleList.length === 0 && !loading ? (
+            <div className="empty-state">
+              No traffic rules found. Connect to UDR to discover rules.
+            </div>
+          ) : (
+            ruleList.map((rule) => (
+              <label key={rule._id} className="rule-item">
+                <input
+                  type="checkbox"
+                  checked={selected.has(rule._id)}
+                  onChange={() => toggleRule(rule._id)}
+                />
+                <div className="rule-info">
+                  <span className="rule-name">{rule.description || rule.name || rule._id}</span>
+                  <span className="rule-status">
+                    {rule.enabled ? 'Blocking' : 'Inactive'}
+                  </span>
+                </div>
+              </label>
+            ))
+          )}
+        </div>
+
+        <div className="assigner-actions">
+          <button className="btn btn-secondary" onClick={onClose}>
+            Cancel
+          </button>
+          <button className="btn btn-allowed" onClick={handleSave} disabled={saving}>
+            {saving ? 'Saving...' : `Save (${selected.size} rules)`}
+          </button>
+        </div>
+
+        <style>{`
+          .assigner-modal {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 20px;
+            width: 90%;
+            max-width: 500px;
+            max-height: 80vh;
+            display: flex;
+            flex-direction: column;
+            margin: auto;
+          }
+          .assigner-title {
+            font-size: 1rem;
+            margin-bottom: 16px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+          }
+          .rule-list {
+            flex: 1;
+            overflow-y: auto;
+            margin-bottom: 16px;
+            max-height: 50vh;
+          }
+          .rule-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px 8px;
+            border-bottom: 1px solid var(--border);
+            cursor: pointer;
+          }
+          .rule-item:hover {
+            background: var(--bg-card);
+          }
+          .rule-item input[type="checkbox"] {
+            accent-color: var(--status-allowed);
+            width: 18px;
+            height: 18px;
+          }
+          .rule-info {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+          }
+          .rule-name {
+            font-size: 0.85rem;
+          }
+          .rule-status {
+            font-size: 0.65rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+          }
+          .assigner-actions {
+            display: flex;
+            gap: 8px;
+            justify-content: flex-end;
+          }
+          .empty-state {
+            text-align: center;
+            padding: 30px;
+            color: var(--text-muted);
+            font-style: italic;
+          }
+        `}</style>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/hooks/useApi.js
+++ b/frontend/src/hooks/useApi.js
@@ -0,0 +1,40 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const BASE = '/api';
+
+export async function apiFetch(path, options = {}) {
+  const res = await fetch(`${BASE}${path}`, {
+    headers: { 'Content-Type': 'application/json', ...options.headers },
+    ...options,
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error || `HTTP ${res.status}`);
+  }
+  return res.json();
+}
+
+export function useApi(path, deps = []) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const refetch = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await apiFetch(path);
+      setData(result);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [path]);
+
+  useEffect(() => {
+    refetch();
+  }, [refetch, ...deps]);
+
+  return { data, loading, error, refetch };
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,205 @@
+:root {
+  --bg-primary: #2E473B;
+  --bg-secondary: #1E3229;
+  --bg-card: #3A5A4A;
+  --bg-card-hover: #456B57;
+  --text-primary: #F5F5DC;
+  --text-secondary: #C4C4A8;
+  --text-muted: #8A8A72;
+  --status-allowed: #4CAF50;
+  --status-blocked: #DC3545;
+  --status-nuke: #FF1744;
+  --accent: #6B8F71;
+  --border: #4A6B55;
+  --shadow: rgba(0, 0, 0, 0.3);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  font-family: 'Courier New', 'Consolas', monospace;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  background-image:
+    radial-gradient(circle at 20% 50%, rgba(107, 143, 113, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(107, 143, 113, 0.05) 0%, transparent 50%),
+    linear-gradient(rgba(107, 143, 113, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(107, 143, 113, 0.03) 1px, transparent 1px);
+  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
+}
+
+#root {
+  height: 100%;
+}
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.app-content {
+  flex: 1;
+  padding: 16px;
+  padding-bottom: 80px;
+  overflow-y: auto;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.page-header h1 {
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 12px;
+  transition: background 0.2s;
+}
+
+.card:hover {
+  background: var(--bg-card-hover);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.btn-allowed {
+  background: var(--status-allowed);
+  color: #fff;
+}
+
+.btn-blocked {
+  background: var(--status-blocked);
+  color: #fff;
+}
+
+.btn-nuke {
+  background: var(--status-nuke);
+  color: #fff;
+  box-shadow: 0 0 15px rgba(255, 23, 68, 0.4);
+}
+
+.btn-nuke:hover {
+  box-shadow: 0 0 25px rgba(255, 23, 68, 0.6);
+}
+
+.btn-secondary {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.status-dot.online {
+  background: var(--status-allowed);
+  box-shadow: 0 0 6px var(--status-allowed);
+}
+
+.status-dot.offline {
+  background: var(--text-muted);
+}
+
+.toggle-switch {
+  position: relative;
+  width: 52px;
+  height: 28px;
+  background: var(--status-blocked);
+  border-radius: 14px;
+  cursor: pointer;
+  transition: background 0.3s;
+  border: none;
+  padding: 0;
+}
+
+.toggle-switch.active {
+  background: var(--status-allowed);
+}
+
+.toggle-switch .toggle-knob {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 22px;
+  height: 22px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform 0.3s;
+}
+
+.toggle-switch.active .toggle-knob {
+  transform: translateX(24px);
+}
+
+.loading-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+  color: var(--text-muted);
+}
+
+.error-message {
+  background: rgba(220, 53, 69, 0.1);
+  border: 1px solid var(--status-blocked);
+  border-radius: 8px;
+  padding: 12px;
+  color: var(--status-blocked);
+  margin-bottom: 12px;
+}
+
+@media (min-width: 768px) {
+  .app-content {
+    padding: 24px;
+    padding-bottom: 80px;
+  }
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/frontend/src/pages/ControlDashboard.jsx
+++ b/frontend/src/pages/ControlDashboard.jsx
@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import { useApi, apiFetch } from '../hooks/useApi.js';
+import CategoryCard from '../components/CategoryCard.jsx';
+import CurfewClock from '../components/CurfewClock.jsx';
+import BonusTimeDrawer from '../components/BonusTimeDrawer.jsx';
+import RuleAssigner from '../components/RuleAssigner.jsx';
+
+export default function ControlDashboard() {
+  const { data: policies, loading, error, refetch } = useApi('/policies');
+  const { data: curfew, refetch: refetchCurfew } = useApi('/curfew');
+  const { data: timers, refetch: refetchTimers } = useApi('/timers');
+  const [bonusCategory, setBonusCategory] = useState(null);
+  const [assignCategory, setAssignCategory] = useState(null);
+
+  const handleToggle = async (category, allowed) => {
+    try {
+      await apiFetch(`/policies/${encodeURIComponent(category)}/toggle`, {
+        method: 'POST',
+        body: JSON.stringify({ allowed }),
+      });
+      refetch();
+    } catch (err) {
+      console.error('Toggle failed:', err);
+    }
+  };
+
+  const handleBonusTime = async (category, minutes) => {
+    try {
+      await apiFetch('/timers', {
+        method: 'POST',
+        body: JSON.stringify({ category, minutes }),
+      });
+      refetch();
+      refetchTimers();
+      setBonusCategory(null);
+    } catch (err) {
+      console.error('Bonus time failed:', err);
+    }
+  };
+
+  const handleCancelTimer = async (timerId) => {
+    try {
+      await apiFetch(`/timers/${timerId}`, { method: 'DELETE' });
+      refetchTimers();
+      refetch();
+    } catch (err) {
+      console.error('Cancel timer failed:', err);
+    }
+  };
+
+  if (loading) return <div className="loading-spinner">Loading policies...</div>;
+  if (error) return <div className="error-message">Error: {error}</div>;
+
+  const categories = policies ? Object.entries(policies) : [];
+
+  return (
+    <div className="control-dashboard">
+      <div className="page-header">
+        <h1>// Control</h1>
+      </div>
+
+      <CurfewClock curfew={curfew} timers={timers} onCancelTimer={handleCancelTimer} refetchCurfew={refetchCurfew} />
+
+      <div className="category-list">
+        {categories.map(([name, config]) => (
+          <CategoryCard
+            key={name}
+            name={name}
+            config={config}
+            timers={timers?.filter((t) => t.category === name) || []}
+            onToggle={(allowed) => handleToggle(name, allowed)}
+            onBonusTime={() => setBonusCategory(name)}
+            onAssignRules={() => setAssignCategory(name)}
+          />
+        ))}
+      </div>
+
+      {bonusCategory && (
+        <BonusTimeDrawer
+          category={bonusCategory}
+          onSubmit={(minutes) => handleBonusTime(bonusCategory, minutes)}
+          onClose={() => setBonusCategory(null)}
+        />
+      )}
+
+      {assignCategory && (
+        <RuleAssigner
+          category={assignCategory}
+          currentRuleIds={policies?.[assignCategory]?.ruleIds || []}
+          onSave={async (ruleIds) => {
+            await apiFetch(`/policies/${encodeURIComponent(assignCategory)}/rules`, {
+              method: 'PUT',
+              body: JSON.stringify({ ruleIds }),
+            });
+            refetch();
+            setAssignCategory(null);
+          }}
+          onClose={() => setAssignCategory(null)}
+        />
+      )}
+    </div>
+  );
+}
--- a/frontend/src/pages/DeviceLibrary.jsx
+++ b/frontend/src/pages/DeviceLibrary.jsx
@@ -0,0 +1,121 @@
+import { useState } from 'react';
+import { useApi, apiFetch } from '../hooks/useApi.js';
+import DeviceCard from '../components/DeviceCard.jsx';
+
+export default function DeviceLibrary() {
+  const { data: devices, loading, error, refetch } = useApi('/devices');
+  const [search, setSearch] = useState('');
+
+  const handleNuke = async (mac) => {
+    if (!confirm(`NUKE device ${mac}? This will block all internet access.`)) return;
+    try {
+      await apiFetch(`/devices/${encodeURIComponent(mac)}/nuke`, { method: 'POST' });
+      refetch();
+    } catch (err) {
+      console.error('Nuke failed:', err);
+    }
+  };
+
+  const handleUnnuke = async (mac) => {
+    try {
+      await apiFetch(`/devices/${encodeURIComponent(mac)}/unnuke`, { method: 'POST' });
+      refetch();
+    } catch (err) {
+      console.error('Unnuke failed:', err);
+    }
+  };
+
+  if (loading) return <div className="loading-spinner">Discovering devices...</div>;
+  if (error) return <div className="error-message">Error: {error}</div>;
+
+  const deviceList = Array.isArray(devices) ? devices : [];
+  const filtered = deviceList.filter((d) => {
+    const term = search.toLowerCase();
+    const name = (d.name || d.hostname || d.oui || '').toLowerCase();
+    const mac = (d.mac || '').toLowerCase();
+    const ip = (d.ip || '').toLowerCase();
+    return name.includes(term) || mac.includes(term) || ip.includes(term);
+  });
+
+  return (
+    <div className="device-library">
+      <div className="page-header">
+        <h1>// Devices</h1>
+        <button className="btn btn-secondary" onClick={refetch}>
+          Refresh
+        </button>
+      </div>
+
+      <div className="search-bar">
+        <input
+          type="text"
+          placeholder="Search devices..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+        <span className="device-count">{filtered.length} devices</span>
+      </div>
+
+      <div className="device-grid">
+        {filtered.length === 0 ? (
+          <div className="empty-state">
+            {deviceList.length === 0
+              ? 'No devices found. Connect to UDR to discover devices.'
+              : 'No devices match your search.'}
+          </div>
+        ) : (
+          filtered.map((device) => (
+            <DeviceCard
+              key={device.mac || device._id}
+              device={device}
+              onNuke={() => handleNuke(device.mac)}
+              onUnnuke={() => handleUnnuke(device.mac)}
+            />
+          ))
+        )}
+      </div>
+
+      <style>{`
+        .search-bar {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          margin-bottom: 16px;
+        }
+        .search-bar input {
+          flex: 1;
+          padding: 10px 14px;
+          background: var(--bg-secondary);
+          border: 1px solid var(--border);
+          border-radius: 8px;
+          color: var(--text-primary);
+          font-family: inherit;
+          font-size: 0.85rem;
+          outline: none;
+        }
+        .search-bar input:focus {
+          border-color: var(--accent);
+        }
+        .search-bar input::placeholder {
+          color: var(--text-muted);
+        }
+        .device-count {
+          color: var(--text-muted);
+          font-size: 0.75rem;
+          white-space: nowrap;
+        }
+        .device-grid {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+        .empty-state {
+          text-align: center;
+          padding: 40px 20px;
+          color: var(--text-muted);
+          font-style: italic;
+        }
+      `}</style>
+    </div>
+  );
+}
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://backend:3001',
+        changeOrigin: true,
+      },
+    },
+  },
+});