+ {p.body} +
+ {p.detail && ( +. Tail size
-// and since duration are toolbar-tunable; auto-scroll-to-bottom is on
-// by default but disabled once the user scrolls up.
+// Polls docker logs for the selected container at LOG_POLL_MS. Tail
+// and since are toolbar-tunable; auto-scroll disables once the user
+// scrolls up.
const LOG_POLL_MS = 3000;
@@ -27,12 +25,10 @@ export function ContainerLogsModal({ open, instance, container, onClose }: Props
const [loading, setLoading] = useState(false);
const preRef = useRef(null);
const autoScrollRef = useRef(true);
- // Only close when both mousedown AND click originated on the overlay;
- // otherwise the click that opened the modal (mousedown on a row cell,
- // mouseup after the modal mounted) would immediately close it.
+ // Close only when both mousedown AND click landed on the overlay, else
+ // the opening click (mouseup after the modal mounts) closes it instantly.
const downOnOverlayRef = useRef(false);
- // Esc closes.
useEffect(() => {
if (!open) return;
function onKey(e: KeyboardEvent) {
@@ -73,8 +69,6 @@ export function ContainerLogsModal({ open, instance, container, onClose }: Props
};
}, [open, instance, container, tail, since]);
- // Auto-scroll to bottom on new content unless the user scrolled up;
- // tracked via a ref to avoid a state update per scroll event.
useEffect(() => {
if (!preRef.current || !autoScrollRef.current) return;
preRef.current.scrollTop = preRef.current.scrollHeight;
@@ -134,7 +128,7 @@ export function ContainerLogsModal({ open, instance, container, onClose }: Props
role="alert"
style={{
color: W.err,
- background: `${W.err}10`,
+ background: `${tint(W.err, 6)}`,
borderBottom: `1px solid ${W.err}`,
padding: "8px 16px",
fontSize: 12,
@@ -230,9 +224,8 @@ const modalStyle: React.CSSProperties = {
width: "min(900px, 95vw)",
height: "min(700px, 88vh)",
background: W.surface,
- border: `1px solid ${W.border}`,
- borderRadius: 4,
- boxShadow: "0 24px 64px rgba(0,0,0,0.6)",
+ border: `1px solid ${W.borderHi}`,
+ borderRadius: R.card,
display: "flex",
flexDirection: "column",
overflow: "hidden",
@@ -250,7 +243,7 @@ const selectStyle: React.CSSProperties = {
background: W.bg,
color: W.text,
border: `1px solid ${W.border}`,
- borderRadius: 2,
+ borderRadius: R.control,
padding: "2px 6px",
fontSize: 11,
fontFamily: wMono,
diff --git a/frontend/src/screens/ContractDetailDrawer.tsx b/frontend/src/screens/ContractDetailDrawer.tsx
index 56c20e85..95b07fc3 100644
--- a/frontend/src/screens/ContractDetailDrawer.tsx
+++ b/frontend/src/screens/ContractDetailDrawer.tsx
@@ -6,33 +6,21 @@ import {
type ContractRow,
type Role,
} from "../api";
-import { W, wMono, wideCaps } from "../tokens";
+import { W, wMono, wideCaps, tint, R } from "../tokens";
import { Button } from "../components/Button";
+import { MonoId } from "../components/MonoId";
import { IcX } from "../components/icons";
-// ContractDetailDrawer is a true right-side overlay: position-fixed
-// below the topbar so the ACS table keeps its full width. It opens
-// when a row is clicked. Fetches the deep view from
-// /api/instances/{name}/contracts/{cid}
-// (EventQueryService.GetEventsByContractId) for the create event's full
-// payload, signatories, observers, and archive metadata. While that
-// loads it shows the row-level ACS fields so the user always has
-// something to read.
-//
-// Keyboard: Esc closes, J/K move to the next/previous row. The parent
-// owns row navigation because it owns the filtered table state; the
-// drawer only owns the deep-view fetch lifecycle.
-
+// Right-side overlay showing a contract's deep view (payload, parties,
+// archive metadata), falling back to row-level ACS fields while it loads.
+// The parent owns J/K row navigation since it holds the filtered table state.
export interface ContractDetailDrawerProps {
instance: string;
role: Role;
/** Row data we already have from the ACS snapshot. */
row: ContractRow;
- /** Close the drawer. */
onClose: () => void;
- /** Move selection to the previous row (K / ArrowUp). */
onPrev?: () => void;
- /** Move selection to the next row (J / ArrowDown). */
onNext?: () => void;
}
@@ -49,7 +37,6 @@ export function ContractDetailDrawer({
| { kind: "ok"; detail: ContractDetail }
| { kind: "err"; message: string }
>({ kind: "loading" });
- const [copied, setCopied] = useState(false);
useEffect(() => {
let cancelled = false;
@@ -72,9 +59,8 @@ export function ContractDetailDrawer({
};
}, [instance, role, row.contract_id]);
- // Esc / J / K, listened on window so keystrokes work from anywhere
- // on the page. INPUT/TEXTAREA/contenteditable are ignored so typing
- // in the search box doesn't trigger navigation.
+ // Esc / J / K on window; skip when an editable element is focused so
+ // typing in the search box doesn't trigger navigation.
useEffect(() => {
const onKey = (e: KeyboardEvent) => {
const active = document.activeElement as HTMLElement | null;
@@ -116,16 +102,6 @@ export function ContractDetailDrawer({
archived: false,
};
- const copyCid = async () => {
- try {
- await navigator.clipboard.writeText(detail.contract_id);
- setCopied(true);
- setTimeout(() => setCopied(false), 1100);
- } catch {
- // clipboard may be unavailable (http on non-localhost); silent
- }
- };
-
return (