@agentuity/cli 3.0.0-alpha.7 → 3.0.0-beta.0

package/dist/cmd/project/templates/services/queue/snippets/nuxt/page.after-form.vue

@@ -0,0 +1,18 @@
+<div v-if="jobs.length > 0" class="rounded-lg border border-gray-900 bg-black p-8">
+	<h3 class="m-0 mb-6 text-xl font-normal leading-none text-white">Pending jobs</h3>
+	<ul class="flex flex-col gap-3 text-xs text-gray-400">
+		<li
+			v-for="job in jobs"
+			:key="job.id"
+			class="flex flex-col gap-0.5 rounded-md border border-gray-900 bg-gray-950 px-4 py-3"
+		>
+			<span class="text-gray-500">
+				<strong class="text-cyan-500">queued</strong> · {{ job.id }}
+			</span>
+			<span class="italic">
+				{{ job.text.length > 80 ? `${job.text.slice(0, 80)}…` : job.text }}
+				<span class="text-gray-600"> → {{ job.toLanguage }}</span>
+			</span>
+		</li>
+	</ul>
+</div>

package/dist/cmd/project/templates/services/queue/snippets/nuxt/page.inside-form-buttons.vue

@@ -0,0 +1,8 @@
+<button
+	class="cursor-pointer rounded-lg border border-gray-700 bg-gray-950 px-4 py-2 font-medium text-gray-300 hover:border-cyan-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+	:disabled="isLoading || !text.trim()"
+	@click="handleQueue()"
+	type="button"
+>
+	Translate later
+</button>

package/dist/cmd/project/templates/services/queue/snippets/nuxt/page.state.vue

@@ -0,0 +1,25 @@
+interface QueuedJob {
+	id: string;
+	text: string;
+	toLanguage: string;
+	model: string;
+	at: number;
+}
+const jobs = ref<QueuedJob[]>([]);
+
+async function handleQueue() {
+	const res = await $fetch<{ id: string }>('/api/jobs', {
+		method: 'POST',
+		body: { text: text.value, toLanguage: toLanguage.value, model: model.value },
+	});
+	jobs.value = [
+		{
+			id: res.id,
+			text: text.value,
+			toLanguage: toLanguage.value,
+			model: model.value,
+			at: Date.now(),
+		},
+		...jobs.value,
+	];
+}

package/dist/cmd/project/templates/services/queue/snippets/remix/page.after-form.tsx

@@ -0,0 +1,21 @@
+{jobs.length > 0 && (
+	<div className="rounded-lg border border-gray-900 bg-black p-8">
+		<h3 className="m-0 mb-6 text-xl font-normal leading-none text-white">Pending jobs</h3>
+		<ul className="flex flex-col gap-3 text-xs text-gray-400">
+			{jobs.map((job) => (
+				<li
+					key={job.id}
+					className="flex flex-col gap-0.5 rounded-md border border-gray-900 bg-gray-950 px-4 py-3"
+				>
+					<span className="text-gray-500">
+						<strong className="text-cyan-500">queued</strong> · {job.id}
+					</span>
+					<span className="italic">
+						{job.text.length > 80 ? `${job.text.slice(0, 80)}\u2026` : job.text}
+						<span className="text-gray-600"> → {job.toLanguage}</span>
+					</span>
+				</li>
+			))}
+		</ul>
+	</div>
+)}

package/dist/cmd/project/templates/services/queue/snippets/remix/page.inside-form-buttons.tsx

@@ -0,0 +1,8 @@
+<button
+	className="cursor-pointer rounded-lg border border-gray-700 bg-gray-950 px-4 py-2 font-medium text-gray-300 hover:border-cyan-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+	disabled={isLoading || !text.trim()}
+	onClick={handleQueue}
+	type="button"
+>
+	Translate later
+</button>

package/dist/cmd/project/templates/services/queue/snippets/remix/page.state.tsx

@@ -0,0 +1,19 @@
+interface QueuedJob {
+	id: string;
+	text: string;
+	toLanguage: string;
+	model: string;
+	at: number;
+}
+const [jobs, setJobs] = useState<QueuedJob[]>([]);
+
+const handleQueue = async () => {
+	const res = await fetch('/api/jobs', {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ text, toLanguage, model }),
+	});
+	if (!res.ok) return;
+	const { id } = (await res.json()) as { id: string };
+	setJobs((prev) => [{ id, text, toLanguage, model, at: Date.now() }, ...prev]);
+};

package/dist/cmd/project/templates/services/queue/snippets/sveltekit/page.after-form.svelte

@@ -0,0 +1,18 @@
+{#if jobs.length > 0}
+	<div class="rounded-lg border border-gray-900 bg-black p-8">
+		<h3 class="m-0 mb-6 text-xl font-normal leading-none text-white">Pending jobs</h3>
+		<ul class="flex flex-col gap-3 text-xs text-gray-400">
+			{#each jobs as job (job.id)}
+				<li class="flex flex-col gap-0.5 rounded-md border border-gray-900 bg-gray-950 px-4 py-3">
+					<span class="text-gray-500">
+						<strong class="text-cyan-500">queued</strong> · {job.id}
+					</span>
+					<span class="italic">
+						{job.text.length > 80 ? `${job.text.slice(0, 80)}\u2026` : job.text}
+						<span class="text-gray-600"> → {job.toLanguage}</span>
+					</span>
+				</li>
+			{/each}
+		</ul>
+	</div>
+{/if}

package/dist/cmd/project/templates/services/queue/snippets/sveltekit/page.inside-form-buttons.svelte

@@ -0,0 +1,8 @@
+<button
+	class="cursor-pointer rounded-lg border border-gray-700 bg-gray-950 px-4 py-2 font-medium text-gray-300 hover:border-cyan-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+	disabled={isLoading || !text.trim()}
+	onclick={handleQueue}
+	type="button"
+>
+	Translate later
+</button>

package/dist/cmd/project/templates/services/queue/snippets/sveltekit/page.state.svelte

@@ -0,0 +1,19 @@
+interface QueuedJob {
+	id: string;
+	text: string;
+	toLanguage: string;
+	model: string;
+	at: number;
+}
+let jobs = $state<QueuedJob[]>([]);
+
+async function handleQueue() {
+	const res = await fetch('/api/jobs', {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ text, toLanguage, model }),
+	});
+	if (!res.ok) return;
+	const { id } = (await res.json()) as { id: string };
+	jobs = [{ id, text, toLanguage, model, at: Date.now() }, ...jobs];
+}

package/dist/cmd/project/templates/services/queue/snippets/vite-react/page.after-form.tsx

@@ -0,0 +1,21 @@
+{jobs.length > 0 && (
+	<div className="rounded-lg border border-gray-900 bg-black p-8">
+		<h3 className="m-0 mb-6 text-xl font-normal leading-none text-white">Pending jobs</h3>
+		<ul className="flex flex-col gap-3 text-xs text-gray-400">
+			{jobs.map((job) => (
+				<li
+					key={job.id}
+					className="flex flex-col gap-0.5 rounded-md border border-gray-900 bg-gray-950 px-4 py-3"
+				>
+					<span className="text-gray-500">
+						<strong className="text-cyan-500">queued</strong> · {job.id}
+					</span>
+					<span className="italic">
+						{job.text.length > 80 ? `${job.text.slice(0, 80)}\u2026` : job.text}
+						<span className="text-gray-600"> → {job.toLanguage}</span>
+					</span>
+				</li>
+			))}
+		</ul>
+	</div>
+)}

package/dist/cmd/project/templates/services/queue/snippets/vite-react/page.inside-form-buttons.tsx

@@ -0,0 +1,8 @@
+<button
+	className="cursor-pointer rounded-lg border border-gray-700 bg-gray-950 px-4 py-2 font-medium text-gray-300 hover:border-cyan-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+	disabled={isLoading || !text.trim()}
+	onClick={handleQueue}
+	type="button"
+>
+	Translate later
+</button>

package/dist/cmd/project/templates/services/queue/snippets/vite-react/page.state.tsx

@@ -0,0 +1,19 @@
+interface QueuedJob {
+	id: string;
+	text: string;
+	toLanguage: string;
+	model: string;
+	at: number;
+}
+const [jobs, setJobs] = useState<QueuedJob[]>([]);
+
+const handleQueue = async () => {
+	const res = await fetch('/api/jobs', {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ text, toLanguage, model }),
+	});
+	if (!res.ok) return;
+	const { id } = (await res.json()) as { id: string };
+	setJobs((prev) => [{ id, text, toLanguage, model, at: Date.now() }, ...prev]);
+};

package/dist/cmd/project/templates/services/queue/snippets/vite-react/server.imports.ts

@@ -0,0 +1 @@
+import { QueueClient } from '@agentuity/queue';

package/dist/cmd/project/templates/services/queue/snippets/vite-react/server.module.ts

@@ -0,0 +1,2 @@
+const jobQueue = new QueueClient();
+const JOBS_QUEUE = 'translate-jobs';

package/dist/cmd/project/templates/services/queue/snippets/vite-react/server.routes.ts

@@ -0,0 +1,5 @@
+if (url.pathname === '/api/jobs' && request.method === 'POST') {
+	const payload = await request.json();
+	const { id } = await jobQueue.publish(JOBS_QUEUE, payload);
+	return Response.json({ id });
+}

package/dist/cmd/project/templates/services/storage/files/astro/src/pages/api/export.ts

@@ -0,0 +1,18 @@
+import type { APIRoute } from 'astro';
+import { desc } from 'drizzle-orm';
+import { db, translations } from '../../db';
+import { s3 } from '../../storage';
+
+export const POST: APIRoute = async () => {
+	const rows = await db
+		.select()
+		.from(translations)
+		.orderBy(desc(translations.createdAt));
+	const body = JSON.stringify(rows, null, 2);
+	const filename = `translations-${Date.now()}.json`;
+	const file = s3.file(filename);
+	await file.write(body, { type: 'application/json' });
+	return new Response(JSON.stringify({ filename, size: body.length }), {
+		headers: { 'Content-Type': 'application/json' },
+	});
+};

package/dist/cmd/project/templates/services/storage/files/astro/src/storage/index.ts

@@ -0,0 +1,15 @@
+import { createS3Client, type BucketConfig } from '@agentuity/storage';
+
+function bucketConfig(): BucketConfig {
+	const endpoint = process.env.AGENTUITY_BUCKET_ENDPOINT;
+	const access_key = process.env.AGENTUITY_BUCKET_ACCESS_KEY;
+	const secret_key = process.env.AGENTUITY_BUCKET_SECRET_KEY;
+	if (!endpoint || !access_key || !secret_key) {
+		throw new Error(
+			'AGENTUITY_BUCKET_* env vars are not set. Provision an Agentuity bucket or set them manually.'
+		);
+	}
+	return { endpoint, access_key, secret_key };
+}
+
+export const s3 = createS3Client(bucketConfig());

package/dist/cmd/project/templates/services/storage/files/hono/src/storage/index.ts

@@ -0,0 +1,15 @@
+import { createS3Client, type BucketConfig } from '@agentuity/storage';
+
+function bucketConfig(): BucketConfig {
+	const endpoint = process.env.AGENTUITY_BUCKET_ENDPOINT;
+	const access_key = process.env.AGENTUITY_BUCKET_ACCESS_KEY;
+	const secret_key = process.env.AGENTUITY_BUCKET_SECRET_KEY;
+	if (!endpoint || !access_key || !secret_key) {
+		throw new Error(
+			'AGENTUITY_BUCKET_* env vars are not set. Provision an Agentuity bucket or set them manually.'
+		);
+	}
+	return { endpoint, access_key, secret_key };
+}
+
+export const s3 = createS3Client(bucketConfig());

package/dist/cmd/project/templates/services/storage/files/nextjs/src/app/api/export/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server';
+import { desc } from 'drizzle-orm';
+import { db, translations } from '@/db';
+import { s3 } from '@/storage';
+
+export async function POST() {
+	const rows = await db
+		.select()
+		.from(translations)
+		.orderBy(desc(translations.createdAt));
+	const body = JSON.stringify(rows, null, 2);
+	const filename = `translations-${Date.now()}.json`;
+	const file = s3.file(filename);
+	await file.write(body, { type: 'application/json' });
+	return NextResponse.json({ filename, size: body.length });
+}

package/dist/cmd/project/templates/services/storage/files/nextjs/src/storage/index.ts

@@ -0,0 +1,15 @@
+import { createS3Client, type BucketConfig } from '@agentuity/storage';
+
+function bucketConfig(): BucketConfig {
+	const endpoint = process.env.AGENTUITY_BUCKET_ENDPOINT;
+	const access_key = process.env.AGENTUITY_BUCKET_ACCESS_KEY;
+	const secret_key = process.env.AGENTUITY_BUCKET_SECRET_KEY;
+	if (!endpoint || !access_key || !secret_key) {
+		throw new Error(
+			'AGENTUITY_BUCKET_* env vars are not set. Provision an Agentuity bucket or set them manually.'
+		);
+	}
+	return { endpoint, access_key, secret_key };
+}
+
+export const s3 = createS3Client(bucketConfig());

package/dist/cmd/project/templates/services/storage/files/nuxt/server/api/export.post.ts

@@ -0,0 +1,15 @@
+import { desc } from 'drizzle-orm';
+import { db, translations } from '../db';
+import { s3 } from '../storage';
+
+export default defineEventHandler(async () => {
+	const rows = await db
+		.select()
+		.from(translations)
+		.orderBy(desc(translations.createdAt));
+	const body = JSON.stringify(rows, null, 2);
+	const filename = `translations-${Date.now()}.json`;
+	const file = s3.file(filename);
+	await file.write(body, { type: 'application/json' });
+	return { filename, size: body.length };
+});

package/dist/cmd/project/templates/services/storage/files/nuxt/server/storage/index.ts

@@ -0,0 +1,15 @@
+import { createS3Client, type BucketConfig } from '@agentuity/storage';
+
+function bucketConfig(): BucketConfig {
+	const endpoint = process.env.AGENTUITY_BUCKET_ENDPOINT;
+	const access_key = process.env.AGENTUITY_BUCKET_ACCESS_KEY;
+	const secret_key = process.env.AGENTUITY_BUCKET_SECRET_KEY;
+	if (!endpoint || !access_key || !secret_key) {
+		throw new Error(
+			'AGENTUITY_BUCKET_* env vars are not set. Provision an Agentuity bucket or set them manually.'
+		);
+	}
+	return { endpoint, access_key, secret_key };
+}
+
+export const s3 = createS3Client(bucketConfig());

package/dist/cmd/project/templates/services/storage/files/remix/app/routes/api.export.ts

@@ -0,0 +1,16 @@
+import { data } from 'react-router';
+import { desc } from 'drizzle-orm';
+import { db, translations } from '~/db';
+import { s3 } from '~/storage';
+
+export async function action() {
+	const rows = await db
+		.select()
+		.from(translations)
+		.orderBy(desc(translations.createdAt));
+	const body = JSON.stringify(rows, null, 2);
+	const filename = `translations-${Date.now()}.json`;
+	const file = s3.file(filename);
+	await file.write(body, { type: 'application/json' });
+	return data({ filename, size: body.length });
+}

package/dist/cmd/project/templates/services/storage/files/remix/app/storage/index.ts

@@ -0,0 +1,15 @@
+import { createS3Client, type BucketConfig } from '@agentuity/storage';
+
+function bucketConfig(): BucketConfig {
+	const endpoint = process.env.AGENTUITY_BUCKET_ENDPOINT;
+	const access_key = process.env.AGENTUITY_BUCKET_ACCESS_KEY;
+	const secret_key = process.env.AGENTUITY_BUCKET_SECRET_KEY;
+	if (!endpoint || !access_key || !secret_key) {
+		throw new Error(
+			'AGENTUITY_BUCKET_* env vars are not set. Provision an Agentuity bucket or set them manually.'
+		);
+	}
+	return { endpoint, access_key, secret_key };
+}
+
+export const s3 = createS3Client(bucketConfig());

package/dist/cmd/project/templates/services/storage/files/sveltekit/src/lib/server/storage/index.ts

@@ -0,0 +1,15 @@
+import { createS3Client, type BucketConfig } from '@agentuity/storage';
+
+function bucketConfig(): BucketConfig {
+	const endpoint = process.env.AGENTUITY_BUCKET_ENDPOINT;
+	const access_key = process.env.AGENTUITY_BUCKET_ACCESS_KEY;
+	const secret_key = process.env.AGENTUITY_BUCKET_SECRET_KEY;
+	if (!endpoint || !access_key || !secret_key) {
+		throw new Error(
+			'AGENTUITY_BUCKET_* env vars are not set. Provision an Agentuity bucket or set them manually.'
+		);
+	}
+	return { endpoint, access_key, secret_key };
+}
+
+export const s3 = createS3Client(bucketConfig());

package/dist/cmd/project/templates/services/storage/files/sveltekit/src/routes/api/export/+server.ts

@@ -0,0 +1,16 @@
+import { json } from '@sveltejs/kit';
+import { desc } from 'drizzle-orm';
+import { db, translations } from '$lib/server/db';
+import { s3 } from '$lib/server/storage';
+
+export const POST = async () => {
+	const rows = await db
+		.select()
+		.from(translations)
+		.orderBy(desc(translations.createdAt));
+	const body = JSON.stringify(rows, null, 2);
+	const filename = `translations-${Date.now()}.json`;
+	const file = s3.file(filename);
+	await file.write(body, { type: 'application/json' });
+	return json({ filename, size: body.length });
+};

package/dist/cmd/project/templates/services/storage/files/vite-react/server/storage/index.ts

@@ -0,0 +1,15 @@
+import { createS3Client, type BucketConfig } from '@agentuity/storage';
+
+function bucketConfig(): BucketConfig {
+	const endpoint = process.env.AGENTUITY_BUCKET_ENDPOINT;
+	const access_key = process.env.AGENTUITY_BUCKET_ACCESS_KEY;
+	const secret_key = process.env.AGENTUITY_BUCKET_SECRET_KEY;
+	if (!endpoint || !access_key || !secret_key) {
+		throw new Error(
+			'AGENTUITY_BUCKET_* env vars are not set. Provision an Agentuity bucket or set them manually.'
+		);
+	}
+	return { endpoint, access_key, secret_key };
+}
+
+export const s3 = createS3Client(bucketConfig());

package/dist/cmd/project/templates/services/storage/manifest.json

@@ -0,0 +1,19 @@
+{
+	"id": "storage",
+	"label": "Storage",
+	"hint": "Export history as files in object storage",
+	"description": "Add an 'Export history' button that bundles the translation history into a JSON file, uploads it to S3-compatible storage, and returns a download URL.",
+	"order": 50,
+	"requires": ["db"],
+	"packages": ["@agentuity/storage"],
+	"envVars": [
+		{
+			"name": "AGENTUITY_BUCKET_ENDPOINT",
+			"placeholder": "your-bucket.agentuity.run",
+			"comment": "Set automatically when an Agentuity bucket is provisioned"
+		},
+		{ "name": "AGENTUITY_BUCKET_ACCESS_KEY", "placeholder": "" },
+		{ "name": "AGENTUITY_BUCKET_SECRET_KEY", "placeholder": "" }
+	],
+	"frameworks": ["nextjs", "remix", "vite-react", "nuxt", "sveltekit", "astro", "hono"]
+}

package/dist/cmd/project/templates/services/storage/snippets/astro/page.after-form.astro

@@ -0,0 +1,13 @@
+<div class="flex items-center justify-between gap-3 rounded-lg border border-gray-900 bg-black p-6 text-xs text-gray-400">
+	<span>Export translation history as JSON</span>
+	<div class="flex items-center gap-3">
+		<span id="export-info" class="text-cyan-500"></span>
+		<button
+			id="export-btn"
+			class="cursor-pointer rounded-lg border border-gray-700 bg-gray-950 px-4 py-2 font-medium text-gray-300 hover:border-cyan-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+			type="button"
+		>
+			Export history
+		</button>
+	</div>
+</div>

package/dist/cmd/project/templates/services/storage/snippets/astro/page.state.astro

@@ -0,0 +1,17 @@
+const exportBtn = document.getElementById('export-btn') as HTMLButtonElement | null;
+const exportInfoEl = document.getElementById('export-info');
+
+exportBtn?.addEventListener('click', async () => {
+	exportBtn.disabled = true;
+	exportBtn.textContent = 'Exporting';
+	try {
+		const res = await fetch('/api/export', { method: 'POST' });
+		if (res.ok && exportInfoEl) {
+			const info = await res.json();
+			exportInfoEl.textContent = `${info.filename} (${(info.size / 1024).toFixed(1)} kB)`;
+		}
+	} finally {
+		exportBtn.disabled = false;
+		exportBtn.textContent = 'Export history';
+	}
+});

package/dist/cmd/project/templates/services/storage/snippets/hono/page.after-form.html

@@ -0,0 +1,13 @@
+<div class="flex items-center justify-between gap-3 rounded-lg border border-gray-900 bg-black p-6 text-xs text-gray-400">
+	<span>Export translation history as JSON</span>
+	<div class="flex items-center gap-3">
+		<span id="export-info" class="text-cyan-500"></span>
+		<button
+			id="export-btn"
+			class="cursor-pointer rounded-lg border border-gray-700 bg-gray-950 px-4 py-2 font-medium text-gray-300 hover:border-cyan-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+			type="button"
+		>
+			Export history
+		</button>
+	</div>
+</div>

package/dist/cmd/project/templates/services/storage/snippets/hono/page.state.html

@@ -0,0 +1,17 @@
+const exportBtn = document.getElementById('export-btn');
+const exportInfoEl = document.getElementById('export-info');
+
+exportBtn?.addEventListener('click', async () => {
+	exportBtn.disabled = true;
+	exportBtn.textContent = 'Exporting';
+	try {
+		const res = await fetch('/api/export', { method: 'POST' });
+		if (res.ok && exportInfoEl) {
+			const info = await res.json();
+			exportInfoEl.textContent = info.filename + ' (' + (info.size / 1024).toFixed(1) + ' kB)';
+		}
+	} finally {
+		exportBtn.disabled = false;
+		exportBtn.textContent = 'Export history';
+	}
+});

package/dist/cmd/project/templates/services/storage/snippets/hono/server.imports.ts

@@ -0,0 +1 @@
+import { s3 } from './storage';

package/dist/cmd/project/templates/services/storage/snippets/hono/server.routes.ts

@@ -0,0 +1,12 @@
+// Export
+app.post('/api/export', async (c) => {
+	const rows = await db
+		.select()
+		.from(translations)
+		.orderBy(desc(translations.createdAt));
+	const body = JSON.stringify(rows, null, 2);
+	const filename = `translations-${Date.now()}.json`;
+	const file = s3.file(filename);
+	await file.write(body, { type: 'application/json' });
+	return c.json({ filename, size: body.length });
+});

package/dist/cmd/project/templates/services/storage/snippets/nextjs/page.after-form.tsx

@@ -0,0 +1,18 @@
+<div className="flex items-center justify-between gap-3 rounded-lg border border-gray-900 bg-black p-6 text-xs text-gray-400">
+	<span>Export translation history as JSON</span>
+	<div className="flex items-center gap-3">
+		{exportInfo && (
+			<span className="text-cyan-500">
+				{exportInfo.filename} ({(exportInfo.size / 1024).toFixed(1)} kB)
+			</span>
+		)}
+		<button
+			className="cursor-pointer rounded-lg border border-gray-700 bg-gray-950 px-4 py-2 font-medium text-gray-300 hover:border-cyan-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+			disabled={isExporting}
+			onClick={handleExport}
+			type="button"
+		>
+			{isExporting ? 'Exporting' : 'Export history'}
+		</button>
+	</div>
+</div>

package/dist/cmd/project/templates/services/storage/snippets/nextjs/page.state.tsx

@@ -0,0 +1,12 @@
+const [exportInfo, setExportInfo] = useState<{ filename: string; size: number } | null>(null);
+const [isExporting, setIsExporting] = useState(false);
+
+const handleExport = async () => {
+	setIsExporting(true);
+	try {
+		const res = await fetch('/api/export', { method: 'POST' });
+		if (res.ok) setExportInfo(await res.json());
+	} finally {
+		setIsExporting(false);
+	}
+};

package/dist/cmd/project/templates/services/storage/snippets/nuxt/page.after-form.vue

@@ -0,0 +1,16 @@
+<div class="flex items-center justify-between gap-3 rounded-lg border border-gray-900 bg-black p-6 text-xs text-gray-400">
+	<span>Export translation history as JSON</span>
+	<div class="flex items-center gap-3">
+		<span v-if="exportInfo" class="text-cyan-500">
+			{{ exportInfo.filename }} ({{ (exportInfo.size / 1024).toFixed(1) }} kB)
+		</span>
+		<button
+			class="cursor-pointer rounded-lg border border-gray-700 bg-gray-950 px-4 py-2 font-medium text-gray-300 hover:border-cyan-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+			:disabled="isExporting"
+			@click="handleExport()"
+			type="button"
+		>
+			{{ isExporting ? 'Exporting' : 'Export history' }}
+		</button>
+	</div>
+</div>

package/dist/cmd/project/templates/services/storage/snippets/nuxt/page.state.vue

@@ -0,0 +1,13 @@
+const exportInfo = ref<{ filename: string; size: number } | null>(null);
+const isExporting = ref(false);
+
+async function handleExport() {
+	isExporting.value = true;
+	try {
+		exportInfo.value = await $fetch<{ filename: string; size: number }>('/api/export', {
+			method: 'POST',
+		});
+	} finally {
+		isExporting.value = false;
+	}
+}

package/dist/cmd/project/templates/services/storage/snippets/remix/page.after-form.tsx

@@ -0,0 +1,18 @@
+<div className="flex items-center justify-between gap-3 rounded-lg border border-gray-900 bg-black p-6 text-xs text-gray-400">
+	<span>Export translation history as JSON</span>
+	<div className="flex items-center gap-3">
+		{exportInfo && (
+			<span className="text-cyan-500">
+				{exportInfo.filename} ({(exportInfo.size / 1024).toFixed(1)} kB)
+			</span>
+		)}
+		<button
+			className="cursor-pointer rounded-lg border border-gray-700 bg-gray-950 px-4 py-2 font-medium text-gray-300 hover:border-cyan-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+			disabled={isExporting}
+			onClick={handleExport}
+			type="button"
+		>
+			{isExporting ? 'Exporting' : 'Export history'}
+		</button>
+	</div>
+</div>

package/dist/cmd/project/templates/services/storage/snippets/remix/page.state.tsx

@@ -0,0 +1,12 @@
+const [exportInfo, setExportInfo] = useState<{ filename: string; size: number } | null>(null);
+const [isExporting, setIsExporting] = useState(false);
+
+const handleExport = async () => {
+	setIsExporting(true);
+	try {
+		const res = await fetch('/api/export', { method: 'POST' });
+		if (res.ok) setExportInfo(await res.json());
+	} finally {
+		setIsExporting(false);
+	}
+};