UI ux refresh eunsoo

src/frontend_react/src/components/content/HomeInput.tsx

@@ -131,6 +131,7 @@ const HomeInput: React.FC<HomeInputProps> = ({
                                     icon={task.icon}
                                     description={task.description}
                                     onClick={() => handleQuickTaskClick(task)}
+                                    disabled
                                 />
                             ))}
                         </div>

src/frontend_react/src/components/content/PlanPanelLeft.tsx

@@ -100,7 +100,7 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({ onNewTaskButton }) => {
   return (
     <div style={{ flexShrink: 0, display: "flex", overflow: "hidden" }}>
       <PanelLeft panelWidth={280} panelResize={true}>
-        <PanelLeftToolbar panelTitle="Contoso" panelIcon={<ContosoLogo />}>
+        <PanelLeftToolbar linkTo="/" panelTitle="Contoso" panelIcon={<ContosoLogo />}>
           <Tooltip content="New task" relationship={"label"} />
         </PanelLeftToolbar>
 

src/frontend_react/src/components/toast/InlineToaster.tsx

@@ -28,13 +28,24 @@ export const useInlineToaster = () => {
   const showToast = (
     content: React.ReactNode,
     intent: ToastIntent = "info",
-    options?: { dismissible?: boolean }
+    options?: {
+      dismissible?: boolean;
+      timeoutMs?: number | null;
+    }
   ) => {
     const id = Date.now();
+    const timeout = options?.timeoutMs ?? (intent === "progress" ? null : 3000);
+
     if (_setToasts) {
       _setToasts((prev) => [
         ...prev,
-        { id, content, intent, visible: false, dismissible: options?.dismissible },
+        {
+          id,
+          content,
+          intent,
+          visible: false,
+          dismissible: options?.dismissible,
+        },
       ]);
 
       setTimeout(() => {
@@ -43,18 +54,19 @@ export const useInlineToaster = () => {
         );
       }, 10);
 
-      if (intent !== "progress") {
+      if (timeout !== null) {
         setTimeout(() => {
           _setToasts?.((prev) =>
             prev.map((t) => (t.id === id ? { ...t, visible: false } : t))
           );
-        }, 3000);
+        }, timeout);
 
         setTimeout(() => {
           _setToasts?.((prev) => prev.filter((t) => t.id !== id));
-        }, 3500);
+        }, timeout + 500);
       }
     }
+
     return id;
   };
 
@@ -142,7 +154,9 @@ const InlineToaster: React.FC = () => {
           <Body1>{toast.content}</Body1>
           {(toast.dismissible || toast.intent === "progress") && (
             <button
-              onClick={() => _setToasts?.((prev) => prev.filter((t) => t.id !== toast.id))}
+              onClick={() =>
+                _setToasts?.((prev) => prev.filter((t) => t.id !== toast.id))
+              }
               style={{
                 position: "absolute",
                 top: "50%",

src/frontend_react/src/coral/components/Panels/PanelLeftToolbar.tsx

@@ -1,74 +1,95 @@
 import React, { ReactNode } from "react";
-import { Body1Strong, Subtitle2 } from "@fluentui/react-components";
+import { Subtitle2 } from "@fluentui/react-components";
+import { Link } from "react-router-dom";
 
 interface PanelLeftToolbarProps {
   panelIcon?: ReactNode;
   panelTitle?: string | null;
+  linkTo?: string;
   children?: ReactNode;
 }
 
 const PanelLeftToolbar: React.FC<PanelLeftToolbarProps> = ({
   panelIcon,
   panelTitle,
+  linkTo,
   children,
 }) => {
-  return (
+  const TitleContent = (
     <div
-      className="panelToolbar"
+      className="panelTitle"
       style={{
         display: "flex",
         alignItems: "center",
-        gap: "8px",
-        padding: "16px",
-        boxSizing: "border-box",
-        height: "56px",
+        gap: "6px",
+        flexShrink: 1,
+        overflow: "hidden",
+        minWidth: 0,
       }}
     >
-      {(panelIcon || panelTitle) && (
+      {panelIcon && (
         <div
-          className="panelTitle"
           style={{
+            flexShrink: 0,
             display: "flex",
             alignItems: "center",
-            gap: "6px",
-            flexShrink: 1, // Allow shrinking when needed
-            overflow: "hidden",
-            minWidth: 0, // Prevents breaking layout when shrinking
           }}
         >
-          {panelIcon && (
-            <div
-              style={{
-                flexShrink: 0, // Prevents icon from shrinking
-                display: "flex",
-                alignItems: "center",
-              }}
-            >
-              {panelIcon}
-            </div>
-          )}
-          {panelTitle && (
-            <Subtitle2
-              style={{
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-              }}
-            >
-              {panelTitle}
-            </Subtitle2>
-          )}
+          {panelIcon}
         </div>
       )}
+      {panelTitle && (
+        <Subtitle2
+          style={{
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {panelTitle}
+        </Subtitle2>
+      )}
+    </div>
+  );
+
+  return (
+    <div
+      className="panelToolbar"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "16px",
+        boxSizing: "border-box",
+        height: "56px",
+      }}
+    >
+      {(panelIcon || panelTitle) &&
+        (linkTo ? (
+          <Link
+            to={linkTo}
+            style={{
+              textDecoration: "none",
+              color: "inherit",
+              display: "flex",
+              alignItems: "center",
+              minWidth: 0,
+              flexShrink: 1,
+            }}
+          >
+            {TitleContent}
+          </Link>
+        ) : (
+          TitleContent
+        ))}
       <div
         className="panelTools"
         style={{
           display: "flex",
           alignItems: "center",
-
-          flexGrow: 1, // Allows `panelTools` to take the remaining space
-          justifyContent: "flex-end", // Makes sure buttons hug their content
-          minWidth: 0, // Prevents layout breaking when content shrinks
+          flexGrow: 1,
+          justifyContent: "flex-end",
+          minWidth: 0,
         }}
       >
         {children}

src/frontend_react/src/coral/components/PromptCard.tsx

@@ -8,37 +8,47 @@ type PromptCardProps = {
   description: string;
   icon?: React.ReactNode;
   onClick?: () => void;
+  disabled?: boolean; // ✅ New prop for disabling the card
 };
 
 const PromptCard: React.FC<PromptCardProps> = ({
   title,
   description,
   icon,
   onClick,
+  disabled = false, // 🔧 Default is false (enabled)
 }) => {
   return (
     <Card
-      onClick={onClick}
+      onClick={!disabled ? onClick : undefined} // 🚫 Block click if disabled
       style={{
         flex: "1",
         display: "flex",
         flexDirection: "column",
         padding: "16px",
-        backgroundColor: "var(--colorNeutralBackground3)",
+        backgroundColor: disabled
+          ? "var(--colorNeutralBackgroundDisabled)"
+          : "var(--colorNeutralBackground3)",
         border: "1px solid var(--colorNeutralStroke2)",
         borderRadius: "8px",
-        cursor: "pointer",
+        cursor: disabled ? "not-allowed" : "pointer",
         boxShadow: "none",
+        opacity: disabled ? 0.4 : 1, // 🧼 Matches Fluent disabled visual
         transition: "background-color 0.2s ease-in-out",
       }}
-      onMouseOver={(e) =>
-        (e.currentTarget.style.backgroundColor =
-          "var(--colorNeutralBackground4Hover)")
-      }
-      onMouseOut={(e) =>
-        (e.currentTarget.style.backgroundColor =
-          "var(--colorNeutralBackground3)")
-      }
+      // 🧠 Only apply hover if not disabled
+      onMouseOver={(e) => {
+        if (!disabled) {
+          e.currentTarget.style.backgroundColor =
+            "var(--colorNeutralBackground4Hover)";
+        }
+      }}
+      onMouseOut={(e) => {
+        if (!disabled) {
+          e.currentTarget.style.backgroundColor =
+            "var(--colorNeutralBackground3)";
+        }
+      }}
     >
       <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
         {icon && (