From 35b64e8a4915b7e31de1616ef2ffbddb63f93b79 Mon Sep 17 00:00:00 2001 From: Richard Abrich Date: Thu, 29 Jan 2026 00:48:49 -0500 Subject: [PATCH] feat(install): add clawd.bot-inspired one-liner quickstart - Add prominent curl one-liner at top of install section - `curl -fsSL https://openadapt.ai/install.sh | bash` - Inspired by clawd.bot/moltbot approach - Shows Windows PowerShell variant when on Windows - Green highlight border for visual prominence - Update quick start commands to be more representative: - `openadapt record` instead of `openadapt capture start` - `openadapt view` to review recordings - `openadapt replay` for AI-assisted replay - `openadapt doctor` for system checks - Add icons for visual clarity - Add "or install manually" divider to separate one-liner from step-by-step instructions Note: The one-liner URLs (openadapt.ai/install.sh) are aspirational - the actual install scripts need to be created and deployed. See /openadapt-ml/docs/INSTALLER_PROPOSAL.md for implementation details. Co-Authored-By: Claude Opus 4.5 --- components/InstallSection.js | 70 ++++++++++++--- components/InstallSection.module.css | 127 +++++++++++++++++++++++++-- 2 files changed, 178 insertions(+), 19 deletions(-) diff --git a/components/InstallSection.js b/components/InstallSection.js index a2b42ff..b0d68b8 100644 --- a/components/InstallSection.js +++ b/components/InstallSection.js @@ -1,10 +1,14 @@ import React, { useState, useEffect } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faWindows, faApple, faLinux, faPython } from '@fortawesome/free-brands-svg-icons'; -import { faCopy, faCheck, faTerminal, faDownload } from '@fortawesome/free-solid-svg-icons'; +import { faCopy, faCheck, faTerminal, faDownload, faRocket, faBolt, faEye, faPlay, faGraduationCap } from '@fortawesome/free-solid-svg-icons'; import styles from './InstallSection.module.css'; import { getPyPIDownloadStats, formatDownloadCount } from 'utils/pypiStats'; +// One-liner install command (inspired by clawd.bot) +const ONE_LINER = 'curl -fsSL https://openadapt.ai/install.sh | bash'; +const ONE_LINER_WINDOWS = 'irm https://openadapt.ai/install.ps1 | iex'; + const platforms = { 'macOS': { icon: faApple, @@ -88,16 +92,36 @@ export default function InstallSection() { const currentPlatform = platforms[selectedPlatform]; const allCommands = currentPlatform.commands.join('\n'); + const isWindows = selectedPlatform === 'Windows'; + const oneLiner = isWindows ? ONE_LINER_WINDOWS : ONE_LINER; + return (
- +

Install in 30 Seconds

-

- One command installs everything you need. No Python setup required. -

+ {/* One-Liner Hero Section - inspired by clawd.bot */} +
+

+ Works everywhere. Installs everything. You're welcome. +

+
+
+ # {isWindows ? 'Run in PowerShell' : 'macOS / Linux / WSL'} + {oneLiner} +
+ +
+

+ Installs uv, Python 3.11, and OpenAdapt CLI automatically +

+
+ +
+ or install manually +
{/* PyPI Download Stats */} {pypiStats.total > 0 && ( @@ -168,20 +192,40 @@ export default function InstallSection() {

Quick Start Commands

- openadapt capture start --name my-task - Start recording +
+ +
+
+ openadapt record --name invoice-task + Record a demonstration +
- openadapt capture stop - Stop recording +
+ +
+
+ openadapt view invoice-task + Review and annotate +
- openadapt capture view my-task - View recording +
+ +
+
+ openadapt replay invoice-task + Replay with AI assistance +
- openadapt doctor - Check system +
+ +
+
+ openadapt doctor + Check system setup +
diff --git a/components/InstallSection.module.css b/components/InstallSection.module.css index 05af688..91d5f50 100644 --- a/components/InstallSection.module.css +++ b/components/InstallSection.module.css @@ -38,6 +38,93 @@ font-size: 16px; } +/* One-Liner Hero Section (clawd.bot inspired) */ +.oneLinerSection { + background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(86, 13, 248, 0.15) 100%); + border: 2px solid rgba(34, 197, 94, 0.4); + border-radius: 16px; + padding: 24px; + margin-bottom: 24px; + text-align: center; +} + +.oneLinerTagline { + font-size: 18px; + font-weight: 500; + color: rgba(255, 255, 255, 0.9); + margin-bottom: 16px; + letter-spacing: -0.02em; +} + +.oneLinerContainer { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + flex-wrap: wrap; +} + +.oneLinerCode { + display: flex; + flex-direction: column; + align-items: flex-start; + background: rgba(0, 0, 0, 0.4); + border-radius: 12px; + padding: 16px 20px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.oneLinerComment { + font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; + font-size: 12px; + color: rgba(255, 255, 255, 0.5); + margin-bottom: 4px; +} + +.oneLinerCommand { + font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; + font-size: 15px; + color: #22c55e; + font-weight: 500; +} + +.oneLinerCopyBtn { + padding: 12px 20px !important; + font-size: 14px !important; + background: rgba(34, 197, 94, 0.3) !important; + border-color: rgba(34, 197, 94, 0.5) !important; +} + +.oneLinerCopyBtn:hover { + background: rgba(34, 197, 94, 0.5) !important; +} + +.oneLinerNote { + font-size: 13px; + color: rgba(255, 255, 255, 0.5); + margin-top: 12px; +} + +.dividerOr { + display: flex; + align-items: center; + justify-content: center; + margin: 24px 0; + color: rgba(255, 255, 255, 0.4); + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.dividerOr::before, +.dividerOr::after { + content: ''; + flex: 1; + height: 1px; + background: rgba(255, 255, 255, 0.1); + margin: 0 16px; +} + /* PyPI Download Stats */ .pypiStats { display: flex; @@ -248,21 +335,49 @@ .commandItem { display: flex; - flex-direction: column; - gap: 4px; - padding: 12px; + flex-direction: row; + align-items: flex-start; + gap: 12px; + padding: 14px; background: rgba(0, 0, 0, 0.2); - border-radius: 8px; + border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05); + transition: all 0.2s ease; } -.commandItem code { +.commandItem:hover { + background: rgba(0, 0, 0, 0.3); + border-color: rgba(86, 13, 248, 0.3); +} + +.commandIcon { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + background: rgba(86, 13, 248, 0.2); + border-radius: 8px; + color: #a78bfa; + font-size: 14px; + flex-shrink: 0; +} + +.commandContent { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 0; +} + +.commandContent code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font-size: 12px; color: #22c55e; + word-break: break-all; } -.commandItem span { +.commandContent span { font-size: 11px; color: rgba(255, 255, 255, 0.5); }