@next-vibe/checker 1.0.11 → 1.0.12

package/src/app/api/[locale]/system/unified-interface/cli/widgets/implementations/metric.ts

@@ -0,0 +1,291 @@
+/**
+ * Metric Widget Renderer
+ * Handles METRIC_CARD widget type for displaying key metrics and statistics
+ */
+
+import type { UnifiedField } from "@/app/api/[locale]/system/unified-interface/shared/types/endpoint";
+import { WidgetType } from "@/app/api/[locale]/system/unified-interface/shared/types/enums";
+import type { MetricCardWidgetConfig } from "@/app/api/[locale]/system/unified-interface/shared/widgets/configs";
+import {
+  extractMetricCardData,
+  formatMetricValue,
+} from "@/app/api/[locale]/system/unified-interface/shared/widgets/logic/metric-card";
+import type { WidgetData } from "@/app/api/[locale]/system/unified-interface/shared/widgets/types";
+
+import { BaseWidgetRenderer } from "../core/base-renderer";
+import type { CLIWidgetProps, WidgetRenderContext } from "../core/types";
+
+export class MetricWidgetRenderer extends BaseWidgetRenderer<
+  typeof WidgetType.METRIC_CARD
+> {
+  readonly widgetType = WidgetType.METRIC_CARD;
+
+  render(props: CLIWidgetProps<typeof WidgetType.METRIC_CARD, string>): string {
+    const { field, value, context } = props;
+    const config = this.getMetricConfig(field);
+    const indent = this.createIndent(context.depth, context);
+
+    // Try to extract using shared logic for standard metric card format
+    const data = extractMetricCardData(value);
+
+    if (data) {
+      // Use extracted data for standard metric card
+      const formattedValue = formatMetricValue(data.value);
+      const icon =
+        context.options.useEmojis && data.icon ? `${data.icon} ` : "";
+      return `${indent}${icon}${data.label}: ${formattedValue}`;
+    }
+
+    // Fallback to existing logic for non-standard formats
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      return this.renderMetricObject(value, config, context, indent);
+    }
+
+    const label = this.formatLabel(field, context);
+    const formattedValue = this.formatMetricValueLocal(value, config, context);
+    const icon = this.getMetricIcon(config, value, context);
+
+    return `${indent}${icon}${label}: ${formattedValue}`;
+  }
+
+  private renderMetricObject<const TKey extends string>(
+    value: { [key: string]: WidgetData },
+    config: Pick<
+      MetricCardWidgetConfig<TKey>,
+      "icon" | "unit" | "precision" | "threshold" | "format"
+    >,
+    context: WidgetRenderContext,
+    indent: string,
+  ): string {
+    const lines: string[] = [];
+
+    // Special handling for lint summary object
+    if ("total" in value && "errors" in value && "warnings" in value) {
+      return this.renderLintSummary(value, context, indent);
+    }
+
+    // Generic object rendering
+    for (const [key, val] of Object.entries(value)) {
+      if (
+        typeof val === "string" ||
+        typeof val === "number" ||
+        typeof val === "boolean"
+      ) {
+        const formattedKey = key.charAt(0).toUpperCase() + key.slice(1);
+        const formattedValue = this.formatMetricValueLocal(
+          val,
+          config,
+          context,
+        );
+        const icon = this.getMetricIcon(config, val, context);
+        lines.push(`${indent}${icon}${formattedKey}: ${formattedValue}`);
+      }
+    }
+
+    return lines.join("\n");
+  }
+
+  private renderLintSummary(
+    summary: { [key: string]: WidgetData },
+    context: WidgetRenderContext,
+    indent: string,
+  ): string {
+    const errors = Number(summary.errors || 0);
+    const warnings = Number(summary.warnings || 0);
+    const info = Number(summary.info || 0);
+    const hasIssues = Boolean(summary.hasIssues);
+    if (!hasIssues) {
+      // eslint-disable-next-line i18next/no-literal-string
+      const icon = context.options.useEmojis ? "✨ " : "";
+      const text = context.t(
+        "app.api.system.unifiedInterface.cli.vibe.endpoints.renderers.cliUi.widgets.common.noIssuesFound",
+      );
+      return `${indent}${icon}${this.styleText(text, "green", context)}`;
+    }
+
+    const parts: string[] = [];
+
+    if (errors > 0) {
+      // eslint-disable-next-line i18next/no-literal-string
+      const icon = context.options.useEmojis ? "✖ " : "";
+      const errorWord =
+        errors === 1
+          ? context.t(
+              "app.api.system.unifiedInterface.cli.vibe.endpoints.renderers.cliUi.widgets.common.error",
+            )
+          : context.t(
+              "app.api.system.unifiedInterface.cli.vibe.endpoints.renderers.cliUi.widgets.common.errors",
+            );
+      const text = `${errors} ${errorWord}`;
+      parts.push(`${indent}${icon}${this.styleText(text, "red", context)}`);
+    }
+
+    if (warnings > 0) {
+      // eslint-disable-next-line i18next/no-literal-string
+      const icon = context.options.useEmojis ? "⚠ " : "";
+      const warningWord =
+        warnings === 1
+          ? context.t(
+              "app.api.system.unifiedInterface.cli.vibe.endpoints.renderers.cliUi.widgets.common.warning",
+            )
+          : context.t(
+              "app.api.system.unifiedInterface.cli.vibe.endpoints.renderers.cliUi.widgets.common.warnings",
+            );
+      const text = `${warnings} ${warningWord}`;
+      parts.push(`${indent}${icon}${this.styleText(text, "yellow", context)}`);
+    }
+
+    if (info > 0) {
+      // eslint-disable-next-line i18next/no-literal-string
+      const icon = context.options.useEmojis ? "ℹ " : "";
+      const text = `${info} ${context.t("app.api.system.unifiedInterface.cli.vibe.endpoints.renderers.cliUi.widgets.common.info")}`;
+      parts.push(`${indent}${icon}${this.styleText(text, "blue", context)}`);
+    }
+
+    return parts.join("\n");
+  }
+
+  private getMetricConfig<const TKey extends string>(
+    field: UnifiedField<TKey>,
+  ): Pick<
+    MetricCardWidgetConfig<TKey>,
+    "icon" | "unit" | "precision" | "threshold" | "format"
+  > {
+    if (field.ui.type !== WidgetType.METRIC_CARD) {
+      return {
+        format: "number",
+        precision: 2,
+      };
+    }
+
+    const config = field.ui;
+
+    const formatValue =
+      typeof config.format === "string" ? config.format : "number";
+    const validFormats = ["bytes", "currency", "number", "percentage"] as const;
+    const format: "bytes" | "currency" | "number" | "percentage" =
+      validFormats.includes(formatValue as (typeof validFormats)[number])
+        ? (formatValue as (typeof validFormats)[number])
+        : "number";
+
+    return {
+      icon: typeof config.icon === "string" ? config.icon : undefined,
+      unit: typeof config.unit === "string" ? config.unit : undefined,
+      precision: typeof config.precision === "number" ? config.precision : 2,
+      threshold:
+        config.threshold && typeof config.threshold === "object"
+          ? (config.threshold as { warning?: number; error?: number })
+          : undefined,
+      format,
+    };
+  }
+
+  private formatMetricValueLocal<const TKey extends string>(
+    value: WidgetData,
+    config: Pick<
+      MetricCardWidgetConfig<TKey>,
+      "icon" | "unit" | "precision" | "threshold" | "format"
+    >,
+    context: WidgetRenderContext,
+  ): string {
+    if (
+      typeof value !== "string" &&
+      typeof value !== "number" &&
+      typeof value !== "boolean"
+    ) {
+      return String(value);
+    }
+    if (typeof value !== "number") {
+      return String(value);
+    }
+
+    let formatted: string;
+
+    switch (config.format) {
+      case "percentage":
+        formatted = `${(value * 100).toFixed(config.precision)}%`;
+        break;
+      case "currency":
+        // eslint-disable-next-line i18next/no-literal-string
+        formatted = `$${value.toFixed(config.precision)}`;
+        break;
+      case "bytes":
+        formatted = this.formatBytes(value);
+        break;
+      default:
+        // For integer values (like counts), don't show decimal places
+        if (Number.isInteger(value) && config.precision === 2) {
+          formatted = value.toString();
+        } else {
+          formatted = value.toFixed(config.precision);
+        }
+        if (config.unit) {
+          formatted += ` ${config.unit}`;
+        }
+    }
+
+    // Apply threshold-based styling
+    if (config.threshold && context.options.useColors) {
+      if (config.threshold.error && value >= config.threshold.error) {
+        return this.styleText(formatted, "red", context);
+      }
+      if (config.threshold.warning && value >= config.threshold.warning) {
+        return this.styleText(formatted, "yellow", context);
+      }
+      return this.styleText(formatted, "green", context);
+    }
+
+    return formatted;
+  }
+
+  private getMetricIcon<const TKey extends string>(
+    config: Pick<MetricCardWidgetConfig<TKey>, "icon" | "threshold">,
+    value: WidgetData,
+    context: WidgetRenderContext,
+  ): string {
+    if (
+      typeof value !== "string" &&
+      typeof value !== "number" &&
+      typeof value !== "boolean"
+    ) {
+      return "";
+    }
+    if (!context.options.useEmojis) {
+      return "";
+    }
+
+    if (config.icon) {
+      return `${config.icon} `;
+    }
+
+    // Default icons based on thresholds
+    if (typeof value === "number" && config.threshold) {
+      if (config.threshold.error && value >= config.threshold.error) {
+        // eslint-disable-next-line i18next/no-literal-string
+        return "🔴 ";
+      }
+      if (config.threshold.warning && value >= config.threshold.warning) {
+        // eslint-disable-next-line i18next/no-literal-string
+        return "🟡 ";
+      }
+      // eslint-disable-next-line i18next/no-literal-string
+      return "🟢 ";
+    }
+
+    // eslint-disable-next-line i18next/no-literal-string
+    return "📊 ";
+  }
+
+  private formatBytes(bytes: number): string {
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    let size = bytes;
+    let unitIndex = 0;
+
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+
+    return `${size.toFixed(2)} ${units[unitIndex]}`;
+  }
+}

package/src/app/api/[locale]/system/unified-interface/cli/widgets/implementations/section.ts

@@ -0,0 +1,120 @@
+/**
+ * Section Widget Renderer
+ * Handles SECTION widget type for organizing content into labeled sections
+ */
+
+import { WidgetType } from "@/app/api/[locale]/system/unified-interface/shared/types/enums";
+import type { WidgetData } from "@/app/api/[locale]/system/unified-interface/shared/widgets/types";
+import { getTranslator } from "@/app/api/[locale]/system/unified-interface/shared/widgets/utils/field-helpers";
+
+import { BaseWidgetRenderer } from "../core/base-renderer";
+import type { CLIWidgetProps, WidgetRenderContext } from "../core/types";
+
+export class SectionWidgetRenderer extends BaseWidgetRenderer<
+  typeof WidgetType.SECTION
+> {
+  readonly widgetType = WidgetType.SECTION;
+
+  render(props: CLIWidgetProps<typeof WidgetType.SECTION, string>): string {
+    const { value, context } = props;
+
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      return this.renderSection(value, props, context);
+    }
+
+    return JSON.stringify(value);
+  }
+
+  private renderSection(
+    value: { [key: string]: WidgetData },
+    props: CLIWidgetProps<typeof WidgetType.SECTION, string>,
+    context: WidgetRenderContext,
+  ): string {
+    const result: string[] = [];
+    const { field } = props;
+    const { title: titleKey } = field.ui;
+    const { t } = getTranslator(context);
+
+    if (this.isSectionEmpty(value)) {
+      return "";
+    }
+
+    if (titleKey) {
+      const title = t(titleKey);
+      result.push("");
+      result.push(this.styleText(title.toUpperCase(), "bold", context));
+      result.push(this.styleText("─".repeat(50), "dim", context));
+    }
+
+    // Render nested fields
+    for (const [key, val] of Object.entries(value)) {
+      if (val === undefined || val === null) {
+        continue;
+      }
+
+      if (field.type === "object" && field.children?.[key]) {
+        const childField = field.children[key];
+        const rendered = context.renderWidget(
+          childField.ui.type,
+          childField,
+          val,
+        );
+        if (rendered) {
+          result.push(rendered);
+        }
+      } else {
+        // Fallback rendering
+        result.push(this.renderSimpleField(key, val));
+      }
+    }
+
+    return result.join("\n");
+  }
+
+  /**
+   * Check if section is empty (has no meaningful content)
+   */
+  private isSectionEmpty(value: { [key: string]: WidgetData }): boolean {
+    const entries = Object.entries(value);
+    if (entries.length === 0) {
+      return true;
+    }
+
+    // Check if all values are empty/null/undefined
+    return entries.every((entry) => {
+      const val = entry[1];
+      if (val === null || val === undefined) {
+        return true;
+      }
+      if (Array.isArray(val) && val.length === 0) {
+        return true;
+      }
+      if (typeof val === "object" && Object.keys(val).length === 0) {
+        return true;
+      }
+      return false;
+    });
+  }
+
+  /**
+   * Render a simple field when no metadata is available
+   */
+  private renderSimpleField(key: string, value: WidgetData): string {
+    if (value === null || value === undefined) {
+      return "";
+    }
+
+    if (Array.isArray(value)) {
+      if (value.length === 0) {
+        return "";
+      }
+      return value.map((item) => `  ${item}`).join("\n");
+    }
+
+    if (typeof value === "object") {
+      return JSON.stringify(value, null, 2);
+    }
+
+    return `${key}: ${value}`;
+  }
+}

package/src/app/api/[locale]/system/unified-interface/cli/widgets/implementations/stats-grid.ts

@@ -0,0 +1,149 @@
+/**
+ * Stats Grid Widget Renderer
+ * Handles STATS_GRID widget type for displaying statistics in a grid layout
+ */
+
+import { WidgetType } from "@/app/api/[locale]/system/unified-interface/shared/types/enums";
+import type { WidgetData } from "@/app/api/[locale]/system/unified-interface/shared/widgets/types";
+
+import { BaseWidgetRenderer } from "../core/base-renderer";
+import type { CLIWidgetProps, WidgetRenderContext } from "../core/types";
+
+export class StatsGridWidgetRenderer extends BaseWidgetRenderer<
+  typeof WidgetType.STATS_GRID
+> {
+  readonly widgetType = WidgetType.STATS_GRID;
+
+  render(props: CLIWidgetProps<typeof WidgetType.STATS_GRID, string>): string {
+    const { field, value, context } = props;
+    const indent = this.createIndent(context.depth, context);
+
+    // Handle object with multiple stats
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      return this.renderStatsGrid(value, context, indent);
+    }
+
+    // Handle single stat value
+    if (
+      typeof value === "string" ||
+      typeof value === "number" ||
+      typeof value === "boolean"
+    ) {
+      const label = this.formatLabel(field, context);
+      const formattedValue = this.formatStatValue(value, context);
+      const icon = this.getStatIcon(value, context);
+
+      return `${indent}${icon}${label}: ${formattedValue}`;
+    }
+
+    const stringValue =
+      typeof value === "object" && value !== null
+        ? JSON.stringify(value)
+        : String(value);
+    return `${indent}${stringValue}`;
+  }
+
+  private renderStatsGrid(
+    value: { [key: string]: WidgetData },
+    context: WidgetRenderContext,
+    indent: string,
+  ): string {
+    const lines: string[] = [];
+    const entries = Object.entries(value);
+
+    // Group stats into rows for better display
+    const columns = 3; // Display 3 stats per row
+    const rows: Array<Array<[string, WidgetData]>> = [];
+
+    for (let i = 0; i < entries.length; i += columns) {
+      rows.push(entries.slice(i, i + columns));
+    }
+
+    for (const row of rows) {
+      const rowItems = row
+        .filter(
+          (entry) =>
+            typeof entry[1] === "string" ||
+            typeof entry[1] === "number" ||
+            typeof entry[1] === "boolean",
+        )
+        .map(([key, val]) => {
+          const formattedValue = this.formatStatValue(val, context);
+          const icon = this.getStatIcon(val, context);
+          const label = this.formatStatLabel(key);
+          return `${icon}${label}: ${formattedValue}`;
+        });
+
+      // Pad items to ensure consistent spacing
+      const paddedItems = rowItems.map((item) => item.padEnd(25));
+      lines.push(`${indent}${paddedItems.join(" ")}`);
+    }
+
+    return lines.join("\n");
+  }
+
+  private formatStatValue(
+    value: WidgetData,
+    context: WidgetRenderContext,
+  ): string {
+    if (typeof value === "number") {
+      // Format large numbers with commas
+      if (value >= 1000) {
+        return value.toLocaleString();
+      }
+      return value.toString();
+    }
+
+    if (typeof value === "string") {
+      return value;
+    }
+
+    if (Array.isArray(value)) {
+      const itemsText = context.t(
+        "app.api.system.unifiedInterface.cli.vibe.endpoints.renderers.cliUi.widgets.common.items",
+      );
+      return `[${value.length} ${itemsText}]`;
+    }
+
+    if (typeof value === "object" && value !== null) {
+      const keyCount = String(Object.keys(value).length);
+      return `{${keyCount}}`;
+    }
+
+    return String(value);
+  }
+
+  private formatStatLabel(key: string): string {
+    // Convert camelCase to readable format
+    const spaced = key.replaceAll(/([A-Z])/g, (match) => ` ${match}`);
+    return spaced.replace(/^./, (str) => str.toUpperCase()).trim();
+  }
+
+  private getStatIcon(value: WidgetData, context: WidgetRenderContext): string {
+    if (typeof value === "number") {
+      if (value === 0) {
+        // eslint-disable-next-line i18next/no-literal-string
+        return context.options.useColors ? "⚪ " : "○ ";
+      }
+      if (value > 0) {
+        // eslint-disable-next-line i18next/no-literal-string
+        return context.options.useColors ? "🟢 " : "● ";
+      }
+      // eslint-disable-next-line i18next/no-literal-string
+      return context.options.useColors ? "🔴 " : "● ";
+    }
+
+    if (Array.isArray(value)) {
+      // eslint-disable-next-line i18next/no-literal-string
+      return context.options.useColors ? "📋 " : "□ ";
+    }
+
+    if (typeof value === "object" && value !== null) {
+      // eslint-disable-next-line i18next/no-literal-string
+      return context.options.useColors ? "📊 " : "■ ";
+    }
+
+    // eslint-disable-next-line i18next/no-literal-string
+    return context.options.useColors ? "ℹ️ " : "i ";
+  }
+}

package/src/app/api/[locale]/system/unified-interface/cli/widgets/implementations/tabs.ts

@@ -0,0 +1,61 @@
+/**
+ * Tabs Widget Renderer
+ * Handles TABS widget type for CLI display
+ */
+
+import { WidgetType } from "@/app/api/[locale]/system/unified-interface/shared/types/enums";
+import {
+  extractTabsData,
+  getActiveTab,
+} from "@/app/api/[locale]/system/unified-interface/shared/widgets/logic/tabs";
+
+import { BaseWidgetRenderer } from "../core/base-renderer";
+import type { CLIWidgetProps } from "../core/types";
+
+export class TabsWidgetRenderer extends BaseWidgetRenderer<
+  typeof WidgetType.TABS
+> {
+  readonly widgetType = WidgetType.TABS;
+
+  render(props: CLIWidgetProps<typeof WidgetType.TABS, string>): string {
+    const { value, context } = props;
+    const indent = this.createIndent(context.depth, context);
+
+    // Extract data using shared logic
+    const data = extractTabsData(value);
+
+    // Handle null case
+    if (!data) {
+      return `${indent}—`;
+    }
+
+    const lines: string[] = [];
+
+    // Tab headers
+    const headers = data.tabs.map((tab) => {
+      const isActive = tab.id === data.activeTab;
+      const label = tab.disabled
+        ? this.styleText(tab.label, "dim", context)
+        : isActive
+          ? this.styleText(tab.label, "bold", context)
+          : tab.label;
+
+      return isActive ? `[${label}]` : ` ${label} `;
+    });
+
+    lines.push(`${indent}${headers.join(" ")}`);
+    lines.push(`${indent}${this.createSeparator(60)}`);
+
+    // Active tab content
+    const activeTab = getActiveTab(data);
+    if (activeTab && activeTab.content !== null) {
+      const contentStr =
+        typeof activeTab.content === "string"
+          ? activeTab.content
+          : JSON.stringify(activeTab.content);
+      lines.push(`${indent}${contentStr}`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/app/api/[locale]/system/unified-interface/cli/widgets/implementations/text.ts

@@ -0,0 +1,78 @@
+/**
+ * Text Widget Renderer
+ * Handles TEXT widget type with various formatting options
+ */
+
+import { WidgetType } from "@/app/api/[locale]/system/unified-interface/shared/types/enums";
+import { extractTextData } from "@/app/api/[locale]/system/unified-interface/shared/widgets/logic/text";
+
+import { BaseWidgetRenderer } from "../core/base-renderer";
+import type { CLIWidgetProps, WidgetRenderContext } from "../core/types";
+
+/**
+ * Renders TEXT widgets with formatting options.
+ */
+export class TextWidgetRenderer extends BaseWidgetRenderer<
+  typeof WidgetType.TEXT
+> {
+  readonly widgetType = WidgetType.TEXT;
+
+  render(props: CLIWidgetProps<typeof WidgetType.TEXT, string>): string {
+    const { field, value, context } = props;
+    const indent = this.createIndent(context.depth, context);
+    const label = this.formatLabel(field, context);
+
+    const data = extractTextData(value);
+
+    if (!data) {
+      return `${indent}${label}: —`;
+    }
+
+    const formattedValue = context.formatValue(field, data.text);
+    // Types flow from TextWidgetConfig - no assertions needed
+    const { multiline, emphasis, label: labelKey } = field.ui;
+
+    if (multiline) {
+      return this.renderMultilineText(formattedValue, indent, label, context);
+    }
+
+    if (emphasis) {
+      const styledValue = this.styleText(formattedValue, emphasis, context);
+      return `${indent}${label}: ${styledValue}`;
+    }
+
+    const displayValue = formattedValue === "(not set)" ? "—" : formattedValue;
+
+    if (!labelKey) {
+      return `${indent}${displayValue}`;
+    }
+
+    return `${indent}${label}: ${displayValue}`;
+  }
+
+  private renderMultilineText(
+    value: string,
+    indent: string,
+    label: string,
+    context: WidgetRenderContext,
+  ): string {
+    if (!value || typeof value !== "string") {
+      // eslint-disable-next-line i18next/no-literal-string
+      return `${indent}${label}: (empty)`;
+    }
+
+    const lines = value.split("\n");
+    const result = [`${indent}${label}:`];
+
+    for (const line of lines) {
+      const wrappedLine = this.wrapText(
+        line,
+        context.options.maxWidth - indent.length - 2,
+        `${indent}  `,
+      );
+      result.push(`${indent}  ${wrappedLine}`);
+    }
+
+    return result.join("\n");
+  }
+}