Markdown Edit/Preview tabs + read-only .md viewer for skills & profiles

Adds MarkdownEditor (react-markdown + remark-gfm, no raw HTML — authored/retrieved content is data, not markup) with Edit | Preview tabs, wired into the AGENTS.md and SKILL.md editors, the agent persona, and the review artifact. Adds a read-only "View" on every skill and agent-profile card — including builtins, which previously had no way to be inspected at all — rendering the full SKILL.md / AGENTS.md (frontmatter + body + actions/golden tests). Collapses a same-version builtin that an org has forked so its own copy shadows it, keeping the version picker unambiguous and the item clearly editable/versionable. Also lands the agent-face wiring on the seat configurator (a live xl preview with a state cycler) and the review inbox header. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-15 15:26:14 +03:30
parent d50cd2790e
commit 4758e4b5de
8 changed files with 1841 additions and 20 deletions
@@ -0,0 +1,114 @@
+/*
+ * Prose styling for rendered markdown previews. Scoped to .md-prose so it never leaks into the app
+ * chrome. Uses the design tokens so it adapts to light/dark like everything else.
+ */
+.md-prose {
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--foreground);
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+}
+.md-prose > :first-child { margin-top: 0; }
+.md-prose > :last-child { margin-bottom: 0; }
+
+.md-prose h1,
+.md-prose h2,
+.md-prose h3,
+.md-prose h4 {
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 1.2em 0 0.5em;
+}
+.md-prose h1 { font-size: 1.4em; }
+.md-prose h2 { font-size: 1.2em; }
+.md-prose h3 { font-size: 1.05em; }
+.md-prose h4 { font-size: 1em; }
+.md-prose h1,
+.md-prose h2 {
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid var(--border);
+}
+
+.md-prose p,
+.md-prose ul,
+.md-prose ol,
+.md-prose blockquote,
+.md-prose table,
+.md-prose pre { margin: 0 0 0.75em; }
+
+.md-prose ul,
+.md-prose ol { padding-left: 1.4em; }
+.md-prose li { margin: 0.2em 0; }
+.md-prose li > ul,
+.md-prose li > ol { margin: 0.2em 0; }
+
+.md-prose a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.md-prose code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.85em;
+  background: var(--muted);
+  padding: 0.12em 0.35em;
+  border-radius: 4px;
+}
+.md-prose pre {
+  background: var(--muted);
+  padding: 0.8em 1em;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+.md-prose pre code {
+  background: transparent;
+  padding: 0;
+  font-size: 0.85em;
+}
+
+.md-prose blockquote {
+  border-left: 3px solid var(--border);
+  padding-left: 0.9em;
+  color: var(--muted-foreground);
+}
+
+.md-prose table {
+  width: 100%;
+  border-collapse: collapse;
+  display: block;
+  overflow-x: auto;
+}
+.md-prose th,
+.md-prose td {
+  border: 1px solid var(--border);
+  padding: 0.4em 0.6em;
+  text-align: left;
+}
+.md-prose th { background: var(--muted); font-weight: 600; }
+
+.md-prose hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1.2em 0;
+}
+
+.md-prose img { max-width: 100%; border-radius: 6px; }
+
+.md-prose input[type='checkbox'] { margin-right: 0.4em; }
+
+/* The frontmatter block (YAML) shown above the rendered body for .md-file editors. */
+.md-frontmatter {
+  margin: 0 0 1em;
+  padding: 0.6em 0.85em;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--muted);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.78rem;
+  line-height: 1.5;
+  color: var(--muted-foreground);
+  white-space: pre-wrap;
+  word-break: break-word;
+}