feat(chef-b): Phase 2 — consolidated prompt, auto-expand textarea, one-tap suggestion chips (#391)

spe1020 · spe1020 · claude · web-flow · commit 1bc459de4702 · 2026-05-13T21:34:39.000-04:00
* feat(chef-b): consolidate prompt copy, auto-expand textarea, suggestion chips

Phase 2 of the Chef ₿ UX redesign.

Prompt copy
- Removed the three-line stack ("What's cooking? Tell me what
  you're craving…" + "Pro Kitchen feature." + the textarea
  label). Kept only the textarea label "What are you in the
  mood for?".
- Folded the Phase 5 PRO KITCHEN badge in next to the H1 since
  it was a 1-line change tied to the copy consolidation — small
  orange-tint pill (bg-primary/10 text-primary border-primary/30)
  that replaces the standalone sub-line.

Textarea auto-expand
- rows="2" baseline; `.auto-grow` adds min-height: 6.5rem (~2
  rows + scan-pill gutter) and max-height: 14rem (~6 rows) with
  overflow-y:auto past that.
- New `autoSizePrompt()` does `style.height = scrollHeight`
  after a tick (so chip taps, scan auto-fill, and
  ingredient add/remove all flow through the same path as user
  typing).
- Reactive `$: promptInput, autoSizePrompt()` is the single
  source of truth — `on:input` removed, manual calls in handlers
  not needed.
- Scan pill still docked bottom-right inside the textarea.

Suggestion chips
- Six one-tap prompt seeds beneath the textarea: Cozy
  vegetarian, 30-min dinner, Use what's in my fridge,
  High-protein lunch, Kid-friendly, Pantry only.
- Tapping a chip replaces the textarea contents, focuses, and
  parks the cursor at the end so the user can keep typing to
  refine.
- Real `&lt;button&gt;` elements, tab-reachable, Enter/Space activates
  natively, orange focus-visible ring.
- Built as a local `.suggestion-chip` pattern on this page; not
  extracted to a shared Chip component per the brief — the
  existing detected-ingredients chips are close but not identical
  and we'll consolidate later if it earns its keep.
- Disabled while a generation is in flight.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;

* fix(chef-b): chips fire generation directly (one-tap presets)

Tapping a suggestion chip now fires `/api/zappy` immediately with
the chip's label as the prompt — one tap, not two. The textarea
is left alone so chips and the custom input stay separate
affordances: one-tap presets vs. write-your-own.

- `generateRecipe(mode, promptOverride?)` now accepts an optional
  prompt override so the same code path serves both Cook It (uses
  promptInput) and chip firing (uses the chip label). Body sent
  to the API is identical to a Cook It request.
- New `fireChip(text)` wraps the call in a try/finally that
  toggles a `tappedChip` marker — visible to the template so the
  active chip can render a small spinner inline next to its label
  while the request is in flight.
- All chips + Cook It + Surprise Me are disabled while
  `status === 'generating'`. The tapped chip keeps a higher
  opacity than the others so it's clear which one fired.
- On error, the existing errorMessage flow surfaces it and the
  tappedChip marker resets — chip returns to idle.

Removed the old `applyChip` (which filled the textarea + focused
it). The reactive `$: promptInput, autoSizePrompt()` still
handles auto-grow for the textarea — no longer needed for chips
since chips don't write to promptInput anymore.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;

* style(chef-b): expand chip presets + add Nourish program group

Regular chips
- Dropped "Use what's in my fridge" — the Scan pill in the
  textarea now covers that flow directly.
- Moved "High-protein lunch" out of the regular row into the
  Nourish group below (as "High protein").
- Added four popular + healthy presets: Mediterranean dinner,
  One-pot meal, Sheet pan dinner, Hearty salad.

Nourish program group
- New section below the regular chips with a small leaf-prefix
  label ("Nourish program") and three chips: High protein, Gut
  health, Real food.
- Each chip carries a small green leaf next to its label so
  users can see at a glance which prompts align with the Nourish
  nutrition surface.
- Same one-tap fireChip behavior as the regular chips —
  identical POST to /api/zappy with the chip's label as the
  prompt. The leaf is a visual program tag, not a separate code
  path. During firing the leaf is replaced inline by the
  spinner so the loading state matches the regular chips.

The green is the existing Nourish brand color already used in
IntelligenceMenu for the same surface — not a new token.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;

* style(chef-b): intersperse Nourish chips into the main suggestion row

Dropped the dedicated "Nourish program" section and label. The
three Nourish-tagged chips (High protein, Gut health, Real food)
now sit in the single flex-wrap row alongside the regular
presets, each still carrying its green leaf glyph as a visual
tag. Order is intentionally interspersed (positions 2, 5, 8 in
the 11-chip row) so the row reads as a mixed bag of options
rather than a categorized taxonomy.

Data model collapsed to a single `Chip = { label, nourish? }`
array. Template iterates once; `chip.nourish` toggles the leaf
icon. The leaf is replaced inline by the loading spinner while
firing, identical to non-Nourish chips.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;

* fix(chef-b): never ask clarifying questions on short prompts

The OpenAI system instruction left room for Chef ₿ to ask follow-
up questions when the user's prompt was a short theme like
"Real food" or "Gut health" (one of the new suggestion chips).
The chips are designed as one-tap presets — the user expects a
recipe to land, not a question they can't reply to (the endpoint
is single-turn and there's no chat UI).

Added a rule to SYSTEM_INSTRUCTION: always commit to a recipe,
treat short theme prompts (with the chip labels listed as
examples) as creative direction, make sensible assumptions, and
go straight to the recipe. No clarifying questions, no offers to
suggest options, no stalling.

If we later add a true chat / reply affordance, this guardrail
can be loosened.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;

---------

Co-authored-by: spe1020 &lt;sethsager@Seths-MacBook-Air.local&gt;
Co-authored-by: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "zap.cooking",
   "license": "MIT",
-  "version": "4.2.423",
+  "version": "4.2.428",
   "private": true,
   "scripts": {
     "dev": "vite dev",
diff --git a/src/routes/api/zappy/+server.ts b/src/routes/api/zappy/+server.ts
@@ -34,6 +34,8 @@ Your tone is warm, encouraging, and practical. Never preachy. Never robotic. You
 
 You generate clear, achievable recipes using common ingredients unless the user specifies otherwise. Recipes are guides, not rules. Encourage substitutions and experimentation when helpful.
 
+Always commit to a recipe. Even when the user's prompt is short, vague, or a theme (e.g. "Real food", "Gut health", "30-min dinner", "Cozy vegetarian", "Kid-friendly", "High protein", "Mediterranean dinner", "Pantry only"), treat it as a creative direction. Make sensible assumptions about cuisine, ingredients, and constraints, then go straight to the recipe. Do not ask the user clarifying questions, do not offer to suggest options, do not stall — pick something good and cook.
+
 Keep things focused and human. No long backstories. No unnecessary fluff.
 
 ALWAYS format your recipes exactly like this:
diff --git a/src/routes/zappy/+page.svelte b/src/routes/zappy/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy, tick } from 'svelte';
   import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
   import { userPublickey } from '$lib/nostr';
@@ -11,6 +11,7 @@
   import Modal from '../../components/Modal.svelte';
   import LightningIcon from 'phosphor-svelte/lib/Lightning';
   import RobotIcon from 'phosphor-svelte/lib/Robot';
+  import LeafIcon from 'phosphor-svelte/lib/Leaf';
   import CookingPotIcon from 'phosphor-svelte/lib/CookingPot';
   import CopyIcon from 'phosphor-svelte/lib/Copy';
   import CheckIcon from 'phosphor-svelte/lib/Check';
@@ -38,6 +39,70 @@
   
   // Form state
   let promptInput = '';
+  let promptEl: HTMLTextAreaElement;
+
+  // Auto-grow the prompt textarea between min (~2 rows) and max
+  // (~6 rows). CSS sets the bounds via min-height / max-height +
+  // overflow-y:auto; this keeps the rendered height in sync with
+  // content. Wrapped in tick() so we read scrollHeight *after* the
+  // new value is in the DOM (covers chip taps, scan auto-fill,
+  // ingredient add/remove — all of which assign promptInput
+  // programmatically).
+  async function autoSizePrompt() {
+    await tick();
+    if (!promptEl) return;
+    promptEl.style.height = 'auto';
+    promptEl.style.height = `${promptEl.scrollHeight}px`;
+  }
+
+  // Run autoSize whenever the prompt value changes from any path —
+  // user typing (via bind:value), chip apply, scan auto-fill, etc.
+  $: if (browser) {
+    promptInput;
+    autoSizePrompt();
+  }
+
+  // One-tap prompt seeds. Tapping a chip fires a generation
+  // immediately using the chip's label as the prompt — the textarea
+  // is left alone so chips and the custom input stay separate
+  // affordances (one-tap presets vs. write-your-own).
+  //
+  // The three Nourish-tagged chips carry a green leaf glyph so users
+  // can see at a glance which prompts align with the Nourish
+  // nutrition surface. They share the same fireChip behavior and
+  // POST to /api/zappy like every other chip; the leaf is a visual
+  // tag only. Order is intentionally interspersed (not grouped) so
+  // the row reads as a mixed bag of presets rather than a taxonomy.
+  type Chip = { label: string; nourish?: boolean };
+  const suggestionChips: Chip[] = [
+    { label: 'Cozy vegetarian' },
+    { label: 'High protein', nourish: true },
+    { label: '30-min dinner' },
+    { label: 'Mediterranean dinner' },
+    { label: 'Gut health', nourish: true },
+    { label: 'One-pot meal' },
+    { label: 'Sheet pan dinner' },
+    { label: 'Real food', nourish: true },
+    { label: 'Hearty salad' },
+    { label: 'Kid-friendly' },
+    { label: 'Pantry only' }
+  ];
+
+  // Tracks which chip (if any) is currently driving the generation.
+  // Used to show a per-chip spinner while leaving the rest dimmed.
+  let tappedChip: string | null = null;
+
+  async function fireChip(text: string) {
+    if (status === 'generating') return;
+    tappedChip = text;
+    try {
+      await generateRecipe('prompt', text);
+    } finally {
+      // Reset on both success and error so the chip returns to idle
+      // even when generateRecipe surfaces an error via errorMessage.
+      tappedChip = null;
+    }
+  }
   
   // Rotating placeholder examples
   const placeholderExamples = [
@@ -115,21 +180,27 @@
     if (zapSuccessTimeout) clearTimeout(zapSuccessTimeout);
   });
   
-  // Generate recipe from prompt
-  async function generateRecipe(mode: 'prompt' | 'hungry' = 'prompt') {
+  // Generate recipe from prompt. `promptOverride` lets one-tap chips
+  // supply their label as the prompt without writing into the
+  // textarea — keeps presets and custom input as separate paths.
+  async function generateRecipe(
+    mode: 'prompt' | 'hungry' = 'prompt',
+    promptOverride?: string
+  ) {
     if (status === 'generating') return;
-    if (mode === 'prompt' && !promptInput.trim()) return;
-    
+    const effectivePrompt = (promptOverride ?? promptInput).trim();
+    if (mode === 'prompt' && !effectivePrompt) return;
+
     status = 'generating';
     errorMessage = '';
     output = '';
-    
+
     try {
       const response = await fetch('/api/zappy', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          prompt: promptInput.trim(),
+          prompt: effectivePrompt,
           mode,
           pubkey: $userPublickey
         })
@@ -383,15 +454,18 @@
 
 <div class="flex flex-col max-w-[760px] mx-auto gap-6 pb-8">
   <!-- Header -->
-  <div class="flex flex-col gap-2">
-    <div class="flex items-center gap-3">
-      <RobotIcon size={32} class="text-primary" weight="fill" />
-      <h1>Chef ₿</h1>
-    </div>
-    <p class="text-caption">
-      What's cooking? Tell me what you're craving or show me your fridge!
-    </p>
-    <p class="text-caption text-sm">Pro Kitchen feature.</p>
+  <div class="flex items-center gap-3 flex-wrap">
+    <RobotIcon size={32} class="text-primary" weight="fill" />
+    <h1>Chef ₿</h1>
+    <!-- Pro Kitchen badge — replaces the standalone
+         "Pro Kitchen feature." line that used to sit below the
+         H1. Folded in here since it's the same copy-consolidation
+         pass (Phase 5 work, cheap to do now). -->
+    <span
+      class="inline-flex px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wide border bg-primary/10 text-primary border-primary/30"
+    >
+      PRO KITCHEN
+    </span>
   </div>
   
   {#if isLoading}
@@ -427,10 +501,11 @@
           <div class="relative">
             <textarea
               id="prompt"
+              bind:this={promptEl}
               bind:value={promptInput}
               placeholder={currentPlaceholder}
-              rows="5"
-              class="input resize-none text-base w-full pb-12"
+              rows="2"
+              class="input auto-grow resize-none text-base w-full pb-12"
               disabled={status === 'generating'}
             ></textarea>
             <!-- Scan Fridge — small labeled pill docked in the textarea's
@@ -456,6 +531,35 @@
               {/if}
             </button>
           </div>
+
+          <!-- Suggestion chips — one-tap presets. The chip's label IS
+               the prompt; tapping fires a generation immediately
+               (textarea is left alone). Nourish-tagged chips carry
+               a small green leaf next to the label; they're
+               interspersed (not grouped) so the row reads as a
+               mixed bag rather than a taxonomy. Built as a local
+               pattern; not extracted to a shared Chip component
+               yet. -->
+          <div class="flex flex-wrap gap-2" aria-label="Prompt suggestions">
+            {#each suggestionChips as chip}
+              {@const isFiring = tappedChip === chip.label}
+              <button
+                type="button"
+                class="suggestion-chip"
+                class:is-loading={isFiring}
+                on:click={() => fireChip(chip.label)}
+                disabled={status === 'generating'}
+                aria-busy={isFiring}
+              >
+                {#if isFiring}
+                  <ArrowsClockwiseIcon size={12} class="animate-spin" />
+                {:else if chip.nourish}
+                  <LeafIcon size={12} weight="fill" class="text-green-500" />
+                {/if}
+                {chip.label}
+              </button>
+            {/each}
+          </div>
         </div>
 
         <!-- Hidden file input for camera/upload -->
@@ -805,6 +909,63 @@
 {/if}
 
 <style>
+  /* Prompt textarea — starts compact (~2 rows of usable text plus the
+     scan-pill gutter at the bottom) and grows up to ~6 rows. The JS
+     `autoSizePrompt` keeps `style.height` in sync with scrollHeight;
+     max-height + overflow-y here cap the growth and switch to scroll. */
+  .input.auto-grow {
+    min-height: 6.5rem;
+    max-height: 14rem;
+    overflow-y: auto;
+  }
+
+  /* Suggestion chip — orange-tint button at secondary visual weight,
+     clearly tappable, focus-visible ring for keyboard users. Pattern
+     kept local on this page; we'll extract a shared Chip component
+     later if the detected-ingredients chips end up close enough to
+     consolidate. */
+  .suggestion-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 30px;
+    padding: 0 12px;
+    border-radius: 999px;
+    border: 0;
+    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-primary);
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background-color 140ms ease,
+      transform 140ms ease,
+      box-shadow 140ms ease,
+      opacity 140ms ease;
+  }
+  .suggestion-chip:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
+  }
+  .suggestion-chip:active:not(:disabled) {
+    transform: scale(0.96);
+  }
+  .suggestion-chip:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 55%, transparent);
+  }
+  .suggestion-chip:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  /* The chip currently driving a generation keeps its readability
+     above the other disabled chips so the user can see WHICH one
+     fired. Pairs with the inline spinner in the template. */
+  .suggestion-chip.is-loading:disabled {
+    opacity: 0.9;
+    background-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
+  }
+
   /* Scan Fridge — labeled pill docked in the textarea's bottom-right
      corner (Slack/ChatGPT/iMessage convention). Always-visible "Scan"
      text means no hover tooltip needed on mobile. Uses the Chef ₿

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "zap.cooking",`
`3`	`3`	`"license": "MIT",`
`4`		`- "version": "4.2.423",`
	`4`	`+ "version": "4.2.428",`
`5`	`5`	`"private": true,`
`6`	`6`	`"scripts": {`
`7`	`7`	`"dev": "vite dev",`