Special tag works on short input

app/w/components/workflow-block/components/sub-block/components/short-input.tsx

@@ -24,13 +24,25 @@ export function ShortInput({
   const inputRef = useRef<HTMLInputElement>(null)
   const [isFocused, setIsFocused] = useState(false)
   const [value, setValue] = useSubBlockValue(blockId, subBlockId)
+  const overlayRef = useRef<HTMLDivElement>(null)
 
-  // Auto-scroll effect for input
+  // Sync scroll position between input and overlay
+  const handleScroll = (e: React.UIEvent<HTMLInputElement>) => {
+    if (overlayRef.current) {
+      overlayRef.current.scrollLeft = e.currentTarget.scrollLeft
+    }
+  }
+
+  // Update the auto-scroll effect to handle both input and overlay
   useEffect(() => {
     if (inputRef.current && isFocused) {
       const input = inputRef.current
       const scrollPosition = (input.selectionStart ?? 0) * 8
       input.scrollLeft = scrollPosition - input.offsetWidth / 2
+
+      if (overlayRef.current) {
+        overlayRef.current.scrollLeft = input.scrollLeft
+      }
     }
   }, [value, isFocused])
 
@@ -72,24 +84,55 @@ export function ShortInput({
       ? '•'.repeat(value?.toString().length ?? 0)
       : value?.toString() ?? ''
 
+  // Add this function to format the text with tags
+  const formatDisplayText = (text: string) => {
+    if (!text) return null
+
+    // Split the text by tag pattern <something.something>
+    const parts = text.split(/(<[^>]+>)/g)
+
+    return parts.map((part, index) => {
+      // Check if the part matches tag pattern
+      if (part.match(/^<[^>]+>$/)) {
+        return (
+          <span key={index} className="text-blue-500">
+            {part}
+          </span>
+        )
+      }
+      return <span key={index}>{part}</span>
+    })
+  }
+
   // Component render
   return (
-    <Input
-      ref={inputRef}
-      className={cn(
-        'w-full placeholder:text-muted-foreground/50 allow-scroll',
-        isConnecting &&
-          'focus-visible:ring-blue-500 ring-2 ring-blue-500 ring-offset-2'
-      )}
-      placeholder={placeholder ?? ''}
-      type="text"
-      value={displayValue}
-      onChange={(e) => setValue(e.target.value)}
-      onFocus={() => setIsFocused(true)}
-      onBlur={() => setIsFocused(false)}
-      onDrop={handleDrop}
-      onDragOver={handleDragOver}
-      autoComplete="off"
-    />
+    <div className="relative w-full">
+      <Input
+        ref={inputRef}
+        className={cn(
+          'w-full placeholder:text-muted-foreground/50 allow-scroll text-transparent caret-foreground',
+          isConnecting &&
+            'focus-visible:ring-blue-500 ring-2 ring-blue-500 ring-offset-2'
+        )}
+        placeholder={placeholder ?? ''}
+        type="text"
+        value={displayValue}
+        onChange={(e) => setValue(e.target.value)}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onScroll={handleScroll}
+        autoComplete="off"
+      />
+      <div
+        ref={overlayRef}
+        className="absolute inset-0 pointer-events-none px-3 flex items-center overflow-x-auto whitespace-pre scrollbar-none text-sm bg-transparent"
+      >
+        {password && !isFocused
+          ? '•'.repeat(value?.toString().length ?? 0)
+          : formatDisplayText(value?.toString() ?? '')}
+      </div>
+    </div>
   )
 }