anhedral 0.1.1 → 0.1.4

package/dist/templates/extension.js

@@ -1,37 +1,57 @@
+import { rmSync } from 'node:fs';
 import path from 'node:path';
 import { writeFile, exec } from '../util.js';
+import { anhedralPrint } from '../print.js';
+import { EXTENSION_DEPENDENCIES } from '../dependencies.js';
 import { resolveToolchainChannel, resolveToolchain, toolPackageRef } from '../toolchain.js';
-export async function scaffoldExtension(root, { projectName, displayName }) {
-    const dir = path.join(root, 'extension');
+export async function scaffoldExtension(root, { projectName, displayName, skipInstall }) {
+    const appsRoot = path.join(root, 'apps');
+    const dir = path.join(appsRoot, 'extension');
     const toolchain = resolveToolchain(resolveToolchainChannel(process.env.ANHEDRAL_TOOLCHAIN));
-    // ── 1. Scaffold via WXT CLI ───────────────────────────────────────────
-    console.log('  Scaffolding WXT extension...');
-    exec(`pnpm dlx ${toolPackageRef('wxt', toolchain.wxt)} init extension -t react --pm pnpm`, root);
-    // ── 2. Overwrite package.json with proper scripts ──────────────────────
+    anhedralPrint.section('Chrome extension (WXT)');
+    anhedralPrint.step('Scaffolding WXT extension');
+    writeFile(path.join(appsRoot, '.gitkeep'), '');
+    exec(`pnpm dlx ${toolPackageRef('wxt', toolchain.wxt)} init extension -t react --pm pnpm`, appsRoot);
     writePackageJson(dir, projectName);
-    // ── 3. Install dependencies ───────────────────────────────────────────
-    console.log('  Installing Clerk + React + UI dependencies...');
-    exec('pnpm add @clerk/chrome-extension react react-dom clsx tailwind-merge class-variance-authority lucide-react', dir);
-    exec(`pnpm add -D @types/chrome @types/react @types/react-dom @wxt-dev/module-react autoprefixer postcss tailwindcss typescript ${toolPackageRef('wxt', toolchain.wxt)}`, dir);
-    // ── 4. Write config files ─────────────────────────────────────────────
+    anhedralPrint.done('WXT extension scaffolded');
+    anhedralPrint.step('Installing Clerk + React + Tailwind dependencies');
+    if (skipInstall) {
+        anhedralPrint.info('Skipping extension dependency install (--skip-install)');
+        anhedralPrint.info('Run after init: pnpm install');
+    }
+    else {
+        exec('pnpm install --no-frozen-lockfile', dir);
+    }
+    anhedralPrint.done(skipInstall ? 'Extension dependency manifests written' : 'Extension dependencies installed');
+    cleanWxtStarterFiles(dir);
     writeWxtConfig(dir, displayName);
     writeTsConfig(dir);
     writeEnvExample(dir);
+    writeEnvFile(dir);
     writePostcssConfig(dir);
     writeTailwindConfig(dir);
     writeShadcnConfig(dir);
+    writeReadme(dir, displayName);
     writeCnUtil(dir);
-    // ── 5. Write source files ─────────────────────────────────────────────
+    writeButtonComponent(dir);
     writeAuthContext(dir);
     writeApiClient(dir);
     writeBackground(dir);
+    writeContentScript(dir);
     writeSidepanelEntry(dir);
     writeSidepanelHtml(dir, displayName);
     writeSidepanelApp(dir);
     writeStyles(dir);
-    // ── 6. Add shadcn button component (sets up CSS variables + component) ─
-    console.log('  Adding shadcn button component...');
-    exec(`pnpm dlx ${toolPackageRef('shadcn', toolchain.shadcn)} add button`, dir);
+    anhedralPrint.done('Extension source files written');
+}
+function cleanWxtStarterFiles(dir) {
+    for (const relativePath of [
+        'entrypoints',
+        'assets/react.svg',
+        'public/wxt.svg',
+    ]) {
+        rmSync(path.join(dir, relativePath), { recursive: true, force: true });
+    }
 }
 function writePackageJson(dir, projectName) {
     writeFile(path.join(dir, 'package.json'), JSON.stringify({
@@ -49,6 +69,8 @@ function writePackageJson(dir, projectName) {
             'zip:firefox': 'wxt zip -b firefox',
             typecheck: 'tsc --noEmit',
         },
+        dependencies: EXTENSION_DEPENDENCIES.dependencies,
+        devDependencies: EXTENSION_DEPENDENCIES.devDependencies,
     }, null, 2) + '\n');
 }
 function writeWxtConfig(dir, displayName) {
@@ -64,11 +86,15 @@ export default defineConfig({
       description: '${displayName} Chrome Extension',
       version: '0.1.0',
       ...(crxPublicKey ? { key: crxPublicKey } : {}),
-      permissions: ['cookies', 'storage'],
+      minimum_chrome_version: '114',
+      permissions: ['activeTab', 'cookies', 'storage', 'sidePanel'],
       host_permissions: [],
       action: {
         default_title: 'Open ${displayName}',
       },
+      side_panel: {
+        default_path: 'sidepanel.html',
+      },
     };
   },
   modules: ['@wxt-dev/module-react'],
@@ -87,11 +113,11 @@ function writeTsConfig(dir) {
             forceConsistentCasingInFileNames: true,
             resolveJsonModule: true,
             isolatedModules: true,
+            allowImportingTsExtensions: true,
             noEmit: true,
             jsx: 'react-jsx',
             lib: ['DOM', 'DOM.Iterable', 'ESNext'],
             types: ['wxt/browser', '@wxt-dev/module-react', 'chrome'],
-            baseUrl: '.',
             paths: { '@/*': ['./src/*'] },
         },
         include: ['**/*.ts', '**/*.tsx', '.wxt/wxt.d.ts'],
@@ -111,12 +137,29 @@ VITE_WEBSITE_URL=http://localhost:8081
 # Chrome Extension CRX public key (optional, for stable extension ID)
 VITE_CRX_PUBLIC_KEY=
 
+# RevenueCat Web Billing URL (optional, for subscription management)
+VITE_RC_BILLING_URL=
+`);
+}
+function writeEnvFile(dir) {
+    writeFile(path.join(dir, '.env'), `# Clerk Authentication
+VITE_CLERK_PUBLISHABLE_KEY=
+
+# Backend API URL
+VITE_API_URL=http://localhost:8787
+
+# Website URL (for sign-up and subscription links)
+VITE_WEBSITE_URL=http://localhost:8081
+
+# Chrome Extension CRX public key (optional, for stable extension ID)
+VITE_CRX_PUBLIC_KEY=
+
 # RevenueCat Web Billing URL (optional, for subscription management)
 VITE_RC_BILLING_URL=
 `);
 }
 function writePostcssConfig(dir) {
-    writeFile(path.join(dir, 'postcss.config.js'), `module.exports = {
+    writeFile(path.join(dir, 'postcss.config.cjs'), `module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
@@ -156,15 +199,115 @@ export function cn(...inputs: ClassValue[]) {
 }
 `);
 }
+function writeButtonComponent(dir) {
+    writeFile(path.join(dir, 'src/components/ui/button.tsx'), `import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+type ButtonVariant = 'default' | 'outline';
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant;
+};
+
+const variantClasses: Record<ButtonVariant, string> = {
+  default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+  outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+};
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', type = 'button', ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={cn(
+          'inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',
+          variantClasses[variant],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Button.displayName = 'Button';
+`);
+}
 function writeTailwindConfig(dir) {
-    writeFile(path.join(dir, 'tailwind.config.js'), `/** @type {import('tailwindcss').Config} */
+    writeFile(path.join(dir, 'tailwind.config.cjs'), `/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{ts,tsx,html}'],
-  theme: { extend: {} },
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
   plugins: [],
 };
 `);
 }
+function writeReadme(dir, displayName) {
+    writeFile(path.join(dir, 'README.md'), `# ${displayName} Chrome Extension
+
+WXT side-panel extension generated by anhedral.
+
+## Development
+
+\`\`\`bash
+pnpm dev
+pnpm build
+pnpm zip
+\`\`\`
+
+Set \`VITE_CLERK_PUBLISHABLE_KEY\` and \`VITE_API_URL\` in \`.env\` before using auth-backed routes. Set \`VITE_CRX_PUBLIC_KEY\` only when you need a stable Chrome extension ID.
+
+## Chrome
+
+Run \`pnpm build\`, then load \`.output/chrome-mv3\` as an unpacked extension from \`chrome://extensions\`.
+
+The extension uses Chrome's Side Panel API. The browser action opens \`sidepanel.html\`, \`wxt.config.ts\` declares the \`sidePanel\` permission and Chrome 114+ minimum version, the background script initializes Clerk, and the content script is ready for page-to-extension messages.
+`);
+}
 function writeAuthContext(dir) {
     writeFile(path.join(dir, 'src/contexts/auth-context.tsx'), `import * as React from 'react';
 import { ClerkProvider, useAuth as useClerkAuth, useUser } from '@clerk/chrome-extension';
@@ -306,58 +449,25 @@ export { WEBSITE_URL };
 `);
 }
 function writeApiClient(dir) {
-    writeFile(path.join(dir, 'src/lib/api.ts'), `const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8787';
-
-export type SubscriptionEntitlements = {
-  pro: boolean;
-  inTrial: boolean;
-  trialEndsAt?: string;
-  expiresAt?: string;
-  periodStart?: string;
-  periodEnd?: string;
-  method?: 'trialing' | 'redeemed' | 'paid' | null;
-  managementUrl?: string;
-  cancelAtPeriodEnd?: boolean;
-};
+    writeFile(path.join(dir, 'src/lib/api.ts'), `import { ApiClient } from '@anhedral/api-client';
 
 export class APIClient {
   constructor(private getToken: () => Promise<string | null>) {}
 
-  private async request<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
-    const token = await this.getToken();
-    if (!token) throw new Error('Not authenticated');
-
-    const headers: Record<string, string> = {
-      Authorization: \`Bearer \${token}\`,
-      'Content-Type': 'application/json',
-      'X-Client-Type': 'chrome-extension',
-      'X-Platform': 'chrome',
-      ...(options.headers as Record<string, string>),
-    };
-
-    const response = await fetch(\`\${API_BASE_URL}\${endpoint}\`, { ...options, headers });
-
-    if (!response.ok) {
-      let error: { message?: string } = {};
-      try { error = await response.json(); } catch {}
-      throw new Error(error.message || \`Request failed (\${response.status})\`);
-    }
-
-    if (response.status === 204) return {} as T;
-    return response.json();
+  private client() {
+    return new ApiClient({
+      baseUrl: import.meta.env.VITE_API_URL || 'http://localhost:8787',
+      getToken: this.getToken,
+      platform: 'extension',
+    });
   }
 
-  async getMe() {
-    return this.request<{
-      user: { id: string; email: string; subscriptionTier: string; subscriptionStatus: string };
-    }>('/auth/me');
+  getMe() {
+    return this.client().getMe();
   }
 
-  async getSubscriptionEntitlements(options?: { refresh?: boolean }): Promise<SubscriptionEntitlements> {
-    const path = options?.refresh
-      ? '/subscriptions/entitlements/me?refresh=true'
-      : '/subscriptions/entitlements/me';
-    return this.request<SubscriptionEntitlements>(path);
+  getSubscriptionEntitlements(options?: { refresh?: boolean }) {
+    return this.client().getSubscriptionEntitlements(options);
   }
 }
 `);
@@ -365,20 +475,42 @@ export class APIClient {
 function writeBackground(dir) {
     writeFile(path.join(dir, 'src/entrypoints/background.ts'), `import { createClerkClient } from '@clerk/chrome-extension/background';
 
+type ChromeWithSidePanel = typeof chrome & {
+  sidePanel: {
+    setPanelBehavior: (behavior: { openPanelOnActionClick: boolean }) => Promise<void>;
+  };
+};
+
 export default defineBackground(() => {
   // Initialize Clerk in the background script for cookie-based auth
   void createClerkClient({
     publishableKey: import.meta.env.VITE_CLERK_PUBLISHABLE_KEY || '',
   }).catch(() => {});
 
-  // Open the side panel when the extension icon is clicked
-  // The sidePanel permission is auto-added by WXT when the sidepanel entrypoint exists
-  chrome.sidePanel
+  // Open the side panel when the extension icon is clicked.
+  (chrome as ChromeWithSidePanel).sidePanel
     .setPanelBehavior({ openPanelOnActionClick: true })
     .catch(() => {});
 });
 `);
 }
+function writeContentScript(dir) {
+    writeFile(path.join(dir, 'src/entrypoints/content.ts'), `export default defineContentScript({
+  matches: ['<all_urls>'],
+  main() {
+    chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+      if (message?.type !== 'ANHEDRAL_PAGE_SNAPSHOT') return false;
+
+      sendResponse({
+        title: document.title,
+        location: window.location.href,
+      });
+      return true;
+    });
+  },
+});
+`);
+}
 function writeSidepanelEntry(dir) {
     writeFile(path.join(dir, 'src/entrypoints/sidepanel/main.tsx'), `import * as React from 'react';
 import { createRoot } from 'react-dom/client';
@@ -418,9 +550,33 @@ function writeSidepanelApp(dir) {
     writeFile(path.join(dir, 'src/entrypoints/sidepanel/app.tsx'), `import * as React from 'react';
 import { useAuth } from '../../contexts/auth-context';
 import { SignIn } from '@clerk/chrome-extension';
+import { Button } from '../../components/ui/button';
+
+type PageSnapshot = {
+  title: string;
+  location: string;
+};
 
 export function SidePanelApp() {
   const { isSignedIn, isLoading, signOut, subscription } = useAuth();
+  const [page, setPage] = React.useState<PageSnapshot | null>(null);
+  const [pageError, setPageError] = React.useState<string | null>(null);
+
+  const readActivePage = React.useCallback(async () => {
+    setPageError(null);
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    if (!tab.id) {
+      setPageError('No active tab is available.');
+      return;
+    }
+
+    try {
+      const response = await chrome.tabs.sendMessage(tab.id, { type: 'ANHEDRAL_PAGE_SNAPSHOT' });
+      setPage(response as PageSnapshot);
+    } catch {
+      setPageError('Refresh the active page, then try again.');
+    }
+  }, []);
 
   if (isLoading) {
     return <div style={{ padding: 24, textAlign: 'center' }}>Loading...</div>;
@@ -438,7 +594,15 @@ export function SidePanelApp() {
     <div style={{ padding: 24 }}>
       <h2>Welcome!</h2>
       <p>Subscription: {subscription.status}</p>
-      <button onClick={signOut}>Sign Out</button>
+      <Button type="button" onClick={() => void readActivePage()}>Read active page</Button>
+      {page ? (
+        <div style={{ marginTop: 16 }}>
+          <strong>{page.title || 'Untitled page'}</strong>
+          <p style={{ overflowWrap: 'anywhere' }}>{page.location}</p>
+        </div>
+      ) : null}
+      {pageError ? <p style={{ color: 'hsl(var(--destructive))' }}>{pageError}</p> : null}
+      <Button type="button" variant="outline" onClick={signOut}>Sign Out</Button>
     </div>
   );
 }
@@ -449,6 +613,40 @@ function writeStyles(dir) {
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 63.9%;
+    --radius: 0.5rem;
+  }
+
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

package/dist/templates/frontend.d.ts

@@ -1,2 +1,2 @@
 import type { ProjectOptions } from '../scaffold.js';
-export declare function scaffoldFrontend(root: string, { projectName, displayName }: ProjectOptions): Promise<void>;
+export declare function scaffoldFrontend(root: string, { projectName, displayName, skipInstall }: ProjectOptions): Promise<void>;