flock-core 0.1.1__py3-none-any.whl

flock/app/components/history_grid.py

@@ -0,0 +1,168 @@
+"""Agent History Explorer built with MonsterUI"""
+
+import json
+from datetime import datetime
+
+from fasthtml.common import *
+from monsterui.all import *
+
+
+def load_history(page=1, per_page=10, search=None):
+    with open("data/history.json") as f:
+        data = json.load(f)
+
+    if search:
+        search = search.lower()
+        data = [
+            d
+            for d in data
+            if search in d["agent_name"].lower() or search in d["location"].lower() or search in d["date"].lower()
+        ]
+
+    total = len(data)
+    pages = (total + per_page - 1) // per_page
+    start = (page - 1) * per_page
+    return {"data": data[start : start + per_page], "total": total, "pages": pages, "page": page}
+
+
+def format_date(iso_date):
+    return datetime.fromisoformat(iso_date).strftime("%b %d, %Y %H:%M")
+
+
+def json_preview(value):
+    return Pre(json.dumps(value, indent=2), cls="text-xs p-2 bg-muted rounded-md max-h-40 overflow-auto")
+
+
+def header_render(col):
+    return Th(col, cls="p-2 text-left")
+
+
+def cell_render(col, val):
+    """Modified cell renderer that only uses column value"""
+    match col:
+        case "Agent":
+            return Td(cls="p-2 font-medium")(Div(val))
+        case "Date":
+            return Td(cls="p-2 text-sm")(format_date(val))
+        case "Location":
+            return Td(cls="p-2 capitalize")(val)  # val is already location string
+        case "Input" | "Output":
+            return Td(cls="p-2")(json_preview(val))
+        case "Details":
+            # val contains the full record here
+            return Td(cls="p-2")(Button("View", cls=ButtonT.primary, uk_toggle=f"target: #details-{val['agent_id']}"))
+
+
+def details_modal(record):
+    return Modal(
+        Div(cls="p-6 space-y-4")(
+            ModalTitle(f"{record['agent_name']} - {format_date(record['date'])}"),
+            Grid(
+                Div(cls="space-y-2")(H4("Input Details", cls="text-sm font-medium"), json_preview(record["input"])),
+                Div(cls="space-y-2")(H4("Output Details", cls="text-sm font-medium"), json_preview(record["output"])),
+            ),
+            DivRAligned(ModalCloseButton("Close", cls=ButtonT.ghost)),
+        ),
+        id=f"details-{record['agent_id']}",
+    )
+
+
+def get_history(page: int = 1, per_page: int = 5, search: str = None, reduced=False):
+    history = load_history(page, per_page, search)
+
+    controls = DivFullySpaced(cls="mt-8")(
+        Div(cls="flex gap-4 items-center")(
+            Input(
+                placeholder="Search agents...",
+                value=search,
+                name="search",
+                hx_get="/history",
+                hx_trigger="keyup changed delay:500ms",
+                hx_target="#history-content",
+                hx_include="[name='per_page']",
+                cls="w-64",
+            ),
+            Select(
+                Option("5", value="5"),
+                Option("10", value="10"),
+                Option("20", value="20"),
+                name="per_page",
+                value=str(per_page),
+                hx_get="/history",
+                hx_trigger="change",
+                hx_target="#history-content",
+                cls="w-24",
+            ),
+        )
+    )
+
+    if reduced:
+        header_data = ["Agent", "Date", "Details"]
+        bodydata = [
+            {
+                "Agent": d["agent_name"],
+                "Date": d["date"],
+                "Details": d,  # Store full record here
+            }
+            for d in history["data"]
+        ]
+    else:
+        header_data = ["Agent", "Date", "Input", "Output", "Details"]
+        bodydata = [
+            {
+                "Agent": d["agent_name"],
+                "Date": d["date"],
+                # "Location": d["input"]["location"],  # Pre-extract location
+                "Input": d["input"],
+                "Output": d["output"],
+                "Details": d,  # Store full record here
+            }
+            for d in history["data"]
+        ]
+
+    table = TableFromDicts(
+        header_data=header_data,
+        body_data=bodydata,
+        body_cell_render=cell_render,
+        header_cell_render=header_render,
+        cls=TableT.responsive,
+    )
+
+    footer = DivFullySpaced(cls="mt-4")(
+        Div(
+            f"Showing {min(history['total'], per_page)} of {history['total']} records",
+            cls="text-sm text-muted-foreground",
+        ),
+        Div(cls="flex items-center gap-4")(
+            Button(
+                "< Prev",
+                hx_get=f"/history?page={history['page'] - 1}",
+                hx_target="#history-content",
+                disabled=history["page"] == 1,
+                cls=ButtonT.primary,
+            ),
+            Span(f"Page {history['page']} of {history['pages']}"),
+            Button(
+                "Next >",
+                hx_get=f"/history?page={history['page'] + 1}",
+                hx_target="#history-content",
+                disabled=history["page"] == history["pages"],
+                cls=ButtonT.primary,
+            ),
+        ),
+    )
+
+    return Div(id="history-content")(controls, table, footer, *[details_modal(d) for d in history["data"]])
+
+
+def HistoryGrid(reduced=False):
+    if reduced:
+        return get_history(reduced)
+
+    return Div(cls="flex flex-col")(
+        Div(cls="px-4 py-2 ")(
+            H3("Agent History Explorer"),
+            P("Review historical agent executions and their outcomes", cls=TextFont.muted_sm),
+        ),
+        get_history(reduced),
+    )

flock/app/components/history_grid_alt.py

@@ -0,0 +1,189 @@
+"""Agent History Explorer built with MonsterUI"""
+
+import json
+from datetime import datetime
+
+from fasthtml.common import *
+from monsterui.all import *
+
+
+def format_date(iso_date):
+    return datetime.fromisoformat(iso_date).strftime("%b %d, %Y %H:%M")
+
+
+def json_preview(value):
+    return Pre(json.dumps(value, indent=2), cls="text-xs p-2 bg-muted rounded-md max-h-40 overflow-auto")
+
+
+def header_render(col):
+    return Th(col, cls="p-2 text-left")
+
+
+def cell_render(col, val):
+    """Modified cell renderer that only uses column value"""
+    match col:
+        case "Agent":
+            return Td(cls="p-2 font-medium")(Div(val))
+        case "Date":
+            return Td(cls="p-2 text-sm")(format_date(val))
+        case "Location":
+            return Td(cls="p-2 capitalize")(val)  # val is already location string
+        case "Input" | "Output":
+            return Td(cls="p-2")(json_preview(val))
+        case "Details":
+            # val contains the full record here
+            return Td(cls="p-2")(Button("View", cls=ButtonT.primary, uk_toggle=f"target: #details-{val['agent_id']}"))
+
+
+def load_history(page=1, per_page=10, search=None):
+    with open("data/history.json") as f:
+        data = json.load(f)
+
+    # Full-text search across all fields
+    if search:
+        search = search.lower()
+        data = [
+            d
+            for d in data
+            if any(search in str(v).lower() for v in d.values())
+            or any(search in str(v).lower() for sub in [d["input"], d["output"]] for v in sub.values())
+        ]
+
+    total = len(data)
+    pages = (total + per_page - 1) // per_page
+    start = (page - 1) * per_page
+    return {"data": data[start : start + per_page], "total": total, "pages": pages, "page": page}
+
+
+def json_tree(value, depth=0):
+    if isinstance(value, dict):
+        return Div(cls=f"ml-{depth * 2} space-y-1")(
+            *[Details(Summary(k, cls="inline-flex items-center"), json_tree(v, depth + 1)) for k, v in value.items()]
+        )
+    elif isinstance(value, list):
+        return Div(cls=f"ml-{depth * 2} space-y-1")(
+            *[
+                Div(cls="flex items-center gap-2")(Span("•", cls="text-muted-foreground"), json_tree(item, depth + 1))
+                for item in value
+            ]
+        )
+    return Span(str(value), cls="text-muted-foreground")
+
+
+def render_cell(col, val):
+    match col:
+        case "date":
+            return datetime.fromisoformat(val).strftime("%b %d, %Y %H:%M")
+        case "input" | "output":
+            return Div(cls="max-w-[300px] overflow-auto p-2 bg-muted rounded-md")(json_tree(val))
+        case "_expand":
+            return Button("Expand", cls=ButtonT.primary, uk_toggle=f"target: #details-{val['agent_id']}")
+        case _:
+            return val if isinstance(val, str) else json.dumps(val, default=str)
+
+
+def details_modal(record):
+    return Modal(
+        Div(cls="p-6 space-y-4")(
+            ModalTitle(f"Agent Execution Details - {record['agent_id']}"),
+            Div(cls="space-y-4")(
+                Div(cls="grid grid-cols-2 gap-4")(
+                    Div(cls="space-y-2")(H4("Input", cls="text-sm font-medium"), json_tree(record["input"])),
+                    Div(cls="space-y-2")(H4("Output", cls="text-sm font-medium"), json_tree(record["output"])),
+                ),
+                Div(cls="space-y-2")(
+                    H4("Metadata", cls="text-sm font-medium"),
+                    json_tree({k: v for k, v in record.items() if k not in ["input", "output"]}),
+                ),
+            ),
+            DivRAligned(ModalCloseButton("Close", cls=ButtonT.ghost)),
+        ),
+        id=f"details-{record['agent_id']}",
+    )
+
+
+def Pagination(current_page, total_pages, hx_get, hx_target):
+    return Div(cls="flex items-center gap-2")(
+        Button(
+            "Previous",
+            disabled=current_page == 1,
+            hx_get=f"{hx_get}?page={current_page - 1}",
+            hx_target=hx_target,
+            cls=ButtonT.primary,
+        ),
+        Span(f"Page {current_page} of {total_pages}", cls="text-sm"),
+        Button(
+            "Next",
+            disabled=current_page >= total_pages,
+            hx_get=f"{hx_get}?page={current_page + 1}",
+            hx_target=hx_target,
+            cls=ButtonT.primary,
+        ),
+    )
+
+
+def get_history(page: int = 1, per_page: int = 10, search: str = None):
+    history = load_history(page, per_page, search)
+
+    # Dynamic columns from first record (if exists)
+    columns = []
+    if history["data"]:
+        sample = history["data"][0]
+        columns = [k for k in sample.keys() if k not in ["input", "output", "agent_id"]]
+        columns += ["input", "output", "_expand"]
+
+    controls = DivFullySpaced(cls="mt-8")(
+        Input(
+            placeholder="Search history...",
+            value=search,
+            name="search",
+            hx_get="/history",
+            hx_trigger="keyup changed delay:500ms",
+            hx_target="#history-content",
+            hx_include="[name='per_page']",
+            cls="w-64",
+        ),
+        Select(
+            *[Option(str(n), value=str(n)) for n in [5, 10, 20, 50]],
+            name="per_page",
+            value=str(per_page),
+            hx_get="/history",
+            hx_trigger="change",
+            hx_target="#history-content",
+            cls="w-24",
+        ),
+    )
+
+    table = TableFromDicts(
+        header_data=columns,
+        body_data=[{**d, "_expand": d} for d in history["data"]],
+        body_cell_render=lambda col, val: Td(render_cell(col, val)),
+        header_cell_render=lambda col: Th(col.replace("_", " ").title(), cls="p-2 text-left"),
+        cls=f"{TableT.responsive} {TableT.hover}",
+    )
+
+    footer = DivFullySpaced(cls="mt-4")(
+        Div(
+            f"Showing {(page - 1) * per_page + 1}-{min(page * per_page, history['total'])} of {history['total']} records",
+            cls="text-sm text-muted-foreground",
+        ),
+        Pagination(current_page=page, total_pages=history["pages"], hx_get="/history", hx_target="#history-content"),
+    )
+
+    return Div(id="history-content")(
+        controls,
+        table if history["data"] else P("No records found", cls=TextFont.muted),
+        footer,
+        *[details_modal(d) for d in history["data"]],
+    )
+
+
+def HistoryGrid(reduced=False):
+    return Container(
+        Div(cls="space-y-4")(
+            H1("Agent History Explorer"),
+            P("Inspect agent executions with dynamic JSON exploration", cls=TextFont.muted_sm),
+        ),
+        get_history(),
+        cls="p-8",
+    )

flock/app/components/sidebar.py

@@ -0,0 +1,19 @@
+from fasthtml.common import *
+from fasthtml.svg import *
+from monsterui.all import *
+
+
+def SidebarLi(icon, title=None, href=None):
+    if icon == "---":
+        return Li(Hr())
+    return Li(
+        AX(DivLAligned(Span(UkIcon(icon)), Span(title)), hx_get=href, hx_target="#main-grid", hx_swap="outerHTML")
+    )
+
+
+def Sidebar(sidebar):
+    return NavContainer(
+        NavHeaderLi(H1("Flock UI", cls="text-xxl font-semibold")),
+        *[SidebarLi(icon, title, href) for icon, title, href in sidebar],
+        cls="space-y-6 mt-3",
+    )

flock/app/components/theme.py

@@ -0,0 +1,9 @@
+from fasthtml.common import *
+from fasthtml.svg import *
+from monsterui.all import *
+
+
+def ThemeDialog():
+    from fasthtml.components import Uk_theme_switcher
+
+    return Uk_theme_switcher()

flock/app/components/util.py

@@ -0,0 +1,18 @@
+from datetime import datetime
+
+from fasthtml.common import *
+from fasthtml.svg import *
+from monsterui.all import *
+
+
+def format_date(date_str):
+    date_obj = datetime.fromisoformat(date_str)
+    return date_obj.strftime("%Y-%m-%d %I:%M %p")
+
+
+def IconNavItem(*d):
+    return [Li(A(UkIcon(o[0], uk_tooltip=o[1]))) for o in d]
+
+
+def IconNav(*c, cls=""):
+    return Ul(cls=f"uk-iconnav {cls}")(*c)

flock/app/hive_app.py

@@ -0,0 +1,118 @@
+from fasthtml.common import *
+from fasthtml.svg import *
+from monsterui.all import *
+
+from flock.app.components import HistoryGrid, Sidebar
+from flock.app.modules import AgentContent, AgentDetailView, Playground, Settings, agent_data
+from flock.app.modules.about import AboutPage
+
+hdrs = Theme.blue.headers()
+
+app, rt = fast_app(hdrs=hdrs, live=True)
+
+##############################
+# Sidebar
+##############################
+
+sidebar = (
+    ("layout-dashboard", "Dashboard", "/"),
+    ("---", "", ""),
+    ("bot", "Agents", "/agents"),
+    ("server", "Agent Systems", "/systems"),
+    ("scroll", "History", "/history"),
+    ("---", "", ""),
+    ("wrench", "Tools", "/tools"),
+    ("test-tube", "Playground", "/playground"),
+    ("---", "", ""),
+    ("settings", "Settings", "/settings"),
+    ("info", "About", "/about"),
+)
+
+
+##############################
+# MAIN
+##############################
+
+
+@rt
+def index():
+    return (
+        Title("Flock UI"),
+        Container(
+            Grid(
+                Div(Sidebar(sidebar), cls="col-span-1 w-48 flex"),
+                Grid(
+                    Div(AgentContent(), cls="col-span-2"),
+                    Div(AgentDetailView(agent_data[0]), cls="col-span-3"),
+                    cols=5,
+                    cls="col-span-5",
+                    id="main-grid",
+                ),
+                cols_sm=2,
+                cols_md=2,
+                cols_lg=6,
+                cols_xl=6,
+                gap=5,
+                cls="flex-1",
+            ),
+            cls=("flex", ContainerT.xl),
+        ),
+    )
+
+
+@rt("/history")
+def get():
+    return Grid(
+        Div(HistoryGrid(), cls="col-span-5"),
+        cols=5,
+        cls="col-span-5",
+        id="main-grid",
+    )
+
+
+@rt("/playground")
+def get():
+    return Grid(
+        Div(Playground(), cls="col-span-5"),  # noqa: F405
+        cols=5,
+        cls="col-span-5",
+        id="main-grid",
+    )
+
+
+@rt("/settings")
+def get():
+    return Grid(
+        Div(Settings(), cls="col-span-5"),
+        cols=5,
+        cls="col-span-5",
+        id="main-grid",
+    )
+
+
+@rt("/agents")
+def get():
+    return Grid(
+        Div(AgentContent(), cls="col-span-2"),
+        Div(AgentDetailView(agent=agent_data[0]), cls="col-span-3"),
+        cols=5,
+        cls="col-span-5",
+        id="main-grid",
+    )
+
+
+@rt("/about")
+def get():
+    return Grid(
+        Div(AboutPage(), cls="col-span-5"),
+        cols=5,
+        cls="col-span-5",
+        id="main-grid",
+    )
+
+
+serve()
+
+
+def main():
+    serve()

flock/app/html/d3.html

@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>D3.js Node Graph</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
+    <style>
+        .node {
+            stroke: #fff;
+            stroke-width: 1.5px;
+        }
+
+        .link {
+            stroke: #999;
+            stroke-opacity: 0.6;
+            stroke-width: 1px;
+        }
+
+        .node text {
+            pointer-events: none;
+            font: 10px sans-serif;
+        }
+    </style>
+</head>
+
+<body>
+    <div>Double-click background to add node. Drag nodes to move them.</div>
+    <svg width="800" height="600"></svg>
+    <script>
+        // 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;
+        }
+    </script>
+</body>
+
+</html>