local-operator-ui 0.1.0 → 0.1.2-beta.2

package/out/renderer/assets/installer-BqeUmucy.js

@@ -0,0 +1,786 @@
+import { h as generateUtilityClass, i as generateUtilityClasses, a as reactExports, k as useDefaultProps, F as useRtl, j as jsxRuntimeExports, s as styled, b as clsx, e as capitalize, f as composeClasses, m as memoTheme, x as createSimplePaletteValueFilter, z as lighten, y as darken, bf as css, aT as keyframes, Y as Box, J as Typography, q as useTheme, a1 as Button, bc as ThemeProvider, bd as theme, ba as CssBaseline, bb as ReactDOM, R as React, be as ErrorBoundary } from "./theme-CpOz1dKx.js";
+function getLinearProgressUtilityClass(slot) {
+  return generateUtilityClass("MuiLinearProgress", slot);
+}
+generateUtilityClasses("MuiLinearProgress", ["root", "colorPrimary", "colorSecondary", "determinate", "indeterminate", "buffer", "query", "dashed", "dashedColorPrimary", "dashedColorSecondary", "bar", "bar1", "bar2", "barColorPrimary", "barColorSecondary", "bar1Indeterminate", "bar1Determinate", "bar1Buffer", "bar2Indeterminate", "bar2Buffer"]);
+const TRANSITION_DURATION = 4;
+const indeterminate1Keyframe = keyframes`
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+`;
+const indeterminate1Animation = typeof indeterminate1Keyframe !== "string" ? css`
+        animation: ${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      ` : null;
+const indeterminate2Keyframe = keyframes`
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+`;
+const indeterminate2Animation = typeof indeterminate2Keyframe !== "string" ? css`
+        animation: ${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
+      ` : null;
+const bufferKeyframe = keyframes`
+  0% {
+    opacity: 1;
+    background-position: 0 -23px;
+  }
+
+  60% {
+    opacity: 0;
+    background-position: 0 -23px;
+  }
+
+  100% {
+    opacity: 1;
+    background-position: -200px -23px;
+  }
+`;
+const bufferAnimation = typeof bufferKeyframe !== "string" ? css`
+        animation: ${bufferKeyframe} 3s infinite linear;
+      ` : null;
+const useUtilityClasses = (ownerState) => {
+  const {
+    classes,
+    variant,
+    color
+  } = ownerState;
+  const slots = {
+    root: ["root", `color${capitalize(color)}`, variant],
+    dashed: ["dashed", `dashedColor${capitalize(color)}`],
+    bar1: ["bar", "bar1", `barColor${capitalize(color)}`, (variant === "indeterminate" || variant === "query") && "bar1Indeterminate", variant === "determinate" && "bar1Determinate", variant === "buffer" && "bar1Buffer"],
+    bar2: ["bar", "bar2", variant !== "buffer" && `barColor${capitalize(color)}`, variant === "buffer" && `color${capitalize(color)}`, (variant === "indeterminate" || variant === "query") && "bar2Indeterminate", variant === "buffer" && "bar2Buffer"]
+  };
+  return composeClasses(slots, getLinearProgressUtilityClass, classes);
+};
+const getColorShade = (theme2, color) => {
+  if (theme2.vars) {
+    return theme2.vars.palette.LinearProgress[`${color}Bg`];
+  }
+  return theme2.palette.mode === "light" ? lighten(theme2.palette[color].main, 0.62) : darken(theme2.palette[color].main, 0.5);
+};
+const LinearProgressRoot = styled("span", {
+  name: "MuiLinearProgress",
+  slot: "Root",
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[`color${capitalize(ownerState.color)}`], styles[ownerState.variant]];
+  }
+})(memoTheme(({
+  theme: theme2
+}) => ({
+  position: "relative",
+  overflow: "hidden",
+  display: "block",
+  height: 4,
+  // Fix Safari's bug during composition of different paint.
+  zIndex: 0,
+  "@media print": {
+    colorAdjust: "exact"
+  },
+  variants: [...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      backgroundColor: getColorShade(theme2, color)
+    }
+  })), {
+    props: ({
+      ownerState
+    }) => ownerState.color === "inherit" && ownerState.variant !== "buffer",
+    style: {
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "currentColor",
+        opacity: 0.3
+      }
+    }
+  }, {
+    props: {
+      variant: "buffer"
+    },
+    style: {
+      backgroundColor: "transparent"
+    }
+  }, {
+    props: {
+      variant: "query"
+    },
+    style: {
+      transform: "rotate(180deg)"
+    }
+  }]
+})));
+const LinearProgressDashed = styled("span", {
+  name: "MuiLinearProgress",
+  slot: "Dashed",
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.dashed, styles[`dashedColor${capitalize(ownerState.color)}`]];
+  }
+})(memoTheme(({
+  theme: theme2
+}) => ({
+  position: "absolute",
+  marginTop: 0,
+  height: "100%",
+  width: "100%",
+  backgroundSize: "10px 10px",
+  backgroundPosition: "0 -23px",
+  variants: [{
+    props: {
+      color: "inherit"
+    },
+    style: {
+      opacity: 0.3,
+      backgroundImage: `radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)`
+    }
+  }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color]) => {
+    const backgroundColor = getColorShade(theme2, color);
+    return {
+      props: {
+        color
+      },
+      style: {
+        backgroundImage: `radial-gradient(${backgroundColor} 0%, ${backgroundColor} 16%, transparent 42%)`
+      }
+    };
+  })]
+})), bufferAnimation || {
+  // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+  animation: `${bufferKeyframe} 3s infinite linear`
+});
+const LinearProgressBar1 = styled("span", {
+  name: "MuiLinearProgress",
+  slot: "Bar1",
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.bar, styles.bar1, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === "indeterminate" || ownerState.variant === "query") && styles.bar1Indeterminate, ownerState.variant === "determinate" && styles.bar1Determinate, ownerState.variant === "buffer" && styles.bar1Buffer];
+  }
+})(memoTheme(({
+  theme: theme2
+}) => ({
+  width: "100%",
+  position: "absolute",
+  left: 0,
+  bottom: 0,
+  top: 0,
+  transition: "transform 0.2s linear",
+  transformOrigin: "left",
+  variants: [{
+    props: {
+      color: "inherit"
+    },
+    style: {
+      backgroundColor: "currentColor"
+    }
+  }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      backgroundColor: (theme2.vars || theme2).palette[color].main
+    }
+  })), {
+    props: {
+      variant: "determinate"
+    },
+    style: {
+      transition: `transform .${TRANSITION_DURATION}s linear`
+    }
+  }, {
+    props: {
+      variant: "buffer"
+    },
+    style: {
+      zIndex: 1,
+      transition: `transform .${TRANSITION_DURATION}s linear`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === "indeterminate" || ownerState.variant === "query",
+    style: {
+      width: "auto"
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === "indeterminate" || ownerState.variant === "query",
+    style: indeterminate1Animation || {
+      animation: `${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`
+    }
+  }]
+})));
+const LinearProgressBar2 = styled("span", {
+  name: "MuiLinearProgress",
+  slot: "Bar2",
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.bar, styles.bar2, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === "indeterminate" || ownerState.variant === "query") && styles.bar2Indeterminate, ownerState.variant === "buffer" && styles.bar2Buffer];
+  }
+})(memoTheme(({
+  theme: theme2
+}) => ({
+  width: "100%",
+  position: "absolute",
+  left: 0,
+  bottom: 0,
+  top: 0,
+  transition: "transform 0.2s linear",
+  transformOrigin: "left",
+  variants: [...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      "--LinearProgressBar2-barColor": (theme2.vars || theme2).palette[color].main
+    }
+  })), {
+    props: ({
+      ownerState
+    }) => ownerState.variant !== "buffer" && ownerState.color !== "inherit",
+    style: {
+      backgroundColor: "var(--LinearProgressBar2-barColor, currentColor)"
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant !== "buffer" && ownerState.color === "inherit",
+    style: {
+      backgroundColor: "currentColor"
+    }
+  }, {
+    props: {
+      color: "inherit"
+    },
+    style: {
+      opacity: 0.3
+    }
+  }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+    props: {
+      color,
+      variant: "buffer"
+    },
+    style: {
+      backgroundColor: getColorShade(theme2, color),
+      transition: `transform .${TRANSITION_DURATION}s linear`
+    }
+  })), {
+    props: ({
+      ownerState
+    }) => ownerState.variant === "indeterminate" || ownerState.variant === "query",
+    style: {
+      width: "auto"
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === "indeterminate" || ownerState.variant === "query",
+    style: indeterminate2Animation || {
+      animation: `${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite`
+    }
+  }]
+})));
+const LinearProgress = /* @__PURE__ */ reactExports.forwardRef(function LinearProgress2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiLinearProgress"
+  });
+  const {
+    className,
+    color = "primary",
+    value,
+    valueBuffer,
+    variant = "indeterminate",
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    color,
+    variant
+  };
+  const classes = useUtilityClasses(ownerState);
+  const isRtl = useRtl();
+  const rootProps = {};
+  const inlineStyles = {
+    bar1: {},
+    bar2: {}
+  };
+  if (variant === "determinate" || variant === "buffer") {
+    if (value !== void 0) {
+      rootProps["aria-valuenow"] = Math.round(value);
+      rootProps["aria-valuemin"] = 0;
+      rootProps["aria-valuemax"] = 100;
+      let transform = value - 100;
+      if (isRtl) {
+        transform = -transform;
+      }
+      inlineStyles.bar1.transform = `translateX(${transform}%)`;
+    }
+  }
+  if (variant === "buffer") {
+    if (valueBuffer !== void 0) {
+      let transform = (valueBuffer || 0) - 100;
+      if (isRtl) {
+        transform = -transform;
+      }
+      inlineStyles.bar2.transform = `translateX(${transform}%)`;
+    }
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(LinearProgressRoot, {
+    className: clsx(classes.root, className),
+    ownerState,
+    role: "progressbar",
+    ...rootProps,
+    ref,
+    ...other,
+    children: [variant === "buffer" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LinearProgressDashed, {
+      className: classes.dashed,
+      ownerState
+    }) : null, /* @__PURE__ */ jsxRuntimeExports.jsx(LinearProgressBar1, {
+      className: classes.bar1,
+      ownerState,
+      style: inlineStyles.bar1
+    }), variant === "determinate" ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(LinearProgressBar2, {
+      className: classes.bar2,
+      ownerState,
+      style: inlineStyles.bar2
+    })]
+  });
+});
+const AppContainer = styled(Box)(() => ({
+  display: "flex",
+  height: "100vh",
+  width: "100vw",
+  overflow: "hidden",
+  backgroundColor: "#0A0A0A"
+}));
+const InstallerLayout = styled(Box)(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  "@media (max-width: 900px)": {
+    flexDirection: "column"
+  }
+}));
+const FeatureSection = styled(Box)(({ theme: theme2 }) => ({
+  flex: "1 1 50%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "48px",
+  background: `linear-gradient(135deg, ${theme2.palette.background.default} 0%, #111111 100%)`,
+  position: "relative",
+  overflow: "hidden",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: "1px",
+    background: "rgba(255, 255, 255, 0.1)"
+  },
+  "@media (max-width: 900px)": {
+    flex: "1 1 auto",
+    padding: "32px 24px",
+    "&::after": {
+      width: "100%",
+      height: "1px",
+      bottom: 0,
+      right: "auto"
+    }
+  }
+}));
+const ProgressSection = styled(Box)(() => ({
+  flex: "1 1 50%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "48px",
+  "@media (max-width: 900px)": {
+    flex: "1 1 auto",
+    padding: "32px 24px"
+  }
+}));
+const SpinnerContainer = styled(Box)(() => ({
+  display: "flex",
+  justifyContent: "center",
+  margin: "16px 0"
+}));
+const Spinner = styled(Box)(({ theme: theme2 }) => ({
+  width: "48px",
+  height: "48px",
+  border: `3px solid ${theme2.palette.primary.main}20`,
+  borderRadius: "50%",
+  borderTopColor: theme2.palette.primary.main,
+  animation: "spin 1s ease-in-out infinite",
+  "@keyframes spin": {
+    to: { transform: "rotate(360deg)" }
+  }
+}));
+const LogoContainer = styled(Box)(() => ({
+  marginBottom: "24px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: "120px"
+}));
+const FeatureIconContainer = styled(Box)(({ theme: theme2 }) => ({
+  width: "80px",
+  height: "80px",
+  borderRadius: "50%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  marginBottom: "24px",
+  background: `linear-gradient(135deg, ${theme2.palette.primary.dark} 0%, ${theme2.palette.primary.main} 100%)`,
+  boxShadow: "0 8px 32px rgba(56, 201, 106, 0.2)",
+  fontSize: "2.5rem"
+}));
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const fadeOut = keyframes`
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+`;
+const FeatureContent = styled(Box)(
+  ({ isActive }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    textAlign: "center",
+    maxWidth: "480px",
+    animation: isActive ? `${fadeIn} 0.5s ease-out forwards` : `${fadeOut} 0.5s ease-out forwards`,
+    position: "absolute"
+  })
+);
+const FeatureTitle = styled(Typography)(({ theme: theme2 }) => ({
+  fontSize: "1.75rem",
+  fontWeight: 600,
+  marginBottom: "16px",
+  background: `linear-gradient(90deg, ${theme2.palette.primary.main}, ${theme2.palette.secondary.main})`,
+  WebkitBackgroundClip: "text",
+  WebkitTextFillColor: "transparent"
+}));
+const FeatureDescription = styled(Typography)(() => ({
+  fontSize: "1rem",
+  lineHeight: 1.6,
+  color: "rgba(255, 255, 255, 0.8)"
+}));
+const ProgressDots = styled(Box)(() => ({
+  display: "flex",
+  justifyContent: "center",
+  gap: "8px",
+  marginTop: "0",
+  position: "relative",
+  bottom: "0"
+}));
+const ProgressDot = styled(Box)(
+  ({ active, theme: theme2 }) => ({
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    background: active ? theme2.palette.primary.main : "rgba(255, 255, 255, 0.2)",
+    transition: "background 0.3s ease"
+  })
+);
+const BackgroundPattern = styled(Box)(() => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  opacity: 0.05,
+  backgroundImage: "radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px)",
+  backgroundSize: "30px 30px",
+  pointerEvents: "none"
+}));
+const features = [
+  {
+    icon: "🎯",
+    title: "Plans & Executes",
+    description: "Breaks down complex goals into manageable steps and executes them with precision."
+  },
+  {
+    icon: "🔒",
+    title: "Prioritizes Security",
+    description: "Built-in safety checks by independent AI review and user confirmations keep your system protected."
+  },
+  {
+    icon: "🌐",
+    title: "Flexible Deployment",
+    description: "Run completely locally with Ollama models or leverage cloud providers like OpenAI."
+  },
+  {
+    icon: "🔧",
+    title: "Problem Solving",
+    description: "Intelligently handles errors and roadblocks by adapting approaches and finding alternative solutions."
+  }
+];
+const FeatureCarousel = () => {
+  const [activeFeature, setActiveFeature] = reactExports.useState(0);
+  reactExports.useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveFeature((prev) => (prev + 1) % features.length);
+    }, 5e3);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        height: "300px",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Box,
+          {
+            sx: {
+              position: "relative",
+              height: "240px",
+              width: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              mb: 4
+            },
+            children: features.map((feature, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              FeatureContent,
+              {
+                isActive: index === activeFeature,
+                sx: {
+                  opacity: index === activeFeature ? 1 : 0,
+                  pointerEvents: index === activeFeature ? "auto" : "none"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FeatureIconContainer, { children: feature.icon }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FeatureTitle, { variant: "h4", children: feature.title }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FeatureDescription, { children: feature.description })
+                ]
+              },
+              feature.title
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressDots, { children: features.map((feature, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ProgressDot,
+          {
+            active: index === activeFeature,
+            onClick: () => setActiveFeature(index),
+            sx: { cursor: "pointer" }
+          },
+          `dot-${feature.title}`
+        )) })
+      ]
+    }
+  );
+};
+const InstallationProgress = () => {
+  const theme2 = useTheme();
+  const handleCancel = () => {
+    window.api.ipcRenderer.send("cancel-installation");
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        width: "100%",
+        maxWidth: "520px"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { textAlign: "center" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "gradientTitle", children: "🚀 Setting Up Your Environment" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { width: "100%" }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Typography,
+            {
+              variant: "body1",
+              color: "text.secondary",
+              sx: { textAlign: "center", mb: 3 },
+              children: "We're preparing the magic behind the scenes! This one-time setup ensures you'll have the best experience with Local Operator."
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LinearProgress,
+            {
+              sx: {
+                height: 8,
+                borderRadius: 2,
+                backgroundColor: "rgba(255, 255, 255, 0.1)",
+                "& .MuiLinearProgress-bar": {
+                  borderRadius: 2,
+                  background: `linear-gradient(90deg, ${theme2.palette.primary.main}, ${theme2.palette.secondary.main})`
+                }
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SpinnerContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner, {}) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Typography,
+          {
+            variant: "body2",
+            sx: { textAlign: "center", color: "text.secondary", mb: 2 },
+            children: "Installing dependencies and configuring your environment..."
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            variant: "contained",
+            color: "error",
+            onClick: handleCancel,
+            sx: {
+              alignSelf: "center",
+              px: 4,
+              py: 1,
+              borderRadius: 2,
+              boxShadow: "0 4px 12px rgba(211, 47, 47, 0.2)"
+            },
+            children: "Cancel Setup"
+          }
+        )
+      ]
+    }
+  );
+};
+const logo = "" + new URL("clear-icon-with-text-uwwUBaIu.png", import.meta.url).href;
+const LogoSection = () => {
+  const theme2 = useTheme();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(LogoContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Box,
+      {
+        component: "img",
+        src: logo,
+        alt: "Local Operator Logo",
+        sx: {
+          width: "auto",
+          height: 120,
+          objectFit: "contain",
+          display: "block"
+        },
+        onError: (e) => {
+          e.currentTarget.src = "../assets/icon.png";
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Typography,
+      {
+        variant: "h3",
+        sx: {
+          textAlign: "center",
+          mb: 4,
+          fontWeight: 600,
+          background: `linear-gradient(90deg, ${theme2.palette.primary.main}, ${theme2.palette.secondary.main})`,
+          WebkitBackgroundClip: "text",
+          WebkitTextFillColor: "transparent"
+        },
+        children: "Local Operator"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Typography,
+      {
+        variant: "h6",
+        sx: {
+          textAlign: "center",
+          mb: 6,
+          color: "rgba(255, 255, 255, 0.7)",
+          maxWidth: "600px"
+        },
+        children: "Your Personal Assistant that Gets Things Done with Python"
+      }
+    )
+  ] });
+};
+const InstallerContent = () => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(InstallerLayout, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(FeatureSection, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(BackgroundPattern, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(LogoSection, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(FeatureCarousel, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressSection, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(InstallationProgress, {}) })
+  ] });
+};
+const InstallerApp = () => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ThemeProvider, { theme, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CssBaseline, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AppContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(InstallerContent, {}) })
+  ] });
+};
+document.addEventListener("DOMContentLoaded", () => {
+  const root = ReactDOM.createRoot(
+    document.getElementById("app")
+  );
+  root.render(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(React.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ThemeProvider, { theme, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(CssBaseline, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(InstallerApp, {}) })
+    ] }) })
+  );
+});