flock-core 0.1.1__py3-none-any.whl

flock/app/modules/__init__.py

@@ -0,0 +1,12 @@
+from .agent_detail import AgentDetailView
+from .agent_list import AgentContent, agent_data
+from .playground import Playground
+from .settings import Settings
+
+__all__ = [
+    "AgentContent",
+    "AgentDetailView",
+    "Playground",
+    "Settings",
+    "agent_data",
+]

flock/app/modules/about.py

@@ -0,0 +1,17 @@
+from fasthtml.common import *
+from fasthtml.svg import *
+from monsterui.all import *
+
+from flock.app.components import CoreArchitectureChart
+
+
+def AboutPage():
+    return Div(cls="flex flex-col", uk_filter="target: .js-filter")(
+        Div(cls="flex px-4 py-2 ")(
+            H3("About & Help"),
+        ),
+        Div(
+            Div(cls="p-4")(CoreArchitectureChart()),
+            cls="w-[1200px]",
+        ),
+    )

flock/app/modules/agent_detail.py

@@ -0,0 +1,70 @@
+from fasthtml.common import *
+from fasthtml.svg import *
+from monsterui.all import *
+
+from flock.app.components import HistoryGrid
+from flock.app.components.util import IconNav, IconNavItem, format_date
+
+##############################
+# Agents
+##############################
+
+
+def AgentDetailView(agent):
+    action_icons = [("copy", "Duplicate"), ("pencil", "Edit"), ("cloud-upload", "Deploy")]
+    status_items = ["Toggle Production", "Arcflock", "Add Label", "Monitor Usage"]
+
+    return Div(cls="flex flex-col")(
+        Div(cls="flex h-14 flex-none items-center border-b border-border p-2")(
+            DivFullySpaced(
+                DivLAligned(
+                    IconNav(*IconNavItem(*action_icons)),
+                    IconNav(Li(A(UkIcon("activity"), uk_tooltip="Metrics")), cls="pl-2"),
+                    cls="gap-x-2 divide-x divide-border",
+                ),
+                IconNav(
+                    *IconNavItem(("trash", "Delete"), ("code", "View JSON")),
+                    Li(A(UkIcon("ellipsis-vertical", button=True))),
+                    DropDownNavContainer(*map(lambda x: Li(A(x)), status_items)),
+                ),
+            )
+        ),
+        Div(cls="flex-1")(
+            DivLAligned(
+                DivLAligned(
+                    Span(UkIcon(agent["icon"]), cls="flex h-10 w-10 items-center justify-center rounded-full bg-muted"),
+                    Div(cls="grid gap-1")(
+                        Div(agent["title"], cls=TextT.bold),
+                        Div(agent["name"], cls="text-xs"),
+                        #                        DivLAligned("Type:", agent["type"], cls=TextT.sm),
+                    ),
+                    cls="gap-4 text-sm",
+                ),
+                Div(format_date(agent["created_at"]), cls=TextFont.muted_sm),
+                cls="p-4",
+            ),
+            Div(cls="flex-1 space-y-4 border-t border-border p-4 text-sm")(
+                P(agent["description"]),
+                Dl(cls="grid grid-cols-2 gap-4")(
+                    DivLAligned(
+                        Dt("Production Ready", cls=TextT.muted), Dd("✅" if agent["production_ready"] else "❌")
+                    ),
+                    DivLAligned(Dt("Last Updated", cls=TextT.muted), Dd(format_date(agent["last_updated"]))),
+                    DivLAligned(Dt("Input Schema", cls=TextT.muted), Dd(agent["input"], cls="font-mono text-xs")),
+                    DivLAligned(Dt("Output Schema", cls=TextT.muted), Dd(agent["output"], cls="font-mono text-xs")),
+                ),
+            ),
+        ),
+        Div(cls="flex-none space-y-4 border-t border-border p-4")(
+            DivFullySpaced(
+                HistoryGrid(reduced=True),
+            ),
+        ),
+        Div(cls="flex-none space-y-4 border-t border-border p-4")(
+            DivFullySpaced(
+                LabelSwitch("Monitoring Enabled", id="monitoring"),
+                Button("Export Configuration", cls=ButtonT.secondary),
+                Button("Run Agent", cls=ButtonT.primary),
+            ),
+        ),
+    )

flock/app/modules/agent_list.py

@@ -0,0 +1,59 @@
+import json
+import pathlib
+
+from fasthtml.common import *
+from fasthtml.svg import *
+from monsterui.all import *
+
+from flock.app.components.util import format_date
+
+agent_data = json.load(open(pathlib.Path("data/mock.json")))
+
+
+def AgentItem(agent):
+    cls_base = "space-y-4 relative rounded-lg border border-border p-3 text-sm hover:bg-primary"
+    cls = f"{cls_base} {'bg-muted' if agent == agent_data[0] else ''} {'tag-unread' if not agent['production_ready'] else 'tag-mail'}"
+
+    return Li(cls=cls)(
+        DivFullySpaced(
+            DivLAligned(
+                Span(UkIcon(agent["icon"]), cls="flex h-10 w-10 items-center justify-center"),
+                Div(agent["title"], cls="font-semibold"),
+                Span(cls="flex h-2 w-2 rounded-full bg-green-600") if agent["production_ready"] else "",
+            ),
+            Div(format_date(agent["created_at"]), cls="text-xs"),
+            cls="mb-4",
+        ),
+        A(agent["name"], cls=TextFont.bold_sm, href=f"#agent-{agent['id']}"),
+        Div(agent["description"][:100] + "...", cls=TextFont.muted_sm),
+        DivLAligned(*[
+            A(label, cls=f"uk-label relative z-10 {'uk-label-primary' if label == 'analysis' else ''}", href="#")
+            for label in agent["labels"]
+        ]),
+    )
+
+
+def AgentList(agents):
+    return Ul(cls="js-filter space-y-4 p-4 pt-0")(*[AgentItem(agent) for agent in agents])
+
+
+def AgentContent():
+    return Div(cls="flex flex-col", uk_filter="target: .js-filter")(
+        Div(cls="flex px-4 py-2 ")(
+            H3("Agents"),
+            TabContainer(
+                Li(A("All Agents", href="#", role="button"), cls="uk-active", uk_filter_control="filter: .tag-mail"),
+                Li(A("Production Ready", href="#", role="button"), uk_filter_control="filter: .tag-unread"),
+                alt=True,
+                cls="ml-auto max-w-80",
+            ),
+        ),
+        Div(cls="flex flex-1 flex-col")(
+            Div(cls="p-4")(
+                Div(cls="uk-inline w-full")(
+                    Span(cls="uk-form-icon text-muted-foreground")(UkIcon("search")), Input(placeholder="Search")
+                )
+            ),
+            Div(cls="flex-1 overflow-y-auto max-h-[800px]")(AgentList(agent_data)),
+        ),
+    )

flock/app/modules/playground.py

@@ -0,0 +1,322 @@
+from fasthtml.common import *
+from fasthtml.svg import *
+from monsterui.all import *
+
+CODE = """
+var pixelSize = 16
+import 'https://cdn.interactjs.io/v1.9.20/auto-start/index.js'
+import 'https://cdn.interactjs.io/v1.9.20/actions/drag/index.js'
+import 'https://cdn.interactjs.io/v1.9.20/actions/resize/index.js'
+import 'https://cdn.interactjs.io/v1.9.20/modifiers/index.js'
+import 'https://cdn.interactjs.io/v1.9.20/dev-tools/index.js'
+import interact from 'https://cdn.interactjs.io/v1.9.20/interactjs/index.js'
+
+interact('.rainbow-pixel-canvas')
+  .draggable({
+    max: Infinity,
+    maxPerElement: Infinity,
+    origin: 'self',
+    modifiers: [
+      interact.modifiers.snap({
+        // snap to the corners of a grid
+        targets: [
+          interact.snappers.grid({ x: pixelSize, y: pixelSize })
+        ]
+      })
+    ],
+    listeners: {
+      // draw colored squares on move
+      move: function (event) {
+        var context = event.target.getContext('2d')
+        // calculate the angle of the drag direction
+        var dragAngle = 180 * Math.atan2(event.dx, event.dy) / Math.PI
+
+        // set color based on drag angle and speed
+        context.fillStyle =
+          'hsl(' +
+          dragAngle +
+          ', 86%, ' +
+          (30 + Math.min(event.speed / 1000, 1) * 50) +
+          '%)'
+
+        // draw squares
+        context.fillRect(
+          event.pageX - pixelSize / 2,
+          event.pageY - pixelSize / 2,
+          pixelSize,
+          pixelSize
+        )
+      }
+    }
+  })
+  // clear the canvas on doubletap
+  .on('doubletap', function (event) {
+    var context = event.target.getContext('2d')
+
+    context.clearRect(0, 0, context.canvas.width, context.canvas.height)
+    resizeCanvases()
+  })
+
+function resizeCanvases () {
+  [].forEach.call(document.querySelectorAll('.rainbow-pixel-canvas'), function (
+    canvas
+  ) {
+    delete canvas.width
+    delete canvas.height
+
+    var rect = canvas.getBoundingClientRect()
+
+    canvas.width = rect.width
+    canvas.height = rect.height
+  })
+}
+
+resizeCanvases()
+
+// interact.js can also add DOM event listeners
+interact(window).on('resize', resizeCanvases)
+"""
+
+CODE2 = """
+import 'https://cdn.interactjs.io/v1.9.20/auto-start/index.js'
+import 'https://cdn.interactjs.io/v1.9.20/actions/drag/index.js'
+import 'https://cdn.interactjs.io/v1.9.20/actions/resize/index.js'
+import 'https://cdn.interactjs.io/v1.9.20/modifiers/index.js'
+import 'https://cdn.interactjs.io/v1.9.20/dev-tools/index.js'
+import interact from 'https://cdn.interactjs.io/v1.9.20/interactjs/index.js'
+const svg = document.getElementById('connections');
+
+    // Function to draw an SVG line between two points
+    function createConnectionLine(x1, y1, x2, y2) {
+      const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+      line.setAttribute("x1", x1);
+      line.setAttribute("y1", y1);
+      line.setAttribute("x2", x2);
+      line.setAttribute("y2", y2);
+      line.setAttribute("stroke", "red");
+      line.setAttribute("stroke-width", "1");
+      return line;
+    }
+
+    // Function to update connection lines
+    function updateConnections() {
+      // Clear existing connections
+      svg.innerHTML = '';
+
+      // Get the positions of the nodes
+      const node1 = document.getElementById('node1');
+      const node2 = document.getElementById('node2');
+      const rect1 = node1.getBoundingClientRect();
+      const rect2 = node2.getBoundingClientRect();
+
+      // Calculate the centers of the nodes
+      const x1 = rect1.left + rect1.width / 2;
+      const y1 = rect1.top + rect1.height / 2;
+      const x2 = rect2.left + rect2.width / 2;
+      const y2 = rect2.top + rect2.height / 2;
+
+      // Create and append a connection line
+      const line = createConnectionLine(x1, y1, x2, y2);
+      svg.appendChild(line);
+    }
+
+    // Initialize Interact.js
+    interact('.node').draggable({
+      listeners: {
+        move(event) {
+          // Move the dragged node
+          const target = event.target;
+          const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
+          const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+
+          target.style.transform = `translate(${x}px, ${y}px)`;
+          target.setAttribute('data-x', x);
+          target.setAttribute('data-y', y);
+
+          // Update the connections
+          updateConnections();
+        }
+      }
+    });
+
+    // Draw initial connections
+    updateConnections();
+"""
+
+CODE3 = """
+// Initial data
+        let data = {
+            nodes: [
+                {id: 1, name: "Node 1"},
+                {id: 2, name: "Node 2"},
+                {id: 3, name: "Node 3"}
+            ],
+            links: [
+                {source: 0, target: 1},
+                {source: 1, target: 2}
+            ]
+        };
+
+        // Create SVG container
+        const svg = d3.select("svg");
+        const width = +svg.attr("width");
+        const height = +svg.attr("height");
+
+        // Create force simulation
+        const simulation = d3.forceSimulation(data.nodes)
+            .force("link", d3.forceLink(data.links).id(d => d.id))
+            .force("charge", d3.forceManyBody().strength(-300))
+            .force("center", d3.forceCenter(width / 2, height / 2));
+
+        // Create the links
+        const link = svg.append("g")
+            .selectAll("line")
+            .data(data.links)
+            .join("line")
+            .attr("class", "link");
+
+        // Create the nodes
+        const node = svg.append("g")
+            .selectAll("g")
+            .data(data.nodes)
+            .join("g")
+            .attr("class", "node");
+
+        // Add circles to nodes
+        node.append("circle")
+            .attr("r", 10)
+            .style("fill", (d, i) => d3.schemeCategory10[i % 10]);
+
+        // Add labels to nodes
+        node.append("text")
+            .attr("dx", 12)
+            .attr("dy", ".35em")
+            .text(d => d.name);
+
+        // Add drag behavior
+        node.call(d3.drag()
+            .on("start", dragstarted)
+            .on("drag", dragged)
+            .on("end", dragended));
+
+        // Double click on background to add node
+        svg.on("dblclick", function(event) {
+            const coords = d3.pointer(event);
+            const newNode = {
+                id: data.nodes.length + 1,
+                name: `Node ${data.nodes.length + 1}`,
+                x: coords[0],
+                y: coords[1]
+            };
+            data.nodes.push(newNode);
+            
+            // Add link to nearest node
+            if (data.nodes.length > 1) {
+                const lastNode = data.nodes[data.nodes.length - 2];
+                data.links.push({
+                    source: lastNode,
+                    target: newNode
+                });
+            }
+            
+            updateGraph();
+        });
+
+        // Update function to refresh the graph
+        function updateGraph() {
+            // Update links
+            const link = svg.selectAll(".link")
+                .data(data.links)
+                .join("line")
+                .attr("class", "link");
+
+            // Update nodes
+            const node = svg.selectAll(".node")
+                .data(data.nodes)
+                .join(
+                    enter => {
+                        const nodeEnter = enter.append("g")
+                            .attr("class", "node")
+                            .call(d3.drag()
+                                .on("start", dragstarted)
+                                .on("drag", dragged)
+                                .on("end", dragended));
+
+                        nodeEnter.append("circle")
+                            .attr("r", 10)
+                            .style("fill", (d, i) => d3.schemeCategory10[i % 10]);
+
+                        nodeEnter.append("text")
+                            .attr("dx", 12)
+                            .attr("dy", ".35em")
+                            .text(d => d.name);
+
+                        return nodeEnter;
+                    }
+                );
+
+            // Update simulation
+            simulation.nodes(data.nodes);
+            simulation.force("link").links(data.links);
+            simulation.alpha(1).restart();
+        }
+
+        // Simulation tick function
+        simulation.on("tick", () => {
+            link
+                .attr("x1", d => d.source.x)
+                .attr("y1", d => d.source.y)
+                .attr("x2", d => d.target.x)
+                .attr("y2", d => d.target.y);
+
+            node
+                .attr("transform", d => `translate(${d.x},${d.y})`);
+        });
+
+        // Drag functions
+        function dragstarted(event, d) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            d.fx = d.x;
+            d.fy = d.y;
+        }
+
+        function dragged(event, d) {
+            d.fx = event.x;
+            d.fy = event.y;
+        }
+
+        function dragended(event, d) {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null;
+            d.fy = null;
+        }
+"""
+
+
+def get_playground():
+    return Container(
+        Canvas(cls="rainbow-pixel-canvas w-full h-full"),
+        P("Drag to draw. Double tap to clear."),
+        Script(code=CODE, type="module"),
+        cls="w-full h-full",
+    )
+
+
+def get_playground2():
+    return Container(
+        Svg(
+            width="800",
+            height="600",
+        ),
+        Script(code=CODE3),
+    )
+
+
+def Playground():
+    return Div(cls="flex flex-col w-full")(
+        Div(cls="px-4 py-2 ")(
+            H3("interact.js demo"),
+            P("Rainbows!", cls=TextFont.muted_sm),
+        ),
+        get_playground2(),
+    )

flock/app/modules/settings.py

@@ -0,0 +1,96 @@
+"""FrankenUI Forms Example built with MonsterUI (original design by ShadCN)"""
+
+from fasthtml.common import *
+from fasthtml.svg import *
+from monsterui.all import *
+
+from flock.app.components import ThemeDialog
+
+
+def HelpText(c):
+    return P(c, cls=TextFont.muted_sm)
+
+
+def heading():
+    return Div(cls="px-4 py-2 ")(
+        H3("Settings"),
+        P("Manage your account settings and set e-mail preferences.", cls=TextFont.muted_lg),
+        DividerSplit(),
+    )
+
+
+sidebar_items = ["API Keys", "Appearance", "Display"]
+
+sidebar = NavContainer(
+    *map(lambda x: Li(A(x)), sidebar_items),
+    uk_switcher="connect: #component-nav; animation: uk-animation-fade",
+    cls=(NavT.secondary, "space-y-4 p-4 w-1/5"),
+)
+
+
+def FormSectionDiv(*c, cls="space-y-2", **kwargs):
+    return Div(*c, cls=cls, **kwargs)
+
+
+def api_key_form():
+    content = (
+        FormSectionDiv(
+            LabelInput("Open AI API Key", placeholder="sk-...", id="username"),
+            HelpText("This is your Open AI API key. You can find it in your account settings. "),
+        ),
+    )
+
+    return UkFormSection("API Keys", "Manage API keys of your agents", button_txt="Update api keys", *content)
+
+
+def appearance_form():
+    content = (
+        FormSectionDiv(
+            LabelUkSelect(
+                *Options("Select a font family", "Inter", "Geist", "Open Sans", selected_idx=2, disabled_idxs={0}),
+                label="Font Family",
+                id="font_family",
+            ),
+            HelpText("Set the font you want to use in the dashboard."),
+        ),
+        FormSectionDiv(
+            FormLabel("Theme"),
+            HelpText("Select the theme for the dashboard."),
+            ThemeDialog(),
+        ),
+    )
+
+    return UkFormSection(
+        "Appearance",
+        "Customize the appearance of the app. Automatically switch between day and night themes.",
+        button_txt="Update preferences",
+        *content,
+    )
+
+
+def display_form():
+    content = Div(cls="space-y-2")(
+        Div(cls="mb-4")(
+            Span("Sidebar", cls="text-base font-medium"),
+            HelpText("Select the items you want to display in the sidebar."),
+        ),
+        *[
+            Div(CheckboxX(id=f"display_{i}", checked=i in [0, 1, 2]), FormLabel(label))
+            for i, label in enumerate(["Recents", "Home", "Applications", "Desktop", "Downloads", "Documents"])
+        ],
+    )
+    return UkFormSection(
+        "Display", "Turn items on or off to control what's displayed in the app.", button_txt="Update display", *content
+    )
+
+
+def Settings():
+    return Title("Settings form"), Container(
+        heading(),
+        Div(cls="flex gap-x-12")(
+            sidebar,
+            Ul(id="component-nav", cls="uk-switcher max-w-2xl")(
+                Li(cls="uk-active")(api_key_form(), *map(Li, [appearance_form(), display_form()]))
+            ),
+        ),
+    )

flock/core/__init__.py

@@ -0,0 +1,7 @@
+from flock.core.agent import Agent
+from flock.core.agent_registry import Registry
+from flock.core.context import FlockContext
+from flock.core.flock import Flock
+from flock.core.serializable import Serializable
+
+__all__ = ["Agent", "Flock", "FlockContext", "Registry", "Serializable"]