starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-30 14:12:07 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Merge main into proxy branch (formatting and docs)

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Gregory Schier
2026-03-13 12:09:59 -07:00
parent 3c4035097a
commit 7314aedc71
712 changed files with 13408 additions and 13322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/yaak-proxy/components/ActionButton.tsx
View File

@@ -1,10 +1,10 @@
import type { ActionInvocation } from '@yaakapp-internal/proxy-lib';
import { Button, type ButtonProps } from '@yaakapp-internal/ui';
import { useCallback } from 'react';
import { useRpcMutation } from '../hooks/useRpcMutation';
import { useActionMetadata } from '../hooks/useActionMetadata';
import type { ActionInvocation } from "@yaakapp-internal/proxy-lib";
import { Button, type ButtonProps } from "@yaakapp-internal/ui";
import { useCallback } from "react";
import { useRpcMutation } from "../hooks/useRpcMutation";
import { useActionMetadata } from "../hooks/useActionMetadata";
type ActionButtonProps = Omit<ButtonProps, 'onClick' | 'children'> & {
type ActionButtonProps = Omit<ButtonProps, "onClick" | "children"> & {
action: ActionInvocation;
/** Override the label from metadata */
children?: React.ReactNode;
@@ -12,7 +12,7 @@ type ActionButtonProps = Omit<ButtonProps, 'onClick' | 'children'> & {
export function ActionButton({ action, children, ...props }: ActionButtonProps) {
const meta = useActionMetadata(action);
const { mutate, isPending } = useRpcMutation('execute_action');
const { mutate, isPending } = useRpcMutation("execute_action");
const onClick = useCallback(() => {
mutate(action);
@@ -25,7 +25,7 @@ export function ActionButton({ action, children, ...props }: ActionButtonProps)
isLoading={isPending}
onClick={onClick}
>
{children ?? meta?.label ?? '…'}
{children ?? meta?.label ?? "…"}
</Button>
);
}

16
apps/yaak-proxy/components/ActionIconButton.tsx
View File

@@ -1,17 +1,17 @@
import type { ActionInvocation } from '@yaakapp-internal/proxy-lib';
import { IconButton, type IconButtonProps } from '@yaakapp-internal/ui';
import { useCallback } from 'react';
import { useRpcMutation } from '../hooks/useRpcMutation';
import { useActionMetadata } from '../hooks/useActionMetadata';
import type { ActionInvocation } from "@yaakapp-internal/proxy-lib";
import { IconButton, type IconButtonProps } from "@yaakapp-internal/ui";
import { useCallback } from "react";
import { useRpcMutation } from "../hooks/useRpcMutation";
import { useActionMetadata } from "../hooks/useActionMetadata";
type ActionIconButtonProps = Omit<IconButtonProps, 'onClick' | 'title'> & {
type ActionIconButtonProps = Omit<IconButtonProps, "onClick" | "title"> & {
action: ActionInvocation;
title?: string;
};
export function ActionIconButton({ action, ...props }: ActionIconButtonProps) {
const meta = useActionMetadata(action);
const { mutate, isPending } = useRpcMutation('execute_action');
const { mutate, isPending } = useRpcMutation("execute_action");
const onClick = useCallback(() => {
mutate(action);
@@ -20,7 +20,7 @@ export function ActionIconButton({ action, ...props }: ActionIconButtonProps) {
return (
<IconButton
{...props}
title={props.title ?? meta?.label ?? '…'}
title={props.title ?? meta?.label ?? "…"}
disabled={props.disabled || isPending}
isLoading={isPending}
onClick={onClick}

22
apps/yaak-proxy/components/ExchangesTable.tsx
View File

@@ -1,4 +1,4 @@
import type { HttpExchange, ProxyHeader } from '@yaakapp-internal/proxy-lib';
import type { HttpExchange, ProxyHeader } from "@yaakapp-internal/proxy-lib";
import {
Table,
TableBody,
@@ -7,8 +7,8 @@ import {
TableHeaderCell,
TableRow,
TruncatedWideTableCell,
} from '@yaakapp-internal/ui';
import classNames from 'classnames';
} from "@yaakapp-internal/ui";
import classNames from "classnames";
interface Props {
exchanges: HttpExchange[];
@@ -59,19 +59,19 @@ function StatusBadge({ status, error }: { status: number | null; error: string |
const color =
status >= 500
? 'text-danger'
? "text-danger"
: status >= 400
? 'text-warning'
? "text-warning"
: status >= 300
? 'text-notice'
: 'text-success';
? "text-notice"
: "text-success";
return <span className={classNames('text-xs font-mono', color)}>{status}</span>;
return <span className={classNames("text-xs font-mono", color)}>{status}</span>;
}
function getContentType(headers: ProxyHeader[]): string {
const ct = headers.find((h) => h.name.toLowerCase() === 'content-type')?.value;
if (ct == null) return '—';
const ct = headers.find((h) => h.name.toLowerCase() === "content-type")?.value;
if (ct == null) return "—";
// Strip parameters (e.g. "; charset=utf-8")
return ct.split(';')[0]?.trim() ?? ct;
return ct.split(";")[0]?.trim() ?? ct;
}

51
apps/yaak-proxy/components/ProxyLayout.tsx
View File

@@ -1,33 +1,33 @@
import { HeaderSize, IconButton, SidebarLayout, SplitLayout } from '@yaakapp-internal/ui';
import classNames from 'classnames';
import { useAtomValue } from 'jotai';
import { useState } from 'react';
import { useLocalStorage } from 'react-use';
import { useRpcQueryWithEvent } from '../hooks/useRpcQueryWithEvent';
import { getOsType } from '../lib/tauri';
import { ActionIconButton } from './ActionIconButton';
import { ExchangesTable } from './ExchangesTable';
import { filteredExchangesAtom, Sidebar } from './Sidebar';
import { HeaderSize, IconButton, SidebarLayout, SplitLayout } from "@yaakapp-internal/ui";
import classNames from "classnames";
import { useAtomValue } from "jotai";
import { useState } from "react";
import { useLocalStorage } from "react-use";
import { useRpcQueryWithEvent } from "../hooks/useRpcQueryWithEvent";
import { getOsType } from "../lib/tauri";
import { ActionIconButton } from "./ActionIconButton";
import { ExchangesTable } from "./ExchangesTable";
import { filteredExchangesAtom, Sidebar } from "./Sidebar";
export function ProxyLayout() {
const os = getOsType();
const exchanges = useAtomValue(filteredExchangesAtom);
const [sidebarWidth, setSidebarWidth] = useLocalStorage('sidebar_width', 250);
const [sidebarHidden, setSidebarHidden] = useLocalStorage('sidebar_hidden', false);
const [sidebarWidth, setSidebarWidth] = useLocalStorage("sidebar_width", 250);
const [sidebarHidden, setSidebarHidden] = useLocalStorage("sidebar_hidden", false);
const [floatingSidebarHidden, setFloatingSidebarHidden] = useLocalStorage(
'floating_sidebar_hidden',
"floating_sidebar_hidden",
true,
);
const [floating, setFloating] = useState(false);
const { data: proxyState } = useRpcQueryWithEvent('get_proxy_state', {}, 'proxy_state_changed');
const isRunning = proxyState?.state === 'running';
const { data: proxyState } = useRpcQueryWithEvent("get_proxy_state", {}, "proxy_state_changed");
const isRunning = proxyState?.state === "running";
const isHidden = floating ? (floatingSidebarHidden ?? true) : (sidebarHidden ?? false);
return (
<div
className={classNames(
'h-full w-full grid grid-rows-[auto_1fr]',
os === 'linux' && 'border border-border-subtle',
"h-full w-full grid grid-rows-[auto_1fr]",
os === "linux" && "border border-border-subtle",
)}
>
<HeaderSize
@@ -44,7 +44,7 @@ export function ProxyLayout() {
<IconButton
size="sm"
title="Toggle sidebar"
icon={isHidden ? 'left_panel_hidden' : 'left_panel_visible'}
icon={isHidden ? "left_panel_hidden" : "left_panel_visible"}
iconColor="secondary"
onClick={() => {
if (floating) {
@@ -66,7 +66,7 @@ export function ProxyLayout() {
<>
<span className="text-2xs text-success">Running :9090</span>
<ActionIconButton
action={{ scope: 'global', action: 'proxy_stop' }}
action={{ scope: "global", action: "proxy_stop" }}
icon="circle_stop"
iconColor="secondary"
size="sm"
@@ -74,7 +74,7 @@ export function ProxyLayout() {
</>
) : (
<ActionIconButton
action={{ scope: 'global', action: 'proxy_start' }}
action={{ scope: "global", action: "proxy_start" }}
icon="circle_play"
iconColor="secondary"
size="sm"
@@ -95,9 +95,9 @@ export function ProxyLayout() {
floating ? (
<div
className={classNames(
'x-theme-sidebar',
'h-full bg-surface border-r border-border-subtle',
'grid grid-rows-[auto_1fr]',
"x-theme-sidebar",
"h-full bg-surface border-r border-border-subtle",
"grid grid-rows-[auto_1fr]",
)}
>
<HeaderSize
@@ -132,7 +132,10 @@ export function ProxyLayout() {
<ExchangesTable exchanges={exchanges} style={style} className="overflow-auto" />
)}
secondSlot={({ style }) => (
<div style={style} className="p-3 text-text-subtlest text-sm border-t border-border-subtle">
<div
style={style}
className="p-3 text-text-subtlest text-sm border-t border-border-subtle"
>
Select a request to view details
</div>
)}

31
apps/yaak-proxy/components/Sidebar.tsx
View File

@@ -1,10 +1,10 @@
import type { HttpExchange } from '@yaakapp-internal/proxy-lib';
import type { TreeNode } from '@yaakapp-internal/ui';
import { selectedIdsFamily, Tree } from '@yaakapp-internal/ui';
import { atom, useAtomValue } from 'jotai';
import { atomFamily } from 'jotai/utils';
import { useCallback } from 'react';
import { httpExchangesAtom } from '../lib/store';
import type { HttpExchange } from "@yaakapp-internal/proxy-lib";
import type { TreeNode } from "@yaakapp-internal/ui";
import { selectedIdsFamily, Tree } from "@yaakapp-internal/ui";
import { atom, useAtomValue } from "jotai";
import { atomFamily } from "jotai/utils";
import { useCallback } from "react";
import { httpExchangesAtom } from "../lib/store";
/** A node in the sidebar tree — either a domain or a path segment. */
export type SidebarItem = {
@@ -15,7 +15,7 @@ export type SidebarItem = {
const collapsedAtom = atomFamily((_treeId: string) => atom<Record<string, boolean>>({}));
export const SIDEBAR_TREE_ID = 'proxy-sidebar';
export const SIDEBAR_TREE_ID = "proxy-sidebar";
const sidebarTreeAtom = atom<TreeNode<SidebarItem>>((get) => {
const exchanges = get(httpExchangesAtom);
@@ -29,7 +29,7 @@ export const filteredExchangesAtom = atom((get) => {
const selectedIds = get(selectedIdsFamily(SIDEBAR_TREE_ID));
// Nothing selected or root selected → show all
if (selectedIds.length === 0 || selectedIds.includes('root')) {
if (selectedIds.length === 0 || selectedIds.includes("root")) {
return exchanges;
}
@@ -73,7 +73,7 @@ function collectNodes(node: TreeNode<SidebarItem>, map: Map<string, SidebarItem>
* /orders
*/
function buildTree(exchanges: HttpExchange[]): TreeNode<SidebarItem> {
const root: SidebarItem = { id: 'root', label: 'All Traffic', exchangeIds: [] };
const root: SidebarItem = { id: "root", label: "All Traffic", exchangeIds: [] };
const rootNode: TreeNode<SidebarItem> = {
item: root,
parent: null,
@@ -98,7 +98,7 @@ function buildTree(exchanges: HttpExchange[]): TreeNode<SidebarItem> {
try {
const url = new URL(ex.url);
hostname = url.host;
segments = url.pathname.split('/').filter(Boolean);
segments = url.pathname.split("/").filter(Boolean);
} catch {
hostname = ex.url;
segments = [];
@@ -125,7 +125,7 @@ function buildTree(exchanges: HttpExchange[]): TreeNode<SidebarItem> {
let child = current.children.get(seg);
if (!child) {
child = {
id: `path:${hostname}/${pathSoFar.join('/')}`,
id: `path:${hostname}/${pathSoFar.join("/")}`,
label: `/${seg}`,
exchangeIds: [],
children: new Map(),
@@ -166,7 +166,7 @@ function buildTree(exchanges: HttpExchange[]): TreeNode<SidebarItem> {
// Add a "Domains" folder between root and domain nodes
const allExchangeIds = exchanges.map((ex) => ex.id);
const domainsFolder: TreeNode<SidebarItem> = {
item: { id: 'domains', label: 'Domains', exchangeIds: allExchangeIds },
item: { id: "domains", label: "Domains", exchangeIds: allExchangeIds },
parent: rootNode,
depth: 1,
children: [],
@@ -197,7 +197,10 @@ export function Sidebar() {
const tree = useAtomValue(sidebarTreeAtom);
const treeId = SIDEBAR_TREE_ID;
const getItemKey = useCallback((item: SidebarItem) => `${item.id}:${item.exchangeIds.length}`, []);
const getItemKey = useCallback(
(item: SidebarItem) => `${item.id}:${item.exchangeIds.length}`,
[],
);
return (
<aside className="x-theme-sidebar bg-surface h-full w-full min-w-0 overflow-y-auto border-r border-border-subtle">