stagent 0.1.0

package/src/components/notifications/message-response.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Send } from "lucide-react";
+
+export interface Question {
+  id?: string;
+  question: string;
+  header: string;
+  options?: { label: string; description: string }[];
+  multiSelect?: boolean;
+  isSecret?: boolean;
+}
+
+interface MessageResponseProps {
+  taskId: string;
+  notificationId: string;
+  toolInput: { questions: Question[] };
+  responded: boolean;
+  response: string | null;
+  onResponded: () => void;
+}
+
+export function MessageResponse({
+  taskId,
+  notificationId,
+  toolInput,
+  responded,
+  response,
+  onResponded,
+}: MessageResponseProps) {
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [otherTexts, setOtherTexts] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(false);
+
+  if (responded && response) {
+    return (
+      <span className="text-xs text-muted-foreground">Response sent</span>
+    );
+  }
+
+  const questions = toolInput?.questions ?? [];
+
+  function getAnswerKey(question: Question) {
+    return question.id ?? question.question;
+  }
+
+  function handleSingleSelect(questionKey: string, label: string) {
+    setAnswers((prev) => ({ ...prev, [questionKey]: label }));
+  }
+
+  function handleMultiSelect(
+    questionKey: string,
+    label: string,
+    checked: boolean
+  ) {
+    setAnswers((prev) => {
+      const current = prev[questionKey] ? prev[questionKey].split(", ") : [];
+      const next = checked
+        ? [...current, label]
+        : current.filter((l) => l !== label);
+      return { ...prev, [questionKey]: next.join(", ") };
+    });
+  }
+
+  async function handleSend() {
+    setLoading(true);
+    // Merge in "Other" text where applicable
+    const finalAnswers: Record<string, string> = {};
+    for (const q of questions) {
+      const questionKey = getAnswerKey(q);
+      const answer = answers[questionKey] ?? "";
+      if (answer === "__other__") {
+        finalAnswers[questionKey] = otherTexts[questionKey] ?? "";
+      } else {
+        finalAnswers[questionKey] = answer;
+      }
+    }
+
+    try {
+      await fetch(`/api/tasks/${taskId}/respond`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          notificationId,
+          behavior: "allow",
+          updatedInput: {
+            questions: toolInput.questions,
+            answers: finalAnswers,
+          },
+        }),
+      });
+      onResponded();
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="space-y-4 mt-2">
+      {questions.map((q) => (
+        <div key={getAnswerKey(q)} className="space-y-2">
+          <p className="text-sm font-medium">{q.question}</p>
+          {(q.multiSelect ?? false) ? (
+            <div className="space-y-2">
+              {(q.options ?? []).map((opt) => (
+                <div key={opt.label} className="flex items-center gap-2">
+                  <Checkbox
+                    id={`${getAnswerKey(q)}-${opt.label}`}
+                    onCheckedChange={(checked) =>
+                      handleMultiSelect(getAnswerKey(q), opt.label, checked as boolean)
+                    }
+                  />
+                  <Label
+                    htmlFor={`${getAnswerKey(q)}-${opt.label}`}
+                    className="text-sm"
+                  >
+                    {opt.label}
+                    <span className="text-muted-foreground ml-1">
+                      — {opt.description}
+                    </span>
+                  </Label>
+                </div>
+              ))}
+            </div>
+          ) : (q.options ?? []).length === 0 ? (
+            <Input
+              type={q.isSecret ? "password" : "text"}
+              value={answers[getAnswerKey(q)] ?? ""}
+              onChange={(e) =>
+                setAnswers((prev) => ({
+                  ...prev,
+                  [getAnswerKey(q)]: e.target.value,
+                }))
+              }
+              placeholder="Type your answer"
+              className="h-8 text-sm"
+            />
+          ) : (
+            <RadioGroup
+              value={answers[getAnswerKey(q)] ?? ""}
+              onValueChange={(val) => handleSingleSelect(getAnswerKey(q), val)}
+            >
+              {(q.options ?? []).map((opt) => (
+                <div key={opt.label} className="flex items-center gap-2">
+                  <RadioGroupItem
+                    value={opt.label}
+                    id={`${getAnswerKey(q)}-${opt.label}`}
+                  />
+                  <Label
+                    htmlFor={`${getAnswerKey(q)}-${opt.label}`}
+                    className="text-sm"
+                  >
+                    {opt.label}
+                    <span className="text-muted-foreground ml-1">
+                      — {opt.description}
+                    </span>
+                  </Label>
+                </div>
+              ))}
+              <div className="flex items-center gap-2">
+                <RadioGroupItem value="__other__" id={`${getAnswerKey(q)}-other`} />
+                <Label htmlFor={`${getAnswerKey(q)}-other`} className="text-sm">
+                  Other
+                </Label>
+                {answers[getAnswerKey(q)] === "__other__" && (
+                  <Input
+                    type={q.isSecret ? "password" : "text"}
+                    value={otherTexts[getAnswerKey(q)] ?? ""}
+                    onChange={(e) =>
+                      setOtherTexts((prev) => ({
+                        ...prev,
+                        [getAnswerKey(q)]: e.target.value,
+                      }))
+                    }
+                    placeholder="Type your answer"
+                    className="h-7 text-sm"
+                  />
+                )}
+              </div>
+            </RadioGroup>
+          )}
+        </div>
+      ))}
+      <Button size="sm" onClick={handleSend} disabled={loading}>
+        <Send className="h-3.5 w-3.5 mr-1" />
+        Send
+      </Button>
+    </div>
+  );
+}

package/src/components/notifications/notification-item.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { Shield, MessageCircle, CheckCircle, XCircle, Eye, EyeOff, Trash2, Wallet } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { PermissionAction } from "./permission-action";
+import { MessageResponse, type Question } from "./message-response";
+import { FailureAction } from "./failure-action";
+import { formatTimestamp } from "@/lib/utils/format-timestamp";
+import {
+  buildPermissionSummary,
+  parseNotificationToolInput,
+  type PermissionToolInput,
+} from "@/lib/notifications/permissions";
+
+interface Notification {
+  id: string;
+  taskId: string | null;
+  type: string;
+  title: string;
+  body: string | null;
+  read: boolean;
+  toolName: string | null;
+  toolInput: string | null;
+  response: string | null;
+  respondedAt: string | null;
+  createdAt: string;
+}
+
+interface NotificationItemProps {
+  notification: Notification;
+  onUpdated: () => void;
+}
+
+const typeIcons: Record<string, React.ReactNode> = {
+  permission_required: <Shield className="h-4 w-4 text-chart-5" aria-hidden="true" />,
+  agent_message: <MessageCircle className="h-4 w-4 text-primary" aria-hidden="true" />,
+  task_completed: <CheckCircle className="h-4 w-4 text-chart-2" aria-hidden="true" />,
+  task_failed: <XCircle className="h-4 w-4 text-destructive" aria-hidden="true" />,
+  budget_alert: <Wallet className="h-4 w-4 text-status-warning" aria-hidden="true" />,
+};
+
+const typeLabels: Record<string, string> = {
+  permission_required: "Permission required",
+  agent_message: "Agent message",
+  task_completed: "Task completed",
+  task_failed: "Task failed",
+  budget_alert: "Budget alert",
+};
+
+function formatToolInput(
+  toolName: string | null,
+  input: PermissionToolInput
+): React.ReactNode {
+  // AskUserQuestion — show the question text directly
+  if (toolName === "AskUserQuestion" || toolName === "ask_user_question") {
+    const question = input.question ?? input.text ?? input.message;
+    if (typeof question === "string") {
+      return <p>{question}</p>;
+    }
+  }
+
+  // Bash/shell — show the command
+  if (toolName === "Bash" || toolName === "bash") {
+    const cmd = input.command ?? input.cmd;
+    if (typeof cmd === "string") {
+      return <code className="text-xs font-mono break-all">{cmd}</code>;
+    }
+  }
+
+  // Read/Write — show the file path
+  if (toolName === "Read" || toolName === "Write" || toolName === "Edit") {
+    const path = input.file_path ?? input.path;
+    if (typeof path === "string") {
+      return <span>File: <code className="text-xs font-mono">{path}</code></span>;
+    }
+  }
+
+  // Fallback: show key-value pairs in a readable format
+  const entries = Object.entries(input).slice(0, 4);
+  if (entries.length === 0) return null;
+
+  return (
+    <dl className="text-xs space-y-0.5">
+      {entries.map(([key, val]) => (
+        <div key={key} className="flex gap-2">
+          <dt className="font-medium shrink-0">{key}:</dt>
+          <dd className="truncate">{typeof val === "string" ? val : JSON.stringify(val)}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+export function NotificationItem({ notification, onUpdated }: NotificationItemProps) {
+  const [toggling, setToggling] = useState(false);
+  const [dismissing, setDismissing] = useState(false);
+  const isUnread = !notification.read;
+  const hasResponse = !!notification.response;
+  const parsedToolInput = parseNotificationToolInput(notification.toolInput);
+
+  async function toggleRead() {
+    setToggling(true);
+    try {
+      await fetch(`/api/notifications/${notification.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ read: !notification.read }),
+      });
+      onUpdated();
+    } finally {
+      setToggling(false);
+    }
+  }
+
+  async function dismiss() {
+    setDismissing(true);
+    try {
+      await fetch(`/api/notifications/${notification.id}`, {
+        method: "DELETE",
+      });
+      onUpdated();
+    } finally {
+      setDismissing(false);
+    }
+  }
+
+  return (
+    <Card
+      className={`p-4 ${
+        isUnread
+          ? "surface-card border-l-4 border-l-primary"
+          : "surface-card-muted"
+      }`}
+      role="article"
+      aria-label={`${typeLabels[notification.type] ?? "Notification"}: ${notification.title}${isUnread ? " (unread)" : ""}`}
+    >
+      <div className="flex items-start gap-3">
+        <div className="mt-0.5">{typeIcons[notification.type]}</div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1">
+            <h4
+              className={`text-sm ${isUnread ? "font-semibold" : "font-normal"}`}
+            >
+              {notification.title}
+            </h4>
+            {hasResponse && (
+              <Badge variant="secondary" className="text-xs">
+                Responded
+              </Badge>
+            )}
+          </div>
+
+          {/* Tool name for permission requests */}
+          {notification.type === "permission_required" && notification.toolName && (
+            <div className="mb-2">
+              <Badge variant="outline" className="text-xs font-mono">
+                {notification.toolName}
+              </Badge>
+              {parsedToolInput && (
+                <div className="text-sm text-muted-foreground bg-muted/60 p-2 rounded mt-1">
+                  <p className="mb-1 font-medium text-foreground">
+                    {buildPermissionSummary(notification.toolName, parsedToolInput)}
+                  </p>
+                  {formatToolInput(notification.toolName, parsedToolInput)}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Body for non-tool notifications */}
+          {notification.body &&
+            notification.type !== "permission_required" &&
+            notification.type !== "agent_message" && (
+              <p className="text-sm text-muted-foreground line-clamp-3">
+                {notification.body}
+              </p>
+            )}
+
+          {/* Actions based on type */}
+          {notification.type === "permission_required" &&
+            notification.taskId &&
+            parsedToolInput && (
+              <PermissionAction
+                taskId={notification.taskId}
+                notificationId={notification.id}
+                toolName={notification.toolName ?? ""}
+                toolInput={parsedToolInput}
+                responded={hasResponse}
+                response={notification.response}
+                onResponded={onUpdated}
+              />
+            )}
+
+          {notification.type === "agent_message" &&
+            notification.taskId &&
+            parsedToolInput && (
+              <MessageResponse
+                taskId={notification.taskId}
+                notificationId={notification.id}
+                toolInput={parsedToolInput as { questions: Question[] }}
+                responded={hasResponse}
+                response={notification.response}
+                onResponded={onUpdated}
+              />
+            )}
+
+          {notification.type === "task_failed" && notification.taskId && (
+            <FailureAction taskId={notification.taskId} onRetried={onUpdated} />
+          )}
+
+          <p className="text-xs text-muted-foreground mt-2">
+            {formatTimestamp(notification.createdAt)}
+            {notification.respondedAt && (
+              <span>
+                {" "}
+                · Responded{" "}
+                {formatTimestamp(notification.respondedAt)}
+              </span>
+            )}
+          </p>
+        </div>
+        <div className="flex flex-col gap-1 shrink-0">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={toggleRead}
+            disabled={toggling}
+            aria-label={isUnread ? "Mark as read" : "Mark as unread"}
+          >
+            {isUnread ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-muted-foreground hover:text-destructive"
+            onClick={dismiss}
+            disabled={dismissing}
+            aria-label="Dismiss notification"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+}