extract

# /octo:extract - Design System & Product Reverse-Engineering

**Your first output line MUST be:** `🐙 Octopus Extract`

## 🤖 INSTRUCTIONS FOR CLAUDE

When the user invokes this command (e.g., `/octo:extract <target>` or `/octo:extract <target>`):

### Step 0: PDF Page Selection (if target is PDF)

**CRITICAL: For PDF files > 10 pages, ask user which pages to extract:**

```javascript
// Check if target is a PDF file
if (target.endsWith('.pdf') && isFile(target)) {
  // Use Claude Octopus PDF page selection utility
  const pageCount = await getPdfPageCount(target);

  if (pageCount > 10) {
    console.log(`📄 Large PDF detected: ${pageCount} pages`);
    console.log(`Reading all pages may use ${pageCount * 750} tokens (~${Math.ceil(pageCount/133)} API calls).`);

    const selection = await AskUserQuestion({
      questions: [{
        question: `This PDF has ${pageCount} pages. Which pages would you like to extract?`,
        header: "PDF Pages",
        multiSelect: false,
        options: [
          {label: "First 10 pages", description: "Quick overview (pages 1-10)"},
          {label: "Specific pages", description: "Enter custom page range"},
          {label: "All pages", description: `Full document (~${Math.ceil(pageCount/133)} API calls)`}
        ]
      }]
    });

    let pageParam = "";
    if (selection === "First 10 pages") {
      pageParam = "1-10";
    } else if (selection === "Specific pages") {
      pageParam = await askForInput("Enter page range (e.g., 1-5, 10, 15-20):");
    }
    // else "All pages" - use empty string

    // Store for use in extraction phases
    target = { path: target, pages: pageParam };
    console.log(`✓ Will extract pages: ${pageParam || 'all'}`);
  }
}
```

**Example output:**
```
📄 Large PDF detected: 45 pages
Reading all pages may use 33,750 tokens (~34 API calls).

┌─────────────────────────────────────────────────────────┐
│ This PDF has 45 pages. Which pages would you like to   │
│ extract?                                                 │
│                                                          │
│ ● First 10 pages                                        │
│   Quick overview (pages 1-10)                           │
│                                                          │
│ ○ Specific pages                                        │
│   Enter custom page range                               │
│                                                          │
│ ○ All pages                                             │
│   Full document (~34 API calls)                         │
└─────────────────────────────────────────────────────────┘

✓ Will extract pages: 1-10
```

### Step 1: Validate Input & Check Dependencies

**Parse the command arguments:**
```bash
# Expected format:
# /octo:extract <target> [options]
# target: URL or local directory path
# options: --mode, --scope, --depth, --output, --storybook, --ignore
```

**Check Claude Octopus availability:**
```javascript
// Check if multi-AI providers are available
const codexAvailable = await checkCommandAvailable('codex');
const geminiAvailable = await checkCommandAvailable('gemini');

if (!codexAvailable && !geminiAvailable) {
  console.log("⚠️ Multi-AI providers not detected. Running in single-provider mode.");
  console.log("For best results, run `/octo:setup` to configure Codex and Gemini.");
}
```

### Step 2: Intent Capture (Interactive Questions)

**CRITICAL: Use AskUserQuestion to gather extraction intent:**

```javascript
AskUserQuestion({
  questions: [
    {
      question: "What do you want to extract from this codebase/URL?",
      header: "Extract Mode",
      multiSelect: false,
      options: [
        {label: "Design system only", description: "Tokens, components, Storybook scaffold"},
        {label: "Product architecture only", description: "Architecture, features, PRDs"},
        {label: "Both (Recommended)", description: "Complete design + product documentation"},
        {label: "Auto-detect", description: "Let Claude decide based on what's found"}
      ]
    },
    {
      question: "Who will use these extraction outputs?",
      header: "Audience",
      multiSelect: true,
      options: [
        {label: "Designers", description: "Need design tokens and component inventory"},
        {label: "Frontend Engineers", description: "Need Storybook and component docs"},
        {label: "Product/Leadership", description: "Need architecture maps and PRDs"},
        {label: "AI Agents", description: "Need structured, implementation-ready outputs"}
      ]
    },
    {
      question: "What should be the source of truth?",
      header: "Source Priority",
      multiSelect: false,
      options: [
        {label: "Code files (Recommended)", description: "Extract from codebase directly"},
        {label: "Live UI rendering", description: "Analyze computed styles from browser"},
        {label: "Both - prefer code", description: "Use code when available, infer from UI otherwise"}
      ]
    },
    {
      question: "What extraction depth do you need?",
      header: "Depth",
      multiSelect: false,
      options: [
        {label: "Quick (< 2 min)", description: "Basic token/component scan"},
        {label: "Standard (2-5 min)", description: "Comprehensive analysis with quality gates"},
        {label: "Deep (5-15 min)", description: "Multi-AI consensus, full Storybook, detailed PRDs"}
      ]
    }
  ]
})
```

**WAIT for the user's answers before proceeding.**

**Store answers:**
```json
{
  "mode": "both" | "design" | "product" | "auto",
  "audience": ["designers", "engineers", "product", "agents"],
  "sourceOfTruth": "code" | "ui" | "both",
  "depth": "quick" | "standard" | "deep"
}
```

### Step 2.5: Feature Selection (For Large Codebases)

**CRITICAL: For codebases with 500+ files, automatically run feature detection and let user choose scope:**

```javascript
// Detect codebase size
const fileCount = await getFileCount(target);

if (fileCount > 500 || userSpecif