@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/styles/components/omnichat.css

@@ -0,0 +1,538 @@
+/* Omnichat (OmnichatRulePanel, VideoOmnichatPanel, MissingDmsPanel, RuleLog, OmnichatPage). */
+
+/* --- omnichat (web/components/OmnichatRulePanel.tsx, OmnichatPage): Publish stage and /omnichat ------------------ */
+.omnichat {
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.omnichat > header h3 {
+  margin: 0;
+  font-size: 15px;
+}
+.omnichat-account {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.omnichat-account p {
+  margin: 0;
+  font-size: 13px;
+}
+.omnichat-account p.hint {
+  font-size: 12px;
+}
+.omnichat-token {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--warning-bg);
+}
+.omnichat-token ol {
+  margin: 0;
+  padding-left: 20px;
+  font-size: 13px;
+  color: var(--text-2);
+}
+.omnichat-token li {
+  margin: 2px 0;
+}
+.auto-rule {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.auto-rule > .field,
+.auto-rule-config-fields > .field,
+.auto-rule-step > .field {
+  flex: none;
+}
+/* the rule config in steps: the strip of steps (the pipeline stepper, compact), then the open step */
+.rule-steps .step > button {
+  padding: 4px 1px 2px;
+  gap: 3px;
+  cursor: pointer;
+}
+.rule-steps .step-status {
+  white-space: nowrap;
+  padding: 0 4px;
+}
+.auto-rule-step {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.auto-rule-texts {
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+}
+/* the DM as sent: the quoted Reel on the first line and the link at the end are lines of their own */
+.auto-rule-config-fields .dm-preview,
+.auto-rule-step .dm-preview {
+  white-space: pre-line;
+}
+.auto-rule .response {
+  white-space: pre-wrap;
+}
+.auto-rule .field small .error,
+.auto-rule .field em .error {
+  color: var(--error);
+}
+.auto-rule-status {
+  display: flex;
+  align-items: center;
+  gap: 8px 14px;
+  flex-wrap: wrap;
+  font-size: 13px;
+}
+.auto-rule-status .toggle-switch span {
+  font-weight: 600;
+  color: var(--text);
+}
+.auto-rule .check-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  cursor: pointer;
+}
+/* the short section of the Publish stage: the term, the status line and the link */
+.omnichat-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px 8px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.omnichat-status.ok {
+  color: var(--ok);
+}
+.omnichat-term {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.omnichat-term .field {
+  flex: none;
+}
+.omnichat-term .button {
+  flex: none;
+}
+.omnichat .data dd {
+  overflow-wrap: anywhere;
+}
+.auto-rule-confirm {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--warning-bg);
+}
+.auto-rule-confirm p {
+  margin: 0;
+  font-size: 13px;
+}
+.auto-rule-problems {
+  margin: 4px 0 0;
+  padding-left: 18px;
+  font-size: 13px;
+}
+/* no DM: the comment marks (asks, failed, past 7 days…) and why */
+.auto-rule-state {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 6px;
+}
+.auto-rule-dry-run {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.auto-rule-dry-run h3 {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0;
+}
+.auto-rule-dry-run h3 .subtle-link {
+  margin-left: auto;
+}
+.auto-rule-dry-run .log {
+  max-height: 320px;
+}
+.auto-rule-record {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
+}
+.auto-rule-record h3 {
+  margin: 0;
+}
+.auto-rule-record p {
+  margin: 0;
+}
+.auto-rule-totals {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  font-size: 13px;
+  color: var(--text-2);
+}
+.auto-rule-totals b {
+  color: var(--text);
+  font-weight: 600;
+}
+.auto-rule-totals .error b {
+  color: var(--error);
+}
+.auto-rule-table {
+  overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.auto-rule-when {
+  white-space: nowrap;
+}
+.auto-rule-action {
+  white-space: nowrap;
+  text-align: right;
+}
+/* Reply inline: the comment alone in the table and the field right below */
+.auto-rule-reply {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.auto-rule-text {
+  max-width: 42ch;
+  overflow-wrap: anywhere;
+}
+.auto-rule-name {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+  min-width: 0;
+  text-align: left;
+}
+.auto-rule-name small {
+  font: 400 12.5px / 18px var(--sans);
+  color: var(--text-3);
+}
+.omnichat-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 100%;
+}
+.omnichat-page > .header {
+  margin-bottom: 0;
+}
+.omnichat-page > .intro {
+  margin: 0;
+}
+.auto-rule-new {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.auto-rule-new .field {
+  flex: none;
+}
+/* video preview on the rule row: the same cover as the video list, as a thumbnail */
+.auto-rule-cover {
+  flex: none;
+  height: 72px;
+  border-radius: 6px;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  background: var(--surface-3);
+  border: 1px solid var(--border);
+  color: var(--text-3);
+}
+.auto-rule-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.panel-toggle .auto-rule-name {
+  flex: 1 1 auto;
+}
+/* the rules of the open tab in cards */
+.auto-rule-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 12px;
+  align-items: start;
+}
+/* an open card takes the whole row, with the full panel inside */
+.auto-rule-grid .panel.collapsible.open {
+  grid-column: 1 / -1;
+}
+.auto-rule-grid .panel.collapsible > div {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.auto-rule-grid .panel.collapsible > div > .meta {
+  margin: 0;
+}
+/* closed: the cover on top, then name and badges */
+.auto-rule-grid .panel.collapsible:not(.open) .panel-toggle {
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: 10px;
+}
+.auto-rule-grid .panel.collapsible:not(.open) .auto-rule-cover {
+  height: 180px;
+  width: 100%;
+  aspect-ratio: auto !important;
+}
+.auto-rule-grid .panel.collapsible:not(.open) .right-panel {
+  flex-wrap: wrap;
+}
+.auto-rule-grid .panel.collapsible:not(.open) .right-panel .chevron {
+  margin-left: auto;
+}
+
+/* a rule's own screen: the top bar with Voltar */
+.rule-topbar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+/* the list's cards are links */
+.panel-toggle.rule-card-link {
+  text-decoration: none;
+}
+
+/* a video's rule: the video on the left (pinned), the rule on the right */
+.rule-layout {
+  display: block;
+}
+.rule-layout.has-player {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+}
+.rule-layout.has-player.horizontal {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+.rule-player {
+  position: sticky;
+  top: 16px;
+  min-width: 0;
+}
+.rule-player .player.vertical {
+  height: min(calc(100vh - 160px), 760px);
+}
+.rule-player .player.horizontal {
+  width: 100%;
+}
+.rule-column {
+  min-width: 0;
+}
+@media (max-width: 760px) {
+  .rule-layout.has-player,
+  .rule-layout.has-player.horizontal {
+    grid-template-columns: 1fr;
+  }
+  .rule-player {
+    position: static;
+  }
+  .rule-player .player.vertical {
+    height: min(60vh, 560px);
+  }
+}
+
+/* Comments as a chat (components/MissingDmsPanel): ghost cards, replies nested along a thread line */
+.thread {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.thread-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+}
+.thread-card:hover {
+  background: var(--surface-2);
+}
+.thread-card.reply {
+  padding: 8px 10px;
+}
+.thread-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 8px;
+  font-size: 13px;
+}
+.thread-user {
+  font: inherit;
+  font-weight: 500;
+}
+.thread-avatar {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--surface-3);
+  color: var(--text-2);
+  font: 600 11px / 1 var(--sans);
+}
+.thread-badges {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+.thread-text {
+  margin: 0 0 0 30px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.thread-card > .hint {
+  margin: 0 0 0 30px;
+}
+.thread-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 6px;
+  margin-left: 30px;
+}
+.thread-spacer {
+  flex: 1;
+}
+.thread-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-3);
+  font: inherit;
+  font-size: 12.5px;
+  cursor: pointer;
+}
+.thread-action:hover:not(:disabled) {
+  background: var(--surface-3);
+  color: var(--text);
+}
+.thread-action.danger:hover:not(:disabled) {
+  color: var(--error);
+}
+.thread-action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.thread-confirm {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  font-size: 12.5px;
+  color: var(--error);
+}
+/* the replies: a vertical line on the left, as the app threads them */
+.thread-replies {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 4px 0 0 11px;
+  padding-left: 18px;
+  border-left: 2px solid var(--border);
+}
+.thread-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-left: 30px;
+}
+.thread-composer textarea {
+  width: 100%;
+  resize: vertical;
+}
+.thread-composer-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+}
+.thread-composer-bar .check-toggle,
+.thread-composer-bar .hint {
+  margin-right: auto;
+}
+/* the DM that went, as the bubble the person got */
+.thread-dm {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 340px;
+  padding: 10px 12px;
+}
+.thread-dm-head {
+  font-size: 12.5px;
+  color: var(--text-2);
+}
+.thread-dm p {
+  margin: 0;
+}
+.thread-dm-bubble {
+  align-self: flex-start;
+  padding: 8px 12px;
+  border-radius: 16px;
+  background: var(--surface-3);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.thread-confirm .button.danger {
+  background: var(--error);
+  border-color: var(--error);
+  color: #fff;
+}
+/* the record of what triggered: a closed accordion over the same cards */
+.auto-rule-log .ui-accordion-trigger {
+  gap: 8px;
+  color: var(--text);
+  font-weight: 600;
+}
+.auto-rule-log .ui-accordion-trigger .subtle {
+  font-weight: 400;
+}
+.auto-rule-log-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 8px;
+}
+.thread-detail:empty {
+  display: none;
+}

package/studio/web/styles/components/panel.css

@@ -0,0 +1,115 @@
+/* Panels (.panel, ui/panel.tsx): top bar, collapsible card, avatar group. */
+
+/* --- panels and queue -------------------------------------------------------------------- */
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+  min-width: 0;
+}
+.panel-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.panel-top a.subtle:hover {
+  color: var(--text);
+}
+.category-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 12px;
+}
+.category-actions .button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.category-actions.back {
+  justify-content: flex-start;
+}
+.provider-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+/* overlapping logos, like an avatar group */
+.avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+.avatar-group .provider-logo {
+  box-sizing: border-box;
+  width: 26px;
+  height: 26px;
+  padding: 2px;
+  border-radius: 50%;
+  background: var(--surface-2);
+  border: 1px solid var(--border-strong);
+  box-shadow: 0 0 0 2px var(--surface); /* the ring: separates one logo from the next */
+}
+.avatar-group .provider-logo + .provider-logo {
+  margin-left: -8px;
+}
+.button:hover .avatar-group .provider-logo {
+  box-shadow: 0 0 0 2px var(--surface-2);
+}
+/* collapsible card: the whole header is the button */
+.panel.collapsible {
+  padding: 0;
+}
+.panel.collapsible > .panel-top {
+  margin: 0;
+  font: inherit;
+}
+.panel-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 0;
+  background: none;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--radius);
+}
+.panel-toggle:hover {
+  background: var(--surface-2);
+}
+.panel-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font: 600 15px / 22px var(--sans);
+}
+.right-panel {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--text-3);
+}
+.panel-toggle .chevron {
+  transition: transform 0.2s;
+}
+.panel.collapsible.open .chevron {
+  transform: rotate(180deg);
+}
+.panel.collapsible.open > .panel-top .panel-toggle {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.panel.collapsible > div {
+  padding: 4px 16px 16px;
+}
+.panel.collapsible > div[hidden] {
+  display: none;
+}
+.panel h3 {
+  margin: 16px 0 8px;
+}