`;
}
async function handleApi(req, res, instanceId) {
await loadState();
const { pathname } = new URL(req.url, "http://127.0.0.1");
if (req.method === "GET" && pathname === "/api/state") {
return sendJson(res, 200, stateCache);
}
if (req.method === "GET" && pathname === "/events") {
const entry = servers.get(instanceId);
if (!entry) {
return sendJson(res, 404, { error: "Canvas instance is not available." });
}
res.statusCode = 200;
res.setHeader("Content-Type", "text/event-stream");
res.setHeader("Cache-Control", "no-cache");
res.setHeader("Connection", "keep-alive");
res.write("event: state_update\n");
res.write(`data: ${JSON.stringify(stateCache)}\n\n`);
entry.clients.add(res);
req.on("close", () => entry.clients.delete(res));
return;
}
if (req.method === "GET" && pathname === "/") {
res.statusCode = 200;
res.setHeader("Content-Type", "text/html; charset=utf-8");
res.end(renderHtml(instanceId));
return;
}
if (req.method !== "POST" || !pathname.startsWith("/api/")) {
sendJson(res, 404, { error: "Not found" });
return;
}
try {
const body = await readBodyJson(req);
const payload = await mutateState(() => {
if (pathname === "/api/approve-section") {
const section = updateSectionStatus(body.sectionId, "Approved", "Approved by human reviewer.", "human");
return { section };
}
if (pathname === "/api/request-changes") {
const section = updateSectionStatus(body.sectionId, "Needs Changes", body.note || "Changes requested by human reviewer.", "human");
return { section };
}
if (pathname === "/api/add-human-note") {
const note = addNote(body.sectionId, body.text, "human");
return { note };
}
if (pathname === "/api/reorder-sections") {
const orderedIds = Array.isArray(body.orderedIds) ? body.orderedIds.filter((id) => typeof id === "string") : [];
const existing = new Map(stateCache.sections.map((section) => [section.id, section]));
const reordered = [];
for (const id of orderedIds) {
const section = existing.get(id);
if (section) {
reordered.push(section);
existing.delete(id);
}
}
for (const section of existing.values()) {
reordered.push(section);
}
stateCache.sections = reordered;
stateCache.lastUpdated = nowIso();
addChange({ type: "status_change", summary: "Section order updated by human.", timestamp: stateCache.lastUpdated });
return { sections: stateCache.sections };
}
if (pathname === "/api/update-content") {
return upsertSectionContent(body.sectionId, body.field, body.value, safeString(body.mark, "draft"), "human");
}
if (pathname === "/api/delete-content") {
return deleteSectionContent(safeString(body.sectionId), safeString(body.field), "human");
}
if (pathname === "/api/request-generation") {
const section = findSectionOrThrow(safeString(body.sectionId));
const requested = body.requested === undefined ? true : Boolean(body.requested);
section.aiRequested = requested;
section.aiRequestedAt = requested ? nowIso() : null;
section.lastModified = nowIso();
stateCache.lastUpdated = section.lastModified;
addChange({
type: "ai_request",
summary: requested ? `AI draft requested for ${section.name}.` : `AI draft request cleared for ${section.name}.`,
timestamp: section.lastModified,
sectionId: section.id,
});
addNote(section.id, requested ? "Turned on AI generate β ask Copilot to draft this section from existing details." : "Turned off AI generate for this section.", "human");
return { sectionId: section.id, aiRequested: requested };
}
if (pathname === "/api/proposal-decision") {
const proposal = stateCache.contentProposals.find((item) => item.id === body.proposalId);
if (!proposal) {
throw new CanvasError("proposal_not_found", `Unknown proposal: ${body.proposalId}`);
}
if (body.decision !== "accepted" && body.decision !== "rejected") {
throw new CanvasError("invalid_decision", "Decision must be accepted or rejected.");
}
proposal.status = body.decision;
proposal.timestamp = nowIso();
if (body.decision === "accepted") {
const section = findSectionOrThrow(proposal.sectionId);
section.content[proposal.field] = proposal.proposed;
section.lastModified = proposal.timestamp;
}
addChange({
type: "status_change",
summary: `Content proposal ${proposal.id} was ${proposal.status}.`,
timestamp: proposal.timestamp,
sectionId: proposal.sectionId,
});
return { proposal };
}
if (pathname === "/api/reset-state") {
stateCache.sections = stateCache.sections.map(s => ({
...s, status: "Not Started", notes: [], content: {}, filesChanged: [], aiRequested: false, aiRequestedAt: null, lastModified: nowIso(),
}));
stateCache.changeLog = [];
stateCache.contentProposals = [];
stateCache.milestones = [];
stateCache.lastUpdated = nowIso();
addChange({ type: "status_change", summary: "Board reset to blank state.", timestamp: stateCache.lastUpdated });
return stateCache;
}
if (pathname === "/api/update-status") {
const section = updateSectionStatus(safeString(body.sectionId), safeString(body.status), "", "human");
return { section };
}
if (pathname === "/api/create-section") {
const name = safeString(body.name).trim();
if (!name) throw new CanvasError("invalid_name", "Section name is required.");
const icon = safeString(body.icon, "π").trim() || "π";
const id = name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || uid("section");
if (stateCache.sections.find(s => s.id === id)) throw new CanvasError("duplicate_section", `Section "${id}" already exists.`);
const section = { id, name, icon, status: "Not Started", notes: [], content: {}, filesChanged: [], lastModified: nowIso() };
stateCache.sections.push(section);
if (!stateCache.fieldSuggestions || typeof stateCache.fieldSuggestions !== "object") {
stateCache.fieldSuggestions = {};
}
if (!stateCache.sectionSchemas || typeof stateCache.sectionSchemas !== "object") {
stateCache.sectionSchemas = {};
}
stateCache.fieldSuggestions[id] = stateCache.fieldSuggestions[id] || [];
stateCache.sectionSchemas[id] = stateCache.sectionSchemas[id] || {};
stateCache.lastUpdated = section.lastModified;
addChange({ type: "status_change", summary: `Section "${name}" created.`, timestamp: section.lastModified });
return { section };
}
if (pathname === "/api/delete-section") {
const sectionId = safeString(body.sectionId);
const idx = stateCache.sections.findIndex(s => s.id === sectionId);
if (idx === -1) throw new CanvasError("section_not_found", `Unknown section: ${sectionId}`);
const [removed] = stateCache.sections.splice(idx, 1);
if (stateCache.fieldSuggestions && typeof stateCache.fieldSuggestions === "object") {
delete stateCache.fieldSuggestions[sectionId];
}
if (stateCache.sectionSchemas && typeof stateCache.sectionSchemas === "object") {
delete stateCache.sectionSchemas[sectionId];
}
stateCache.contentProposals = stateCache.contentProposals.filter((p) => p.sectionId !== sectionId);
stateCache.lastUpdated = nowIso();
addChange({ type: "status_change", summary: `Section "${removed.name}" deleted.`, timestamp: stateCache.lastUpdated });
return { deleted: sectionId };
}
if (pathname === "/api/apply-template-pack") {
return applyTemplatePack(safeString(body.templatePackId), "human");
}
throw new CanvasError("unknown_route", `Unknown route: ${pathname}`);
});
sendJson(res, 200, payload);
} catch (error) {
const code = error instanceof CanvasError ? error.code : "internal_error";
const message = error instanceof Error ? error.message : "Unexpected error";
sendJson(res, 400, { error: message, code });
}
}
async function startServer(instanceId) {
const clients = new Set();
const server = createServer((req, res) => {
handleApi(req, res, instanceId);
});
await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve));
const address = server.address();
const port = typeof address === "object" && address ? address.port : 0;
return { server, clients, url: `http://127.0.0.1:${port}/` };
}
function summarizeProgress() {
const approved = stateCache.sections.filter((section) => section.status === "Approved").length;
return `${approved}/${stateCache.sections.length} approved`;
}
const session = await joinSession({
hooks: {
onSessionStart: async () => ({ additionalContext: INTERACTIVE_FILL_CONTEXT }),
onUserPromptSubmitted: async (input) => {
const prompt = safeString(input?.prompt).toLowerCase();
const wantsAiGeneration =
prompt.includes("generate with ai") ||
prompt.includes("ai draft") ||
prompt.includes("ai generate") ||
prompt.includes("ai request") ||
prompt.includes("ai-generate") ||
(prompt.includes("generate") && prompt.includes("section"));
if (wantsAiGeneration) {
return { additionalContext: AI_GENERATION_CONTEXT };
}
const mentionsCanvas =
prompt.includes("site studio") ||
prompt.includes("design system") ||
prompt.includes("interactive") ||
prompt.includes("fill out") ||
prompt.includes("fill in") ||
prompt.includes("section content");
if (!mentionsCanvas) {
return;
}
const sectionId = detectSectionIdFromPrompt(prompt);
const sectionHint = sectionId
? `Prioritize sectionId "${sectionId}" when calling get_section_guide and upsert_section_content.`
: "If section is unclear, ask which section to draft before writing fields.";
return {
additionalContext: `${INTERACTIVE_FILL_CONTEXT}\n${sectionHint}`,
};
},
},
canvases: [
createCanvas({
id: "site-studio",
displayName: "Site Studio",
description:
"Unified dashboard for planning and building a personal website. Track section progress, review live changes, provide content updates, and approve work.",
inputSchema: {
type: "object",
additionalProperties: false,
properties: {
focusSectionId: { type: "string" },
initialTab: { type: "string", enum: ["progress", "content", "changes"] },
},
},
actions: [
{
name: "get_dashboard",
description: "Read the full dashboard state: sections, content proposals, milestones, and change feed.",
handler: async () => {
await loadState();
return stateCache;
},
},
{
name: "get_template_packs",
description: "List available template packs for personal website planning.",
handler: async () => ({
defaultTemplatePackId: DEFAULT_TEMPLATE_PACK,
templatePacks: TEMPLATE_PACK_OPTIONS,
}),
},
{
name: "apply_template_pack",
description: "Apply a template pack and reset sections/content to that template.",
inputSchema: {
type: "object",
required: ["templatePackId"],
additionalProperties: false,
properties: {
templatePackId: { type: "string" },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
return mutateState(() => applyTemplatePack(safeString(ctx.input?.templatePackId), "agent"));
},
},
{
name: "get_section_guide",
description: "Get suggested fields and the next question to ask for interactive section content authoring.",
inputSchema: {
type: "object",
required: ["sectionId"],
additionalProperties: false,
properties: {
sectionId: { type: "string" },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const guide = await mutateState(() => getSectionGuide(safeString(ctx.input?.sectionId)));
return { guide };
},
},
{
name: "list_ai_requests",
description: "List sections that requested AI generation via the canvas 'β¨ Generate with AI' button, returning each request plus the full board content as grounding context.",
handler: async (ctx) => {
captureWorkingDirectory(ctx);
await loadState();
const requests = stateCache.sections
.filter((s) => s.aiRequested)
.map((s) => {
const suggested = getFieldSuggestionsForSection(s.id);
return {
sectionId: s.id,
sectionName: s.name,
requestedAt: s.aiRequestedAt || null,
currentContent: s.content || {},
suggestedFields: suggested,
missingFields: suggested
.map((f) => f.field)
.filter((f) => !safeString(s.content?.[f]).trim()),
};
});
const boardContext = stateCache.sections.map((s) => ({
sectionId: s.id,
sectionName: s.name,
status: s.status,
content: s.content || {},
}));
return { requests, boardContext };
},
},
{
name: "resolve_ai_request",
description: "Clear the AI-generation request flag for a section after its content has been drafted.",
inputSchema: {
type: "object",
required: ["sectionId"],
additionalProperties: false,
properties: { sectionId: { type: "string" } },
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const sectionId = safeString(ctx.input?.sectionId);
return mutateState(() => {
const section = findSectionOrThrow(sectionId);
section.aiRequested = false;
section.aiRequestedAt = null;
section.lastModified = nowIso();
stateCache.lastUpdated = section.lastModified;
addChange({
type: "status_change",
summary: `AI draft completed for ${section.name}.`,
timestamp: section.lastModified,
sectionId: section.id,
});
return { sectionId: section.id, aiRequested: false };
});
},
},
{
name: "update_section_schema",
description: "Set or update validation schema for a specific section field.",
inputSchema: {
type: "object",
required: ["sectionId", "field"],
additionalProperties: false,
properties: {
sectionId: { type: "string" },
field: { type: "string" },
required: { type: "boolean" },
type: { type: "string", enum: ["text", "url", "email"] },
maxLength: { type: "number" },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const sectionId = safeString(ctx.input?.sectionId);
const field = safeString(ctx.input?.field).trim();
if (!field) {
throw new CanvasError("invalid_field", "Field is required.");
}
findSectionOrThrow(sectionId);
const schema = await mutateState(() => {
if (!stateCache.sectionSchemas || typeof stateCache.sectionSchemas !== "object") {
stateCache.sectionSchemas = {};
}
if (!stateCache.sectionSchemas[sectionId] || typeof stateCache.sectionSchemas[sectionId] !== "object") {
stateCache.sectionSchemas[sectionId] = {};
}
const next = {
type: safeString(ctx.input?.type, "text"),
required: Boolean(ctx.input?.required),
};
if (Number.isInteger(ctx.input?.maxLength) && Number(ctx.input.maxLength) > 0) {
next.maxLength = Number(ctx.input.maxLength);
}
stateCache.sectionSchemas[sectionId][field] = next;
stateCache.lastUpdated = nowIso();
addChange({
type: "status_change",
summary: `Validation schema updated for ${sectionId}.${field}.`,
timestamp: stateCache.lastUpdated,
sectionId,
});
return next;
});
return { sectionId, field, schema };
},
},
{
name: "upsert_section_content",
description: "Write or update one content field in a section during interactive drafting.",
inputSchema: {
type: "object",
required: ["sectionId", "field", "value"],
additionalProperties: false,
properties: {
sectionId: { type: "string" },
field: { type: "string" },
value: { type: "string" },
mark: { type: "string", enum: ["draft", "final"] },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const result = await mutateState(() =>
upsertSectionContent(
safeString(ctx.input?.sectionId),
safeString(ctx.input?.field),
safeString(ctx.input?.value),
safeString(ctx.input?.mark, "draft"),
"agent",
),
);
return result;
},
},
{
name: "upsert_section_content_bulk",
description: "Write multiple section content fields in one action.",
inputSchema: {
type: "object",
required: ["sectionId", "fields"],
additionalProperties: false,
properties: {
sectionId: { type: "string" },
fields: {
type: "object",
minProperties: 1,
additionalProperties: { type: "string" },
},
mark: { type: "string", enum: ["draft", "final"] },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const sectionId = safeString(ctx.input?.sectionId);
const fields = ctx.input?.fields;
if (!fields || typeof fields !== "object" || Array.isArray(fields)) {
throw new CanvasError("invalid_fields", "fields must be an object of key/value pairs.");
}
const mark = safeString(ctx.input?.mark, "draft");
const updates = await mutateState(() => {
const output = [];
for (const [field, value] of Object.entries(fields)) {
if (typeof value !== "string") {
throw new CanvasError("invalid_field_value", `Value for "${field}" must be a string.`);
}
output.push(upsertSectionContent(sectionId, field, value, mark, "agent"));
}
return output;
});
return { updates };
},
},
{
name: "update_section_status",
description: "Set a section status and optionally attach a note or commit summary.",
inputSchema: {
type: "object",
required: ["sectionId", "status"],
additionalProperties: false,
properties: {
sectionId: { type: "string" },
status: { type: "string" },
message: { type: "string" },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const sectionId = safeString(ctx.input?.sectionId);
const status = safeString(ctx.input?.status);
const message = safeString(ctx.input?.message);
const section = await mutateState(() => updateSectionStatus(sectionId, status, message, "agent"));
return { section };
},
},
{
name: "propose_content",
description: "Create a pending content proposal for a section field.",
inputSchema: {
type: "object",
required: ["sectionId", "field", "proposed", "reason"],
additionalProperties: false,
properties: {
sectionId: { type: "string" },
field: { type: "string" },
proposed: { type: "string" },
reason: { type: "string" },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const proposal = await mutateState(() => {
const section = findSectionOrThrow(safeString(ctx.input?.sectionId));
const field = safeString(ctx.input?.field).trim();
if (!field) {
throw new CanvasError("invalid_field", "Field is required.");
}
const current = safeString(section.content[field], "");
const proposed = safeString(ctx.input?.proposed);
const timestamp = nowIso();
const item = {
id: uid("proposal"),
sectionId: section.id,
field,
current,
proposed,
reason: safeString(ctx.input?.reason),
status: "pending",
diff: listDiffLines(current, proposed),
timestamp,
};
stateCache.contentProposals.unshift(item);
stateCache.lastUpdated = timestamp;
addChange({
type: "status_change",
summary: `Content proposal created for ${section.name}.${field}.`,
timestamp,
sectionId: section.id,
});
return item;
});
return { proposal };
},
},
{
name: "log_change",
description: "Append a structured entry to the live changes feed.",
inputSchema: {
type: "object",
required: ["type", "summary", "timestamp"],
additionalProperties: false,
properties: {
type: { type: "string" },
path: { type: "string" },
summary: { type: "string" },
timestamp: { type: "string" },
sectionId: { type: "string" },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const entry = await mutateState(() => {
const type = safeString(ctx.input?.type);
if (!VALID_CHANGE_TYPES.has(type)) {
throw new CanvasError("invalid_change_type", `Unsupported change type: ${type}`);
}
const item = addChange({
type,
path: safeString(ctx.input?.path),
summary: safeString(ctx.input?.summary),
timestamp: safeString(ctx.input?.timestamp),
sectionId: safeString(ctx.input?.sectionId),
});
appendFileChange(item.sectionId, item.path);
return item;
});
return { entry };
},
},
{
name: "add_note",
description: "Attach an agent note to a section.",
inputSchema: {
type: "object",
required: ["sectionId", "text"],
additionalProperties: false,
properties: {
sectionId: { type: "string" },
text: { type: "string" },
author: { type: "string" },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const note = await mutateState(() =>
addNote(safeString(ctx.input?.sectionId), safeString(ctx.input?.text), safeString(ctx.input?.author) || "agent"),
);
return { note };
},
},
{
name: "request_review",
description: "Move a section to Review with summary and file list.",
inputSchema: {
type: "object",
required: ["sectionId", "summary", "files_changed"],
additionalProperties: false,
properties: {
sectionId: { type: "string" },
summary: { type: "string" },
files_changed: { type: "array", items: { type: "string" } },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const payload = await mutateState(() => {
const sectionId = safeString(ctx.input?.sectionId);
const summary = safeString(ctx.input?.summary);
const files = Array.isArray(ctx.input?.files_changed)
? ctx.input.files_changed.filter((item) => typeof item === "string")
: [];
const section = updateSectionStatus(sectionId, "Review", summary, "agent");
for (const filePath of files) {
appendFileChange(sectionId, filePath);
}
section.filesChanged = [...new Set([...(section.filesChanged || []), ...files])];
addChange({
type: "status_change",
summary: `Review requested for ${section.name}.`,
timestamp: nowIso(),
sectionId,
});
return { section };
});
return payload;
},
},
{
name: "mark_milestone",
description: "Record a project milestone and mirror it to the changes feed.",
inputSchema: {
type: "object",
required: ["title", "description", "sections_affected"],
additionalProperties: false,
properties: {
title: { type: "string" },
description: { type: "string" },
sections_affected: { type: "array", items: { type: "string" } },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const milestone = await mutateState(() =>
markMilestone(
safeString(ctx.input?.title),
safeString(ctx.input?.description),
Array.isArray(ctx.input?.sections_affected) ? ctx.input.sections_affected : [],
),
);
return { milestone };
},
},
{
name: "create_section",
description: "Create a new custom section on the board.",
inputSchema: {
type: "object",
required: ["name"],
additionalProperties: false,
properties: {
name: { type: "string" },
icon: { type: "string" },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const name = safeString(ctx.input?.name).trim();
if (!name) {
throw new CanvasError("invalid_name", "Section name is required.");
}
const icon = safeString(ctx.input?.icon, "π").trim() || "π";
const id = name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || uid("section");
const section = await mutateState(() => {
if (stateCache.sections.find((item) => item.id === id)) {
throw new CanvasError("duplicate_section", `Section "${id}" already exists.`);
}
const next = { id, name, icon, status: "Not Started", notes: [], content: {}, filesChanged: [], lastModified: nowIso() };
stateCache.sections.push(next);
if (!stateCache.fieldSuggestions || typeof stateCache.fieldSuggestions !== "object") {
stateCache.fieldSuggestions = {};
}
if (!stateCache.sectionSchemas || typeof stateCache.sectionSchemas !== "object") {
stateCache.sectionSchemas = {};
}
stateCache.fieldSuggestions[id] = stateCache.fieldSuggestions[id] || [];
stateCache.sectionSchemas[id] = stateCache.sectionSchemas[id] || {};
stateCache.lastUpdated = next.lastModified;
addChange({
type: "status_change",
summary: `Section "${name}" created.`,
timestamp: next.lastModified,
sectionId: id,
});
return next;
});
return { section };
},
},
{
name: "delete_section",
description: "Delete a section by sectionId.",
inputSchema: {
type: "object",
required: ["sectionId"],
additionalProperties: false,
properties: {
sectionId: { type: "string" },
},
},
handler: async (ctx) => {
captureWorkingDirectory(ctx);
const sectionId = safeString(ctx.input?.sectionId);
const deleted = await mutateState(() => {
const idx = stateCache.sections.findIndex((item) => item.id === sectionId);
if (idx === -1) {
throw new CanvasError("section_not_found", `Unknown section: ${sectionId}`);
}
const [removed] = stateCache.sections.splice(idx, 1);
if (stateCache.fieldSuggestions && typeof stateCache.fieldSuggestions === "object") {
delete stateCache.fieldSuggestions[sectionId];
}
if (stateCache.sectionSchemas && typeof stateCache.sectionSchemas === "object") {
delete stateCache.sectionSchemas[sectionId];
}
stateCache.contentProposals = stateCache.contentProposals.filter((p) => p.sectionId !== sectionId);
stateCache.lastUpdated = nowIso();
addChange({
type: "status_change",
summary: `Section "${removed.name}" deleted.`,
timestamp: stateCache.lastUpdated,
});
return removed.id;
});
return { deleted };
},
},
],
open: async (ctx) => {
captureWorkingDirectory(ctx);
await loadState();
let entry = servers.get(ctx.instanceId);
if (!entry) {
entry = await startServer(ctx.instanceId);
servers.set(ctx.instanceId, entry);
}
stateCache.branch = readBranchFromGit();
stateCache.lastUpdated = nowIso();
await persistState();
publishSse("state_update", stateCache);
return {
title: "Site Studio",
status: summarizeProgress(),
url: entry.url,
};
},
onClose: async (ctx) => {
const entry = servers.get(ctx.instanceId);
if (entry) {
servers.delete(ctx.instanceId);
for (const client of entry.clients) {
try {
client.end();
} catch {}
}
await new Promise((resolve) => entry.server.close(() => resolve()));
}
},
}),
],
});
workspacePath = session.workspacePath;
await loadState();