spicecodecli · CodyKoInABox · Jun 30, 2025 · Jun 30, 2025 · Jun 30, 2025 · Jun 30, 2025
diff --git a/spicecloud/pages/_app.tsx b/spicecloud/pages/_app.tsx
@@ -1,6 +1,17 @@
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
+import Head from 'next/head'
+import React from 'react'
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+      <>
+        <Head>
+          <title>SpiceCloud | Powered by SpiceCodeCLI</title>
+        </Head>
+
+        <Component {...pageProps} />
+      </>
+  )
+
 }
diff --git a/spicecloud/pages/_document.tsx b/spicecloud/pages/_document.tsx
@@ -3,7 +3,9 @@ import { Html, Head, Main, NextScript } from "next/document";
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <link rel="icon" href="/spicecode-logo.png" />
+      </Head>
       <body className="antialiased">
         <Main />
         <NextScript />

diff --git a/spicecloud/pages/api/files.ts b/spicecloud/pages/api/files.ts
@@ -0,0 +1,15 @@
+// pages/api/files.ts
+import { promises as fs } from 'fs';
+import path from 'path';
+
+export default async function handler(req: any, res: { status: (arg0: number) => { (): any; new(): any; json: { (arg0: { error: string; }): void; new(): any; }; }; }) {
+  try {
+    const filePath = path.join(process.cwd(), 'data', 'metrics.json');
+    const fileContent = await fs.readFile(filePath, 'utf-8');
+    const jsonData = JSON.parse(fileContent);
+    res.status(200).json(jsonData);
+  } catch (err) {
+    console.error('Erro ao ler metrics.json', err);
+    res.status(500).json({ error: 'Failed to load metrics.json' });
+  }
+}
diff --git a/spicecloud/pages/components/EmptyState.tsx b/spicecloud/pages/components/EmptyState.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { styles } from '../utils/styles';
+
+export const EmptyState: React.FC = () => {
+  return (
+    <div style={styles.emptyState}>
+      <div style={styles.emptyStateContent}>
+        <div style={styles.emptyStateIcon}>👆</div>
+        <p style={styles.emptyStateText}>Select a file from the sidebar to view its metrics</p>
+      </div>
+    </div>
+  );
+};
diff --git a/spicecloud/pages/components/FileHeader.tsx b/spicecloud/pages/components/FileHeader.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { MetricData } from '../utils/types';
+import { getFileIconSrc } from '../utils/utils';
+import { styles } from '../utils/styles';
+
+interface FileHeaderProps {
+  selectedFile: MetricData;
+}
+
+export const FileHeader: React.FC<FileHeaderProps> = ({ selectedFile }) => {
+  return (
+    <div style={styles.fileHeader}>
+      <div style={styles.fileHeaderContent}>
+        <div style={styles.fileHeaderIcon}>
+          <img
+            src={getFileIconSrc(selectedFile.metrics.file_extension)}
+            alt={selectedFile.metrics.file_extension}
+            style={styles.fileHeaderImg}
+          />
+        </div>
+
+        <div style={{ flex: 1 }}>
+          <h2 style={styles.fileHeaderTitle}>{selectedFile.file_name}</h2>
+          <p style={styles.fileHeaderPath} title={selectedFile.file_path}>
+            📁 {selectedFile.file_path}
+          </p>
+          <div style={styles.fileHeaderMeta}>
+            <span>🕒 {selectedFile.readable_timestamp}</span>
+            <span>💾 {selectedFile.metrics.file_size ? `${(selectedFile.metrics.file_size / 1024).toFixed(1)} KB` : 'N/A'}</span>
+            <span>📂 {selectedFile.metrics.file_extension || 'N/A'}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/spicecloud/pages/components/FileList.tsx b/spicecloud/pages/components/FileList.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { MetricData } from '../utils/types';
+import { getFileIconSrc, formatAge } from '../utils/utils';
+import { styles } from '../utils/styles';
+
+interface FileListProps {
+  data: MetricData[];
+  selectedFile: MetricData | null;
+  onFileSelect: (file: MetricData) => void;
+}
+
+export const FileList: React.FC<FileListProps> = ({ data, selectedFile, onFileSelect }) => {
+  return (
+    <div style={styles.sidebar}>
+      <h2 style={styles.sidebarTitle}>
+        <span>📁</span>
+        Analyzed Files
+      </h2>
+      <div style={styles.fileList}>
+        {data.map((item) => (
+          <div
+            key={item.id}
+            onClick={() => onFileSelect(item)}
+            style={{
+              ...styles.fileItem,
+              ...(selectedFile?.id === item.id
+                ? styles.fileItemSelected
+                : styles.fileItemDefault)
+            }}
+            className="file-item"
+            onMouseEnter={(e) => {
+              if (selectedFile?.id !== item.id) {
+                e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (selectedFile?.id !== item.id) {
+                e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)';
+              }
+            }}
+          >
+            <div style={styles.fileInfo}>
+              <div style={styles.fileIcon}>
+                <img
+                  src={getFileIconSrc(item.metrics.file_extension)}
+                  alt={item.metrics.file_extension}
+                  style={styles.fileIconImg}
+                />
+              </div>
+
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={styles.fileName} title={item.file_name}>
+                  {item.file_name}
+                </div>
+                <div style={styles.filePath} title={item.file_path}>
+                  {item.file_path.replace(item.file_name, '')}
+                </div>
+                <div style={styles.fileAge}>
+                  <span>🕒</span>
+                  {formatAge(item.age)}
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/spicecloud/pages/components/Header.tsx b/spicecloud/pages/components/Header.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { styles } from '../utils/styles';
+
+interface HeaderProps {
+  dataLength: number;
+  loading: boolean;
+  onRefresh: () => void;
+}
+
+export const Header: React.FC<HeaderProps> = ({ dataLength, loading, onRefresh }) => {
+  return (
+    <div style={styles.header}>
+      <div style={styles.headerContent}>
+        <div>
+          <h1 style={styles.title}>
+            <img 
+              src="/spicecode-logo.png" 
+              alt="SpiceCode Logo" 
+              style={{ width: '3rem', height: '3rem', verticalAlign: 'middle', marginRight: '0.5rem' }}
+            />
+            SpiceCloud | Powered by SpiceCodeCLI
+          </h1>
+          <p style={styles.subtitle}>{dataLength} files analyzed</p>
+        </div>
+        <button 
+          onClick={onRefresh}
+          disabled={loading}
+          style={{
+            ...styles.refreshButton,
+            background: loading ? '#bfa865' : '#d97304'
+          }}
+        >
+          {loading ? '🔄 Updating...' : '🔄 Refresh'}
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/spicecloud/pages/components/IndentationCard.tsx b/spicecloud/pages/components/IndentationCard.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { styles } from '../utils/styles';
+
+interface IndentationCardProps {
+  indentationType?: string;
+  indentationSize?: number;
+}
+
+export const IndentationCard: React.FC<IndentationCardProps> = ({ 
+  indentationType, 
+  indentationSize 
+}) => {
+  return (
+    <div style={{ ...styles.metricCard, ...styles.indentationCard }} className="metric-card">
+      <div style={styles.metricHeader}>
+        <span style={styles.metricIcon} className="metric-icon">📐</span>
+        <h3 style={styles.metricTitle}>Indentation</h3>
+      </div>
+      <div style={styles.indentationList}>
+        <div style={styles.indentationItem}>
+          <span style={styles.indentationLabel}>Type:</span>
+          <span style={styles.indentationValue}>
+            {indentationType || 'N/A'}
+          </span>
+        </div>
+        <div style={styles.indentationItem}>
+          <span style={styles.indentationLabel}>Size:</span>
+          <span style={styles.indentationValue}>
+            {indentationSize || 'N/A'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/spicecloud/pages/components/LoadingSpinner.tsx b/spicecloud/pages/components/LoadingSpinner.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { styles } from '../utils/styles';
+
+export const LoadingSpinner: React.FC = () => {
+  return (
+    <div style={styles.loading}>
+      <div style={{ textAlign: 'center' }}>
+        <div style={styles.loadingSpinner}></div>
+        <p style={{ marginTop: '1.5rem', fontSize: '1.125rem' }}>Loading your code metrics...</p>
+      </div>
+    </div>
+  );
+};
diff --git a/spicecloud/pages/components/MethodTypeCard.tsx b/spicecloud/pages/components/MethodTypeCard.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { styles } from '../utils/styles';
+
+interface MethodTypeCardProps {
+  value: {
+    public: number;
+    private: number;
+  };
+}
+
+export const MethodTypeCard: React.FC<MethodTypeCardProps> = ({ value }) => {
+  return (
+    <div 
+      style={{ ...styles.metricCard, ...styles.methodTypeCard }}
+      className="metric-card"
+    >
+      <div style={styles.metricHeader}>
+        <span style={styles.metricIcon} className="metric-icon">🔧</span>
+        <h3 style={styles.metricTitle}>Method Types</h3>
+      </div>
+      <div style={styles.methodTypeList}>
+        <div style={styles.methodTypeItem}>
+          <div style={styles.methodTypeLabel}>
+            <span style={{ ...styles.methodTypeDot, background: '#10b981' }}></span>
+            <span style={styles.methodTypeText}>Public</span>
+          </div>
+          <span style={styles.methodTypeValue}>{value.public}</span>
+        </div>
+        <div style={styles.methodTypeItem}>
+          <div style={styles.methodTypeLabel}>
+            <span style={{ ...styles.methodTypeDot, background: '#3b82f6' }}></span>
+            <span style={styles.methodTypeText}>Private</span>
+          </div>
+          <span style={styles.methodTypeValue}>{value.private}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/spicecloud/pages/components/MetricCard.tsx b/spicecloud/pages/components/MetricCard.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { formatMetricValue, getMetricIcon, getMetricColor, formatLabel } from '../utils/utils';
+import { styles } from '../utils/styles';
+
+interface MetricCardProps {
+  metricKey: string;
+  value: any;
+}
+
+export const MetricCard: React.FC<MetricCardProps> = ({ metricKey, value }) => {
+  return (
+    <div 
+      style={{ 
+        ...styles.metricCard, 
+        background: getMetricColor(metricKey).replace('135deg', '135deg') + '20'
+      }}
+      className="metric-card"
+      onMouseEnter={(e) => {
+        e.currentTarget.style.transform = 'scale(1.05)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.transform = 'scale(1)';
+      }}
+    >
+      <div style={styles.metricHeader}>
+        <span style={styles.metricIcon} className="metric-icon">
+          {getMetricIcon(metricKey)}
+        </span>
+        <h3 style={styles.metricTitle}>
+          {formatLabel(metricKey)}
+        </h3>
+      </div>
+      <div style={styles.metricValue}>
+        {formatMetricValue(metricKey, value)}
+      </div>
+      {metricKey.includes('ratio') && (
+        <div style={styles.progressBar}>
+          <div 
+            style={{
+              ...styles.progressFill,
+              width: `${Math.min((value as number) * 100, 100)}%`
+            }}
+          ></div>
+        </div>
+      )}
+    </div>
+  );
+};