fix: images were gated behind S3, silently; add a page per person

Every picture in the product required an object-storage bucket, and
nothing anywhere said so. `storageEnabled` needs all four of S3_ENDPOINT,
S3_BUCKET, S3_ACCESS_KEY_ID and S3_SECRET_ACCESS_KEY; miss one and it is
off with a neutral dot on the Health tab reading "not configured", which
looks like a feature you declined rather than the reason nobody has a
face.

Contact photos no longer touch S3. The sync used to skip fetching them
entirely when storage was off, so avatarUrl was never written and every
contact fell back to initials permanently. They are a few KB — they live
in the contacts table now, capped at 512KB, and the route serves the
bytes with an ETag off the row's mtime. The S3 branch stays only for
installs that already synced one.

Inbound photos were worse: the processor marked them `failed`, which is
terminal, so configuring a bucket later brought none of them back. A
missing bucket is a deployment state, not a property of the attachment,
so they stay pending and a sweep re-queues them once there is somewhere
to put the bytes — including a one-time rescue of the rows already
written off. The Health tab now says what the missing bucket costs and
how many files are waiting on it.

Then the page. Clicking someone's face — in the details panel, or on a
member of a group — opens /people/<id>: their profile, editable in
place, and every thread they are in. Not in the nav, deliberately. A
Contacts entry would frame it as a directory you go and browse, and this
is the answer to "who am I actually talking to", asked from inside a
conversation.

It is scoped to the contact rather than a thread, which is the point: the
thread list unions conversations linked to the contact with any group
they appear in as a participant, since a group carries no contactId and
keying on that column alone would show someone's one-to-one and silently
omit the four group chats they are in.

Three columns that existed but had no UI now have one. Identities can be
added and removed, so the same human texting from two numbers stops
being two strangers — refusing an address another contact already owns,
since moving it would quietly empty their history, and refusing to
remove the last one, since a contact with no address matches nothing and
would fork into a duplicate on their next message. optedOutAt gets a
switch: STOP has been enforced at every send path since the first
release, but nothing could read the flag, so the only way to discover it
was to be refused.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CY9GSvGD8JYnMyU5Q6BW5r

Author: byw1

apps/web/src/app/(app)/people/[contactId]/page.tsx

@@ -0,0 +1,57 @@
+import { notFound } from 'next/navigation';
+import { getPersonProfile } from '@/server/queries';
+import { requireDbUser } from '@/lib/session';
+import { PersonProfile } from '@/components/people/person-profile';
+
+export const dynamic = 'force-dynamic';
+
+/**
+ * A person's own page.
+ *
+ * Deliberately absent from the nav — you get here by clicking someone's face,
+ * from the details panel or a group's member list. A "Contacts" nav entry
+ * would frame this as a directory to browse; it isn't. It's the answer to
+ * "who am I actually talking to", asked from inside a conversation.
+ */
+export default async function PersonPage({
+  params,
+}: {
+  params: Promise<{ contactId: string }>;
+}) {
+  const { contactId } = await params;
+  await requireDbUser();
+
+  const profile = await getPersonProfile(contactId);
+  if (!profile) notFound();
+
+  return (
+    <div className="min-h-0 flex-1 overflow-y-auto">
+      <PersonProfile
+        data={{
+          contact: {
+            id: profile.contact.id,
+            displayName: profile.contact.displayName,
+            company: profile.contact.company,
+            notes: profile.contact.notes,
+            avatarUrl: profile.contact.avatarUrl,
+            attributes: profile.contact.attributes,
+            optedOut: Boolean(profile.contact.optedOutAt),
+            syncedAt: profile.contact.syncedAt?.toISOString() ?? null,
+          },
+          identities: profile.identities,
+          conversations: profile.conversations.map((c) => ({
+            ...c,
+            lastMessageAt: c.lastMessageAt?.toISOString() ?? null,
+          })),
+          stats: {
+            ...profile.stats,
+            firstMessageAt: profile.stats.firstMessageAt?.toISOString() ?? null,
+            lastInboundAt: profile.stats.lastInboundAt?.toISOString() ?? null,
+          },
+          photos: profile.photos,
+          photoCount: profile.photoCount,
+        }}
+      />
+    </div>
+  );
+}

apps/web/src/app/api/avatars/[contactId]/route.ts

@@ -7,7 +7,13 @@ import { getCurrentUser } from '@/lib/session';
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
 
-/** Redirect to a short-lived presigned URL for a synced address-book photo. */
+/**
+ * A contact's address-book photo.
+ *
+ * Served from the database, where the sync now puts it. The S3 branch is only
+ * for installs that synced before that changed and still have a key on the
+ * row — nothing writes one any more.
+ */
 export async function GET(
   req: Request,
   { params }: { params: Promise<{ contactId: string }> },
@@ -16,11 +22,35 @@ export async function GET(
   if (!user) return new Response('Unauthorized', { status: 401 });
 
   const { contactId } = await params;
-  const contact = await db.query.contacts.findFirst({ where: eq(contacts.id, contactId) });
-  if (!contact?.avatarStorageKey || !isStorageEnabled()) {
-    return new Response('Not found', { status: 404 });
+  const contact = await db.query.contacts.findFirst({
+    where: eq(contacts.id, contactId),
+    columns: { avatarData: true, avatarMime: true, avatarStorageKey: true, updatedAt: true },
+  });
+  if (!contact) return new Response('Not found', { status: 404 });
+
+  if (contact.avatarData) {
+    const bytes = Buffer.from(contact.avatarData, 'base64');
+    // Private, because the photo is only for signed-in members of this
+    // workspace; revalidated against the row's mtime so a re-sync shows the
+    // new face without waiting the hour out.
+    const etag = `W/"${contactId}-${contact.updatedAt?.getTime() ?? 0}"`;
+    if (req.headers.get('if-none-match') === etag) {
+      return new Response(null, { status: 304, headers: { ETag: etag } });
+    }
+    return new Response(bytes, {
+      headers: {
+        'Content-Type': contact.avatarMime ?? 'image/jpeg',
+        'Content-Length': String(bytes.length),
+        'Cache-Control': 'private, max-age=3600, must-revalidate',
+        ETag: etag,
+      },
+    });
+  }
+
+  if (contact.avatarStorageKey && isStorageEnabled()) {
+    const url = await getPresignedUrl(contact.avatarStorageKey, 3600);
+    return Response.redirect(url, 302);
   }
 
-  const url = await getPresignedUrl(contact.avatarStorageKey, 3600);
-  return Response.redirect(url, 302);
+  return new Response('Not found', { status: 404 });
 }

apps/web/src/components/inbox/person-card.tsx

@@ -24,6 +24,34 @@ export interface PersonCardProps {
   contactId?: string | null;
 }
 
+/**
+ * Wraps a bit of the card in a link to the person's page — or doesn't, when
+ * there is no contact row behind the thread. Rendering a dead link to
+ * `/people/null` would look identical right up until someone clicked it.
+ */
+function PersonLink({
+  contactId,
+  label,
+  className,
+  children,
+}: {
+  contactId: string | null | undefined;
+  label: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  if (!contactId) return <>{children}</>;
+  return (
+    <Link
+      href={`/people/${contactId}`}
+      title={`Open ${label}'s profile`}
+      className={cn('block shrink-0', className)}
+    >
+      {children}
+    </Link>
+  );
+}
+
 /**
  * Who you are talking to.
  *
@@ -42,14 +70,26 @@ export function PersonCard(p: PersonCardProps) {
   return (
     <div className="px-4 pb-4 pt-4">
       <div className="flex items-center gap-3">
-        <Avatar className="h-12 w-12 ring-1 ring-border">
-          {p.avatarUrl && <AvatarImage src={p.avatarUrl} alt={p.name} />}
-          <AvatarFallback className="type-item bg-secondary font-semibold text-muted-foreground">
-            {initials(p.name)}
-          </AvatarFallback>
-        </Avatar>
+        {/* Their face is the way into their page. A group has no single
+            person behind it, so there it stays a picture. */}
+        <PersonLink contactId={p.isGroup ? null : p.contactId} label={p.name}>
+          <Avatar className="h-12 w-12 ring-1 ring-border">
+            {p.avatarUrl && <AvatarImage src={p.avatarUrl} alt={p.name} />}
+            <AvatarFallback className="type-item bg-secondary font-semibold text-muted-foreground">
+              {initials(p.name)}
+            </AvatarFallback>
+          </Avatar>
+        </PersonLink>
         <div className="min-w-0">
-          <p className="type-title truncate">{p.name}</p>
+          <p className="type-title truncate">
+            <PersonLink
+              contactId={p.isGroup ? null : p.contactId}
+              label={p.name}
+              className="rounded transition-colors hover:text-brand"
+            >
+              {p.name}
+            </PersonLink>
+          </p>
           {local && (
             <p
               className={cn(

apps/web/src/components/inbox/ticket-panel.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState, useTransition } from 'react';
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import {
@@ -232,8 +233,8 @@ export function TicketPanel({
             {participants.map((m) => {
               const display = m.name || formatAddress(m.rawAddress ?? m.address) || m.address;
               const sub = m.name ? (formatAddress(m.rawAddress ?? m.address) ?? m.address) : null;
-              return (
-                <div key={m.address} className="flex items-center gap-2.5">
+              const body = (
+                <>
                   <Avatar className="h-7 w-7 ring-1 ring-border">
                     {m.avatarUrl && <AvatarImage src={m.avatarUrl} alt="" />}
                     <AvatarFallback className="bg-secondary text-[10px] font-semibold text-muted-foreground">
@@ -251,6 +252,23 @@ export function TicketPanel({
                   {!m.name && (
                     <span className="type-caption shrink-0 text-muted-foreground/60">unknown</span>
                   )}
+                </>
+              );
+
+              // A member with no contact row is just an address we've seen in
+              // this chat — there is no page to open, so it stays inert
+              // rather than offering a link that 404s.
+              return m.contactId ? (
+                <Link
+                  key={m.address}
+                  href={`/people/${m.contactId}`}
+                  className="-mx-1.5 flex items-center gap-2.5 rounded-lg px-1.5 py-1 transition-colors hover:bg-accent"
+                >
+                  {body}
+                </Link>
+              ) : (
+                <div key={m.address} className="flex items-center gap-2.5">
+                  {body}
                 </div>
               );
             })}