synthos 0.10.1 → 0.11.1

package/static-files/{shell.css → shell.v3.css}

@@ -183,6 +183,45 @@ body:not(.chat-collapsed) .shell-toolbar-btn#builderToggle {
     color: var(--themePrimary);
 }
 
+/* User message body — preserves blank lines and wraps long lines. */
+.chat-user-body {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+    line-height: 1.5;
+}
+
+/* Clamp tall user messages until the "More" toggle is pressed. */
+.chat-user-body--clamped {
+    max-height: calc(1.5em * 6);
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
+}
+
+.chat-user-body--clamped.chat-user-body--expanded {
+    max-height: none;
+    -webkit-mask-image: none;
+    mask-image: none;
+}
+
+.chat-more-toggle {
+    margin-top: 6px;
+    padding: 2px 8px;
+    background: transparent;
+    color: var(--themePrimary, #58a6ff);
+    border: 1px solid var(--themePrimary, #58a6ff);
+    border-radius: 4px;
+    font-size: 0.85em;
+    cursor: pointer;
+    font-family: inherit;
+}
+
+.chat-more-toggle:hover {
+    background: var(--themePrimary, #58a6ff);
+    color: var(--bodyBackground, #fff);
+}
+
 .chat-message p code {
     background: var(--bodyBackgroundChecked);
     padding: 2px 6px;
@@ -192,6 +231,95 @@ body:not(.chat-collapsed) .shell-toolbar-btn#builderToggle {
     border: 1px solid var(--bodyDivider);
 }
 
+/* --- Chat Markdown Styles ------------------------------------------------- */
+.chat-message a {
+    color: var(--themePrimary, #58a6ff);
+    text-decoration: underline;
+    cursor: pointer;
+}
+.chat-message a:hover {
+    color: var(--themeDark, #388bfd);
+}
+/* Send links — button-like appearance */
+.chat-message a[href^="send:"] {
+    display: inline-block;
+    padding: 2px 8px;
+    border: 1px solid var(--themePrimary, #58a6ff);
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 0.9em;
+}
+.chat-message a[href^="send:"]:hover {
+    background: var(--themePrimary, #58a6ff);
+    color: var(--bodyBackground, #fff);
+}
+/* Suggestion chips — aggregated at the bottom of a message */
+.suggestion-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 10px;
+}
+.suggestion-chip {
+    padding: 5px 12px;
+    font-size: 12px;
+    border: 1px solid var(--bodyDivider);
+    border-radius: 16px;
+    background: var(--defaultStateBackground);
+    color: var(--bodySubtext);
+    cursor: pointer;
+    transition: all 0.2s;
+    line-height: 1.4;
+    font-family: inherit;
+}
+.suggestion-chip:hover {
+    border-color: var(--themePrimary);
+    color: var(--themePrimary);
+    background: var(--bodyBackgroundHovered);
+}
+.suggestion-chip:disabled {
+    opacity: 0.4;
+    cursor: default;
+    pointer-events: none;
+}
+/* While a chat request is in flight, visually disable every inline
+ * affordance inside the chat panel: suggestion chips, send: links
+ * ("Let me try to fix it"), undo / try again links, and the Reset /
+ * Clear-conversation link. The .chat-busy class is toggled on
+ * #chatMessages by setChatBusy() in shell.v3.js. */
+.chat-busy .suggestion-chip,
+.chat-busy .synthos-undo-link a,
+.chat-busy .synthos-clear-action a,
+.chat-busy a[href^="send:"] {
+    opacity: 0.4;
+    pointer-events: none;
+    cursor: not-allowed;
+}
+/* Markdown block elements inside chat messages */
+.chat-message ul, .chat-message ol {
+    margin: 4px 0 4px 20px;
+    padding: 0;
+}
+.chat-message pre {
+    background: var(--bodyBackgroundChecked);
+    border: 1px solid var(--bodyDivider);
+    border-radius: 5px;
+    padding: 8px;
+    overflow-x: auto;
+    font-size: 0.9em;
+}
+.chat-message pre code {
+    background: none;
+    border: none;
+    padding: 0;
+}
+.chat-message blockquote {
+    border-left: 3px solid var(--themePrimary, #58a6ff);
+    margin: 4px 0;
+    padding: 2px 10px;
+    color: var(--bodySubtext);
+}
+
 /* --- Chat Form ------------------------------------------------------------ */
 #chatForm {
     display: flex;
@@ -213,6 +341,8 @@ body:not(.chat-collapsed) .shell-toolbar-btn#builderToggle {
     background: transparent;
     resize: none;
     min-height: 48px;
+    max-height: 120px;
+    overflow-y: auto;
     outline: none;
     font-family: inherit;
     font-size: 14px;
@@ -229,16 +359,19 @@ body:not(.chat-collapsed) .shell-toolbar-btn#builderToggle {
 .viewer-panel {
     flex: 1;
     min-width: 0;
-    padding: 20px;
+    padding: 0;
     background: var(--bodyBackground);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
     position: relative;
     overflow: hidden;
 }
 
+#viewerFrame {
+    width: 100%;
+    height: 100%;
+    border: none;
+    display: block;
+}
+
 .viewer-panel.full-viewer {
     padding: 0;
 }
@@ -263,28 +396,145 @@ body:not(.chat-collapsed) .shell-toolbar-btn#builderToggle {
 /* --- Loading -------------------------------------------------------------- */
 .loading-overlay {
     display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--overlayBackground, rgba(0,0,0,0.5));
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    z-index: 1000;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
+}
+
+/* Masked inner layer: everything here fades at the corners so the page peeks
+   through. The progress bar is a sibling (outside the mask) so it stays 100%
+   opaque. JS applies the radial mask on show using LOADING_FADE_SIZE /
+   LOADING_FADE_SOFTNESS constants. */
+.loading-overlay .loading-masked {
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: var(--bodyBackground, #fff);
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    z-index: 1000;
+    justify-content: center;
 }
 
-.spinner {
-    width: 50px;
-    height: 50px;
-    border: 4px solid var(--themeTertiary, #71afe5);
-    border-top-color: var(--themePrimary, #0078d4);
-    border-radius: 50%;
-    animation: shell-spin 1s linear infinite;
+.loading-overlay .loading-bp-anim {
+    width: 80px; height: 72px;
+    margin-bottom: var(--spacingL1, 20px);
+    position: relative;
+}
+.loading-overlay .loading-bp-anim svg {
+    width: 80px; height: 72px; overflow: visible;
+}
+.loading-overlay .bp-line {
+    stroke: var(--themePrimary); stroke-width: 2;
+    fill: none; stroke-linecap: round; stroke-linejoin: round;
+}
+.loading-overlay .bp-fill-rect {
+    fill: var(--themePrimary); opacity: 0;
+}
+.loading-overlay .bp-frame {
+    stroke-dasharray: 280; stroke-dashoffset: 280;
+    animation: bp-draw 3s ease-in-out infinite;
+}
+.loading-overlay .bp-inner1 {
+    stroke-dasharray: 60; stroke-dashoffset: 60;
+    animation: bp-draw-short 3s ease-in-out infinite;
+    animation-delay: 0.6s;
+}
+.loading-overlay .bp-inner2 {
+    stroke-dasharray: 60; stroke-dashoffset: 60;
+    animation: bp-draw-short 3s ease-in-out infinite;
+    animation-delay: 0.9s;
+}
+.loading-overlay .bp-inner3 {
+    stroke-dasharray: 40; stroke-dashoffset: 40;
+    animation: bp-draw-short2 3s ease-in-out infinite;
+    animation-delay: 1.2s;
+}
+.loading-overlay .bp-inner4 {
+    stroke-dasharray: 30; stroke-dashoffset: 30;
+    animation: bp-draw-short3 3s ease-in-out infinite;
+    animation-delay: 1.0s;
+}
+.loading-overlay .bp-fill1 { animation: bp-fill 3s ease-in-out infinite; animation-delay: 1.5s; }
+.loading-overlay .bp-fill2 { animation: bp-fill 3s ease-in-out infinite; animation-delay: 1.8s; }
+
+@keyframes bp-draw {
+    0% { stroke-dashoffset: 280; }
+    40% { stroke-dashoffset: 0; }
+    75% { stroke-dashoffset: 0; }
+    100% { stroke-dashoffset: 280; }
+}
+@keyframes bp-draw-short {
+    0% { stroke-dashoffset: 60; }
+    30% { stroke-dashoffset: 0; }
+    70% { stroke-dashoffset: 0; }
+    100% { stroke-dashoffset: 60; }
+}
+@keyframes bp-draw-short2 {
+    0% { stroke-dashoffset: 40; }
+    30% { stroke-dashoffset: 0; }
+    70% { stroke-dashoffset: 0; }
+    100% { stroke-dashoffset: 40; }
+}
+@keyframes bp-draw-short3 {
+    0% { stroke-dashoffset: 30; }
+    30% { stroke-dashoffset: 0; }
+    70% { stroke-dashoffset: 0; }
+    100% { stroke-dashoffset: 30; }
+}
+@keyframes bp-fill {
+    0% { opacity: 0; }
+    25% { opacity: 0.6; }
+    65% { opacity: 0.6; }
+    100% { opacity: 0; }
+}
+
+.loading-overlay .loading-status {
+    font-size: var(--fontSizeXLarge, 20px);
+    font-weight: var(--fontWeightSemibold, 600);
+    color: var(--bodyText);
+    margin-bottom: var(--spacingS1, 8px);
 }
+.loading-overlay .loading-substatus {
+    font-size: var(--fontSizeMedium, 14px);
+    color: var(--bodySubtext);
+    margin-bottom: var(--spacingL1, 20px);
+    min-height: 20px;
+    transition: opacity 0.3s ease;
+}
+.loading-overlay .loading-substatus.fade-out { opacity: 0; }
 
-@keyframes shell-spin {
-    to { transform: rotate(360deg); }
+.loading-overlay .loading-tip-area {
+    display: flex; align-items: center; gap: 10px;
+    color: var(--bodySubtext); font-size: var(--fontSizeMedium, 14px);
+    margin-top: var(--spacingM, 16px);
+    padding: 0 var(--spacingL1, 20px);
+    text-align: center;
+}
+.loading-overlay .loading-bulb { color: var(--yellow, #ffd400); font-size: 16px; }
+
+/* Progress bar — sibling of .loading-masked, unmasked, always 100% opacity. */
+.loading-overlay .loading-progress-bar {
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 4px;
+    background: var(--neutralLighter, #e1dfdd);
+    overflow: hidden;
+    opacity: 1;
+    z-index: 1;
+}
+.loading-overlay .loading-progress-fill {
+    height: 100%; width: 30%;
+    background: linear-gradient(90deg, var(--themePrimary), var(--themeTertiary));
+    border-radius: 0 2px 2px 0;
+    animation: shell-loading-indeterminate 1.8s ease-in-out infinite;
+}
+@keyframes shell-loading-indeterminate {
+    0% { transform: translateX(-100%); width: 30%; }
+    50% { width: 50%; }
+    100% { transform: translateX(350%); width: 30%; }
 }
 
 /* --- Scrollbar ------------------------------------------------------------ */
@@ -687,7 +937,6 @@ body.chat-collapsed .chat-panel {
 }
 
 /* --- Shared page rules ---------------------------------------------------- */
-#loadingOverlay { position: absolute; }
 .chat-input:disabled { opacity: 0.5; cursor: not-allowed; }
 
 /* --- Attach Button -------------------------------------------------------- */