Implement the prettier hook and formatting the files

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/enhancement-request.md

@@ -1,10 +1,9 @@
 ---
 name: Enhancement Request
 about: Describe this issue template's purpose here.
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Describe the current behavior**

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/workflows/ci.yml

@@ -2,11 +2,9 @@ name: Kaapi CI
 
 on:
   push:
-    branches:
-      - main
+    branches: [main]
   pull_request:
-    branches:
-      - main
+    branches: ["**"]
 
 jobs:
   lint-and-build:
@@ -19,11 +17,14 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          cache: 'npm'
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci
 
+      - name: Check Formatting with Prettier
+        run: npm run format:check
+
       - name: Run Linting
         run: npm run lint
 

.prettierignore

@@ -0,0 +1,15 @@
+node_modules
+.next
+out
+build
+coverage
+dist
+.git
+.husky
+public/mock-data
+*.tsbuildinfo
+next-env.d.ts
+.prettierrc
+package-lock.json
+yarn.lock
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

app/coming-soon/guardrails/page.tsx

@@ -2,7 +2,7 @@
  * Guardrails - Coming Soon Page
  */
 
-import ComingSoon from '@/app/components/ComingSoon';
+import ComingSoon from "@/app/components/ComingSoon";
 
 export default function GuardrailsPage() {
   return (

app/coming-soon/model-testing/page.tsx

@@ -2,7 +2,7 @@
  * Model Testing - Coming Soon Page
  */
 
-import ComingSoon from '@/app/components/ComingSoon';
+import ComingSoon from "@/app/components/ComingSoon";
 
 export default function ModelTestingPage() {
   return (

app/coming-soon/redteaming/page.tsx

@@ -2,7 +2,7 @@
  * Redteaming - Coming Soon Page
  */
 
-import ComingSoon from '@/app/components/ComingSoon';
+import ComingSoon from "@/app/components/ComingSoon";
 
 export default function RedteamingPage() {
   return (

app/coming-soon/text-to-speech/page.tsx

@@ -2,7 +2,7 @@
  * Text-to-Speech - Coming Soon Page
  */
 
-import ComingSoon from '@/app/components/ComingSoon';
+import ComingSoon from "@/app/components/ComingSoon";
 
 export default function TextToSpeechPage() {
   return (

app/components/ComingSoon.tsx

@@ -3,29 +3,36 @@
  * Features a coffee brewing theme to match Kaapi branding
  */
 
-"use client"
-import { useRouter } from 'next/navigation';
-import { colors } from '@/app/lib/colors';
+"use client";
+
+import { useRouter } from "next/navigation";
+import { colors } from "@/app/lib/colors";
 
 interface ComingSoonProps {
   featureName: string;
   description?: string;
 }
 
-export default function ComingSoon({ featureName, description }: ComingSoonProps) {
+export default function ComingSoon({
+  featureName,
+  description,
+}: ComingSoonProps) {
   const router = useRouter();
 
   return (
-    <div className="w-full h-screen flex flex-col" style={{ backgroundColor: colors.bg.secondary }}>
+    <div
+      className="w-full h-screen flex flex-col"
+      style={{ backgroundColor: colors.bg.secondary }}
+    >
       <div className="flex-1 flex items-center justify-center p-6">
         <div className="max-w-md w-full text-center">
           {/* Coffee Cup Animation */}
           <div className="mb-8 relative inline-block">
             <div
               className="text-8xl animate-bounce"
               style={{
-                animationDuration: '2s',
-                animationIterationCount: 'infinite'
+                animationDuration: "2s",
+                animationIterationCount: "infinite",
               }}
             >
               ☕
@@ -35,7 +42,7 @@ export default function ComingSoon({ featureName, description }: ComingSoonProps
               <div
                 className="text-3xl opacity-60"
                 style={{
-                  animation: 'steam 3s ease-in-out infinite'
+                  animation: "steam 3s ease-in-out infinite",
                 }}
               >
                 ～
@@ -48,35 +55,29 @@ export default function ComingSoon({ featureName, description }: ComingSoonProps
             className="text-3xl font-bold mb-4"
             style={{
               color: colors.text.primary,
-              letterSpacing: '-0.02em'
+              letterSpacing: "-0.02em",
             }}
           >
             {featureName}
           </h1>
 
-          <div
-            className="inline-block px-4 py-2 rounded-full mb-6 bg-[#fef3c7] border border-[#fde68a]"
-          >
-            <p
-              className="text-sm font-semibold text-[#92400e]"
-            >
+          <div className="inline-block px-4 py-2 rounded-full mb-6 bg-[#fef3c7] border border-[#fde68a]">
+            <p className="text-sm font-semibold text-[#92400e]">
               🚧 Being Brewed
             </p>
           </div>
 
-          <p
-            className="text-lg mb-8"
-            style={{ color: colors.text.secondary }}
-          >
-            {description || "This feature is currently being crafted with care. Check back soon for something amazing!"}
+          <p className="text-lg mb-8" style={{ color: colors.text.secondary }}>
+            {description ||
+              "This feature is currently being crafted with care. Check back soon for something amazing!"}
           </p>
 
           {/* Fun fact */}
           <div
             className="border rounded-lg p-4 mb-8"
             style={{
               backgroundColor: colors.bg.primary,
-              borderColor: colors.border
+              borderColor: colors.border,
             }}
           >
             <p
@@ -85,10 +86,7 @@ export default function ComingSoon({ featureName, description }: ComingSoonProps
             >
               ☕ Kaapi Fact
             </p>
-            <p
-              className="text-sm"
-              style={{ color: colors.text.secondary }}
-            >
+            <p className="text-sm" style={{ color: colors.text.secondary }}>
               Great features, like great coffee, take time to brew.
             </p>
           </div>
@@ -100,8 +98,8 @@ export default function ComingSoon({ featureName, description }: ComingSoonProps
             style={{
               backgroundColor: colors.accent.primary,
               color: colors.bg.primary,
-              border: 'none',
-              transition: 'all 0.15s ease'
+              border: "none",
+              transition: "all 0.15s ease",
             }}
             onMouseEnter={(e) => {
               e.currentTarget.style.backgroundColor = colors.accent.hover;
@@ -117,7 +115,8 @@ export default function ComingSoon({ featureName, description }: ComingSoonProps
 
       <style jsx global>{`
         @keyframes steam {
-          0%, 100% {
+          0%,
+          100% {
             transform: translateY(0) translateX(-50%) scale(1);
             opacity: 0.6;
           }