@objectql/studio 1.3.1

package/src/components/ObjectList.tsx

@@ -0,0 +1,137 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+
+interface ObjectInfo {
+  name: string;
+  label?: string;
+  icon?: string;
+  recordCount?: number;
+}
+
+function ObjectList() {
+  const [objects, setObjects] = useState<ObjectInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchObjects();
+  }, []);
+
+  const fetchObjects = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/metadata/objects');
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      setObjects(data.objects || []);
+    } catch (e: any) {
+      console.error('Failed to fetch objects:', e);
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="loading">
+        <div className="spinner"></div>
+        <p>Loading objects...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="alert alert-error">
+        <strong>Error:</strong> {error}
+      </div>
+    );
+  }
+
+  if (objects.length === 0) {
+    return (
+      <div className="card">
+        <h2 className="card-title">No Objects Found</h2>
+        <p>No objects are registered in the ObjectQL instance.</p>
+        <p className="alert alert-info" style={{ marginTop: '1rem' }}>
+          Make sure your ObjectQL server has loaded object definitions.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="card">
+        <h2 className="card-title">Database Objects</h2>
+        <p style={{ color: '#718096', marginBottom: '1.5rem' }}>
+          Browse and manage data across all registered objects
+        </p>
+
+        <div className="grid grid-2">
+          {objects.map((obj) => (
+            <Link
+              key={obj.name}
+              to={`/object/${obj.name}`}
+              style={{ textDecoration: 'none', color: 'inherit' }}
+            >
+              <div
+                className="card"
+                style={{
+                  cursor: 'pointer',
+                  transition: 'all 0.2s',
+                  border: '1px solid #e2e8f0',
+                }}
+                onMouseOver={(e) => {
+                  e.currentTarget.style.borderColor = '#667eea';
+                  e.currentTarget.style.transform = 'translateY(-2px)';
+                  e.currentTarget.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
+                }}
+                onMouseOut={(e) => {
+                  e.currentTarget.style.borderColor = '#e2e8f0';
+                  e.currentTarget.style.transform = 'translateY(0)';
+                  e.currentTarget.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.1)';
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                  <div
+                    style={{
+                      width: '48px',
+                      height: '48px',
+                      borderRadius: '8px',
+                      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      color: 'white',
+                      fontSize: '1.5rem',
+                      fontWeight: 'bold',
+                    }}
+                  >
+                    {obj.icon || obj.name.charAt(0).toUpperCase()}
+                  </div>
+                  <div style={{ flex: 1 }}>
+                    <h3 style={{ fontSize: '1.125rem', fontWeight: '600', marginBottom: '0.25rem' }}>
+                      {obj.label || obj.name}
+                    </h3>
+                    <p style={{ fontSize: '0.875rem', color: '#718096' }}>
+                      {obj.name}
+                      {typeof obj.recordCount === 'number' && (
+                        <span> • {obj.recordCount} records</span>
+                      )}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ObjectList;

package/src/components/RecordDetail.tsx

@@ -0,0 +1,227 @@
+import { useState, useEffect } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+
+interface Record {
+  _id?: string;
+  id?: string;
+  [key: string]: any;
+}
+
+function RecordDetail() {
+  const { objectName, recordId } = useParams<{ objectName: string; recordId: string }>();
+  const navigate = useNavigate();
+  const [record, setRecord] = useState<Record | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [editing, setEditing] = useState(false);
+  const [formData, setFormData] = useState<Record>({});
+
+  useEffect(() => {
+    fetchRecord();
+  }, [objectName, recordId]);
+
+  const fetchRecord = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/objectql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          op: 'findOne',
+          object: objectName,
+          args: {
+            filters: [['_id', '=', recordId]].concat(
+              recordId ? [['id', '=', recordId]] : []
+            )
+          }
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const result = await response.json();
+      setRecord(result.data);
+      setFormData(result.data || {});
+    } catch (e: any) {
+      console.error('Failed to fetch record:', e);
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUpdate = async () => {
+    try {
+      const response = await fetch('/api/objectql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          op: 'update',
+          object: objectName,
+          args: {
+            id: recordId,
+            data: formData
+          }
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to update record');
+      }
+
+      setEditing(false);
+      fetchRecord();
+    } catch (e: any) {
+      alert(`Error: ${e.message}`);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!confirm('Are you sure you want to delete this record?')) {
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/objectql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          op: 'delete',
+          object: objectName,
+          args: { id: recordId }
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to delete record');
+      }
+
+      navigate(`/object/${objectName}`);
+    } catch (e: any) {
+      alert(`Error: ${e.message}`);
+    }
+  };
+
+  const formatValue = (value: any): string => {
+    if (value === null || value === undefined) return '-';
+    if (typeof value === 'object') return JSON.stringify(value, null, 2);
+    if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+    return String(value);
+  };
+
+  if (loading) {
+    return (
+      <div className="loading">
+        <div className="spinner"></div>
+        <p>Loading record...</p>
+      </div>
+    );
+  }
+
+  if (error || !record) {
+    return (
+      <div>
+        <div className="breadcrumb">
+          <Link to="/">Objects</Link>
+          <span className="breadcrumb-separator">/</span>
+          <Link to={`/object/${objectName}`}>{objectName}</Link>
+          <span className="breadcrumb-separator">/</span>
+          <span>{recordId}</span>
+        </div>
+        <div className="alert alert-error">
+          <strong>Error:</strong> {error || 'Record not found'}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="breadcrumb">
+        <Link to="/">Objects</Link>
+        <span className="breadcrumb-separator">/</span>
+        <Link to={`/object/${objectName}`}>{objectName}</Link>
+        <span className="breadcrumb-separator">/</span>
+        <span>{recordId}</span>
+      </div>
+
+      <div className="card">
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+          <h2 className="card-title" style={{ marginBottom: 0 }}>Record Detail</h2>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            {editing ? (
+              <>
+                <button className="btn btn-primary" onClick={handleUpdate}>Save</button>
+                <button className="btn btn-secondary" onClick={() => {
+                  setEditing(false);
+                  setFormData(record);
+                }}>Cancel</button>
+              </>
+            ) : (
+              <>
+                <button className="btn btn-primary" onClick={() => setEditing(true)}>Edit</button>
+                <button className="btn btn-danger" onClick={handleDelete}>Delete</button>
+              </>
+            )}
+          </div>
+        </div>
+
+        {editing ? (
+          <div>
+            {Object.entries(formData).map(([key, value]) => (
+              <div key={key} className="form-group">
+                <label className="form-label">{key}</label>
+                {typeof value === 'object' && value !== null ? (
+                  <textarea
+                    className="form-textarea"
+                    value={JSON.stringify(value, null, 2)}
+                    onChange={(e) => {
+                      try {
+                        setFormData({ ...formData, [key]: JSON.parse(e.target.value) });
+                      } catch {
+                        // Invalid JSON, keep as string
+                      }
+                    }}
+                  />
+                ) : (
+                  <input
+                    type="text"
+                    className="form-input"
+                    value={String(value || '')}
+                    onChange={(e) => setFormData({ ...formData, [key]: e.target.value })}
+                    disabled={key === '_id' || key === 'id'}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="table-container">
+            <table className="table">
+              <thead>
+                <tr>
+                  <th style={{ width: '30%' }}>Field</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.entries(record).map(([key, value]) => (
+                  <tr key={key}>
+                    <td><strong>{key}</strong></td>
+                    <td style={{ whiteSpace: 'pre-wrap', fontFamily: typeof value === 'object' ? 'monospace' : 'inherit' }}>
+                      {formatValue(value)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default RecordDetail;

package/src/components/SchemaInspector.tsx

@@ -0,0 +1,204 @@
+import { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+
+interface Field {
+  name: string;
+  type?: string;
+  label?: string;
+  required?: boolean;
+  defaultValue?: any;
+}
+
+interface ObjectMetadata {
+  name: string;
+  label?: string;
+  fields?: Field[];
+  [key: string]: any;
+}
+
+function SchemaInspector() {
+  const { objectName } = useParams<{ objectName?: string }>();
+  const [objects, setObjects] = useState<ObjectMetadata[]>([]);
+  const [selectedObject, setSelectedObject] = useState<ObjectMetadata | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchObjects();
+  }, []);
+
+  useEffect(() => {
+    if (objectName) {
+      fetchObjectDetails(objectName);
+    }
+  }, [objectName]);
+
+  const fetchObjects = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/metadata/objects');
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      setObjects(data.objects || []);
+    } catch (e: any) {
+      console.error('Failed to fetch objects:', e);
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchObjectDetails = async (name: string) => {
+    try {
+      const response = await fetch(`/api/metadata/objects/${name}`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      setSelectedObject(data);
+    } catch (e: any) {
+      console.error('Failed to fetch object details:', e);
+      setError(e.message);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="loading">
+        <div className="spinner"></div>
+        <p>Loading schema...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="alert alert-error">
+        <strong>Error:</strong> {error}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {objectName && (
+        <div className="breadcrumb">
+          <Link to="/schema">Schema</Link>
+          <span className="breadcrumb-separator">/</span>
+          <span>{objectName}</span>
+        </div>
+      )}
+
+      <div className="card">
+        <h2 className="card-title">Schema Inspector</h2>
+        <p style={{ color: '#718096', marginBottom: '1.5rem' }}>
+          View object definitions and field metadata
+        </p>
+
+        {!objectName ? (
+          <div className="grid grid-2">
+            {objects.map((obj) => (
+              <Link
+                key={obj.name}
+                to={`/schema/${obj.name}`}
+                style={{ textDecoration: 'none', color: 'inherit' }}
+              >
+                <div
+                  className="card"
+                  style={{
+                    cursor: 'pointer',
+                    transition: 'all 0.2s',
+                    border: '1px solid #e2e8f0',
+                  }}
+                  onMouseOver={(e) => {
+                    e.currentTarget.style.borderColor = '#667eea';
+                    e.currentTarget.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
+                  }}
+                  onMouseOut={(e) => {
+                    e.currentTarget.style.borderColor = '#e2e8f0';
+                    e.currentTarget.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.1)';
+                  }}
+                >
+                  <h3 style={{ fontSize: '1.125rem', fontWeight: '600', marginBottom: '0.25rem' }}>
+                    {obj.label || obj.name}
+                  </h3>
+                  <p style={{ fontSize: '0.875rem', color: '#718096' }}>
+                    {obj.name}
+                  </p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        ) : selectedObject ? (
+          <div>
+            <div style={{ marginBottom: '2rem' }}>
+              <h3 style={{ fontSize: '1.25rem', fontWeight: '600', marginBottom: '0.5rem' }}>
+                {selectedObject.label || selectedObject.name}
+              </h3>
+              <p style={{ color: '#718096' }}>API Name: <code>{selectedObject.name}</code></p>
+            </div>
+
+            {selectedObject.fields && selectedObject.fields.length > 0 ? (
+              <div>
+                <h4 style={{ fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }}>Fields</h4>
+                <div className="table-container">
+                  <table className="table">
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+                        <th>Label</th>
+                        <th>Type</th>
+                        <th>Required</th>
+                        <th>Default Value</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {selectedObject.fields.map((field) => (
+                        <tr key={field.name}>
+                          <td><code>{field.name}</code></td>
+                          <td>{field.label || '-'}</td>
+                          <td>
+                            <span className="badge badge-primary">{field.type || 'text'}</span>
+                          </td>
+                          <td>{field.required ? 'Yes' : 'No'}</td>
+                          <td>{field.defaultValue !== undefined ? String(field.defaultValue) : '-'}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            ) : (
+              <div className="alert alert-info">
+                No field metadata available for this object.
+              </div>
+            )}
+
+            <div style={{ marginTop: '2rem' }}>
+              <h4 style={{ fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }}>Raw Definition</h4>
+              <pre style={{
+                background: '#f7fafc',
+                padding: '1rem',
+                borderRadius: '6px',
+                overflow: 'auto',
+                fontSize: '0.875rem',
+                border: '1px solid #e2e8f0'
+              }}>
+                {JSON.stringify(selectedObject, null, 2)}
+              </pre>
+            </div>
+          </div>
+        ) : (
+          <div className="loading">
+            <div className="spinner"></div>
+            <p>Loading object details...</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default SchemaInspector;

package/src/index.css

@@ -0,0 +1,23 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #f5f5f5;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+#root {
+  min-height: 100vh;
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}