From 80e41c5bbc6e1f52c025851fb1d17361d94559cc Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Tue, 20 Jan 2026 12:06:41 +0100
Subject: [PATCH] [dyad] Added character count to length indicator - wrote 2
 file(s)

---
 src/components/length-indicator.tsx | 7 ++++++-
 src/components/meta-form.tsx        | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/length-indicator.tsx b/src/components/length-indicator.tsx
index 72c1dae..863acca 100644
--- a/src/components/length-indicator.tsx
+++ b/src/components/length-indicator.tsx
@@ -49,7 +49,12 @@ export function LengthIndicator({ length, type }: LengthIndicatorProps) {
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <div className={cn("h-3 w-3 rounded-full", colorClass)} />
+          <div className="flex items-center gap-2 cursor-default">
+            <div className={cn("h-3 w-3 rounded-full", colorClass)} />
+            <span className="text-sm font-medium text-muted-foreground w-8 text-right">
+              {length}
+            </span>
+          </div>
         </TooltipTrigger>
         <TooltipContent>
           <p>
diff --git a/src/components/meta-form.tsx b/src/components/meta-form.tsx
index e9df71c..a641d2f 100644
--- a/src/components/meta-form.tsx
+++ b/src/components/meta-form.tsx
@@ -72,11 +72,11 @@ export function MetaForm() {
           <CardContent className="space-y-4">
             <div>
               <div className="flex items-center gap-2 mb-1">
-                <h3 className="font-semibold text-card-foreground">Meta Title</h3>
                 <LengthIndicator
                   length={metaData.title.length}
                   type="title"
                 />
+                <h3 className="font-semibold text-card-foreground">Meta Title</h3>
               </div>
               <p className="text-muted-foreground bg-muted p-3 rounded-md">
                 {metaData.title || "Not found"}
@@ -84,11 +84,11 @@ export function MetaForm() {
             </div>
             <div>
               <div className="flex items-center gap-2 mb-1">
-                <h3 className="font-semibold text-card-foreground">Meta Description</h3>
                 <LengthIndicator
                   length={metaData.description.length}
                   type="description"
                 />
+                <h3 className="font-semibold text-card-foreground">Meta Description</h3>
               </div>
               <p className="text-muted-foreground bg-muted p-3 rounded-md">
                 {metaData.description || "Not found"}