@mseep/anything-analyzer 3.6.50

package/src/renderer/components/ReportView.module.css

@@ -0,0 +1,413 @@
+.reportContainer {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Left: main report area */
+.reportMain {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* Toolbar */
+.reportToolbar {
+  height: 38px;
+  background: var(--color-bar);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.toolLabel {
+  font-size: var(--font-size-3xs);
+  color: var(--text-label);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.toolBtn {
+  padding: 4px 10px;
+  border-radius: 5px;
+  font-size: var(--font-size-3xs);
+  color: var(--text-secondary);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  transition: border-color var(--transition-fast), color var(--transition-fast);
+}
+
+.toolBtn:hover {
+  border-color: var(--color-border-hover);
+  color: var(--text-primary);
+}
+
+.toolBtnPrimary {
+  composes: toolBtn;
+  background: var(--color-accent-bg);
+  color: var(--color-accent);
+  border-color: var(--color-accent-border);
+}
+
+.toolSpacer {
+  flex: 1;
+}
+
+/* Report content scrollable area */
+.reportBody {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+  padding: 24px 32px;
+}
+
+.reportScroll {
+  max-width: var(--report-max-width);
+  margin: 0 auto;
+}
+
+/* Report header */
+.reportHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-md);
+}
+
+.reportTitle {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+}
+
+/* Metadata */
+.metaRow {
+  font-size: var(--font-size-3xs);
+  color: var(--text-muted);
+  margin-bottom: 20px;
+  display: flex;
+  gap: 16px;
+}
+
+/* Metadata grid */
+.metaGrid {
+  display: grid;
+  grid-template-columns: auto 1fr auto 1fr;
+  gap: 6px 16px;
+  margin-bottom: var(--space-lg);
+  padding: var(--space-md);
+  background: var(--color-surface);
+  border-radius: var(--radius-button);
+  border: 1px solid var(--color-border-subtle);
+  font-size: var(--font-size-xs);
+}
+
+.metaLabel {
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.metaValue {
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+}
+
+/* Streaming display */
+.streamingContainer {
+  padding: var(--space-lg);
+  overflow: auto;
+  background: var(--color-surface);
+  border-radius: var(--radius-input);
+  border: 1px solid var(--color-border-subtle);
+  min-height: 120px;
+}
+
+.cursor {
+  display: inline-block;
+  width: 8px;
+  height: 16px;
+  background: var(--color-info);
+  animation: blink 1s step-end infinite;
+  vertical-align: text-bottom;
+  margin-left: 2px;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+/* Analyzing state */
+.analyzingHeader {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--space-lg);
+  gap: var(--space-sm);
+  color: var(--color-accent);
+  font-size: var(--font-size-sm);
+  padding: 10px 14px;
+  background: var(--color-accent-bg);
+  border-radius: var(--radius-button);
+  border: 1px solid var(--color-accent-border);
+}
+
+.preparingState {
+  text-align: center;
+  padding: var(--space-4xl);
+  color: var(--text-muted);
+}
+
+/* Empty state */
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+  gap: var(--space-lg);
+}
+
+/* Error alert */
+.errorAlert {
+  width: 80%;
+  max-width: 500px;
+  padding: var(--space-md);
+  background: var(--color-error-bg);
+  border-left: 3px solid var(--color-error);
+  border-radius: var(--radius-button);
+  margin-bottom: var(--space-sm);
+}
+
+.errorTitle {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-error);
+  margin-bottom: 4px;
+}
+
+.errorDesc {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  word-break: break-all;
+}
+
+/* Chat messages */
+.chatMsg {
+  margin-top: var(--space-md);
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-input);
+}
+
+.chatMsgUser {
+  background: var(--color-info-bg);
+  border-left: 3px solid var(--color-info);
+}
+
+.chatMsgAi {
+  background: var(--color-surface);
+  border-left: 3px solid var(--color-success);
+}
+
+/* Chat section */
+.chatSection {
+  border-top: 1px solid var(--color-border);
+  background: var(--color-bar);
+  flex-shrink: 0;
+}
+
+.chatSuggestions {
+  padding: 10px 16px;
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.chatChip {
+  padding: 5px 12px;
+  border-radius: 16px;
+  font-size: var(--font-size-3xs);
+  color: var(--text-secondary);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  cursor: pointer;
+  transition: border-color var(--transition-fast), color var(--transition-fast);
+  font-family: var(--font-sans);
+}
+
+.chatChip:hover {
+  border-color: var(--color-border-hover);
+  color: var(--text-primary);
+}
+
+.chatChip:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.chatInputBar {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 10px;
+}
+
+.chatInput {
+  flex: 1;
+  height: 32px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: var(--font-size-2xs);
+  color: var(--text-secondary);
+  font-family: var(--font-sans);
+  outline: none;
+}
+
+.chatInput:focus {
+  border-color: var(--color-border-hover);
+}
+
+.chatInput::placeholder {
+  color: var(--text-disabled);
+}
+
+.chatSend {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: var(--text-primary);
+  color: var(--color-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  cursor: pointer;
+  border: none;
+  font-family: var(--font-sans);
+  transition: opacity var(--transition-fast);
+}
+
+.chatSend:hover {
+  opacity: 0.9;
+}
+
+.chatSend:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Deprecated: kept for backward compat */
+.quickChips {
+  display: flex;
+  gap: 6px;
+  margin-bottom: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.chatInputRow {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+.chatInputArea {
+  flex-shrink: 0;
+  border-top: 1px solid var(--color-border);
+  padding-top: 10px;
+  margin-top: var(--space-sm);
+}
+
+/* Right: context panel */
+.reportContext {
+  width: var(--report-context-width);
+  border-left: 1px solid var(--color-border);
+  background: var(--color-sidebar);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.contextHeader {
+  padding: 12px 14px;
+  font-size: var(--font-size-3xs);
+  color: var(--text-muted);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.contextSection {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.contextLabel {
+  font-size: var(--font-size-3xs);
+  color: var(--text-label);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+
+.contextItem {
+  font-size: var(--font-size-3xs);
+  color: var(--text-muted);
+  padding: 3px 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.contextDot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.contextEndpoint {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-3xs);
+  color: var(--text-secondary);
+  padding: 4px 8px;
+  background: var(--color-surface);
+  border-radius: 4px;
+  margin: 3px 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.contextMethod {
+  font-size: var(--font-size-3xs);
+  font-weight: 600;
+}
+
+.contextPath {
+  flex: 1;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.contextClickable {
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.contextClickable:hover {
+  color: var(--text-secondary);
+}