docs: restructure and rewrite for current AskUI product

app/(home)/page.tsx

@@ -1,16 +1,230 @@
 import Link from 'next/link';
 
+const HOW_IT_WORKS = [
+  {
+    step: '1',
+    title: 'Describe your test',
+    body: 'Write test steps in plain Markdown. Tell the agent what to do: "sign in with the QA credentials", "check the green badge appears", "click Submit".',
+  },
+  {
+    step: '2',
+    title: 'The agent acts on screen',
+    body: 'AskUI takes screenshots and uses a vision model to understand the UI. It clicks, types, and navigates like a real user, with no injected scripts.',
+  },
+  {
+    step: '3',
+    title: 'Read the report',
+    body: 'Every step gets a status and a screenshot. PASSED means it actually passed. The agent never invents a workaround to reach "done".',
+  },
+];
+
+const COMPONENTS = [
+  {
+    name: 'Desktop App',
+    role: 'Author + run',
+    description:
+      'The visual environment for building projects, writing prompts, and watching test runs execute on your screen.',
+    href: '/docs/get-started/install-desktop',
+    cta: 'Install Desktop',
+  },
+  {
+    name: 'CLI',
+    role: 'Automate + scale',
+    description:
+      'Run projects headless, in CI, on a schedule, or across a fleet of machines. Ships with the Desktop App installer.',
+    href: '/docs/get-started/install-cli',
+    cta: 'Install CLI',
+  },
+  {
+    name: 'AgentOS',
+    role: 'Runtime layer',
+    description:
+      'The service that gives the agent direct OS control: keyboard, mouse, and screen. Runs locally or as a background service.',
+    href: '/docs/agentos',
+    cta: 'Explore AgentOS',
+  },
+];
+
+const WHY_ASKUI = [
+  {
+    title: 'No selectors, no DOM',
+    description:
+      'The agent reads the screen the way a person does. Tests work across web, desktop, and embedded UIs where the DOM is unavailable or too brittle to rely on.',
+  },
+  {
+    title: 'Any model, no lock-in',
+    description:
+      'Route agents to Claude, Gemini, OpenAI, or your own model provider. Switch models without rewriting tests. Cached steps on stable workflows cost nothing.',
+  },
+  {
+    title: 'Any device, any OS',
+    description:
+      'Windows, macOS, Linux, Android, iOS, and embedded screens. Companion Mode covers devices where software installation is not an option.',
+  },
+  {
+    title: 'Audit-ready results',
+    description:
+      'Every run produces a step-by-step report with a screenshot and status per step. PASSED means the step actually passed — the agent never improvises its way to done.',
+  },
+];
+
+const WHERE_TO_START = [
+  {
+    goal: 'New to AskUI',
+    action: 'Follow the Quickstart',
+    href: '/docs/quickstart',
+    detail: 'Account, install, and first run in under 10 minutes.',
+  },
+  {
+    goal: 'Moving to CI',
+    action: 'Install the CLI',
+    href: '/docs/get-started/install-cli',
+    detail: 'Run your existing project headless with askui run.',
+  },
+  {
+    goal: 'Remote machines',
+    action: 'Set up AgentOS',
+    href: '/docs/agentos',
+    detail: 'Install AgentOS as a service on the machine under test.',
+  },
+];
+
 export default function HomePage() {
   return (
-    <div className="flex flex-col justify-center text-center flex-1">
-      <h1 className="text-2xl font-bold mb-4">Hello World</h1>
-      <p>
-        You can open{' '}
-        <Link href="/docs" className="font-medium underline">
-          /docs
-        </Link>{' '}
-        and see the documentation.
-      </p>
+    <div className="flex flex-col">
+
+      {/* Hero */}
+      <section className="relative overflow-hidden px-6 pt-24 pb-20">
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-x-0 top-0 h-[440px]"
+          style={{
+            background:
+              'radial-gradient(55% 100% at 50% 0%, color-mix(in oklab, var(--color-fd-primary) 13%, transparent), transparent 72%)',
+          }}
+        />
+        <div className="relative flex flex-col items-center text-center">
+          <p className="text-xs font-semibold tracking-widest uppercase text-fd-primary mb-5">
+            AskUI Documentation
+          </p>
+          <h1 className="text-5xl sm:text-6xl font-bold tracking-tight leading-[1.05] mb-6 text-fd-foreground text-balance max-w-3xl">
+            One agent for every interface
+          </h1>
+          <p className="text-lg sm:text-xl text-fd-muted-foreground mb-9 max-w-2xl text-balance leading-relaxed">
+            AskUI drives web, desktop, mobile, and embedded screens from plain-language steps
+            &mdash; no selectors, no recording. Every run comes back as a screenshot-backed report.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-3">
+            <Link
+              href="/docs/quickstart"
+              className="inline-flex items-center justify-center rounded-md bg-fd-primary text-fd-primary-foreground px-6 py-2.5 text-sm font-medium hover:opacity-90 transition-opacity"
+            >
+              Quickstart (10 min)
+            </Link>
+            <Link
+              href="/docs"
+              className="inline-flex items-center justify-center rounded-md border border-fd-border px-6 py-2.5 text-sm font-medium hover:bg-fd-accent transition-colors"
+            >
+              Browse docs
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* How it works */}
+      <section className="border-t border-fd-border px-6 py-16">
+        <div className="max-w-4xl mx-auto">
+          <p className="text-xs font-semibold tracking-widest uppercase text-fd-muted-foreground mb-10 text-center">
+            How it works
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
+            {HOW_IT_WORKS.map(({ step, title, body }) => (
+              <div key={step} className="flex flex-col gap-3">
+                <div className="w-7 h-7 rounded-full border border-fd-border flex items-center justify-center text-xs font-mono font-medium text-fd-muted-foreground shrink-0">
+                  {step}
+                </div>
+                <h3 className="font-semibold text-fd-foreground">{title}</h3>
+                <p className="text-sm text-fd-muted-foreground leading-relaxed">{body}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Components */}
+      <section className="border-t border-fd-border px-6 py-16 bg-fd-card/40">
+        <div className="max-w-4xl mx-auto">
+          <p className="text-xs font-semibold tracking-widest uppercase text-fd-muted-foreground mb-10 text-center">
+            The three components
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {COMPONENTS.map(({ name, role, description, href, cta }) => (
+              <div
+                key={name}
+                className="flex flex-col gap-3 rounded-lg border border-fd-border bg-fd-card p-6"
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <h3 className="font-semibold text-fd-foreground">{name}</h3>
+                  <span className="text-xs text-fd-muted-foreground border border-fd-border rounded px-2 py-0.5 shrink-0">
+                    {role}
+                  </span>
+                </div>
+                <p className="text-sm text-fd-muted-foreground leading-relaxed flex-1">
+                  {description}
+                </p>
+                <Link
+                  href={href}
+                  className="text-sm font-medium text-fd-primary hover:underline mt-1"
+                >
+                  {cta} &rarr;
+                </Link>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Why AskUI */}
+      <section className="border-t border-fd-border px-6 py-16">
+        <div className="max-w-4xl mx-auto">
+          <p className="text-xs font-semibold tracking-widest uppercase text-fd-muted-foreground mb-10 text-center">
+            Why AskUI
+          </p>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-16 gap-y-8">
+            {WHY_ASKUI.map(({ title, description }) => (
+              <div key={title} className="flex flex-col gap-2">
+                <h3 className="font-semibold text-fd-foreground">{title}</h3>
+                <p className="text-sm text-fd-muted-foreground leading-relaxed">{description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Where to start */}
+      <section className="border-t border-fd-border px-6 py-16 bg-fd-card/40">
+        <div className="max-w-4xl mx-auto">
+          <p className="text-xs font-semibold tracking-widest uppercase text-fd-muted-foreground mb-10 text-center">
+            Where to start
+          </p>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            {WHERE_TO_START.map(({ goal, action, href, detail }) => (
+              <Link
+                key={goal}
+                href={href}
+                className="flex flex-col gap-2 rounded-lg border border-fd-border p-5 hover:bg-fd-accent transition-colors"
+              >
+                <p className="text-xs font-semibold text-fd-muted-foreground uppercase tracking-wide">
+                  {goal}
+                </p>
+                <p className="font-semibold text-fd-foreground text-sm">{action}</p>
+                <p className="text-xs text-fd-muted-foreground leading-relaxed">{detail}</p>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </section>
+
     </div>
   );
 }

content/docs/account-billing/billing.mdx

@@ -40,8 +40,6 @@ Plans differ by price and included usage:
 - **Price** — an amount and currency, billed on a recurring interval.
 - **Included usage** — the allowance per period before overage applies.
 
-<Callout title="Note">
-This page describes the billing model from the AskUI Hub. Specific plan names,
-prices, and the enterprise/on-prem options are filled in during the Hub content
-pass — for enterprise terms see [AgentOS → Enterprise](/docs/agentos/reference/enterprise).
-</Callout>
+For specific plan names and pricing, visit [askui.com](https://www.askui.com)
+or contact [sales@askui.com](mailto:sales@askui.com). For enterprise and
+on-premise terms see [AgentOS — Enterprise](/docs/agentos/reference/enterprise).

content/docs/account-billing/members.mdx

@@ -0,0 +1,77 @@
+---
+title: Members
+description: Invite teammates to your workspace and manage their roles.
+---
+
+Each AskUI workspace can have multiple members. Members share access to the
+workspace's projects, access tokens, and usage data. You manage membership
+from **Settings** in the AskUI Hub.
+
+## Roles
+
+Every member is assigned one of three roles when invited. Roles cannot be
+changed after a member joins — to change a role, remove the member and
+re-invite them with the new role.
+
+| Role | What they can do |
+|------|-----------------|
+| **Owner** | Full control: manage subscription, billing, and other owners. Can delete the workspace. |
+| **Admin** | Add and remove non-owner members, manage workspace resources and settings. Cannot manage billing or delete the workspace. |
+| **Member** | View workspace resources and use the platform. Cannot add or remove members or change settings. |
+
+## Invite a member
+
+<Steps>
+<Step>
+Go to **Settings** in the left sidebar of the AskUI Hub.
+</Step>
+<Step>
+Open the **Members** section.
+</Step>
+<Step>
+Click **Invite Workspace Member**.
+</Step>
+<Step>
+Enter the invitee's email address, select their role, and send the invitation.
+</Step>
+</Steps>
+
+The invitee receives an email with an invitation link. Invitations expire after
+**7 days** if not accepted.
+
+## Accept an invitation
+
+When you receive a workspace invitation:
+
+<Steps>
+<Step>
+Click the link in the invitation email.
+</Step>
+<Step>
+You are taken to the **Invitations** page in the Hub, which shows all your
+pending invitations with their workspace, assigned role, and expiry date.
+</Step>
+<Step>
+Click **Accept** to join the workspace, or **Decline** to reject it.
+</Step>
+</Steps>
+
+## Remove a member
+
+<Steps>
+<Step>
+Go to **Settings** in the Hub and open the **Members** section.
+</Step>
+<Step>
+Find the member in the list and click the remove (trash) icon next to their
+name.
+</Step>
+<Step>
+Confirm the removal when prompted.
+</Step>
+</Steps>
+
+<Callout type="warn" title="Role changes require re-invitation">
+Once a member joins, their role is fixed. If you need to change it, remove
+them and invite them again with the correct role.
+</Callout>

content/docs/account-billing/meta.json

@@ -1 +1 @@
-{ "title": "Account & Billing", "pages": ["workspaces", "billing"] }
+{ "title": "Account & Billing", "pages": ["workspaces", "billing", "usage-dashboard", "members"] }

content/docs/account-billing/usage-dashboard.mdx

@@ -0,0 +1,47 @@
+---
+title: Usage dashboard
+description: How to read the AskUI Hub usage dashboard and track execution metrics.
+---
+
+The usage dashboard in the AskUI Hub gives you a live view of how your
+workspace is consuming its plan allowance. Find it under **Billing** in the
+Hub.
+
+## Key metrics
+
+At the top of the dashboard you will see three summary cards:
+
+| Metric | What it shows |
+|--------|--------------|
+| **Total Events** | Total executions in the selected date range |
+| **Unique Users** | Number of distinct users or access tokens that triggered runs |
+| **Avg. Events per Day** | Daily average over the selected period |
+
+Below the summary cards you will also see your subscription limit and the
+current renewal date.
+
+## Filtering by date range
+
+Use the date picker in the top-right corner of the dashboard to select a
+custom date range. This lets you compare usage across billing periods or zoom
+in on a particular sprint or release cycle.
+
+## Usage over time chart
+
+The chart shows execution volume per user per day. Each user (or CI access
+token) is represented by a distinct color. Use the checkboxes below the chart
+to show or hide individual users — select **All** or **None** to toggle
+quickly.
+
+This view is useful for:
+
+- Identifying peak activity periods
+- Seeing which users or CI tokens are consuming the most usage
+- Spotting unexpected spikes that might indicate a misconfigured pipeline
+
+## Usage by access token
+
+Runs triggered from CI via an access token appear in the chart attributed to
+that token. If you have multiple CI pipelines, give each pipeline its own
+access token (see [Workspaces and access tokens](/docs/account-billing/workspaces))
+so you can distinguish their usage in the dashboard.

content/docs/account-billing/workspaces.mdx

@@ -46,8 +46,3 @@ see [Running from the CLI](/docs/using-askui-desktop/cli).
 Treat access tokens like passwords. Store them in your CI secret store, never in
 a Project's files. Rotate by creating a new token and deleting the old one.
 </Callout>
-
-<Callout title="Note">
-This page summarizes workspace concepts from the AskUI Hub. Exact screens and
-privilege names are filled in during the Hub content pass.
-</Callout>