flock-core 0.5.0b28__py3-none-any.whl → 0.5.0b51__py3-none-any.whl

flock/frontend/src/components/common/BuildInfo.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+/**
+ * Phase 11: Build Info Display
+ *
+ * Shows build hash and timestamp in UI corner for deployment verification.
+ * Makes it easy to confirm which version of code is running.
+ */
+
+const BuildInfo: React.FC = () => {
+  const buildHash = typeof __BUILD_HASH__ !== 'undefined' ? __BUILD_HASH__ : 'dev';
+  const buildTime = typeof __BUILD_TIMESTAMP__ !== 'undefined' ? __BUILD_TIMESTAMP__ : 'unknown';
+
+  const formattedTime = buildTime !== 'unknown'
+    ? new Date(buildTime).toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      })
+    : 'unknown';
+
+  return (
+    <div
+      style={{
+        fontSize: '10px',
+        color: 'var(--color-text-tertiary, #6b7280)',
+        fontFamily: 'monospace',
+        lineHeight: '1.4',
+        opacity: 0.7,
+      }}
+    >
+      <div>Build: {buildHash}</div>
+      <div>{formattedTime}</div>
+    </div>
+  );
+};
+
+export default BuildInfo;

flock/frontend/src/components/common/EmptyState.module.css

@@ -0,0 +1,115 @@
+/* Empty State Component */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-layout-xl);
+  text-align: center;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.icon {
+  margin-bottom: var(--spacing-6);
+  color: var(--color-text-muted);
+  opacity: 0.6;
+  animation: fadeInScale var(--duration-slow) var(--ease-smooth);
+}
+
+.svgIcon {
+  display: block;
+}
+
+.title {
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-3) 0;
+  line-height: var(--line-height-tight);
+  animation: fadeIn var(--duration-slow) var(--ease-smooth);
+  animation-delay: calc(var(--duration-fast));
+}
+
+.description {
+  font-size: var(--font-size-body-sm);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+  margin: 0 0 var(--spacing-6) 0;
+  animation: fadeIn var(--duration-slow) var(--ease-smooth);
+  animation-delay: calc(var(--duration-fast) * 2);
+}
+
+.action {
+  padding: var(--space-component-sm) var(--space-component-lg);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-on-primary);
+  background: var(--color-primary-500);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-colors), var(--transition-shadow);
+  animation: fadeInUp var(--duration-slow) var(--ease-smooth);
+  animation-delay: calc(var(--duration-fast) * 3);
+}
+
+.action:hover {
+  background: var(--color-primary-600);
+  box-shadow: var(--shadow-md);
+}
+
+.action:active {
+  background: var(--color-primary-700);
+  box-shadow: var(--shadow-xs);
+  transform: translateY(1px);
+}
+
+.action:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-glow-primary);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .icon,
+  .title,
+  .description,
+  .action {
+    animation: none;
+  }
+}

flock/frontend/src/components/common/EmptyState.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import styles from './EmptyState.module.css';
+
+interface EmptyStateProps {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+/**
+ * Elegant empty state component with optional CTA
+ */
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  icon,
+  title,
+  description,
+  action,
+}) => {
+  return (
+    <div className={styles.container}>
+      {icon && <div className={styles.icon}>{icon}</div>}
+
+      <h3 className={styles.title}>{title}</h3>
+
+      {description && (
+        <p className={styles.description}>{description}</p>
+      )}
+
+      {action && (
+        <button
+          className={styles.action}
+          onClick={action.onClick}
+        >
+          {action.label}
+        </button>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Icon components for common empty states
+ */
+export const EmptyGraphIcon: React.FC = () => (
+  <svg width="64" height="64" viewBox="0 0 64 64" fill="none" className={styles.svgIcon}>
+    <circle
+      cx="20"
+      cy="32"
+      r="8"
+      stroke="currentColor"
+      strokeWidth="2"
+      fill="none"
+    />
+    <circle
+      cx="44"
+      cy="20"
+      r="8"
+      stroke="currentColor"
+      strokeWidth="2"
+      fill="none"
+    />
+    <circle
+      cx="44"
+      cy="44"
+      r="8"
+      stroke="currentColor"
+      strokeWidth="2"
+      fill="none"
+    />
+    <line
+      x1="28"
+      y1="32"
+      x2="36"
+      y2="24"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeDasharray="4 4"
+    />
+    <line
+      x1="28"
+      y1="32"
+      x2="36"
+      y2="40"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeDasharray="4 4"
+    />
+  </svg>
+);
+
+export const EmptyMessageIcon: React.FC = () => (
+  <svg width="64" height="64" viewBox="0 0 64 64" fill="none" className={styles.svgIcon}>
+    <rect
+      x="8"
+      y="16"
+      width="48"
+      height="32"
+      rx="4"
+      stroke="currentColor"
+      strokeWidth="2"
+      fill="none"
+    />
+    <line
+      x1="16"
+      y1="26"
+      x2="40"
+      y2="26"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      opacity="0.5"
+    />
+    <line
+      x1="16"
+      y1="34"
+      x2="48"
+      y2="34"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      opacity="0.5"
+    />
+  </svg>
+);

flock/frontend/src/components/common/ErrorBoundary.module.css

@@ -0,0 +1,169 @@
+/* Error Boundary Component */
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  padding: var(--space-layout-md);
+  background: var(--color-bg-base);
+}
+
+.content {
+  max-width: 500px;
+  text-align: center;
+  padding: var(--space-layout-lg);
+  background: var(--color-bg-surface);
+  border: var(--border-subtle);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+}
+
+.icon {
+  color: var(--color-error);
+  margin-bottom: var(--spacing-6);
+  animation: shake 0.5s var(--ease-smooth);
+}
+
+.title {
+  font-size: var(--font-size-h2);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-4) 0;
+  line-height: var(--line-height-tight);
+}
+
+.description {
+  font-size: var(--font-size-body);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+  margin: 0 0 var(--spacing-6) 0;
+}
+
+.details {
+  margin: var(--spacing-6) 0;
+  text-align: left;
+  background: var(--color-bg-base);
+  border: var(--border-default);
+  border-radius: var(--radius-md);
+  padding: var(--space-component-md);
+}
+
+.summary {
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  user-select: none;
+  padding: var(--spacing-2);
+  margin: calc(var(--space-component-md) * -1);
+  margin-bottom: var(--spacing-3);
+}
+
+.summary:hover {
+  color: var(--color-text-primary);
+}
+
+.errorMessage {
+  font-size: var(--font-size-body-sm);
+  color: var(--color-error-light);
+  margin-bottom: var(--spacing-3);
+  line-height: var(--line-height-relaxed);
+}
+
+.stackTrace {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-caption);
+  color: var(--color-text-tertiary);
+  background: var(--color-bg-elevated);
+  padding: var(--space-component-sm);
+  border-radius: var(--radius-sm);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.actions {
+  display: flex;
+  gap: var(--gap-md);
+  justify-content: center;
+}
+
+.primaryButton {
+  padding: var(--space-component-sm) var(--space-component-lg);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-on-primary);
+  background: var(--color-primary-500);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-colors), var(--transition-shadow);
+}
+
+.primaryButton:hover {
+  background: var(--color-primary-600);
+  box-shadow: var(--shadow-md);
+}
+
+.primaryButton:active {
+  background: var(--color-primary-700);
+  box-shadow: var(--shadow-xs);
+  transform: translateY(1px);
+}
+
+.primaryButton:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-glow-primary);
+}
+
+.secondaryButton {
+  padding: var(--space-component-sm) var(--space-component-lg);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  background: transparent;
+  border: var(--border-default);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition-colors);
+}
+
+.secondaryButton:hover {
+  background: var(--color-bg-overlay);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-strong);
+}
+
+.secondaryButton:active {
+  transform: translateY(1px);
+}
+
+.secondaryButton:focus-visible {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-glow-primary);
+}
+
+/* Animations */
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-4px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(4px);
+  }
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .icon {
+    animation: none;
+  }
+}

flock/frontend/src/components/common/ErrorBoundary.tsx

@@ -0,0 +1,118 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+import styles from './ErrorBoundary.module.css';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+/**
+ * Error Boundary component to catch and display React errors gracefully
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    this.setState({ errorInfo });
+  }
+
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  handleReload = () => {
+    window.location.reload();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className={styles.container} role="alert">
+          <div className={styles.content}>
+            <div className={styles.icon}>
+              <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
+                <circle
+                  cx="32"
+                  cy="32"
+                  r="28"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  fill="none"
+                />
+                <path
+                  d="M32 20v16M32 44v.5"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </div>
+
+            <h2 className={styles.title}>Something went wrong</h2>
+
+            <p className={styles.description}>
+              An unexpected error occurred. You can try resetting the component or reloading the page.
+            </p>
+
+            {this.state.error && import.meta.env.DEV && (
+              <details className={styles.details}>
+                <summary className={styles.summary}>Error Details</summary>
+                <div className={styles.errorMessage}>
+                  <strong>Error:</strong> {this.state.error.toString()}
+                </div>
+                {this.state.errorInfo && (
+                  <pre className={styles.stackTrace}>
+                    {this.state.errorInfo.componentStack}
+                  </pre>
+                )}
+              </details>
+            )}
+
+            <div className={styles.actions}>
+              <button
+                className={styles.primaryButton}
+                onClick={this.handleReset}
+              >
+                Try Again
+              </button>
+              <button
+                className={styles.secondaryButton}
+                onClick={this.handleReload}
+              >
+                Reload Page
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}