From f44b837499d31ebbeb0f64f7de567f2f0a2fca38 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 16 Apr 2026 04:09:40 +0000
Subject: [PATCH 1/2] chore: updated plan with multi-line input requirement

Agent-Logs-Url: https://github.com/slhmy/dev-tools-web/sessions/90663cc3-6968-45d9-b368-f90bd86a12ce

Co-authored-by: slhmy <31381093+slhmy@users.noreply.github.com>
---
 package-lock.json | 11 +++++++++++
 package.json      |  1 +
 2 files changed, 12 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 87a0e50..27425e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "react-dom": "^19.2.4",
         "react-router-dom": "^7.14.1",
         "shadcn": "^4.2.0",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.1",
         "tw-animate-css": "^1.4.0"
@@ -8323,6 +8324,16 @@
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
       "license": "MIT"
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
diff --git a/package.json b/package.json
index 06e4fb5..c828cce 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "react-dom": "^19.2.4",
     "react-router-dom": "^7.14.1",
     "shadcn": "^4.2.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0"

From 68592ae7663ffc2b00eec771d364172c56e3c7eb Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 16 Apr 2026 04:12:33 +0000
Subject: [PATCH 2/2] feat: base64 error toast + multi-line input; multi-format
 timestamp conversion

Agent-Logs-Url: https://github.com/slhmy/dev-tools-web/sessions/90663cc3-6968-45d9-b368-f90bd86a12ce

Co-authored-by: slhmy <31381093+slhmy@users.noreply.github.com>
---
 src/App.tsx                    |  38 +++++-----
 src/components/ui/textarea.tsx |  18 +++++
 src/pages/base64.tsx           |  23 +++---
 src/pages/timestamp.tsx        | 135 +++++++++++++++++++++------------
 4 files changed, 138 insertions(+), 76 deletions(-)
 create mode 100644 src/components/ui/textarea.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 093c591..68bbbc5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom"
+import { Toaster } from "sonner"
 
 import { AppSidebar } from "@/components/app-sidebar"
 import {
@@ -12,23 +13,26 @@ import { TimestampPage } from "@/pages/timestamp"
 
 export function App() {
   return (
-    <BrowserRouter basename="/dev-tools-web">
-      <SidebarProvider>
-        <AppSidebar />
-        <SidebarInset>
-          <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
-            <SidebarTrigger className="-ml-1" />
-          </header>
-          <main className="flex-1 overflow-auto">
-            <Routes>
-              <Route path="/" element={<HomePage />} />
-              <Route path="/base64" element={<Base64Page />} />
-              <Route path="/timestamp" element={<TimestampPage />} />
-            </Routes>
-          </main>
-        </SidebarInset>
-      </SidebarProvider>
-    </BrowserRouter>
+    <>
+      <BrowserRouter basename="/dev-tools-web">
+        <SidebarProvider>
+          <AppSidebar />
+          <SidebarInset>
+            <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
+              <SidebarTrigger className="-ml-1" />
+            </header>
+            <main className="flex-1 overflow-auto">
+              <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/base64" element={<Base64Page />} />
+                <Route path="/timestamp" element={<TimestampPage />} />
+              </Routes>
+            </main>
+          </SidebarInset>
+        </SidebarProvider>
+      </BrowserRouter>
+      <Toaster richColors />
+    </>
   )
 }
 
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..13ebbee
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "w-full min-w-0 rounded-none border border-input bg-transparent px-2.5 py-1 text-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/src/pages/base64.tsx b/src/pages/base64.tsx
index c1980ac..97da8a2 100644
--- a/src/pages/base64.tsx
+++ b/src/pages/base64.tsx
@@ -1,21 +1,20 @@
 import { useState } from "react"
+import { toast } from "sonner"
 
 import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
 
 export function Base64Page() {
   const [input, setInput] = useState("")
   const [output, setOutput] = useState("")
-  const [error, setError] = useState("")
 
   function encode() {
     try {
       const bytes = new TextEncoder().encode(input)
       const binary = String.fromCharCode(...bytes)
       setOutput(btoa(binary))
-      setError("")
     } catch {
-      setError("Encoding failed. Make sure the input is valid text.")
+      toast.error("Encoding failed. Make sure the input is valid text.")
     }
   }
 
@@ -24,9 +23,8 @@ export function Base64Page() {
       const binary = atob(input)
       const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0))
       setOutput(new TextDecoder().decode(bytes))
-      setError("")
     } catch {
-      setError("Decoding failed. Make sure the input is valid Base64.")
+      toast.error("Decoding failed. Make sure the input is valid Base64.")
     }
   }
 
@@ -40,7 +38,8 @@ export function Base64Page() {
       </div>
       <div className="flex flex-col gap-3">
         <label className="text-sm font-medium">Input</label>
-        <Input
+        <Textarea
+          rows={6}
           value={input}
           onChange={(e) => setInput(e.target.value)}
           placeholder="Enter text or Base64 string..."
@@ -52,13 +51,15 @@ export function Base64Page() {
           </Button>
         </div>
       </div>
-      {error && <p className="text-sm text-destructive">{error}</p>}
       {output && (
         <div className="flex flex-col gap-2">
           <label className="text-sm font-medium">Output</label>
-          <div className="rounded-md border bg-muted px-3 py-2 font-mono text-sm break-all">
-            {output}
-          </div>
+          <Textarea
+            rows={6}
+            readOnly
+            value={output}
+            className="font-mono"
+          />
           <Button
             variant="outline"
             size="sm"
diff --git a/src/pages/timestamp.tsx b/src/pages/timestamp.tsx
index 883edcc..7f73271 100644
--- a/src/pages/timestamp.tsx
+++ b/src/pages/timestamp.tsx
@@ -3,30 +3,52 @@ import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 
+type TimestampFormats = {
+  unix: string
+  unixMilli: string
+  unixNano: string
+  iso: string
+}
+
+function detectAndConvert(raw: string): TimestampFormats | null {
+  const num = Number(raw.trim())
+  if (!raw.trim() || isNaN(num)) return null
+
+  const len = String(Math.trunc(num)).length
+  let ms: number
+  if (len <= 10) {
+    ms = num * 1000
+  } else if (len <= 13) {
+    ms = num
+  } else {
+    ms = Math.trunc(num / 1_000_000)
+  }
+
+  const date = new Date(ms)
+  if (isNaN(date.getTime())) return null
+
+  const unix = String(Math.trunc(ms / 1000))
+  const unixMilli = String(ms)
+  const unixNano = String(BigInt(ms) * 1_000_000n)
+  return { unix, unixMilli, unixNano, iso: date.toISOString() }
+}
+
 export function TimestampPage() {
   const [tsInput, setTsInput] = useState("")
   const [dateInput, setDateInput] = useState("")
-  const [tsResult, setTsResult] = useState("")
-  const [dateResult, setDateResult] = useState("")
+  const [tsResult, setTsResult] = useState<TimestampFormats | null>(null)
+  const [dateResult, setDateResult] = useState<TimestampFormats | null>(null)
   const [tsError, setTsError] = useState("")
   const [dateError, setDateError] = useState("")
 
   function convertTimestamp() {
-    const num = Number(tsInput.trim())
-    if (!tsInput.trim() || isNaN(num)) {
-      setTsError("Enter a valid Unix timestamp (seconds or milliseconds).")
-      setTsResult("")
-      return
-    }
-    // Detect seconds vs milliseconds
-    const ms = String(num).length <= 10 ? num * 1000 : num
-    const date = new Date(ms)
-    if (isNaN(date.getTime())) {
-      setTsError("Invalid timestamp.")
-      setTsResult("")
+    const result = detectAndConvert(tsInput)
+    if (!result) {
+      setTsError("Enter a valid Unix timestamp (seconds, milliseconds, or nanoseconds).")
+      setTsResult(null)
       return
     }
-    setTsResult(date.toISOString())
+    setTsResult(result)
     setTsError("")
   }
 
@@ -34,17 +56,29 @@ export function TimestampPage() {
     const date = new Date(dateInput.trim())
     if (isNaN(date.getTime())) {
       setDateError("Enter a valid date string (e.g. 2024-01-01 or ISO 8601).")
-      setDateResult("")
+      setDateResult(null)
       return
     }
-    setDateResult(String(Math.floor(date.getTime() / 1000)))
+    const ms = date.getTime()
+    setDateResult({
+      unix: String(Math.trunc(ms / 1000)),
+      unixMilli: String(ms),
+      unixNano: String(BigInt(ms) * 1_000_000n),
+      iso: date.toISOString(),
+    })
     setDateError("")
   }
 
   function useNow() {
-    const now = Math.floor(Date.now() / 1000)
-    setTsInput(String(now))
-    setTsResult(new Date(now * 1000).toISOString())
+    const ms = Date.now()
+    const unix = String(Math.trunc(ms / 1000))
+    setTsInput(unix)
+    setTsResult({
+      unix,
+      unixMilli: String(ms),
+      unixNano: String(BigInt(ms) * 1_000_000n),
+      iso: new Date(ms).toISOString(),
+    })
     setTsError("")
   }
 
@@ -72,20 +106,7 @@ export function TimestampPage() {
           </Button>
         </div>
         {tsError && <p className="text-sm text-destructive">{tsError}</p>}
-        {tsResult && (
-          <div className="flex items-center gap-2">
-            <div className="rounded-md border bg-muted px-3 py-2 font-mono text-sm">
-              {tsResult}
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => navigator.clipboard.writeText(tsResult)}
-            >
-              Copy
-            </Button>
-          </div>
-        )}
+        {tsResult && <TimestampResultTable result={tsResult} />}
       </div>
 
       {/* Date → Timestamp */}
@@ -100,21 +121,39 @@ export function TimestampPage() {
           <Button onClick={convertDate}>Convert</Button>
         </div>
         {dateError && <p className="text-sm text-destructive">{dateError}</p>}
-        {dateResult && (
-          <div className="flex items-center gap-2">
-            <div className="rounded-md border bg-muted px-3 py-2 font-mono text-sm">
-              {dateResult}
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => navigator.clipboard.writeText(dateResult)}
-            >
-              Copy
-            </Button>
-          </div>
-        )}
+        {dateResult && <TimestampResultTable result={dateResult} />}
       </div>
     </div>
   )
 }
+
+function TimestampResultTable({ result }: { result: TimestampFormats }) {
+  const rows: { label: string; value: string }[] = [
+    { label: "ISO 8601", value: result.iso },
+    { label: "Unix (s)", value: result.unix },
+    { label: "Unix Milli (ms)", value: result.unixMilli },
+    { label: "Unix Nano (ns)", value: result.unixNano },
+  ]
+
+  return (
+    <div className="flex flex-col gap-1">
+      {rows.map(({ label, value }) => (
+        <div key={label} className="flex items-center gap-2">
+          <span className="w-36 shrink-0 text-xs text-muted-foreground">
+            {label}
+          </span>
+          <div className="rounded-md border bg-muted px-3 py-2 font-mono text-sm">
+            {value}
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => navigator.clipboard.writeText(value)}
+          >
+            Copy
+          </Button>
+        </div>
+      ))}
+    </div>
+  )
+}