feat(tui): redesign chrome, color system, picker + theme typography

cmd/style.go

@@ -17,23 +17,38 @@
 package cmd
 
 import (
+	"pb/pkg/ui"
+
 	"github.com/charmbracelet/lipgloss"
 )
 
-// styling for cli outputs
+// Styles for the cobra command CLI outputs (prompts, error messages, list
+// items rendered outside the bubbletea TUI). Sourced from the shared
+// ui.Palette so any palette change auto-propagates here.
+//
+// Names kept stable for backwards compatibility with existing call sites
+// across cmd/ and pkg/model/.
 var (
-	FocusPrimary   = lipgloss.AdaptiveColor{Light: "16", Dark: "226"}
-	FocusSecondary = lipgloss.AdaptiveColor{Light: "18", Dark: "220"}
+	// FocusPrimary / FocusSecondary used to be yellow (ANSI 226/220). Now
+	// brand indigo — same role (selected / active item highlight) but
+	// matches the rest of the design system.
+	FocusPrimary   = ui.Adaptive(func(p ui.Palette) lipgloss.Color { return p.Accent })
+	FocusSecondary = ui.Adaptive(func(p ui.Palette) lipgloss.Color { return p.Accent2 })
+
+	StandardPrimary   = ui.Adaptive(func(p ui.Palette) lipgloss.Color { return p.Body })
+	StandardSecondary = ui.Adaptive(func(p ui.Palette) lipgloss.Color { return p.Mute })
 
-	StandardPrimary   = lipgloss.AdaptiveColor{Light: "235", Dark: "255"}
-	StandardSecondary = lipgloss.AdaptiveColor{Light: "238", Dark: "254"}
 	StandardStyle     = lipgloss.NewStyle().Foreground(StandardPrimary)
 	StandardStyleBold = lipgloss.NewStyle().Foreground(StandardPrimary).Bold(true)
 	StandardStyleAlt  = lipgloss.NewStyle().Foreground(StandardSecondary)
 	SelectedStyle     = lipgloss.NewStyle().Foreground(FocusPrimary).Bold(true)
 	SelectedStyleAlt  = lipgloss.NewStyle().Foreground(FocusSecondary)
-	SelectedItemOuter = lipgloss.NewStyle().BorderStyle(lipgloss.NormalBorder()).BorderLeft(true).PaddingLeft(1).BorderForeground(FocusPrimary)
-	ItemOuter         = lipgloss.NewStyle().PaddingLeft(1)
+	SelectedItemOuter = lipgloss.NewStyle().
+				BorderStyle(lipgloss.NormalBorder()).
+				BorderLeft(true).
+				PaddingLeft(1).
+				BorderForeground(FocusPrimary)
+	ItemOuter = lipgloss.NewStyle().PaddingLeft(1)
 
 	StyleBold = lipgloss.NewStyle().Bold(true)
 )

cmd/tui.go

@@ -0,0 +1,67 @@
+// Copyright (c) 2024 Parseable, Inc
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+package cmd
+
+import (
+	"fmt"
+	"pb/pkg/ui"
+	"pb/pkg/ui/views"
+
+	tea "github.com/charmbracelet/bubbletea"
+	"github.com/spf13/cobra"
+)
+
+// TuiCmd is the greenfield TUI entrypoint. It does NOT replace the
+// existing `pb query -i` interactive mode; both coexist while the new
+// pkg/ui/views/* implementations reach parity.
+//
+//	pb tui                  → start on picker
+//	PB_THEME=light pb tui   → light palette
+var TuiCmd = &cobra.Command{
+	Use:               "tui",
+	Short:             "Open the redesigned interactive TUI (greenfield)",
+	Long:              "Open the redesigned TUI (pkg/ui/*). Picker is the entry view; use 1-7 or breadcrumbs to switch.",
+	PersistentPreRunE: PreRunDefaultProfile,
+	RunE:              runTUI,
+}
+
+func runTUI(_ *cobra.Command, _ []string) error {
+	// Active profile + theme. PreRunDefaultProfile already populated
+	// the package-level DefaultProfile var.
+	profile := DefaultProfile
+	if profile.URL == "" {
+		return fmt.Errorf("no default profile — run `pb profile add` and `pb profile default <name>` first")
+	}
+	ui.SetActive(ui.LoadTheme())
+	ui.SetActiveIcons(ui.LoadIcons())
+
+	// Register one view per ViewID. Picker is real; others are empty
+	// placeholders until they get ported in subsequent PRs.
+	vmap := map[ui.ViewID]ui.View{
+		ui.ViewQuery:   views.EmptyView{Title: "QUERY", Hint: "SQL editor — coming next. Use `pb query -i` for now."},
+		ui.ViewResults: views.EmptyView{Title: "RESULTS", Hint: "Run a query to see results here."},
+		ui.ViewMetrics: views.EmptyView{Title: "METRICS", Hint: "PromQL editor — coming next. Use `pb query --promql -i` for now."},
+		ui.ViewPicker:  views.NewPicker(),
+		ui.ViewTime:    views.EmptyView{Title: "TIME RANGE", Hint: "Time picker modal — coming next."},
+		ui.ViewSaved:   views.EmptyView{Title: "SAVED", Hint: "Saved queries — coming next."},
+		ui.ViewHelp:    views.EmptyView{Title: "HELP", Hint: "Press 1-7 to switch views. Esc returns to query. Ctrl-c quits."},
+	}
+	app := ui.NewApp(profile, vmap)
+
+	_, err := tea.NewProgram(app, tea.WithAltScreen()).Run()
+	return err
+}
+

go.mod

@@ -38,6 +38,7 @@ require (
 	github.com/Masterminds/semver/v3 v3.3.0 // indirect
 	github.com/Masterminds/sprig/v3 v3.3.0 // indirect
 	github.com/Masterminds/squirrel v1.5.4 // indirect
+	github.com/alecthomas/chroma/v2 v2.24.1 // indirect
 	github.com/asaskevich/govalidator v0.0.0-20230301143203-a9d515a09cc2 // indirect
 	github.com/beorn7/perks v1.0.1 // indirect
 	github.com/blang/semver/v4 v4.0.0 // indirect
@@ -55,6 +56,7 @@ require (
 	github.com/cyphar/filepath-securejoin v0.3.4 // indirect
 	github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc // indirect
 	github.com/distribution/reference v0.6.0 // indirect
+	github.com/dlclark/regexp2 v1.12.0 // indirect
 	github.com/docker/cli v25.0.1+incompatible // indirect
 	github.com/docker/distribution v2.8.3+incompatible // indirect
 	github.com/docker/docker v25.0.6+incompatible // indirect
@@ -90,6 +92,7 @@ require (
 	github.com/gorilla/websocket v1.5.0 // indirect
 	github.com/gosuri/uitable v0.0.4 // indirect
 	github.com/gregjones/httpcache v0.0.0-20190611155906-901d90724c79 // indirect
+	github.com/guptarohit/asciigraph v0.9.0 // indirect
 	github.com/hashicorp/errwrap v1.1.0 // indirect
 	github.com/hashicorp/go-multierror v1.1.1 // indirect
 	github.com/huandu/xstrings v1.5.0 // indirect

go.sum

@@ -28,6 +28,8 @@ github.com/Microsoft/hcsshim v0.11.7 h1:vl/nj3Bar/CvJSYo7gIQPyRWc9f3c6IeSNavBTSZ
 github.com/Microsoft/hcsshim v0.11.7/go.mod h1:MV8xMfmECjl5HdO7U/3/hFVnkmSBjAjmA09d4bExKcU=
 github.com/Shopify/logrus-bugsnag v0.0.0-20171204204709-577dee27f20d h1:UrqY+r/OJnIp5u0s1SbQ8dVfLCZJsnvazdBP5hS4iRs=
 github.com/Shopify/logrus-bugsnag v0.0.0-20171204204709-577dee27f20d/go.mod h1:HI8ITrYtUY+O+ZhtlqUnD8+KwNPOyugEhfP9fdUIaEQ=
+github.com/alecthomas/chroma/v2 v2.24.1 h1:m5ffpfZbIb++k8AqFEKy9uVgY12xIQtBsQlc6DfZJQM=
+github.com/alecthomas/chroma/v2 v2.24.1/go.mod h1:l+ohZ9xRXIbGe7cIW+YZgOGbvuVLjMps/FYN/CwuabI=
 github.com/alecthomas/template v0.0.0-20160405071501-a0175ee3bccc/go.mod h1:LOuyumcjzFXgccqObfd/Ljyb9UuFJ6TxHnclSeseNhc=
 github.com/alecthomas/units v0.0.0-20151022065526-2efee857e7cf/go.mod h1:ybxpYRFXyAe+OPACYpWeL0wqObRcbAqCMya13uyzqw0=
 github.com/apache/arrow/go/v13 v13.0.0 h1:kELrvDQuKZo8csdWYqBQfyi431x6Zs/YJTEgUuSVcWk=
@@ -108,6 +110,8 @@ github.com/distribution/distribution/v3 v3.0.0-20221208165359-362910506bc2 h1:aB
 github.com/distribution/distribution/v3 v3.0.0-20221208165359-362910506bc2/go.mod h1:WHNsWjnIn2V1LYOrME7e8KxSeKunYHsxEm4am0BUtcI=
 github.com/distribution/reference v0.6.0 h1:0IXCQ5g4/QMHHkarYzh5l+u8T3t73zM5QvfrDyIgxBk=
 github.com/distribution/reference v0.6.0/go.mod h1:BbU0aIcezP1/5jX/8MP0YiH4SdvB5Y4f/wlDRiLyi3E=
+github.com/dlclark/regexp2 v1.12.0 h1:0j4c5qQmnC6XOWNjP3PIXURXN2gWx76rd3KvgdPkCz8=
+github.com/dlclark/regexp2 v1.12.0/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
 github.com/docker/cli v25.0.1+incompatible h1:mFpqnrS6Hsm3v1k7Wa/BO23oz0k121MTbTO1lpcGSkU=
 github.com/docker/cli v25.0.1+incompatible/go.mod h1:JLrzqnKDaYBop7H2jaqPtU4hHvMKP+vjCwu2uszcLI8=
 github.com/docker/distribution v2.8.3+incompatible h1:AtKxIZ36LoNK51+Z6RpzLpddBirtxJnzDrHLEKxTAYk=
@@ -233,6 +237,8 @@ github.com/gosuri/uitable v0.0.4 h1:IG2xLKRvErL3uhY6e1BylFzG+aJiwQviDDTfOKeKTpY=
 github.com/gosuri/uitable v0.0.4/go.mod h1:tKR86bXuXPZazfOTG1FIzvjIdXzd0mo4Vtn16vt0PJo=
 github.com/gregjones/httpcache v0.0.0-20190611155906-901d90724c79 h1:+ngKgrYPPJrOjhax5N+uePQ0Fh1Z7PheYoUI/0nzkPA=
 github.com/gregjones/httpcache v0.0.0-20190611155906-901d90724c79/go.mod h1:FecbI9+v66THATjSRHfNgh1IVFe/9kFxbXtjV0ctIMA=
+github.com/guptarohit/asciigraph v0.9.0 h1:MvCSRRVkT2XvU1IO6n92o7l7zqx1DiFaoszOUZQztbY=
+github.com/guptarohit/asciigraph v0.9.0/go.mod h1:dYl5wwK4gNsnFf9Zp+l06rFiDZ5YtXM6x7SRWZ3KGag=
 github.com/hashicorp/errwrap v1.0.0/go.mod h1:YH+1FKiLXxHSkmPseP+kNlulaMuP3n2brvKWEqk/Jc4=
 github.com/hashicorp/errwrap v1.1.0 h1:OxrOeh75EUXMY8TBjag2fzXGZ40LB6IKw45YeGUDY2I=
 github.com/hashicorp/errwrap v1.1.0/go.mod h1:YH+1FKiLXxHSkmPseP+kNlulaMuP3n2brvKWEqk/Jc4=

main.go

@@ -296,6 +296,7 @@ func main() {
 	cli.AddCommand(pb.LoginCmd)
 	cli.AddCommand(pb.LogoutCmd)
 	cli.AddCommand(pb.StatusCmd)
+	cli.AddCommand(pb.TuiCmd)
 
 	// Set as command
 	pb.VersionCmd.Run = func(_ *cobra.Command, _ []string) {

pkg/model/credential/credential.go

@@ -18,20 +18,21 @@ package credential
 
 import (
 	"pb/pkg/model/button"
+	"pb/pkg/ui"
 	"strings"
 
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
 )
 
-// Default Style for this widget
+// Default Style for this widget — theme-derived; yellow no more.
 var (
-	FocusPrimary   = lipgloss.AdaptiveColor{Light: "16", Dark: "226"}
-	FocusSecondary = lipgloss.AdaptiveColor{Light: "18", Dark: "220"}
+	FocusPrimary   = ui.Adaptive(func(p ui.Palette) lipgloss.Color { return p.Accent })
+	FocusSecondary = ui.Adaptive(func(p ui.Palette) lipgloss.Color { return p.Accent2 })
 
-	StandardPrimary   = lipgloss.AdaptiveColor{Light: "235", Dark: "255"}
-	StandardSecondary = lipgloss.AdaptiveColor{Light: "238", Dark: "254"}
+	StandardPrimary   = ui.Adaptive(func(p ui.Palette) lipgloss.Color { return p.Body })
+	StandardSecondary = ui.Adaptive(func(p ui.Palette) lipgloss.Color { return p.Mute })
 
 	focusedStyle = lipgloss.NewStyle().Foreground(FocusPrimary)
 	blurredStyle = lipgloss.NewStyle().Foreground(StandardSecondary)

pkg/model/defaultprofile/profile.go

@@ -19,21 +19,22 @@ import (
 	"fmt"
 	"io"
 	"pb/pkg/config"
+	"pb/pkg/ui"
 
 	"github.com/charmbracelet/bubbles/list"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
 )
 
 var (
-	// FocusPrimary is the primary focus color
-	FocusPrimary = lipgloss.AdaptiveColor{Light: "16", Dark: "226"}
-	// FocusSecondry is the secondry focus color
-	FocusSecondry = lipgloss.AdaptiveColor{Light: "18", Dark: "220"}
-	// StandardPrimary is the primary standard color
-	StandardPrimary = lipgloss.AdaptiveColor{Light: "235", Dark: "255"}
-	// StandardSecondary is the secondary standard color
-	StandardSecondary = lipgloss.AdaptiveColor{Light: "238", Dark: "254"}
+	// FocusPrimary is the primary focus color (brand indigo).
+	FocusPrimary = ui.Adaptive(func(p ui.Palette) lipgloss.Color { return p.Accent })
+	// FocusSecondry is the secondary focus color.
+	FocusSecondry = ui.Adaptive(func(p ui.Palette) lipgloss.Color { return p.Accent2 })
+	// StandardPrimary is the primary standard color.
+	StandardPrimary = ui.Adaptive(func(p ui.Palette) lipgloss.Color { return p.Body })
+	// StandardSecondary is the secondary standard color.
+	StandardSecondary = ui.Adaptive(func(p ui.Palette) lipgloss.Color { return p.Mute })
 
 	focusTitleStyle   = lipgloss.NewStyle().Foreground(FocusPrimary)
 	focusDescStyle    = lipgloss.NewStyle().Foreground(FocusSecondry)