@agentiffai/design 0.1.4 → 0.1.6

package/dist/layout/index.cjs

@@ -100,7 +100,8 @@ var Container = styled8__default.default.nav`
   right: 0;
   background-color: ${NAV_BG};
   border-top: 1px solid ${NAV_BORDER};
-  height: 52px;
+  /* Reserve space for Android nav buttons (80px) below the actual navbar */
+  padding-bottom: max(80px, env(safe-area-inset-bottom, 80px));
   z-index: 10;
 
   /* Dark theme support */
@@ -112,7 +113,8 @@ var ContentWrapper = styled8__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 100%;
+  /* Fixed height for actual navbar content - keeps vertical centering */
+  height: 52px;
   padding: 0 8px;
   max-width: 100%;
 
@@ -308,12 +310,13 @@ var Container3 = styled8__default.default.div`
   position: relative;
   width: 100%;
   height: 100vh;
-  background-color: #36393f;
+  background-color: rgba(255, 255, 255, 0.03);
   overflow: hidden;
 
-  /* Dark theme support */
-  @media (prefers-color-scheme: dark) {
-    background-color: #2f3136;
+  /* Ensure content is clipped on mobile */
+  @media (max-width: 768px) {
+    overflow: hidden;
+    position: relative;
   }
 `;
 var MainPane = styled8__default.default.main`
@@ -322,7 +325,7 @@ var MainPane = styled8__default.default.main`
   left: 72px; /* Width of vertical nav */
   right: 0;
   bottom: 52px; /* Height of horizontal nav */
-  background-color: #36393f;
+  background-color: rgba(255, 255, 255, 0.05);
   overflow: auto;
 
   /* Custom scrollbar styling */
@@ -348,11 +351,6 @@ var MainPane = styled8__default.default.main`
   scrollbar-width: thin;
   scrollbar-color: #202225 transparent;
 
-  /* Dark theme support */
-  @media (prefers-color-scheme: dark) {
-    background-color: #2f3136;
-  }
-
   /* Responsive adjustments */
   @media (max-width: 768px) {
     left: 60px; /* Smaller nav on mobile */
@@ -997,7 +995,7 @@ var HOVER_BG2 = "rgba(255, 255, 255, 0.05)";
 var Container6 = styled8__default.default.div`
   width: 100%;
   height: 100%;
-  background-color: ${BG_PRIMARY};
+  background-color: transparent;
   color: ${TEXT_PRIMARY2};
   display: flex;
   flex-direction: column;
@@ -1006,8 +1004,8 @@ var Container6 = styled8__default.default.div`
 `;
 var TabListWrapper = styled8__default.default.div`
   display: flex;
-  border-bottom: 2px solid ${BG_TERTIARY2};
-  background-color: ${BG_SECONDARY};
+  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.03);
   padding: 0 16px;
   gap: 8px;
   overflow-x: auto;
@@ -1073,7 +1071,7 @@ var TabPanelWrapper = styled8__default.default.div`
   padding: 24px;
   overflow-y: auto;
   overflow-x: hidden; // Prevent horizontal overflow
-  background-color: ${BG_PRIMARY};
+  background-color: rgba(255, 255, 255, 0.05);
   min-height: 0; // Enable proper flex shrinking and scrolling
 
   @media (max-width: 640px) {
@@ -1124,8 +1122,8 @@ var BrowseButton = styled8__default.default.button`
   gap: 12px;
   width: 100%;
   padding: 12px 16px;
-  background-color: ${BG_SECONDARY};
-  border: 1px solid ${BG_TERTIARY2};
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   color: ${TEXT_SECONDARY2};
   font-size: 14px;
@@ -1297,7 +1295,7 @@ var ItemContainer = styled8__default.default.div`
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 4px 8px;
+  padding: 10px 8px; // Increased vertical padding from 4px to 10px for better breathing room
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.1s ease;
@@ -1306,7 +1304,7 @@ var ItemContainer = styled8__default.default.div`
 
   @media (max-width: 640px) {
     gap: 6px;
-    padding: 4px 6px;
+    padding: 8px 6px; // Increased vertical padding from 4px to 8px for mobile
   }
 
   &:hover {
@@ -1324,7 +1322,7 @@ var ItemDisclosure = styled8__default.default(reactAriaComponents.Disclosure)`
   overflow: hidden;
 
   &[data-expanded] {
-    background-color: ${BG_SECONDARY};
+    background-color: rgba(255, 255, 255, 0.05);
     border-radius: 8px;
   }
 `;
@@ -1348,7 +1346,7 @@ var ItemHeader = styled8__default.default(reactAriaComponents.Button)`
 `;
 var ItemDisclosurePanel = styled8__default.default(reactAriaComponents.DisclosurePanel)`
   padding: 6px;
-  background-color: ${BG_SECONDARY};
+  background-color: rgba(0, 0, 0, 0.2);
   border-radius: 0 0 8px 8px;
   margin-top: -4px;
   display: flex;
@@ -1406,25 +1404,32 @@ var ItemName = styled8__default.default.span`
   }
 `;
 var RunStatus = styled8__default.default.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 14px;
   font-weight: 500;
   flex-shrink: 0;
   margin-left: auto;
-  color: ${(props) => {
+
+  /* Color for SVG icons */
+  img {
+    filter: ${(props) => {
   switch (props.$status) {
     case "completed":
-      return "#10b981";
-    // green
+      return "brightness(0) saturate(100%) invert(73%) sepia(34%) saturate(547%) hue-rotate(99deg) brightness(91%) contrast(89%)";
+    // green #10b981
     case "running":
-      return "#f59e0b";
-    // yellow
+      return "brightness(0) saturate(100%) invert(78%) sepia(60%) saturate(1839%) hue-rotate(360deg) brightness(100%) contrast(94%)";
+    // yellow #f59e0b
     case "failed":
-      return "#ef4444";
-    // red
+      return "brightness(0) saturate(100%) invert(34%) sepia(94%) saturate(3446%) hue-rotate(343deg) brightness(94%) contrast(94%)";
+    // red #ef4444
     default:
-      return TEXT_SECONDARY2;
+      return "none";
   }
 }};
+  }
 
   @media (max-width: 640px) {
     font-size: 12px;
@@ -1433,13 +1438,13 @@ var RunStatus = styled8__default.default.span`
 styled8__default.default.div`
   margin-bottom: 12px;
   border-radius: 12px;
-  background-color: ${BG_SECONDARY};
+  background-color: rgba(255, 255, 255, 0.05);
   overflow: hidden;
 `;
 styled8__default.default.button`
   width: 100%;
   padding: 16px;
-  background: ${BG_SECONDARY};
+  background: rgba(255, 255, 255, 0.05);
   border: none;
   color: ${TEXT_PRIMARY2};
   display: flex;
@@ -1481,7 +1486,7 @@ styled8__default.default.span`
 styled8__default.default.div`
   padding: 16px;
   padding-top: 0;
-  background-color: ${BG_TERTIARY2};
+  background-color: rgba(0, 0, 0, 0.2);
   color: ${TEXT_SECONDARY2};
   font-size: 13px;
   line-height: 1.6;
@@ -1610,16 +1615,34 @@ var GoogleButton = styled8__default.default.button`
 `;
 var ICONS = {
   hashtag: "/assets/icon-set/Icon-hashtag.svg",
+  // State icons - left side
+  loader: "/assets/icon-set/Icon-loader-2-line.svg",
+  // Pending
+  radioButton: "/assets/icon-set/Icon-radio-button-line.svg",
+  // Running
+  shieldCheck: "/assets/icon-set/Icon-shield-check-fill.svg",
+  // Completed
+  shieldCross: "/assets/icon-set/Icon-shield-cross-fill.svg",
+  // Failed
+  // Status indicator icons - right side (before chevron)
+  checkFill: "/assets/icon-set/Icon-check-fill.svg",
+  // Completed status
+  hourglass: "/assets/icon-set/Icon-hourglass-line.svg",
+  // Running status
+  closeFill: "/assets/icon-set/Icon-close-fill.svg",
+  // Failed status
+  // Legacy icons (kept for backward compatibility)
   bell: "/assets/icon-set/Icon-bell-fill.svg",
   file: "/assets/icon-set/Icon-file-3-fill.svg",
   link: "/assets/icon-set/Icon-external-link-fill.svg",
   chat: "/assets/icon-set/Icon-chat-1-fill.svg",
+  logout: "/assets/icon-set/logout-box-fill.svg",
   community: "/assets/icon-set/Icon-community-fill.svg",
   cpu: "/assets/icon-set/Icon-cpu-fill.svg",
   chevronDown: "/assets/icon-set/Icon-arrow-down-s-fill.svg",
   warning: "/assets/icon-set/Icon-error-warning-fill.svg"
 };
-function ItemWithLogs({ run }) {
+function ItemWithLogs({ run, onRunSelect }) {
   const [isExpanded, setIsExpanded] = react.useState(false);
   const logSections = run.logs ? [
     {
@@ -1633,31 +1656,39 @@ function ItemWithLogs({ run }) {
       }))
     }
   ] : [];
+  const handleClick = () => {
+    setIsExpanded(!isExpanded);
+    onRunSelect?.(run.id);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(ItemDisclosure, { id: run.id, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       ItemHeader,
       {
         slot: "trigger",
-        onClick: () => setIsExpanded(!isExpanded),
+        onClick: handleClick,
         $isExpanded: isExpanded,
         children: /* @__PURE__ */ jsxRuntime.jsxs(ItemContainer, { as: "div", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { src: ICONS[run.icon || "bell"], alt: "" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { src: ICONS[run.icon || "loader"], alt: "" }),
           /* @__PURE__ */ jsxRuntime.jsx(ItemName, { children: run.name }),
           /* @__PURE__ */ jsxRuntime.jsxs(RunStatus, { $status: run.status, children: [
-            run.status === "completed" && "\u2713",
-            run.status === "running" && "\u27F3",
-            run.status === "failed" && "\u2715"
+            run.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.checkFill, alt: "", style: { width: "16px", height: "16px" } }),
+            run.status === "running" && /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.hourglass, alt: "", style: { width: "16px", height: "16px" } }),
+            run.status === "failed" && /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.closeFill, alt: "", style: { width: "16px", height: "16px" } })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: isExpanded, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
         ] })
       }
     ),
-    isExpanded && /* @__PURE__ */ jsxRuntime.jsx(ItemDisclosurePanel, { children: run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#72767D", fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx(ItemDisclosurePanel, { children: run.customContent ? (
+      // Render custom content directly
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px" }, children: run.customContent })
+    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#72767D", fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
   ] });
 }
 function RunsTabContent({
   runs,
-  onBrowseAutomations
+  onBrowseAutomations,
+  onRunSelect
 }) {
   const [expandedKeys, setExpandedKeys] = react.useState(
     /* @__PURE__ */ new Set(["scheduled", "completed", "issues"])
@@ -1694,7 +1725,7 @@ function RunsTabContent({
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: expandedKeys.has("scheduled"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: scheduledRuns.length > 0 ? scheduledRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run }, run.id)) : /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: "No scheduled items" }) }) })
+            /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: scheduledRuns.length > 0 ? scheduledRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run, onRunSelect }, run.id)) : /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: "No scheduled items" }) }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(CategoryDisclosure, { id: "completed", children: [
             /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", children: [
@@ -1704,7 +1735,7 @@ function RunsTabContent({
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: expandedKeys.has("completed"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: completedRuns.length > 0 ? completedRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run }, run.id)) : /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: "No completed items" }) }) })
+            /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: completedRuns.length > 0 ? completedRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run, onRunSelect }, run.id)) : /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: "No completed items" }) }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(CategoryDisclosure, { id: "issues", children: [
             /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", children: [
@@ -1714,7 +1745,7 @@ function RunsTabContent({
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: expandedKeys.has("issues"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: issuesRuns.length > 0 ? issuesRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run }, run.id)) : /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: "No issues" }) }) })
+            /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: issuesRuns.length > 0 ? issuesRuns.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run, onRunSelect }, run.id)) : /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: "No issues" }) }) })
           ] })
         ]
       }
@@ -1839,6 +1870,7 @@ function PaneMenus({
   activeTab = "runs",
   onTabChange,
   runs = [],
+  onRunSelect,
   currentUsage = 0,
   maxUsage = 1e5,
   isGoogleConnected = false,
@@ -1859,7 +1891,7 @@ function PaneMenus({
       }
     },
     children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Runs", children: /* @__PURE__ */ jsxRuntime.jsx(RunsTabContent, { runs, onBrowseAutomations }) }, "runs"),
+      /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Runs", children: /* @__PURE__ */ jsxRuntime.jsx(RunsTabContent, { runs, onBrowseAutomations, onRunSelect }) }, "runs"),
       /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Usage", children: /* @__PURE__ */ jsxRuntime.jsx(UsageTabContent, { currentUsage, maxUsage }) }, "usage"),
       /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Connections", children: /* @__PURE__ */ jsxRuntime.jsx(
         ConnectionsTabContent,
@@ -1881,10 +1913,10 @@ function PaneMenus({
     /* @__PURE__ */ jsxRuntime.jsx(TabPanel, { state }, state.selectedItem?.key)
   ] });
 }
-var HEADER_BG = "#202225";
-var HEADER_BG_DARK = "#18191c";
-var BUTTON_BG = "#36393f";
-var BUTTON_BG_HOVER = "#40444b";
+var HEADER_BG = "rgba(32, 34, 37, 0.1)";
+var HEADER_BG_DARK = "rgba(24, 25, 28, 0.7)";
+var BUTTON_BG = "rgba(54, 57, 63, 0.6)";
+var BUTTON_BG_HOVER = "rgba(64, 68, 75, 0.8)";
 var breakpoints = {
   xs: "640px",
   sm: "768px",
@@ -1896,6 +1928,8 @@ var Container7 = styled8__default.default.header`
   width: 100%;
   height: 56px;
   background-color: ${HEADER_BG};
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -2079,6 +2113,7 @@ function PaneSectionHeader({
   brand = "Google",
   onBackClick,
   onSettingsClick,
+  settingsIcon = "settings-fill",
   className,
   "aria-label": ariaLabel = "Pane section header"
 }) {
@@ -2124,7 +2159,7 @@ function PaneSectionHeader({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Icon,
           {
-            name: isSettingsHovered ? "settings-line" : "settings-fill",
+            name: settingsIcon,
             size: 20,
             color: "#b9bbbe"
           }