@usesidekick/react 0.1.0

package/src/server/handler.ts

@@ -0,0 +1,343 @@
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import type { SidekickHandlerOptions, SidekickStorage } from './types';
+import { callAI, validateCode } from './generate';
+
+interface GenerateRequestBody {
+  request: string;
+  overrideId?: string;
+}
+
+interface ToggleRequestBody {
+  overrideId: string;
+  enabled: boolean;
+}
+
+interface DeleteRequestBody {
+  overrideId: string;
+}
+
+function getAction(req: NextRequest): string {
+  const url = new URL(req.url);
+  const segments = url.pathname.split('/').filter(Boolean);
+  // Last segment is the action: overrides, generate, toggle, delete
+  return segments[segments.length - 1] || '';
+}
+
+async function readSchema(schemaPath?: string): Promise<Record<string, unknown>> {
+  const candidates = schemaPath
+    ? [schemaPath]
+    : [
+        path.join(process.cwd(), 'src/sidekick/schema.json'),
+        path.join(process.cwd(), 'sidekick/schema.json'),
+      ];
+
+  for (const candidate of candidates) {
+    try {
+      const content = await fs.readFile(candidate, 'utf-8');
+      return JSON.parse(content);
+    } catch {
+      continue;
+    }
+  }
+  throw new Error('Failed to read schema.json');
+}
+
+function safeParsePrimitives(primitives: string): string[] {
+  try {
+    const parsed = JSON.parse(primitives);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+async function handleListOverrides(storage: SidekickStorage) {
+  const overrides = await storage.listOverrides();
+  return NextResponse.json(
+    {
+      success: true,
+      overrides: overrides.map((o) => ({
+        id: o.id,
+        name: o.name,
+        description: o.description,
+        version: o.version,
+        primitives: safeParsePrimitives(o.primitives),
+        code: o.code,
+        enabled: o.enabled,
+        createdAt: o.createdAt,
+        updatedAt: o.updatedAt,
+      })),
+    },
+    {
+      headers: {
+        'Cache-Control': 'no-store, no-cache, must-revalidate',
+      },
+    }
+  );
+}
+
+async function safeParseBody<T>(req: NextRequest): Promise<T | null> {
+  try {
+    return (await req.json()) as T;
+  } catch {
+    return null;
+  }
+}
+
+async function handleGenerate(
+  req: NextRequest,
+  storage: SidekickStorage,
+  schemaPath?: string
+) {
+  const body = await safeParseBody<GenerateRequestBody>(req);
+  if (!body) {
+    return NextResponse.json(
+      { success: false, error: 'Invalid JSON in request body' },
+      { status: 400 }
+    );
+  }
+  const { request, overrideId } = body;
+
+  if (!request || typeof request !== 'string') {
+    return NextResponse.json(
+      { success: false, error: 'Missing request parameter' },
+      { status: 400 }
+    );
+  }
+
+  let existingCode: string | undefined;
+  if (overrideId) {
+    const existing = await storage.getOverride(overrideId);
+    if (!existing) {
+      return NextResponse.json(
+        { success: false, error: `Override "${overrideId}" not found` },
+        { status: 404 }
+      );
+    }
+    existingCode = existing.code;
+  }
+
+  const apiKey = process.env.ANTHROPIC_API_KEY;
+  if (!apiKey) {
+    return NextResponse.json(
+      { success: false, error: 'ANTHROPIC_API_KEY not configured' },
+      { status: 500 }
+    );
+  }
+
+  let schema: Record<string, unknown>;
+  try {
+    schema = await readSchema(schemaPath);
+  } catch {
+    return NextResponse.json(
+      { success: false, error: 'Failed to read schema.json' },
+      { status: 500 }
+    );
+  }
+
+  const MAX_RETRIES = 3;
+  let lastError: string | undefined;
+  let lastValidationErrors: string[] | undefined;
+
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      const generated = await callAI(request, schema, apiKey, lastValidationErrors, existingCode);
+
+      if (overrideId) {
+        generated.manifest.id = overrideId;
+      }
+
+      const validation = validateCode(generated.code);
+
+      if (!validation.valid) {
+        lastValidationErrors = validation.errors;
+        lastError = `Validation failed: ${validation.errors.join(', ')}`;
+
+        if (attempt < MAX_RETRIES) {
+          console.log(`[Sidekick] Attempt ${attempt} failed validation, retrying...`);
+          continue;
+        }
+
+        return NextResponse.json({
+          success: false,
+          error: lastError,
+          validationErrors: lastValidationErrors,
+        });
+      }
+
+      const existing = await storage.getOverride(generated.manifest.id);
+
+      if (existing) {
+        await storage.updateOverride(generated.manifest.id, {
+          name: generated.manifest.name,
+          description: generated.manifest.description,
+          version: generated.manifest.version,
+          primitives: JSON.stringify(generated.manifest.primitives),
+          code: generated.code,
+        });
+      } else {
+        await storage.createOverride({
+          id: generated.manifest.id,
+          name: generated.manifest.name,
+          description: generated.manifest.description,
+          version: generated.manifest.version,
+          primitives: JSON.stringify(generated.manifest.primitives),
+          code: generated.code,
+          enabled: true,
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        });
+      }
+
+      return NextResponse.json({
+        success: true,
+        overrideId: generated.manifest.id,
+        name: generated.manifest.name,
+        description: generated.manifest.description,
+      });
+    } catch (e) {
+      lastError = e instanceof Error ? e.message : String(e);
+      if (attempt === MAX_RETRIES) {
+        return NextResponse.json({
+          success: false,
+          error: `Failed after ${MAX_RETRIES} attempts: ${lastError}`,
+        });
+      }
+    }
+  }
+
+  return NextResponse.json({
+    success: false,
+    error: lastError || 'Unknown error',
+  });
+}
+
+async function handleToggle(req: NextRequest, storage: SidekickStorage) {
+  const body = await safeParseBody<ToggleRequestBody>(req);
+  if (!body) {
+    return NextResponse.json(
+      { success: false, error: 'Invalid JSON in request body' },
+      { status: 400 }
+    );
+  }
+  const { overrideId, enabled } = body;
+
+  if (!overrideId || typeof overrideId !== 'string') {
+    return NextResponse.json(
+      { success: false, error: 'Missing overrideId parameter' },
+      { status: 400 }
+    );
+  }
+
+  if (typeof enabled !== 'boolean') {
+    return NextResponse.json(
+      { success: false, error: 'Missing or invalid enabled parameter' },
+      { status: 400 }
+    );
+  }
+
+  const existing = await storage.getOverride(overrideId);
+  if (!existing) {
+    return NextResponse.json(
+      { success: false, error: 'Override not found' },
+      { status: 404 }
+    );
+  }
+
+  await storage.updateOverride(overrideId, { enabled });
+
+  // Re-read to confirm persisted value
+  const updated = await storage.getOverride(overrideId);
+
+  return NextResponse.json({
+    success: true,
+    overrideId,
+    enabled: updated?.enabled ?? enabled,
+  });
+}
+
+async function handleDelete(req: NextRequest, storage: SidekickStorage) {
+  const body = await safeParseBody<DeleteRequestBody>(req);
+  if (!body) {
+    return NextResponse.json(
+      { success: false, error: 'Invalid JSON in request body' },
+      { status: 400 }
+    );
+  }
+  const { overrideId } = body;
+
+  if (!overrideId || typeof overrideId !== 'string') {
+    return NextResponse.json(
+      { success: false, error: 'Missing overrideId parameter' },
+      { status: 400 }
+    );
+  }
+
+  const existing = await storage.getOverride(overrideId);
+  if (!existing) {
+    return NextResponse.json(
+      { success: false, error: 'Override not found' },
+      { status: 404 }
+    );
+  }
+
+  await storage.deleteOverride(overrideId);
+
+  return NextResponse.json({
+    success: true,
+    message: `Override "${overrideId}" deleted successfully`,
+  });
+}
+
+export function createSidekickHandler(options: SidekickHandlerOptions) {
+  const { storage, schemaPath } = options;
+
+  return {
+    async GET(req: NextRequest): Promise<NextResponse> {
+      try {
+        const action = getAction(req);
+        if (action === 'overrides') {
+          return handleListOverrides(storage);
+        }
+        return NextResponse.json(
+          { success: false, error: `Unknown GET action: ${action}` },
+          { status: 404 }
+        );
+      } catch (e) {
+        console.error('[Sidekick] Handler error:', e);
+        return NextResponse.json(
+          { success: false, error: e instanceof Error ? e.message : 'Unknown error' },
+          { status: 500 }
+        );
+      }
+    },
+
+    async POST(req: NextRequest): Promise<NextResponse> {
+      try {
+        const action = getAction(req);
+        switch (action) {
+          case 'generate':
+            return handleGenerate(req, storage, schemaPath);
+          case 'toggle':
+            return handleToggle(req, storage);
+          case 'delete':
+            return handleDelete(req, storage);
+          default:
+            return NextResponse.json(
+              { success: false, error: `Unknown POST action: ${action}` },
+              { status: 404 }
+            );
+        }
+      } catch (e) {
+        console.error('[Sidekick] Handler error:', e);
+        return NextResponse.json(
+          { success: false, error: e instanceof Error ? e.message : 'Unknown error' },
+          { status: 500 }
+        );
+      }
+    },
+  };
+}

package/src/server/index.ts

@@ -0,0 +1,20 @@
+export { createSidekickHandler } from './handler';
+export { createDrizzleStorage } from './drizzle-adapter';
+export { sidekickOverrides } from './drizzle-schema';
+export type { SidekickOverride, NewSidekickOverride } from './drizzle-schema';
+export type {
+  SidekickStorage,
+  SidekickHandlerOptions,
+  OverrideRecord,
+  NewOverrideRecord,
+  OverrideManifest,
+  GeneratedOverride,
+} from './types';
+export {
+  buildSystemPrompt,
+  buildUserPrompt,
+  callAI,
+  parseAIResponse,
+  validateCode,
+  formatDesignSystem,
+} from './generate';

package/src/server/storage.ts

@@ -0,0 +1 @@
+export type { SidekickStorage, OverrideRecord, NewOverrideRecord } from './types';

package/src/server/types.ts

@@ -0,0 +1,49 @@
+export interface OverrideRecord {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  primitives: string; // JSON array stored as text
+  code: string;
+  enabled: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface NewOverrideRecord {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  primitives: string;
+  code: string;
+  enabled?: boolean;
+  createdAt?: Date;
+  updatedAt?: Date;
+}
+
+export interface OverrideManifest {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  primitives: string[];
+}
+
+export interface GeneratedOverride {
+  manifest: OverrideManifest;
+  code: string;
+}
+
+export interface SidekickHandlerOptions {
+  storage: SidekickStorage;
+  schemaPath?: string;
+}
+
+export interface SidekickStorage {
+  listOverrides(): Promise<OverrideRecord[]>;
+  getOverride(id: string): Promise<OverrideRecord | null>;
+  createOverride(data: NewOverrideRecord): Promise<void>;
+  updateOverride(id: string, data: Partial<OverrideRecord>): Promise<void>;
+  deleteOverride(id: string): Promise<void>;
+}

package/src/types.ts

@@ -0,0 +1,295 @@
+import { ReactNode, ComponentType } from 'react';
+
+export interface Override {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  enabled: boolean;
+}
+
+export interface OverrideManifest {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  primitives: string[];
+}
+
+export interface OverrideModule {
+  manifest: OverrideManifest;
+  activate: (sdk: SDK) => void | Promise<void>;
+}
+
+export interface WrappedComponent {
+  id: string;
+  overrideId: string;
+  wrapper: (Component: ComponentType) => ComponentType;
+  priority?: number;
+  where?: (props: Record<string, unknown>) => boolean;
+}
+
+export interface AddedColumn {
+  id: string;
+  overrideId: string;
+  tableId: string;
+  header: string;
+  accessor: string | ((row: Record<string, unknown>) => unknown);
+  render?: (value: unknown, row: Record<string, unknown>) => ReactNode;
+  priority?: number;
+}
+
+export interface ColumnRename {
+  id: string;
+  overrideId: string;
+  tableId: string;
+  originalHeader: string;
+  newHeader: string;
+}
+
+export interface HiddenColumn {
+  id: string;
+  overrideId: string;
+  tableId: string;
+  header: string;
+}
+
+export interface ColumnOrder {
+  id: string;
+  overrideId: string;
+  tableId: string;
+  order: string[];
+}
+
+export interface RowFilter {
+  id: string;
+  overrideId: string;
+  tableId: string;
+  filter: (row: Record<string, unknown>) => boolean;
+}
+
+export interface MenuItem {
+  id: string;
+  overrideId: string;
+  menuId: string;
+  label: string;
+  icon?: string;
+  onClick: () => void;
+  priority?: number;
+}
+
+export interface TabItem {
+  id: string;
+  overrideId: string;
+  tabGroupId: string;
+  label: string;
+  content: ComponentType<Record<string, unknown>>;
+  priority?: number;
+}
+
+export interface PropsModifier {
+  id: string;
+  overrideId: string;
+  componentId: string;
+  modifier: (props: Record<string, unknown>) => Record<string, unknown>;
+}
+
+export interface ActionItem {
+  id: string;
+  overrideId: string;
+  actionBarId: string;
+  label: string;
+  icon?: string;
+  onClick: (context: Record<string, unknown>) => void;
+  variant?: 'primary' | 'secondary' | 'danger';
+  priority?: number;
+}
+
+export interface ValidationRule {
+  id: string;
+  overrideId: string;
+  formId: string;
+  fieldName: string;
+  validate: (value: unknown, formData: Record<string, unknown>) => string | null;
+  priority?: number;
+}
+
+export interface ApiInterceptor {
+  id: string;
+  overrideId: string;
+  pathPattern: string | RegExp;
+  handler: (response: unknown, request: { path: string; method: string }) => unknown;
+}
+
+export interface SortOption {
+  id: string;
+  overrideId: string;
+  tableId: string;
+  label: string;
+  field: string;
+  comparator: (a: Record<string, unknown>, b: Record<string, unknown>) => number;
+}
+
+export interface GroupByOption {
+  id: string;
+  overrideId: string;
+  tableId: string;
+  label: string;
+  grouper: (item: Record<string, unknown>) => string;
+}
+
+export interface DOMModification {
+  id: string;
+  overrideId: string;
+  selector: string;
+  type: 'setText' | 'setAttribute' | 'setStyle' | 'addClass' | 'removeClass';
+  // setText: value = new text content
+  // setAttribute: value = { attr: string; value: string }
+  // setStyle: value = Record<string, string>
+  // addClass/removeClass: value = className string
+  value: unknown;
+}
+
+export interface InjectionPoint {
+  id: string;
+  overrideId: string;
+  selector: string;
+  position: 'before' | 'after' | 'prepend' | 'append';
+  component: ComponentType<Record<string, unknown>>;
+}
+
+export interface DOMEventListener {
+  id: string;
+  overrideId: string;
+  selector: string;
+  eventType: string;
+  handler: (event: Event, element: Element) => void;
+}
+
+export interface EventHandler {
+  id: string;
+  overrideId: string;
+  eventName: string;
+  handler: (payload: Record<string, unknown>) => void;
+  priority?: number;
+}
+
+export interface KeyboardShortcut {
+  id: string;
+  overrideId: string;
+  keys: string;
+  action: () => void;
+  description?: string;
+}
+
+export interface RouteModifier {
+  id: string;
+  overrideId: string;
+  pathPattern: string | RegExp;
+  handler: (context: { path: string; params: Record<string, string> }) => void | string;
+}
+
+export interface ComputedField {
+  id: string;
+  overrideId: string;
+  fieldName: string;
+  compute: (data: Record<string, unknown>) => unknown;
+}
+
+export interface DataFilter {
+  id: string;
+  overrideId: string;
+  name: string;
+  filter: (items: unknown[]) => unknown[];
+}
+
+export interface DataTransform {
+  id: string;
+  overrideId: string;
+  dataKey: string;
+  transform: (data: unknown) => unknown;
+}
+
+export interface InjectedStyles {
+  id: string;
+  overrideId: string;
+  css: string;
+}
+
+// SDK Primitives Interface
+export interface UIPrimitives {
+  wrap: (componentName: string, wrapper: (Component: ComponentType) => ComponentType, options?: { priority?: number; where?: (props: Record<string, unknown>) => boolean }) => void;
+  replace: (componentName: string, replacement: ComponentType) => void;
+  addStyles: (css: string) => void;
+  addColumn: (tableId: string, config: Omit<AddedColumn, 'id' | 'overrideId' | 'tableId'>) => void;
+  renameColumn: (tableId: string, originalHeader: string, newHeader: string) => void;
+  hideColumn: (tableId: string, header: string) => void;
+  reorderColumns: (tableId: string, order: string[]) => void;
+  filterRows: (tableId: string, filter: (row: Record<string, unknown>) => boolean) => void;
+  addMenuItem: (menuId: string, config: Omit<MenuItem, 'id' | 'overrideId' | 'menuId'>) => void;
+  addTab: (tabGroupId: string, config: Omit<TabItem, 'id' | 'overrideId' | 'tabGroupId'>) => void;
+  modifyProps: (componentId: string, modifier: (props: Record<string, unknown>) => Record<string, unknown>) => void;
+  addAction: (actionBarId: string, config: Omit<ActionItem, 'id' | 'overrideId' | 'actionBarId'>) => void;
+  addValidation: (formId: string, fieldName: string, validate: (value: unknown, formData: Record<string, unknown>) => string | null) => void;
+  setText: (selector: string, text: string) => void;
+  setAttribute: (selector: string, attr: string, value: string) => void;
+  setStyle: (selector: string, styles: Record<string, string>) => void;
+  addClass: (selector: string, className: string) => void;
+  removeClass: (selector: string, className: string) => void;
+  inject: (selector: string, component: ComponentType<Record<string, unknown>>, position?: 'before' | 'after' | 'prepend' | 'append') => void;
+}
+
+export interface DataPrimitives {
+  computed: (fieldName: string, compute: (data: Record<string, unknown>) => unknown) => void;
+  addFilter: (name: string, filter: (items: unknown[]) => unknown[]) => void;
+  transform: (dataKey: string, transformFn: (data: unknown) => unknown) => void;
+  intercept: (pathPattern: string | RegExp, handler: (response: unknown, request: { path: string; method: string }) => unknown) => void;
+  addSortOption: (tableId: string, config: Omit<SortOption, 'id' | 'overrideId' | 'tableId'>) => void;
+  addGroupBy: (tableId: string, config: Omit<GroupByOption, 'id' | 'overrideId' | 'tableId'>) => void;
+}
+
+export interface BehaviorPrimitives {
+  onEvent: (eventName: string, handler: (payload: Record<string, unknown>) => void, options?: { priority?: number }) => void;
+  addKeyboardShortcut: (keys: string, action: () => void, description?: string) => void;
+  modifyRoute: (pathPattern: string | RegExp, handler: (context: { path: string; params: Record<string, string> }) => void | string) => void;
+  onDOMEvent: (selector: string, eventType: string, handler: (event: Event, element: Element) => void) => void;
+}
+
+export interface SDK {
+  ui: UIPrimitives;
+  data: DataPrimitives;
+  behavior: BehaviorPrimitives;
+}
+
+export interface SidekickState {
+  overrides: Override[];
+  // UI state
+  wrappers: Map<string, WrappedComponent[]>;
+  replacements: Map<string, ComponentType>;
+  styles: InjectedStyles[];
+  columns: Map<string, AddedColumn[]>;
+  columnRenames: Map<string, ColumnRename[]>;
+  hiddenColumns: Map<string, HiddenColumn[]>;
+  columnOrders: Map<string, ColumnOrder>;
+  rowFilters: Map<string, RowFilter[]>;
+  menuItems: Map<string, MenuItem[]>;
+  tabs: Map<string, TabItem[]>;
+  propsModifiers: Map<string, PropsModifier[]>;
+  actions: Map<string, ActionItem[]>;
+  validations: Map<string, ValidationRule[]>;
+  // Data state
+  computedFields: Map<string, ComputedField>;
+  filters: Map<string, DataFilter>;
+  transforms: Map<string, DataTransform>;
+  interceptors: ApiInterceptor[];
+  sortOptions: Map<string, SortOption[]>;
+  groupByOptions: Map<string, GroupByOption[]>;
+  // Behavior state
+  eventHandlers: Map<string, EventHandler[]>;
+  keyboardShortcuts: KeyboardShortcut[];
+  routeModifiers: RouteModifier[];
+  // DOM state
+  domModifications: DOMModification[];
+  injections: InjectionPoint[];
+  domEventListeners: DOMEventListener[];
+}