kaiju_harness/app.py

#!/usr/bin/env python3
"""Interactive app harness for simple business-owner apps.

This creates complete one-file web apps with local persistence. The goal is not
to replace real engineering for complex SaaS products. It is to make common
small-business utility apps fast, complete, and demonstrable.
"""

from __future__ import annotations

import html
import json
import re
from dataclasses import dataclass, field
from pathlib import Path
from typing import Any


@dataclass
class AppSpec:
    app_name: str
    app_type: str
    headline: str
    entities: list[str] = field(default_factory=list)
    fields: list[str] = field(default_factory=list)
    actions: list[str] = field(default_factory=list)
    accent: str = "#f4ad32"


APP_DEFAULTS: dict[str, dict[str, list[str] | str]] = {
    "booking": {
        "headline": "Book appointments and keep the day organized.",
        "entities": ["appointments"],
        "fields": ["Customer", "Service", "Date", "Time", "Phone"],
        "actions": ["Add appointment", "Mark complete", "Export CSV"],
    },
    "crm": {
        "headline": "Track leads from first message to paid customer.",
        "entities": ["leads"],
        "fields": ["Name", "Company", "Need", "Status", "Next Follow-up"],
        "actions": ["Add lead", "Update status", "Export CSV"],
    },
    "invoice_tracker": {
        "headline": "Track invoices, payment status, and follow-ups.",
        "entities": ["invoices"],
        "fields": ["Client", "Invoice #", "Amount", "Status", "Due Date"],
        "actions": ["Add invoice", "Mark paid", "Export CSV"],
    },
    "inventory": {
        "headline": "Keep inventory clear without a heavy system.",
        "entities": ["items"],
        "fields": ["Item", "Category", "Quantity", "Reorder At", "Supplier"],
        "actions": ["Add item", "Update quantity", "Export CSV"],
    },
    "task_board": {
        "headline": "Turn scattered work into a clear action board.",
        "entities": ["tasks"],
        "fields": ["Task", "Owner", "Priority", "Status", "Due Date"],
        "actions": ["Add task", "Mark complete", "Export CSV"],
    },
    "estimate_builder": {
        "headline": "Build quotes and estimates without losing the details.",
        "entities": ["estimates"],
        "fields": ["Client", "Service", "Labor Hours", "Materials", "Estimate Total", "Status"],
        "actions": ["Add estimate", "Mark approved", "Export CSV"],
    },
    "content_calendar": {
        "headline": "Plan posts, hooks, channels, and publish dates in one place.",
        "entities": ["content ideas"],
        "fields": ["Idea", "Channel", "Hook", "Publish Date", "Status", "Owner"],
        "actions": ["Add idea", "Mark published", "Export CSV"],
    },
    "expense_tracker": {
        "headline": "Track expenses and cash movement before it gets messy.",
        "entities": ["expenses"],
        "fields": ["Vendor", "Category", "Amount", "Payment Method", "Date", "Status"],
        "actions": ["Add expense", "Mark reviewed", "Export CSV"],
    },
}


def clean_text(value: Any, fallback: str) -> str:
    if not isinstance(value, str):
        return fallback
    value = re.sub(r"\s+", " ", value).strip()
    return value or fallback


def infer_app_type(prompt: str) -> str:
    lower = prompt.lower()
    if any(term in lower for term in ["content calendar", "post calendar", "social calendar", "marketing calendar", "content planner", "post flow"]):
        return "content_calendar"
    if any(term in lower for term in ["expense", "budget", "cash flow", "spend", "receipt", "payment method"]):
        return "expense_tracker"
    if any(term in lower for term in ["estimate", "quote", "bid", "proposal calculator", "price calculator"]):
        return "estimate_builder"
    if any(term in lower for term in ["inventory", "stock", "reorder"]):
        return "inventory"
    if any(term in lower for term in ["crm", "lead", "prospect", "pipeline"]):
        return "crm"
    if any(term in lower for term in ["invoice", "paid", "payment"]):
        return "invoice_tracker"
    if any(term in lower for term in ["booking", "appointment", "calendar", "schedule"]):
        return "booking"
    return "task_board"


def infer_app_name(prompt: str, app_type: str) -> str:
    stop_words = r"\s+(?:for|with|to|that|using|include|including|built|as)\b"
    patterns = [
        rf"named\s+([A-Z][A-Za-z0-9 &'&-]{{2,70}}?)(?:\.|,|{stop_words}|$)",
        rf"called\s+([A-Z][A-Za-z0-9 &'&-]{{2,70}}?)(?:\.|,|{stop_words}|$)",
    ]
    for pattern in patterns:
        match = re.search(pattern, prompt, flags=re.IGNORECASE)
        if match:
            return clean_text(match.group(1), "Business App").rstrip(".")
    names = {
        "booking": "Booking Desk",
        "crm": "Lead Desk",
        "invoice_tracker": "Invoice Desk",
        "inventory": "Inventory Desk",
        "task_board": "Work Desk",
        "estimate_builder": "Estimate Desk",
        "content_calendar": "Content Desk",
        "expense_tracker": "Expense Desk",
    }
    return names.get(app_type, "Business App")


def spec_from_prompt(prompt: str) -> AppSpec:
    app_type = infer_app_type(prompt)
    defaults = APP_DEFAULTS[app_type]
    return AppSpec(
        app_name=infer_app_name(prompt, app_type),
        app_type=app_type,
        headline=str(defaults["headline"]),
        entities=list(defaults["entities"]),
        fields=list(defaults["fields"]),
        actions=list(defaults["actions"]),
        accent="#38bdf8" if app_type in {"crm", "invoice_tracker", "content_calendar"} else "#f4ad32",
    )


def normalize_spec(raw: dict[str, Any] | AppSpec, prompt: str = "") -> AppSpec:
    if isinstance(raw, AppSpec):
        spec = raw
    else:
        fallback = spec_from_prompt(prompt)
        fields = raw.get("fields") if isinstance(raw.get("fields"), list) else fallback.fields
        actions = raw.get("actions") if isinstance(raw.get("actions"), list) else fallback.actions
        entities = raw.get("entities") if isinstance(raw.get("entities"), list) else fallback.entities
        spec = AppSpec(
            app_name=clean_text(raw.get("app_name"), fallback.app_name),
            app_type=clean_text(raw.get("app_type"), fallback.app_type).lower(),
            headline=clean_text(raw.get("headline"), fallback.headline),
            entities=[clean_text(item, "") for item in entities if isinstance(item, str)][:4] or fallback.entities,
            fields=[clean_text(item, "") for item in fields if isinstance(item, str)][:8] or fallback.fields,
            actions=[clean_text(item, "") for item in actions if isinstance(item, str)][:6] or fallback.actions,
            accent=clean_text(raw.get("accent"), fallback.accent),
        )
    if spec.app_type not in APP_DEFAULTS:
        spec.app_type = infer_app_type(prompt)
    inferred_app_type = infer_app_type(prompt)
    if prompt and inferred_app_type != spec.app_type:
        previous_defaults = APP_DEFAULTS.get(spec.app_type, {})
        previous_headline = str(previous_defaults.get("headline", ""))
        spec.app_type = inferred_app_type
        if spec.headline == previous_headline or "book appointments" in spec.headline.lower():
            spec.headline = str(APP_DEFAULTS[spec.app_type]["headline"])
    if len(spec.fields) < 3:
        spec.fields = list(APP_DEFAULTS[spec.app_type]["fields"])
    if len(spec.actions) < 2:
        spec.actions = list(APP_DEFAULTS[spec.app_type]["actions"])
    return spec


def esc(value: str) -> str:
    return html.escape(value, quote=True)


def slugify(value: str) -> str:
    return re.sub(r"[^a-z0-9]+", "-", value.lower()).strip("-") or "kaiju-app"


def sample_value(field: str, app_type: str) -> str:
    lower = field.lower()
    if "name" in lower or "client" in lower or "customer" in lower:
        return "Jordan Lee"
    if "company" in lower:
        return "Bright Path Studio"
    if "service" in lower:
        return "Premium package"
    if "date" in lower or "due" in lower or "follow" in lower or "publish" in lower:
        return "2026-05-15"
    if "time" in lower:
        return "10:30 AM"
    if "phone" in lower:
        return "(404) 555-0199"
    if "amount" in lower or "total" in lower or "materials" in lower:
        return "$450"
    if "hour" in lower:
        return "4"
    if "status" in lower:
        return "Open"
    if "priority" in lower:
        return "High"
    if "owner" in lower:
        return "Richard"
    if "category" in lower:
        return "Retail"
    if "quantity" in lower:
        return "24"
    if "reorder" in lower:
        return "10"
    if "supplier" in lower or "vendor" in lower:
        return "Main Street Supply"
    if "item" in lower:
        return "Signature candles"
    if "idea" in lower:
        return "Before-and-after demo"
    if "hook" in lower:
        return "Stop losing leads in your notes"
    if "channel" in lower:
        return "YouTube"
    if "payment" in lower:
        return "Business card"
    if "invoice" in lower:
        return "INV-1007"
    if "task" in lower:
        return "Call warm leads"
    if "need" in lower:
        return "Website and checkout"
    return f"{app_type.replace('_', ' ').title()} sample"


def render_field_inputs(fields: list[str]) -> str:
    return "\n".join(
        f'<label>{esc(field)}<input name="{esc(slugify(field))}" placeholder="{esc(field)}" required></label>'
        for field in fields
    )


def render_table_headers(fields: list[str]) -> str:
    return "\n".join(f"<th>{esc(field)}</th>" for field in fields)


def render_html(raw_spec: dict[str, Any] | AppSpec, prompt: str = "") -> str:
    spec = normalize_spec(raw_spec, prompt)
    storage_key = f"kaiju-{slugify(spec.app_name)}"
    inputs = render_field_inputs(spec.fields)
    headers = render_table_headers(spec.fields)
    field_names = json.dumps([slugify(field) for field in spec.fields])
    field_labels = json.dumps(spec.fields)
    sample = json.dumps({slugify(field): sample_value(field, spec.app_type) for field in spec.fields})
    return f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{esc(spec.app_name)} | Kaiju App</title>
<style>
:root{{--bg:#0b0f17;--panel:#121823;--card:#171f2d;--ink:#f8fafc;--muted:#94a3b8;--line:rgba(148,163,184,.2);--accent:{esc(spec.accent)}}}*{{box-sizing:border-box}}body{{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top right,rgba(56,189,248,.22),transparent 32%),var(--bg);color:var(--ink)}}button,input,select{{font:inherit}}.app{{max-width:1180px;margin:auto;padding:34px 28px}}header{{display:flex;justify-content:space-between;gap:20px;align-items:start;margin-bottom:34px}}.brand{{font-weight:950;letter-spacing:-.035em;font-size:28px}}.pill{{border:1px solid var(--line);border-radius:999px;padding:9px 13px;color:var(--muted);font-weight:800}}h1{{font-size:clamp(40px,5.4vw,64px);line-height:.98;letter-spacing:-.045em;margin:20px 0 12px;max-width:860px}}p{{color:var(--muted);line-height:1.65;font-size:18px}}.grid{{display:grid;grid-template-columns:380px 1fr;gap:20px;align-items:start}}.panel{{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.24)}}label{{display:block;color:var(--muted);font-weight:850;margin-bottom:12px}}input,select{{width:100%;margin-top:7px;border:1px solid var(--line);background:#0e1420;color:var(--ink);border-radius:14px;padding:13px}}button{{border:0;border-radius:15px;background:var(--accent);color:#07111f;font-weight:950;padding:13px 16px;cursor:pointer}}.secondary{{background:#253044;color:var(--ink)}}.actions{{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}}table{{width:100%;border-collapse:collapse;overflow:hidden;border-radius:20px}}th,td{{text-align:left;border-bottom:1px solid var(--line);padding:13px;vertical-align:top}}th{{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.1em}}.empty{{padding:28px;border:1px dashed var(--line);border-radius:20px;color:var(--muted)}}.statbar{{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}}.stat{{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}}.stat strong{{display:block;font-size:26px}}@media(max-width:880px){{header,.grid{{display:block}}.panel{{margin-bottom:18px}}h1{{font-size:42px}}.statbar{{grid-template-columns:1fr}}table{{display:block;overflow-x:auto}}}}
</style>
</head>
<body>
<div class="app">
<header><div class="brand">{esc(spec.app_name)}</div><div class="pill">Local-first {esc(spec.app_type.replace("_", " "))}</div></header>
<main>
<p class="pill" style="display:inline-block">Kaiju one-file app</p>
<h1>{esc(spec.headline)}</h1>
<p>Built for business owners who need a working tool now: form entry, saved records, clear status, and CSV export without a backend.</p>
<div class="statbar"><div class="stat"><strong id="totalCount">0</strong><span>Total records</span></div><div class="stat"><strong id="todayCount">0</strong><span>Added today</span></div><div class="stat"><strong id="storageState">Ready</strong><span>Local storage</span></div></div>
<div class="grid">
<section class="panel">
<h2>Add record</h2>
<form id="recordForm">
{inputs}
<div class="actions"><button type="submit">{esc(spec.actions[0])}</button><button class="secondary" type="button" id="loadSample">Load sample</button></div>
</form>
</section>
<section class="panel">
<div style="display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:16px"><h2 style="margin:0">Records</h2><div class="actions" style="margin:0"><button class="secondary" type="button" id="exportCsv">Export CSV</button><button class="secondary" type="button" id="clearAll">Clear all</button></div></div>
<div id="emptyState" class="empty">No records yet. Add the first one from the form.</div>
<table id="recordsTable" hidden><thead><tr>{headers}<th>Created</th><th>Action</th></tr></thead><tbody></tbody></table>
</section>
</div>
</main>
</div>
<script>
const STORAGE_KEY = "{storage_key}";
const FIELDS = {field_names};
const LABELS = {field_labels};
const SAMPLE = {sample};
const form = document.getElementById("recordForm");
const table = document.getElementById("recordsTable");
const tbody = table.querySelector("tbody");
const emptyState = document.getElementById("emptyState");
const totalCount = document.getElementById("totalCount");
const todayCount = document.getElementById("todayCount");
const storageState = document.getElementById("storageState");

function readRecords() {{
  try {{
    return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
  }} catch (_error) {{
    return [];
  }}
}}

function writeRecords(records) {{
  localStorage.setItem(STORAGE_KEY, JSON.stringify(records));
  render();
}}

function formToRecord() {{
  const data = new FormData(form);
  const record = {{ id: crypto.randomUUID(), createdAt: new Date().toISOString() }};
  for (const field of FIELDS) record[field] = String(data.get(field) || "").trim();
  return record;
}}

function render() {{
  const records = readRecords();
  tbody.innerHTML = "";
  const today = new Date().toISOString().slice(0, 10);
  totalCount.textContent = String(records.length);
  todayCount.textContent = String(records.filter(record => record.createdAt.slice(0, 10) === today).length);
  storageState.textContent = "Ready";
  emptyState.hidden = records.length > 0;
  table.hidden = records.length === 0;
  for (const record of records) {{
    const row = document.createElement("tr");
    row.innerHTML = FIELDS.map(field => `<td>${{escapeHtml(record[field] || "")}}</td>`).join("") +
      `<td>${{new Date(record.createdAt).toLocaleString()}}</td><td><button class="secondary" data-delete="${{record.id}}">Delete</button></td>`;
    tbody.appendChild(row);
  }}
}}

function escapeHtml(value) {{
  return value.replace(/[&<>"']/g, char => ({{ "&": "&amp;", "<": "&lt;", ">": "&gt;", "\\"": "&quot;", "'": "&#39;" }}[char]));
}}

form.addEventListener("submit", event => {{
  event.preventDefault();
  const record = formToRecord();
  if (FIELDS.some(field => !record[field])) return;
  writeRecords([record, ...readRecords()]);
  form.reset();
}});

tbody.addEventListener("click", event => {{
  const button = event.target.closest("[data-delete]");
  if (!button) return;
  writeRecords(readRecords().filter(record => record.id !== button.dataset.delete));
}});

document.getElementById("clearAll").addEventListener("click", () => {{
  if (confirm("Clear all saved records for this app?")) writeRecords([]);
}});

document.getElementById("loadSample").addEventListener("click", () => {{
  for (const field of FIELDS) {{
    const input = Array.from(form.elements).find(element => element.name === field);
    if (input) input.value = SAMPLE[field] || LABELS[FIELDS.indexOf(field)] + " example";
  }}
}});

document.getElementById("exportCsv").addEventListener("click", () => {{
  const records = readRecords();
  const header = [...LABELS, "Created"].join(",");
  const lines = records.map(record => [...FIELDS.map(field => record[field] || ""), record.createdAt].map(value => `"${{String(value).replaceAll('"', '""')}}"`).join(","));
  const blob = new Blob([[header, ...lines].join("\\n")], {{ type: "text/csv" }});
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "{slugify(spec.app_name)}.csv";
  link.click();
  URL.revokeObjectURL(url);
}});

render();
</script>
</body>
</html>"""


def validate_html(rendered: str, spec: AppSpec | None = None) -> list[str]:
    lower = rendered.lower()
    errors: list[str] = []
    for token in ["<!doctype html", "<html", "<head", "</head>", "<body", "</body>", "</html>"]:
        if token not in lower:
            errors.append(f"missing {token}")
    if not lower.strip().endswith("</html>"):
        errors.append("document does not end with </html>")
    for token in ["<form", "<script", "localstorage", "addeventlistener", "export csv"]:
        if token not in lower:
            errors.append(f"missing app token: {token}")
    sample_match = re.search(r"const\s+SAMPLE\s*=\s*(\{.*?\});", rendered, flags=re.DOTALL)
    if not sample_match:
        errors.append("missing sample data")
    else:
        try:
            sample_data = json.loads(sample_match.group(1))
            if not sample_data or any(not str(value).strip() for value in sample_data.values()):
                errors.append("sample data contains blank values")
        except json.JSONDecodeError:
            errors.append("sample data is not valid JSON")
    if "@media" not in lower or "viewport" not in lower:
        errors.append("missing responsive app styling")
    if "```" in rendered:
        errors.append("markdown fence found")
    if spec:
        for field in spec.fields[:3]:
            if field.lower() not in lower:
                errors.append(f"missing field: {field}")
    return errors


def render_from_prompt(prompt: str) -> tuple[AppSpec, str, list[str]]:
    spec = spec_from_prompt(prompt)
    rendered = render_html(spec, prompt)
    return spec, rendered, validate_html(rendered, spec)


def write_html(path: Path, rendered: str) -> None:
    path.parent.mkdir(parents=True, exist_ok=True)
    path.write_text(rendered, encoding="utf-8")


def spec_to_json(spec: AppSpec) -> str:
    return json.dumps(spec.__dict__, indent=2, ensure_ascii=False)