job page - broken layout for section-folding when titles include shell colors

problem

Consider how the page UI presents the message provided by the user code:

I'm quite sure this is not how you intended it to behave..

The raw log that produced this oddity:

[0Ksection_start:1675170957:section-13
[0K [1;36mRESULT:[0m [0;31mFailure[0m[0m
13:15:57 [[0;31mx[0m] [0;31m(⋟﹏⋞)

Job ended with failure[0m

last command ran via the `job_step` api:
  [1;33mLAST_job_COMMAND:
[0m    mutex_enter 'alpha'


section_end:1675170958:step_script

Diagnosis

The code assumes naively that the title is a single span in the flex (as I learn from the w-100).

- However -

When the user sends a title with few color markers - each color gets to be a span with w-100.

In our case, we got a space with no color meant to indent one character, RESULT: in Cyan, a space with no color, and the Failure in red.

(and the results are 4 spans in the flex)

Solution

Separatae the w-100 from the coloring using a wrapper.

more info

Underlying sh code:

job_section_start() {
  local PARAM_1_TITLE="$1";
  local PARAM_2_STATE="${2-collapsed}";
  local NOW SECT_NUM ATTRS;
  NOW=$(date +%s);
  SECT_NUM=$(_section_current);

  [ "$(_section_state)" == "closed" ] || job_section_end "$NOW" "$SECT_NUM";

  [ "collapsed" = "$PARAM_2_STATE" ] && ATTRS="[collapsed=true]";

  SECT_NUM=$((SECT_NUM + 1));
  eval "_section_current() { echo $SECT_NUM; };"
  eval '_section_state() { echo "open"; }';

  out "\e[0Ksection_start:$NOW:section-${SECT_NUM}${ATTRS}\r\e[0K ${CYAN}${PARAM_1_TITLE}${NC}";
};

job_step() {
  local PARAM_2_TITLE="$1";
  local PARAM_1_CMD="${2-$1}";

  job_section_start "step -> $PARAM_2_TITLE";

  log "[${INFO}] step command:";
  COMMAND=$PARAM_1_CMD log_variables_section "COMMAND<list>";
  out "";

  LAST_job_COMMAND="$PARAM_1_CMD";
  eval "$PARAM_1_CMD";
}

job_err_handler () {
  local CODE=$?;
  [ $CODE -eq 0 ] && exit;

  job_section_start "${RED}RESULT:${NC} Failure${NC}" "open";

  log_ouch "Job ended with failure";
  log_variables_section \
    --title "last command ran via the \`job_step\` api:"\
    "LAST_job_COMMAND<list>"\
  ;

  return $CODE;
}

trap job_err_handler EXIT;

with out being echo -e, log being out with args prefixed with date, and CYAN RED NC and the rest are just readonly with their respective sh color markers.

Customer info

Ultimate plan with self-hosted from linux package v15.4-ee, matching k8s runners on recommended arch.

Urgency

Not a show stopper. Knowing what's under the hood - I'll just limit to code that renders to a single <span>, but obviously it would be more fun if I could do more.