@agentprojectcontext/apx 1.57.0 → 1.58.0

package/src/interfaces/web/src/components/files/MarkdownPreview.tsx

@@ -0,0 +1,146 @@
+import { Fragment, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+// A small, dependency-free markdown renderer. We deliberately avoid
+// react-markdown/marked (no installers per project rules) and never use
+// dangerouslySetInnerHTML — every node is a real React element, so untrusted
+// document content can't inject markup. Coverage is the common subset:
+// headings, fenced/inline code, bold/italic/links, blockquotes, hr, and
+// ordered/unordered lists. Anything else renders as plain paragraphs.
+
+// ── Inline: bold, italic, code, links ──────────────────────────────────────
+function renderInline(text: string, keyBase: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  // One regex, alternation ordered so `**` beats `*`. Groups capture the inner.
+  const re = /(\*\*([^*]+)\*\*)|(\*([^*]+)\*)|(`([^`]+)`)|(\[([^\]]+)\]\(([^)]+)\))/g;
+  let last = 0;
+  let m: RegExpExecArray | null;
+  let i = 0;
+  while ((m = re.exec(text))) {
+    if (m.index > last) out.push(<Fragment key={`${keyBase}-t${i}`}>{text.slice(last, m.index)}</Fragment>);
+    if (m[2] !== undefined) out.push(<strong key={`${keyBase}-b${i}`}>{m[2]}</strong>);
+    else if (m[4] !== undefined) out.push(<em key={`${keyBase}-i${i}`}>{m[4]}</em>);
+    else if (m[6] !== undefined)
+      out.push(<code key={`${keyBase}-c${i}`} className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]">{m[6]}</code>);
+    else if (m[8] !== undefined)
+      out.push(
+        <a key={`${keyBase}-l${i}`} href={m[9]} target="_blank" rel="noreferrer" className="text-sky-500 underline underline-offset-2 hover:text-sky-400">
+          {m[8]}
+        </a>,
+      );
+    last = re.lastIndex;
+    i += 1;
+  }
+  if (last < text.length) out.push(<Fragment key={`${keyBase}-tend`}>{text.slice(last)}</Fragment>);
+  return out;
+}
+
+// ── Block-level ─────────────────────────────────────────────────────────────
+export function MarkdownPreview({ content, className }: { content: string; className?: string }) {
+  const lines = content.replace(/\r\n/g, "\n").split("\n");
+  const blocks: ReactNode[] = [];
+  let i = 0;
+  let key = 0;
+
+  const flushList = (items: string[], ordered: boolean) => {
+    const Tag = ordered ? "ol" : "ul";
+    blocks.push(
+      <Tag key={`k${key++}`} className={cn("my-2 space-y-1 pl-5", ordered ? "list-decimal" : "list-disc")}>
+        {items.map((it, idx) => (
+          <li key={idx}>{renderInline(it, `li${key}-${idx}`)}</li>
+        ))}
+      </Tag>,
+    );
+  };
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Fenced code block.
+    if (/^```/.test(line.trim())) {
+      const buf: string[] = [];
+      i += 1;
+      while (i < lines.length && !/^```/.test(lines[i].trim())) buf.push(lines[i++]);
+      i += 1; // closing fence
+      blocks.push(
+        <pre key={`k${key++}`} className="my-2 overflow-x-auto rounded-lg bg-muted/60 p-3 font-mono text-[12px] leading-[1.6]">
+          <code>{buf.join("\n")}</code>
+        </pre>,
+      );
+      continue;
+    }
+
+    // Blank line.
+    if (line.trim() === "") { i += 1; continue; }
+
+    // Headings.
+    const h = line.match(/^(#{1,6})\s+(.*)$/);
+    if (h) {
+      const level = h[1].length;
+      const sizes = ["text-2xl", "text-xl", "text-lg", "text-base", "text-sm", "text-sm"];
+      blocks.push(
+        <div key={`k${key++}`} className={cn("mt-3 mb-1 font-semibold text-foreground", sizes[level - 1])}>
+          {renderInline(h[2], `h${key}`)}
+        </div>,
+      );
+      i += 1;
+      continue;
+    }
+
+    // Horizontal rule.
+    if (/^(-{3,}|\*{3,}|_{3,})$/.test(line.trim())) {
+      blocks.push(<hr key={`k${key++}`} className="my-3 border-border" />);
+      i += 1;
+      continue;
+    }
+
+    // Blockquote.
+    if (/^>\s?/.test(line)) {
+      const buf: string[] = [];
+      while (i < lines.length && /^>\s?/.test(lines[i])) buf.push(lines[i++].replace(/^>\s?/, ""));
+      blocks.push(
+        <blockquote key={`k${key++}`} className="my-2 border-l-2 border-border pl-3 text-muted-foreground">
+          {renderInline(buf.join(" "), `q${key}`)}
+        </blockquote>,
+      );
+      continue;
+    }
+
+    // Unordered list.
+    if (/^\s*[-*+]\s+/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^\s*[-*+]\s+/.test(lines[i])) items.push(lines[i++].replace(/^\s*[-*+]\s+/, ""));
+      flushList(items, false);
+      continue;
+    }
+
+    // Ordered list.
+    if (/^\s*\d+\.\s+/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) items.push(lines[i++].replace(/^\s*\d+\.\s+/, ""));
+      flushList(items, true);
+      continue;
+    }
+
+    // Paragraph (gather consecutive non-blank, non-structural lines).
+    const para: string[] = [];
+    while (
+      i < lines.length &&
+      lines[i].trim() !== "" &&
+      !/^(#{1,6})\s/.test(lines[i]) &&
+      !/^```/.test(lines[i].trim()) &&
+      !/^>\s?/.test(lines[i]) &&
+      !/^\s*[-*+]\s+/.test(lines[i]) &&
+      !/^\s*\d+\.\s+/.test(lines[i])
+    ) {
+      para.push(lines[i++]);
+    }
+    blocks.push(
+      <p key={`k${key++}`} className="my-2 leading-relaxed">
+        {renderInline(para.join(" "), `p${key}`)}
+      </p>,
+    );
+  }
+
+  return <div className={cn("text-sm text-foreground/90", className)}>{blocks}</div>;
+}

package/src/interfaces/web/src/components/files/NewFileDialog.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { Dialog, Button, Field, Input } from "../ui";
+import { useToast } from "../Toast";
+import { ProjectFiles, type FileScope } from "../../lib/api/projectFiles";
+import { t } from "../../i18n";
+
+// Create a new document. The user types a path (folders allowed, like
+// Appsi's work/<case>/… layout); we default a .md extension when none is given.
+export function NewFileDialog({
+  open, onClose, pid, scope, onCreated,
+}: {
+  open: boolean;
+  onClose: () => void;
+  pid: string;
+  scope: FileScope;
+  onCreated: (path: string) => void;
+}) {
+  const toast = useToast();
+  const [path, setPath] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  const create = async () => {
+    let rel = path.trim().replace(/^\/+/, "");
+    if (!rel) return;
+    if (!/\.[a-z0-9]+$/i.test(rel)) rel += ".md";
+    setSaving(true);
+    try {
+      await ProjectFiles.write(pid, rel, "", scope);
+      toast.success(t("files.created"));
+      setPath("");
+      onCreated(rel);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={t("files.new_doc")}
+      description={t("files.new_doc_hint")}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>{t("common.cancel")}</Button>
+          <Button variant="primary" data-testid="new-file-create" onClick={() => void create()} loading={saving} disabled={!path.trim()}>
+            {t("files.create")}
+          </Button>
+        </>
+      }
+    >
+      <Field label={t("files.path_label")} hint={t("files.path_example")}>
+        <Input
+          autoFocus
+          data-testid="new-file-path"
+          value={path}
+          onChange={(e) => setPath(e.target.value)}
+          onKeyDown={(e) => { if (e.key === "Enter") void create(); }}
+          placeholder="cases/onboarding/spec.md"
+        />
+      </Field>
+    </Dialog>
+  );
+}

package/src/interfaces/web/src/components/structure/StructureDialogs.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useState } from "react";
+import { Dialog, Button, Field, Input, Textarea } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { useToast } from "../Toast";
+import { Org } from "../../lib/api/organization";
+import { slugify } from "../../lib/slug";
+import { t } from "../../i18n";
+import type { OrgArea, OrgRole } from "../../types/daemon";
+
+// Create or edit an area. `editing` present → edit mode (slug is immutable).
+export function AreaDialog({
+  open, onClose, pid, editing, onSaved,
+}: {
+  open: boolean;
+  onClose: () => void;
+  pid: string;
+  editing?: OrgArea | null;
+  onSaved: () => void;
+}) {
+  const toast = useToast();
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [goal, setGoal] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setName(editing?.name ?? "");
+    setSlug(editing?.slug ?? "");
+    setGoal(editing?.goal ?? "");
+  }, [open, editing]);
+
+  const save = async () => {
+    if (!name.trim()) return;
+    setBusy(true);
+    try {
+      if (editing) await Org.updateArea(pid, editing.slug, { name, goal });
+      else await Org.createArea(pid, { name, slug: slug || slugify(name), goal });
+      toast.success(t("common.saved"));
+      onSaved();
+      onClose();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={editing ? t("structure.edit_area") : t("structure.new_area")}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>{t("common.cancel")}</Button>
+          <Button variant="primary" data-testid="area-create" onClick={() => void save()} loading={busy} disabled={!name.trim()}>
+            {editing ? t("common.save") : t("structure.create_area")}
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        <Field label={t("structure.name")}>
+          <Input
+            autoFocus
+            data-testid="area-name"
+            value={name}
+            onChange={(e) => { setName(e.target.value); if (!editing) setSlug(slugify(e.target.value)); }}
+            placeholder="Engineering"
+          />
+        </Field>
+        {!editing && (
+          <Field label={t("structure.slug")}>
+            <Input value={slug} onChange={(e) => setSlug(slugify(e.target.value))} className="font-mono" placeholder="engineering" />
+          </Field>
+        )}
+        <Field label={t("structure.goal")} hint={t("structure.goal_hint")}>
+          <Textarea value={goal} onChange={(e) => setGoal(e.target.value)} rows={2} />
+        </Field>
+      </div>
+    </Dialog>
+  );
+}
+
+// Create or edit a role. `presetArea` pre-selects an area (quick-create from an
+// area card).
+export function RoleDialog({
+  open, onClose, pid, areas, editing, presetArea, onSaved,
+}: {
+  open: boolean;
+  onClose: () => void;
+  pid: string;
+  areas: OrgArea[];
+  editing?: OrgRole | null;
+  presetArea?: string | null;
+  onSaved: () => void;
+}) {
+  const toast = useToast();
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [area, setArea] = useState("");
+  const [description, setDescription] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setName(editing?.name ?? "");
+    setSlug(editing?.slug ?? "");
+    setArea(editing?.area ?? presetArea ?? "");
+    setDescription(editing?.description ?? "");
+  }, [open, editing, presetArea]);
+
+  const save = async () => {
+    if (!name.trim()) return;
+    setBusy(true);
+    try {
+      if (editing) await Org.updateRole(pid, editing.slug, { name, area: area || null, description });
+      else await Org.createRole(pid, { name, slug: slug || slugify(name), area: area || null, description });
+      toast.success(t("common.saved"));
+      onSaved();
+      onClose();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const areaOptions = [
+    { value: "", label: t("structure.no_area") },
+    ...areas.map((a) => ({ value: a.slug, label: a.name })),
+  ];
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={editing ? t("structure.edit_role") : t("structure.new_role")}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>{t("common.cancel")}</Button>
+          <Button variant="primary" onClick={() => void save()} loading={busy} disabled={!name.trim()}>
+            {editing ? t("common.save") : t("structure.create_role")}
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        <Field label={t("structure.name")}>
+          <Input
+            autoFocus
+            value={name}
+            onChange={(e) => { setName(e.target.value); if (!editing) setSlug(slugify(e.target.value)); }}
+            placeholder="Tech Lead"
+          />
+        </Field>
+        {!editing && (
+          <Field label={t("structure.slug")}>
+            <Input value={slug} onChange={(e) => setSlug(slugify(e.target.value))} className="font-mono" placeholder="tech-lead" />
+          </Field>
+        )}
+        <Field label={t("structure.area")}>
+          <UiSelect value={area} onChange={setArea} options={areaOptions} placeholder={t("structure.no_area")} />
+        </Field>
+        <Field label={t("structure.description")}>
+          <Textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={2} />
+        </Field>
+      </div>
+    </Dialog>
+  );
+}

package/src/interfaces/web/src/components/tasks/TaskDetailPanel.tsx

@@ -0,0 +1,142 @@
+import { useState, useEffect } from "react";
+import useSWR from "swr";
+import { X, Check, Trash2, RotateCcw, ExternalLink, Save } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Tasks } from "../../lib/api";
+import { Button, Spinner, Textarea } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { useToast } from "../Toast";
+import { StatusBadge, effectiveStatus, TASK_STATUS_ORDER, statusLabel } from "./taskStatus";
+import { t } from "../../i18n";
+import type { TaskStatus } from "../../types/daemon";
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-baseline justify-between gap-3 text-xs">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="text-right font-mono text-foreground/90">{children}</span>
+    </div>
+  );
+}
+
+// Right-hand task inspector: prompt/body, workflow status, who created it, the
+// linked thread, timestamps, and lifecycle actions. Mirrors Panda's detail
+// panel but wired to APX's task store.
+export function TaskDetailPanel({
+  pid, taskId, onClose, onChanged,
+}: {
+  pid: string;
+  taskId: string;
+  onClose: () => void;
+  onChanged: () => void;
+}) {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const { data: task, isLoading, mutate } = useSWR(`/projects/${pid}/tasks/${taskId}`, () => Tasks.get(pid, taskId));
+  const [body, setBody] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => { setBody(task?.body ?? ""); }, [task?.id, task?.body]);
+
+  const refresh = () => { void mutate(); onChanged(); };
+  const act = async (fn: () => Promise<unknown>) => {
+    setBusy(true);
+    try { await fn(); refresh(); }
+    catch (e) { toast.error(e instanceof Error ? e.message : String(e)); }
+    finally { setBusy(false); }
+  };
+
+  if (isLoading) return <div className="flex w-80 items-center justify-center border-l border-border"><Spinner /></div>;
+  if (!task) return null;
+
+  const eff = effectiveStatus(task);
+  const isOpen = task.state === "open";
+  const bodyDirty = body !== (task.body ?? "");
+
+  return (
+    <div className="flex w-80 shrink-0 flex-col border-l border-border bg-card/40" data-testid="task-detail">
+      <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-2.5">
+        <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{t("tasks.detail_title")}</span>
+        <button type="button" onClick={onClose} aria-label={t("common.close")} className="text-muted-foreground hover:text-foreground">
+          <X className="size-4" />
+        </button>
+      </div>
+
+      <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-4">
+        <div>
+          <div className="mb-1 text-[10px] uppercase tracking-wide text-muted-foreground">{t("tasks.field_title")}</div>
+          <div className="text-sm font-semibold">{task.title}</div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <StatusBadge status={eff} />
+          <span className="font-mono text-[10px] text-muted-foreground">{task.id}</span>
+        </div>
+
+        {/* Prompt / body — editable */}
+        <div>
+          <div className="mb-1 flex items-center justify-between">
+            <span className="text-[10px] uppercase tracking-wide text-muted-foreground">{t("tasks.field_prompt")}</span>
+            {bodyDirty && (
+              <button type="button" onClick={() => act(async () => { await Tasks.patch(pid, task.id, { body }); toast.success(t("common.saved")); })} className="flex items-center gap-1 text-[10px] text-emerald-500 hover:text-emerald-400">
+                <Save className="size-3" />{t("files.save")}
+              </button>
+            )}
+          </div>
+          <Textarea rows={4} value={body} onChange={(e) => setBody(e.target.value)} placeholder={t("tasks.prompt_ph")} className="text-xs" />
+        </div>
+
+        {/* Workflow status control (open tasks) */}
+        {isOpen && (
+          <div>
+            <div className="mb-1 text-[10px] uppercase tracking-wide text-muted-foreground">{t("tasks.field_status")}</div>
+            <UiSelect
+              value={task.status ?? "pending"}
+              onChange={(v) => act(() => Tasks.status(pid, task.id, v as TaskStatus))}
+              options={TASK_STATUS_ORDER.map((s) => ({ value: s, label: statusLabel(s) }))}
+            />
+          </div>
+        )}
+
+        <div className="space-y-1.5 rounded-lg border border-border bg-background/40 p-2.5">
+          {task.agent && <Row label={t("tasks.field_agent")}>@{task.agent}</Row>}
+          {task.created_by && <Row label={t("tasks.field_creator")}>{task.created_by}</Row>}
+          {task.source && <Row label={t("tasks.field_source")}>{task.source}</Row>}
+          {task.due && <Row label={t("project.tasks.due")}>{task.due}</Row>}
+          <Row label={t("tasks.field_created")}>{new Date(task.created_at).toLocaleString()}</Row>
+          <Row label={t("tasks.field_updated")}>{new Date(task.updated_at).toLocaleString()}</Row>
+          {task.done_at && <Row label={t("tasks.field_done")}>{new Date(task.done_at).toLocaleString()}</Row>}
+        </div>
+
+        {/* Thread link */}
+        {task.thread && (
+          <button
+            type="button"
+            onClick={() => navigate(`/p/${pid}/chat?thread=${task.thread}`)}
+            className="flex w-full items-center justify-center gap-1.5 rounded-lg border border-sky-500/30 bg-sky-500/5 px-3 py-2 text-xs text-sky-500 hover:bg-sky-500/10"
+          >
+            <ExternalLink className="size-3.5" />{t("tasks.view_thread")}
+          </button>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="flex shrink-0 gap-2 border-t border-border px-4 py-3">
+        {isOpen ? (
+          <>
+            <Button size="sm" variant="primary" className="flex-1" loading={busy} onClick={() => act(() => Tasks.done(pid, task.id))}>
+              <Check size={13} />{t("tasks.mark_done")}
+            </Button>
+            <Button size="sm" variant="destructive" loading={busy} onClick={() => act(() => Tasks.drop(pid, task.id))} aria-label={t("project.tasks.aria_drop")}>
+              <Trash2 size={13} />
+            </Button>
+          </>
+        ) : (
+          <Button size="sm" variant="secondary" className="flex-1" loading={busy} onClick={() => act(() => Tasks.reopen(pid, task.id))}>
+            <RotateCcw size={13} />{t("project.tasks.reopen")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/tasks/taskStatus.tsx

@@ -0,0 +1,57 @@
+import { Loader2, CheckCircle2, XCircle, Clock, CircleDot, HelpCircle } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import type { TaskEntry, TaskStatus } from "../../types/daemon";
+
+type Meta = { labelKey: string; color: string; dot: string; Icon: typeof Clock; spin?: boolean };
+
+// Single source of truth for how each workflow status looks. Reused by the
+// task list, detail panel and the floor/overview.
+const STATUS_META: Record<TaskStatus, Meta> = {
+  pending:   { labelKey: "tasks.status_pending",   color: "text-amber-500",  dot: "bg-amber-400",  Icon: CircleDot },
+  running:   { labelKey: "tasks.status_running",   color: "text-sky-500",    dot: "bg-sky-400",    Icon: Loader2, spin: true },
+  in_review: { labelKey: "tasks.status_in_review", color: "text-violet-500", dot: "bg-violet-400", Icon: Clock },
+  blocked:   { labelKey: "tasks.status_blocked",   color: "text-slate-400",  dot: "bg-slate-400",  Icon: HelpCircle },
+};
+
+export const TASK_STATUS_ORDER: TaskStatus[] = ["pending", "running", "in_review", "blocked"];
+
+// Effective status for display: closed tasks render as done/dropped regardless
+// of their last open sub-status.
+export function effectiveStatus(task: TaskEntry): TaskStatus | "done" | "dropped" {
+  if (task.state === "done") return "done";
+  if (task.state === "dropped") return "dropped";
+  return task.status ?? "pending";
+}
+
+export function statusLabel(status: TaskStatus): string {
+  return t(STATUS_META[status].labelKey as never);
+}
+
+export function StatusIcon({ status, className }: { status: TaskStatus | "done" | "dropped"; className?: string }) {
+  if (status === "done") return <CheckCircle2 className={cn("size-4 text-emerald-500", className)} />;
+  if (status === "dropped") return <XCircle className={cn("size-4 text-muted-foreground", className)} />;
+  const m = STATUS_META[status];
+  return <m.Icon className={cn("size-4", m.color, m.spin && "animate-spin", className)} />;
+}
+
+export function StatusBadge({ status }: { status: TaskStatus | "done" | "dropped" }) {
+  const label =
+    status === "done" ? t("tasks.done_label")
+    : status === "dropped" ? t("tasks.dropped_label")
+    : statusLabel(status);
+  const color =
+    status === "done" ? "text-emerald-500 border-emerald-500/30"
+    : status === "dropped" ? "text-muted-foreground border-border"
+    : `${STATUS_META[status].color} border-current/30`;
+  return (
+    <span className={cn("inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px] font-medium capitalize", color)}>
+      <StatusIcon status={status} className="size-3" />
+      {label}
+    </span>
+  );
+}
+
+export function StatusDot({ status }: { status: TaskStatus }) {
+  return <span className={cn("size-2 rounded-full", STATUS_META[status].dot)} />;
+}