clawport-ui 0.1.0

package/components/docs/DocSection.tsx

@@ -0,0 +1,346 @@
+import type { ReactNode, CSSProperties } from "react";
+
+/* ─── Headings ─────────────────────────────────────────────────── */
+
+export function Heading({ children }: { children: ReactNode }) {
+  return (
+    <h2
+      style={{
+        fontSize: "var(--text-title2)",
+        fontWeight: "var(--weight-bold)",
+        color: "var(--text-primary)",
+        lineHeight: "var(--leading-snug)",
+        marginTop: "var(--space-10)",
+        marginBottom: "var(--space-4)",
+      }}
+    >
+      {children}
+    </h2>
+  );
+}
+
+export function SubHeading({ children }: { children: ReactNode }) {
+  return (
+    <h3
+      style={{
+        fontSize: "var(--text-body)",
+        fontWeight: "var(--weight-semibold)",
+        color: "var(--text-primary)",
+        lineHeight: "var(--leading-snug)",
+        marginTop: "var(--space-8)",
+        marginBottom: "var(--space-3)",
+      }}
+    >
+      {children}
+    </h3>
+  );
+}
+
+/* ─── Text ─────────────────────────────────────────────────────── */
+
+export function Paragraph({ children }: { children: ReactNode }) {
+  return (
+    <p
+      style={{
+        fontSize: "var(--text-subheadline)",
+        lineHeight: "var(--leading-relaxed)",
+        color: "var(--text-secondary)",
+        marginBottom: "var(--space-4)",
+      }}
+    >
+      {children}
+    </p>
+  );
+}
+
+/* ─── Code ─────────────────────────────────────────────────────── */
+
+export function CodeBlock({
+  children,
+  title,
+}: {
+  children: string;
+  title?: string;
+}) {
+  return (
+    <div
+      style={{
+        background: "var(--code-bg)",
+        border: "1px solid var(--code-border)",
+        borderRadius: "var(--radius-md)",
+        marginBottom: "var(--space-4)",
+        overflow: "hidden",
+      }}
+    >
+      {title && (
+        <div
+          style={{
+            padding: "var(--space-2) var(--space-4)",
+            borderBottom: "1px solid var(--code-border)",
+            fontSize: "var(--text-caption1)",
+            fontWeight: "var(--weight-semibold)",
+            color: "var(--text-tertiary)",
+            fontFamily: "var(--font-mono)",
+          }}
+        >
+          {title}
+        </div>
+      )}
+      <pre
+        style={{
+          padding: "var(--space-4)",
+          margin: 0,
+          fontSize: "var(--text-footnote)",
+          lineHeight: "var(--leading-relaxed)",
+          color: "var(--code-text)",
+          fontFamily: "var(--font-mono)",
+          whiteSpace: "pre-wrap",
+          overflowX: "auto",
+        }}
+      >
+        {children}
+      </pre>
+    </div>
+  );
+}
+
+export function InlineCode({ children }: { children: ReactNode }) {
+  return (
+    <code
+      style={{
+        background: "var(--code-bg)",
+        border: "1px solid var(--code-border)",
+        borderRadius: "4px",
+        padding: "1px 6px",
+        fontSize: "0.9em",
+        fontFamily: "var(--font-mono)",
+        color: "var(--code-text)",
+      }}
+    >
+      {children}
+    </code>
+  );
+}
+
+/* ─── Cards & Panels ───────────────────────────────────────────── */
+
+export function InfoCard({
+  title,
+  children,
+  style,
+}: {
+  title?: string;
+  children: ReactNode;
+  style?: CSSProperties;
+}) {
+  return (
+    <div
+      style={{
+        background: "var(--material-regular)",
+        border: "1px solid var(--separator)",
+        borderRadius: "var(--radius-md)",
+        padding: "var(--space-4) var(--space-5)",
+        marginBottom: "var(--space-4)",
+        ...style,
+      }}
+    >
+      {title && (
+        <div
+          style={{
+            fontSize: "var(--text-subheadline)",
+            fontWeight: "var(--weight-semibold)",
+            color: "var(--text-primary)",
+            marginBottom: "var(--space-3)",
+          }}
+        >
+          {title}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+/* ─── Tables ───────────────────────────────────────────────────── */
+
+export function Table({
+  headers,
+  rows,
+}: {
+  headers: string[];
+  rows: (string | ReactNode)[][];
+}) {
+  return (
+    <div
+      style={{
+        overflowX: "auto",
+        marginBottom: "var(--space-4)",
+        border: "1px solid var(--separator)",
+        borderRadius: "var(--radius-md)",
+      }}
+    >
+      <table
+        style={{
+          width: "100%",
+          borderCollapse: "collapse",
+          fontSize: "var(--text-footnote)",
+          lineHeight: "var(--leading-normal)",
+        }}
+      >
+        <thead>
+          <tr>
+            {headers.map((h, i) => (
+              <th
+                key={i}
+                style={{
+                  textAlign: "left",
+                  padding: "var(--space-2) var(--space-3)",
+                  fontWeight: "var(--weight-semibold)",
+                  color: "var(--text-primary)",
+                  background: "var(--material-thin)",
+                  borderBottom: "1px solid var(--separator)",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, ri) => (
+            <tr key={ri}>
+              {row.map((cell, ci) => (
+                <td
+                  key={ci}
+                  style={{
+                    padding: "var(--space-2) var(--space-3)",
+                    color: "var(--text-secondary)",
+                    borderBottom:
+                      ri < rows.length - 1
+                        ? "1px solid var(--separator)"
+                        : undefined,
+                    verticalAlign: "top",
+                  }}
+                >
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/* ─── Lists ────────────────────────────────────────────────────── */
+
+export function BulletList({ items }: { items: ReactNode[] }) {
+  return (
+    <ul
+      style={{
+        marginBottom: "var(--space-4)",
+        paddingLeft: "var(--space-5)",
+      }}
+    >
+      {items.map((item, i) => (
+        <li
+          key={i}
+          style={{
+            fontSize: "var(--text-subheadline)",
+            lineHeight: "var(--leading-relaxed)",
+            color: "var(--text-secondary)",
+            marginBottom: "var(--space-1)",
+          }}
+        >
+          {item}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function NumberedList({ items }: { items: ReactNode[] }) {
+  return (
+    <ol
+      style={{
+        marginBottom: "var(--space-4)",
+        paddingLeft: "var(--space-5)",
+      }}
+    >
+      {items.map((item, i) => (
+        <li
+          key={i}
+          style={{
+            fontSize: "var(--text-subheadline)",
+            lineHeight: "var(--leading-relaxed)",
+            color: "var(--text-secondary)",
+            marginBottom: "var(--space-1)",
+          }}
+        >
+          {item}
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+/* ─── Callout ──────────────────────────────────────────────────── */
+
+const CALLOUT_COLORS: Record<string, string> = {
+  tip: "var(--system-green)",
+  warning: "var(--system-orange)",
+  note: "var(--system-blue)",
+  error: "var(--system-red)",
+};
+
+const CALLOUT_LABELS: Record<string, string> = {
+  tip: "Tip",
+  warning: "Warning",
+  note: "Note",
+  error: "Error",
+};
+
+export function Callout({
+  type = "note",
+  children,
+}: {
+  type?: "tip" | "warning" | "note" | "error";
+  children: ReactNode;
+}) {
+  const color = CALLOUT_COLORS[type] ?? "var(--system-blue)";
+  return (
+    <div
+      style={{
+        borderLeft: `3px solid ${color}`,
+        background: "var(--material-thin)",
+        borderRadius: "0 var(--radius-sm) var(--radius-sm) 0",
+        padding: "var(--space-3) var(--space-4)",
+        marginBottom: "var(--space-4)",
+      }}
+    >
+      <div
+        style={{
+          fontSize: "var(--text-caption1)",
+          fontWeight: "var(--weight-semibold)",
+          color,
+          textTransform: "uppercase",
+          letterSpacing: "0.04em",
+          marginBottom: "var(--space-1)",
+        }}
+      >
+        {CALLOUT_LABELS[type] ?? "Note"}
+      </div>
+      <div
+        style={{
+          fontSize: "var(--text-footnote)",
+          lineHeight: "var(--leading-relaxed)",
+          color: "var(--text-secondary)",
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/components/docs/GettingStartedSection.tsx

@@ -0,0 +1,169 @@
+import {
+  Heading,
+  SubHeading,
+  Paragraph,
+  CodeBlock,
+  InlineCode,
+  Table,
+  BulletList,
+  NumberedList,
+  Callout,
+} from "./DocSection";
+
+export function GettingStartedSection() {
+  return (
+    <>
+      <Heading>Getting Started</Heading>
+      <Paragraph>
+        This guide walks you through getting ClawPort running against your own
+        OpenClaw instance. ClawPort is a Next.js 16 dashboard for managing,
+        monitoring, and talking directly to your OpenClaw AI agents.
+      </Paragraph>
+
+      <SubHeading>Prerequisites</SubHeading>
+      <BulletList
+        items={[
+          <>
+            <strong style={{ color: "var(--text-primary)" }}>Node.js 22+</strong>{" "}
+            -- verify with <InlineCode>node -v</InlineCode>
+          </>,
+          <>
+            <strong style={{ color: "var(--text-primary)" }}>OpenClaw</strong>{" "}
+            -- installed and working: <InlineCode>openclaw --version</InlineCode>
+          </>,
+          <>
+            <strong style={{ color: "var(--text-primary)" }}>
+              OpenClaw gateway running
+            </strong>{" "}
+            -- ClawPort talks to the gateway at{" "}
+            <InlineCode>localhost:18789</InlineCode>
+          </>,
+        ]}
+      />
+
+      <SubHeading>Quick Start</SubHeading>
+      <CodeBlock title="terminal">
+        {`# Clone the repo
+git clone https://github.com/openclaw/clawport.git
+cd clawport
+
+# Install dependencies
+npm install
+
+# Auto-detect your OpenClaw config and write .env.local
+npm run setup
+
+# Start the dev server
+npm run dev`}
+      </CodeBlock>
+      <Paragraph>
+        Open <InlineCode>http://localhost:3000</InlineCode>. On first launch
+        you'll see the onboarding wizard which walks you through naming your
+        portal, choosing a theme, and personalizing agent avatars.
+      </Paragraph>
+
+      <SubHeading>Environment Variables</SubHeading>
+      <Paragraph>
+        The fastest way to configure is the auto-setup script:{" "}
+        <InlineCode>npm run setup</InlineCode>. It auto-detects your{" "}
+        <InlineCode>WORKSPACE_PATH</InlineCode>,{" "}
+        <InlineCode>OPENCLAW_BIN</InlineCode>, and gateway token from your local
+        OpenClaw installation.
+      </Paragraph>
+      <Paragraph>
+        To configure manually, copy the template and edit:
+      </Paragraph>
+      <CodeBlock>{`cp .env.example .env.local`}</CodeBlock>
+
+      <Table
+        headers={["Variable", "Required", "Description"]}
+        rows={[
+          [
+            <InlineCode key="ws">WORKSPACE_PATH</InlineCode>,
+            "Yes",
+            "Path to your OpenClaw workspace directory (default: ~/.openclaw/workspace)",
+          ],
+          [
+            <InlineCode key="bin">OPENCLAW_BIN</InlineCode>,
+            "Yes",
+            "Absolute path to the openclaw CLI binary",
+          ],
+          [
+            <InlineCode key="tok">OPENCLAW_GATEWAY_TOKEN</InlineCode>,
+            "Yes",
+            "Token that authenticates all API calls to the gateway",
+          ],
+          [
+            <InlineCode key="el">ELEVENLABS_API_KEY</InlineCode>,
+            "No",
+            "ElevenLabs API key for voice/TTS indicators on agent profiles",
+          ],
+        ]}
+      />
+
+      <Callout type="tip">
+        No separate AI API keys are needed. All AI calls (chat, vision, TTS,
+        transcription) route through the OpenClaw gateway. One subscription, one
+        token.
+      </Callout>
+
+      <SubHeading>Finding Your Values</SubHeading>
+      <NumberedList
+        items={[
+          <>
+            <strong style={{ color: "var(--text-primary)" }}>WORKSPACE_PATH</strong>:{" "}
+            Run <InlineCode>ls ~/.openclaw/workspace</InlineCode> to verify.
+            You should see files like <InlineCode>SOUL.md</InlineCode>, an{" "}
+            <InlineCode>agents/</InlineCode> directory, and a{" "}
+            <InlineCode>memory/</InlineCode> directory.
+          </>,
+          <>
+            <strong style={{ color: "var(--text-primary)" }}>OPENCLAW_BIN</strong>:{" "}
+            Run <InlineCode>which openclaw</InlineCode> and use the full path.
+          </>,
+          <>
+            <strong style={{ color: "var(--text-primary)" }}>
+              OPENCLAW_GATEWAY_TOKEN
+            </strong>
+            : Run <InlineCode>openclaw gateway status</InlineCode> to view your
+            gateway configuration including the token.
+          </>,
+        ]}
+      />
+
+      <SubHeading>Start the Gateway</SubHeading>
+      <Paragraph>
+        ClawPort expects the OpenClaw gateway running at{" "}
+        <InlineCode>localhost:18789</InlineCode>. Start it in a separate terminal:
+      </Paragraph>
+      <CodeBlock>{`openclaw gateway run`}</CodeBlock>
+
+      <SubHeading>First-Run Onboarding</SubHeading>
+      <Paragraph>
+        On your first visit, ClawPort launches the onboarding wizard (5 steps):
+      </Paragraph>
+      <NumberedList
+        items={[
+          "Naming your portal -- give your command centre a custom name and subtitle",
+          "Choosing a theme -- pick from Dark, Glass, Color, Light, or System",
+          "Setting an accent color -- personalize the UI highlight color",
+          "Voice chat -- optional microphone permission test",
+          "Overview -- feature summary of all pages",
+        ]}
+      />
+      <Paragraph>
+        All of these can be changed later in the Settings page.
+      </Paragraph>
+
+      <SubHeading>Production Build</SubHeading>
+      <CodeBlock title="terminal">
+        {`npx next build
+npm start`}
+      </CodeBlock>
+      <Paragraph>
+        The production server runs on port 3000 by default. The gateway still
+        needs to be running.
+      </Paragraph>
+    </>
+  );
+}