daily-focus 1.2.0-dev.7 → 1.2.0-dev.9

package/public/style.css

@@ -86,7 +86,7 @@
 
 /*
  * The UA stylesheet's `[hidden] { display: none }` loses to any class that sets
- * display, so `.timer`, `.focus-bar` and `.toast` all rendered as empty boxes
+ * display, so `.toast` rendered as an empty box
  * while "hidden". Assert it once here rather than remembering per component.
  */
 [hidden] {
@@ -351,91 +351,6 @@ body[data-view='tickets'] #brief-refresh {
   }
 }
 
-/* ---------- focus timer ---------- */
-
-.timer {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  max-width: 1280px;
-  margin: 0 auto 14px;
-  padding: 10px 14px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-left: 3px solid var(--accent);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  font-size: 13.5px;
-  color: var(--ink-2);
-}
-/* Past the target the timer stops being encouraging and starts being a fact. */
-.timer[data-state='overrun'] {
-  border-left-color: var(--serious);
-}
-.timer[data-state='idle'] {
-  border-left-color: var(--hairline);
-  color: var(--ink-3);
-}
-
-.timer__clock {
-  font-size: 20px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: var(--ink-1);
-  min-width: 62px;
-}
-.timer[data-state='overrun'] .timer__clock {
-  color: var(--serious);
-}
-
-.timer__title {
-  flex: 1;
-  min-width: 0;
-  color: var(--ink-1);
-  overflow-wrap: anywhere;
-}
-.timer__note {
-  color: var(--ink-3);
-}
-.timer__note--warn {
-  color: var(--critical);
-}
-.timer__tally {
-  color: var(--ink-3);
-  white-space: nowrap;
-}
-
-/*
- * The bar after the timer stopped itself. Marked like the overrun state rather
- * than the idle one: something happened that's worth a glance, even though the
- * thing that happened was the dashboard being careful.
- */
-.timer[data-state='stopped'] {
-  border-left-color: var(--serious);
-}
-.timer__away {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  gap: 12px;
-  min-width: 0;
-}
-.timer__away-body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-}
-.timer__away-text {
-  color: var(--ink-1);
-  overflow-wrap: anywhere;
-}
-.timer__away-detail {
-  color: var(--ink-3);
-  font-size: 12.5px;
-  overflow-wrap: anywhere;
-}
-
 /* ---------- banners ---------- */
 
 .banners {
@@ -692,47 +607,6 @@ body[data-view='tickets'] #brief-refresh {
   }
 }
 
-/* ---------- focus mode ---------- */
-
-/*
- * Fourteen open rows are fourteen invitations to switch task. Focus mode answers
- * the only question that matters mid-work — "what am I doing right now" — by
- * leaving the objective, one item, and the clock, and taking away the menu.
- */
-.focus-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin: 0 0 16px;
-  padding: 9px 14px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-left: 3px solid var(--accent);
-  border-radius: var(--radius);
-  font-size: 13px;
-  color: var(--ink-2);
-}
-
-/* Scoped to the Today view: the board is a different question, and stays whole. */
-body[data-focus-mode='true'][data-view='today'] .stats,
-body[data-focus-mode='true'][data-view='today'] .headline,
-body[data-focus-mode='true'][data-view='today'] #today .drawer,
-body[data-focus-mode='true'][data-view='today'] #today .section__header,
-/* every section except the first, and every item in it except the first */
-body[data-focus-mode='true'][data-view='today'] #today .section:not(:first-of-type),
-body[data-focus-mode='true'][data-view='today'] #today .section:first-of-type .item:not(:first-child) {
-  display: none;
-}
-
-body[data-focus-mode='true'][data-view='today'] #today .item {
-  padding: 18px 20px;
-}
-body[data-focus-mode='true'][data-view='today'] #today .item__title {
-  font-size: 19px;
-  line-height: 1.35;
-}
-
 /* ---------- standing objective ---------- */
 
 /*
@@ -910,9 +784,9 @@ body[data-focus-mode='true'][data-view='today'] #today .item__title {
   scroll-margin: 90px;
 }
 /*
- * Three states used to share one look: selected, priority and running were all
- * "accent border", so the one that matters most was indistinguishable from a
- * keyboard cursor. They're now ranked — selected is quietest, running loudest.
+ * Two states used to share one look: selected and priority were both "accent
+ * border", so the ranked rows were indistinguishable from a keyboard cursor.
+ * Selected is the quieter of the two.
  */
 .item[data-selected='true'] {
   border-color: var(--ink-3);
@@ -921,33 +795,6 @@ body[data-focus-mode='true'][data-view='today'] #today .item__title {
 .item[data-priority='true'] {
   border-left: 3px solid var(--accent);
 }
-
-/* The one you committed to. Four reinforcing cues, because missing it is the
- * whole failure mode: a thick bar, a wash, a ring, and a live clock on the row. */
-.item[data-running='true'],
-.item[data-running='true'][data-selected='true'] {
-  border-color: var(--accent);
-  border-left: 5px solid var(--accent);
-  background: var(--accent-wash);
-  box-shadow: 0 0 0 2px var(--accent);
-}
-.item[data-running='true'][data-overrun='true'],
-.item[data-running='true'][data-overrun='true'][data-selected='true'] {
-  border-color: var(--serious);
-  border-left-color: var(--serious);
-  box-shadow: 0 0 0 2px var(--serious);
-}
-
-/* While a session runs, everything else recedes — the competing rows are the
- * distraction the timer exists to resist. Hover brings one back so the list is
- * still usable without stopping the clock. */
-body[data-session-active='true'] #today .item:not([data-running='true']) {
-  opacity: 0.45;
-}
-body[data-session-active='true'] #today .item:not([data-running='true']):hover,
-body[data-session-active='true'] #today .item:not([data-running='true']):focus-within {
-  opacity: 1;
-}
 .item[data-status='done'] .item__title,
 .item[data-status='dismissed'] .item__title {
   color: var(--ink-3);
@@ -1058,17 +905,6 @@ body[data-session-active='true'] #today .item:not([data-running='true']):focus-w
   font-weight: 600;
   font-variant-numeric: tabular-nums;
 }
-.pill--running {
-  border-color: transparent;
-  background: var(--accent);
-  color: #fff;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-.item[data-overrun='true'] .pill--running {
-  background: var(--serious);
-  color: #1a1a19;
-}
 .pill--objective {
   border-color: var(--accent);
   color: var(--accent);
@@ -1563,7 +1399,7 @@ kbd {
 }
 
 /*
- * Which view is showing. Focus mode is scoped to Today (see the rules above).
+ * Which view is showing.
  *
  * One rule per panel per view rather than `:not()`, because a view name nobody
  * has written a rule for should show nothing rather than everything at once.
@@ -1899,9 +1735,9 @@ a.button {
 /*
  * ---------- the assistant ----------
  *
- * A section of the item panel, so the transcript scrolls with the panel's body
- * and the field sits at its foot. It used to be a box under the card with its own
- * scroll region; now the panel is the box.
+ * A section of the item panel, so the transcript scrolls with the panel's body;
+ * the field is pinned in the panel's foot. It used to be a box under the card
+ * with its own scroll region; now the panel is the box.
  */
 
 .assistant__turns {
@@ -1965,8 +1801,29 @@ a.button {
   border: 0;
   border-top: 1px solid var(--hairline);
 }
-.assistant__turn[data-status='running'] .assistant__reply {
-  border-left-style: dashed;
+/* A fenced block in an answer is usually meant for pasting elsewhere, so it carries a Copy. */
+.code-block {
+  position: relative;
+}
+.code-block pre {
+  padding-right: 52px;
+}
+.code-block__copy {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  padding: 1px 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-3);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+.code-block__copy:hover {
+  color: var(--ink-1);
+  border-color: var(--ink-3);
 }
 
 .assistant__status {
@@ -1977,16 +1834,25 @@ a.button {
 .assistant__status--bad {
   color: var(--critical);
 }
-.assistant[data-running='true'] .assistant__status:not(.assistant__status--bad)::after {
+.assistant__clock {
+  font-variant-numeric: tabular-nums;
+}
+
+/* A spinner, for the turn while it works and for each call it is waiting on. */
+.assistant__status--working::after,
+.assistant__step[data-state='running']::before {
   content: '';
   display: inline-block;
-  width: 8px;
-  height: 8px;
-  margin-left: 6px;
+  box-sizing: border-box;
+  width: 9px;
+  height: 9px;
   border-radius: 50%;
   border: 1.5px solid var(--accent);
   border-top-color: transparent;
   animation: assistant-spin 0.9s linear infinite;
+}
+.assistant__status--working::after {
+  margin-left: 6px;
   vertical-align: -1px;
 }
 @keyframes assistant-spin {
@@ -1995,16 +1861,105 @@ a.button {
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .assistant[data-running='true'] .assistant__status::after {
+  .assistant__status--working::after,
+  .assistant__step[data-state='running']::before {
     animation: none;
   }
 }
 
+/*
+ * The work: each call as one muted line under the request, the newest at the
+ * foot. Folded once the turn is over, under a line that says what it took.
+ */
+.assistant__work {
+  margin-top: 4px;
+}
+.assistant__work > summary {
+  font-size: 12px;
+  color: var(--ink-3);
+  cursor: pointer;
+}
+.assistant__work > summary:hover {
+  color: var(--ink-2);
+}
+.assistant__took {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--ink-3);
+}
+.assistant__steps {
+  margin: 5px 0 0;
+  padding: 0 0 0 10px;
+  border-left: 2px solid var(--hairline);
+  list-style: none;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ink-2);
+}
+.assistant__step {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+.assistant__step + .assistant__step {
+  margin-top: 3px;
+}
+.assistant__step::before {
+  flex: none;
+  width: 9px;
+  font-size: 11px;
+  text-align: center;
+}
+.assistant__step[data-state='done']::before {
+  content: '✓';
+  color: var(--good-ink);
+}
+.assistant__step[data-state='failed']::before {
+  content: '✕';
+  color: var(--critical);
+}
+.assistant__step[data-state='running']::before {
+  align-self: center;
+}
+.assistant__step-text {
+  flex: none;
+  max-width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.assistant__step-detail {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11.5px;
+  color: var(--ink-3);
+}
+/* What it said on the way: its own words, set apart from the calls by having no mark. */
+.assistant__step--message {
+  display: block;
+  padding-left: 15px;
+  font-style: italic;
+  color: var(--ink-3);
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+
+/* What can be done with a finished answer, without leaving the panel. */
+.assistant__after {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
 .assistant__quick {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-  margin-bottom: 14px;
+  margin-bottom: 10px;
 }
 
 .assistant__form {
@@ -2123,6 +2078,12 @@ body[data-flyout='open'] .layout__side {
   overflow-y: auto;
   padding: 16px 16px 20px;
 }
+/* The assistant's field and its canned asks, pinned under the body that scrolls. */
+.flyout__footer {
+  flex: none;
+  padding: 12px 16px 14px;
+  border-top: 1px solid var(--hairline);
+}
 .flyout__detail {
   margin: 0 0 22px;
   font-size: 13px;