rivet-design 0.10.3 → 0.10.4

package/dist/mcp/agent-variants/WorktreeOrchestrator.js

@@ -691,7 +691,7 @@ class AgentVariantsOrchestrator {
         const artifact = findDesignContextArtifact(this.store.getProjectContext(sessionId), artifactId);
         return artifact?.content;
     }
-    /** Build the raw-plus-rendered DesignMD document for an artifact link. */
+    /** Build the rendered DesignMD document for an artifact link. */
     getDesignContextViewerHtml(sessionId, artifactId) {
         const artifact = findDesignContextArtifact(this.store.getProjectContext(sessionId), artifactId);
         return artifact ? buildDesignContextViewerDocument(artifact) : undefined;
@@ -846,6 +846,7 @@ class AgentVariantsOrchestrator {
             count,
             target: args.target,
             projectContext,
+            runLabel: args.runLabel,
         });
         if (proposeResult.stage !== 'awaiting_briefs' ||
             !proposeResult.briefWorkItem) {
@@ -1115,6 +1116,39 @@ class AgentVariantsOrchestrator {
             alreadyTerminal: result.alreadyTerminal,
         };
     }
+    /**
+     * Remove a variant from the UI. Hides it from the active snapshot for good
+     * (it's filtered out of progress/summary/terminal accounting too) while
+     * retaining it in `.rivet/variants/` with status `removed` so the work is
+     * kept, never rendered again. Mirrors `cancelVariant`'s shape; idempotent.
+     */
+    async removeVariant(args) {
+        const result = this.store.removeWorkItem({
+            sessionId: args.sessionId,
+            workItemId: args.variantId,
+        });
+        this.telemetry.track('agent_variants.variant_removed', {
+            source: 'mcp',
+            sessionId: args.sessionId,
+            variantId: args.variantId,
+            finalStatus: result.finalStatus,
+            sessionStage: result.sessionStage,
+            alreadyRemoved: result.alreadyRemoved,
+        });
+        if (!result.alreadyRemoved) {
+            void this.markPersistedVariantRemoved(args.sessionId, args.variantId).catch((err) => {
+                log.warn(`markPersistedVariantRemoved failed for ${args.sessionId}/${args.variantId}`, err);
+            });
+        }
+        this.emitChange();
+        return {
+            sessionId: args.sessionId,
+            variantId: args.variantId,
+            finalStatus: result.finalStatus,
+            sessionStage: result.sessionStage,
+            alreadyRemoved: result.alreadyRemoved,
+        };
+    }
     /**
      * User has reviewed the rendered variants in chat and picked one. Look up
      * the captured diff, build a VariantPickEnvelope, and enqueue to the
@@ -2223,6 +2257,7 @@ class AgentVariantsOrchestrator {
             label: input.briefLabel,
             brief: input.briefBody,
             sessionPrompt,
+            runLabel: this.store.getRunLabel(args.sessionId),
             kind: 'diff',
             diff: args.diff,
             sourceDir,
@@ -2304,6 +2339,7 @@ class AgentVariantsOrchestrator {
                 label: input.briefLabel,
                 brief: input.briefBody,
                 sessionPrompt,
+                runLabel: this.store.getRunLabel(args.sessionId),
                 kind: 'project-created',
                 sourceDir,
                 preview,
@@ -2388,6 +2424,22 @@ class AgentVariantsOrchestrator {
             status: 'cancelled',
         });
     }
+    async markPersistedVariantRemoved(sessionId, variantId) {
+        if (!this.store.hasSession(sessionId))
+            return;
+        const projectPath = await this.resolveHistoryProjectPath(sessionId);
+        if (!projectPath)
+            return;
+        // No-ops (ENOENT) when the variant was never persisted — e.g. removing a
+        // still-pending variant that produced no artifact. Completed variants have
+        // a manifest, which flips to `removed` and is retained on disk.
+        await this.variantHistory.markStatus({
+            projectPath,
+            sessionId,
+            variantId,
+            status: 'removed',
+        });
+    }
     /**
      * Resolve the project path that owns `.rivet/variants/` for a session.
      * Existing sessions: the user's project (via `resolveEnv`). Fresh sessions:
@@ -3205,8 +3257,7 @@ const buildDesignContextViewUrl = (sessionId, artifactId) => {
 };
 const buildDesignContextViewerDocument = (artifact) => {
     const title = `${artifact.label} DESIGN.md`;
-    const visualHtml = renderDesignMarkdown(artifact.content);
-    const rawMarkdown = escapeHtml(artifact.content);
+    const visualHtml = renderDesignMarkdown(artifact.content, artifact.label);
     return `<!doctype html>
 <html lang="en">
 <head>
@@ -3215,131 +3266,131 @@ const buildDesignContextViewerDocument = (artifact) => {
   <title>${escapeHtml(title)}</title>
   <style>
     :root {
-      color-scheme: light;
-      --ink: #201b16;
-      --muted: #75695e;
-      --paper: #fbf7ef;
-      --panel: #fffdf8;
-      --rule: #eadfcf;
-      --accent: #e45d2f;
-      --accent-soft: #ffe0d3;
-      --code: #2a2521;
+      color-scheme: dark;
+      --font-main: 'Satoshi', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+      --main: #1C1C20;
+      --main-light: #1E1E22;
+      --main-input: #2E2E2E;
+      --main-border: #232328;
+      --main-hover: #404040;
+      --content: #ffffff;
+      --content-muted: #d1d5db;
+      --content-subtle: #9ca3af;
+      --divider: #4b5563;
+      --primary: #FF3300;
+      --primary-border: #ff6b35;
     }
     * { box-sizing: border-box; }
     body {
       margin: 0;
       min-height: 100vh;
-      background:
-        radial-gradient(circle at top left, rgba(228, 93, 47, 0.18), transparent 36rem),
-        linear-gradient(135deg, #fbf7ef 0%, #f2eadc 100%);
-      color: var(--ink);
-      font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
+      background: var(--main);
+      color: var(--content);
+      font-family: var(--font-main);
     }
-    main {
-      width: min(1440px, calc(100vw - 40px));
-      margin: 0 auto;
-      padding: 40px 0;
+    .page-shell {
+      min-height: 100vh;
+      padding: 22px 28px 56px;
     }
-    header {
+    .topbar {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 24px;
-      margin-bottom: 24px;
-      border-bottom: 1px solid var(--rule);
-      padding-bottom: 18px;
-    }
-    h1 {
-      margin: 0;
-      max-width: 780px;
-      font-size: clamp(2rem, 5vw, 4.5rem);
-      letter-spacing: -0.06em;
-      line-height: 0.92;
-    }
-    .mode-input {
-      position: absolute;
-      opacity: 0;
-      pointer-events: none;
+      margin-bottom: 28px;
     }
-    .mode-toggle {
+    .brand {
       display: inline-flex;
-      flex-shrink: 0;
-      gap: 4px;
-      border: 1px solid var(--rule);
-      border-radius: 999px;
-      background: rgba(255, 253, 248, 0.72);
-      padding: 4px;
-      box-shadow: 0 12px 30px rgba(61, 44, 26, 0.08);
-    }
-    .mode-toggle label {
-      position: relative;
-      cursor: pointer;
-      border-radius: 999px;
-      padding: 8px 14px;
-      color: var(--muted);
-      font: 600 0.74rem/1.2 ui-sans-serif, system-ui, sans-serif;
-      letter-spacing: 0.12em;
-      text-transform: uppercase;
-      transition:
-        background 160ms ease,
-        color 160ms ease;
-    }
-    .mode-toggle label:has(input:checked) {
-      background: var(--ink);
-      color: var(--paper);
+      align-items: center;
+      min-height: 28px;
     }
-    .viewer {
+    .brand-logo {
       display: block;
+      width: 64px;
+      height: auto;
     }
-    .viewer-panel {
-      display: none;
+    .avatar {
+      width: 28px;
+      height: 28px;
+      border: 1px solid var(--main-border);
+      border-radius: 8px;
+      background: var(--main-light);
     }
-    main:has(#designmd-visual-mode:checked) .visual-panel,
-    main:has(#designmd-raw-mode:checked) .raw-panel {
-      display: block;
+    main {
+      width: min(1120px, calc(100vw - 56px));
+      margin: 0 auto;
     }
-    .panel {
+    .document {
       overflow: hidden;
-      border: 1px solid var(--rule);
-      border-radius: 18px;
-      background: color-mix(in srgb, var(--panel) 92%, white);
-      box-shadow: 0 20px 60px rgba(61, 44, 26, 0.12);
-    }
-    .panel-title {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      border-bottom: 1px solid var(--rule);
-      padding: 12px 16px;
-      color: var(--muted);
-      font: 700 0.72rem/1 ui-sans-serif, system-ui, sans-serif;
-      letter-spacing: 0.12em;
+      border: 1px solid var(--main-border);
+      border-radius: 22px;
+      background: var(--main-light);
+      box-shadow: 0 18px 60px rgb(0 0 0 / 18%);
+    }
+    .document-title {
+      padding: 42px 46px 32px;
+    }
+    .eyebrow {
+      margin: 0 0 14px;
+      color: var(--content-subtle);
+      font-size: 0.68rem;
+      font-weight: 700;
+      letter-spacing: 0.16em;
       text-transform: uppercase;
     }
+    .file-title {
+      margin: 0;
+      color: var(--content);
+      font-size: clamp(2.35rem, 6vw, 4.9rem);
+      font-weight: 600;
+      letter-spacing: -0.07em;
+      line-height: 0.94;
+    }
     .visual {
-      padding: 24px;
+      border-top: 1px solid var(--main-border);
+      max-width: none;
+      margin: 0 auto;
+      padding: 36px 46px 48px;
+    }
+    .visual-inner {
+      max-width: 720px;
+      margin: 0 auto;
     }
     .visual h1,
     .visual h2,
     .visual h3 {
-      margin: 1.3em 0 0.45em;
-      letter-spacing: -0.04em;
-      line-height: 1;
+      margin: 1.2em 0 0.4em;
+      color: var(--content);
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      line-height: 1.15;
     }
     .visual h1:first-child,
     .visual h2:first-child,
     .visual h3:first-child {
       margin-top: 0;
     }
-    .visual h1 { font-size: 2.25rem; }
-    .visual h2 { font-size: 1.6rem; }
-    .visual h3 { font-size: 1.18rem; }
+    .visual h1 { font-size: 1.25rem; }
+    .visual h2 { font-size: 1.1rem; }
+    .visual h3 { font-size: 1rem; }
+    .visual h2 + p,
+    .visual h2 + ul {
+      border-left: 1px solid var(--main-border);
+      padding-left: 14px;
+    }
     .visual p,
     .visual li,
     .visual blockquote {
-      color: #3d342c;
-      font-size: 1rem;
-      line-height: 1.62;
+      color: var(--content-muted);
+      font-size: 0.88rem;
+      line-height: 1.6;
+    }
+    .visual strong {
+      color: var(--content);
+      font-weight: 650;
+    }
+    .visual a {
+      color: var(--primary-border);
     }
     .visual ul {
       display: grid;
@@ -3348,71 +3399,67 @@ const buildDesignContextViewerDocument = (artifact) => {
     }
     .visual blockquote {
       margin: 18px 0;
-      border-left: 4px solid var(--accent);
+      border-left: 3px solid var(--primary);
       padding-left: 14px;
-      color: var(--muted);
+      color: var(--content-subtle);
     }
     .visual code {
       border-radius: 6px;
-      background: var(--accent-soft);
+      border: 1px solid var(--main-border);
+      background: var(--main-input);
+      color: var(--content);
       padding: 0.12rem 0.34rem;
-      font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+      font-family: var(--font-mono);
       font-size: 0.92em;
     }
     pre {
       margin: 0;
-      max-height: calc(100vh - 190px);
       overflow: auto;
-      background: #181512;
-      color: #f9ead7;
-      padding: 20px;
-      font: 0.78rem/1.55 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+      background: var(--main);
+      color: var(--content-muted);
+      padding: 16px;
+      font: 0.78rem/1.55 var(--font-mono);
       white-space: pre-wrap;
       word-break: break-word;
     }
     @media (max-width: 900px) {
-      main { width: min(100vw - 24px, 760px); padding: 24px 0; }
-      header { align-items: start; flex-direction: column; }
-      pre { max-height: 520px; }
+      .page-shell { padding: 18px 12px 34px; }
+      .topbar { margin-bottom: 18px; padding: 0 4px; }
+      main { width: min(100vw - 24px, 760px); }
+      .document { border-radius: 18px; }
+      .document-title { padding: 30px 24px 24px; }
+      .file-title { font-size: clamp(2rem, 12vw, 3.6rem); }
+      .visual { padding: 26px 24px 34px; }
     }
   </style>
 </head>
 <body>
-  <main>
-    <header>
-      <h1>${escapeHtml(title)}</h1>
-      <div class="mode-toggle" aria-label="DesignMD view mode">
-        <label>
-          <input class="mode-input" type="radio" name="designmd-view-mode" id="designmd-visual-mode" checked />
-          <span>Visual</span>
-        </label>
-        <label>
-          <input class="mode-input" type="radio" name="designmd-view-mode" id="designmd-raw-mode" />
-          <span>Raw</span>
-        </label>
-      </div>
+  <div class="page-shell">
+    <header class="topbar" aria-label="Rivet">
+      <div class="brand"><img class="brand-logo" src="/assets/logo.png" alt="Rivet" /></div>
+      <div class="avatar" aria-hidden="true"></div>
     </header>
-    <section class="viewer" aria-label="DesignMD artifact">
-      <article class="panel viewer-panel visual-panel" id="designmd-visual">
-        <div class="panel-title"><span>Visual</span><span>Rendered DESIGN.md</span></div>
-        <div class="visual">${visualHtml}</div>
+    <main>
+      <article class="document" id="designmd-visual" aria-label="DesignMD artifact">
+        <div class="document-title">
+          <p class="eyebrow">Design Context</p>
+          <h1 class="file-title">${escapeHtml(title)}</h1>
+        </div>
+        <div class="visual"><div class="visual-inner">${visualHtml}</div></div>
       </article>
-      <article class="panel viewer-panel raw-panel" id="designmd-raw">
-        <div class="panel-title"><span>Raw</span><span>Markdown source</span></div>
-        <pre>${rawMarkdown}</pre>
-      </article>
-    </section>
-  </main>
+    </main>
+  </div>
 </body>
 </html>`;
 };
-const renderDesignMarkdown = (markdown) => {
+const renderDesignMarkdown = (markdown, artifactLabel) => {
     const lines = markdown.replace(/\r\n/g, '\n').split('\n');
     const output = [];
     const paragraph = [];
     const listItems = [];
     const codeLines = [];
     let isCodeBlock = false;
+    let skippedFirstH1 = false;
     const flushParagraph = () => {
         if (paragraph.length === 0)
             return;
@@ -3464,7 +3511,15 @@ const renderDesignMarkdown = (markdown) => {
             flushParagraph();
             flushList();
             const level = Math.min(headingMatch[1].length, 3);
-            output.push(`<h${level}>${renderInlineMarkdown(headingMatch[2])}</h${level}>`);
+            const headingText = headingMatch[2].trim();
+            const isDuplicateTitle = headingText === artifactLabel ||
+                headingText === `${artifactLabel} DESIGN.md`;
+            // The viewer header already renders the artifact title.
+            if (level === 1 && !skippedFirstH1 && isDuplicateTitle) {
+                skippedFirstH1 = true;
+                return;
+            }
+            output.push(`<h${level}>${renderInlineMarkdown(headingText)}</h${level}>`);
             return;
         }
         const listMatch = trimmed.match(/^[-*]\s+(.+)$/);