chore(blog): trim demo comments and apply cleanup (adopt cn, hoist languageMap, chip color)

Author: waleedlatif1

apps/sim/content/blog/agent-as-yjs-peer/components/agent-peer-demo.tsx

@@ -3,19 +3,15 @@
 import { useEffect, useRef, useState } from 'react'
 
 /**
- * A small, self-contained illustration for the post: two peers editing the same document at once.
- * A teammate ("Zoe") extends the intro line while the agent ("Sim") writes a short formatted block
- * below — a bold lead, an inline code chip, and a bullet list, arriving already rendered. Neither one
- * overwrites the other. It is a scripted animation, not a live CRDT, but it is faithful to the idea:
- * both carets advance independently and both edits land.
+ * A small illustration for the post: two peers editing one document at once. A teammate ("Zoe")
+ * extends the intro line while the agent ("Sim") writes a short formatted block below (bold lead,
+ * code chip, bullet list). Neither overwrites the other. A scripted animation, but faithful to the
+ * idea: both carets advance independently and both edits land.
  *
- * Everything is styled from the SAME design tokens the real markdown editor uses (`--font-inter`,
- * `--font-martian-mono`, `--text-primary`, `--surface-5`, `--border`, `--surface-1`, `--bg`), the
- * carets replicate `CollaborationCaret`'s bar + notched name label (rich-markdown-editor.css), and
- * the identity colors are the real `USER_COLORS` (lib/workspaces/colors.ts). No shadows — the app
- * frames surfaces with a 1px border. The finished document is always laid out; unrevealed text is
- * kept `visibility: hidden` so the card never changes size as content streams in. Degrades to the
- * finished document when JavaScript is off or reduced motion is requested.
+ * Styled from the same design tokens as the real markdown editor, with carets replicating
+ * `CollaborationCaret` and identity colors from `USER_COLORS`. The finished document is always laid
+ * out; unrevealed text is kept `visibility: hidden` so the card never resizes as content streams in.
+ * Degrades to the finished document with JavaScript off or reduced motion.
  */
 
 type Seg = { t: string } | { code: string } | { b: string }
@@ -27,16 +23,15 @@ interface Block {
 const FONT_SANS = 'var(--font-inter, ui-sans-serif, system-ui, -apple-system, sans-serif)'
 const FONT_MONO = 'var(--font-martian-mono, ui-monospace, SFMono-Regular, Menlo, monospace)'
 
-// Two collaborators, colored from the real identity palette (USER_COLORS), as getUserColor assigns.
-const AGENT = { name: 'Sim', color: '#60C5FF' } // Blue
-const HUMAN = { name: 'Zoe', color: '#F472B6' } // Pink
+// Colors from the real identity palette (USER_COLORS / getUserColor).
+const AGENT = { name: 'Sim', color: '#60C5FF' }
+const HUMAN = { name: 'Zoe', color: '#F472B6' }
 
 // The intro line already exists; the teammate is still appending to it.
 const HUMAN_BASE = 'Rollout is set for Friday.'
 const HUMAN_ADD = ' Ops signed off this morning.'
 
-// The block the agent writes from empty, streamed one character at a time. It arrives already
-// formatted: the bold lead, the code chip, and the bullets all render as they land.
+// The agent's block, streamed one char at a time, arriving already formatted.
 const AGENT_BLOCKS: Block[] = [
   {
     kind: 'p',
@@ -52,11 +47,9 @@ const HUMAN_TOTAL = HUMAN_ADD.length
 const AGENT_TOTAL = AGENT_FLAT.length
 
 /**
- * Builds a per-character reveal timeline with an organic, non-uniform cadence: a smooth
- * multi-frequency wobble in typing speed, plus natural pauses at spaces and punctuation. Fully
- * deterministic (no RNG) so the server and client agree and it never jitters between renders — the
- * variation comes from the character index and content, not randomness. `times[i]` is the ms at
- * which character `i` should appear.
+ * Per-character reveal timeline with a deterministic (no-RNG) speed wobble plus pauses at spaces and
+ * punctuation, so the server and client agree and it never jitters between renders. `times[i]` is the
+ * ms at which character `i` appears.
  */
 function buildSchedule(
   text: string,
@@ -75,8 +68,7 @@ function buildSchedule(
   return times
 }
 
-// The agent streams a touch faster and steadier (it is a machine); the teammate types slower with
-// bigger word/sentence pauses, and starts a beat later so the two are never metronomically locked.
+// Agent streams faster and steadier; the human is slower and starts a beat later, so the two never lock in sync.
 const AGENT_TIMES = buildSchedule(AGENT_FLAT, { base: 34, wobble: 0.5, space: 45, punct: 150 })
 const HUMAN_TIMES = buildSchedule(HUMAN_ADD, {
   base: 58,
@@ -93,9 +85,7 @@ const countReached = (times: number[], t: number): number => {
   return n
 }
 
-// The demo streams through ONCE when it scrolls into view, then rests on the finished document —
-// no loop, no fade. `RUN_MS` is when the last character has landed; at that point the reveal is
-// clamped to the finished state and the animation stops (no further frames are scheduled).
+// RUN_MS: when the last character lands. The stream plays once, then clamps to the finished doc and stops.
 const RUN_MS = Math.max(lastTime(AGENT_TIMES), lastTime(HUMAN_TIMES))
 
 const proseStyle: React.CSSProperties = {
@@ -116,9 +106,8 @@ const codeStyle: React.CSSProperties = {
   padding: '0.125rem 0.375rem',
 }
 
-/** Replicates CollaborationCaret in its active state: a 2px identity-colored bar with the notched
- *  name label above it (rich-markdown-editor.css `.collaboration-carets__bar` / `__label`). Zero
- *  inline width, so inserting it at the write head never shifts the surrounding text. */
+/** Replicates CollaborationCaret (rich-markdown-editor.css): a 2px identity-colored bar with the
+ *  notched name label above it. Zero inline width, so placing it at the write head never shifts text. */
 function Caret({ who }: { who: typeof HUMAN }) {
   return (
     <span
@@ -165,10 +154,9 @@ function Caret({ who }: { who: typeof HUMAN }) {
   )
 }
 
-/** Render one block's inline segments, revealing up to `revealed` characters (global index) and
- *  reserving the rest with `visibility: hidden` so layout is stable. Drops the caret exactly at the
- *  write head when the boundary falls inside this block. Returns the nodes and whether it placed the
- *  caret, so the caller can append a trailing caret when the whole document is complete. */
+/** Renders a block's segments, revealing up to `revealed` chars and reserving the rest with
+ *  `visibility: hidden` for stable layout. Places the caret at the write head if it falls in this
+ *  block; returns the nodes and whether the caret was placed. */
 function renderBlockNodes(
   block: Block,
   blockStart: number,
@@ -187,10 +175,8 @@ function renderBlockNodes(
     const key = `${blockStart}-${si}`
 
     if ('code' in seg) {
-      // Type the chip in character by character, at the same cadence as the surrounding text, with
-      // the caret moving through it. The box reserves its full width up front (the unrevealed tail is
-      // visibility:hidden inside it) so the card never reflows. Revealing it as one chunk instead made
-      // it either freeze-and-jump (caret parked before an empty gap) or fly past as a skipped unit.
+      // Type the chip char by char with the caret moving through it; the box reserves full width up
+      // front (hidden tail) so the card never reflows. Revealing it as one chunk froze/jumped the caret.
       const reached = revealed >= start
       const shown = reached ? Math.min(raw.length, revealed - start) : 0
       const atBoundary = !didPlace && reached && shown < raw.length
@@ -230,7 +216,7 @@ function renderBlockNodes(
     }
     offset = end
   }
-  // Once the whole block is written, the caret rests at the end of the last block — the peer stays present.
+  // Caret rests at the end of the last block; the peer stays present.
   if (isLast && !didPlace) {
     nodes.push(<Caret key='end-caret' who={AGENT} />)
     didPlace = true
@@ -271,10 +257,8 @@ function AgentDoc({ revealed }: { revealed: number }) {
     offset = blockStart + block.segs.reduce((m, s) => m + segText(s).length, 0)
 
     if (block.kind === 'li') {
-      // The bullet is the <li>'s own list marker, so hiding the item's text with visibility:hidden
-      // would still leave an empty bullet showing. Hide the whole item until the caret reaches it, so
-      // each bullet appears with its line rather than all of them up front. The hidden item still
-      // reserves its height, so the card never changes size.
+      // visibility:hidden on the text still leaves the <li> marker showing, so hide the whole item
+      // until the caret reaches it. Hidden items still reserve height, so the card never resizes.
       list.push(
         <li
           key={`li-${bi}`}
@@ -323,9 +307,7 @@ function Avatar({ who, overlap }: { who: typeof HUMAN; overlap: boolean }) {
 }
 
 export function AgentPeerDemo() {
-  // Initial (SSR / no-JS / reduced-motion) state is the finished document, so the content is always
-  // present without JavaScript. When the demo scrolls into view it resets to empty, streams through
-  // once, and rests on the finished document.
+  // Initial state (SSR / no-JS / reduced-motion) is the finished document; streaming resets it on scroll-in.
   const [humanN, setHumanN] = useState(HUMAN_TOTAL)
   const [agentN, setAgentN] = useState(AGENT_TOTAL)
   const cardRef = useRef<HTMLDivElement>(null)
@@ -335,30 +317,27 @@ export function AgentPeerDemo() {
       typeof window !== 'undefined' &&
       window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
     const el = cardRef.current
-    // Reduced motion, no element, or an environment without IntersectionObserver (older browsers,
-    // some test runners): leave the finished document in place as the fallback and never clear it.
+    // No IntersectionObserver / no element / reduced motion: keep the finished document, never clear it.
     if (reduce || !el || typeof IntersectionObserver === 'undefined') return
 
     let raf = 0
     let played = false
 
     const play = () => {
-      // Clear to empty only now that the demo is actually on screen, so it's never left blank if the
-      // observer never fires (the element never reaches the visibility threshold).
+      // Clear to empty only once on-screen, so the doc is never left blank if the observer never fires.
       setHumanN(0)
       setAgentN(0)
       const start = performance.now()
-      // A character lands every ~30–60ms but frames fire every ~16ms, so most frames reveal nothing
-      // new. Track the last emitted counts and only setState on an actual change, so React renders
-      // roughly once per character (~90 times total) rather than every frame.
+      // Frames fire ~16ms but chars land every ~30-60ms; only setState when a count actually changes,
+      // so React re-renders ~once per character instead of every frame.
       let lastH = 0
       let lastA = 0
       const tick = (now: number) => {
         const t = now - start
         if (t >= RUN_MS) {
           if (lastH !== HUMAN_TOTAL) setHumanN(HUMAN_TOTAL)
           if (lastA !== AGENT_TOTAL) setAgentN(AGENT_TOTAL)
-          return // rest on the finished document — no loop, no further frames
+          return // rest on the finished document; no loop
         }
         const h = countReached(HUMAN_TIMES, t)
         const a = countReached(AGENT_TIMES, t)
@@ -406,7 +385,7 @@ export function AgentPeerDemo() {
           overflow: 'hidden',
         }}
       >
-        {/* header: filename + presence — mirrors Resource.Header (min-height 48px, border-b, px-4). */}
+        {/* header: filename + presence, mirroring Resource.Header. */}
         <div
           style={{
             display: 'flex',
@@ -451,7 +430,7 @@ export function AgentPeerDemo() {
           </span>
         </div>
 
-        {/* document body — the real prose scale (15px / 430 / 25px, --font-inter, --text-primary). */}
+        {/* document body: the real prose scale (see proseStyle). */}
         <div style={{ ...proseStyle, padding: '18px 22px 22px' }}>
           <div
             style={{

apps/sim/lib/content/code.tsx

@@ -8,11 +8,9 @@ interface CodeBlockProps {
 }
 
 /**
- * Blog code block. Renders through emcn's read-only `Code.Viewer` wearing the exact same
- * `chipFieldSurfaceClass` surface the in-app code editor uses (the custom-tools `CodeEditor`),
- * so a fenced block in a post matches the real editor: same Prism theme, gutter, and font, on
- * the same theme-following surface (`--surface-5`/`--border-1`, rounded-lg) — no forced dark,
- * all from existing design tokens.
+ * Blog code block. Renders through emcn's read-only `Code.Viewer` on the same `chipFieldSurfaceClass`
+ * surface as the in-app custom-tools `CodeEditor`, so a fenced block in a post matches the real editor
+ * (Prism theme, gutter, font) on a theme-following surface rather than a forced-dark one.
  */
 export function CodeBlock({ code, language }: CodeBlockProps) {
   return (