# Pane Documentation

import Link from "next/link";
import { Rocket, BookOpen, Monitor, Terminal, MessageSquare } from "lucide-react";

export const green = "#22c55e";

export const section = {
  marginTop: "4rem",
};

export const sectionTitle = {
  fontSize: "1.25rem",
  fontWeight: 600,
  margin: "0 0 4px 0",
  color: "#fafafa",
};

export const sectionDesc = {
  fontSize: "0.875rem",
  color: "#9ca3af",
  margin: "0 0 16px 0",
  lineHeight: 1.6,
};

export const cardGrid = {
  display: "grid",
  gap: "12px",
  marginTop: "16px",
};

export const card = {
  display: "flex",
  flexDirection: "column",
  gap: "8px",
  padding: "24px",
  borderRadius: "12px",
  border: "1px solid #27272a",
  textDecoration: "none",
  color: "inherit",
  transition: "border-color 0.15s",
};

export const cardTitle = {
  fontSize: "1.125rem",
  fontWeight: 600,
  margin: 0,
};

export const cardDesc = {
  fontSize: "1rem",
  color: "#9ca3af",
  margin: 0,
  lineHeight: 1.5,
};

export const linkList = {
  display: "flex",
  flexDirection: "column",
  gap: "2px",
  marginTop: "12px",
};

export const link = {
  color: "#9ca3af",
  textDecoration: "none",
  fontSize: "0.875rem",
  padding: "4px 0",
  transition: "color 0.15s",
};

<style>{`
  .docs-card-grid { grid-template-columns: 1fr; }
  @media (min-width: 640px) {
    .docs-card-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .docs-link:hover { color: #fafafa !important; }
`}</style>

<div style={{ margin: "3rem 0" }}>
  <ScreenshotTabs />
</div>

<p style={{ padding: "1rem 0 2rem", fontSize: "1.1rem", lineHeight: 1.7, color: "#9ca3af", margin: 0 }}>Pane is a keyboard-first desktop app for running AI coding agents in parallel. Each agent gets its own git worktree — isolated branch, isolated directory, no conflicts.</p>

## Get started

<div className="docs-card-grid" style={cardGrid}>
  <Link href="/docs/download" style={card}>
    <Rocket size={28} color={green} strokeWidth={1.75} />
    <p style={cardTitle}>Download</p>
    <p style={cardDesc}>Get Pane running on your machine.</p>
  </Link>
  <Link href="/docs/getting-started" style={card}>
    <Rocket size={28} color={green} strokeWidth={1.75} />
    <p style={cardTitle}>Getting Started</p>
    <p style={cardDesc}>Create your first pane.</p>
  </Link>
  <Link href="/docs/quick-starts/claude-code" style={card}>
    <BookOpen size={28} color={green} strokeWidth={1.75} />
    <p style={cardTitle}>Quick Starts</p>
    <p style={cardDesc}>Claude Code, Codex, Cursor Agent, and more.</p>
  </Link>
  <Link href="/docs/remote-daemon" style={card}>
    <Monitor size={28} color={green} strokeWidth={1.75} />
    <p style={cardTitle}>Remote Pane</p>
    <p style={cardDesc}>Set up a host machine, then connect from desktop or phone.</p>
  </Link>
  <Link href="/docs/runpane-cli" style={card}>
    <Terminal size={28} color={green} strokeWidth={1.75} />
    <p style={cardTitle}>runpane CLI</p>
    <p style={cardDesc}>Install Pane and let agents create panes from the terminal.</p>
  </Link>
  <Link href="/docs/pane-chat" style={card}>
    <MessageSquare size={28} color={green} strokeWidth={1.75} />
    <p style={cardTitle}>Pane Chat</p>
    <p style={cardDesc}>Talk to a Claude, Codex or Cursor agent that runs your other agents: it plans, starts panes, watches them, and tells you when PRs are ready.</p>
  </Link>
</div>

<div style={section}>

## Build with RunPane

<div style={linkList}>
  <Link href="/docs/api" className="docs-link" style={link}>RunPane API docs</Link>
  <Link href="/docs/auth" className="docs-link" style={link}>RunPane API auth</Link>
  <Link href="/docs/mcp" className="docs-link" style={link}>RunPane MCP daemon and MCP servers</Link>
  <a href="https://runpane.com/openapi.json" className="docs-link" style={link}>RunPane OpenAPI</a>
</div>

</div>

<div style={section}>

## Talk to us

Join the Pane community and get support from the team.

<div style={linkList}>
  <a href="https://discord.gg/BdMyubeAZn" className="docs-link" style={link}>Discord Community</a>
  <a href="https://github.com/greenfield-inc/Pane/issues" className="docs-link" style={link}>GitHub Issues</a>
  <a href="mailto:hello@dcouple.ai" className="docs-link" style={link}>{"Email the founders — hello@dcouple.ai"}</a>
</div>

</div>

<div style={section}>

## Learn more

Pane is packed with features:

<div style={linkList}>
  <Link href="/docs/panes-and-worktrees" className="docs-link" style={link}>Panes & Worktrees</Link>
  <Link href="/docs/sessions" className="docs-link" style={link}>Named Sessions</Link>
  <Link href="/docs/runpane-cli" className="docs-link" style={link}>runpane CLI</Link>
  <Link href="/docs/pane-chat" className="docs-link" style={link}>Pane Chat</Link>
  <Link href="/docs/panels" className="docs-link" style={link}>Tabs</Link>
  <Link href="/docs/usage" className="docs-link" style={link}>Usage & Limits</Link>
  <Link href="/docs/git" className="docs-link" style={link}>Git Workflow</Link>
  <Link href="/docs/keyboard-shortcuts" className="docs-link" style={link}>Keyboard Shortcuts</Link>
  <Link href="/docs/remote-pane-ssh" className="docs-link" style={link}>Remote Pane over SSH</Link>
  <Link href="/docs/configuration" className="docs-link" style={link}>Configuration</Link>
</div>

</div>