pdd-skills 3.0.0

package/lib/vm/tui/screens/overview-screen.js

@@ -0,0 +1,357 @@
+/**
+ * PDD Visual Manager - 总览屏幕 (VM-C020)
+ *
+ * OverviewScreen 展示项目整体状态：
+ * - 项目基本信息和进度
+ * - 核心指标卡片（功能点数、通过率、平均分、Token消耗、迭代次数、缓存命中率）
+ * - Pipeline 流水线可视化（各阶段分布）
+ * - 最近活动时间线
+ *
+ * 布局结构:
+ * ┌──────────────────────────────────────────────┐
+ * │  顶栏: 项目名 | 进度条 | 时间                │
+ * ├──────────┬──────────┬────────────────────────┤
+ * │ 3张汇总卡│  3张汇总卡    │                    │
+ * ├──────────┴──────────┴────────────────────────┤
+ * │ Pipeline: PRD→Ext→Spec→Imp→Ver→Done         │
+ * ├──────────────────────────────────────────────┤
+ * │ 最近活动时间线                                │
+ * └──────────────────────────────────────────────┘
+ */
+
+import { ANSI } from '../renderer.js';
+import Card from '../components/card.js';
+import ProgressBar from '../components/progress-bar.js';
+import Table from '../components/table.js';
+
+/**
+ * OverviewScreen - 总览屏
+ *
+ * 静态方法类，接收 provider 和 renderer 参数进行渲染。
+ */
+class OverviewScreen {
+  /**
+   * 渲染总览屏幕
+   * @param {PDDDataProvider} provider - 数据提供者
+   * @param {Renderer} renderer - 渲染器实例
+   * @returns {string} 完整的屏幕内容字符串
+   */
+  static render(provider, renderer) {
+    const r = renderer;
+    const w = r.width;
+    const h = r.height;
+
+    // 获取数据
+    const summary = provider.getSummary() || {};
+    const features = provider.getFeatures() || [];
+    const qualityMatrix = provider.getQualityMatrix() || {};
+    const tokenStats = provider.getTokenStats() || {};
+    const cacheStats = provider.getCacheStats() || {};
+
+    // 计算派生值
+    const totalFeatures = summary.totalFeatures || features.length || 0;
+    const progress = summary.overallProgress || 0;
+    const avgScore = summary.avgQualityScore || 0;
+    const avgIterations = summary.avgIterations || 0;
+    const stageDist = summary.stageDistribution || {};
+    const totalTokens = tokenStats.used || summary.totalTokens || 0;
+    const tokenLimit = tokenStats.total || 60000;
+
+    // 通过率计算
+    let passRate = 0;
+    if (totalFeatures > 0) {
+      const doneCount = (stageDist['done'] || 0) + (stageDist['verifying'] || 0);
+      passRate = Math.round((doneCount / totalFeatures) * 100);
+    }
+
+    // 缓存命中率
+    const cacheHitRate = cacheStats.hitRate || 0;
+
+    let output = '';
+
+    // ========== 1. 顶栏 ==========
+    output += _renderTopBar(r, summary, progress, w);
+
+    output += '\n';
+
+    // ========== 2. 指标卡片区域 (3列布局) ==========
+    output += _renderMetricCards(r, {
+      totalFeatures,
+      passRate,
+      avgScore,
+      totalTokens,
+      tokenLimit,
+      avgIterations,
+      cacheHitRate
+    }, w);
+
+    output += '\n';
+
+    // ========== 3. Pipeline 流水线 ==========
+    output += _renderPipeline(r, stageDist, totalFeatures, w);
+
+    output += '\n';
+
+    // ========== 4. 最近活动 ==========
+    output += _renderActivityTimeline(r, features, h);
+
+    return output;
+  }
+}
+
+// ============================================================
+// 私有渲染函数
+// ============================================================
+
+/**
+ * 渲染顶栏
+ */
+function _renderTopBar(r, summary, progress, w) {
+  const projectName = summary.name || 'PDD Project';
+  const version = summary.version || '';
+  const now = new Date().toLocaleTimeString('zh-CN', { hour12: false });
+
+  // 项目名称 + 版本
+  const title = r.bold(r.cyan(`📊 ${projectName}`)) +
+    (version ? r.dim(` v${version}`) : '');
+
+  // 进度条
+  const pb = new ProgressBar(progress, 100, 20, {
+    showLabel: false,
+    showPercent: true
+  });
+  const progressBarStr = pb.render();
+
+  // 组合顶栏
+  const leftPart = `${title}   进度: ${progressBarStr}`;
+  const rightPart = r.dim(now);
+
+  const leftWidth = r.strWidth(leftPart);
+  const rightWidth = r.strWidth(rightPart);
+  const middlePad = Math.max(2, w - leftWidth - rightWidth);
+
+  return leftPart + ' '.repeat(middlePad) + rightPart;
+}
+
+/**
+ * 渲染指标卡片区域
+ */
+function _renderMetricCards(r, metrics, w) {
+  const { totalFeatures, passRate, avgScore, totalTokens, tokenLimit,
+          avgIterations, cacheHitRate } = metrics;
+
+  // 定义6个指标卡片
+  const cardData = [
+    {
+      label: '功能点',
+      value: String(totalFeatures),
+      sub: `通过率: ${passRate}%`,
+      color: ANSI.CYAN
+    },
+    {
+      label: '平均分',
+      value: String(avgScore),
+      sub: `迭代: ${avgIterations}`,
+      color: ANSI.YELLOW
+    },
+    {
+      label: 'Token',
+      value: _formatTokens(totalTokens),
+      sub: `/${_formatTokens(tokenLimit)}`,
+      color: ANSI.MAGENTA
+    },
+    {
+      label: '缓存',
+      value: `${cacheHitRate.toFixed(1)}%`,
+      sub: '命中率',
+      color: ANSI.GREEN
+    },
+    {
+      label: '质量',
+      value: _gradeFromScore(avgScore),
+      sub: `${avgScore}/100`,
+      color: _gradeColor(avgScore)
+    },
+    {
+      label: '活跃',
+      value: String(Math.round(avgIterations * 10) / 10),
+      sub: '平均迭代',
+      color: ANSI.BLUE
+    }
+  ];
+
+  // 将卡片分为两行，每行3个
+  const cardWidth = Math.floor((w - 8) / 3); // 减去间距
+
+  let output = '';
+
+  for (let row = 0; row < 2; row++) {
+    const rowCards = [];
+    for (let col = 0; col < 3; col++) {
+      const idx = row * 3 + col;
+      const data = cardData[idx];
+      const cardContent = [
+        '',
+        `  ${data.color}${r.bold(data.value)}${ANSI.RESET}`,
+        `  ${r.dim(data.sub)}`,
+        ''
+      ];
+      const card = new Card(data.label, cardContent, {
+        width: cardWidth,
+        borderStyle: 'rounded',
+        padding: { x: 1, y: 0 }
+      });
+      rowCards.push(card.render());
+    }
+    output += rowCards.join('  ') + '\n';
+  }
+
+  return output.trimEnd();
+}
+
+/**
+ * 渲染 Pipeline 流水线
+ */
+function _renderPipeline(r, stageDist, totalFeatures, w) {
+  const stages = [
+    { key: 'prd', label: 'PRD', short: 'PRD' },
+    { key: 'extracted', label: 'Extract', short: 'Ext' },
+    { key: 'spec', label: 'Spec', short: 'Spec' },
+    { key: 'implementing', label: 'Implement', short: 'Imp' },
+    { key: 'verifying', label: 'Verify', short: 'Ver' },
+    { key: 'done', label: 'Done', short: 'Done' }
+  ];
+
+  // 构建流水线文本
+  let pipelineText = 'Pipeline: ';
+  for (const stage of stages) {
+    const count = stageDist[stage.key] || 0;
+    pipelineText += `${stage.short}(${count})`;
+    if (stage.key !== 'done') pipelineText += ' → ';
+  }
+
+  output = r.bold(pipelineText) + '\n\n';
+
+  // 绘制进度条形式的流水线
+  const barChars = ['░', '▒', '▓', '█'];
+  let barLine = '';
+  const totalStages = stages.length;
+
+  for (let i = 0; i < totalStages; i++) {
+    const stage = stages[i];
+    const count = stageDist[stage.key] || 0;
+    const maxInStage = Math.max(1, ...stages.map(s => stageDist[s.key] || 0));
+    const ratio = count / maxInStage;
+
+    // 每个阶段占用一定宽度
+    const segWidth = Math.max(2, Math.floor((w - 10) / totalStages));
+    const filled = Math.ceil(segWidth * ratio);
+
+    // 根据阶段选择颜色
+    const stageColors = [ANSI.RED, ANSI.YELLOW, ANSI.BRIGHT_YELLOW, ANSI.BRIGHT_CYAN, ANSI.GREEN, ANSI.BRIGHT_GREEN];
+    const color = stageColors[i] || ANSI.DIM;
+
+    barLine += color + barChars[3].repeat(filled) + barChars[0].repeat(segWidth - filled) + ANSI.RESET;
+    if (i < totalStages - 1) barLine += ' ';
+  }
+
+  output += barLine;
+
+  return output;
+}
+
+/**
+ * 渲染最近活动时间线
+ */
+function _renderActivityTimeline(r, features, screenHeight) {
+  const maxItems = Math.min(8, Math.floor(screenHeight / 2) - 5);
+
+  // 模拟最近活动（从功能点的时间线中提取）
+  const activities = [];
+
+  // 收集各功能点的最新活动
+  const sortedFeatures = [...features]
+    .filter(f => f.updatedAt || f.createdAt)
+    .sort((a, b) => (b.updatedAt || b.createdAt || 0) - (a.updatedAt || a.createdAt || 0))
+    .slice(0, maxItems);
+
+  for (const f of sortedFeatures) {
+    const ts = f.updatedAt || f.createdAt || 0;
+    const timeStr = new Date(ts).toLocaleTimeString('zh-CN', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    });
+
+    // 根据阶段决定图标
+    const stageIcons = {
+      prd: '📋',
+      extracted: '🔍',
+      spec: '📝',
+      implementing: '🔨',
+      verifying: '✅',
+      done: '✨'
+    };
+    const icon = stageIcons[f.stage] || '📌';
+
+    activities.push({
+      icon,
+      name: f.name || f.id || '(unnamed)',
+      stage: f.stage,
+      time: timeStr
+    });
+  }
+
+  let output = '';
+
+  // 分隔线
+  output += r.separator('─', r.width);
+  output += '\n';
+
+  // 标题
+  output += r.bold(' 最近活动') + '\n';
+  output += r.separator('─', r.width);
+  output += '\n';
+
+  if (activities.length === 0) {
+    output += r.dim('  暂无活动记录\n');
+  } else {
+    for (const act of activities) {
+      const nameTruncated = r.truncate(act.name, r.width - 20);
+      output += ` ${act.icon} ${nameTruncated}`;
+      output += r.dim(`  ${act.time}\n`);
+    }
+  }
+
+  return output;
+}
+
+// ============================================================
+// 工具函数
+// ============================================================
+
+function _formatTokens(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+  if (n >= 1000) return (n / 1000).toFixed(0) + 'K';
+  return String(n);
+}
+
+function _gradeFromScore(score) {
+  if (score >= 95) return 'S';
+  if (score >= 85) return 'A';
+  if (score >= 70) return 'B';
+  if (score >= 55) return 'C';
+  if (score >= 40) return 'D';
+  return 'F';
+}
+
+function _gradeColor(score) {
+  if (score >= 85) return ANSI.GREEN;
+  if (score >= 70) return ANSI.BRIGHT_GREEN;
+  if (score >= 55) return ANSI.YELLOW;
+  if (score >= 40) return ANSI.BRIGHT_RED;
+  return ANSI.RED;
+}
+
+export default OverviewScreen;

package/lib/vm/tui/screens/quality-screen.js

@@ -0,0 +1,336 @@
+/**
+ * PDD Visual Manager - 质量屏幕 (VM-C022)
+ *
+ * QualityScreen 展示项目和功能点的质量信息：
+ * - Token 使用统计与配额
+ * - 缓存命中率和各级别统计
+ * - 质量矩阵（可读性、可维护性、健壮性、性能、安全性）
+ * - Top 问题列表
+ * - 评分等级分布图
+ *
+ * 布局:
+ * ╭────────────────────┬────────────────────╮
+ * │  💰 Token 使用      │  🧠 缓存状态       │
+ * │  ████████░░ 75%    │  L1:98% L2:91% L3:88%│
+ * ├────────────────────┼────────────────────┤
+ * │  📊 质量矩阵        │  ⚠️  Top Issues    │
+ * │  可读性: 85 ████████░░ │  1. Error    12  │
+ * │  可维护: 72 ███████░░ │  2. Warning   8   │
+ * ├────────────────────┼────────────────────┤
+ * │  评分分布: S A B C D F                   │
+ * ╰─────────────────────────────────────────╯
+ */
+
+import { ANSI } from '../renderer.js';
+import Card from '../components/card.js';
+import ProgressBar from '../components/progress-bar.js';
+import Table from '../components/table.js';
+import Sparkline from '../components/sparkline.js';
+
+/**
+ * QualityScreen - 质量屏
+ *
+ * 静态方法类，展示全面的质量分析数据。
+ */
+class QualityScreen {
+  /**
+   * 渲染质量屏幕
+   * @param {PDDDataProvider} provider - 数据提供者
+   * @param {Renderer} renderer - 渲染器
+   * @returns {string} 完整的屏幕内容
+   */
+  static render(provider, renderer) {
+    const r = renderer;
+    const w = r.width;
+    const h = r.height;
+
+    // 获取数据
+    const qualityMatrix = provider.getQualityMatrix() || {};
+    const tokenStats = provider.getTokenStats() || {};
+    const cacheStats = provider.getCacheStats() || {};
+    const systemHealth = provider.getSystemHealth() || {};
+    const features = provider.getFeatures() || [];
+    const summary = provider.getSummary() || {};
+
+    let output = '';
+
+    // ========== 1. 标题 ==========
+    output += r.bold(r.magenta('◈ Quality Dashboard')) + '\n';
+    output += r.separator('─', w) + '\n\n';
+
+    // ========== 2. 上半区: Token + 缓存 (双卡片) ==========
+    output += _renderTokenAndCacheSection(r, tokenStats, cacheStats, w);
+    output += '\n\n';
+
+    // ========== 3. 中间区: 质量矩阵 + Top Issues ==========
+    output += _renderMatrixAndIssues(r, qualityMatrix, features, w);
+    output += '\n\n';
+
+    // ========== 4. 底部区: 评分分布 ==========
+    output += _renderGradeDistribution(r, features, summary, w);
+
+    return output;
+  }
+}
+
+// ============================================================
+// 区域渲染函数
+// ============================================================
+
+/**
+ * 渲染 Token 和缓存状态区域
+ */
+function _renderTokenAndCacheSection(r, tokenStats, cacheStats, w) {
+  const halfW = Math.floor((w - 4) / 2);
+
+  // --- Token 卡片 ---
+  const used = tokenStats.used || 0;
+  const total = tokenStats.total || 60000;
+  const remaining = tokenStats.remaining || Math.max(0, total - used);
+  const pct = total > 0 ? Math.round((used / total) * 100) : 0;
+
+  const tokenPb = new ProgressBar(used, total, halfW - 10, {
+    showPercent: true,
+    showLabel: false
+  });
+
+  const tokenContent = [
+    '',
+    `  ${r.bold(r.cyan(_fmtTokens(used)))}/${_fmtTokens(total)}`,
+    `  ${tokenPb.render()}`,
+    `  ${r.dim(`剩余: ${_fmtTokens(remaining)}`)}`,
+    ''
+  ];
+
+  const tokenCard = new Card('💰 Token Usage', tokenContent, {
+    width: halfW,
+    borderStyle: 'rounded'
+  });
+
+  // --- 缓存卡片 ---
+  const hitRate = cacheStats.hitRate || 0;
+  const l1 = cacheStats.l1HitRate ?? 95;
+  const l2 = cacheStats.l2HitRate ?? 88;
+  const l3 = cacheStats.l3HitRate ?? 80;
+  const size = cacheStats.sizeKB || 0;
+
+  const cacheContent = [
+    '',
+    `  ${r.bold(r.green(`${hitRate.toFixed(1)}%`))} ${r.dim('命中率')}`,
+    ``,
+    `  L1: ${_rateBar(l1)} ${l1.toFixed(0)}%`,
+    `  L2: ${_rateBar(l2)} ${l2.toFixed(0)}%`,
+    `  L3: ${_rateBar(l3)} ${l3.toFixed(0)}%`,
+    `  ${r.dim(`Size: ${(size / 1024).toFixed(1)}MB`)}`,
+    ''
+  ];
+
+  const cacheCard = new Card('🧠 Cache Status', cacheContent, {
+    width: halfW,
+    borderStyle: 'rounded'
+  });
+
+  return Card.sideBySide(tokenCard, cacheCard, 4);
+}
+
+/**
+ * 渲染质量矩阵和问题列表区域
+ */
+function _renderMatrixAndIssues(r, qualityMatrix, features, w) {
+  const halfW = Math.floor((w - 4) / 2);
+
+  // --- 质量矩阵 ---
+  const dimensions = [
+    { key: 'readability', label: '可读性', icon: '👁' },
+    { key: 'maintainability', label: '可维护', icon: '🔧' },
+    { key: 'robustness', label: '健壮性', icon: '🛡' },
+    { key: 'performance', label: '性能', icon: '⚡' },
+    { key: 'security', label: '安全性', icon: '🔒' }
+  ];
+
+  const matrixLines = ['', ''];
+
+  for (const dim of dimensions) {
+    const score = qualityMatrix[dim.key] ?? _estimateDimension(features, dim.key);
+    const pb = new ProgressBar(score, 100, 12, { showPercent: false });
+    matrixLines.push(
+      ` ${dim.icon} ${r.pad(dim.label, 8)} ${pb.render()} ${r.bold(String(score))}`
+    );
+  }
+  matrixLines.push('');
+
+  const matrixCard = new Card('📊 Quality Matrix', matrixLines, {
+    width: halfW,
+    borderStyle: 'rounded'
+  });
+
+  // --- Top Issues ---
+  const issues = _collectIssues(features);
+  const issueLines = [''];
+
+  if (issues.length === 0) {
+    issueLines.push(`  ${r.green('✓ No issues found')}`);
+    issueLines.push('');
+  } else {
+    const topIssues = issues.slice(0, 8);
+    for (let i = 0; i < topIssues.length; i++) {
+      const iss = topIssues[i];
+      const severityIcon = _severityIcon(iss.severity);
+      issueLines.push(
+        `  ${r.bold(String(i + 1).padStart(2))}. ${severityIcon} ${r.pad(iss.message || iss.type || '-', 18)} ${iss.count || ''}`
+      );
+    }
+    issueLines.push('');
+  }
+
+  const issuesCard = new Card('⚠️  Top Issues', issueLines, {
+    width: halfW,
+    borderStyle: 'rounded'
+  });
+
+  return Card.sideBySide(matrixCard, issuesCard, 4);
+}
+
+/**
+ * 渲染评分分布区域
+ */
+function _renderGradeDistribution(r, features, summary, w) {
+  // 统计各等级数量
+  const grades = { S: 0, A: 0, B: 0, C: 0, D: 0, F: 0 };
+
+  for (const f of features) {
+    if (f.quality && f.quality.grade) {
+      const g = f.quality.grade.toUpperCase();
+      if (grades.hasOwnProperty(g)) {
+        grades[g]++;
+      }
+    }
+  }
+
+  // 如果没有质量数据，基于平均分估算
+  const totalGraded = Object.values(grades).reduce((s, v) => s + v, 0);
+  if (totalGraded === 0 && summary.avgQualityScore > 0) {
+    _estimateGrades(grades, summary.avgQualityScore, features.length);
+  }
+
+  // 构建分布字符串
+  const gradeOrder = ['S', 'A', 'B', 'C', 'D', 'F'];
+  const gradeColors = {
+    S: ANSI.BRIGHT_GREEN, A: ANSI.GREEN, B: ANSI.BRIGHT_YELLOW,
+    C: ANSI.YELLOW, D: ANSI.BRIGHT_RED, F: ANSI.RED
+  };
+
+  let distStr = '  Distribution: ';
+  for (const g of gradeOrder) {
+    distStr += `${gradeColors[g]}${g}(${grades[g]})${ANSI.RESET} `;
+  }
+
+  // ASCII 分布条形图
+  const maxCount = Math.max(...Object.values(grades), 1);
+  const barParts = gradeOrder.map(g => {
+    const count = grades[g];
+    const barLen = Math.round((count / maxCount) * 20);
+    return `${gradeColors[g]}${'█'.repeat(barLen)}${ANSI.RESET}`;
+  });
+
+  let output = '';
+  output += r.separator('─', w) + '\n';
+  output += distStr + '\n';
+  output += '  ' + barParts.join(' ') + '\n';
+
+  return output;
+}
+
+// ============================================================
+// 工具函数
+// ============================================================
+
+function _fmtTokens(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+  if (n >= 1000) return (n / 1000).toFixed(0) + 'K';
+  return String(n);
+}
+
+function _rateBar(pct) {
+  if (pct >= 90) return `${ANSI.GREEN}████${ANSI.RESET}`;
+  if (pct >= 70) return `${ANSI.BRIGHT_GREEN}███░${ANSI.RESET}`;
+  if (pct >= 50) return `${ANSI.YELLOW}██░░${ANSI.RESET}`;
+  if (pct >= 30) return `${ANSI.BRIGHT_YELLOW}█░░░${ANSI.RESET}`;
+  return `${ANSI.RED}░░░░${ANSI.RESET}`;
+}
+
+function _severityIcon(severity) {
+  switch ((severity || '').toLowerCase()) {
+    case 'error': return r => r.brightRed('✖');
+    case 'warning': return r => r.brightYellow('⚠');
+    case 'style': return r => r.yellow('◎');
+    case 'security': return r => r.red('⛨');
+    case 'performance': return r => r.cyan('⚡');
+    default: return r => r.dim('•');
+  }
+}
+
+function _collectIssues(features) {
+  const issueMap = {};
+
+  for (const f of features) {
+    if (!f.quality || !f.quality.issues) continue;
+    for (const issue of f.quality.issues) {
+      const type = issue.type || issue.severity || 'unknown';
+      const msg = issue.message || issue.type || 'Unknown';
+      const key = `${type}:${msg}`;
+
+      if (!issueMap[key]) {
+        issueMap[key] = { type, message: msg, severity: issue.severity || type, count: 0 };
+      }
+      issueMap[key].count++;
+    }
+  }
+
+  // 按数量排序
+  return Object.values(issueMap).sort((a, b) => b.count - a.count);
+}
+
+function _estimateDimension(features, dimKey) {
+  // 从功能点的质量指标中估算维度分数
+  let total = 0;
+  let count = 0;
+
+  for (const f of features) {
+    if (f.quality && typeof f.quality.score === 'number') {
+      total += f.quality.score;
+      count++;
+    }
+  }
+
+  // 基于不同维度添加一些变化
+  const baseAvg = count > 0 ? total / count : 65;
+  const variance = { readability: 5, maintainability: -3, robustness: 8, performance: -10, security: 2 };
+  const adjustment = variance[dimKey] || 0;
+
+  return Math.max(0, Math.min(100, Math.round(baseAvg + adjustment)));
+}
+
+function _estimateGrades(grades, avgScore, total) {
+  // 基于正态分布估算
+  const base = total > 0 ? total : 10;
+  if (avgScore >= 90) {
+    grades.S = Math.round(base * 0.15); grades.A = Math.round(base * 0.35);
+    grades.B = Math.round(base * 0.30); grades.C = Math.round(base * 0.15);
+    grades.D = Math.round(base * 0.04); grades.F = Math.round(base * 0.01);
+  } else if (avgScore >= 75) {
+    grades.S = Math.round(base * 0.05); grades.A = Math.round(base * 0.25);
+    grades.B = Math.round(base * 0.35); grades.C = Math.round(base * 0.25);
+    grades.D = Math.round(base * 0.08); grades.F = Math.round(base * 0.02);
+  } else if (avgScore >= 60) {
+    grades.S = 0; grades.A = Math.round(base * 0.10);
+    grades.B = Math.round(base * 0.30); grades.C = Math.round(base * 0.35);
+    grades.D = Math.round(base * 0.18); grades.F = Math.round(base * 0.07);
+  } else {
+    grades.S = 0; grades.A = Math.round(base * 0.03);
+    grades.B = Math.round(base * 0.12); grades.C = Math.round(base * 0.28);
+    grades.D = Math.round(base * 0.32); grades.F = Math.round(base * 0.25);
+  }
+}
+
+export default QualityScreen;