sqlite-hub 0.17.2 → 1.1.0

package/frontend/styles/components.css

@@ -624,13 +624,35 @@
 }
 
 .status-badge {
+    align-items: center;
     border: 1px solid transparent;
+    box-sizing: border-box;
     display: inline-flex;
     font-size: var(--font-size-micro);
     font-weight: 700;
+    justify-content: center;
     letter-spacing: 0.12em;
+    line-height: 1;
     padding: 0.125rem 0.5rem;
     text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.query-history-badge-row {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+    width: 100%;
+}
+
+.query-history-badge-row .status-badge {
+    min-height: var(--button-height);
+    min-width: 8.5rem;
+}
+
+.query-history-badge-row--compact .status-badge {
+    min-width: 6.75rem;
 }
 
 .status-badge--primary {
@@ -746,6 +768,76 @@
     width: clamp(20rem, 26vw, 22.5rem);
 }
 
+.query-history-panel__header {
+    border-bottom: 1px solid var(--border-medium);
+    padding: var(--spacing-4);
+}
+
+.query-history-tabs {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing-2);
+    margin-top: var(--spacing-4);
+}
+
+.query-history-tabs__count {
+    color: var(--text-variant-subtle);
+    font-family: var(--font-family-mono);
+    font-size: 10px;
+    letter-spacing: 0.16em;
+    margin-left: auto;
+    text-transform: uppercase;
+}
+
+.query-history-list-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--spacing-3);
+}
+
+.query-history-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3);
+}
+
+.query-editor-toolbar {
+    align-items: center;
+    display: grid;
+    gap: var(--spacing-4);
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+
+.query-editor-toolbar__left,
+.query-editor-toolbar__center,
+.query-editor-toolbar__right {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing-3);
+}
+
+.query-editor-toolbar__center {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.query-editor-toolbar__right {
+    justify-content: flex-end;
+}
+
+@media (max-width: 980px) {
+    .query-editor-toolbar {
+        grid-template-columns: 1fr;
+    }
+
+    .query-editor-toolbar__left,
+    .query-editor-toolbar__center,
+    .query-editor-toolbar__right {
+        justify-content: flex-start;
+    }
+}
+
 .table-designer-sidebar {
     background: var(--color-surface-low);
     border-right: 1px solid var(--border-medium);
@@ -1478,6 +1570,63 @@ input.table-designer-main__name[type='text'] {
     background: var(--primary-alpha-08);
 }
 
+.query-history-item-main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    text-align: left;
+}
+
+.query-history-item-title {
+    color: var(--color-on-surface);
+    display: block;
+    font-family: var(--font-family-headline);
+    font-size: 0.875rem;
+    font-weight: 700;
+    letter-spacing: 0;
+    line-height: 1.15;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.query-history-item.is-active .query-history-item-title,
+.query-history-item-hit.is-active .query-history-item-title {
+    color: var(--color-primary-container);
+}
+
+.query-history-item-footer {
+    align-items: center;
+    border-top: 1px solid var(--border-subtle);
+    display: flex;
+    gap: var(--spacing-3);
+    justify-content: space-between;
+    padding: var(--spacing-2) var(--spacing-3) var(--spacing-3);
+}
+
+.query-history-item-meta {
+    color: var(--text-variant-subtle);
+    display: flex;
+    flex-wrap: wrap;
+    font-family: var(--font-family-mono);
+    font-size: 10px;
+    gap: var(--spacing-2);
+    letter-spacing: 0.14em;
+    min-width: 0;
+    text-transform: uppercase;
+}
+
+.query-history-item-actions {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--spacing-1);
+    margin-left: auto;
+}
+
 .query-history-icon-button {
     background: transparent;
     border: 0;
@@ -1522,10 +1671,16 @@ input.table-designer-main__name[type='text'] {
 }
 
 .query-history-sql-preview {
+    color: rgb(var(--rgb-on-surface-variant) / 0.75);
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
+    font-family: var(--font-family-mono);
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+    margin-top: var(--spacing-2);
     overflow: hidden;
+    text-align: left;
 }
 
 .query-history-detail-sql {

package/frontend/styles/structure-graph.css

@@ -12,26 +12,36 @@
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
-    justify-content: space-between;
     padding: 1rem 1.25rem;
 }
 
 .structure-graph__toolbar-main {
     align-items: center;
     display: flex;
-    flex: 1 1 20rem;
+    flex: 1 1 0;
     flex-wrap: wrap;
     gap: 0.875rem;
+    justify-content: flex-start;
     min-width: 0;
 }
 
 .structure-graph__toolbar-actions {
     align-items: center;
     display: flex;
-    flex: 0 0 auto;
+    flex: 0 1 auto;
+    flex-wrap: wrap;
+    gap: 0.625rem;
+    justify-content: center;
+}
+
+.structure-graph__toolbar-inspector {
+    align-items: center;
+    display: flex;
+    flex: 1 1 0;
     flex-wrap: wrap;
     gap: 0.625rem;
     justify-content: flex-end;
+    min-width: 0;
 }
 
 .structure-graph__toolbar .standard-button,
@@ -72,11 +82,11 @@
 
 .structure-graph__canvas-shell {
     background:
-        linear-gradient(rgba(138, 123, 52, 0.09) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(138, 123, 52, 0.08) 1px, transparent 1px),
-        radial-gradient(circle at top left, rgb(var(--rgb-primary) / 0.14), transparent 30%),
-        radial-gradient(circle at bottom right, rgba(45, 250, 255, 0.1), transparent 24%),
-        linear-gradient(to bottom, rgba(27, 27, 24, 0.99), rgba(9, 10, 11, 0.99));
+        linear-gradient(rgba(201, 168, 29, 0.15) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(201, 168, 29, 0.13) 1px, transparent 1px),
+        radial-gradient(circle at top left, rgb(var(--rgb-primary) / 0.2), transparent 30%),
+        radial-gradient(circle at bottom right, rgba(30, 246, 255, 0.16), transparent 24%),
+        linear-gradient(to bottom, rgba(25, 24, 16, 0.99), rgba(6, 10, 11, 0.99));
     background-size:
         28px 28px,
         28px 28px,
@@ -93,9 +103,49 @@
     position: absolute;
 }
 
+.structure-graph__edge-readout {
+    background: rgba(5, 7, 6, 0.97);
+    border: 1px solid rgba(30, 246, 255, 0.68);
+    box-shadow:
+        0 0 0 1px rgba(252, 227, 0, 0.16),
+        0 14px 32px rgba(0, 0, 0, 0.48);
+    color: #fffbd3;
+    left: 0;
+    max-width: min(24rem, calc(100% - 1.5rem));
+    min-width: 14rem;
+    padding: 0.625rem 0.75rem;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    z-index: 3;
+}
+
+.structure-graph__edge-readout[hidden] {
+    display: none;
+}
+
+.structure-graph__edge-readout-meta {
+    color: #1ef6ff;
+    font-family: var(--font-family-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+.structure-graph__edge-readout-path {
+    color: #fffbd3;
+    font-family: var(--font-family-mono);
+    font-size: 0.8125rem;
+    font-weight: 700;
+    line-height: 1.35;
+    margin-top: 0.25rem;
+    overflow-wrap: anywhere;
+}
+
 .structure-graph__empty {
     align-items: center;
-    color: rgba(231, 223, 189, 0.58);
+    color: rgba(255, 251, 211, 0.68);
     display: flex;
     flex-direction: column;
     gap: 0.625rem;
@@ -107,13 +157,13 @@
 }
 
 .structure-graph__empty-icon {
-    color: rgb(var(--rgb-primary) / 0.42);
+    color: rgb(var(--rgb-primary) / 0.58);
     font-size: 2.25rem;
 }
 
 .structure-graph__inspector {
-    background: linear-gradient(to bottom, rgba(26, 25, 23, 0.98), rgba(11, 11, 10, 0.99));
-    border-left: 1px solid rgba(138, 123, 52, 0.24);
+    background: linear-gradient(to bottom, rgba(29, 27, 18, 0.98), rgba(7, 9, 9, 0.99));
+    border-left: 1px solid rgba(201, 168, 29, 0.36);
     height: 100%;
     min-height: 0;
     overflow-y: auto;
@@ -138,8 +188,15 @@
     text-align: center;
 }
 
+.structure-graph__panel-heading {
+    align-items: center;
+    display: flex;
+    gap: 0.75rem;
+    justify-content: space-between;
+}
+
 .structure-graph__eyebrow {
-    color: rgba(231, 223, 189, 0.62);
+    color: rgba(255, 251, 211, 0.72);
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
     letter-spacing: 0.2em;
@@ -158,7 +215,7 @@
 }
 
 .structure-graph__subtitle {
-    color: rgba(231, 223, 189, 0.62);
+    color: rgba(255, 251, 211, 0.68);
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
     letter-spacing: 0.18em;
@@ -172,8 +229,8 @@
 }
 
 .structure-graph__summary-card {
-    background: rgba(15, 15, 13, 0.94);
-    border: 1px solid rgba(138, 123, 52, 0.26);
+    background: rgba(10, 11, 10, 0.96);
+    border: 1px solid rgba(201, 168, 29, 0.38);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -183,7 +240,7 @@
 }
 
 .structure-graph__summary-label {
-    color: rgba(231, 223, 189, 0.52);
+    color: rgba(255, 251, 211, 0.58);
     flex: 1;
     font-family: var(--font-family-mono);
     font-size: 0.5625rem;
@@ -202,8 +259,8 @@
 }
 
 .structure-graph__section {
-    background: rgba(15, 15, 13, 0.84);
-    border: 1px solid rgba(138, 123, 52, 0.22);
+    background: rgba(8, 10, 9, 0.9);
+    border: 1px solid rgba(201, 168, 29, 0.32);
     display: flex;
     flex-direction: column;
     gap: 0.875rem;
@@ -248,7 +305,7 @@
 }
 
 .structure-graph__column-type {
-    color: rgba(231, 223, 189, 0.58);
+    color: rgba(255, 251, 211, 0.62);
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
     letter-spacing: 0.14em;
@@ -263,9 +320,9 @@
 }
 
 .structure-graph__flag {
-    background: rgba(39, 38, 34, 0.94);
-    border: 1px solid rgba(138, 123, 52, 0.24);
-    color: rgba(244, 239, 232, 0.82);
+    background: rgba(48, 43, 18, 0.96);
+    border: 1px solid rgba(201, 168, 29, 0.4);
+    color: rgba(255, 251, 211, 0.86);
     font-family: var(--font-family-mono);
     font-size: 0.5625rem;
     letter-spacing: 0.14em;
@@ -274,19 +331,19 @@
 }
 
 .structure-graph__flag.is-key {
-    background: var(--primary-alpha-18);
-    border-color: rgb(var(--rgb-primary) / 0.34);
-    color: #fff6ae;
+    background: rgb(var(--rgb-primary) / 0.24);
+    border-color: rgb(var(--rgb-primary) / 0.58);
+    color: #fffbd3;
 }
 
 .structure-graph__flag.is-link {
-    background: rgba(45, 250, 255, 0.14);
-    border-color: rgba(45, 250, 255, 0.28);
-    color: #9ffcff;
+    background: rgba(30, 246, 255, 0.18);
+    border-color: rgba(30, 246, 255, 0.52);
+    color: #c9fdff;
 }
 
 .structure-graph__flag.is-nullable {
-    color: rgba(231, 223, 189, 0.58);
+    color: rgba(255, 251, 211, 0.62);
 }
 
 .structure-graph__list {
@@ -304,15 +361,59 @@
 }
 
 .structure-graph__list-item-label {
-    color: rgba(231, 223, 189, 0.62);
+    color: rgba(255, 251, 211, 0.68);
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
     letter-spacing: 0.14em;
     text-transform: uppercase;
 }
 
+.structure-graph__join-flow {
+    align-items: center;
+    display: grid;
+    gap: 0.625rem;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+
+.structure-graph__join-table {
+    background: rgba(48, 43, 18, 0.96);
+    border: 1px solid rgba(201, 168, 29, 0.42);
+    color: #fffbd3;
+    font-family: var(--font-family-mono);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    overflow-wrap: anywhere;
+    padding: 0.5rem 0.625rem;
+}
+
+.structure-graph__join-arrow {
+    color: #1ef6ff;
+    font-size: 1rem;
+}
+
+.structure-graph__join-condition-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.structure-graph__join-condition {
+    align-items: center;
+    color: rgba(255, 251, 211, 0.82);
+    display: grid;
+    font-family: var(--font-family-mono);
+    font-size: 0.625rem;
+    gap: 0.5rem;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+
+.structure-graph__join-condition span {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
 .structure-graph__ddl {
-    color: rgba(244, 239, 232, 0.78);
+    color: rgba(255, 251, 211, 0.82);
     font-family: var(--font-family-mono);
     font-size: 0.6875rem;
     line-height: 1.65;
@@ -322,13 +423,17 @@
     white-space: pre-wrap;
 }
 
+.structure-graph__join-sql {
+    max-height: 14rem;
+}
+
 .structure-entry--graph-active {
-    border-color: rgb(var(--rgb-primary) / 0.44);
-    box-shadow: inset 0 0 0 1px var(--primary-alpha-18);
+    border-color: rgb(var(--rgb-primary) / 0.6);
+    box-shadow: inset 0 0 0 1px rgb(var(--rgb-primary) / 0.28);
 }
 
 .structure-entry--graph-related {
-    border-color: rgba(45, 250, 255, 0.34);
+    border-color: rgba(30, 246, 255, 0.58);
 }
 
 @media (max-width: 1279px) {