@skillcdn/console 0.3.2 → 0.4.1

package/src/components/documents.tsx

@@ -440,12 +440,21 @@ export function DocumentFiles(props: DocumentFilesProps) {
             }
           }}
         >
-          <input
-            className="sc-input"
-            type="file"
-            aria-label={words.fileToAttach}
-            onChange={(event) => setChosen(event.target.files?.[0] ?? undefined)}
-          />
+          <div className="sc-doc-attach-file">
+            <label className="sc-button sc-button-secondary sc-file-choice">
+              {words.chooseFile}
+              <input
+                key={chosen === undefined ? "none" : "some"}
+                className="sc-file-input"
+                type="file"
+                aria-label={words.fileToAttach}
+                onChange={(event) => setChosen(event.target.files?.[0] ?? undefined)}
+              />
+            </label>
+            <span className={cx("sc-doc-attach-chosen", chosen === undefined && "sc-muted")}>
+              {chosen === undefined ? words.noFileChosen : chosen.name}
+            </span>
+          </div>
           <input
             className="sc-input"
             placeholder={words.labelPlaceholder}
@@ -453,7 +462,11 @@ export function DocumentFiles(props: DocumentFilesProps) {
             value={label}
             onChange={(event) => setLabel(event.target.value)}
           />
-          <Button type="submit" size="sm" disabled={chosen === undefined || props.busy === true}>
+          <Button
+            type="submit"
+            variant="primary"
+            disabled={chosen === undefined || props.busy === true}
+          >
             {words.attach}
           </Button>
         </form>
@@ -555,7 +568,7 @@ export function DocumentView(props: DocumentViewProps) {
               </dd>
             </div>
             <div>
-              <dt>{docs.writtenBy}</dt>
+              <dt>{docs.author}</dt>
               <dd>
                 <Writer by={shown.author} agent={shown.agent} /> <Time iso={shown.createdAt} />
               </dd>
@@ -641,9 +654,12 @@ export function DocumentView(props: DocumentViewProps) {
                       >
                         {docs.version(entry.number)}
                       </a>
-                    )}{" "}
-                    {entry.title} · <Writer by={entry.author} agent={entry.agent} />{" "}
-                    <Time iso={entry.createdAt} />
+                    )}
+                    <span className="sc-version-title">{entry.title}</span>
+                    <span className="sc-version-meta">
+                      <Writer by={entry.author} agent={entry.agent} />{" "}
+                      <Time iso={entry.createdAt} />
+                    </span>
                   </li>
                 ))}
               </ol>

package/src/components/event-feed.tsx

@@ -1,9 +1,10 @@
 import type { ReactNode } from "react";
 import { agentLabel, type RestEvent } from "../api.js";
+import { dayOf } from "../dates.js";
 import { en, type Messages } from "../i18n/en.js";
-import { useWords } from "../i18n/index.js";
+import { useLanguage, useWords } from "../i18n/index.js";
 import { ShowMore, usePaged } from "./paged.js";
-import { PersonChip, Time } from "./ui.js";
+import { formatInstant, PersonChip } from "./ui.js";
 
 // The feed: one line per event, newest first, as a sentence a person reads at a glance: who,
 // as which agent when through one, and what. It takes its data as props and nothing from the
@@ -103,7 +104,9 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
         ? feed.event.runFinished(task)
         : data.status === "failed"
           ? feed.event.runFailed(task)
-          : feed.event.runAbandoned(task);
+          : data.reason === "unheard"
+            ? feed.event.runUnheard(task, data.agent ?? feed.someone)
+            : feed.event.runAbandoned(task);
     case "document.written":
       return feed.event.documentWritten(page, data.version);
     case "document.archived":
@@ -123,8 +126,65 @@ export interface EventFeedProps {
   readonly empty?: ReactNode;
 }
 
+/** The day an event fell on, by this machine's clock, as the calendar spells a day. */
+function dayOfEvent(event: RestEvent): string {
+  const date = new Date(event.createdAt);
+  return Number.isNaN(date.getTime()) ? event.createdAt : dayOf(date);
+}
+
+/** A day as the feed heads it: the weekday and the date, with the year where it is not this one. */
+function formatFeedDay(day: string, language: string, now: Date = new Date()): string {
+  const date = new Date(`${day}T00:00:00`);
+  if (Number.isNaN(date.getTime())) {
+    return day;
+  }
+  return date.toLocaleDateString(language, {
+    weekday: "short",
+    month: "long",
+    day: "numeric",
+    ...(date.getFullYear() === now.getFullYear() ? {} : { year: "numeric" }),
+  });
+}
+
+/** Whether two events were done by the same person as the same agent, so the name is said once. */
+function sameHands(a: RestEvent, b: RestEvent): boolean {
+  return (a.actor?.id ?? null) === (b.actor?.id ?? null) && a.agent === b.agent;
+}
+
+/** The hour of an event, for a row whose day is in the heading above it. */
+function formatClock(iso: string, language: string): string {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime())
+    ? iso
+    : date.toLocaleTimeString(language, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
+}
+
+type FeedRun = { readonly actor: RestEvent; readonly events: RestEvent[] };
+type FeedDay = { readonly day: string; readonly runs: FeedRun[] };
+
+/** The events by the day they fell on, and within a day by runs of the same hands; newest first. */
+function groupFeed(events: readonly RestEvent[]): FeedDay[] {
+  const days: FeedDay[] = [];
+  for (const event of events) {
+    const day = dayOfEvent(event);
+    let last = days[days.length - 1];
+    if (last === undefined || last.day !== day) {
+      last = { day, runs: [] };
+      days.push(last);
+    }
+    const run = last.runs[last.runs.length - 1];
+    if (run !== undefined && sameHands(run.actor, event)) {
+      run.events.push(event);
+    } else {
+      last.runs.push({ actor: event, events: [event] });
+    }
+  }
+  return days;
+}
+
 export function EventFeed(props: EventFeedProps) {
   const words = useWords();
+  const { tag } = useLanguage();
   const newestFirst = [...props.events].reverse();
   const { shown, rest, more } = usePaged(newestFirst);
   if (props.events.length === 0) {
@@ -132,37 +192,60 @@ export function EventFeed(props: EventFeedProps) {
   }
   return (
     <>
-      <ol className="sc-feed" aria-label={words.feed.list}>
-        {shown.map((event) => {
-          const href = props.href?.(event);
-          const said = describeEvent(event, words);
-          return (
-            <li key={event.id} className="sc-feed-item">
-              <span className="sc-feed-actor">
-                {event.actor === null ? (
-                  <span className="sc-person-login">{words.feed.console}</span>
-                ) : (
-                  <PersonChip person={event.actor} />
-                )}
-                {event.agent !== null && (
-                  <span
-                    className="sc-feed-agent"
-                    title={
-                      agentLabel(event.agent) === event.agent ? words.feed.asTitle : event.agent
-                    }
-                  >
-                    {words.feed.as(agentLabel(event.agent))}
+      <section className="sc-feed" aria-label={words.feed.list}>
+        {groupFeed(shown).map((group) => (
+          <section key={group.day} className="sc-feed-day">
+            <h3 className="sc-feed-day-title">
+              <time dateTime={group.day}>{formatFeedDay(group.day, tag)}</time>
+            </h3>
+            <ol className="sc-feed-day-list">
+              {group.runs.map((run) => (
+                <li key={run.actor.id} className="sc-feed-run">
+                  <span className="sc-feed-actor">
+                    {run.actor.actor === null ? (
+                      <span className="sc-person-login">{words.feed.console}</span>
+                    ) : (
+                      <PersonChip person={run.actor.actor} />
+                    )}
+                    {run.actor.agent !== null && (
+                      <span
+                        className="sc-feed-agent"
+                        title={
+                          agentLabel(run.actor.agent) === run.actor.agent
+                            ? words.feed.asTitle
+                            : run.actor.agent
+                        }
+                      >
+                        {words.feed.as(agentLabel(run.actor.agent))}
+                      </span>
+                    )}
                   </span>
-                )}
-              </span>
-              <span className="sc-feed-words">
-                {href === undefined ? said : <a href={href}>{said}</a>}
-              </span>
-              <Time iso={event.createdAt} />
-            </li>
-          );
-        })}
-      </ol>
+                  <ol className="sc-feed-run-list">
+                    {run.events.map((event) => {
+                      const href = props.href?.(event);
+                      const said = describeEvent(event, words);
+                      return (
+                        <li key={event.id} className="sc-feed-item">
+                          <time
+                            className="sc-time sc-feed-clock"
+                            dateTime={event.createdAt}
+                            title={formatInstant(event.createdAt, tag)}
+                          >
+                            {formatClock(event.createdAt, tag)}
+                          </time>
+                          <span className="sc-feed-words">
+                            {href === undefined ? said : <a href={href}>{said}</a>}
+                          </span>
+                        </li>
+                      );
+                    })}
+                  </ol>
+                </li>
+              ))}
+            </ol>
+          </section>
+        ))}
+      </section>
       <ShowMore rest={rest} onMore={more} />
     </>
   );

package/src/components/markdown.tsx

@@ -2,11 +2,13 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { isDocumentPath } from "../documents.js";
 import { type Picture, PictureThumb } from "./pictures.js";
+import { useRemotePictureSrc } from "./remote-pictures.js";
 
 // What people and agents write is untrusted. It is rendered as React elements, never as HTML:
 // raw HTML in the source stays text, links are limited to a few schemes and open elsewhere,
-// and pictures come over https only, lazily and without a referrer. A link whose destination
-// is a document's path (ADR-0009) leads to the document's page, when the page knows where.
+// and a picture from elsewhere, named over https, is read through the console (ADR-0048),
+// lazily and without a referrer. A link whose destination is a document's path (ADR-0009)
+// leads to the document's page, when the page knows where.
 
 const SAFE_LINK = /^(https?:|mailto:)/i;
 const SAFE_IMAGE = /^https:\/\//i;
@@ -29,6 +31,7 @@ export interface MarkdownProps {
 }
 
 export function Markdown(props: MarkdownProps) {
+  const remote = useRemotePictureSrc();
   return (
     <div className="sc-prose">
       <ReactMarkdown
@@ -62,7 +65,7 @@ export function Markdown(props: MarkdownProps) {
           img({ src, alt, title }) {
             const named = typeof src === "string" ? props.fileSrc?.(src) : undefined;
             const url =
-              named ?? (typeof src === "string" && SAFE_IMAGE.test(src) ? src : undefined);
+              named ?? (typeof src === "string" && SAFE_IMAGE.test(src) ? remote(src) : undefined);
             if (url === undefined) {
               return <span className="sc-prose-image-text">{alt ?? ""}</span>;
             }

package/src/components/my-decisions.tsx

@@ -0,0 +1,138 @@
+import type { ReactNode } from "react";
+import type { RestAnswerInput, RestDecision, RestMyDecisions } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { DecisionCard, DecisionLog } from "./decision-list.js";
+import { ProjectMark } from "./projects.js";
+import { Button } from "./ui.js";
+
+// A person's decisions (ADR-0042), across the projects they may see, laid out as a project's
+// decisions page is: in the first column the decisions that wait for their answer, as cards
+// answered here, and under them the decisions they asked of someone else, as cards that say
+// whom they wait for; in the second the record, the answered ones of both kinds, newest first.
+// Every card and row names the project, and who asked and who answers, as the cards do
+// everywhere. Takes its data as props and nothing from the network; the page reads more when
+// asked.
+
+/** One kind of a person's decisions, a page at a time. */
+export interface DecisionsPage {
+  readonly items: RestMyDecisions["items"];
+  /** Whether there is more after what is shown; `onMore` reads it. */
+  readonly more?: boolean | undefined;
+  readonly onMore?: (() => void) | undefined;
+}
+
+export interface MyDecisionsProps {
+  /** The decisions addressed to the person: waiting and answered. */
+  readonly addressed: DecisionsPage;
+  /** The decisions the person asked of someone else: waiting and answered. */
+  readonly raised: DecisionsPage;
+  readonly decisionHref: (projectKey: string, decisionId: string) => string;
+  /** Called with the person's answer on a decision of theirs, in its project. Left out, a waiting decision is answered on its own page. */
+  readonly onAnswer?:
+    | ((projectKey: string, decision: RestDecision, input: RestAnswerInput) => void)
+    | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+type Item = RestMyDecisions["items"][number];
+
+/** The project a decision is in, as the plate names one. */
+function InProject(props: { readonly project: Item["project"] }) {
+  const words = useWords();
+  return (
+    <span className="sc-task-row-project">
+      <ProjectMark project={props.project} size="sm" /> {words.work.inProject(props.project.name)}
+    </span>
+  );
+}
+
+function More(props: {
+  readonly page: DecisionsPage;
+  readonly label: string;
+  readonly busy?: boolean | undefined;
+}) {
+  const { page } = props;
+  if (page.more !== true || page.onMore === undefined) {
+    return null;
+  }
+  return (
+    <div className="sc-paged-more">
+      <Button variant="secondary" size="sm" disabled={props.busy} onClick={page.onMore}>
+        {props.label}
+      </Button>
+    </div>
+  );
+}
+
+export function MyDecisions(props: MyDecisionsProps) {
+  const words = useWords();
+  const own = words.myDecisions;
+  const { onAnswer } = props;
+  const waiting = props.addressed.items.filter(({ decision }) => decision.answer === null);
+  const asked = props.raised.items.filter(({ decision }) => decision.answer === null);
+  const record = [...props.addressed.items, ...props.raised.items]
+    .filter(({ decision }) => decision.answer !== null)
+    .sort((a, b) => (b.decision.answer?.at ?? "").localeCompare(a.decision.answer?.at ?? ""));
+  const projectOf = new Map(record.map((item) => [item.decision.id, item.project]));
+  const card = (item: Item, answerable: boolean): ReactNode => (
+    <DecisionCard
+      key={item.decision.id}
+      decision={item.decision}
+      href={props.decisionHref(item.project.key, item.decision.id)}
+      project={<InProject project={item.project} />}
+      onAnswer={
+        answerable && onAnswer !== undefined
+          ? (decision, input) => onAnswer(item.project.key, decision, input)
+          : undefined
+      }
+      busy={props.busy}
+    />
+  );
+  return (
+    <div className="sc-decisions">
+      <div className="sc-decisions-waiting">
+        <section aria-label={own.waiting}>
+          <h2 className="sc-section-title">
+            {own.waiting} <span className="sc-column-count">{waiting.length}</span>
+          </h2>
+          {waiting.length === 0 ? (
+            <p className="sc-muted">{own.noneWaiting}</p>
+          ) : (
+            waiting.map((item) => card(item, true))
+          )}
+          <More page={props.addressed} label={own.more} busy={props.busy} />
+        </section>
+        <section aria-label={own.raised}>
+          <h2 className="sc-section-title">
+            {own.raised} <span className="sc-column-count">{asked.length}</span>
+          </h2>
+          {asked.length === 0 ? (
+            <p className="sc-muted">{own.noneRaised}</p>
+          ) : (
+            asked.map((item) => card(item, false))
+          )}
+          <More page={props.raised} label={own.more} busy={props.busy} />
+        </section>
+      </div>
+      <section aria-label={words.decisions.record}>
+        <h2 className="sc-section-title">
+          {words.decisions.record} <span className="sc-column-count">{record.length}</span>
+        </h2>
+        {record.length === 0 ? (
+          <p className="sc-muted">{own.noneAnswered}</p>
+        ) : (
+          <DecisionLog
+            decisions={record.map((item) => item.decision)}
+            decisionHref={(decision) =>
+              props.decisionHref(projectOf.get(decision.id)?.key ?? "", decision.id)
+            }
+            projectOf={(decision) => {
+              const project = projectOf.get(decision.id);
+              return project === undefined ? undefined : <InProject project={project} />;
+            }}
+          />
+        )}
+      </section>
+    </div>
+  );
+}

package/src/components/pack-connect.tsx

@@ -6,8 +6,9 @@ import { Button, Time } from "./ui.js";
 // A private pack connected with a code a person approves (ADR-0036): an owner, or for the
 // workspace's token an administrator, asks, the console asks the deployment and shows what it
 // answered, the code and the page, and the person approves there; the page asks the console
-// again at the interval the deployment named until the token is kept or the request ended.
-// Takes its data through the callbacks and keeps nothing itself.
+// to claim the token at the interval the deployment named, until the token is kept or the
+// request ended; reading how the request stands, when the page opens, changes nothing
+// (ADR-0046). Takes its data through the callbacks and keeps nothing itself.
 
 /**
  * How a connection stands, as the component needs it: what the API answers for a project's
@@ -20,8 +21,10 @@ export type PackConnectState =
 export interface PackConnectProps {
   /** Asks the deployment to connect; answers what the person is shown. */
   readonly onStart: () => Promise<RestPackConnectStarted>;
-  /** How the connection stands; the token is kept when the person approved. */
+  /** How the connection stands, read when the page opens; changes nothing. */
   readonly poll: (signal?: AbortSignal) => Promise<PackConnectState>;
+  /** Asks the console to claim the token at the deployment: pending still, connected, or ended. */
+  readonly claim: (signal?: AbortSignal) => Promise<PackConnectState>;
   /** Gives the connection up. */
   readonly onCancel: () => Promise<void>;
   /** Called once the token is kept. */
@@ -47,7 +50,7 @@ const MIN_INTERVAL_SECONDS = 2;
 export function PackConnect(props: PackConnectProps) {
   const words = useWords();
   const pack = words.projects.packToken;
-  const { poll, onConnected } = props;
+  const { poll, claim, onConnected } = props;
   const [shown, setShown] = useState<Shown>({ kind: "idle" });
   const [problem, setProblem] = useState<string | undefined>(undefined);
 
@@ -64,7 +67,7 @@ export function PackConnect(props: PackConnectProps) {
     return () => controller.abort();
   }, [poll]);
 
-  // While waiting, the console is asked again at the interval the deployment named; a new
+  // While waiting, the console is asked to claim at the interval the deployment named; a new
   // answer, pending still, is a new state, which schedules the next asking.
   useEffect(() => {
     if (shown.kind !== "waiting") {
@@ -72,7 +75,7 @@ export function PackConnect(props: PackConnectProps) {
     }
     const controller = new AbortController();
     const timer = setTimeout(() => {
-      poll(controller.signal)
+      claim(controller.signal)
         .then((state) => {
           if (controller.signal.aborted) {
             return;
@@ -102,7 +105,7 @@ export function PackConnect(props: PackConnectProps) {
       controller.abort();
       clearTimeout(timer);
     };
-  }, [shown, poll, onConnected]);
+  }, [shown, claim, onConnected]);
 
   const start = () => {
     setProblem(undefined);

package/src/components/pack-token.tsx

@@ -20,8 +20,10 @@ export interface PackTokenWaysProps {
   readonly busy?: boolean | undefined;
   /** Asks the deployment to connect; answers what the person is shown. */
   readonly onStart: () => Promise<RestPackConnectStarted>;
-  /** How the connection stands; the token is kept when the person approved. */
+  /** How the connection stands, read when the page opens; changes nothing. */
   readonly poll: (signal?: AbortSignal) => Promise<PackConnectState>;
+  /** Asks the console to claim the token at the deployment (ADR-0046). */
+  readonly claim: (signal?: AbortSignal) => Promise<PackConnectState>;
   /** Gives the connection up. */
   readonly onCancelConnect: () => Promise<void>;
   /** Called once the token is kept. */
@@ -46,6 +48,7 @@ export function PackTokenWays(props: PackTokenWaysProps) {
           <PackConnect
             onStart={props.onStart}
             poll={props.poll}
+            claim={props.claim}
             onCancel={props.onCancelConnect}
             onConnected={props.onConnected}
             busy={props.busy}

package/src/components/people.tsx

@@ -57,6 +57,19 @@ export function PeopleList(props: PeopleListProps) {
     person.source !== "organization" &&
     props.me?.id !== person.id;
   const organization = props.organization ?? undefined;
+  /** What let the person in, by its name: the organization, the domain of their login, or an administrator. */
+  const noteOf = (person: RestPerson): string => {
+    if (person.source === "organization") {
+      return organization === undefined
+        ? people.source.organization
+        : people.ofOrganization(organization.name);
+    }
+    if (person.source === "domain") {
+      const at = person.login.lastIndexOf("@");
+      return at === -1 ? people.source.domain : people.ofDomain(person.login.slice(at + 1));
+    }
+    return people.source.listed;
+  };
   return (
     <div className="sc-people-page">
       {organization !== undefined && (
@@ -75,10 +88,12 @@ export function PeopleList(props: PeopleListProps) {
         {active.map((person) => (
           <li key={person.id} className="sc-person-row">
             <PersonChip person={person} size="md" />
+            {props.me?.id === person.id && (
+              <span className="sc-person-you">{words.common.you}</span>
+            )}
             <span className="sc-person-name sc-muted">
-              {person.name === null ? "" : person.login}
-              {props.me?.id === person.id && <span> {words.common.you}</span>}
-              <span className="sc-person-note"> {people.source[person.source]}</span>
+              {person.name !== null && <>{person.login} · </>}
+              <span className="sc-person-note">{noteOf(person)}</span>
             </span>
             {props.onChangeRole === undefined ? (
               <RoleBadge role={person.role} />
@@ -161,12 +176,9 @@ export function PeopleList(props: PeopleListProps) {
               <li key={person.id} className="sc-person-row sc-person-row-out">
                 <PersonChip person={person} size="md" />
                 <span className="sc-person-name sc-muted">
-                  {person.name === null ? "" : person.login}
+                  {person.name !== null && <>{person.login} · </>}
                   <span className="sc-person-note">
-                    {" "}
-                    {person.source === "organization"
-                      ? people.leftOrganization
-                      : people.source[person.source]}
+                    {person.source === "organization" ? people.leftOrganization : noteOf(person)}
                     {person.deactivatedAt !== null && (
                       <>
                         {" "}

package/src/components/projects.tsx

@@ -93,7 +93,7 @@ export const VISIBILITY_LABELS: Readonly<Record<ProjectVisibility, string>> = {
 export function ProjectRoleBadge(props: { readonly role: ProjectRole }) {
   const words = useWords();
   return (
-    <Badge tone={props.role === "owner" ? "point" : "neutral"}>
+    <Badge tone={props.role === "owner" ? "accent" : "neutral"}>
       {words.vocabulary.projectRole[props.role]}
     </Badge>
   );
@@ -143,7 +143,9 @@ export function ProjectList(props: ProjectListProps) {
           )}
           {project.openDecisions > 0 && (
             <p className="sc-project-meta">
-              <Badge tone="warning">{words.decisionsWaiting(project.openDecisions)}</Badge>
+              <Badge tone="warning" kind="count">
+                {words.decisionsWaiting(project.openDecisions)}
+              </Badge>
             </p>
           )}
         </li>
@@ -444,11 +446,11 @@ export function MemberList(props: MemberListProps) {
           {props.members.map((member) => (
             <li key={member.person.id} className="sc-person-row">
               <PersonChip person={member.person} size="md" />
+              {props.me?.id === member.person.id && (
+                <span className="sc-person-you">{words.common.you}</span>
+              )}
               <span className="sc-person-name">
                 {member.person.name ?? ""}
-                {props.me?.id === member.person.id && (
-                  <span className="sc-muted"> {words.common.you}</span>
-                )}
                 <span className="sc-muted">
                   {" "}
                   {members.since} <Time iso={member.addedAt} />

package/src/components/remote-pictures.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import { REST_ROUTES } from "../routes.js";
+
+// Where a picture from elsewhere is read (ADR-0048): through the console, which fetches it and
+// keeps it a while, so that the person's browser reaches nobody's server and the pages load
+// nothing from elsewhere. The composition provides the client's way to it; a component outside
+// one reads it at the API's own path, which a console served beside its API answers.
+
+/** The address a picture from elsewhere is read at, given the https URL that names it. */
+export type RemotePictureSrc = (url: string) => string;
+
+export const defaultRemotePictureSrc: RemotePictureSrc = (url) =>
+  `${REST_ROUTES.pictures}?src=${encodeURIComponent(url)}`;
+
+export const RemotePicturesContext = createContext<RemotePictureSrc>(defaultRemotePictureSrc);
+
+export function useRemotePictureSrc(): RemotePictureSrc {
+  return useContext(RemotePicturesContext);
+}

package/src/components/roadmap.tsx

@@ -157,7 +157,7 @@ export function GoalTimeline(props: GoalTimelineProps) {
           return (
             <div key={goal.id} className={cx("sc-timeline-row", `sc-goal-${goal.state}`)}>
               <div className="sc-timeline-label">
-                <a className="sc-timeline-goal" href={props.goalHref(goal)}>
+                <a className="sc-timeline-goal" href={props.goalHref(goal)} title={goal.title}>
                   {goal.title}
                 </a>
                 <GoalStateBadge state={goal.state} />

package/src/components/runs.tsx

@@ -32,7 +32,11 @@ export function RunStatusBadge(props: { readonly status: RunStatus }) {
           : props.status === "failed"
             ? "danger"
             : "neutral";
-  return <Badge tone={tone}>{words.vocabulary.runStatus[props.status]}</Badge>;
+  return (
+    <Badge tone={tone} kind="state">
+      {words.vocabulary.runStatus[props.status]}
+    </Badge>
+  );
 }
 
 export interface RunCardProps {