viveworker 0.8.1 → 0.8.2

package/web/app.css

@@ -1068,6 +1068,48 @@ pre code {
   word-break: break-all;
 }
 
+.settings-external-link {
+  max-width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.32rem;
+  color: rgba(121, 196, 255, 0.9);
+  text-decoration: none;
+}
+
+.settings-external-link:hover,
+.settings-external-link:focus-visible {
+  color: rgba(176, 222, 255, 0.98);
+  text-decoration: none;
+}
+
+.settings-external-link:focus-visible {
+  outline: 1px solid rgba(121, 196, 255, 0.42);
+  outline-offset: 3px;
+  border-radius: 6px;
+}
+
+.settings-external-link__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.settings-external-link__icon {
+  width: 0.86rem;
+  height: 0.86rem;
+  flex: 0 0 auto;
+  opacity: 0.72;
+}
+
+.settings-external-link__icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 .settings-row__chevron {
   width: 0.95rem;
   height: 0.95rem;
@@ -2622,6 +2664,11 @@ pre code {
   line-height: 1.38;
 }
 
+.timeline-entry--kind-command-event .timeline-entry__title {
+  font-size: 0.94rem;
+  line-height: 1.38;
+}
+
 .timeline-entry__summary {
   color: var(--muted);
   line-height: 1.5;
@@ -2649,6 +2696,52 @@ pre code {
   line-height: 1.3;
 }
 
+.timeline-entry__command {
+  width: 100%;
+  margin: 0;
+  padding: 0.62rem 0.72rem;
+  border-radius: 0.85rem;
+  border: 1px solid rgba(156, 181, 197, 0.14);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
+    rgba(3, 9, 12, 0.62);
+  color: rgba(236, 248, 255, 0.88);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.78rem;
+  line-height: 1.45;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.timeline-entry__command code {
+  font: inherit;
+  color: inherit;
+}
+
+.detail-command-block {
+  width: 100%;
+  margin: 0;
+  padding: 0.82rem 0.88rem;
+  border-radius: 1rem;
+  border: 1px solid rgba(156, 181, 197, 0.15);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
+    rgba(3, 9, 12, 0.68);
+  color: rgba(236, 248, 255, 0.9);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.86rem;
+  line-height: 1.55;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.detail-command-block code {
+  font: inherit;
+  color: inherit;
+}
+
 .timeline-entry__footer {
   display: flex;
   align-items: center;
@@ -2934,8 +3027,17 @@ pre code {
   padding: 0.42rem 0.62rem;
   text-align: left;
   vertical-align: top;
+  /* Wrap plain text at natural boundaries, but only break long unbreakable
+   * runs as a last resort (instead of every column being forced narrow by
+   * the previous `word-break: break-word`). The table itself already has
+   * `overflow-x: auto`, so any cell that legitimately needs more width
+   * triggers horizontal scroll on the whole table. */
   white-space: normal;
-  word-break: break-word;
+  word-break: normal;
+  overflow-wrap: anywhere;
+  /* Keep cells from collapsing to a single character per line under the
+   * pressure of a wide inline `<code>` element. */
+  min-width: 4rem;
 }
 
 .detail-body.markdown table th {
@@ -2953,6 +3055,11 @@ pre code {
   padding: 0.05rem 0.32rem;
   border-radius: 6px;
   font-size: 0.86em;
+  /* Inline code never breaks mid-token — keeps `npx viveworker enable mcp …`
+   * legible on one line and lets the surrounding cell widen the table.
+   * The phone reader gets horizontal scroll instead of the previous
+   * char-per-line stack. */
+  white-space: nowrap;
 }
 
 .detail-card {
@@ -3073,6 +3180,12 @@ pre code {
   padding: 0.72rem;
 }
 
+.detail-card--command {
+  margin-top: 0.24rem;
+  gap: 0.72rem;
+  padding: 0.72rem;
+}
+
 .detail-card--diff-thread {
   margin-top: 0.24rem;
   gap: 0.72rem;