diff --git a/apps/yaak-proxy/components/FlowList.tsx b/apps/yaak-proxy/components/FlowList.tsx
index 4f81483a8..abcd7e952 100644
--- a/apps/yaak-proxy/components/FlowList.tsx
+++ b/apps/yaak-proxy/components/FlowList.tsx
@@ -877,8 +877,8 @@ const FlowRow = memo(function FlowRow({
: {}),
}}
className={classNames(
- "group/row absolute top-0 left-1.5 right-1.5 grid items-center px-1.5 rounded-md",
- "whitespace-nowrap tabular-nums",
+ "absolute top-0 left-1.5 right-1.5 grid items-center px-1.5 rounded-md whitespace-nowrap",
+ "tabular-nums",
flow.cancelled && "text-text-subtlest",
selected
? "text-text bg-surface-highlight group-focus-within/flows:bg-surface-active"
@@ -945,7 +945,7 @@ function FlowMark({ flow }: { flow: Flow }) {
) : flow.cancelled ? (
) : flow.tunnelled ? (
-
+
) : open ? (
) : flow.responseTruncated ? (
@@ -995,51 +995,42 @@ interface CellProps {
selected: boolean;
}
+/**
+ * The text of an encrypted or refused row: told apart by colour alone, the faintest that stays
+ * readable on the row (subtle, 4.5:1 on the surface in both default themes), and the full text
+ * colour while selected, as subtle falls under that on the dark theme's selection. No opacity,
+ * so the app icon and the mark show as on any row.
+ */
+function quietText(selected: boolean): string {
+ return selected ? "text-text" : "text-text-subtle";
+}
+
+/** A row's number, in the quiet colour */
+function quietNumber(flow: Flow, selected: boolean): ReactElement {
+ return {flow.number || ""};
+}
+
/**
* An encrypted connection's cell: quiet, and only what is known, so its host, how much it
* carried and for how long; nothing read from inside it, so no method, path, status, type,
- * query or field. Null for the cells that show as on any row.
+ * query or field. Null for the cells that show as on any row, the app icon among them.
*/
function encryptedCell({ column, flow, span, selected }: CellProps): ReactElement | null {
- const quiet = classNames(cell, mono, "text-text-subtlest");
+ const quiet = classNames(cell, mono, quietText(selected));
switch (column) {
- case "number":
+ case "app":
case "started":
return null;
- case "app":
- if (flow.clientPath == null) return ;
- return (
-
-
-
-
-
- );
+ case "number":
+ return quietNumber(flow, selected);
case "host": {
const { label } = connectionOf(flow);
- const colon = label.lastIndexOf(":");
- const port = colon === -1 || label.endsWith("]") ? null : label.slice(colon);
- const host = port == null ? label : label.slice(0, colon);
return (
-
- {host}
- {port != null && {port}}
-
+ {label}
);
@@ -1082,11 +1073,11 @@ function encryptedCell({ column, flow, span, selected }: CellProps): ReactElemen
}
/**
- * A refused handshake's cell: its host as any row's, the refusal across Type and Size in
- * warning, and nothing for the request it never made. Null for the cells that show as on any
- * row.
+ * A refused handshake's cell: its host, number and time in the quiet colour, the refusal across
+ * Type and Size in warning, and nothing for the request it never made. Null for the cells that
+ * show as on any row, the app icon among them.
*/
-function rejectedCell({ column, span }: CellProps): ReactElement | null {
+function rejectedCell({ column, flow, span, selected }: CellProps): ReactElement | null {
switch (column) {
case "method":
case "path":
@@ -1094,6 +1085,24 @@ function rejectedCell({ column, span }: CellProps): ReactElement | null {
case "query":
case "size":
return ;
+ case "number":
+ return quietNumber(flow, selected);
+ case "host": {
+ const host = hostOf(flow.url);
+ return (
+
+
+ {host}
+
+
+ );
+ }
+ case "time":
+ return (
+
+ {flow.elapsedMs == null ? "" : formatMillis(flow.elapsedMs)}
+
+ );
case "type":
return (