feat(frontend): time-first UI for stream window and create preview

Move block-number language out of the user-facing surface. Stream cards now
read "Ends in 4h 30m" / "Starts in 12m" / "Ended 1d ago" instead of raw
"Block 1,234,567 → 1,234,997"; the create-form preview shows "Starts at
~3:42 PM / Ends at ~8:42 PM" instead of approximate block numbers. Block
numbers remain available on hover via title attributes.

- formatStreamWindow(start, end, current): wall-clock window phrasing
- blockToClockTime(target, current): local-time estimate from a future block
- Approximate-duration footnote on create-form preview makes the ~5s/block
  Nakamoto cadence transparent without forcing users to think in blocks.

Internally streams remain block-counted (the contract has no clock), but the
word "block" no longer appears in the primary product surface.

Author: jayteemoney

frontend/src/app/dashboard/create/page.tsx

@@ -18,7 +18,7 @@ import {
   type DurationUnit,
   type TokenConfig,
 } from "@/lib/constants";
-import { formatTokenAmount, blocksToTimeString } from "@/lib/utils";
+import { formatTokenAmount, blocksToTimeString, blockToClockTime } from "@/lib/utils";
 import { toast } from "sonner";
 import { Zap, ArrowRight, Info, Loader2, CheckCircle2 } from "lucide-react";
 
@@ -253,18 +253,32 @@ export default function CreateStreamPage() {
                   <p className="text-zinc-200 font-mono">{formatTokenAmount(ratePerBlock)} {selectedToken.symbol}</p>
                 </div>
                 <div>
-                  <p className="text-zinc-500 text-xs">Start block</p>
-                  <p className="text-zinc-200 font-mono">~#{(blockHeight + 120).toLocaleString()}</p>
+                  <p className="text-zinc-500 text-xs">Starts at</p>
+                  <p
+                    className="text-zinc-200"
+                    title={`~Block #${(blockHeight + 120).toLocaleString()}`}
+                  >
+                    ~{blockToClockTime(blockHeight + 120, blockHeight)}
+                  </p>
                 </div>
                 <div>
-                  <p className="text-zinc-500 text-xs">End block</p>
-                  <p className="text-zinc-200 font-mono">~#{(blockHeight + 120 + durationBlocks).toLocaleString()}</p>
+                  <p className="text-zinc-500 text-xs">Ends at</p>
+                  <p
+                    className="text-zinc-200"
+                    title={`~Block #${(blockHeight + 120 + durationBlocks).toLocaleString()}`}
+                  >
+                    ~{blockToClockTime(blockHeight + 120 + durationBlocks, blockHeight)}
+                  </p>
                 </div>
                 <div>
                   <p className="text-zinc-500 text-xs">Token</p>
                   <p className="text-zinc-200">{selectedToken.name} ({selectedToken.symbol})</p>
                 </div>
               </div>
+              <p className="text-[11px] text-zinc-600 pt-1 border-t border-border/40">
+                Duration is approximate. Stacks blocks target ~5s under Nakamoto,
+                so the actual stream length may vary by a few minutes.
+              </p>
             </div>
           )}
 

frontend/src/components/stream/stream-card.tsx

@@ -10,6 +10,7 @@ import {
   truncateAddress,
   getStreamStatusLabel,
   getStreamProgress,
+  formatStreamWindow,
 } from "@/lib/utils";
 import { STREAM_STATUS } from "@/lib/constants";
 import { useAppStore } from "@/stores/app-store";
@@ -86,9 +87,12 @@ export function StreamCard({
                 )}
               </span>
             </p>
-            <p className="text-xs text-zinc-600">
-              Block {stream.startBlock.toLocaleString()} &rarr;{" "}
-              {stream.endBlock.toLocaleString()}
+            <p
+              className="text-xs text-zinc-600"
+              title={`Block ${stream.startBlock.toLocaleString()} → ${stream.endBlock.toLocaleString()}`}
+            >
+              {formatStreamWindow(stream.startBlock, stream.endBlock, blockHeight) ??
+                `Block ${stream.startBlock.toLocaleString()} → ${stream.endBlock.toLocaleString()}`}
             </p>
             {stream.memo && (
               <p className="text-xs text-zinc-500 mt-0.5 italic truncate max-w-30 sm:max-w-50" title={stream.memo}>

frontend/src/lib/utils.ts

@@ -88,6 +88,47 @@ export function blocksToTimeString(blocks: number): string {
   return `${months}mo ${days % 30}d`;
 }
 
+/**
+ * Wall-clock description of a stream's window relative to the current block.
+ * Hides block numbers behind a time-first phrasing.
+ *
+ *   future:   "Starts in 12m"
+ *   active:   "Ends in 4h 30m"
+ *   past:     "Ended 1d ago"
+ *   loading:  null  (caller renders a fallback)
+ */
+export function formatStreamWindow(
+  startBlock: number,
+  endBlock: number,
+  currentBlock: number,
+): string | null {
+  if (currentBlock <= 0) return null;
+  if (currentBlock < startBlock) return `Starts in ${blocksToTimeString(startBlock - currentBlock)}`;
+  if (currentBlock < endBlock) return `Ends in ${blocksToTimeString(endBlock - currentBlock)}`;
+  return `Ended ${blocksToTimeString(currentBlock - endBlock)} ago`;
+}
+
+/**
+ * Approximate wall-clock time at which a future block will be mined,
+ * computed as now + (targetBlock - currentBlock) * BLOCK_TIME_SECONDS.
+ * Returns local-time "3:42 PM" if within the next 24h, else "May 21 · 3:42 PM".
+ */
+export function blockToClockTime(targetBlock: number, currentBlock: number): string {
+  if (currentBlock <= 0) return "—";
+  const deltaMs = (targetBlock - currentBlock) * BLOCK_TIME_SECONDS * 1000;
+  const target = new Date(Date.now() + deltaMs);
+  const sameDay = target.toDateString() === new Date().toDateString();
+  if (sameDay) {
+    return target.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+  }
+  return target.toLocaleString([], {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
 /** PRECISION constant matching smart contract (1e12) */
 export const PRECISION = 1_000_000_000_000n;