pocket_phone 0.1.0

data/app/views/layouts/pocket_phone/_styles.html.erb

@@ -0,0 +1,192 @@
+<style>
+  :root {
+    --bg: #ffffff; --side: #f4f4f6; --line: #e2e2e7; --text: #111113; --muted: #86868b;
+    --grey: #e9e9eb; --grey-text: #111113; --blue: #0b84fe; --green: #34c759; --red: #ff3b30;
+    --select: #0a6fe0; --card: #f1f1f3; --field: #ffffff; --shadow: 0 8px 40px rgba(0, 0, 0, .18);
+    color-scheme: light dark;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #1c1c1e; --side: #232326; --line: #38383c; --text: #f5f5f7; --muted: #98989f;
+      --grey: #3a3a3d; --grey-text: #f5f5f7; --blue: #0b84fe; --green: #30d158; --red: #ff453a;
+      --select: #0a6fe0; --card: #2c2c2f; --field: #1c1c1e; --shadow: 0 8px 40px rgba(0, 0, 0, .6);
+    }
+  }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; margin: 0; }
+  body {
+    background: var(--bg); color: var(--text);
+    font: 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  button, input, select, textarea { font: inherit; color: inherit; }
+  code, pre { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
+  [hidden] { display: none !important; }
+
+  .pp { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: 100dvh; }
+
+  /* --- sidebar ------------------------------------------------------------ */
+  .pp-sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--side); border-right: 1px solid var(--line); }
+  .pp-sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 10px 18px; }
+  .pp-sidebar-top h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
+  #pp-sidebar { flex: 1; overflow-y: auto; padding: 0 8px; }
+  .pp-sidebar-empty { color: var(--muted); padding: 8px 12px; margin: 0; }
+  .pp-sidebar-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
+  .pp-sidebar-foot form { margin: 0; }
+
+  .pp-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 4px; border-radius: 10px; color: inherit; text-decoration: none; }
+  .pp-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
+  .pp-item.current { background: var(--select); color: #fff; }
+  .pp-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+  .pp-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+  .pp-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .pp-item-time { font-size: 12px; color: var(--muted); flex: none; }
+  .pp-item-snippet { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: 1.35em; }
+  .pp-item.current .pp-item-time, .pp-item.current .pp-item-snippet { color: rgba(255, 255, 255, .8); }
+  .pp-unread { width: 8px; height: 8px; border-radius: 50%; flex: none; }
+  .pp-unread.on { background: var(--blue); }
+
+  .pp-avatar { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; color: #fff; font-size: 16px; font-weight: 600; background: linear-gradient(hsl(var(--hue, 220) 28% 68%), hsl(var(--hue, 220) 28% 50%)); }
+  .pp-avatar img { width: 100%; height: 100%; object-fit: cover; }
+
+  /* --- thread ------------------------------------------------------------- */
+  .pp-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+  .pp-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
+  .pp-back { display: none; font-size: 30px; line-height: 1; color: var(--blue); text-decoration: none; padding: 0 6px 4px 0; }
+  .pp-head-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+  .pp-head-title span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .pp-head-controls { display: flex; align-items: center; gap: 10px; flex: none; }
+  .pp-head-controls form { display: flex; align-items: center; gap: 10px; margin: 0; }
+  .pp-head-controls label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
+  .pp-head-controls select { font-size: 13px; padding: 3px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--field); }
+  .pp-pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--green); }
+  .pp-pill.imessage { background: var(--blue); }
+  .pp-banner { padding: 8px 16px; font-size: 13px; background: color-mix(in srgb, #ffcc00 22%, var(--bg)); border-bottom: 1px solid var(--line); }
+
+  .pp-messages { flex: 1; overflow-y: auto; padding: 12px 16px 6px; display: flex; flex-direction: column; }
+  .pp-stamp { margin: 14px 0 6px; text-align: center; font-size: 12px; color: var(--muted); }
+  .pp-stamp strong { font-weight: 600; }
+
+  .pp-row { display: flex; flex-direction: column; align-items: flex-start; margin-top: 8px; }
+  .pp-row.continued { margin-top: 2px; }
+  .pp-row.mine { align-items: flex-end; }
+  .pp-sender { font-size: 12px; color: var(--muted); margin: 4px 0 2px 12px; }
+  .pp-row.mine .pp-sender { display: none; }
+  .pp-line { display: flex; align-items: center; gap: 6px; max-width: min(78%, 560px); }
+  .pp-row.mine .pp-line { flex-direction: row-reverse; }
+  .pp-stack { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
+  .pp-row.mine .pp-stack { align-items: flex-end; }
+
+  .pp-bubble { padding: 7px 12px; border-radius: 18px; background: var(--grey); color: var(--grey-text); white-space: pre-wrap; overflow-wrap: anywhere; }
+  .pp-bubble a { color: inherit; }
+  .pp-row.mine .pp-bubble { background: var(--green); color: #fff; }
+  .pp-row.mine.imessage .pp-bubble { background: var(--blue); }
+  .pp-row.undelivered .pp-stack { opacity: .45; }
+
+  .pp-media { display: block; max-width: 280px; max-height: 320px; border-radius: 16px; }
+  .pp-audio { max-width: 280px; }
+  .pp-file { display: inline-block; padding: 8px 12px; border-radius: 14px; background: var(--card); color: inherit; text-decoration: none; }
+  .pp-carousel { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; }
+  .pp-carousel > * { flex: none; scroll-snap-align: start; }
+  .pp-carousel .pp-media { max-width: 200px; max-height: 240px; }
+
+  .pp-card { display: block; width: 280px; max-width: 100%; border-radius: 16px; overflow: hidden; background: var(--card); color: inherit; text-decoration: none; }
+  .pp-card-image { position: relative; }
+  .pp-card-image img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
+  .pp-card-overlay { position: absolute; inset: auto 0 0 0; padding: 18px 12px 8px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); display: flex; flex-direction: column; }
+  .pp-card-body { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 9px; }
+  .pp-card-body strong { font-size: 14px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+  .pp-card-body span { font-size: 12px; color: var(--muted); }
+  .pp-card-split { flex-direction: row; justify-content: space-between; gap: 12px; }
+  .pp-card-split div { display: flex; flex-direction: column; }
+  .pp-card-split .trailing { text-align: right; }
+  .pp-card-app, .pp-card-warning { padding: 6px 12px 8px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); }
+  .pp-card-warning { color: #b25000; background: color-mix(in srgb, #ffcc00 18%, var(--card)); }
+
+  .pp-reactions { position: absolute; top: -12px; right: -10px; display: flex; gap: 2px; padding: 2px 5px; border-radius: 999px; background: var(--card); border: 2px solid var(--bg); font-size: 12px; line-height: 1.2; }
+  .pp-row.mine .pp-reactions { right: auto; left: -10px; }
+  .pp-row:has(.pp-reactions) { margin-top: 18px; }
+
+  .pp-tools { display: flex; align-items: center; gap: 4px; flex: none; opacity: 0; transition: opacity .12s; }
+  .pp-row:hover .pp-tools, .pp-row.open .pp-tools { opacity: 1; }
+  .pp-tapbacks { display: flex; padding: 2px 4px; border-radius: 999px; background: var(--card); }
+  .pp-tapbacks button { border: 0; background: none; padding: 2px 3px; cursor: pointer; font-size: 14px; border-radius: 50%; }
+  .pp-tapbacks button:hover { transform: scale(1.25); }
+  .pp-info { border: 0; background: none; padding: 2px 4px; cursor: pointer; color: var(--muted); font-size: 15px; }
+
+  .pp-receipt, .pp-note { font-size: 11px; color: var(--muted); margin: 2px 6px 0; max-width: min(78%, 560px); }
+  .pp-receipt { font-weight: 600; }
+  .pp-receipt span { font-weight: 400; }
+  .pp-receipt.failed { color: var(--red); }
+
+  .pp-details { align-self: stretch; margin: 6px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--card); font-size: 12px; overflow-x: auto; }
+  .pp-details dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; }
+  .pp-details dt { color: var(--muted); }
+  .pp-details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+  .pp-details ul { margin: 0 0 4px; padding: 0; list-style: none; }
+  .pp-details li span { color: var(--muted); }
+  .pp-details li.bad b, .pp-details li.bad { color: var(--red); }
+  .pp-details pre { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
+
+  .pp-typing { display: inline-flex; gap: 4px; padding: 11px 12px; }
+  .pp-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: pp-blink 1.2s infinite both; }
+  .pp-typing i:nth-child(2) { animation-delay: .2s; }
+  .pp-typing i:nth-child(3) { animation-delay: .4s; }
+  @keyframes pp-blink { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
+  @media (prefers-reduced-motion: reduce) { .pp-typing i { animation: none; } }
+
+  /* --- compose ------------------------------------------------------------ */
+  .pp-compose { display: flex; align-items: flex-end; gap: 8px; padding: 8px 16px 14px; margin: 0; }
+  .pp-field { flex: 1; display: flex; align-items: flex-end; gap: 6px; min-width: 0; padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--field); }
+  .pp-field textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: none; padding: 4px 0; max-height: 140px; }
+  .pp-as { border: 0; background: var(--card); border-radius: 999px; padding: 4px 8px; font-size: 12px; margin-bottom: 1px; max-width: 130px; }
+  .pp-attached { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: var(--card); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
+  .pp-send { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; cursor: pointer; }
+  .pp-compose.sms .pp-send { background: var(--green); }
+  .pp-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--blue); cursor: pointer; }
+  .pp-icon:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
+  .pp-attach { color: var(--muted); background: var(--card); margin-bottom: 2px; }
+
+  .pp-link { border: 0; background: none; padding: 0; color: var(--blue); cursor: pointer; font-size: inherit; }
+  .pp-button { border: 0; border-radius: 999px; padding: 8px 18px; background: var(--blue); color: #fff; font-weight: 600; cursor: pointer; }
+  .pp-hint { color: var(--muted); font-size: 13px; }
+
+  .pp-empty { margin: auto; max-width: 380px; padding: 24px; text-align: center; }
+  .pp-empty-phone { font-size: 56px; }
+  .pp-empty h2 { margin: 8px 0 6px; }
+  .pp-empty p { color: var(--muted); margin: 0 0 16px; }
+  .pp-empty .pp-hint { margin-top: 18px; }
+
+  /* --- new conversation --------------------------------------------------- */
+  .pp-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 18px 20px 20px; border: 0; border-radius: 16px; background: var(--bg); color: var(--text); box-shadow: var(--shadow); }
+  .pp-dialog::backdrop { background: rgba(0, 0, 0, .35); }
+  .pp-dialog-top { display: flex; align-items: center; justify-content: space-between; }
+  .pp-dialog h2 { margin: 0; font-size: 18px; }
+  .pp-dialog h3 { margin: 18px 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
+  .pp-people { display: flex; flex-direction: column; gap: 2px; }
+  .pp-people form { margin: 0; }
+  .pp-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
+  .pp-person:hover { background: var(--card); }
+  .pp-person span:last-child { display: flex; flex-direction: column; }
+  .pp-person small { color: var(--muted); }
+  .pp-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
+  .pp-form > label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
+  .pp-form input[type="text"], .pp-form select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); color: var(--text); }
+  .pp-form .pp-button { align-self: flex-start; }
+  .pp-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
+
+  @media (max-width: 720px) {
+    .pp { grid-template-columns: minmax(0, 1fr); }
+    .pp.pp-has-thread .pp-sidebar, .pp:not(.pp-has-thread) .pp-thread { display: none; }
+    .pp:not(.pp-has-thread) .pp-sidebar { border-right: 0; }
+    .pp-back { display: block; }
+    .pp-head { flex-wrap: wrap; padding: 8px 12px; }
+    .pp-head-controls { width: 100%; justify-content: flex-end; }
+    .pp-messages { padding: 12px 12px 6px; }
+    .pp-compose { padding: 8px 12px 12px; }
+    .pp-line { max-width: 88%; }
+    .pp-tools { opacity: 1; }
+    .pp-tapbacks { display: none; }
+    .pp-row.open .pp-tapbacks { display: flex; }
+  }
+</style>

data/app/views/layouts/pocket_phone/application.html.erb

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Pocket Phone</title>
+  <%= csrf_meta_tags %>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📱</text></svg>">
+  <%= render "layouts/pocket_phone/styles" %>
+</head>
+<body>
+  <%= yield %>
+  <%= render "layouts/pocket_phone/script" %>
+</body>
+</html>

data/app/views/pocket_phone/conversations/_head.html.erb

@@ -0,0 +1,44 @@
+<% group = @db.group?(@conversation) %>
+<% line = @db.lines[@conversation["line"]] || {} %>
+<% service = @db.service_for(@conversation) %>
+<header class="pp-head" data-service="<%= service %>">
+  <a href="<%= root_path(list: 1) %>" class="pp-back" aria-label="Back">‹</a>
+  <%= pp_avatar(group ? "👥" : pp_title(@conversation), key: @conversation["id"], size: 36) %>
+  <div class="pp-head-title">
+    <strong><%= pp_title(@conversation) %></strong>
+    <span>
+      <% if group %>
+        <%= @conversation["participants"].map { |n| pp_person_name(n) }.join(", ") %>
+      <% else %>
+        <%= PocketPhone::Numbers.pretty(@conversation["number"]) %>
+      <% end %>
+      · texting <%= pp_line_name(@conversation["line"]) %>
+      <% if line["name"].present? %>(<%= PocketPhone::Numbers.pretty(@conversation["line"]) %>)<% end %>
+    </span>
+  </div>
+
+  <div class="pp-head-controls">
+    <% if group %>
+      <span class="pp-pill <%= service.downcase %>"><%= service == "iMessage" ? "iMessage group" : "Group MMS" %></span>
+    <% else %>
+      <% person = @db.people[@conversation["number"]] || {} %>
+      <%= form_with url: people_path, method: :post, data: { remote: true } do %>
+        <%= hidden_field_tag :number, @conversation["number"] %>
+        <label>Phone
+          <%= select_tag :service, options_for_select([["iPhone (iMessage)", "iMessage"], ["Android (SMS)", "SMS"], ["Android (RCS)", "RCS"]], person["service"]), data: { autosubmit: true } %>
+        </label>
+        <label>Sends to it
+          <%= select_tag :outcome, options_for_select([["are delivered", "delivered"], ["fail after sending", "failed"], ["are refused", "rejected"]], person["outcome"]), data: { autosubmit: true } %>
+        </label>
+      <% end %>
+    <% end %>
+    <%= form_with url: delete_conversation_path(@conversation["id"]), method: :post, data: { confirm: "Delete this conversation?" } do %>
+      <button type="submit" class="pp-icon" title="Delete conversation" aria-label="Delete conversation">
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/></svg>
+      </button>
+    <% end %>
+  </div>
+</header>
+<% unless PocketPhone.config.webhook_url %>
+  <div class="pp-banner">No <code>webhook_url</code> is configured, so texts from this phone will not reach your app.</div>
+<% end %>

data/app/views/pocket_phone/conversations/_message.html.erb

@@ -0,0 +1,132 @@
+<%# locals: message, group, last_phone, continued %>
+<% phone = message["direction"] == "phone" %>
+<% link = pp_preview_for(message) %>
+<% receipt = phone ? pp_receipt(message, @conversation, last: last_phone) : nil %>
+<% undelivered = !phone && message["status"] == "ERROR" %>
+<% text = message["content"].to_s %>
+<% only_link = link[:card] && text.strip == link[:url] %>
+<% card = message["app_card"] %>
+<div class="pp-row <%= "mine" if phone && !group %> <%= message["service"].to_s.downcase %> <%= "undelivered" if undelivered %> <%= "continued" if continued %>"
+     data-handle="<%= message["handle"] %>" data-from="<%= phone ? message["from_number"] : "line" %>">
+  <% if group && !continued %>
+    <div class="pp-sender"><%= pp_sender_name(message) %></div>
+  <% end %>
+
+  <div class="pp-line">
+    <div class="pp-stack">
+      <% if message["media_urls"].present? %>
+        <div class="pp-carousel">
+          <% message["media_urls"].each do |url| %><%= pp_media(url) %><% end %>
+        </div>
+      <% end %>
+      <% if message["media_url"].present? %>
+        <%= pp_media(message["media_url"]) %>
+      <% end %>
+
+      <% if card %>
+        <% layout = card["layout"] || {} %>
+        <div class="pp-card pp-appcard" title="<%= card["url"] %>">
+          <% if layout["imageUrl"].present? %>
+            <div class="pp-card-image">
+              <%= image_tag layout["imageUrl"], alt: "" %>
+              <% if layout["imageTitle"].present? || layout["imageSubtitle"].present? %>
+                <div class="pp-card-overlay"><strong><%= layout["imageTitle"] %></strong><span><%= layout["imageSubtitle"] %></span></div>
+              <% end %>
+            </div>
+          <% end %>
+          <div class="pp-card-body pp-card-split">
+            <div><strong><%= layout["caption"] %></strong><span><%= layout["subcaption"] %></span></div>
+            <div class="trailing"><strong><%= layout["trailingCaption"] %></strong><span><%= layout["trailingSubcaption"] %></span></div>
+          </div>
+          <div class="pp-card-app"><%= card["appName"] %> · app card, shown as it looks without the extension installed</div>
+        </div>
+      <% end %>
+
+      <% if text.present? && !only_link %>
+        <div class="pp-bubble"><%= pp_linkify(text) %></div>
+      <% end %>
+
+      <% if link[:card] %>
+        <% preview = link[:card] %>
+        <a class="pp-card" href="<%= preview["url"] %>" target="_blank" rel="noopener">
+          <% if preview["image"].present? %>
+            <div class="pp-card-image"><%= image_tag preview["image"], alt: "" %></div>
+          <% end %>
+          <div class="pp-card-body">
+            <strong><%= preview["title"].presence || preview["host"] %></strong>
+            <span><%= preview["host"] %></span>
+          </div>
+          <% if preview["local"] %>
+            <div class="pp-card-warning">A real phone could not load this preview: <%= preview["host"] %> is only reachable from your machine.</div>
+          <% end %>
+        </a>
+      <% end %>
+
+      <% if message["reactions"].present? %>
+        <div class="pp-reactions">
+          <% message["reactions"].each do |reaction| %>
+            <span title="<%= reaction["by"] == "line" ? pp_line_name(@conversation["line"]) : pp_person_name(reaction["by"]) %>"><%= pp_tapback(reaction["reaction"]) %></span>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+
+    <div class="pp-tools">
+      <% if !phone && !undelivered && message["service"] == "iMessage" %>
+        <span class="pp-tapbacks">
+          <% PocketPhone::ApplicationHelper::TAPBACKS.each do |name, glyph| %>
+            <button type="button" data-tapback="<%= name %>" title="<%= name.capitalize %>"><%= glyph %></button>
+          <% end %>
+        </span>
+      <% end %>
+      <button type="button" class="pp-info" data-details title="Details" aria-label="Details">ⓘ</button>
+    </div>
+  </div>
+
+  <% if receipt %>
+    <div class="pp-receipt <%= "failed" if receipt[:failed] %>">
+      <%= receipt[:text] %><% if receipt[:detail] %> <span>· <%= receipt[:detail] %></span><% end %>
+    </div>
+  <% end %>
+  <% if undelivered %>
+    <div class="pp-receipt failed">Never reached this phone <span>· <%= message["error_message"] %></span></div>
+  <% end %>
+  <% if message["send_style"].present? %>
+    <div class="pp-note">Sent with <%= message["send_style"].to_s.tr("_", " ") %></div>
+  <% end %>
+  <% if link[:reason] %>
+    <div class="pp-note">No link preview: <%= link[:reason] %>.</div>
+  <% elsif link[:preview] && link[:preview]["error"] %>
+    <div class="pp-note">No link preview: the page could not be fetched (<%= link[:preview]["error"] %>).</div>
+  <% end %>
+
+  <div class="pp-details" hidden>
+    <dl>
+      <dt>Handle</dt><dd><code><%= message["handle"] %></code></dd>
+      <dt>Status</dt><dd><%= message["status"] %><% if message["error_code"] %> (<%= message["error_code"] %>)<% end %></dd>
+      <dt>Service</dt><dd><%= message["service"] %></dd>
+      <dt>From → to</dt><dd><%= message["from_number"] %> → <%= message["to_number"].presence || @conversation["group_id"] %></dd>
+      <dt>Sent</dt><dd><%= message["created_at"] %></dd>
+      <dt>Webhooks</dt>
+      <dd>
+        <% if message["webhooks"].blank? %>
+          none sent
+        <% else %>
+          <ul>
+            <% message["webhooks"].each do |hook| %>
+              <li class="<%= "bad" unless hook["status"].to_i.between?(200, 299) %>">
+                <b><%= hook["type"] %></b> → <%= pp_webhook_outcome(hook) %> <span><%= hook["url"] %></span>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
+        <% if phone %>
+          <button type="button" class="pp-link" data-redeliver>Send the webhook again</button>
+        <% end %>
+      </dd>
+    </dl>
+    <% if message["request"].present? %>
+      <pre><%= pp_json(message["request"]) %></pre>
+    <% end %>
+  </div>
+</div>

data/app/views/pocket_phone/conversations/_messages.html.erb

@@ -0,0 +1,21 @@
+<% messages = @db.messages_for(@conversation) %>
+<% group = @db.group?(@conversation) %>
+<% last_phone = messages.reverse.find { |m| m["direction"] == "phone" } %>
+<% if messages.empty? %>
+  <p class="pp-stamp">No messages yet. Say something.</p>
+<% end %>
+<% previous = nil %>
+<% messages.each do |message| %>
+  <% if pp_gap?(previous, message) %>
+    <p class="pp-stamp"><%= pp_stamp(message["created_at"]) %></p>
+  <% end %>
+  <%= render "pocket_phone/conversations/message", message: message, group: group,
+        last_phone: last_phone.equal?(message),
+        continued: previous && !pp_gap?(previous, message) && previous["from_number"] == message["from_number"] %>
+  <% previous = message %>
+<% end %>
+<% if @db.typing?(@conversation) %>
+  <div class="pp-row" data-from="line">
+    <div class="pp-bubble pp-typing" aria-label="Typing"><i></i><i></i><i></i></div>
+  </div>
+<% end %>

data/app/views/pocket_phone/conversations/_new_dialog.html.erb

@@ -0,0 +1,52 @@
+<% people = @db.people.values %>
+<dialog class="pp-dialog" data-dialog>
+  <div class="pp-dialog-top">
+    <h2>New conversation</h2>
+    <button type="button" class="pp-icon" data-close-dialog aria-label="Close">✕</button>
+  </div>
+
+  <% if people.any? %>
+    <section>
+      <h3>Text as someone you already have</h3>
+      <div class="pp-people">
+        <% people.each do |person| %>
+          <%= form_with url: conversations_path, method: :post do %>
+            <%= hidden_field_tag :number, person["number"] %>
+            <button type="submit" class="pp-person">
+              <%= pp_avatar(pp_person_name(person["number"]), key: person["number"], size: 28) %>
+              <span><strong><%= pp_person_name(person["number"]) %></strong><small><%= PocketPhone::Numbers.pretty(person["number"]) %> · <%= person["service"] %></small></span>
+            </button>
+          <% end %>
+        <% end %>
+      </div>
+    </section>
+  <% end %>
+
+  <section>
+    <h3>A new person</h3>
+    <%= form_with url: conversations_path, method: :post, class: "pp-form" do %>
+      <label>Name <%= text_field_tag :name, nil, placeholder: "Alice", autocomplete: "off" %></label>
+      <label>Number <%= text_field_tag :number, PocketPhone::Numbers.random, required: true, autocomplete: "off" %></label>
+      <label>Phone <%= select_tag :service, options_for_select([["iPhone (iMessage)", "iMessage"], ["Android (SMS)", "SMS"], ["Android (RCS)", "RCS"]]) %></label>
+      <button type="submit" class="pp-button">Start texting</button>
+    <% end %>
+  </section>
+
+  <% if people.size >= 2 %>
+    <section>
+      <h3>A group</h3>
+      <%= form_with url: conversations_path, method: :post, class: "pp-form" do %>
+        <%= hidden_field_tag :group, 1 %>
+        <label>Group name <%= text_field_tag :group_name, nil, placeholder: "Optional", autocomplete: "off" %></label>
+        <div class="pp-checks">
+          <% people.each do |person| %>
+            <label><%= check_box_tag "participants[]", person["number"], false, id: nil %> <%= pp_person_name(person["number"]) %></label>
+          <% end %>
+        </div>
+        <button type="submit" class="pp-button">Start group</button>
+      <% end %>
+    </section>
+  <% else %>
+    <p class="pp-hint">Add two people and you can put them in a group chat.</p>
+  <% end %>
+</dialog>

data/app/views/pocket_phone/conversations/_sidebar.html.erb

@@ -0,0 +1,28 @@
+<% conversations = @db.sorted_conversations %>
+<% if conversations.empty? %>
+  <p class="pp-sidebar-empty">Nothing here yet.</p>
+<% end %>
+<% conversations.each do |conversation| %>
+  <% last = @db.messages_for(conversation).last %>
+  <% current = @conversation && @conversation["id"] == conversation["id"] %>
+  <% title = pp_title(conversation) %>
+  <a href="<%= conversation_path(conversation["id"]) %>" class="pp-item <%= "current" if current %>">
+    <span class="pp-unread <%= "on" if conversation["unread"].to_i.positive? && !current %>"></span>
+    <%= pp_avatar(@db.group?(conversation) ? "👥" : title, key: conversation["id"]) %>
+    <span class="pp-item-body">
+      <span class="pp-item-top">
+        <span class="pp-item-name"><%= title %></span>
+        <span class="pp-item-time"><%= pp_clock(last ? last["created_at"] : conversation["updated_at"]) %></span>
+      </span>
+      <span class="pp-item-snippet">
+        <% if @db.typing?(conversation) %>
+          <em>typing…</em>
+        <% elsif last %>
+          <%= pp_snippet(last) %>
+        <% else %>
+          <em>No messages yet</em>
+        <% end %>
+      </span>
+    </span>
+  </a>
+<% end %>

data/app/views/pocket_phone/conversations/show.html.erb

@@ -0,0 +1,67 @@
+<% group = @conversation && @db.group?(@conversation) %>
+<div class="pp <%= "pp-has-thread" if @conversation %>" data-pp
+     data-base="<%= pp_base %>"
+     data-conversation="<%= @conversation && @conversation["id"] %>"
+     data-group="<%= group ? 1 : 0 %>">
+  <aside class="pp-sidebar">
+    <div class="pp-sidebar-top">
+      <h1>Messages</h1>
+      <button type="button" class="pp-icon" data-open-dialog title="New conversation" aria-label="New conversation">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+      </button>
+    </div>
+    <div id="pp-sidebar"><%= render "pocket_phone/conversations/sidebar" %></div>
+    <div class="pp-sidebar-foot">
+      <%= form_with url: clear_path, method: :post, data: { confirm: "Clear every conversation?" } do %>
+        <button type="submit" class="pp-link">Clear conversations</button>
+      <% end %>
+      <span>pocket_phone <%= PocketPhone::VERSION %></span>
+    </div>
+  </aside>
+
+  <main class="pp-thread">
+    <% if @conversation %>
+      <div id="pp-head"><%= render "pocket_phone/conversations/head" %></div>
+      <div id="pp-messages" class="pp-messages"><%= render "pocket_phone/conversations/messages" %></div>
+
+      <%= form_with url: conversation_messages_path(@conversation["id"]), method: :post, multipart: true,
+            class: "pp-compose", data: { compose: true } do %>
+        <label class="pp-icon pp-attach" title="Attach a file">
+          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+          <input type="file" name="file" hidden>
+        </label>
+        <div class="pp-field">
+          <% if group %>
+            <select name="as" class="pp-as" data-persona title="Who is texting">
+              <% @conversation["participants"].each do |number| %>
+                <option value="<%= number %>"><%= pp_person_name(number) %></option>
+              <% end %>
+            </select>
+          <% end %>
+          <span class="pp-attached" data-attached hidden></span>
+          <textarea name="content" rows="1" placeholder="<%= @db.service_for(@conversation) == "iMessage" ? "iMessage" : "Text Message" %>" autofocus></textarea>
+          <button type="submit" class="pp-send" aria-label="Send">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+          </button>
+        </div>
+      <% end %>
+    <% else %>
+      <div class="pp-empty">
+        <div class="pp-empty-phone">📱</div>
+        <% if @db.conversations.any? %>
+          <h2>Pick a conversation</h2>
+          <p>Or start a new one.</p>
+        <% else %>
+          <h2>No conversations yet</h2>
+          <p>Messages your app sends through Sendblue will show up here. Or pick up the phone and text it first.</p>
+        <% end %>
+        <button type="button" class="pp-button" data-open-dialog>New conversation</button>
+        <% unless PocketPhone.config.webhook_url %>
+          <p class="pp-hint">No <code>webhook_url</code> is configured, so texts from this phone will not reach your app. See the README.</p>
+        <% end %>
+      </div>
+    <% end %>
+  </main>
+
+  <%= render "pocket_phone/conversations/new_dialog" %>
+</div>

data/config/routes.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+PocketPhone::Engine.routes.draw do
+  # --- the phone ------------------------------------------------------------
+  root to: "conversations#index"
+  get  "state"                        => "conversations#state"
+  post "clear"                        => "conversations#clear", as: :clear
+  post "conversations"                => "conversations#create", as: :conversations
+  get  "conversations/:id"            => "conversations#show", as: :conversation
+  post "conversations/:id/delete"     => "conversations#destroy", as: :delete_conversation
+  post "conversations/:id/typing"     => "conversations#typing"
+  post "conversations/:id/messages"   => "messages#create", as: :conversation_messages
+  post "messages/:handle/reactions"   => "messages#react"
+  post "messages/:handle/redeliver"   => "messages#redeliver"
+  post "people"                       => "people#update", as: :people
+  get  "media/:name"                  => "media#show", as: :media, constraints: { name: %r{[^/]+} }
+
+  # --- the fake Sendblue API ------------------------------------------------
+  # Point your Sendblue client's base URL at wherever this engine is mounted
+  # and these answer in place of https://api.sendblue.com.
+  scope module: :api, defaults: { format: :json } do
+    post   "api/send-message"                  => "sendblue#send_message"
+    post   "api/send-group-message"            => "sendblue#send_group_message"
+    post   "api/send-carousel"                 => "sendblue#send_carousel"
+    post   "api/send-typing-indicator"         => "sendblue#send_typing_indicator"
+    post   "api/send-reaction"                 => "sendblue#send_reaction"
+    post   "api/mark-read"                     => "sendblue#mark_read"
+    post   "api/modify-group"                  => "sendblue#modify_group"
+    get    "api/evaluate-service"              => "sendblue#evaluate_service"
+    post   "api/upload-file"                   => "sendblue#upload_file"
+    post   "api/upload-media-object"           => "sendblue#upload_media_object"
+    post   "api/v2/contact-sharing/profile"    => "sendblue#contact_profile"
+    post   "api/v2/contact-profile"            => "sendblue#contact_profile"
+    get    "api/v2/messages"                   => "sendblue#messages"
+    get    "api/v2/messages/:handle"           => "sendblue#message"
+    delete "api/v2/messages/:handle"           => "sendblue#delete_message"
+    delete "api/message/:handle"               => "sendblue#delete_message"
+    match  "api/*path"                         => "sendblue#missing", via: :all
+    match  "accounts/*path"                    => "sendblue#missing", via: :all
+  end
+end