Add agent workflows & stuff

apps/next/src/components/agents/agent-artifact-viewer.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { Copy } from 'lucide-react';
+import { toast } from 'sonner';
+
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { Button } from '@spoon/ui';
+
+export const AgentArtifactViewer = ({
+  artifacts,
+}: {
+  artifacts: Doc<'agentJobArtifacts'>[];
+}) => {
+  if (!artifacts.length) {
+    return (
+      <p className='text-muted-foreground text-sm'>
+        No artifacts captured yet.
+      </p>
+    );
+  }
+
+  return (
+    <div className='space-y-3'>
+      {artifacts.map((artifact) => (
+        <section key={artifact._id} className='border-border rounded-md border'>
+          <div className='flex items-center justify-between gap-3 border-b p-3'>
+            <div>
+              <h3 className='text-sm font-semibold'>{artifact.title}</h3>
+              <p className='text-muted-foreground text-xs'>{artifact.kind}</p>
+            </div>
+            <Button
+              type='button'
+              variant='outline'
+              size='icon'
+              aria-label='Copy artifact'
+              onClick={async () => {
+                await navigator.clipboard.writeText(artifact.content);
+                toast.success('Artifact copied.');
+              }}
+            >
+              <Copy className='size-4' />
+            </Button>
+          </div>
+          <pre className='bg-muted/40 max-h-96 overflow-auto p-3 text-xs whitespace-pre-wrap'>
+            {artifact.content}
+          </pre>
+        </section>
+      ))}
+    </div>
+  );
+};

apps/next/src/components/agents/agent-event-log.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+
+const formatTime = (value: number) =>
+  new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  }).format(value);
+
+export const AgentEventLog = ({
+  events,
+}: {
+  events: Doc<'agentJobEvents'>[];
+}) => {
+  if (!events.length) {
+    return (
+      <p className='text-muted-foreground text-sm'>No worker events yet.</p>
+    );
+  }
+
+  return (
+    <div className='divide-border overflow-hidden rounded-md border'>
+      {events.map((event) => (
+        <div key={event._id} className='grid gap-1 border-b p-3 text-sm'>
+          <div className='flex flex-wrap items-center gap-2'>
+            <span className='font-mono text-xs uppercase'>{event.phase}</span>
+            <span className='text-muted-foreground text-xs'>
+              {formatTime(event.createdAt)}
+            </span>
+            <span className='text-muted-foreground text-xs capitalize'>
+              {event.level}
+            </span>
+          </div>
+          <p className='whitespace-pre-wrap'>{event.message}</p>
+          {event.metadata ? (
+            <pre className='bg-muted overflow-auto rounded p-2 text-xs'>
+              {event.metadata}
+            </pre>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+};

apps/next/src/components/agents/agent-job-detail.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useQuery } from 'convex/react';
+
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { api } from '@spoon/backend/convex/_generated/api.js';
+import { Card, CardContent, CardHeader, CardTitle } from '@spoon/ui';
+
+import { AgentArtifactViewer } from './agent-artifact-viewer';
+import { AgentEventLog } from './agent-event-log';
+
+export const AgentJobDetail = ({ job }: { job: Doc<'agentJobs'> }) => {
+  const events =
+    useQuery(api.agentJobs.listEvents, { jobId: job._id, limit: 200 }) ?? [];
+  const artifacts =
+    useQuery(api.agentJobs.listArtifacts, { jobId: job._id }) ?? [];
+
+  return (
+    <Card className='shadow-none'>
+      <CardHeader className='pb-3'>
+        <CardTitle className='text-base'>Job details</CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-5'>
+        <div className='grid gap-3 text-sm md:grid-cols-3'>
+          <div>
+            <p className='text-muted-foreground text-xs'>Status</p>
+            <p className='font-medium capitalize'>
+              {job.status.replaceAll('_', ' ')}
+            </p>
+          </div>
+          <div>
+            <p className='text-muted-foreground text-xs'>Branch</p>
+            <p className='font-mono text-xs'>{job.workBranch}</p>
+          </div>
+          <div>
+            <p className='text-muted-foreground text-xs'>Model</p>
+            <p className='font-medium'>{job.model}</p>
+          </div>
+        </div>
+        {job.pullRequestUrl ? (
+          <a
+            href={job.pullRequestUrl}
+            target='_blank'
+            rel='noreferrer'
+            className='text-primary text-sm font-medium underline-offset-4 hover:underline'
+          >
+            Open draft PR #{job.pullRequestNumber}
+          </a>
+        ) : null}
+        {job.error ? (
+          <pre className='border-destructive bg-destructive/5 text-destructive overflow-auto rounded-md border p-3 text-xs whitespace-pre-wrap'>
+            {job.error}
+          </pre>
+        ) : null}
+        <section className='space-y-2'>
+          <h3 className='text-sm font-semibold'>Events</h3>
+          <AgentEventLog events={events} />
+        </section>
+        <section className='space-y-2'>
+          <h3 className='text-sm font-semibold'>Artifacts</h3>
+          <AgentArtifactViewer artifacts={artifacts} />
+        </section>
+      </CardContent>
+    </Card>
+  );
+};

apps/next/src/components/agents/agent-job-list.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation } from 'convex/react';
+import { ExternalLink, XCircle } from 'lucide-react';
+import { toast } from 'sonner';
+
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { api } from '@spoon/backend/convex/_generated/api.js';
+import { Badge, Button } from '@spoon/ui';
+
+import { AgentJobDetail } from './agent-job-detail';
+
+const formatTime = (value: number) =>
+  new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  }).format(value);
+
+export const AgentJobList = ({ jobs }: { jobs: Doc<'agentJobs'>[] }) => {
+  const cancel = useMutation(api.agentJobs.cancel);
+  const [selectedJobId, setSelectedJobId] = useState<string | null>(
+    jobs[0]?._id ?? null,
+  );
+  const selectedJob = jobs.find((job) => job._id === selectedJobId) ?? jobs[0];
+
+  if (!jobs.length) {
+    return (
+      <div className='border-border rounded-md border p-5'>
+        <h3 className='text-sm font-semibold'>No agent jobs yet</h3>
+        <p className='text-muted-foreground mt-1 text-sm'>
+          Queue a job to have Spoon open a draft PR against this fork.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className='grid gap-4 xl:grid-cols-[0.85fr_1.15fr]'>
+      <div className='divide-border overflow-hidden rounded-md border'>
+        {jobs.map((job) => (
+          <button
+            key={job._id}
+            type='button'
+            className='hover:bg-muted/40 data-[selected=true]:bg-muted/60 block w-full border-b p-3 text-left'
+            data-selected={job._id === selectedJob?._id}
+            onClick={() => setSelectedJobId(job._id)}
+          >
+            <div className='flex items-start justify-between gap-3'>
+              <div className='min-w-0'>
+                <p className='truncate text-sm font-medium'>{job.prompt}</p>
+                <p className='text-muted-foreground mt-1 font-mono text-xs'>
+                  {job.workBranch}
+                </p>
+              </div>
+              <Badge variant='outline' className='capitalize'>
+                {job.status.replaceAll('_', ' ')}
+              </Badge>
+            </div>
+            <div className='text-muted-foreground mt-2 flex flex-wrap gap-2 text-xs'>
+              <span>{formatTime(job.createdAt)}</span>
+              {job.pullRequestUrl ? (
+                <a
+                  href={job.pullRequestUrl}
+                  target='_blank'
+                  rel='noreferrer'
+                  className='text-primary inline-flex items-center gap-1'
+                >
+                  PR <ExternalLink className='size-3' />
+                </a>
+              ) : null}
+            </div>
+          </button>
+        ))}
+      </div>
+      {selectedJob ? (
+        <div className='space-y-3'>
+          {[
+            'queued',
+            'claimed',
+            'preparing',
+            'running',
+            'checks_running',
+          ].includes(selectedJob.status) ? (
+            <Button
+              type='button'
+              variant='outline'
+              onClick={async () => {
+                try {
+                  await cancel({ jobId: selectedJob._id });
+                  toast.success('Agent job cancelled.');
+                } catch (error) {
+                  console.error(error);
+                  toast.error('Could not cancel job.');
+                }
+              }}
+            >
+              <XCircle className='size-4' />
+              Cancel job
+            </Button>
+          ) : null}
+          <AgentJobDetail job={selectedJob} />
+        </div>
+      ) : null}
+    </div>
+  );
+};

apps/next/src/components/agents/agent-request-form.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation, useQuery } from 'convex/react';
+import { Bot } from 'lucide-react';
+import { toast } from 'sonner';
+
+import type { Doc, Id } from '@spoon/backend/convex/_generated/dataModel.js';
+import { api } from '@spoon/backend/convex/_generated/api.js';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Textarea,
+} from '@spoon/ui';
+
+import { SecretSelector } from './secret-selector';
+
+type AgentSettings = {
+  defaultBaseBranch?: string;
+  agentModel: string;
+  reasoningEffort: string;
+};
+
+export const AgentRequestForm = ({
+  spoon,
+  agentSettings,
+}: {
+  spoon: Doc<'spoons'>;
+  agentSettings?: AgentSettings | null;
+}) => {
+  const secrets = useQuery(api.spoonSecrets.listForSpoon, {
+    spoonId: spoon._id,
+  });
+  const createRequest = useMutation(api.agentRequests.create);
+  const createJob = useMutation(api.agentJobs.createFromRequest);
+  const [prompt, setPrompt] = useState('');
+  const [baseBranch, setBaseBranch] = useState(
+    agentSettings?.defaultBaseBranch ??
+      spoon.forkDefaultBranch ??
+      spoon.upstreamDefaultBranch,
+  );
+  const [requestedBranchName, setRequestedBranchName] = useState('');
+  const [selectedSecretIds, setSelectedSecretIds] = useState<
+    Id<'spoonSecrets'>[]
+  >([]);
+  const [submitting, setSubmitting] = useState(false);
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSubmitting(true);
+    try {
+      const requestId = await createRequest({
+        spoonId: spoon._id,
+        prompt,
+        targetBranch: baseBranch,
+      });
+      await createJob({
+        requestId,
+        selectedSecretIds,
+        baseBranch,
+        requestedBranchName: requestedBranchName || undefined,
+      });
+      setPrompt('');
+      setRequestedBranchName('');
+      setSelectedSecretIds([]);
+      toast.success('Agent job queued.');
+    } catch (error) {
+      console.error(error);
+      toast.error('Could not queue agent job.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Card className='shadow-none'>
+      <CardHeader className='pb-3'>
+        <CardTitle className='flex items-center gap-2 text-base'>
+          <Bot className='size-4' />
+          Request agent work
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={submit} className='space-y-4'>
+          <div className='grid gap-2'>
+            <Label htmlFor='agentPrompt'>Prompt</Label>
+            <Textarea
+              id='agentPrompt'
+              required
+              minLength={12}
+              value={prompt}
+              placeholder='Update this fork to use Authentik as the sole Auth.js provider.'
+              onChange={(event) => setPrompt(event.target.value)}
+            />
+          </div>
+          <div className='grid gap-3 md:grid-cols-2'>
+            <div className='grid gap-2'>
+              <Label htmlFor='baseBranch'>Base branch</Label>
+              <Input
+                id='baseBranch'
+                value={baseBranch}
+                onChange={(event) => setBaseBranch(event.target.value)}
+              />
+            </div>
+            <div className='grid gap-2'>
+              <Label htmlFor='workBranch'>Work branch</Label>
+              <Input
+                id='workBranch'
+                value={requestedBranchName}
+                placeholder='Auto-generated if blank'
+                onChange={(event) => setRequestedBranchName(event.target.value)}
+              />
+            </div>
+          </div>
+          <div className='grid gap-2'>
+            <Label>Secrets exposed to this job</Label>
+            <SecretSelector
+              secrets={secrets ?? []}
+              selectedSecretIds={selectedSecretIds}
+              onChange={setSelectedSecretIds}
+            />
+          </div>
+          <div className='bg-muted/40 grid gap-1 rounded-md p-3 text-xs'>
+            <span>
+              Model:{' '}
+              <strong>{agentSettings?.agentModel ?? 'gpt-5.1-codex'}</strong>
+            </span>
+            <span>
+              Reasoning:{' '}
+              <strong>{agentSettings?.reasoningEffort ?? 'high'}</strong>
+            </span>
+          </div>
+          <Button type='submit' disabled={submitting}>
+            {submitting ? 'Queueing...' : 'Queue agent job'}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};

apps/next/src/components/agents/secret-selector.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import type { Id } from '@spoon/backend/convex/_generated/dataModel.js';
+import { Checkbox, Label } from '@spoon/ui';
+
+type Secret = {
+  _id: Id<'spoonSecrets'>;
+  name: string;
+  valuePreview?: string;
+  description?: string;
+};
+
+export const SecretSelector = ({
+  secrets,
+  selectedSecretIds,
+  onChange,
+}: {
+  secrets: Secret[];
+  selectedSecretIds: Id<'spoonSecrets'>[];
+  onChange: (secretIds: Id<'spoonSecrets'>[]) => void;
+}) => {
+  const toggle = (secretId: Id<'spoonSecrets'>, checked: boolean) => {
+    onChange(
+      checked
+        ? [...selectedSecretIds, secretId]
+        : selectedSecretIds.filter((id) => id !== secretId),
+    );
+  };
+
+  if (!secrets.length) {
+    return (
+      <p className='text-muted-foreground text-sm'>
+        No Spoon secrets saved. Add project secrets in Settings when a job needs
+        environment variables.
+      </p>
+    );
+  }
+
+  return (
+    <div className='grid gap-2'>
+      {secrets.map((secret) => (
+        <label
+          key={secret._id}
+          className='border-border flex items-start gap-3 rounded-md border p-3'
+        >
+          <Checkbox
+            checked={selectedSecretIds.includes(secret._id)}
+            onCheckedChange={(checked) => toggle(secret._id, checked === true)}
+          />
+          <span className='grid gap-1'>
+            <Label className='font-mono text-xs'>{secret.name}</Label>
+            <span className='text-muted-foreground text-xs'>
+              {secret.description ?? secret.valuePreview ?? 'Configured'}
+            </span>
+          </span>
+        </label>
+      ))}
+    </div>
+  );
+};

apps/next/src/components/app-shell/app-shell.tsx

@@ -3,7 +3,7 @@
 import type { ReactNode } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { Bot, GitBranch, LayoutDashboard, RefreshCw, User } from 'lucide-react';
+import { GitBranch, LayoutDashboard, RefreshCw, Settings } from 'lucide-react';
 
 import { cn } from '@spoon/ui';
 
@@ -11,8 +11,7 @@ const navItems = [
   { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
   { href: '/spoons', label: 'My Spoons', icon: GitBranch },
   { href: '/updates', label: 'Updates', icon: RefreshCw },
-  { href: '/agents', label: 'Agents', icon: Bot },
-  { href: '/profile', label: 'Profile', icon: User },
+  { href: '/settings/profile', label: 'Settings', icon: Settings },
 ];
 
 export const AppShell = ({ children }: { children: ReactNode }) => {

apps/next/src/components/github/github-connect-client.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import { useMutation } from 'convex/react';
+
+import { api } from '@spoon/backend/convex/_generated/api.js';
+import { Button, Card, CardContent } from '@spoon/ui';
+
+export const GitHubConnectClient = ({
+  installationId,
+}: {
+  installationId?: string;
+}) => {
+  const connectInstallation = useMutation(api.github.connectInstallation);
+  const [status, setStatus] = useState<'idle' | 'saving' | 'saved' | 'failed'>(
+    installationId ? 'saving' : 'idle',
+  );
+  const hasSubmitted = useRef(false);
+
+  useEffect(() => {
+    if (!installationId || hasSubmitted.current) return;
+    hasSubmitted.current = true;
+    void connectInstallation({ installationId })
+      .then(() => setStatus('saved'))
+      .catch((error) => {
+        console.error(error);
+        setStatus('failed');
+      });
+  }, [connectInstallation, installationId]);
+
+  return (
+    <Card className='shadow-none'>
+      <CardContent className='p-6'>
+        <p className='text-lg font-medium'>GitHub App connection</p>
+        <p className='text-muted-foreground mt-2'>
+          {status === 'idle'
+            ? 'GitHub did not provide an installation ID in this callback.'
+            : status === 'saving'
+              ? 'Saving your GitHub installation...'
+              : status === 'saved'
+                ? 'GitHub is connected. You can create forks from Spoon now.'
+                : 'Could not save this GitHub installation.'}
+        </p>
+        <Button className='mt-5' asChild>
+          <Link href='/spoons/new'>Create a Spoon</Link>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};

apps/next/src/components/github/github-connection-panel.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+import { useAction, useQuery } from 'convex/react';
+import { makeFunctionReference } from 'convex/server';
+import { Github, RefreshCw } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { api } from '@spoon/backend/convex/_generated/api.js';
+import { Button, Card, CardContent } from '@spoon/ui';
+
+const syncConfiguredInstallationRef = makeFunctionReference<
+  'action',
+  Record<string, never>,
+  string
+>('githubNode:syncConfiguredInstallation');
+
+export const GitHubConnectionPanel = () => {
+  const connection = useQuery(api.github.getConnection, {});
+  const installUrl = useQuery(api.github.getInstallUrl, {});
+  const syncConfiguredInstallation = useAction(syncConfiguredInstallationRef);
+
+  const handleSync = async () => {
+    try {
+      await syncConfiguredInstallation({});
+      toast.success('GitHub installation connected.');
+    } catch (error) {
+      console.error(error);
+      toast.error('Could not connect the configured GitHub installation.');
+    }
+  };
+
+  return (
+    <Card className='shadow-none'>
+      <CardContent className='flex flex-col gap-4 p-5 md:flex-row md:items-center md:justify-between'>
+        <div className='flex gap-3'>
+          <div className='bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-lg'>
+            <Github className='size-5' />
+          </div>
+          <div>
+            <p className='font-medium'>GitHub App connection</p>
+            <p className='text-muted-foreground mt-1 text-sm'>
+              {connection
+                ? `Connected to ${connection.displayName}`
+                : 'Install or sync the Spoon GitHub App before creating forks.'}
+            </p>
+          </div>
+        </div>
+        <div className='flex flex-wrap gap-2'>
+          {installUrl ? (
+            <Button asChild variant='outline'>
+              <Link href={installUrl}>Install GitHub App</Link>
+            </Button>
+          ) : null}
+          <Button type='button' onClick={handleSync}>
+            <RefreshCw className='size-4' />
+            Sync configured installation
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

apps/next/src/components/integrations/github-integration-panel.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useAction, useQuery } from 'convex/react';
+import { makeFunctionReference } from 'convex/server';
+import { Github, RefreshCw } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { api } from '@spoon/backend/convex/_generated/api.js';
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@spoon/ui';
+
+const listReposRef = makeFunctionReference<
+  'action',
+  Record<string, never>,
+  {
+    id: number;
+    name: string;
+    fullName: string;
+    owner: string;
+    private: boolean;
+    fork: boolean;
+    url: string;
+    defaultBranch: string;
+    description?: string;
+  }[]
+>('githubNode:listInstallationRepositories');
+
+export const GithubIntegrationPanel = () => {
+  const connection = useQuery(api.github.getConnection, {});
+  const installUrl = useQuery(api.github.getInstallUrl, {});
+  const listRepos = useAction(listReposRef);
+
+  const refresh = async () => {
+    try {
+      const repos = await listRepos({});
+      toast.success(`GitHub can access ${repos.length} repositories.`);
+    } catch (error) {
+      console.error(error);
+      toast.error('Could not list GitHub repositories.');
+    }
+  };
+
+  return (
+    <Card className='shadow-none'>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2 text-base'>
+          <Github className='size-4' />
+          GitHub App
+        </CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-4'>
+        {connection ? (
+          <div className='grid gap-2 text-sm'>
+            <div>
+              <p className='text-muted-foreground'>Connected account</p>
+              <p className='font-medium'>{connection.displayName}</p>
+            </div>
+            <div>
+              <p className='text-muted-foreground'>Installation ID</p>
+              <p className='font-mono text-xs'>{connection.installationId}</p>
+            </div>
+          </div>
+        ) : (
+          <p className='text-muted-foreground text-sm'>
+            Install the GitHub App to let Spoon create forks and refresh
+            repository state.
+          </p>
+        )}
+        <div className='flex flex-wrap gap-2'>
+          {installUrl ? (
+            <Button asChild>
+              <a href={installUrl} target='_blank' rel='noreferrer'>
+                Configure GitHub App
+              </a>
+            </Button>
+          ) : null}
+          <Button variant='outline' onClick={refresh} disabled={!connection}>
+            <RefreshCw className='size-4' />
+            Check repository access
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

apps/next/src/components/integrations/openai-status-panel.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useAction, useMutation, useQuery } from 'convex/react';
+import { makeFunctionReference } from 'convex/server';
+import { Brain } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { api } from '@spoon/backend/convex/_generated/api.js';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@spoon/ui';
+
+type ReasoningEffort = 'none' | 'minimal' | 'low' | 'medium' | 'high' | 'xhigh';
+
+const saveOpenAiSettingsRef = makeFunctionReference<
+  'action',
+  { apiKey: string; model: string; reasoningEffort: ReasoningEffort },
+  { success: true }
+>('aiSettingsNode:saveOpenAiSettings');
+
+const modelOptions = [
+  { value: 'gpt-5.5', label: 'GPT-5.5' },
+  { value: 'gpt-5.5-pro', label: 'GPT-5.5 Pro' },
+  { value: 'gpt-5.4', label: 'GPT-5.4' },
+  { value: 'gpt-5.4-mini', label: 'GPT-5.4 Mini' },
+];
+
+const reasoningOptions: { value: ReasoningEffort; label: string }[] = [
+  { value: 'none', label: 'None' },
+  { value: 'minimal', label: 'Minimal' },
+  { value: 'low', label: 'Low' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'high', label: 'High' },
+  { value: 'xhigh', label: 'Extra high' },
+];
+
+export const OpenAiStatusPanel = () => {
+  const status = useQuery(api.integrations.getStatus, {});
+  const settings = useQuery(api.aiSettings.getMine, {});
+  const saveOpenAiSettings = useAction(saveOpenAiSettingsRef);
+  const updatePreferences = useMutation(api.aiSettings.updatePreferences);
+  const removeOpenAiKey = useMutation(api.aiSettings.removeOpenAiKey);
+  const [apiKey, setApiKey] = useState('');
+  const [model, setModel] = useState('gpt-5.5');
+  const [reasoningEffort, setReasoningEffort] =
+    useState<ReasoningEffort>('medium');
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!settings) return;
+    setModel(settings.model);
+    setReasoningEffort(settings.reasoningEffort as ReasoningEffort);
+  }, [settings]);
+
+  const save = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSubmitting(true);
+    try {
+      if (apiKey.trim()) {
+        await saveOpenAiSettings({
+          apiKey,
+          model,
+          reasoningEffort,
+        });
+        setApiKey('');
+      } else {
+        await updatePreferences({
+          model,
+          reasoningEffort,
+        });
+      }
+      toast.success('OpenAI settings saved.');
+    } catch (error) {
+      console.error(error);
+      toast.error('Could not save OpenAI settings.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const remove = async () => {
+    try {
+      await removeOpenAiKey({});
+      toast.success('OpenAI API key removed.');
+    } catch (error) {
+      console.error(error);
+      toast.error('Could not remove OpenAI API key.');
+    }
+  };
+
+  return (
+    <Card className='shadow-none'>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2 text-base'>
+          <Brain className='size-4' />
+          OpenAI reviews
+        </CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-2 text-sm'>
+        <p className='text-muted-foreground'>
+          Compatibility reviews use your own OpenAI API key. Spoon encrypts the
+          key before storing it and only shows a short preview.
+        </p>
+        <div>
+          <p className='text-muted-foreground'>Encryption</p>
+          <p className='font-medium'>
+            {status?.encryptionConfigured ? 'Configured' : 'Missing server key'}
+          </p>
+        </div>
+        <div>
+          <p className='text-muted-foreground'>OpenAI API key</p>
+          <p className='font-medium'>
+            {settings?.configured ? settings.apiKeyPreview : 'Not configured'}
+          </p>
+        </div>
+        <form onSubmit={save} className='space-y-4 pt-2'>
+          <div className='grid gap-2'>
+            <Label htmlFor='openai-api-key'>API key</Label>
+            <Input
+              id='openai-api-key'
+              type='password'
+              value={apiKey}
+              placeholder={
+                settings?.configured
+                  ? 'Leave blank to keep current key'
+                  : 'sk-...'
+              }
+              onChange={(event) => setApiKey(event.target.value)}
+            />
+          </div>
+          <div className='grid gap-2 md:grid-cols-2'>
+            <div className='grid gap-2'>
+              <Label>Review model</Label>
+              <Select value={model} onValueChange={(value) => setModel(value)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {modelOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className='grid gap-2'>
+              <Label>Thinking</Label>
+              <Select
+                value={reasoningEffort}
+                onValueChange={(value) =>
+                  setReasoningEffort(value as ReasoningEffort)
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {reasoningOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className='flex flex-wrap gap-2'>
+            <Button type='submit' disabled={submitting}>
+              {submitting ? 'Saving...' : 'Save OpenAI settings'}
+            </Button>
+            <Button
+              type='button'
+              variant='outline'
+              onClick={remove}
+              disabled={!settings?.configured}
+            >
+              Remove key
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};

apps/next/src/components/layout/auth/buttons/gibs-auth.tsx

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { ComponentProps } from 'react';
 import { useAuthActions } from '@convex-dev/auth/react';
-import { KeyRound } from 'lucide-react';
+import { Github, KeyRound } from 'lucide-react';
 
 import type { buttonVariants } from '@spoon/ui';
 import { Button } from '@spoon/ui';
@@ -33,3 +33,21 @@ export const AuthentikSignInButton = ({
     </Button>
   );
 };
+
+export const GitHubSignInButton = ({ buttonProps, type = 'signIn' }: Props) => {
+  const { signIn } = useAuthActions();
+  return (
+    <Button
+      size='lg'
+      variant='outline'
+      onClick={() => signIn('github')}
+      className='text-lg font-semibold'
+      {...buttonProps}
+    >
+      <div className='my-auto flex flex-row items-center gap-2'>
+        <Github className='size-5' />
+        <p>{type === 'signIn' ? 'Continue' : 'Sign up'} with GitHub</p>
+      </div>
+    </Button>
+  );
+};

apps/next/src/components/layout/auth/buttons/index.tsx

@@ -1 +1 @@
-export { AuthentikSignInButton } from './gibs-auth';
+export { AuthentikSignInButton, GitHubSignInButton } from './gibs-auth';

apps/next/src/components/layout/auth/profile/avatar-upload.tsx

@@ -3,6 +3,7 @@
 import type { Preloaded } from 'convex/react';
 import type { ChangeEvent } from 'react';
 import { useRef, useState } from 'react';
+import { isRemoteImageUrl } from '@/lib/avatar';
 import { useMutation, usePreloadedQuery, useQuery } from 'convex/react';
 import { Loader2, Pencil, Upload, XIcon } from 'lucide-react';
 import { toast } from 'sonner';
@@ -48,10 +49,12 @@ export const AvatarUpload = ({ preloadedUser }: AvatarUploadProps) => {
   const generateUploadUrl = useMutation(api.files.generateUploadUrl);
   const updateUser = useMutation(api.auth.updateUser);
 
+  const remoteImageUrl = isRemoteImageUrl(user?.image) ? user?.image : null;
   const currentImageUrl = useQuery(
     api.files.getImageUrl,
-    user?.image ? { storageId: user.image as Id<'_storage'> } : 'skip',
+    user?.image && !remoteImageUrl ? { storageId: user.image } : 'skip',
   );
+  const avatarUrl = remoteImageUrl ?? currentImageUrl;
 
   const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0] ?? null;
@@ -117,7 +120,7 @@ export const AvatarUpload = ({ preloadedUser }: AvatarUploadProps) => {
             onClick={() => inputRef.current?.click()}
           >
             <BasedAvatar
-              src={currentImageUrl ?? undefined}
+              src={avatarUrl ?? undefined}
               fullName={user?.name}
               className='h-42 w-42 text-6xl font-semibold'
               userIconProps={{ size: 100 }}

apps/next/src/components/layout/auth/profile/user-info.tsx

@@ -54,6 +54,7 @@ export const UserInfoForm = ({
   const providerMap: Record<string, string> = {
     unknown: 'Provider',
     authentik: 'Authentik',
+    github: 'GitHub',
   };
   const [loading, setLoading] = useState(false);
 

apps/next/src/components/layout/header/controls/AvatarDropdown.tsx

@@ -2,10 +2,10 @@
 
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import { isRemoteImageUrl } from '@/lib/avatar';
 import { useAuthActions } from '@convex-dev/auth/react';
 import { useConvexAuth, useQuery } from 'convex/react';
 
-import type { Id } from '@spoon/backend/convex/_generated/dataModel.js';
 import { api } from '@spoon/backend/convex/_generated/api.js';
 import {
   BasedAvatar,
@@ -23,10 +23,12 @@ export const AvatarDropdown = () => {
   const { isLoading, isAuthenticated } = useConvexAuth();
   const { signOut } = useAuthActions();
   const user = useQuery(api.auth.getUser, {});
+  const remoteImageUrl = isRemoteImageUrl(user?.image) ? user?.image : null;
   const currentImageUrl = useQuery(
     api.files.getImageUrl,
-    user?.image ? { storageId: user.image as Id<'_storage'> } : 'skip',
+    user?.image && !remoteImageUrl ? { storageId: user.image } : 'skip',
   );
+  const avatarUrl = remoteImageUrl ?? currentImageUrl;
 
   if (isLoading) {
     return (
@@ -51,7 +53,7 @@ export const AvatarDropdown = () => {
     <DropdownMenu>
       <DropdownMenuTrigger>
         <BasedAvatar
-          src={currentImageUrl}
+          src={avatarUrl}
           fullName={user?.name}
           className='h-9 w-9'
           fallbackProps={{ className: 'text-sm font-semibold' }}

apps/next/src/components/spoons/github-fork-form.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAction, useQuery } from 'convex/react';
+import { makeFunctionReference } from 'convex/server';
+import { GitFork } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { api } from '@spoon/backend/convex/_generated/api.js';
+import { Button, Card, CardContent, Input, Label, Textarea } from '@spoon/ui';
+
+type FormState = {
+  upstreamOwner: string;
+  upstreamRepo: string;
+  forkName: string;
+  organization: string;
+  description: string;
+};
+
+const initialState: FormState = {
+  upstreamOwner: '',
+  upstreamRepo: '',
+  forkName: '',
+  organization: '',
+  description: '',
+};
+
+const createForkRef = makeFunctionReference<
+  'action',
+  {
+    upstreamOwner: string;
+    upstreamRepo: string;
+    name?: string;
+    description?: string;
+    organization?: string;
+  },
+  string
+>('githubNode:createFork');
+
+const TextField = ({
+  id,
+  label,
+  value,
+  onChange,
+  required,
+  placeholder,
+}: {
+  id: keyof FormState;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  required?: boolean;
+  placeholder?: string;
+}) => (
+  <div className='grid gap-2'>
+    <Label htmlFor={id}>{label}</Label>
+    <Input
+      id={id}
+      value={value}
+      required={required}
+      placeholder={placeholder}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  </div>
+);
+
+export const GitHubForkForm = () => {
+  const router = useRouter();
+  const connection = useQuery(api.github.getConnection, {});
+  const createFork = useAction(createForkRef);
+  const [form, setForm] = useState<FormState>(initialState);
+  const [submitting, setSubmitting] = useState(false);
+
+  const update = <K extends keyof FormState>(key: K, value: FormState[K]) => {
+    setForm((current) => ({ ...current, [key]: value }));
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSubmitting(true);
+    try {
+      await createFork({
+        upstreamOwner: form.upstreamOwner,
+        upstreamRepo: form.upstreamRepo,
+        name: form.forkName || undefined,
+        organization: form.organization || undefined,
+        description: form.description || undefined,
+      });
+      toast.success('Fork created and added as a Spoon.');
+      router.push('/spoons');
+    } catch (error) {
+      console.error(error);
+      toast.error('Could not create the GitHub fork.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Card className='shadow-none'>
+      <CardContent className='p-5'>
+        <div className='mb-5 flex gap-3'>
+          <div className='bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-lg'>
+            <GitFork className='size-5' />
+          </div>
+          <div>
+            <p className='font-medium'>Fork with GitHub</p>
+            <p className='text-muted-foreground mt-1 text-sm'>
+              Create a real GitHub fork through the connected GitHub App and
+              record it as a Spoon.
+            </p>
+          </div>
+        </div>
+        <form onSubmit={handleSubmit} className='grid gap-5'>
+          <div className='grid gap-4 md:grid-cols-2'>
+            <TextField
+              id='upstreamOwner'
+              label='Upstream owner'
+              value={form.upstreamOwner}
+              required
+              placeholder='vercel'
+              onChange={(value) => update('upstreamOwner', value)}
+            />
+            <TextField
+              id='upstreamRepo'
+              label='Upstream repository'
+              value={form.upstreamRepo}
+              required
+              placeholder='next.js'
+              onChange={(value) => update('upstreamRepo', value)}
+            />
+            <TextField
+              id='forkName'
+              label='Fork name'
+              value={form.forkName}
+              placeholder='Optional custom repository name'
+              onChange={(value) => update('forkName', value)}
+            />
+            <TextField
+              id='organization'
+              label='Organization'
+              value={form.organization}
+              placeholder='Optional org target'
+              onChange={(value) => update('organization', value)}
+            />
+          </div>
+          <div className='grid gap-2'>
+            <Label htmlFor='description'>Description</Label>
+            <Textarea
+              id='description'
+              value={form.description}
+              placeholder='Optional Spoon note'
+              onChange={(event) => update('description', event.target.value)}
+            />
+          </div>
+          <div className='flex justify-end'>
+            <Button type='submit' disabled={!connection || submitting}>
+              {submitting ? 'Forking...' : 'Create GitHub fork'}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};

apps/next/src/components/spoons/spoon-activity-timeline.tsx

@@ -0,0 +1,71 @@
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { Badge, Card, CardContent } from '@spoon/ui';
+
+const formatDate = (value: number) =>
+  new Intl.DateTimeFormat('en', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(value);
+
+export const SpoonActivityTimeline = ({
+  syncRuns,
+  reviews,
+  requests,
+}: {
+  syncRuns: Doc<'syncRuns'>[];
+  reviews: Doc<'aiReviews'>[];
+  requests: Doc<'agentRequests'>[];
+}) => {
+  const items = [
+    ...syncRuns.map((item) => ({
+      id: item._id,
+      kind: item.kind.replaceAll('_', ' '),
+      status: item.status,
+      summary: item.summary ?? item.error ?? 'Sync run recorded.',
+      time: item.createdAt,
+    })),
+    ...reviews.map((item) => ({
+      id: item._id,
+      kind: 'AI review',
+      status: item.status,
+      summary: item.outputSummary ?? item.inputSummary,
+      time: item.createdAt,
+    })),
+    ...requests.map((item) => ({
+      id: item._id,
+      kind: 'Agent request',
+      status: item.status,
+      summary: item.prompt,
+      time: item.createdAt,
+    })),
+  ].sort((a, b) => b.time - a.time);
+
+  return (
+    <div className='space-y-3'>
+      {items.length ? (
+        items.map((item) => (
+          <Card key={item.id} className='shadow-none'>
+            <CardContent className='p-4'>
+              <div className='flex flex-wrap items-center gap-2'>
+                <p className='font-medium'>{item.kind}</p>
+                <Badge variant='outline'>{item.status}</Badge>
+              </div>
+              <p className='text-muted-foreground mt-1 text-sm'>
+                {item.summary}
+              </p>
+              <p className='text-muted-foreground mt-2 text-xs'>
+                {formatDate(item.time)}
+              </p>
+            </CardContent>
+          </Card>
+        ))
+      ) : (
+        <Card className='shadow-none'>
+          <CardContent className='text-muted-foreground p-6 text-sm'>
+            Refreshes, AI reviews, and queued requests will build this timeline.
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};

apps/next/src/components/spoons/spoon-agent-settings-form.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation } from 'convex/react';
+import { Bot } from 'lucide-react';
+import { toast } from 'sonner';
+
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { api } from '@spoon/backend/convex/_generated/api.js';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+} from '@spoon/ui';
+
+const efforts = ['minimal', 'low', 'medium', 'high', 'xhigh'] as const;
+
+type AgentSettings = {
+  enabled: boolean;
+  defaultBaseBranch?: string;
+  branchPrefix: string;
+  installCommand?: string;
+  checkCommand?: string;
+  testCommand?: string;
+  agentModel: string;
+  reasoningEffort: 'none' | 'minimal' | 'low' | 'medium' | 'high' | 'xhigh';
+};
+
+export const SpoonAgentSettingsForm = ({
+  spoon,
+  settings,
+}: {
+  spoon: Doc<'spoons'>;
+  settings?: AgentSettings | null;
+}) => {
+  const update = useMutation(api.spoonAgentSettings.update);
+  const [enabled, setEnabled] = useState(settings?.enabled ?? true);
+  const [defaultBaseBranch, setDefaultBaseBranch] = useState(
+    settings?.defaultBaseBranch ??
+      spoon.forkDefaultBranch ??
+      spoon.upstreamDefaultBranch,
+  );
+  const [branchPrefix, setBranchPrefix] = useState(
+    settings?.branchPrefix ?? 'spoon/agent',
+  );
+  const [installCommand, setInstallCommand] = useState(
+    settings?.installCommand ?? '',
+  );
+  const [checkCommand, setCheckCommand] = useState(
+    settings?.checkCommand ?? '',
+  );
+  const [testCommand, setTestCommand] = useState(settings?.testCommand ?? '');
+  const [agentModel, setAgentModel] = useState(
+    settings?.agentModel ?? 'gpt-5.1-codex',
+  );
+  const [reasoningEffort, setReasoningEffort] = useState<
+    'minimal' | 'low' | 'medium' | 'high' | 'xhigh'
+  >(
+    settings?.reasoningEffort === 'none'
+      ? 'minimal'
+      : (settings?.reasoningEffort ?? 'high'),
+  );
+
+  const save = async () => {
+    try {
+      await update({
+        spoonId: spoon._id,
+        enabled,
+        defaultBaseBranch,
+        branchPrefix,
+        installCommand: installCommand || undefined,
+        checkCommand: checkCommand || undefined,
+        testCommand: testCommand || undefined,
+        agentModel,
+        reasoningEffort,
+      });
+      toast.success('Agent settings saved.');
+    } catch (error) {
+      console.error(error);
+      toast.error('Could not save agent settings.');
+    }
+  };
+
+  return (
+    <Card className='shadow-none'>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2 text-base'>
+          <Bot className='size-4' />
+          Agent runtime
+        </CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-4'>
+        <div className='flex items-center justify-between gap-4'>
+          <Label htmlFor='agentEnabled'>Enable agent jobs</Label>
+          <Switch
+            id='agentEnabled'
+            checked={enabled}
+            onCheckedChange={setEnabled}
+          />
+        </div>
+        <div className='grid gap-3 md:grid-cols-2'>
+          <div className='grid gap-2'>
+            <Label htmlFor='defaultBaseBranch'>Default base branch</Label>
+            <Input
+              id='defaultBaseBranch'
+              value={defaultBaseBranch}
+              onChange={(event) => setDefaultBaseBranch(event.target.value)}
+            />
+          </div>
+          <div className='grid gap-2'>
+            <Label htmlFor='branchPrefix'>Branch prefix</Label>
+            <Input
+              id='branchPrefix'
+              value={branchPrefix}
+              onChange={(event) => setBranchPrefix(event.target.value)}
+            />
+          </div>
+          <div className='grid gap-2'>
+            <Label htmlFor='agentModel'>Model</Label>
+            <Input
+              id='agentModel'
+              value={agentModel}
+              onChange={(event) => setAgentModel(event.target.value)}
+            />
+          </div>
+          <div className='grid gap-2'>
+            <Label>Reasoning effort</Label>
+            <Select
+              value={reasoningEffort}
+              onValueChange={(value) =>
+                setReasoningEffort(
+                  value as 'minimal' | 'low' | 'medium' | 'high' | 'xhigh',
+                )
+              }
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {efforts.map((effort) => (
+                  <SelectItem key={effort} value={effort}>
+                    {effort}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className='grid gap-2'>
+            <Label htmlFor='installCommand'>Install command</Label>
+            <Input
+              id='installCommand'
+              value={installCommand}
+              placeholder='bun install'
+              onChange={(event) => setInstallCommand(event.target.value)}
+            />
+          </div>
+          <div className='grid gap-2'>
+            <Label htmlFor='checkCommand'>Check command</Label>
+            <Input
+              id='checkCommand'
+              value={checkCommand}
+              placeholder='bun typecheck'
+              onChange={(event) => setCheckCommand(event.target.value)}
+            />
+          </div>
+          <div className='grid gap-2'>
+            <Label htmlFor='testCommand'>Test command</Label>
+            <Input
+              id='testCommand'
+              value={testCommand}
+              placeholder='bun test'
+              onChange={(event) => setTestCommand(event.target.value)}
+            />
+          </div>
+        </div>
+        <Button type='button' onClick={save}>
+          Save agent settings
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};

apps/next/src/components/spoons/spoon-ai-review-panel.tsx

@@ -0,0 +1,75 @@
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { Badge, Card, CardContent, CardHeader, CardTitle } from '@spoon/ui';
+
+export const SpoonAiReviewPanel = ({
+  latestReview,
+  reviews,
+}: {
+  latestReview?: Doc<'aiReviews'> | null;
+  reviews: Doc<'aiReviews'>[];
+}) => (
+  <div className='space-y-4'>
+    <Card className='shadow-none'>
+      <CardHeader>
+        <CardTitle className='text-base'>Latest compatibility review</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {latestReview ? (
+          <div className='space-y-4'>
+            <div className='flex flex-wrap gap-2'>
+              <Badge>{latestReview.risk}</Badge>
+              <Badge variant='outline'>{latestReview.recommendedAction}</Badge>
+              {latestReview.requiresHumanReview ? (
+                <Badge variant='secondary'>Human review required</Badge>
+              ) : null}
+            </div>
+            <p className='text-sm'>
+              {latestReview.outputSummary ?? latestReview.inputSummary}
+            </p>
+            {latestReview.reasoningSummary ? (
+              <p className='text-muted-foreground text-sm'>
+                {latestReview.reasoningSummary}
+              </p>
+            ) : null}
+            {latestReview.potentialConflicts?.length ? (
+              <div>
+                <p className='text-sm font-medium'>Potential conflicts</p>
+                <ul className='text-muted-foreground mt-2 list-disc space-y-1 pl-5 text-sm'>
+                  {latestReview.potentialConflicts.map((item) => (
+                    <li key={item}>{item}</li>
+                  ))}
+                </ul>
+              </div>
+            ) : null}
+          </div>
+        ) : (
+          <p className='text-muted-foreground text-sm'>
+            Run an AI review after a GitHub refresh to get compatibility notes.
+          </p>
+        )}
+      </CardContent>
+    </Card>
+    <Card className='shadow-none'>
+      <CardHeader>
+        <CardTitle className='text-base'>Review history</CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-3'>
+        {reviews.length ? (
+          reviews.map((review) => (
+            <div key={review._id} className='border-border border p-3 text-sm'>
+              <div className='flex flex-wrap gap-2'>
+                <Badge variant='outline'>{review.status}</Badge>
+                <Badge variant='secondary'>{review.risk}</Badge>
+              </div>
+              <p className='mt-2'>
+                {review.outputSummary ?? review.inputSummary}
+              </p>
+            </div>
+          ))
+        ) : (
+          <p className='text-muted-foreground text-sm'>No AI reviews yet.</p>
+        )}
+      </CardContent>
+    </Card>
+  </div>
+);

apps/next/src/components/spoons/spoon-card.tsx

@@ -1,5 +1,8 @@
+import Link from 'next/link';
+import { SpoonStatusBadge } from '@/components/spoons/spoon-status-badge';
+
 import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
-import { Badge, Card, CardContent, CardHeader, CardTitle } from '@spoon/ui';
+import { Card, CardContent, CardHeader, CardTitle } from '@spoon/ui';
 
 const formatDate = (value?: number) =>
   value
@@ -7,15 +10,19 @@ const formatDate = (value?: number) =>
     : 'Never';
 
 export const SpoonCard = ({ spoon }: { spoon: Doc<'spoons'> }) => (
-  <Card className='shadow-none'>
+  <Card className='hover:border-primary/50 shadow-none transition-colors'>
     <CardHeader className='flex-row items-start justify-between gap-4'>
       <div>
-        <CardTitle className='text-lg'>{spoon.name}</CardTitle>
+        <CardTitle className='text-lg'>
+          <Link href={`/spoons/${spoon._id}`} className='hover:underline'>
+            {spoon.name}
+          </Link>
+        </CardTitle>
         <p className='text-muted-foreground mt-1 text-sm'>
           {spoon.upstreamOwner}/{spoon.upstreamRepo}
         </p>
       </div>
-      <Badge variant='outline'>{spoon.status.replaceAll('_', ' ')}</Badge>
+      <SpoonStatusBadge status={spoon.syncStatus ?? spoon.status} />
     </CardHeader>
     <CardContent className='grid gap-3 text-sm md:grid-cols-2'>
       <div>
@@ -38,6 +45,14 @@ export const SpoonCard = ({ spoon }: { spoon: Doc<'spoons'> }) => (
         <p className='text-muted-foreground'>Last checked</p>
         <p className='font-medium'>{formatDate(spoon.lastCheckedAt)}</p>
       </div>
+      <div>
+        <p className='text-muted-foreground'>Upstream waiting</p>
+        <p className='font-medium'>{spoon.upstreamAheadBy ?? 0}</p>
+      </div>
+      <div>
+        <p className='text-muted-foreground'>Fork-only commits</p>
+        <p className='font-medium'>{spoon.forkAheadBy ?? 0}</p>
+      </div>
     </CardContent>
   </Card>
 );

apps/next/src/components/spoons/spoon-clone-panel.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation, useQuery } from 'convex/react';
+import { Check, Copy, ExternalLink, Plus, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { api } from '@spoon/backend/convex/_generated/api.js';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+} from '@spoon/ui';
+
+const RemoteRow = ({
+  label,
+  url,
+  remoteName,
+  onRemove,
+}: {
+  label: string;
+  url: string;
+  remoteName?: string;
+  onRemove?: () => Promise<void>;
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      toast.success(`${label} URL copied.`);
+      window.setTimeout(() => setCopied(false), 1800);
+    } catch (error) {
+      console.error(error);
+      toast.error('Could not copy remote URL.');
+    }
+  };
+
+  return (
+    <div className='border-border space-y-2 border-t pt-3 first:border-t-0 first:pt-0'>
+      <div className='flex flex-wrap items-center justify-between gap-2'>
+        <div>
+          <p className='text-sm font-medium'>{label}</p>
+          {remoteName ? (
+            <p className='text-muted-foreground text-xs'>
+              git remote: {remoteName}
+            </p>
+          ) : null}
+        </div>
+        <div className='flex gap-2'>
+          <Button type='button' variant='outline' size='icon' onClick={copy}>
+            {copied ? (
+              <Check className='size-4' />
+            ) : (
+              <Copy className='size-4' />
+            )}
+          </Button>
+          <Button type='button' variant='outline' size='icon' asChild>
+            <a
+              href={url}
+              target='_blank'
+              rel='noreferrer'
+              aria-label={`Open ${label} repository`}
+            >
+              <ExternalLink className='size-4' />
+            </a>
+          </Button>
+          {onRemove ? (
+            <Button
+              type='button'
+              variant='outline'
+              size='icon'
+              onClick={() => void onRemove()}
+            >
+              <Trash2 className='size-4' />
+            </Button>
+          ) : null}
+        </div>
+      </div>
+      <Input
+        readOnly
+        value={url}
+        className='font-mono text-xs'
+        onFocus={(event) => event.currentTarget.select()}
+      />
+    </div>
+  );
+};
+
+export const SpoonClonePanel = ({ spoon }: { spoon: Doc<'spoons'> }) => {
+  const remotes =
+    useQuery(api.spoonRemotes.listForSpoon, { spoonId: spoon._id }) ?? [];
+  const createRemote = useMutation(api.spoonRemotes.create);
+  const removeRemote = useMutation(api.spoonRemotes.remove);
+  const [label, setLabel] = useState('');
+  const [remoteName, setRemoteName] = useState('');
+  const [url, setUrl] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const cloneUrl = spoon.forkUrl;
+
+  const addRemote = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSubmitting(true);
+    try {
+      await createRemote({
+        spoonId: spoon._id,
+        label,
+        url,
+        remoteName: remoteName || undefined,
+      });
+      setLabel('');
+      setRemoteName('');
+      setUrl('');
+      toast.success('Remote added.');
+    } catch (error) {
+      console.error(error);
+      toast.error('Could not add remote.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Card className='shadow-none'>
+      <CardHeader className='pb-3'>
+        <CardTitle className='text-base'>Clone your fork</CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-3'>
+        {cloneUrl ? (
+          <>
+            <RemoteRow
+              label='Primary fork'
+              remoteName='origin'
+              url={cloneUrl}
+            />
+            <p className='text-muted-foreground text-xs'>
+              This GitHub fork remains Spoon&apos;s source of truth for upstream
+              maintenance.
+            </p>
+          </>
+        ) : (
+          <p className='text-muted-foreground text-sm'>
+            Add fork metadata before Spoon can show a clone URL.
+          </p>
+        )}
+        {remotes.length ? (
+          <div className='space-y-3 pt-2'>
+            {remotes.map((remote) => (
+              <RemoteRow
+                key={remote._id}
+                label={remote.label}
+                remoteName={remote.remoteName}
+                url={remote.url}
+                onRemove={async () => {
+                  await removeRemote({ remoteId: remote._id });
+                  toast.success('Remote removed.');
+                }}
+              />
+            ))}
+          </div>
+        ) : null}
+        <form
+          onSubmit={addRemote}
+          className='border-border space-y-3 border-t pt-4'
+        >
+          <div className='grid gap-3 md:grid-cols-[1fr_0.7fr]'>
+            <div className='grid gap-2'>
+              <Label htmlFor='remote-label'>Label</Label>
+              <Input
+                id='remote-label'
+                value={label}
+                placeholder='Gitea mirror'
+                required
+                onChange={(event) => setLabel(event.target.value)}
+              />
+            </div>
+            <div className='grid gap-2'>
+              <Label htmlFor='remote-name'>Git remote name</Label>
+              <Input
+                id='remote-name'
+                value={remoteName}
+                placeholder='gitea'
+                onChange={(event) => setRemoteName(event.target.value)}
+              />
+            </div>
+          </div>
+          <div className='grid gap-2'>
+            <Label htmlFor='remote-url'>Repository URL</Label>
+            <Input
+              id='remote-url'
+              value={url}
+              placeholder='https://git.example.com/you/project.git'
+              required
+              onChange={(event) => setUrl(event.target.value)}
+            />
+          </div>
+          <Button type='submit' variant='outline' disabled={submitting}>
+            <Plus className='size-4' />
+            {submitting ? 'Adding...' : 'Add remote'}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};

apps/next/src/components/spoons/spoon-commit-list.tsx

@@ -0,0 +1,51 @@
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { Button, Card, CardContent } from '@spoon/ui';
+
+const shortSha = (sha: string) => sha.slice(0, 7);
+
+const formatDate = (value?: number) =>
+  value
+    ? new Intl.DateTimeFormat('en', { dateStyle: 'medium' }).format(value)
+    : 'Unknown date';
+
+export const SpoonCommitList = ({
+  commits,
+  empty,
+}: {
+  commits: Doc<'spoonCommits'>[];
+  empty: string;
+}) => (
+  <div className='space-y-3'>
+    {commits.length ? (
+      commits.map((commit) => (
+        <Card key={`${commit.side}-${commit.sha}`} className='shadow-none'>
+          <CardContent className='flex flex-col gap-3 p-4 md:flex-row md:items-start md:justify-between'>
+            <div className='min-w-0'>
+              <p className='truncate text-sm font-medium'>
+                {commit.message.split('\n')[0]}
+              </p>
+              <p className='text-muted-foreground mt-1 text-xs'>
+                {shortSha(commit.sha)} by{' '}
+                {commit.authorLogin ?? commit.authorName ?? 'unknown'} ·{' '}
+                {formatDate(commit.committedAt)}
+              </p>
+            </div>
+            {commit.htmlUrl ? (
+              <Button variant='outline' size='sm' asChild>
+                <a href={commit.htmlUrl} target='_blank' rel='noreferrer'>
+                  Open
+                </a>
+              </Button>
+            ) : null}
+          </CardContent>
+        </Card>
+      ))
+    ) : (
+      <Card className='shadow-none'>
+        <CardContent className='text-muted-foreground p-6 text-sm'>
+          {empty}
+        </CardContent>
+      </Card>
+    )}
+  </div>
+);

apps/next/src/components/spoons/spoon-detail-header.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useState } from 'react';
+import { SpoonStatusBadge } from '@/components/spoons/spoon-status-badge';
+import { useAction } from 'convex/react';
+import { makeFunctionReference } from 'convex/server';
+import { Brain, RefreshCw, RotateCw } from 'lucide-react';
+import { toast } from 'sonner';
+
+import type { Doc, Id } from '@spoon/backend/convex/_generated/dataModel.js';
+import { Button } from '@spoon/ui';
+
+const refreshRef = makeFunctionReference<
+  'action',
+  { spoonId: Id<'spoons'> },
+  {
+    success: boolean;
+    status: string;
+    upstreamAheadBy: number;
+    forkAheadBy: number;
+  }
+>('githubSync:refreshSpoonGithubState');
+
+const syncRef = makeFunctionReference<
+  'action',
+  { spoonId: Id<'spoons'> },
+  unknown
+>('githubSync:syncForkWithUpstream');
+
+const reviewRef = makeFunctionReference<
+  'action',
+  { spoonId: Id<'spoons'> },
+  { reviewId: Id<'aiReviews'>; risk: string; recommendedAction: string }
+>('aiReviewActions:reviewLatestUpstreamChanges');
+
+export const SpoonDetailHeader = ({
+  spoon,
+  state,
+}: {
+  spoon: Doc<'spoons'>;
+  state?: Doc<'spoonRepositoryStates'> | null;
+}) => {
+  const refresh = useAction(refreshRef);
+  const sync = useAction(syncRef);
+  const review = useAction(reviewRef);
+  const [busy, setBusy] = useState<string | null>(null);
+  const canSync =
+    spoon.provider === 'github' &&
+    state?.status === 'behind' &&
+    state.forkAheadBy === 0;
+
+  const run = async (label: string, action: () => Promise<unknown>) => {
+    setBusy(label);
+    try {
+      await action();
+      toast.success(`${label} complete.`);
+    } catch (error) {
+      console.error(error);
+      toast.error(`${label} failed.`);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div className='border-border bg-card flex flex-col justify-between gap-5 rounded-lg border p-5 shadow-sm lg:flex-row lg:items-start'>
+      <div className='min-w-0 space-y-2'>
+        <div className='flex flex-wrap items-center gap-3'>
+          <h1 className='truncate text-3xl font-semibold tracking-normal'>
+            {spoon.name}
+          </h1>
+          <SpoonStatusBadge
+            status={state?.status ?? spoon.syncStatus ?? spoon.status}
+          />
+        </div>
+        <div className='text-muted-foreground flex flex-wrap gap-x-4 gap-y-1 text-sm'>
+          <a
+            href={spoon.upstreamUrl}
+            target='_blank'
+            rel='noreferrer'
+            className='hover:text-foreground'
+          >
+            Upstream: {spoon.upstreamOwner}/{spoon.upstreamRepo}
+          </a>
+          {spoon.forkUrl ? (
+            <a
+              href={spoon.forkUrl}
+              target='_blank'
+              rel='noreferrer'
+              className='hover:text-foreground'
+            >
+              Fork: {spoon.forkOwner}/{spoon.forkRepo}
+            </a>
+          ) : (
+            <span>Fork metadata missing</span>
+          )}
+        </div>
+      </div>
+      <div className='flex shrink-0 flex-wrap gap-2'>
+        <Button
+          variant='outline'
+          onClick={() => run('Refresh', () => refresh({ spoonId: spoon._id }))}
+          disabled={Boolean(busy)}
+        >
+          <RefreshCw className='size-4' />
+          Refresh
+        </Button>
+        <Button
+          variant='outline'
+          onClick={() => run('AI review', () => review({ spoonId: spoon._id }))}
+          disabled={Boolean(busy)}
+        >
+          <Brain className='size-4' />
+          Review with AI
+        </Button>
+        <Button
+          onClick={() => run('Sync', () => sync({ spoonId: spoon._id }))}
+          disabled={Boolean(busy) || !canSync}
+        >
+          <RotateCw className='size-4' />
+          Sync fork
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/next/src/components/spoons/spoon-metrics.tsx

@@ -0,0 +1,77 @@
+import {
+  Clock,
+  GitCommit,
+  GitPullRequest,
+  ShieldCheck,
+  TrendingUp,
+} from 'lucide-react';
+
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { Card, CardContent } from '@spoon/ui';
+
+const formatDate = (value?: number) =>
+  value
+    ? new Intl.DateTimeFormat('en', { dateStyle: 'medium' }).format(value)
+    : 'Never';
+
+export const SpoonMetrics = ({
+  spoon,
+  state,
+  latestReview,
+}: {
+  spoon: Doc<'spoons'>;
+  state?: Doc<'spoonRepositoryStates'> | null;
+  latestReview?: Doc<'aiReviews'> | null;
+}) => {
+  const metrics = [
+    {
+      label: 'Upstream waiting',
+      value: state?.upstreamAheadBy ?? spoon.upstreamAheadBy ?? 0,
+      icon: TrendingUp,
+    },
+    {
+      label: 'Fork-only commits',
+      value: state?.forkAheadBy ?? spoon.forkAheadBy ?? 0,
+      icon: GitCommit,
+    },
+    {
+      label: 'Open PRs',
+      value:
+        (state?.openForkPullRequestCount ?? 0) +
+        (state?.openUpstreamPullRequestCount ?? 0),
+      icon: GitPullRequest,
+    },
+    {
+      label: 'Latest AI risk',
+      value: latestReview?.risk ?? 'unknown',
+      icon: ShieldCheck,
+    },
+    {
+      label: 'Last check',
+      value: formatDate(spoon.lastCheckedAt ?? state?.refreshedAt),
+      icon: Clock,
+    },
+  ];
+  return (
+    <div className='grid gap-3 md:grid-cols-2 xl:grid-cols-5'>
+      {metrics.map((metric) => {
+        const Icon = metric.icon;
+        return (
+          <Card key={metric.label} className='shadow-none'>
+            <CardContent className='flex items-center justify-between gap-3 p-4'>
+              <div className='min-w-0'>
+                <p className='text-muted-foreground text-xs'>{metric.label}</p>
+                <p className='mt-1 truncate text-lg font-semibold capitalize'>
+                  {metric.value}
+                </p>
+              </div>
+              <div className='bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-md'>
+                <Icon className='size-4' />
+              </div>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};

apps/next/src/components/spoons/spoon-pr-list.tsx

@@ -0,0 +1,48 @@
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { Badge, Button, Card, CardContent } from '@spoon/ui';
+
+export const SpoonPrList = ({
+  pullRequests,
+}: {
+  pullRequests: Doc<'spoonPullRequests'>[];
+}) => (
+  <div className='space-y-3'>
+    {pullRequests.length ? (
+      pullRequests.map((pullRequest) => (
+        <Card
+          key={`${pullRequest.repoFullName}-${pullRequest.githubId}`}
+          className='shadow-none'
+        >
+          <CardContent className='flex flex-col gap-3 p-4 md:flex-row md:items-start md:justify-between'>
+            <div>
+              <div className='flex flex-wrap items-center gap-2'>
+                <p className='font-medium'>
+                  #{pullRequest.number} {pullRequest.title}
+                </p>
+                <Badge variant='outline'>{pullRequest.state}</Badge>
+                <Badge variant='secondary'>
+                  {pullRequest.scope.replaceAll('_', ' ')}
+                </Badge>
+              </div>
+              <p className='text-muted-foreground mt-1 text-sm'>
+                {pullRequest.repoFullName}: {pullRequest.headRef} →{' '}
+                {pullRequest.baseRef}
+              </p>
+            </div>
+            <Button variant='outline' size='sm' asChild>
+              <a href={pullRequest.htmlUrl} target='_blank' rel='noreferrer'>
+                Open
+              </a>
+            </Button>
+          </CardContent>
+        </Card>
+      ))
+    ) : (
+      <Card className='shadow-none'>
+        <CardContent className='text-muted-foreground p-6 text-sm'>
+          Pull requests will appear after the next GitHub refresh.
+        </CardContent>
+      </Card>
+    )}
+  </div>
+);

apps/next/src/components/spoons/spoon-secrets-form.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useState } from 'react';
+import { useAction, useMutation, useQuery } from 'convex/react';
+import { KeyRound, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+import type { Id } from '@spoon/backend/convex/_generated/dataModel.js';
+import { api } from '@spoon/backend/convex/_generated/api.js';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+} from '@spoon/ui';
+
+export const SpoonSecretsForm = ({ spoonId }: { spoonId: Id<'spoons'> }) => {
+  const secrets = useQuery(api.spoonSecrets.listForSpoon, { spoonId }) ?? [];
+  const createSecret = useAction(api.spoonSecretsNode.create);
+  const removeSecret = useMutation(api.spoonSecrets.remove);
+  const [name, setName] = useState('');
+  const [value, setValue] = useState('');
+  const [description, setDescription] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  const save = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSaving(true);
+    try {
+      await createSecret({
+        spoonId,
+        name,
+        value,
+        description: description || undefined,
+      });
+      setName('');
+      setValue('');
+      setDescription('');
+      toast.success('Spoon secret saved.');
+    } catch (error) {
+      console.error(error);
+      toast.error('Could not save secret.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Card className='shadow-none'>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2 text-base'>
+          <KeyRound className='size-4' />
+          Project secrets
+        </CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-4'>
+        <form
+          onSubmit={save}
+          className='grid gap-3 md:grid-cols-[1fr_1fr_1fr_auto]'
+        >
+          <div className='grid gap-2'>
+            <Label htmlFor='secretName'>Name</Label>
+            <Input
+              id='secretName'
+              value={name}
+              placeholder='AUTHENTIK_CLIENT_ID'
+              onChange={(event) => setName(event.target.value)}
+            />
+          </div>
+          <div className='grid gap-2'>
+            <Label htmlFor='secretValue'>Value</Label>
+            <Input
+              id='secretValue'
+              type='password'
+              value={value}
+              onChange={(event) => setValue(event.target.value)}
+            />
+          </div>
+          <div className='grid gap-2'>
+            <Label htmlFor='secretDescription'>Description</Label>
+            <Input
+              id='secretDescription'
+              value={description}
+              placeholder='Used for local validation'
+              onChange={(event) => setDescription(event.target.value)}
+            />
+          </div>
+          <div className='flex items-end'>
+            <Button type='submit' disabled={saving}>
+              Save
+            </Button>
+          </div>
+        </form>
+        <div className='divide-border overflow-hidden rounded-md border'>
+          {secrets.length ? (
+            secrets.map((secret) => (
+              <div
+                key={secret._id}
+                className='flex items-center justify-between gap-3 border-b p-3'
+              >
+                <div>
+                  <p className='font-mono text-sm'>{secret.name}</p>
+                  <p className='text-muted-foreground text-xs'>
+                    {secret.description ?? secret.valuePreview ?? 'Configured'}
+                  </p>
+                </div>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  size='icon'
+                  aria-label={`Remove ${secret.name}`}
+                  onClick={async () => {
+                    await removeSecret({ secretId: secret._id });
+                    toast.success('Secret removed.');
+                  }}
+                >
+                  <Trash2 className='size-4' />
+                </Button>
+              </div>
+            ))
+          ) : (
+            <p className='text-muted-foreground p-3 text-sm'>
+              No secrets saved for this Spoon.
+            </p>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

apps/next/src/components/spoons/spoon-settings-form.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation } from 'convex/react';
+import { toast } from 'sonner';
+
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { api } from '@spoon/backend/convex/_generated/api.js';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Label,
+  Switch,
+} from '@spoon/ui';
+
+export const SpoonSettingsForm = ({
+  spoon,
+  settings,
+}: {
+  spoon: Doc<'spoons'>;
+  settings?: Doc<'spoonSettings'> | null;
+}) => {
+  const update = useMutation(api.spoonSettings.update);
+  const [autoRefreshEnabled, setAutoRefreshEnabled] = useState(
+    settings?.autoRefreshEnabled ?? true,
+  );
+  const [autoReviewEnabled, setAutoReviewEnabled] = useState(
+    settings?.autoReviewEnabled ?? true,
+  );
+  const [autoSyncEnabled, setAutoSyncEnabled] = useState(
+    settings?.autoSyncEnabled ?? false,
+  );
+  const [requireAiLowRiskForSync, setRequireAiLowRiskForSync] = useState(
+    settings?.requireAiLowRiskForSync ?? true,
+  );
+  const [requireCleanCompareForSync, setRequireCleanCompareForSync] = useState(
+    settings?.requireCleanCompareForSync ?? true,
+  );
+
+  const save = async () => {
+    try {
+      await update({
+        spoonId: spoon._id,
+        autoRefreshEnabled,
+        autoReviewEnabled,
+        autoSyncEnabled,
+        requireAiLowRiskForSync,
+        requireCleanCompareForSync,
+      });
+      toast.success('Spoon settings saved.');
+    } catch (error) {
+      console.error(error);
+      toast.error('Could not save settings.');
+    }
+  };
+
+  const rows = [
+    {
+      label: 'Auto refresh',
+      value: autoRefreshEnabled,
+      onChange: setAutoRefreshEnabled,
+    },
+    {
+      label: 'Auto AI review',
+      value: autoReviewEnabled,
+      onChange: setAutoReviewEnabled,
+    },
+    {
+      label: 'Auto sync',
+      value: autoSyncEnabled,
+      onChange: setAutoSyncEnabled,
+    },
+    {
+      label: 'Require low AI risk for sync',
+      value: requireAiLowRiskForSync,
+      onChange: setRequireAiLowRiskForSync,
+    },
+    {
+      label: 'Require clean compare for sync',
+      value: requireCleanCompareForSync,
+      onChange: setRequireCleanCompareForSync,
+    },
+  ];
+
+  return (
+    <Card className='shadow-none'>
+      <CardHeader>
+        <CardTitle className='text-base'>Maintenance settings</CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-4'>
+        <div className='grid gap-3 md:grid-cols-2'>
+          <div>
+            <p className='text-muted-foreground text-xs'>Sync cadence</p>
+            <p className='font-medium'>{spoon.syncCadence}</p>
+          </div>
+          <div>
+            <p className='text-muted-foreground text-xs'>Maintenance mode</p>
+            <p className='font-medium'>
+              {spoon.maintenanceMode.replaceAll('_', ' ')}
+            </p>
+          </div>
+          <div>
+            <p className='text-muted-foreground text-xs'>Production ref</p>
+            <p className='font-medium'>
+              {spoon.productionRefStrategy.replaceAll('_', ' ')}
+            </p>
+          </div>
+        </div>
+        <div className='space-y-3'>
+          {rows.map((row) => (
+            <div
+              key={row.label}
+              className='flex items-center justify-between gap-4 border-t pt-3'
+            >
+              <Label>{row.label}</Label>
+              <Switch checked={row.value} onCheckedChange={row.onChange} />
+            </div>
+          ))}
+        </div>
+        <Button onClick={save}>Save settings</Button>
+      </CardContent>
+    </Card>
+  );
+};

apps/next/src/components/spoons/spoon-status-badge.tsx

@@ -0,0 +1,45 @@
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { Badge } from '@spoon/ui';
+
+type Status =
+  | NonNullable<Doc<'spoons'>['syncStatus']>
+  | Doc<'spoons'>['status'];
+
+const labels: Record<string, string> = {
+  up_to_date: 'Up to date',
+  behind: 'Behind',
+  ahead: 'Ahead',
+  diverged: 'Diverged',
+  checking: 'Checking',
+  conflict: 'Conflict',
+  error: 'Error',
+  unknown: 'Unknown',
+  active: 'Active',
+  draft: 'Draft',
+  needs_connection: 'Needs connection',
+  paused: 'Paused',
+  archived: 'Archived',
+};
+
+const variants: Record<
+  string,
+  'default' | 'secondary' | 'destructive' | 'outline'
+> = {
+  up_to_date: 'default',
+  behind: 'secondary',
+  ahead: 'outline',
+  diverged: 'destructive',
+  conflict: 'destructive',
+  error: 'destructive',
+  checking: 'secondary',
+  active: 'default',
+};
+
+export const SpoonStatusBadge = ({ status }: { status?: Status }) => {
+  const value = status ?? 'unknown';
+  return (
+    <Badge variant={variants[value] ?? 'outline'}>
+      {labels[value] ?? value.replaceAll('_', ' ')}
+    </Badge>
+  );
+};

apps/next/src/components/updates/maintenance-queue.tsx

@@ -0,0 +1,52 @@
+import Link from 'next/link';
+import { SpoonStatusBadge } from '@/components/spoons/spoon-status-badge';
+
+import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
+import { Button, Card, CardContent } from '@spoon/ui';
+
+export const MaintenanceQueue = ({ spoons }: { spoons: Doc<'spoons'>[] }) => {
+  const queued = spoons
+    .filter((spoon) =>
+      ['behind', 'diverged', 'conflict', 'error'].includes(
+        spoon.syncStatus ?? '',
+      ),
+    )
+    .sort((a, b) => (b.upstreamAheadBy ?? 0) - (a.upstreamAheadBy ?? 0));
+
+  return (
+    <div className='space-y-3'>
+      {queued.length ? (
+        queued.map((spoon) => (
+          <Card key={spoon._id} className='shadow-none'>
+            <CardContent className='grid gap-3 p-4 md:grid-cols-[1fr_auto] md:items-center'>
+              <div>
+                <div className='flex flex-wrap items-center gap-2'>
+                  <p className='font-medium'>{spoon.name}</p>
+                  <SpoonStatusBadge status={spoon.syncStatus} />
+                </div>
+                <p className='text-muted-foreground mt-1 text-sm'>
+                  {spoon.upstreamOwner}/{spoon.upstreamRepo} →{' '}
+                  {spoon.forkOwner ?? 'unknown'}/{spoon.forkRepo ?? 'unknown'}
+                </p>
+                <p className='text-muted-foreground mt-1 text-xs'>
+                  {spoon.upstreamAheadBy ?? 0} upstream commit(s),{' '}
+                  {spoon.forkAheadBy ?? 0} fork-only commit(s)
+                </p>
+              </div>
+              <Button variant='outline' size='sm' asChild>
+                <Link href={`/spoons/${spoon._id}`}>Open Spoon</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        ))
+      ) : (
+        <Card className='shadow-none'>
+          <CardContent className='text-muted-foreground p-6 text-sm'>
+            No Spoons currently need review. Refresh GitHub state to populate
+            this queue.
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};