agent-canvas 0.1.44 → 0.2.0

package/daemon/client/components/Table.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-
-interface TableProps {
-  headers: string[];
-  rows: string[][];
-}
-
-export function Table({ headers, rows }: TableProps) {
-  return (
-    <div className="overflow-x-auto mt-3" data-md="table">
-      <table className="w-full text-body">
-        <thead>
-          <tr className="border-b border-border-subtle">
-            {headers.map((h, i) => (
-              <th key={i} className="text-left px-4 py-2.5 text-meta font-medium uppercase tracking-wider text-text-tertiary font-body">
-                {h}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((row, ri) => (
-            <tr key={ri} className={`relative border-b border-border-subtle last:border-b-0 transition-colors hover:bg-bg-surface/50 ${ri % 2 === 1 ? "bg-bg-surface/30" : ""}`}>
-              {row.map((cell, ci) => (
-                <td key={ci} className="px-4 py-2.5 text-text-secondary font-body">
-                  {cell}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/daemon/client/components/Task.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-import { renderMarkdownChildren } from "./renderMarkdownChildren";
-
-type Status = "todo" | "done" | "blocked" | "in-progress";
-type BadgeVariant = "info" | "success" | "warning" | "danger" | "neutral";
-
-interface ItemProps {
-  id: string;
-  label: string;
-  status?: Status;
-  badge?: string;
-  badgeVariant?: BadgeVariant;
-  children?: React.ReactNode;
-}
-
-const dotColors: Record<Status, string> = {
-  todo: "bg-border-hover",
-  done: "bg-accent-green",
-  blocked: "bg-accent-red",
-  "in-progress": "bg-accent-blue",
-};
-
-const statusLabels: Record<Status, string> = {
-  todo: "Todo",
-  done: "Done",
-  blocked: "Blocked",
-  "in-progress": "In progress",
-};
-
-const badgeStyles: Record<BadgeVariant, string> = {
-  info: "bg-accent-blue-muted text-accent-blue",
-  success: "bg-accent-green-muted text-accent-green",
-  warning: "bg-accent-amber-muted text-accent-amber",
-  danger: "bg-accent-red-muted text-accent-red",
-  neutral: "bg-border-subtle text-text-tertiary",
-};
-
-export function Item({ id, label, status, badge, badgeVariant = "neutral", children }: ItemProps) {
-  return (
-    <div
-      className="group/task relative -mx-4 px-4 py-3 rounded-md transition-colors duration-150 hover:bg-bg-input"
-      data-task-id={id}
-      data-md="item"
-      data-md-label={label}
-      {...(status ? { "data-md-status": status } : {})}
-      {...(badge ? { "data-md-badge": badge } : {})}
-    >
-      <div className="flex items-start gap-3">
-        {status && <span className={`w-2 h-2 rounded-full mt-[7px] flex-shrink-0 ${dotColors[status]}`} />}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-baseline gap-2">
-            <span className="font-body text-task-label font-semibold text-text-primary">{label}</span>
-            {status && (
-              <span className="font-body text-tiny uppercase tracking-wider text-text-tertiary opacity-0 group-hover/task:opacity-100 transition-opacity duration-150">
-                {statusLabels[status]}
-              </span>
-            )}
-            {badge && (
-              <span className={`font-body text-tiny font-medium px-1.5 py-px rounded-full ${badgeStyles[badgeVariant]}`}>
-                {badge}
-              </span>
-            )}
-          </div>
-          {children && (
-            <div className="text-body text-text-secondary mt-1 leading-relaxed">{renderMarkdownChildren(children)}</div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/** @deprecated Use <Item> instead */
-export function Task(props: ItemProps) {
-  return <Item {...props} />;
-}

package/daemon/client/components/UserInput.tsx

@@ -1,174 +0,0 @@
-import React, { useRef, useState } from "react";
-import { useAnnotations } from "#canvas/runtime";
-import { ResponseNote } from "./ResponseNote";
-import { autoResizeTextarea } from "../utils";
-
-/** Free text input from user */
-interface UserInputProps {
-  id: string;
-  label: string;
-  placeholder?: string;
-  multiline?: boolean;
-  required?: boolean;
-}
-
-export function UserInput({ id, label, placeholder, multiline, required }: UserInputProps) {
-  const { responses, setResponse } = useAnnotations();
-  const current = responses.get(id);
-  const value = (current?.value as string) ?? "";
-  const note = current?.note || "";
-  const [showNote, setShowNote] = useState(false);
-  const ref = useRef<HTMLTextAreaElement>(null);
-
-  if (!responses.has(id)) {
-    setResponse(id, { id, type: "text", label, value: "", required });
-  }
-
-  const handleChange = (v: string) => {
-    setResponse(id, { ...current!, value: v });
-  };
-
-  const autoResize = (el: HTMLTextAreaElement) => autoResizeTextarea(el, multiline ? 60 : 32);
-
-  const showError = current?.required && !value.trim();
-
-  return (
-    <div data-md="userinput" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg transition-colors duration-150 hover:bg-bg-input">
-      <div className="flex items-baseline gap-2 mb-2">
-        <span className="text-[13px] font-body font-medium text-text-primary">{label}</span>
-        {required && <span className="text-[10px] text-accent-red font-body">*</span>}
-      </div>
-      <textarea
-        ref={ref}
-        value={value}
-        onChange={(e) => { handleChange(e.target.value); autoResize(e.target); }}
-        placeholder={placeholder || "Type your response..."}
-        rows={multiline ? 3 : 1}
-        className="w-full bg-bg-input text-[13px] font-body text-text-primary rounded-lg px-3 py-2 resize-none focus:outline-none border border-border-subtle focus:border-border-hover placeholder:text-text-tertiary transition-colors"
-        onInput={(e) => autoResize(e.target as HTMLTextAreaElement)}
-        onFocus={(e) => autoResize(e.target)}
-      />
-      <ResponseNote show={showNote} note={note} onToggle={() => setShowNote(!showNote)} onChange={(n) => setResponse(id, { ...current!, note: n })} />
-      {showError && <p className="text-[11px] text-accent-red font-body mt-1">This field is required.</p>}
-    </div>
-  );
-}
-
-/** Numeric range / slider */
-interface RangeInputProps {
-  id: string;
-  label: string;
-  min?: number;
-  max?: number;
-  step?: number;
-  required?: boolean;
-  minLabel?: string;
-  maxLabel?: string;
-}
-
-export function RangeInput({ id, label, min = 1, max = 10, step = 1, required, minLabel, maxLabel }: RangeInputProps) {
-  const { responses, setResponse } = useAnnotations();
-  const current = responses.get(id);
-  const value = current?.value as number | null;
-  const note = current?.note || "";
-  const [showNote, setShowNote] = useState(false);
-
-  if (!responses.has(id)) {
-    setResponse(id, { id, type: "range", label, value: null, required });
-  }
-
-  const handleChange = (v: number) => {
-    setResponse(id, { ...current!, value: v });
-  };
-
-  const hasValue = value !== null && value !== undefined;
-  const displayValue = hasValue ? value : Math.round((min + max) / 2);
-  const pct = ((displayValue - min) / (max - min)) * 100;
-  const stepCount = Math.round((max - min) / step);
-  const showDots = stepCount <= 20;
-
-  const showError = current?.required && !hasValue;
-
-  return (
-    <div data-md="rangeinput" data-md-label={label} className="-mx-4 px-4 py-3 my-1 rounded-lg transition-colors duration-150 hover:bg-bg-input">
-      <div className="flex items-baseline justify-between mb-1">
-        <div className="flex items-baseline gap-2">
-          <span className="text-[13px] font-body font-medium text-text-primary">{label}</span>
-          {required && <span className="text-[10px] text-accent-red font-body">*</span>}
-        </div>
-        <span className="flex items-center gap-1.5">
-          <span className={`text-[13px] font-mono ${hasValue ? "text-accent-amber" : "text-text-disabled"}`}>
-            {hasValue ? value : "—"}
-          </span>
-          {hasValue && (
-            <button
-              onClick={() => setResponse(id, { ...current!, value: null })}
-              className="text-text-disabled hover:text-text-tertiary transition-colors text-[10px] leading-none"
-              title="Clear"
-            >
-              &#x2715;
-            </button>
-          )}
-        </span>
-      </div>
-      <div className="relative h-6 flex items-center">
-        {/* Track background */}
-        <div className="absolute left-0 right-0 h-1.5 rounded-full bg-border-medium">
-          {hasValue && <div className="h-full rounded-full bg-accent-amber transition-all duration-150" style={{ width: `${pct}%` }} />}
-        </div>
-        {/* Discrete step dots */}
-        {showDots && Array.from({ length: stepCount + 1 }, (_, i) => {
-          const dotVal = min + i * step;
-          const dotPct = ((dotVal - min) / (max - min)) * 100;
-          const isSelected = hasValue && dotVal <= value!;
-          const isActive = hasValue && dotVal === value;
-          return (
-            <div
-              key={i}
-              className={`absolute rounded-full pointer-events-none transition-all duration-150 ${
-                isActive ? "w-2.5 h-2.5 bg-accent-amber" : isSelected ? "w-1.5 h-1.5 bg-accent-amber" : "w-1.5 h-1.5 bg-border-hover"
-              }`}
-              style={{ left: `${dotPct}%`, transform: "translate(-50%, -50%)", top: "50%" }}
-            />
-          );
-        })}
-        {/* Thumb indicator */}
-        {hasValue ? (
-          <div className="absolute h-5 w-5 rounded-full bg-accent-amber shadow-md pointer-events-none transition-all duration-150" style={{ left: `calc(${pct}% - 10px)`, borderWidth: "2px", borderStyle: "solid", borderColor: "var(--color-bg-base)" }} />
-        ) : (
-          <div className="absolute h-4 w-4 rounded-full bg-border-hover pointer-events-none opacity-50" style={{ left: "calc(50% - 8px)", borderWidth: "2px", borderStyle: "solid", borderColor: "var(--color-bg-base)" }} />
-        )}
-        <input
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={displayValue}
-          onChange={(e) => handleChange(Number(e.target.value))}
-          className="absolute inset-0 w-full opacity-0 cursor-pointer"
-        />
-      </div>
-      {/* Labels: show step values if few enough, otherwise just min/max */}
-      {showDots && stepCount <= 10 ? (
-        <div className="flex justify-between -mt-0.5 px-0">
-          {Array.from({ length: stepCount + 1 }, (_, i) => {
-            const dotVal = min + i * step;
-            const isActive = hasValue && dotVal === value;
-            return (
-              <span key={i} className={`text-[10px] font-mono transition-colors ${isActive ? "text-accent-amber font-medium" : "text-text-disabled"}`} style={{ minWidth: "1ch", textAlign: "center" }}>
-                {dotVal}
-              </span>
-            );
-          })}
-        </div>
-      ) : (
-        <div className="flex justify-between -mt-0.5">
-          <span className="text-[11px] text-text-tertiary font-body">{minLabel || min}</span>
-          <span className="text-[11px] text-text-tertiary font-body">{maxLabel || max}</span>
-        </div>
-      )}
-      <ResponseNote show={showNote} note={note} onToggle={() => setShowNote(!showNote)} onChange={(n) => setResponse(id, { ...current!, note: n })} />
-      {showError && <p className="text-[11px] text-accent-red font-body mt-1">Please select a value.</p>}
-    </div>
-  );
-}

package/daemon/client/components/renderMarkdownChildren.tsx

@@ -1,97 +0,0 @@
-import React from "react";
-import { marked } from "marked";
-
-marked.setOptions({ gfm: true, breaks: false });
-
-/** Host tags that flow inline and must not break a prose run into separate blocks. */
-const INLINE_TAGS = new Set([
-  "a", "abbr", "b", "br", "code", "del", "em", "i", "kbd", "mark",
-  "q", "s", "small", "span", "strong", "sub", "sup", "time", "u",
-]);
-
-/** Custom components that render inline (e.g. <Priority>). */
-const INLINE_COMPONENTS = new Set(["Priority"]);
-
-function isInlineNode(node: React.ReactNode): boolean {
-  if (typeof node === "string" || typeof node === "number") return true;
-  if (!React.isValidElement(node)) return false;
-  const type = node.type;
-  if (typeof type === "string") return INLINE_TAGS.has(type);
-  if (typeof type === "function") {
-    const name = (type as { displayName?: string; name?: string }).displayName ?? (type as { name?: string }).name;
-    return name ? INLINE_COMPONENTS.has(name) : false;
-  }
-  return false;
-}
-
-function renderTextAsMarkdown(text: string, key: string): React.ReactNode {
-  const trimmed = text.trim();
-  if (!trimmed) return null;
-  const html = marked.parse(trimmed, { async: false }) as string;
-  return (
-    <div
-      key={key}
-      className="prose-canvas"
-      data-md="markdown"
-      data-md-source={trimmed}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  );
-}
-
-/**
- * Render a run of inline content (text + inline JSX like <code>/<strong>) as a single
- * flowing paragraph. Text segments are parsed as inline markdown; JSX passes through.
- * No `data-md` attribute so the markdown exporter treats it as an inline container.
- */
-function renderInlineRun(run: React.ReactNode[], key: string): React.ReactNode {
-  return (
-    <div key={key} className="prose-canvas">
-      {run.map((node, i) => {
-        if (typeof node === "string" || typeof node === "number") {
-          const html = marked.parseInline(String(node), { async: false }) as string;
-          return <span key={i} dangerouslySetInnerHTML={{ __html: html }} />;
-        }
-        return node;
-      })}
-    </div>
-  );
-}
-
-/**
- * Auto-render markdown for string children, passing JSX children through.
- * Block-level JSX (Callout, Diff, etc.) breaks the prose into separate markdown blocks,
- * while inline JSX (code, strong, links) stays within the surrounding paragraph so text
- * keeps flowing instead of stacking one fragment per line.
- */
-export function renderMarkdownChildren(children: React.ReactNode): React.ReactNode {
-  const kids = React.Children.toArray(children);
-  if (kids.length === 0) return null;
-
-  const result: React.ReactNode[] = [];
-  let segment: React.ReactNode[] = [];
-  let segIdx = 0;
-
-  const flush = () => {
-    if (segment.length === 0) return;
-    const hasInlineJsx = segment.some((n) => typeof n !== "string" && typeof n !== "number");
-    if (hasInlineJsx) {
-      result.push(renderInlineRun(segment, `md-${segIdx++}`));
-    } else {
-      const node = renderTextAsMarkdown(segment.join(""), `md-${segIdx++}`);
-      if (node) result.push(node);
-    }
-    segment = [];
-  };
-
-  for (const child of kids) {
-    if (isInlineNode(child)) {
-      segment.push(child);
-    } else {
-      flush();
-      result.push(child);
-    }
-  }
-  flush();
-  return result;
-}

package/daemon/client/generateMarkdown.ts

@@ -1,273 +0,0 @@
-import type { Annotation, PlanResponse, FeedbackEntry } from "./AnnotationProvider";
-import { formatSnippetInContext } from "./annotationContext";
-import { RESPONSE_ANNOTATION_PATH } from "./utils";
-
-/**
- * Generate human-readable markdown feedback from annotations and responses.
- */
-export function generateMarkdown(
-  annotations: Annotation[],
-  generalNote: string,
-  responses?: Map<string, PlanResponse>,
-  feedbackEntries?: Map<string, FeedbackEntry>,
-  includedRemoteIds?: Set<string>,
-): string {
-  const parts: string[] = [];
-  const included = annotations.filter((a) =>
-    a.source !== "remote" || (includedRemoteIds && includedRemoteIds.has(a.id))
-  );
-  const responseAnns = included.filter((a) => a.filePath === RESPONSE_ANNOTATION_PATH);
-  const canvasAnns = included.filter((a) => !a.filePath);
-  const fileAnns = included.filter((a) => a.filePath && a.filePath !== RESPONSE_ANNOTATION_PATH);
-  const resps = responses ? Array.from(responses.values()).filter((r) => hasValue(r)) : [];
-  const fbEntries = feedbackEntries
-    ? Array.from(feedbackEntries.values()).filter((e) => e.markdown.trim())
-    : [];
-
-  // Responses section
-  const hasResponseSection = resps.length > 0 || fbEntries.length > 0;
-  if (hasResponseSection) {
-    parts.push("## Responses");
-    parts.push("");
-    for (const r of resps) {
-      parts.push(renderResponse(r));
-    }
-    for (const entry of fbEntries) {
-      parts.push(entry.markdown.trim());
-      parts.push("");
-    }
-  }
-
-  // Response annotations (on agent response banner)
-  if (responseAnns.length > 0) {
-    parts.push("## Annotations on agent response");
-    parts.push("");
-    for (const ann of responseAnns) {
-      parts.push(renderAnnotation(ann));
-    }
-  }
-
-  // Canvas annotations grouped by canvas file, then hierarchy
-  if (canvasAnns.length > 0) {
-    parts.push("## Canvas annotations");
-    parts.push("");
-
-    // Group by canvasFile
-    const byCanvas = new Map<string, Annotation[]>();
-    for (const ann of canvasAnns) {
-      const key = ann.canvasFile || "";
-      if (!byCanvas.has(key)) byCanvas.set(key, []);
-      byCanvas.get(key)!.push(ann);
-    }
-
-    const canvasKeys = [...byCanvas.keys()].sort();
-    const multipleCanvases = canvasKeys.length > 1 || (canvasKeys.length === 1 && canvasKeys[0] !== "");
-
-    for (const canvasKey of canvasKeys) {
-      const anns = byCanvas.get(canvasKey)!;
-      if (multipleCanvases && canvasKey) {
-        parts.push(`### ${canvasKey.replace(/\.jsx$/, "")}`);
-        parts.push("");
-      }
-      const grouped = groupByHierarchy(anns);
-      parts.push(renderHierarchyGroup(grouped));
-    }
-  }
-
-  // File annotations grouped by path
-  if (fileAnns.length > 0) {
-    const groups: Record<string, Annotation[]> = {};
-    for (const ann of fileAnns) {
-      const key = ann.filePath!;
-      if (!groups[key]) groups[key] = [];
-      groups[key].push(ann);
-    }
-    parts.push("## File annotations");
-    parts.push("");
-    for (const [filePath, anns] of Object.entries(groups)) {
-      parts.push(`### ${filePath}`);
-      parts.push("");
-      for (const ann of anns) {
-        parts.push(renderAnnotation(ann));
-      }
-    }
-  }
-
-  // General notes
-  if (generalNote.trim()) {
-    parts.push("## General notes");
-    parts.push("");
-    parts.push(generalNote.trim());
-    parts.push("");
-  }
-
-  return parts.join("\n").trim() + "\n";
-}
-
-export function hasValue(r: PlanResponse): boolean {
-  if (r.note?.trim()) return true;
-  if (r.value === null || r.value === undefined) return false;
-  if (r.type === "text" && !(r.value as string).trim()) return false;
-  if (r.type === "checkbox" && (r.value as string[]).length === 0) return false;
-  return true;
-}
-
-export function getMissingRequired(responses: Map<string, PlanResponse>): PlanResponse[] {
-  const missing: PlanResponse[] = [];
-  for (const r of responses.values()) {
-    if (!r.required) continue;
-    if (r.value === null || r.value === undefined) { missing.push(r); continue; }
-    if (r.type === "text" && !(r.value as string).trim()) { missing.push(r); continue; }
-    if (r.type === "checkbox" && (r.value as string[]).length === 0) { missing.push(r); continue; }
-  }
-  return missing;
-}
-
-export function getMissingRequiredFeedback(entries: Map<string, FeedbackEntry>): FeedbackEntry[] {
-  const missing: FeedbackEntry[] = [];
-  for (const entry of entries.values()) {
-    if (entry.required && !entry.markdown.trim()) {
-      missing.push(entry);
-    }
-  }
-  return missing;
-}
-
-/** Returns list of missing required field labels, or empty if all valid */
-export function getMissingRequiredLabels(responses: Map<string, PlanResponse>, feedbackEntries: Map<string, FeedbackEntry>): string[] {
-  const missingResponses = getMissingRequired(responses);
-  const missingFeedback = getMissingRequiredFeedback(feedbackEntries);
-  return [
-    ...missingResponses.map((r) => r.label),
-    ...missingFeedback.map((e) => e.label || e.id),
-  ];
-}
-
-function renderResponse(r: PlanResponse): string {
-  const lines: string[] = [];
-  lines.push(`**${r.label}**`);
-
-  switch (r.type) {
-    case "radio":
-    case "select":
-      lines.push(`Answer: ${r.value}`);
-      break;
-    case "checkbox":
-      for (const v of r.value as string[]) {
-        lines.push(`- [x] ${v}`);
-      }
-      break;
-    case "text":
-      lines.push("");
-      lines.push((r.value as string).trim());
-      break;
-    case "range":
-      lines.push(`Answer: ${r.value}`);
-      break;
-  }
-
-  if (r.note?.trim()) {
-    lines.push("");
-    lines.push(`Note: ${r.note.trim()}`);
-  }
-
-  lines.push("");
-  return lines.join("\n");
-}
-
-function renderAnnotation(ann: Annotation): string {
-  const lines: string[] = [];
-  const snippet = ann.snippet.trim();
-  const ctx = ann.context;
-  const hasLineInfo = ctx?.lineStart != null;
-
-  if (ann.filePath && hasLineInfo) {
-    // File annotation with line numbers
-    const lineStart = ctx!.lineStart!;
-    const lineEnd = ctx!.lineEnd ?? lineStart;
-    const snippetLines = snippet.split("\n");
-    const isShort = snippet.length < 30 && lineStart === lineEnd;
-
-    if (isShort && (ctx!.before || ctx!.after)) {
-      // Short snippet on single line — show full line context
-      const expanded = formatSnippetInContext(ann);
-      lines.push(`> L${lineStart}: ${expanded}`);
-    } else if (snippetLines.length <= 6) {
-      for (let i = 0; i < snippetLines.length; i++) {
-        lines.push(`> ${lineStart + i} | ${snippetLines[i]}`);
-      }
-    } else {
-      for (let i = 0; i < 3; i++) {
-        lines.push(`> ${lineStart + i} | ${snippetLines[i]}`);
-      }
-      lines.push(`> ... (${snippetLines.length} lines)`);
-      for (let i = snippetLines.length - 3; i < snippetLines.length; i++) {
-        lines.push(`> ${lineStart + i} | ${snippetLines[i]}`);
-      }
-    }
-  } else {
-    // Plan annotations or file annotations without line info
-    const context = formatSnippetInContext(ann);
-    if (snippet.split("\n").length <= 3) {
-      lines.push(`> ${context.split("\n").join("\n> ")}`);
-    } else {
-      const snippetLines = snippet.split("\n");
-      lines.push(`> ${snippetLines[0]}`);
-      lines.push(`> ... (${snippetLines.length} lines)`);
-      lines.push(`> ${snippetLines[snippetLines.length - 1]}`);
-    }
-  }
-
-  // Comment
-  if (ann.note.trim()) {
-    lines.push("");
-    lines.push(ann.note.trim());
-  }
-
-  // Attached images
-  if (ann.images?.length) {
-    lines.push("");
-    for (const img of ann.images) {
-      lines.push(`![screenshot](${img})`);
-    }
-  }
-
-  lines.push("");
-  return lines.join("\n");
-}
-
-interface HierarchyNode {
-  label: string;
-  annotations: Annotation[];
-  children: Map<string, HierarchyNode>;
-}
-
-function groupByHierarchy(annotations: Annotation[]): HierarchyNode {
-  const root: HierarchyNode = { label: "", annotations: [], children: new Map() };
-  for (const ann of annotations) {
-    const path = ann.context?.hierarchy || [];
-    let current = root;
-    for (const segment of path) {
-      if (!current.children.has(segment)) {
-        current.children.set(segment, { label: segment, annotations: [], children: new Map() });
-      }
-      current = current.children.get(segment)!;
-    }
-    current.annotations.push(ann);
-  }
-  return root;
-}
-
-function renderHierarchyGroup(node: HierarchyNode, depth: number = 0): string {
-  const parts: string[] = [];
-  for (const ann of node.annotations) {
-    parts.push(renderAnnotation(ann));
-  }
-  for (const [, child] of node.children) {
-    const prefix = depth === 0 ? "###" : "####";
-    parts.push(`${prefix} ${child.label}`);
-    parts.push("");
-    parts.push(renderHierarchyGroup(child, depth + 1));
-  }
-  return parts.join("\n");
-}