feat(ui): main app page, result pages, routing, and Next.js config [UI #5 & UI #8]

packages/ui/src/app/account/[address]/page.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { fetchAccount, getErrorMessage } from "@/lib/api";
+import type { AccountExplanation } from "@/types";
+import { AccountResult } from "@/components/AccountResult";
+import AppShell from "@/components/AppShell";
+import { useAppShell } from "@/components/AppShellContext";
+
+// ── Inner page — consumes context ──────────────────────────────────────────
+
+function AccountPageInner() {
+  const { address } = useParams<{ address: string }>();
+  const router = useRouter();
+  const { addEntry, isSaved, getEntry, saveAddress, removeAddress } =
+    useAppShell();
+
+  const [data, setData] = useState<AccountExplanation | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!address) return;
+    let cancelled = false;
+
+    async function load() {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await fetchAccount(address);
+        if (!cancelled) {
+          setData(result);
+          addEntry("account", address, result.summary);
+        }
+      } catch (err) {
+        if (!cancelled) setError(getErrorMessage(err));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [address, addEntry]);
+
+  return (
+    <div style={{ paddingTop: "24px" }}>
+      {/* Back button */}
+      <button
+        onClick={() => router.push("/app")}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          color: "rgba(255,255,255,0.3)",
+          fontFamily: "'IBM Plex Sans', sans-serif",
+          fontSize: "12px",
+          padding: "0 0 20px",
+          transition: "color 0.15s ease",
+        }}
+        onMouseEnter={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.color =
+            "rgba(255,255,255,0.7)";
+        }}
+        onMouseLeave={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.color =
+            "rgba(255,255,255,0.3)";
+        }}
+      >
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+          <path
+            d="M8 2L4 6l4 4"
+            stroke="currentColor"
+            strokeWidth="1.3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        Back to search
+      </button>
+
+      {/* {loading && <AccountSkeleton />} */}
+      {loading && (
+        <p className="text-white/30 text-xs font-mono pt-8">Loading...</p>
+      )}
+
+      {error && !loading && (
+        <div className="px-4 py-3 rounded-lg bg-red-900/20 border border-red-700/30 text-red-300 text-xs font-mono">
+          {error}
+        </div>
+      )}
+
+      {data && !loading && (
+        <AccountResult
+          data={data}
+          isSaved={isSaved(address)}
+          savedLabel={getEntry(address)?.label}
+          onSave={saveAddress}
+          onRemoveSaved={() => {
+            const entry = getEntry(address);
+            if (entry) removeAddress(entry.id);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+// ── Page — wraps with AppShell ─────────────────────────────────────────────
+
+export default function AccountPage() {
+  return (
+    <AppShell>
+      <AccountPageInner />
+    </AppShell>
+  );
+}
+
+// ── Skeleton ───────────────────────────────────────────────────────────────
+
+// function AccountSkeleton() {
+//   return (
+//     <div className="space-y-4 animate-pulse">
+//       <div
+//         style={{
+//           height: "16px",
+//           width: "100px",
+//           borderRadius: "6px",
+//           background: "rgba(255,255,255,0.06)",
+//         }}
+//       />
+//       <div
+//         style={{
+//           height: "60px",
+//           borderRadius: "12px",
+//           background: "rgba(255,255,255,0.04)",
+//         }}
+//       />
+//       <div
+//         style={{
+//           display: "grid",
+//           gridTemplateColumns: "1fr 1fr 1fr",
+//           gap: "12px",
+//         }}
+//       >
+//         <div
+//           style={{
+//             height: "80px",
+//             borderRadius: "12px",
+//             background: "rgba(255,255,255,0.04)",
+//           }}
+//         />
+//         <div
+//           style={{
+//             height: "80px",
+//             borderRadius: "12px",
+//             background: "rgba(255,255,255,0.04)",
+//           }}
+//         />
+//         <div
+//           style={{
+//             height: "80px",
+//             borderRadius: "12px",
+//             background: "rgba(255,255,255,0.04)",
+//           }}
+//         />
+//       </div>
+//       <div
+//         style={{
+//           height: "60px",
+//           borderRadius: "12px",
+//           background: "rgba(255,255,255,0.04)",
+//         }}
+//       />
+//     </div>
+//   );
+// }

packages/ui/src/app/app/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { TabSwitcher } from "@/components/TabSwitcher";
+import AppShell from "@/components/AppShell";
+import { SearchBar } from "@/components/SearchBar";
+
+export default function AppPage() {
+  const router = useRouter();
+  const [tab, setTab] = useState<"tx" | "account">("tx");
+  const [txInput, setTxInput] = useState("");
+  const [accountInput, setAccountInput] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const input = tab === "tx" ? txInput : accountInput;
+  const setInput = tab === "tx" ? setTxInput : setAccountInput;
+
+  function handleExplain() {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+    setError(null);
+
+    if (tab === "tx") {
+      if (trimmed.length !== 64) {
+        setError("Transaction hash must be 64 characters.");
+        return;
+      }
+      router.push(`/tx/${trimmed}`);
+    } else {
+      if (!trimmed.startsWith("G") || trimmed.length !== 56) {
+        setError("Please enter a valid Stellar account address.");
+        return;
+      }
+      router.push(`/account/${trimmed}`);
+    }
+  }
+
+  return (
+    <AppShell>
+      {/* Hero block */}
+      <div className="mb-10 mt-6">
+        <div className="flex items-center gap-3 mb-3">
+          <p
+            className="text-sm text-white/35 leading-relaxed"
+            style={{ fontFamily: "'IBM Plex Sans', system-ui, sans-serif" }}
+          >
+            Plain-English explanations for Stellar blockchain operations.
+            Paste any transaction hash or account address below.
+          </p>
+        </div>
+      </div>
+
+      <TabSwitcher active={tab} onChange={setTab} />
+
+      <SearchBar
+        tab={tab}
+        value={input}
+        loading={false}
+        onChange={setInput}
+        onSubmit={handleExplain}
+      />
+
+      {/* Error */}
+      {error && (
+        <div className="mb-6 px-4 py-3 rounded-lg bg-red-900/20 border border-red-700/30 text-red-300 text-xs font-mono">
+          {error}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!error && (
+        <div className="text-center py-20">
+          <p className="text-white/15 text-xs font-mono">
+            {tab === "tx"
+              ? "enter a transaction hash to decode it"
+              : "enter an account address to inspect it"}
+          </p>
+        </div>
+      )}
+    </AppShell>
+  );
+}

packages/ui/src/app/page.tsx

@@ -1,103 +1,4 @@
-import Image from "next/image";
-
+import { redirect } from "next/navigation";
 export default function Home() {
-  return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
+  redirect("/app");
 }