feat(ai): Add the Agents view by nfebe · Pull Request #91 · flatrun/ui

nfebe · 2026-07-23T12:16:41Z

Panel surface for agents (flatrun/agent#189: markdown files run as AI sessions by the runtime). Agents get their own section in the navigation. The list shows each agent with its scope; Run opens the assistant on the resulting session, so the transcript and any pending tool approvals are handled by the existing chat rather than a new surface. The empty state shows where the files live and an example within what the tools can actually do.

sourceant · 2026-07-23T12:17:40Z

Code Review Summary

This PR adds the 'Agents' feature, allowing users to define and run markdown-based AI agents. It includes API service updates, navigation, and a comprehensive management view.

🚀 Key Improvements

New AgentsView for CRUD and execution of agents.
Integration of agent sessions into the main assistant UI.
Addition of agent metadata to AI session interfaces for better tracking.

💡 Minor Suggestions

Switch to Markdown syntax highlighting in the editor.
Add client-side regex validation for agent names.
Improve UX by opening the editor modal before fetching content.

sourceant

Review complete. See the overview comment for a summary.

sourceant · 2026-07-23T12:17:41Z

+          <div class="runtime-title">
+            <Icon name="bot" :size="16" />
+            <h3>{{ rt.name }}</h3>
+            <span class="scope-badge" :class="rt.scope">


If rt.scope is 'deployment' but the deployment property is null or undefined, the badge will appear empty. Providing a fallback string ensures the UI remains descriptive.

Suggested change





{{ rt.scope === "deployment" ? (rt.deployment || "deployment") : "system" }}

cloudflare-workers-and-pages · 2026-07-23T12:36:25Z

Deploying flatrun-ui with Cloudflare Pages

Latest commit:	`798fceb`
Status:	✅ Deploy successful!
Preview URL:	https://1d0f37cc.flatrun-ui.pages.dev
Branch Preview URL:	https://feat-agent-runtimes.flatrun-ui.pages.dev

View logs

sourceant

Review complete. See the overview comment for a summary.

sourceant · 2026-07-23T12:37:26Z

+          <div class="agent-title">
+            <Icon name="bot" :size="16" />
+            <h3>{{ agent.name }}</h3>
+            <span class="scope-badge" :class="agent.scope">


If an agent's scope is 'deployment' but the deployment property is missing or null, the badge will appear empty. Providing a fallback string (similar to other views in the system) ensures the UI remains descriptive.

Suggested change





{{ agent.scope === "deployment" ? (agent.deployment || "deployment") : "system" }}

sourceant · 2026-07-23T12:37:26Z

+      </div>
+      <div class="header-actions">
+        <button class="btn btn-icon" :disabled="loading" @click="fetchAgents">
+          <i class="pi pi-refresh" :class="{ 'pi-spin': loading }" />


For visual consistency across the application, consider using the project's custom Icon component instead of raw  tags with PrimeIcons classes where possible.

Suggested change



<Icon name="refresh" :class="{ 'pi-spin': loading }" :size="16" />

sourceant

Review complete. See the overview comment for a summary.

sourceant · 2026-07-23T12:43:45Z

+    </div>
+
+    <div v-if="loading && agents.length === 0" class="loading-state">
+      <i class="pi pi-spin pi-spinner" />


For consistency with other components in the application, use the custom Icon component for the loading spinner.

Suggested change



+ <Icon name="spinner" class="pi-spin" :size="20" />

sourceant · 2026-07-23T12:43:45Z

+    const { data } = await agentsApi.run(agent.name);
+    // The run is a session; open the assistant on it so pending tool
+    // approvals and the transcript are handled by the existing chat.
+    assist.embedded = false;


It is generally better to perform the asynchronous data loading before making the assistant panel visible. This ensures that the UI doesn't display a stale or empty state if loadSession fails or takes time to complete.

Suggested change

assist.embedded = false;

+ await assist.loadSession(data.id);

+ assist.subject = agent.name;

+ assist.embedded = false;

+ assist.visible = true;

Agents get their own section in the navigation, aligned with the other main menu items. The view lists each agent with its scope; Run opens the assistant on the resulting session, so the transcript and any pending tool approvals are handled in the existing chat. Agents can now also be written in the panel: a New Agent editor with a starter template, edit and delete on each card, and validation errors surfaced on save so an invalid definition is never stored. Together with the assistant's ability to write agent files on request, an agent can be created by describing it in chat, by editing it in the panel, or by dropping a file in the agents directory.

sourceant

Review complete. See the overview comment for a summary.

sourceant · 2026-07-23T13:07:18Z

+const authStore = useAuthStore();
+const canWrite = computed(() => authStore.hasPermission("settings:write"));
+
+const editorExtensions = [yaml(), oneDark];


Since agents are markdown files with instructions, using the markdown extension for Codemirror would provide better syntax highlighting for the body than the yaml extension, which is only strictly correct for the frontmatter section.

Suggested change

const editorExtensions = [yaml(), oneDark];

const editorExtensions = [markdown(), oneDark];

sourceant · 2026-07-23T13:07:18Z

+};
+
+const saveAgent = async () => {
+  const name = editingName.value || nameInput.value.trim();


Validating the agent name on the client side provides immediate feedback and prevents unnecessary API calls that would fail with a 400 error. It ensures the name matches the constraints mentioned in the input placeholder.

Suggested change

const name = editingName.value || nameInput.value.trim();

const name = editingName.value || nameInput.value.trim();

const nameRegex = /^[a-zA-Z0-9._-]+$/;

if (!name || !nameRegex.test(name)) {

notifications.warning("Invalid name", "Name must only contain letters, digits, dots, dashes, and underscores");

return;

}

sourceant · 2026-07-23T13:07:18Z

+assistant's tools; anything that changes state waits for approval.
+`;
+
+const openEditor = async (agent: AgentDefinition | null) => {


The modal only opens after the content is successfully fetched. On slower connections, the UI feels unresponsive between clicking 'Edit' and the modal appearing. It's better to open the modal immediately and show a loading state inside the editor.

Suggested change

const openEditor = async (agent: AgentDefinition | null) => {

const openEditor = async (agent: AgentDefinition | null) => {

editingName.value = agent?.name ?? null;

nameInput.value = "";

editorContent.value = editorTemplate;

editorOpen.value = true;

if (agent) {

try {

const { data } = await agentsApi.get(agent.name);

editorContent.value = data.content;

} catch (err: any) {

notifications.error("Error", err.response?.data?.error || "Failed to load agent");

editorOpen.value = false;

}

}

};

sourceant Bot reviewed Jul 23, 2026

View reviewed changes

nfebe force-pushed the feat/agent-runtimes branch from 6853127 to f405966 Compare July 23, 2026 12:36

nfebe changed the title ~~feat(ai): Add the Agent Runtimes view~~ feat(ai): Add the Agents view Jul 23, 2026

sourceant Bot reviewed Jul 23, 2026

View reviewed changes

nfebe force-pushed the feat/agent-runtimes branch from f405966 to 3b2df84 Compare July 23, 2026 12:42

sourceant Bot reviewed Jul 23, 2026

View reviewed changes

nfebe force-pushed the feat/agent-runtimes branch from 3b2df84 to 798fceb Compare July 23, 2026 13:06

sourceant Bot reviewed Jul 23, 2026

View reviewed changes

nfebe merged commit f588d3d into main Jul 23, 2026
5 checks passed

nfebe deleted the feat/agent-runtimes branch July 23, 2026 13:22

nfebe mentioned this pull request Jul 23, 2026

group(enhancements): Albacore flatrun/agent#158

Open

43 tasks

	<i class="pi pi-refresh" :class="{ 'pi-spin': loading }" />
	<Icon name="refresh" :class="{ 'pi-spin': loading }" :size="16" />

	<i class="pi pi-spin pi-spinner" />
	+ <Icon name="spinner" class="pi-spin" :size="20" />

-    assist.embedded = false;
++    await assist.loadSession(data.id);
++    assist.subject = agent.name;
++    assist.embedded = false;
++    assist.visible = true;

	const editorExtensions = [yaml(), oneDark];
	const editorExtensions = [markdown(), oneDark];

-  const name = editingName.value || nameInput.value.trim();
+  const name = editingName.value || nameInput.value.trim();
+  const nameRegex = /^[a-zA-Z0-9._-]+$/;
+  if (!name || !nameRegex.test(name)) {
+    notifications.warning("Invalid name", "Name must only contain letters, digits, dots, dashes, and underscores");
+    return;
+  }

-const openEditor = async (agent: AgentDefinition | null) => {
+const openEditor = async (agent: AgentDefinition | null) => {
+  editingName.value = agent?.name ?? null;
+  nameInput.value = "";
+  editorContent.value = editorTemplate;
+  editorOpen.value = true;
+  if (agent) {
+    try {
+      const { data } = await agentsApi.get(agent.name);
+      editorContent.value = data.content;
+    } catch (err: any) {
+      notifications.error("Error", err.response?.data?.error || "Failed to load agent");
+      editorOpen.value = false;
+    }
+  }
+};

Uh oh!

Conversation

nfebe commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sourceant Bot commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Summary

🚀 Key Improvements

💡 Minor Suggestions

Uh oh!

sourceant Bot left a comment

Choose a reason for hiding this comment

Uh oh!

sourceant Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying flatrun-ui with Cloudflare Pages

Uh oh!

sourceant Bot left a comment

Choose a reason for hiding this comment

Uh oh!

sourceant Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant Bot left a comment

Choose a reason for hiding this comment

Uh oh!

sourceant Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant Bot left a comment

Choose a reason for hiding this comment

Uh oh!

sourceant Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

sourceant Bot Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

nfebe commented Jul 23, 2026 •

edited

Loading

sourceant Bot commented Jul 23, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jul 23, 2026 •

edited

Loading