milestone 32: task-shaped configuration, file mode as a rendering, config status api

admin/src/features/configuration/AuthorityLine.tsx

@@ -0,0 +1,40 @@
+import * as stylex from "@stylexjs/stylex";
+import { formatTime } from "@/lib/format";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { useAuthority } from "./authority";
+
+const styles = stylex.create({
+	line: {
+		paddingInline: "0.75rem",
+		paddingBlock: "0.375rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+	path: {
+		overflowWrap: "anywhere",
+	},
+});
+
+/**
+ * File authority, stated once, in the configuration sub-navigation (§File
+ * mode). Not a banner on every route: the fact belongs to configuration, and
+ * repeating it above Overview and Activity buys nothing.
+ *
+ * "loaded" is deliberate. `reconciled_at` is when this process read the file;
+ * the server cannot prove the file still says what it said then, so the line
+ * never claims to describe the file's current contents.
+ */
+export default function AuthorityLine() {
+	const authority = useAuthority();
+	if (authority.state !== "resolved" || authority.status.authority !== "managed_file") return null;
+	const { path, reconciled_at } = authority.status;
+	return (
+		<p {...stylex.props(styles.line)}>
+			{"File-managed · "}
+			<code {...stylex.props(shared.mono, styles.path)}>{path}</code>
+			{reconciled_at === null ? null : ` · loaded ${formatTime(reconciled_at)}`}
+		</p>
+	);
+}