POST-FORM WEB

<!-- Traditional: 47 fields, 3 sections, validation hell -->
<form action="/submit" method="POST">
  <section class="personal-info">
    <label>First Name <input type="text" required /></label>
    <label>Last Name <input type="text" required /></label>
    <label>Email <input type="email" required /></label>
    <label>Phone <input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" /></label>
    <label>DOB <input type="date" max="2006-01-01" /></label>
    <!-- 42 more fields... -->
  </section>
  <section class="preferences">
    <label>
      <input type="checkbox" name="newsletter" />
      Send me emails I'll never read
    </label>
    <label>
      Communication Preference:
      <select>
        <option>Email</option>
        <option>SMS</option>
        <option>Carrier Pigeon</option>
      </select>
    </label>
  </section>
  <button type="submit">Submit (and pray validation passes)</button>
</form>

// Pure conversation: no form at all
async function handleUserMessage(message: string, context: Context) {
  const response = await ai.chat({
    messages: [
      { role: "system", content: "You're helping user book a flight." },
      ...context.history,
      { role: "user", content: message }
    ]
  });
  
  // Extract structured data from conversation
  const extracted = await ai.extract({
    text: response,
    schema: {
      departure: "string",
      destination: "string", 
      date: "date",
      passengers: "number",
      class: "economy | business | first"
    }
  });
  
  // Update context with extracted info
  context.flightPreferences = { ...context.flightPreferences, ...extracted };
  
  // Check if we have everything
  if (isComplete(context.flightPreferences)) {
    return await bookFlight(context.flightPreferences);
  }
  
  return { message: response, data: context };
}

// User: "I need to fly to Tokyo next week"
// AI: "Great! I can help with that. What city are you departing from?"
// User: "SF"
// AI: "Perfect. How many passengers?"
// User: "Just me"
// AI: "Got it. I found flights from San Francisco to Tokyo next Tuesday..."

// Hybrid: conversation + structured confirmation
interface HybridBooking {
  mode: "conversation" | "form";
  extractedData: Partial<FlightBooking>;
  confidence: number;
}

async function handleInput(input: string | FormData) {
  if (typeof input === "string") {
    // Natural language input
    const extracted = await extractFlightInfo(input);
    
    if (extracted.confidence > 0.9) {
      // High confidence: show structured confirmation
      return {
        mode: "form",
        data: extracted.data,
        message: "Here's what I understood. Look good?"
      };
    } else {
      // Low confidence: ask clarifying questions
      return {
        mode: "conversation",
        message: await generateClarification(extracted)
      };
    }
  } else {
    // Structured form submission
    return await bookFlight(Object.fromEntries(input));
  }
}

// Flow:
// 1. User: "Book me a flight to Tokyo next week business class"
// 2. AI extracts: { destination: "Tokyo", date: "2025-10-21", class: "business" }
// 3. Shows form pre-filled with extraction
// 4. User edits departure city (AI guessed wrong)
// 5. Submit button → done

// Route to appropriate interface based on intent
async function routeIntent(input: string): Promise<InterfaceMode> {
  const intent = await classifyIntent(input);
  
  switch (intent.type) {
    case "quick_lookup":
      // "What's my balance?" → instant answer, no form
      return { type: "instant", handler: queryBalance };
    
    case "simple_transaction":
      // "Send $50 to Alex" → confirm + execute
      return { type: "confirmation", data: intent.extracted };
    
    case "complex_workflow":
      // "I need to refinance my mortgage" → structured form
      // Too many variables, too important to guess
      return { type: "form", formId: "mortgage-application" };
    
    case "exploration":
      // "What are my investment options?" → conversational
      return { type: "conversation", agent: "investment-advisor" };
    
    case "ambiguous":
      // Not clear what user wants
      return { type: "clarification" };
  }
}

// The interface adapts to task complexity
// Simple → voice/chat
// Complex → structured
// Ambiguous → clarify first

// Voice-first, but structure available
interface VoiceInterface {
  transcript: string;
  confidence: number;
  extracted: Record<string, any>;
  
  // Escape hatch to form
  showForm(): void;
}

async function handleVoiceInput(audio: Blob): Promise<VoiceInterface> {
  // Transcribe
  const transcript = await transcribe(audio);
  
  // Extract intent + data
  const { intent, data, confidence } = await extract(transcript);
  
  if (confidence < 0.7) {
    // Can't understand → offer structured alternative
    return {
      transcript,
      confidence,
      extracted: data,
      message: "I didn't quite catch that. Want to fill out a quick form instead?",
      showForm: () => renderForm(intent)
    };
  }
  
  // High confidence → proceed with voice
  return processIntent(intent, data);
}

// Voice works until it doesn't
// Then fallback to structure
// User chooses modality based on context

// AI fills form as you talk
class StreamingFormFiller {
  private form: HTMLFormElement;
  private ai: AIStream;
  
  async listenAndFill() {
    const stream = await this.ai.transcribeStream();
    
    for await (const chunk of stream) {
      const extracted = await this.extract(chunk.text);
      
      // Update form fields in real-time
      for (const [field, value] of Object.entries(extracted)) {
        const input = this.form.elements.namedItem(field);
        if (input && !input.value) {
          // Only fill empty fields
          input.value = value;
          this.highlightField(input); // Show what just filled
        }
      }
    }
  }
}

// User speaks, form populates itself
// Can see extraction happening live
// Override any field if AI gets it wrong
// Submit when done talking

// Forms that know what you mean
async function renderSmartForm(context: UserContext) {
  const baseForm = getFormTemplate("transfer");
  
  // Pre-fill from context
  if (context.recentlyViewedContact) {
    baseForm.recipient = context.recentlyViewedContact;
  }
  
  if (context.typicalTransferAmount) {
    baseForm.amount = context.typicalTransferAmount;
    baseForm.amountConfidence = "This is your usual amount";
  }
  
  // Adjust fields based on user
  if (context.userTier === "premium") {
    baseForm.addField({
      name: "priority",
      label: "Rush transfer?",
      default: false
    });
  }
  
  // Remove unnecessary fields
  if (context.hasSingleAccount) {
    baseForm.removeField("fromAccount");
    baseForm.metadata.fromAccount = context.accounts[0].id;
  }
  
  return baseForm;
}

// Form knows who you are
// Hides irrelevant fields
// Pre-fills likely values
// Still structured, just smarter

// Only show fields as needed
class AdaptiveForm {
  private fields: Field[] = [];
  private shownFields: Set<string> = new Set();
  
  async processInput(field: string, value: any) {
    // User filled a field
    this.data[field] = value;
    
    // Determine what to show next based on AI
    const next = await this.ai.determineNextFields({
      template: this.formTemplate,
      currentData: this.data,
      userContext: this.context
    });
    
    // Show only relevant next fields
    for (const field of next.fields) {
      if (!this.shownFields.has(field.name)) {
        this.renderField(field);
        this.shownFields.add(field.name);
      }
    }
    
    // Hide fields that became irrelevant
    for (const field of next.hideFields) {
      this.hideField(field);
      this.shownFields.delete(field);
    }
  }
}

// Booking flight:
// 1. Shows: destination
// 2. User enters "Tokyo"
// 3. AI shows: date (not origin, guessed from IP)
// 4. User enters date
// 5. AI shows: class preference (detected multi-day trip)
// 6. Never shows: number of bags (business class includes 2)

// Form adapts to user's answers
// Only ask what matters
// Skip what can be inferred

// Conversation → Form → Execution
async function conversationToExecution(sessionId: string) {
  // Phase 1: Free-form conversation
  const conversation = await runConversation(sessionId, {
    goal: "Understand user's insurance needs"
  });
  
  // Phase 2: Extract structured data
  const extracted = await extractFromConversation(conversation.messages);
  
  // Phase 3: Show form as checkpoint
  const form = await generateForm({
    template: "insurance-application",
    prefill: extracted,
    editable: true,
    validations: true
  });
  
  // User reviews/edits the structured extraction
  const reviewed = await waitForFormSubmission(form);
  
  // Phase 4: Execute with validated data
  return await submitApplication(reviewed);
}

// Talk freely (conversation)
// Review what was understood (form)
// Confirm and submit (execution)

// Form is the checkpoint, not the interface

// Some things don't need forms anymore
interface VoiceCommand {
  utterance: string;
  intent: Intent;
  execute: boolean;
}

async function handleCommand(audio: Blob) {
  const command = await parseVoiceCommand(audio);
  
  switch (command.intent) {
    case "check_balance":
      // No form needed, just answer
      return await getBalance(command.params.account);
    
    case "send_money":
      // Need confirmation, but no form
      const amount = command.params.amount;
      const to = command.params.recipient;
      
      if (amount > 1000) {
        // Confirm via voice
        const confirm = await askConfirmation(
          `Send $${amount} to ${to}?`
        );
        if (!confirm) return { cancelled: true };
      }
      
      return await transfer(command.params);
    
    case "pay_bill":
      // Recurring action, no form
      const bill = await findBill(command.params.billName);
      return await payBill(bill.id);
  }
}

// User: "What's my balance?"
// AI: "$3,247.82"
// (no form was harmed in this transaction)

// User: "Send Alex $50"
// AI: "Sent."
// (still no form)

// User: "Pay my electric bill"
// AI: "Paid $127.43 to PG&E."
// (forms have left the chat)

// Edge implications of post-form interfaces

// Traditional: Form → Validation → Submit → Backend
app.post("/submit-form", async (req) => {
  const data = validate(req.body);
  return await db.insert(data);
});

// Post-form: Intent → Extract → Validate → Execute
app.post("/intent", async (req) => {
  const { input, modality } = req.body; // voice, text, etc
  
  // Extract structured intent
  const intent = await ai.extract({
    input,
    schema: getIntentSchema(modality)
  });
  
  // Validate extraction
  const valid = validate(intent);
  
  if (!valid.ok) {
    // Ask for clarification (conversation mode)
    return { 
      type: "clarification", 
      message: generateQuestion(valid.missing)
    };
  }
  
  // Execute if confident
  if (intent.confidence > 0.9) {
    return await executeIntent(intent);
  }
  
  // Otherwise checkpoint with form
  return {
    type: "confirm",
    form: generateForm(intent),
    prefilled: true
  };
});

// State management shifts from "form state" to "intent state"
// Validation becomes "extraction confidence"
// Submit becomes "execute when ready"