fix(db): rotas de canvas sem transacao + feat(chat): bastidores da resposta (#235)

* fix(db): rotas de canvas/artefato sem $transaction nem nested writes

O adapter PrismaNeonHttp nao suporta transacoes nem writes aninhados
($transaction interno), quebrando com "Transactions are not supported in
HTTP mode" (HTTP 500) na criacao/versao/pin de canvas em producao e local.

- POST /conversations/:id/canvases: canvas + versao 1 sequenciais com
  compensacao (delete do canvas se a versao falhar)
- PATCH /canvas/:id e restore: versao + update sequenciais com compensacao
  (remove a versao orfa se o update falhar)
- POST /canvas/:id/pin: artefato + versao 1 sequenciais com compensacao
- POST /projects/:id/artifacts/:id/refresh: versao + update sequenciais
- Resposta serializa versoes via findMany explicito (sem include)
- Testes unitarios atualizados (12/12); validado contra adapter Neon HTTP
  real com banco Neon (todos os shapes pos-fix funcionam)

* feat(chat): bastidores da resposta (roteamento, fallback, TTFT) + nota no feedback

Painel "Bastidores" por mensagem do assistente: provider/modelo efetivo, tier e
motivo do roteamento automático, tentativas de fallback entre provedores, TTFT
e custo — visível na linha de timestamp e num dialogo detalhado (Dialog/Table
reaproveitados de components/ui).

Feedback: thumbs-down agora aceita uma nota curta opcional (MessageReaction.note).

Corrige dois bugs que impediam os bastidores de aparecer:
- O id gerado no cliente para a mensagem do assistente nunca era usado como
  Message.id persistido (o servidor sempre gerava um cuid novo), entao o
  UsageLog nunca encontrava a mensagem certa via join.
- UsageLog.messageId era @unique, mas o roteamento automatico pode tentar
  varios provedores (fallback) para a mesma mensagem, cada um gravando sua
  propria linha - a constraint descartava silenciosamente a tentativa
  bem-sucedida quando uma tentativa anterior ja tinha ocupado o messageId.
  Agora messageId nao e mais unico e GET /conversations/:id/messages agrupa
  todas as tentativas por messageId, escolhendo a bem-sucedida como resumo e
  as demais como "attempts" (fallback cross-provider).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* feat(chat): estima tokens/s quando o provider nao reporta uso real

Providers sem chave de API (Duck.ai, Pollinations, Quillbot etc.) nao expoem
contagem de tokens no upstream - o roteamento automatico cai neles com
frequencia, entao tokens/s ficava sempre vazio nesses casos.

Quando outputTokens vem null do UsageLog, estima a partir do tamanho da
resposta (~4 caracteres por token) tanto na linha inline quanto no dialogo
de bastidores, sempre marcado com "~" para nao parecer um valor exato.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(chat): bastidores aparece so na primeira mensagem apos carregar a pagina

POST /conversations/:id/messages nunca consultava UsageLog - so o GET
seguinte fazia isso. Na pratica isso significava que so as mensagens ja
presentes no ultimo carregamento da pagina mostravam bastidores; qualquer
mensagem enviada depois, na mesma sessao ao vivo, ficava sem os dados ate
recarregar/trocar de conversa.

persistMessages agora roda a mesma consulta/agregacao de UsageLog usada no
GET (reaproveitando buildBackstageByMessageId), entao a resposta do POST
ja vem com os bastidores da mensagem recem-criada.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* fix(chat): propaga bastidores do POST + feat(canvas): alternar preview/codigo

O servidor ja devolvia `backstage` na resposta do POST de mensagens, mas o
cliente descartava: ao reconciliar a mensagem otimista com a persistida ele
copiava apenas `content` e `id`. Resultado: nenhuma mensagem enviada ao vivo
mostrava TTFT/tokens-por-segundo ate recarregar a pagina.

Canvas: html, react e mermaid so tinham o resultado renderizado, sem forma de
inspecionar a fonte. Novo botao alterna entre preview e codigo-fonte (CodeMirror
somente-leitura, com a linguagem certa por tipo). Nao aparece para canvas do
tipo "code", que ja e o proprio fonte.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix: reforça canvas, chat e preparação para produção

---------

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>

Author: actus7

.dockerignore

@@ -13,13 +13,14 @@ dist
 build
 coverage
 
-# Environment files
-.env
-.env.local
-.env.*.local
-.env.development.local
-.env.test.local
-.env.production.local
+# Environment files and local registry credentials
+.env*
+.npmrc
+.yarnrc.yml
+*.pem
+*.key
+*.p12
+*.pfx
 
 # Git
 .git
@@ -40,6 +41,7 @@ Thumbs.db
 # Testing
 coverage
 .nyc_output
+.playwright-cli
 *.lcov
 
 # Logs
@@ -81,3 +83,4 @@ temp
 # Monorepo
 apps
 packages
+manifest-main

.github/workflows/release.yml

@@ -31,17 +31,11 @@ jobs:
 
       - name: Build
         run: pnpm build
-        env:
-          DATABASE_URL: postgresql://dummy:dummy@localhost:5432/dummy
-          DIRECT_URL: postgresql://dummy:dummy@localhost:5432/dummy
-          NEON_AUTH_BASE_URL: https://dummy.neon.tech
-          NEON_AUTH_COOKIE_SECRET: dummy-secret-32-characters-long
-          ENCRYPTION_KEY: 0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef
 
       - name: Generate Release Notes
         id: release_notes
         run: |
-          VERSION=${GITHUB_REF#refs/tags/}
+          VERSION=${GITHUB_REF_NAME#v}
           echo "version=$VERSION" >> $GITHUB_OUTPUT
           
           # Extrair notas do CHANGELOG.md
@@ -86,7 +80,7 @@ jobs:
             type=raw,value=latest
 
       - name: Build and push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           push: true

CHANGELOG.md

@@ -7,6 +7,13 @@ e este projeto adere ao [Semantic Versioning](https://semver.org/lang/pt-BR/).
 
 ## [Unreleased]
 
+### Adicionado
+- Projetos, canvases versionados e artefatos persistidos, com compartilhamento, histórico de versões e respectivas migrações de banco.
+- Bastidores das respostas de chat com roteamento, fallback, TTFT, estimativa de tokens por segundo e notas em reações.
+
+### Segurança
+- Dependências transitivas corrigidas para eliminar os advisories conhecidos dos grafos completo e de produção.
+
 ### Planejado
 - Suporte a mais provedores (Perplexity, Together AI)
 - Sistema de plugins

CLAUDE.md

@@ -72,3 +72,13 @@ GitHub Actions runs lint, typecheck, test, and build in parallel on push/PR to m
 - 2-space indentation, single quotes, semicolons (Prettier configured in `.prettierrc`)
 - Prefer Server Components; use `"use client"` only when needed
 - Tests colocated with source files (e.g., `lib/chat-stream.test.ts`)
+
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->

Dockerfile

@@ -0,0 +1,67 @@
+FROM node:22-bookworm-slim AS base
+
+ENV NEXT_TELEMETRY_DISABLED=1 \
+    PUPPETEER_SKIP_DOWNLOAD=true
+
+WORKDIR /app
+
+RUN corepack enable \
+    && corepack prepare pnpm@10.33.0 --activate
+
+
+FROM base AS dependencies
+
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+RUN pnpm install --frozen-lockfile --ignore-scripts
+
+
+FROM base AS production-dependencies
+
+ENV NODE_ENV=production
+
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+RUN pnpm install --prod --frozen-lockfile --ignore-scripts
+
+
+FROM base AS builder
+
+ENV NODE_ENV=production
+
+COPY --from=dependencies /app/node_modules ./node_modules
+COPY . .
+
+# Prisma 7 writes the client to generated/prisma. Generation does not require
+# a live database; prisma.config.ts supplies a non-secret fallback URL here.
+RUN pnpm prisma:generate \
+    && pnpm build
+
+
+FROM node:22-bookworm-slim AS runner
+
+ENV NODE_ENV=production \
+    NEXT_TELEMETRY_DISABLED=1 \
+    PUPPETEER_SKIP_DOWNLOAD=true \
+    PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium \
+    HOSTNAME=0.0.0.0 \
+    PORT=3000
+
+WORKDIR /app
+
+RUN apt-get update \
+    && apt-get install --no-install-recommends -y ca-certificates chromium \
+    && rm -rf /var/lib/apt/lists/* \
+    && mkdir -p /app/logs \
+    && chown node:node /app/logs
+
+COPY --from=production-dependencies --chown=node:node /app/node_modules ./node_modules
+COPY --from=builder --chown=node:node /app/.next ./.next
+COPY --from=builder --chown=node:node /app/generated ./generated
+COPY --from=builder --chown=node:node /app/public ./public
+COPY --from=builder --chown=node:node /app/next.config.ts ./next.config.ts
+COPY --from=builder --chown=node:node /app/package.json ./package.json
+
+USER node
+
+EXPOSE 3000
+
+CMD ["node_modules/.bin/next", "start"]

README.md

@@ -11,7 +11,7 @@
     <a href="https://github.com/actus7/modelhub/actions/workflows/ci.yml"><img alt="CI" src="https://github.com/actus7/modelhub/actions/workflows/ci.yml/badge.svg" /></a>
     <a href="LICENSE"><img alt="Licença MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" /></a>
     <a href="https://nodejs.org"><img alt="Node.js >= 22" src="https://img.shields.io/badge/node-%3E%3D22.0.0-brightgreen" /></a>
-    <a href="https://nextjs.org/"><img alt="Next.js 16.2" src="https://img.shields.io/badge/Next.js-16.2-black" /></a>
+    <a href="https://nextjs.org/"><img alt="Next.js 16.3" src="https://img.shields.io/badge/Next.js-16.3-black" /></a>
     <a href="https://www.typescriptlang.org/"><img alt="TypeScript 5" src="https://img.shields.io/badge/TypeScript-5.x-blue" /></a>
     <a href="https://hono.dev/"><img alt="Hono 4" src="https://img.shields.io/badge/Hono-4.x-E36002?logo=hono&logoColor=white" /></a>
     <a href="https://www.prisma.io/"><img alt="Prisma 7" src="https://img.shields.io/badge/Prisma-7.x-2D3748?logo=prisma&logoColor=white" /></a>
@@ -56,6 +56,10 @@ Em vez de cada aplicação integrar vários provedores separadamente, o ModelHub
     <td><strong>Roteamento inteligente</strong><br />Tiers por complexidade, overrides por tarefa e fallbacks automáticos.</td>
     <td><strong>Anexos no chat</strong><br />Suporte a imagens, PDFs e documentos.</td>
   </tr>
+  <tr>
+    <td><strong>Canvas versionado</strong><br />Edite, visualize, restaure e compartilhe conteúdo Markdown, código, HTML, React e Mermaid.</td>
+    <td><strong>Projetos</strong><br />Agrupe conversas, instruções, arquivos de conhecimento e artefatos reutilizáveis.</td>
+  </tr>
   <tr>
     <td><strong>Catálogo dinâmico</strong><br />Modelos locais e busca remota quando o provider suporta.</td>
     <td><strong>Pronto para produção</strong><br />Rate limit, cooldown, headers de segurança, CI e deploy na Vercel.</td>
@@ -200,6 +204,7 @@ O campo `model` segue o formato `provider/model`, por exemplo:
 | Rota | Descrição |
 |---|---|
 | `/chat` | Conversa com provedores configurados |
+| `/projects` | Projetos, arquivos de conhecimento e artefatos de canvas |
 | `/setup` | Integrações e credenciais por provider |
 | `/dashboard` | API keys, uso, custos, logs e routing |
 | `/account` | Informações da conta |
@@ -240,7 +245,7 @@ A aplicação usa duas camadas:
 
 O banco é PostgreSQL via Neon, acessado com Prisma 7 e `@prisma/adapter-neon`.
 
-Modelos importantes: `User`, `ApiKey`, `ProviderCredential`, `Conversation`, `Message`, `ConversationAttachment`, `UsageLog`, `UserMemory` e `UserSettings`.
+Modelos importantes: `User`, `ApiKey`, `ProviderCredential`, `Conversation`, `Message`, `ConversationAttachment`, `Project`, `ProjectFile`, `ProjectArtifact`, `Canvas`, `UsageLog`, `UserMemory` e `UserSettings`.
 
 Para mudanças de schema:
 

README_EN.md

@@ -11,7 +11,7 @@
     <a href="https://github.com/actus7/modelhub/actions/workflows/ci.yml"><img alt="CI" src="https://github.com/actus7/modelhub/actions/workflows/ci.yml/badge.svg" /></a>
     <a href="LICENSE"><img alt="MIT License" src="https://img.shields.io/badge/License-MIT-yellow.svg" /></a>
     <a href="https://nodejs.org"><img alt="Node.js >= 22" src="https://img.shields.io/badge/node-%3E%3D22.0.0-brightgreen" /></a>
-    <a href="https://nextjs.org/"><img alt="Next.js 16.2" src="https://img.shields.io/badge/Next.js-16.2-black" /></a>
+    <a href="https://nextjs.org/"><img alt="Next.js 16.3" src="https://img.shields.io/badge/Next.js-16.3-black" /></a>
     <a href="https://www.typescriptlang.org/"><img alt="TypeScript 5" src="https://img.shields.io/badge/TypeScript-5.x-blue" /></a>
     <a href="https://hono.dev/"><img alt="Hono 4" src="https://img.shields.io/badge/Hono-4.x-E36002?logo=hono&logoColor=white" /></a>
     <a href="https://www.prisma.io/"><img alt="Prisma 7" src="https://img.shields.io/badge/Prisma-7.x-2D3748?logo=prisma&logoColor=white" /></a>
@@ -56,6 +56,10 @@ Instead of each application integrating multiple providers separately, ModelHub
     <td><strong>Smart routing</strong><br />Tiers by complexity, per-task overrides, and automatic fallbacks.</td>
     <td><strong>Chat attachments</strong><br />Support for images, PDFs, and documents.</td>
   </tr>
+  <tr>
+    <td><strong>Versioned canvas</strong><br />Edit, preview, restore, and share Markdown, code, HTML, React, and Mermaid content.</td>
+    <td><strong>Projects</strong><br />Group conversations, instructions, knowledge files, and reusable artifacts.</td>
+  </tr>
   <tr>
     <td><strong>Dynamic catalog</strong><br />Local models and remote search when the provider supports it.</td>
     <td><strong>Production-ready</strong><br />Rate limiting, cooldown, security headers, CI, and Vercel deploy.</td>
@@ -200,6 +204,7 @@ The `model` field follows the `provider/model` format, for example:
 | Route | Description |
 |---|---|
 | `/chat` | Chat with configured providers |
+| `/projects` | Projects, knowledge files, and canvas artifacts |
 | `/setup` | Integrations and credentials per provider |
 | `/dashboard` | API keys, usage, costs, logs, and routing |
 | `/account` | Account information |
@@ -240,7 +245,7 @@ The application uses two layers:
 
 The database is PostgreSQL via Neon, accessed with Prisma 7 and `@prisma/adapter-neon`.
 
-Key models: `User`, `ApiKey`, `ProviderCredential`, `Conversation`, `Message`, `ConversationAttachment`, `UsageLog`, `UserMemory`, and `UserSettings`.
+Key models: `User`, `ApiKey`, `ProviderCredential`, `Conversation`, `Message`, `ConversationAttachment`, `Project`, `ProjectFile`, `ProjectArtifact`, `Canvas`, `UsageLog`, `UserMemory`, and `UserSettings`.
 
 For schema changes:
 

app/(app)/projects/[id]/page.tsx

@@ -1,9 +1,10 @@
 import { ProjectDetailPage } from "@/components/projects/project-detail-page";
 
-export default function ProjectRoutePage({
+export default async function ProjectRoutePage({
   params,
 }: {
   params: Promise<{ id: string }>;
 }) {
-  return <ProjectDetailPage projectIdPromise={params} />;
+  const { id } = await params;
+  return <ProjectDetailPage projectId={id} />;
 }

app/accent-provider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 
 import { apiJson } from "@/lib/api";
 import { isValidAccentColor, type AccentColorId } from "@/lib/accent-colors";
@@ -30,20 +30,37 @@ function applyAccentToDocument(accent: AccentColorId | null) {
  */
 export function AccentProvider({ children }: { children: React.ReactNode }) {
   const [accent, setAccentState] = useState<AccentColorId | null>(null);
+  const localChangeVersionRef = useRef(0);
 
   useEffect(() => {
     let cancelled = false;
 
     async function loadAccent() {
+      const loadVersion = localChangeVersionRef.current;
+      const locallyApplied = document.documentElement.getAttribute("data-accent");
+      if (isValidAccentColor(locallyApplied)) {
+        setAccentState(locallyApplied);
+      }
+
       try {
         const data = await apiJson<{ settings?: { accentColor?: string | null } }>(
           "/user/settings",
         );
-        if (cancelled) return;
-        const stored = data.settings?.accentColor;
-        if (isValidAccentColor(stored)) {
-          setAccentState(stored);
-          applyAccentToDocument(stored);
+        if (cancelled || loadVersion !== localChangeVersionRef.current) return;
+        if (data.settings && "accentColor" in data.settings) {
+          const stored = data.settings.accentColor;
+          const next = isValidAccentColor(stored) ? stored : "default";
+          setAccentState(next);
+          applyAccentToDocument(next);
+          try {
+            if (next === "default") {
+              window.localStorage.removeItem(ACCENT_STORAGE_KEY);
+            } else {
+              window.localStorage.setItem(ACCENT_STORAGE_KEY, next);
+            }
+          } catch {
+            // localStorage bloqueado: o valor do servidor ainda vale nesta aba.
+          }
         }
       } catch {
         // Sem sessão ou offline: mantém o que o script inline aplicou.
@@ -57,6 +74,7 @@ export function AccentProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   const setAccent = useCallback((next: AccentColorId | null) => {
+    localChangeVersionRef.current += 1;
     setAccentState(next);
     applyAccentToDocument(next);
     try {

app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata, Viewport } from "next";
 import { Inter, JetBrains_Mono, Source_Serif_4 } from "next/font/google";
+import Script from "next/script";
 import { Analytics } from "@vercel/analytics/next";
 
 import { Providers } from "./providers";
@@ -55,7 +56,9 @@ export default function RootLayout({
     >
       <head>
         {/* Aplica o accent salvo antes da hidratação para evitar flash (issue #177). */}
-        <script
+        <Script
+          id="modelhub-accent"
+          strategy="beforeInteractive"
           dangerouslySetInnerHTML={{
             __html: `(function(){try{var a=localStorage.getItem("modelhub-accent");var v=["blue","violet","emerald","orange","rose","teal"];if(a&&v.indexOf(a)!==-1){document.documentElement.setAttribute("data-accent",a)}}catch(e){}})();`,
           }}