@agentiffai/design 0.1.5 → 0.1.6

package/dist/layout/index.d.cts

@@ -107,8 +107,9 @@ interface RunItem {
     status: 'completed' | 'running' | 'failed';
     details: string;
     category: 'scheduled' | 'completed' | 'issues';
-    icon?: 'bell' | 'file' | 'link' | 'chat' | 'warning';
+    icon?: 'loader' | 'radioButton' | 'shieldCheck' | 'shieldCross' | 'bell' | 'file' | 'link' | 'chat' | 'warning';
     logs?: ActionLog[];
+    customContent?: React.ReactNode;
 }
 interface OAuthConnectionData {
     id: string;
@@ -121,6 +122,7 @@ interface PaneMenusProps {
     activeTab?: 'runs' | 'usage' | 'connections';
     onTabChange?: (tab: 'runs' | 'usage' | 'connections') => void;
     runs?: RunItem[];
+    onRunSelect?: (runId: string) => void;
     currentUsage?: number;
     maxUsage?: number;
     isGoogleConnected?: boolean;
@@ -133,7 +135,7 @@ interface PaneMenusProps {
     isOAuthLoading?: boolean;
     onBrowseAutomations?: () => void;
 }
-declare function PaneMenus({ activeTab, onTabChange, runs, currentUsage, maxUsage, isGoogleConnected, onGoogleConnect, onGoogleDisconnect, oauthConnections, onOAuthConnect, onOAuthDisconnect, isOAuthConnecting, isOAuthLoading, onBrowseAutomations, }: PaneMenusProps): react_jsx_runtime.JSX.Element;
+declare function PaneMenus({ activeTab, onTabChange, runs, onRunSelect, currentUsage, maxUsage, isGoogleConnected, onGoogleConnect, onGoogleDisconnect, oauthConnections, onOAuthConnect, onOAuthDisconnect, isOAuthConnecting, isOAuthLoading, onBrowseAutomations, }: PaneMenusProps): react_jsx_runtime.JSX.Element;
 
 type BrandType = 'Google' | 'Microsoft' | 'Slack' | 'YouTube';
 interface PaneSectionHeaderProps {
@@ -150,6 +152,11 @@ interface PaneSectionHeaderProps {
      * Callback fired when settings button is clicked
      */
     onSettingsClick?: () => void;
+    /**
+     * Icon name for the settings button
+     * @default 'settings-fill'
+     */
+    settingsIcon?: string;
     /**
      * Additional CSS class name
      */
@@ -174,7 +181,7 @@ interface PaneSectionHeaderProps {
  * />
  * ```
  */
-declare function PaneSectionHeader({ brand, onBackClick, onSettingsClick, className, 'aria-label': ariaLabel, }: PaneSectionHeaderProps): react_jsx_runtime.JSX.Element;
+declare function PaneSectionHeader({ brand, onBackClick, onSettingsClick, settingsIcon, className, 'aria-label': ariaLabel, }: PaneSectionHeaderProps): react_jsx_runtime.JSX.Element;
 declare namespace PaneSectionHeader {
     var displayName: string;
 }

package/dist/layout/index.d.ts

@@ -107,8 +107,9 @@ interface RunItem {
     status: 'completed' | 'running' | 'failed';
     details: string;
     category: 'scheduled' | 'completed' | 'issues';
-    icon?: 'bell' | 'file' | 'link' | 'chat' | 'warning';
+    icon?: 'loader' | 'radioButton' | 'shieldCheck' | 'shieldCross' | 'bell' | 'file' | 'link' | 'chat' | 'warning';
     logs?: ActionLog[];
+    customContent?: React.ReactNode;
 }
 interface OAuthConnectionData {
     id: string;
@@ -121,6 +122,7 @@ interface PaneMenusProps {
     activeTab?: 'runs' | 'usage' | 'connections';
     onTabChange?: (tab: 'runs' | 'usage' | 'connections') => void;
     runs?: RunItem[];
+    onRunSelect?: (runId: string) => void;
     currentUsage?: number;
     maxUsage?: number;
     isGoogleConnected?: boolean;
@@ -133,7 +135,7 @@ interface PaneMenusProps {
     isOAuthLoading?: boolean;
     onBrowseAutomations?: () => void;
 }
-declare function PaneMenus({ activeTab, onTabChange, runs, currentUsage, maxUsage, isGoogleConnected, onGoogleConnect, onGoogleDisconnect, oauthConnections, onOAuthConnect, onOAuthDisconnect, isOAuthConnecting, isOAuthLoading, onBrowseAutomations, }: PaneMenusProps): react_jsx_runtime.JSX.Element;
+declare function PaneMenus({ activeTab, onTabChange, runs, onRunSelect, currentUsage, maxUsage, isGoogleConnected, onGoogleConnect, onGoogleDisconnect, oauthConnections, onOAuthConnect, onOAuthDisconnect, isOAuthConnecting, isOAuthLoading, onBrowseAutomations, }: PaneMenusProps): react_jsx_runtime.JSX.Element;
 
 type BrandType = 'Google' | 'Microsoft' | 'Slack' | 'YouTube';
 interface PaneSectionHeaderProps {
@@ -150,6 +152,11 @@ interface PaneSectionHeaderProps {
      * Callback fired when settings button is clicked
      */
     onSettingsClick?: () => void;
+    /**
+     * Icon name for the settings button
+     * @default 'settings-fill'
+     */
+    settingsIcon?: string;
     /**
      * Additional CSS class name
      */
@@ -174,7 +181,7 @@ interface PaneSectionHeaderProps {
  * />
  * ```
  */
-declare function PaneSectionHeader({ brand, onBackClick, onSettingsClick, className, 'aria-label': ariaLabel, }: PaneSectionHeaderProps): react_jsx_runtime.JSX.Element;
+declare function PaneSectionHeader({ brand, onBackClick, onSettingsClick, settingsIcon, className, 'aria-label': ariaLabel, }: PaneSectionHeaderProps): react_jsx_runtime.JSX.Element;
 declare namespace PaneSectionHeader {
     var displayName: string;
 }

package/dist/layout/index.js

@@ -94,7 +94,8 @@ var Container = styled8.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 */
@@ -106,7 +107,8 @@ var ContentWrapper = styled8.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%;
 
@@ -302,12 +304,13 @@ var Container3 = styled8.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.main`
@@ -316,7 +319,7 @@ var MainPane = styled8.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 */
@@ -342,11 +345,6 @@ var MainPane = styled8.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 */
@@ -991,7 +989,7 @@ var HOVER_BG2 = "rgba(255, 255, 255, 0.05)";
 var Container6 = styled8.div`
   width: 100%;
   height: 100%;
-  background-color: ${BG_PRIMARY};
+  background-color: transparent;
   color: ${TEXT_PRIMARY2};
   display: flex;
   flex-direction: column;
@@ -1000,8 +998,8 @@ var Container6 = styled8.div`
 `;
 var TabListWrapper = styled8.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;
@@ -1067,7 +1065,7 @@ var TabPanelWrapper = styled8.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) {
@@ -1118,8 +1116,8 @@ var BrowseButton = styled8.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;
@@ -1291,7 +1289,7 @@ var ItemContainer = styled8.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;
@@ -1300,7 +1298,7 @@ var ItemContainer = styled8.div`
 
   @media (max-width: 640px) {
     gap: 6px;
-    padding: 4px 6px;
+    padding: 8px 6px; // Increased vertical padding from 4px to 8px for mobile
   }
 
   &:hover {
@@ -1318,7 +1316,7 @@ var ItemDisclosure = styled8(Disclosure)`
   overflow: hidden;
 
   &[data-expanded] {
-    background-color: ${BG_SECONDARY};
+    background-color: rgba(255, 255, 255, 0.05);
     border-radius: 8px;
   }
 `;
@@ -1342,7 +1340,7 @@ var ItemHeader = styled8(Button)`
 `;
 var ItemDisclosurePanel = styled8(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;
@@ -1400,25 +1398,32 @@ var ItemName = styled8.span`
   }
 `;
 var RunStatus = styled8.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;
@@ -1427,13 +1432,13 @@ var RunStatus = styled8.span`
 styled8.div`
   margin-bottom: 12px;
   border-radius: 12px;
-  background-color: ${BG_SECONDARY};
+  background-color: rgba(255, 255, 255, 0.05);
   overflow: hidden;
 `;
 styled8.button`
   width: 100%;
   padding: 16px;
-  background: ${BG_SECONDARY};
+  background: rgba(255, 255, 255, 0.05);
   border: none;
   color: ${TEXT_PRIMARY2};
   display: flex;
@@ -1475,7 +1480,7 @@ styled8.span`
 styled8.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;
@@ -1604,16 +1609,34 @@ var GoogleButton = styled8.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] = useState(false);
   const logSections = run.logs ? [
     {
@@ -1627,31 +1650,39 @@ function ItemWithLogs({ run }) {
       }))
     }
   ] : [];
+  const handleClick = () => {
+    setIsExpanded(!isExpanded);
+    onRunSelect?.(run.id);
+  };
   return /* @__PURE__ */ jsxs(ItemDisclosure, { id: run.id, children: [
     /* @__PURE__ */ jsx(
       ItemHeader,
       {
         slot: "trigger",
-        onClick: () => setIsExpanded(!isExpanded),
+        onClick: handleClick,
         $isExpanded: isExpanded,
         children: /* @__PURE__ */ jsxs(ItemContainer, { as: "div", children: [
-          /* @__PURE__ */ jsx(ItemIcon, { src: ICONS[run.icon || "bell"], alt: "" }),
+          /* @__PURE__ */ jsx(ItemIcon, { src: ICONS[run.icon || "loader"], alt: "" }),
           /* @__PURE__ */ jsx(ItemName, { children: run.name }),
           /* @__PURE__ */ jsxs(RunStatus, { $status: run.status, children: [
-            run.status === "completed" && "\u2713",
-            run.status === "running" && "\u27F3",
-            run.status === "failed" && "\u2715"
+            run.status === "completed" && /* @__PURE__ */ jsx("img", { src: ICONS.checkFill, alt: "", style: { width: "16px", height: "16px" } }),
+            run.status === "running" && /* @__PURE__ */ jsx("img", { src: ICONS.hourglass, alt: "", style: { width: "16px", height: "16px" } }),
+            run.status === "failed" && /* @__PURE__ */ jsx("img", { src: ICONS.closeFill, alt: "", style: { width: "16px", height: "16px" } })
           ] }),
           /* @__PURE__ */ jsx(ChevronIcon, { $isExpanded: isExpanded, children: /* @__PURE__ */ jsx("img", { src: ICONS.chevronDown, alt: "" }) })
         ] })
       }
     ),
-    isExpanded && /* @__PURE__ */ jsx(ItemDisclosurePanel, { children: run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsx("div", { style: { color: "#72767D", fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
+    isExpanded && /* @__PURE__ */ jsx(ItemDisclosurePanel, { children: run.customContent ? (
+      // Render custom content directly
+      /* @__PURE__ */ jsx("div", { style: { padding: "16px" }, children: run.customContent })
+    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsx("div", { style: { color: "#72767D", fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
   ] });
 }
 function RunsTabContent({
   runs,
-  onBrowseAutomations
+  onBrowseAutomations,
+  onRunSelect
 }) {
   const [expandedKeys, setExpandedKeys] = useState(
     /* @__PURE__ */ new Set(["scheduled", "completed", "issues"])
@@ -1688,7 +1719,7 @@ function RunsTabContent({
               ] }),
               /* @__PURE__ */ jsx(ChevronIcon, { $isExpanded: expandedKeys.has("scheduled"), children: /* @__PURE__ */ jsx("img", { src: ICONS.chevronDown, alt: "" }) })
             ] }) }),
-            /* @__PURE__ */ jsx(CategoryDisclosurePanel, { children: scheduledRuns.length > 0 ? scheduledRuns.map((run) => /* @__PURE__ */ jsx(ItemWithLogs, { run }, run.id)) : /* @__PURE__ */ jsx(ItemContainer, { children: /* @__PURE__ */ jsx(ItemName, { $dimmed: true, children: "No scheduled items" }) }) })
+            /* @__PURE__ */ jsx(CategoryDisclosurePanel, { children: scheduledRuns.length > 0 ? scheduledRuns.map((run) => /* @__PURE__ */ jsx(ItemWithLogs, { run, onRunSelect }, run.id)) : /* @__PURE__ */ jsx(ItemContainer, { children: /* @__PURE__ */ jsx(ItemName, { $dimmed: true, children: "No scheduled items" }) }) })
           ] }),
           /* @__PURE__ */ jsxs(CategoryDisclosure, { id: "completed", children: [
             /* @__PURE__ */ jsx(Heading, { level: 3, children: /* @__PURE__ */ jsxs(CategoryHeader, { slot: "trigger", children: [
@@ -1698,7 +1729,7 @@ function RunsTabContent({
               ] }),
               /* @__PURE__ */ jsx(ChevronIcon, { $isExpanded: expandedKeys.has("completed"), children: /* @__PURE__ */ jsx("img", { src: ICONS.chevronDown, alt: "" }) })
             ] }) }),
-            /* @__PURE__ */ jsx(CategoryDisclosurePanel, { children: completedRuns.length > 0 ? completedRuns.map((run) => /* @__PURE__ */ jsx(ItemWithLogs, { run }, run.id)) : /* @__PURE__ */ jsx(ItemContainer, { children: /* @__PURE__ */ jsx(ItemName, { $dimmed: true, children: "No completed items" }) }) })
+            /* @__PURE__ */ jsx(CategoryDisclosurePanel, { children: completedRuns.length > 0 ? completedRuns.map((run) => /* @__PURE__ */ jsx(ItemWithLogs, { run, onRunSelect }, run.id)) : /* @__PURE__ */ jsx(ItemContainer, { children: /* @__PURE__ */ jsx(ItemName, { $dimmed: true, children: "No completed items" }) }) })
           ] }),
           /* @__PURE__ */ jsxs(CategoryDisclosure, { id: "issues", children: [
             /* @__PURE__ */ jsx(Heading, { level: 3, children: /* @__PURE__ */ jsxs(CategoryHeader, { slot: "trigger", children: [
@@ -1708,7 +1739,7 @@ function RunsTabContent({
               ] }),
               /* @__PURE__ */ jsx(ChevronIcon, { $isExpanded: expandedKeys.has("issues"), children: /* @__PURE__ */ jsx("img", { src: ICONS.chevronDown, alt: "" }) })
             ] }) }),
-            /* @__PURE__ */ jsx(CategoryDisclosurePanel, { children: issuesRuns.length > 0 ? issuesRuns.map((run) => /* @__PURE__ */ jsx(ItemWithLogs, { run }, run.id)) : /* @__PURE__ */ jsx(ItemContainer, { children: /* @__PURE__ */ jsx(ItemName, { $dimmed: true, children: "No issues" }) }) })
+            /* @__PURE__ */ jsx(CategoryDisclosurePanel, { children: issuesRuns.length > 0 ? issuesRuns.map((run) => /* @__PURE__ */ jsx(ItemWithLogs, { run, onRunSelect }, run.id)) : /* @__PURE__ */ jsx(ItemContainer, { children: /* @__PURE__ */ jsx(ItemName, { $dimmed: true, children: "No issues" }) }) })
           ] })
         ]
       }
@@ -1833,6 +1864,7 @@ function PaneMenus({
   activeTab = "runs",
   onTabChange,
   runs = [],
+  onRunSelect,
   currentUsage = 0,
   maxUsage = 1e5,
   isGoogleConnected = false,
@@ -1853,7 +1885,7 @@ function PaneMenus({
       }
     },
     children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Item, { title: "Runs", children: /* @__PURE__ */ jsx(RunsTabContent, { runs, onBrowseAutomations }) }, "runs"),
+      /* @__PURE__ */ jsx(Item, { title: "Runs", children: /* @__PURE__ */ jsx(RunsTabContent, { runs, onBrowseAutomations, onRunSelect }) }, "runs"),
       /* @__PURE__ */ jsx(Item, { title: "Usage", children: /* @__PURE__ */ jsx(UsageTabContent, { currentUsage, maxUsage }) }, "usage"),
       /* @__PURE__ */ jsx(Item, { title: "Connections", children: /* @__PURE__ */ jsx(
         ConnectionsTabContent,
@@ -1875,10 +1907,10 @@ function PaneMenus({
     /* @__PURE__ */ 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",
@@ -1890,6 +1922,8 @@ var Container7 = styled8.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;
@@ -2073,6 +2107,7 @@ function PaneSectionHeader({
   brand = "Google",
   onBackClick,
   onSettingsClick,
+  settingsIcon = "settings-fill",
   className,
   "aria-label": ariaLabel = "Pane section header"
 }) {
@@ -2118,7 +2153,7 @@ function PaneSectionHeader({
         children: /* @__PURE__ */ jsx(
           Icon,
           {
-            name: isSettingsHovered ? "settings-line" : "settings-fill",
+            name: settingsIcon,
             size: 20,
             color: "#b9bbbe"
           }