veslx 0.0.1

package/src/components/parameter-badge.tsx

@@ -0,0 +1,78 @@
+import { useFileContent } from "../../plugin/src/client";
+import { useMemo } from "react";
+import { cn } from "@/lib/utils";
+import {
+  type ParameterValue,
+  extractPath,
+  getValueType,
+  formatValue,
+  parseConfigFile,
+  deriveLabelFromPath,
+} from "@/lib/parameter-utils";
+
+interface ParameterBadgeProps {
+  /** Path to the YAML or JSON file */
+  path: string;
+  /** jq-like path to the value (e.g., ".base.N_E") */
+  keyPath: string;
+  /** Optional label override (defaults to last segment of keyPath) */
+  label?: string;
+  /** Optional unit suffix (e.g., "ms", "Hz") */
+  unit?: string;
+}
+
+export function ParameterBadge({ path, keyPath, label, unit }: ParameterBadgeProps) {
+  const { content, loading, error } = useFileContent(path);
+
+  const { value, displayLabel } = useMemo(() => {
+    if (!content) return { value: undefined, displayLabel: "" };
+
+    const data = parseConfigFile(content, path);
+    if (!data) return { value: undefined, displayLabel: "" };
+
+    const extracted = extractPath(data, keyPath);
+    const derivedLabel = label || deriveLabelFromPath(keyPath);
+
+    return { value: extracted, displayLabel: derivedLabel };
+  }, [content, path, keyPath, label]);
+
+  if (loading) {
+    return (
+      <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-muted/50 border border-border/50">
+        <span className="w-2 h-2 border border-muted-foreground/40 border-t-transparent rounded-full animate-spin" />
+      </span>
+    );
+  }
+
+  if (error || value === undefined) {
+    return (
+      <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-destructive/10 border border-destructive/30">
+        <span className="text-[10px] font-mono text-destructive">—</span>
+      </span>
+    );
+  }
+
+  const type = getValueType(value);
+  const formattedValue = formatValue(value);
+
+  return (
+    <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md font-mono text-[11px]">
+      <span className="text-muted-foreground">{displayLabel}</span>
+      <span className="text-muted-foreground/40">=</span>
+      <span
+        className={cn(
+          "font-medium tabular-nums",
+          type === "number" && "text-foreground",
+          type === "string" && "text-amber-600 dark:text-amber-500",
+          type === "boolean" && "text-cyan-600 dark:text-cyan-500",
+          type === "null" && "text-muted-foreground/50",
+          type === "array" && "text-purple-600 dark:text-purple-400",
+          type === "object" && "text-purple-600 dark:text-purple-400"
+        )}
+      >
+        {type === "string" ? `"${formattedValue}"` : formattedValue}
+      </span>
+      {unit && <span className="text-muted-foreground/60">{unit}</span>}
+    </span>
+  );
+}

package/src/components/parameter-table.tsx

@@ -0,0 +1,420 @@
+import { useFileContent } from "../../plugin/src/client";
+import { useMemo, useState } from "react";
+import { cn } from "@/lib/utils";
+import {
+  type ParameterValue,
+  extractPath,
+  getValueType,
+  formatValue,
+  parseConfigFile,
+} from "@/lib/parameter-utils";
+
+/**
+ * Build a filtered data object from an array of jq-like paths.
+ * Each path extracts data and places it in the result under the final key name.
+ */
+function filterData(
+  data: Record<string, ParameterValue>,
+  keys: string[]
+): Record<string, ParameterValue> {
+  const result: Record<string, ParameterValue> = {};
+
+  for (const keyPath of keys) {
+    const extracted = extractPath(data, keyPath);
+    if (extracted === undefined) continue;
+
+    const cleanPath = keyPath.startsWith(".") ? keyPath.slice(1) : keyPath;
+
+    // For simple paths like .base.N_E, use "N_E" as key
+    // For paths with [], preserve more context
+    let keyName: string;
+    if (cleanPath.includes("[")) {
+      keyName = cleanPath.replace(/\[\]/g, "").replace(/\[(\d+)\]/g, "_$1");
+    } else {
+      const parts = cleanPath.split(".");
+      keyName = parts[parts.length - 1];
+    }
+
+    result[keyName] = extracted;
+  }
+
+  return result;
+}
+
+// Renders a flat section of key-value pairs in a dense grid
+function ParameterGrid({ entries }: { entries: [string, ParameterValue][] }) {
+  if (entries.length === 0) return null;
+
+  return (
+    <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-x-6 gap-y-px">
+      {entries.map(([key, value]) => {
+        const type = getValueType(value);
+        return (
+          <div
+            key={key}
+            className="flex items-baseline justify-between gap-2 py-1 group hover:bg-muted/30 -mx-1.5 px-1.5 rounded-sm transition-colors"
+          >
+            <span className="text-[11px] text-muted-foreground font-mono truncate">
+              {key}
+            </span>
+            <span
+              className={cn(
+                "text-[11px] font-mono tabular-nums font-medium shrink-0",
+                type === "number" && "text-foreground",
+                type === "string" && "text-amber-600 dark:text-amber-500",
+                type === "boolean" && "text-cyan-600 dark:text-cyan-500",
+                type === "null" && "text-muted-foreground/50"
+              )}
+            >
+              {type === "string" ? `"${formatValue(value)}"` : formatValue(value)}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Renders a nested section with its own header
+function ParameterSection({
+  name,
+  data,
+  depth = 0
+}: {
+  name: string;
+  data: Record<string, ParameterValue>;
+  depth?: number;
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const entries = Object.entries(data);
+  const leafEntries = entries.filter(([, v]) => {
+    const t = getValueType(v);
+    return t !== "object" && t !== "array";
+  });
+  const nestedEntries = entries.filter(([, v]) => {
+    const t = getValueType(v);
+    return t === "object" || t === "array";
+  });
+
+  return (
+    <div className={cn(depth === 0 && "mb-4 last:mb-0")}>
+      <button
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        className={cn(
+          "flex items-center gap-2 w-full text-left group mb-1.5",
+          depth === 0 && "pb-1 border-b border-border/50"
+        )}
+      >
+        <span className={cn(
+          "text-[10px] text-muted-foreground/60 transition-transform duration-150 select-none",
+          isCollapsed && "-rotate-90"
+        )}>
+          {isCollapsed ? "+" : "-"}
+        </span>
+
+        <span className={cn(
+          "font-mono text-[11px] uppercase tracking-widest",
+          depth === 0
+            ? "text-foreground/80 font-semibold"
+            : "text-muted-foreground/70"
+        )}>
+          {name.replace(/_/g, " ")}
+        </span>
+
+        <span className="text-[9px] font-mono text-muted-foreground/40 ml-auto">
+          {entries.length}
+        </span>
+      </button>
+
+      {!isCollapsed && (
+        <div className={cn(
+          depth > 0 && "pl-3 ml-1 border-l border-border/40"
+        )}>
+          {leafEntries.length > 0 && (
+            <div className={cn(nestedEntries.length > 0 && "mb-3")}>
+              <ParameterGrid entries={leafEntries} />
+            </div>
+          )}
+
+          {nestedEntries.map(([key, value]) => {
+            const type = getValueType(value);
+            if (type === "array") {
+              const arr = value as ParameterValue[];
+              return (
+                <div key={key} className="mb-2 last:mb-0">
+                  <div className="text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider mb-1">
+                    {key} [{arr.length}]
+                  </div>
+                  <div className="pl-3 ml-1 border-l border-border/40">
+                    {arr.map((item, i) => {
+                      const itemType = getValueType(item);
+                      if (itemType === "object") {
+                        return (
+                          <ParameterSection
+                            key={i}
+                            name={`${i}`}
+                            data={item as Record<string, ParameterValue>}
+                            depth={depth + 1}
+                          />
+                        );
+                      }
+                      return (
+                        <div key={i} className="text-[11px] font-mono text-foreground py-0.5">
+                          [{i}] {formatValue(item)}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            }
+            return (
+              <ParameterSection
+                key={key}
+                name={key}
+                data={value as Record<string, ParameterValue>}
+                depth={depth + 1}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ParameterTableProps {
+  /** Path to the YAML or JSON file */
+  path: string;
+  /**
+   * Optional array of jq-like paths to filter which parameters to show.
+   * Examples:
+   *   - [".base.N_E", ".base.N_I"] → show only N_E and N_I from base
+   *   - [".base"] → show entire base section
+   *   - [".default_inputs", ".base.dt"] → show default_inputs section and dt from base
+   */
+  keys?: string[];
+}
+
+/**
+ * Estimate the height contribution of a data structure.
+ */
+function estimateHeight(data: Record<string, ParameterValue>, depth = 0): number {
+  const entries = Object.entries(data);
+  let height = 0;
+
+  for (const [, value] of entries) {
+    const type = getValueType(value);
+    if (type === "object") {
+      height += 28 + estimateHeight(value as Record<string, ParameterValue>, depth + 1);
+    } else if (type === "array") {
+      const arr = value as ParameterValue[];
+      height += 28;
+      for (const item of arr) {
+        if (getValueType(item) === "object") {
+          height += 24 + estimateHeight(item as Record<string, ParameterValue>, depth + 1);
+        } else {
+          height += 24;
+        }
+      }
+    } else {
+      height += 24;
+    }
+  }
+
+  return height;
+}
+
+/**
+ * Split entries into balanced columns based on estimated height.
+ */
+function splitIntoColumns<T extends [string, ParameterValue]>(
+  entries: T[],
+  numColumns: number
+): T[][] {
+  if (numColumns <= 1) return [entries];
+
+  const entryHeights = entries.map(([, value]) => {
+    const type = getValueType(value);
+    if (type === "object") {
+      return 28 + estimateHeight(value as Record<string, ParameterValue>);
+    } else if (type === "array") {
+      const arr = value as ParameterValue[];
+      let h = 28;
+      for (const item of arr) {
+        if (getValueType(item) === "object") {
+          h += 24 + estimateHeight(item as Record<string, ParameterValue>);
+        } else {
+          h += 24;
+        }
+      }
+      return h;
+    }
+    return 24;
+  });
+
+  const totalHeight = entryHeights.reduce((a, b) => a + b, 0);
+  const targetPerColumn = totalHeight / numColumns;
+
+  const columns: T[][] = [];
+  let currentColumn: T[] = [];
+  let currentHeight = 0;
+
+  for (let i = 0; i < entries.length; i++) {
+    const entry = entries[i];
+    const entryHeight = entryHeights[i];
+
+    if (currentHeight >= targetPerColumn && columns.length < numColumns - 1 && currentColumn.length > 0) {
+      columns.push(currentColumn);
+      currentColumn = [];
+      currentHeight = 0;
+    }
+
+    currentColumn.push(entry);
+    currentHeight += entryHeight;
+  }
+
+  if (currentColumn.length > 0) {
+    columns.push(currentColumn);
+  }
+
+  return columns;
+}
+
+export function ParameterTable({ path, keys }: ParameterTableProps) {
+  const { content, loading, error } = useFileContent(path);
+
+  const parsed = useMemo(() => {
+    if (!content) return null;
+
+    const data = parseConfigFile(content, path);
+    if (!data) return null;
+
+    if (keys && keys.length > 0) {
+      return filterData(data, keys);
+    }
+
+    return data;
+  }, [content, path, keys]);
+
+  if (loading) {
+    return (
+      <div className="my-6 p-4 rounded border border-border/50 bg-card/30">
+        <div className="flex items-center gap-2 text-muted-foreground/60">
+          <div className="w-3 h-3 border border-current border-t-transparent rounded-full animate-spin" />
+          <span className="text-[11px] font-mono">loading parameters...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="my-6 p-3 rounded border border-destructive/30 bg-destructive/5">
+        <p className="text-[11px] font-mono text-destructive">{error}</p>
+      </div>
+    );
+  }
+
+  if (!parsed) {
+    return (
+      <div className="my-6 p-3 rounded border border-border/50 bg-card/30">
+        <p className="text-[11px] font-mono text-muted-foreground">unable to parse config</p>
+      </div>
+    );
+  }
+
+  const entries = Object.entries(parsed);
+
+  const topLeaves = entries.filter(([, v]) => {
+    const t = getValueType(v);
+    return t !== "object" && t !== "array";
+  });
+  const topNested = entries.filter(([, v]) => {
+    const t = getValueType(v);
+    return t === "object" || t === "array";
+  });
+
+  const estHeight = estimateHeight(parsed);
+  const HEIGHT_THRESHOLD = 500;
+  const numColumns = estHeight > HEIGHT_THRESHOLD ? Math.min(Math.ceil(estHeight / HEIGHT_THRESHOLD), 3) : 1;
+  const useColumns = numColumns > 1 && topNested.length > 1;
+
+  const columns = useColumns
+    ? splitIntoColumns(topNested as [string, ParameterValue][], numColumns)
+    : [topNested];
+
+  const filename = path.split("/").pop() || path;
+
+  const renderNestedEntry = ([key, value]: [string, ParameterValue]) => {
+    const type = getValueType(value);
+    if (type === "array") {
+      const arr = value as ParameterValue[];
+      return (
+        <div key={key} className="mb-4 last:mb-0">
+          <div className="text-[11px] font-mono text-foreground/80 uppercase tracking-widest font-semibold mb-1.5 pb-1 border-b border-border/50">
+            {key.replace(/_/g, " ")} [{arr.length}]
+          </div>
+          <div className="pl-3 ml-1 border-l border-border/40">
+            {arr.map((item, i) => {
+              const itemType = getValueType(item);
+              if (itemType === "object") {
+                return (
+                  <ParameterSection
+                    key={i}
+                    name={`${i}`}
+                    data={item as Record<string, ParameterValue>}
+                    depth={1}
+                  />
+                );
+              }
+              return (
+                <div key={i} className="text-[11px] font-mono text-foreground py-0.5">
+                  [{i}] {formatValue(item)}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      );
+    }
+    return (
+      <ParameterSection
+        key={key}
+        name={key}
+        data={value as Record<string, ParameterValue>}
+        depth={0}
+      />
+    );
+  };
+
+  return (
+    <div className="my-6 not-prose">
+      <div className="rounded border border-border/60 bg-card/20 p-3 overflow-hidden">
+        {topLeaves.length > 0 && (
+          <div className={cn(topNested.length > 0 && "mb-4 pb-3 border-b border-border/30")}>
+            <ParameterGrid entries={topLeaves} />
+          </div>
+        )}
+
+        {useColumns ? (
+          <div
+            className="grid gap-6"
+            style={{ gridTemplateColumns: `repeat(${columns.length}, 1fr)` }}
+          >
+            {columns.map((columnEntries, colIndex) => (
+              <div key={colIndex} className={cn(
+                colIndex > 0 && "border-l border-border/30 pl-6"
+              )}>
+                {columnEntries.map(renderNestedEntry)}
+              </div>
+            ))}
+          </div>
+        ) : (
+          topNested.map(renderNestedEntry)
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/post-list.tsx

@@ -0,0 +1,148 @@
+import { Link } from "react-router-dom";
+import { cn } from "@/lib/utils";
+import { DirectoryEntry } from "../../plugin/src/lib";
+import { findReadme, findSlides } from "../../plugin/src/client";
+import { formatDate } from "@/lib/format-date";
+import { ArrowRight } from "lucide-react";
+
+export default function PostList({ directory }: { directory: DirectoryEntry }) {
+  const folders = directory.children.filter((c): c is DirectoryEntry => c.type === "directory");
+
+  if (folders.length === 0) {
+    return (
+      <div className="py-24 text-center">
+        <p className="text-muted-foreground font-mono text-sm tracking-wide">no entries</p>
+      </div>
+    );
+  }
+
+  let posts = folders.map((folder) => {
+    const readme = findReadme(folder);
+    const slides = findSlides(folder);
+    return {
+      ...folder,
+      readme,
+      slides,
+    }
+  })
+
+  posts = posts.filter((post) => {
+    return post.readme?.frontmatter?.visibility !== "hidden";
+  });
+
+  posts = posts.sort((a, b) => {
+    let aDate = a.readme?.frontmatter?.date ? new Date(a.readme.frontmatter.date as string) : null;
+    let bDate = b.readme?.frontmatter?.date ? new Date(b.readme.frontmatter.date as string) : null;
+
+    if (!aDate && a.slides) {
+      aDate = a.slides.frontmatter?.date ? new Date(a.slides.frontmatter.date as string) : null;
+    }
+    if (!bDate && b.slides) {
+      bDate = b.slides.frontmatter?.date ? new Date(b.slides.frontmatter.date as string) : null;
+    }
+
+    if (aDate && bDate) {
+      return bDate.getTime() - aDate.getTime();
+    } else if (aDate) {
+      return -1;
+    } else if (bDate) {
+      return 1;
+    } else {
+      return a.name.localeCompare(b.name);
+    }
+  });
+
+  const postsGroupedByMonthAndYear: { [key: string]: typeof posts } = {};
+  posts.forEach((post) => {
+    let date = post.readme?.frontmatter?.date ? new Date(post.readme.frontmatter.date as string) : null;
+    if (!date && post.slides) {
+      date = post.slides.frontmatter?.date ? new Date(post.slides.frontmatter.date as string) : null;
+    }
+    const monthYear = date ? `${date.getFullYear()}-${date.getMonth() + 1}` : "unknown";
+    if (!postsGroupedByMonthAndYear[monthYear]) {
+      postsGroupedByMonthAndYear[monthYear] = [];
+    }
+    postsGroupedByMonthAndYear[monthYear].push(post);
+  });
+
+  return (
+    <div className="space-y-8">
+      {Object.entries(postsGroupedByMonthAndYear)
+        .sort(([a], [b]) => {
+          if (a === "unknown") return 1;
+          if (b === "unknown") return -1;
+          return b.localeCompare(a);
+        })
+        .map(([monthYear, monthPosts]) => {
+          const [year, month] = monthYear.split("-");
+          const displayDate = monthYear === "unknown" 
+            ? "Unknown Date" 
+            : new Date(parseInt(year), parseInt(month) - 1).toLocaleDateString("en-US", { 
+                year: "numeric", 
+                month: "long" 
+              });
+
+          return (
+            <div key={monthYear}>
+              <h2 className="text-xs font-mono uppercase tracking-wider text-muted-foreground mb-3">
+                {displayDate}
+              </h2>
+              <div className="space-y-1">
+                {monthPosts.map((post) => {
+                  let frontmatter = post.readme?.frontmatter;
+
+                  if (!post.readme && post.slides) {
+                    frontmatter = post.slides.frontmatter;
+                  }
+
+                  const title = (frontmatter?.title as string) || post.name;
+                  const description = frontmatter?.description as string | undefined;
+                  const date = frontmatter?.date ? new Date(frontmatter.date as string) : null;
+
+                  return (
+                    <Link
+                      key={post.path}
+                      to={(post.slides && !post.readme) ? `/${post.slides.path}` : `/${post.readme.path}`}
+                      className={cn(
+                        "group block py-3 px-3 -mx-3 rounded-md",
+                        "transition-colors duration-150",
+                        // "hover:bg-accent"
+                      )}
+                    >
+                      <article className="flex items-start gap-4">
+                        {/* Date - left side, fixed width */}
+                        <time
+                          dateTime={date?.toISOString()}
+                          className="font-mono text-xs text-muted-foreground tabular-nums w-20 flex-shrink-0 pt-0.5"
+                        >
+                          {date ? formatDate(date) : <span className="text-muted-foreground/30">—</span>}
+                        </time>
+
+                        {/* Main content */}
+                        <div className="flex-1 min-w-0">
+                          <h3 className={cn(
+                            "text-sm font-medium text-foreground",
+                            "group-hover:underline",
+                            "flex items-center gap-2"
+                          )}>
+                            <span>{title}</span>
+                            <ArrowRight className="h-3 w-3 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200 text-primary" />
+                          </h3>
+
+                          {description && (
+                            <p className="text-sm text-muted-foreground line-clamp-1 mt-0.5">
+                              {description}
+                            </p>
+                          )}
+                        </div>
+                      </article>
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+}

package/src/components/running-bar.tsx

@@ -0,0 +1,21 @@
+import { isSimulationRunning } from "../../plugin/src/client";
+
+
+export function RunningBar() {
+  const isRunning = isSimulationRunning();
+
+  return (
+    <>
+      {isRunning && (
+        // this should stay red not another color
+        <div className="sticky top-0 z-50 px-[var(--page-padding)] py-2 bg-red-500 text-primary-foreground font-mono text-xs text-center tracking-wide">
+          <span className="inline-flex items-center gap-3">
+            <span className="h-1.5 w-1.5 rounded-full bg-current animate-pulse" />
+            <span className="uppercase tracking-widest">simulation running</span>
+            <span className="text-primary-foreground/60">Page will auto-refresh on completion</span>
+          </span>
+        </div>
+      )}
+    </>
+  )
+}