Implement fins and some other updates

src/App.tsx

@@ -6,6 +6,8 @@ import { NotFoundPage } from "./pages/NotFoundPage";
 import { PlaceholderPage } from "./pages/PlaceholderPage";
 import { MainPage } from "./pages/main-page/MainPage";
 import { SettingsPage } from "./pages/main-page/SettingsPage";
+import { FinDetailPage } from "./pages/main-page/fins-page/fin-detail-page/FinDetailPage";
+import { FinsPage } from "./pages/main-page/fins-page/FinsPage";
 import { ExecutionDetailPage } from "./pages/main-page/monitoring-page/ExecutionDetailPage";
 import { MonitoringPage } from "./pages/main-page/monitoring-page/MonitoringPage";
 import { PlaybookCreatePage } from "./pages/main-page/playbooks-page/PlaybookCreatePage";
@@ -39,6 +41,8 @@ function App() {
             path={PATHS.MONITORING.DETAIL}
             element={<ExecutionDetailPage />}
           />
+          <Route path={PATHS.FINS.BASE} element={<FinsPage />} />
+          <Route path={PATHS.FINS.DETAIL} element={<FinDetailPage />} />
           <Route path={PATHS.SETTINGS} element={<SettingsPage />} />
         </Route>
         <Route path="*" element={<Navigate to={PATHS.NOT_FOUND} replace />} />

src/api/fin.ts

@@ -0,0 +1,13 @@
+import { Fin, FinListResponse } from "@/types";
+import { deleteToApi, fetchFromApi } from "./utils";
+
+export const getFins = async (): Promise<Fin[]> => {
+  const response = await fetchFromApi<FinListResponse>(`/api/fin/`);
+  return response.fins;
+};
+
+export const getFinById = (finId: string) =>
+  fetchFromApi<Fin>(`/api/fin/${finId}`);
+
+export const deleteFin = (finId: string) =>
+  deleteToApi(`/api/fin/${finId}`);

src/api/manual.ts

@@ -1,16 +1,20 @@
 import {
-  Execution,
+  RunStarted,
   InteractionCommandData,
   ManualOutArgsUpdatePayload,
 } from "@/types";
 import { fetchFromApi, HttpMutationMethod, mutationToApi } from "./utils";
 
-export const postStepActionResult = (data: ManualOutArgsUpdatePayload) =>
-  mutationToApi<Execution>(
-    HttpMutationMethod.POST,
-    `/api/manual/continue`,
+export const putStepActionResult = (
+  runId: string,
+  stepRunId: string,
+  data: ManualOutArgsUpdatePayload,
+) =>
+  mutationToApi<RunStarted>(
+    HttpMutationMethod.PUT,
+    `/api/manual/${runId}/${stepRunId}`,
     data,
   );
 
-export const getStepManualData = (executionId: string, stepId: string) =>
-  fetchFromApi<InteractionCommandData>(`/api/manual/${executionId}/${stepId}`);
+export const getStepManualData = (runId: string, stepRunId: string) =>
+  fetchFromApi<InteractionCommandData>(`/api/manual/${runId}/${stepRunId}`);

src/api/reporter.ts

@@ -1,8 +1,8 @@
-import { PlaybookExecutionReport } from "@/types";
+import { PlaybookRunReport } from "@/types";
 import { fetchFromApi } from "./utils";
 
 export const getReporterState = () =>
-  fetchFromApi<PlaybookExecutionReport[]>(`/api/reporter/`);
+  fetchFromApi<PlaybookRunReport[]>(`/api/reporter/`);
 
-export const getReportOfExecutionById = (executionId: string) =>
-  fetchFromApi<PlaybookExecutionReport>(`/api/reporter/${executionId}`);
+export const getReportOfExecutionById = (runId: string) =>
+  fetchFromApi<PlaybookRunReport>(`/api/reporter/${runId}`);

src/api/trigger.ts

@@ -1,11 +1,11 @@
-import { Execution, Variables } from "@/types";
+import { RunStarted, Variables } from "@/types";
 import { HttpMutationMethod, mutationToApi } from "./utils";
 
 export const triggerPlaybookById = (
   playbookId: string,
   variables?: Variables,
 ) => {
-  return mutationToApi<Execution>(
+  return mutationToApi<RunStarted>(
     HttpMutationMethod.POST,
     `/api/trigger/playbook/${playbookId}`,
     variables ?? {},

src/pages/main-page/MainPage.tsx

@@ -1,6 +1,7 @@
 import {
   Activity,
   BookOpen,
+  Cable,
   FilePlusCorner,
   Home,
   LayoutDashboard,
@@ -59,6 +60,7 @@ const NAV_ROUTES: NavRoute[] = [
     icon: LayoutDashboard,
   },
   { path: PATHS.MONITORING.BASE, label: "Monitoring", icon: Activity },
+  { path: PATHS.FINS.BASE, label: "Fins", icon: Cable },
   { path: PATHS.SETTINGS, label: "Settings (Beta)", icon: Settings },
 ];
 
@@ -107,7 +109,9 @@ export const MainPage: React.FC = () => {
                 (route.path === PATHS.MONITORING.BASE &&
                   location.pathname.includes(PATHS.MONITORING.BASE)) ||
                 (route.path === PATHS.PLAYBOOKS.BASE &&
-                  location.pathname.includes(PATHS.PLAYBOOKS.BASE))
+                  location.pathname.includes(PATHS.PLAYBOOKS.BASE)) ||
+                (route.path === PATHS.FINS.BASE &&
+                  location.pathname.includes(PATHS.FINS.BASE))
               }
               onClick={() => handleNavigation(route.path)}
             >

src/pages/main-page/fins-page/FinsPage.tsx

@@ -0,0 +1,104 @@
+import { useQuery } from "@tanstack/react-query";
+import React from "react";
+import { useNavigate } from "react-router";
+
+import { getFins } from "@/api/fin";
+import { getErrorFromApiResponse } from "@/api/utils";
+import {
+  Badge,
+  CardBody,
+  CardContainer,
+  CardHeader,
+  CardTitle,
+  Cell,
+  CenteredCardContent,
+  HeaderCell,
+  Row,
+  Spacer,
+  Spinner,
+  Table,
+  TableBody,
+  TableHead,
+  Text,
+} from "@/components";
+import { ThemeSize, ThemeVariant } from "@/components/utils";
+import { Fin } from "@/types";
+import { formatDateTime, PATHS, sortByString } from "@/utils";
+
+export const FinsPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ["fins"],
+    queryFn: getFins,
+    refetchInterval: 5000,
+    refetchOnWindowFocus: false,
+  });
+
+  const fins: Fin[] = sortByString(
+    [...(data || [])],
+    (fin) => fin.display_name || fin.fin_id,
+  );
+  const parsedError = getErrorFromApiResponse(error);
+
+  const navigateToDetail = (finId: string) => {
+    navigate(PATHS.FINS.DETAIL.replace(":finId", finId));
+  };
+
+  const renderBody = () => {
+    if (isLoading)
+      return (
+        <CenteredCardContent>
+          <Spinner $size={ThemeSize.Large} />
+        </CenteredCardContent>
+      );
+    if (isError)
+      return <Text>{parsedError?.message || "Could not load fins"}</Text>;
+    if (fins.length === 0)
+      return <Text>No fins are currently registered.</Text>;
+    return (
+      <Table>
+        <TableHead>
+          <tr>
+            <HeaderCell>Display name</HeaderCell>
+            <HeaderCell>Capabilities</HeaderCell>
+            <HeaderCell>Protocol version</HeaderCell>
+            <HeaderCell>Registered</HeaderCell>
+            <HeaderCell>Last seen</HeaderCell>
+          </tr>
+        </TableHead>
+        <TableBody>
+          {fins.map((fin) => (
+            <Row
+              key={fin.fin_id}
+              $isClickable
+              onClick={() => navigateToDetail(fin.fin_id)}
+            >
+              <Cell>{fin.display_name || fin.fin_id}</Cell>
+              <Cell>
+                <Spacer $direction="horizontal" $gap="xs" $wrap>
+                  {fin.capabilities.map((capability) => (
+                    <Badge key={capability.type} $variant={ThemeVariant.Info}>
+                      {capability.type}
+                    </Badge>
+                  ))}
+                </Spacer>
+              </Cell>
+              <Cell>{fin.protocol_version || "—"}</Cell>
+              <Cell>{formatDateTime(fin.registered_at)}</Cell>
+              <Cell>{formatDateTime(fin.last_seen)}</Cell>
+            </Row>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  };
+
+  return (
+    <CardContainer>
+      <CardHeader>
+        <CardTitle>Registered fins ({fins.length})</CardTitle>
+      </CardHeader>
+      <CardBody>{renderBody()}</CardBody>
+    </CardContainer>
+  );
+};

src/pages/main-page/fins-page/fin-detail-page/FinDetailPage.styles.tsx

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+export const DetailsGrid = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: ${({ theme }) => theme.spacing.lg};
+`;
+
+export const DetailsItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.sm};
+  align-items: flex-start;
+`;
+
+export const CapabilityCard = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding: ${({ theme }) => theme.spacing.md};
+
+  border: 1px solid ${({ theme }) => theme.colors.border.light};
+  border-radius: ${({ theme }) => theme.radius.md};
+`;
+
+export const CapabilityHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing.sm};
+`;
+
+export const StepExamplesList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.md};
+  margin-top: ${({ theme }) => theme.spacing.md};
+`;
+
+export const CodeBlock = styled.pre`
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: ${({ theme }) => theme.spacing.md};
+
+  border-radius: ${({ theme }) => theme.radius.md};
+  background-color: ${({ theme }) => theme.colors.background.secondary};
+  color: ${({ theme }) => theme.colors.text.primary};
+  font: ${({ theme }) => theme.typography.code_small.font};
+
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+`;