@next-vibe/checker 1.0.11 → 1.0.12

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

@@ -0,0 +1,298 @@
+/**
+ * Code Quality List Widget Renderer
+ * Pure rendering implementation - ANSI codes, styling, layout only
+ * All business logic imported from shared
+ */
+
+import { WidgetType } from "@/app/api/[locale]/system/unified-interface/shared/types/enums";
+import {
+  type CodeQualityItem,
+  extractCodeQualityListData,
+  groupCodeQualityItems,
+  type ProcessedCodeQualityList,
+  sortBySeverity,
+} from "@/app/api/[locale]/system/unified-interface/shared/widgets/logic/code-quality-list";
+import {
+  formatFilePath,
+  formatLocation,
+} from "@/app/api/[locale]/system/unified-interface/shared/widgets/utils/formatting";
+
+import { BaseWidgetRenderer } from "../core/base-renderer";
+import type { CLIWidgetProps, WidgetRenderContext } from "../core/types";
+
+/**
+ * Configuration for code quality list widget
+ */
+interface CodeQualityConfig {
+  groupBy: string;
+  sortBy: string;
+  maxItemsPerGroup: number;
+}
+
+export class CodeQualityListWidgetRenderer extends BaseWidgetRenderer<
+  typeof WidgetType.CODE_QUALITY_LIST
+> {
+  readonly widgetType = WidgetType.CODE_QUALITY_LIST;
+
+  render(
+    props: CLIWidgetProps<typeof WidgetType.CODE_QUALITY_LIST, string>,
+  ): string {
+    const { field, value, context } = props;
+    const t = context.t;
+
+    // Extract data using shared logic
+    const data = extractCodeQualityListData(value);
+
+    // Handle null case
+    if (!data) {
+      const successMsg = this.styleText(
+        t("app.api.system.check.codeQuality.noIssues"),
+        "green",
+        context,
+      );
+      return `\n${successMsg}\n`;
+    }
+
+    // Render the items
+    const itemsOutput = this.renderCodeQualityList(data, context);
+    const result: string[] = [itemsOutput];
+
+    // Add truncation notice if data is truncated
+    if (
+      typeof value === "object" &&
+      value !== null &&
+      !Array.isArray(value) &&
+      "summary" in value &&
+      typeof value.summary === "object" &&
+      value.summary !== null
+    ) {
+      const summary = value.summary;
+      const totalIssues =
+        "totalIssues" in summary && typeof summary.totalIssues === "number"
+          ? summary.totalIssues
+          : 0;
+      const displayedIssues =
+        "displayedIssues" in summary &&
+        typeof summary.displayedIssues === "number"
+          ? summary.displayedIssues
+          : 0;
+      const totalFiles =
+        "totalFiles" in summary && typeof summary.totalFiles === "number"
+          ? summary.totalFiles
+          : 0;
+      const displayedFiles =
+        "displayedFiles" in summary &&
+        typeof summary.displayedFiles === "number"
+          ? summary.displayedFiles
+          : 0;
+      const totalErrors =
+        "totalErrors" in summary && typeof summary.totalErrors === "number"
+          ? summary.totalErrors
+          : 0;
+
+      const displayedErrors = data.items.filter(
+        (item) => item.severity === "error",
+      ).length;
+
+      if (displayedIssues < totalIssues || displayedFiles < totalFiles) {
+        const hiddenIssues = totalIssues - displayedIssues;
+        const hiddenFiles = totalFiles - displayedFiles;
+        const hiddenErrors = totalErrors - displayedErrors;
+
+        const infoIcon = context.options.useEmojis ? "ℹ️  " : "";
+        const truncationMsg = this.styleText(
+          `${infoIcon}+ ${hiddenIssues} more issue${hiddenIssues !== 1 ? "s" : ""} from ${hiddenFiles} more file${hiddenFiles !== 1 ? "s" : ""} (${hiddenErrors} error${hiddenErrors !== 1 ? "s" : ""})`,
+          "dim",
+          context,
+        );
+        result.push("");
+        result.push(truncationMsg);
+      }
+    }
+
+    // Recursively render children (like summary) if field has children
+    if (
+      field.type === "object" &&
+      field.children &&
+      typeof value === "object" &&
+      value !== null &&
+      !Array.isArray(value)
+    ) {
+      for (const [key, childValue] of Object.entries(value)) {
+        // Skip items array (already rendered)
+        if (key === "items") {
+          continue;
+        }
+
+        if (childValue !== undefined && childValue !== null) {
+          const childField = field.children[key];
+          if (childField) {
+            const rendered = context.renderWidget(
+              childField.ui.type,
+              childField,
+              childValue,
+            );
+            if (rendered) {
+              result.push("");
+              result.push(rendered);
+            }
+          }
+        }
+      }
+    }
+
+    return result.join("\n");
+  }
+
+  private renderCodeQualityList(
+    data: ProcessedCodeQualityList,
+    context: WidgetRenderContext,
+  ): string {
+    const config = this.getConfig();
+    let output = "";
+
+    // Group data by file using shared logic
+    const groups = groupCodeQualityItems(data.items, "file");
+
+    // Render each group
+    for (const [filePath, items] of groups) {
+      output += this.renderFileGroup(filePath, items, config, context);
+      output += "\n";
+    }
+
+    return output.trim();
+  }
+
+  private getConfig(): CodeQualityConfig {
+    return {
+      groupBy: "file",
+      sortBy: "severity",
+      maxItemsPerGroup: 100,
+    };
+  }
+
+  /**
+   * Render a single file group with its issues
+   */
+  private renderFileGroup(
+    filePath: string,
+    items: CodeQualityItem[],
+    config: CodeQualityConfig,
+    context: WidgetRenderContext,
+  ): string {
+    let output = "";
+
+    // File header with file icon
+    const displayPath = formatFilePath(filePath);
+    const countText = `(${items.length} item${items.length !== 1 ? "s" : ""})`;
+
+    const fileIcon = context.options.useEmojis ? "● " : "";
+    const pathText = this.styleText(displayPath, "underline", context);
+    const countTextStyled = this.styleText(countText, "dim", context);
+
+    output += `${fileIcon}${pathText} ${countTextStyled}\n`;
+
+    // Sort items by severity (errors first, then warnings, then info) using shared logic
+    const sortedItems = sortBySeverity(items);
+
+    // Render each issue
+    for (const item of sortedItems.slice(0, config.maxItemsPerGroup)) {
+      output += this.renderIssue(item, context);
+      output += "\n";
+    }
+
+    // Show truncation if needed
+    if (items.length > config.maxItemsPerGroup) {
+      const remaining = items.length - config.maxItemsPerGroup;
+      const truncationMsg = this.styleText(
+        `  ... and ${remaining} more issue${remaining !== 1 ? "s" : ""}`,
+        "dim",
+        context,
+      );
+      output += `${truncationMsg}\n`;
+    }
+
+    return output;
+  }
+
+  /**
+   * Render a single code quality issue
+   */
+  private renderIssue(
+    item: CodeQualityItem,
+    context: WidgetRenderContext,
+  ): string {
+    const parts: string[] = [];
+
+    // OSC 8 Approach 2: vscode://file/ protocol with absolute path
+    if (item.line !== undefined || item.column !== undefined) {
+      // Convert to absolute path
+      const absolutePath = item.file.startsWith("/")
+        ? item.file
+        : `${process.cwd()}/${item.file}`;
+
+      // Build URL with vscode://file/ protocol and line/column
+      let vscodeUrl = `vscode://file${absolutePath}:${item.line || 1}:${item.column || 1}`;
+
+      // Display text (just line:column without padding)
+      const location = formatLocation(item.line, item.column);
+      const styledLocation = this.styleText(location, "blue", context);
+
+      // OSC 8 hyperlink: \x1b]8;;URL\x1b\\TEXT\x1b]8;;\x1b\\
+      const hyperlink = `\x1b]8;;${vscodeUrl}\x1b\\${styledLocation}\x1b]8;;\x1b\\`;
+
+      // Add padding after the hyperlink to maintain alignment
+      const paddingNeeded = Math.max(0, 8 - location.length);
+      parts.push(hyperlink + " ".repeat(paddingNeeded));
+    } else {
+      parts.push("        "); // 8 spaces padding
+    }
+
+    // Severity with ASCII icon and color
+    const severity = this.formatSeverity(item.severity, context);
+    parts.push(severity.padEnd(12)); // Padding for alignment
+
+    // Message
+    if (item.message) {
+      parts.push(item.message);
+    }
+
+    // Rule name in dim if available
+    if (item.rule && item.rule !== "unknown") {
+      const ruleText = this.styleText(`[${item.rule}]`, "dim", context);
+      parts.push(ruleText);
+    }
+
+    return `  ${parts.join(" ")}`;
+  }
+
+  /**
+   * Format severity with icon and color (ANSI styling only)
+   */
+  private formatSeverity(
+    severity: "error" | "warning" | "info",
+    context: WidgetRenderContext,
+  ): string {
+    const icons = context.options.useEmojis;
+
+    switch (severity) {
+      case "error": {
+        const errorIcon = icons ? "❌ " : "✗ ";
+        const errorText = this.styleText("error", "red", context);
+        return `${errorIcon}${errorText}`;
+      }
+      case "warning": {
+        const warnIcon = icons ? "⚠️  " : "!  ";
+        const warnText = this.styleText("warn", "yellow", context);
+        return `${warnIcon}${warnText}`;
+      }
+      case "info": {
+        const infoIcon = icons ? "ℹ️  " : "i  ";
+        const infoText = this.styleText("info", "blue", context);
+        return `${infoIcon}${infoText}`;
+      }
+      default:
+        return severity;
+    }
+  }
+}

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

@@ -0,0 +1,96 @@
+/**
+ * Code Quality Summary Widget Renderer
+ * Renders summary statistics for code quality checks
+ */
+
+import { WidgetType } from "@/app/api/[locale]/system/unified-interface/shared/types/enums";
+
+import { BaseWidgetRenderer } from "../core/base-renderer";
+import type { CLIWidgetProps } from "../core/types";
+
+export class CodeQualitySummaryWidgetRenderer extends BaseWidgetRenderer<
+  typeof WidgetType.CODE_QUALITY_SUMMARY
+> {
+  readonly widgetType = WidgetType.CODE_QUALITY_SUMMARY;
+
+  render(
+    props: CLIWidgetProps<typeof WidgetType.CODE_QUALITY_SUMMARY, string>,
+  ): string {
+    const { value, context } = props;
+
+    if (typeof value !== "object" || value === null || Array.isArray(value)) {
+      return "";
+    }
+
+    const result: string[] = [];
+
+    // Header
+    const headerIcon = context.options.useEmojis ? "📊 " : "";
+    const headerText = this.styleText(`${headerIcon}Summary`, "bold", context);
+    result.push(headerText);
+
+    // Separator
+    const separator = "─".repeat(50);
+    result.push(this.styleText(separator, "dim", context));
+
+    // Extract values
+    const totalFiles =
+      "totalFiles" in value && typeof value.totalFiles === "number"
+        ? value.totalFiles
+        : 0;
+    const displayedFiles =
+      "displayedFiles" in value && typeof value.displayedFiles === "number"
+        ? value.displayedFiles
+        : 0;
+    const totalIssues =
+      "totalIssues" in value && typeof value.totalIssues === "number"
+        ? value.totalIssues
+        : 0;
+    const displayedIssues =
+      "displayedIssues" in value && typeof value.displayedIssues === "number"
+        ? value.displayedIssues
+        : 0;
+    const totalErrors =
+      "totalErrors" in value && typeof value.totalErrors === "number"
+        ? value.totalErrors
+        : 0;
+
+    const isTruncated =
+      displayedIssues < totalIssues || displayedFiles < totalFiles;
+
+    // Files stat
+    if (isTruncated) {
+      result.push(
+        `   ${this.styleText("Files:", "dim", context).padEnd(12)} ${displayedFiles} of ${totalFiles}`,
+      );
+    } else {
+      result.push(
+        `   ${this.styleText("Files:", "dim", context).padEnd(12)} ${totalFiles}`,
+      );
+    }
+
+    // Issues stat
+    if (isTruncated) {
+      result.push(
+        `   ${this.styleText("Issues:", "dim", context).padEnd(12)} ${displayedIssues} of ${totalIssues}`,
+      );
+    } else {
+      result.push(
+        `   ${this.styleText("Issues:", "dim", context).padEnd(12)} ${totalIssues}`,
+      );
+    }
+
+    // Errors
+    if (totalErrors > 0) {
+      const errorIcon = context.options.useEmojis ? "❌ " : "";
+      const errorText = this.styleText(
+        `${totalErrors} error${totalErrors !== 1 ? "s" : ""}`,
+        "red",
+        context,
+      );
+      result.push(`   ${errorIcon}${errorText}`);
+    }
+
+    return result.join("\n");
+  }
+}

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

@@ -0,0 +1,186 @@
+/**
+ * Container Widget Renderer
+ * Pure rendering implementation - ANSI codes, styling, layout only
+ * All business logic imported from shared
+ */
+
+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 ContainerConfig,
+  extractContainerData,
+  getContainerConfig,
+} from "@/app/api/[locale]/system/unified-interface/shared/widgets/logic/container";
+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 { formatCamelCaseLabel } from "@/app/api/[locale]/system/unified-interface/shared/widgets/utils/formatting";
+
+import { BaseWidgetRenderer } from "../core/base-renderer";
+import type { CLIWidgetProps, WidgetRenderContext } from "../core/types";
+
+export class ContainerWidgetRenderer extends BaseWidgetRenderer<
+  typeof WidgetType.CONTAINER
+> {
+  readonly widgetType = WidgetType.CONTAINER;
+
+  render(props: CLIWidgetProps<typeof WidgetType.CONTAINER, string>): string {
+    const { field, value, context } = props;
+
+    // For container, we expect object values with children or named fields
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      return this.renderContainerObject(value, field, context);
+    }
+
+    // Extract data using shared logic for array values
+    const data = extractContainerData(value);
+
+    // Handle null case
+    if (!data) {
+      const label = this.formatLabel(field, context);
+      return `${label}: —`;
+    }
+
+    const label = this.formatLabel(field, context);
+    const valueStr =
+      typeof value === "object" ? JSON.stringify(value) : String(value);
+    return `${label}: ${valueStr}`;
+  }
+
+  private renderContainerObject<const TKey extends string>(
+    value: { [key: string]: WidgetData },
+    field: UnifiedField<TKey>,
+    context: WidgetRenderContext,
+  ): string {
+    // Use shared config extraction
+    const config = getContainerConfig(field);
+    const result: string[] = [];
+    const { t } = getTranslator(context);
+
+    if ("label" in field.ui && field.ui.label) {
+      const title = t(field.ui.label);
+      const defaultIcon = context.options.useEmojis ? "📊 " : "";
+      const titleIcon = config.icon || defaultIcon;
+      const titleWithIcon = titleIcon + title;
+      const styledTitle = this.styleText(titleWithIcon, "bold", context);
+      result.push(styledTitle);
+    }
+
+    if ("description" in field.ui && field.ui.description) {
+      const description = t(field.ui.description);
+      result.push(`   ${description}`);
+      result.push("");
+    }
+
+    const fieldsOutput = this.renderFields(value, config, context, field);
+    result.push(fieldsOutput);
+
+    return result.join("\n");
+  }
+
+  private renderFields<const TKey extends string>(
+    data: { [key: string]: WidgetData },
+    config: ContainerConfig,
+    context: WidgetRenderContext,
+    field?: UnifiedField<TKey>,
+  ): string {
+    const result: string[] = [];
+    const layout = config.layout || { type: "vertical" as const, columns: 1 };
+
+    if (layout.type === "grid" && layout.columns && layout.columns > 1) {
+      return this.renderGridLayout(data, layout.columns, context, field);
+    }
+
+    for (const [key, value] of Object.entries(data)) {
+      if (value === undefined || value === null) {
+        continue;
+      }
+
+      if (field?.type === "object" && field.children?.[key]) {
+        const childField = field.children[key];
+        const rendered = context.renderWidget(
+          childField.ui.type,
+          childField,
+          value,
+        );
+        if (rendered) {
+          result.push(rendered);
+        }
+      } else {
+        const formattedValue = this.formatContainerValue(key, value, context);
+        result.push(formattedValue);
+      }
+    }
+
+    return result.join("\n");
+  }
+
+  private renderGridLayout<const TKey extends string>(
+    data: { [key: string]: WidgetData },
+    columns: number,
+    context: WidgetRenderContext,
+    field?: UnifiedField<TKey>,
+  ): string {
+    const entries = Object.entries(data);
+    const result: string[] = [];
+
+    for (let i = 0; i < entries.length; i += columns) {
+      const chunk = entries.slice(i, i + columns);
+      const row = chunk
+        .map(([key, value]) => {
+          if (field?.type === "object" && field.children?.[key]) {
+            const childField = field.children[key];
+            return context.renderWidget(childField.ui.type, childField, value);
+          }
+          return this.formatContainerValue(key, value, context);
+        })
+        .join("  ");
+      result.push(row);
+    }
+
+    return result.join("\n");
+  }
+
+  /**
+   * Format a single container value (like a metric card) - RENDERING ONLY
+   */
+  private formatContainerValue(
+    key: string,
+    value: WidgetData,
+    context: WidgetRenderContext,
+  ): string {
+    // Handle primitive values
+    if (
+      typeof value === "string" ||
+      typeof value === "number" ||
+      typeof value === "boolean"
+    ) {
+      const icon = this.getMetricIcon(context);
+      // Use shared formatting utility
+      const label = formatCamelCaseLabel(key);
+      const formattedValue =
+        typeof value === "number" && Number.isInteger(value)
+          ? value.toString()
+          : typeof value === "number"
+            ? value.toFixed(2)
+            : String(value);
+      return `${icon}${label}: ${formattedValue}`;
+    }
+
+    // Handle complex values
+    const label = formatCamelCaseLabel(key);
+    return `${label}: ${JSON.stringify(value)}`;
+  }
+
+  /**
+   * Get icon for metric based on configuration (RENDERING ONLY)
+   */
+  private getMetricIcon(context: WidgetRenderContext): string {
+    if (!context.options.useEmojis) {
+      return "";
+    }
+
+    // Default icon for metrics
+    // eslint-disable-next-line i18next/no-literal-string
+    return "📊 ";
+  }
+}

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

@@ -0,0 +1,65 @@
+/**
+ * Data Card Widget Renderer
+ * Handles DATA_CARD widget type for CLI display
+ */
+
+import { WidgetType } from "@/app/api/[locale]/system/unified-interface/shared/types/enums";
+import { extractDataCardData } from "@/app/api/[locale]/system/unified-interface/shared/widgets/logic/data-card";
+
+import { BaseWidgetRenderer } from "../core/base-renderer";
+import type { CLIWidgetProps } from "../core/types";
+
+export class DataCardWidgetRenderer extends BaseWidgetRenderer<
+  typeof WidgetType.DATA_CARD
+> {
+  readonly widgetType = WidgetType.DATA_CARD;
+
+  render(props: CLIWidgetProps<typeof WidgetType.DATA_CARD, string>): string {
+    const { value, context } = props;
+    const indent = this.createIndent(context.depth, context);
+
+    // Extract data using shared logic
+    const data = extractDataCardData(value);
+
+    // Handle null case
+    if (!data) {
+      return `${indent}—`;
+    }
+
+    const lines: string[] = [];
+
+    // Title
+    const title = this.styleText(data.title, "bold", context);
+    lines.push(`${indent}${title}`);
+
+    // Description
+    if (data.description) {
+      const desc = this.styleText(data.description, "dim", context);
+      lines.push(`${indent}${desc}`);
+    }
+
+    // Separator
+    if (data.fields.length > 0) {
+      lines.push(`${indent}${this.createSeparator(40)}`);
+    }
+
+    // Fields
+    for (const field of data.fields) {
+      const label = this.styleText(`${field.label}:`, "bold", context);
+      const fieldValue =
+        field.value !== null && field.value !== undefined
+          ? String(field.value)
+          : "—";
+      lines.push(`${indent}  ${label} ${fieldValue}`);
+    }
+
+    // Actions
+    if (data.actions && data.actions.length > 0) {
+      lines.push("");
+      const actionsText = data.actions.map((a) => a.label).join(" | ");
+      lines.push(`${indent}  ${this.styleText(actionsText, "blue", context)}`);
+    }
+
+    return lines.join("\n");
+  }
+}