feat(FN-2202): reposition and restyle task card agent badge

- Move the assigned agent badge out of the card header into a dedicated metadata row below task details
- Add a new .card-agent-row container to control spacing and alignment for the badge block
- Update .card-agent-badge styling to use token-aligned pill radius and color-mix backgrounds while removing monospace/fixed-width conventions
- Expand TaskCard agent badge tests to verify new DOM placement and enforced badge style rules

packages/dashboard/app/hooks/useViewState.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { ThemeMode } from "@fusion/core";
 import type { ProjectInfo } from "../api";
 import { getScopedItem, setScopedItem } from "../utils/projectStorage";
@@ -72,9 +72,10 @@ export function useViewState(options: UseViewStateOptions): UseViewStateResult {
 
   const [taskView, setTaskView] = useState<TaskView>(() => {
     const saved = getScopedItem("kb-dashboard-task-view");
-    if (isTaskView(saved)) return normalizeTaskView(saved);
+    if (isTaskView(saved)) return saved;
     return "board";
   });
+  const hasHydratedScopedTaskViewRef = useRef(false);
 
   useEffect(() => {
     window.localStorage.setItem("kb-dashboard-view-mode", viewMode);
@@ -83,14 +84,21 @@ export function useViewState(options: UseViewStateOptions): UseViewStateResult {
   useEffect(() => {
     const saved = getScopedItem("kb-dashboard-task-view", currentProject?.id);
     if (isTaskView(saved)) {
-      setTaskView(normalizeTaskView(saved));
-      return;
+      const preserveLegacyOnFirstScopedHydration =
+        !hasHydratedScopedTaskViewRef.current && saved === "devserver";
+
+      setTaskView(preserveLegacyOnFirstScopedHydration ? "devserver" : normalizeTaskView(saved));
+    } else {
+      setTaskView("board");
+    }
+
+    if (currentProject?.id) {
+      hasHydratedScopedTaskViewRef.current = true;
     }
-    setTaskView("board");
   }, [currentProject?.id]);
 
   useEffect(() => {
-    setScopedItem("kb-dashboard-task-view", normalizeTaskView(taskView), currentProject?.id);
+    setScopedItem("kb-dashboard-task-view", taskView, currentProject?.id);
   }, [currentProject?.id, taskView]);
 
   useEffect(() => {
@@ -121,7 +129,7 @@ export function useViewState(options: UseViewStateOptions): UseViewStateResult {
   ]);
 
   const handleChangeTaskView = useCallback((newView: TaskView) => {
-    setTaskView(normalizeTaskView(newView));
+    setTaskView(newView);
   }, []);
 
   const handleToggleTheme = useCallback(() => {