@virtengine/openfleet 0.25.0

package/ui/components/diff-viewer.js

@@ -0,0 +1,190 @@
+/* ─────────────────────────────────────────────────────────────
+ *  Component: Diff Viewer — VS Code-style diff display
+ * ────────────────────────────────────────────────────────────── */
+import { h } from "preact";
+import { useState, useEffect, useCallback } from "preact/hooks";
+import htm from "htm";
+import { apiFetch } from "../modules/api.js";
+
+const html = htm.bind(h);
+
+/* ─── File type icons ─── */
+const EXT_ICONS = {
+  js: "📜", mjs: "📜", cjs: "📜",
+  ts: "🔷", tsx: "🔷",
+  json: "📋", yaml: "📋", yml: "📋", toml: "📋",
+  css: "🎨", scss: "🎨", less: "🎨",
+  html: "🌐", htm: "🌐",
+  md: "📝", txt: "📄",
+  py: "🐍", rb: "💎", go: "🔵", rs: "🦀",
+  sh: "🐚", bash: "🐚", ps1: "🐚",
+  sql: "🗃️", graphql: "🗃️",
+};
+
+function fileIcon(filename) {
+  const ext = (filename || "").split(".").pop().toLowerCase();
+  return EXT_ICONS[ext] || "📄";
+}
+
+/* ─── Parse unified diff into lines ─── */
+function parseDiffLines(rawDiff) {
+  if (!rawDiff) return [];
+  return rawDiff.split("\n").map((line, i) => {
+    let type = "context";
+    if (line.startsWith("+") && !line.startsWith("+++")) type = "addition";
+    else if (line.startsWith("-") && !line.startsWith("---")) type = "deletion";
+    else if (line.startsWith("@@")) type = "hunk-header";
+    return { text: line, type, index: i };
+  });
+}
+
+/* ─── DiffFile component ─── */
+function DiffFile({ file }) {
+  const [expanded, setExpanded] = useState(false);
+  const lines = parseDiffLines(file.patch || file.diff);
+  const additions = file.additions ?? lines.filter((l) => l.type === "addition").length;
+  const deletions = file.deletions ?? lines.filter((l) => l.type === "deletion").length;
+
+  const statusClass = file.status === "added"
+    ? "added"
+    : file.status === "removed" || file.status === "deleted"
+      ? "deleted"
+      : "modified";
+
+  return html`
+    <div class="diff-file-item">
+      <div
+        class="diff-file-header ${statusClass}"
+        onClick=${() => setExpanded(!expanded)}
+      >
+        <span class="diff-file-icon">${fileIcon(file.filename)}</span>
+        <span class="diff-file-name">${file.filename}</span>
+        <span class="diff-file-stats">
+          ${additions > 0 && html`<span class="diff-stat-add">+${additions}</span>`}
+          ${deletions > 0 && html`<span class="diff-stat-del">-${deletions}</span>`}
+        </span>
+        <span class="diff-file-toggle">${expanded ? "▾" : "▸"}</span>
+      </div>
+      ${expanded && lines.length > 0 && html`
+        <div class="diff-hunk">
+          ${lines.map(
+            (line) => html`
+              <div key=${line.index} class="diff-line ${line.type}">
+                <span class="diff-line-text">${line.text}</span>
+              </div>
+            `,
+          )}
+        </div>
+      `}
+      ${expanded && lines.length === 0 && html`
+        <div class="diff-hunk">
+          <div class="diff-line context">
+            <span class="diff-line-text">(no diff available)</span>
+          </div>
+        </div>
+      `}
+    </div>
+  `;
+}
+
+/* ─── DiffViewer component ─── */
+export function DiffViewer({ sessionId }) {
+  const [diffData, setDiffData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!sessionId) return;
+    let active = true;
+    setLoading(true);
+    setError(null);
+
+    apiFetch(`/api/sessions/${sessionId}/diff`, { _silent: true })
+      .then((res) => {
+        if (!active) return;
+        setDiffData(res?.diff || null);
+      })
+      .catch(() => {
+        if (active) setError("unavailable");
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+
+    return () => { active = false; };
+  }, [sessionId]);
+
+  const handleRetry = useCallback(() => {
+    setError(null);
+    setLoading(true);
+    apiFetch(`/api/sessions/${sessionId}/diff`, { _silent: true })
+      .then((res) => setDiffData(res?.diff || null))
+      .catch(() => setError("unavailable"))
+      .finally(() => setLoading(false));
+  }, [sessionId]);
+
+  if (!sessionId) {
+    return html`
+      <div class="diff-viewer diff-empty">
+        <div class="session-empty-icon">📝</div>
+        <div class="session-empty-text">Select a session to view diffs</div>
+      </div>
+    `;
+  }
+
+  if (loading) {
+    return html`
+      <div class="diff-viewer">
+        <div class="diff-loading">Loading diff…</div>
+      </div>
+    `;
+  }
+
+  if (error) {
+    return html`
+      <div class="diff-viewer">
+        <div class="session-empty">
+          <div class="session-empty-icon">📝</div>
+          <div class="session-empty-text">Diff not available</div>
+          <button class="btn btn-primary btn-sm" onClick=${handleRetry}>
+            Retry
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  const files = diffData?.files || [];
+  const totalAdditions = files.reduce(
+    (n, f) => n + (f.additions ?? 0),
+    0,
+  );
+  const totalDeletions = files.reduce(
+    (n, f) => n + (f.deletions ?? 0),
+    0,
+  );
+
+  return html`
+    <div class="diff-viewer">
+      ${files.length > 0 && html`
+        <div class="diff-summary">
+          <span>${files.length} file${files.length !== 1 ? "s" : ""} changed</span>
+          ${totalAdditions > 0 && html`<span class="diff-stat-add">+${totalAdditions}</span>`}
+          ${totalDeletions > 0 && html`<span class="diff-stat-del">-${totalDeletions}</span>`}
+        </div>
+      `}
+      <div class="diff-file-list">
+        ${files.length > 0
+          ? files.map(
+              (f) => html`<${DiffFile} key=${f.filename} file=${f} />`,
+            )
+          : html`
+              <div class="session-empty">
+                <div class="session-empty-icon">✨</div>
+                <div class="session-empty-text">No changes yet</div>
+              </div>
+            `}
+      </div>
+    </div>
+  `;
+}

package/ui/components/forms.js

@@ -0,0 +1,327 @@
+/* ─────────────────────────────────────────────────────────────
+ *  VirtEngine Control Center – Form / Control Components
+ *  SegmentedControl, Collapsible, PullToRefresh, SearchInput,
+ *  Toggle, Stepper, SliderControl
+ * ────────────────────────────────────────────────────────────── */
+
+import { h } from "preact";
+import {
+  useState,
+  useRef,
+  useCallback,
+} from "preact/hooks";
+import htm from "htm";
+
+const html = htm.bind(h);
+
+import { ICONS } from "../modules/icons.js";
+import { haptic } from "../modules/telegram.js";
+
+/* ═══════════════════════════════════════════════
+ *  SegmentedControl
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Pill-shaped segmented control.
+ * @param {{options: Array<{value: string, label: string}>, value: string, onChange: (v: string) => void}} props
+ */
+export function SegmentedControl({ options = [], value, onChange, disabled = false }) {
+  return html`
+    <div class="segmented-control ${disabled ? "disabled" : ""}">
+      ${options.map(
+        (opt) => html`
+          <button
+            key=${opt.value}
+            class="segmented-btn ${value === opt.value ? "active" : ""}"
+            disabled=${disabled}
+            onClick=${() => {
+              if (disabled) return;
+              haptic("light");
+              onChange(opt.value);
+            }}
+          >
+            ${opt.label}
+          </button>
+        `,
+      )}
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Collapsible
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Expandable section with chevron rotation animation.
+ * @param {{title: string, defaultOpen?: boolean, children?: any}} props
+ */
+export function Collapsible({ title, defaultOpen = true, children }) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return html`
+    <div class="collapsible">
+      <button
+        class="collapsible-header ${open ? "open" : ""}"
+        onClick=${() => {
+          haptic("light");
+          setOpen(!open);
+        }}
+      >
+        <span class="collapsible-title">${title}</span>
+        <span class="collapsible-chevron ${open ? "open" : ""}">
+          ${ICONS.chevronDown}
+        </span>
+      </button>
+      <div class="collapsible-body ${open ? "open" : ""}">${children}</div>
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  PullToRefresh
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Wraps content with pull-to-refresh gesture detection.
+ * Shows a spinner while refreshing.
+ * @param {{onRefresh: () => Promise<void>, children?: any}} props
+ */
+export function PullToRefresh({ onRefresh, children }) {
+  const [refreshing, setRefreshing] = useState(false);
+  const [pullDistance, setPullDistance] = useState(0);
+  const containerRef = useRef(null);
+  const startYRef = useRef(0);
+  const pullingRef = useRef(false);
+
+  const THRESHOLD = 64;
+
+  const handleTouchStart = useCallback((e) => {
+    if (containerRef.current && containerRef.current.scrollTop <= 0) {
+      startYRef.current = e.touches[0].clientY;
+      pullingRef.current = true;
+    }
+  }, []);
+
+  const handleTouchMove = useCallback((e) => {
+    if (!pullingRef.current) return;
+    const diff = e.touches[0].clientY - startYRef.current;
+    if (diff > 0) {
+      // Apply diminishing returns to pull distance
+      setPullDistance(Math.min(diff * 0.4, THRESHOLD * 1.5));
+    }
+  }, []);
+
+  const handleTouchEnd = useCallback(async () => {
+    if (!pullingRef.current) return;
+    pullingRef.current = false;
+
+    if (pullDistance >= THRESHOLD) {
+      setRefreshing(true);
+      haptic("medium");
+      try {
+        await onRefresh();
+      } finally {
+        setRefreshing(false);
+      }
+    }
+    setPullDistance(0);
+  }, [onRefresh, pullDistance]);
+
+  return html`
+    <div
+      ref=${containerRef}
+      class="pull-to-refresh-container"
+      onTouchStart=${handleTouchStart}
+      onTouchMove=${handleTouchMove}
+      onTouchEnd=${handleTouchEnd}
+    >
+      ${(refreshing || pullDistance > 0) &&
+      html`
+        <div
+          class="ptr-indicator"
+          style="height: ${refreshing ? THRESHOLD : pullDistance}px;
+            display:flex;align-items:center;justify-content:center;
+            transition: ${pullingRef.current ? "none" : "height 0.2s ease"}"
+        >
+          <div
+            class="ptr-spinner-icon ${refreshing ? "spinning" : ""}"
+            style="transform: rotate(${pullDistance * 4}deg);
+              opacity: ${Math.min(1, pullDistance / THRESHOLD)}"
+          >
+            ${ICONS.refresh}
+          </div>
+        </div>
+      `}
+      ${children}
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  SearchInput
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Search input with magnifying glass icon and clear button.
+ * @param {{value: string, onInput: (e: Event) => void, placeholder?: string, onClear?: () => void}} props
+ */
+export function SearchInput({
+  value = "",
+  onInput,
+  placeholder = "Search…",
+  onClear,
+  disabled = false,
+  inputRef,
+}) {
+  return html`
+    <div class="search-input-wrap ${disabled ? "disabled" : ""}">
+      <span class="search-input-icon">${ICONS.search}</span>
+      <input
+        ref=${inputRef}
+        class="input search-input"
+        type="text"
+        placeholder=${placeholder}
+        value=${value}
+        onInput=${onInput}
+        disabled=${disabled}
+      />
+      ${value && !disabled
+        ? html`
+            <button
+              class="search-input-clear"
+              onClick=${() => {
+                if (onClear) onClear();
+              }}
+            >
+              ${ICONS.close}
+            </button>
+          `
+        : null}
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Toggle
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * iOS-style toggle switch.
+ * @param {{checked: boolean, onChange: (checked: boolean) => void, label?: string}} props
+ */
+export function Toggle({ checked = false, onChange, label, disabled = false }) {
+  const handleClick = () => {
+    if (disabled) return;
+    haptic("light");
+    onChange(!checked);
+  };
+
+  return html`
+    <div class="toggle-wrap ${disabled ? "disabled" : ""}" onClick=${handleClick}>
+      ${label ? html`<span class="toggle-label">${label}</span>` : null}
+      <div class="toggle ${checked ? "toggle-on" : ""} ${disabled ? "disabled" : ""}">
+        <div class="toggle-thumb"></div>
+      </div>
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  Stepper
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Numeric stepper with − and + buttons.
+ * @param {{value: number, min?: number, max?: number, step?: number, onChange: (v: number) => void, label?: string}} props
+ */
+export function Stepper({
+  value = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  label,
+  disabled = false,
+}) {
+  const decrement = () => {
+    if (disabled) return;
+    const next = Math.max(min, value - step);
+    if (next !== value) {
+      haptic("light");
+      onChange(next);
+    }
+  };
+  const increment = () => {
+    if (disabled) return;
+    const next = Math.min(max, value + step);
+    if (next !== value) {
+      haptic("light");
+      onChange(next);
+    }
+  };
+
+  return html`
+    <div class="stepper-wrap ${disabled ? "disabled" : ""}">
+      ${label ? html`<span class="stepper-label">${label}</span>` : null}
+      <div class="stepper ${disabled ? "disabled" : ""}">
+        <button
+          class="stepper-btn"
+          onClick=${decrement}
+          disabled=${disabled || value <= min}
+        >
+          −
+        </button>
+        <span class="stepper-value">${value}</span>
+        <button
+          class="stepper-btn"
+          onClick=${increment}
+          disabled=${disabled || value >= max}
+        >
+          +
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+/* ═══════════════════════════════════════════════
+ *  SliderControl
+ * ═══════════════════════════════════════════════ */
+
+/**
+ * Range slider with value display pill.
+ * @param {{value: number, min?: number, max?: number, step?: number, onChange: (v: number) => void, label?: string, suffix?: string}} props
+ */
+export function SliderControl({
+  value = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  label,
+  suffix = "",
+}) {
+  return html`
+    <div class="slider-control">
+      ${label
+        ? html`<div class="slider-control-header">
+            <span class="slider-control-label">${label}</span>
+            <span class="pill">${value}${suffix}</span>
+          </div>`
+        : null}
+      <div class="slider-control-row">
+        <input
+          type="range"
+          class="slider-input"
+          min=${min}
+          max=${max}
+          step=${step}
+          value=${value}
+          onInput=${(e) => onChange(Number(e.target.value))}
+        />
+        ${!label ? html`<span class="pill">${value}${suffix}</span>` : null}
+      </div>
+    </div>
+  `;
+}