From 6734d023435b0ae31b54322c7e3a7fdcd7cb869f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Feb 2026 13:03:36 +0000
Subject: [PATCH 1/9] Initial plan


From cbaa393134fb044bff2f9db02d4b0ab2846a1d63 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Feb 2026 13:13:06 +0000
Subject: [PATCH 2/9] Fix prefilled form fields, add tick countdown, improve
 workforce UI explanations

Co-authored-by: BENZOOgataga <50145143+BENZOOgataga@users.noreply.github.com>
---
 .../src/components/layout/tick-countdown.tsx  | 51 ++++++++++
 apps/web/src/components/layout/top-bar.tsx    |  6 +-
 .../market/order-placement-card.tsx           |  8 +-
 .../components/production/production-page.tsx |  4 +-
 .../components/workforce/workforce-page.tsx   | 96 ++++++++++++-------
 apps/web/src/lib/api-client.ts                |  2 +-
 6 files changed, 124 insertions(+), 43 deletions(-)
 create mode 100644 apps/web/src/components/layout/tick-countdown.tsx

diff --git a/apps/web/src/components/layout/tick-countdown.tsx b/apps/web/src/components/layout/tick-countdown.tsx
new file mode 100644
index 00000000..d2fd573d
--- /dev/null
+++ b/apps/web/src/components/layout/tick-countdown.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Clock } from "lucide-react";
+import { InlineHelp } from "@/components/ui/inline-help";
+import { useWorldHealth } from "./world-health-provider";
+
+// Default tick interval (60 seconds) - matches worker default configuration
+// TODO: Get this from API configuration endpoint
+const DEFAULT_TICK_INTERVAL_MS = 60_000;
+
+export function TickCountdown() {
+  const { health } = useWorldHealth();
+  const [secondsRemaining, setSecondsRemaining] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!health?.lastAdvancedAt) {
+      setSecondsRemaining(null);
+      return;
+    }
+
+    const updateCountdown = () => {
+      const lastAdvancedTime = new Date(health.lastAdvancedAt!).getTime();
+      const now = Date.now();
+      const elapsed = now - lastAdvancedTime;
+      const remaining = DEFAULT_TICK_INTERVAL_MS - (elapsed % DEFAULT_TICK_INTERVAL_MS);
+      setSecondsRemaining(Math.ceil(remaining / 1000));
+    };
+
+    updateCountdown();
+    const interval = setInterval(updateCountdown, 1000);
+
+    return () => clearInterval(interval);
+  }, [health?.lastAdvancedAt, health?.currentTick]);
+
+  if (secondsRemaining === null) {
+    return null;
+  }
+
+  const helpText = `Time progression: The simulation advances in discrete weeks (ticks). Each week represents ${DEFAULT_TICK_INTERVAL_MS / 1000} seconds of real time. Production jobs, research, and shipments complete when the required number of weeks pass.`;
+
+  return (
+    <div className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+      <Clock className="h-3.5 w-3.5" />
+      <span title={helpText}>
+        Next week in {secondsRemaining}s
+      </span>
+      <InlineHelp label={helpText} />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/layout/top-bar.tsx b/apps/web/src/components/layout/top-bar.tsx
index 695cd3d3..d86e9101 100644
--- a/apps/web/src/components/layout/top-bar.tsx
+++ b/apps/web/src/components/layout/top-bar.tsx
@@ -15,6 +15,7 @@ import { useControlManager } from "./control-manager";
 import { PROFILE_PANEL_ID } from "./profile-panel";
 import { StatusIndicator } from "./status-indicator";
 import { UiSfxSettings } from "./ui-sfx-settings";
+import { TickCountdown } from "./tick-countdown";
 import { useWorldHealth } from "./world-health-provider";
 
 export function TopBar() {
@@ -38,7 +39,10 @@ export function TopBar() {
       <div className="flex h-14 items-center justify-between gap-3 px-4">
         <div className="min-w-0">
           <h1 className="text-base font-semibold">{TOP_BAR_TITLES[pathname] ?? "CorpSim"}</h1>
-          <p className="text-xs text-muted-foreground">{formatCadencePoint(health?.currentTick)}</p>
+          <div className="flex items-center gap-3">
+            <p className="text-xs text-muted-foreground">{formatCadencePoint(health?.currentTick)}</p>
+            <TickCountdown />
+          </div>
         </div>
         <div className="flex items-center gap-3">
           <ActiveCompanyCombobox />
diff --git a/apps/web/src/components/market/order-placement-card.tsx b/apps/web/src/components/market/order-placement-card.tsx
index 1fe6053d..8f74b7a8 100644
--- a/apps/web/src/components/market/order-placement-card.tsx
+++ b/apps/web/src/components/market/order-placement-card.tsx
@@ -30,8 +30,8 @@ export function OrderPlacementCard({
   const [side, setSide] = useState<"BUY" | "SELL">("BUY");
   const [selectedItemId, setSelectedItemId] = useState<string>("");
   const [itemSearch, setItemSearch] = useState("");
-  const [priceInput, setPriceInput] = useState("1.00");
-  const [quantityInput, setQuantityInput] = useState("1");
+  const [priceInput, setPriceInput] = useState("");
+  const [quantityInput, setQuantityInput] = useState("");
   const [error, setError] = useState<string | null>(null);
   const deferredItemSearch = useDeferredValue(itemSearch);
 
@@ -144,7 +144,7 @@ export function OrderPlacementCard({
               <Input
                 value={quantityInput}
                 onChange={(event) => setQuantityInput(event.target.value)}
-                placeholder="1"
+                placeholder="Enter quantity (e.g., 100)"
               />
             </div>
           </div>
@@ -181,7 +181,7 @@ export function OrderPlacementCard({
             <Input
               value={priceInput}
               onChange={(event) => setPriceInput(event.target.value)}
-              placeholder="1.00"
+              placeholder="Enter price (e.g., 1.50)"
             />
             <p className="mt-1 text-xs text-muted-foreground">
               Enter dollars (for example, 0.80). The order is stored in cents.
diff --git a/apps/web/src/components/production/production-page.tsx b/apps/web/src/components/production/production-page.tsx
index 943033fd..a2f07808 100644
--- a/apps/web/src/components/production/production-page.tsx
+++ b/apps/web/src/components/production/production-page.tsx
@@ -78,7 +78,7 @@ export function ProductionPage() {
   const [recipePage, setRecipePage] = useState(1);
   const [recipePageSize, setRecipePageSize] =
     useState<(typeof PRODUCTION_RECIPE_PAGE_SIZE_OPTIONS)[number]>(10);
-  const [quantityInput, setQuantityInput] = useState("1");
+  const [quantityInput, setQuantityInput] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoadingRecipes, setIsLoadingRecipes] = useState(true);
   const [isLoadingJobs, setIsLoadingJobs] = useState(true);
@@ -614,7 +614,7 @@ export function ProductionPage() {
                   <Input
                     value={quantityInput}
                     onChange={(event) => setQuantityInput(event.target.value)}
-                    placeholder="1"
+                    placeholder="Enter number of runs (e.g., 10)"
                   />
                 </div>
 
diff --git a/apps/web/src/components/workforce/workforce-page.tsx b/apps/web/src/components/workforce/workforce-page.tsx
index ffe3dce0..017e9019 100644
--- a/apps/web/src/components/workforce/workforce-page.tsx
+++ b/apps/web/src/components/workforce/workforce-page.tsx
@@ -57,7 +57,7 @@ export function WorkforcePage() {
     logisticsPct: "20",
     corporatePct: "20"
   });
-  const [capacityDeltaInput, setCapacityDeltaInput] = useState("0");
+  const [capacityDeltaInput, setCapacityDeltaInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [hasLoadedWorkforce, setHasLoadedWorkforce] = useState(false);
   const [isSavingAllocation, setIsSavingAllocation] = useState(false);
@@ -246,6 +246,9 @@ export function WorkforcePage() {
       <Card>
         <CardHeader>
           <CardTitle>Organizational Capacity</CardTitle>
+          <p className="text-sm text-muted-foreground">
+            Workforce capacity determines production speed and research efficiency. Higher capacity allows faster operations, but increases weekly salary costs. Allocation percentages control which departments receive speed bonuses.
+          </p>
         </CardHeader>
         <CardContent className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
           <div className="rounded-md border border-border bg-muted/30 p-3">
@@ -278,42 +281,65 @@ export function WorkforcePage() {
       <Card>
         <CardHeader>
           <CardTitle>Allocation Controls</CardTitle>
+          <p className="text-sm text-muted-foreground">
+            Distribute your workforce across departments. Higher allocation in each area provides speed bonuses. Total must equal 100%.
+          </p>
         </CardHeader>
         <CardContent className="space-y-3">
           <form className="grid gap-3 md:grid-cols-2 xl:grid-cols-5" onSubmit={handleAllocationSubmit}>
-            <Input
-              value={allocationDraft.operationsPct}
-              onChange={(event) =>
-                setAllocationDraft((current) => ({ ...current, operationsPct: event.target.value }))
-              }
-              placeholder="Operations %"
-              inputMode="numeric"
-            />
-            <Input
-              value={allocationDraft.researchPct}
-              onChange={(event) =>
-                setAllocationDraft((current) => ({ ...current, researchPct: event.target.value }))
-              }
-              placeholder="Research %"
-              inputMode="numeric"
-            />
-            <Input
-              value={allocationDraft.logisticsPct}
-              onChange={(event) =>
-                setAllocationDraft((current) => ({ ...current, logisticsPct: event.target.value }))
-              }
-              placeholder="Logistics %"
-              inputMode="numeric"
-            />
-            <Input
-              value={allocationDraft.corporatePct}
-              onChange={(event) =>
-                setAllocationDraft((current) => ({ ...current, corporatePct: event.target.value }))
-              }
-              placeholder="Corporate %"
-              inputMode="numeric"
-            />
-            <Button type="submit" disabled={isSavingAllocation || allocationSum !== 100}>
+            <div>
+              <label className="mb-1 block text-xs text-muted-foreground">
+                Operations %
+              </label>
+              <Input
+                value={allocationDraft.operationsPct}
+                onChange={(event) =>
+                  setAllocationDraft((current) => ({ ...current, operationsPct: event.target.value }))
+                }
+                placeholder="e.g., 40"
+                inputMode="numeric"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs text-muted-foreground">
+                Research %
+              </label>
+              <Input
+                value={allocationDraft.researchPct}
+                onChange={(event) =>
+                  setAllocationDraft((current) => ({ ...current, researchPct: event.target.value }))
+                }
+                placeholder="e.g., 20"
+                inputMode="numeric"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs text-muted-foreground">
+                Logistics %
+              </label>
+              <Input
+                value={allocationDraft.logisticsPct}
+                onChange={(event) =>
+                  setAllocationDraft((current) => ({ ...current, logisticsPct: event.target.value }))
+                }
+                placeholder="e.g., 20"
+                inputMode="numeric"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs text-muted-foreground">
+                Corporate %
+              </label>
+              <Input
+                value={allocationDraft.corporatePct}
+                onChange={(event) =>
+                  setAllocationDraft((current) => ({ ...current, corporatePct: event.target.value }))
+                }
+                placeholder="e.g., 20"
+                inputMode="numeric"
+              />
+            </div>
+            <Button type="submit" disabled={isSavingAllocation || allocationSum !== 100} className="self-end">
               Save Allocation
             </Button>
           </form>
@@ -345,7 +371,7 @@ export function WorkforcePage() {
             <Input
               value={capacityDeltaInput}
               onChange={(event) => setCapacityDeltaInput(event.target.value)}
-              placeholder="Delta capacity"
+              placeholder="Enter change (e.g., +50 or -20)"
               inputMode="numeric"
             />
             <Button type="submit" disabled={isRequestingCapacity}>
diff --git a/apps/web/src/lib/api-client.ts b/apps/web/src/lib/api-client.ts
index f477d874..6b337dea 100644
--- a/apps/web/src/lib/api-client.ts
+++ b/apps/web/src/lib/api-client.ts
@@ -1,6 +1,6 @@
 import { isLocalhostHostname, isLocalhostUrl } from "./localhost-utils";
 
-export const HEALTH_POLL_INTERVAL_MS = 3_000;
+export const HEALTH_POLL_INTERVAL_MS = 15_000;
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL?.trim() ?? "";
 

From 616681ca5c409711e90a09cb941642897164279b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Feb 2026 13:14:40 +0000
Subject: [PATCH 3/9] Add toast notifications for research and production
 completion

Co-authored-by: BENZOOgataga <50145143+BENZOOgataga@users.noreply.github.com>
---
 .../components/production/production-page.tsx | 29 ++++++++++++++-----
 .../src/components/research/research-page.tsx | 25 ++++++++++++----
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/production/production-page.tsx b/apps/web/src/components/production/production-page.tsx
index a2f07808..75416dce 100644
--- a/apps/web/src/components/production/production-page.tsx
+++ b/apps/web/src/components/production/production-page.tsx
@@ -331,18 +331,33 @@ export function ProductionPage() {
       return;
     }
 
-    let hasNewCompletion = false;
-    for (const jobId of nextIds) {
-      if (!completedJobIdsRef.current.has(jobId)) {
-        hasNewCompletion = true;
-        break;
+    const newlyCompleted: ProductionJob[] = [];
+    for (const job of completedJobs) {
+      if (!completedJobIdsRef.current.has(job.id)) {
+        newlyCompleted.push(job);
       }
     }
-    if (hasNewCompletion) {
+    if (newlyCompleted.length > 0) {
       play("event_production_completed");
+      
+      // Show toast notification for completed jobs
+      if (newlyCompleted.length === 1) {
+        const job = newlyCompleted[0];
+        showToast({
+          title: "Production Complete",
+          description: `Produced ${job.runs} × ${job.outputItem.name}`,
+          variant: "success"
+        });
+      } else {
+        showToast({
+          title: "Production Complete",
+          description: `${newlyCompleted.length} production jobs completed`,
+          variant: "success"
+        });
+      }
     }
     completedJobIdsRef.current = nextIds;
-  }, [completedJobs, play]);
+  }, [completedJobs, play, showToast]);
   const showInitialRecipesSkeleton = isLoadingRecipes && !hasLoadedRecipes;
   const showInitialJobsSkeleton = isLoadingJobs && !hasLoadedJobs;
 
diff --git a/apps/web/src/components/research/research-page.tsx b/apps/web/src/components/research/research-page.tsx
index 056a3481..4749978b 100644
--- a/apps/web/src/components/research/research-page.tsx
+++ b/apps/web/src/components/research/research-page.tsx
@@ -203,19 +203,34 @@ export function ResearchPage() {
       return;
     }
 
-    let hasNewCompletion = false;
+    const completedNodes: ResearchNode[] = [];
     for (const [nodeId, nextStatus] of nextStatusById.entries()) {
       const previousStatus = statusByNodeIdRef.current.get(nodeId);
       if (previousStatus !== "COMPLETED" && nextStatus === "COMPLETED") {
-        hasNewCompletion = true;
-        break;
+        const node = nodeById.get(nodeId);
+        if (node) {
+          completedNodes.push(node);
+        }
       }
     }
-    if (hasNewCompletion) {
+    if (completedNodes.length > 0) {
       play("event_research_completed");
+      
+      // Show toast notification for completed research
+      const unlockedRecipes = completedNodes.flatMap((node) => node.unlockRecipes);
+      const recipeNames = unlockedRecipes.map((recipe) => recipe.name).join(", ");
+      const message = unlockedRecipes.length > 0
+        ? `Research complete! Unlocked recipes: ${recipeNames}`
+        : "Research complete!";
+      
+      showToast({
+        title: completedNodes.length === 1 ? completedNodes[0].name : "Research Complete",
+        description: message,
+        variant: "success"
+      });
     }
     statusByNodeIdRef.current = nextStatusById;
-  }, [nodes, play]);
+  }, [nodes, play, showToast, nodeById]);
 
   const nodeById = useMemo(() => new Map(nodes.map((node) => [node.id, node] as const)), [nodes]);
   const selectedNode = selectedNodeId ? nodeById.get(selectedNodeId) ?? null : null;

From 70cdc6355fbc7dbee8bc6e00c790e95e108f5aee Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Feb 2026 13:16:33 +0000
Subject: [PATCH 4/9] Fix TypeScript errors in toast notifications

Co-authored-by: BENZOOgataga <50145143+BENZOOgataga@users.noreply.github.com>
---
 apps/web/src/components/production/production-page.tsx | 2 +-
 apps/web/src/components/research/research-page.tsx     | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/production/production-page.tsx b/apps/web/src/components/production/production-page.tsx
index 75416dce..9e5e6c38 100644
--- a/apps/web/src/components/production/production-page.tsx
+++ b/apps/web/src/components/production/production-page.tsx
@@ -345,7 +345,7 @@ export function ProductionPage() {
         const job = newlyCompleted[0];
         showToast({
           title: "Production Complete",
-          description: `Produced ${job.runs} × ${job.outputItem.name}`,
+          description: `Produced ${job.quantity} × ${job.recipe.outputItem.name}`,
           variant: "success"
         });
       } else {
diff --git a/apps/web/src/components/research/research-page.tsx b/apps/web/src/components/research/research-page.tsx
index 4749978b..ec935498 100644
--- a/apps/web/src/components/research/research-page.tsx
+++ b/apps/web/src/components/research/research-page.tsx
@@ -195,6 +195,8 @@ export function ResearchPage() {
     didPrimeStatusesRef.current = false;
   }, [activeCompanyId]);
 
+  const nodeById = useMemo(() => new Map(nodes.map((node) => [node.id, node] as const)), [nodes]);
+
   useEffect(() => {
     const nextStatusById = new Map(nodes.map((node) => [node.id, node.status] as const));
     if (!didPrimeStatusesRef.current) {
@@ -218,7 +220,7 @@ export function ResearchPage() {
       
       // Show toast notification for completed research
       const unlockedRecipes = completedNodes.flatMap((node) => node.unlockRecipes);
-      const recipeNames = unlockedRecipes.map((recipe) => recipe.name).join(", ");
+      const recipeNames = unlockedRecipes.map((recipe) => recipe.recipeName).join(", ");
       const message = unlockedRecipes.length > 0
         ? `Research complete! Unlocked recipes: ${recipeNames}`
         : "Research complete!";
@@ -232,7 +234,6 @@ export function ResearchPage() {
     statusByNodeIdRef.current = nextStatusById;
   }, [nodes, play, showToast, nodeById]);
 
-  const nodeById = useMemo(() => new Map(nodes.map((node) => [node.id, node] as const)), [nodes]);
   const selectedNode = selectedNodeId ? nodeById.get(selectedNodeId) ?? null : null;
 
   const filteredNodes = useMemo(() => {

From 58a8a4e9f9a2c3912eebe17f13a9662056cb2eee Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Feb 2026 13:18:25 +0000
Subject: [PATCH 5/9] Add release entry for UX improvements

Co-authored-by: BENZOOgataga <50145143+BENZOOgataga@users.noreply.github.com>
---
 .../20260218131646-fix-ux-data-visibility-issues.md  | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 .releases/unreleased/20260218131646-fix-ux-data-visibility-issues.md

diff --git a/.releases/unreleased/20260218131646-fix-ux-data-visibility-issues.md b/.releases/unreleased/20260218131646-fix-ux-data-visibility-issues.md
new file mode 100644
index 00000000..877f0f77
--- /dev/null
+++ b/.releases/unreleased/20260218131646-fix-ux-data-visibility-issues.md
@@ -0,0 +1,12 @@
+---
+type: minor
+area: web
+summary: Fix early UX and data visibility issues (forms, time display, workforce clarity, completion feedback)
+---
+
+- Replace prefilled form values with descriptive placeholders in market orders, production jobs, and workforce
+- Add tick countdown timer showing "Next week in Xs" with tooltip explaining time progression
+- Reduce health polling from 3s to 15s to minimize UI refresh indicator blinking
+- Add comprehensive workforce explanations (capacity impact, allocation labels, help text)
+- Add toast notifications for research and production job completions with unlocked recipe details
+- Improve overall system transparency and onboarding clarity

From f453975c84bff799389a030aa68450b77d9f9c6d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Feb 2026 14:23:08 +0000
Subject: [PATCH 6/9] Remove prefilled allocation percentages from workforce
 page initial state

Co-authored-by: BENZOOgataga <50145143+BENZOOgataga@users.noreply.github.com>
---
 apps/web/src/components/workforce/workforce-page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/workforce/workforce-page.tsx b/apps/web/src/components/workforce/workforce-page.tsx
index 017e9019..8ed4bcf9 100644
--- a/apps/web/src/components/workforce/workforce-page.tsx
+++ b/apps/web/src/components/workforce/workforce-page.tsx
@@ -52,10 +52,10 @@ export function WorkforcePage() {
   const { health } = useWorldHealth();
   const [workforce, setWorkforce] = useState<CompanyWorkforce | null>(null);
   const [allocationDraft, setAllocationDraft] = useState<AllocationDraft>({
-    operationsPct: "40",
-    researchPct: "20",
-    logisticsPct: "20",
-    corporatePct: "20"
+    operationsPct: "",
+    researchPct: "",
+    logisticsPct: "",
+    corporatePct: ""
   });
   const [capacityDeltaInput, setCapacityDeltaInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);

From 411375e0fe03ff39a5a2ace3fd9963c55545b5c6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Feb 2026 15:05:59 +0000
Subject: [PATCH 7/9] Fix capacity delta input reset to empty string after
 submission

Co-authored-by: BENZOOgataga <50145143+BENZOOgataga@users.noreply.github.com>
---
 apps/web/src/components/workforce/workforce-page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/workforce/workforce-page.tsx b/apps/web/src/components/workforce/workforce-page.tsx
index 8ed4bcf9..e054b7b9 100644
--- a/apps/web/src/components/workforce/workforce-page.tsx
+++ b/apps/web/src/components/workforce/workforce-page.tsx
@@ -207,7 +207,7 @@ export function WorkforcePage() {
         deltaCapacity
       });
       await loadWorkforce();
-      setCapacityDeltaInput("0");
+      setCapacityDeltaInput("");
       setError(null);
       showToast({
         title: "Capacity request submitted",

From b1ec0f11799b642e2a2057b5e58e8bbec46e042a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Feb 2026 15:22:39 +0000
Subject: [PATCH 8/9] Apply code review feedback: improve accessibility, fix
 countdown boundary, deduplicate toast recipes

Co-authored-by: BENZOOgataga <50145143+BENZOOgataga@users.noreply.github.com>
---
 .../src/components/layout/tick-countdown.tsx  |  4 +++-
 .../src/components/research/research-page.tsx | 23 +++++++++++++++----
 .../components/workforce/workforce-page.tsx   | 12 ++++++----
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/layout/tick-countdown.tsx b/apps/web/src/components/layout/tick-countdown.tsx
index d2fd573d..da99c26d 100644
--- a/apps/web/src/components/layout/tick-countdown.tsx
+++ b/apps/web/src/components/layout/tick-countdown.tsx
@@ -23,7 +23,9 @@ export function TickCountdown() {
       const lastAdvancedTime = new Date(health.lastAdvancedAt!).getTime();
       const now = Date.now();
       const elapsed = now - lastAdvancedTime;
-      const remaining = DEFAULT_TICK_INTERVAL_MS - (elapsed % DEFAULT_TICK_INTERVAL_MS);
+      const remaining =
+        (DEFAULT_TICK_INTERVAL_MS - (elapsed % DEFAULT_TICK_INTERVAL_MS)) %
+        DEFAULT_TICK_INTERVAL_MS;
       setSecondsRemaining(Math.ceil(remaining / 1000));
     };
 
diff --git a/apps/web/src/components/research/research-page.tsx b/apps/web/src/components/research/research-page.tsx
index ec935498..5db85ee5 100644
--- a/apps/web/src/components/research/research-page.tsx
+++ b/apps/web/src/components/research/research-page.tsx
@@ -220,10 +220,25 @@ export function ResearchPage() {
       
       // Show toast notification for completed research
       const unlockedRecipes = completedNodes.flatMap((node) => node.unlockRecipes);
-      const recipeNames = unlockedRecipes.map((recipe) => recipe.recipeName).join(", ");
-      const message = unlockedRecipes.length > 0
-        ? `Research complete! Unlocked recipes: ${recipeNames}`
-        : "Research complete!";
+      const uniqueRecipeNamesSet = new Set<string>(
+        unlockedRecipes
+          .map((recipe) => recipe.recipeName)
+          .filter((name): name is string => Boolean(name && name.trim()))
+      );
+      const uniqueRecipeNames = Array.from(uniqueRecipeNamesSet);
+      const MAX_RECIPES_IN_TOAST = 3;
+      let message: string;
+
+      if (uniqueRecipeNames.length > 0) {
+        const displayedNames = uniqueRecipeNames.slice(0, MAX_RECIPES_IN_TOAST);
+        const remainingCount = uniqueRecipeNames.length - displayedNames.length;
+        const baseList = displayedNames.join(", ");
+        const summary =
+          remainingCount > 0 ? `${baseList} + ${remainingCount} more` : baseList;
+        message = `Research complete! Unlocked recipes: ${summary}`;
+      } else {
+        message = "Research complete!";
+      }
       
       showToast({
         title: completedNodes.length === 1 ? completedNodes[0].name : "Research Complete",
diff --git a/apps/web/src/components/workforce/workforce-page.tsx b/apps/web/src/components/workforce/workforce-page.tsx
index e054b7b9..cf3e6596 100644
--- a/apps/web/src/components/workforce/workforce-page.tsx
+++ b/apps/web/src/components/workforce/workforce-page.tsx
@@ -288,10 +288,11 @@ export function WorkforcePage() {
         <CardContent className="space-y-3">
           <form className="grid gap-3 md:grid-cols-2 xl:grid-cols-5" onSubmit={handleAllocationSubmit}>
             <div>
-              <label className="mb-1 block text-xs text-muted-foreground">
+              <label htmlFor="workforce-ops-pct" className="mb-1 block text-xs text-muted-foreground">
                 Operations %
               </label>
               <Input
+                id="workforce-ops-pct"
                 value={allocationDraft.operationsPct}
                 onChange={(event) =>
                   setAllocationDraft((current) => ({ ...current, operationsPct: event.target.value }))
@@ -301,10 +302,11 @@ export function WorkforcePage() {
               />
             </div>
             <div>
-              <label className="mb-1 block text-xs text-muted-foreground">
+              <label htmlFor="workforce-research-pct" className="mb-1 block text-xs text-muted-foreground">
                 Research %
               </label>
               <Input
+                id="workforce-research-pct"
                 value={allocationDraft.researchPct}
                 onChange={(event) =>
                   setAllocationDraft((current) => ({ ...current, researchPct: event.target.value }))
@@ -314,10 +316,11 @@ export function WorkforcePage() {
               />
             </div>
             <div>
-              <label className="mb-1 block text-xs text-muted-foreground">
+              <label htmlFor="workforce-logistics-pct" className="mb-1 block text-xs text-muted-foreground">
                 Logistics %
               </label>
               <Input
+                id="workforce-logistics-pct"
                 value={allocationDraft.logisticsPct}
                 onChange={(event) =>
                   setAllocationDraft((current) => ({ ...current, logisticsPct: event.target.value }))
@@ -327,10 +330,11 @@ export function WorkforcePage() {
               />
             </div>
             <div>
-              <label className="mb-1 block text-xs text-muted-foreground">
+              <label htmlFor="workforce-corporate-pct" className="mb-1 block text-xs text-muted-foreground">
                 Corporate %
               </label>
               <Input
+                id="workforce-corporate-pct"
                 value={allocationDraft.corporatePct}
                 onChange={(event) =>
                   setAllocationDraft((current) => ({ ...current, corporatePct: event.target.value }))

From d657363d887d8c0c86065cc50058205d90c18c88 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Feb 2026 15:27:42 +0000
Subject: [PATCH 9/9] Update design guidelines documentation with new UX
 patterns

Co-authored-by: BENZOOgataga <50145143+BENZOOgataga@users.noreply.github.com>
---
 docs/design/DESIGN_GUIDELINES.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/docs/design/DESIGN_GUIDELINES.md b/docs/design/DESIGN_GUIDELINES.md
index 71069470..f8cb1d43 100644
--- a/docs/design/DESIGN_GUIDELINES.md
+++ b/docs/design/DESIGN_GUIDELINES.md
@@ -143,6 +143,30 @@ Preferred components:
 
 Avoid custom components unless necessary.
 
+### Form Input Guidelines
+
+**Placeholder Text:**
+* Use descriptive placeholders with examples instead of prefilled values
+* Example: `"Enter price (e.g., 1.50)"` not a prefilled `"1.00"`
+* Empty initial state helps users understand field purpose
+* Placeholders should explain what value is expected
+
+**Labels:**
+* Add explicit labels above inputs for clarity
+* Use `htmlFor`/`id` attributes for accessibility (screen readers)
+* Labels should be independent of default values
+
+**Toast Notifications:**
+* Use for completion feedback (research complete, production finished)
+* Show actionable information (e.g., "Unlocked recipes: X, Y, Z")
+* Truncate long lists with `"+ N more"` pattern
+* Deduplicate repeated items in multi-item toasts
+
+**Time Display:**
+* Show countdown timers for time-based systems ("Next week in 42s")
+* Include tooltips explaining time units and progression
+* Update in real-time for dynamic feedback
+
 ---
 
 ## Data Visualization