@helloleo/plugins 0.1.0

package/README.md

@@ -0,0 +1,15 @@
+# @helloleo/plugins
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run src/index.ts
+```
+
+This project was created using `bun init` in bun v1.3.9. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@helloleo/plugins",
+  "version": "0.1.0",
+  "description": "OpenCode plugins for HelloLeo",
+  "license": "UNLICENSED",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": ["src"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "format": "bunx --bun @biomejs/biome format --write src",
+    "lint": "bunx --bun @biomejs/biome lint --write src",
+    "check": "bunx --bun @biomejs/biome check --write src"
+  },
+  "dependencies": {
+    "@opencode-ai/plugin": "1.2.27"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.8",
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { CreatePlanPlugin } from "./tools/create-plan.ts";
+export { ListPlansPlugin } from "./tools/list-plans.ts";
+export { ModifyPlanPlugin } from "./tools/modify-plan.ts";
+export { RemoveFilePlugin } from "./tools/remove-file.ts";
+export { ScaffoldPlugin } from "./tools/scaffold.ts";

package/src/tools/create-plan.ts

@@ -0,0 +1,61 @@
+import { mkdir } from "node:fs/promises";
+import path from "node:path";
+import type { Plugin } from "@opencode-ai/plugin";
+import { tool } from "@opencode-ai/plugin";
+
+function slug(title: string) {
+	return title
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, "-")
+		.replace(/^-|-$/g, "")
+		.slice(0, 60);
+}
+
+function frontmatter(fields: Record<string, string>) {
+	const lines = Object.entries(fields).map(([k, v]) => `${k}: ${v}`);
+	return `---\n${lines.join("\n")}\n---`;
+}
+
+export const createPlan = tool({
+	description:
+		"Create a new plan file in .leo/plans/. Plans use markdown with YAML frontmatter " +
+		"tracking title, status, and timestamps. The plan ID is a slug derived from the title.",
+	args: {
+		title: tool.schema.string().describe("Title of the plan"),
+		content: tool.schema.string().describe("Markdown body of the plan"),
+	},
+	async execute(args, context) {
+		const dir = path.join(context.directory, ".leo", "plans");
+		await mkdir(dir, { recursive: true });
+
+		let id = slug(args.title);
+		let filepath = path.join(dir, `${id}.md`);
+		let suffix = 1;
+
+		while (await Bun.file(filepath).exists()) {
+			suffix++;
+			id = `${slug(args.title)}-${suffix}`;
+			filepath = path.join(dir, `${id}.md`);
+		}
+
+		const now = new Date().toISOString();
+		const header = frontmatter({
+			title: args.title,
+			status: "active",
+			created: now,
+			modified: now,
+		});
+
+		const body = `${header}\n\n${args.content}\n`;
+		await Bun.write(filepath, body);
+
+		const relative = path.relative(context.directory, filepath);
+		return `Created plan "${args.title}" at ${relative}\n\n${body}`;
+	},
+});
+
+export const CreatePlanPlugin: Plugin = async () => {
+	return {
+		tool: { "create-plan": createPlan },
+	};
+};

package/src/tools/list-plans.ts

@@ -0,0 +1,85 @@
+import { existsSync } from "node:fs";
+import path from "node:path";
+import type { Plugin } from "@opencode-ai/plugin";
+import { tool } from "@opencode-ai/plugin";
+
+const STATUS = ["active", "completed", "cancelled"] as const;
+
+function parseFrontmatter(raw: string) {
+	const match = raw.match(/^---\n([\s\S]*?)\n---/);
+	if (!match) return {} as Record<string, string>;
+
+	const fields: Record<string, string> = {};
+	for (const line of (match[1] ?? "").split("\n")) {
+		const idx = line.indexOf(":");
+		if (idx === -1) continue;
+		fields[line.slice(0, idx).trim()] = line.slice(idx + 1).trim();
+	}
+
+	return fields;
+}
+
+export const listPlans = tool({
+	description:
+		"List all plans in .leo/plans/. Returns each plan's slug, title, status, and last modified date. " +
+		"Optionally filter by status.",
+	args: {
+		status: tool.schema
+			.enum(STATUS)
+			.optional()
+			.describe(`Filter plans by status: ${STATUS.join(", ")}`),
+	},
+	async execute(args, context) {
+		const dir = path.join(context.directory, ".leo", "plans");
+
+		if (!existsSync(dir)) {
+			return args.status
+				? `No plans with status "${args.status}"`
+				: "No plans found";
+		}
+
+		const glob = new Bun.Glob("*.md");
+		const entries: {
+			id: string;
+			title: string;
+			status: string;
+			modified: string;
+		}[] = [];
+
+		for await (const match of glob.scan({ cwd: dir, absolute: true })) {
+			const raw = await Bun.file(match).text();
+			const fields = parseFrontmatter(raw);
+			const id = path.basename(match, ".md");
+
+			if (args.status && fields.status !== args.status) continue;
+
+			entries.push({
+				id,
+				title: fields.title ?? id,
+				status: fields.status ?? "unknown",
+				modified: fields.modified ?? fields.created ?? "unknown",
+			});
+		}
+
+		if (entries.length === 0) {
+			return args.status
+				? `No plans with status "${args.status}"`
+				: "No plans found";
+		}
+
+		entries.sort((a, b) => (b.modified > a.modified ? 1 : -1));
+
+		const header = `Found ${entries.length} plan${entries.length === 1 ? "" : "s"}:\n`;
+		const rows = entries.map(
+			(e) => `${e.id} | ${e.status} | ${e.title} | modified ${e.modified}`,
+		);
+
+		return header + rows.join("\n");
+	},
+});
+
+export const ListPlansPlugin: Plugin = async () => {
+	return {
+		tool: { "list-plans": listPlans },
+	};
+};

package/src/tools/modify-plan.ts

@@ -0,0 +1,79 @@
+import path from "node:path";
+import type { Plugin } from "@opencode-ai/plugin";
+import { tool } from "@opencode-ai/plugin";
+
+const STATUS = ["active", "completed", "cancelled"] as const;
+
+function parseFrontmatter(raw: string) {
+	const match = raw.match(/^---\n([\s\S]*?)\n---\n?([\s\S]*)$/);
+	if (!match) return { fields: {} as Record<string, string>, body: raw };
+
+	const fields: Record<string, string> = {};
+	for (const line of (match[1] ?? "").split("\n")) {
+		const idx = line.indexOf(":");
+		if (idx === -1) continue;
+		fields[line.slice(0, idx).trim()] = line.slice(idx + 1).trim();
+	}
+
+	return { fields, body: (match[2] ?? "").trim() };
+}
+
+function formatFrontmatter(fields: Record<string, string>, body: string) {
+	const lines = Object.entries(fields).map(([k, v]) => `${k}: ${v}`);
+	return `---\n${lines.join("\n")}\n---\n\n${body}\n`;
+}
+
+export const modifyPlan = tool({
+	description:
+		"Modify an existing plan in .leo/plans/. You can update the content, the status, or both. " +
+		"The modified timestamp is updated automatically.",
+	args: {
+		planId: tool.schema
+			.string()
+			.describe("Plan slug ID (e.g. refactor-auth-flow)"),
+		content: tool.schema
+			.string()
+			.optional()
+			.describe("New markdown body for the plan"),
+		status: tool.schema
+			.enum(STATUS)
+			.optional()
+			.describe("New status for the plan"),
+	},
+	async execute(args, context) {
+		if (!args.content && !args.status) {
+			throw new Error("Provide at least one of content or status to modify");
+		}
+
+		const filepath = path.join(
+			context.directory,
+			".leo",
+			"plans",
+			`${args.planId}.md`,
+		);
+		const file = Bun.file(filepath);
+
+		if (!(await file.exists())) {
+			throw new Error(`Plan not found: ${args.planId}`);
+		}
+
+		const raw = await file.text();
+		const parsed = parseFrontmatter(raw);
+
+		if (args.status) parsed.fields.status = args.status;
+		parsed.fields.modified = new Date().toISOString();
+
+		const body = args.content ?? parsed.body;
+		const output = formatFrontmatter(parsed.fields, body);
+		await Bun.write(filepath, output);
+
+		const relative = path.relative(context.directory, filepath);
+		return `Updated plan "${args.planId}" at ${relative}\n\n${output}`;
+	},
+});
+
+export const ModifyPlanPlugin: Plugin = async () => {
+	return {
+		tool: { "modify-plan": modifyPlan },
+	};
+};

package/src/tools/remove-file.ts

@@ -0,0 +1,53 @@
+import { unlink } from "node:fs/promises";
+import path from "node:path";
+import type { Plugin } from "@opencode-ai/plugin";
+import { tool } from "@opencode-ai/plugin";
+
+export const removeFile = tool({
+	description:
+		"Remove a file from the project. The file path must be relative to the project root. " +
+		"This tool will ask for permission before deleting. " +
+		"Cannot delete files outside the project boundary.",
+	args: {
+		filePath: tool.schema
+			.string()
+			.describe("Relative path to the file to remove (e.g. src/App.tsx)"),
+	},
+	async execute(args, context) {
+		const resolved = path.resolve(context.directory, args.filePath);
+		const normalized = path.normalize(resolved);
+
+		if (
+			!normalized.startsWith(context.directory + path.sep) &&
+			normalized !== context.directory
+		) {
+			throw new Error(
+				`Path "${args.filePath}" resolves outside the project boundary. Deletion blocked.`,
+			);
+		}
+
+		const file = Bun.file(resolved);
+		if (!(await file.exists())) {
+			throw new Error(`File not found: ${args.filePath}`);
+		}
+
+		const relative = path.relative(context.directory, resolved);
+
+		await context.ask({
+			permission: "remove-file",
+			patterns: [resolved],
+			always: [resolved],
+			metadata: { filePath: relative },
+		});
+
+		await unlink(resolved);
+
+		return `Removed ${relative}`;
+	},
+});
+
+export const RemoveFilePlugin: Plugin = async () => {
+	return {
+		tool: { "remove-file": removeFile },
+	};
+};

package/src/tools/scaffold.ts

@@ -0,0 +1,300 @@
+import { mkdir } from "node:fs/promises";
+import path from "node:path";
+import type { Plugin } from "@opencode-ai/plugin";
+import { tool } from "@opencode-ai/plugin";
+
+function packageJson(name: string) {
+	return JSON.stringify(
+		{
+			name,
+			private: true,
+			version: "0.0.0",
+			type: "module",
+			scripts: {
+				dev: "vite",
+				start: "vite",
+				build: "vite build",
+				preview: "vite preview",
+			},
+			dependencies: {
+				react: "^18.3.1",
+				"react-dom": "^18.3.1",
+				clsx: "^2.1.1",
+				"tailwind-merge": "^2.6.0",
+			},
+			devDependencies: {
+				"@types/react": "^18.3.12",
+				"@types/react-dom": "^18.3.1",
+				"@vitejs/plugin-react": "^4.3.4",
+				autoprefixer: "^10.4.20",
+				postcss: "^8.4.49",
+				tailwindcss: "^3.4.17",
+				typescript: "^5.6.3",
+				vite: "^6.0.5",
+			},
+		},
+		null,
+		2,
+	);
+}
+
+function indexHtml(fontFamily: string) {
+	const fontParam = fontFamily.replace(/\s+/g, "+");
+	return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=${fontParam}:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <title>App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>`;
+}
+
+function viteConfig() {
+	return `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    allowedHosts: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})`;
+}
+
+function tailwindConfig() {
+	return `export default {
+  darkMode: ["class"],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" },
+        primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
+        secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
+        muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
+        accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
+        destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
+        success: { DEFAULT: "hsl(var(--success))", foreground: "hsl(var(--success-foreground))" },
+        warning: { DEFAULT: "hsl(var(--warning))", foreground: "hsl(var(--warning-foreground))" },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+      },
+      fontFamily: {
+        sans: "var(--font-sans)",
+        heading: "var(--font-heading)",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      borderWidth: {
+        DEFAULT: "var(--border-width)",
+      },
+      boxShadow: {
+        DEFAULT: "var(--shadow)",
+        lg: "var(--shadow-lg)",
+      },
+    },
+  },
+  plugins: [],
+}`;
+}
+
+function postcssConfig() {
+	return `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}`;
+}
+
+function indexCss(
+	primaryColor: string,
+	fontFamily: string,
+	borderRadius: string,
+) {
+	const fontValue = `'${fontFamily}', ui-sans-serif, system-ui, sans-serif`;
+	return `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: ${primaryColor};
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --success: 142 76% 36%;
+    --success-foreground: 210 40% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 222.2 47.4% 11.2%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: ${borderRadius};
+    --border-width: 1px;
+    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --font-sans: ${fontValue};
+    --font-heading: ${fontValue};
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --success: 142 76% 36%;
+    --success-foreground: 210 40% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 222.2 47.4% 11.2%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+    --border-width: 1px;
+    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+    --font-sans: ${fontValue};
+    --font-heading: ${fontValue};
+  }
+}
+
+body {
+  @apply bg-background text-foreground font-sans;
+}`;
+}
+
+function utilsTs() {
+	return `import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}`;
+}
+
+function mainTsx() {
+	return `import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)`;
+}
+
+export const scaffold = tool({
+	description:
+		"Scaffold a new React + Vite + Tailwind CSS project with the HelloLeo design system. " +
+		"Creates all mandatory boilerplate: package.json, index.html (with Google Fonts), " +
+		"vite.config.js, tailwind.config.js, postcss.config.js, src/index.css (CSS variables " +
+		"light+dark), src/lib/utils.ts (cn helper), and src/main.tsx. " +
+		"Call this FIRST for any new project before writing App.tsx and components.",
+	args: {
+		name: tool.schema
+			.string()
+			.optional()
+			.describe("Project name for package.json (default: leo-project)"),
+		primaryColor: tool.schema
+			.string()
+			.optional()
+			.describe(
+				'HSL values for primary color, e.g. "221.2 83.2% 53.3%" (default: blue)',
+			),
+		fontFamily: tool.schema
+			.string()
+			.optional()
+			.describe(
+				'Google Font family name, e.g. "Inter", "Poppins" (default: Inter)',
+			),
+		borderRadius: tool.schema
+			.string()
+			.optional()
+			.describe(
+				'Base border radius, e.g. "0.5rem", "0.75rem" (default: 0.5rem)',
+			),
+	},
+	async execute(args, context) {
+		const dir = context.directory;
+		const name = args.name ?? "leo-project";
+		const primary = args.primaryColor ?? "221.2 83.2% 53.3%";
+		const font = args.fontFamily ?? "Inter";
+		const radius = args.borderRadius ?? "0.5rem";
+
+		await mkdir(path.join(dir, "src", "lib"), { recursive: true });
+
+		const files: [string, string][] = [
+			["package.json", packageJson(name)],
+			["index.html", indexHtml(font)],
+			["vite.config.js", viteConfig()],
+			["tailwind.config.js", tailwindConfig()],
+			["postcss.config.js", postcssConfig()],
+			[path.join("src", "index.css"), indexCss(primary, font, radius)],
+			[path.join("src", "lib", "utils.ts"), utilsTs()],
+			[path.join("src", "main.tsx"), mainTsx()],
+		];
+
+		const created: string[] = [];
+		for (const [filePath, content] of files) {
+			await Bun.write(path.join(dir, filePath), content);
+			created.push(filePath);
+		}
+
+		return [
+			`Scaffolded ${created.length} files:`,
+			...created.map((f) => `  - ${f}`),
+			"",
+			"Next: create src/App.tsx with your application code.",
+			"The design system is ready -- use design tokens (bg-primary, text-foreground, etc.)",
+			"and create UI components in src/components/ui/.",
+		].join("\n");
+	},
+});
+
+export const ScaffoldPlugin: Plugin = async () => {
+	return {
+		tool: { scaffold: scaffold },
+	};
+};