Promote agentic pair programming with moshcode

apps/web/public/.well-known/openaccess.json

@@ -3,9 +3,7 @@
   "name": "PairUX",
   "url": "https://pairux.com",
   "operator": "https://logicsrc.com/.well-known/openprofile.md",
-  "redirect_uris": [
-    "https://pairux.com/api/v1/openaccess/callback"
-  ],
+  "redirect_uris": ["https://pairux.com/api/v1/openaccess/callback"],
   "jwks": {
     "keys": [
       {
@@ -58,7 +56,5 @@
     "pairux.com/team"
   ],
   "webhooks": "https://pairux.com/api/v1/openaccess/events",
-  "hubs": [
-    "https://openaccess.logicsrc.com"
-  ]
+  "hubs": ["https://openaccess.logicsrc.com"]
 }

apps/web/src/app/page.tsx

@@ -283,6 +283,42 @@ export default async function HomePage() {
           </div>
         </section>
 
+        {/* Agentic pair programming */}
+        <section className="bg-gray-900 py-20 text-white sm:py-28">
+          <div className="mx-auto grid max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8">
+            <div>
+              <p className="text-primary-300 text-sm font-semibold tracking-wide uppercase">
+                Agentic pair programming
+              </p>
+              <h2 className="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">
+                Two people. One agent session.
+              </h2>
+              <p className="mt-5 text-lg text-gray-300">
+                Bring a teammate into the work while your coding agent runs. Follow the same
+                terminal, review the app together, and decide what to ask the agent next.
+              </p>
+              <Link
+                href="/use-cases/agentic-pair-programming"
+                className="text-primary-300 mt-6 inline-flex items-center gap-2 font-semibold hover:text-white"
+              >
+                Pair with moshcode and PairUX <ArrowRight className="h-5 w-5" aria-hidden="true" />
+              </Link>
+            </div>
+            <div className="rounded-2xl border border-gray-700 bg-gray-800 p-8">
+              <h3 className="text-xl font-semibold">Watch, discuss, then work together</h3>
+              <ol className="mt-5 space-y-4 text-gray-300">
+                <li>1. Start a live moshcode session and share it with your team.</li>
+                <li>2. Use PairUX to show the terminal and the app you are building.</li>
+                <li>3. Review the agent’s changes together and let your teammate participate.</li>
+              </ol>
+              <p className="mt-6 text-sm text-gray-400">
+                Useful for onboarding contractors, debugging together, and reviewing work before it
+                ships.
+              </p>
+            </div>
+          </div>
+        </section>
+
         {/* Security Section */}
         <section className="bg-gray-50 py-20 sm:py-28">
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">

apps/web/src/app/sitemap.ts

@@ -14,6 +14,12 @@ export default function sitemap(): MetadataRoute.Sitemap {
     { url: `${BASE}/pricing`, lastModified: new Date(), changeFrequency: 'monthly', priority: 0.9 },
     { url: `${BASE}/download`, lastModified: new Date(), changeFrequency: 'weekly', priority: 0.9 },
     { url: `${BASE}/docs`, lastModified: new Date(), changeFrequency: 'weekly', priority: 0.8 },
+    {
+      url: `${BASE}/use-cases/agentic-pair-programming`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.8,
+    },
     { url: `${BASE}/about`, lastModified: new Date(), changeFrequency: 'monthly', priority: 0.7 },
     { url: `${BASE}/blog`, lastModified: new Date(), changeFrequency: 'weekly', priority: 0.6 },
     {

apps/web/src/app/use-cases/agentic-pair-programming/page.tsx

@@ -0,0 +1,112 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { ArrowRight, Terminal, Users, Monitor } from 'lucide-react';
+import { Header } from '@/components/header';
+import { Footer } from '@/components/footer';
+
+export const metadata: Metadata = {
+  title: 'Agentic Pair Programming with moshcode | PairUX',
+  description:
+    'Work with a teammate in the same live coding-agent session. Use moshcode for a shared terminal and PairUX to review the screen and app together.',
+  alternates: { canonical: 'https://pairux.com/use-cases/agentic-pair-programming' },
+};
+
+const steps = [
+  {
+    icon: Terminal,
+    title: 'Start with one live session',
+    body: 'Run moshcode on your development machine and open its session at app.moshcode.sh. You and your teammate follow the same agent output and work in the same terminal.',
+  },
+  {
+    icon: Users,
+    title: 'Bring your team into the session',
+    body: 'Create an organization and team in moshcode, add your teammate using their account email, then share the session with that team. Read access lets them watch; writer access lets them send input to the running session.',
+  },
+  {
+    icon: Monitor,
+    title: 'Review the result together in PairUX',
+    body: 'Share your terminal, editor, or app preview with PairUX. Your teammate joins from a browser to see the work in context. Approve remote control when you want them to use your mouse and keyboard too.',
+  },
+];
+
+export default function AgenticPairProgrammingPage() {
+  return (
+    <>
+      <Header />
+      <main>
+        <section className="bg-gray-900 py-24 text-white sm:py-32">
+          <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+            <p className="text-primary-300 font-semibold">Agentic pair programming</p>
+            <h1 className="mt-4 text-4xl font-bold tracking-tight sm:text-6xl">
+              Two people. One agent session.
+            </h1>
+            <p className="mt-6 max-w-3xl text-xl leading-relaxed text-gray-300">
+              Pair programming still needs shared context when an AI agent writes the code. Bring a
+              teammate into your live moshcode session, then use PairUX to review what the agent
+              builds and decide the next step together.
+            </p>
+            <div className="mt-8 flex flex-wrap gap-4">
+              <a
+                href="https://app.moshcode.sh/"
+                className="bg-primary-600 hover:bg-primary-700 inline-flex items-center gap-2 rounded-lg px-6 py-3 font-semibold"
+              >
+                Open moshcode <ArrowRight className="h-5 w-5" aria-hidden="true" />
+              </a>
+              <Link
+                href="/download"
+                className="rounded-lg border border-gray-600 px-6 py-3 font-semibold hover:bg-gray-800"
+              >
+                Get PairUX
+              </Link>
+            </div>
+          </div>
+        </section>
+        <section className="py-20 sm:py-28">
+          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <h2 className="text-3xl font-bold text-gray-900">From watching to working together</h2>
+            <div className="mt-12 grid gap-8 lg:grid-cols-3">
+              {steps.map((step, index) => (
+                <article key={step.title} className="rounded-2xl border border-gray-200 p-8">
+                  <step.icon className="text-primary-600 h-8 w-8" aria-hidden="true" />
+                  <h3 className="mt-6 text-xl font-semibold text-gray-900">
+                    {index + 1}. {step.title}
+                  </h3>
+                  <p className="mt-4 leading-relaxed text-gray-600">{step.body}</p>
+                </article>
+              ))}
+            </div>
+            <p className="mt-8 max-w-3xl text-gray-600">
+              moshcode team permissions govern access to the terminal session. PairUX remote control
+              is a separate choice that the screen-sharing host approves. Use either or both,
+              depending on how you want to collaborate.
+            </p>
+          </div>
+        </section>
+        <section className="bg-gray-50 py-20">
+          <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+            <h2 className="text-3xl font-bold text-gray-900">
+              A practical way to onboard a contractor
+            </h2>
+            <p className="mt-6 text-lg leading-relaxed text-gray-600">
+              Add a contractor to your team and let them watch your first session with read access.
+              Walk through the task, the agent’s output, and the running app. When they are ready to
+              participate, grant writer access so they can work with you in that same session.
+            </p>
+            <p className="mt-4 text-lg leading-relaxed text-gray-600">
+              You can also use this workflow to investigate a failing test, compare an agent’s
+              implementation with the intended behavior, or review a change before merging it.
+              Everyone sees the work as it happens.
+            </p>
+            <Link
+              href="/download"
+              className="text-primary-600 hover:text-primary-700 mt-8 inline-flex items-center gap-2 font-semibold"
+            >
+              Start pairing with PairUX <ArrowRight className="h-5 w-5" aria-hidden="true" />
+            </Link>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  );
+}