tmai 1.0.0

Tactful Multi Agent Interface - Monitor and control multiple AI coding agents
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

import { useState } from "react";
import {
  approveAgent,
  selectChoice,
  submitSelection,
  sendKey,
} from "../../api/client";
import type { Agent } from "../../types/agent";

interface ApprovalBarProps {
  agent: Agent;
}

export function ApprovalBar({ agent }: ApprovalBarProps) {
  const [sending, setSending] = useState(false);
  const [selected, setSelected] = useState<Set<number>>(new Set());

  if (agent.status.type !== "awaiting_approval") return null;

  const { approval_type, details, choices, multi_select } = agent.status;

  async function handleApprove() {
    setSending(true);
    try {
      await approveAgent(agent.id);
    } catch (err) {
      console.error("Approve failed:", err);
    } finally {
      setSending(false);
    }
  }

  async function handleChoice(idx: number) {
    if (multi_select) {
      // Toggle selection
      setSelected((prev) => {
        const next = new Set(prev);
        if (next.has(idx)) next.delete(idx);
        else next.add(idx);
        return next;
      });
      return;
    }
    setSending(true);
    try {
      await selectChoice(agent.id, idx);
    } catch (err) {
      console.error("Select failed:", err);
    } finally {
      setSending(false);
    }
  }

  async function handleSubmitSelection() {
    setSending(true);
    try {
      await submitSelection(agent.id, Array.from(selected));
    } catch (err) {
      console.error("Submit failed:", err);
    } finally {
      setSending(false);
    }
  }

  return (
    <div className="rounded-lg border border-yellow-300 bg-yellow-50 p-3 dark:border-yellow-800 dark:bg-yellow-950/30">
      {/* Details */}
      <div className="mb-2 text-sm text-yellow-800 dark:text-yellow-200">
        <span className="mr-2 font-semibold">[{approval_type}]</span>
        {details}
      </div>

      {/* Choices or approve button */}
      {choices && choices.length > 0 ? (
        <div className="flex flex-wrap gap-2">
          {choices.map((choice, idx) => (
            <button
              key={idx}
              onClick={() => handleChoice(idx)}
              disabled={sending}
              className={`rounded-md border px-3 py-1.5 text-sm transition-colors ${
                selected.has(idx)
                  ? "border-blue-500 bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200"
                  : "border-neutral-300 hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-600 dark:hover:bg-neutral-800"
              } disabled:opacity-40`}
            >
              {choice}
            </button>
          ))}
          {multi_select && (
            <button
              onClick={handleSubmitSelection}
              disabled={sending || selected.size === 0}
              className="rounded-md bg-green-700 px-4 py-1.5 text-sm font-medium text-white hover:bg-green-600 disabled:opacity-40"
            >
              Submit
            </button>
          )}
        </div>
      ) : (
        <div className="flex gap-2">
          <button
            onClick={handleApprove}
            disabled={sending}
            className="rounded-md bg-green-700 px-4 py-1.5 text-sm font-medium text-white hover:bg-green-600 disabled:opacity-40"
          >
            Approve
          </button>
          <button
            onClick={async () => {
              setSending(true);
              try {
                await sendKey(agent.id, "Escape");
              } catch (e) {
                console.error("Reject failed:", e);
              } finally {
                setSending(false);
              }
            }}
            disabled={sending}
            className="rounded-md border border-red-700 px-4 py-1.5 text-sm text-red-400 hover:bg-red-900/30 disabled:opacity-40"
          >
            Reject
          </button>
        </div>
      )}
    </div>
  );
}