Implement human-in-the-loop functionality

src/common/HITLSettings/CheckpointItem.tsx

@@ -0,0 +1,43 @@
+import { DeleteIcon, EditIcon } from "@chakra-ui/icons";
+import { Box, Text, Flex, IconButton, Tooltip } from "@chakra-ui/react";
+import type { CheckpointRule } from "../../helpers/hitl";
+
+type CheckpointItemProps = {
+  rule: CheckpointRule;
+  onEdit: (rule: CheckpointRule) => void;
+  onDelete: (id: string) => void;
+};
+
+const CheckpointItem = ({ rule, onEdit, onDelete }: CheckpointItemProps) => {
+  return (
+    <Box w="full" p={4} borderWidth="1px" borderRadius="lg">
+      <Flex alignItems="flex-start">
+        <Box flex="1">
+          <Text fontWeight="bold">{rule.description}</Text>
+        </Box>
+        <Box>
+          <Tooltip label="Edit checkpoint">
+            <IconButton
+              aria-label="Edit checkpoint"
+              icon={<EditIcon />}
+              size="sm"
+              variant="ghost"
+              onClick={() => onEdit(rule)}
+            />
+          </Tooltip>
+          <Tooltip label="Remove checkpoint">
+            <IconButton
+              aria-label="Remove checkpoint"
+              icon={<DeleteIcon />}
+              size="sm"
+              variant="ghost"
+              onClick={() => onDelete(rule.id)}
+            />
+          </Tooltip>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default CheckpointItem;

src/common/HITLSettings/NewHITLForm.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  FormControl,
+  FormLabel,
+  Input,
+  Button,
+  VStack,
+} from "@chakra-ui/react";
+
+type NewHITLFormProps = {
+  isOpen: boolean;
+  isEditMode: boolean;
+  editRule?: {
+    id: string;
+    description: string;
+  };
+  closeForm: () => void;
+  onSave: (rule: { description: string }) => void;
+};
+
+const NewHITLForm: React.FC<NewHITLFormProps> = ({
+  isOpen,
+  isEditMode,
+  editRule,
+  closeForm,
+  onSave,
+}) => {
+  const [description, setDescription] = useState(editRule?.description || "");
+
+  const handleSubmit = () => {
+    if (!description) return;
+    onSave({ description });
+    setDescription("");
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={closeForm} size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          {isEditMode ? "Edit Safety Checkpoint" : "Add Safety Checkpoint"}
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <VStack spacing={4} pb={4}>
+            <FormControl isRequired>
+              <FormLabel>Description</FormLabel>
+              <Input
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="e.g., Confirm before posting a Tweet"
+              />
+            </FormControl>
+            <Button colorScheme="blue" w="full" onClick={handleSubmit}>
+              {isEditMode ? "Update" : "Add"} Checkpoint
+            </Button>
+          </VStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default NewHITLForm;

src/common/HITLSettings/index.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import { Button, Text, VStack, Alert, AlertIcon } from "@chakra-ui/react";
+import { useAppState } from "../../state/store";
+import NewHITLForm from "./NewHITLForm";
+import CheckpointItem from "./CheckpointItem";
+import type { CheckpointRule } from "../../helpers/hitl";
+
+const HITLSettings = () => {
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [editRule, setEditRule] = useState<CheckpointRule | undefined>(
+    undefined,
+  );
+
+  const { hitlRules, updateSettings } = useAppState((state) => ({
+    hitlRules: state.settings.hitlRules,
+    updateSettings: state.settings.actions.update,
+  }));
+
+  const closeForm = () => {
+    setEditRule(undefined);
+    setIsFormOpen(false);
+  };
+
+  const handleSaveRule = (rule: Omit<CheckpointRule, "id">) => {
+    if (editRule) {
+      // Update existing rule
+      const updatedRules = hitlRules.map((r) =>
+        r.id === editRule.id ? { ...rule, id: editRule.id } : r,
+      ) as CheckpointRule[];
+      updateSettings({ hitlRules: updatedRules });
+    } else {
+      // Add new rule
+      const newRule: CheckpointRule = {
+        ...rule,
+        id: crypto.randomUUID(),
+      };
+      updateSettings({ hitlRules: [...hitlRules, newRule] });
+    }
+    closeForm();
+  };
+
+  const handleDeleteRule = (id: string) => {
+    const updatedRules = hitlRules.filter((rule) => rule.id !== id);
+    updateSettings({ hitlRules: updatedRules });
+  };
+
+  const openEditForm = (rule: CheckpointRule) => {
+    setEditRule(rule);
+    setIsFormOpen(true);
+  };
+
+  return (
+    <VStack spacing={4}>
+      <Alert status="info" borderRadius="md">
+        <AlertIcon />
+        <Text>
+          {" "}
+          Add checkpoints to make Fuji ask for your permission before performing
+          certain actions.
+        </Text>
+      </Alert>
+      {hitlRules.length > 0 ? (
+        hitlRules.map((rule) => (
+          <CheckpointItem
+            key={rule.id}
+            rule={rule}
+            onEdit={openEditForm}
+            onDelete={handleDeleteRule}
+          />
+        ))
+      ) : (
+        <Text>No safety checkpoints configured</Text>
+      )}
+      <Button onClick={() => setIsFormOpen(true)}>Add Safety Checkpoint</Button>
+      {isFormOpen && (
+        <NewHITLForm
+          isOpen={isFormOpen}
+          isEditMode={!!editRule}
+          editRule={editRule}
+          closeForm={closeForm}
+          onSave={handleSaveRule}
+        />
+      )}
+    </VStack>
+  );
+};
+
+export default HITLSettings;

src/common/Settings.tsx

@@ -26,6 +26,7 @@ import ModelDropdown from "./settings/ModelDropdown";
 import AgentModeDropdown from "./settings/AgentModeDropdown";
 import { callRPC } from "../helpers/rpc/pageRPC";
 import CustomKnowledgeBase from "./CustomKnowledgeBase";
+import HITLSettings from "./HITLSettings";
 import SetAPIKey from "./settings/SetAPIKey";
 import { debugMode } from "../constants";
 import { isValidModelSettings } from "../helpers/aiSdkUtils";
@@ -35,7 +36,7 @@ type SettingsProps = {
 };
 
 const Settings = ({ setInSettingsView }: SettingsProps) => {
-  const [view, setView] = useState<"settings" | "knowledge" | "api">(
+  const [view, setView] = useState<"settings" | "knowledge" | "api" | "hitl">(
     "settings",
   );
   const state = useAppState((state) => ({
@@ -53,6 +54,7 @@ const Settings = ({ setInSettingsView }: SettingsProps) => {
 
   const closeSetting = () => setInSettingsView(false);
   const openCKB = () => setView("knowledge");
+  const openHITL = () => setView("hitl");
   const backToSettings = () => setView("settings");
 
   async function checkMicrophonePermission(): Promise<PermissionState> {
@@ -118,6 +120,11 @@ const Settings = ({ setInSettingsView }: SettingsProps) => {
               <BreadcrumbLink href="#">API</BreadcrumbLink>
             </BreadcrumbItem>
           )}
+          {view === "hitl" && (
+            <BreadcrumbItem isCurrentPage>
+              <BreadcrumbLink href="#">Checkpoints</BreadcrumbLink>
+            </BreadcrumbItem>
+          )}
         </Breadcrumb>
       </HStack>
       {view === "knowledge" && <CustomKnowledgeBase />}
@@ -129,6 +136,7 @@ const Settings = ({ setInSettingsView }: SettingsProps) => {
           onClose={backToSettings}
         />
       )}
+      {view === "hitl" && <HITLSettings />}
       {view === "settings" && (
         <FormControl
           as={VStack}
@@ -225,6 +233,18 @@ const Settings = ({ setInSettingsView }: SettingsProps) => {
               Edit
             </Button>
           </Flex>
+          <Flex alignItems="center">
+            <Box>
+              <FormLabel mb="0">Safety Checkpoints</FormLabel>
+              <FormHelperText>
+                Define actions that require your approval
+              </FormHelperText>
+            </Box>
+            <Spacer />
+            <Button rightIcon={<EditIcon />} onClick={openHITL}>
+              Edit
+            </Button>
+          </Flex>
         </FormControl>
       )}
     </>

src/common/TaskHistory.tsx

@@ -16,6 +16,8 @@ import {
   Spacer,
   ColorProps,
   BackgroundProps,
+  Text,
+  Button,
 } from "@chakra-ui/react";
 import { TaskHistoryEntry } from "../state/currentTask";
 import { BsSortNumericDown, BsSortNumericUp } from "react-icons/bs";
@@ -75,7 +77,8 @@ const CollapsibleComponent = (props: {
       <AccordionButton>
         <HStack flex="1">
           <Box>{props.title}</Box>
-          <CopyButton text={props.text} /> <Spacer />
+          <CopyButton text={props.text} />
+          <Spacer />
           {props.subtitle && (
             <Box as="span" fontSize="xs" color="gray.500" mr={4}>
               {props.subtitle}
@@ -153,6 +156,50 @@ const TaskHistoryItem = ({ index, entry }: TaskHistoryItemProps) => {
   );
 };
 
+const PendingApprovalItem = () => {
+  const { isPendingApproval, proposedAction, setUserDecision } = useAppState(
+    (state) => state.hitl,
+  );
+
+  if (!isPendingApproval || !proposedAction) return null;
+
+  return (
+    <Box
+      border="2px solid"
+      borderColor="yellow.400"
+      p="4"
+      backgroundColor="yellow.50"
+      mb={4}
+    >
+      <VStack align="stretch" spacing={4}>
+        <HStack>
+          <Box mr="4" fontWeight="bold">
+            ⚠️
+          </Box>
+          <Text fontWeight="medium">Action requires approval</Text>
+        </HStack>
+        <Text fontSize="sm">{proposedAction.thought}</Text>
+        <HStack justify="end" spacing={2}>
+          <Button
+            size="sm"
+            colorScheme="red"
+            onClick={() => setUserDecision("reject")}
+          >
+            Reject
+          </Button>
+          <Button
+            size="sm"
+            colorScheme="green"
+            onClick={() => setUserDecision("approve")}
+          >
+            Approve
+          </Button>
+        </HStack>
+      </VStack>
+    </Box>
+  );
+};
+
 export default function TaskHistory() {
   const { taskHistory, taskStatus } = useAppState((state) => ({
     taskStatus: state.currentTask.status,
@@ -164,16 +211,25 @@ export default function TaskHistory() {
   };
 
   if (taskHistory.length === 0 && taskStatus !== "running") return null;
+
+  // Build the basic history items
   const historyItems = taskHistory.map((entry, index) => (
     <TaskHistoryItem key={index} index={index} entry={entry} />
   ));
+
+  // Insert matched notes at the top
   historyItems.unshift(<MatchedNotes key="matched-notes" />);
+
+  // Reverse if needed
   if (!sortNumericDown) {
     historyItems.reverse();
   }
 
   return (
-    <VStack mt={8}>
+    <VStack mt={8} align="stretch">
+      {/* Pending approval item goes above the heading */}
+      <PendingApprovalItem />
+
       <HStack w="full">
         <Heading as="h3" size="md">
           Action History