Deploy Epic Errands V1 Space

app.py

@@ -22,8 +22,8 @@ ASSETS_ROOT = FRONTEND_ROOT / "assets"
 
 def build_server() -> Server:
     app = Server(
-        title="Epic Errands",
-        description="A fully-custom mobile UI served by a Gradio Server.",
+        title="Epic Errands V1",
+        description="A fully-custom V1 mobile UI served by a Gradio Server.",
         docs_url=None,
         redoc_url=None,
     )
@@ -39,8 +39,9 @@ def build_server() -> Server:
     async def health() -> dict[str, str]:
         return {
             "status": "ok",
-            "app": "epic-errands",
+            "app": "epic-errands-v1",
             "frontend": "fully-custom-ui",
+            "version": "v1",
         }
 
     @app.get("/api/bootstrap")

frontend/scripts/app.js

@@ -44,7 +44,8 @@
 
   const state = {
     activeTab: "home",
-    selectedGoalId: "goal-1",
+    selectedGoalId: null,
+    nextGoalNumber: 4,
     defaultStyleId: "magical",
     parentAvatarReady: true,
     kidAvatarReady: true,
@@ -91,6 +92,14 @@
       .replace(/'/g, "'");
   }
 
+  function titleCase(value) {
+    return String(value)
+      .trim()
+      .split(/\s+/)
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(" ");
+  }
+
   function currentStyle() {
     return styles[state.defaultStyleId];
   }
@@ -110,10 +119,10 @@
   function goalTitle(goal) {
     const style = goalStyle(goal);
     const lower = goal.ordinaryGoal.toLowerCase();
-    if (goal.styleId === "magical") return `${style.goalNoun}: Bright Idea Bridge`;
-    if (goal.styleId === "comic") return `${style.goalNoun}: Laundry Launch`;
+    if (goal.styleId === "magical" && lower.includes("class project")) return `${style.goalNoun}: Bright Idea Bridge`;
+    if (goal.styleId === "comic" && lower.includes("laundry")) return `${style.goalNoun}: Laundry Launch`;
     if (lower.includes("read")) return `${style.goalNoun}: Reading Lantern`;
-    return `${style.goalNoun}: ${goal.ordinaryGoal}`;
+    return `${style.goalNoun}: ${titleCase(goal.ordinaryGoal)}`;
   }
 
   function rewardLabel(goal) {
@@ -214,12 +223,24 @@
   }
 
   function renderParentGoals() {
+    const style = currentStyle();
     return `
       <section class="screen" data-design-id="parent-goals-screen" aria-labelledby="parent-title">
         <div class="screen-head">
           <h1 class="screen-title" id="parent-title">Parent Goals</h1>
-          <p class="screen-copy">Approve completed goals and grant the reward. Everything else is handled offline.</p>
+          <p class="screen-copy">Create new goals, approve completed ones, and grant the reward.</p>
         </div>
+        <form class="goal-create panel" data-design-id="parent-goal-create" aria-labelledby="create-goal-title">
+          <div>
+            <h2 class="section-label" id="create-goal-title">Create goal</h2>
+            <p class="goal-create-copy">New goals snapshot the current ${escapeHtml(style.label)} style.</p>
+          </div>
+          <label class="goal-input-label" for="new-goal-input">Ordinary goal</label>
+          <div class="goal-create-row">
+            <input id="new-goal-input" name="ordinaryGoal" type="text" autocomplete="off" placeholder="Practice spelling words">
+            <button class="create-button" type="submit">${icon("add_task")} Add</button>
+          </div>
+        </form>
         <div class="goal-list" data-design-id="parent-goal-list">
           ${state.goals.map((goal) => {
             const style = goalStyle(goal);
@@ -248,45 +269,46 @@
   }
 
   function renderKidGoals() {
-    const selected = state.goals.find((goal) => goal.id === state.selectedGoalId) || state.goals[0];
     return `
       <section class="screen" data-design-id="kid-goals-screen" aria-labelledby="kid-title">
         <div class="screen-head">
           <h1 class="screen-title" id="kid-title">Kid Goals</h1>
-          <p class="screen-copy">Tap a goal, finish it, then wait for your grown-up's themed approval.</p>
+          <p class="screen-copy">Tap a thumbnail to open the goal card, finish it, then wait for your grown-up's themed approval.</p>
         </div>
         <div class="kid-grid" data-design-id="kid-goal-thumbnail-grid">
           ${state.goals.map((goal) => {
             const style = goalStyle(goal);
             return `
-              <button class="kid-tile" data-action="select-goal" data-goal-id="${goal.id}" aria-pressed="${state.selectedGoalId === goal.id}">
+              <button class="kid-tile" data-action="open-goal-card" data-goal-id="${goal.id}" aria-label="Open ${escapeHtml(goalTitle(goal))}">
                 <img src="${asset(imageByStyle[goal.styleId])}" alt="${escapeHtml(style.label)} illustration for ${escapeHtml(goal.ordinaryGoal)}">
-                <span class="tile-body">
-                  <span class="tile-title">${escapeHtml(goalTitle(goal))}</span>
-                  ${stateChip(goal)}
-                </span>
+                <span class="tile-status" aria-hidden="true">${stateChip(goal)}</span>
               </button>
             `;
           }).join("")}
         </div>
-        ${renderGoalCard(selected)}
       </section>
     `;
   }
 
-  function renderGoalCard(goal) {
+  function renderGoalCard(goal, options = {}) {
     const style = goalStyle(goal);
     const isWaiting = goal.parentRewardState === "waiting_for_approval";
     const rewarded = goal.parentRewardState === "approved_reward_given";
     const steps = stepsFor(goal);
+    const modalChrome = options.modal ? `
+      <button class="modal-close" data-action="close-goal-card" aria-label="Close goal card">
+        ${icon("close")}
+      </button>
+    ` : "";
     return `
-      <article class="goal-card" data-design-id="kid-goal-card">
+      <article class="goal-card" data-design-id="kid-goal-card" ${options.modal ? 'role="dialog" aria-modal="true" aria-labelledby="goal-card-title"' : ""}>
+        ${modalChrome}
         <div class="goal-card-hero">
           <img src="${asset(imageByStyle[goal.styleId])}" alt="${escapeHtml(style.label)} goal card image for ${escapeHtml(goal.ordinaryGoal)}">
           <span class="hero-badge">${escapeHtml(style.kidTitle)} ${escapeHtml(style.goalNoun)}</span>
         </div>
         <div class="goal-card-body">
-          <h2>${escapeHtml(goalTitle(goal))}</h2>
+          <h2 id="goal-card-title">${escapeHtml(goalTitle(goal))}</h2>
           <p class="screen-copy">${escapeHtml(style.copy)}</p>
           <ol class="step-list">
             ${steps.map((step, index) => `
@@ -321,6 +343,19 @@
     `;
   }
 
+  function renderGoalModal() {
+    const selected = state.goals.find((goal) => goal.id === state.selectedGoalId);
+    if (!selected || state.activeTab !== "kid") return "";
+    return `
+      <div class="goal-modal-backdrop" data-design-id="kid-goal-card-modal">
+        <button class="modal-scrim" data-action="close-goal-card" aria-label="Close goal card"></button>
+        <div class="goal-modal-shell">
+          ${renderGoalCard(selected, { modal: true })}
+        </div>
+      </div>
+    `;
+  }
+
   function renderNav() {
     const items = [
       ["home", "Home", "home"],
@@ -364,6 +399,7 @@
           </div>
         </header>
         <div class="screen-region">${screen}</div>
+        ${renderGoalModal()}
         ${renderNav()}
       </div>
     `;
@@ -388,16 +424,23 @@
     if (action === "nav") {
       if (target.getAttribute("aria-disabled") === "true") return;
       state.activeTab = target.dataset.tab || "home";
+      if (state.activeTab !== "kid") state.selectedGoalId = null;
       render();
       return;
     }
 
-    if (action === "select-goal") {
+    if (action === "open-goal-card") {
       state.selectedGoalId = target.dataset.goalId || state.selectedGoalId;
       render();
       return;
     }
 
+    if (action === "close-goal-card") {
+      state.selectedGoalId = null;
+      render();
+      return;
+    }
+
     if (action === "complete-goal") {
       const goalId = target.dataset.goalId;
       updateGoal(goalId, (goal) => {
@@ -406,6 +449,7 @@
           goal.parentRewardState = "waiting_for_approval";
         }
       });
+      state.selectedGoalId = goalId || state.selectedGoalId;
       render();
       return;
     }
@@ -421,5 +465,37 @@
     }
   });
 
+  root.addEventListener("submit", (event) => {
+    const form = event.target.closest("[data-design-id='parent-goal-create']");
+    if (!form) return;
+    event.preventDefault();
+
+    const input = form.querySelector("input[name='ordinaryGoal']");
+    const ordinaryGoal = input ? input.value.trim() : "";
+    if (!ordinaryGoal) {
+      if (input) input.focus();
+      return;
+    }
+
+    const goal = {
+      id: `goal-${state.nextGoalNumber}`,
+      ordinaryGoal,
+      styleId: state.defaultStyleId,
+      kidCompletionState: "not_started",
+      parentRewardState: "not_reviewed",
+    };
+    state.nextGoalNumber += 1;
+    state.goals.unshift(goal);
+    state.selectedGoalId = null;
+    render();
+  });
+
+  window.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && state.selectedGoalId) {
+      state.selectedGoalId = null;
+      render();
+    }
+  });
+
   render();
 })();

frontend/styles/app.css

@@ -82,6 +82,7 @@ input:focus-visible {
 }
 
 .phone {
+  position: relative;
   width: min(100%, 430px);
   height: min(920px, calc(100dvh - 36px));
   min-height: min(760px, calc(100dvh - 36px));
@@ -216,7 +217,8 @@ input:focus-visible {
 .kid-tile,
 .goal-card,
 .style-option,
-.avatar-slot {
+.avatar-slot,
+.goal-create {
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
   background: rgba(255, 255, 255, 0.9);
@@ -379,6 +381,49 @@ input:focus-visible {
   gap: 10px;
 }
 
+.goal-create {
+  display: grid;
+  gap: 10px;
+  padding: 13px;
+}
+
+.goal-create-copy {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.goal-input-label {
+  color: var(--ink);
+  font-size: 12px;
+  font-weight: 1000;
+  text-transform: uppercase;
+}
+
+.goal-create-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+}
+
+.goal-create-row input {
+  width: 100%;
+  min-width: 0;
+  min-height: 46px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 0 14px;
+  background: #fff;
+  color: var(--ink);
+  font-weight: 900;
+}
+
+.goal-create-row input::placeholder {
+  color: #8a98aa;
+}
+
 .goal-row {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -436,7 +481,8 @@ input:focus-visible {
 
 .approve-button,
 .complete-button,
-.audio-button {
+.audio-button,
+.create-button {
   min-height: 44px;
   border: 0;
   border-radius: 999px;
@@ -447,7 +493,15 @@ input:focus-visible {
   box-shadow: var(--shadow-tight);
 }
 
+.create-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
 .approve-button:disabled,
+.complete-button:disabled,
 .audio-button:disabled {
   cursor: not-allowed;
   border: 1px solid var(--line);
@@ -463,7 +517,9 @@ input:focus-visible {
 }
 
 .kid-tile {
-  min-height: 178px;
+  position: relative;
+  aspect-ratio: 1 / 1;
+  min-height: 132px;
   overflow: hidden;
   text-align: left;
   color: var(--ink);
@@ -471,27 +527,65 @@ input:focus-visible {
 
 .kid-tile img {
   width: 100%;
-  height: 96px;
+  height: 100%;
   display: block;
   object-fit: cover;
   background: var(--theme-soft);
 }
 
-.tile-body {
+.tile-status {
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+  max-width: calc(100% - 16px);
+  pointer-events: none;
+}
+
+.goal-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.goal-modal-backdrop {
+  position: absolute;
+  z-index: 20;
+  inset: 0;
   display: grid;
-  gap: 6px;
-  padding: 10px;
+  place-items: end center;
+  padding: 18px 14px calc(var(--nav-h) + 14px);
 }
 
-.tile-title {
-  min-height: 38px;
-  font-size: 15px;
-  font-weight: 1000;
-  line-height: 1.1;
+.modal-scrim {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(31, 42, 55, 0.42);
 }
 
-.goal-card {
-  overflow: hidden;
+.goal-modal-shell {
+  position: relative;
+  z-index: 1;
+  width: min(100%, 390px);
+  max-height: min(690px, calc(100dvh - var(--nav-h) - 44px));
+  overflow: auto;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 24px 54px rgba(13, 24, 40, 0.28);
+}
+
+.modal-close {
+  position: absolute;
+  z-index: 2;
+  top: 10px;
+  right: 10px;
+  display: grid;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.72);
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.94);
+  color: var(--ink);
+  box-shadow: var(--shadow-tight);
 }
 
 .goal-card-hero {
@@ -716,6 +810,18 @@ input:focus-visible {
     padding: 11px;
   }
 
+  .goal-create {
+    padding: 11px;
+  }
+
+  .goal-create-row {
+    grid-template-columns: 1fr;
+  }
+
+  .create-button {
+    justify-content: center;
+  }
+
   .section-label {
     margin-bottom: 7px;
     font-size: 12px;
@@ -767,6 +873,14 @@ input:focus-visible {
   .nav {
     min-height: 68px;
   }
+
+  .goal-modal-backdrop {
+    padding: 12px 12px 78px;
+  }
+
+  .goal-modal-shell {
+    max-height: calc(100dvh - 96px);
+  }
 }
 
 @media (max-width: 374px) {