Tighten the header + link the default-workflow hint to the Build tab

Header: pair the logo with "ledgerloop" as one centered lockup (it was
floating low, centered against the two-line block), shorten the tagline to
one line, and trim the top padding — less height, no value lost.

Pipeline trace: when no workflow is derived, "Default workflow — build your
own to route against it" now links back to the Build the workflow tab
(threaded a tab-switch callback down through AppView -> Dashboard).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: DylanMerigaud

app/page.tsx

@@ -36,7 +36,7 @@ export default async function Page() {
           just BELOW this box — off the bottom edge — so it only appears when you scroll
           down, giving the content the full screen. On mobile it all falls back to
           natural height + normal page scroll. */}
-      <div className="flex flex-col pb-3 pt-7 sm:pt-9 lg:h-dvh lg:pb-5">
+      <div className="flex flex-col pb-3 pt-5 sm:pt-6 lg:h-dvh lg:pb-5">
         <Header />
         <div className="min-h-0 flex-1">
           {dbError ? (
@@ -55,21 +55,21 @@ export default async function Page() {
 
 const Header = () => {
   return (
-    <header className="mb-6 flex flex-wrap items-start justify-between gap-4">
-      <div className="flex items-center gap-3">
-        <LogoMark />
-        <div>
+    <header className="mb-5 flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <div className="flex items-center gap-3">
+          <LogoMark />
           <h1 className="text-[19px] font-semibold leading-none tracking-tight text-ink">
             ledgerloop
           </h1>
-          <p className="mt-1.5 max-w-xl text-[13.5px] leading-snug text-muted">
-            An onboarding agent that reads a client&apos;s HRIS and{" "}
-            <span className="font-medium text-ink">
-              derives their approval workflow
-            </span>
-            , then runs procure-to-pay against it.
-          </p>
         </div>
+        <p className="mt-2 max-w-xl text-[13.5px] leading-snug text-muted">
+          Reads a client&apos;s HRIS,{" "}
+          <span className="font-medium text-ink">
+            derives their approval workflow
+          </span>
+          , and runs procure-to-pay against it.
+        </p>
       </div>
       <div className="flex shrink-0 items-center gap-2">
         <HowItWorks />

components/app-view.tsx

@@ -59,7 +59,11 @@ export const AppView = ({ queue }: { queue: QueueItem[] }) => {
           />
         </div>
         <div className={view === "pipeline" ? "h-full" : "hidden"}>
-          <Dashboard queue={queue} workflow={workflow} />
+          <Dashboard
+            queue={queue}
+            workflow={workflow}
+            onBuildWorkflow={() => setView("onboarding")}
+          />
         </div>
       </div>
     </div>

components/dashboard.tsx

@@ -230,13 +230,24 @@ const Spinner = () => {
  */
 const RunningAgainst = ({
   workflow,
+  onBuildWorkflow,
 }: {
   workflow: TApprovalWorkflow | null;
+  /** Jump back to the "Build the workflow" tab to run discovery. */
+  onBuildWorkflow: () => void;
 }) => {
   if (!workflow) {
     return (
       <p className="mt-1 text-[11px] text-faint">
-        Default workflow — run discovery to route against your own.
+        Default workflow —{" "}
+        <button
+          type="button"
+          onClick={onBuildWorkflow}
+          className="font-medium text-accent underline-offset-2 hover:underline"
+        >
+          build your own
+        </button>{" "}
+        to route against it.
       </p>
     );
   }
@@ -254,12 +265,15 @@ const RunningAgainst = ({
 export const Dashboard = ({
   queue,
   workflow,
+  onBuildWorkflow,
 }: {
   queue: QueueItem[];
   /** The active approval workflow this pipeline runs against (lifted from
       onboarding via AppView). null until discovery has run — the server then falls
       back to its default DAG. */
   workflow: TApprovalWorkflow | null;
+  /** Switch to the "Build the workflow" tab (the trace's no-workflow hint links here). */
+  onBuildWorkflow: () => void;
 }) => {
   const [selectedId, setSelectedId] = useState<string | null>(
     queue[0]?.id ?? null,
@@ -574,7 +588,10 @@ export const Dashboard = ({
                 <span className="font-mono">{previewItem.invoiceNumber}</span>
               </p>
             )}
-            <RunningAgainst workflow={workflow} />
+            <RunningAgainst
+              workflow={workflow}
+              onBuildWorkflow={onBuildWorkflow}
+            />
           </div>
           {state.status === "awaiting" && selected && gates.length >= 2 ? (
             // Several gates pend in parallel — decide each on its node in the graph,