feat: improve app ui and project metadata

apps/web/components/foreshadow/KanbanColumn.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import type { ForeshadowView } from "@/lib/api/types";
-import type { ForeshadowStatus } from "@/lib/foreshadow/board";
+import { LANE_LABELS, type ForeshadowStatus } from "@/lib/foreshadow/board";
+import { Badge } from "@/components/ui/Badge";
 import { ForeshadowCard } from "./ForeshadowCard";
 
 interface KanbanColumnProps {
@@ -31,17 +32,23 @@ export function KanbanColumn({
       <header
         className={`flex items-center justify-between rounded-t border-b px-3 py-2 ${
           overdue
-            ? "border-overdue bg-overdue/10 text-overdue"
+            ? "border-overdue bg-overdue/10 text-ink"
             : "border-line bg-panel text-ink-soft"
         }`}
       >
-        <span className="font-mono text-xs font-semibold">
-          {overdue ? "⚠ " : ""}
-          {status}
+        <span className="flex items-center gap-2">
+          {overdue ? (
+            <Badge variant="warning">{LANE_LABELS[status]}</Badge>
+          ) : (
+            <span className="text-sm font-medium text-ink">
+              {LANE_LABELS[status]}
+            </span>
+          )}
+          <span className="font-mono text-[10px] text-ink-soft">{status}</span>
         </span>
         <span className="font-mono text-xs">{items.length}</span>
       </header>
-      <ul className="flex-1 space-y-2 overflow-auto p-2">
+      <ul className="space-y-2 p-2 xl:flex-1 xl:overflow-auto">
         {items.length === 0 ? (
           <li className="px-1 py-3 text-xs text-ink-soft/60">—</li>
         ) : (