Introduce AutoMetabuilder core components and workflow packages:

- Implement core components: CLI argument parsing, environment loading, GitHub service creation, and logging configuration. - Add support for OpenAI client setup and model resolution. - Develop SDLC context loader from GitHub and repository files. - Implement workflow context and engine builders. - Introduce major workflow packages: `game_tick_loop` and `contextual_iterative_loop`. - Update localization files with new package descriptions and labels. - Streamline web navigation by loading items from a dedicated JSON file.
2026-04-24 13:54:59 +00:00 · 2026-01-10 02:17:09 +00:00
parent d69cde3e7e
commit 07aa7192fd
12 changed files with 45 additions and 28 deletions
--- a/frontend/autometabuilder/components/layout/PageLayout.tsx
+++ b/frontend/autometabuilder/components/layout/PageLayout.tsx
@@ -15,7 +15,7 @@ export default function PageLayout({ navItems, section, onSectionChange, t, chil
  return (
    <Box sx={{ display: "flex" }}>
      <Sidebar items={navItems} selected={section} onSelect={onSectionChange} t={t} />
-      <Box component="main" sx={{ flexGrow: 1, p: 3, bgcolor: "#04070f", minHeight: "100vh" }}>
+      <Box component="main" sx={{ flexGrow: 1, p: 3, bgcolor: "var(--color-app-bg)", minHeight: "100vh" }}>
        <Toolbar disableGutters>
          <div>
            <Typography variant="h4" color="text.primary" gutterBottom>
--- a/frontend/autometabuilder/components/layout/Sidebar.tsx
+++ b/frontend/autometabuilder/components/layout/Sidebar.tsx
@@ -11,13 +11,13 @@ type SidebarProps = {
 export default function Sidebar({ items, selected, onSelect, t }: SidebarProps) {
  return (
    <Drawer variant="permanent" anchor="left" sx={{ width: 220, flexShrink: 0 }}>
-      <Box sx={{ height: "100%", backgroundColor: "#0f172a" }}>
+      <Box sx={{ height: "100%", backgroundColor: "var(--color-sidebar-bg)" }}>
        <Box sx={{ px: 3, py: 2 }}>
          <Typography variant="overline" color="text.secondary">
            {t("ui.app.name", "AutoMetabuilder")}
          </Typography>
        </Box>
-        <Divider sx={{ borderColor: "rgba(255,255,255,0.08)" }} />
+        <Divider sx={{ borderColor: "var(--color-divider)" }} />
        <List>
          {items.map((item) => (
            <ListItemButton
@@ -26,7 +26,7 @@ export default function Sidebar({ items, selected, onSelect, t }: SidebarProps)
              onClick={() => onSelect(item.section)}
              data-section={item.section}
              sx={{
-                color: selected === item.section ? "#fff" : "rgba(226,232,240,0.8)",
+                color: selected === item.section ? "var(--color-text-strong)" : "var(--color-text-muted-strong)",
              }}
            >
              <ListItemText primary={t(item.label_key, item.default_label)} primaryTypographyProps={{ fontSize: 14 }} />
--- a/frontend/autometabuilder/components/sections/DashboardSection.tsx
+++ b/frontend/autometabuilder/components/sections/DashboardSection.tsx
@@ -42,7 +42,7 @@ export default function DashboardSection({ status, logs, onRun, t }: DashboardSe
  };

  return (
-    <Paper id="dashboard" sx={{ p: 3, mb: 3, backgroundColor: "#0d111b" }}>
+    <Paper id="dashboard" sx={{ p: 3, mb: 3, backgroundColor: "var(--color-panel-bg)" }}>
      <Typography variant="h5" gutterBottom>
        {t("ui.dashboard.title", "Dashboard")}
      </Typography>
@@ -50,7 +50,7 @@ export default function DashboardSection({ status, logs, onRun, t }: DashboardSe
        {t("ui.dashboard.subtitle", "Control the bot and monitor system activity")}
      </Typography>
      <Stack direction={{ xs: "column", md: "row" }} spacing={3} mt={2}>
-        <Paper sx={{ flex: 1, p: 2, backgroundColor: "#0b1221" }}>
+        <Paper sx={{ flex: 1, p: 2, backgroundColor: "var(--color-panel-alt)" }}>
          <Typography variant="subtitle1" gutterBottom>
            {t("ui.dashboard.bot_control", "Bot Control")}
          </Typography>
@@ -99,11 +99,11 @@ export default function DashboardSection({ status, logs, onRun, t }: DashboardSe
            {feedback}
          </Typography>
        </Paper>
-        <Paper sx={{ flex: 1, p: 2, backgroundColor: "#0b1221" }}>
+        <Paper sx={{ flex: 1, p: 2, backgroundColor: "var(--color-panel-alt)" }}>
          <Typography variant="subtitle1" gutterBottom>
            {t("ui.dashboard.logs.title", "Recent Logs")}
          </Typography>
-          <Box component="pre" sx={{ maxHeight: 240, overflow: "auto", fontSize: 12, color: "white" }}>
+          <Box component="pre" sx={{ maxHeight: 240, overflow: "auto", fontSize: 12, color: "var(--color-text-strong)" }}>
            {logs.slice(-1200) || t("ui.dashboard.status.idle", "Idle")}
          </Box>
        </Paper>
--- a/frontend/autometabuilder/components/sections/PromptSection.tsx
+++ b/frontend/autometabuilder/components/sections/PromptSection.tsx
@@ -22,7 +22,7 @@ export default function PromptSection({ content, onSave, t }: PromptSectionProps
  };

  return (
-    <Paper id="prompt" sx={{ p: 3, mb: 3, backgroundColor: "#0d111b" }}>
+    <Paper id="prompt" sx={{ p: 3, mb: 3, backgroundColor: "var(--color-panel-bg)" }}>
      <Typography variant="h5" gutterBottom>
        {t("ui.prompt.title", "Prompt Builder")}
      </Typography>
@@ -37,9 +37,9 @@ export default function PromptSection({ content, onSave, t }: PromptSectionProps
        fullWidth
        InputProps={{
          sx: {
-            backgroundColor: "#030712",
+            backgroundColor: "var(--color-input-bg)",
            borderRadius: 2,
-            color: "white",
+            color: "var(--color-text-strong)",
            fontFamily: "JetBrains Mono, monospace",
          },
        }}
--- a/frontend/autometabuilder/components/sections/SettingsSection.tsx
+++ b/frontend/autometabuilder/components/sections/SettingsSection.tsx
@@ -35,7 +35,7 @@ export default function SettingsSection({ envVars, onSave, t }: SettingsSectionP
  };

  return (
-    <Paper id="settings" sx={{ p: 3, mb: 3, backgroundColor: "#0d111b" }}>
+    <Paper id="settings" sx={{ p: 3, mb: 3, backgroundColor: "var(--color-panel-bg)" }}>
      <Typography variant="h5" gutterBottom>
        {t("ui.settings.title", "Settings")}
      </Typography>
@@ -51,9 +51,9 @@ export default function SettingsSection({ envVars, onSave, t }: SettingsSectionP
            onChange={(event) => updateField(key, event.target.value)}
            InputProps={{
              sx: {
-                backgroundColor: "#030712",
+                backgroundColor: "var(--color-input-bg)",
                borderRadius: 1,
-                color: "white",
+                color: "var(--color-text-strong)",
              },
            }}
          />
--- a/frontend/autometabuilder/components/sections/TranslationsSection.tsx
+++ b/frontend/autometabuilder/components/sections/TranslationsSection.tsx
@@ -75,7 +75,7 @@ export default function TranslationsSection({ languages, onRefresh, t }: Transla
  };

  return (
-    <Paper id="translations" sx={{ p: 3, mb: 3, backgroundColor: "#0d111b" }}>
+    <Paper id="translations" sx={{ p: 3, mb: 3, backgroundColor: "var(--color-panel-bg)" }}>
      <Typography variant="h5" gutterBottom>
        {t("ui.translations.title", "Translations")}
      </Typography>
@@ -101,9 +101,9 @@ export default function TranslationsSection({ languages, onRefresh, t }: Transla
          onChange={(event) => setEditorValue(event.target.value)}
          InputProps={{
            sx: {
-              backgroundColor: "#030712",
+              backgroundColor: "var(--color-input-bg)",
              borderRadius: 2,
-              color: "white",
+              color: "var(--color-text-strong)",
              fontFamily: "JetBrains Mono, monospace",
            },
          }}
--- a/frontend/autometabuilder/components/sections/WorkflowSection.tsx
+++ b/frontend/autometabuilder/components/sections/WorkflowSection.tsx
@@ -27,7 +27,7 @@ export default function WorkflowSection({ content, packages, onSave, onTemplateS
  };

  return (
-    <Paper id="workflow" sx={{ p: 3, mb: 3, backgroundColor: "#0d111b" }}>
+    <Paper id="workflow" sx={{ p: 3, mb: 3, backgroundColor: "var(--color-panel-bg)" }}>
      <Typography variant="h5" gutterBottom>
        {t("ui.workflow.title", "Workflow Builder")}
      </Typography>
@@ -44,10 +44,10 @@ export default function WorkflowSection({ content, packages, onSave, onTemplateS
            sx={{
              width: "100%",
              fontFamily: "JetBrains Mono, monospace",
-              backgroundColor: "#030712",
-              border: "1px solid rgba(148, 163, 184, 0.4)",
+              backgroundColor: "var(--color-input-bg)",
+              border: "1px solid var(--color-border-muted)",
              borderRadius: 2,
-              color: "white",
+              color: "var(--color-text-strong)",
              p: 2,
            }}
          />
@@ -60,7 +60,7 @@ export default function WorkflowSection({ content, packages, onSave, onTemplateS
            </Typography>
          </Stack>
        </Box>
-        <Paper sx={{ flex: 1, p: 2, backgroundColor: "#0b1221" }}>
+        <Paper sx={{ flex: 1, p: 2, backgroundColor: "var(--color-panel-alt)" }}>
          <Stack spacing={2}>
            <Box>
              <Typography variant="subtitle1" gutterBottom>
--- a/frontend/autometabuilder/components/workflow/WorkflowGraphPanel.tsx
+++ b/frontend/autometabuilder/components/workflow/WorkflowGraphPanel.tsx
@@ -30,7 +30,7 @@ export default function WorkflowGraphPanel({ t }: WorkflowGraphPanelProps) {
  }, []);

  return (
-    <Paper sx={{ p: 2, backgroundColor: "#0b1221" }}>
+    <Paper sx={{ p: 2, backgroundColor: "var(--color-panel-alt)" }}>
      <Typography variant="subtitle1" gutterBottom>
        {t("ui.workflow.graph.title", "Workflow Graph")}
      </Typography>
@@ -45,7 +45,7 @@ export default function WorkflowGraphPanel({ t }: WorkflowGraphPanelProps) {
        <Typography color="error">{error}</Typography>
      ) : (
        <>
-          <Stack spacing={1} divider={<Divider light sx={{ borderColor: "rgba(255,255,255,0.08)" }} />}>
+          <Stack spacing={1} divider={<Divider light sx={{ borderColor: "var(--color-divider)" }} />}>
            {graph?.nodes.map((node) => (
              <Box key={node.id} sx={{ display: "flex", flexDirection: "column" }}>
                <Stack direction="row" alignItems="center" spacing={1}>
@@ -60,7 +60,7 @@ export default function WorkflowGraphPanel({ t }: WorkflowGraphPanelProps) {
              </Box>
            ))}
          </Stack>
-          <Divider sx={{ my: 2, borderColor: "rgba(255,255,255,0.08)" }} />
+          <Divider sx={{ my: 2, borderColor: "var(--color-divider)" }} />
          <Stack spacing={1}>
            {graph?.edges.map((edge, index) => (
              <Typography key={`${edge.from}-${edge.to}-${edge.var}-${index}`} variant="caption" color="text.secondary">
--- a/frontend/autometabuilder/components/workflow/WorkflowPalette.tsx
+++ b/frontend/autometabuilder/components/workflow/WorkflowPalette.tsx
@@ -43,7 +43,7 @@ export default function WorkflowPalette({ t }: WorkflowPaletteProps) {
  const hasQuery = search.trim().length > 0;

  return (
-    <Paper sx={{ p: 2, backgroundColor: "#0b1221" }}>
+    <Paper sx={{ p: 2, backgroundColor: "var(--color-panel-alt)" }}>
      <Typography variant="subtitle1" gutterBottom>
        {t("ui.workflow.palette.title", "Workflow Palette")}
      </Typography>
@@ -66,7 +66,7 @@ export default function WorkflowPalette({ t }: WorkflowPaletteProps) {
          {`${t("ui.workflow.palette.empty", "No matching nodes.")} "${search.trim()}"`}
        </Typography>
      ) : (
-        <Stack spacing={1} divider={<Divider sx={{ borderColor: "rgba(255,255,255,0.08)" }} />}>
+        <Stack spacing={1} divider={<Divider sx={{ borderColor: "var(--color-divider)" }} />}>
          {entries.map(([id, plugin]) => (
            <WorkflowPaletteCard key={id} id={id} plugin={plugin} t={t} />
          ))}
--- a/frontend/autometabuilder/components/workflow/WorkflowPaletteCard.tsx
+++ b/frontend/autometabuilder/components/workflow/WorkflowPaletteCard.tsx
@@ -40,7 +40,7 @@ function renderPortChips(
        key={`${direction}-${name}`}
        label={`${direction === "in" ? "⮂" : "⮀"} ${portLabel}`}
        size="small"
-        sx={{ backgroundColor: "rgba(255,255,255,0.08)", color: "white" }}
+        sx={{ backgroundColor: "var(--color-divider)", color: "var(--color-text-strong)" }}
      />
    );
  });
--- a/frontend/autometabuilder/styles/_variables.scss
+++ b/frontend/autometabuilder/styles/_variables.scss
@@ -1,9 +1,14 @@
 $body-bg: #05060a;
+$app-bg: #04070f;
 $panel-bg: #0d111b;
+$panel-bg-alt: #0b1221;
+$input-bg: #030712;
+$sidebar-bg: #0f172a;
 $border-color: #1f2937;
 $accent: #f97316;
 $accent-strong: #fb923c;
 $text: #e2e8f0;
+$text-strong: #ffffff;
 $muted: #94a3b8;
 $radius: 0.75rem;

--- a/frontend/autometabuilder/styles/globals.scss
+++ b/frontend/autometabuilder/styles/globals.scss
@@ -3,6 +3,18 @@
 :root {
  color: $text;
  background: $body-bg;
+  --color-body-bg: #{$body-bg};
+  --color-app-bg: #{$app-bg};
+  --color-panel-bg: #{$panel-bg};
+  --color-panel-alt: #{$panel-bg-alt};
+  --color-input-bg: #{$input-bg};
+  --color-sidebar-bg: #{$sidebar-bg};
+  --color-text: #{$text};
+  --color-text-strong: #{$text-strong};
+  --color-text-muted: #{$muted};
+  --color-text-muted-strong: #{rgba($text, 0.8)};
+  --color-border-muted: #{rgba($muted, 0.4)};
+  --color-divider: #{rgba($text, 0.08)};
 }

 * {